/* ===================================================================
   MOLE EL JUBILEO® — Sistema de Identidad Digital Jubileo
   Concepto: "El Sabor de las Celebraciones Mexicanas"
   Paleta (regla 60/30/10): café mole + dorado celebración,
   acentos terracota, cempasúchil, verde hoja y azul talavera.
   =================================================================== */

/* ---------- Tipografías ----------
   Institucional: Fraunces (títulos, elegante y memorable)
   Operativa: Poppins (textos, legible y digital)             */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Poppins:wght@300;400;500;600;700;800&family=Pacifico&display=swap');

/* ---------- Variables ---------- */
:root{
  /* Color principal: Café Mole Jubileo */
  --guinda:#5b3220;
  --guinda-osc:#3e2114;
  --guinda-claro:#7a4429;
  /* Complementarios */
  --terracota:#c05f33;          /* Terracota Mexicana */
  /* Color secundario: Dorado Celebración */
  --ocre:#e8c31a;
  --dorado:#fcea72;
  /* Neutros (60%) */
  --crema:#fffdf2;
  --crema2:#fdf7d3;
  --crema3:#fbe98a;
  --chocolate:#2a1a10;
  --texto:#3a2c22;
  --texto-suave:#6e5c4e;

  /* Acentos vivos (10%) */
  --rosa:#f08a24;               /* Naranja Cempasúchil */
  --turquesa:#2e6e8e;           /* Azul Talavera */
  --verde:#5f8a3d;              /* Verde Hoja */
  --amarillo:#fcea72;           /* Cempasúchil */

  --sombra-sm:0 4px 14px rgba(75,30,15,.10);
  --sombra:0 14px 36px rgba(75,30,15,.16);
  --sombra-lg:0 26px 60px rgba(75,30,15,.24);
  --radio:18px;
  --radio-lg:30px;
  --ancho:1180px;
  --trans:.35s cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--texto);
  background:var(--crema);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
section{position:relative}

h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;line-height:1.12;color:var(--guinda);font-weight:700}
h2.seccion-titulo{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:900}
.script{font-family:'Pacifico',cursive;font-weight:400}

/* ---------- Utilidades ---------- */
.contenedor{width:min(var(--ancho),92%);margin-inline:auto}
.centro{text-align:center}
.eyebrow{
  display:inline-block;font-family:'Poppins',sans-serif;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;font-size:.78rem;
  color:var(--terracota);margin-bottom:.6rem;
}
.seccion{padding:clamp(4rem,9vw,7rem) 0}
.lead{font-size:1.12rem;color:var(--texto-suave);max-width:60ch}
.centro .lead{margin-inline:auto}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;border:none;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;
  padding:.9rem 1.7rem;border-radius:50px;transition:var(--trans);
  text-align:center;line-height:1;
}
.btn-primario{background:var(--guinda);color:#fff;box-shadow:0 10px 24px rgba(91,50,32,.32)}
.btn-primario:hover{background:var(--guinda-osc);transform:translateY(-3px);box-shadow:0 16px 32px rgba(91,50,32,.42)}
.btn-dorado{background:linear-gradient(135deg,var(--ocre),var(--dorado));color:var(--guinda-osc)}
.btn-dorado:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(200,97,43,.4)}
.btn-fantasma{background:transparent;color:var(--guinda);border:2px solid var(--guinda)}
.btn-fantasma:hover{background:var(--guinda);color:#fff}
.btn-claro{background:#fff;color:var(--guinda)}
.btn-claro:hover{transform:translateY(-3px);box-shadow:var(--sombra)}

/* ===================================================================
   NAVBAR
   =================================================================== */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  transition:var(--trans);padding:.55rem 0;
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(255,253,242,.85);backdrop-filter:blur(12px);
  border:1px solid rgba(107,30,26,.08);
  border-radius:60px;padding:.5rem .5rem .5rem 1.2rem;box-shadow:var(--sombra-sm);
  transition:var(--trans);
}
.nav.scrolled .nav-inner{background:rgba(255,253,242,.97);box-shadow:var(--sombra)}
.nav-logo img{height:56px;width:auto}
.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a{
  font-weight:500;font-size:.88rem;color:var(--texto);padding:.5rem .65rem;border-radius:40px;
  transition:var(--trans);position:relative;white-space:nowrap;
}
.nav-links a:hover{color:var(--guinda);background:rgba(200,97,43,.12)}
.nav-links a.activo{color:var(--guinda);font-weight:600}
.nav-cta{margin-left:.4rem}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--guinda);border-radius:3px;margin:5px 0;transition:var(--trans)}
.nav-toggle.abierto span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.abierto span:nth-child(2){opacity:0}
.nav-toggle.abierto span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  min-height:100vh;display:flex;align-items:center;padding-top:120px;padding-bottom:60px;
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(252,234,114,.62),transparent 60%),
    radial-gradient(900px 500px at -10% 110%,rgba(232,195,26,.26),transparent 55%),
    linear-gradient(160deg,#fffdf2 0%,#fdf7d3 50%,#fcea72 100%);
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero-texto{max-width:34rem;z-index:3}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:900;color:var(--guinda-osc);margin-bottom:1rem}
.hero h1 .resaltado{color:var(--terracota);position:relative;white-space:nowrap}
.hero h1 .resaltado::after{
  content:"";position:absolute;left:0;bottom:.08em;width:100%;height:.18em;
  background:var(--ocre);border-radius:4px;z-index:-1;opacity:.6;
}
.hero-frase{
  font-family:'Pacifico',cursive;color:var(--terracota);font-size:1.45rem;margin-bottom:.4rem;
  min-height:1.6em;
}
.hero p.lead{margin-bottom:1.8rem}
.hero-acciones{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:1.8rem;margin-top:2.4rem;flex-wrap:wrap}
.hero-stat .num{font-family:'Fraunces',serif;font-size:2rem;font-weight:900;color:var(--guinda);line-height:1}
.hero-stat .lbl{font-size:.82rem;color:var(--texto-suave);font-weight:500}

.hero-arte{position:relative;display:flex;justify-content:center;align-items:center}
.hero-arte .disco{
  position:absolute;width:min(440px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(252,234,114,.68),rgba(232,195,26,.24) 55%,transparent 70%);
  animation:girar 30s linear infinite;
}
.hero-arte img.molcajete{position:relative;z-index:2;width:min(460px,100%);filter:drop-shadow(0 30px 40px rgba(75,30,15,.3))}
.hero-arte .flota{position:absolute;z-index:3}
.flota.c1{width:60px;top:8%;left:6%;animation:flotar 6s ease-in-out infinite}
.flota.c2{width:46px;bottom:14%;right:4%;animation:flotar 5s ease-in-out infinite reverse}
.flota.c3{width:38px;top:20%;right:8%;animation:flotar 7s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(8deg)}}
@keyframes girar{to{transform:rotate(360deg)}}

/* onda divisoria */
.ola{display:block;width:100%;height:auto;margin-bottom:-6px}

/* ===================================================================
   MARQUEE / cinta
   =================================================================== */
.cinta{background:var(--guinda);overflow:hidden;padding:.85rem 0}
.cinta-track{display:flex;gap:3rem;white-space:nowrap;animation:desliza 24s linear infinite;width:max-content}
.cinta span{color:var(--crema);font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;display:inline-flex;align-items:center;gap:1rem}
.cinta span::after{content:"✦";color:var(--ocre)}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ===================================================================
   PRODUCTOS
   =================================================================== */
