/* ==========================================================================
   JAMPAD SOLUCIONES S.A.S.
   Sistema visual. Un solo acento (turquesa), un solo sistema de esquinas:
   botones en pildora, tarjetas e imagenes 16px, campos 10px.
   ========================================================================== */

/* --- Tipografias auto-alojadas ------------------------------------------ */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Fichas de color ----------------------------------------------------
 * La pagina es CLARA. El azul marino deja de ser el fondo y pasa a ser lo que
 * siempre debio ser: el color del texto y de los acentos de la marca.
 *
 * Ojo con el turquesa: #2aafbc sobre blanco da 3,3 de contraste, insuficiente
 * para texto. Por eso hay dos turquesas distintos: uno para RELLENOS (botones,
 * iconos), donde el contraste lo da el fondo del propio elemento, y otro mas
 * oscuro para TEXTO y trazos finos.
 * --------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Marca */
  --marino-hondo: #0a1c35;   /* paneles y bandas oscuras puntuales */
  --marino: #14325c;
  --marino-claro: #1f4c86;
  --acento: #12717f;         /* texto y trazos finos: 5,2 de contraste */
  --acento-vivo: #2aafbc;    /* rellenos */
  --acento-brillo: #0d5f6b;  /* el acento mas firme, para realzar sobre claro */
  /* Las franjas fotograficas siguen siendo oscuras aunque la pagina sea
     clara. Ahi el acento oscuro no se lee: hace falta el turquesa vivo. */
  --acento-sobre-foto: #6ff0e4;

  /* Superficies */
  --fondo: #ffffff;
  --fondo-2: #f2f6fa;        /* la seccion alterna, apenas separada */
  --superficie: #ffffff;
  --borde: #dbe4ee;
  --texto: #0b1c33;
  --texto-2: #4d6377;

  /* Antes eran "sobre oscuro". Ahora la pagina es clara y estas fichas
     significan lo mismo que las de arriba: por eso valen igual. */
  --texto-fuerte: #0b1c33;
  --texto-suave: #4d6377;
  --borde-sutil: #dbe4ee;

  /* Para los dibujos SVG, que ahora van sobre claro */
  --trazo: #14325c;
  --trazo-suave: #93a9c2;

  --radio: 16px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(11, 28, 51, 0.05), 0 12px 32px -14px rgba(11, 28, 51, 0.16);
  --sombra-alta: 0 2px 4px rgba(11, 28, 51, 0.06), 0 26px 56px -20px rgba(11, 28, 51, 0.22);

  --ancho: 1240px;
  --aire: clamp(4.5rem, 9vw, 7.5rem);
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  --curva-mov: cubic-bezier(0.77, 0, 0.175, 1);

  /* Añadidos para la capa interactiva. El turquesa sigue siendo la marca;
     estos dos son acompañamiento, y solo aparecen en degradados, en el cursor
     y en la banda oscura. Si tiñeran texto de cuerpo, la identidad se
     desdibuja. */
  --electrico: #3b6ef5;      /* azul eléctrico */
  --violeta: #7c5cd6;        /* violeta de innovación */
  --tinta-oscura: #060d1a;   /* la banda técnica, la única zona oscura */
}

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

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

html:focus-within { scroll-behavior: smooth; }
/* La barra mide 71 px y esta pegada arriba. Sin esta reserva, el ancla lleva
   el titulo justo debajo de ella y no se ve. Vale igual para el salto por
   teclado, donde ademas taparia el elemento enfocado. */
html { scroll-padding-top: 4.9rem; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: 'Outfit', 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* figure trae margen propio del navegador. Se quita aqui y no con un
   style= en linea, porque la politica de contenido de nginx no permite
   estilos en linea. */
figure { margin: 0; }

a { color: inherit; }

::selection { background: var(--acento-vivo); color: #04121f; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--acento-vivo);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

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

/* --- Marca -------------------------------------------------------------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.marca__iso { width: 34px; height: 34px; flex-shrink: 0; }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nombre {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.01em;
  color: var(--texto-fuerte);
}
.marca__cola {
  font-family: 'Outfit', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--acento-brillo);
  margin-top: 3px;
}

/* --- Botones ------------------------------------------------------------ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: 'Geist', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--curva), background-color 160ms ease,
    border-color 160ms ease, box-shadow 160ms var(--curva);
}
.boton svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }
.boton:active { transform: scale(0.97); }

.boton--principal {
  background: var(--acento-vivo);
  color: #05161f;
  box-shadow: 0 10px 26px -12px rgba(42, 175, 188, 0.85);
}
@media (hover: hover) and (pointer: fine) {
  .boton--principal:hover {
    /* El fondo se oscurece, asi que el texto TIENE que aclararse. Dejarlo
       casi negro daba 2,5 de contraste: el boton se volvia ilegible justo
       cuando el visitante lo esta mirando. */
    background: var(--acento-brillo);
    color: #ffffff;
    box-shadow: 0 16px 34px -14px rgba(13, 95, 107, 0.7);
    transform: translateY(-2px);
  }
}
.boton--principal:active { transform: translateY(0) scale(0.97); }

.boton--fantasma {
  background: transparent;
  color: var(--texto-fuerte);
  border-color: var(--borde-sutil);
}
@media (hover: hover) and (pointer: fine) {
  .boton--fantasma:hover {
    border-color: var(--acento-brillo);
    color: var(--acento-brillo);
    transform: translateY(-2px);
  }
}

.boton--chico { padding: 0.6rem 1.15rem; font-size: 0.88rem; }

