/* ═══════════════════════════════════════════════════════════════════════════
   baizzen — sistema visual v2
   Estructura tomada del proyecto de referencia (Paymark / warm-structure-hub),
   medida en su propio código: superficies oscuras escalonadas, contenedores
   de radio grande, un acento con resplandor, Inter Tight, y cuatro
   animaciones. La paleta es la nuestra, del manual de identidad.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Superficies ────────────────────────────────────────────────────────
     La referencia escalona #0E0E0E → #141414 → #1F1F1F. Acá el escalón lo
     dan los dos oscuros del manual, con un tercer paso derivado.           */
  --fondo:        #090D16;   /* noche, del manual */
  --superficie:   #0E131C;   /* tinta, del manual */
  --superficie-2: #141B28;
  --borde:        #1C2434;
  --borde-vivo:   #2B3650;

  /* ── Texto ──────────────────────────────────────────────────────────── */
  --texto:    #FFFFFF;
  --texto-2:  #8A94A6;       /* 6,35:1 sobre noche */
  --texto-3:  #5C6880;

  /* ── Acento ─────────────────────────────────────────────────────────── */
  --azul:        #1F57FF;    /* relleno de botones */
  --azul-vivo:   #3D6EFF;    /* hover */
  --azul-claro:  #5CA1FF;    /* texto y marcas sobre oscuro, 7,40:1 */

  /* ── La única banda clara ───────────────────────────────────────────── */
  --papel: #F1F3F7;

  /* ── Forma ──────────────────────────────────────────────────────────
     Radio diferenciado por tamaño, no uno solo para todo.                 */
  --r-chico:  10px;
  --r-medio:  16px;
  --r-card:   22px;
  --r-bloque: 32px;
  --r-pill:   999px;

  --sombra:      0 4px 24px rgba(0, 0, 0, .45);
  --resplandor:  0 0 90px rgba(31, 87, 255, .22);

  /* ── Tipografía ─────────────────────────────────────────────────────
     Inter Tight es la de la referencia. La mono se queda: es nuestra, y
     sigue reservada a dato técnico.                                       */
  --sans: "Inter Tight", system-ui, -apple-system, sans-serif;

  --margen: clamp(20px, 5vw, 56px);
  --ancho:  1200px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--fondo);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* ── Tipografía ───────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }

h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.25; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; color: var(--texto-2); }

/* Rótulo de sección: tamaño y color, sin mayúsculas ni interletrado abierto. */
.etiqueta {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  color: var(--azul-claro);
  margin: 0 0 12px;
}

.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

/* ── Accesibilidad ────────────────────────────────────────────────────── */

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--azul); color: #fff; padding: 12px 20px; text-decoration: none;
}
.saltar:focus { left: 0; }

:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; border-radius: 2px; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Botones ──────────────────────────────────────────────────────────
   Píldora, como la referencia. Un primario por pantalla.                  */

.boton {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--azul); color: #fff;
  font: 500 .95rem/1 var(--sans);
  padding: 15px 26px;
  border: 0; border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.boton:hover { background: var(--azul-vivo); box-shadow: var(--resplandor); }
.boton:active { transform: translateY(1px); }

.boton-fantasma {
  background: var(--superficie-2);
  color: var(--texto);
  border: 1px solid var(--borde-vivo);
}
.boton-fantasma:hover { background: var(--borde); box-shadow: none; }

.boton-chico { padding: 11px 20px; font-size: .88rem; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--azul-claro); text-decoration: none; font-size: .95rem;
  transition: gap .2s ease;
}
.enlace-flecha::after { content: "→"; transition: transform .2s ease; }
.enlace-flecha:hover { gap: 12px; }

/* ── Navegación ───────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--margen);
  background: rgba(9, 13, 22, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.nav-marca img { width: clamp(100px, 11vw, 120px); }
.nav-links { display: flex; gap: clamp(14px, 2vw, 28px); margin-left: auto; font-size: .93rem; }
.nav-links a {
  color: var(--texto-2); text-decoration: none; padding: 6px 0;
  transition: color .2s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--texto); }

/* ── Portada ──────────────────────────────────────────────────────────── */

.portada {
  position: relative;
  text-align: center;
  padding: clamp(56px, 8vw, 104px) var(--margen) clamp(40px, 5vw, 64px);
  overflow: hidden;
}

/* El resplandor de la referencia, en azul. Una sola luz en todo el sitio. */
.portada::before {
  content: "";
  position: absolute; top: -38%; left: 50%; translate: -50% 0;
  width: min(900px, 130%); aspect-ratio: 1.45 / 1;
  background: radial-gradient(ellipse at center,
    rgba(92, 161, 255, .34) 0%, rgba(31, 87, 255, .20) 30%,
    rgba(31, 87, 255, .07) 55%, transparent 72%);
  filter: blur(14px);
  pointer-events: none;
  animation: latido 3s ease-in-out infinite;
}

.portada > * { position: relative; }
.portada h1 { max-width: 15ch; margin-inline: auto; }
.portada .lede { max-width: 54ch; margin: 22px auto 32px; }
.portada-acciones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Cinta de servicios ───────────────────────────────────────────────
   Lo que se ofrece, con nombre y en movimiento, antes de cualquier
   párrafo. Es la animación `infinite-scroll` de la referencia (40s lineal)
   puesta a hacer un trabajo real: decir qué vendemos.                     */

