/* =========================================================================
   Symposium Lima — réplica del home
   Todos los valores provienen de getComputedStyle() sobre symposiumlima.com
   medido a 1471 x 841 px. Los que no pude medir van marcados con [APROX].
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Color — medido */
  --c-bg:        #0c0c0c;   /* body background            */
  --c-white:     #ffffff;   /* títulos, nav, botones      */
  --c-text:      #7a7a7a;   /* párrafos                   */
  --c-accent:    #61a95f;   /* enlaces y etiqueta Cliente */
  --c-estrella:  #d1a054;   /* estrellas de reseña [APROX]*/
  --c-panel:     #141414;   /* paneles oscuros [APROX]    */

  /* Tipografía — medido */
  /* Forum solo tiene un peso (400) en Google Fonts; el 600 de los botones
     lo sintetiza el navegador, igual que en el sitio original.
     La cadena de reserva es toda serif a propósito: si Forum no carga, el
     titular debe seguir viéndose serif, no caer a la sans del cuerpo. */
  --f-display: "Forum", Georgia, "Times New Roman", "Liberation Serif", serif;
  --f-body:    "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Escala de títulos: mobile → desktop.
     El segundo valor de cada clamp() es el medido en el sitio. */
  --fs-display:    clamp(2.75rem, 5.9vw, 5.4375rem);  /* 87px */
  --fs-display-md: clamp(2.5rem, 5.4vw, 5rem);        /* 80px */
  --fs-display-sm: clamp(2.25rem, 4vw, 3.75rem);      /* 60px [APROX] */
  --fs-title:      clamp(2rem, 3.4vw, 3.125rem);      /* 50px */
  --fs-title-sm:   clamp(1.5rem, 2vw, 1.875rem);      /* 30px */
  --fs-tag:        clamp(1.125rem, 1.7vw, 1.5625rem); /* 25px */

  /* Layout — medido: las columnas suman 1290px */
  --container: 1290px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Padding vertical por sección — medido */
  --pad-hero-t:   clamp(11rem, 24vw, 21.875rem);  /* 350px */
  --pad-hero-b:   clamp(7rem, 17vw, 15.625rem);   /* 250px */
  --pad-150:      clamp(4.5rem, 10vw, 9.375rem);  /* 150px */
  --pad-100:      clamp(3.5rem, 7vw, 6.25rem);    /* 100px */
  --pad-200:      clamp(6rem, 13.5vw, 12.5rem);   /* 200px */
  --pad-320:      clamp(8rem, 21.7vw, 20rem);     /* 320px */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t: .3s var(--ease);
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--t), background-color var(--t), border-color var(--t);
}

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.container {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--c-white);
  color: var(--c-bg);
  font-size: 14px;
  transition: top var(--t);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   3. Tipografía compartida
   ------------------------------------------------------------------------- */

/* Forum 87px / 87px, uppercase, blanco */
.t-display {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-white);
}
.t-display--md { font-size: var(--fs-display-md); line-height: 1.15; }  /* 80/92 */
.t-display--sm { font-size: var(--fs-display-sm); line-height: 1.15; }  /* banner de página interna */

/* Forum 50px / 60px, uppercase, blanco, centrado */
.t-title {
  font-family: var(--f-display);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-white);
}
.t-title--sm { font-size: var(--fs-title-sm); }  /* 30/36 */
.t-title--start { text-align: center; }          /* alineado a la izquierda en desktop */

/* Mulish 16px / 19.2px, 400, letter-spacing 2px, uppercase, blanco */
.t-sub {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-white);
}
.t-sub--start { text-align: left; }

/* Separador italia-line.png — 100 x 5 px */
.linea { width: 100px; height: 5px; margin: 24px 0; }
.linea--center { margin-inline: auto; }

/* -------------------------------------------------------------------------
   4. Botón — Forum 16/16, 600, ls 3px, uppercase, borde 1px, padding 20/30
   ------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 20px 30px;
  border: 1px solid var(--c-white);
  border-radius: 0;
  background-color: transparent;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-white);
}
.btn:hover, .btn:focus-visible {
  background-color: var(--c-white);
  color: var(--c-bg);
}

/* -------------------------------------------------------------------------
   5. Header — fijo arriba, transparente sobre el hero, fondo al scrollear
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background-color: transparent;
  transition: background-color .4s ease, box-shadow .4s ease;
}

.site-header.is-scrolled {
  background-color: #1E1E1E;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

/* Altura de la barra: compacta en móvil/tablet, 161px en desktop (medida del
   original). El resto del layout lee esta variable para compensar el header
   fijo, así que basta cambiarla en un sitio. */
:root { --h-header: 72px; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--h-header);
  transition: min-height .4s ease;
}

/* Móvil y tablet: burger a la izquierda, logo centrado. El logo va absoluto
   para quedar centrado en la ventana, no en el espacio que deja el burger. */
.header__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.site-header.is-scrolled .header__inner { min-height: 60px; }

/* En móvil/tablet el logo se acota a la barra compacta; en desktop recupera
   los 309px del diseño original. */
.header__brand img {
  display: block;
  width: clamp(150px, 34vw, 200px);
  height: auto;
  transition: width .4s ease;
}

.header__nav { display: none; align-items: center; gap: 40px; flex: 1; }
.header__nav--left  { justify-content: flex-start; }
.header__nav--right { justify-content: flex-end; }

/* Mulish 13px / 19.5px, 600, ls 3px, uppercase, blanco */
.menu { display: flex; align-items: center; gap: 40px; }
.menu a {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-white);
}
.menu a:hover { color: var(--c-accent); }
.menu a[aria-current="page"] { color: var(--c-accent); }

.header__cta { padding: 14px 22px; font-size: 14px; letter-spacing: 2px; white-space: nowrap; }

/* Solo las tres líneas: sin borde ni fondo. */
/* El botón mantiene 44px para el área táctil, pero las líneas miden 22px:
   con `width: 100%` se estiraban a todo el ancho y quedaban desproporcionadas. */
.burger {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  background-color: var(--c-white);
  transition: transform var(--t), opacity var(--t), background-color var(--t);
}
.burger:hover span { background-color: var(--c-accent); }
/* La X: las líneas se juntan en el centro. El desplazamiento es el alto de
   una línea más el gap (2 + 5 = 7px). */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel lateral deslizante. `hidden` se retira siempre desde JS y la
   visibilidad la controla .is-open, para poder animar la entrada y la salida. */
