/* ==========================================================================
   BENVOLENTIERI — componentes
   Piezas que se repiten: botones, barra, tarjetas, cursor, visor, intro.
   ========================================================================== */

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  --relleno: 1.05rem 2.2rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: var(--relleno);
  min-height: 52px;                 /* cómodo para el dedo en móvil */
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--corto) var(--seco),
              border-color var(--corto) var(--seco),
              transform var(--corto) var(--suave);
}

.btn:active { transform: scale(.975); }

/* Relleno que sube desde abajo al pasar el ratón. Con transform, no con
   `height`, para que no toque el layout. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform var(--medio) var(--suave);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }

/* -- Dorado: la acción principal (reservar). */
.btn-oro {
  color: var(--carbon);
  background: linear-gradient(140deg, var(--oro-claro) 0%, var(--oro) 48%, #A9842F 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 30px -14px rgba(201,162,74,.75);
}
.btn-oro::before { background: var(--marfil); }
.btn-oro:hover, .btn-oro:focus-visible { color: var(--carbon); }

/* -- Contorno: la acción secundaria (ver la carta). */
.btn-linea {
  color: var(--txt);
  border: 1px solid rgba(237,230,212,.32);
}
.btn-linea::before { background: var(--marfil); }
.btn-linea:hover, .btn-linea:focus-visible {
  color: var(--carbon);
  border-color: var(--marfil);
}
.claro .btn-linea { color: var(--tinta); border-color: rgba(22,24,15,.28); }
.claro .btn-linea::before { background: var(--verde); }
.claro .btn-linea:hover, .claro .btn-linea:focus-visible {
  color: var(--marfil); border-color: var(--verde);
}

/* -- Verde: WhatsApp y delivery. */
.btn-verde {
  color: var(--marfil);
  background: var(--verde);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px -16px rgba(30,91,55,.9);
}
.btn-verde::before { background: var(--verde-hoja); }

/* Subrayado que se dibuja de izquierda a derecha. Para enlaces de texto. */
.raya {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.raya::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--medio) var(--suave);
}
.raya:hover::after, .raya:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================================================
   Píldora «Por confirmar»
   Lleva fondo y color propios a propósito: la de Pure Zense usaba
   `currentColor` y se volvía ilegible sobre las fotos claras.
   ========================================================================== */

.pendiente {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .22rem .62rem;
  border-radius: 999px;
  background: rgba(178, 91, 52, .92);
  color: #FFF3E8;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
.pendiente::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ==========================================================================
   Barra de navegación
   ========================================================================== */

.barra {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1rem, 2.2vw, 1.7rem) clamp(1.25rem, 4vw, 3rem);
  transition: padding var(--medio) var(--suave),
              background var(--medio) var(--seco),
              box-shadow var(--medio) var(--seco);
}

/* Al bajar: fondo con desenfoque, más baja y con un filo dorado. */
.barra.pegada {
  padding-block: .7rem;
  background: rgba(11, 13, 10, .82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(201,162,74,.16), 0 18px 40px -30px rgba(0,0,0,.9);
}

/* Se esconde al bajar y vuelve al subir: deja ver la foto sin estorbar. */
.barra.oculta { transform: translateY(-105%); }
.barra { transition-property: padding, background, box-shadow, transform; }

.marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
}
.marca svg { width: clamp(38px, 4.6vw, 46px); height: auto; }
.marca-txt {
  font-family: var(--display);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  letter-spacing: .13em;
  line-height: 1;
  color: var(--marfil);
  white-space: nowrap;
  /* El nombre se escribe solo al cargar: se descubre de izquierda a derecha
   * mientras el espaciado se asienta. Sin JS.
   * `both` deja la letra invisible durante el retardo, que es justo lo que
   * hace falta para que no parpadee antes de empezar. */
  animation: marcaEntra 1.15s var(--suave) .35s both;
}
/* Si va a haber cortina de entrada, el nombre espera a que el horno abra:
   animarlo detras de la cortina seria animarlo para nadie. */
html.con-intro .marca-txt { animation-delay: 3.7s; }

@keyframes marcaEntra {
  from { opacity: 0; clip-path: inset(0 100% 0 0); letter-spacing: .34em; }
  60%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 -20% 0 0); letter-spacing: .13em; }
}