/* --- Barra de navegacion ------------------------------------------------ */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fondo);
  border-bottom: 1px solid transparent;
  transition: box-shadow 250ms ease, background-color 250ms ease, border-color 250ms ease;
}
.barra.esta-abajo {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--borde);
  box-shadow: 0 8px 24px -20px rgba(11, 28, 51, 0.5);
}
@supports not (backdrop-filter: blur(1px)) {
  .barra.esta-abajo { background: var(--fondo); }
}
.barra__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: 70px;
  /* 260 ms: el encogido acompaña al scroll, no responde a un clic. Más rápido
     se percibe como un salto de maquetación. */
  transition: height 260ms var(--curva);
}
.esta-abajo .barra__caja { height: 58px; }
.marca__iso { transition: transform 260ms var(--curva); }
.esta-abajo .marca__iso { transform: scale(0.86); }
.barra__enlaces {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-left: auto;
}
.barra__enlace {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .barra__enlace:hover { color: var(--texto-fuerte); border-bottom-color: var(--acento-vivo); }
}

.barra__menu {
  display: none;
  background: transparent;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-chico);
  padding: 0.5rem;
  cursor: pointer;
  color: var(--texto-fuerte);
  transition: transform 160ms var(--curva), border-color 160ms ease,
    color 160ms ease;
}
/* 0,95 y no 0,97: en un cuadro de 38 px el 3 % no se ve. */
.barra__menu:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .barra__menu:hover { border-color: var(--acento-vivo); color: var(--acento-brillo); }
}
.barra__menu svg { width: 22px; height: 22px; stroke: currentColor; }

@media (max-width: 900px) {
  .barra__enlaces {
    position: fixed;
    inset: 70px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 20px 40px -28px rgba(11, 28, 51, 0.6);
    padding: 0.5rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms var(--curva), transform 200ms var(--curva), visibility 200ms;
  }
  .barra__enlaces.esta-abierto { opacity: 1; visibility: visible; transform: translateY(0); }
  .barra__enlace { padding: 0.85rem 0; border-bottom: 1px solid var(--borde-sutil); }
  .barra__enlaces .boton { margin-top: 1rem; }
  .barra__menu { display: inline-flex; }
}