.menu-movil {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: min(340px, 86vw);
  padding: 28px var(--gutter) 40px;
  background-color: #0C0C0C;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .38s var(--ease), visibility .38s;
}
.menu-movil.is-open { transform: translateX(0); visibility: visible; }
.menu-movil[hidden] { display: none; }

/* Capa oscura sobre el contenido mientras el panel está abierto. */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background-color: rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .38s var(--ease), visibility .38s;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }

/* Logo y cierre dentro del panel (el header queda tapado por el overlay). */
.menu-movil__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.menu-movil__logo img { display: block; width: 170px; height: auto; }
.menu-movil__close {
  flex: none;
  width: 32px; height: 32px;
  font-size: 26px;
  line-height: 1;
  color: var(--c-white);
}
.menu-movil ul { display: flex; flex-direction: column; }
.menu-movil a {
  display: block;
  padding: 15px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-white);
  transition: color var(--t);
}
.menu-movil a:hover { color: var(--c-accent); }
/* Página actual en verde, como el resto de la navegación. */
.menu-movil a[aria-current="page"] { color: var(--c-accent); }
.menu-movil .btn { display: block; margin-top: auto; text-align: center; }

/* -------------------------------------------------------------------------
   6. Hero — bg Symposiumlima-Hero.webp cover 50% 50%, padding 350 / 250
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: var(--pad-hero-t);
  padding-bottom: var(--pad-hero-b);
  background-color: var(--c-bg);
  background-image: url("../img/hero.webp");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* Capa de degradado. Cumple dos funciones:
   1. Oscurece la zona del titular: la foto tiene un mantel blanco y el texto
      blanco se perdía encima.
   2. Funde el pie de la sección con el fondo #0c0c0c, para que la foto no
      corte en seco contra el negro de la sección siguiente.
   Va en un ::after y no en el background-image para poder controlarla aparte
   de la foto y para que el degradado quede por encima, no mezclado.

   La banda donde cae el texto no baja de .62 de opacidad: sobre la zona más
   clara de la foto (el mantel, ~#e8e6e2) eso deja el blanco en 6.4:1, que
   cumple AA para el párrafo de 18px. Por debajo de .55 el párrafo ya no pasa. */
/* Ver la nota de .video::after: `inset: -1px` evita la línea clara de 1px que
   asoma en el corte cuando la altura de la sección cae en subpíxeles. */
.hero::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(12, 12, 12, .90) 0,
    rgba(12, 12, 12, .74) 20%,
    rgba(12, 12, 12, .62) 46%,
    rgba(12, 12, 12, .70) 70%,
    rgba(12, 12, 12, .94) 90%,
    var(--c-bg) 99%
  );
}

/* El contenido queda por encima del degradado */
.hero > .container { position: relative; z-index: 1; }

/* Todo el contenido va en la columna izquierda (684 de 1290);
   la derecha queda libre para que respire la foto de fondo. */
.hero__grid { display: grid; gap: 24px; }
.hero__col { min-width: 0; }

.hero__lead {
  max-width: 46ch;
  margin-bottom: 32px;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
  color: var(--c-white);
}

/* -------------------------------------------------------------------------
   7. Nuestra carta — bg #0c0c0c, padding 150 / 100
   ------------------------------------------------------------------------- */
/* Fondo de masa y tomates, muy atenuado por el degradado: el original lo usa
   como textura. Arranca y termina en el color de fondo para fundirse con las
   secciones vecinas sin dejar corte visible. */
.carta {
  padding-top: var(--pad-150);
  padding-bottom: var(--pad-100);
  background-color: var(--c-bg);
  background-image:
    linear-gradient(
      to bottom,
      var(--c-bg) 0,
      rgba(12, 12, 12, .90) 14%,
      rgba(12, 12, 12, .86) 50%,
      rgba(12, 12, 12, .92) 86%,
      var(--c-bg) 100%
    ),
    url("../img/carta-bg.webp");
  background-size: auto, cover;
  background-position: 50% 0, 50% 50%;
  background-repeat: no-repeat;
}

.carta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.carta__inner .t-sub { margin-top: 12px; }

/* Tres fotos con su etiqueta debajo.
   Etiqueta: Forum 25px / 30px, 400, ls 5px, uppercase, blanco */
.carta__tags {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 30px;
  width: 100%;
  margin: 40px 0 48px;
}
.carta__tags a {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  font-family: var(--f-display);
  font-size: var(--fs-tag);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--c-white);
}
/* La etiqueta va en una banda oscura pegada a la foto, sin separación. */
.carta__tags span {
  padding: 14px 10px;
  background-color: rgba(12, 12, 12, .82);
  transition: color var(--t), background-color var(--t);
}
/* `overflow: hidden` en el contenedor de la foto para que el zoom del hover
   se recorte en el marco en vez de desbordarlo. */
.carta__tags .carta__foto {
  display: block;
  overflow: hidden;
}
.carta__tags img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
/* Solo zoom en hover: la foto nunca se atenúa ni se oculta. */
.carta__tags a:hover img,
.carta__tags a:focus-visible img { transform: scale(1.04); }
.carta__tags a:hover span { color: var(--c-accent); }

/* -------------------------------------------------------------------------
   8. Cocinamos con pasión + Reserva — padding 100 / 150, columnas 645 / 645
   ------------------------------------------------------------------------- */
.pasion {
  padding-top: var(--pad-100);
  padding-bottom: var(--pad-150);
}

.pasion__grid { display: grid; gap: 48px; align-items: start; }
.pasion__col { min-width: 0; text-align: center; }
/* El párrafo no llega a los bordes de la columna: en el original queda
   contenido bajo el título, con las líneas más cortas. */
.pasion__col > p {
  max-width: 46ch;
  margin-top: 8px;
  margin-inline: auto;
  text-align: center;
}

.pasion__logo { width: clamp(220px, 24vw, 350px); margin: 40px auto 0; }
/* Cada figura respeta la proporción de su archivo: la de la columna derecha
   es vertical (1000x1300) y la de la izquierda horizontal (2000x1334).
   Forzar una sola proporción a las dos recortaba la vertical de más. */
.pasion__figure { margin: 40px 0 0; }
/* Proporciones medidas sobre el diseño de referencia: la de la derecha queda
   casi cuadrada y la de la izquierda claramente panorámica. */
