/* =====================================================================
   Miel Tapekua · base
   Colores de marca: #9A5F08 rojo · #F8F2DC crema · #F0AE1F oro del logo

   RENDIMIENTO (esto es lo que importa, la mayoría entra desde el móvil):
   el fondo se PINTA UNA VEZ con radial-gradients. Ni filter:blur, ni
   backdrop-filter, ni animaciones de capas grandes. La versión anterior
   tenía 4 manchas de 62vmax desenfocadas y animadas más un backdrop-filter
   por tarjeta: 19 capas recompuestas por fotograma. Iba a tirones.
   ===================================================================== */
:root{
  --miel:#9A5F08;
  --miel-osc:#6F4405;
  --miel-cla:#D08A16;
  --crema:#F8F2DC;
  --crema-cla:#FDF9EF;
  --oro:#F0AE1F;
  --oro-cla:#F7C24A;
  --tinta:#2A1A0B;
  --tinta2:#7A5A42;
  --tinta3:#A3897A;

  --panel:#FFFFFF;
  --panel-borde:rgba(42,26,11,.07);
  --linea:rgba(42,26,11,.08);
  --sombra:0 1px 2px rgba(42,26,11,.04),0 8px 24px -14px rgba(42,26,11,.2);
  --sombra-alta:0 2px 6px rgba(42,26,11,.05),0 22px 50px -22px rgba(42,26,11,.3);

  --r:18px;
  --r-sm:12px;
  --r-lg:26px;
  --suave:cubic-bezier(.22,1,.36,1);
  --rapido:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
/* el lienzo es BLANCO. El color vive solo en la franja de portada. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#FFFFFF}
body{
  position:relative;                /* ancla la franja, sin crear contexto de apilado */
  margin:0;min-height:100dvh;color:var(--tinta);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------------------------------------------------------------------
   LA FRANJA DE PORTADA
   Es el paisaje de Lagunitas, donde se cosecha la miel, disuelto en el
   blanco de la pagina. Una sola capa pintada una vez: ni blur, ni
   backdrop-filter, ni animacion (eso es lo que hunde los telefonos viejos).

   El orden importa. La PRIMERA capa es la de arriba del todo:
     1. el velo que apaga la foto hacia abajo hasta blanco puro, para que no
        quede una raya de corte contra la pagina;
     2. un claro en el centro, que es donde caen el sello y el texto;
     3. dos manchas de miel en las esquinas de arriba, del amarillo del logo;
     4. la foto;
     5. un crema de respaldo por si la foto no llega a cargar.
   --------------------------------------------------------------------- */
.tope{position:relative;isolation:isolate}
.aurora{
  position:absolute;left:0;right:0;
  /* baja algo mas de lo que ocupa la portada: ese sobrante es donde la foto
     se disuelve en blanco, para que no haya un corte seco */
  bottom:-3.2rem;
  top:calc(-64px - env(safe-area-inset-top));
  z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(253,249,239,.30)  0%,
      rgba(253,249,239,.38) 30%,
      rgba(253,249,239,.74) 60%,
      rgba(255,255,255,.93) 84%,
      #FFFFFF               99%),
    radial-gradient(60% 58% at 50% 50%, rgba(255,252,242,.82) 0%, rgba(255,252,242,0) 74%),
    radial-gradient(46% 62% at   1%  0%, rgba(240,174,31,.44) 0%, rgba(240,174,31,0) 70%),
    radial-gradient(48% 64% at 100%  0%, rgba(154,95,8,.34)   0%, rgba(154,95,8,0)   68%),
    url("../fotos/paisaje.jpg") center 46% / cover no-repeat,
    linear-gradient(168deg,#FBF3E2 0%,#F6EAD2 60%,#F2E3C6 100%);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}

/* ---------- marca ---------- */
/* El sello lleva el nombre dibujado dentro, asi que la marca es el sello.
   Esto es solo el respaldo por si algun dia lo quitan desde el panel. */
.marca-txt{font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--tinta)}
.mayus{text-transform:uppercase;letter-spacing:.28em;font-weight:500;font-size:.66rem;color:var(--tinta3)}

/* ---------- superficies ---------- */
.panel{background:var(--panel);border:1px solid var(--panel-borde);
  border-radius:var(--r);box-shadow:var(--sombra)}

/* ---------- botones ---------- */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid transparent;border-radius:999px;cursor:pointer;font-weight:500;
  padding:.78rem 1.5rem;font-size:.95rem;line-height:1;
  transition:transform .2s var(--suave),box-shadow .2s var(--suave),
             background-color .18s var(--rapido),border-color .18s var(--rapido);
}
.b:active{transform:scale(.97)}
.b-miel{background:var(--miel);color:#fff;box-shadow:0 6px 18px -8px rgba(154,95,8,.6)}
.b-miel:hover{background:var(--miel-osc);box-shadow:0 10px 24px -10px rgba(154,95,8,.55)}
.b-claro{background:#fff;color:var(--tinta);border-color:var(--panel-borde);box-shadow:var(--sombra)}
.b-claro:hover{border-color:rgba(42,26,11,.18)}
.b-fino{padding:.5rem 1.05rem;font-size:.86rem}
.b-lleno{width:100%}

/* ---------- iconos ---------- */
.ic{display:inline-block;vertical-align:-.18em;flex-shrink:0}
.silueta{width:42%;height:auto;max-width:52px;color:var(--tinta);opacity:.11}

/* ---------- utilidades ---------- */
.caja{width:min(100% - 2.2rem,1120px);margin-inline:auto}
.centro{text-align:center}
.nums{font-variant-numeric:tabular-nums}
.pista{font-size:.82rem;color:var(--tinta3)}

/* Aquí hubo un content-visibility:auto con contain-intrinsic-size 600px.
   Se quitó: las secciones de abajo miden bastante menos, así que la página
   se encogía 764px mientras bajabas y el contenido saltaba bajo el dedo.
   Son secciones pequeñas; pintarlas de una no cuesta nada. */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* la pantalla de acceso al panel lleva la misma aurora, a pantalla completa */
.aurora-llena{position:fixed;inset:0;top:0;height:auto;clip-path:none}