/* --- Portada ------------------------------------------------------------ */
.portada {
  position: relative;
  background: var(--fondo);
  color: var(--texto);
  padding-block: clamp(2rem, 3.5vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.portada::before {
  content: '';
  position: absolute;
  inset: -30% 45% auto -10%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(42, 175, 188, 0.09), transparent);
  pointer-events: none;
}
.portada__caja {
  position: relative;
  display: block;
}
.portada__cara { max-width: 44rem; }

/* La parte de arriba de la portada va a dos columnas: el mensaje a la
   izquierda, la animacion de la marca a la derecha. La fotografia del producto
   sigue debajo, a todo el ancho. */
.portada__arriba {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.portada__arriba .portada__cara { max-width: none; }

.portada__video {
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--marino-hondo);
  border: 1px solid var(--borde);
  box-shadow: 0 24px 56px -28px rgba(11, 28, 51, 0.45);
}
.portada__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) {
  .portada__arriba { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* La fotografia del producto, a todo el ancho del contenedor. Con proporcion
   2.8 en una columna estrecha los equipos se verian diminutos. */
.portada__producto {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde-sutil);
  box-shadow: 0 30px 70px -34px rgba(11, 28, 51, 0.4);
}
.portada__producto img { width: 100%; height: auto; display: block; }

/* En pantalla angosta la proporcion 2.85 dejaria los equipos en 120 px de
   alto, ilegibles. Se recorta a un encuadre mas alto centrado en el portatil
   y el telefono, que es lo que hay que poder distinguir. */
@media (max-width: 700px) {
  .portada__producto { aspect-ratio: 16 / 11; }
  .portada__producto img {
    height: 100%;
    object-fit: cover;
    object-position: 34% center;
  }
}
.portada__titulo {
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  font-weight: 600;
  max-width: 23ch;
}
.portada__titulo em {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(100deg, var(--acento-brillo), var(--acento-vivo) 65%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.portada__bajada {
  margin-top: 1.5rem;
  max-width: 33rem;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  color: var(--texto-suave);
}
.portada__acciones {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}



/* --- Paginas de sector --------------------------------------------------
 * La portada interior es mas baja que la de inicio: aqui el visitante ya sabe
 * donde esta y viene buscando algo concreto, no que lo convenzan de quedarse.
 * --------------------------------------------------------------------- */
.portada--interior { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
.portada--interior .portada__titulo { font-size: clamp(1.95rem, 3.8vw, 3rem); }
.portada--interior .portada__video { aspect-ratio: 4 / 3; }
.portada__video img { width: 100%; height: 100%; object-fit: cover; display: block; }

.miga {
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.miga a { color: var(--acento); text-decoration: none; }
.miga span[aria-hidden] { opacity: 0.4; margin: 0 0.4rem; }

/* La pestaña de Súbase: es un producto propio, no un sector. Lleva un
   punto dorado delante para que se distinga sin gritar. */
.barra__enlace--marca { font-weight: 700; }
.barra__enlace--marca::before {
  content: "";
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: #FFC400;
  margin-right: 0.4em;
  vertical-align: 0.05em;
}

/* BET MAO'S reutiliza el punto de Súbase y sólo le cambia el color: el
   rojo de su escudo. Dos marcas nuestras en la barra, cada una con el
   suyo, se distinguen de un vistazo sin añadir ni un icono más. */
.barra__enlace--betmaos::before { background: #A31515; }

.barra__enlace--aqui {
  color: var(--acento-brillo);
  font-weight: 600;
  border-bottom: 2px solid var(--acento-vivo);
  font-size: 0.92rem;
  padding: 0.35rem 0;
}

.otros-sectores {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.otro-sector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  text-decoration: none;
  transition: transform 200ms var(--curva), border-color 200ms ease;
}
.otro-sector:active { transform: translateY(0) scale(0.99); }
.otro-sector__rotulo {
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento);
}
.otro-sector__nombre {
  font-family: 'Outfit', sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--texto);
  line-height: 1.25;
}
@media (hover: hover) and (pointer: fine) {
  .otro-sector:hover { transform: translateY(-4px); border-color: var(--acento-vivo); }
  .miga a:hover { text-decoration: underline; }
}

/* --- Recursos tipograficos ---------------------------------------------
 * El titular va a dos cajas y dos tonos: la primera linea en versales, la
 * segunda en minuscula y apagada. La tension entre las dos es lo que hace que
 * un titular grande no se sienta como un grito.
 * --------------------------------------------------------------------- */
.titular__alto {
  display: block;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--texto);
}
.titular__bajo {
  display: block;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--texto-2);
}
.titular__bajo--vivo { color: var(--acento); }

/* La etiqueta que abre una seccion. Monoespaciada y con marcas a los lados:
   se lee como una anotacion tecnica, no como un titulo mas. */
.etiqueta {
  display: block;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1.1rem;
}
.etiqueta::before { content: '> '; opacity: 0.55; }
.etiqueta::after { content: ' <'; opacity: 0.55; }

/* --- Fila numerada, sin cajas ------------------------------------------- */
.numerada {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.numerada > div { border-top: 1px solid var(--borde); padding-top: 1.1rem; }
.numerada b {
  display: block;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--acento);
  margin-bottom: 0.75rem;
}
.numerada h3 { font-size: 1.06rem; margin-bottom: 0.45rem; }
.numerada p { font-size: 0.9rem; color: var(--texto-2); }

/* Seis puntos en cuatro columnas dan 4+2 y un hueco. En tres columnas dan
   3+3, que es una rejilla completa. */
.numerada--tres { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 860px) {
  .numerada, .numerada--tres { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .numerada, .numerada--tres { grid-template-columns: 1fr; }
}

/* --- Preguntas: acordeon nativo ----------------------------------------
 * <details> y <summary> del navegador: funciona con teclado, lo entiende un
 * lector de pantalla y no necesita una linea de JavaScript. La altura se
 * anima con el truco de grid-template-rows, porque la altura "auto" no se
 * puede transicionar.
 * --------------------------------------------------------------------- */
.preguntas { margin-top: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px solid var(--borde); }

.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  font-weight: 600;
  color: var(--texto);
  transition: color 160ms ease;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: '';
  flex-shrink: 0;
  width: 13px; height: 13px;
  margin-top: 0.4rem;
  border-right: 2px solid var(--acento);
  border-bottom: 2px solid var(--acento);
  transform: rotate(45deg);
  transition: transform 250ms var(--curva);
}
.pregunta[open] summary::after { transform: rotate(-135deg); }
.pregunta__caja {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms var(--curva);
}
.pregunta[open] .pregunta__caja { grid-template-rows: 1fr; }
.pregunta__caja > div { overflow: hidden; }
.pregunta__caja p {
  max-width: 58ch;
  padding-bottom: 1.4rem;
  color: var(--texto-2);
  font-size: 0.97rem;
}
@media (hover: hover) and (pointer: fine) {
  .pregunta summary:hover { color: var(--acento); }
}
@media (prefers-reduced-motion: reduce) {
  .pregunta__caja { transition: none; }
}

/* --- Rejilla de capacidades (bento) ------------------------------------- */
.bento {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.celda {
  position: relative;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  overflow: hidden;
  transition: transform 200ms var(--curva), box-shadow 200ms var(--curva),
    border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .celda:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-alta);
    border-color: color-mix(in srgb, var(--acento-vivo) 45%, var(--borde));
  }
  .ficha:hover { transform: translateY(-4px); border-color: var(--acento-vivo); }
  .canal:hover {
    transform: translateY(-4px);
    border-color: var(--acento-brillo);
    background: #eefafb;
  }
  .pie a:hover { color: var(--acento-brillo); }
}
.celda h3 {
  font-size: 1.28rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.celda p { color: var(--texto-2); font-size: 0.97rem; }
.celda__icono {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radio-chico);
  background: color-mix(in srgb, var(--acento-vivo) 14%, transparent);
  margin-bottom: 1.1rem;
}
.celda__icono svg { width: 22px; height: 22px; fill: var(--acento); }

/* Marca una imagen como ilustracion. Va donde se muestra interfaz que no es
   una captura del sistema corriendo: si no se dice, el visitante asume que
   esta viendo el producto de verdad. */
.celda__nota {
  display: block;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento-brillo);
  opacity: 0.85;
  margin-bottom: 0.5rem;
}