.pasion__figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pasion__figure--baja { margin-top: 48px; }
.pasion__figure--baja img { aspect-ratio: 2 / 1; }

/* Panel oscuro con el horario, dentro de la columna derecha */
.reserva {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background-color: var(--c-panel);
  text-align: center;
}
.reserva .t-sub { margin-top: 10px; }

.horario { width: 100%; margin: 28px 0 36px; }
/* Etiqueta y hora en extremos opuestos, sin envolver: en el original cada
   día ocupa una sola línea. `nowrap` en el dd evita que la hora se parta. */
.horario__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.horario__fila:first-child { border-top: 1px solid rgba(255, 255, 255, .16); }
.horario dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-white);
}
.horario dd {
  margin: 0;
  font-size: 13px;
  white-space: nowrap;
  color: var(--c-text);
}

/* -------------------------------------------------------------------------
   9. Video — padding 320 / 320, contenedor interno 600px
   [APROX] la imagen de fondo no era legible desde getComputedStyle
   (está en un elemento interno). Sustitúyela por la real cuando la tengas.
   ------------------------------------------------------------------------- */
/* Tres capas apiladas: video de fondo, degradado y contenido.
   La imagen de fondo de la sección se mantiene como último recurso, por si el
   video no carga y el navegador tampoco pinta el `poster`. */
.video {
  position: relative;
  overflow: hidden;
  padding-top: var(--pad-320);
  padding-bottom: var(--pad-320);
  background-color: var(--c-bg);
  background-image: url("../video/symposium-poster.webp");
  background-size: cover;
  background-position: 50% 50%;
}

/* En bar el fallback es el poster de su propio video. Al ser vertical
   (360x640), se encuadra por el centro-alto: `cover` recorta mucho a los
   lados y la parte interesante del plano queda arriba. */
.video--bar { background-image: url("../img/bar-poster.webp"); }
.video--bar .video__fondo { object-position: 50% 35%; }

.video__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* El degradado va por encima del video para que el botón se lea y para que la
   sección se funda con el negro de las secciones vecinas. */
/* `inset: -1px` en vez de 0: con alturas fraccionarias (zoom del navegador o
   pantallas con DPR no entero) el borde de esta capa y el del video de abajo
   se redondean a subpíxeles distintos, y asomaba una línea clara de 1px en el
   corte de la sección. Sobresalir un píxel la tapa. El degradado alcanza el
   color de fondo en el 99%, para que el último tramo sea plano. */
.video::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    var(--c-bg) 0,
    rgba(12, 12, 12, .55) 15%,
    rgba(12, 12, 12, .40) 50%,
    rgba(12, 12, 12, .70) 85%,
    var(--c-bg) 99%
  );
}

.video__inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

/* Círculo con borde 1px blanco; el texto "ver" va debajo del icono */
.video__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 110px; height: 110px;
  background-color: rgba(12, 12, 12, .35);
  border: 1px solid var(--c-white);
  border-radius: 50%;
  transition: background-color var(--t), transform var(--t);
}
.video__btn:hover { background-color: rgba(255, 255, 255, .12); transform: scale(1.05); }

/* Anillo que late hacia afuera en bucle. Va en ::before para no añadir markup;
   se anima solo transform y opacity, que el compositor resuelve sin repintar. */
.video__btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--c-white);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: video-pulso 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
  will-change: transform, opacity;
}

/* Segunda onda desfasada: da la sensación de "sonda" continua. */
.video__btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--c-white);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: video-pulso 2.6s cubic-bezier(.22, .61, .36, 1) infinite 1.3s;
  will-change: transform, opacity;
}

@keyframes video-pulso {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

.video__icon {
  width: 0; height: 0;
  margin-left: 4px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--c-white);
}

/* Mulish 18px / 27px, 300, verde */
.video__label {
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
  color: #fff;
  text-transform: lowercase;
}

/* -------------------------------------------------------------------------
   10. Testimonios — padding 150 / 100, columnas 409 / 877
   ------------------------------------------------------------------------- */
.testimonios {
  padding-top: var(--pad-150);
  padding-bottom: var(--pad-100);
}

/* Tres columnas medidas en el original: 409 / 414 / 463
   → intro | foto | tarjeta de testimonio */
.testimonios__grid { display: grid; gap: 40px; align-items: center; }

.testimonios__head { min-width: 0; }

/* Mulish 18px / 27px, 500, blanco.
   La comilla decorativa va en un ::before: es puramente ornamental y así no
   la anuncia ningún lector de pantalla ni ensucia el marcado. */
.testimonios__intro {
  position: relative;
  padding-top: 56px;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: var(--c-white);
}
.testimonios__intro::before {
  content: "\201C";
  position: absolute;
  top: 6px; left: -8px;
  font-family: var(--f-display);
  font-size: 110px;
  line-height: 1;
  color: rgba(255, 255, 255, .16);
}

/* En móvil la foto y la tarjeta se apilan dentro de .testimonios__media */
.testimonios__media { display: grid; gap: 32px; min-width: 0; }

/* `min-width: 0` y `overflow: hidden` son los dos seguros que evitan que
   una imagen ensanche su columna o se salga de ella. */
.testimonios__figura {
  margin: 0;
  min-width: 0;
  overflow: hidden;
}
.testimonios__figura img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* La tarjeta se monta sobre el borde derecho de la foto en desktop */
.slider {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background-color: var(--c-panel);
}
.slider__head { margin-bottom: 24px; }
.slider__head .t-sub { margin-top: 12px; }
.slider__head .linea { margin: 20px 0 0; }

/* ---- Carrusel: los slides se apilan en la MISMA celda de grid ----
   Antes se desplazaba la pista con translateX y los slides medían el 100%
   del ancho. El problema: `overflow: hidden` recorta en la caja de padding,
   no en la de contenido, así que los 44px de padding derecho del panel
   dejaban asomar el slide siguiente — de ahí el "1 y medio".

   Apilando en `grid-area: 1 / 1` no hay anchos ni desplazamientos que
   calcular: solo uno es visible y es imposible que se vea medio. Además la
   altura de la pista es la del slide más alto, así que la tarjeta no cambia
   de tamaño al rotar.

   Sin JS (o antes de que corra) los slides se reparten en filas y se leen
   todos: `.is-listo` lo pone el JS al inicializar. */
