/* ============================================================
   portada.css — portada ES (/) y EN (/en/) · rediseño fase 1 · 19-oct-2026
   Fuente: web/REDISENO-PROPUESTA-2026-10-19.md (expediente 7-graphic), decisiones D1-D8 aprobadas por Joan.

   Sistema (D1-D5):
   - El CMYK es CAMPO a pleno, con texto NEGRO encima. Nunca CMYK como color de texto sobre blanco.
     Magenta #EC008C (4,95:1 con negro) · Cian #00AEEF (8,30:1) · Amarillo #FFED00 (17,37:1) · Negro #1A1A1A (blanco encima, 17,4:1).
   - Dos campos iguales nunca seguidos. Orden: magenta · blanco · amarillo · blanco · cian · negro · blanco · amarillo · blanco.
   - Un solo botón primario: negro con texto blanco (.btn-k, en comun.css). Secundario con borde (.btn-o).
   - Archivo Black (lema y títulos), Archivo (texto), IBM Plex Mono (medidas y rótulos).
   - La portada es una página normal con secciones (D6): sin barra lateral ni scroll interno.
   Todas las clases van con prefijo p- para no chocar con producto.css / comun.css.
   ============================================================ */
:root{--m:#EC008C;--c:#00AEEF;--y:#FFED00;--k:#1A1A1A;--w:#fff;
  --display:"Archivo Black","Archivo",Arial,sans-serif;--body:"Archivo",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body.portada{font-family:var(--body);font-size:18px;line-height:1.45;color:var(--k);background:var(--w);-webkit-text-size-adjust:100%}
:where(.portada) a{color:inherit}
.portada img,.portada video{display:block;max-width:100%}
.portada :focus-visible{outline:3px solid var(--k);outline-offset:3px;border-radius:6px}
.portada .p-campo-k :focus-visible{outline-color:var(--y)}
.p-saltar{position:absolute;left:12px;top:-80px;z-index:200;background:var(--k);color:#fff;padding:14px 18px;border-radius:8px;font-weight:700;text-decoration:none}
.p-saltar:focus{top:12px}
.p-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.p-mono{font-family:var(--mono);font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:400}
.p-h2{font-family:var(--display);font-weight:400;font-size:56px;line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.p-sub{font-size:19px;max-width:44ch;margin-top:16px}

/* ---------- franja CMYK (firma: arriba del todo y encima del pie, nunca en cada tarjeta) ---------- */
.p-franja{height:8px;background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--k) 75%)}

/* ---------- cabecera ---------- */
.p-cab{background:var(--w)}
.p-cab .p-wrap{display:flex;align-items:center;gap:24px;min-height:84px}
.p-logo{display:inline-flex;align-items:center;min-height:48px;flex-shrink:0}
/* logo sin lema (control 19-oct): sin el lema cabe más grande en la misma altura de cabecera */
.p-logo img{width:128px;height:auto}
.p-nav{display:flex;gap:4px;margin-left:8px}
.p-nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 10px;font-weight:700;font-size:15px;text-decoration:none;border-radius:8px}
.p-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.p-cab-der{margin-left:auto;display:flex;align-items:center;gap:14px}
.p-tel{display:inline-flex;align-items:center;min-height:48px;padding:0 6px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.p-tel:hover{text-decoration:underline;text-underline-offset:4px}
.p-cab .lang-sw a,.p-cab .lang-sw span{font-family:var(--mono);font-weight:600;font-size:13px}

/* ---------- héroe (magenta) ---------- */
.p-hero{background:var(--m);overflow-x:clip} /* lo inclinado del collage no puede crear scroll lateral */
.p-hero .p-wrap{display:grid;grid-template-columns:1fr 1.02fr;gap:48px;align-items:center;padding-top:56px;padding-bottom:64px}
.p-h1{font-family:var(--body);font-weight:700;font-size:22px;line-height:1.25;margin-bottom:12px}
.p-lema{font-family:var(--display);font-weight:400;font-size:clamp(48px,6.6vw,96px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.p-baj{font-size:20px;max-width:30ch;margin:22px 0 12px}
.p-acc{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
/* collage de impresos reales (Joan 19-oct: «el héroe debería ser más impactante»): la carta en video, grande,
   y el banner y las tarjetas QR encima, inclinados como fotos sobre la mesa. Cada foto viene encuadrada para
   su caja (media-portada.py): aquí no se recorta nada. */
.p-collage{position:relative;aspect-ratio:1/1.02;width:100%;max-width:640px;justify-self:end}
.p-collage .p-vid{position:absolute;box-shadow:0 0 0 3px var(--k),0 18px 34px rgba(0,0,0,.28)}
.p-c1{left:17%;top:0;width:64%;aspect-ratio:4/5;transform:rotate(1.5deg);z-index:1}
.p-c2{left:0;bottom:2%;width:31%;aspect-ratio:9/16;transform:rotate(-5deg);z-index:2}
.p-c3{right:0;bottom:0;width:33%;aspect-ratio:4/5;transform:rotate(5deg);z-index:2}
.p-c1 .p-rot{top:0;bottom:auto;right:auto;border-bottom-right-radius:10px} /* arriba: abajo lo tapa el banner */

/* ---------- video con rótulo (todo el material es trabajo real) ---------- */
.p-vid{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--k);box-shadow:0 0 0 3px var(--k)}
.p-vid video,.p-vid img{width:100%;height:100%;object-fit:cover}
/* las fotos fijas del trabajo (R128: lo que era una foto con movimiento de cámara se sirve como foto) */
.p-vid picture,.p-cup-foto picture{display:block;width:100%;height:100%}
.p-cup-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* pausa de los videos que se mueven solos (WCAG 2.2.2): botón de 48 px, se enfoca con Tab. Lo crea el script. */
.p-pausa{position:absolute;top:8px;right:8px;z-index:3;width:48px;height:48px;border-radius:50%;border:2px solid #fff;background:var(--k);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.p-pausa svg{width:18px;height:18px;fill:currentColor}
.p-pausa:focus-visible{outline:3px solid var(--y);outline-offset:2px}
.p-m1 .p-pausa{top:10px;right:10px}
.p-vid.r916{aspect-ratio:9/16}
.p-vid.r45{aspect-ratio:4/5}
/* rótulo: banda negra sólida bajo el texto (no un degradado), legible sobre cualquier cuadro */
.p-rot{position:absolute;left:0;right:0;bottom:0;background:var(--k);color:#fff;font-family:var(--mono);font-weight:600;font-size:11px;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;padding:9px 10px}

/* ---------- párrafo para buscadores e IA (queda igual, a 16 px) ---------- */
.p-intro{background:var(--w);padding:28px 0}
.p-intro p{font-size:16px;line-height:1.6;max-width:96ch}

/* ---------- cómo se pide (amarillo) ---------- */
.p-pasos{background:var(--y);padding:72px 0}
.p-pasos .p-grid{display:grid;grid-template-columns:1.05fr 1.35fr;gap:56px;align-items:center}
.p-pasos ol{list-style:none;margin-top:26px}
.p-pasos li{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:16px 0;border-top:3px solid var(--k)}
.p-pasos li:last-child{border-bottom:3px solid var(--k)}
.p-pasos li b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1}
.p-pasos li strong{display:block;font-size:20px;line-height:1.25;margin-bottom:2px}
.p-pasos li p{font-size:17px}

/* M1 · pedir en 3 pasos: animación por código (sin IA, sin cifras). Explica el orden: eliges → subes tu arte → te llega. */
.p-m1{position:relative;aspect-ratio:16/9;background:var(--k);border-radius:16px;overflow:hidden;display:grid;place-items:center;padding:28px}
.p-m1-tira{display:flex;align-items:center;width:100%;justify-content:center}
/* Control 19-oct (R3): en reposo se apaga SOLO el fondo (gris oscuro con el borde del color del paso); el texto queda
   siempre a contraste pleno: blanco sobre #2B2B30 en reposo (13,5:1), negro sobre el color cuando el paso está activo.
   El cambio de fondo y de tinta es en escalón (steps): nunca hay un cuadro intermedio con la tinta a medio camino. */
.p-m1-paso{--pc:var(--c);position:relative;width:27%;aspect-ratio:1;border-radius:14px;display:flex;flex-direction:column;justify-content:space-between;padding:14px;background:#2B2B30;color:#fff;box-shadow:inset 0 0 0 3px var(--pc);transform:scale(.92);animation:p-m1-c 9s steps(1,end) infinite,p-m1 9s infinite}
.p-m1-paso i{font-style:normal;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.06em}
.p-m1-paso span{font-family:var(--display);font-size:clamp(12px,1.55vw,22px);overflow-wrap:normal;hyphens:none;line-height:.95;text-transform:uppercase}
.p-m1-paso.s1{--pc:var(--c);animation-delay:0s}
.p-m1-paso.s2{--pc:var(--m);animation-delay:3s}
.p-m1-paso.s3{--pc:var(--y);animation-delay:6s}
.p-m1-flecha{width:6%;height:3px;background:#fff;opacity:.5;position:relative}
.p-m1-flecha::after{content:"";position:absolute;right:-1px;top:-5px;border-left:9px solid #fff;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
.p-m1-pie{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.18)}
.p-m1-pie::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:#fff;transform-origin:left;animation:p-m1-barra 9s linear infinite}
@keyframes p-m1{0%{transform:scale(.92)}4%,30%{transform:scale(1)}36%,100%{transform:scale(.92)}}
@keyframes p-m1-c{0%{background:var(--pc);color:#000}33.333%{background:#2B2B30;color:#fff}}
.p-m1.pausado .p-m1-paso,.p-m1.pausado .p-m1-pie::after{animation-play-state:paused}
@keyframes p-m1-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.p-m1-paso{background:var(--pc);color:#000;box-shadow:none;transform:none}.p-m1-pie{display:none}}

/* ---------- ofertas con precio (blanco) ---------- */
.p-ofertas{background:var(--w);padding:80px 0 72px}
.p-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
/* cupones: UNA sola declaración por contexto (W54, control 19-oct N2). minmax(0,1fr): a 1024 un título largo en EN empujaba 95 px de scroll horizontal */
.p-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
/* 5 cupones (19-oct, vuelta 5): 3 + 2 en escritorio, 2 + 2 + 1 en tablet; la fila corta va CENTRADA a propósito, igual que la galería.
   min-width:0 cumple lo que hacía minmax(0,1fr): un título largo no empuja scroll horizontal */
.p-cards>.p-cupon{flex:0 0 calc((100% - 56px) / 3);min-width:0}
.p-card{position:relative;border:3px solid var(--k);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background:var(--w)}
.p-card .p-media{position:relative;aspect-ratio:4/5;background:var(--k)}
.p-card .p-media video,.p-card .p-media img{width:100%;height:100%;object-fit:cover;display:block}
.p-fam{position:absolute;left:0;top:0;z-index:2;padding:7px 11px;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--k);border-bottom-right-radius:10px}
.p-fam.f-m{background:var(--m)}.p-fam.f-c{background:var(--c)}.p-fam.f-y{background:var(--y)}
.p-card .p-cuerpo{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.p-card h3{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.02;text-transform:uppercase}
.p-spec{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:inherit}
.p-precio{margin-top:auto;padding-top:12px;font-family:var(--display);font-size:40px;line-height:1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.p-precio small,.p-alt{font-family:var(--mono);font-size:13px;font-weight:600}
.p-precio.sin{font-family:var(--body);font-weight:700;font-size:17px}
.p-alt{margin-top:2px}
.p-alt b{font-family:var(--display);font-weight:400;font-size:18px}
.p-card .p-bot{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.p-card .btn-k{width:100%}
/* envío gratis de la oferta: lo escribe build-portafolio.mjs desde ofertas-portada.json (se apaga ahí) */
.p-envio{align-self:flex-start;margin-top:8px;background:var(--k);color:var(--y);font-family:var(--mono);font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;padding:6px 9px;border-radius:6px}
.p-envio-k{margin-top:14px;font-weight:700;color:var(--y)}
.p-ver{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:3px}
.p-es{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.p-nota{margin-top:22px}

/* ---------- portafolio (cian) ---------- */
.p-trabajos{background:var(--c);padding:80px 0 100px}
/* cinco piezas (vuelta 3: el menú de lunch salía dos veces; queda solo en su cupón). Escritorio: 5 columnas */
.p-gal{--g:14px;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--g);margin-top:32px}
.p-gal .p-vid:nth-child(even){transform:translateY(28px)}
.p-gal .p-rot{font-size:11px}

/* ---------- te lo llevamos (negro) ---------- */
.p-campo-k{background:var(--k);color:#fff}
.p-entrega{padding:80px 0}
.p-entrega .p-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.p-entrega .p-h2{color:var(--y)}
.p-entrega p{font-size:19px;max-width:38ch;margin-top:18px}
.p-entrega .p-mono{color:var(--y);margin-top:18px}
.p-enlace-y{display:inline-flex;align-items:center;min-height:48px;margin-top:14px;color:var(--y);font-weight:700;font-size:18px;text-decoration:underline;text-underline-offset:4px}
.p-entrega .p-dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.p-entrega .p-vid{box-shadow:none}

/* ---------- catálogo (blanco) ---------- */
.p-catalogo{background:var(--w);padding:80px 0}
.p-cat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.p-prod{position:relative;display:flex;flex-direction:column;border:3px solid var(--k);border-radius:14px;overflow:hidden;text-decoration:none;background:var(--w);transition:transform .15s}
.p-prod:hover{transform:translateY(-3px)}
.p-prod .p-media{position:relative;aspect-ratio:4/5;background:var(--k)}
.p-prod .p-media img{width:100%;height:100%;object-fit:cover}
/* ficha tipográfica sin foto: mejor sin foto que un render (W38/R12), hasta el rodaje (D14) */
.p-tipo{display:flex;align-items:flex-end;padding:16px;font-family:var(--display);font-size:clamp(20px,2.1vw,30px);line-height:.92;text-transform:uppercase;color:var(--k);overflow-wrap:normal;hyphens:none}
.p-tipo.f-m{background:var(--m)}.p-tipo.f-c{background:var(--c)}.p-tipo.f-y{background:var(--y)}
.p-prod .p-cuerpo{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.p-prod h3{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.02;text-transform:uppercase}
.p-prod p{font-size:16px}
.p-prod .p-ir{margin-top:auto;padding-top:6px;font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:3px}
.p-prod.p-otro{background:var(--k);color:#fff;padding:20px;justify-content:space-between}
.p-prod.p-otro h3{color:var(--y)}
.p-cerca{margin-top:36px}
.p-cerca h3{font-family:var(--display);font-weight:400;font-size:24px;text-transform:uppercase;margin-bottom:12px}
.p-cerca ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.p-cerca a{display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;border:2.5px solid var(--k);border-radius:999px;font-weight:700;font-size:16px;text-decoration:none}
.p-cerca a:hover{background:rgba(26,26,26,.08)}

/* ---------- plantillas (amarillo) ---------- */
.p-plantillas{background:var(--y);padding:80px 0}
.p-plantillas .p-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:56px;align-items:start}
.p-plantillas .p-sangrado{max-width:300px;justify-self:end;width:100%}
.p-guia{display:flex;align-items:center;gap:16px;margin-top:28px;padding:18px 20px;background:var(--k);color:#fff;border-radius:14px;text-decoration:none;min-height:48px}
.p-guia b{display:block;font-size:18px}
.p-guia span{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--y);text-transform:uppercase}
.p-guia .p-dl{margin-left:auto;font-weight:700;white-space:nowrap;color:#fff;text-transform:none;font-family:var(--body);font-size:16px;text-decoration:underline;text-underline-offset:3px}
.p-tmpl{margin-top:22px}
.p-tmpl h3{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.p-tmpl ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.p-tmpl a{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:2.5px solid var(--k);border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;background:transparent}
.p-tmpl a:hover{background:rgba(26,26,26,.1)}
.p-tmpl-nota{margin-top:22px;font-size:16px;max-width:60ch}

/* ---------- pie y contacto ---------- */
.p-pie{background:var(--w);padding:44px 0 40px}
.p-pie .p-wrap{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start}
.p-pie .p-logo img{width:150px}
.p-pie h2{font-family:var(--display);font-weight:400;font-size:28px;text-transform:uppercase;margin-bottom:14px}
.p-pie dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.p-pie dt{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.p-pie dd{font-size:16px}
.p-pie dd a{display:inline-flex;align-items:center;min-height:48px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.p-pie .p-firma{grid-column:1/-1;font-family:var(--mono);font-size:13px;border-top:2px solid var(--k);padding-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.p-pie .p-firma a{display:inline-flex;align-items:center;min-height:48px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- barra inferior del teléfono (4 accesos: Productos · Pedir · WhatsApp · Más) ---------- */
.p-barra{display:none}
.p-mas{display:none}

/* ============================================================
   TABLET (W11: 3 columnas desde 1000 px; 2 por debajo)
   ============================================================ */
@media (max-width:1240px){
  .p-nav a{padding:0 7px;font-size:14px}
  .p-tel{display:none}
}
@media (max-width:1100px){
  .p-cat{grid-template-columns:repeat(3,1fr)}
  /* 3 por fila: la segunda fila (2 piezas) va centrada, sin hueco a la derecha */
  .p-gal{display:flex;flex-wrap:wrap;justify-content:center}
  .p-gal .p-vid{flex:0 0 calc((100% - 2 * var(--g)) / 3)}
  .p-gal .p-vid:nth-child(even){transform:none}
}
@media (max-width:999px){
  .p-nav{display:none}
  .p-cards>.p-cupon{flex-basis:calc((100% - 28px) / 2)}
  .p-cat{grid-template-columns:repeat(2,1fr)}
  .p-hero .p-wrap,.p-pasos .p-grid,.p-entrega .p-grid,.p-plantillas .p-grid{grid-template-columns:1fr;gap:32px}
  .p-plantillas .p-sangrado{justify-self:start}
  .p-pie .p-wrap{grid-template-columns:1fr}
}

/* ============================================================
   TELÉFONO
   ============================================================ */
@media (max-width:760px){
  body.portada{font-size:17px;padding-bottom:76px}
  .p-wrap{padding:0 16px}
  .p-h2{font-size:36px}
  .p-sub{font-size:17px}
  .p-cab .p-wrap{min-height:64px;gap:10px}
  .p-logo img{width:86px}
  .p-cab-der{gap:8px}
  .p-cab .btn-k{min-height:48px;padding:0 16px;font-size:15px}
  .p-cab .lang-sw{border:0;padding:0}
  /* héroe: primero el collage, después el texto y los botones, todo dentro de 844 px (W10) */
  .p-hero .p-wrap{display:flex;flex-direction:column-reverse;gap:0;padding:12px 16px 26px}
  .p-hero .p-txt{padding-top:18px;display:flex;flex-direction:column}
  /* en el teléfono los botones van pegados al lema, para que el collage pueda ser grande y «Ver precios» siga en la primera pantalla (W10) */
  .p-hero .p-acc{order:3;margin-top:16px}
  .p-hero .p-baj{order:4;margin:16px 0 8px}
  .p-hero .p-mono{order:5}
  .p-h1{font-size:17px;margin-bottom:6px}
  .p-lema{font-size:46px}
  .p-baj{font-size:17px;margin:12px 0 8px}
  .p-hero .p-mono{font-size:12px}
  .p-acc{margin-top:16px;gap:10px;flex-wrap:nowrap}
  .p-acc a{flex:1;padding:0 12px;min-height:50px}
  .p-acc .p-largo{display:none}
  .p-collage{max-width:none;aspect-ratio:1/1.02;margin:2px 0 24px}
  .p-collage .p-vid{box-shadow:0 0 0 3px var(--k),0 8px 14px rgba(0,0,0,.22)} /* sombra corta: no oscurece el H1 de abajo */
  .p-c1{left:15%;width:70%}
  .p-c2{width:29%;bottom:4%}
  .p-c3{width:31%;bottom:1%}
  .p-collage .p-rot{font-size:11px;padding:7px 8px}
  .p-intro{padding:22px 0}
  .p-pasos,.p-ofertas,.p-trabajos,.p-entrega,.p-catalogo,.p-plantillas{padding:48px 0}
  .p-pasos li b{font-size:32px}
  .p-pasos li strong{font-size:18px}
  .p-m1{padding:14px}
  .p-m1-paso{padding:8px;border-radius:10px}
  .p-m1-paso i{font-size:11px}
  .p-top{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:22px}
  .p-card{border-width:2.5px}
  .p-card .p-cuerpo{padding:12px}
  .p-card h3{font-size:17px}
  .p-spec{font-size:12px}
  .p-precio{font-size:30px}
  .p-precio.sin{font-size:15px}
  .p-card .btn-k{min-height:48px;padding:0 10px}
  .p-fam{font-size:11px;padding:6px 8px}
  .p-gal{--g:8px}
  .p-gal .p-rot{font-size:11px;letter-spacing:.02em;padding:7px 6px}
  .p-entrega p{font-size:17px}
  .p-cat{gap:10px}
  .p-prod{border-width:2.5px}
  .p-prod h3{font-size:17px}
  /* ficha tipográfica a 390: «HABLADORES» se partía en «HABLADOR / ES» (overflow-wrap) */
  .p-tipo{font-size:15px;padding:12px;overflow-wrap:normal}
  .p-prod p{font-size:15px}
  .p-prod .p-cuerpo{padding:10px 12px 12px}
  /* «¿OTRO PRODUCTO?» se pasaba 1,2 px de su caja a 360 (control v4): el relleno baja de 20 a 14 px, igual que la ficha tipográfica */
  .p-prod.p-otro{padding:14px}
  .p-guia{flex-wrap:wrap}
  .p-guia .p-dl{margin-left:0}
  .p-plantillas .p-sangrado{max-width:220px}
  .p-pie dl{grid-template-columns:1fr}
  /* barra inferior: 4 accesos de 48 px o más (W9) */
  .p-barra{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--w);border-top:3px solid var(--k);padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
  .p-barra a,.p-barra button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;background:none;border:0;border-radius:10px;font-family:var(--body);font-weight:700;font-size:13px;color:var(--k);text-decoration:none;cursor:pointer}
  .p-barra svg{width:22px;height:22px;fill:none;stroke:var(--k);stroke-width:2}
  .p-barra .p-b-pedir{background:var(--k);color:#fff;margin:2px}
  .p-barra .p-b-pedir svg{stroke:#fff}
  .p-mas{position:fixed;left:0;right:0;bottom:70px;z-index:89;background:var(--w);border-top:3px solid var(--k);padding:8px 16px 12px;box-shadow:0 -12px 28px rgba(0,0,0,.15)}
  .p-mas:not([hidden]){display:block}
  .p-mas a{display:flex;align-items:center;min-height:48px;font-weight:700;font-size:17px;text-decoration:none;border-bottom:1px solid #e3e3e3}
  .p-mas a:last-child{border-bottom:0}
}
@media (max-width:360px){.p-lema{font-size:40px}}

/* ============================================================
   CUPONES DE PRECIO ESPECIAL (pedido de Joan, 19-oct) · reemplazan a las tarjetas de oferta
   - Color de la familia a pleno (D1), texto negro. Talón arriba, cuerpo abajo, separados por una línea de puntos
     con muescas semicirculares a los lados y una tijera DIBUJADA en SVG (V18: nunca un carácter de fuente).
   - «Precio especial» como rótulo; el precio es lo más grande, leído del cotizador. Sin «antes», sin % ni cuentas
     regresivas: no existe un precio anterior (V77/V78).
   ============================================================ */
.p-cupon{--cf:var(--m);position:relative;display:flex;flex-direction:column;background:var(--cf);color:var(--k);border-radius:18px}
.p-cupon.f-m{--cf:var(--m)}.p-cupon.f-c{--cf:var(--c)}.p-cupon.f-y{--cf:var(--y)}
.p-cup-talon{padding:20px 20px 14px;display:flex;flex-direction:column;gap:6px}
.p-cup-rot{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;align-self:flex-start;border:2px solid var(--k);border-radius:4px;padding:3px 7px}
.p-cupon h3{font-family:var(--display);font-weight:400;font-size:24px;line-height:1;text-transform:uppercase}
.p-cupon .p-spec{font-size:13px}
.p-cup-corte{position:relative;height:30px;padding:0 24px 0 40px;background-image:radial-gradient(circle,var(--k) 1.6px,transparent 1.8px);background-size:9px 30px;background-repeat:repeat-x;background-position:0 50%;background-origin:content-box;background-clip:content-box}
/* muescas: medio círculo del color de la sección (blanco) a cada lado de la línea de corte */
.p-cup-corte::before,.p-cup-corte::after{content:"";position:absolute;top:0;width:30px;height:30px;border-radius:50%;background:var(--w)}
.p-cup-corte::before{left:-15px}.p-cup-corte::after{right:-15px}
.p-tijera{position:absolute;left:14px;top:50%;width:22px;height:22px;transform:translateY(-50%) rotate(-90deg);fill:none;stroke:var(--k);stroke-width:2.2;stroke-linecap:round}
.p-cup-cuerpo{padding:14px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.p-cup-foto{position:relative;margin:0;aspect-ratio:5/4;border-radius:10px;overflow:hidden;background:var(--k);border:2.5px solid var(--k)}
.p-cup-foto video{width:100%;height:100%;object-fit:cover;display:block}
.p-cup-sin{display:flex;align-items:flex-end;padding:16px;background:var(--w)}
.p-cup-sin span{font-family:var(--display);font-size:clamp(20px,2.2vw,30px);line-height:.98;text-transform:uppercase}
.p-cupon .p-precio{font-size:clamp(40px,3.9vw,56px);padding-top:6px;margin-top:auto}
.p-cupon .p-precio small{font-size:14px}
.p-cupon .p-envio{margin-top:2px;align-self:stretch;text-align:center;font-size:12.5px;padding:8px 10px}
.p-cupon .p-bot{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.p-cupon .btn-k{width:100%}
.p-todas{display:inline-flex;align-items:center;min-height:48px;margin-right:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .p-cards{gap:22px}
  .p-cards>.p-cupon{flex-basis:100%}
  .p-cupon{display:grid;grid-template-columns:1fr}
  .p-cupon h3{font-size:22px}
  .p-cupon .p-precio{font-size:48px}
}

/* ---------- MEDIDO el 19-oct: sobre MAGENTA el negro de marca #1A1A1A da 4,1:1 (no alcanza 4,5 en texto normal).
   El 4,95 de la propuesta es con negro puro. En los campos magenta el texto va en #000 (5,0:1).
   Cian (7,0:1) y amarillo (15,4:1) siguen con #1A1A1A. ---------- */
.p-hero,.p-cupon.f-m,.p-fam.f-m,.p-tipo.f-m{color:#000}
.p-hero .btn-o{color:#000;border-color:#000}
.p-cupon.f-m .p-cup-rot{border-color:#000}
.p-cab .lang-sw a{background:transparent}
/* talón de alto fijo por tramo para que la tijera quede a la misma altura en toda la fila (medido vuelta 5: máx. 159 px entre 761 y 1279, 140 desde 1280) */
@media (min-width:761px){.p-cup-talon{min-height:160px}}
@media (min-width:1280px){.p-cup-talon{min-height:140px}}
@media (max-width:760px){.p-cup-sin{aspect-ratio:auto;min-height:120px}}
.p-cupon h3,.p-cupon .p-spec{overflow-wrap:normal;hyphens:none}