.celda--marca {
  grid-column: span 3;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--borde);
  color: var(--texto);
  background:
    radial-gradient(120% 100% at 12% 4%, rgba(42, 175, 188, 0.14), transparent 62%),
    linear-gradient(150deg, #f3fbfc, #ffffff 68%);
}
.celda--marca--sistema {
  background:
    radial-gradient(130% 110% at 88% 6%, rgba(47, 111, 181, 0.14), transparent 62%),
    linear-gradient(210deg, #f2f7fd, #ffffff 70%);
}
.celda--marca p { color: var(--texto-2); }

/* El grafico ocupa la mitad de arriba; el texto vive abajo sobre el
   degradado. Nada de capa oscura encima de una captura clara: aqui el dibujo
   YA esta en la paleta de la pagina, asi que no hay que apagarlo para que el
   texto se lea. */
.celda__grafico {
  position: absolute;
  inset: 0 0 auto 0;
  height: 58%;
  z-index: 0;
  padding: 0.5rem 0.75rem 0;
  pointer-events: none;
}
.celda__grafico svg { width: 100%; height: 100%; }
.celda--marca > *:not(.celda__grafico) { position: relative; z-index: 1; }

/* En las celdas chicas el dibujo REEMPLAZA al icono: en 340 px de ancho no
   caben los dos, y un diagrama dice mas que un pictograma generico. */
.celda__mini { margin-bottom: 1.2rem; }
.celda__mini svg { width: 100%; height: auto; max-width: 320px; display: block; }

.celda--tercio { grid-column: span 2; }

/* Cuatro tarjetas en una rejilla de tres dejan una huerfana en la segunda
   fila. A media celda quedan 2x2, que es una forma y no un sobrante. */
.celda--mitad { grid-column: span 3; }
@media (max-width: 900px) { .celda--mitad { grid-column: span 2; } }
@media (max-width: 620px) { .celda--mitad { grid-column: span 1; } }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .celda--marca { grid-column: span 2; min-height: 280px; }
  .celda--tercio { grid-column: span 1; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .celda--marca, .celda--tercio { grid-column: span 1; }
}


/* --- Casos: lo que ya esta funcionando ---------------------------------- */
.casos {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.caso {
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.caso--ancho { grid-column: span 7; }
.caso--angosto { grid-column: span 5; }

.caso__foto {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.caso__foto img {
  position: absolute;
  left: 0; right: 0; top: -9%;
  width: 100%; height: 118%;
  object-fit: cover;
}
.caso__cuerpo { padding: clamp(1.5rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; flex: 1; }
.caso__sector {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.7rem;
}
.caso h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); margin-bottom: 0.7rem; }
.caso p { color: var(--texto-2); font-size: 0.97rem; }
.caso__hechos {
  margin-top: auto;
  padding-top: 1.5rem;
  display: grid;
  gap: 0.7rem;
}
.caso__hechos > div { display: flex; gap: 0.7rem; align-items: baseline; }
.caso__hechos dt {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--acento);
  white-space: nowrap;
  min-width: 6.6rem;
}
.caso__hechos dd { margin: 0; font-size: 0.92rem; color: var(--texto-2); }

/* El mapa es de verdad: lo dibuja la geometria que devuelve el ruteador. */
.mapa {
  grid-column: span 12;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  background:
    radial-gradient(90% 120% at 50% 0%, #eef5fb, #ffffff 72%);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  color: var(--texto);
}
.mapa h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin-bottom: 0.8rem; }
.mapa p { color: var(--texto-2); font-size: 0.97rem; }
.mapa svg { width: 100%; height: auto; }
.mapa__pie {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--texto-2);
  border-left: 2px solid var(--acento-vivo);
  padding-left: 0.85rem;
}

@media (max-width: 980px) {
  .caso--ancho, .caso--angosto { grid-column: span 12; }
  .mapa { grid-template-columns: 1fr; }
}

/* --- Franja de imagen completa ------------------------------------------ */
.franja {
  position: relative;
  isolation: isolate;
  /* La foto de fondo crece con el parallax hasta 1,18x. Sin recorte, en
     cuanto el visitante baja mas alla de la franja la pagina gana 130 px de
     scroll LATERAL, y en un telefono se mueve de lado. Estuvo semanas asi sin
     verse: todas las comprobaciones de desbordamiento se hacian con la pagina
     arriba del todo, antes de que la foto empezara a crecer. */
  overflow: hidden;
  padding-block: clamp(5rem, 12vw, 9rem);
  color: #f4f9fd;
  text-align: center;
}
.franja img {
  position: absolute;
  left: 0; right: 0;
  top: -15%;
  z-index: -2;
  width: 100%; height: 130%;   /* la franja lleva el parallax mas largo */
  object-fit: cover;
}
.franja::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 22, 42, 0.9), rgba(7, 22, 42, 0.78));
}
/* La franja del sector deja respirar la fotografia: la mancha se concentra
   en la banda del texto y se abre arriba y abajo, donde esta la torre. */
.franja--sector::after {
  background: linear-gradient(180deg,
    rgba(7, 22, 42, 0.68), rgba(7, 22, 42, 0.9) 42%,
    rgba(7, 22, 42, 0.86) 62%, rgba(7, 22, 42, 0.52));
}
.franja__texto {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 18ch;
  margin-inline: auto;
}
.franja__texto em {
  font-style: normal;
  color: var(--acento-sobre-foto);
}
.franja__pie {
  margin-top: 1.5rem;
  margin-inline: auto;
  max-width: 52ch;
  color: #b9d0e4;
  font-size: 1.03rem;
}