.slider__track { display: grid; gap: 32px; }

.slider.is-listo .slider__track { gap: 0; }

.slider.is-listo .slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.slider.is-listo .slide.is-activo {
  opacity: 1;
  visibility: visible;
}

/* Los controles no hacen nada sin JS */
.slider__nav { display: none; }
.slider.is-listo .slider__nav { display: flex; }

.quote { margin: 0; }
.quote > p:first-child {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: var(--c-text);
}
.quote__stars { margin: 20px 0 16px; color: var(--c-estrella); letter-spacing: 3px; }
.quote footer { display: flex; flex-direction: column; gap: 2px; }

/* Mulish 16px / 24px, 700, blanco */
.quote__autor {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  color: var(--c-white);
}
/* Mulish 11px / 16.5px, 700, ls 2px, uppercase, verde */
.quote__rol {
  font-size: 11px;
  font-weight: 700;
  line-height: 16.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* El `display` lo controla el par .slider__nav / .slider.is-listo de arriba */
.slider__nav { align-items: center; gap: 20px; margin-top: 40px; }
.slider__btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: var(--c-white);
}
.slider__btn:hover { background-color: var(--c-white); color: var(--c-bg); }

.slider__dots { display: flex; gap: 8px; }
.slider__dots button {
  width: 8px; height: 8px;
  padding: 0;
  background-color: rgba(255, 255, 255, .3);
  border-radius: 50%;
  transition: background-color var(--t), transform var(--t);
}
.slider__dots button[aria-current="true"] {
  background-color: var(--c-accent);
  transform: scale(1.3);
}

/* -------------------------------------------------------------------------
   11. CTA — bg SYMP-7.webp cover 0% 40%, padding 200 / 150, columnas 903 / 387
   ------------------------------------------------------------------------- */
.cta {
  padding-top: var(--pad-200);
  padding-bottom: var(--pad-150);
  background-color: var(--c-bg);
  background-image:
    linear-gradient(
      to bottom,
      var(--c-bg) 0,
      rgba(12, 12, 12, .80) 12%,
      rgba(12, 12, 12, .52) 45%,
      rgba(12, 12, 12, .80) 88%,
      var(--c-bg) 100%
    ),
    url("../img/symp-7.webp");
  background-size: cover;
  background-position: 0% 40%;
  background-repeat: no-repeat;
}

.cta__grid { display: grid; gap: 24px; }
.cta__col .t-sub { margin-top: 16px; }

/* -------------------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------------------- */
/* Foto de ingredientes muy atenuada: el velo oscuro la deja como textura, sin
   competir con el texto. El degradado arranca opaco para fundir con la sección
   anterior, así que no hace falta un borde de separación. */
.site-footer {
  position: relative;
  background-color: var(--c-bg);
  background-image:
    linear-gradient(
      to bottom,
      #0c0c0c 0,
      rgba(12, 12, 12, .93) 22%,
      rgba(12, 12, 12, .90) 70%,
      rgba(12, 12, 12, .95) 100%
    ),
    url("../img/footer-bg.webp");
  background-size: auto, cover;
  background-position: 50% 0, 50% 50%;
  background-repeat: no-repeat;
}

/* Tres columnas: dirección | logo centrado | redes */
.footer__grid {
  display: grid;
  gap: 48px;
  padding-top: var(--pad-150);
  padding-bottom: var(--pad-100);
  align-items: center;
  text-align: center;
}

.footer__brand img { width: clamp(240px, 27vw, 380px); margin-inline: auto; }

/* Forum 24px / 36px, 400, ls 2px, uppercase, blanco */
.footer__title {
  margin-bottom: 12px;
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-white);
}

.footer__col address { font-style: normal; }
.footer__col address p,
.footer__legal { font-size: 16px; font-weight: 300; line-height: 24px; color: var(--c-text); }
.footer__col address a, .footer__legal a { color: var(--c-text); }
.footer__col address a:hover, .footer__legal a:hover { color: var(--c-white); }

/* Forum 13px / 15.6px, uppercase, blanco */
.footer__legal a {
  font-family: var(--f-display);
  font-size: 13px;
  line-height: 15.6px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-white);
}
.footer__legal a:hover { color: var(--c-accent); }

/* Fila propia, centrada, entre las columnas y la barra inferior */
.footer__legal-fila { padding-bottom: 32px; }
.footer__legal-fila .footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
}

.social { display: flex; justify-content: center; gap: 12px; }
.social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: var(--c-white);
}
.social a:hover { background-color: var(--c-white); color: var(--c-bg); }

/* El separador se dibuja dentro del contenedor para que no llegue a los bordes
   de la ventana, como en el original. */
.footer__bottom { margin-top: 24px; }
.footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 32px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
/* Mulish 14px / 21px, 500, blanco */
.footer__bottom p { font-size: 14px; font-weight: 500; line-height: 21px; color: var(--c-white); }

/* -------------------------------------------------------------------------
   13. Lightbox de video
   ------------------------------------------------------------------------- */
.lightbox {
  width: min(960px, 92vw);
  padding: 0;
  background-color: #000;
  border: 1px solid rgba(255, 255, 255, .25);
}
.lightbox::backdrop { background-color: rgba(0, 0, 0, .88); }

/* Los videos vienen en cualquier proporción (la home cuadrado, el bar
   vertical 9:16, mañana uno 16:9). El diálogo se ciñe al video en vez de
   imponer un ancho fijo: `fit-content` hace que la caja mida lo que mida el
   <video>, que a su vez se limita por alto y por ancho de ventana. Sin esto
   un video vertical dejaba una franja negra enorme a la derecha. */
.lightbox.is-video {
  width: fit-content;
  max-width: 92vw;
  border: 0;
  background-color: transparent;
  /* El botón de cerrar se coloca por encima del borde superior; sin esto el
     `overflow` por defecto del <dialog> lo recortaría. */
  overflow: visible;
}
.lightbox__close {
  position: absolute;
  top: 2px; right: 12px;
  z-index: 2;
  font-size: 32px;
  line-height: 1;
  color: var(--c-white);
}
/* Con el modal en modo video el fondo es transparente y el aspa cae sobre la
   imagen: se saca fuera de la esquina y se le da un disco oscuro para que se
   lea sobre cualquier fotograma. */
