/* Sigma Solutions — hoja de estilos compartida
   Ver DESIGN.md en la raíz del proyecto para las reglas nombradas que
   gobiernan este sistema (La regla del único acento, La regla sin kicker,
   The Flat Content Rule, etc.). No romperlas al agregar páginas nuevas. */

:root {
  --ink: #0A0D13;
  --panel: #12161F;
  --panel-2: #171C27;
  --line: #232A38;
  --moonlight: #C7D3E3;
  --moonlight-dim: #8493A8;
  --steel: #7C8798;
  --paper: #E9EBEF;
  --cobalt: #1E3FA0;
  --cobalt-soft: rgba(30, 63, 160, 0.18);
  --cobalt-bright: #6E93E8;
  --amethyst: #8B5CF6;
  --amethyst-bright: #A78BFA;

  --display: "Century Gothic", "Avenir Next", "Futura", "Trebuchet MS", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --body: "Iowan Old Style", "Palatino Linotype", "Palatino", Georgia, serif;
  --mono: "Cascadia Code", "SF Mono", "Consolas", "Liberation Mono", monospace;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --void: #05070D;
  --navy-deep: #080C1A;
  --violet-deep: #0E0918;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--paper);
}

html { background: var(--void); }
body { background: transparent; overflow-x: hidden; }

/* ---------- Fondo cosmico global (detras de todo) ---------- */
/* z-index 0, NUNCA negativo — con z-index negativo esta capa se pinta por
   detras del fondo de su propio contexto de apilamiento y desaparece. */
#cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(30, 63, 160, 0.20), transparent 62%),
    radial-gradient(ellipse 55% 42% at 90% 28%, rgba(123, 91, 184, 0.15), transparent 64%),
    radial-gradient(ellipse 55% 38% at 6% 74%, rgba(63, 184, 196, 0.11), transparent 66%),
    linear-gradient(175deg, var(--navy-deep) 0%, var(--void) 42%, var(--violet-deep) 74%, var(--void) 100%);
}

header, main, section, footer { position: relative; z-index: 1; }

#cosmosCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#cosmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(199, 211, 227, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 211, 227, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
}

body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
}

::selection { background: var(--cobalt-soft); color: var(--paper); }

a { color: var(--moonlight); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.wrap.wide { max-width: 62rem; }

/* ---------- Navegacion ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  border-bottom: 1px solid transparent;
  background: linear-gradient(to bottom, rgba(5, 7, 13, 0.55), transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

.nav.is-solid {
  border-bottom-color: var(--line);
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  /* La barra de nav necesita mas aire que la columna angosta de 46rem que
     usa el resto del contenido -- con ese ancho, la marca + los 4 links
     casi no dejaban espacio y "Sigma Solutions" terminaba partiendose en
     dos lineas al quedarse sin lugar. */
  max-width: 72rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moonlight);
}

.nav-brand img {
  width: 2.6rem;
  height: 2.6rem;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--mono);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--steel);
  transition: color 0.2s var(--ease);
  white-space: nowrap;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a:not(.lang-switch)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--cobalt-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--moonlight);
}

.nav-links a[aria-current="page"] {
  color: var(--cobalt-bright);
}

/* Selector de idioma ES/EN -- se distingue del resto de links del menu
   (no es "otra pagina", es un toggle) con fondo solido y un pulso de
   invitacion, igual de visible que el resto de los CTA del sitio (ej.
   .btn-video), no un link mas perdido entre los demas. */
.lang-switch {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  color: var(--paper);
  border: 1px solid rgba(199, 211, 227, 0.45);
  border-radius: 2px;
  padding: 0.4rem 0.85rem;
  text-decoration: none;
  background: linear-gradient(145deg, #2E6BD6 0%, #2564C4 38%, var(--cobalt) 100%);
  box-shadow: 0 0 0 1px rgba(5, 7, 13, 0.6), 0 6px 18px rgba(30, 63, 160, 0.35);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  animation: langInvite 2.6s ease-in-out infinite;
}

@keyframes langInvite {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(5,7,13,0.6), 0 6px 18px rgba(30,63,160,0.35); }
  50%      { transform: scale(1.07); box-shadow: 0 0 0 1px rgba(5,7,13,0.6), 0 10px 30px rgba(58,124,235,0.65); }
}

.nav-links a.lang-switch:hover, .nav-links a.lang-switch:focus-visible {
  color: var(--paper);
  animation-play-state: paused;
  transform: scale(1.07);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  color: var(--moonlight);
  border-radius: 2px;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 42rem) {
  .nav-links { display: none; gap: 1.1rem; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.5rem 1.5rem;
  }
  .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 4rem 1.5rem 3rem;
  background: var(--ink);
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 65% 55% at 50% 45%, rgba(5, 7, 13, 0.55), rgba(5, 7, 13, 0.15) 72%), rgba(5, 7, 13, 0.3);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: -1.8rem;
}


.logo-mark {
  position: relative;
  top: 2.4rem;
  width: min(42vw, 13.5rem);
  height: auto;
  margin-top: 0.3rem;
  margin-bottom: -0.3rem;
  filter: drop-shadow(0 0 26px rgba(110, 147, 232, 0.22));
}