/* El filete dorado bajo el nombre se dibuja detras de las letras. */
.marca-txt::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: .3rem;
  background: linear-gradient(90deg, var(--oro), transparent);
  transform-origin: left;
  animation: marcaFilete .9s var(--suave) 1.1s both;
}
html.con-intro .marca-txt::after { animation-delay: 4.4s; }
@keyframes marcaFilete { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.marca-sub {
  display: block;
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-size: .5rem;
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--oro);
  margin-top: .28rem;
}

.menu { display: flex; align-items: center; gap: clamp(.8rem, 1.8vw, 1.8rem); }
.menu a {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--txt-2);
  /* Obligatorio: en italiano «Chi siamo» y «Esperienza» son más largos que
     sus equivalentes en español y partían en dos líneas, estirando la barra
     entera. Al traducir un menú siempre hay una palabra que crece. */
  white-space: nowrap;
  transition: color var(--corto) var(--seco);
}
.menu a:hover, .menu a:focus-visible { color: var(--marfil); }
.menu a.activa { color: var(--oro-claro); }

.barra-acc { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.barra .btn { --relleno: .78rem 1.5rem; min-height: 44px; font-size: .68rem; }

/* ==========================================================================
   Selector de idioma
   Tres letras, no banderas: una bandera es un país, no una lengua, y el
   italiano de esta casa no se habla solo en Italia.
   ========================================================================== */

.idioma {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border: 1px solid rgba(237, 230, 212, .2);
  border-radius: 999px;
  background: rgba(11, 13, 10, .35);
  flex-shrink: 0;
}
.idioma button {
  position: relative;
  min-width: 34px;
  padding: .42rem .5rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--txt-3);
  transition: color var(--corto) var(--seco), background var(--corto) var(--seco);
}
.idioma button:hover { color: var(--marfil); }
.idioma button.viva {
  color: var(--carbon);
  background: linear-gradient(140deg, var(--oro-claro), var(--oro));
}

/* En el panel móvil el selector es grande y con el nombre completo: ahí sobra
   sitio y una sigla de dos letras es un blanco diminuto para el pulgar. */
.panel-pie .idioma { width: 100%; justify-content: stretch; border-radius: 4px; }
.panel-pie .idioma button { flex: 1; min-height: 44px; font-size: .72rem; border-radius: 3px; }

/* -- Hamburguesa */
.hamburguesa {
  display: none;
  width: 46px; height: 46px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.hamburguesa span {
  position: absolute;
  left: 12px;
  width: 22px; height: 1.5px;
  background: var(--marfil);
  transition: transform var(--medio) var(--suave),
              opacity var(--corto) var(--seco);
}
.hamburguesa span:nth-child(1) { top: 18px; }
.hamburguesa span:nth-child(2) { top: 23px; }
.hamburguesa span:nth-child(3) { top: 28px; }
.hamburguesa[aria-expanded='true'] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburguesa[aria-expanded='true'] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.hamburguesa[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* -- Panel móvil */
.panel {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  /* `safe` es lo que evita que, cuando el contenido no cabe (móviles bajos o
     en horizontal), el centrado lo empuje por arriba y las primeras entradas
     acaben debajo de la barra fija, fuera de alcance. */
  align-content: safe center;
  gap: .4rem;
  padding: 6rem clamp(1.6rem, 8vw, 4rem) 3rem;
  background: var(--carbon-2);
  clip-path: circle(0% at calc(100% - 3.5rem) 2.6rem);
  transition: clip-path .82s var(--suave);
  overflow-y: auto;
}
.panel.abierto { clip-path: circle(145% at calc(100% - 3.5rem) 2.6rem); }

/* Solo los hijos DIRECTOS. Con `.panel a` a secas el selector alcanzaba
   también al teléfono y al botón del pie del panel: «Reservar mesa» salía en
   Bodoni a 35 px y se cortaba por los dos lados («ESERVAR MES»). */
.panel > a {
  font-family: var(--display);
  font-size: clamp(1.7rem, 7.6vw, 2.7rem);
  line-height: 1.3;
  color: var(--marfil);
}
.panel > a, .panel-pie {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--suave), transform .5s var(--suave);
}
.panel.abierto > a { opacity: 1; transform: none; }
.panel.abierto > a:nth-child(1) { transition-delay: .2s; }
.panel.abierto > a:nth-child(2) { transition-delay: .26s; }
.panel.abierto > a:nth-child(3) { transition-delay: .32s; }
.panel.abierto > a:nth-child(4) { transition-delay: .38s; }
.panel.abierto > a:nth-child(5) { transition-delay: .44s; }
.panel.abierto > a:nth-child(6) { transition-delay: .5s; }

.panel-pie {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: var(--borde);
  display: grid;
  gap: 1rem;
  justify-items: start;
  transition-delay: .56s;
}
.panel.abierto .panel-pie { opacity: 1; transform: none; }
/* El teléfono del panel es un enlace grande y cómodo de tocar, pero con su
   propia tipografía: no hereda la del menú. */
.panel-pie .firma { font-size: 1.6rem; }
.panel-pie .btn { width: 100%; justify-self: stretch; }

/* ==========================================================================
   Tarjetas de cocina
   ========================================================================== */

.tarjeta {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--carbon-2);
  aspect-ratio: 4 / 5;
}
/* `picture` es inline por defecto y no llenaría la tarjeta: se le da caja. */
.tarjeta picture { display: block; width: 100%; height: 100%; }
.tarjeta img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--suave), filter 1.4s var(--suave);
}
.tarjeta:hover img, .tarjeta:focus-visible img {
  transform: scale(1.07);
  filter: saturate(1.08);
}
.tarjeta::after {           /* velo que asegura la lectura del texto */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(11,13,10,.94) 4%, rgba(11,13,10,.55) 38%, rgba(11,13,10,.06) 72%);
  transition: opacity var(--medio) var(--seco);
}
.tarjeta:hover::after { opacity: .88; }