.lightbox.is-video .lightbox__close {
  top: -46px;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  font-size: 24px;
  background-color: rgba(0, 0, 0, .55);
  border-radius: 50%;
}
.lightbox.is-video .lightbox__close:hover { background-color: rgba(0, 0, 0, .8); }
/* Sin proporción fija ni ancho propio: el marco se ajusta al video que
   contenga. Las imágenes usan su propio alto. */
.lightbox.is-video .lightbox__frame {
  display: flex;
  width: fit-content;
  max-width: 100%;
}
.lightbox__frame iframe { width: 100%; height: 100%; border: 0; }
/* El video manda: se acota al alto de la ventana y el ancho sale de su propia
   proporción, así funciona igual con el cuadrado de la home y el vertical
   del bar. `max-width` evita que uno apaisado desborde a lo ancho. */
/* El video manda el tamaño del modal. `height: 85vh` con `width: auto` hace
   que llene el alto disponible y calcule el ancho por su propia proporción;
   `max-width` lo reduce si con ese alto no cabría a lo ancho (caso 16:9 en
   pantallas bajas). Sirve igual para vertical, cuadrado y apaisado. */
.lightbox__frame video {
  display: block;
  height: 82vh;
  width: auto;
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  background-color: #000;
}

/* =========================================================================
   PÁGINAS INTERNAS
   ========================================================================= */

/* -------------------------------------------------------------------------
   A. Banner de página — el header va superpuesto (--h-header), así que el
   padding superior lo compensa.
   [APROX] No pude medir esta página; alto e imagen de fondo son estimados.
   ------------------------------------------------------------------------- */
/* Degradado compartido por los banners: oscurece arriba para que el header
   superpuesto se lea, y funde el pie con el fondo de la sección siguiente. */
:root {
  --grad-banner: linear-gradient(
    to bottom,
    rgba(12, 12, 12, .86) 0,
    rgba(12, 12, 12, .58) 40%,
    rgba(12, 12, 12, .78) 82%,
    /* Cierra en negro antes del borde: si el opaco cayera justo en el 100%,
       con alturas fraccionarias asomaba 1px claro de la foto en el corte. */
    #0c0c0c 98%,
    #0c0c0c 100%
  );
}

.banner {
  position: relative;
  padding-top: calc(var(--h-header) + clamp(3rem, 7vw, 7rem));
  padding-bottom: clamp(3rem, 7vw, 7rem);
  background-color: var(--c-bg);
  background-image:
    var(--grad-banner),
    url("../img/galeria-3.webp");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* Franja negra de 2px pegada al borde inferior. El degradado ya cierra en
   negro, pero cuando la altura del banner cae en subpíxeles el navegador
   redondea la capa de imagen y la del degradado a valores distintos, y
   asomaba una línea clara. Esta banda tapa ese píxel en cualquier zoom. */
.banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--c-bg);
  pointer-events: none;
}

.banner--bar {
  background-image:
    var(--grad-banner),
    url("../img/hero.webp");
  background-position: 50% 0, 50% 42%;
}

.banner--contacto {
  background-image:
    var(--grad-banner),
    url("../img/hero.webp");
  background-position: 50% 0, 50% 42%;
}

.banner--reservas {
  background-image:
    var(--grad-banner),
    url("../img/hero.webp");
  background-position: 50% 0, 50% 42%;
}

.banner--legal {
  background-image:
    var(--grad-banner),
    url("../img/hero.webp");
  background-position: 50% 0, 50% 42%;
}

.banner--carta {
  background-image:
    var(--grad-banner),
    url("../img/hero.webp");
  background-position: 50% 0, 50% 42%;
}

/* Foto designada para esta página. El degradado la oscurece de arriba abajo
   y cierra en negro, de modo que el banner se funde con la sección siguiente
   sin corte visible. */
.banner--nosotros {
  background-image:
    var(--grad-banner),
    url("../img/hero.webp");
  background-position: 50% 0, 50% 42%;
}

/* Título y migas alineados a la izquierda, como en el original. */
.banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}

/* Migas de pan */
/* El reset de `ul` no alcanza al `ol` del breadcrumb: sin esto el navegador
   pinta el marcador numérico ("1.", "2.") delante de cada enlace. */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-white);
}
/* Chevron verde entre niveles. Va como SVG (mask, para heredar el color del
   tema) en lugar de un carácter tipográfico: el glifo "›" cambia de forma y
   de peso según la fuente que acabe cargando. */
.breadcrumb li + li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 11px;
  margin-right: 12px;
  background-color: var(--c-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.breadcrumb a { color: var(--c-white); }
.breadcrumb a:hover { color: var(--c-accent); }
/* La página actual va en blanco; el color lo aporta el separador. */
.breadcrumb [aria-current="page"] { color: var(--c-white); }

/* -------------------------------------------------------------------------
   B. Carta — bloque de descargas
   ------------------------------------------------------------------------- */
/* Última sección de la página: cierra con --pad-150 para no quedar pegada
   al footer, que ya no tiene una figura de por medio. */
.carta-descargas {
  padding-top: var(--pad-150);
  padding-bottom: var(--pad-150);
  background-color: var(--c-bg);
}

.carta-descargas__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.carta-descargas__inner .t-sub { margin-top: 12px; }

.descargas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.descargas .btn { display: block; }

/* -------------------------------------------------------------------------
   D. Bar — intro
   ------------------------------------------------------------------------- */
.bar-intro {
  padding-top: var(--pad-150);
  padding-bottom: var(--pad-100);
  background-color: var(--c-bg);
}

.bar-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Sin `max-width`: el subtítulo va en una sola línea mientras quepa, con el
   espaciado ancho del original. */
.bar-intro__inner .t-sub {
  margin-top: 18px;
  letter-spacing: 2.6px;
}

.bar-intro__lead {
  max-width: 62ch;
  margin-top: 34px;
  font-size: 17px;
  font-weight: 300;
  line-height: 28px;
  color: var(--c-text);
}

/* -------------------------------------------------------------------------
   E. Bar — galería
   ------------------------------------------------------------------------- */
.bar-galeria { padding-bottom: var(--pad-150); }

.galeria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* Radio de 15px, medido en el CSS del original. */
.galeria a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}
.galeria img {
  width: 100%;
  aspect-ratio: 1333 / 2000;
  object-fit: cover;
  transition: transform .5s var(--ease), opacity var(--t);
}
.galeria a:hover img,
.galeria a:focus-visible img { transform: scale(1.05); opacity: .85; }


