/* =========================================================
   PEAK PERFORMANCE — styles.css
   Mobile-first. Variables al inicio para editar marca fácil.
   ========================================================= */

:root {
  /* Paleta */
  --color-black: #0a0a0a;
  --color-black-soft: #141414;
  --color-gray: #1f1f1f;
  --color-gray-light: #6b6b6b;
  --color-white: #f5f5f3;
  --color-yellow: #f2c200;
  --color-yellow-dark: #c99f00;

  /* Tipografía: títulos y subtítulos, ambos en Montserrat (antes --font-display era
     Bebas Neue). Se mantienen como dos variables separadas por si el sitio necesita
     volver a diferenciarlas, pero hoy apuntan a la misma familia. */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max-width: 1180px;
  --header-height: 76px;
  --radius: 10px;
  --transition: 0.25s ease;
}

/* ===== Reset básico ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--color-black);
  color: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* overflow-x:hidden en body rompe position:sticky (crea un scroll container propio);
     overflow-x:clip evita el scroll horizontal sin ese efecto colateral */
  overflow-x: clip;
}

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

body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

svg { width: 100%; height: 100%; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Utilidades ===== */
.text-yellow { color: var(--color-yellow); }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  /* -30% respecto al tamaño anterior (2.2/6/3.2 → 1.54/4.2/2.24) */
  font-size: clamp(1.54rem, 4.2vw, 2.24rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-title--left { text-align: left; }

/* "Quiénes somos" / "Un equipo..." (#nosotros) y "Dónde estamos" (#ubicacion):
   10% adicional más chico que el resto de los títulos de sección. */
.about .section-title,
.location .section-title {
  font-size: clamp(1.386rem, 3.78vw, 2.016rem);
}

.section-subtitle {
  color: #c7c7c2;
  max-width: 560px;
  /* -30% respecto al tamaño anterior (1rem → 0.7rem) */
  font-size: 0.7rem;
  margin-bottom: 40px;
}

section .eyebrow,
section .section-title,
section .section-subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.about .section-subtitle { display: none; }

/* ===== Botones ===== */
/* Mobile-first: tamaño chico por defecto, crece recién en tablet/desktop */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  min-height: 42px;
}

@media (min-width: 480px) {
  .btn {
    padding: 12px 22px;
    font-size: 0.82rem;
    min-height: 44px;
  }
}

@media (min-width: 768px) {
  .btn {
    gap: 8px;
    padding: 14px 28px;
    font-size: 0.9rem;
  }
}

.btn--primary {
  background: var(--color-yellow);
  color: var(--color-black);
}

.btn--primary:hover {
  background: var(--color-yellow-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(242, 194, 0, 0.25);
}

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(245, 245, 243, 0.35);
}

.btn--outline:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
  transform: translateY(-2px);
}

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--transition);
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  position: relative;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.logo__img {
  height: 54px;
  width: auto;
}

.logo--footer .logo__img { height: 76px; }

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--color-black-soft);
  background-image: radial-gradient(circle at 85% 12%, rgba(242, 194, 0, 0.10), transparent 55%);
  clip-path: circle(4% at calc(100% - 44px) 38px);
  opacity: 0;
  pointer-events: none;
  transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.1s linear 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  z-index: 999;
}

.nav.is-open {
  clip-path: circle(150% at calc(100% - 44px) 38px);
  opacity: 1;
  pointer-events: auto;
  transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0s linear;
}

.nav__list {
  display: flex;
  flex-direction: column;
  padding: 100px 28px 20px;
  gap: 0;
  counter-reset: navcount;
}

.nav__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.nav__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 4px;
  font-size: 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color var(--transition), padding-left var(--transition);
  opacity: 0;
  transform: translateY(16px);
}

.nav.is-open .nav__link {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease, color var(--transition), padding-left var(--transition);
}

.nav__item:nth-child(1) .nav__link { transition-delay: 0.12s; }
.nav__item:nth-child(2) .nav__link { transition-delay: 0.17s; }
.nav__item:nth-child(3) .nav__link { transition-delay: 0.22s; }
.nav__item:nth-child(4) .nav__link { transition-delay: 0.27s; }
.nav__item:nth-child(5) .nav__link { transition-delay: 0.32s; }
.nav__item:nth-child(6) .nav__link { transition-delay: 0.37s; }

