@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ==========================================================================
   VERSE FX — Hoja de estilos del sitio principal

   COMO EDITAR ESTE ARCHIVO
   Todo el sistema de diseno vive en los tokens de :root, aca abajo. Para
   cambiar un color de marca o una tipografia en todo el sitio se cambia el
   token una vez y se propaga solo. No hay que buscar y reemplazar.

   El archivo esta dividido en secciones con titulos en mayusculas. El orden
   sigue el orden de la pagina, asi que si estas tocando la seccion de
   Servicios, sus estilos estan a la misma altura relativa.

   El micrositio de Costa Rica tiene su propia hoja en
   costa-rica/css/microsite.css, con los mismos tokens. Si cambias un color de
   marca aca, cambialo tambien alla.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS — el sistema de diseno completo
   ========================================================================== */

:root {
  /* --- Superficies, de la mas oscura a la mas clara --- */
  --bg:            #080808;   /* fondo de la pagina */
  --panel:         #0A0A0A;   /* tarjetas, marcos de monitor */
  --panel-hi:      #0E0E0E;   /* tarjeta al pasar el mouse */
  --panel-input:   #0D0D0D;   /* fondo de los desplegables */
  --border:        #1A1A1A;   /* filetes y divisores */
  --border-soft:   #161616;   /* filetes internos, mas tenues */
  --border-field:  #1E1E1E;   /* borde de los campos de formulario */
  --hairline:      #141414;   /* separacion entre celdas de una rejilla */

  /* --- Azul de marca --- */
  --accent:        #0268C4;
  --accent-hi:     #1A82E8;   /* al pasar el mouse */
  --accent-06:     rgba(2, 104, 196, 0.06);
  --accent-08:     rgba(2, 104, 196, 0.08);
  --accent-12:     rgba(2, 104, 196, 0.12);  /* marcas de agua */
  --accent-25:     rgba(2, 104, 196, 0.25);
  --accent-35:     rgba(2, 104, 196, 0.35);
  --accent-40:     rgba(2, 104, 196, 0.40);
  --accent-55:     rgba(2, 104, 196, 0.55);
  --accent-70:     rgba(2, 104, 196, 0.70);

  /* --- Texto, de mas a menos presente --- */
  --text:          #E8E0D0;   /* cuerpo principal */
  --text-2:        #B0A898;
  --text-3:        #A09890;   /* parrafos secundarios */
  --text-4:        #7A7268;   /* descripciones */
  --text-5:        #555555;   /* etiquetas en reposo */
  --text-6:        #3A3A3A;
  --text-7:        #2A2A2A;
  --text-8:        #222222;   /* pie de pagina, barras de monitor */

  /* --- Tipografias --- */
  --font-display:  'Antonio', sans-serif;      /* titulares, todo en mayusculas */
  --font-body:     'Barlow', sans-serif;       /* cuerpo de texto, peso 300 */
  --font-mono:     'JetBrains Mono', monospace; /* datos de HUD, etiquetas */

  /* --- Medidas --- */
  --wrap:          80rem;    /* ancho maximo del contenido */
  --wrap-narrow:   72rem;    /* sección de contacto */
  --pad-x:         1.5rem;   /* respiracion lateral, crece en los breakpoints */
  --nav-h:         3.5rem;   /* alto de la barra de navegacion */
  --letterbox:     6.5vh;    /* alto de las barras anamorficas del hero */
}

@media (min-width: 48rem) { :root { --pad-x: 4rem; } }
@media (min-width: 64rem) { :root { --pad-x: 7rem; } }

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3 { margin: 0; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(2, 104, 196, 0.19); color: var(--accent); }

/* Barra de desplazamiento oculta, la pagina sigue desplazandose */
::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

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

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

/* ==========================================================================
   3. PRIMITIVAS COMPARTIDAS
   Piezas que se repiten en varias secciones.
   ========================================================================== */

/* --- Grano de pelicula sobre toda la pagina --- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.028;
  background-size: 300px 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Corchetes de visor: cuatro esquinas en L ---
   Se usa asi, dentro de cualquier caja con position: relative:
     <span class="reticle" style="--reticle: 18px" aria-hidden="true"><i></i></span>
   El tamano y la opacidad se ajustan con las dos variables. */
.reticle { position: absolute; inset: 0; pointer-events: none; }