.cinta {
  margin-top: clamp(40px, 5vw, 64px);
  border-block: 1px solid var(--borde);
  padding: 16px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta-pista {
  display: flex; width: max-content; gap: 10px;
  animation: correr 40s linear infinite;
}
.cinta:hover .cinta-pista { animation-play-state: paused; }

/* Las dos marcas, no etiquetas de texto. */
.cinta-pista { align-items: center; gap: clamp(36px, 6vw, 80px); }

.cinta-logo img { width: clamp(108px, 13vw, 150px); opacity: .9; }
.cinta-logo-labs img { width: clamp(96px, 11vw, 128px); }
.cinta-sep img { width: 15px; opacity: .45; }

/* ── Secciones ────────────────────────────────────────────────────────── */

.seccion { padding-block: clamp(56px, 8vw, 110px); }
.seccion-cabeza { max-width: 44ch; margin-bottom: clamp(32px, 4vw, 52px); }
.seccion-cabeza .lede { margin-top: 16px; }

/* ── Bloques de servicio ──────────────────────────────────────────────
   Contenedor de radio grande, como la referencia. Cada bloque enseña sus
   servicios con nombre: es la respuesta a «no se ve qué se ofrece».       */

.areas { display: grid; gap: 14px; }

.area {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-bloque);
  padding: clamp(24px, 3vw, 38px);
  transition: border-color .25s ease, background .25s ease;
}
.area:hover { border-color: var(--borde-vivo); background: var(--superficie-2); }

.area-cabeza { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.area-n {
  font-size: .95rem; font-weight: 500;
  color: var(--azul-claro); flex: none;
}
.area > p { color: var(--texto-2); max-width: 52ch; margin-bottom: 22px; }

/* Cada servicio con su explicación. El nombre no basta: «CRM» no le dice
   nada a quien tiene un taller. */
.area-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--borde); border-radius: var(--r-medio); overflow: hidden; }
.area-lista li { background: var(--superficie); padding: 15px 18px; }
.area-lista h4 { margin: 0 0 3px; color: var(--texto); }
.area-lista p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--texto-2); }

@media (min-width: 620px) { .area-lista { grid-template-columns: 1fr 1fr; } }

@media (min-width: 980px) {
  .area { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: 0 44px; align-items: start; }
  .area-cabeza { grid-column: 1; margin-bottom: 0; flex-direction: column; gap: 8px; align-items: flex-start; }
  .area > p { grid-column: 1; align-self: start; margin: 12px 0 0; font-size: .93rem; }
  .area-lista { grid-column: 2; grid-row: 1 / span 2; }
  .area:not(:has(.area-lista)) { display: block; }
}

/* ── Bloque claro ─────────────────────────────────────────────────────
   La única superficie clara del sitio, con la combinación que el manual
   prescribe para fondo claro. Marca el final y el llamado.                */

.cierre {
  background: var(--papel);
  color: var(--superficie);
  border-radius: var(--r-bloque);
  padding: clamp(36px, 5vw, 72px);
  text-align: center;
}
.cierre h2 { max-width: 18ch; margin-inline: auto; }
.cierre p { color: #5B6478; max-width: 48ch; margin: 18px auto 30px; }
.cierre .boton:hover { box-shadow: none; }
.cierre-correo {
  display: block; margin-top: 22px;
  font-size: .95rem; color: #5B6478; text-decoration: none;
}
.cierre-correo:hover { color: var(--azul); }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--borde);
  margin-top: clamp(56px, 7vw, 96px);
  padding: 32px 0;
}
.pie .envoltura { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.pie p { margin: 0; font-size: .88rem; color: var(--texto-3); }
.pie a { color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--azul-claro); }

/* ── Movimiento ───────────────────────────────────────────────────────
   Las cuatro animaciones salen del tailwind.config.ts de la referencia,
   con sus tiempos y curvas: fade-in 0.6s ease-out, scroll 40s lineal,
   glow-pulse 3s ease-in-out.                                              */

@keyframes aparecer { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes correr   { to { transform: translateX(calc(-50% - 5px)); } }
@keyframes latido   { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* El ocultado lo pone el JS en <html>, nunca el CSS por su cuenta: si el
   script falla o no corre, el contenido se ve igual. Un texto invisible es
   peor que un texto sin animación. */
.js .revelar { opacity: 0; }
.js .revelar.visible { animation: aparecer .6s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  .js .revelar, .js .revelar.visible { opacity: 1; animation: none; }
  .cinta-pista, .portada::before { animation: none; }
  .caso:hover .caso-lienzo img { transform: none; }
  * { transition-duration: .01ms !important; }
}

/* ── Pantallas angostas ───────────────────────────────────────────────── */

@media (max-width: 760px) {
  .nav-links { display: none; }
  .portada-acciones .boton { width: 100%; justify-content: center; }
}

/* ── Formulario ───────────────────────────────────────────────────────
   No hay servidor todavía, así que el botón arma el correo y se lo deja
   al visitante para que lo revise y lo mande. Nada sale sin que él lo vea. */

.campo {
  width: 100%;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1rem/1.5 var(--sans);
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  padding: 13px 15px;
  resize: vertical;
  transition: border-color .2s ease, background .2s ease;
}
.campo::placeholder { color: var(--texto-3); }
.campo:hover { border-color: var(--borde-vivo); }
.campo:focus { border-color: var(--azul-claro); outline: none; background: var(--superficie-2); }
.campo:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }

.pista { margin: 10px 0 0; font-size: .84rem; color: var(--texto-3); max-width: 52ch; }

.forma-pie { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-top: 4px; }

label.etiqueta { display: block; cursor: pointer; }

/* ── Menú en pantalla angosta ─────────────────────────────────────────
   El sitio tiene cinco páginas: sin esto, en teléfono solo se llega a una. */

.nav-menu {
  display: none;
  width: 42px; height: 42px;
  flex: none;
  background: var(--superficie-2);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-chico);
  cursor: pointer;
  padding: 0;
  position: relative;
}
/* Las dos barras se posicionan desde el centro para que al abrirse se crucen
   exactamente: con `gap` quedaban descuadradas y la X salía torcida. */
