/* ═══════════════════════════════════════════════════════════
   Monstruo de Laboratorio · hoja de estilo única
   Paleta: naranja de la marca + rosa chicle del logotipo
   ═══════════════════════════════════════════════════════════ */

/* Bristol, la tipografía del manual de identidad.
   Es un subconjunto extraído del PDF del manual: solo trae MAYÚSCULAS, cifras y
   algunos signos. El unicode-range la limita a esos caracteres, así que las tildes,
   los puntos y la puntuación caen solos en Fredoka sin romper nada.
   Cuando el cliente pase el archivo completo con licencia web, se sustituye aquí. */
@font-face{
  font-family:'Bristol';
  src:url('/assets/fuentes/bristol-subset.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0021, U+0023-0026, U+0028-002A, U+0030-0039, U+0040-005A, U+005E;
}

:root{
  /* Colores del manual de identidad */
  --naranja:      #FF8F33;
  --naranja-vivo: #FFA24F;
  --naranja-hondo:#E9761B;
  --rosa:         #FF3399;
  --rosa-suave:   #FF6CBD;
  --crema:        #FFF4E8;
  --crema-honda:  #FFE7CE;
  --tinta:        #2B1405;
  --tinta-suave:  #6B4A31;
  --blanco:       #FFFFFF;

  --radio:        26px;
  --radio-sm:     16px;
  --sombra:       0 14px 34px rgba(43,20,5,.13);
  --sombra-alta:  0 22px 50px rgba(43,20,5,.20);

  --titulo: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --cartel: 'Bristol', 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --texto:  'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--titulo); line-height:1.05; margin:0 0 .4em; letter-spacing:-.01em; }
h1,h2{ font-family:var(--cartel); text-transform:uppercase; letter-spacing:.005em; }
h1{ font-size:clamp(2.6rem, 6.2vw, 4.5rem); font-weight:700; }
h2{ font-size:clamp(2rem, 4.2vw, 3.1rem); font-weight:700; }
h3{ font-size:1.25rem; font-weight:600; }
p{ margin:0 0 1em; }

a{ color:inherit; }

.contenedor{ width:min(var(--ancho), calc(100% - 2.5rem)); margin-inline:auto; }
.contenedor--estrecho{ width:min(760px, calc(100% - 2.5rem)); }

.pixel{ position:absolute; width:1px; height:1px; left:-9999px; top:0; }

/* visible para lectores de pantalla y buscadores, no para la vista */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--rosa); color:#fff; padding:.8rem 1.2rem; border-radius:0 0 12px 0;
  font-weight:800; text-decoration:none;
}
.saltar:focus{ left:0; }

:focus-visible{ outline:3px solid var(--rosa); outline-offset:3px; border-radius:6px; }

/* ══════════ BOTONES ══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--titulo); font-weight:600; font-size:1.02rem;
  padding:.86rem 1.7rem; border-radius:999px; text-decoration:none;
  border:3px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--rosa{ background:var(--rosa); color:#fff; box-shadow:0 8px 0 #C41C6E; }
.btn--rosa:hover{ box-shadow:0 10px 0 #C41C6E; }
.btn--rosa:active{ transform:translateY(4px); box-shadow:0 4px 0 #C41C6E; }
.btn--blanco{ background:#fff; color:var(--tinta); box-shadow:0 8px 0 rgba(43,20,5,.18); }
.btn--blanco:active{ transform:translateY(4px); box-shadow:0 4px 0 rgba(43,20,5,.18); }
.btn--linea{ background:transparent; color:var(--tinta); border-color:var(--tinta); }
.btn--linea:hover{ background:var(--tinta); color:#fff; }
.btn--contorno{ background:transparent; color:#fff; border-color:#fff; }
.btn--contorno:hover{ background:#fff; color:var(--naranja-hondo); }
.btn--icono svg{ width:22px; height:22px; fill:currentColor; }
.btn--icono svg .chip{ fill:var(--rosa); }
.btn--rosa.btn--icono svg{ fill:#fff; }
.btn--rosa.btn--icono svg .chip{ fill:var(--rosa); }
.btn--sm{ padding:.6rem 1.15rem; font-size:.92rem; }
.btn--lg{ padding:1.05rem 2.2rem; font-size:1.14rem; }

/* ══════════ CABECERA ══════════ */
/* Blanca, fija arriba. Se esconde al bajar y reaparece al subir. */
.cabecera{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--blanco);
  box-shadow:0 2px 18px rgba(43,20,5,.07);
  transform:translateY(0);
  transition:transform .3s ease, opacity .3s ease;
}
.cabecera.oculta{ transform:translateY(-104%); opacity:0; }
.cabecera__fila{ display:flex; align-items:center; gap:1.5rem; padding:.75rem 0; }
.marca img{ width:180px; height:auto; }
.nav{ display:flex; gap:1.7rem; margin-inline:auto; }
.nav a{
  font-family:var(--titulo); font-weight:600; font-size:1.02rem; color:var(--tinta);
  text-decoration:none; padding-bottom:4px; border-bottom:3px solid transparent;
}
.nav a:hover{ color:var(--rosa); border-bottom-color:var(--rosa); }
.nav a.activo{ border-bottom-color:var(--rosa); }

