/* =====================================================================
   MOLIENDA CAFÉ · Sistema visual
   ---------------------------------------------------------------------
   Tokens, base tipográfica y componentes. El layout se arma con
   utilidades de Tailwind (CDN) en index.html; acá vive lo que tiene
   que verse bien aunque Tailwind tarde un instante en compilar.

   Orden de capas: Tailwind usa theme/base/components/utilities.
   Lo declaramos primero para que las utilidades siempre ganen.
   ===================================================================== */
@layer theme, base, components, utilities;

/* ---------------------------------------------------------------------
   0. TIPOGRAFÍAS (archivos de Google Fonts, servidos desde el sitio)
   Son los mismos archivos que entrega Google Fonts (licencia OFL), subset
   latino: cubre todo el español (á é í ó ú ñ ¿ ¡). Servirlos desde acá
   evita conectarse a dos servidores de Google antes de dibujar la página.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/young-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700; /* fuente variable: un solo archivo para todos los pesos */
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Marca (del brief) */
  --crema: #F2EADF;          /* fondo */
  --espresso: #2B1D16;       /* texto */
  --caramelo: #C26A3D;       /* acento: superficies, íconos, display grande */
  --salvia: #8A9A7B;         /* secundario: superficies */

  /* Derivados para contraste AA (no cambian la paleta, la hacen legible) */
  --crema-claro: #F8F3EC;    /* papel de la carta */
  --crema-hondo: #E8DDCD;    /* bandas y separadores */
  --espresso-suave: #5A4A40; /* texto secundario · 7,1:1 sobre crema */
  --caramelo-hondo: #A0522B; /* texto y botones · 4,7:1 con crema */
  --salvia-hondo: #56664A;   /* texto salvia · 5,2:1 sobre crema */

  --linea: rgb(43 29 22 / 0.14);
  --sombra: 0 30px 60px -30px rgb(43 29 22 / 0.45), 0 8px 18px -12px rgb(43 29 22 / 0.25);

  /* Forma: imágenes y paneles 20px · interactivos en píldora */
  --radio: 1.25rem;
  --radio-chico: 0.75rem;

  /* Movimiento */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Capas (única escala de z-index del sitio) */
  --z-nav: 40;
  --z-menu: 45;
  --z-flotante: 50;
  --z-pedido: 55;
  --z-grano: 60;
  --z-salto: 70;

  /* Foco: se invierte a crema dentro de zonas oscuras */
  --foco: var(--caramelo-hondo);

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem; /* compensa la barra fija al saltar a #anclas */
  }

  body {
    margin: 0;
    background: var(--crema);
    color: var(--espresso);
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }

  h1, h2, h3, .display {
    font-family: "Young Serif", Georgia, "Times New Roman", serif;
    font-weight: 400; /* Young Serif tiene un solo peso: el énfasis va por color */
    letter-spacing: -0.015em;
    line-height: 1.05;
    text-wrap: balance;
    margin: 0;
  }

  p { text-wrap: pretty; }

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

  [x-cloak] { display: none !important; }

  ::selection { background: var(--caramelo); color: var(--crema); }

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

  .zona-oscura { --foco: var(--crema); }
}

/* ---------------------------------------------------------------------
   3. COMPONENTES
   --------------------------------------------------------------------- */