/* --- Enfoque: dos columnas ---------------------------------------------- */
.enfoque {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.enfoque__foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.enfoque__foto { position: relative; }
.enfoque__foto img {
  position: absolute;
  left: 0; right: 0;
  top: -11%;
  width: 100%; height: 122%;
  object-fit: cover;
}

.lista-marcas { margin-top: 1.9rem; display: grid; gap: 1.1rem; }
.lista-marcas > div { display: flex; gap: 0.9rem; align-items: flex-start; }
.lista-marcas svg {
  width: 21px; height: 21px;
  fill: var(--acento);
  flex-shrink: 0;
  margin-top: 3px;
}
.lista-marcas strong { font-weight: 600; display: block; }
.lista-marcas span { color: var(--texto-2); font-size: 0.96rem; }

@media (max-width: 860px) {
  .enfoque { grid-template-columns: 1fr; }
  .enfoque__foto { max-height: 380px; }
}

/* --- Riel horizontal: para quien ---------------------------------------- */
.riel {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(255px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 1rem;
  /* el riel se sale del contenedor a proposito, para que se note que hay mas */
  margin-inline: calc(clamp(1.25rem, 4vw, 2.5rem) * -1);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.ficha {
  scroll-snap-align: start;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  padding: 1.6rem;
  min-height: 215px;
  display: flex;
  flex-direction: column;
  transition: transform 200ms var(--curva), border-color 200ms ease;
}
.ficha h3 { font-size: 1.1rem; margin-bottom: 0.55rem; }
.ficha p { color: var(--texto-2); font-size: 0.94rem; }
.ficha__num {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--acento);
  margin-bottom: auto;
  padding-bottom: 1.5rem;
}
.ficha--imagen {
  padding: 0;
  overflow: hidden;
  border: none;
  grid-row: span 1;
}
/* La ficha que lleva a una pagina de sector se comporta como enlace: se ve
   que se puede pulsar antes de pulsarla. */
.ficha--enlace { text-decoration: none; }
.ficha__ir {
  margin-top: 0.9rem;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--acento);
}
.ficha--enlace:active { transform: translateY(0) scale(0.99); }

.ficha--imagen { position: relative; }
.ficha--imagen img {
  position: absolute;
  left: 0; right: 0;
  top: -9%;
  width: 100%; height: 118%;
  object-fit: cover;
}

/* ==========================================================================
   PANTALLAS REALES DEL SISTEMA
   Cuatro capturas del telefono en fila, y debajo el mapa del centro de
   control. La captura NO lleva marco de telefono dibujado: el borde
   redondeado y la sombra ya leen como un aparato, y un marco de mas compite
   con lo unico que importa, que es lo que hay dentro de la pantalla.
   ========================================================================== */
.pantallas {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  align-items: start;
}
.pantalla { margin: 0; }
.pantalla img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  box-shadow: 0 18px 40px -26px rgba(11, 28, 51, 0.55);
}
.pantalla figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--texto-2);
  text-wrap: balance;
}

/* El aviso de que los datos son de demostracion. Va con la misma letra de
   maquina que el resto de la letra pequena del sitio: se lee como una nota al
   pie honesta y no como un descargo legal escondido. */
.aviso-datos {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 78ch;
  padding-left: 0.9rem;
  border-left: 2px solid var(--acento-vivo);
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: var(--texto-2);
}

.mapa-vivo {
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
}
.mapa-vivo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  box-shadow: 0 20px 44px -30px rgba(11, 28, 51, 0.5);
}
.mapa-vivo figcaption {
  margin-top: 0.9rem;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texto-2);
}

/* En tableta las cuatro pantallas se quedan en dos filas de dos: a un cuarto
   de pantalla ya no se lee lo que hay dentro, que es justo el argumento. */
@media (max-width: 900px) {
  .pantallas { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; }
}
/* El corte va en 560 y no en 480: a 500 px de ancho todavia caben dos
   columnas de 215 px, y a ese tamano la pantalla del telefono ya no se lee,
   que es exactamente lo que se venia a ensenar. Mejor una sola, grande. */
@media (max-width: 560px) {
  .pantallas { grid-template-columns: 1fr; gap: 1.75rem; justify-items: center; }
  .pantalla img { max-width: 320px; }
  .pantalla figcaption { max-width: 320px; }
}

/* --- Contacto ----------------------------------------------------------- */
.contacto {
  background: var(--fondo);
  color: var(--texto);
  padding-block: var(--aire);
  position: relative;
  overflow: hidden;
}
.contacto::before {
  content: '';
  position: absolute;
  inset: auto -5% -60% 30%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(42, 175, 188, 0.1), transparent);
  pointer-events: none;
}
.contacto__caja { position: relative; }
.contacto .titular { color: var(--texto-fuerte); }
.contacto .entrada { color: var(--texto-suave); }

/* --- La entrada de seccion ----------------------------------------------
 * El parrafo que va bajo el titular. No tenia NINGUNA regla propia, asi que
 * se estiraba los 1160 px del contenedor: 144 caracteres por renglon, medidos.
 * Lo comodo son 60-75; pasados los 80, al saltar de renglon el ojo pierde por
 * donde iba y hay que releer.
 *
 * Sobre la unidad: 'ch' es el ancho del cero, mas gordo que la letra media,
 * asi que rinde de mas. Aqui 58ch caen en unos 76 caracteres reales. */
.entrada {
  max-width: 58ch;
}

/* --- Pausa del video de portada -----------------------------------------
 * El video dura 4,6 s y se repite sin fin. Movimiento que arranca solo y no
 * para necesita una forma de pararlo; quien no tiene configurado "menos
 * movimiento" en su sistema no tenia ninguna.
 *
 * El boton lo CREA main.js, no el HTML: un boton de pausa que existe cuando
 * el guion no ha cargado seria un control que se deja pulsar y no hace nada,
 * que es peor que no tenerlo. */