.hamburguesa{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  width:44px; height:44px; padding:10px; flex-direction:column; justify-content:space-between;
}
.hamburguesa span{ display:block; height:4px; background:var(--rosa); border-radius:3px; }
.hamburguesa[aria-expanded="true"] span{ background:var(--naranja-hondo); }

.menu-movil{ display:none; flex-direction:column; gap:.2rem; padding:0 1.25rem 1.25rem; }
.menu-movil a{
  font-family:var(--titulo); font-weight:600; text-decoration:none;
  padding:.85rem 0; border-bottom:2px solid rgba(43,20,5,.08);
}
.menu-movil .btn{ margin-top:1rem; border-bottom:0; }
.menu-movil[hidden]{ display:none; }

/* ══════════ TRAMA DE MARCA ══════════ */
/* Manchas del manual de identidad, vectorizadas para que no pixelen al escalar. */
.trama{
  position:absolute; inset:0;
  background:url("/assets/marca/trama-hero.svg") center/cover no-repeat;
  opacity:.9; pointer-events:none;
}
.manchas{
  position:absolute; inset:0;
  background:url("/assets/marca/trama.svg") center/cover no-repeat;
  opacity:.14; filter:grayscale(1) brightness(3); pointer-events:none;
}

/* ══════════ HERO ══════════ */
.hero{ padding-top:76px; background:var(--blanco); }
.hero__tarjeta{
  position:relative; overflow:hidden;
  border-radius:0;
  background:linear-gradient(150deg, var(--naranja-vivo), var(--naranja) 50%, var(--naranja-hondo));
  color:#fff;
  padding:clamp(3.6rem, 7vh, 5.5rem) clamp(1.4rem, 3vw, 3rem) 1.2rem;
  min-height:min(76vh, 760px);
  display:flex; flex-direction:column;
}

/* tres columnas: texto · mascota · ventajas */
.hero__cuerpo{
  position:relative; z-index:2; flex:1;
  display:grid; grid-template-columns:minmax(300px,1fr) minmax(320px,1.15fr) minmax(240px,.85fr);
  gap:1.5rem clamp(1rem, 2.5vw, 2.5rem); align-items:center;
}
.hero__texto h1{
  font-size:clamp(2.9rem, 5.2vw, 4.4rem); line-height:.98;
  text-shadow:0 4px 0 rgba(43,20,5,.14); margin-bottom:.55em;
}
.hero__texto h1 em{
  color:var(--rosa); font-style:normal;
  -webkit-text-stroke:3px #fff; paint-order:stroke fill;
}
.hero__sub{
  font-size:1.02rem; font-weight:600; max-width:30ch;
  margin-bottom:1.6rem; color:rgba(255,255,255,.95);
}
.hero__botones{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.6rem; }