.tarjeta-txt {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  transform: translateY(0);
  transition: transform var(--medio) var(--suave);
}
.tarjeta:hover .tarjeta-txt { transform: translateY(-6px); }

.tarjeta-it {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-s);
  color: var(--oro);
  letter-spacing: .04em;
}
.tarjeta h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--marfil);
  margin-top: .1rem;
}
.tarjeta p {
  font-size: .88rem;
  color: var(--txt-2);
  margin-top: .55rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--medio) var(--suave), opacity var(--medio) var(--seco);
}
.tarjeta:hover p, .tarjeta:focus-visible p { max-height: 8rem; opacity: 1; }

/* Filo dorado que se dibuja al pasar por encima. */
.tarjeta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid var(--oro);
  opacity: 0;
  transform: scale(.97);
  transition: opacity var(--medio) var(--seco), transform var(--medio) var(--suave);
  pointer-events: none;
}
.tarjeta:hover::before, .tarjeta:focus-visible::before { opacity: .55; transform: none; }

/* ==========================================================================
   Cursor propio (solo escritorio con ratón fino)
   ========================================================================== */

.cursor, .cursor-anillo { display: none; }

@media (hover: hover) and (pointer: fine) {
  .cursor, .cursor-anillo {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 999;
    pointer-events: none;
    border-radius: 50%;
    will-change: transform;
  }
  .cursor {
    width: 6px; height: 6px;
    background: var(--oro-claro);
    margin: -3px 0 0 -3px;
    transition: opacity var(--corto) var(--seco), transform var(--corto) var(--suave);
  }
  .cursor-anillo {
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border: 1px solid rgba(230,206,142,.5);
    display: grid;
    place-items: center;
    font-family: var(--sans);
    font-size: .52rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--carbon);
    transition: width .38s var(--suave), height .38s var(--suave),
                background .38s var(--seco), border-color .38s var(--seco),
                opacity var(--corto) var(--seco);
  }
  .cursor-anillo span { opacity: 0; transition: opacity .2s var(--seco); }

  /* Al entrar en algo con etiqueta, el anillo crece y muestra la palabra. */
  .cursor-anillo.marcado {
    width: 76px; height: 76px;
    margin: -38px 0 0 -38px;
    background: var(--oro);
    border-color: transparent;
  }
  .cursor-anillo.marcado span { opacity: 1; }
  .cursor.escondido, .cursor-anillo.escondido { opacity: 0; }

  /* Con el cursor propio activo se oculta el del sistema. */
  html.cursor-activo,
  html.cursor-activo a,
  html.cursor-activo button { cursor: none; }
}