.portada__video { position: relative; }
.portada__pausa {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  width: 40px; height: 40px;      /* holgado sobre los 24 px que pide la norma */
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(7, 22, 42, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms ease, transform 160ms var(--curva),
    border-color 160ms ease;
}
.portada__pausa svg { width: 15px; height: 15px; fill: currentColor; }
.portada__pausa:active { transform: scale(0.94); }
/* Se aclara al pasar por encima, pero tambien al recibir el foco y mientras
   el video esta parado: si no, quien lo paro no encuentra como reanudarlo. */
.portada__pausa:focus-visible,
.portada__video:hover .portada__pausa,
.portada__pausa[aria-pressed="true"] { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .portada__pausa:hover { opacity: 1; border-color: rgba(255, 255, 255, 0.6); }
}

.canales {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.canal {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.6rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  text-decoration: none;
  transition: transform 200ms var(--curva), border-color 200ms ease,
    background-color 200ms ease;
}
.canal:active { transform: translateY(0) scale(0.99); }
.canal__icono { width: 26px; height: 26px; fill: var(--acento-brillo); margin-bottom: 0.5rem; }
.canal__rotulo { font-size: 0.82rem; letter-spacing: 0.06em; color: var(--texto-suave); }
.canal__dato {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--texto-fuerte);
  word-break: break-word;
}
.canal__nota { font-size: 0.86rem; color: var(--texto-suave); }

/* --- Pie ---------------------------------------------------------------- */
.pie {
  background: var(--fondo-2);
  color: var(--texto-suave);
  border-top: 1px solid var(--borde);
  padding-block: 2.5rem;
  font-size: 0.9rem;
}
.pie__caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.pie__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; }
.pie a { color: var(--texto-suave); text-decoration: none; }


/* --- Aparicion al desplazar --------------------------------------------- */
/* Las apariciones las gobierna GSAP desde main.js. Aqui NO se esconde nada:
   si el guion fallara, la pagina se ve completa en vez de quedar en blanco.
   Lo unico que se declara es la pista de aceleracion. */
.aparece { will-change: opacity, transform; }
.aparece.animacion-lista { will-change: auto; }

/* La imagen que se expande al desplazar. La pista se libera al terminar. */
.parallax { will-change: transform; }

/* Cada palabra del titular se anima por separado; para transformarse tiene
   que dejar de ser texto suelto. El padding evita que se recorte la 'g'. */
.palabra { display: inline-block; padding-bottom: 0.06em; }

@media (prefers-reduced-motion: reduce) {
  /* Se quita el MOVIMIENTO, no las transformaciones.
     Aqui hubo un fallo que costo entender: un "transform: none !important"
     global tambien borraba transformaciones estructurales, como el giro de 45
     grados que convierte dos bordes en la flecha del acordeon. Resultado: quien
     pedia movimiento reducido se quedaba sin ninguna senal de abierto o cerrado.
     Lo que se desactiva es la TRANSICION del transform, no el transform. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 200ms !important;
  }
  .aparece { opacity: 1 !important; }
  .parallax { top: 0 !important; height: 100% !important; }
}


/* ==========================================================================
   ACCESO AL SISTEMA
   La banda de abajo, para quien ya es cliente. Va sobre --fondo-2, el mismo
   gris apenas separado que usan las secciones alternas: se distingue del
   contenido de venta sin gritar, que es justo lo que se quiere de una puerta
   de servicio.
   ========================================================================== */
.acceso {
  background: var(--fondo-2);
  border-top: 1px solid var(--borde);
  padding-block: clamp(2.5rem, 6vw, 3.75rem);
}

.acceso__caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}

/* El texto puede encoger, los botones no. Sin este min-width en cero, una
   caja flexible se niega a bajar del ancho de su contenido y en pantallas
   estrechas empuja la fila entera fuera de la pantalla. */
.acceso__texto { flex: 1 1 22rem; min-width: 0; }

.acceso__rotulo {
  margin: 0 0 0.35rem;
  font-family: 'Geist', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}

.acceso__titulo {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--texto);
  text-wrap: balance;
}

.acceso__nota {
  margin: 0.5rem 0 0;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--texto-2);
}

.acceso__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Los iconos heredan el color del texto del boton, para que el fantasma y
   el principal no necesiten dos reglas distintas. */
.acceso__botones .boton svg { fill: currentColor; flex: none; }

/* Lo que un telefono necesita saber ANTES de bajar tres megas: que es
   Android y cuanto pesa. Y la salida para quien no quiere instalar nada. */
.acceso__descarga {
  flex-basis: 100%;
  max-width: 60ch;   /* si no, la letra pequena se estira toda la fila */
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--texto-2);
}
.acceso__descarga a { color: var(--acento); }

/* Por debajo de 34rem los dos botones ocupan el ancho completo. Apretados
   uno al lado del otro quedan en 140 px, y "App para conductores" se parte
   en tres renglones dentro de una pastilla redonda. */
@media (max-width: 34rem) {
  .acceso__botones { width: 100%; }
  .acceso__botones .boton { flex: 1 1 100%; }
}


/* ==========================================================================
   CAPA INTERACTIVA
   Cursor propio, inclinación 3D de las tarjetas, brillo del botón principal,
   la banda oscura de demostración y los contadores.

   Regla que gobierna todo este bloque: NADA de aquí es necesario para leer la
   página. Si el guion no carga, o si el visitante pide menos movimiento, o si
   entra con un dedo en vez de un ratón, la página sigue completa y usable.
   Se añade encima, nunca se sustituye.
   ========================================================================== */