/* -------------------------------------------------------------------------
   G. Contacto
   ------------------------------------------------------------------------- */
.contacto {
  padding-top: var(--pad-150);
  padding-bottom: var(--pad-150);
  background-color: var(--c-bg);
}

/* Dos columnas en desktop: información a la izquierda, formulario en un panel
   a la derecha. En móvil se apilan. */
.contacto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}

.contacto__head { margin-bottom: 36px; }
.contacto__head .linea { margin: 20px 0 24px; }

.contacto__intro {
  max-width: 46ch;
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  color: var(--c-text);
}

/* --- Datos: icono en círculo + texto --- */
.contacto__datos { display: grid; gap: 26px; }

.contacto-item {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Cada icono lleva su propio tinte, como en el original. */
.contacto-item__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background-color: #1b1b1b;
}
.contacto-item__icono--dir  { color: #61a95f; }
.contacto-item__icono--tel  { color: #ffffff; }
.contacto-item__icono--mail { color: #c85250; }

.contacto-item__texto { min-width: 0; }

/* Mulish 15px, 700, ls 1.5px, uppercase */
.contacto-item__title {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-white);
}

.contacto-item address { font-style: normal; }
.contacto-item p, .contacto-item address {
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  color: var(--c-text);
}
.contacto-item a { color: var(--c-text); }
.contacto-item a:hover { color: var(--c-white); }

/* --- Redes, separadas por una línea --- */
.contacto__redes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.contacto__redes-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-white);
}

/* --- Panel del formulario --- */
.contacto__form-panel {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background-color: #1b1b1b;
}

.form { display: grid; gap: 18px; }
/* Nombre y correo comparten fila desde tablet. */
.form__fila { display: grid; grid-template-columns: 1fr; gap: 18px; }

.form__campo { display: grid; gap: 8px; margin: 0; }
.form__campo label {
  font-size: 16px;
  font-weight: 400;
  color: var(--c-white);
}
.form__req { color: #c85250; }

.form__campo input,
.form__campo textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--c-white);
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  transition: border-color var(--t);
}
.form__campo textarea { min-height: 150px; resize: vertical; }
.form__campo input::placeholder,
.form__campo textarea::placeholder { color: #6d6d6d; }
.form__campo input:focus,
.form__campo textarea:focus {
  outline: none;
  border-color: var(--c-accent);
}

.form__enviar {
  margin-top: 12px;
  padding: 17px 24px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-white);
  background-color: var(--c-accent);
  border: 1px solid var(--c-accent);
  transition: background-color var(--t), color var(--t);
}
.form__enviar:hover {
  background-color: transparent;
  color: var(--c-accent);
}

/* -------------------------------------------------------------------------
   G bis. Contacto — mapa
   ------------------------------------------------------------------------- */
.mapa { padding-bottom: var(--pad-150); }
.mapa iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 46vw, 520px);
  border: 0;
  filter: grayscale(.15);
}
.contacto-item a:hover { color: var(--c-white); }
.contacto-item .social a { color: var(--c-white); }

/* -------------------------------------------------------------------------
   H. Reservas — widget embebido
   ------------------------------------------------------------------------- */
.reservar {
  padding-top: var(--pad-150);
  padding-bottom: var(--pad-150);
  background-color: var(--c-bg);
}

.reservar__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.reservar__head .t-sub { margin-top: 12px; }

/* El widget de Eatapp define su propio alto; reservamos un mínimo generoso
   para que no salte el layout mientras carga. */
.embed {
  max-width: 900px;
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, .14);
  background-color: var(--c-bg-embed, #111);
}
.embed__frame {
  display: block;
  width: 100%;
  min-height: clamp(620px, 78vh, 860px);
  border: 0;
}

.embed__fallback {
  max-width: 900px;
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: var(--c-text);
}
.embed__fallback a { color: var(--c-accent); }
.embed__fallback a:hover { color: var(--c-white); }

/* -------------------------------------------------------------------------
   I. Nosotros — bloque de pasión con barras
   ------------------------------------------------------------------------- */
.nosotros-pasion {
  padding-top: var(--pad-100);
  padding-bottom: var(--pad-150);
  background-color: var(--c-bg);
}

.nosotros-pasion__grid { display: grid; gap: 48px; align-items: center; }
.nosotros-pasion__col > p { margin-top: 8px; }

/* En móvil las dos fotos van una al lado de la otra, sin solape ni panel:
   el efecto escalonado solo tiene sentido cuando hay ancho de sobra. */
.nosotros-pasion__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
}
.nosotros-pasion__figure { margin: 0; min-width: 0; }
.nosotros-pasion__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.barras { display: grid; gap: 24px; margin-top: 40px; }

.barra { min-width: 0; }

.barra__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* Mulish 13px, 600, ls 3px, uppercase — igual que la navegación */
.barra__label {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-white);
}
/* Mismo tamaño y peso que la etiqueta, en blanco: en el original el
   porcentaje no destaca en color, solo por posición. */
.barra__valor {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
  color: var(--c-white);
}

.barra__pista {
  height: 3px;
  background-color: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.barra__relleno {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--c-barra, var(--c-accent));
  transition: width 1.4s var(--ease);
}

/* Las tres barras llevan los colores de la bandera italiana, como en el
   original: verde, blanco y rojo. */