/* ==========================================================================
   Visor de fotos (lightbox)
   ========================================================================== */

.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(6, 7, 5, .97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--medio) var(--seco), visibility var(--medio);
}
.visor.abierto { opacity: 1; visibility: visible; }

.visor-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1rem, 3vw, 2rem);
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-3);
}

.visor-cuerpo {
  display: grid;
  place-items: center;
  padding: 0 clamp(.6rem, 4vw, 4.5rem);
  min-height: 0;                     /* deja que la fila 1fr se encoja */
  overflow: hidden;
}
.visor-cuerpo img {
  max-width: 100%;
  /* Tope en unidades de ventana, NO en porcentaje.
     `max-height: 100%` se resuelve contra el área de rejilla, cuya altura la
     decide una fila `1fr` de tamaño automático: la referencia es circular, el
     navegador la ignora y la foto se salía por abajo tapando el pie. Con svh
     el cálculo es firme y descuenta la barra superior y el pie. */
  max-height: calc(100svh - 11rem);
  object-fit: contain;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
}
.visor.cambiando .visor-cuerpo img { opacity: 0; transform: scale(.985); }
.visor-cuerpo img {
  transition: opacity .32s var(--seco), transform .32s var(--suave);
}

.visor-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 1.2rem clamp(1rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-m);
  color: var(--txt-2);
  text-align: center;
}

.visor-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(237,230,212,.22);
  border-radius: 50%;
  color: var(--marfil);
  background: rgba(11,13,10,.55);
  transition: background var(--corto) var(--seco), border-color var(--corto) var(--seco);
}
.visor-nav:hover { background: var(--oro); border-color: var(--oro); color: var(--carbon); }
.visor-nav.ant { left: clamp(.5rem, 2vw, 1.6rem); }
.visor-nav.sig { right: clamp(.5rem, 2vw, 1.6rem); }
.visor-cerrar {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(237,230,212,.22);
  border-radius: 50%;
  color: var(--marfil);
  transition: background var(--corto) var(--seco), transform var(--corto) var(--suave);
}
.visor-cerrar:hover { background: var(--borgona); transform: rotate(90deg); }

/* ==========================================================================
   Cortina de entrada
   ========================================================================== */

/* La escena: una pizza se arma sola dentro del horno y, al final, el horno
   abre sus dos puertas y deja pasar a la página.
   Todo son transformaciones y opacidades — nada que obligue al navegador a
   recalcular la maquetación mientras corre. */

.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: transparent;          /* el fondo lo ponen las puertas */
}
.intro.saliendo { pointer-events: none; }

/* -- Las dos puertas del horno */
.intro-puerta {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5vw;                    /* medio punto de más: sin él se ve la
                                       costura entre las dos por el redondeo */
  background: var(--carbon);
  transition: transform .95s var(--suave);
}
.intro-puerta.izq { left: 0; }
.intro-puerta.der { right: 0; }
/* Filo de luz en el canto: al abrirse parece que sale la luz del horno. */
.intro-puerta.izq::after,
.intro-puerta.der::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(201,162,74,.55), transparent);
  opacity: 0;
  transition: opacity .4s var(--seco);
}
.intro-puerta.izq::after { right: 0; }
.intro-puerta.der::after { left: 0; }
.intro.saliendo .intro-puerta::after { opacity: 1; }
.intro.saliendo .intro-puerta.izq { transform: translateX(-100%); }
.intro.saliendo .intro-puerta.der { transform: translateX(100%); }

/* -- El resplandor del horno detrás de la pizza */
.intro-brasa {
  position: absolute;
  width: min(70vmin, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(201,120,52,.34) 0%, rgba(140,60,28,.16) 42%, transparent 70%);
  opacity: 0;
  animation: arder 3.4s ease-out .05s forwards;
  transition: opacity .35s var(--seco);
}
.intro.saliendo .intro-brasa { opacity: 0; }
@keyframes arder {
  0%   { opacity: 0;   transform: scale(.7); }
  28%  { opacity: 1;   transform: scale(1); }
  62%  { opacity: .82; transform: scale(1.05); }
  100% { opacity: .95; transform: scale(1.02); }
}

