/* INFINITEA Tés Finos · hoja de estilo
   Basada en el diseño del sitio anterior (2018-2026). */
:root{
  --crema:#F7F5ED;
  --arena:#E6E1CA;
  --arena-oscura:#A19C7F;
  --oro:#D6CBA3;
  --salvia:#6DA698;
  --salvia-oscura:#4E8778;
  --magenta:#962164;
  --dorado:#A8864A;
  --verde:#0F6341;
  --verde-tinte:#E4EAE0;
  --texto:#414141;
  --suave:#6b6a64;
  --linea:rgba(65,65,65,.12);
  --ancho:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--texto);font-family:"Nunito Sans",Avenir,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--salvia-oscura)}
strong,b{font-weight:700}
h1,h2,h3{font-weight:700;color:var(--salvia-oscura);line-height:1.25;margin:0 0 .6em}
h1{font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:.02em}
h2{font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:.02em}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.angosto{max-width:760px;margin:0 auto}
.centro{text-align:center}
.guion{font-family:"Sacramento",cursive;font-weight:400;font-size:2.4rem;line-height:1.2;color:var(--arena-oscura)}
.etiqueta{display:block;text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;font-weight:700;color:var(--arena-oscura);margin-bottom:.5em}

/* Encabezado */
.cabecera{background:var(--crema)}
.cabecera .marca{display:flex;justify-content:center;padding:18px 20px 10px}
.cabecera .marca img{width:150px}
.menu{background:var(--arena)}
.menu .envoltura{display:flex;align-items:center;justify-content:center}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.menu a{display:block;padding:16px 15px;color:#7b7764;text-decoration:none;font-size:.95rem;font-weight:400;transition:color .2s}
.menu a:hover,.menu a[aria-current=page]{color:var(--magenta)}
.menu .boton-menu{display:none}
.franja{background:var(--salvia);color:#fff;text-align:center;padding:10px 20px 6px}
.franja p{font-family:"Sacramento",cursive;font-size:2.1rem;margin:0;line-height:1.4}

/* Botones */
.boton{display:inline-block;padding:13px 28px;border-radius:40px;background:var(--salvia);color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.03em;border:2px solid var(--salvia);transition:background .2s,color .2s;cursor:pointer;font-family:inherit}
.boton:hover{background:var(--salvia-oscura);border-color:var(--salvia-oscura)}
.boton.claro{background:transparent;color:var(--salvia-oscura)}
.boton.claro:hover{background:var(--salvia);color:#fff}
.boton.magenta{background:var(--magenta);border-color:var(--magenta)}
.boton.magenta:hover{background:#7a1a51;border-color:#7a1a51}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.2em}
.centro .botones{justify-content:center}

/* Secciones */
.seccion{padding:64px 0}
.seccion.crema{background:var(--crema)}
.seccion.arena{background:var(--arena)}
.seccion.tinte{background:var(--verde-tinte)}
.portada img{width:100%;max-width:980px;margin:0 auto;aspect-ratio:788/410;object-fit:cover}
.portada{background:var(--crema)}
.imagen-cabeza{position:relative;height:clamp(240px,42vw,460px);overflow:hidden}
.imagen-cabeza img{width:100%;height:100%;object-fit:cover}
.imagen-cabeza .velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55));display:flex;align-items:flex-end}
.imagen-cabeza h1{color:#fff;margin:0;padding:0 0 28px}
.imagen-cabeza .sub{color:#fff;font-family:"Sacramento",cursive;font-size:2rem;margin:0 0 6px;line-height:1.1}

/* Dos puertas */
.puertas{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:-1px}
.puerta{display:block;text-decoration:none;color:var(--texto);background:#fff;border:1px solid var(--linea);border-radius:8px;overflow:hidden;transition:box-shadow .3s}
.puerta:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.puerta-foto{aspect-ratio:16/9;overflow:hidden}
.puerta-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.puerta:hover .puerta-foto img{transform:scale(1.03)}
.puerta-texto{padding:22px 26px 26px;text-align:center}
.puerta-texto h3{font-size:1.25rem;margin:0 0 .3em}
.puerta-texto p{margin:0 0 .8em;color:var(--suave)}
.puerta .flecha{font-weight:700;letter-spacing:.06em;font-size:.82rem;text-transform:uppercase;color:var(--magenta)}

/* Mosaico */
.mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tarjeta{text-decoration:none;color:var(--texto);display:block}
.tarjeta .foto{aspect-ratio:1/1;overflow:hidden;background:var(--crema)}
.tarjeta .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tarjeta .foto.contener img{object-fit:contain;padding:12%}
.tarjeta:hover .foto img{transform:scale(1.04)}
.tarjeta h3{margin:.9em 0 .2em;color:var(--salvia-oscura)}
.tarjeta p{margin:0;color:var(--suave);font-size:.95rem}

/* Bloque dividido */
.dividido{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.dividido.invertido .medio:first-child{order:2}
.dividido img{border-radius:4px}

/* Firma Sensorial destacada */
.firma{background:var(--verde);color:#f1efe4}
.firma h2,.firma h3{color:#fff}
.firma .guion{color:var(--oro)}
.firma .etiqueta{color:var(--oro)}
.firma a.boton.claro{color:#fff;border-color:#fff}
.firma a.boton.claro:hover{background:#fff;color:var(--verde)}

/* Firma Sensorial en panel claro con borde verde, como el sitio original */
.firma-clara > .envoltura{background:#EEF0EA;border:8px solid #4A6830;border-radius:26px;padding:clamp(26px,4vw,52px);max-width:calc(var(--ancho) - 40px)}
.firma-clara h2{color:var(--verde)}
.firma-clara .guion{color:var(--arena-oscura)}
.firma-clara img{border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 18px 16px -16px rgba(0,0,0,.3)}
.materiales{font-size:.92rem;color:var(--suave);border-top:1px solid var(--linea);padding-top:14px;margin-top:6px}
@media (max-width:720px){.firma-clara > .envoltura{border-width:6px;border-radius:18px;margin:0 14px}}

/* Pasos */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:paso}
.paso{border-top:2px solid var(--oro);padding-top:16px}
.paso:before{counter-increment:paso;content:counter(paso,decimal-leading-zero);display:block;font-family:"Sacramento",cursive;font-size:2.2rem;color:var(--arena-oscura);line-height:1}
.paso h3{margin:.4em 0 .3em}
.paso p{font-size:.95rem;margin:0}

/* Cita */
.cita{font-size:1.15rem;font-style:italic;border-left:3px solid var(--oro);padding:4px 0 4px 24px;margin:1.5em 0}
.cita cite{display:block;font-style:normal;font-weight:700;font-size:.9rem;margin-top:.8em;color:var(--arena-oscura)}
.firma .cita{border-color:var(--oro)}

/* Clientes */
.clientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:18px;align-items:center}
.clientes img{width:100%;aspect-ratio:1/1;object-fit:contain;filter:grayscale(100%);opacity:.8;transition:filter .3s,opacity .3s;background:#fff;border-radius:12px}
.clientes img:hover{filter:none;opacity:1}

/* Premios */
.premios{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.premio{display:flex;gap:20px;align-items:center}
.premio img{width:110px;flex:none}

/* Sellos */
.sellos{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 22px}
.sello{text-align:center;font-size:.82rem;line-height:1.45;color:var(--suave)}
.sello img{width:84px;height:84px;object-fit:contain;margin:0 auto 10px}
.sello b{display:block;color:var(--texto);font-size:.85rem;margin-bottom:2px}

/* Conciencia */
.conciencia{display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:stretch;background:#16291D;color:#EDEFE6;border-radius:6px;overflow:hidden}
.conciencia .foto img{width:100%;height:100%;object-fit:cover;min-height:320px}
.conciencia .texto{padding:40px}
.conciencia h2{color:#fff}
.conciencia .guion{color:#D9C27E}
.conciencia ul{list-style:none;padding:0;margin:0 0 1.4em}
.conciencia li{padding:6px 0 6px 28px;position:relative}
.conciencia li:before{content:"";position:absolute;left:4px;top:15px;width:10px;height:10px;border-radius:50%;background:#5C8A66}
.conciencia .boton{background:#5C8A66;border-color:#5C8A66}
.conciencia .boton:hover{background:#D9C27E;border-color:#D9C27E;color:#16291D}

/* Formularios */
form.formulario{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.formulario .ancho{grid-column:1/-1}
form.formulario label{display:block;font-size:.85rem;font-weight:700;margin-bottom:4px}
form.formulario input,form.formulario textarea,form.formulario select{width:100%;padding:12px 14px;border:1px solid #cfcab3;border-radius:4px;font:inherit;font-weight:400;background:#fff;color:var(--texto)}
form.formulario textarea{min-height:110px;resize:vertical}
form.formulario .oculto{display:none}
.nota{font-size:.85rem;color:var(--suave)}

/* Texto largo */
.texto-largo h2{margin-top:1.6em}
.texto-largo h3{margin-top:1.4em}

/* Pie */
.pie{background:var(--arena);color:#5d5a4a;font-size:.92rem;padding:44px 0 28px}
.pie .columnas{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.pie h4{margin:0 0 .6em;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#7b7764}
.pie a{color:#5d5a4a;text-decoration:none}
.pie a:hover{color:var(--magenta)}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin:4px 0}
.pie .redes{display:flex;gap:12px;margin-top:10px}
.pie .redes a{display:flex;width:38px;height:38px;border-radius:50%;background:var(--salvia);align-items:center;justify-content:center}
.pie .redes svg{width:18px;height:18px;fill:#fff}
.pie .voz{margin-top:14px}
.pie .voz a{color:var(--verde);font-weight:700}
.pie .final{border-top:1px solid rgba(0,0,0,.08);margin-top:30px;padding-top:18px;text-align:center;font-size:.82rem}

/* WhatsApp flotante */
.wa-flotante{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.2);z-index:50}
.wa-flotante svg{width:30px;height:30px;fill:#fff}

/* Carta y despensa */
.carta h2{font-weight:400;font-style:italic;color:var(--texto);font-size:clamp(1.3rem,2.4vw,1.7rem);max-width:640px;margin:0 auto 1.4em}
.carta p{font-size:1.05rem}
.carta .etiqueta{text-align:center}
.firma-nombre{font-family:"Sacramento",cursive;font-size:clamp(3.6rem,7vw,5.4rem);color:var(--magenta);text-align:center;margin:1em 0 0;line-height:1}
.despensa{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:32px}
.despensa div{background:var(--crema);padding:24px;border-radius:6px;border-top:3px solid var(--oro)}
.despensa h3{margin:0 0 .4em}
.despensa p{margin:0;font-size:.95rem}
.despensa.tres{grid-template-columns:repeat(3,1fr)}

.valores{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.valores{gap:6px 0}
.valores span{font-size:1rem;font-weight:400;padding:2px 14px;color:var(--texto)}
.valores span+span:before{content:"·";color:var(--arena-oscura);margin-right:14px;margin-left:-14px}

.guion-serif{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.45rem;color:#D9C27E;line-height:1.35;margin:0 0 1em}
.destacado{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.2rem;color:var(--salvia-oscura);border-left:3px solid var(--oro);padding-left:18px}
.retrato{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:60% 25%;margin:1.6em auto 0}
.video-vertical{width:100%;max-width:320px;margin:0 auto;border-radius:8px;display:block;aspect-ratio:480/848;object-fit:cover;background:#ddd}
.video-ancho{width:100%;border-radius:6px;display:block;margin-bottom:22px;background:#222}

.historia{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;max-width:860px;margin:0 auto 56px}
.historia video{width:100%;aspect-ratio:478/850;border-radius:10px;background:#111;object-fit:cover}

.promo{padding-top:0}
.promo-caja{display:grid;grid-template-columns:240px 1fr 260px;gap:32px;align-items:center;background:var(--crema);border:1px solid var(--oro);border-radius:8px;padding:28px}
.promo-foto img{border-radius:6px;width:100%}
.promo-texto h2{font-size:1.5rem}
.vimeo{position:relative;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:#111}
.vimeo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* ============ Detalles finos (heredados del sitio anterior) ============ */

/* Tipografía: títulos en serif, como el sitio original */
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:.01em}
h3{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.01em}
.tarjeta h3,.puerta-texto h3{font-weight:400;font-size:1.2rem}
.centro .etiqueta,.etiqueta.centro{display:flex;align-items:center;justify-content:center;gap:14px}
.centro .etiqueta:before,.centro .etiqueta:after,.etiqueta.centro:before,.etiqueta.centro:after{content:"";width:26px;height:1px;background:currentColor;opacity:.55}

/* Hoja de té dibujada, en gris verdoso, sobre los fondos claros */
.seccion.crema,.seccion.arena,.con-hoja{position:relative;overflow:hidden;isolation:isolate}
.seccion.crema:before,.seccion.arena:before,.con-hoja:before{content:"";position:absolute;z-index:-1;pointer-events:none;
  width:clamp(170px,26vw,330px);aspect-ratio:664/720;background:url(../img/hoja-trazo.png) no-repeat center/contain;opacity:.38;
  top:-24px;right:-40px;transform:translateY(calc(var(--desliz,0) * 1px)) rotate(10deg)}
.seccion.crema.hoja-izq:before,.seccion.arena:before{right:auto;left:-50px;top:auto;bottom:-30px;transform:translateY(calc(var(--desliz,0) * 1px)) scaleX(-1) rotate(14deg)}

/* Banda con video lento que se revela detrás del texto al bajar */
.banda-video{position:relative;min-height:clamp(380px,62vh,560px);display:flex;align-items:center;justify-content:center;clip-path:inset(0);-webkit-clip-path:inset(0);color:#fff;text-align:center;padding:60px 20px;background:#1c1712}
.banda-video video,.banda-video .fondo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.banda-video:after{content:"";position:absolute;inset:0;z-index:1;background:url(../img/trama-puntos.png),linear-gradient(rgba(18,14,10,.42),rgba(18,14,10,.42))}
.banda-video .contenido{position:relative;z-index:2;max-width:720px}
.banda-video blockquote{margin:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(1.2rem,2.5vw,1.6rem);line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.banda-video cite{display:block;margin-top:1.4em;font-style:italic;font-weight:700;font-size:1.05rem}
.banda-video .guion{color:#fff;font-size:2.6rem;margin:0 0 .3em}

/* Viernes Verde: fondo claro con hojas dibujadas a ambos lados */
.viernes-verde{position:relative;overflow:hidden;isolation:isolate;background:#EEF1E7;padding:72px 0}
.viernes-verde:before,.viernes-verde:after{content:"";position:absolute;z-index:-1;pointer-events:none;width:clamp(150px,22vw,290px);aspect-ratio:664/720;background:url(../img/hoja-trazo.png) no-repeat center/contain;opacity:.45}
.viernes-verde:before{left:-40px;top:20px;transform:rotate(-18deg)}
.viernes-verde:after{right:-40px;bottom:10px;transform:scaleX(-1) rotate(-12deg)}
.viernes-verde h2{font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--verde);margin-bottom:.3em}
.vv-intro{color:var(--suave);max-width:560px;margin:0 auto}
.vv-productos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,300px));justify-content:center;gap:26px;margin-top:34px}
.vv-tarjeta{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06),0 18px 18px -16px rgba(0,0,0,.28);display:flex;flex-direction:column}
.vv-foto{aspect-ratio:1/1;background:#fff}
.vv-foto img{width:100%;height:100%;object-fit:contain;padding:8%}
.vv-texto{padding:18px 20px 22px;text-align:center;display:flex;flex-direction:column;flex:1}
.vv-texto h3{font-weight:400;font-size:1.15rem;margin:0 0 .3em}
.vv-texto p{font-size:.92rem;color:var(--suave);margin:0 0 .6em}
.vv-precio{font-size:1.1rem !important;color:var(--texto) !important;margin-top:auto !important}
.vv-precio s{color:var(--arena-oscura);font-size:.9em;margin-right:6px}
.vv-precio b{color:var(--verde)}
.vv-texto .boton{margin-top:6px;align-self:center}
.vv-vacio{margin-top:26px}
.vv-vacio p{color:var(--suave)}

/* Portada de Harney & Sons: hojas sueltas sobre blanco y el escudo */
.harney-portada{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:#fff;min-height:clamp(320px,44vw,520px);overflow:hidden}
.harney-portada .hojas{height:100%;min-height:320px}
.harney-portada .hojas img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.harney-portada .texto{text-align:center;padding:40px 24px}
.harney-portada .texto img{width:min(360px,80%);margin:18px auto 10px}
.harney-portada .texto p{font-family:Georgia,serif;font-style:italic;color:var(--suave);margin:0}

/* Tarjetas con marco blanco y sombra levantada */
.tarjeta .foto{border:8px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.06),0 18px 16px -16px rgba(0,0,0,.32);background:#fff}
.puerta{border:0;box-shadow:0 1px 3px rgba(0,0,0,.06),0 18px 18px -16px rgba(0,0,0,.28)}

/* Responsabilidad social en panel salvia redondeado */
.panel-sellos{background:#E1E6DA;border-radius:18px;padding:34px clamp(18px,4vw,48px) 40px}
.panel-sellos h2.guion{font-size:2.6rem;color:#968E62;margin:0}

/* Pie oscuro con hojas, como el original */
.pie{background:#2E4238 url(../img/pie-hojas.jpg) repeat center top;color:#E6EBE2}
.pie h4{color:#fff;font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.22em}
.pie a{color:#E6EBE2}
.pie a:hover{color:#D9C27E}
.pie .redes a{background:#fff}
.pie .redes svg{fill:#2E4238}
.pie .voz a{color:#D9C27E}
.pie .final{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}
.pie .contacto-tel{letter-spacing:.12em}

/* Imagen de cabecera con leve paralaje */
.imagen-cabeza img,.imagen-cabeza video{height:118% !important;margin-top:-9%;transform:translateY(calc(var(--desliz,0) * 1px));will-change:transform}

/* Aparición suave al bajar por la página */
.js .revelar{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}
.js .revelar.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .revelar{opacity:1;transform:none;transition:none}
  .imagen-cabeza img,.imagen-cabeza video,.seccion.crema:before,.seccion.arena:before{transform:none !important}
}

@media (max-width:720px){
  .harney-portada{grid-template-columns:1fr}
  .harney-portada .hojas{min-height:220px;max-height:260px}
  .viernes-verde{padding:52px 0}
  .viernes-verde:before,.viernes-verde:after{opacity:.28}
  .panel-sellos .sellos{grid-template-columns:1fr 1fr}
  .seccion.crema:before,.seccion.arena:before{opacity:.25}
  .panel-sellos{border-radius:12px}
}

/* Página del QR de las etiquetas de té */
.te-portada{background:var(--crema);padding:56px 0 46px;position:relative;overflow:hidden;isolation:isolate}
.te-portada:before{content:"";position:absolute;z-index:-1;width:clamp(150px,22vw,280px);aspect-ratio:664/720;background:url(../img/hoja-trazo.png) no-repeat center/contain;opacity:.4;right:-40px;bottom:-40px;transform:scaleX(-1) rotate(-12deg)}
.te-atajos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}
.te-atajos a{display:block;padding:14px 10px;background:#fff;border-radius:8px;text-decoration:none;color:var(--verde);font-family:Georgia,serif;font-size:1rem;box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 14px -14px rgba(0,0,0,.3)}
.tabla-te{overflow-x:auto;margin:24px 0 16px}
.tabla-te table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden}
.tabla-te th,.tabla-te td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--linea);font-size:.95rem}
.tabla-te thead th{background:var(--verde);color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.tabla-te tbody th{font-family:Georgia,serif;font-weight:400;color:var(--verde)}
.tabla-te .ej{color:var(--suave);font-size:.88rem}
@media (max-width:720px){.te-atajos{grid-template-columns:1fr 1fr}.tabla-te .ej{display:none}.tabla-te th,.tabla-te td{padding:11px 10px}}

.video-yt{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#111;box-shadow:0 1px 3px rgba(0,0,0,.06),0 18px 18px -16px rgba(0,0,0,.3)}
.video-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Celular */
@media (max-width:860px){
  .mosaico{grid-template-columns:1fr 1fr;gap:18px}
  .pasos{grid-template-columns:1fr 1fr}
  .promo-caja{grid-template-columns:200px 1fr}
  .promo-video{grid-column:1/-1;max-width:320px;margin:0 auto;width:100%}
  .despensa{grid-template-columns:1fr 1fr}
  .sellos{grid-template-columns:repeat(3,1fr)}
  .pie .columnas{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .seccion{padding:44px 0}
  .menu .envoltura{justify-content:space-between;padding:0}
  .menu .boton-menu{display:flex;align-items:center;gap:10px;background:none;border:0;padding:14px 20px;font:inherit;font-weight:700;color:#7b7764;cursor:pointer;width:100%;justify-content:center}
  .menu ul{display:none;flex-direction:column;width:100%;padding-bottom:8px}
  .menu.abierto ul{display:flex}
  .menu a{padding:11px 20px;text-align:center}
  .franja p{font-size:1.6rem}
  .puertas,.dividido,.premios,.conciencia,.historia,.promo-caja{grid-template-columns:1fr}
  .promo-foto img,.promo-video{max-width:300px;margin:0 auto}
  .historia video{max-width:300px;margin:0 auto}
  .dividido{gap:24px}
  .dividido.invertido .medio:first-child{order:0}
  .mosaico{grid-template-columns:1fr 1fr;gap:14px}
  .tarjeta h3{font-size:1rem}
  .tarjeta p{font-size:.85rem}
  .pasos{grid-template-columns:1fr}
  .despensa,.despensa.tres{grid-template-columns:1fr}
  form.formulario{grid-template-columns:1fr}
  .conciencia .texto{padding:28px 22px}
  .guion{font-size:2rem}
  .clientes{grid-template-columns:repeat(4,1fr);gap:10px}
  #propuesta .pasos{grid-template-columns:1fr !important}
}

/* Video del taller de empaques */
.video-taller{margin:0 auto;max-width:400px}
.video-taller video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:4px;background:#e9e3d8;box-shadow:0 18px 40px -22px rgba(40,30,20,.45)}
.video-taller figcaption{margin-top:14px;text-align:center;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.1rem;color:#4a5a50}
@media (max-width:720px){.video-taller{max-width:320px}}
.video-taller figcaption a{display:block;margin-top:6px;font-family:"Nunito Sans",Arial,sans-serif;font-style:normal;font-size:.9rem;color:#4A6830;text-decoration:underline;text-underline-offset:3px}
.firma-clara .video-taller{max-width:330px}
/* Menu de 8 opciones en una sola linea */
@media (min-width:721px){.menu .envoltura{max-width:1240px}.menu a{padding:16px 12px}}
@media (max-width:720px){.menu .envoltura{flex-direction:column}}
@media (min-width:721px) and (max-width:1120px){.menu a{padding:15px 8px;font-size:.88rem}}
@media (min-width:721px) and (max-width:940px){.menu a{padding:14px 5px;font-size:.8rem}}

/* El tempo de tu taza (temporizador del QR) */
.tempo{background:#F5F2EA}
.tempo-intro{max-width:560px;margin:0 auto 22px}
.tempo-tipos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:18px}
.tempo-tipos button{font:inherit;font-size:.95rem;padding:9px 18px;border-radius:30px;border:1.5px solid #4A6830;background:#fff;color:#4A6830;cursor:pointer}
.tempo-tipos button.activo{background:#4A6830;color:#fff}
.tempo-escena{max-width:420px;margin:0 auto}
.tempo-taza{width:min(260px,70vw);height:auto;display:block;margin:0 auto}
.tempo-taza .tz-vapor path{fill:none;stroke:#99885A;stroke-width:2.5;stroke-linecap:round;opacity:.7}
.tempo-taza rect{transition:fill .6s}
#tz-hoja{animation:tz-flota 6s ease-in-out infinite;transform-origin:120px 100px}
@keyframes tz-flota{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(6px) rotate(8deg)}}
.tempo-frase{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.15rem;line-height:1.55;color:#4a5a50;min-height:5.2em;margin:16px auto 6px;opacity:0;transition:opacity .9s}
.tempo-frase.visible{opacity:1}
.tempo-dato{font-size:.95rem;color:#7b7764;letter-spacing:.04em;margin-bottom:14px}
.tempo-controles .boton[disabled]{opacity:.45;cursor:default}
.tempo-fin{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){#tz-hoja{animation:none}}
.tempo [hidden]{display:none!important}

/* Sommelier: que el video no corte la cabeza de Jenny */
.cabeza-somm{height:clamp(300px,40vw,520px)}
.cabeza-somm video{height:100% !important;margin-top:0 !important;transform:none !important;object-position:50% 18%}