.barra:nth-child(1) { --c-barra: #61A95F; }
.barra:nth-child(2) { --c-barra: #FFFFFF; }
.barra:nth-child(3) { --c-barra: #C85250; }

/* -------------------------------------------------------------------------
   J. Nosotros — pilares
   ------------------------------------------------------------------------- */
/* La sección va después de la carta, que cierra con --pad-100. Sin este
   padding superior los pilares quedaban pegados a los botones de la carta. */
.pilares {
  padding-top: var(--pad-150);
  padding-bottom: var(--pad-150);
  background-color: var(--c-bg);
}

.pilares__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.pilares__col { display: grid; gap: 40px; }

/* La foto central solo aparece en desktop: en móvil los cuatro pilares se
   apilan y una vertical en medio partiría la lectura. */
.pilares__figura { display: none; margin: 0; }

/* Sin caja ni borde: en el original son bloques limpios sobre el fondo. */
.pilar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.pilar__icono { width: 56px; height: auto; }

/* Forum 22px / 33px */
.pilar__titulo {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 33px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-white);
}
.pilar p { font-size: 16px; font-weight: 300; line-height: 24px; color: var(--c-text); }

/* -------------------------------------------------------------------------
   K. Error 404
   El header va superpuesto, así que el padding superior lo compensa.
   ------------------------------------------------------------------------- */
.error404 {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-top: calc(var(--h-header) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(4rem, 9vw, 7rem);
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(12, 12, 12, .78), rgba(12, 12, 12, .9)),
    url("../img/hero.webp");
  background-size: cover;
  background-position: 50% 50%;
}

.error404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Forum, muy grande y tenue: es decoración, el mensaje real está en el h1 */
.error404__codigo {
  font-family: var(--f-display);
  font-size: clamp(6rem, 18vw, 15rem);
  font-weight: 400;
  line-height: .85;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .12);
  user-select: none;
}

.error404__texto {
  max-width: 52ch;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
  color: var(--c-text);
}

.error404__enlaces { margin-top: 36px; }
.error404__enlaces ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.error404__enlaces .btn { display: block; }

.error404__ayuda {
  margin-top: 36px;
  font-size: 14px;
  line-height: 21px;
  color: var(--c-text);
}
.error404__ayuda a { color: var(--c-accent); }
.error404__ayuda a:hover { color: var(--c-white); }

/* -------------------------------------------------------------------------
   F. Lightbox — navegación y pie para galerías de imagen
   ------------------------------------------------------------------------- */
.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  transform: translateY(-50%);
  background-color: rgba(12, 12, 12, .6);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: var(--c-white);
}
.lightbox__nav[hidden] { display: none; }
.lightbox__nav:hover { background-color: var(--c-white); color: var(--c-bg); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }

.lightbox__frame img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  margin-inline: auto;
}

.lightbox__caption {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: var(--c-text);
}
.lightbox__caption:empty { display: none; }

/* =========================================================================
   14. Breakpoints
   ========================================================================= */

/* ≥ 768px */
@media (min-width: 48em) {
  /* Tablet: barra algo más alta y logo mayor, pero sin llegar a los 161px
     de desktop, que en 768px se comen media pantalla del hero. */
  :root { --h-header: 96px; }
  .header__brand img { width: 240px; }

  /* dirección · logo · redes */
  .footer__grid { grid-template-columns: 1fr auto 1fr; }
  .footer__col--dir { text-align: left; }
  .footer__col--social { display: flex; justify-content: flex-end; }

  .galeria { grid-template-columns: repeat(2, 1fr); }
  .form__fila { grid-template-columns: 1fr 1fr; }
  .pilares__grid { grid-template-columns: repeat(2, 1fr); }
  .carta__tags { grid-template-columns: repeat(3, 1fr); }
}

/* ≥ 992px — a partir de aquí rigen las medidas del sitio original */
@media (min-width: 62em) {
  :root { --h-header: 161px; }
  .header__nav { display: flex; }
  .burger { display: none; }
  .menu-movil, .menu-overlay { display: none !important; }

  /* Vuelve al flujo: las dos navegaciones lo centran por flex. */
  .header__brand { position: static; transform: none; }
  .header__brand img { width: clamp(240px, 21vw, 309px); }
  .header__inner { justify-content: space-between; gap: 24px; }
  .site-header.is-scrolled .header__inner { min-height: 96px; }

  /* Hero: el contenido ocupa la columna izquierda (684 de 1290) */
  .hero__grid {
    grid-template-columns: 684fr 606fr;
    gap: 0 40px;
    align-items: end;
  }

  /* Pasión: columnas 645 / 645 */
  .pasion__grid { grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }

  /* Solo la columna izquierda reparte el sobrante: empuja su foto hacia el
     fondo para que las dos columnas terminen a una altura parecida. En la
     derecha, foto y panel deben seguir juntos. */
  .pasion__col:not(.pasion__col--derecha) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  /* La foto de la derecha arranca a la altura del título, sin el margen
     superior que sí llevan las figuras apiladas en móvil. */
  .pasion__col--derecha { padding-top: 0; }
  .pasion__col--derecha .pasion__figure { margin-top: 0; }
  /* Con space-between el hueco lo reparte el contenedor; basta un margen
     mínimo para que la foto no se pegue al logo si la columna es corta. */
  .pasion__figure--baja { margin-top: 64px; }

  /* La foto de la izquierda crece hasta 3/2 (más alta que el 2/1 de móvil)
     para acortar la diferencia con la columna derecha, sin llegar a estirarse
     tanto que pierda la proporción panorámica del diseño. */
  .pasion__figure--baja img { aspect-ratio: 3 / 2; }

  /* Testimonios: intro | [ foto + tarjeta ]

     Proporciones tomadas del diseño de referencia: intro 303, foto 373,
     tarjeta 399, con la tarjeta pegada al borde derecho y solapando la foto
     unos 40px. La clave es que la tarjeta SOBRESALE a la derecha de la foto;
     no comparten borde derecho.

     Se resuelve con dos columnas y la tarjeta posicionada dentro de la
     segunda. Así el ancho de la tarjeta no puede desbordar (`right: 0` la
     ancla al borde) y el solape no depende de márgenes negativos que haya
     que recalcular cada vez que cambia una columna. */
  /* La referencia mide 303 / 57 / 735 sobre un contenido de 1095. Escalado al
     contenido real de 1210 son 335 / 63 / 812, y 335 + 812 = 1147 = el espacio
     que reparten los fr una vez restado el gap. */
  .testimonios__grid {
    grid-template-columns: 335fr 812fr;
    gap: 63px;
  }
  .testimonios__head { min-width: 0; }

  .testimonios__media {
    display: block;
    position: relative;
  }

  /* La foto ocupa poco más de la mitad del bloque; la tarjeta cubre el resto
     y solapa su borde. El `min-height` garantiza que la foto nunca quede más
     corta que la tarjeta: por debajo de ~1230px el ancho de la foto se reduce
     y la proporción 2/3 sola no daba altura suficiente. */
  .testimonios__figura { width: 51%; }
  .testimonios__figura img {
    aspect-ratio: 2 / 3;
    height: auto;
    min-height: 600px;
  }

  /* `right: 0` la ancla al borde derecho, así que su ancho no puede desbordar.
     El 62% evita que en pantallas medianas la tarjeta tape casi toda la foto. */
  .slider {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(440px, 62%);
    transform: translateY(-50%);
  }

  /* CTA: columnas 903 / 387 */
  .cta__grid { grid-template-columns: 903fr 387fr; }

  /* Bar: galería de 4 columnas */
  .galeria { grid-template-columns: repeat(4, 1fr); }

  /* Contacto: 4 bloques en línea */
  /* Contacto: información | panel del formulario */
  .contacto__grid { grid-template-columns: 1fr 1fr; gap: 60px; }

  /* Nosotros */
  .nosotros-pasion__grid { grid-template-columns: 1fr 1fr; gap: 60px; }

  /* Composición escalonada: panel gris de fondo desplazado, la foto de la
     máquina arriba-izquierda y la del chef más abajo, solapando por la
     derecha. Las dos figuras van en la misma celda del grid. */
  .nosotros-pasion__media {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 56px 40px;
  }
  .nosotros-pasion__media::before {
    content: "";
    position: absolute;
    left: 0;
    top: 40px;
    width: 72%;
    bottom: 0;
    background-color: var(--c-panel);
  }
  .nosotros-pasion__figure { position: relative; }
  .nosotros-pasion__figure--a {
    width: 56%;
    margin-right: auto;
  }
  /* Sube para solapar la anterior y se ancla a la derecha. */
  .nosotros-pasion__figure--b {
    width: 62%;
    margin: -34% 0 0 auto;
  }
  .nosotros-pasion__figure img { aspect-ratio: 3 / 4; }

  /* "La más clásica" (nosotros): la foto pesa algo más que en la home y el
     texto queda centrado verticalmente a su lado. La columna izquierda no
     lleva foto baja, así que aquí no se reparte con space-between. */
  .pasion--clasica .pasion__grid {
    grid-template-columns: 1.12fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .pasion--clasica .pasion__col:not(.pasion__col--derecha) {
    display: block;
    height: auto;
  }
  .pasion--clasica .pasion__figure { margin-top: 0; }
  .pasion--clasica .pasion__figure img { aspect-ratio: 20 / 21; }

  .t-title--start { text-align: left; }

  /* Pilares: columna de textos | foto vertical | columna de textos. Cada
     columna lateral se alinea hacia la foto, como en el original. */
  .pilares__grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 64px;
    align-items: center;
  }
  .pilares__col { gap: 88px; }
  .pilares__figura { display: block; width: clamp(280px, 26vw, 350px); }
  .pilares__figura img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; }

  .pilar { align-items: flex-end; text-align: right; }
  .pilares__col--der .pilar { align-items: flex-start; text-align: left; }
}

