/* JPRO Audio, demo Hi22. Réplica estructural de noxediem.ch por encargo de Diego
   (14-ago-2026): misma estructura y sistema de scroll, paleta y fuente propias.
   Paleta derivada de la marca JPRO: acento azul-violeta de su pantalla LED
   (muestreado entre #6058c7 y #1c058a), cierre profundo del #160539 muestreado. */

:root {
  --papel: #ffffff; /* blanco puro, opción 7 elegida por Diego */
  --tinta: #111114;
  /* SIN tokens de gris para texto: Diego los vetó en toda la página (25-ago).
     Todo texto es tinta, papel o acento; el gris solo sobrevive en --filo (bordes). */
  --filo: #e6e6e2;
  /* azul eléctrico brillante, opción 2 elegida por Diego (14-ago-2026) */
  --acento: #0051ff;
  --acento-claro: #6f9dff;
  --profundo: #050f33;
  --focus-ring: 0 0 0 1px rgba(0, 81, 255, 0.5);
  --focus-ring-teclado: 0 0 0 2px #0051ff;
  /* margen lateral pegado a la orilla (Diego, 26-ago: "reduce el espacio
     blanco sobrante entre el texto y el borde"); en celular se queda en 16px,
     que menos ya aprieta la lectura */
  --gutter: clamp(16px, 1.25vw, 22px);
}

* { margin: 0; box-sizing: border-box; }

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

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 17px;
  line-height: 1.45;
  /* letra más junta en todo el cuerpo: a Diego la caja suelta le sabía sosa (25-ago) */
  letter-spacing: -0.012em;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

button:not(:disabled), [role="button"], summary, label[for], a[href] { cursor: pointer; }

/* NUNCA recuadro azul al clicar (regla dura de Diego, 26-ago): el foco por
   CLIC no pinta nada — ni el anillo propio ni el contorno del navegador; la
   señal de foco existe SOLO para el teclado (:focus-visible), que quitarla
   ahi es barrera de acceso (regla 30 del cerebro) */
a:focus, button:focus, [tabindex]:focus { outline: none; box-shadow: none; }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring-teclado); }
[tabindex]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--acento); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

.acento { color: var(--acento); }
/* palabra de acento en Audiowide, opción 4 elegida por Diego (14-ago-2026):
   la prima libre de la fuente techno del wordmark JPRO */
.acento-serif { font-family: "Audiowide", sans-serif; font-weight: 400; color: var(--acento); }

/* ---------- cabeza (nav de demo: secciones futuras, de adorno) ---------- */

.cabeza {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px var(--gutter);
}
/* orden del 26-ago (Diego), REEMPLAZA el switch del 25-ago (menú y Cotizar a
   la izquierda, logo a la derecha): menú a la IZQUIERDA, logo CENTRADO
   geométrico (absoluto + translate, no flex aproximado) y Cotizar SOLO a la
   DERECHA. En celular el logo sigue a la izquierda con la hamburguesa */
.cabeza { position: relative; }
.cabeza-logo {
  display: grid;
  justify-items: center;
  gap: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.cabeza-botones { margin-left: auto; }
.cabeza-logo .logo-trazo { width: 92px; height: auto; display: block; }
.logo-lema {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--tinta);
}
/* los textos cortos de interfaz van en MAYÚSCULAS compactas: es la misma voz
   de los titulares, bajada de volumen (corrección de Diego, 25-ago: la caja
   normal en peso 500 se sentía sin personalidad) */
.cabeza-nav {
  display: flex;
  gap: 26px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta);
  order: 1;
}
.cabeza-nav span { cursor: default; }

/* desplegable de Eventos en la barra (Diego, 26-ago): lista con los tipos de
   evento; los que aun no tienen pagina van sin enlace. Abre por clic y nunca
   se cierra en seco (data-cerrando) */
/* el ritmo de la barra se mide en BLANCO, no en cajas (Diego, 27-ago: "Eventos
   y Contacto se ven mas separados que Inicio y Eventos"): el chevron suma su
   ancho al hueco del flex, asi que despues de Eventos habia 6 + 14 + 26 px de
   aire contra 26 entre los demas. Se aprieta el hueco interno y se descuenta
   el ancho del chevron con margen negativo — el chevron es trazo fino y llena
   solo la mitad del espacio que ocupa */