.nav-menu span {
  position: absolute;
  left: 50%; top: 50%;
  width: 17px; height: 1.5px;
  background: var(--texto);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.nav-menu span:first-child { transform: translate(-50%, -50%) translateY(-3.5px); }
.nav-menu span:last-child  { transform: translate(-50%, -50%) translateY(3.5px); }
.nav-menu[aria-expanded="true"] span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.nav-menu[aria-expanded="true"] span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 860px) {
  .nav { flex-wrap: wrap; }
  .nav-menu { display: block; margin-left: auto; }
  .nav .boton-chico { margin-left: 0; order: 2; }
  .nav-menu { order: 3; }

  .nav-links {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin: 10px -4px 4px;
    font-size: 1rem;
  }
  .nav-links.abierto { display: flex; }
  .nav-links a {
    padding: 13px 4px;
    border-bottom: 1px solid var(--borde);
  }
  .nav-links a:last-child { border-bottom: 0; }
}


/* ── Portada de página interna ────────────────────────────────────────── */
.portada-corta { padding-block: clamp(44px, 6vw, 76px) clamp(8px, 2vw, 20px); }
.portada-corta h1 { max-width: 20ch; }

.ver-mas { margin-top: 26px; }

.correo-grande { font-size: clamp(1.15rem, 2.2vw, 1.6rem); margin-bottom: 10px; }
.correo-grande a { color: var(--azul-claro); text-decoration: none; }
.correo-grande a:hover { text-decoration: underline; text-underline-offset: .25em; }

/* El rótulo de un campo no es un rótulo de sección: no va en azul. */
label.etiqueta { display: block; cursor: pointer; color: var(--texto); font-weight: 500; }


/* ── Labs en la navegación ────────────────────────────────────────────
   Labs es otra cosa, y en el menú tiene que leerse como otra cosa. */

.nav-labs {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  text-decoration: none;
  font-size: .9rem;
  color: var(--azul-claro) !important;
  border: 1px solid rgba(92, 161, 255, .35);
  border-radius: var(--r-pill);
  padding: 6px 15px !important;
  position: relative;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.nav-labs:hover,
.nav-labs[aria-current="page"] {
  border-color: var(--azul-claro);
  background: rgba(92, 161, 255, .10);
  box-shadow: 0 0 22px rgba(92, 161, 255, .22);
}
.nav-labs-punto {
  width: 5px; height: 5px; border-radius: var(--r-pill);
  background: var(--azul-claro);
  box-shadow: 0 0 8px var(--azul-claro);
  animation: latido 3s ease-in-out infinite;
}

/* ── Síntomas ─────────────────────────────────────────────────────────
   «Esto me pasa a mí». Cada uno abre con la respuesta. Son <details>
   nativos: funcionan sin JavaScript y el teclado los abre solo.         */

.sintomas { display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r-card); overflow: hidden; }

.sintoma { background: var(--superficie); transition: background .22s ease; }
.sintoma:hover { background: var(--superficie-2); }
.sintoma[open] { background: var(--superficie-2); }

.sintoma summary {
  display: flex; align-items: flex-start; gap: 16px;
  padding: clamp(17px, 2.1vw, 23px) clamp(18px, 2.2vw, 28px);
  cursor: pointer; list-style: none;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.4;
}
.sintoma summary::-webkit-details-marker { display: none; }

/* El signo: una cruz que gira a menos al abrirse. */
.sintoma summary::after {
  content: ""; flex: none; margin-left: auto;
  width: 18px; height: 18px; margin-top: .2em;
  background:
    linear-gradient(var(--azul-claro), var(--azul-claro)) center/18px 1.5px no-repeat,
    linear-gradient(var(--azul-claro), var(--azul-claro)) center/1.5px 18px no-repeat;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
  opacity: .75;
}
.sintoma[open] summary::after { transform: rotate(135deg); opacity: 1; }
.sintoma summary:hover::after { opacity: 1; }

.sintoma-cuerpo {
  padding: 0 clamp(18px, 2.2vw, 28px) clamp(20px, 2.4vw, 26px) clamp(18px, 2.2vw, 28px);
  animation: abrir .22s ease-out;
}
.sintoma-cuerpo p { color: var(--texto-2); max-width: 62ch; margin: 0; }

@keyframes abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Pasos en fila ────────────────────────────────────────────────────── */

.pasos-fila { display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 720px) { .pasos-fila { grid-template-columns: repeat(4, 1fr); } }

.paso { background: var(--superficie); padding: clamp(20px, 2.4vw, 28px); transition: background .22s ease; }
.paso:hover { background: var(--superficie-2); }
.paso span { display: block; color: var(--azul-claro); font-weight: 500; margin-bottom: 10px; }
.paso h4 { margin: 0 0 6px; }
.paso p { margin: 0; font-size: .92rem; color: var(--texto-2); }

/* ── Comparación ──────────────────────────────────────────────────────── */

.comparar { display: grid; gap: 14px; }
@media (min-width: 820px) { .comparar { grid-template-columns: 1fr 1fr; } }

.comparar-col {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-bloque);
  padding: clamp(24px, 3vw, 36px);
  transition: border-color .25s ease, transform .25s ease;
}
.comparar-col:hover { border-color: var(--borde-vivo); transform: translateY(-2px); }
.comparar-col h3 { margin-bottom: 6px; }
.comparar-para { color: var(--azul-claro); font-size: .95rem; margin-bottom: 20px; }
.comparar-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.comparar-col li { position: relative; padding-left: 24px; color: var(--texto-2); font-size: .96rem; }
.comparar-col li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border: 1.5px solid var(--azul-claro); border-radius: 2px;
}
.comparar-col a { color: var(--azul-claro); }

/* ── Estado vacío ─────────────────────────────────────────────────────
   Dice qué falta, por qué, y qué puede hacer el visitante mientras tanto. */