.nav__link::before {
  counter-increment: navcount;
  content: counter(navcount, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-yellow);
  opacity: 0.7;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--color-yellow);
  padding-left: 14px;
}

.nav__footer {
  padding: 20px 28px 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.42s, transform 0.5s ease 0.42s;
}

.nav.is-open .nav__footer { opacity: 1; transform: translateY(0); }

.nav__footer-social {
  display: flex;
  gap: 24px;
}

.nav__footer-social a {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #c7c7c2;
  transition: color var(--transition);
}

.nav__footer-social a:hover { color: var(--color-yellow); }

.header__cta { display: none; }

.hamburger {
  position: relative;
  z-index: 1001;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: transform var(--transition), opacity var(--transition);
}

.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */

/* Wrapper con altura extra: crea el "riel" de scroll mientras el hero queda fijo (sticky) y el texto se anima */
.hero-pin {
  position: relative;
  height: 210vh;
}

@media (min-width: 768px) {
  .hero-pin { height: 230vh; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pin { height: auto; }
}

.hero {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
}

/* Título, subtítulo y botones se desvanecen juntos (con un desenfoque progresivo, no solo
   opacidad) a medida que se scrollea dentro del hero, mientras el tagline amarillo crece y
   pasa a ser el elemento dominante.
   (selector calificado con .hero-pin para ganarle en especificidad a .reveal.is-visible) */
.hero-pin .hero__fade {
  opacity: calc(1 - (var(--hero-progress, 0) * 2.2));
  transform: translateY(calc(var(--hero-progress, 0) * -24px));
  filter: blur(calc(var(--hero-progress, 0) * 10px));
  transition: opacity 0.05s linear, transform 0.05s linear, filter 0.05s linear;
}

@media (prefers-reduced-motion: reduce) {
  .hero-pin .hero__fade { opacity: 1; transform: none; filter: none; }
}

/* Tamaño compartido: --pp-size es el tamaño del tagline amarillo (el elemento dominante);
   el título en blanco se define siempre como una fracción de ese mismo valor (--title-ratio),
   así quedan atados a una sola escala aunque --pp-size cambie con el scroll (--hero-progress)
   o el breakpoint.
   --pp-max es el techo real: el tamaño exacto al que "Peak Performance" (que no puede
   partirse en dos líneas: white-space: nowrap) ocupa el ancho disponible. Ese ancho
   disponible NO es el 100% del viewport: se le resta el padding del container (20px por
   lado) más un padding lateral propio del texto (24px por lado, --pp-side-gap) para que,
   aunque crezca al máximo, siempre quede un margen visible con los bordes — nunca llega a
   tocarlos. Tiene además un tope igual al ancho máximo del container (var(--max-width))
   para que en pantallas ultra anchas no seguir creciendo más allá de donde vive el texto.
   El divisor (11) está calibrado contra el ancho real de "Peak Performance" en una sola
   línea (medido en el elemento ya renderizado, con la tipografía y el peso definitivos) —
   es la referencia más ancha que --pp-size controla directamente. Como es una fórmula
   continua (no un valor fijo por breakpoint), el crecimiento se frena exactamente cuando el
   texto llega al margen disponible, sea cual sea el ancho real de la pantalla — nunca antes,
   nunca después, y nunca hace wrap.
   El piso de cada clamp() ya NO es un valor fijo: es min(valor original, --pp-max). En
   pantallas muy angostas (320–360px) --pp-max puede caer por debajo del piso "de diseño"
   (1.9rem/2.6rem/2.8rem); sin este min(), clamp() ignora el techo y devuelve el piso fijo
   igual, provocando overflow en el estado inicial (sin scroll). Con el min(), el piso se
   adapta y nunca supera al techo. */
.hero-pin {
  --title-ratio: 0.92;
  --pp-side-gap: 24px;
  --pp-max: min(calc((100vw - 40px - (var(--pp-side-gap) * 2)) / 11), calc((var(--max-width) - 40px - (var(--pp-side-gap) * 2)) / 11));
  --pp-size: clamp(min(1.9rem, var(--pp-max)), calc(1.9rem + var(--hero-progress, 0) * 7vw), var(--pp-max));
}

@media (min-width: 640px) {
  .hero-pin { --pp-size: clamp(min(2.6rem, var(--pp-max)), calc(2.6rem + var(--hero-progress, 0) * 9vw), var(--pp-max)); }
}

@media (min-width: 1024px) {
  .hero-pin { --pp-size: clamp(min(2.8rem, var(--pp-max)), calc(2.8rem + var(--hero-progress, 0) * 11vw), var(--pp-max)); }
}

/* ----- Título en outline hollow (contorno, centro hueco/transparente) -----
   Bungee Outline no convenció por su estilo (condensado/urbano), así que se volvió a la
   técnica de contorno "hollow" propiamente dicha: relleno transparente +
   -webkit-text-stroke, sobre Montserrat (misma familia que el resto del sitio), en peso
   700 en vez de 900 — a peso Black los trazos internos de cada letra quedan tan juntos que
   el contorno de un lado se pisa con el del otro; a 700 los huecos internos son lo bastante
   anchos como para que el stroke dibuje un contorno único, sin superposición.
   El bug de letras "fantasma" que había aparecido con esta misma técnica no era por el
   grosor del trazo sino porque el navegador llegaba a pintar el contorno con una
   tipografía de reemplazo mientras Montserrat todavía cargaba, y no limpiaba bien ese
   trazo anterior al hacer el cambio. Por eso el título empieza oculto y recién se muestra
   cuando script.js confirma que Montserrat ya está lista (ver el comentario al inicio de
   script.js) — así el navegador nunca llega a pintar este trazo con una tipografía
   provisoria.
   Tamaño fijo al 92% del tagline amarillo (--title-ratio), que sigue siendo el elemento
   dominante. El grosor del trazo escala con el tamaño de letra (2.6% de su font-size) en
   vez de ser un valor fijo en píxeles, así el contorno se ve igual de sólido sea cual sea
   el tamaño. */
.hero__title {
  visibility: hidden;
}
.fonts-ready .hero__title {
  visibility: visible;
}
.hero__title {
  --title-size: calc(var(--pp-size) * var(--title-ratio));
  font-family: 'Montserrat', var(--font-body), 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-synthesis: none;
  font-size: var(--title-size);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: calc(var(--title-size) * 0.026) var(--color-white);
  text-stroke: calc(var(--title-size) * 0.026) var(--color-white);
  margin-bottom: 20px;
  transition: font-size 0.05s linear;
}

.hero__tagline {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  color: var(--color-yellow);
  text-transform: uppercase;
  line-height: 1;
  padding-top: 14px;
  margin-bottom: 24px;
  width: fit-content;
  max-width: 100%;
}

/* La línea ya no es un border (que se estira junto con el texto al crecer): es una capa
   propia que se desvanece a medida que se scrollea, con el mismo ritmo que el título, el
   subtítulo y los botones (.hero__fade), en vez de acompañar el ancho creciente del texto. */
.hero__tagline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(242, 194, 0, 0.4);
  opacity: calc(1 - (var(--hero-progress, 0) * 2.2));
  transition: opacity 0.05s linear;
}