.reticle::before,
.reticle::after,
.reticle > i::before,
.reticle > i::after {
  content: '';
  position: absolute;
  width: var(--reticle, 18px);
  height: var(--reticle, 18px);
  opacity: var(--reticle-opacity, 0.35);
}
.reticle::before { top: 0; left: 0;  border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.reticle::after  { top: 0; right: 0; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.reticle > i     { position: absolute; inset: 0; }
.reticle > i::before { bottom: 0; left: 0;  border-bottom: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.reticle > i::after  { bottom: 0; right: 0; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }

/* --- Punto rojo de grabacion --- */
@keyframes blink-rec { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.rec-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: blink-rec 1.2s step-start infinite;
}

/* --- Datos de HUD en mono --- */
.mono {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* --- Contenedor de seccion --- */
.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 6rem var(--pad-x);
}

/* --- Cejilla de seccion: "▸ NOMBRE" con el divisor al lado --- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}
.eyebrow span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.eyebrow--rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* --- Titulares --- */
.h-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 1.05;
  color: #fff;
}
.h-section--lg { font-size: clamp(2.25rem, 6vw, 4.5rem); }

/* --- Parrafos --- */
.lede { font-size: 1rem; line-height: 1.7; color: var(--text-3); }
.lede + .lede { margin-top: 1.5rem; }
.copy { font-size: 0.875rem; line-height: 1.7; color: var(--text-5); }
.copy--dim { color: var(--text-4); }

/* --- Marca de agua numerica --- */
.watermark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.75rem;
  line-height: 1;
  color: var(--accent-12);
}

/* --- Botones --- */
.btn {
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
}
.btn--solid {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  padding: 0.875rem 2rem;
  background: var(--accent);
  color: var(--bg);
  border: 0;
}
.btn--solid:hover { background: var(--accent-hi); }

.btn--ghost {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  padding: 0.875rem 2rem;
  border: 1px solid var(--accent-40);
  color: var(--accent);
}
.btn--ghost:hover { border-color: var(--accent-70); background: var(--accent-06); }

.btn--mono {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--accent-35);
  color: var(--accent);
}
.btn--mono:hover { border-color: var(--accent-70); background: var(--accent-06); }

/* --- Marco de monitor: barra superior, cuerpo, barra inferior --- */
.monitor {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top-color: var(--accent-25);
}
.monitor__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-mono);
}
.monitor__bar--top {
  background: var(--panel-hi);
  border-bottom: 1px solid var(--border-soft);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.monitor__bar--bottom {
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  font-size: 8px;
  letter-spacing: 0.15em;
  color: var(--text-8);
}
.monitor__meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.monitor__tc { font-size: 8px; letter-spacing: 0.15em; color: var(--text-7); }

/* ==========================================================================
   4. BARRA DE NAVEGACION
   ========================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  background: rgba(8, 8, 8, 0.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.3s;
}
/* js/main.js agrega esta clase al desplazar mas de 40px */
.nav.is-scrolled { background: rgba(8, 8, 8, 0.95); }

.nav__logo svg { height: 26px; width: auto; }

.nav__links { display: none; gap: 2rem; }
@media (min-width: 48rem) { .nav__links { display: flex; } }

.nav__links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-5);
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--accent); }

.nav__rec { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.nav__rec-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.nav__tc {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-6);
  margin-left: 0.5rem;
}
@media (max-width: 40rem) { .nav__tc { display: none; } }

/* Boton de cambio de idioma. Mismo tratamiento que en el micrositio de Costa
   Rica: un recuadro fino que se tinte de azul al pasar el mouse. A diferencia
   del timecode, no se oculta en pantallas chicas: es navegacion, no adorno.

   OJO CON EL COLOR. El micrositio usa --text-4, pero esa variable no vale lo
   mismo en las dos hojas: alla es el gris #555555 y aca es el beige #7A7268.
   El gris equivalente en esta hoja es --text-5, que ademas es el que usan los
   enlaces del menu de al lado. Copiar la regla del micrositio tal cual pinta
   el boton de beige y lo despega del resto de la barra.

   El margen de 0.25rem se suma al gap de 0.5rem de .nav__rec para dar la misma
   separacion de 0.75rem que tiene .topbar__meta en el micrositio. */
.nav__lang {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-5);
  border: 1px solid var(--border);
  padding: 4px 8px;
  margin-right: 0.25rem;
  transition: color 0.2s, border-color 0.2s;
}
.nav__lang:hover { color: var(--accent); border-color: var(--accent-35); }