.vacio {
  background: var(--superficie);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-bloque);
  padding: clamp(28px, 4vw, 52px);
  text-align: center;
}
.vacio p { color: var(--texto-2); max-width: 54ch; margin-inline: auto; }
.vacio-titulo { color: var(--texto) !important; font-size: 1.1rem; font-weight: 500; }
.vacio-accion { margin-top: 26px; }

@media (prefers-reduced-motion: reduce) {
  .sintoma-cuerpo { animation: none; }
  .comparar-col:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   baizzen labs — la consola
   No es una página que se baja. Es una pantalla completa con un campo vivo
   detrás y cuatro vistas que se conmutan en el mismo lugar. Es, además, la
   demostración de lo que baizzen construye: un panel, no un folleto.
   ═══════════════════════════════════════════════════════════════════════ */

body.labs {
  --fondo: #04060A;
  --borde: #16202F;
  --borde-vivo: #2C3C5A;
  background: var(--fondo);
  height: 100svh;
  overflow: hidden;
}



/* Viñeta: oscurece los bordes para que el centro mande. */
.labs-vineta {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 96% 88% at 50% 45%, transparent 0%, rgba(4,6,10,.30) 78%, rgba(4,6,10,.80) 100%),
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(31,87,255,.16) 0%, transparent 70%);
}

.labs-consola {
  position: relative; z-index: 2;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(14px, 2.2vw, 26px) clamp(16px, 3vw, 40px);
  gap: clamp(12px, 2vw, 24px);
}

/* ── Barra ────────────────────────────────────────────────────────────── */
.labs-barra { display: flex; align-items: center; gap: 16px; }
.labs-logo { width: clamp(104px, 12vw, 138px); margin-inline: auto; }

.labs-salida, .labs-contacto {
  flex: none;
  font-size: .88rem; text-decoration: none; color: var(--texto-2);
  border: 1px solid var(--borde); border-radius: var(--r-pill);
  padding: 8px 15px;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.labs-salida:hover, .labs-contacto:hover {
  color: var(--azul-claro); border-color: rgba(92,161,255,.5);
  background: rgba(92,161,255,.07);
}
.labs-contacto { color: var(--azul-claro); border-color: rgba(92,161,255,.35); }
.labs-contacto:hover { box-shadow: 0 0 22px rgba(92,161,255,.25); }

/* ── Escena ───────────────────────────────────────────────────────────── */
.labs-escena {
  display: grid; place-items: center;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.labs-vista {
  position: relative;
  width: min(100%, 880px);
  text-align: center;
  padding: clamp(8px, 2vw, 24px) 0;
}
.labs-vista[hidden] { display: none; }
/* Sin `both` y sin `filter`: si por lo que sea la animación no corre, la
   vista queda sencillamente visible. Un fotograma inicial congelado con
   desenfoque dejaba el texto lavado, y eso es peor que no animar. */
.labs-vista.entrando { animation: labs-entra .45s cubic-bezier(.2,.8,.2,1); }
@keyframes labs-entra {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.labs-sello {
  display: inline-block;
  font-size: .78rem; color: var(--azul-claro);
  border: 1px solid rgba(92,161,255,.3); border-radius: var(--r-pill);
  padding: 5px 14px; margin: 0 0 clamp(14px, 2vw, 22px);
  background: rgba(92,161,255,.06);
}


.labs-vista h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.05; letter-spacing: -.035em;
  text-shadow: 0 0 60px rgba(92,161,255,.28);
}
.labs-vista h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  line-height: 1.08; letter-spacing: -.03em;
  text-shadow: 0 0 50px rgba(92,161,255,.22);
}

.labs-bajada {
  color: var(--texto-2); max-width: 54ch; margin: clamp(14px, 2vw, 22px) auto 0;
  font-size: clamp(.96rem, 1.4vw, 1.08rem);
}

/* ── Cifras ───────────────────────────────────────────────────────────── */
.labs-cifras {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--borde);
  border: 1px solid var(--borde); border-radius: var(--r-card);
  margin-top: clamp(22px, 3vw, 34px); overflow: hidden;
}
.labs-cifras div {
  background: rgba(10,15,25,.72); backdrop-filter: blur(8px);
  padding: clamp(14px, 2vw, 22px) 10px;
}
.labs-cifras strong { display: block; font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 500; }
.labs-cifras span { display: block; font-size: .8rem; color: var(--texto-2); margin-top: 4px; }

/* ── Pasos ────────────────────────────────────────────────────────────── */
.labs-pasos {
  list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--borde);
  border: 1px solid var(--borde); border-radius: var(--r-card); overflow: hidden;
  text-align: left;
}
@media (min-width: 720px) { .labs-pasos { grid-template-columns: repeat(3, 1fr); } }
.labs-pasos li {
  background: rgba(10,15,25,.72); backdrop-filter: blur(8px);
  padding: clamp(18px, 2.4vw, 26px);
  transition: background .25s ease;
}
.labs-pasos li:hover { background: rgba(20,30,48,.8); }
.labs-paso-n { color: var(--azul-claro); font-weight: 500; }
.labs-pasos h3 { margin: 8px 0 6px; font-size: 1.08rem; }
.labs-pasos p { margin: 0; color: var(--texto-2); font-size: .92rem; }