/* -------------------------------------------------------------------------
   15. Preferencias del usuario
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* El video de fondo se detiene desde JS; aquí se oculta el <video> y queda
     visible la imagen de fondo de la sección, sin movimiento. */
  .video__fondo { display: none; }
  /* La regla universal de arriba congelaría el anillo a media animación,
     dejándolo visible y fijo. Mejor no dibujarlo. */
  .video__btn::before, .video__btn::after { display: none; }
}

/* =========================================================================
   16. Páginas legales / contenido de WordPress

   `.entry-content` es el contenedor que devuelve the_content() en WordPress.
   Los estilos de abajo cubren tanto el HTML plano de estas páginas como el
   marcado que genera el editor de bloques (clases .wp-block-*, .alignwide,
   .has-drop-cap...), para que el tema no necesite una hoja aparte.
   ========================================================================= */
.legal {
  padding-top: var(--pad-100);
  padding-bottom: var(--pad-150);
  background-color: var(--c-bg);
}
.legal__inner { max-width: 860px; margin-inline: auto; }
.legal__fecha { margin-bottom: 32px; font-size: 14px; color: #6d6d6d; }

/* --- Contenido: ritmo vertical y tipografía --- */
.entry-content {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--c-text);
}
.entry-content > * + * { margin-top: 20px; }

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 48px;
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--c-white);
}
.entry-content h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); letter-spacing: 1px; }
.entry-content h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.entry-content h4 { font-size: 1.125rem; letter-spacing: 1px; }
/* El primer título no necesita el margen de separación superior. */
.entry-content > :first-child { margin-top: 0; }

.entry-content a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--c-white); }
.entry-content strong { font-weight: 600; color: var(--c-white); }

/* Las listas del editor no llevan reset: aquí sí necesitan marcador. */
.entry-content ul,
.entry-content ol {
  padding-left: 22px;
  list-style: revert;
}
.entry-content li + li { margin-top: 10px; }
.entry-content li::marker { color: var(--c-accent); }

/* --- Bloques del editor de WordPress --- */
.entry-content .has-drop-cap:first-letter {
  float: left;
  margin: 6px 12px 0 0;
  font-family: var(--f-display);
  font-size: 3.4em;
  line-height: .8;
  color: var(--c-white);
}

.entry-content blockquote,
.entry-content .wp-block-quote {
  margin-block: 36px;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--c-accent);
  font-size: 18px;
  font-style: italic;
  color: var(--c-white);
}
.entry-content blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-style: normal;
  color: var(--c-text);
}

.entry-content .wp-block-image,
.entry-content figure { margin-block: 32px; }
.entry-content figure img { width: 100%; height: auto; }
.entry-content figcaption,
.entry-content .wp-element-caption {
  margin-top: 10px;
  font-size: 14px;
  color: #6d6d6d;
  text-align: center;
}

.entry-content .wp-block-separator,
.entry-content hr {
  margin-block: 44px;
  height: 1px;
  border: 0;
  background-color: rgba(255, 255, 255, .14);
}

.entry-content .wp-block-table table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.entry-content th,
.entry-content td {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  text-align: left;
}
.entry-content th { color: var(--c-white); font-weight: 600; }

.entry-content .wp-block-code,
.entry-content pre {
  padding: 18px;
  overflow-x: auto;
  background-color: #141414;
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
}

/* Anchos del editor: en este layout la columna ya está acotada, así que
   `alignwide` y `alignfull` solo se desbordan hasta el ancho disponible. */
.entry-content .alignwide { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.entry-content .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.entry-content .aligncenter { margin-inline: auto; }
.entry-content .alignleft { float: left; margin: 6px 24px 16px 0; }
.entry-content .alignright { float: right; margin: 6px 0 16px 24px; }
.entry-content .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

@media print {
  .site-header, .video, .slider__nav, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
}