/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 37.5rem;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Velo del hero. La foto es oscura de origen, asi que estos valores son
   suaves; el ultimo tramo del gradiente carga fuerte para fundir con la
   seccion siguiente. Si cambias la foto por una mas clara, subi los tres. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(8, 8, 8, 0.30) 0%,
      rgba(8, 8, 8, 0.22) 45%,
      rgba(8, 8, 8, 0.88) 100%),
    rgba(8, 8, 8, 0.08);
}

/* Barras anamorficas: el contenido vive dentro del recorte */
.hero__bar {
  position: absolute;
  left: 0; right: 0;
  height: var(--letterbox);
  background: var(--bg);
  z-index: 3;
}
.hero__bar--top { top: 0; }
.hero__bar--bottom { bottom: 0; }

.hero__frame {
  position: absolute;
  left: 0; right: 0;
  top: var(--letterbox);
  bottom: var(--letterbox);
  z-index: 2;
}

/* Punto de mira central */
.hero__crosshair {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.2;
  pointer-events: none;
}
.hero__crosshair i,
.hero__crosshair b {
  position: absolute;
  background: var(--accent);
}
.hero__crosshair i { width: 1px; height: 2rem; }
.hero__crosshair b { width: 2rem; height: 1px; }
.hero__crosshair s {
  position: absolute;
  width: 0.75rem; height: 0.75rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
}

/* Linea de barrido horizontal */
.hero__scan {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-1px);
  background: linear-gradient(to right,
    transparent,
    rgba(2, 104, 196, 0.08) 20%,
    rgba(2, 104, 196, 0.08) 80%,
    transparent);
}

/* Lecturas de HUD en las cuatro esquinas */
.hud {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--accent);
  z-index: 3;
}
.hud--tl { top: 1rem; left: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.hud--tr { top: 1rem; right: 1.25rem; text-align: right; opacity: 0.75; }
.hud--bl { bottom: 1rem; left: 1.25rem; opacity: 0.55; }
.hud--br { bottom: 1rem; right: 1.25rem; text-align: right; opacity: 0.55; }
@media (max-width: 40rem) { .hud--tr, .hud--br { display: none; } }

.hud__group { display: flex; align-items: center; gap: 0.5rem; }
.hud__label { font-size: 10px; letter-spacing: 0.18em; }

/* Contenido del hero */
.hero__content {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}

.hero__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.45em;
  color: var(--accent);
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 8rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 1rem;
}

.hero__sub {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: clamp(0.875rem, 2vw, 1rem);
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--text-3);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
@media (min-width: 40rem) { .hero__actions { flex-direction: row; } }

/* ==========================================================================
   6. EL ESTUDIO
   ========================================================================== */

.studio { padding-top: 7rem; padding-bottom: 7rem; }
@media (min-width: 48rem) { .studio { padding-top: 9rem; padding-bottom: 9rem; } }

.studio__grid { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 48rem) { .studio__grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }

.studio__rule { width: 3rem; height: 1px; background: var(--accent); margin-top: 2rem; }

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.trio__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.trio__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-6);
  margin-top: 0.25rem;
}

/* ==========================================================================
   7. SERVICIOS
   Las pestanas las maneja js/main.js. El panel activo se marca con
   [data-active], todo lo demas es CSS.
   ========================================================================== */

.services { padding-top: 4rem; padding-bottom: 5rem; }
.services__head { max-width: var(--wrap); margin: 0 auto 2.5rem; padding: 0 var(--pad-x); }
.services__body { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }

/* Selector de modos, como el dial de una camara */
.tabs { display: flex; overflow-x: auto; }

.tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #888;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid #2E2E2E;
  border-right: 0;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  position: relative;
  z-index: 1;
}
.tab:last-of-type { border-right: 1px solid #2E2E2E; }

.tab[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-08);
  border-color: var(--accent-55);
  border-bottom-color: transparent;
  margin-bottom: -1px;
  z-index: 2;
}
.tab__num { opacity: 0.5; }
.tab__name { display: none; }
@media (min-width: 40rem) { .tab__name { display: inline; } }

.tabs__filler { flex: 1; border-bottom: 1px solid var(--border); }

/* Panel de servicio */
.svc { display: none; }
.svc[data-active] { display: block; }

.svc__split { display: grid; }
@media (min-width: 48rem) { .svc__split { grid-template-columns: 1fr 1fr; } }