.wordmark {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(2rem, 5.8vw, 3.7rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moonlight);
  margin: 0;
  margin-top: 0.7rem;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(5, 7, 13, 0.85), 0 0 40px rgba(5, 7, 13, 0.6);
}

.hero-subtitle {
  font-family: var(--mono);
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moonlight);
  margin: 0;
  text-shadow: 0 2px 14px rgba(5, 7, 13, 0.9), 0 0 24px rgba(5, 7, 13, 0.6);
}

.tagline {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(1.2rem, 2.8vw, 1.65rem);
  color: var(--moonlight);
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 2px 14px rgba(5, 7, 13, 0.9), 0 0 30px rgba(5, 7, 13, 0.7);
}

.tagline span { display: block; }

.page-hero {
  padding: 6.5rem 1.5rem 3.5rem;
  text-align: center;
}

/* Cuando el page-hero lleva imagen al lado (Servicios, Contacto) el texto se
   alinea a la izquierda: centrado dentro de una columna angosta chocaba con
   los botones, que por ser flex ya arrancaban pegados a la izquierda. */
.page-hero .split,
.page-hero .split-triple { text-align: left; }
.page-hero .split .page-hero-logo { margin-left: 0; }

/* El texto no se estira a los 62rem del contenedor ancho: a esa medida una
   linea centrada se vuelve incomoda de leer. */
.page-hero .lede { max-width: 42rem; margin-left: auto; margin-right: auto; }

.page-hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--moonlight);
  margin: 0 0 1rem;
  text-wrap: balance;
}

/* Para un page-hero .split con muy poco texto (un titulo corto y una linea),
   la columna de texto queda mucho mas baja que la imagen de al lado. Este
   modificador agranda el titulo para que las dos columnas pesen parecido. */
.page-hero h1.hero-title-lg {
  font-size: clamp(3.2rem, 9vw, 5.6rem);
}

/* Galeria: titulo solo (sin split al lado), pegado al nav, con el video como
   protagonista debajo. Achica el titulo y sube el hero pegandolo al menu. */
.page-hero.hero-tight-top {
  padding-top: 2rem;
}

.page-hero.hero-tight-top h1.hero-title-lg {
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
}

/* El video del hero de Galeria debe verse lo mas grande posible -- mas alto
   que el limite estandar de 58vh que usa FAQ. Selector con las 4 clases del
   panel (tech-illustration.is-wide.hero-video-snug) para ganarle en
   especificidad a la regla compartida de abajo. */
.page-hero .tech-illustration.is-wide.hero-video-snug video {
  max-height: 74vh;
}

/* Cuando el video es el protagonista del hero (FAQ): el titulo sube (menos
   padding arriba), se achica un poco y se aclara a --paper (casi blanco, en
   vez del --moonlight plateado-azul estandar) para que resalte como etiqueta
   breve, sin competirle protagonismo al video. */
.page-hero.hero-video-focus {
  padding-top: 4rem;
}

.page-hero.hero-video-focus h1 {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  color: var(--paper);
  margin-bottom: 1.5rem;
}

/* Galeria: video de fondo tipo papel tapiz, mismo tratamiento que el hero
   de Inicio (.hero/.hero-video/.hero::after) pero aplicado sobre
   .page-hero en vez de crear una seccion nueva -- asi el titulo y el video
   de "brand reveal" que ya vivian en esta seccion se quedan igual, solo se
   les suma el fondo. Reutiliza directamente .hero-video, que ya es
   position:absolute + object-fit:cover. */
.page-hero.hero-bg {
  position: relative;
  overflow: hidden;
}

.page-hero.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 65% 55% at 50% 45%, rgba(5, 7, 13, 0.55), rgba(5, 7, 13, 0.15) 72%), rgba(5, 7, 13, 0.3);
  pointer-events: none;
}

.page-hero.hero-bg > .wrap {
  position: relative;
  z-index: 2;
}

/* Disimula un logo/marca de agua en la esquina inferior derecha de un video
   de fondo, sin regenerarlo (ahorra creditos de la herramienta que lo
   genero). Mismo tono oscuro que ya usa la vineta del hero (::after),
   concentrado en esa esquina en vez de repartido por todo el video. */
.page-hero.hero-bg.mask-corner-br::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(30vw, 16rem);
  height: min(20vw, 11rem);
  background: radial-gradient(ellipse at 100% 100%, rgba(5, 7, 13, 0.92), rgba(5, 7, 13, 0.55) 55%, transparent 85%);
  pointer-events: none;
}

/* El hero con fondo de video se centra verticalmente en la pantalla, igual
   que el hero de Inicio -- por defecto .page-hero solo tiene padding fijo
   arriba, asi que el texto quedaba pegado arriba en vez de en el centro. */
