:root{
  --azul:#1d4fb8; --azul-osc:#0f2a66; --rojo:#d7282f; --rojo-osc:#a51c22;
  --cempa:#f2a516; --rosa:#e0337e; --verde:#1f8a4c;
  --tinta:#1a1712; --gris:#5f5a52; --linea:#e6ded0;
  --crema:#fbf6ee; --papel:#ffffff;
  --display:"Fraunces",Georgia,serif; --texto:"DM Sans",system-ui,sans-serif;
  --r:18px; --ancho:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--texto);color:var(--tinta);background:var(--crema);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--display);line-height:1.1;font-weight:600;letter-spacing:-.01em}
h2{font-size:clamp(30px,4.2vw,48px)}
.antetitulo{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--rojo);margin-bottom:12px;display:block}

/* Papel picado: franja de colores */
.franja{height:6px;background:linear-gradient(90deg,var(--rojo) 0 20%,var(--cempa) 20% 40%,var(--verde) 40% 60%,var(--rosa) 60% 80%,var(--azul) 80%)}

/* Encabezado */
.encabezado{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.encabezado .contenedor{display:flex;align-items:center;gap:28px;height:76px}
.marca img{height:54px;width:auto}
.menu{display:flex;gap:28px;list-style:none;margin-left:auto}
.menu a{text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.02em;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{border-color:var(--rojo);color:var(--rojo)}
.redes{display:flex;gap:8px}
.redes a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--crema);border:1px solid var(--linea);transition:.2s}
.redes a:hover{background:var(--azul);border-color:var(--azul);color:#fff}
.redes svg{width:18px;height:18px;fill:currentColor}
.boton-menu{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer}
.boton-menu span{display:block;height:2px;background:var(--tinta);margin:6px 8px;transition:.2s}

@media(max-width:860px){
  .boton-menu{display:block}
  .menu{position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--linea);display:none;padding:8px 20px 16px}
  .menu.abierto{display:flex}
  .menu a{display:block;padding:12px 0;border:0;font-size:17px}
  .encabezado .redes{display:none}
  .menu .redes-movil{display:flex;gap:10px;padding-top:10px}
}
@media(min-width:861px){.menu .redes-movil{display:none}}
.redes-movil a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--crema);border:1px solid var(--linea)}
.redes-movil svg{width:18px;height:18px;fill:currentColor}