/* -- Pavesas que suben */
.intro-pavesa {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--oro-claro);
  opacity: 0;
  animation: subir 2.6s ease-out infinite;
}
@keyframes subir {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.6); }
  18%  { opacity: .9; }
  100% { opacity: 0;   transform: translate3d(var(--dx, 14px), -190px, 0) scale(.2); }
}

.intro-centro {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1.15rem;
  text-align: center;
  transition: opacity .38s var(--seco), transform .55s var(--suave);
}
.intro.saliendo .intro-centro { opacity: 0; transform: scale(1.14); }

/* -- La pizza.
   A 178 px se veía tímida en escritorio: es la protagonista de la escena y
   tiene que ocupar. El resplandor cálido la separa del fondo y hace que
   parezca iluminada por la boca del horno. */
.intro svg {
  width: clamp(158px, 27vw, 268px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, .55))
          drop-shadow(0 0 26px rgba(201, 120, 52, .3));
}

/* `pathLength` va como ATRIBUTO en el SVG, no en el CSS: puesto en CSS el
   navegador lo ignora y `stroke-dasharray: 1` se lee como guiones de 1 px —
   el trazo sale punteado en vez de dibujarse. */
.intro [data-trazo] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trazar .62s var(--suave) forwards;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }

/* Todo lo que brota lo hace desde el centro del lienzo, no desde su propia
   caja: con `transform-box: fill-box` cada pieza se encogería sobre sí misma
   y el conjunto se desmontaría. */
.intro [data-brota] {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: brotar .5s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes brotar { to { transform: scale(1); } }

/* El aro no brota: se CIERRA desde fuera, como un lazo que recoge la pizza.
 *
 * ⚠️ Este bloque va ANTES de las reglas de retardo de abajo, igual que
 * `[data-brota]`. La forma abreviada `animation:` escribe TODAS las
 * propiedades `animation-*`, incluida `animation-delay`. Con la misma
 * especificidad gana la que va después: con este bloque debajo, el
 * `animation-delay: 1.2s` de `.aro` quedaba reseteado a 0 y el aro dorado
 * aparecía a los 700 ms, antes que la pizza que debía recoger. */
.intro [data-cierra] {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.42);
  opacity: 0;
  animation: cerrarAro .78s var(--suave) forwards;
}
@keyframes cerrarAro { to { transform: scale(1); opacity: 1; } }

.intro .masa      { animation-delay: .08s; animation-duration: .55s; }
.intro .salsa     { animation-delay: .46s; }
.intro .queso     { animation-delay: .60s; }
.intro .queso-2   { animation-delay: .66s; }
.intro .queso-3   { animation-delay: .72s; }
.intro .queso-4   { animation-delay: .78s; }
.intro .tomate-1  { animation-delay: .80s; }
.intro .tomate-2  { animation-delay: .86s; }
.intro .tomate-3  { animation-delay: .92s; }
.intro .tomate-4  { animation-delay: .98s; }
.intro .tomate-5  { animation-delay: 1.04s; }
.intro .albahaca-1 { animation-delay: 1.00s; }
.intro .albahaca-2 { animation-delay: 1.07s; }
.intro .albahaca-3 { animation-delay: 1.14s; }
.intro .corte     { animation-delay: 1.08s; animation-duration: .5s; }
.intro .corte-2   { animation-delay: 1.14s; animation-duration: .5s; }
.intro .corte-3   { animation-delay: 1.20s; animation-duration: .5s; }
/* El aro dorado del logotipo se cierra alrededor: la pizza se convierte en
   la insignia de la marca. Ese es el remate de la escena. */
.intro .aro       { animation-delay: 1.20s; animation-duration: .78s; }
.intro .aro-fino  { animation-delay: 1.32s; animation-duration: .78s; }

/* -- El nombre, letra a letra */
.intro-nombre {
  display: flex;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.6vw, 2.5rem);
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--marfil);
  padding-left: .22em;              /* compensa el espaciado de la última */
}
.intro-nombre span {
  opacity: 0;
  transform: translateY(14px);
  animation: entraLetra .5s var(--suave) forwards;
}
/* Trece letras, 32 ms de diferencia. Más separación y se lee como una
   máquina de escribir; menos y ni se nota que entran una a una. */