.page-hero.hero-bg {
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.page-hero.hero-bg > .wrap {
  width: 100%;
}

/* FAQ: el hero no necesita llenar la pantalla como Inicio/Servicios -- hay
   contenido real (las preguntas) inmediatamente debajo, y Jonathan quiere
   que se alcancen a ver la 1ra o 2da pregunta sin scrollear al entrar. */
.page-hero.hero-bg.hero-bg-compact {
  min-height: 40vh;
  padding-top: 2.5rem;
}

/* Galeria: el hero llena la pantalla completa apenas se entra, mismo
   criterio que el hero de Inicio (svh en vez de vh para que las barras
   del navegador movil no dejen un recorte). */
.page-hero.hero-bg.hero-bg-full {
  min-height: 100svh;
}

.page-hero.hero-bg.hero-bg-full > .wrap {
  margin-top: -6rem;
}

/* Quien soy (FAQ) pidio el titulo mas abajo que el resto de las paginas
   con hero a pantalla completa -- escopeado con mask-corner-br, que hoy
   solo lleva esta pagina, para no mover Galeria/Contacto de paso. */
.page-hero.hero-bg.hero-bg-full.mask-corner-br > .wrap {
  margin-top: -3rem;
}

/* Panel semitransparente detras del texto del hero cuando hay un video de
   fondo -- sin esto, el titulo/lede dependian solo de un text-shadow, que
   no siempre alcanza contra un video con zonas claras. Dos boxes
   separados (titulo / lede) en vez de uno solo grande, y bien
   transparente -- lo suficiente para leer comodo sin tapar el video. */
.hero-text-panel {
  background: rgba(5, 7, 13, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 2px;
  padding: 1.4rem 2.5rem;
  max-width: 42rem;
  margin: 0 auto 0.6rem;
}

.hero-text-panel-title {
  width: fit-content;
  padding: 1rem 2.5rem;
}

/* FAQ: el hero ya es muy oscuro de por si (el video de fondo tiene una
   vineta fuerte), asi que el panel semitransparente detras del texto sobra
   -- se saca fondo/blur/padding, el h1 y el lede se quedan con su tamano y
   text-shadow de siempre (ambos viven en selectores .hero-text-panel ...,
   que siguen aplicando aunque el fondo del panel se apague). */
.hero-text-panel.is-plain {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

.hero-text-panel h1 {
  font-size: clamp(2.4rem, 6.5vw, 3.8rem);
  text-shadow: 0 2px 16px rgba(5, 7, 13, 0.85);
  margin: 0;
}

/* Contacto: el h1 dentro de un .hero-text-panel que ademas vive en un
   .split (imagen al lado, no a lo ancho del hero completo) se veia
   dominante contra la imagen -- mismo tamano base que .page-hero h1 en
   vez del tamano pensado para un panel a lo ancho del hero. */
.page-hero .split .hero-text-panel h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.hero-text-panel .lede {
  font-size: 1.25rem;
  line-height: 1.6;
  text-shadow: 0 2px 12px rgba(5, 7, 13, 0.85);
}

/* FAQ pidio la letra del cuerpo un par de tonos mas grande que el estandar
   compartido con Servicios -- escopeado con su propia clase para no
   agrandar tambien la de Servicios, que no lo pidio. */
.hero-text-panel .lede.lede-lg {
  font-size: 1.45rem;
}

/* Servicios y Galeria: el cuerpo de texto fuera del hero pidio letra mas
   grande -- escopeado a esta clase para no tocar el ".lede" compartido
   con el resto del sitio. */
.lede.is-body-lg {
  font-size: 1.35rem;
}

/* Quien soy: firma al cierre, en un tipo de letra cursiva distinto al resto
   del sitio (que es todo geometrico/serif/mono) -- fuentes de sistema, sin
   cargar ninguna externa, mismo criterio que el resto de la tipografia. */
.signature {
  font-family: "Monotype Corsiva", "Segoe Script", "Kunstler Script", "Bradley Hand", "Brush Script MT", "Lucida Handwriting", cursive;
  font-size: 1.55rem;
  color: var(--paper);
  margin: 1.4rem 0 0;
  text-align: right;
  text-shadow: 0 2px 12px rgba(5, 7, 13, 0.85);
}

/* ---------- Sections ---------- */

section.block {
  padding: 3.5rem 0;
  border-top: 1px solid var(--line);
  /* Para cuando un link salta directo a esta seccion (ej. "Ver todos los
     servicios y precios" -> servicios.html#precios): sin esto, el nav fijo
     tapa el titulo de la seccion apenas llega el salto. */
  scroll-margin-top: 5rem;
}

h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: 0.05em;
  color: var(--moonlight);
  margin: 0 0 1.4rem;
  text-wrap: balance;
}

/* Titulo largo (una pregunta completa) al lado de una imagen mas chica —
   un pelito mas pequeno que el h2 estandar, para que no pese tanto visualmente. */
h2.h2-tight {
  font-size: clamp(1.35rem, 2.9vw, 1.85rem);
}

/* Para titulos todavia mas largos (varias frases cortas) que con h2-tight
   seguian pesando ~60% del espacio frente a la imagen — reduccion mayor,
   pensada especificamente para "Sitios web. Imagenes..." en Inicio. */
h2.h2-compact {
  font-size: clamp(1.1rem, 2.3vw, 1.5rem);
}

section.block > .wrap > p {
  max-width: 42rem;
}

p { color: var(--paper); }
p + p { margin-top: 1.1rem; }

.lede {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--paper);
}

/* ---------- Grids (precios / cualquier listado comparable) ---------- */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 1.25rem;
}