.productos{background:var(--crema)}
.filtros{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:2rem 0 2.6rem}
.chip{
  background:#fff;border:1.5px solid var(--crema3);color:var(--texto);
  padding:.5rem 1.2rem;border-radius:40px;cursor:pointer;font-weight:500;font-size:.92rem;
  transition:var(--trans);font-family:'Poppins',sans-serif;
}
.chip:hover{border-color:var(--terracota);color:var(--terracota)}
.chip.activo{background:var(--guinda);color:#fff;border-color:var(--guinda)}

.grid-productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.8rem}
.card-prod{
  background:#fff;border-radius:var(--radio-lg);padding:1.4rem;text-align:center;
  box-shadow:var(--sombra-sm);transition:var(--trans);position:relative;overflow:hidden;
  border:1px solid rgba(107,30,26,.05);
}
.card-prod::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(252,234,114,.34),transparent 60%);
  opacity:0;transition:var(--trans);
}
.card-prod:hover{transform:translateY(-8px);box-shadow:var(--sombra-lg)}
.card-prod:hover::before{opacity:1}
.card-prod .etiqueta{
  position:absolute;top:14px;left:14px;z-index:3;background:var(--rosa);color:#fff;
  font-size:.7rem;font-weight:700;padding:.25rem .7rem;border-radius:30px;letter-spacing:.5px;
}
.card-prod .etiqueta.nuevo{background:var(--turquesa)}
.card-prod .etiqueta.top{background:var(--amarillo);color:var(--guinda-osc)}
.card-prod-img{height:210px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.card-prod-img img{height:100%;width:auto;transition:var(--trans)}
.card-prod:hover .card-prod-img img{transform:scale(1.06) rotate(-2deg)}
.card-prod h3{font-size:1.3rem;margin-top:.6rem;position:relative;z-index:2}
.card-prod .tipo{font-size:.85rem;color:var(--texto-suave);margin-bottom:.7rem;position:relative;z-index:2}
.tamanos{display:flex;gap:.4rem;justify-content:center;margin-bottom:.8rem;position:relative;z-index:2}
.tam{
  border:1.5px solid var(--crema3);background:var(--crema);border-radius:30px;padding:.28rem .7rem;
  font-size:.8rem;font-weight:600;cursor:pointer;transition:var(--trans);
}
.tam.activo{background:var(--guinda);color:#fff;border-color:var(--guinda)}
.card-prod .precio{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:900;color:var(--terracota);position:relative;z-index:2}
.card-prod .precio small{font-size:.8rem;color:var(--texto-suave);font-weight:400}
.card-prod .ver{margin-top:.8rem;position:relative;z-index:2}

/* ===================================================================
   HISTORIA / TIMELINE
   =================================================================== */
.historia{background:linear-gradient(180deg,var(--crema2),var(--crema))}
.historia-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.historia-foto{border-radius:var(--radio-lg);overflow:hidden;box-shadow:var(--sombra);position:relative}
.historia-foto::after{content:"";position:absolute;inset:0;border:8px solid rgba(255,255,255,.5);border-radius:var(--radio-lg);pointer-events:none}
.timeline{margin-top:1.6rem;border-left:3px dashed var(--terracota);padding-left:1.6rem}
.timeline li{position:relative;padding-bottom:1.4rem}
.timeline li::before{
  content:"";position:absolute;left:-1.95rem;top:.2rem;width:14px;height:14px;border-radius:50%;
  background:var(--ocre);border:3px solid var(--crema);box-shadow:0 0 0 2px var(--terracota);
}
.timeline .ano{font-family:'Fraunces',serif;font-weight:900;color:var(--guinda);font-size:1.15rem}
.timeline p{font-size:.96rem;color:var(--texto-suave)}

/* ===================================================================
   VALORES
   =================================================================== */
.valores{background:var(--guinda);color:var(--crema);overflow:hidden}
.valores h2.seccion-titulo{color:#fff}
.valores .eyebrow{color:var(--ocre)}
.valores .lead{color:rgba(255,253,242,.82)}
.grid-valores{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem;margin-top:2.6rem}
.valor{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radio);padding:1.8rem 1.4rem;transition:var(--trans);
}
.valor:hover{background:rgba(255,255,255,.12);transform:translateY(-6px)}
.valor .ico{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:1.7rem;margin-bottom:1rem;background:linear-gradient(135deg,var(--ocre),var(--terracota))}
.valor h3{color:#fff;font-size:1.25rem;margin-bottom:.4rem}
.valor p{color:rgba(255,253,242,.80);font-size:.95rem}

/* ===================================================================
   CALCULADORA
   =================================================================== */
.calc{background:var(--crema)}
.calc-card{
  background:linear-gradient(135deg,#fff,var(--crema2));border-radius:var(--radio-lg);
  box-shadow:var(--sombra);padding:clamp(1.8rem,4vw,3rem);display:grid;
  grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;border:1px solid rgba(252,234,114,.52);
}
.calc-control label{font-weight:600;display:block;margin-bottom:.4rem;color:var(--guinda)}
.calc-personas{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.contador{display:flex;align-items:center;gap:0;background:#fff;border:2px solid var(--crema3);border-radius:50px;overflow:hidden}
.contador button{width:46px;height:46px;border:none;background:var(--crema2);font-size:1.4rem;cursor:pointer;color:var(--guinda);transition:var(--trans)}
.contador button:hover{background:var(--ocre);color:var(--guinda-osc)}
.contador input{width:64px;text-align:center;border:none;font-size:1.3rem;font-weight:700;font-family:'Fraunces',serif;color:var(--guinda);background:transparent}
.calc-tipo select{width:100%;padding:.8rem 1rem;border-radius:14px;border:2px solid var(--crema3);font-family:'Poppins',sans-serif;font-size:1rem;background:#fff;color:var(--texto);cursor:pointer}
.calc-resultado{background:var(--guinda);color:#fff;border-radius:var(--radio);padding:2rem;text-align:center}
.calc-resultado .grande{font-family:'Fraunces',serif;font-size:3.4rem;font-weight:900;color:var(--dorado);line-height:1}
.calc-resultado .grande small{font-size:1.1rem;color:#fff}
.calc-resultado p{color:rgba(255,253,242,.87);margin-top:.4rem}
.calc-resultado .sugerencia{margin-top:1rem;font-size:.9rem;background:rgba(255,255,255,.12);padding:.7rem;border-radius:12px}

/* ===================================================================
   DÓNDE COMPRAR / CONTACTO (home)
   =================================================================== */
.cta-final{
  background:
   radial-gradient(700px 400px at 90% 10%,rgba(240,138,36,.22),transparent 60%),
   linear-gradient(135deg,var(--terracota),var(--guinda));
  color:#fff;text-align:center;border-radius:0;
}
.cta-final h2{color:#fff;font-size:clamp(2rem,5vw,3.2rem);font-weight:900}
.cta-final p{color:rgba(255,255,255,.9);max-width:50ch;margin:1rem auto 2rem}
.cta-acciones{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{background:var(--chocolate);color:rgba(255,253,242,.78);padding:3.5rem 0 1.5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
.footer-logo img{height:70px;width:auto;margin-bottom:1rem}
.footer h4{color:var(--ocre);font-family:'Poppins',sans-serif;font-size:1rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:1rem}
.footer a{display:block;padding:.25rem 0;transition:var(--trans)}
.footer a:hover{color:var(--ocre);padding-left:4px}
.redes{display:flex;gap:.7rem;margin-top:1rem}
.redes a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:var(--trans)}
.redes a:hover{background:var(--ocre);color:var(--guinda-osc);padding:0}
.redes svg{width:20px;height:20px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding-top:1.4rem;text-align:center;font-size:.85rem}

/* ===================================================================
   MODAL
   =================================================================== */
.modal{
  position:fixed;inset:0;z-index:2000;display:none;place-items:center;padding:1.2rem;
  background:rgba(43,20,16,.6);backdrop-filter:blur(5px);
}
.modal.abierto{display:grid;animation:fadein .3s}
.modal-caja{
  background:var(--crema);border-radius:var(--radio-lg);max-width:760px;width:100%;
  max-height:90vh;overflow:auto;box-shadow:var(--sombra-lg);position:relative;
  display:grid;grid-template-columns:1fr 1fr;
}
.modal-cerrar{
  position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:none;
  background:#fff;color:var(--guinda);font-size:1.4rem;cursor:pointer;z-index:5;box-shadow:var(--sombra-sm);transition:var(--trans);
}
.modal-cerrar:hover{background:var(--guinda);color:#fff;transform:rotate(90deg)}
.modal-img{background:linear-gradient(135deg,var(--crema2),var(--crema3));display:flex;align-items:center;justify-content:center;padding:2rem}
.modal-img img{max-height:320px}
.modal-info{padding:2rem}
.modal-info h3{font-size:1.8rem;margin-bottom:.3rem}
.modal-info .precio-modal{font-family:'Fraunces',serif;font-size:1.8rem;color:var(--terracota);font-weight:900;margin:.6rem 0}
.modal-info ul.detalle{margin:1rem 0;display:grid;gap:.5rem}
.modal-info ul.detalle li{padding-left:1.6rem;position:relative;font-size:.95rem;color:var(--texto-suave)}
.modal-info ul.detalle li::before{content:"●";color:var(--ocre);position:absolute;left:0}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ===================================================================
   WHATSAPP flotante
   =================================================================== */
.wa-flota{
  position:fixed;bottom:24px;right:24px;z-index:1500;width:60px;height:60px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.5);
  transition:var(--trans);animation:pulso 2.5s infinite;
}
.wa-flota:hover{transform:scale(1.1)}
.wa-flota svg{width:34px;height:34px;fill:#fff}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ===================================================================
   PÁGINAS INTERIORES — encabezado
   =================================================================== */
.page-hero{
  padding:140px 0 70px;text-align:center;
  background:
   radial-gradient(800px 400px at 80% 0%,rgba(252,234,114,.60),transparent 60%),
   linear-gradient(160deg,#fffdf2,#fcea72);
}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:900}
.migas{font-size:.85rem;color:var(--texto-suave);margin-bottom:.8rem}
.migas a:hover{color:var(--terracota)}

/* ---------- Recetario ---------- */
.grid-recetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.8rem}
.card-receta{
  background:#fff;border-radius:var(--radio-lg);overflow:hidden;box-shadow:var(--sombra-sm);
  transition:var(--trans);cursor:pointer;display:flex;flex-direction:column;
}
.card-receta:hover{transform:translateY(-8px);box-shadow:var(--sombra-lg)}
.card-receta-img{position:relative;overflow:hidden;aspect-ratio:4/3}
.card-receta-img img{width:100%;height:100%;object-fit:cover;transition:var(--trans)}
.card-receta:hover .card-receta-img img{transform:scale(1.08)}
.card-receta-img .tag{position:absolute;top:12px;left:12px;background:rgba(107,30,26,.9);color:#fff;font-size:.72rem;font-weight:600;padding:.3rem .8rem;border-radius:30px}
.card-receta-cuerpo{padding:1.3rem;flex:1;display:flex;flex-direction:column}
.card-receta-cuerpo h3{font-size:1.3rem;margin-bottom:.4rem}
.card-receta-meta{display:flex;gap:1rem;margin:.6rem 0 .9rem;font-size:.82rem;color:var(--texto-suave)}
.card-receta-meta span{display:inline-flex;align-items:center;gap:.3rem}
.card-receta .ver-receta{margin-top:auto;color:var(--terracota);font-weight:600;display:inline-flex;align-items:center;gap:.4rem;transition:var(--trans)}
.card-receta:hover .ver-receta{gap:.7rem}

.receta-pasos{counter-reset:paso;display:grid;gap:.9rem;margin-top:1rem}
.receta-pasos li{position:relative;padding-left:3rem;color:var(--texto-suave)}
.receta-pasos li::before{
  counter-increment:paso;content:counter(paso);position:absolute;left:0;top:-2px;
  width:32px;height:32px;border-radius:50%;background:var(--ocre);color:var(--guinda-osc);
  font-weight:800;font-family:'Fraunces',serif;display:grid;place-items:center;
}
.ingredientes-lista{display:grid;gap:.4rem;margin-top:.6rem}
.ingredientes-lista li{padding-left:1.5rem;position:relative;font-size:.95rem}
.ingredientes-lista li::before{content:"🌶️";position:absolute;left:0;font-size:.8rem}

/* ---------- Distribuidores ---------- */
.dist-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:2rem;align-items:start}
.dist-panel{background:#fff;border-radius:var(--radio-lg);padding:1.6rem;box-shadow:var(--sombra-sm)}
.buscador{position:relative;margin-bottom:1.2rem}
.buscador input{width:100%;padding:.9rem 1rem .9rem 2.8rem;border:2px solid var(--crema3);border-radius:50px;font-family:'Poppins',sans-serif;font-size:1rem}
.buscador input:focus{outline:none;border-color:var(--terracota)}
.buscador svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:var(--texto-suave)}
.dist-estados{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.lista-dist{display:grid;gap:.8rem;max-height:520px;overflow:auto;padding-right:.3rem}
.dist-item{
  border:1.5px solid var(--crema3);border-radius:var(--radio);padding:1rem 1.2rem;transition:var(--trans);cursor:pointer;
}
.dist-item:hover{border-color:var(--terracota);background:var(--crema2);transform:translateX(4px)}
.dist-item h4{font-family:'Poppins',sans-serif;color:var(--guinda);font-size:1.05rem;margin-bottom:.2rem}
.dist-item .dir{font-size:.88rem;color:var(--texto-suave)}
.dist-item .estado{display:inline-block;margin-top:.4rem;font-size:.72rem;background:var(--crema3);color:var(--guinda);padding:.2rem .7rem;border-radius:30px;font-weight:600}
.mapa-fake{
  background:linear-gradient(135deg,var(--crema2),var(--crema3));border-radius:var(--radio-lg);
  min-height:520px;position:relative;overflow:hidden;box-shadow:var(--sombra-sm);display:grid;place-items:center;
}
.mapa-fake .nota{background:rgba(255,255,255,.9);padding:1rem 1.4rem;border-radius:14px;color:var(--texto-suave);font-size:.9rem;text-align:center;max-width:80%;box-shadow:var(--sombra-sm)}
.pin{position:absolute;width:18px;height:18px;background:var(--rosa);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:var(--sombra-sm);animation:bota 2s infinite}
@keyframes bota{0%,100%{transform:rotate(-45deg) translateY(0)}50%{transform:rotate(-45deg) translateY(-8px)}}

/* ---------- Formulario ---------- */
.form-contacto{display:grid;gap:1rem;max-width:560px;margin-inline:auto}
.form-fila{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.campo{display:flex;flex-direction:column;gap:.35rem;text-align:left}
.campo label{font-weight:600;font-size:.9rem;color:var(--guinda)}
.campo input,.campo textarea,.campo select{
  padding:.8rem 1rem;border:2px solid var(--crema3);border-radius:14px;font-family:'Poppins',sans-serif;font-size:1rem;background:#fff;transition:var(--trans);
}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--terracota);box-shadow:0 0 0 4px rgba(200,97,43,.12)}
.campo.error input,.campo.error textarea{border-color:var(--rosa)}
.campo .msg-error{color:var(--rosa);font-size:.8rem;display:none}
.campo.error .msg-error{display:block}
.form-ok{
  display:none;background:var(--verde);color:#fff;padding:1rem 1.2rem;border-radius:14px;text-align:center;font-weight:600;
}
.form-ok.visible{display:block;animation:fadein .4s}

/* ===================================================================
   ANIMACIONES REVEAL
   =================================================================== */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* ===================================================================
   NUEVOS COMPONENTES — Arquitectura Web Estratégica V1.0
   =================================================================== */

/* ---------- Accesos por tipo de usuario (Bloque 2 Inicio) ---------- */
.grid-audiencias{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.3rem;margin-top:2.4rem}
.card-user{
  background:#fff;border-radius:var(--radio-lg);padding:1.8rem 1.5rem;text-align:center;
  box-shadow:var(--sombra-sm);transition:var(--trans);border-top:5px solid var(--ocre);display:flex;flex-direction:column;gap:.5rem;
}
.card-user:hover{transform:translateY(-8px);box-shadow:var(--sombra-lg)}
.card-user .ico{font-size:2.2rem}
.card-user h3{font-size:1.25rem}
.card-user p{font-size:.92rem;color:var(--texto-suave);flex:1}
.card-user .btn{margin-top:.8rem;justify-content:center;font-size:.9rem;padding:.7rem 1.2rem}
.card-user.u-dist{border-top-color:var(--terracota)}
.card-user.u-food{border-top-color:var(--turquesa)}
.card-user.u-evento{border-top-color:var(--rosa)}

/* ---------- Diferenciador de marca ---------- */
.diferenciador{
  background:linear-gradient(135deg,var(--guinda),var(--guinda-claro));color:var(--crema);
  border-radius:var(--radio-lg);padding:clamp(2rem,5vw,3.6rem);text-align:center;position:relative;overflow:hidden;
}
.diferenciador::before{content:"✦";position:absolute;font-size:14rem;opacity:.06;top:-3rem;left:-1rem;color:var(--dorado)}
.diferenciador p.grande{font-family:'Fraunces',serif;font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.5;max-width:52ch;margin-inline:auto}
.diferenciador .firma{margin-top:1.2rem;color:var(--dorado);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.85rem}

/* ---------- Celebraciones ---------- */
.grid-celebra{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-top:2.4rem}
.card-celebra{
  border-radius:var(--radio-lg);overflow:hidden;background:#fff;box-shadow:var(--sombra-sm);
  transition:var(--trans);display:flex;flex-direction:column;
}
.card-celebra:hover{transform:translateY(-8px);box-shadow:var(--sombra-lg)}
.card-celebra .banda{height:110px;display:flex;align-items:center;justify-content:center;font-size:3rem;
  background:linear-gradient(135deg,var(--crema2),var(--crema3));position:relative}
.card-celebra .banda::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:linear-gradient(90deg,var(--ocre),var(--rosa),var(--turquesa),var(--verde))}
.card-celebra .cuerpo{padding:1.3rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card-celebra h3{font-size:1.25rem}
.card-celebra p{font-size:.92rem;color:var(--texto-suave);flex:1}
.card-celebra a{color:var(--terracota);font-weight:600;font-size:.92rem}
.card-celebra a:hover{gap:.7rem;color:var(--guinda)}

/* ---------- Tarjetas duales negocio (distribuidor / foodservice) ---------- */
.duo-negocio{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.4rem}
.card-negocio{
  border-radius:var(--radio-lg);padding:clamp(1.8rem,4vw,2.6rem);color:#fff;display:flex;flex-direction:column;gap:.8rem;
  background:linear-gradient(150deg,var(--terracota),var(--guinda));box-shadow:var(--sombra);
}
.card-negocio.food{background:linear-gradient(150deg,var(--turquesa),#1c4459)}
.card-negocio h3{color:#fff;font-size:1.6rem}
.card-negocio p{color:rgba(255,255,255,.88)}
.card-negocio ul{display:grid;gap:.4rem;margin:.4rem 0 .8rem}
.card-negocio ul li{padding-left:1.5rem;position:relative;font-size:.93rem;color:rgba(255,255,255,.85)}
.card-negocio ul li::before{content:"✔";position:absolute;left:0;color:var(--dorado)}
.card-negocio .btn{align-self:flex-start;margin-top:auto}

/* ---------- Proceso numerado (pasos) ---------- */
.pasos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.3rem;margin-top:2.4rem;counter-reset:pasoP}
.paso-item{background:#fff;border-radius:var(--radio);padding:1.6rem 1.3rem;box-shadow:var(--sombra-sm);position:relative;transition:var(--trans)}
.paso-item:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.paso-item::before{
  counter-increment:pasoP;content:counter(pasoP);
  width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--ocre),var(--dorado));
  color:var(--guinda-osc);font-family:'Fraunces',serif;font-weight:900;font-size:1.3rem;
  display:grid;place-items:center;margin-bottom:.8rem;
}
.paso-item h4{font-family:'Poppins',sans-serif;color:var(--guinda);font-size:1.02rem;margin-bottom:.3rem}
.paso-item p{font-size:.88rem;color:var(--texto-suave)}

/* ---------- Tabla de beneficios ---------- */
.tabla-wrap{overflow-x:auto;margin-top:2rem;border-radius:var(--radio);box-shadow:var(--sombra-sm)}
.tabla-benef{width:100%;border-collapse:collapse;background:#fff;min-width:520px}
.tabla-benef th{background:var(--guinda);color:var(--crema);text-align:left;padding:.9rem 1.2rem;font-family:'Poppins',sans-serif;font-size:.9rem;letter-spacing:1px;text-transform:uppercase}
.tabla-benef td{padding:.9rem 1.2rem;border-bottom:1px solid var(--crema2);font-size:.95rem}
.tabla-benef tr:last-child td{border-bottom:none}
.tabla-benef td:first-child{font-weight:600;color:var(--guinda)}
.tabla-benef tr:hover td{background:var(--crema)}

/* ---------- Chips de descarga ---------- */
.descargas{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem}
.chip-descarga{
  display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:2px dashed var(--ocre);
  color:var(--guinda);padding:.75rem 1.3rem;border-radius:50px;font-weight:600;font-size:.92rem;transition:var(--trans);cursor:pointer;
}
.chip-descarga:hover{background:var(--ocre);color:var(--guinda-osc);border-style:solid;transform:translateY(-3px)}

/* ---------- Tarjeta de formulario ---------- */
.form-card{
  background:#fff;border-radius:var(--radio-lg);box-shadow:var(--sombra);padding:clamp(1.8rem,4vw,2.8rem);
  max-width:720px;margin:2.4rem auto 0;border-top:6px solid var(--ocre);
}
.form-card .form-contacto{max-width:none}
.campo.check{flex-direction:row;align-items:flex-start;gap:.6rem}
.campo.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--guinda)}
.campo.check label{font-weight:400;font-size:.85rem;color:var(--texto-suave)}

/* ---------- Botones rápidos de contacto ---------- */
.botones-rapidos{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem}
.btn-rapido{
  background:#fff;border:2px solid var(--crema3);border-radius:50px;padding:.7rem 1.4rem;cursor:pointer;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;color:var(--texto);transition:var(--trans);
}
.btn-rapido:hover{border-color:var(--terracota);color:var(--terracota)}
.btn-rapido.activo{background:var(--guinda);border-color:var(--guinda);color:#fff}

/* ---------- Datos de contacto ---------- */
.grid-contacto-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem;margin-top:2.2rem}
.dato-contacto{background:#fff;border-radius:var(--radio);padding:1.4rem;text-align:center;box-shadow:var(--sombra-sm)}
.dato-contacto .ico{font-size:1.8rem;margin-bottom:.5rem}
.dato-contacto h4{font-family:'Poppins',sans-serif;color:var(--guinda);font-size:.95rem;margin-bottom:.2rem}
.dato-contacto p,.dato-contacto a{font-size:.9rem;color:var(--texto-suave)}
.dato-contacto a:hover{color:var(--terracota)}

/* ---------- Blog ---------- */
.grid-blog{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.8rem;margin-top:2.4rem}
.card-blog{
  background:#fff;border-radius:var(--radio-lg);overflow:hidden;box-shadow:var(--sombra-sm);transition:var(--trans);
  display:flex;flex-direction:column;cursor:pointer;
}
.card-blog:hover{transform:translateY(-8px);box-shadow:var(--sombra-lg)}
.card-blog .miniatura{height:170px;display:flex;align-items:center;justify-content:center;font-size:3.4rem;
  background:linear-gradient(135deg,var(--crema2),var(--crema3))}
.card-blog .cuerpo{padding:1.3rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.card-blog .cat{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  background:var(--crema2);color:var(--terracota);padding:.25rem .8rem;border-radius:30px}
.card-blog h3{font-size:1.2rem;line-height:1.3}
.card-blog p{font-size:.9rem;color:var(--texto-suave);flex:1}
.card-blog .meta-blog{font-size:.8rem;color:var(--texto-suave);display:flex;gap:1rem}
.card-blog .leer{color:var(--terracota);font-weight:600;font-size:.92rem}

/* ---------- Pilares de marca (nosotros) ---------- */
.grid-pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.3rem;margin-top:2.4rem}
.pilar{
  background:#fff;border-radius:var(--radio);padding:1.7rem 1.4rem;box-shadow:var(--sombra-sm);
  border-left:5px solid var(--ocre);transition:var(--trans);
}
.pilar:nth-child(2){border-left-color:var(--rosa)}
.pilar:nth-child(3){border-left-color:var(--verde)}
.pilar:nth-child(4){border-left-color:var(--turquesa)}
.pilar:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.pilar .ico{font-size:2rem;margin-bottom:.6rem}
.pilar h3{font-size:1.2rem;margin-bottom:.3rem}
.pilar p{font-size:.9rem;color:var(--texto-suave)}

/* ---------- Cita / bloque emocional ---------- */
.cita-emocional{
  max-width:760px;margin:2.5rem auto 0;text-align:center;padding:2.4rem;
  border-radius:var(--radio-lg);background:linear-gradient(135deg,var(--crema2),#fff);
  border:1px solid rgba(232,195,26,.38);box-shadow:var(--sombra-sm);
}
.cita-emocional p{font-family:'Fraunces',serif;font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--guinda);line-height:1.55}

/* ---------- Lista de checks genérica ---------- */
.lista-checks{display:grid;gap:.55rem;margin-top:1rem}
.lista-checks li{padding-left:1.8rem;position:relative;color:var(--texto-suave);font-size:.97rem}
.lista-checks li::before{content:"✔";position:absolute;left:0;color:var(--verde);font-weight:700}

/* ---------- Franja de aplicaciones culinarias ---------- */
.grid-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:2.2rem}
.app-item{background:#fff;border-radius:var(--radio);padding:1.3rem .8rem;text-align:center;box-shadow:var(--sombra-sm);transition:var(--trans)}
.app-item:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
.app-item .ico{font-size:2rem;margin-bottom:.4rem}
.app-item div{font-weight:600;font-size:.9rem;color:var(--guinda)}

@media(max-width:900px){
  .duo-negocio{grid-template-columns:1fr}
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-texto{margin-inline:auto}
  .hero-acciones,.hero-stats{justify-content:center}
  .hero-arte{order:-1;margin-bottom:1rem}
  .historia-grid,.calc-card,.dist-layout{grid-template-columns:1fr}
  .modal-caja{grid-template-columns:1fr}
  .modal-img{padding:1.4rem}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-links{
    position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--crema);border-radius:var(--radio);box-shadow:var(--sombra);padding:1rem;gap:.2rem;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:var(--trans);
  }
  .nav-links.abierto{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:.8rem 1rem}
  .nav-cta{margin:.4rem 0 0}
  .nav-toggle{display:block}
  .form-fila{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-stats{gap:1.2rem}
}

/* ===================================================================
   FOTOGRAFÍA REAL — bloque agregado (no modifica ninguna regla previa)
   Todas las fotos viven en img/fotos/
   =================================================================== */

/* ---------- Banda de foto dentro del contenedor ---------- */
.foto-banda{position:relative;border-radius:var(--radio-lg);overflow:hidden;box-shadow:var(--sombra);margin-top:2.4rem}
.foto-banda img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:12/5}
.foto-banda::after{content:"";position:absolute;inset:0;border:8px solid rgba(255,255,255,.45);border-radius:var(--radio-lg);pointer-events:none}
.foto-banda.sin-marco::after{display:none}

/* ---------- Foto de portada, justo bajo el encabezado de página ---------- */
.foto-portada{padding:0}
.foto-portada .foto-banda{margin-top:-2.6rem;position:relative;z-index:2}

/* ---------- Foto dentro de tarjetas .valor (fondo guinda) ---------- */
.valor-foto{border-radius:14px;overflow:hidden;aspect-ratio:16/10;margin:-.4rem 0 1.1rem;box-shadow:0 10px 22px rgba(0,0,0,.28)}
.valor-foto img{width:100%;height:100%;object-fit:cover;transition:var(--trans)}
.valor:hover .valor-foto img{transform:scale(1.07)}

/* ---------- Tarjetas de celebración con foto real ---------- */
.card-celebra .banda.con-foto{height:180px;background-size:cover;background-position:center;font-size:2.4rem}
.card-celebra .banda.con-foto::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(62,33,20,0) 30%,rgba(62,33,20,.6))}
.card-celebra .banda.con-foto .emoji{position:relative;z-index:2;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}

/* ---------- Tarjetas de negocio con foto de fondo ---------- */
.card-negocio.con-foto{background-image:linear-gradient(150deg,rgba(192,95,51,.86),rgba(62,33,20,.90)),var(--foto);background-size:cover;background-position:center}
.card-negocio.food.con-foto{background-image:linear-gradient(150deg,rgba(46,110,142,.86),rgba(18,50,66,.92)),var(--foto)}

/* ---------- Hero del inicio con foto real ---------- */
.hero-arte img.foto-hero{
  position:relative;z-index:2;width:min(440px,100%);aspect-ratio:1;object-fit:cover;border-radius:50%;
  border:12px solid rgba(255,255,255,.78);box-shadow:0 30px 60px rgba(75,30,15,.35);
}

/* ---------- Presentaciones: pasta y polvo ---------- */
.duo-formatos{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.6rem}
.formato-card{
  border-radius:var(--radio-lg);overflow:hidden;box-shadow:var(--sombra);
  background-size:cover;background-position:center;padding:clamp(1rem,3vw,2rem);
  display:flex;align-items:center;justify-content:center;
}
.formato-card img{width:100%;max-width:420px;border-radius:24px;transition:var(--trans)}
.formato-card:hover img{transform:scale(1.04)}

/* ---------- Sellos gráficos (distribuidores) ---------- */
.grid-sellos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.6rem;margin-top:2.6rem;justify-items:center}
.grid-sellos img{width:100%;max-width:280px;border-radius:var(--radio-lg);box-shadow:var(--sombra-sm);transition:var(--trans)}
.grid-sellos img:hover{transform:translateY(-6px);box-shadow:var(--sombra)}

/* ---------- Adornos decorativos ---------- */
.adorno-cenefa{display:block;width:min(720px,88%);margin:2rem auto 0;height:auto}
.adorno-flor{position:absolute;width:clamp(90px,12vw,170px);pointer-events:none;opacity:.85;z-index:1}
.adorno-flor.der{top:4%;right:1%}
.adorno-flor.izq{bottom:6%;left:3%}
.adorno-flores{display:block;width:min(420px,70%);margin:1.6rem auto 0;height:auto}

@media(max-width:820px){
  .duo-formatos{grid-template-columns:1fr}
  .foto-portada .foto-banda{margin-top:-1.4rem}
  .foto-banda img{aspect-ratio:16/9}
}
/* el encabezado de página aloja los adornos flotantes */
.page-hero{position:relative;overflow:hidden}
.page-hero .contenedor{position:relative;z-index:2}

/* ===================================================================
   CORRECCIONES Y OPTIMIZACIÓN MÓVIL (Android / iOS)
   Bloque agregado al final: no modifica ninguna regla anterior.
   =================================================================== */

/* ---------- 1. Botón "Contacto" de la barra ----------
   `.nav-links a` (especificidad 0,1,1) le ganaba al color de `.btn-primario`
   (0,1,0) y pintaba el texto café sobre fondo café. Se corrige con más peso. */
.nav-links a.btn-primario,
.nav-links a.btn-primario:hover,
.nav-links a.btn-primario:focus{background:var(--guinda);color:#fff}
.nav-links a.btn-primario:hover{background:var(--guinda-osc)}
.nav-links a.btn-dorado,
.nav-links a.btn-dorado:hover{color:var(--guinda-osc)}
.nav-links a.btn{font-size:.88rem;padding:.7rem 1.4rem}

/* ---------- 2. Desbordamiento horizontal ----------
   Los items de grid traen `min-width:auto`, así que los campos del formulario
   no podían encogerse y empujaban la página 6 px de más en celular. */
.form-contacto,.form-fila,.campo{min-width:0}
.campo input,.campo textarea,.campo select{width:100%;min-width:0;max-width:100%}
.grid-productos,.grid-recetas,.grid-celebra,.grid-blog,
.grid-valores,.grid-pilares,.grid-audiencias,.grid-apps,
.duo-negocio,.duo-formatos,.historia-grid,.mosaico-fotos{min-width:0}
.grid-productos>*,.grid-recetas>*,.grid-celebra>*,.grid-blog>*,
.grid-valores>*,.grid-pilares>*,.grid-audiencias>*,.grid-apps>*,
.duo-negocio>*,.duo-formatos>*,.historia-grid>*{min-width:0}
html{overflow-x:clip}
.tabla-wrap{-webkit-overflow-scrolling:touch}

/* ---------- 3. iOS: alto real de pantalla y tamaño de texto ----------
   100vh en Safari incluye la barra de direcciones y "salta" al hacer scroll. */
@supports (height:100svh){ .hero{min-height:100svh} }
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased}
a,button,input,select,textarea{-webkit-tap-highlight-color:rgba(192,95,51,.18)}

/* ---------- 4. Zona segura del iPhone (notch / barra inferior) ---------- */
.nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.wa-flota{
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
}
.footer{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}

/* ===================================================================
   TABLETA
   =================================================================== */
@media(max-width:900px){
  .foto-portada .foto-banda{margin-top:-1.6rem}
  .foto-banda::after{border-width:6px}
  .card-celebra .banda.con-foto{height:150px}
}

/* ===================================================================
   CELULAR  (≤760px)
   =================================================================== */
@media(max-width:760px){
  /* Los adornos florales tapaban el texto de los encabezados */
  .adorno-flor{display:none}
  .adorno-flores{width:min(280px,60%)}
  .adorno-cenefa{width:94%;margin-top:1.4rem}

  /* Barra: logo más chico para que respire junto al menú */
  .nav-logo img{height:44px}
  .nav{padding-top:.4rem;padding-bottom:.4rem}
  .nav-inner{padding:.4rem .4rem .4rem .9rem}
  .nav-links a.btn{width:100%;justify-content:center;padding:.85rem 1.2rem}

  /* Hero: sin salto de altura y con el arte proporcionado */
  .hero{padding-top:96px;padding-bottom:48px;min-height:auto}
  .hero-arte img.foto-hero{width:min(280px,72vw);border-width:8px}
  .hero-arte .disco{width:min(300px,78vw)}
  .hero-stats{gap:1rem;justify-content:space-between;width:100%}
  .hero-stat{flex:1 1 30%}
  .hero-stat .num{font-size:1.6rem}
  .hero-acciones .btn{width:100%;justify-content:center}

  /* Dos productos por fila: la página medía el doble de largo */
  .grid-productos{grid-template-columns:1fr 1fr;gap:.9rem}
  .card-prod{padding:1rem .7rem}
  .card-prod-img{height:130px}
  .card-prod h3{font-size:1rem;line-height:1.25}
  .card-prod .tipo{font-size:.74rem}
  .card-prod .precio{font-size:1.15rem}
  .card-prod .ver{font-size:.82rem;padding:.6rem 1rem}
  .card-prod .etiqueta{font-size:.62rem;padding:.2rem .5rem}
  .tamanos{gap:.25rem}

  /* Áreas táctiles cómodas (mínimo ~44px, guía de Apple) */
  .tam{padding:.5rem .7rem;font-size:.78rem;min-height:38px}
  .chip{min-height:42px;display:inline-flex;align-items:center}
  .nav-links a{min-height:44px;display:flex;align-items:center}

  /* Celebraciones y recetas de dos en dos */
  .grid-celebra{grid-template-columns:1fr 1fr;gap:.9rem}
  .card-celebra .banda.con-foto{height:110px;font-size:1.7rem}
  .card-celebra .cuerpo{padding:.9rem}
  .card-celebra h3{font-size:1rem}
  .card-celebra p{font-size:.82rem}
  .card-celebra a{font-size:.82rem}

  .grid-apps{grid-template-columns:1fr 1fr}
  .grid-sellos{grid-template-columns:1fr 1fr;gap:1rem}

  /* Fotos: más altas para que se distinga el motivo */
  .foto-banda img{aspect-ratio:4/3}
  .foto-portada .foto-banda{margin-top:-1.2rem}
  .foto-banda::after{border-width:5px}

  /* Formularios y tablas */
  .form-card{padding:1.4rem 1.1rem}
  .tabla-benef{min-width:420px}

  /* Ventanas emergentes a pantalla casi completa */
  .modal{padding:.6rem}
  .modal-caja{max-height:92vh}
  .modal-img img{max-height:180px}

  /* Botón de WhatsApp más discreto */
  .wa-flota{width:52px;height:52px}
  .wa-flota svg{width:26px;height:26px}
}

/* ===================================================================
   CELULAR CHICO  (≤400px)
   =================================================================== */
@media(max-width:400px){
  .contenedor{width:min(var(--ancho),94%)}
  .grid-productos{gap:.7rem}
  .card-prod-img{height:112px}
  .card-prod h3{font-size:.92rem}
  .tam{padding:.45rem .5rem;font-size:.72rem}
  .hero h1{font-size:2.2rem}
  .hero-frase{font-size:1.15rem}
  .seccion-titulo{font-size:1.7rem}
  .card-celebra .banda.con-foto{height:96px}
}

/* ---------- Logotipo como título del encabezado de inicio ----------
   Se conserva el <h1> (SEO y lectores de pantalla); el alt de la imagen
   hace las veces de texto del título. */
.hero h1.hero-logo{margin-bottom:1.5rem;line-height:0}
.hero h1.hero-logo img{
  width:min(500px,100%);height:auto;
  filter:drop-shadow(0 14px 26px rgba(75,30,15,.20));
}
@media(max-width:980px){
  .hero h1.hero-logo img{margin-inline:auto}
}
@media(max-width:760px){
  .hero h1.hero-logo{margin-bottom:1.1rem}
  .hero h1.hero-logo img{width:min(360px,86vw)}
}
@media(max-width:400px){
  .hero h1.hero-logo img{width:min(300px,88vw)}
}

/* ═══════════════════════════════════════════════════════════════════
   CAPA FIESTA — rediseño visual (bloque final, manda sobre lo anterior)
   Concepto: papel picado, talavera y color de fiesta mexicana.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --fiesta-rosa:#e4007c;
  --fiesta-naranja:#f0a202;
  --fiesta-turquesa:#1ca9a6;
  --fiesta-verde:#5f8a3d;
  --fiesta-rojo:#e8332a;
  --arcoiris:linear-gradient(90deg,var(--fiesta-rosa),var(--fiesta-naranja),
              var(--dorado),var(--fiesta-turquesa),var(--fiesta-verde),var(--fiesta-rojo));
}

/* ---------- HERO ---------- */
.hero.hero-fiesta{
  min-height:auto;padding:132px 0 96px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#fffdf2 0%,#fdf7d3 45%,#fcea72 100%);
}
@supports (min-height:100svh){ .hero.hero-fiesta{min-height:auto} }

.hero-fondo{
  position:absolute;inset:0;z-index:0;
  background:url('../img/fotos/celebraciones-hero.jpg') center/cover no-repeat;
  opacity:.16;filter:saturate(1.2);
}
.hero.hero-fiesta::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(900px 500px at 82% -8%,rgba(252,234,114,.75),transparent 62%),
    radial-gradient(700px 460px at -8% 108%,rgba(240,138,36,.28),transparent 58%);
}
.hero.hero-fiesta .contenedor{position:relative;z-index:3}

/* ---------- PAPEL PICADO ---------- */
.papel-picado{
  position:absolute;top:78px;left:-2%;width:104%;height:118px;z-index:2;pointer-events:none;
  background:url('../img/papel-picado-fiesta.svg') repeat-x top center;
  background-size:auto 118px;
  transform-origin:top center;
  animation:ondear 7s ease-in-out infinite;
  filter:drop-shadow(0 6px 8px rgba(75,30,15,.18));
}
@keyframes ondear{
  0%,100%{transform:rotate(-.5deg) translateY(0)}
  50%    {transform:rotate(.5deg)  translateY(4px)}
}

/* ---------- PÉTALOS DE CEMPASÚCHIL ---------- */
.petalo{
  position:absolute;width:36px;height:36px;z-index:2;pointer-events:none;opacity:.75;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g fill='%23f08a24'><circle cx='20' cy='7' r='6.2'/><circle cx='33' cy='20' r='6.2'/><circle cx='20' cy='33' r='6.2'/><circle cx='7' cy='20' r='6.2'/><circle cx='29.2' cy='10.8' r='6.2'/><circle cx='29.2' cy='29.2' r='6.2'/><circle cx='10.8' cy='29.2' r='6.2'/><circle cx='10.8' cy='10.8' r='6.2'/></g><circle cx='20' cy='20' r='6' fill='%23e0b41a'/></svg>") center/contain no-repeat;
}
.petalo.p1{top:16%;left:4%;animation:flotar2 9s ease-in-out infinite}
.petalo.p2{bottom:14%;right:6%;width:26px;animation:flotar2 11s ease-in-out infinite reverse}
.petalo.p3{top:52%;left:47%;width:20px;opacity:.5;animation:flotar2 13s ease-in-out infinite}
@keyframes flotar2{
  0%,100%{transform:translateY(0) rotate(0)}
  50%    {transform:translateY(-22px) rotate(120deg)}
}

/* ---------- ONDA DIVISORIA ---------- */
.onda-abajo{
  position:absolute;left:0;bottom:-1px;width:100%;height:58px;z-index:4;pointer-events:none;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,60 L0,26 C180,54 380,2 600,20 C820,38 1010,4 1200,28 L1200,60 Z' fill='%235b3220'/></svg>") no-repeat bottom center/100% 100%;
}

/* ---------- MALLA DEL HERO ---------- */
.hero.hero-fiesta .hero-grid{
  grid-template-columns:1fr minmax(340px,420px);gap:3rem;align-items:center;
}
.hero.hero-fiesta .hero-texto{max-width:34rem}
.hero.hero-fiesta .hero-frase{
  font-size:clamp(1.3rem,3vw,1.9rem);margin:.2rem 0 1rem;color:var(--terracota);
}
.hero.hero-fiesta .hero-logo{margin-bottom:.4rem}
.hero.hero-fiesta .hero-stat .num{font-size:2.4rem;color:var(--guinda)}
.hero.hero-fiesta .hero-stat{position:relative;padding-top:.5rem}
.hero.hero-fiesta .hero-stat::before{
  content:"";position:absolute;top:0;left:0;width:34px;height:4px;
  border-radius:4px;background:var(--arcoiris);
}

/* ═══════════════════ CALCULADORA (protagonista del hero) ═══════════════════ */
.calc-hero{
  background:#fff;border-radius:26px;overflow:hidden;position:relative;
  box-shadow:0 26px 60px rgba(75,30,15,.26),0 2px 0 rgba(255,255,255,.6) inset;
  border:1px solid rgba(224,180,26,.35);
}
.calc-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--arcoiris)}

.calc-cinta{
  background:linear-gradient(135deg,var(--guinda),var(--guinda-claro));
  color:var(--dorado);font-family:'Fraunces',serif;font-weight:900;
  font-size:1.18rem;padding:1.05rem 1.4rem .95rem;display:flex;align-items:center;gap:.6rem;
  margin-top:6px;
}
.calc-cinta span{font-size:1.35rem;filter:saturate(1.3)}

.calc-cuerpo{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.calc-intro{font-size:.92rem;color:var(--texto-suave);margin:0;line-height:1.55}

/* atajos rápidos */
.calc-atajos{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.atajo{
  display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  background:var(--crema2);border:1.5px solid var(--crema3);border-radius:14px;
  padding:.55rem .7rem;cursor:pointer;transition:var(--trans);
  font-family:'Poppins',sans-serif;font-size:.78rem;color:var(--texto-suave);
  text-align:left;line-height:1.25;min-height:52px;justify-content:center;
}
.atajo b{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--guinda);font-weight:900}
.atajo:hover{border-color:var(--ocre);transform:translateY(-2px);background:#fff}
.atajo.activo{background:var(--guinda);border-color:var(--guinda);color:rgba(255,253,242,.85)}
.atajo.activo b{color:var(--dorado)}
.atajo:focus-visible{outline:2px solid var(--terracota);outline-offset:2px}

/* campos */
.calc-campo{display:flex;flex-direction:column;gap:.35rem}
.calc-campo label{
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--terracota);
}
.calc-hero .contador{
  display:flex;align-items:center;background:var(--crema);
  border:2px solid var(--crema3);border-radius:50px;overflow:hidden;
}
.calc-hero .contador button{
  width:52px;height:50px;border:none;background:var(--crema2);
  font-size:1.5rem;line-height:1;color:var(--guinda);cursor:pointer;transition:var(--trans);
}
.calc-hero .contador button:hover{background:var(--ocre);color:var(--guinda-osc)}
.calc-hero .contador input{
  flex:1;min-width:0;border:none;background:transparent;text-align:center;
  font-family:'Fraunces',serif;font-size:1.5rem;font-weight:900;color:var(--guinda-osc);
  -moz-appearance:textfield;
}
.calc-hero .contador input::-webkit-outer-spin-button,
.calc-hero .contador input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-hero select{
  width:100%;padding:.8rem 1rem;border:2px solid var(--crema3);border-radius:14px;
  font-family:'Poppins',sans-serif;font-size:1rem;background:#fff;color:var(--texto);cursor:pointer;
}
.calc-hero select:focus,.calc-hero .contador input:focus{outline:2px solid var(--terracota);outline-offset:1px}

/* resultado */
.calc-salida{
  background:
    url('../img/talavera.svg') repeat,
    linear-gradient(140deg,var(--guinda),var(--guinda-osc));
  background-size:80px,auto;
  background-blend-mode:soft-light,normal;
  border-radius:18px;padding:1.15rem 1.2rem;text-align:center;color:#fff;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.25);
}
.calc-cifra{
  font-family:'Fraunces',serif;font-weight:900;line-height:1;
  font-size:clamp(2.6rem,7vw,3.4rem);color:var(--dorado);
  display:flex;align-items:baseline;justify-content:center;gap:.35rem;
  font-variant-numeric:tabular-nums;
}
.calc-cifra small{font-size:.95rem;font-family:'Poppins',sans-serif;font-weight:500;color:rgba(255,253,242,.9)}
.calc-detalle{margin:.35rem 0 .6rem;font-size:.88rem;color:rgba(255,253,242,.85)}
.calc-bolsas{
  background:rgba(255,255,255,.14);border:1px solid rgba(252,234,114,.35);
  border-radius:30px;padding:.45rem .9rem;font-size:.85rem;font-weight:600;color:var(--dorado);
  display:inline-block;
}
.calc-cta{justify-content:center;width:100%;font-size:.95rem;padding:.95rem 1.2rem}
.calc-nota{font-size:.74rem;color:var(--faint,var(--texto-suave));text-align:center;margin:0;opacity:.75}

@media(max-width:980px){
  .hero.hero-fiesta .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .hero.hero-fiesta .hero-texto{margin-inline:auto;text-align:center}
  .calc-hero{max-width:460px;margin-inline:auto;width:100%}
}
@media(max-width:760px){
  .hero.hero-fiesta{padding:174px 0 72px}
  .papel-picado{top:64px;height:78px;background-size:auto 78px}
  .petalo{display:none}
  .calc-atajos{grid-template-columns:1fr 1fr;gap:.4rem}
  .atajo{font-size:.72rem;padding:.5rem .55rem;min-height:48px}
  .calc-cuerpo{padding:1.1rem 1rem 1.2rem}
  .onda-abajo{height:36px}
}

/* ═══════════════════ RITMO DE FIESTA EN TODO EL SITIO ═══════════════════ */

/* ---------- Títulos con más carácter ---------- */
.seccion-titulo{font-size:clamp(1.9rem,4.6vw,3.1rem);letter-spacing:-.02em;line-height:1.08}
.centro .seccion-titulo{position:relative;display:block}
.centro .seccion-titulo::after{
  content:"";display:block;height:5px;width:min(140px,62%);margin:.7rem auto 0;
  border-radius:5px;background:var(--arcoiris);
}
.eyebrow::before,.eyebrow::after{content:"✦";margin:0 .5rem;opacity:.6;font-size:.8em}

/* ---------- Cenefas onduladas entre secciones ---------- */
.valores{position:relative}
.valores::before{
  content:"";position:absolute;top:-36px;left:0;width:100%;height:38px;z-index:2;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0,40 L0,14 C170,38 360,0 600,12 C840,24 1030,0 1200,16 L1200,40 Z' fill='%235b3220'/></svg>") no-repeat bottom/100% 100%;
}
.cta-final{position:relative}
.cta-final::before{
  content:"";position:absolute;top:-32px;left:0;width:100%;height:34px;z-index:2;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0,40 L0,18 C200,0 380,36 600,20 C820,4 1010,34 1200,14 L1200,40 Z' fill='%23c05f33'/></svg>") no-repeat bottom/100% 100%;
}

/* ---------- Textura de talavera en las secciones oscuras ---------- */
.valores::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background:url('../img/talavera.svg') repeat;background-size:110px;
  mix-blend-mode:soft-light;
}
.valores>*{position:relative;z-index:1}
.historia{
  background:linear-gradient(180deg,var(--crema2),var(--crema));
  position:relative;
}
.historia::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:url('../img/talavera.svg') repeat;background-size:130px;
}
.historia>*{position:relative;z-index:1}

/* ---------- Cinta marquesina más festiva ---------- */
.cinta{background:linear-gradient(90deg,var(--guinda),var(--guinda-claro),var(--guinda));position:relative}
.cinta::before,.cinta::after{content:"";position:absolute;left:0;width:100%;height:4px;background:var(--arcoiris)}
.cinta::before{top:0}.cinta::after{bottom:0}
.cinta span::after{color:var(--dorado)}

/* ---------- Tarjetas con más fiesta ---------- */
.card-user,.pilar,.card-receta,.card-blog,.card-prod{position:relative;overflow:hidden}
.pilar{border-top:none}
.pilar::before,.card-user::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--arcoiris);
}
.card-user:hover,.pilar:hover{transform:translateY(-8px) rotate(-.4deg)}
.card-prod:hover{transform:translateY(-10px) rotate(.5deg)}
.valor:hover{transform:translateY(-8px) rotate(.5deg)}
.card-receta:hover,.card-blog:hover,.card-celebra:hover{transform:translateY(-10px) rotate(-.4deg)}
.app-item:hover{transform:translateY(-6px) scale(1.04);background:var(--crema2)}

/* ---------- Encabezado de páginas interiores ---------- */
.page-hero{padding-top:168px}
.page-hero::before{
  content:"";position:absolute;top:78px;left:-2%;width:104%;height:96px;z-index:1;pointer-events:none;
  background:url('../img/papel-picado-fiesta.svg') repeat-x top center;background-size:auto 96px;
  animation:ondear 8s ease-in-out infinite;
  filter:drop-shadow(0 5px 7px rgba(75,30,15,.16));
}
.page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;z-index:0;
  background:url('../img/talavera.svg') repeat;background-size:120px;
}
.page-hero h1{font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.06;letter-spacing:-.02em}

/* ---------- Botones con más rebote ---------- */
.btn{transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .25s}
.btn-primario:hover,.btn-dorado:hover,.btn-claro:hover{transform:translateY(-4px) scale(1.03)}

/* ---------- Revelado escalonado ---------- */
.reveal{transform:translateY(26px)}
.reveal.visible{transform:none}

@media(max-width:760px){
  .page-hero{padding-top:158px}
  .page-hero::before{top:64px;height:66px;background-size:auto 66px}
  .valores::before,.cta-final::before{height:22px;top:-20px}
  .centro .seccion-titulo::after{height:4px;width:min(110px,55%)}
}
@media(prefers-reduced-motion:reduce){
  .papel-picado,.petalo,.page-hero::before{animation:none!important}
}

/* ═══════════════════ PRESENTACIONES DE 5 KG ═══════════════════ */
.mayoreo{background:var(--crema);position:relative}
.mayoreo::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:url('../img/talavera.svg') repeat;background-size:140px;
}
.mayoreo>*{position:relative;z-index:1}