.svc__media {
  position: relative;
  min-height: 23.75rem;
  background: var(--panel);
}
.svc__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Tres capas sobre la foto. La plana es la perilla principal: sube si una
   imagen queda demasiado clara contra el panel negro. */
.svc__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10, 10, 10, 0.35) 0%, transparent 60%),
    linear-gradient(to top, rgba(10, 10, 10, 0.85) 0%, transparent 50%),
    rgba(10, 10, 10, 0.35);
}
.svc__num { position: absolute; bottom: 1rem; left: 1.25rem; z-index: 2; }

.svc__text {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 48rem) { .svc__text { padding: 2.5rem; border-left: 1px solid var(--border-soft); } }

.svc__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--accent);
  margin-bottom: 0.75rem;
}

/* Lista con marca ▸ */
.marks { display: grid; gap: 0.625rem; }
.marks li { display: flex; gap: 0.75rem; }
.marks li::before {
  content: '▸';
  flex-shrink: 0;
  color: var(--accent);
  font-size: 0.75rem;
  line-height: 1.7;
}
.marks span { font-size: 0.875rem; line-height: 1.6; color: var(--text-2); }

/* ==========================================================================
   8. PROYECTOS
   ========================================================================== */

.projects__list { display: grid; gap: 2.5rem; }

.take { background: var(--panel); border: 1px solid var(--border); border-top-color: var(--accent-25); }

.take__split { display: grid; }
@media (min-width: 48rem) { .take__split { grid-template-columns: 1fr 1fr; } }

.take__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
}
/* 16:9 fijo: un video no se puede recortar para calzar como una foto. Los
   clips no comparten relacion de aspecto, de ahi el object-fit: contain. */
.take__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.take__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.take__frame img   { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* El HUD no debe comerse el clic destinado a los controles del video */
.take__hud { position: absolute; inset: 0; pointer-events: none; }
.take__num { position: absolute; bottom: 1rem; left: 1.25rem; }

.take__text {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 48rem) { .take__text { padding: 2.5rem; } }

.take__kind {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 1rem;
}
.take__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 1rem;
}

/* Alterna el lado del medio. El primero y el tercero lo llevan a la
   izquierda; el segundo a la derecha. */
@media (min-width: 48rem) {
  .take--flip .take__media { order: 2; }
  .take--flip .take__text  { order: 1; border-right: 1px solid var(--border-soft); }
  .take:not(.take--flip) .take__text { border-left: 1px solid var(--border-soft); }
}

/* ==========================================================================
   9. POR QUE VERSE FX
   ========================================================================== */

.why__intro { max-width: 32rem; margin-bottom: 2.5rem; }

.panels {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .panels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .panels { grid-template-columns: repeat(4, 1fr); } }

.panel {
  position: relative;
  background: var(--panel);
  padding: 2rem;
  transition: background 0.2s;
}
.panel:hover { background: var(--panel-hi); }

.panel__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 1rem 0 0.75rem;
}

/* ==========================================================================
   10. PROCESO
   ========================================================================== */

.process__steps { position: relative; display: grid; gap: 0; }
@media (min-width: 48rem) { .process__steps { grid-template-columns: repeat(4, 1fr); } }

/* Linea conectora entre los marcadores, solo en escritorio */
.process__rail { display: none; }
@media (min-width: 48rem) {
  .process__rail {
    display: block;
    position: absolute;
    left: 1.5rem; right: 1.5rem;
    top: 1.75rem;
    height: 1px;
    background: var(--border);
  }
}

.step { position: relative; }
@media (min-width: 48rem) { .step { padding-right: 2rem; } }

/* Rombo: es un keyframe de linea de tiempo de edicion */
.step__marker { display: none; }
@media (min-width: 48rem) {
  .step__marker {
    display: block;
    position: absolute;
    top: 1.25rem; left: 0;
    width: 1rem; height: 1rem;
    transform: rotate(45deg);
    border: 1px solid var(--accent);
    background: var(--bg);
  }
}

.step__body { padding-top: 1rem; padding-bottom: 2rem; border-top: 1px solid var(--border); }
@media (min-width: 48rem) { .step__body { padding-top: 4rem; padding-bottom: 0; } }