.swatch {
  background: var(--panel);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* align-items:start se saco a proposito -- con "Ver mas" abriendo tarjetas
   a distinta altura dentro de la misma fila, dejaba ver el fondo del grid
   como una franja sin llenar debajo de las tarjetas mas cortas. El grid
   por defecto (stretch) empareja el alto de toda la fila, sin gaps. */
.swatches.price-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.swatches.faq-list { grid-template-columns: 1fr; }

.swatches.diagnostico-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* Servicios: las cajas del diagnostico (Visibilidad, Primera impresion, etc.)
   quedaban con mucho espacio vacio contra su propio tamano de caja. Sube
   pregunta, nota y respuesta expandida sin tocar el resto de usos de .swatch
   (tarjetas de precio, FAQ). */
.diagnostico-grid .price-name { font-size: 1.35rem; font-weight: 700; }
.diagnostico-grid .price-note { font-size: 1rem; }
.diagnostico-grid .price-detail p,
.diagnostico-grid .price-detail li { font-size: 0.95rem; }

.price-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--paper);
}

.price-value {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--cobalt-bright);
}

.price-note {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--steel);
  line-height: 1.55;
}

.price-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--cobalt-bright);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
}

.price-toggle:hover, .price-toggle:focus-visible { color: var(--moonlight); }

.price-toggle .chev {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.swatch.is-open .price-toggle .chev { transform: rotate(180deg); }

.price-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s var(--ease), opacity 0.25s var(--ease);
}

.swatch.is-open .price-detail {
  grid-template-rows: 1fr;
  opacity: 1;
}

.price-detail-inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.price-detail p, .price-detail li {
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--steel);
  line-height: 1.6;
}

.price-detail ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.price-detail li + li { margin-top: 0.3rem; }

/* FAQ: preguntas y respuestas un poco mas grandes que el resto de usos de
   .swatch (tarjetas de precio, diagnostico), y la respuesta en plateado
   (--moonlight) en vez de --steel, que hacia poco contraste contra el panel.
   Las preguntas se dejan en su color blanco de siempre (--paper). */
.faq-list .price-name { font-size: 1.3rem; }

.faq-list .price-detail p,
.faq-list .price-detail li { font-size: 1.05rem; color: var(--moonlight); }

/* ---------- Proceso ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.steps li {
  counter-increment: step;
  background: var(--panel);
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
}

.steps li::before {
  content: counter(step);
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--cobalt-bright);
}

/* ---------- Graficos tecnicos (apoyo visual del texto) ---------- */

.split {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 48rem) {
  .split { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; }
}

/* Para un split de dos piezas visuales (imagen + video), sin texto que
   justifique el 1.1fr habitual -- exactamente 50/50. */
@media (min-width: 48rem) {
  .split.split-even { grid-template-columns: 1fr 1fr; }
}

/* Emparedado imagen-texto-imagen (Contacto): dos ilustraciones enmarcando el
   texto y los botones al centro. Se apila en una columna hasta que hay
   espacio real para tres. */
.split-triple {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .split-triple { grid-template-columns: 0.85fr 1.3fr 0.85fr; gap: 2rem; }
}

.split-triple .tech-panel { margin: 0; max-width: none; }

/* Contacto: el h1 "Hablemos" un poco mas grande que el h1 estandar de
   page-hero, alineado a la izquierda como el resto del texto de la columna. */
.page-hero .split h1.hero-title-md { font-size: clamp(2.3rem, 6vw, 3.5rem); }

/* Galeria: el texto de "landing page premium" quedaba chico contra la
   miniatura grande del catalogo de Blueevents al lado. Agranda titulo y
   parrafo un poco, sin tocar el h2/.lede estandar del resto del sitio. */
.landing-copy h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.landing-copy p.lede { font-size: 1.25rem; line-height: 1.6; }

/* Cuando las dos columnas del split son recuadros con borde (por ejemplo la
   lista de pasos y un panel con video), el ojo compara los recuadros entre si,
   no las columnas. Por eso el titulo de esa seccion va FUERA del split, a lo
   ancho: si queda adentro empuja el recuadro de texto hacia abajo y los dos
   bordes se ven desfasados. Y aca se le quita el margen superior a la lista,
   que existe para separarla de un h2 que ya no esta arriba de ella. */
.split .steps { margin-top: 0; }

/* Cuando el texto de una columna (titulo + parrafo + botones) pesa
   visualmente mas que la imagen de al lado, se achica un poco el cuerpo del
   texto para que las dos columnas queden mas parejas — el titulo se deja
   igual que el resto del sitio, solo se ajusta el parrafo y el espaciado. */
.balance-copy p { font-size: 0.93rem; line-height: 1.65; }
.balance-copy .contact-actions { margin-top: 1.4rem; }

/* Variante mas chica, para cuando .balance-copy ya no alcanza (pedido
   puntual en el hero de Galeria, no toca el resto de usos de .balance-copy). */
.balance-copy.is-tighter p { font-size: 0.84rem; line-height: 1.6; }