.intro-nombre span:nth-child(1)  { animation-delay: 1.30s; }
.intro-nombre span:nth-child(2)  { animation-delay: 1.33s; }
.intro-nombre span:nth-child(3)  { animation-delay: 1.36s; }
.intro-nombre span:nth-child(4)  { animation-delay: 1.40s; }
.intro-nombre span:nth-child(5)  { animation-delay: 1.43s; }
.intro-nombre span:nth-child(6)  { animation-delay: 1.46s; }
.intro-nombre span:nth-child(7)  { animation-delay: 1.49s; }
.intro-nombre span:nth-child(8)  { animation-delay: 1.53s; }
.intro-nombre span:nth-child(9)  { animation-delay: 1.56s; }
.intro-nombre span:nth-child(10) { animation-delay: 1.59s; }
.intro-nombre span:nth-child(11) { animation-delay: 1.62s; }
.intro-nombre span:nth-child(12) { animation-delay: 1.66s; }
.intro-nombre span:nth-child(13) { animation-delay: 1.69s; }
@keyframes entraLetra { to { opacity: 1; transform: none; } }

.intro-linea {
  width: min(250px, 48vw); height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
  transform: scaleX(0);
  animation: abrir .8s var(--suave) 1.62s forwards;
}
@keyframes abrir { to { transform: scaleX(1); } }

.intro-sub {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .46em;
  text-transform: uppercase;
  color: var(--oro);
  padding-left: .46em;
  opacity: 0;
  animation: aparecer .7s var(--suave) 1.78s forwards;
}
@keyframes aparecer { to { opacity: 1; } }

/* Tricolor: tres milímetros de guiño, no una bandera. */
.intro-tricolor {
  display: flex;
  width: 46px; height: 2px;
  overflow: hidden;
  opacity: 0;
  animation: aparecer .5s var(--suave) 2s forwards;
}
.intro-tricolor i {
  flex: 1;
  transform: scaleX(0);
  transform-origin: left;
  animation: abrir .34s var(--suave) forwards;
}
.intro-tricolor i:nth-child(1) { background: #1E5B37; animation-delay: 1.96s; }
.intro-tricolor i:nth-child(2) { background: var(--marfil); animation-delay: 2.03s; }
.intro-tricolor i:nth-child(3) { background: #A62334; animation-delay: 2.10s; }

.intro-saltar {
  position: absolute;
  z-index: 3;
  bottom: clamp(1.4rem, 4vw, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--txt-3);
  padding: .8rem 1.3rem;
  opacity: 0;
  animation: aparecer .6s var(--suave) 1.5s forwards;
  transition: color var(--corto) var(--seco);
}
.intro-saltar:hover { color: var(--oro); }
.intro.saliendo .intro-saltar { opacity: 0; transition: opacity .25s; }

/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */

.flota {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: .75rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity var(--medio) var(--seco),
              visibility var(--medio),
              transform var(--medio) var(--suave);
}
.flota.dentro { opacity: 1; visibility: visible; transform: none; }

.flota-btn {
  position: relative;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1E5B37;
  color: #fff;
  box-shadow: 0 14px 34px -12px rgba(30,91,55,.9);
  transition: transform var(--corto) var(--suave), background var(--corto) var(--seco);
}
.flota-btn:hover { transform: scale(1.08); background: var(--verde-hoja); }
.flota-btn svg { width: 29px; height: 29px; }

/* Halo quieto. El pulso late solo tres veces y para: un botón que palpita
   toda la visita cansa y se lee como publicidad. */
.flota-btn::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(47,125,76,.55);
  animation: latir 2.1s var(--suave) 3;
}
@keyframes latir {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.38); opacity: 0; }
  100% { transform: scale(1.38); opacity: 0; }
}

.flota-globo {
  padding: .62rem 1rem;
  border-radius: 999px;
  background: var(--marfil);
  color: var(--carbon);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.8);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity var(--corto) var(--seco), transform var(--corto) var(--suave);
  pointer-events: none;
}
.flota:hover .flota-globo, .flota.asomado .flota-globo {
  opacity: 1; transform: none;
}