/* Portada */
.portada{position:relative;min-height:calc(100svh - 82px);display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;background:#1a0f0a}
.portada>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:respira 18s ease-in-out infinite alternate}
@keyframes respira{to{transform:scale(1.12)}}
.portada::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(15,10,30,.55),rgba(10,8,20,.82))}
.portada .contenido{position:relative;z-index:2;padding:60px 20px;max-width:860px}
.sello{width:150px;height:150px;margin:0 auto 28px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.sello img{width:112px}
.portada h1{font-size:clamp(38px,6.4vw,76px);font-weight:600}
.portada h1 em{font-style:italic;color:var(--cempa)}
.portada p{font-size:clamp(17px,2vw,20px);max-width:620px;margin:22px auto 0;opacity:.92}
.desde{display:inline-block;font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--cempa);margin-bottom:16px}
.acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;transition:.2s;border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-rojo:hover{background:var(--rojo-osc)}
.btn-claro{border-color:rgba(255,255,255,.7);color:#fff}
.btn-claro:hover{background:#fff;color:var(--tinta)}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-osc)}
.btn-borde{border-color:var(--tinta);color:var(--tinta)}
.btn-borde:hover{background:var(--tinta);color:#fff}
.btn[disabled],.btn.desactivado{opacity:.45;pointer-events:none}

/* Banner de frases */
.frases{background:var(--azul-osc);color:#fff;overflow:hidden;padding:22px 0;border-top:4px solid var(--cempa)}
.frases .pista{display:flex;gap:60px;width:max-content;animation:corre 40s linear infinite}
.frases span{font-family:var(--display);font-size:clamp(20px,2.4vw,28px);font-style:italic;white-space:nowrap;display:flex;align-items:center;gap:60px}
.frases span::after{content:"✦";color:var(--cempa);font-style:normal;font-size:.7em}
@keyframes corre{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.frases .pista,.portada>img,.cinta .pista{animation:none}}

/* Secciones */
.seccion{padding:100px 0}
.seccion.blanca{background:var(--papel)}
.dos{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
@media(max-width:860px){.dos{grid-template-columns:1fr;gap:36px}.seccion{padding:70px 0}}
.dos p{color:var(--gris);margin-top:18px;font-size:18px}
.dos p strong{color:var(--tinta)}
.foto-marco{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;position:relative;box-shadow:0 30px 60px -30px rgba(40,20,0,.45)}
.foto-marco img{width:100%;height:100%;object-fit:cover}
.foto-marco .etiqueta{position:absolute;left:16px;bottom:16px;background:#fff;padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px}

/* Cifras */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.cifras div{background:var(--crema);border:1px solid var(--linea);border-radius:14px;padding:18px}
.cifras b{display:block;font-family:var(--display);font-size:34px;color:var(--rojo);line-height:1}
.cifras small{color:var(--gris);font-size:14px}
@media(max-width:520px){.cifras{grid-template-columns:1fr}}

/* Tarjetas de líneas */
.encabezado-sec{text-align:center;max-width:680px;margin:0 auto 52px}
.encabezado-sec p{color:var(--gris);margin-top:14px;font-size:18px}
.lineas{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:1000px){.lineas{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.lineas{grid-template-columns:repeat(2,1fr);gap:12px}}
.linea{background:#fff;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:.25s}
.linea:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(40,20,0,.35);border-color:transparent}
.linea .fotos{aspect-ratio:1;position:relative;background:var(--crema)}
.linea .fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;opacity:0;transition:opacity .8s}
.linea .fotos img.activa{opacity:1}
.linea .texto{padding:16px 18px 20px;border-top:1px solid var(--linea)}
.linea h3{font-size:21px}
.linea small{color:var(--gris);font-size:14px;display:block;margin-top:4px}
.linea .ver{margin-top:10px;font-weight:700;font-size:14px;color:var(--rojo)}
.pendiente-foto{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:18px;color:var(--gris);font-size:13px;background:repeating-linear-gradient(45deg,#f6efe2 0 12px,#fbf6ee 12px 24px)}
.pendiente-foto b{display:block;font-family:var(--display);font-size:24px;color:var(--tinta);margin-bottom:6px}

/* Pilares */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
@media(max-width:860px){.pilares{grid-template-columns:1fr}}
.pilar{background:#fff;border-radius:var(--r);padding:30px;border:1px solid var(--linea);position:relative;overflow:hidden}
.pilar::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--c,var(--rojo))}
.pilar .num{font-family:var(--display);font-size:46px;color:var(--c,var(--rojo));line-height:1;opacity:.9}
.pilar h3{font-size:24px;margin:14px 0 10px}
.pilar p{color:var(--gris)}
.formula{margin-top:56px;text-align:center;font-family:var(--display);font-size:clamp(22px,3vw,32px);max-width:860px;margin-left:auto;margin-right:auto;line-height:1.35}
.formula em{color:var(--rojo)}

/* CTA */
.llamado{background:var(--rojo);color:#fff;border-radius:28px;padding:56px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
.llamado::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;border:40px solid rgba(255,255,255,.1)}
.llamado h2{font-size:clamp(28px,3.4vw,40px);max-width:560px}
.llamado p{opacity:.9;margin-top:8px}
.llamado .btn{background:#fff;color:var(--rojo);position:relative;z-index:1}
@media(max-width:640px){.llamado{padding:36px 26px}}

/* Página de producto */
.miga{font-size:14px;color:var(--gris);padding:26px 0 0}
.miga a{text-decoration:none;font-weight:600}
.miga a:hover{color:var(--rojo)}
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:30px 0 90px;align-items:start}
@media(max-width:900px){.ficha{grid-template-columns:1fr;gap:34px}}
.ficha h1{font-size:clamp(36px,5vw,58px)}
.ficha .desc{color:var(--gris);font-size:18px;margin-top:18px}
.logo-marca{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:10px 16px;background:#fff;border:1px solid var(--linea);border-radius:12px;font-weight:700;font-size:14px}
.logo-marca img{height:34px;width:auto}
.bloque{margin-top:32px}
.bloque h3{font-family:var(--texto);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:12px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 16px;border-radius:999px;background:#fff;border:1.5px solid var(--linea);font-weight:600;font-size:15px;cursor:pointer;font-family:inherit;color:inherit;transition:.15s}
.chip:hover{border-color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.chip .punto{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:0}
.tamanos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tamano{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:12px;text-align:center}
.tamano img{aspect-ratio:1;object-fit:contain;width:100%;margin-bottom:8px}
.tamano b{display:block;font-size:16px}
.tamano small{color:var(--gris);font-size:13px}
table.presentaciones{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--linea);font-size:15px}
.presentaciones th,.presentaciones td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--linea);vertical-align:top}
.presentaciones th{background:var(--tinta);color:#fff;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.presentaciones tr:last-child td{border-bottom:0}
.nota{font-size:13px;color:var(--gris);margin-top:10px}

/* Carrusel */
.carrusel{position:sticky;top:100px;background:#fff;border:1px solid var(--linea);border-radius:22px;overflow:hidden}
@media(max-width:900px){.carrusel{position:relative;top:0}}
.carrusel .vista{aspect-ratio:1;position:relative;background:var(--crema)}
.carrusel .vista img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:28px;opacity:0;transition:opacity .5s}
.carrusel .vista img.activa{opacity:1}
.carrusel .flecha{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12);cursor:pointer;font-size:20px;z-index:2}
.carrusel .izq{left:14px}.carrusel .der{right:14px}
.carrusel .pie{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--linea);font-weight:600;font-size:15px}
.carrusel .contador{color:var(--gris);font-size:13px;font-weight:500}
.miniaturas{display:flex;gap:8px;padding:0 14px 14px;overflow-x:auto;scrollbar-width:thin}
.miniaturas button{flex:0 0 64px;height:64px;border-radius:10px;border:2px solid transparent;background:var(--crema);padding:4px;cursor:pointer}
.miniaturas button[aria-current="true"]{border-color:var(--rojo)}
.miniaturas img{width:100%;height:100%;object-fit:contain}

/* Rejilla de tés */
.rejilla-tes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.te{background:#fff;border:1px solid var(--linea);border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;padding:0;color:inherit}
.te img{aspect-ratio:1;object-fit:cover;width:100%}
.te span{display:block;padding:10px 12px;font-size:13px;font-weight:700;line-height:1.3}
.te:hover{border-color:var(--verde)}
.lista-tes{columns:3 160px;column-gap:24px;font-size:14px;color:var(--gris);background:#fff;border:1px solid var(--linea);border-radius:14px;padding:20px 24px}
.lista-tes li{list-style:none;padding:3px 0;break-inside:avoid}
.lista-tes li::before{content:"🌿 ";font-size:11px}
.otros{padding:70px 0;border-top:1px solid var(--linea);background:#fff}
.otros .lineas{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.otros .lineas{grid-template-columns:repeat(2,1fr)}}

/* Contacto */
.cinta{overflow:hidden;background:#fff;padding:34px 0;border-bottom:1px solid var(--linea)}
.cinta .pista{display:flex;gap:18px;width:max-content;animation:corre 70s linear infinite}
.cinta img{height:150px;width:150px;object-fit:contain;background:var(--crema);border-radius:16px;padding:10px}
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:80px 0}
@media(max-width:860px){.contacto{grid-template-columns:1fr}}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:28px}
.tarjeta h3{font-size:24px;margin-bottom:6px}
.tarjeta .rol{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--rojo)}
.tarjeta a.dato{display:flex;align-items:center;gap:10px;margin-top:14px;text-decoration:none;font-weight:600}
.tarjeta a.dato:hover{color:var(--azul)}
.personas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:520px){.personas{grid-template-columns:1fr}}
.mapa{border-radius:var(--r);overflow:hidden;border:1px solid var(--linea);min-height:380px;height:100%}
.mapa iframe{width:100%;height:100%;min-height:380px;border:0;display:block}

/* Pie */
.pie-sitio{background:var(--tinta);color:#cfc8bb;padding:64px 0 28px;font-size:15px}
.pie-sitio .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:860px){.pie-sitio .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pie-sitio .cols{grid-template-columns:1fr}}
.pie-sitio .logo-pie{background:#fff;border-radius:14px;padding:10px 14px;display:inline-block}
.pie-sitio .logo-pie img{height:50px}
.pie-sitio h4{color:#fff;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.pie-sitio ul{list-style:none}
.pie-sitio li{margin:6px 0}
.pie-sitio a{text-decoration:none}
.pie-sitio a:hover{color:#fff}
.pie-sitio .legal{border-top:1px solid #3a352d;margin-top:44px;padding-top:22px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* WhatsApp flotante */
.wa{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:60}
.wa svg{width:30px;height:30px;fill:#fff}

/* Aparición */
.aparece{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.aparece.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.aparece{opacity:1;transform:none}}
.ficha>div,.tamano,.dos>*,.lineas>*{min-width:0}
body{overflow-x:hidden}
.chip .punto{box-shadow:0 0 0 2px #fff}
@media(max-width:900px){.ficha>div:last-child{order:-1}}
.contenedor.contacto{padding:80px 20px}

/* ===== Animaciones creativas ===== */
body{transition:opacity .28s ease}
body.entrando,body.saliendo{opacity:0}

/* Barra de avance */
.avance{position:absolute;left:0;right:0;bottom:-1px;height:3px;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--rojo),var(--cempa),var(--verde),var(--rosa),var(--azul))}

/* Títulos palabra por palabra */
.por-palabras .palabra{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.por-palabras .palabra>span{display:inline-block;transform:translateY(105%) rotate(4deg);transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.por-palabras.visible .palabra>span{transform:none}
.portada .por-palabras .palabra>span{transition-delay:calc(var(--d) + 500ms)}
.por-palabras .subraya.palabra{overflow:visible}

/* Subrayado a pincel */
.subraya{position:relative;display:inline-block;white-space:nowrap}
.subraya svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.36em;overflow:visible}
.subraya path{fill:none;stroke:var(--cempa);stroke-width:7;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .5s}
.subraya.visible path{stroke-dashoffset:0}

/* Portada: sello que llega girando y flota */
.js-motion .sello{animation:sello-llega 1.1s cubic-bezier(.3,1.5,.5,1) both,flota 5s ease-in-out 1.2s infinite}
@keyframes sello-llega{from{transform:scale(.2) rotate(-200deg);opacity:0}to{transform:none;opacity:1}}
@keyframes flota{50%{transform:translateY(-8px) rotate(2deg)}}
.sello{position:relative}
.sello::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px dashed rgba(255,255,255,.55);animation:gira 24s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.js-motion .portada .desde,.js-motion .portada p,.js-motion .portada .acciones{animation:sube .9s cubic-bezier(.2,.8,.2,1) both}
.js-motion .portada .desde{animation-delay:.35s}.js-motion .portada p{animation-delay:1.1s}.js-motion .portada .acciones{animation-delay:1.3s}
@keyframes sube{from{opacity:0;transform:translateY(24px)}}
.portada>img{will-change:translate}

/* Papel picado */
.papel-picado{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;padding:0 2%;pointer-events:none}
.papel-picado::before{content:"";position:absolute;top:8px;left:0;right:0;height:2px;background:rgba(255,255,255,.7)}
.bandera{width:clamp(38px,5.4vw,70px);margin-top:8px;transform-origin:50% 0;animation:mece var(--t,3.2s) ease-in-out var(--d,0s) infinite alternate;pointer-events:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.bandera svg{width:100%;display:block}
.js-motion .papel-picado .bandera{animation:cae .9s cubic-bezier(.3,1.4,.5,1) calc(var(--i) * 60ms) both,mece var(--t,3.2s) ease-in-out calc(var(--i) * 60ms + .9s) infinite alternate}
@keyframes cae{from{transform:translateY(-120%) rotate(-25deg)}}
@keyframes mece{from{transform:rotate(-5deg) skewX(2deg)}to{transform:rotate(5deg) skewX(-2deg)}}
.bandera.sacude{animation:sacude .9s ease-out,mece var(--t,3.2s) ease-in-out .9s infinite alternate!important}
@keyframes sacude{20%{transform:rotate(22deg)}45%{transform:rotate(-16deg)}70%{transform:rotate(8deg)}100%{transform:none}}
.contacto-cabeza{position:relative;overflow:hidden;padding-top:110px!important}
.contacto-cabeza .papel-picado::before{background:var(--linea)}
.contacto-cabeza .bandera{filter:none}
@media(max-width:640px){.papel-picado .bandera:nth-child(n+8){display:none}}

/* Pétalos */
.petalos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.petalos i{position:absolute;top:-30px;width:14px;height:10px;background:var(--c);border-radius:60% 0 60% 0;opacity:.85;
  transform:scale(var(--s));animation:petalo var(--t) linear var(--d) infinite}
@keyframes petalo{to{transform:translate(var(--x),calc(100vh + 60px)) rotate(720deg) scale(var(--s))}}
.portada .petalos{z-index:1}
.llamado>*{position:relative;z-index:2}

/* Tarjetas que se inclinan */
.inclina{--rx:0deg;--ry:0deg;transition:transform .25s ease,box-shadow .25s,border-color .25s,opacity .8s;transform-style:preserve-3d}
.inclina:not(.aparece),.inclina.aparece.visible{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
.linea.inclina.visible:hover{transform:perspective(900px) translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry))}
.inclina::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.55),transparent 55%)}
.inclina:hover::after{opacity:1}
.linea,.tamano{position:relative}
.linea .fotos img.activa{animation:acerca 2.6s ease-out both}
@keyframes acerca{from{transform:scale(1.08)}}

/* Cifras */
.cifras b{font-variant-numeric:tabular-nums}

/* Botones */
.btn,.wa{transition:background .2s,color .2s,translate .25s cubic-bezier(.3,1.6,.5,1),border-color .2s}
.btn-rojo,.llamado .btn{position:relative;overflow:hidden}
.btn-rojo::after,.llamado .btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:destello 4.5s ease-in-out 2s infinite}
@keyframes destello{0%,70%{left:-120%}100%{left:160%}}
.wa{animation:late 3s ease-in-out 3s infinite}
@keyframes late{0%,80%,100%{box-shadow:0 10px 30px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,.5)}90%{box-shadow:0 10px 30px rgba(0,0,0,.25),0 0 0 16px rgba(37,211,102,0)}}

/* Llamado: aro que gira */
.llamado::after{animation:gira 30s linear infinite;border-style:dashed}

/* Frases (movidas por JS) */
.frases .pista{will-change:transform}

/* Cascadas (rejilla de tés, cinta) */
.cascada>*{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1),border-color .2s;transition-delay:var(--d,0ms)}
.cascada.visible>*{opacity:1;transform:none}
.te img{transition:transform .5s}
.te:hover img{transform:scale(1.08) rotate(-2deg)}

/* Mole: color del sabor y cubetas que brincan */
.ficha{--sabor:var(--rojo)}
.chip[aria-pressed="true"]{background:var(--sabor,var(--tinta));border-color:var(--sabor,var(--tinta));transition:background .4s,border-color .4s}
[data-sabores] .chip[aria-pressed="true"]{box-shadow:0 8px 20px -8px var(--sabor)}
.tamanos .tamano{transition:box-shadow .4s,border-color .4s}
[data-sabores]~* .tamano,.ficha .tamano{border-color:color-mix(in srgb,var(--sabor) 25%,var(--linea))}
img.brinca{animation:brinca .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes brinca{0%{transform:translateY(30px) scale(.7);opacity:0}60%{opacity:1}100%{transform:none}}

/* Carrusel: zoom suave en la foto activa */
.carrusel .vista img.activa{animation:acerca 4s ease-out both}
.carrusel .flecha{transition:transform .2s}
.carrusel .flecha:hover{transform:translateY(-50%) scale(1.12)}

/* Cinta de contacto */
.cinta:hover .pista{animation-play-state:paused}
.cinta img{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.cinta img:hover{transform:translateY(-8px) rotate(-3deg) scale(1.06)}

/* Íconos de redes */
.redes a svg{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.redes a:hover svg{transform:rotate(-12deg) scale(1.15)}

@media(prefers-reduced-motion:reduce){
  .papel-picado .bandera,.petalos,.sello,.sello::before,.wa,.btn-rojo::after,.llamado .btn::after,.llamado::after{animation:none!important}
  .por-palabras .palabra>span,.cascada>*{transform:none;opacity:1;transition:none}
  .subraya path{stroke-dashoffset:0;transition:none}
  body{transition:none}
}
.llamado>.petalos{position:absolute;z-index:0}
/* Selector de idioma */
.idioma{flex:none;height:38px;min-width:46px;padding:0 12px;border-radius:19px;display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:.08em;text-decoration:none;border:2px solid var(--azul);color:var(--azul);transition:.2s}
.idioma:hover{background:var(--azul);color:#fff}
@media(max-width:860px){.boton-menu{order:2;margin-left:0}.idioma{order:1;margin-left:auto}}