/* Acerca el panel de video del hero de Galeria al bloque de texto+imagen que
   sigue debajo — el margen inferior por defecto de .tech-panel (1.75rem) dejaba
   el texto mas separado de lo que se pidio. */
.hero-video-snug { margin-bottom: 0.5rem; }

/* Para cuando dos recuadros con borde (una lista y un panel de imagen/video)
   deben leerse como del mismo tamano: las columnas se estiran a la misma
   altura entre si (en vez de centrarse) y la imagen/video llena ese alto
   completo recortando por los bordes, igual que ya hacen los cicladores. */
.split-stretch { align-items: stretch; }

.split-stretch .tech-illustration {
  display: flex;
}

.split-stretch .tech-illustration img,
.split-stretch .tech-illustration video {
  height: 100%;
  object-fit: cover;
}

.split .tech-panel {
  margin: 0;
  max-width: none;
}

.tech-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.75rem;
  margin: 1.75rem auto;
}

.tech-panel svg {
  width: 100%;
  height: auto;
  display: block;
}

.tech-illustration { max-width: 30rem; }

/* Para imagenes cuadradas usadas junto a un bloque de texto corto (ej.
   "Tienes dudas?" en Servicios) -- a 30rem de ancho, una imagen 1:1 sale
   mucho mas alta que el texto de al lado y le roba todo el protagonismo. */
.tech-illustration.is-compact-sq { max-width: 16rem; }

/* A lo ancho del contenedor, para cuando la pieza es el elemento principal de
   la seccion y no un acompanamiento del texto de al lado. */
.tech-illustration.is-wide { max-width: none; }

/* El video de FAQ debe entrar completo en la pantalla apenas se abre la
   pagina, sin que nadie tenga que scrollear para verlo entero. Se limita
   por alto de viewport en vez de por ancho del contenedor — si no, en un
   contenedor de 62rem el video se estira de mas y se corta por abajo en
   pantallas mas bajas. */
.page-hero .tech-illustration.is-wide video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 58vh;
  margin: 0 auto;
}

.tech-illustration {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tech-illustration img,
.tech-illustration video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
}

/* Ciclador de imagenes: dos o tres fotos que se van revelando una encima de
   otra al hacer clic. El contador de la esquina existe porque sin el nadie se
   entera de que hay una segunda imagen — es la misma senal que dan los
   puntitos del carrusel, en version chica. */
.image-cycler {
  cursor: pointer;
  aspect-ratio: 1408 / 768;
  transition: border-color 0.25s var(--ease);
}

.image-cycler:hover, .image-cycler:focus-visible {
  border-color: var(--cobalt-bright);
}

.image-cycler:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
}

.image-cycler::after {
  content: attr(data-count);
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--moonlight);
  background: rgba(5, 7, 13, 0.74);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.2rem 0.45rem;
  pointer-events: none;
}

.image-cycler img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  /* Lenta y con curva suave a proposito: la transicion corre sola cada 5 s
     al lado de un bloque de texto, y no debe robarle la atencion a quien
     esta leyendo. */
  transition: opacity 1.6s ease-in-out;
}

/* Cuando las imagenes del ciclador no comparten todas la misma relacion de
   aspecto que el recuadro, "cover" recorta -- "contain" muestra la imagen
   completa siempre (con una franja del fondo del panel a los lados o
   arriba/abajo si hace falta), sin perder nada de ninguna de las tres. */
.image-cycler.is-contain img {
  object-fit: contain;
  background: var(--ink);
}

/* Para cicladores donde la mayoria de las fotos son cuadradas (1:1) -- en vez
   de "contain" (que las deja chicas, con franjas a los lados dentro del
   recuadro ancho por defecto), el recuadro mismo pasa a 1:1. Las cuadradas
   llenan todo el espacio sin recortarse; la que no sea cuadrada se recorta
   con "cover" (heredado), que es el trade-off que se elige a proposito. */
.image-cycler.is-square {
  aspect-ratio: 1 / 1;
}

.image-cycler img.is-active {
  opacity: 1;
  z-index: 2;
}

/* La imagen que sale se queda revelada por debajo hasta que la entrante
   termina de taparla. Sin esto, las dos se animan a la vez y entre ambas se
   alcanza a ver el fondo del panel. */
.image-cycler img.is-under {
  opacity: 1;
  z-index: 1;
}

/* Un frame sin transicion, para poner la imagen entrante en su estado inicial
   sin que el navegador lo anime. */
.image-cycler img.is-entering {
  transition: none;
}

/* Variante de barrido: la siguiente imagen entra tapando a la anterior de izquierda a derecha */
.image-cycler-wipe img {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s ease-in-out;
}

.image-cycler-wipe img.is-active,
.image-cycler-wipe img.is-under {
  clip-path: inset(0 0 0 0);
}

/* Variante de iris: la siguiente imagen se revela desde un circulo que crece
   desde el centro. El radio va en porcentaje a proposito: circle() NO acepta
   farthest-corner (eso pertenece a radial-gradient), y ante un valor invalido
   el navegador descarta la regla entera — ese era el motivo de que esta
   seccion no mostrara ninguna de las dos imagenes. */