/* ── Balanza ──────────────────────────────────────────────────────────── */
.labs-balanza { display: grid; gap: 14px; margin-top: clamp(22px, 3vw, 32px); text-align: left; }
@media (min-width: 760px) { .labs-balanza { grid-template-columns: 1fr 1fr; } }
.labs-balanza article {
  background: rgba(10,15,25,.72); backdrop-filter: blur(8px);
  border: 1px solid var(--borde); border-radius: var(--r-card);
  padding: clamp(20px, 2.6vw, 28px);
  transition: border-color .25s ease, transform .25s ease;
}
.labs-balanza article:hover { border-color: rgba(92,161,255,.45); transform: translateY(-3px); }
.labs-balanza-medida { border-style: dashed; }
.labs-balanza h3 { font-size: 1.15rem; margin-bottom: 4px; }
.labs-para { color: var(--azul-claro); font-size: .88rem; margin-bottom: 16px; }
.labs-balanza ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.labs-balanza li { position: relative; padding-left: 22px; color: var(--texto-2); font-size: .92rem; }
.labs-balanza li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border: 1.5px solid var(--azul-claro); border-radius: 2px;
}
.labs-balanza a { color: var(--azul-claro); }

/* ── Ranuras del catálogo ─────────────────────────────────────────────── */
.labs-ranuras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: clamp(22px, 3vw, 32px) 0;
}
.labs-ranura {
  border: 1px dashed var(--borde-vivo); border-radius: var(--r-card);
  padding: clamp(22px, 3.5vw, 40px) 10px;
  background: rgba(10,15,25,.4);
  animation: respirar 3s ease-in-out infinite;
}
.labs-ranura:nth-child(2) { animation-delay: .5s; }
.labs-ranura:nth-child(3) { animation-delay: 1s; }
.labs-ranura span { display: block; color: var(--azul-claro); font-weight: 500; }
.labs-ranura p { margin: 6px 0 0; font-size: .82rem; color: var(--texto-3); }
@keyframes respirar { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.labs-boton {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: clamp(16px, 2vw, 22px);
  background: var(--azul-claro); color: #04060A;
  font-weight: 600; font-size: .95rem;
  padding: 14px 26px; border-radius: var(--r-pill); text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.labs-boton:hover { background: #8CBEFF; box-shadow: 0 0 44px rgba(92,161,255,.4); }
.labs-boton:active { transform: translateY(1px); }

/* ── Riel de vistas ───────────────────────────────────────────────────── */
.labs-rail {
  display: flex; justify-content: center; gap: 6px;
  padding: 6px; margin-inline: auto;
  background: rgba(8, 12, 20, .72); backdrop-filter: blur(14px);
  border: 1px solid var(--borde); border-radius: var(--r-pill);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.labs-rail::-webkit-scrollbar { display: none; }

.labs-rail button {
  flex: none;
  background: none; border: 0; border-radius: var(--r-pill);
  color: var(--texto-2); font: 500 .89rem/1 var(--sans);
  padding: 11px 18px; cursor: pointer; white-space: nowrap;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.labs-rail button:hover { color: var(--texto); background: rgba(92,161,255,.08); }
.labs-rail button[aria-selected="true"] {
  color: #04060A; background: var(--azul-claro);
  box-shadow: 0 0 26px rgba(92,161,255,.4);
}

@media (max-width: 560px) {
  .labs-logo { margin-inline: 0; }
  .labs-barra { gap: 10px; }
  .labs-salida span { display: none; }
  .labs-cifras { grid-template-columns: 1fr; }
  .labs-ranuras { grid-template-columns: 1fr; }
  .labs-rail { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .labs-vista.entrando { animation: none; }
  .labs-ranura { animation: none; opacity: .8; }
  .labs-balanza article:hover { transform: none; }
}

/* ── Portal a Labs ────────────────────────────────────────────────────
   La franja desde la que se entra a Labs. Fondo propio, acento propio y
   la reja a 44,1° derivando, para que se note que al otro lado hay otra
   cosa.                                                                  */

.portal {
  position: relative;
  overflow: hidden;
  background: #04060A;
  border-block: 1px solid var(--borde);
  margin-top: clamp(40px, 6vw, 80px);
  padding-block: clamp(52px, 8vw, 104px);
  text-align: center;
}

.portal-reja {
  position: absolute; inset: -240px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(136deg, transparent 0 58px, rgba(92,161,255,.14) 58px 59px),
    repeating-linear-gradient(46deg,  transparent 0 58px, rgba(92,161,255,.08) 58px 59px);
  animation: derivar 26s linear infinite;
  mask-image: radial-gradient(ellipse 65% 70% at 50% 50%, #000 0%, transparent 78%);
}
@keyframes derivar { to { transform: translateX(82px); } }

.portal-cuerpo { position: relative; }
.portal-logo { width: clamp(132px, 16vw, 186px); margin: 0 auto clamp(20px, 2.6vw, 30px); filter: drop-shadow(0 0 30px rgba(92,161,255,.3)); }
.portal h2 { max-width: 16ch; margin-inline: auto; text-shadow: 0 0 50px rgba(92,161,255,.25); }
.portal p { color: var(--texto-2); max-width: 46ch; margin: 16px auto clamp(24px, 3vw, 32px); }

.portal-entrar {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--azul-claro); color: #04060A;
  font-weight: 600; font-size: .98rem;
  padding: 15px 28px; border-radius: var(--r-pill); text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, gap .2s ease;
}
.portal-entrar:hover { background: #8CBEFF; box-shadow: 0 0 50px rgba(92,161,255,.42); gap: 15px; }

.pie-labs { color: var(--azul-claro) !important; }

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

/* ═══ FONDO VIVO ══════════════════════════════════════════════════════════
   Un lienzo fijo detrás de todo. En Labs son letras que se encienden bajo
   el cursor; en el resto del sitio, puntos mucho más callados.
   ═══════════════════════════════════════════════════════════════════════ */

.fondo {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* El campo se apaga en el centro, donde vive el texto, y manda en los
   bordes. Sin esto las letras compiten con el titular y todo se ve sucio.
   Además es lo que hace la metáfora correcta: el contenido está en un
   claro y las letras ocupan el resto de la pared. */
.fondo[data-modo="letras"] {
  -webkit-mask-image: radial-gradient(ellipse 54% 58% at 50% 50%,
    rgba(0,0,0,.06) 0%, rgba(0,0,0,.20) 42%, rgba(0,0,0,.72) 72%, #000 100%);
  mask-image: radial-gradient(ellipse 54% 58% at 50% 50%,
    rgba(0,0,0,.06) 0%, rgba(0,0,0,.20) 42%, rgba(0,0,0,.72) 72%, #000 100%);
}

/* En el sitio normal el contenido va por encima y el fondo se queda atrás,
   para que el texto nunca compita con él. */
body:not(.labs) .nav,
body:not(.labs) main,
body:not(.labs) .pie { position: relative; z-index: 1; }

/* ── Arranque de Labs ─────────────────────────────────────────────────
   Tiene una razón real: el lienzo y la tipografía tardan un momento en
   estar listos. Se va solo en cuanto el campo dibuja su primer cuadro. */

.labs-arranque {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: #04060A;
  transition: opacity .5s ease, visibility .5s;
}
.labs-arranque.fuera { opacity: 0; visibility: hidden; }

.labs-arranque-caja { display: grid; gap: 18px; justify-items: center; }
.labs-arranque svg { width: 104px; height: auto; overflow: visible; }
.labs-arranque span { font-size: .82rem; color: var(--texto-3); }

.bz-ghost { fill: #141C2B; }
.bz-on { fill: var(--azul-claro); }
.bz-bar { transform-box: fill-box; animation: bzBar 1.8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes bzBar {
  0%        { transform: translateX(-100%); }
  45%, 55%  { transform: translateX(0); }
  100%      { transform: translateX(100%); }
}

/* ═══ INTRO DE MARCA ══════════════════════════════════════════════════════
   El archivo de animaciones de Byron, llevado al fondo oscuro del sitio.
   Una vez por sesión, se salta con un clic o con cualquier tecla.
   ═══════════════════════════════════════════════════════════════════════ */

#bz-intro {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--fondo);
  display: grid; place-items: center;
  cursor: pointer;
}
#bz-intro[hidden] { display: none; }
#bz-intro .bz-stage {
  position: relative; width: min(74vw, 440px);
  display: grid; gap: 26px; justify-items: center;
}
#bz-intro svg { width: 100%; height: auto; overflow: visible; }
#bz-intro .bz-text { fill: var(--texto); }
#bz-intro .bz-meter {
  display: flex; gap: 12px;
  font-size: .78rem; color: var(--texto-3);
}
#bz-intro .bz-meter b {
  color: var(--azul-claro); font-weight: 500;
  font-variant-numeric: tabular-nums; min-width: 4ch;
}
#bz-intro .bz-scan {
  position: absolute; top: -10%; bottom: 30%; left: 50%;
  width: 2px; background: var(--azul-claro); opacity: 0;
  box-shadow: 0 0 22px 5px rgba(92,161,255,.6);
}

#bz-intro .bz-zz {
  transform-box: fill-box; transform-origin: center;
  animation: bzScale 1.9s cubic-bezier(.7,0,.2,1) both;
}
#bz-intro .bz-z {
  stroke: var(--azul-claro); stroke-width: 1.1;
  stroke-dasharray: 1; stroke-dashoffset: 1; fill: transparent;
  animation: bzDraw .9s cubic-bezier(.6,0,.3,1) forwards,
             bzFillZ .35s .9s ease forwards;
}
#bz-intro .bz-z2  { animation-delay: .15s, 1s; }
#bz-intro .bz-bai { clip-path: inset(0 0 0 100%); animation: bzReveal .7s 1.8s cubic-bezier(.2,.8,.2,1) forwards; }
#bz-intro .bz-en  { clip-path: inset(0 100% 0 0); animation: bzReveal .7s 1.8s cubic-bezier(.2,.8,.2,1) forwards; }
#bz-intro .bz-scan  { animation: bzScan .7s 1.8s cubic-bezier(.2,.8,.2,1); }
#bz-intro .bz-meter { animation: bzFade .3s 2.4s forwards; }
#bz-intro.bz-out    { animation: bzExit .8s cubic-bezier(.7,0,.2,1) forwards; }

@keyframes bzDraw   { to { stroke-dashoffset: 0; } }
@keyframes bzFillZ  { to { fill: var(--azul-claro); stroke-width: 0; } }
@keyframes bzScale  { 0%, 60% { transform: scale(1.9); } 100% { transform: scale(1); } }
@keyframes bzReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes bzScan   { 0% { opacity: 1; transform: scaleY(.4); } 40% { transform: scaleY(1); } 100% { opacity: 0; transform: translateX(min(34vw, 210px)); } }
@keyframes bzFade   { to { opacity: 0; } }
@keyframes bzExit   { to { clip-path: inset(0 0 100% 0); } }

/* Red de seguridad: si las animaciones no corren (pestaña en segundo plano,
   el navegador las frena), el logo se queda escondido tras su clip-path y el
   visitante mira una pantalla vacía. Esta clase fuerza el estado final. */
#bz-intro.bz-ya .bz-bai,
#bz-intro.bz-ya .bz-en  { clip-path: none !important; animation: none !important; }
#bz-intro.bz-ya .bz-z   { fill: var(--azul-claro) !important; stroke-width: 0 !important;
                          stroke-dashoffset: 0 !important; animation: none !important; }
#bz-intro.bz-ya .bz-zz  { transform: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  #bz-intro { display: none; }
  .bz-bar { animation: none; }
}

/* ── Casos: ventana de navegador ──────────────────────────────────────
   En vez de una captura suelta, cada caso va dentro de un marco de
   navegador y tiene varias vistas reales que se pueden cambiar. La del
   inicio de Sanitarios es la página entera: al pasar el cursor, recorre
   de arriba abajo sola.                                                  */

.casos { display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (min-width: 980px) { .casos { grid-template-columns: 1fr 1fr; } }

.caso {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-bloque);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s ease, transform .3s ease;
}
.caso:hover { border-color: var(--borde-vivo); transform: translateY(-3px); }

.marco { padding: clamp(14px, 1.8vw, 20px) clamp(14px, 1.8vw, 20px) 0; }

.marco-barra {
  display: flex; align-items: center; gap: 6px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-bottom: 0;
  border-radius: var(--r-chico) var(--r-chico) 0 0;
  padding: 9px 13px;
}
.marco-barra span { width: 8px; height: 8px; border-radius: 50%; background: var(--borde-vivo); flex: none; }
.marco-barra p {
  margin: 0 0 0 10px; font-size: .74rem; color: var(--texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.marco-pantalla {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 0 0 var(--r-chico) var(--r-chico);
  overflow: hidden;
}

.marco-pantalla .vista {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s,
              object-position 4s cubic-bezier(.4, 0, .5, 1);
}
.marco-pantalla .vista.activa { opacity: 1; visibility: visible; }

/* La captura larga recorre la página entera mientras el cursor esté encima. */
.caso:hover .vista.activa.larga { object-position: 50% 100%; }

.caso-texto { padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.caso-texto h3 { margin: 0; }
.caso-texto > p { margin: 0; color: var(--texto-2); font-size: .94rem; }

/* Conmutador de vistas del caso */
.caso-vistas { display: flex; gap: 6px; flex-wrap: wrap; }
.caso-vistas button {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--r-pill);
  color: var(--texto-2);
  font: 500 .84rem/1 var(--sans);
  padding: 9px 16px; cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.caso-vistas button:hover { color: var(--texto); border-color: var(--borde-vivo); }
.caso-vistas button[aria-pressed="true"] {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

.caso-meta {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 !important; font-size: .78rem; color: var(--texto-3);
}
.caso-meta span { border: 1px solid var(--borde); border-radius: var(--r-pill); padding: 5px 11px; }

.caso-texto .enlace-flecha { margin-top: auto; }

/* Labs en la cabecera: separado de las pestañas por una línea, para que se
   lea como otro lugar y no como una pestaña más. */
.nav .nav-labs { margin-left: 4px; padding-left: 18px; position: relative; }
.nav .nav-labs::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 1px; height: 20px; background: var(--borde);
}

@media (prefers-reduced-motion: reduce) {
  .caso:hover { transform: none; }
  .caso:hover .vista.activa.larga { object-position: 50% 0; }
}

@media (max-width: 760px) {
  .nav .nav-labs { display: inline-flex; }
}

/* ── Catálogo de Labs ─────────────────────────────────────────────────
   Rejilla de sistemas con su video andando, y una ficha que se abre
   dentro de la misma consola. No se sale de Labs en ningún momento.    */

.cat-fichas {
  display: grid; gap: 14px;
  margin-top: clamp(24px, 3vw, 34px);
  text-align: left;
}
@media (min-width: 720px) { .cat-fichas { grid-template-columns: 1fr 1fr; } }

.cat-ficha-mini {
  display: block; width: 100%; text-align: left;
  background: rgba(10,15,25,.76); backdrop-filter: blur(8px);
  border: 1px solid var(--borde); border-radius: var(--r-card);
  padding: 0; overflow: hidden; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cat-ficha-mini:hover {
  border-color: rgba(92,161,255,.5); transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(92,161,255,.14);
}
.cat-ficha-vacia { border-style: dashed; cursor: default; }
.cat-ficha-vacia:hover { transform: none; box-shadow: none; border-color: var(--borde); }

.cat-mini-media {
  aspect-ratio: 16 / 10; background: #070B12;
  border-bottom: 1px solid var(--borde);
  display: grid; place-items: center; overflow: hidden;
}
.cat-mini-media video,
.cat-mini-media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.cat-mini-media span { font-size: .84rem; color: var(--texto-3); }

.cat-mini-cuerpo { padding: clamp(16px, 2vw, 22px); }
.cat-mini-cuerpo h3 { margin: 0 0 5px; font-size: 1.1rem; }
.cat-mini-cuerpo p { margin: 0; font-size: .9rem; color: var(--texto-2); }

/* ── Ficha abierta ────────────────────────────────────────────────────── */

.cat-detalle[hidden] { display: none; }
.cat-detalle { text-align: left; }

.cat-volver {
  background: none; border: 1px solid var(--borde); border-radius: var(--r-pill);
  color: var(--texto-2); font: 500 .85rem/1 var(--sans);
  padding: 9px 16px; cursor: pointer; margin-bottom: 18px;
  transition: color .2s ease, border-color .2s ease;
}
.cat-volver:hover { color: var(--azul-claro); border-color: rgba(92,161,255,.5); }

.cat-escena { display: grid; gap: clamp(18px, 2.4vw, 28px); }
@media (min-width: 860px) { .cat-escena { grid-template-columns: 1.35fr 1fr; align-items: start; } }

.cat-media {
  background: #070B12;
  border: 1px solid var(--borde); border-radius: var(--r-card);
  overflow: hidden; aspect-ratio: 16 / 10;
}
.cat-media video,
.cat-media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

.cat-ficha h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 10px; }
.cat-para { color: var(--texto-2); margin-bottom: 18px; }

.cat-funciones { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.cat-funciones li { position: relative; padding-left: 22px; color: var(--texto-2); font-size: .93rem; }
.cat-funciones li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border: 1.5px solid var(--azul-claro); border-radius: 2px;
}

.cat-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.labs-boton-suave {
  background: transparent; color: var(--azul-claro);
  border: 1px solid rgba(92,161,255,.4);
}
.labs-boton-suave:hover { background: rgba(92,161,255,.10); box-shadow: none; }

@media (prefers-reduced-motion: reduce) { .cat-ficha-mini:hover { transform: none; } }

/* ── La baraja de servicios ───────────────────────────────────────────
   Tomado del carrusel de Moonsight: tarjetas verticales de esquina muy
   redondeada, con la imagen a sangre y el texto encima abajo. La
   interacción es la de Byron: al tocar una, esa se va a la izquierda,
   las otras se encogen a tiras, y la información sale a la derecha.
   ------------------------------------------------------------------ */

.baraja { display: flex; gap: 14px; align-items: stretch; }

.carta {
  flex: 1 1 0; min-width: 0;
  order: 2;
  transition: flex-basis .55s cubic-bezier(.3,.9,.25,1),
              flex-grow .55s cubic-bezier(.3,.9,.25,1);
}

.carta-cara {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; height: 100%; min-height: clamp(300px, 36vw, 420px);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-bloque);
  padding: clamp(18px, 2.2vw, 26px);
  overflow: hidden; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transition: border-color .3s ease, transform .3s ease;
}
.carta-cara:hover { border-color: var(--borde-vivo); transform: translateY(-3px); }

/* La imagen va a sangre detrás del texto. Mientras no haya fotografía,
   cada tarjeta lleva su propio tratamiento con la paleta de la marca. */
.carta-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.carta-img[data-img="web"] {
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, rgba(92,161,255,.34), transparent 70%),
    repeating-linear-gradient(136deg, transparent 0 26px, rgba(92,161,255,.10) 26px 27px),
    linear-gradient(180deg, #16233C 0%, #0A1120 100%);
}
.carta-img[data-img="sistemas"] {
  background:
    radial-gradient(ellipse 60% 50% at 70% 25%, rgba(31,87,255,.42), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(92,161,255,.08) 22px 23px),
    linear-gradient(180deg, #121C33 0%, #090E1A 100%);
}
.carta-img[data-img="google"] {
  background:
    radial-gradient(circle at 50% 30%, rgba(92,161,255,.40), transparent 62%),
    repeating-radial-gradient(circle at 50% 30%, transparent 0 34px, rgba(92,161,255,.09) 34px 35px),
    linear-gradient(180deg, #101A2E 0%, #080D18 100%);
}
.carta-cara:hover .carta-img { transform: scale(1.04); }

/* Degradado para que el texto se lea siempre sobre la imagen. */
.carta-cara::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(5,8,14,.86) 100%);
}
.carta-cara > *:not(.carta-img) { position: relative; z-index: 1; }

.carta-n { color: var(--azul-claro); font-weight: 500; font-size: .9rem; margin-bottom: 8px; }
.carta-titulo { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.22; letter-spacing: -.02em; }
.carta-pie { margin-top: 6px; font-size: .88rem; color: var(--texto-2); }

/* ── Estado abierto ───────────────────────────────────────────────── */

.baraja.abierta .carta { flex: 0 0 76px; order: 1; }
.baraja.abierta .carta.activa { flex: 0 0 clamp(210px, 22vw, 290px); order: 2; }

/* Las tiras giran su título para que se siga sabiendo qué son. */
.baraja.abierta .carta:not(.activa) .carta-titulo {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .86rem; max-height: 14em; overflow: hidden;
}
.baraja.abierta .carta:not(.activa) .carta-pie,
.baraja.abierta .carta:not(.activa) .carta-n { display: none; }
.baraja.abierta .carta:not(.activa) .carta-cara { padding: 18px 12px; align-items: center; }
.baraja.abierta .carta:not(.activa) .carta-img { opacity: .5; }

.panel {
  order: 3; flex: 1 1 auto; min-width: 0;
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-bloque);
  padding: clamp(22px, 2.6vw, 36px);
  animation: panel-entra .5s cubic-bezier(.2,.8,.2,1);
}
.panel[hidden] { display: none; }
@keyframes panel-entra { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.panel-cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 50%;
  color: var(--texto-2); font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.panel-cerrar:hover { color: var(--texto); border-color: var(--borde-vivo); }

.panel-vista[hidden] { display: none; }
.panel-vista h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-bottom: 10px; padding-right: 40px; }
.panel-vista > p { color: var(--texto-2); margin-bottom: 18px; max-width: 54ch; }
.panel-vista ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 11px; }
.panel-vista li { position: relative; padding-left: 22px; color: var(--texto-2); font-size: .93rem; line-height: 1.5; }
.panel-vista li b { color: var(--texto); font-weight: 500; }
.panel-vista li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 8px; height: 8px; border: 1.5px solid var(--azul-claro); border-radius: 2px;
}

/* ── En teléfono no hay a dónde irse a la izquierda ───────────────────
   La baraja se apila y el panel sale debajo de la tarjeta tocada.      */
@media (max-width: 860px) {
  .baraja { flex-direction: column; }
  .carta, .baraja.abierta .carta, .baraja.abierta .carta.activa { flex: 0 0 auto; order: 2; }
  .carta-cara { min-height: 180px; }
  .baraja.abierta .carta:not(.activa) .carta-titulo { writing-mode: horizontal-tb; transform: none; font-size: 1.05rem; }
  .baraja.abierta .carta:not(.activa) .carta-cara { padding: clamp(18px,2.2vw,26px); align-items: flex-start; }
  .baraja.abierta .carta:not(.activa) .carta-img { opacity: 1; }
  .panel { order: 3; }
  .baraja.abierta .carta.activa { order: 1; }
  @keyframes panel-entra { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .carta, .carta-cara:hover, .carta-cara:hover .carta-img { transition: none; transform: none; }
  .panel { animation: none; }
}