@media (prefers-reduced-motion: reduce) {
  .hero__tagline::before { opacity: 1; }
}

/* "Peak Performance": relleno amarillo pleno, mismo grotesco compacto (Montserrat Black)
   que el título. Crece con font-size (no transform:scale): así el navegador recalcula
   el layout en cada frame y, si el texto no entra, hace wrap en vez de cortarse contra
   el borde. */
.hero-pin .hero__tagline-big {
  display: block;
  font-family: 'Montserrat', var(--font-body), 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-synthesis: none;
  letter-spacing: -0.01em;
  font-size: var(--pp-size);
  line-height: 1.05;
  white-space: nowrap;
  transition: font-size 0.05s linear;
}

@media (prefers-reduced-motion: reduce) {
  .hero-pin .hero__tagline-big { font-size: inherit; }
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(242, 194, 0, 0.24), transparent 48%),
    linear-gradient(160deg, #0a0a0a 0%, #141414 60%, #0a0a0a 100%);
  z-index: -1;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.hero__content {
  padding: 36px 20px 68px;
  /* --hero-content-shift la calcula script.js en cada scroll: empuja el bloque hacia abajo
     lo justo para que, al terminar de crecer, el título quede pegado al marquee de abajo
     (sin espacio muerto), sin tocar el centrado inicial en reposo. */
  transform: translateY(var(--hero-content-shift, 0px));
}

.hero__subtitle {
  max-width: 520px;
  /* Fórmula continua (no por breakpoints): a los 320px de ancho da el mínimo (14px) y
     crece de forma lineal con el viewport hasta llegar al tamaño original (1.05rem/16.8px)
     a partir de 640px, donde se queda fijo para tablet/desktop. */
  font-size: clamp(14px, calc(11.2px + 0.875vw), 1.05rem);
  color: #d4d4cf;
  margin-bottom: 36px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Mismo tamaño para los dos CTA, sin importar el largo del texto */
.hero__btn {
  flex: 1 1 220px;
  max-width: 280px;
  justify-content: center;
  text-align: center;
}

/* =========================================================
   FRANJA MARQUEE
   ========================================================= */
.marquee {
  background: var(--color-black-soft);
  color: var(--color-yellow-dark);
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  border-top: 1px solid rgba(242, 194, 0, 0.15);
  border-bottom: 1px solid rgba(242, 194, 0, 0.15);
}

.marquee__track {
  display: inline-flex;
  width: max-content;
  animation: marqueeScroll 42s linear infinite;
}

.marquee__track span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  padding-right: 4px;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* =========================================================
   SERVICIOS — acordeón expandible
   ========================================================= */
.services {
  padding: 100px 0;
  background: var(--color-black-soft);
}

.services .section-title { margin-bottom: 40px; }

/* Mobile / tablet (<1024px): acordeón vertical clásico */
.services__accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-panel {
  background: var(--color-gray);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), background var(--transition);
}

.service-panel:hover { border-color: rgba(242, 194, 0, 0.25); }

.service-panel.is-open { background: #202020; border-color: rgba(242, 194, 0, 0.35); }

.service-panel__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-white);
}