.grid-mayoreo{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1.3rem;margin-top:2.4rem;
}
.card-mayoreo{
  background:#fff;border-radius:var(--radio-lg);padding:1.2rem 1rem 1.3rem;
  text-align:center;box-shadow:var(--sombra-sm);transition:var(--trans);
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.15rem;
}
.card-mayoreo::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--arcoiris)}
.card-mayoreo:hover{transform:translateY(-10px) rotate(-.5deg);box-shadow:var(--sombra-lg)}
.card-mayoreo-img{
  height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:.5rem;
}
.card-mayoreo-img img{max-height:100%;width:auto;transition:var(--trans);filter:drop-shadow(0 12px 18px rgba(75,30,15,.22))}
.card-mayoreo:hover .card-mayoreo-img img{transform:scale(1.07) rotate(1.5deg)}
.card-mayoreo h3{font-size:1.05rem;line-height:1.25}
.card-mayoreo .formato{
  font-size:.74rem;font-weight:600;letter-spacing:.05em;color:var(--terracota);
  background:var(--crema2);border-radius:30px;padding:.25rem .7rem;display:inline-block;margin-top:.35rem;
}
@media(max-width:760px){
  .grid-mayoreo{grid-template-columns:1fr 1fr;gap:.8rem}
  .card-mayoreo{padding:.9rem .6rem 1rem}
  .card-mayoreo-img{height:130px}
  .card-mayoreo h3{font-size:.9rem}
  .card-mayoreo .formato{font-size:.66rem;padding:.2rem .55rem}
}