/* --- Cursor propio -------------------------------------------------------
 * Un punto que va pegado al puntero y un aro que lo persigue con inercia.
 * Solo en ratón fino: en una pantalla táctil no hay puntero que seguir, y en
 * un lector de pantalla no pinta nada. */
.cursor-punto,
.cursor-aro {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;   /* jamás debe interceptar un clic */
  border-radius: 50%;
  will-change: transform;
}
.cursor-punto {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--acento-brillo);
}
.cursor-aro {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid color-mix(in srgb, var(--electrico) 55%, transparent);
  transition: width 200ms var(--curva), height 200ms var(--curva),
    margin 200ms var(--curva), border-color 200ms ease, background-color 200ms ease;
}
/* Sobre algo pulsable el aro crece y se tiñe: el cursor deja de ser adorno y
   pasa a decir "aquí se puede hacer clic". */
.cursor-aro.esta-encima {
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-color: color-mix(in srgb, var(--acento-vivo) 75%, transparent);
  background: color-mix(in srgb, var(--acento-vivo) 10%, transparent);
}
/* El cursor del sistema se esconde SOLO cuando el propio ya está pintado. Sin
   esta clase, un fallo del guion dejaría al visitante sin ningún cursor. */
html.cursor-propio,
html.cursor-propio * { cursor: none; }
/* Excepción: donde se escribe hace falta la barra de texto de verdad. */
html.cursor-propio :where(input, textarea, [contenteditable]) { cursor: text; }

/* --- Inclinación 3D de las tarjetas -------------------------------------
 * El giro lo aplica el guion sobre el elemento; aquí solo se prepara la
 * perspectiva y se protege el texto de quedar borroso al rotar. */
.inclina {
  transform-style: preserve-3d;
  will-change: transform;
}
.inclina > * { transform: translateZ(0.01px); }

/* --- El brillo que cruza el botón principal ------------------------------
 * Un destello que barre el botón al pasar por encima. Va con ::after y
 * clip-path implícito por overflow, para no añadir un elemento al HTML. */
.boton--principal { position: relative; overflow: hidden; }
.boton--principal > * { position: relative; z-index: 1; }
.boton--principal::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .boton--principal:hover::after {
    /* 620 ms es largo para un botón, pero esto no es respuesta a una acción:
       es un adorno que acompaña al hover. La RESPUESTA al clic sigue siendo
       la de siempre, 160 ms. */
    animation: barrido 620ms var(--curva);
  }
}
@keyframes barrido {
  from { left: -60%; }
  to { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .boton--principal:hover::after { animation: none; }
}

/* --- La banda de demostración -------------------------------------------
 * La ÚNICA zona oscura de la página. El fondo blanco se queda; esto es
 * puntuación, no tema. Aquí es donde vive lo eléctrico y el cristal: una
 * banda técnica, del color de una pantalla encendida, entre dos secciones
 * claras. Lo que se enseña dentro son las capturas reales del sistema.
 * ======================================================================== */
.demo {
  position: relative;
  isolation: isolate;
  background: var(--tinta-oscura);
  color: #eaf2f9;
  overflow: hidden;
}
/* Dos manchas de color muy abiertas. Sobre negro plano el cristal no se ve;
   hace falta algo debajo que el desenfoque pueda recoger. */
.demo::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(46% 40% at 18% 22%, color-mix(in srgb, var(--electrico) 34%, transparent), transparent 70%),
    radial-gradient(40% 44% at 84% 68%, color-mix(in srgb, var(--violeta) 30%, transparent), transparent 72%),
    radial-gradient(38% 34% at 62% 8%, color-mix(in srgb, var(--acento-vivo) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.demo .etiqueta { color: var(--acento-sobre-foto); }
.demo .entrada { color: #b9cbdd; }
/* El color del titular NO lo pone .titular: lo ponen los dos <span> de
   dentro, y esos ganan por especificidad. Apuntar al padre dejaba el titular
   en azul marino sobre fondo oscuro, casi ilegible. */
.demo .titular__alto { color: #ffffff; }
.demo .titular__bajo { color: #a9c0d6; }

/* La caja fijada: a la izquierda el texto que cambia, a la derecha el
   teléfono. En pantalla ancha se fija y el scroll avanza los pasos. */
.demo__caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.demo__pasos { position: relative; }
.demo__paso {
  display: grid;
  gap: 0.55rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radio);
  border: 1px solid rgba(148, 178, 210, 0.16);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 260ms ease, background-color 260ms ease, opacity 260ms ease;
}
.demo__paso + .demo__paso { margin-top: 0.85rem; }
/* El paso que toca ahora se enciende por el BORDE y un realce, no por el
   tamaño: si creciera, empujaría a los de abajo y la lista bailaría en cada
   avance del scroll. */
.demo__paso.es-actual {
  border-color: color-mix(in srgb, var(--acento-vivo) 60%, transparent);
  background: rgba(42, 175, 188, 0.12);
}
.demo__paso:not(.es-actual) { opacity: 0.45; }
.demo__num {
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--acento-sobre-foto);
}
.demo__paso h3 { font-family: 'Outfit', sans-serif; font-size: 1.06rem; font-weight: 600; margin: 0; }
.demo__paso p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: #b9cbdd; }

/* El teléfono. Las capturas se apilan una encima de otra y se cruzan por
   opacidad: así no hay salto de maquetación al cambiar de paso. */
.demo__telefono {
  position: relative;
  width: min(300px, 100%);
  margin-inline: auto;
  aspect-ratio: 560 / 1100;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(148, 178, 210, 0.28);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.demo__telefono img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 360ms var(--curva);
}
.demo__telefono img.es-actual { opacity: 1; }

/* La barra de avance del propio recorrido. Dice cuánto falta, que es justo
   lo que una sección fijada le esconde al visitante. */
.demo__barra {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  height: 2px;
  background: rgba(148, 178, 210, 0.2);
  border-radius: 2px;
  overflow: hidden;
}
.demo__barra i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--acento-vivo), var(--electrico) 60%, var(--violeta));
}

@media (max-width: 900px) {
  /* Sin fijar: en un teléfono, atrapar el scroll para contar una historia es
     la forma más rápida de que alguien se vaya. Los pasos se leen en orden,
     cada uno con su captura. */
  .demo__caja { grid-template-columns: 1fr; }
  .demo__paso:not(.es-actual) { opacity: 1; }
  .demo__telefono { order: -1; }
}

/* --- Contadores ----------------------------------------------------------
 * Cifras que la página ya afirma en otras secciones. No se inventa ninguna.
 * ======================================================================== */
.metricas {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.metrica {
  padding: 1.75rem 1.5rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
}
.metrica__cifra {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  /* Sin esto, cada cifra tiene un ancho distinto y la fila entera se mueve
     mientras los contadores suben. */
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--acento-brillo), var(--electrico) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.metrica__que {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--texto-2);
  max-width: 24ch;
}

/* ==========================================================================
   APUESTAS DEPORTIVAS (BET MAO'S)
   El producto es oscuro y la página es clara: las capturas se enseñan como lo
   que son, pantallas encendidas, con borde y sombra, sin marco dibujado.
   ========================================================================== */
.apuestas__tienda { margin: clamp(2.25rem, 4vw, 3.25rem) 0 0; }
.apuestas__tienda img,
.apuestas__movil img,
.apuestas__recorte img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: #141110;       /* el fondo del propio producto, mientras carga */
  box-shadow: 0 22px 50px -30px rgba(11, 28, 51, 0.55);
}
.apuestas__tienda figcaption,
.apuestas__recorte figcaption {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--texto-2);
  max-width: 70ch;
}