@layer components {

  /* Textura de papel: un único pseudo-elemento fijo, sin repintar al scrollear */
  .grano::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-grano);
    pointer-events: none;
    opacity: 0.2;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .11 0 0 0 0 .08 0 0 0 .5 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* La barra superior gana fondo y borde cuando la franja sale de pantalla (app.js) */
  body.con-scroll #cabecera { background-color: rgb(242 234 223 / 0.92); box-shadow: 0 1px 0 var(--linea); }

  /* Enlace para saltar al contenido (teclado / lector de pantalla) */
  .salto {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: var(--z-salto);
    background: var(--crema);
    color: var(--espresso);
    box-shadow: var(--sombra);
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s var(--ease);
  }
  .salto:focus { top: 1rem; }

  /* Etiqueta chica sobre un título (máximo una cada tres secciones) */
  .volanta {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--caramelo-hondo);
  }

  /* ---------- Botones ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.25rem;
    padding: 0 1.6rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font: 600 1rem/1 "DM Sans", system-ui, sans-serif;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
                border-color 0.35s var(--ease), transform 0.35s var(--ease);
  }
  .btn:active { transform: translateY(1px) scale(0.98); }
  .btn svg { width: 1.15em; height: 1.15em; flex: none; }

  .btn-primario { background: var(--caramelo-hondo); color: var(--crema); }
  /* Los :hover van dentro de (hover: hover): en celular no quedan "pegados" después de tocar */
  @media (hover: hover) { .btn-primario:hover { background: var(--espresso); } }

  .btn-secundario { background: transparent; color: var(--espresso); border-color: rgb(43 29 22 / 0.7); }
  @media (hover: hover) { .btn-secundario:hover { background: var(--espresso); color: var(--crema); border-color: var(--espresso); } }

  .btn-oscuro { background: var(--espresso); color: var(--crema); }
  @media (hover: hover) { .btn-oscuro:hover { background: var(--caramelo-hondo); } }

  /* "Encargar" de cada producto */
  .btn-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0 0.95rem;
    border-radius: 999px;
    border: 1px solid rgb(160 82 43 / 0.55);
    color: var(--caramelo-hondo);
    font: 600 0.875rem/1 "DM Sans", system-ui, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
  }
  @media (hover: hover) { .btn-item:hover { background: var(--caramelo-hondo); color: var(--crema); border-color: var(--caramelo-hondo); } }
  .btn-item:active { transform: scale(0.97); }
  .btn-item svg { width: 1rem; height: 1rem; }

  /* Botón flotante de WhatsApp: siempre visible */
  .wa-flotante {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: var(--z-flotante);
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 999px;
    background: var(--caramelo-hondo);
    color: var(--crema);
    /* el anillo claro lo separa del fondo espresso del footer */
    box-shadow: var(--sombra), 0 0 0 1.5px rgb(242 234 223 / 0.35);
    transition: transform 0.4s var(--ease), background-color 0.3s var(--ease);
  }
  @media (hover: hover) { .wa-flotante:hover { background: var(--espresso); transform: translateY(-2px); } }
  .wa-flotante:active { transform: scale(0.96); }
  .wa-flotante svg { width: 1.75rem; height: 1.75rem; }

  /* ---------- Pedido ---------- */

  /* Contador − n + (carta y panel) */
  .contador {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid rgb(160 82 43 / 0.55);
    color: var(--caramelo-hondo);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .contador button {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 100%;
    border-radius: 999px;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
  }
  @media (hover: hover) { .contador button:hover { background: var(--caramelo-hondo); color: var(--crema); } }
  .contador button:active { transform: scale(0.94); }
  .contador span { min-width: 1.5rem; text-align: center; color: var(--espresso); }

  /* Botón flotante con el pedido: barra ancha en celular, píldora en escritorio */
  .pedido-flotante {
    position: fixed;
    z-index: var(--z-flotante);
    left: 1rem;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3.5rem;
    padding: 0 1.25rem;
    border-radius: 999px;
    background: var(--caramelo-hondo);
    color: var(--crema);
    font: 600 1rem/1 "DM Sans", system-ui, sans-serif;
    box-shadow: var(--sombra), 0 0 0 1.5px rgb(242 234 223 / 0.35);
    cursor: pointer;
    transition: background-color 0.3s var(--ease);
  }
  @media (hover: hover) { .pedido-flotante:hover { background: var(--espresso); } }
  .pedido-flotante svg { width: 1.3rem; height: 1.3rem; flex: none; }
  .pedido-flotante-cuenta {
    display: grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--crema);
    color: var(--caramelo-hondo);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
  }
  .pedido-flotante-total { margin-left: auto; padding-left: 0.75rem; font-variant-numeric: tabular-nums; }
  .pedido-flotante.latido { animation: latido 0.45s var(--ease); }
  @media (min-width: 640px) {
    .pedido-flotante {
      left: auto;
      right: max(1.25rem, env(safe-area-inset-right));
      bottom: max(1.25rem, env(safe-area-inset-bottom));
    }
  }

  /* Panel: hoja que sube en celular, columna a la derecha en escritorio */
  .pedido-fondo {
    position: fixed;
    inset: 0;
    z-index: var(--z-pedido);
    background: rgb(43 29 22 / 0.45);
  }
  .pedido-panel {
    position: fixed;
    z-index: var(--z-pedido);
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    max-height: 88dvh;
    background: var(--crema);
    border-radius: var(--radio) var(--radio) 0 0;
    box-shadow: 0 -20px 60px -20px rgb(43 29 22 / 0.5);
  }
  .pedido-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
  .pedido-mueve { transition: translate 0.45s var(--ease), opacity 0.3s var(--ease); }
  .pedido-fuera { translate: 0 100%; opacity: 0.6; }
  @media (min-width: 768px) {
    .pedido-panel {
      inset: 0 0 0 auto;
      width: min(27rem, 100vw);
      max-height: none;
      border-radius: var(--radio) 0 0 var(--radio);
      box-shadow: -20px 0 60px -20px rgb(43 29 22 / 0.5);
    }
    .pedido-fuera { translate: 100% 0; }
  }

  /* Campos del formulario: borde 3,6:1 sobre el papel, texto de 16 px (iOS no hace zoom) */
  .campo {
    width: 100%;
    min-height: 2.875rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radio-chico);
    border: 1.5px solid rgb(43 29 22 / 0.55);
    background: var(--crema-claro);
    color: var(--espresso);
    font: 400 1rem/1.4 "DM Sans", system-ui, sans-serif;
    transition: border-color 0.2s var(--ease);
  }
  .campo:focus { border-color: var(--caramelo-hondo); }
  textarea.campo { resize: vertical; }

  /* Glifos de marca (WhatsApp / Instagram) servidos desde un <symbol> */
  .glifo { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

  /* ---------- Carta: renglón con puntos guía ---------- */
  .renglon {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
  }
  .renglon .puntos {
    flex: 1;
    min-width: 1.5rem;
    border-bottom: 2px dotted rgb(43 29 22 / 0.3);
    transform: translateY(-0.28em);
  }
  .precio {
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
  }

  /* ---------- Fotos ---------- */
  .foto {
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--crema-hondo); /* reserva el lugar mientras carga */
  }
  .foto img { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- Hero ---------- */
  .hero-grilla { display: grid; }

  .hero-texto { container-type: inline-size; }

  /* El título se mide contra su columna: "medialunas tibias." ocupa 8,9 veces
     el tamaño de la fuente, así que 10,6cqi garantiza dos líneas en cualquier ancho. */
  .hero-titulo {
    font-size: clamp(2.375rem, 1.6rem + 2.4vw, 4rem);
    font-size: clamp(2.25rem, 10.6cqi, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
  }

  .hero-foto {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--crema-hondo);
  }
  .hero-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 50%;
  }

  @media (min-width: 768px) and (max-width: 1023.98px) {
    .hero-foto { aspect-ratio: 16 / 10; margin-inline: 2rem; border-radius: var(--radio); }
  }

  /* Escritorio: columna de texto alineada con el contenedor de 80rem,
     foto desde la mitad hasta el borde derecho de la pantalla */
  @media (min-width: 1024px) {
    .hero-grilla {
      grid-template-columns:
        [borde-izq] minmax(0, 1fr)
        [texto] minmax(0, 44rem)
        [foto] minmax(0, 36rem)
        minmax(0, 1fr) [borde-der];
      min-height: calc(100dvh - 6.5rem);
    }
    .hero-texto { grid-column: texto / foto; padding-left: 2rem; }
    .hero-foto {
      grid-column: foto / borde-der;
      aspect-ratio: auto;
      min-height: 34rem;
      border-radius: var(--radio) 0 0 var(--radio);
    }
    /* Más alta que el marco para que el paralaje nunca muestre un borde */
    .hero-foto img { inset: -8% 0 auto 0; height: 108%; }
  }
  /* Notebooks chicas: un poco más de aire para el texto, así los botones van en una fila */
  @media (min-width: 1024px) and (max-width: 1279.98px) {
    .hero-grilla { grid-template-columns: [borde-izq] 0 [texto] 56% [foto] 1fr 0 [borde-der]; }
    .hero-texto { padding-right: 2.5rem; }
  }

  /* Entrada del hero: la foto se descubre desde la derecha y se asienta,
     el texto sube escalonado. Solo con movimiento permitido. */
  @media (prefers-reduced-motion: no-preference) {
    .hero-entrada > * {
      animation: subir 1s var(--ease) both;
      animation-delay: calc(120ms + var(--i, 0) * 110ms);
    }
    /* En celular la foto aparece de entrada (sin fundido) para no demorar el LCP */
    .hero-foto img { animation: asentar 1.9s var(--ease) both; }
    @media (min-width: 1024px) {
      .hero-foto { animation: descubrir 1.3s var(--ease) both; }
    }

    /* Paralaje suave atado al scroll (CSS nativo, sin escuchar eventos) */
    @supports (animation-timeline: scroll()) {
      @media (min-width: 1024px) {
        .hero-foto img {
          animation: asentar 1.9s var(--ease) both, paralaje linear both;
          animation-timeline: auto, scroll(root);
          animation-range: normal, 0 100vh;
        }
      }
    }
  }

  /* ---------- Carta ---------- */
  .carta-grilla {
    display: grid;
    gap: 2rem;
    grid-template-areas: "titulo" "foto" "menu";
  }
  .carta-titulo { grid-area: titulo; }
  .carta-foto { grid-area: foto; }
  .carta-menu { grid-area: menu; }

  @media (min-width: 1024px) {
    .carta-grilla {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      grid-template-rows: auto 1fr;
      grid-template-areas: "foto titulo" "foto menu";
      column-gap: clamp(3rem, 5vw, 5rem);
      row-gap: 2.25rem;
    }
    /* La foto acompaña mientras se recorre la carta */
    .carta-foto { align-self: start; position: sticky; top: 6.5rem; }
  }

  /* Paneles de pestañas: en celular el inactivo no ocupa lugar;
     en escritorio se apilan para que la carta no cambie de alto al cambiar de pestaña */
  .carta-panel:not(.activo) { display: none; }
  .carta-panel.activo { animation: subir-suave 0.55s var(--ease) both; }
  @media (min-width: 1024px) {
    .carta-paneles { display: grid; }
    .carta-paneles > .carta-panel { grid-area: 1 / 1; }
    .carta-panel:not(.activo) { display: block; visibility: hidden; opacity: 0; }
  }

  /* ---------- Especial de la semana ---------- */
  .especial-grilla {
    display: grid;
    gap: 2.5rem;
    justify-items: center;
  }
  .especial-foto { width: min(100%, 26rem); aspect-ratio: 4 / 5; position: relative; z-index: 1; }
  .especial-detalle { max-width: 34ch; }

  @media (max-width: 1023.98px) {
    .especial-foto { order: -1; }
  }
  @media (min-width: 1024px) {
    .especial-grilla {
      grid-template-columns: minmax(0, 1fr) minmax(0, 26rem) minmax(0, 1fr);
      align-items: center;
      column-gap: clamp(2.5rem, 4vw, 4rem);
    }
    .especial-detalle { justify-self: end; }
    .especial-precio { justify-self: start; }
    /* La foto cuelga sobre la sección siguiente */
    .especial-foto { align-self: start; margin-bottom: -11rem; }
  }
  /* La sección que sigue (#lugar) deja ese espacio con lg:pt-64 en index.html */

  /* ---------- El lugar ----------
     Celular y tablet: carrusel con la foto siguiente asomando.
     Escritorio: mosaico de 3 filas; cada celda respeta la proporción de su foto. */
  .lugar-fotos {
    display: flex;
    gap: 0.75rem;
    margin: 2rem -1.25rem 0;
    padding: 0 1.25rem 0.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .lugar-fotos::-webkit-scrollbar { display: none; }
  .lugar-foto {
    flex: 0 0 78%;
    aspect-ratio: 4 / 5;
    margin: 0;
    scroll-snap-align: start;
  }
  .lugar-foto img { transition: scale 0.9s var(--ease); }
  .lugar-foto:hover img { scale: 1.03; }

  @media (min-width: 640px) {
    .lugar-foto { flex-basis: 46%; }
  }
  @media (min-width: 768px) {
    .lugar-fotos { margin-inline: -2rem; padding-inline: 2rem; scroll-padding-inline: 2rem; }
  }

  @media (min-width: 1024px) {
    .lugar-grilla {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      /* la primera fila crece si el título lo necesita; la vitrina la acompaña */
      grid-template-rows: minmax(clamp(13rem, 17vw, 16rem), auto) repeat(2, clamp(13rem, 17vw, 16rem));
      grid-template-areas:
        "t t t t v v v v v v v v"
        "s s s s v v v v v v v v"
        "s s s s b b b w w w z z";
    }
    .lugar-texto { grid-area: t; align-self: start; padding: 0 0.5rem 2rem 0; }
    .lugar-fotos { display: contents; }
    .lugar-foto { aspect-ratio: auto; }
    .lugar-foto:nth-of-type(1) { grid-area: s; }  /* salón */
    .lugar-foto:nth-of-type(2) { grid-area: v; }  /* vitrina */
    .lugar-foto:nth-of-type(3) { grid-area: b; }  /* barra */
    .lugar-foto:nth-of-type(4) { grid-area: w; }  /* ventana */
    .lugar-foto:nth-of-type(5) { grid-area: z; }  /* tazas */
  }

  /* ---------- Horarios y ubicación ---------- */
  .horarios-ficha { display: grid; }
  .horarios-mapa {
    position: relative;
    min-height: 20rem;
    border-radius: calc(var(--radio) - 0.5rem);
    overflow: hidden;
    background: #EEE8DC; /* tono base del mapa con el filtro de abajo: no hay salto cuando aparece */
  }
  .horarios-mapa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: sepia(0.18) saturate(0.85) contrast(0.97); /* lo acerca a la paleta sin perder legibilidad */
    opacity: 0;
    transition: opacity 0.6s var(--ease);
  }
  .horarios-mapa iframe.cargado { opacity: 1; }
  @media (min-width: 1024px) {
    .horarios-ficha { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; }
    .horarios-mapa { min-height: 34rem; }
  }

  /* ---------- Instagram: tira de borde a borde ---------- */
  .ig-tira {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
    margin: 0;
    padding: 0 0.375rem;
    list-style: none;
  }
  .ig-foto { aspect-ratio: 1; border-radius: var(--radio-chico); }
  @media (min-width: 1024px) {
    .ig-tira { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; padding: 0 0.5rem; }
  }

  /* ---------- Footer: el nombre como cierre ---------- */
  .pie-marca {
    margin-bottom: 0;
    font-family: "Young Serif", Georgia, serif;
    font-size: clamp(4.5rem, 1rem + 15.5vw, 15rem);
    line-height: 0.85;
    letter-spacing: -0.035em;
    color: var(--crema);
    white-space: nowrap;
  }

  /* ---------- Revelado al scrollear ----------
     Solo se oculta si hay JS y el usuario no pidió menos movimiento. */
  @media (prefers-reduced-motion: no-preference) {
    .js .revelar {
      opacity: 0;
      transform: translateY(1.5rem);
      transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
      transition-delay: calc(var(--i, 0) * 90ms);
    }
    .js .revelar.visible { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------------------
   4. ANIMACIONES
   --------------------------------------------------------------------- */
@keyframes subir {
  from { opacity: 0; translate: 0 1.25rem; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes subir-suave {
  from { opacity: 0; translate: 0 0.5rem; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes descubrir {
  from { clip-path: inset(0 0 0 100% round var(--radio)); }
  to { clip-path: inset(0 0 0 0 round var(--radio) 0 0 var(--radio)); }
}
@keyframes asentar {
  from { scale: 1.08; }
  to { scale: 1; }
}
@keyframes latido {
  0% { scale: 1; }
  40% { scale: 1.06; }
  100% { scale: 1; }
}
@keyframes paralaje {
  from { translate: 0 0; }
  to { translate: 0 8%; }
}

/* ---------------------------------------------------------------------
   5. RECUADRO "POWERED BY NETLIFY"
   En Netlify (plan gratuito, opción del sitio activada) aparece abajo a la
   derecha un recuadro de 197 x 64 px por encima de todo. Si está, se suben
   el botón flotante, la barra del pedido y el pie del panel para que no los
   tape. Va sin capa para ganarle a las utilidades de Tailwind.
   --------------------------------------------------------------------- */
body:has(> #nl-badge-frame) .wa-flotante,
body:has(> #nl-badge-frame) .pedido-flotante {
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 4.5rem);
}
body:has(> #nl-badge-frame) .pedido-panel > footer {
  padding-bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 4.5rem);
}

/* ---------------------------------------------------------------------
   6. MOVIMIENTO REDUCIDO: todo queda quieto e inmediato
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}