/* ═══════════════════ SELLO DE SABOR (sustituye al empaque dibujado) ═══════════════════ */
.card-prod-sello{
  height:210px;display:grid;place-items:center;position:relative;z-index:2;margin-bottom:.4rem;
}
.card-prod-sello::before{
  content:"";position:absolute;width:158px;height:158px;border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.28),transparent 58%),
    var(--sabor,#7a4429);
  box-shadow:0 14px 28px rgba(75,30,15,.28), inset 0 0 0 4px rgba(255,253,242,.55);
  transition:var(--trans);
}
.card-prod-sello::after{
  content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  background:url('../img/talavera.svg') repeat;background-size:52px;
  opacity:.5;mask:radial-gradient(circle,transparent 52%,#000 54%,#000 100%);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 54%,#000 100%);
}
.card-prod-sello span{
  position:relative;z-index:2;font-family:'Fraunces',serif;font-weight:900;
  font-size:1.22rem;line-height:1.1;color:#fff;text-align:center;max-width:120px;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.card-prod:hover .card-prod-sello::before{transform:scale(1.06)}
.card-prod:hover .card-prod-sello::after{transform:rotate(22deg)}
.card-prod-sello::after{transition:transform .6s cubic-bezier(.2,.7,.2,1)}

/* dentro de la ventana de detalle */
.card-prod-sello.grande{height:280px}
.card-prod-sello.grande::before{width:200px;height:200px}
.card-prod-sello.grande::after{width:238px;height:238px;background-size:64px}
.card-prod-sello.grande span{font-size:1.6rem;max-width:150px}

@media(max-width:760px){
  .card-prod-sello{height:132px}
  .card-prod-sello::before{width:104px;height:104px;box-shadow:0 10px 20px rgba(75,30,15,.26), inset 0 0 0 3px rgba(255,253,242,.55)}
  .card-prod-sello::after{width:126px;height:126px;background-size:38px}
  .card-prod-sello span{font-size:.86rem;max-width:86px}
  .card-prod-sello.grande{height:190px}
  .card-prod-sello.grande::before{width:150px;height:150px}
  .card-prod-sello.grande::after{width:178px;height:178px}
  .card-prod-sello.grande span{font-size:1.25rem}
}

/* ═══════════════════ LUPA: ampliar imagen de producto ═══════════════════ */
.card-mayoreo-img{
  border:none;background:none;padding:0;width:100%;cursor:zoom-in;
  position:relative;border-radius:16px;overflow:hidden;
}
.card-mayoreo-img:focus-visible{outline:2px solid var(--terracota);outline-offset:3px}
.lupa-pista{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%) translateY(8px);
  background:var(--guinda);color:var(--dorado);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:.22rem .7rem;border-radius:30px;
  opacity:0;transition:var(--trans);pointer-events:none;white-space:nowrap;
}
.card-mayoreo:hover .lupa-pista{opacity:1;transform:translateX(-50%) translateY(0)}

.lupa{
  position:fixed;inset:0;z-index:3000;display:none;place-items:center;padding:1.4rem;
  background:rgba(30,18,10,.88);backdrop-filter:blur(6px);
}
.lupa.abierta{display:grid;animation:fadein .25s}
.lupa-caja{
  background:var(--crema);border-radius:24px;overflow:hidden;position:relative;
  max-width:min(720px,94vw);width:100%;box-shadow:var(--sombra-lg);
  display:flex;flex-direction:column;
}
.lupa-caja::before{content:"";height:6px;background:var(--arcoiris);flex-shrink:0}
.lupa-caja img{
  width:100%;height:auto;max-height:74vh;object-fit:contain;
  background:
    url('../img/talavera.svg') repeat,
    linear-gradient(160deg,#fffdf2,#fdf7d3);
  background-size:90px,auto;
  padding:1.4rem;
}
.lupa-pie{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.95rem 1.3rem;background:var(--guinda);color:var(--crema);
}
.lupa-pie strong{display:block;font-family:'Fraunces',serif;font-size:1.15rem;color:#fff}
.lupa-pie span{font-size:.82rem;color:var(--dorado)}
.lupa-voltear{
  background:var(--dorado);color:var(--guinda-osc);border:none;border-radius:30px;
  padding:.6rem 1.3rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:.88rem;
  cursor:pointer;transition:var(--trans);white-space:nowrap;
}
.lupa-voltear:hover{background:#fff;transform:translateY(-2px)}
.lupa-voltear:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lupa-cerrar{
  position:absolute;top:18px;right:18px;z-index:3;width:46px;height:46px;border-radius:50%;
  border:none;background:#fff;color:var(--guinda);font-size:1.6rem;line-height:1;cursor:pointer;
  box-shadow:var(--sombra);transition:var(--trans);
}
.lupa-cerrar:hover{background:var(--terracota);color:#fff;transform:rotate(90deg)}
.lupa-cerrar:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}

@media(max-width:760px){
  .lupa{padding:.7rem}
  .lupa-caja img{max-height:64vh;padding:.9rem}
  .lupa-pie{padding:.8rem 1rem}
  .lupa-cerrar{top:10px;right:10px;width:40px;height:40px;font-size:1.4rem}
  .lupa-pista{opacity:1;transform:translateX(-50%);font-size:.6rem;padding:.18rem .55rem}
}

/* ═══════════════════ EMPAQUE QUE SE VOLTEA ═══════════════════ */
.empaque{position:relative;perspective:1000px}
.card-mayoreo-img{height:auto;display:block;padding:0;background:none;border:none}
.flip{
  display:block;position:relative;height:180px;
  transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.2,.75,.2,1);
}
.flip .cara{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.flip .cara.atras{transform:rotateY(180deg)}
.flip .cara img{
  max-height:100%;width:auto;max-width:100%;
  filter:drop-shadow(0 12px 18px rgba(75,30,15,.22));
}
/* al pasar el cursor se asoma el reverso */
@media(hover:hover){
  .empaque.con-reverso:hover .flip{transform:rotateY(180deg)}
  .empaque.con-reverso.volteada:hover .flip{transform:rotateY(360deg)}
}
.empaque.volteada .flip{transform:rotateY(180deg)}
.card-mayoreo:hover .card-mayoreo-img img{transform:none}

/* botón de voltear */
.voltear{
  position:absolute;top:2px;right:2px;z-index:4;
  width:36px;height:36px;border-radius:50%;border:1.5px solid var(--crema3);
  background:#fff;color:var(--guinda);font-size:1.15rem;line-height:1;cursor:pointer;
  box-shadow:var(--sombra-sm);transition:var(--trans);
}
.voltear:hover{background:var(--dorado);border-color:var(--ocre);transform:rotate(-180deg)}
.voltear:focus-visible{outline:2px solid var(--terracota);outline-offset:2px}

/* ---------- volteo dentro de la lupa ---------- */
.lupa-flip{
  position:relative;transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.2,.75,.2,1);
  min-height:min(74vh,560px);
  background:url('../img/talavera.svg') repeat,linear-gradient(160deg,#fffdf2,#fdf7d3);
  background-size:90px,auto;
}
.lupa-flip .cara{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:1.4rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.lupa-flip .cara.atras{transform:rotateY(180deg)}
.lupa-flip.volteada{transform:rotateY(180deg)}
.lupa-flip .cara img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lupa-caja img{padding:0;background:none}

@media(max-width:760px){
  .flip{height:130px}
  .voltear{width:32px;height:32px;font-size:1rem}
  .lupa-flip{min-height:min(62vh,440px)}
  .lupa-flip .cara{padding:.9rem}
}
@media(prefers-reduced-motion:reduce){
  .flip,.lupa-flip{transition:none}
}

/* ═══════════════════ ICONOS PROPIOS ═══════════════════
   Sustituyen a los emojis. Trazo que hereda el color del contexto,
   con el acento floral relleno en cempasúchil ya dentro del símbolo. */
.ico-j{
  width:1em;height:1em;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;
}
/* En las tarjetas el icono vive dentro de un medallón */
.valor .ico,.pilar .ico,.card-user .ico,.app-item .ico,.card-negocio .ico{
  display:grid;place-items:center;
}
.valor .ico .ico-j,.pilar .ico .ico-j,.card-user .ico .ico-j{width:28px;height:28px}
.app-item .ico{font-size:0}
.app-item .ico .ico-j{width:30px;height:30px;color:var(--terracota);margin-inline:auto}
.valor .ico .ico-j{color:#fff;stroke-width:1.6}
.pilar .ico,.card-user .ico{
  width:56px;height:56px;border-radius:16px;margin-bottom:1rem;
  background:linear-gradient(135deg,var(--crema2),var(--crema3));color:var(--guinda);
}
.pilar .ico .ico-j,.card-user .ico .ico-j{color:var(--guinda)}

/* Celebraciones: el icono va sobre la foto */
.card-celebra .banda .emoji .ico-j{width:38px;height:38px;color:#fff;stroke-width:1.5}
.card-celebra .banda.con-foto .emoji{display:grid;place-items:center}

/* Blog */
.card-blog .miniatura{display:grid;place-items:center}
.card-blog .miniatura .ico-j{width:44px;height:44px;color:var(--guinda);stroke-width:1.5}

@media(max-width:760px){
  .card-celebra .banda .emoji .ico-j{width:30px;height:30px}
  .pilar .ico,.card-user .ico{width:48px;height:48px}
  .valor .ico .ico-j,.pilar .ico .ico-j,.card-user .ico .ico-j{width:24px;height:24px}
}

/* ═══════════════════ RUPTURAS DE RITMO EN EL INICIO ═══════════════════ */

/* ---------- Mosaico: una grande, tres chicas ---------- */
.mosaico-celebra{
  display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:auto auto;
  gap:1.2rem;margin-top:2.6rem;
}
.cel-grande{grid-row:span 2}
.cel-grande,.cel-chica{
  position:relative;border-radius:var(--radio-lg);overflow:hidden;
  box-shadow:var(--sombra);transition:var(--trans);isolation:isolate;
}
.cel-grande img,.cel-chica img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);z-index:-2;
}
.cel-grande::after,.cel-chica::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(62,33,20,.15) 20%,rgba(62,33,20,.88));
}
.cel-grande:hover img,.cel-chica:hover img{transform:scale(1.07)}
.cel-grande:hover,.cel-chica:hover{transform:translateY(-6px);box-shadow:var(--sombra-lg)}
.cel-texto{position:relative;padding:1.4rem;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.cel-grande .cel-texto{min-height:400px;padding:1.8rem}
.cel-chica .cel-texto{min-height:188px}
.cel-texto .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,253,242,.16);border:1px solid rgba(252,234,114,.4);margin-bottom:.8rem}
.cel-texto .ico .ico-j{width:26px;height:26px;color:var(--dorado)}
.cel-texto h3{color:#fff;font-size:1.2rem;margin-bottom:.25rem}
.cel-grande .cel-texto h3{font-size:1.85rem}
.cel-texto p{color:rgba(255,253,242,.86);font-size:.88rem;line-height:1.5}
.cel-grande .cel-texto p{font-size:1rem;max-width:34ch}

/* ---------- Cita a sangre completa ---------- */
.cita-sangre{position:relative;padding:clamp(4rem,11vw,7.5rem) 0;overflow:hidden;isolation:isolate}
.cita-fondo{
  position:absolute;inset:0;z-index:-2;
  background:url('../img/fotos/nosotros-esencia.jpg') center/cover no-repeat;
  transform:scale(1.04);
}
.cita-sangre::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,rgba(62,33,20,.92),rgba(91,50,32,.78) 60%,rgba(192,95,51,.7));
}
.cita-texto{
  font-family:'Fraunces',serif;font-weight:700;color:#fff;text-align:center;
  font-size:clamp(1.5rem,4.2vw,2.9rem);line-height:1.22;letter-spacing:-.015em;
  max-width:22ch;margin-inline:auto;text-wrap:balance;
}
.cita-texto em{color:var(--dorado);font-style:italic}
.cita-firma{
  margin-top:1.6rem;text-align:center;color:var(--dorado);
  font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}

/* ---------- Franja de un solo dato ---------- */
.franja-dato{background:var(--crema2);padding:clamp(2.6rem,6vw,4rem) 0;position:relative;overflow:hidden}
.franja-dato::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:url('../img/talavera.svg') repeat;background-size:130px;
}
.franja-dato .contenedor{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,3rem);
  align-items:center;
}
.dato-cifra{
  font-family:'Fraunces',serif;font-weight:900;color:var(--guinda);line-height:.85;
  display:flex;align-items:baseline;gap:.4rem;font-variant-numeric:tabular-nums;
}
.dato-cifra span{font-size:clamp(4.5rem,15vw,9rem)}
.dato-cifra small{
  font-family:'Poppins',sans-serif;font-size:clamp(.9rem,2vw,1.2rem);font-weight:600;
  color:var(--terracota);text-transform:uppercase;letter-spacing:.14em;
}
.dato-texto{
  font-size:clamp(1rem,2.2vw,1.3rem);color:var(--texto-suave);line-height:1.6;
  border-left:4px solid var(--ocre);padding-left:clamp(1rem,2.5vw,1.6rem);max-width:44ch;
}