.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.75rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 1rem;
}
.step__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.18em;
  color: #fff;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   11. BANDA DE LLAMADA A LA ACCION
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  padding: 7rem 1.5rem;
}
.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* La foto funciona como textura, no como imagen. Bajo el gradiente solo se
     ve un 12% de ella en la franja central. Subir para que se note mas. */
  opacity: 0.27;
}
.cta::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    var(--bg) 0%,
    rgba(8, 8, 8, 0.55) 50%,
    var(--bg) 100%);
}
.cta__inner { position: relative; z-index: 2; max-width: 56rem; margin: 0 auto; text-align: center; }

.cta__kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 1.75rem;
}
.cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1.1;
  color: #fff;
}
.cta__sub { max-width: 42rem; margin: 1.5rem auto 0; font-size: 1rem; line-height: 1.7; color: var(--text-4); }

/* ==========================================================================
   12. CONTACTO
   ========================================================================== */

.contact { max-width: var(--wrap-narrow); }

.contact__grid { display: grid; gap: 4rem; }
@media (min-width: 48rem) { .contact__grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }

.details { display: grid; gap: 1rem; margin-top: 2.5rem; }
.detail { display: flex; gap: 1rem; align-items: flex-start; }
.detail::before {
  content: '▸';
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.8;
  color: var(--accent);
  opacity: 0.6;
}
.detail__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-6);
  margin-bottom: 0.125rem;
}
.detail__value {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-5);
}
.detail__value a:hover { color: var(--accent); }

/* Bloque de firma */
.signature {
  position: relative;
  margin-top: 3rem;
  padding: 2rem;
  border: 1px solid var(--border);
}
.signature__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.signature__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
}

/* --- Formulario --- */
.form { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .form { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }

.field > label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-5);
  margin-bottom: 0.375rem;
}
.field .req { color: var(--accent); opacity: 0.7; }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-field);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text);
  transition: border-color 0.2s;
  border-radius: 0;          /* iOS redondea los campos por defecto */
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 8rem; }

/* El desplegable necesita fondo opaco: el nativo hereda transparente y en
   algunos navegadores las opciones quedan ilegibles. */
.field select { background: var(--panel-input); }
.field select:invalid { color: var(--text-6); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-40);
  box-shadow: 0 0 0 1px rgba(2, 104, 196, 0.19);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-6); }

/* Autocompletado de Chrome: sin esto pinta los campos de amarillo */
.field input:-webkit-autofill,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--panel-input) inset;
  -webkit-text-fill-color: var(--text);
}

.form__submit { grid-column: 1 / -1; }
.form__submit button {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 1rem;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.form__submit button:hover { background: var(--accent-hi); }

.form__note {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.7;
  color: var(--text-6);
}

/* Trampa antispam: fuera de pantalla, no con display:none, que algunos bots
   detectan. Una persona nunca lo ve. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Avisos de envio ---
   Ocultos por defecto. contact.php redirige con ?sent=1 o ?error=1 y
   js/main.js revela el que corresponda. */
.notice { display: none; margin-bottom: 2rem; padding: 1.5rem; }
.notice[data-show] { display: block; }
.notice__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.notice__text { font-size: 0.875rem; line-height: 1.6; color: var(--text-5); }
.notice--ok { border: 1px solid var(--accent-25); background: var(--accent-06); }
.notice--ok .notice__title { color: var(--accent); }
.notice--error { border: 1px solid rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.06); }
.notice--error .notice__title { color: #ef4444; }

/* ==========================================================================
   13. PIE DE PAGINA
   ========================================================================== */

.footer { border-top: 1px solid var(--hairline); }
.footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 3.5rem var(--pad-x); }

.footer__top { display: flex; flex-direction: column; gap: 2.5rem; justify-content: space-between; }
@media (min-width: 48rem) { .footer__top { flex-direction: row; } }

.footer__brand { max-width: 24rem; }
.footer__logo { margin-bottom: 1rem; }
.footer__logo svg { height: 30px; width: auto; }
.footer__note { font-size: 0.75rem; line-height: 1.7; color: var(--text-6); }

.footer__cols { display: flex; gap: 4rem; }
.footer__col-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.footer__col a {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-6);
  padding: 0.25rem 0;
  transition: color 0.2s;
}
.footer__col a:hover { color: #666; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #111;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-8);
}
@media (min-width: 48rem) { .footer__bottom { flex-direction: row; } }

/* ==========================================================================
   14. MOVIMIENTO REDUCIDO
   Respeta la preferencia del sistema operativo.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rec-dot { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}