.service-panel__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--color-yellow);
  transition: color var(--transition);
}

.service-panel__icon svg { width: 100%; height: 100%; }

.service-panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  /* -40% respecto al tamaño anterior (1.3rem → 0.78rem) */
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  flex: 1;
}

.service-panel__plus {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.service-panel__plus::before,
.service-panel__plus::after {
  content: "";
  position: absolute;
  background: var(--color-yellow);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.service-panel__plus::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.service-panel__plus::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.service-panel.is-open .service-panel__plus::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.service-panel__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.service-panel.is-open .service-panel__body { grid-template-rows: 1fr; }

.service-panel__body-inner { overflow: hidden; }

.service-panel__body-inner p {
  padding: 4px 20px 24px 56px;
  color: #b9b9b4;
  font-size: 0.95rem;
  line-height: 1.65;
}

.service-panel__body-inner p em {
  color: inherit;
  font-style: normal;
  font-weight: 400;
}

/* Desktop (≥1024px): columnas verticales tipo acordeón de imagen */
@media (min-width: 1024px) {
  .services__accordion {
    flex-direction: row;
    align-items: stretch;
    gap: 3px;
    height: 500px;
    width: 100%;
  }

  /* Cerradas, las columnas se reparten todo el ancho disponible en partes iguales */
  .service-panel {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    transition: flex-grow 0.5s cubic-bezier(0.65, 0, 0.35, 1), flex-basis 0.5s cubic-bezier(0.65, 0, 0.35, 1), border-color var(--transition), background var(--transition);
  }

  /* Al abrir, el panel pasa de fila (columna angosta + cuerpo oculto) a columna (header arriba, descripción abajo) */
  .service-panel.is-open {
    flex: 0 0 25%;
    flex-direction: column;
  }

  /* Cerrado: texto vertical, ícono al inicio de la lectura (abajo), ocupa todo el ancho de su columna */
  .service-panel__toggle {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px 0 22px;
    gap: 12px;
  }

  .service-panel__title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    flex: none;
    /* -40% respecto al tamaño anterior (1.5rem → 0.9rem) */
    font-size: 0.9rem;
    letter-spacing: 0.02em;
  }

  .service-panel__plus { display: none; }

  .service-panel__body {
    display: block;
    grid-template-rows: unset;
    flex: none;
    width: 0;
    height: auto;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .service-panel__body-inner {
    height: 100%;
    overflow-y: auto;
  }

  .service-panel__body-inner p {
    padding: 4px 44px 32px;
    font-size: 1.02rem;
    line-height: 1.7;
    max-width: 640px;
  }

  /* Abierto: header horizontal (ícono + título) arriba, descripción debajo a todo el ancho */
  .service-panel.is-open .service-panel__toggle {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 26px 32px;
    gap: 16px;
  }

  .service-panel.is-open .service-panel__title {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    flex: 1;
    font-size: 1.4rem;
  }

  .service-panel.is-open .service-panel__body {
    width: auto;
    flex: 1;
    opacity: 1;
    transition: opacity 0.35s ease 0.15s;
  }

  .service-panel:not(.is-open):hover .service-panel__icon,
  .service-panel:not(.is-open):hover .service-panel__title { color: var(--color-yellow); }
}

/* =========================================================
   QUIÉNES SOMOS
   ========================================================= */
.about { padding: 100px 0; }

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}

.about__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 360 / 600;
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 360px;
  margin: 0 auto;
  order: 2;
}