.prueba{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; padding:0; margin:0; font-size:.92rem; }
.prueba li{ display:flex; gap:.4rem; align-items:baseline; }
.prueba strong{ font-family:var(--titulo); font-size:1.1rem; color:#FFF3B0; }

.hero__mascota{ position:relative; display:flex; justify-content:center; align-self:end; }
.hero__mascota img{
  position:relative; z-index:1;
  width:min(100%, 430px);
  filter:drop-shadow(0 24px 30px rgba(43,20,5,.32));
}
.destellos{
  position:absolute; inset:-4% -12% 0; width:124%; height:104%;
  opacity:.95; pointer-events:none;
}

.hero__features{ list-style:none; padding:0; margin:0; display:grid; gap:1.5rem; }
.hero__features li{ display:flex; gap:.9rem; align-items:flex-start; }
.hero__features .ico{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  background:#fff; display:grid; place-items:center; box-shadow:0 8px 18px rgba(43,20,5,.18);
}
.hero__features .ico svg{ width:28px; height:28px; fill:var(--naranja); }
.hero__features .ico svg .chip{ fill:#fff; }
.hero__features .ico svg .ojo{ fill:#fff; }
.hero__features .ico svg .pupila{ fill:var(--naranja); }
.hero__features .ico svg .boca{ fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; }
.hero__features .ico--rosa svg{ fill:var(--rosa); }
.hero__features strong{ font-family:var(--titulo); display:block; font-size:1.08rem; }
.hero__features p{ margin:.15rem 0 0; font-size:.92rem; color:rgba(255,255,255,.9); line-height:1.45; }

.hero__flecha{
  position:relative; z-index:2; align-self:center; margin-top:.4rem;
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; color:#fff;
}
.hero__flecha svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.hero__flecha:hover{ background:rgba(255,255,255,.16); }

/* ══════════ FRANJA ══════════ */
.franja{ background:var(--rosa); color:#fff; padding:1.4rem 0; }
.franja__fila{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1rem; text-align:center; }
.franja__fila div{ display:flex; flex-direction:column; }
.franja strong{ font-family:var(--titulo); font-size:1.5rem; line-height:1.1; }
.franja span{ font-size:.88rem; opacity:.92; }

/* ══════════ SECCIONES ══════════ */
.seccion{ padding:clamp(3.2rem, 7vw, 5.5rem) 0; position:relative; overflow:hidden; }
.seccion--crema{ background:var(--crema); }
.seccion--naranja{
  background:linear-gradient(150deg, var(--naranja-vivo), var(--naranja-hondo));
  color:#fff;
}
.seccion__cabecera{ max-width:720px; margin-bottom:2.6rem; }
.antetitulo{
  font-family:var(--cartel); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.82rem; color:var(--rosa); margin-bottom:.5rem;
}
.antetitulo--claro{ color:#FFE066; }
.seccion__intro{ font-size:1.08rem; color:var(--tinta-suave); max-width:56ch; }
.seccion--naranja .seccion__intro{ color:rgba(255,255,255,.92); }

/* ══════════ REJILLA DE COOKIES ══════════ */
.rejilla-cookies{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:1.5rem;
}
.rejilla-cookies--dos{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); max-width:560px; }
.cookie{
  background:#fff; border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra); border:3px solid var(--crema-honda);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cookie:hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:var(--sombra-alta); border-color:var(--rosa-suave); }
.cookie img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.cookie h3, .cookie h4{ font-family:var(--titulo); font-weight:600; line-height:1.05;
  margin:.9rem 1.1rem .25rem; font-size:1.14rem; }
.cookie p{ margin:0 1.1rem 1.15rem; font-size:.92rem; color:var(--tinta-suave); line-height:1.5; }

.subtitulo-carta{
  font-family:var(--cartel);
  text-transform:uppercase; font-size:1.7rem; margin:3rem 0 1.4rem;
}

.alergenos{
  margin-top:2.5rem; padding:1.1rem 1.35rem;
  background:var(--crema); border-left:6px solid var(--rosa);
  border-radius:0 var(--radio-sm) var(--radio-sm) 0;
  font-size:.95rem; color:var(--tinta-suave);
}
.alergenos strong{ color:var(--tinta); }

.carta__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }

/* ══════════ LABORATORIO ══════════ */
.laboratorio{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center;
}
.laboratorio p{ font-size:1.06rem; color:rgba(255,255,255,.94); max-width:52ch; }
.laboratorio__cierre em{ color:#FFF3B0; font-style:italic; }
.laboratorio .btn{ margin-top:.8rem; }
.laboratorio__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.laboratorio__grid img{
  border-radius:var(--radio); border:4px solid rgba(255,255,255,.85); box-shadow:var(--sombra-alta);
}
.laboratorio__grid img:nth-child(1){ transform:rotate(-3deg); }
.laboratorio__grid img:nth-child(2){ transform:rotate(2.5deg); }
.laboratorio__grid img:nth-child(3){ transform:rotate(2deg); }
.laboratorio__grid img:nth-child(4){ transform:rotate(-2.5deg); }

/* ══════════ LOCALES ══════════ */
.rejilla-locales{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem;
}
.local{
  background:#fff; border:3px solid var(--crema-honda); border-radius:var(--radio);
  padding:1.6rem 1.5rem; box-shadow:var(--sombra);
  display:flex; flex-direction:column;
}
.local h3{ font-size:1.35rem; color:var(--naranja-hondo); }
.local__zona{ font-size:.95rem; color:var(--tinta-suave); margin-bottom:.6rem; }
.local__horario{ font-size:.97rem; margin-bottom:1.3rem; }
.local__acciones{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:auto; }

/* ══════════ FAQ ══════════ */
.faq details{
  background:#fff; border:3px solid var(--crema-honda); border-radius:var(--radio-sm);
  margin-bottom:.9rem; overflow:hidden;
}
.faq summary{
  font-family:var(--titulo); font-weight:600; font-size:1.08rem;
  padding:1.05rem 3rem 1.05rem 1.3rem; cursor:pointer; position:relative; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:1.3rem; top:50%; transform:translateY(-50%);
  font-size:1.6rem; color:var(--rosa); line-height:1;
}
.faq details[open] summary::after{ content:'–'; }
.faq details[open] summary{ color:var(--rosa); }
.faq p{ margin:0; padding:0 1.3rem 1.25rem; color:var(--tinta-suave); }

/* ══════════ CIERRE ══════════ */
.cierre{
  background:var(--rosa); color:#fff; text-align:center;
  padding:clamp(3rem, 6vw, 4.5rem) 0;
}
.cierre h2{ margin-bottom:1.5rem; }
.cierre__botones{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.cierre .btn--rosa{ background:#fff; color:var(--rosa); box-shadow:0 8px 0 rgba(43,20,5,.22); }

/* ══════════ PIE ══════════ */
.pie{ background:var(--tinta); color:#F6E7D8; padding:3rem 0 1.5rem; }
.pie__fila{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; }
.pie__marca img{ width:160px; margin-bottom:.8rem; }
.pie__marca p{ font-size:.95rem; opacity:.8; }
.pie h3{ font-size:1.05rem; color:var(--rosa-suave); margin-bottom:.6rem; }
.pie p{ font-size:.93rem; margin:0 0 .35rem; opacity:.85; }
.pie a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.pie__legal{ margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.14); }
.pie__legal p{ font-size:.85rem; opacity:.6; margin:0; }
.pie__legal a{ color:var(--rosa-suave); }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 980px){
  .menu-movil:not([hidden]){ display:flex; }
  .nav{ display:none; }
  .hamburguesa{ display:flex; }
  .cabecera__fila > .btn{ display:none; }
  .hero__cuerpo{ grid-template-columns:1fr; text-align:center; }
  .hero__texto{ order:2; }
  .hero__mascota{ order:1; }
  .hero__mascota img{ width:min(76%, 300px); }
  .hero__sub{ margin-inline:auto; }
  .hero__botones, .prueba{ justify-content:center; }
  .hero__features{ order:3; text-align:left; max-width:520px; margin-inline:auto; }
  .destellos{ display:none; }
  .laboratorio{ grid-template-columns:1fr; }
  .laboratorio p{ max-width:none; }
  .pie__fila{ grid-template-columns:1fr; }
}

@media (max-width: 620px){
  body{ font-size:16px; }
  .franja__fila{ grid-template-columns:1fr 1fr; gap:1.2rem .6rem; }
  /* el tercer dato se queda solo en su fila: que ocupe el ancho y quede centrado */
  .franja__fila div:last-child{ grid-column:1 / -1; }
  .rejilla-cookies{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1rem; }
  .cookie h3, .cookie h4{ font-size:1rem; margin:.7rem .85rem .2rem; }
  .cookie p{ font-size:.85rem; margin:0 .85rem .95rem; }
  .carta__cta .btn, .cierre__botones .btn, .hero__botones .btn{ width:100%; }
  .marca img{ width:140px; }
  .hero{ padding-top:66px; }
  /* en móvil el monstruo se come la pantalla y empuja el mensaje fuera de vista */
  .hero__mascota{ display:none; }
  .hero__tarjeta{ padding:2rem 1.1rem 1.2rem; }
  .hero__texto h1{ font-size:clamp(3rem, 14vw, 4.2rem); }
  .hero__sub{ font-size:.92rem; line-height:1.55; max-width:32ch; }
}