.image-cycler-iris img {
  opacity: 1;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.6s ease-in-out;
}

.image-cycler-iris img.is-active,
.image-cycler-iris img.is-under {
  clip-path: circle(78% at 50% 50%);
}

/* Biblioteca de hovers para las ilustraciones. La regla es que dos imagenes
   visibles en la misma pagina nunca repitan mecanismo — por eso hay varios.
   En uso hoy: bloom (prisma en Servicios) y scan (faro en Inicio, hablemos en
   Contacto). Surge y tilt quedan disponibles para la proxima imagen. */

/* Soluciones: zoom simetrico + brillo, como si las formas "despertaran" */
.tech-hover-bloom:hover img {
  transform: scale(1.045);
  filter: brightness(1.1) saturate(1.1);
}

/* Ejecucion: mismo zoom simetrico + un barrido de luz diagonal, como si la senal cruzara el circuito */
.tech-hover-surge:hover img {
  transform: scale(1.045);
  filter: brightness(1.1) saturate(1.1);
}

.tech-hover-surge::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 30%;
  height: 220%;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: rotate(18deg) translateX(0);
  transition: transform 0.9s var(--ease);
  pointer-events: none;
}

.tech-hover-surge:hover::after {
  transform: rotate(18deg) translateX(420%);
}

/* Hablemos: linea de escaneo horizontal que recorre la imagen, como una senal siendo leida */
.tech-hover-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: -4%;
  background: linear-gradient(90deg, transparent, var(--cobalt-bright), transparent);
  box-shadow: 0 0 14px 2px rgba(110, 147, 232, 0.75);
  opacity: 0;
  transition: top 1.1s var(--ease), opacity 0.25s var(--ease);
  z-index: 2;
  pointer-events: none;
}

.tech-hover-scan:hover::after {
  top: 100%;
  opacity: 1;
}

/* Proceso: leve inclinacion 3D, como si la imagen respondiera al cursor */
.tech-hover-tilt img {
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}

.tech-hover-tilt:hover img {
  transform: perspective(800px) rotateX(2.5deg) rotateY(-3deg) scale(1.02);
  filter: brightness(1.08);
}

/* ---------- Botones / CTA ---------- */

.btn {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn-primary {
  background: var(--cobalt);
  color: var(--paper);
  border: 1px solid var(--cobalt);
}

.btn-primary:hover, .btn-primary:focus-visible {
  background: transparent;
  color: var(--moonlight);
  border-color: var(--moonlight);
}

.btn-ghost {
  background: transparent;
  color: var(--moonlight);
  border: 1px solid var(--line);
}

.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: var(--moonlight);
}

/* Boton "siguiente pagina": cierra cada página invitando a la próxima del
   circuito (Inicio -> Servicios -> Galería -> Contacto -> Inicio, FAQ ->
   Contacto). Plateado en vez de transparente para que no se pierda contra
   el fondo, con un pulso deliberadamente MAS SUAVE y lento que el del
   video del hero (ese es el CTA principal; este es una invitación de
   cierre, no debe competirle protagonismo). */
.btn-next {
  background: linear-gradient(145deg, var(--paper) 0%, var(--moonlight) 55%, var(--steel) 100%);
  color: var(--ink);
  font-weight: 600;
  border: 1px solid rgba(233, 235, 239, 0.5);
  box-shadow: 0 4px 16px rgba(199, 211, 227, 0.18);
  animation: btnNextPulse 2.4s ease-in-out infinite;
}

@keyframes btnNextPulse {
  0%, 100%  { transform: scale(1);     box-shadow: 0 4px 16px rgba(199, 211, 227, 0.18); }
  50%       { transform: scale(1.08);  box-shadow: 0 8px 34px rgba(199, 211, 227, 0.7); }
}

.btn-next:hover, .btn-next:focus-visible {
  animation: none;
  background: var(--ink);
  color: var(--moonlight);
  border-color: var(--moonlight);
  box-shadow: none;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

/* ---------- Video: boton y modal ---------- */

.video-cta {
  display: flex;
  justify-content: center;
  margin-top: 0.35rem;
}

.btn-video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--display);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.8rem 1.9rem;
  border-radius: 3px;
  cursor: pointer;
  color: var(--paper);
  border: 1px solid rgba(199, 211, 227, 0.45);
  background: linear-gradient(145deg, #2E6BD6 0%, #2564C4 38%, var(--cobalt) 100%);
  box-shadow:
    0 0 0 1px rgba(5, 7, 13, 0.6),
    0 10px 30px rgba(30, 63, 160, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  animation: btnPulse 2.1s ease-in-out infinite;
}

@keyframes btnPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(5,7,13,0.6), 0 10px 30px rgba(30,63,160,0.38), inset 0 1px 0 rgba(255,255,255,0.22); }
  50%      { transform: scale(1.065); box-shadow: 0 0 0 1px rgba(5,7,13,0.6), 0 18px 60px rgba(58,124,235,0.8), inset 0 1px 0 rgba(255,255,255,0.32); }
}

.btn-video::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 45%;
  height: 220%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: rotate(18deg) translateX(0);
  animation: btnSweep 3.2s ease-in-out infinite;
}