@media(max-width:900px){
  .mosaico-celebra{grid-template-columns:1fr 1fr}
  .cel-grande{grid-row:span 1;grid-column:span 2}
  .cel-grande .cel-texto{min-height:300px}
}
@media(max-width:560px){
  .mosaico-celebra{grid-template-columns:1fr;gap:.9rem}
  .cel-grande{grid-column:span 1}
  .cel-grande .cel-texto{min-height:250px;padding:1.3rem}
  .cel-chica .cel-texto{min-height:160px}
  .franja-dato .contenedor{grid-template-columns:1fr;gap:1rem}
  .dato-texto{border-left:none;border-top:4px solid var(--ocre);padding-left:0;padding-top:1rem}
}

/* ═══════════════════ PUNTOS DE VENTA ═══════════════════ */
.lista-dist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
.dist-item{
  background:#fff;border:1px solid var(--crema3);border-left:5px solid var(--ocre);
  border-radius:var(--radio);padding:1.5rem 1.6rem;transition:var(--trans);
  display:flex;flex-direction:column;gap:.15rem;cursor:default;
}
.dist-item:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-left-color:var(--terracota)}
.dist-item h4{font-family:'Fraunces',serif;font-size:1.25rem;color:var(--guinda);margin-bottom:.4rem}
.dist-item .dir{font-size:.92rem;color:var(--texto-suave);line-height:1.5}
.dist-item .dir.zona{font-size:.84rem;color:var(--faint,var(--texto-suave));opacity:.85}
.dist-nota{font-size:.85rem;color:var(--terracota);font-weight:600;margin-top:.6rem}
.dist-contacto{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.dist-contacto a{
  font-size:.85rem;font-weight:600;color:var(--guinda);background:var(--crema2);
  border:1px solid var(--crema3);border-radius:30px;padding:.35rem .9rem;transition:var(--trans);
}
.dist-contacto a:hover{background:var(--guinda);color:var(--crema);border-color:var(--guinda)}

.dist-aviso{
  margin-top:2rem;background:linear-gradient(135deg,var(--crema2),var(--crema3));
  border-radius:var(--radio-lg);padding:1.6rem 1.8rem;
  display:grid;grid-template-columns:auto 1fr auto;gap:1.3rem;align-items:center;
}
.dist-aviso .ico{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:#fff;box-shadow:var(--sombra-sm);
}
.dist-aviso .ico .ico-j{width:28px;height:28px;color:var(--terracota)}
.dist-aviso strong{display:block;font-family:'Fraunces',serif;font-size:1.15rem;color:var(--guinda)}
.dist-aviso p{font-size:.92rem;color:var(--texto-suave);margin-top:.2rem;max-width:52ch}
@media(max-width:760px){
  .dist-aviso{grid-template-columns:1fr;text-align:center;justify-items:center;gap:.9rem}
  .dist-aviso p{max-width:none}
}