/* Botón para activar/desactivar el sonido del video (arranca muteado para garantizar el autoplay) */
.about__video-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(2px);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.about__video-toggle:hover { background: var(--color-yellow); color: var(--color-black); }

.about__video-toggle svg { width: 20px; height: 20px; }

.about__video-toggle .icon-unmuted { display: none; }

.about__video-toggle[aria-pressed="true"] .icon-muted { display: none; }
.about__video-toggle[aria-pressed="true"] .icon-unmuted { display: block; }

.about__content { order: 1; }

@media (min-width: 768px) {
  .about__media { order: 0; }
  .about__content { order: 0; }
}

.about__media img,
.about__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-gray);
}

.about__content p {
  color: #c7c7c2;
  margin-bottom: 18px;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.stat { display: flex; flex-direction: column; gap: 4px; }

.stat__number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--color-yellow);
  line-height: 1;
}

.stat__label {
  font-size: 0.75rem;
  color: #9a9a95;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================================================
   GALERÍA
   ========================================================= */
.gallery { padding: 100px 0; }

/* Mobile (<768px): carrousel horizontal con scroll-snap, igual que Servicios */
.gallery__grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 40px -20px 0;
  padding: 4px 20px 8px;
  scroll-padding-left: 20px;
}

.gallery__grid::-webkit-scrollbar { display: none; }

/* Dots del carrousel de galería (solo mobile) */
.gallery__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.gallery__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  padding: 0;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.gallery__dots button.is-active {
  background: var(--color-yellow);
  transform: scale(1.25);
}

.gallery__item {
  position: relative;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  flex: 0 0 78%;
  max-width: 340px;
  scroll-snap-align: start;
  background: var(--color-gray);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
  opacity: 0;
  transition: opacity var(--transition);
}

.gallery__item::before {
  content: "+";
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-yellow);
  z-index: 1;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--transition), transform var(--transition);
}

.gallery__item:hover img,
.gallery__item:focus-visible img {
  transform: scale(1.06);
  filter: brightness(0.85);
}

.gallery__item:hover::after,
.gallery__item:focus-visible::after,
.gallery__item:hover::before,
.gallery__item:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

/* =========================================================
   DÓNDE ESTAMOS
   ========================================================= */
.location {
  padding: 100px 0;
  background: var(--color-black-soft);
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 40px;
}

.location__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.location__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Sin divider después del último ítem (Contacto) */
.location__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.location__list strong {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-yellow);
  font-size: 0.95rem;
}

.location__list span { color: #c7c7c2; font-size: 0.95rem; }

.location__address-link {
  color: #c7c7c2;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: rgba(199, 199, 194, 0.4);
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.location__address-link:hover {
  color: var(--color-yellow);
  text-decoration-color: var(--color-yellow);
}

/* Mismos botones de contacto que en "Empezá ahora", apilados uno debajo del otro */
.location__contact-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.location__map {
  position: relative;
  width: 100%;
  height: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--color-gray);
}

.location__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.3) contrast(1.1);
}

/* Fallback: algunos navegadores in-app (Instagram/WhatsApp) bloquean el iframe de Maps */
.location__map-fallback {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  background: rgba(10, 10, 10, 0.85);
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(242, 194, 0, 0.4);
  backdrop-filter: blur(2px);
  transition: background var(--transition), border-color var(--transition);
}

.location__map-fallback:hover {
  background: var(--color-yellow);
  color: var(--color-black);
  border-color: var(--color-yellow);
}

/* =========================================================
   CONTACTO
   ========================================================= */
.contact { padding: 100px 0; }

.contact__inner { text-align: center; }

.contact__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 520px;
  margin: 0 auto;
}

.contact__card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-gray);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  padding: 20px 24px;
  text-align: left;
  transition: transform var(--transition), border-color var(--transition);
}

.contact__card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 194, 0, 0.4);
}

.contact__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--color-yellow);
}