.apuestas__caja {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
/* Seis puntos en dos columnas: cada uno es una razón, no una tarjeta. Van
   separados por una línea arriba, no encerrados en cajas: seis cajas iguales
   al lado de tres capturas convierten la sección en un tablero de fichas. */
.apuestas__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
}
.apuestas__punto {
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}
.apuestas__punto h3 {
  margin: 0 0 0.45rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--texto);
}
.apuestas__punto p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--texto-2); }

/* A la derecha: el teléfono y, al lado, los dos recortes apilados. */
.apuestas__piezas {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.apuestas__movil { margin: 0; grid-row: span 2; }
.apuestas__movil img { border-radius: 20px; }
.apuestas__recorte { margin: 0; }

.apuestas__acciones { margin-top: 1.25rem; }

@media (max-width: 980px) {
  .apuestas__caja { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .apuestas__lista { grid-template-columns: 1fr; }
  .apuestas__piezas { grid-template-columns: 1fr; }
  .apuestas__movil { grid-row: auto; max-width: 300px; }
}

/* --- Súbase ---------------------------------------------------------------
 * Reutiliza la fila de teléfonos de «Por dentro» (.pantallas) y el marco del
 * mapa (.mapa-vivo). Lo único propio son los cuatro puntos, que van en una
 * fila de cuatro con la misma línea arriba que los de apuestas. */
.subase__lista {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
}
@media (max-width: 980px) { .subase__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .subase__lista { grid-template-columns: 1fr; } }

/* El hecho comercial de Súbase: va como afirmación, no como nota al pie. Por
   eso NO usa .aviso-datos (letra de máquina, gris): esto es un argumento de
   venta y tiene que leerse como tal. */
.subase__hecho {
  margin: 1.4rem 0 0;
  max-width: 60ch;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radio-chico);
  background: color-mix(in srgb, var(--acento-vivo) 10%, var(--fondo));
  border: 1px solid color-mix(in srgb, var(--acento-vivo) 35%, var(--borde));
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--texto);
}
.subase__hecho svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: var(--acento); }
.subase__hecho strong { font-family: 'Outfit', sans-serif; font-weight: 600; }

/* --- NODO, por dentro -------------------------------------------------------
 * Cuatro pantallas de escritorio en dos por dos. Van enteras, con el menú
 * morado: ese menú ES la marca de NODO, y recortarlo las volvería
 * intercambiables con cualquier otro sistema. */
.nodo__rejilla {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
}
.nodo__pantalla { margin: 0; }
.nodo__pantalla img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
  background: #f6f4f9;         /* el fondo de NODO, mientras carga */
  box-shadow: 0 18px 44px -28px rgba(11, 28, 51, 0.5);
}
.nodo__pantalla figcaption {
  margin-top: 0.8rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 60ch;
}
.nodo__pantalla figcaption strong { color: var(--texto); font-weight: 600; }
@media (max-width: 760px) { .nodo__rejilla { grid-template-columns: 1fr; } }

/* --- La Central de taxis ----------------------------------------------------
 * Dos telefonos y, a su lado, tres puntos en columna. Reutiliza .pantalla,
 * .mapa-vivo y la rejilla de dos de NODO. */
.central__fila {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.central__puntos { display: grid; gap: 1.5rem; }
@media (max-width: 900px) {
  .central__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .central__puntos { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .central__fila { grid-template-columns: 1fr; justify-items: center; }
  .central__fila .pantalla img, .central__fila .pantalla figcaption { max-width: 320px; }
  .central__puntos { justify-self: stretch; }
}