.nav-desplegable { position: relative; margin-right: -11px; }
.nav-toggle {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-toggle svg { transition: transform 0.2s ease; }
.nav-desplegable[data-abierto] .nav-toggle svg { transform: rotate(180deg); }
.nav-lista {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  z-index: 45;
  min-width: 200px;
  padding: 10px 0;
  background: var(--papel);
  border-radius: 12px;
  box-shadow: 0 18px 54px rgba(10, 10, 30, 0.18);
  display: none;
}
/* puente invisible sobre el hueco entre el boton y la lista: sin el, el
   cursor "sale" del desplegable al cruzar y la lista se cierra a mitad */
.nav-lista::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-desplegable[data-abierto] .nav-lista {
  display: grid;
  animation: nav-lista-entra 0.22s ease;
}
.nav-desplegable[data-cerrando] .nav-lista {
  display: grid;
  animation: nav-lista-sale 0.16s ease forwards;
}
@keyframes nav-lista-entra { from { opacity: 0; transform: translateY(-5px); } }
@keyframes nav-lista-sale { to { opacity: 0; transform: translateY(-4px); } }
.nav-lista a,
.nav-lista span {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav-lista a { transition: color 0.15s ease; }
.nav-lista a:hover { color: var(--acento); }
.nav-lista span { cursor: default; }

/* botones de contacto del encabezado (pedido de Diego, 25-ago) */
.cabeza-botones { display: flex; gap: 10px; order: 2; }

.hamburguesa {
  display: none;
  background: none;
  border: 0;
  color: var(--tinta);
  width: 44px;
  height: 44px;
  place-items: center;
  margin-right: -8px;
}

.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--papel);
  display: flex;
  flex-direction: column;
  padding: 88px var(--gutter) 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.menu-movil[data-abierto] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-tacha {
  position: absolute;
  top: 18px;
  right: calc(var(--gutter) - 9px);
  background: none;
  border: 0;
  color: var(--tinta);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.menu-lista {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.menu-lista span { cursor: default; }
/* grupo Eventos del menu movil: sus tipos van indentados y mas chicos */
.menu-lista .menu-sub { font-size: 21px; padding-left: 22px; }

/* pill de acción: Cotizar, en el encabezado y flotando arriba a la derecha al
   pasar la portada (pieza circular deliberada de la referencia; el botón blanco
   de WhatsApp se quitó por orden de Diego, 25-ago) */
.pill {
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 24px;
  border-radius: 999px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.pill-negra { background: var(--tinta); color: var(--papel); }
.pill-negra:hover { background: var(--acento); }

.pills-fijas {
  position: fixed;
  top: 18px;
  right: var(--gutter);
  z-index: 30;
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pills-fijas.viva { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- arranque: cortina y cascada de letras (existen solo con .anima;
   sin JS no hay cortina y el titular nace entero) ---------- */

.h1-palabra { display: inline-block; white-space: nowrap; }
.h1-letra { display: inline-block; }
.anima .h1-letra {
  opacity: 0;
  animation: letra-aparece 0.22s ease forwards;
  animation-delay: var(--ret, 0.4s);
}
@keyframes letra-aparece {
  to { opacity: 1; }
}
.anima .h1-letra-acento {
  color: var(--tinta);
  animation: letra-aparece 0.22s ease forwards, letra-tine 0.34s ease forwards;
  animation-delay: var(--ret, 0.4s), calc(var(--ret, 0.4s) + 0.5s);
}
@keyframes letra-tine {
  to { color: var(--acento); }
}

/* ---------- portada ---------- */

.portada {
  /* pantalla llena: el titular manda en la primera vista (pedido de Diego, 14-ago) */
  min-height: calc(100vh - 88px);
  min-height: calc(100svh - 88px);
  display: flex;
  flex-direction: column;
  /* centro OPTICO, como los heros de secciones y contacto: sin los parrafos de
     apoyo (retirados el 27-ago) el titular se lee bajo si se centra al medio
     matematico */
  padding: clamp(20px, 3vh, 44px) var(--gutter) calc(clamp(28px, 5vh, 64px) + 6vh);
}
.portada h1 {
  font-weight: 800;
  font-size: clamp(46px, 9.4vw, 168px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: auto 0;
}

/* ---------- eventos: TODOS los tipos de evento en UNA sola pantalla, columnas
   verticales a SANGRE lado a lado — mini slides de arriba a abajo, no galería
   con marcos (corrección de Diego, 25-ago). El rótulo hereda el gradiente de
   las slides viejas para conservar el lenguaje de la página ---------- */

/* sin colchón inferior: las columnas pegan directo con el cierre (Diego, 25-ago) */
.eventos { padding: clamp(48px, 7vh, 90px) 0 0; }
.eventos h2 {
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  padding: 0 var(--gutter);
}
.columnas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* sin rendijas: Diego vetó las líneas blancas entre secciones (25-ago);
     la división la hace el sombreado de los costados de cada columna */
  gap: 0;
  height: 100vh;
  height: 100svh;
  margin-top: clamp(22px, 3.2vh, 40px);
}
.columna {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.columna img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* columna VACÍA: sin foto todavía — el cliente va a mandar las suyas (26-ago).
   Va en NEGRO con texto blanco, como se veía con las fotos oscuras (Diego) */
.columna.vacia {
  background: var(--tinta);
  display: grid;
  place-items: center;
}
.columna-aviso {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}

/* viñeta lateral: separa una columna de la siguiente sin dibujar una línea */
.columna::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(5, 3, 15, 0.35), transparent 7%, transparent 93%, rgba(5, 3, 15, 0.35));
}
/* el rótulo va al PIE: arriba a la derecha viven las pills fijas y a la altura
   de la última columna taparían el nombre (visto en la captura de Diego, 25-ago) */
.columna figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(16px, 2vw, 28px) clamp(14px, 1.4vw, 22px);
  background: linear-gradient(to top, rgba(10, 6, 26, 0.66), rgba(10, 6, 26, 0));
  color: #fff;
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 30px);
  letter-spacing: -0.01em;
  /* en mayúsculas y centrado en su columna (Diego, 25-ago) */
  text-transform: uppercase;
  text-align: center;
}

/* hover elegido por Diego (25-ago, opción 1 del probador): zoom lento de la
   foto. Desde el 26-ago Sociales y Empresariales SÍ son clicables (enlace
   estirado sobre la columna); las columnas sin página quedan sin manita,
   que la manita sin destino miente */
.columna-enlace { position: absolute; inset: 0; z-index: 4; }
@media (hover: hover) {
  .columna img { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.21, 1); }
  .columna:hover img { transform: scale(1.06); }

  /* el mismo resalte de seleccion que las celdas de las interiores (Diego,
     27-ago): un veto o un gesto se aplica a TODA la pagina, no al ejemplar
     senalado (cerebro-bugs §13-terdecies). Solo se encienden las columnas que
     de verdad llevan a algun lado */
  .columna::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: rgba(4, 7, 22, 0.46);
    opacity: 0;
    transition: opacity 0.34s cubic-bezier(0.22, 0.61, 0.21, 1);
  }
  .columnas:hover .columna::before { opacity: 1; }
  .columnas .columna:has(.columna-enlace):hover::before { opacity: 0; }
}
@media (hover: none) {
  .columna { -webkit-tap-highlight-color: transparent; }
  .columna::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: rgba(4, 7, 22, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .columna:has(.columna-enlace):active::before { opacity: 1; }
}

/* ---------- páginas interiores de eventos (sociales, empresariales) ----------
   Rejilla de PARES 16:9 a sangre, opción 6 del probador elegida por Diego el
   26-ago con su corrección: nunca una celda ancha — el impar se completa con
   una celda de "Título" en espera. La proporción es 16:9 porque el material
   de JPro es horizontal (16:9 y 4:3). Rótulo, línea y Cotizar al pie de cada
   celda, como las columnas de la portada. */

/* mismo aire que la portada (Diego, 26-ago: "que el espacio blanco coincida
   con el de inicio"): pantalla llena menos el encabezado, con titulo y
   descripcion CENTRADOS */
.int-cab {
  min-height: calc(100vh - 88px);
  min-height: calc(100svh - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* mismo centro OPTICO que el hero de contacto */
  padding: clamp(20px, 3vh, 44px) var(--gutter) calc(clamp(20px, 3vh, 44px) + 6vh);
}
.int-cab h1 {
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.int-cab p { margin-top: 18px; max-width: 58ch; font-size: 17px; }

/* ---------- Contacto rehecho (Diego, 26-ago): el hero TRABAJA — titulo a la
   izquierda, los datos de contacto grandes a la derecha; abajo una banda azul
   con el formulario y el mapa en RECUADRO, nunca a sangre ---------- */
.ctc-hero {
  /* centrado y a PANTALLA COMPLETA como los heros de las secciones (Diego,
     26-ago: "extiende el hero blanco, esta muy comprimido"): titulo y
     descripcion al centro y los datos en FILA debajo */
  min-height: calc(100vh - 88px);
  min-height: calc(100svh - 88px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* centro OPTICO: el matematico se lee bajo (Diego, 26-ago) */
  padding: clamp(20px, 3vh, 44px) var(--gutter) calc(clamp(20px, 3vh, 44px) + 6vh);
}
.ctc-hero h1 {
  font-weight: 800;
  font-size: clamp(44px, 6.6vw, 118px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.ctc-baja { margin: 16px auto 0; max-width: 52ch; font-size: 17px; }
.ctc-datos {
  margin-top: clamp(40px, 6vh, 68px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(26px, 4vw, 84px);
}
.ctc-dato { text-align: center; }
.ctc-rotulo {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento);
  margin-bottom: 5px;
}
.ctc-dato a,
.ctc-valor {
  font-size: clamp(20px, 1.9vw, 29px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ctc-dato a { transition: color 0.15s ease; }
.ctc-dato a:hover { color: var(--acento); }
.ctc-banda {
  background: var(--profundo);
  color: #f3f1fb;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4.5vw, 80px);
  align-items: stretch;
  padding: clamp(56px, 8vw, 100px) var(--gutter);
}
.ctc-form h2 {
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.ctc-form > p { margin-top: 10px; font-size: 16px; }
.ctc-form .cotiza-form { margin: clamp(22px, 3vh, 34px) 0 0; max-width: none; }
.ctc-form .cotiza-enviar { justify-self: start; }
/* el mapa es un recuadro a escuadra que acompana al formulario, con sombra
   para flotar sobre el azul */
.ctc-mapa {
  position: relative;
  min-height: 420px;
  /* esquinas redondeadas (Diego, 26-ago: a escuadra se veia "soso"); el
     overflow recorta el iframe para que no tape las esquinas */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4);
}
.ctc-mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.paquetes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: clamp(22px, 3.2vh, 40px);
}
.paquete {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--tinta);
}
.paquete img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paquete .paquete-aviso {
  position: absolute;
  /* centrado contra la zona LIBRE de la celda, no contra la celda entera:
     abajo vive el rotulo con su boton y en celular se encimaban */
  inset: 0 0 42% 0;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
/* viñeta en los cuatro costados: divide celda de celda sin dibujar lineas */
.paquete::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(5, 3, 15, 0.3), transparent 6%, transparent 94%, rgba(5, 3, 15, 0.3)),
              linear-gradient(to bottom, rgba(5, 3, 15, 0.3), transparent 8%, transparent 92%, rgba(5, 3, 15, 0.3));
}
.paquete figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(18px, 2vw, 30px) 18px clamp(16px, 1.8vw, 26px);
  text-align: center;
  color: #fff;
  background: linear-gradient(to top, rgba(10, 6, 26, 0.72), rgba(10, 6, 26, 0));
}
.paquete-nombre {
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 30px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.paquete figcaption p {
  font-size: 13.5px;
  line-height: 1.4;
  margin: 7px auto 13px;
  max-width: 46ch;
}
.pill-blanca { background: var(--papel); color: var(--tinta); }
.pill-blanca:hover { background: var(--acento); color: var(--papel); }

/* ---------- la celda se SELECCIONA al pasar el cursor (Diego, 27-ago) --------
   Tres gestos encadenados, todos con opacity/transform (§7-bis: lo demas
   repinta la pagina):
   1. al entrar el cursor a la rejilla TODAS se atenuan y solo la de abajo del
      cursor se queda encendida — asi el resalte se lee incluso sin las fotos,
      que aun no llegan;
   2. el nombre vive en reposo DONDE hoy esta el boton, y al resaltar sube;
   3. el "Ver mas" nace oculto en ese hueco y sube detras del nombre.
   El hueco del boton se reserva ARRIBA (padding-top) para que el rotulo
   conserve su alto y el degradado no cambie entre los dos estados.
   Todo va dentro de @media (hover:hover) por el doble tap de iOS
   (cerebro-bugs §9.0-bis); el gemelo tactil es el :active de abajo. ---------- */
.paquete { --alza: 52px; }
@media (hover: hover) {
  .paquete img { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.21, 1); }
  .paquete:hover img { transform: scale(1.06); }

  /* el velo va POR ENCIMA del rotulo (z-index 2) para apagar la celda entera,
     texto incluido */
  .paquete::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: rgba(4, 7, 22, 0.46);
    opacity: 0;
    transition: opacity 0.34s cubic-bezier(0.22, 0.61, 0.21, 1);
  }
  /* el velo SOLO si la rejilla tiene al menos una celda que abra algo: desde
     que todos los rotulos dicen "Próximamente" (27-ago) ninguna abre, y sin
     esta condicion la rejilla entera se apagaba al pasar el cursor sin que se
     encendiera ninguna — un resalte que no resalta nada */
  .paquetes:has(.paquete-ver):hover .paquete::before { opacity: 1; }
  /* la celda en espera NO se enciende: no abre nada, y encenderla prometeria
     una accion que no existe (cerebro-interfaces, JPro 25-ago) */
  .paquetes .paquete:has(.paquete-ver):hover::before { opacity: 0; }

  .paquete:has(.paquete-ver) figcaption {
    padding-top: calc(clamp(18px, 2vw, 30px) + var(--alza));
  }
  .paquete:has(.paquete-ver) .paquete-nombre {
    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.21, 1);
  }
  /* el :has() tambien aqui: sin el, la celda EN ESPERA levantaba su rotulo al
     pasar el cursor y quedaba 52px mas arriba que su vecina de la misma fila
     (visto en la captura del 27-ago, no a ojo) */
  .paquete:has(.paquete-ver):hover .paquete-nombre {
    transform: translateY(calc(var(--alza) * -1));
  }

  /* especificidad alta a proposito: mas abajo vive
     `.paquete figcaption .paquete-ver { margin-top: 12px }` y ganaria */
  .paquete figcaption .paquete-ver {
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 1.8vw, 26px);
    margin-top: 0;
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity 0.28s ease 0.08s,
                transform 0.42s cubic-bezier(0.22, 0.61, 0.21, 1) 0.08s,
                background-color 0.18s ease,
                color 0.18s ease;
  }
  .paquete:hover figcaption .paquete-ver {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
  /* con teclado el boton no puede quedarse invisible */
  .paquete figcaption .paquete-ver:focus-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
}
/* gemelo tactil: sin cursor la celda no puede quedarse sin acuse (cerebro-bugs
   §9.0-bis). Aqui el rotulo y el boton se quedan como estan y el acuse es el
   velo mientras el dedo esta abajo */
@media (hover: none) {
  .paquete { -webkit-tap-highlight-color: transparent; }
  .paquete::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: rgba(4, 7, 22, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .paquete[data-abre]:active::before { opacity: 1; }
}
/* ---------- visor flotante de paquete (Diego, 26-ago): al hacer clic la
   celda se expande a un recuadro flotante sobre la pagina difuminada — la
   imagen ES el objeto, sin panel blanco; nombre e info flotan con la
   tipografia de la casa. Solo se anima opacity/transform (el blur del fondo
   se pinta una vez al abrir); el cierre lleva red de seguridad en el JS ---------- */
.sin-scroll { overflow: hidden; }
.paquete[data-abre] { cursor: pointer; }
.visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 44px);
  /* sin blur disponible, el velo es casi opaco para que el visor siga legible */
  background: rgba(4, 7, 22, 0.88);
  animation: visor-entra 0.3s ease;
}
@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .visor {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: rgba(4, 7, 22, 0.55);
  }
}
.visor[hidden] { display: none; }
@keyframes visor-entra { from { opacity: 0; } }
/* EL QUE CEDE ES LA IMAGEN, NO EL BOTON (Diego, 27-ago: "se corta el boton de
   cotizar y tengo que deslizar hacia abajo"). La caja era un grid con
   overflow-y:auto y la imagen tenia el 16:9 clavado al ANCHO, asi que en una
   ventana baja el conjunto no cabia, salia una barra de scroll DENTRO del
   visor y el Cotizar quedaba al filo. Ahora es una columna flex: nombre, texto
   y boton no se encogen nunca (flex 0 0 auto) y el marco de la foto se queda
   con lo que sobre. El overflow se deja SOLO como red para ventanas absurdas */
.visor-caja {
  width: min(860px, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  animation: visor-caja-entra 0.5s cubic-bezier(0.22, 0.61, 0.21, 1);
}
.visor-nombre, .visor-info, .visor-cotizar { flex: 0 0 auto; }
@keyframes visor-caja-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.965); }
}
.visor[data-cerrando] { animation: visor-sale 0.26s ease forwards; }
.visor[data-cerrando] .visor-caja { animation: visor-caja-sale 0.26s ease forwards; }
@keyframes visor-sale { to { opacity: 0; } }
@keyframes visor-caja-sale { to { opacity: 0; transform: translateY(10px) scale(0.97); } }
.visor-nombre {
  color: #fff;
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.visor-info { color: #fff; font-size: 15.5px; max-width: 60ch; }
/* esquinas apenas suavizadas (Diego, 27-ago: "un contorno circular super
   discreto, para que no se vea la imagen super cuadrada"). Va SOLO aqui, en el
   visor: en la rejilla las celdas siguen a sangre, que ahi el filo es la ley
   (25-ago). El radio es chico a proposito — a mas de ~8px deja de leerse como
   una esquina suavizada y empieza a leerse como tarjeta. `overflow:hidden`
   para que la foto se recorte con el marco y no le asome la punta */
.visor-principal {
  position: absolute;
  inset: 0;
  background: var(--tinta);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.visor-principal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visor-principal .aviso {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
/* flechas a los costados de la imagen: anuncian que hay mas fotos (Diego,
   26-ago, en lugar de la tira de miniaturas); iconos, nunca caracteres */
/* el 16:9 vive AQUI, y con min-height:0 puede encogerse cuando la ventana es
   baja: la proporcion es la preferencia, no una imposicion. Las flechas van
   absolutas contra este marco, asi que al encogerse siguen centradas con la
   foto (por eso flex-grow es 0: si creciera, se descentrarian) */
.visor-marco {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: 0 1 auto;
  min-height: 0;
}
.visor-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 10px;
  color: #fff;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
  transition: color 0.15s ease;
}
.visor-flecha:hover { color: var(--acento-claro); }
/* la tacha y las flechas JAMAS pintan recuadro de foco (veto de Diego): su
   señal, incluso con teclado, es el tinte azul claro */
.visor-tacha:focus-visible,
.visor-flecha:focus-visible { outline: none; box-shadow: none; color: var(--acento-claro); }
.visor-ant { left: 8px; }
.visor-sig { right: 8px; }
/* el Cotizar del visor: perceptible pero esbelto (Diego, 26-ago: el alto de
   16px de padding se veia "gordo") */
.visor-cotizar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--papel);
  color: var(--tinta);
  font-weight: 700;
  font-size: 16px;
  padding: 11px 24px;
  border-radius: 11px;
  margin-top: 8px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.visor-cotizar:hover { background: var(--acento-claro); color: var(--profundo); }
/* el Ver más de la celda es un boton, no un enlace: hereda la letra del sitio */
button.pill { border: 0; font-family: inherit; }
.paquete figcaption .paquete-ver { margin-top: 12px; }
.visor-tacha {
  position: absolute;
  top: 18px;
  right: 20px;
  background: none;
  border: 0;
  padding: 8px;
  color: #fff;
  display: grid;
  place-items: center;
}

/* pie corto de las interiores: contacto y datos sin el remate gigante, que
   solo vive en la portada. Doble clase porque la regla base de .cierre vive
   mas abajo en este archivo y a igual especificidad ganaria ella */
.cierre.cierre-corto { padding-top: 0; }
.cierre-corto .cierre-pie { margin-top: 0; }
.cierre-corto .cierre-datos { margin-top: 0; }
.cierre-corto .cierre-datos ~ .cierre-pie { margin-top: clamp(48px, 7vw, 96px); }

/* formulario de cotización de las interiores (Diego, 26-ago): datos simples
   sobre el azul profundo, estrecho y centrado; arma el WhatsApp al enviar.
   Inputs rellenos sin borde (regla dura 6); al enfocar, superficie mas clara
   y anillo, nunca marco */
.cotiza {
  background: var(--profundo);
  color: #f3f1fb;
  /* mismo aire abajo que arriba: al quitarse el bloque de datos del pie, el
     margen que quedaba debajo del boton era 182px contra 110 arriba (medido
     26-ago) y la pagina se sentia mas larga de ese lado */
  padding: clamp(64px, 8vw, 110px) var(--gutter) clamp(64px, 8vw, 110px);
}
.cotiza h2 {
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
}
.cotiza-baja {
  text-align: center;
  margin: 12px auto 0;
  max-width: 46ch;
  font-size: 16px;
}
.cotiza-form {
  max-width: 520px;
  margin: clamp(30px, 4vw, 50px) auto 0;
  display: grid;
  gap: 18px;
}
.cotiza-form label { display: grid; gap: 8px; }
.cotiza-rotulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento-claro);
}
.cotiza-form input,
.cotiza-form textarea {
  background: rgba(255, 255, 255, 0.09);
  border: 0;
  border-radius: 10px;
  padding: 14px 16px;
  color: #f3f1fb;
  font: inherit;
  font-size: 16px;
}
.cotiza-form textarea { min-height: 120px; resize: vertical; }
.cotiza-form input:focus,
.cotiza-form textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(111, 157, 255, 0.6);
}
.cotiza-form input:focus-visible,
.cotiza-form textarea:focus-visible { box-shadow: 0 0 0 2px var(--acento-claro); }
.cotiza-enviar {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 30px;
  border-radius: 12px;
  margin-top: 8px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.cotiza-enviar:hover { background: var(--acento-claro); color: var(--profundo); }

/* ---------- cierre (el gigante oscuro de la referencia) ---------- */

.cierre {
  background: var(--profundo);
  color: #f3f1fb;
  padding: clamp(90px, 13vw, 190px) var(--gutter) 30px;
}
.cierre-gigante {
  font-weight: 800;
  font-size: clamp(52px, 10.4vw, 170px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.cierre-gigante .acento-serif { color: var(--acento-claro); }
/* cascada de letras al entrar en vista, en TODA la página (las .letra las
   crea el JS, así que sin JS los textos nacen enteros) */

/* anti-parpadeo: el texto que el JS va a partir se oculta DESDE CSS (antes del
   primer pintado); el JS lo suelta con .partido al terminar de partir, y si el
   script nunca corre, la red lo aparece a los 2.2s */
.anima .portada h1:not(.partido),
.anima .casc:not(.partido) {
  opacity: 0;
  animation: aparece-red 0.4s ease 2.2s forwards;
}
@keyframes aparece-red {
  to { opacity: 1; }
}
.casc .palabra { display: inline-block; white-space: nowrap; }
.casc .letra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
}
.casc.revela .letra {
  animation: letra-sube 0.55s cubic-bezier(0.22, 0.61, 0.21, 1) forwards;
  animation-delay: var(--retardo, 0s);
}
@keyframes letra-sube {
  to { opacity: 1; transform: none; }
}
.btn-cierre {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--papel);
  color: var(--tinta);
  font-weight: 700;
  font-size: 18px;
  padding: 17px 32px;
  border-radius: 12px;
  margin-top: clamp(36px, 5vw, 64px);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn-cierre:hover { background: var(--acento-claro); color: var(--profundo); }
/* datos de contacto en fila con rotulito, no en frase corrida (Diego, 25-ago:
   la línea de "También al…" se sentía ambigua) */
/* tres columnas IGUALES a lo ancho (Diego, 26-ago: en flex con huecos fijos
   "se siente desacomodada" — cada dato mide distinto y el ritmo se pierde);
   asi el primero abre a la izquierda, el ultimo cierra la derecha y los
   rotulos caen en una reticula pareja */
.cierre-datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: clamp(44px, 6vw, 80px);
}
.dato-rotulo {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento-claro);
  margin-bottom: 7px;
}
.cierre-datos a,
.dato-valor {
  color: #f3f1fb;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cierre-datos a { transition: color 0.15s ease; }
.cierre-datos a:hover { color: var(--acento-claro); }
.cierre-pie {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 12px 28px;
  margin-top: clamp(56px, 8vw, 110px);
  font-size: 14px;
  color: #f3f1fb;
}
.cierre-pie > span:last-child { justify-self: end; }
/* credito de agencia: JPro paso a CLIENTE el 27-ago y el pie dejo de decir
   "Hi22 DEMO". Misma formula que Floreria Grecia, el precedente de cliente
   firmado. Sin subrayado (regla dura §2): el enlace se distingue por el peso y
   se anuncia al pasar el cursor */
.cierre-firma { justify-self: center; text-align: center; }
.cierre-firma a {
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s ease;
}
.cierre-firma a:hover { color: var(--acento-claro); }
/* redes como icono dibujado (Diego, 26-ago): el <a> en flex para que el svg
   no baile contra la línea base del renglón del pie */
.cierre-redes { display: flex; gap: 20px; align-items: center; }
.cierre-redes a { display: inline-flex; }
.cierre-redes a { transition: color 0.15s ease; }
.cierre-redes a:hover { color: var(--acento-claro); }

/* ---------- revelados (solo existen con .anima; sin JS todo nace visible) ---------- */

.anima .rv { opacity: 0; transform: translateY(16px); }
.anima .rv.va {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ---------- móvil ---------- */

@media (max-width: 860px) {
  .cabeza-nav { display: none; }
  .hamburguesa { display: grid; margin-left: auto; }
  /* en celular el logo vuelve a la izquierda (el centrado es gesto de escritorio) */
  .cabeza-logo { position: static; transform: none; justify-items: start; }
  /* el hero llena la pantalla tambien en celular (Diego, 15-ago) y sin flechita */
  .portada { justify-content: center; }
  .portada h1 { margin: 0; }

  /* el boton del encabezado se recorta en celular (no aprieta la barra):
     el Cotizar flotante lo cubre, y el menu hamburguesa lo trae tambien */
  .cabeza-botones { display: none; }
  .menu-botones { display: flex; margin-top: 34px; }

  /* las columnas en celular se apilan a lo ancho completo, cada una una mini
     slide corta — sigue siendo una vista breve, no un catalogo */
  .eventos { padding-top: clamp(40px, 8vw, 56px); }
  /* la pill fija de cotizar vive arriba a la derecha: el titulo no pasa por debajo */
  .eventos h2 { padding-right: 104px; }
  .columnas {
    grid-template-columns: 1fr;
    height: auto;
  }
  .columna { height: 48vw; }
  .columna figcaption { font-size: 19px; }
  /* apiladas, la division es horizontal: la viñeta gira con ellas */
  .columna::after {
    background: linear-gradient(to bottom, rgba(5, 3, 15, 0.35), transparent 9%, transparent 91%, rgba(5, 3, 15, 0.35));
  }

  .cierre-datos { grid-template-columns: 1fr; }
  .cierre-pie { grid-template-columns: 1fr; gap: 8px; }
  .cierre-pie > span:last-child { justify-self: start; }

  /* contacto en celular: los datos se apilan centrados y la banda va en columna */
  .ctc-datos { flex-direction: column; gap: 22px; }
  .ctc-banda { grid-template-columns: 1fr; }
  .ctc-mapa { min-height: 0; aspect-ratio: 4 / 3; }

  /* interiores en celular: una celda por fila, un poco mas alta que 16:9
     para que quepan rotulo, linea y boton sin encimarse */
  .paquetes { grid-template-columns: 1fr; }
  .paquete { aspect-ratio: 16 / 10; }
  .paquete::after {
    background: linear-gradient(to bottom, rgba(5, 3, 15, 0.3), transparent 8%, transparent 92%, rgba(5, 3, 15, 0.3));
  }
}

/* ---------- movimiento reducido (al final, para ganar especificidad) ---------- */

@media (prefers-reduced-motion: reduce) {
  .anima .h1-letra { opacity: 1; animation: none; }
  .anima .h1-letra-acento { color: var(--acento); animation: none; }
  .anima .rv { opacity: 1; transform: none; transition: none; }
  .casc .letra { opacity: 1; transform: none; animation: none; }
  .anima .portada h1:not(.partido), .anima .casc:not(.partido) { opacity: 1; animation: none; }
  .pills-fijas, .pill, .menu-movil { transition: none; }
  .columna img, .paquete img { transition: none; }
  /* sin movimiento el juego de esconder y desplegar no se entiende: el rotulo
     se queda en su sitio y el boton visible, como antes del 27-ago */
  .paquete:has(.paquete-ver) figcaption { padding-top: clamp(18px, 2vw, 30px); }
  .paquete .paquete-nombre { transform: none; transition: none; }
  .paquete figcaption .paquete-ver {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-top: 12px;
    transition: none;
  }
  .paquete::before, .columna::before { transition: none; }
  .visor, .visor-caja, .visor[data-cerrando], .visor[data-cerrando] .visor-caja { animation: none; }
}