@keyframes btnSweep {
  0%, 15%  { transform: rotate(18deg) translateX(0); }
  55%, 100% { transform: rotate(18deg) translateX(420%); }
}

.btn-video:hover, .btn-video:focus-visible {
  animation: none;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(5, 7, 13, 0.6),
    0 14px 40px rgba(30, 63, 160, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-video:hover::after, .btn-video:focus-visible::after {
  animation: none;
  transform: rotate(18deg) translateX(420%);
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(3, 5, 10, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.video-modal[open] { display: flex; }

.video-modal-inner {
  position: relative;
  width: min(92vw, 62rem);
}

.video-modal video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  border: 1px solid rgba(199, 211, 227, 0.22);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  background: #000;
}

.video-close {
  position: absolute;
  top: -3rem;
  right: 0;
  background: transparent;
  border: 1px solid rgba(199, 211, 227, 0.35);
  color: var(--moonlight);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  padding: 0.55rem 0.85rem;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.video-close:hover, .video-close:focus-visible {
  border-color: var(--moonlight);
  color: var(--paper);
}

.video-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.9rem;
  pointer-events: none;
}

.video-spinner .ring {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(199, 211, 227, 0.22);
  border-top-color: var(--cobalt-bright);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.video-spinner .label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moonlight-dim);
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .video-spinner .ring { display: none; }
}

/* ---------- Pieza de audio (podcast, muestras de contenido) ---------- */

.audio-piece, .media-piece {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.5rem;
  margin-top: 2rem;
}

/* Las piezas consecutivas se pegan con una linea de 1px, como las celdas de
   las grillas. Estan las cuatro combinaciones a proposito: el orden de audio
   y video en Galeria cambia seguido. */
.audio-piece + .audio-piece,
.audio-piece + .media-piece,
.media-piece + .audio-piece,
.media-piece + .media-piece {
  margin-top: 1px;
}

.audio-piece .audio-label, .media-piece .audio-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--moonlight-dim);
  margin-bottom: 0.9rem;
}

.audio-piece audio {
  width: 100%;
  accent-color: var(--cobalt);
}

/* Imagen opcional arriba del reproductor -- a pantalla completa fuera de
   la grilla (hoy solo el Podcast, que cierra todos los audios); dentro de
   .media-grid queda achicada por la regla de mas abajo. */
.audio-piece img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.9rem;
  border: 1px solid var(--line);
}

.media-piece video, .media-piece img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}

/* Cuando el poster y el video real tienen proporciones distintas (ej. un
   poster vertical recortado para un fondo de hero, con un video horizontal
   de verdad detras), el reproductor cambia de forma de golpe al darle play
   -- se fija la proporcion real del video y se recorta el poster para
   llenarla, asi el cuadro nunca salta. */
.media-piece video.is-16-9 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Grilla de piezas chicas (Galeria: videos/imagenes secundarios,
   2 por pantalla en vez de una larga fila) ---------- */

.media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 2rem;
}
@media (min-width: 40rem) {
  .media-grid { grid-template-columns: 1fr 1fr; }
}
.media-grid .media-piece, .media-grid .audio-piece { margin-top: 0; padding: 1.1rem; }
.media-grid .media-piece .audio-label, .media-grid .audio-piece .audio-label { font-size: 0.72rem; margin-bottom: 0.6rem; }
.media-grid .media-piece p:not(.audio-label), .media-grid .audio-piece p:not(.audio-label) { font-size: 0.85rem; line-height: 1.5; }
.media-grid .audio-piece img { max-width: 9rem; margin-left: auto; margin-right: auto; }

/* ---------- Grilla de referencias (imagenes de otros creadores) ---------- */

.ref-group + .ref-group { margin-top: 2.5rem; }

.ref-group h3 {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moonlight-dim);
  margin: 0 0 0.9rem;
}

.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.ref-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--panel);
  filter: brightness(1) saturate(1);
  transition: filter 0.3s var(--ease);
}

.ref-grid img:hover {
  filter: brightness(1.08) saturate(1.05);
}

/* Certificados en Quien soy: son horizontales (tipo diploma), no
   retratos como las referencias de Galeria -- aspect-ratio propio. Los 2
   mas recientes van destacados arriba en un .split 50/50; estos 4 abajo
   quedan en 2 columnas parejas (2x2), no 3 -- con solo 4 items, 3
   columnas dejaba una fila coja de 3+1. */
.ref-grid.is-landscape {
  grid-template-columns: repeat(2, 1fr);
}

.ref-grid.is-landscape img {
  aspect-ratio: 4 / 3;
}

@media (max-width: 40rem) {
  .ref-grid.is-landscape {
    grid-template-columns: 1fr;
  }
}

/* ---------- Carrusel de imagenes (muestras de contenido) ---------- */

.carousel {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.5rem;
  margin-top: 2rem;
}

.carousel-viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}