.contact__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.contact__value {
  display: block;
  font-size: 0.85rem;
  color: #9a9a95;
}

.contact__card { flex-wrap: wrap; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  padding: 48px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer__tagline { color: #9a9a95; font-size: 0.85rem; }

.footer__social {
  display: flex;
  gap: 20px;
  margin: 8px 0;
}

.footer__social a {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-white);
  transition: color var(--transition);
}

.footer__social a:hover { color: var(--color-yellow); }

.footer__copy { color: #6b6b6b; font-size: 0.78rem; }

/* =========================================================
   LIGHTBOX (galería)
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.94);
}

.lightbox__figure {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 900px);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: scale(0.96);
  transition: transform 0.3s ease;
}

.lightbox.is-open .lightbox__figure { transform: scale(1); }

.lightbox__img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  border-radius: 6px;
  object-fit: contain;
}

.lightbox__caption {
  font-size: 0.85rem;
  color: #c7c7c2;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background var(--transition);
}

.lightbox__close:hover { background: var(--color-yellow); color: var(--color-black); }
.lightbox__close svg { width: 20px; height: 20px; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background var(--transition);
}

.lightbox__nav:hover { background: var(--color-yellow); color: var(--color-black); }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }

@media (min-width: 640px) {
  .lightbox__nav--prev { left: 24px; }
  .lightbox__nav--next { right: 24px; }
}

/* =========================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================= */
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  z-index: 900;
  transition: transform var(--transition);
}

.whatsapp-float:hover { transform: scale(1.08); }

/* =========================================================
   RESPONSIVE — Tablet (≥768px)
   ========================================================= */
@media (min-width: 768px) {
  .hero__actions { justify-content: flex-start; }

  .about__grid {
    grid-template-columns: 1fr 1fr;
  }

  .location__grid {
    grid-template-columns: 1fr 1.1fr;
  }

  .location__map { height: 100%; min-height: 380px; }

  .contact__actions {
    grid-template-columns: 1fr 1fr;
  }

  /* Grid tipo mosaico: algunas piezas ocupan más espacio (ya no carrousel) */
  .gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
    gap: 14px;
    overflow: visible;
    margin: 40px 0 0;
    padding: 0;
  }

  .gallery__item {
    aspect-ratio: auto;
    flex: none;
    max-width: none;
    scroll-snap-align: none;
  }

  /* Mosaico variado 4x4 sin huecos negros: mezcla de piezas altas, anchas y normales */
  .gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; }
  .gallery__item:nth-child(3) { grid-column: 3 / span 2; grid-row: 1; }
  .gallery__item:nth-child(4) { grid-column: 2; grid-row: 2; }
  .gallery__item:nth-child(5) { grid-column: 3; grid-row: 2 / span 2; }
  .gallery__item:nth-child(6) { grid-column: 4; grid-row: 2; }
  .gallery__item:nth-child(7) { grid-column: 1 / span 2; grid-row: 3; }
  .gallery__item:nth-child(8) { grid-column: 4; grid-row: 3 / span 2; }
  .gallery__item:nth-child(9) { grid-column: 1; grid-row: 4; }
  .gallery__item:nth-child(10) { grid-column: 2; grid-row: 4; }
  .gallery__item:nth-child(11) { grid-column: 3; grid-row: 4; }

  .gallery__dots { display: none; }
}

/* =========================================================
   RESPONSIVE — Desktop (≥1024px)
   ========================================================= */
@media (min-width: 1024px) {
  :root { --header-height: 84px; }

  .logo__img { height: 62px; }

  .nav {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    background-image: none;
    clip-path: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    overflow: visible;
    display: block;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 4px;
    counter-reset: none;
  }

  .nav__item {
    border-bottom: none;
    overflow: visible;
  }

  .nav__link {
    padding: 8px 14px;
    font-size: 0.85rem;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 1;
    transform: none;
    transition: color var(--transition);
  }

  .nav__link::before { display: none; }

  /* Subrayado animado en hover / activo */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--color-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
  }

  .nav__link:hover::after,
  .nav__link.is-active::after { transform: scaleX(1); }

  .nav__link:hover,
  .nav__link.is-active { padding-left: 14px; }

  .nav__footer { display: none; }

  .header__cta { display: inline-flex; }

  .hamburger { display: none; }

  .about .section-subtitle { display: block; }

  .gallery__grid { grid-auto-rows: 190px; }
}