/* Para carruseles cuyas imagenes son 16:9 en vez del 4:3 por defecto. */
.carousel-viewport.is-wide { aspect-ratio: 16 / 9; }

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Fundido, no deslizamiento: un slide que siempre se mueve en la misma
   direccion (como una cinta transportadora) se siente mecanico. El fundido
   no tiene direccion, asi que no repite ese patron — mismo mecanismo que ya
   usa el ciclador de imagenes por defecto (ver .image-cycler mas abajo).
   Se le suma un zoom lento tipo "Ken Burns": la imagen entra ligeramente
   ampliada y se asienta a su tamano real mientras aparece — mas elegante
   que un fundido plano, sin volver a introducir una direccion fija. */
.carousel-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transform: scale(1.045);
  transition: opacity 1.1s ease-in-out, transform 1.6s ease-in-out;
}

.carousel-track img.is-active { opacity: 1; z-index: 2; transform: scale(1); }

/* La imagen saliente se queda revelada por debajo hasta que la entrante
   termina de taparla, para que no se vea el fondo del panel entre las dos. */
.carousel-track img.is-under { opacity: 1; z-index: 1; }

/* Frame sin transicion, para ubicar la imagen entrante en su estado inicial
   sin que el navegador lo anime. */
.carousel-track img.is-entering { transition: none; }

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.carousel-arrow {
  background: none;
  border: 1px solid var(--line);
  color: var(--moonlight);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.carousel-arrow:hover, .carousel-arrow:focus-visible {
  border-color: var(--cobalt-bright);
  color: var(--cobalt-bright);
}

.carousel-dots {
  display: flex;
  gap: 0.55rem;
}

.carousel-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  border: 1px solid var(--steel);
  background: none;
  padding: 0;
  cursor: pointer;
}

.carousel-dot.is-active {
  background: var(--cobalt-bright);
  border-color: var(--cobalt-bright);
}

/* ---------- Boton flotante de WhatsApp ---------- */

.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--paper);
  background: var(--amethyst);
  border: 1px solid var(--amethyst);
  border-radius: 2px;
  padding: 0.7rem 1rem;
  box-shadow: 0 8px 22px rgba(5, 7, 13, 0.55);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

/* Sin pulso a proposito: el boton de video del hero ya late, y dos elementos
   pulsando sobre el fondo animado era exceso de movimiento (ver DESIGN.md,
   "restrained cosmic motion"). Este se queda quieto y gana por posicion fija. */

.whatsapp-float:hover, .whatsapp-float:focus-visible {
  background: var(--ink);
  color: var(--moonlight);
  border-color: var(--moonlight);
}

.whatsapp-float svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---------- Boton de musica de ambiente ---------- */
/* Apagada por defecto en la mayoria de las paginas (Galeria es la unica
   excepcion, ver ambient-music.js) -- el boton siempre queda a mano para
   prender o silenciar. Mismo tratamiento visual que .whatsapp-float, pero
   al lado opuesto de la pantalla para no competir con el, y con un pulso
   muy sutil MIENTRAS ESTA APAGADO (invita al clic sin gritar) que se
   apaga solo apenas empieza a sonar. */

.music-float {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.3rem;
  height: 3.3rem;
  color: var(--moonlight);
  background: rgba(5, 7, 13, 0.72);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 8px 22px rgba(5, 7, 13, 0.55);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  animation: musicInvite 2.6s ease-in-out infinite;
}

/* Pulso mas presente: escala + anillo de luz, igual de visible que el
   resto de los CTA con pulso del sitio (ej. .btn-video, .lang-switch). */
@keyframes musicInvite {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(5, 7, 13, 0.55); }
  50% { transform: scale(1.1); box-shadow: 0 8px 22px rgba(5, 7, 13, 0.55), 0 0 0 8px rgba(139, 92, 246, 0.2); }
}

/* Sonando: pulso mas presente que la invitacion de apagado -- "aca estoy",
   con el resplandor amatista que ya tiene de fondo en vez del anillo
   sutil que usa cuando esta apagado. */
@keyframes musicPlaying {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(5, 7, 13, 0.55), 0 0 0 0 rgba(139, 92, 246, 0.5); }
  50% { transform: scale(1.1); box-shadow: 0 8px 22px rgba(5, 7, 13, 0.55), 0 0 0 9px rgba(139, 92, 246, 0); }
}

.music-float:hover, .music-float:focus-visible {
  border-color: var(--amethyst);
  color: var(--amethyst-bright);
}

.music-float.is-playing {
  background: var(--amethyst);
  border-color: var(--amethyst);
  color: var(--paper);
  animation: musicPlaying 2.2s ease-in-out infinite;
}

.music-float svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }

/* ---------- Logo en encabezados de pagina secundaria ---------- */

.page-hero-logo {
  width: min(18vw, 5rem);
  height: auto;
  margin: 0 auto 1.2rem;
  display: block;
  filter: drop-shadow(0 0 24px rgba(110, 147, 232, 0.24));
}

/* ---------- Footer ---------- */

footer {
  padding: 3rem 0 5rem;
  text-align: center;
  border-top: 1px solid var(--line);
}

footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.footer-logo {
  width: 3.6rem;
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 0 16px rgba(110, 147, 232, 0.2));
}

footer p {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0;
}

footer .footer-links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

footer .footer-links a {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--moonlight-dim);
  text-decoration: none;
}

footer .footer-links a:hover { color: var(--moonlight); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}