/* ==========================================================================
   Estilos de la web pública (landing, prueba, verificación).
   Depende de miquna.css para tokens y componentes base.
   ========================================================================== */

/* El logo se define en `miquna.css`, que cargan las TRES superficies.
   Estuvo acá, en la hoja del sitio público, y los dos paneles no la
   cargan: su SVG quedaba sin tamaño y se estiraba a 222 px de ancho
   dentro de la barra lateral. Acá solo quedan sus variantes por
   contexto, que sí son propias del sitio público. */
.pie .logo__rapha { color: var(--sobre-marino); }
.pie .logo__soft { color: var(--turquesa-400); }
.pie .logo__marca { color: var(--sobre-marino); }

/* -------------------------------------------------------------- cabecera --- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--superficie-velada);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.cabecera--fija { border-bottom-color: var(--borde); box-shadow: var(--sombra-sm); }

.cabecera__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 68px;
}

.nav { display: flex; gap: 1.75rem; }
.nav a {
  font-size: var(--txt-sm); font-weight: 550; color: var(--gris-700);
  position: relative; padding-block: 0.4rem;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--turquesa);
  border-radius: 2px; transition: width var(--transicion);
}
.nav a:hover { color: var(--marino-700); }
.nav a:hover::after { width: 100%; }

.cabecera__acciones { display: flex; align-items: center; gap: 0.65rem; }

.menu-btn {
  /* 44 × 44 es el mínimo para acertar con el dedo. Medía 37 × 31: el mismo
     defecto que tenía el botón del panel, en la otra superficie. Se
     centra el dibujo en lugar de agrandarlo, así que se ve igual. */
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 4.5px;
  width: 44px; height: 44px; padding: 0;
  background: none; border: none; cursor: pointer;
}
.menu-btn span {
  display: block; width: 21px; height: 2px; border-radius: 2px;
  background: var(--marino-700); transition: transform var(--transicion), opacity var(--transicion);
}
.menu-btn--activo span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn--activo span:nth-child(2) { opacity: 0; }
.menu-btn--activo span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-movil {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1rem clamp(1.15rem, 4vw, 2rem) 1.5rem;
  border-top: 1px solid var(--borde); background: var(--blanco);
}
.nav-movil a { padding: 0.7rem 0; font-weight: 550; color: var(--gris-700); }
.nav-movil .btn { margin-top: 0.6rem; }

@media (max-width: 900px) {
  .nav, .cabecera__acciones { display: none; }
  .menu-btn { display: flex; }
}

/* ------------------------------------------------------------------ hero --- */
/* Retícula técnica de fondo: aporta el carácter "tecnológico" sin decorar.
   Muy tenue, se desvanece hacia los bordes. */
/* La portada va sobre marino profundo.
 *
 * Es el cambio que más contraste aporta: sobre fondo claro el circuito
 * turquesa queda deslavado y los nodos no pueden brillar, porque no hay
 * oscuridad contra la que destacar. Sobre marino la placa se lee encendida,
 * que es la lectura técnica buscada, y el turquesa de marca pasa de ser un
 * detalle a ser el acento que ordena la pantalla.
 *
 * No es una decisión de moda: un halo necesita fondo oscuro para existir. */
.hero {
  position: relative;
  padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  background:
    radial-gradient(ellipse 90% 70% at 78% 22%, var(--marino-700), transparent 62%),
    linear-gradient(158deg, var(--marino-900) 0%, var(--marino) 100%);
  color: var(--marino-100);
  overflow: hidden;
  isolation: isolate;
}

/* Sobre oscuro cambian el texto y el logo, nunca la marca. */
.hero h1 { color: var(--sobre-marino); }
.hero .kicker { color: var(--turquesa-400); }
.hero .entradilla { color: var(--marino-100); }

.hero .logo__rapha,
.hero .logo__marca { color: var(--sobre-marino); }
.hero .logo__soft { color: var(--turquesa-400); }

/* El botón secundario de la portada. Sin esto hereda el contorno y el
   texto pensados para fondo claro: «Ver planes» quedaba en marino sobre
   el marino de la portada, contraste 1,00. La regla existía para
   `.seccion--marino` y la portada —la superficie oscura más vista del
   sitio— se había quedado fuera. */
.hero .btn--fantasma {
  --btn-fg: var(--sobre-marino);
  --btn-borde: var(--borde-sobre-oscuro);
}
.hero .btn--fantasma:hover { --btn-bg: var(--linea-sobre-oscuro); }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--reticula-sobre-oscuro) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticula-sobre-oscuro) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: 0.7;
  mask-image: radial-gradient(ellipse 80% 65% at 45% 25%, var(--mascara-opaca) 20%, transparent 75%);
}
/* Lavado de color muy contenido, solo para separar la portada del resto.
   Antes había dos manchas radiales enfrentadas —el recurso de portada más
   repetido que existe—; ahora el interés visual lo aporta el circuito, que
   pertenece a la marca en lugar de ser un adorno intercambiable. */
/* El resplandor que envuelve al circuito, como en una placa encendida.
   Va detrás de la trama y por delante de la retícula. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 46% 44% at 74% 30%,
                              var(--sombra-acento), transparent 70%);
}

/* --------------------------------------------------------------- circuito */
/* Trama de placa impresa. Es textura de fondo: nunca compite con el texto,
   y por eso la opacidad es baja y queda por debajo en el eje z. */
.circuito {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(52rem, 78%);
  height: auto;
  opacity: 0.34;
  color: var(--turquesa);
}

/* En la portada entra por la derecha, alineada con la maqueta de pantalla,
   y se desvanece hacia el texto para no restarle legibilidad. */
.hero .circuito {
  --circuito-fondo: var(--marino-900);
  top: -10%;
  right: -12%;
  width: min(56rem, 82%);
  opacity: 0.85;
  mask-image: linear-gradient(252deg, var(--mascara-opaca) 30%, transparent 88%);
}

/* Sobre el marino la traza se lee mejor, así que sube la presencia. */
.seccion--marino .circuito {
  --circuito-fondo: var(--marino-900);
  opacity: 0.5;
  top: -22%;
  left: -10%;
  width: min(44rem, 70%);
  mask-image: linear-gradient(105deg, var(--mascara-opaca) 20%, transparent 78%);
}

/* En pantallas angostas el circuito estorbaría al texto sin aportar nada:
   el espacio horizontal es justo el que necesita para leerse como plano. */
@media (max-width: 720px) {
  .circuito { display: none; }
}
.hero__interior {
  display: grid; align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1.05fr 0.95fr;
}
.hero__punto { color: var(--turquesa); }

.hero__puntos {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  list-style: none; padding: 0; margin-top: 2.2rem;
}
.hero__puntos li {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--txt-sm); color: var(--gris-700);
}
.hero__puntos li::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0;
  border-radius: 50%; background: var(--turquesa-100);
  box-shadow: inset 0 0 0 2px var(--turquesa);
}

@media (max-width: 900px) {
  .hero__interior { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
}

/* ------------------------------------------------- maqueta del panel (hero) */
.mock {
  border-radius: var(--radio-lg); overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde);
  box-shadow: var(--sombra-lg); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
}
.mock__barra {
  display: flex; gap: 6px; padding: 11px 14px;
  background: var(--nieve); border-bottom: 1px solid var(--borde);
}
.mock__barra span { width: 10px; height: 10px; border-radius: 50%; background: var(--borde); }
.mock__barra span:first-child { background: var(--senal-coral); }

.mock__cuerpo { padding: 1.4rem; display: grid; gap: 1.2rem; }
.mock__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.mock__kpi {
  padding: 0.9rem; border-radius: var(--radio);
  background: var(--nieve); border: 1px solid var(--borde);
}
.mock__kpi-label { display: block; font-size: 0.68rem; color: var(--gris-500); text-transform: uppercase; letter-spacing: .05em; }
.mock__kpi-valor { display: block; font-size: 1.35rem; color: var(--marino-900); margin-top: 3px; }
.mock__kpi-delta { font-size: 0.7rem; color: var(--exito-tinta); font-weight: 600; }

.mock__grafico {
  display: flex; align-items: flex-end; gap: 7px; height: 92px;
  padding: 0.85rem; border-radius: var(--radio);
  background: var(--nieve); border: 1px solid var(--borde);
}
.mock__barra-graf {
  flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--turquesa), var(--marino-500));
  opacity: .85;
}

.mock__filas { display: grid; gap: 8px; }
.mock__fila { display: flex; justify-content: space-between; gap: 1rem; }
.mock__fila span { height: 9px; border-radius: 4px; background: var(--niebla); }
.mock__fila span:first-child { flex: 1; }
.mock__fila span:last-child { width: 52px; }

/* ----------------------------------------------------------------- pasos --- */
.pasos {
  display: grid; gap: 1.5rem; list-style: none; padding: 0; margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: paso;
}
.paso { position: relative; padding-top: 0.5rem; }
.paso__num {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--marino-700); color: var(--sobre-marino);
  font-weight: 700; font-size: var(--txt-sm); margin-bottom: 1rem;
}
.paso h3 { font-size: var(--txt-lg); }

/* ---------------------------------------------------------------- planes --- */
.planes {
  display: grid; gap: 1.5rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr));
}
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-lg); transition: transform var(--transicion), box-shadow var(--transicion);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
.plan--destacado {
  border-color: var(--turquesa); border-width: 2px;
  box-shadow: 0 12px 40px var(--sombra-acento);
}
.plan__cinta {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 0.28rem 0.85rem; border-radius: 999px;
  background: var(--turquesa); color: var(--tinta-sobre-acento);
  font-size: var(--txt-xs); font-weight: 700; white-space: nowrap;
}
.plan__nombre { font-size: var(--txt-lg); }
/* El precio no se publica en el sitio: se coordina al solicitar la prueba.
   Estas tres reglas quedan porque la decisión es comercial y reversible —el
   día que se vuelva a publicar, el bloque tiene que verse igual que antes—,
   pero hoy no las usa ninguna pantalla. */
.plan__precio { display: flex; align-items: baseline; gap: 0.3rem; margin-top: 1.2rem; }
.plan__moneda { font-size: var(--txt-lg); font-weight: 600; color: var(--gris-500); }
.plan__monto {
  font-size: clamp(2.3rem, 1.9rem + 1.8vw, 3rem); font-weight: 800;
  color: var(--marino-900); letter-spacing: -0.03em; line-height: 1;
}

/* El período ocupa el lugar que tenía el precio: es el dato que queda para
   comparar planes y el que define qué se contrata. Se compone con peso, no
   con tamaño: una palabra a 3rem gritaría donde antes había una cifra. */
.plan__periodo {
  margin-top: 1.2rem;
  font-size: var(--txt-lg);
  font-weight: 700;
  color: var(--marino-900);
  letter-spacing: -0.01em;
}
.plan__lista { list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: 0.7rem; flex: 1; }
.plan__lista li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: var(--txt-sm); color: var(--gris-700);
}
/* Marca de verificación dibujada con dos bordes girados.
   Un carácter tipográfico depende de la fuente que resuelva el navegador y
   cambia de grosor y de altura entre sistemas; esto se ve idéntico siempre y
   no arrastra una tipografía de iconos. */
.plan__lista li::before {
  content: "";
  flex-shrink: 0;
  width: 0.42rem;
  height: 0.72rem;
  margin-top: 0.28rem;
  border-right: 2px solid var(--turquesa-600);
  border-bottom: 2px solid var(--turquesa-600);
  transform: rotate(42deg);
}

/* ------------------------------------------------------------------- pie --- */
.pie {
  background: var(--marino-900); color: var(--marino-100);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) 2rem;
}
.pie a { color: var(--marino-100); font-size: var(--txt-sm); }
.pie a:hover { color: var(--turquesa-400); }
.pie .apunte { color: var(--apunte-sobre-marino); }

.pie__rejilla {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.6fr repeat(3, 1fr);
}
@media (max-width: 800px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .pie__rejilla { grid-template-columns: 1fr; }
}

.pie__titulo {
  font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--sobre-marino); margin-bottom: 0.9rem;
}

.pie__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid var(--linea-sobre-oscuro);
}

/* ------------------------------------------------------- formulario ancho --- */
.formulario-panel {
  max-width: 720px; margin-inline: auto;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-lg); padding: clamp(1.6rem, 3.5vw, 2.75rem);
  box-shadow: var(--sombra);
}


/* ==========================================================================
   Refuerzos de dirección visual: tecnológico · moderno · minimalista
   ========================================================================== */

/* --- Titular con más presencia y ritmo controlado --- */
.hero__texto h1 {
  letter-spacing: -0.035em;
  line-height: 1.06;
}

/* El acento turquesa aparece UNA vez por sección: acá, en el punto final. */
.hero__punto {
  color: var(--turquesa);
  -webkit-text-stroke: 0;
}

/* --- Cifras: siempre tabulares, para que no "bailen" al actualizarse --- */
.mock__kpi-valor,
.plan__monto,
.tabla .num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --- Tarjetas: borde que reacciona, sin sombra pesada --- */
.tarjeta--interactiva {
  position: relative;
  overflow: hidden;
}
/* Línea superior que se dibuja al pasar el cursor: movimiento con propósito */
.tarjeta--interactiva::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--turquesa), var(--marino-500));
  transition: width var(--transicion);
}
.tarjeta--interactiva:hover::after { width: 100%; }

/* --- Íconos de módulo: trazo uniforme, estética técnica --- */
.tarjeta__icono {
  background: var(--nieve);
  border: 1px solid var(--borde);
  color: var(--marino-700);
  transition: border-color var(--transicion), background var(--transicion);
}
.tarjeta--interactiva:hover .tarjeta__icono {
  background: var(--turquesa-100);
  border-color: var(--turquesa-400);
}

/* --- Pasos: conexión visual entre ellos (guía la lectura) --- */
.pasos { position: relative; }
.paso { position: relative; }
@media (min-width: 900px) {
  .paso:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 46px;
    right: -1.5rem;
    height: 1px;
    background: linear-gradient(90deg, var(--borde), transparent);
  }
}
.paso__num {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 5px var(--blanco);
}

/* --- Planes: el destacado se eleva de base, no solo al pasar el cursor --- */
.plan--destacado { transform: translateY(-6px); }
.plan--destacado:hover { transform: translateY(-10px); }

/* --- Sección oscura: retícula técnica también acá --- */
.seccion--marino {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.seccion--marino::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--reticula-sobre-oscuro) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticula-sobre-oscuro) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, var(--mascara-opaca), transparent 78%);
}

/* ─────────────────────────────────────────── Secciones de placa
 *
 * Las secciones intermedias de la portada eran blancas o casi blancas
 * (`--nieve`). Entre la portada marino de arriba y el cierre marino de abajo,
 * el centro del sitio quedaba como un hueco claro sin relación con la marca.
 *
 * Ahora comparten el azul de la identidad, aclarado, con la misma trama de
 * circuito impreso que la portada: la placa recorre el sitio de arriba abajo
 * en lugar de aparecer solo en los extremos.
 *
 * El circuito ANIMA —la señal viaja por la pista— y por eso está aquí y no
 * como una imagen de fondo: se pidió expresamente que los elementos añadidos
 * cumplan función de animación. Con `prefers-reduced-motion` el movimiento se
 * apaga y queda el dibujo, que ya se sostiene solo.
 */
.seccion--placa {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,
                    var(--marino-velo-55),
                    transparent 60%),
    linear-gradient(170deg, var(--marino-placa) 0%, var(--marino-700) 100%);
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,
                    color-mix(in oklab, var(--marino-500) 55%, transparent),
                    transparent 60%),
    linear-gradient(170deg, var(--marino-placa) 0%, var(--marino-700) 100%);
  color: var(--marino-100);
}

/* La retícula técnica, igual que en la portada y en el cierre. */
.seccion--placa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--reticula-sobre-oscuro) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticula-sobre-oscuro) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 75% 85% at 50% 50%,
                              var(--mascara-opaca), transparent 80%);
}

/* Los textos sobre la placa. Mismo criterio que en `.seccion--marino`: el
   color de fondo claro no sirve, y se dice explícitamente en lugar de
   confiar en la herencia. */
.seccion--placa h2,
.seccion--placa h3 { color: var(--sobre-marino); }
.seccion--placa .kicker { color: var(--turquesa-400); }
/* El texto sobre la placa.
 *
 * Un selector amplio, a propósito: casi todo lo que hay dentro de una
 * sección oscura va sobre el azul o sobre uno de sus velos, y enumerarlo
 * dejaría fuera al siguiente componente que se añada.
 *
 * Lo que NO va sobre el azul son las islas claras —la tabla comparativa y el
 * formulario del estimador, que pintan su propio fondo blanco— y esas se
 * corrigen justo debajo, con más especificidad.
 *
 * El intento de acotar esta regla con `>` salió mal y vale la pena dejarlo
 * escrito: arregló el estimador y dejó las tarjetas de planes con texto
 * oscuro sobre velo oscuro. Cincuenta y cinco hallazgos donde había seis. */
.seccion--placa .entradilla,
.seccion--placa p,
.seccion--placa li,
.seccion--placa strong { color: var(--marino-100); }

/* Las islas claras recuperan la tinta de fondo claro.
 *
 * Van después y con un selector más específico, que es lo único que decide
 * entre dos reglas que compiten por el mismo elemento. */
.seccion--placa .tabla,
.seccion--placa .tabla td,
.seccion--placa .tabla th,
.seccion--placa .tabla p,
.seccion--placa .tabla li,
.seccion--placa .tabla strong { color: var(--tinta); }

.seccion--placa .estimador__campos,
.seccion--placa .estimador__campos p,
.seccion--placa .estimador__campos li,
.seccion--placa .estimador__campos strong { color: var(--gris-700); }

.seccion--placa .estimador__campos .campo__etiqueta { color: var(--titulo); }
.seccion--placa .estimador__campos .campo__ayuda { color: var(--gris-500); }

/* Las tarjetas dejan de ser islas blancas: se convierten en superficies
   veladas sobre la placa. Si se quedaran blancas, el blanco seguiría siendo
   lo predominante y el cambio no habría servido de nada. */
.seccion--placa .tarjeta,
.seccion--placa .principio,
.seccion--placa .paso,
.seccion--placa .modulo,
.seccion--placa .plan {
  background: var(--velo-sobre-placa);
  border-color: var(--linea-sobre-oscuro);
  color: var(--marino-100);
}

.seccion--placa .plan--destacado {
  border-color: var(--turquesa-400);
  box-shadow: 0 0 0 1px var(--turquesa-400), var(--sombra-lg);
}

/* Lo que la placa oscura obliga a repintar.
 *
 * Cada una de estas reglas corresponde a un elemento que el auditor de
 * contraste encontró por debajo del mínimo al oscurecer las secciones. No
 * son retoques de gusto: el precio de los planes quedaba en 1,72 y el aviso
 * de formas de pago en 1,18, que es prácticamente invisible.
 *
 * Se listan aquí, juntas y en el mismo sitio que la superficie que las
 * obliga, en lugar de repartirlas por sus componentes: el componente sigue
 * siendo correcto para su fondo claro, y lo que cambió fue dónde se pone. */
.seccion--placa .plan__moneda { color: var(--turquesa-100); }
.seccion--placa .plan__monto { color: var(--sobre-marino); }

/* El período ocupa ahora el lugar que tenía el precio, y con su peso: ya no
   es un apunte al pie de una cifra, es LA cifra de la tarjeta. Con el gris
   de apunte quedaba en 2,72 sobre el velo de la placa. Toma el mismo color
   que tenía el precio, que es el que corresponde a lo que hace. */
.seccion--placa .plan__periodo { color: var(--sobre-marino); }
.seccion--placa .plan__nota { color: var(--apunte-sobre-marino); }

/* Los avisos traen su propio fondo suave y claro; sobre la placa hay que
   rehacerlos enteros o el texto oscuro cae sobre el azul. */
.seccion--placa .aviso {
  background: var(--velo-sobre-placa);
  border-left-color: var(--turquesa-400);
  color: var(--marino-100);
}
.seccion--placa .aviso strong { color: var(--sobre-marino); }
.seccion--placa .aviso .apunte { color: var(--marino-100); }
.seccion--placa .aviso__icono { color: var(--turquesa-400); }

/* El botón secundario, igual que en la portada y en el cierre. */
.seccion--placa .btn--fantasma {
  --btn-fg: var(--sobre-marino);
  --btn-borde: var(--borde-sobre-oscuro);
}
.seccion--placa .btn--fantasma:hover { --btn-bg: var(--linea-sobre-oscuro); }

/* Los iconos heredan `currentColor`; sobre la placa el color de partida era
   el de fondo claro. */
/* Solo los iconos que heredan el color del texto. `.principio__marca` NO
   entra: trae su propia insignia de fondo claro, y aclararle el icono lo
   dejaba claro sobre claro —1,70—, que es el mismo error que esta sección
   vino a corregir, cometido en el sentido contrario. */
.seccion--placa .icono { color: var(--turquesa-400); }

/* El número del paso: círculo marino con texto claro sobre un fondo que ya
   es marino no se distingue. Se invierte. */
.seccion--placa .paso__num {
  background: var(--turquesa-400);
  color: var(--marino-900);
}

/* El rótulo de sección se queda en 4,43 con `--turquesa-400`: se aclara al
   texto principal, que es lo que hace la portada. */
.seccion--placa .kicker { color: var(--turquesa-100); }

/* ── La placa como fondo, sin tocar lo que va encima ──────────────────────
 *
 * Dos formas de oscurecer una sección, y la diferencia importa.
 *
 * `.seccion--placa` integra: las tarjetas se vuelven velos y todo el texto
 * pasa a claro. Funciona en la portada, donde el contenido es texto e
 * iconos.
 *
 * En una pantalla de TRABAJO —un formulario, una tabla comparativa— eso
 * obliga a repintar cada descendiente, y el primer intento lo demostró: al
 * quitarle el fondo a la tabla, su texto oscuro quedó sobre el azul y los
 * hallazgos de contraste pasaron de 18 a 70.
 *
 * `.seccion--placa-suave` hace lo que hace falta y nada más: oscurece el
 * fondo. La tarjeta sigue siendo blanca, los campos siguen siendo claros —
 * escribir sobre una caja oscura cansa— y lo único que se ajusta es el texto
 * que va SUELTO sobre el azul, que es poco y está enumerado.
 */
.seccion--placa-suave {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,
                    var(--marino-velo-45),
                    transparent 62%),
    linear-gradient(170deg, var(--marino-placa) 0%, var(--marino-700) 100%);
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,
                    color-mix(in oklab, var(--marino-500) 45%, transparent),
                    transparent 62%),
    linear-gradient(170deg, var(--marino-placa) 0%, var(--marino-700) 100%);
  color: var(--marino-100);
}

.seccion--placa-suave::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--reticula-sobre-oscuro) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticula-sobre-oscuro) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 75% 85% at 50% 50%,
                              var(--mascara-opaca), transparent 80%);
}

/* Solo el texto que va suelto sobre el azul. Lo que está dentro de una
   tarjeta conserva sus colores, porque conserva su fondo. */
.seccion--placa-suave > .contenedor > h1,
.seccion--placa-suave > .contenedor > h2,
.seccion--placa-suave > .contenedor > .centrado > h1,
.seccion--placa-suave > .contenedor > .centrado > h2 { color: var(--sobre-marino); }

.seccion--placa-suave > .contenedor > .centrado > .kicker,
.seccion--placa-suave > .contenedor > .kicker { color: var(--turquesa-400); }

.seccion--placa-suave > .contenedor > .entradilla,
.seccion--placa-suave > .contenedor > .centrado > .entradilla { color: var(--marino-100); }

.seccion--placa-suave > .contenedor > .apunte,
.seccion--placa-suave > .contenedor > .centrado > .apunte,
.seccion--placa-suave > .contenedor > .apunte.centrado {
  color: var(--apunte-sobre-marino);
}

.seccion--placa-suave .btn--fantasma {
  --btn-fg: var(--sobre-marino);
  --btn-borde: var(--borde-sobre-oscuro);
}

/* Las islas claras dentro de la placa suave recuperan la tinta oscura.
 *
 * La sección declara texto claro para lo que va suelto sobre el azul, y eso
 * se HEREDA hacia dentro. Las tarjetas y los avisos pintan su propio fondo
 * claro, así que se quedaban con texto claro sobre blanco: al terminar de
 * pedir la prueba, el correo y la contraseña provisional apenas se leían.
 * Se reportó en la revisión del panel del propietario. */
.seccion--placa-suave .tarjeta,
.seccion--placa-suave .aviso { color: var(--tinta); }

/* Y por la misma razón, un botón fantasma DENTRO de una tarjeta vuelve a
   los colores de fondo claro: el de la sección es blanco sobre azul. */
.seccion--placa-suave .tarjeta .btn--fantasma {
  --btn-fg: var(--titulo);
  --btn-borde: var(--borde);
}

/* Los tres componentes propios de «Software a medida» sobre la placa.
 *
 * Son los que el auditor de contraste señaló y no cubre ninguna regla
 * general, porque son de esa página: la celda que marca qué columna gana en
 * la comparativa, y los textos de ayuda del estimador de horas. */
/* Las islas CLARAS dentro de una sección oscura recuperan su tinta.
 *
 * `.seccion--placa` declara `color: var(--marino-100)` para el texto que va
 * suelto sobre el azul, y eso se HEREDA hacia dentro. Los elementos que
 * pintan su propio fondo claro —la tabla comparativa, el formulario del
 * estimador— se quedaban con texto claro sobre blanco: 1,18 y 1,32.
 *
 * Es la misma clase de error que el logo sobre la barra lateral, girado:
 * allá un color de fondo claro cayó sobre marino, y acá un color de fondo
 * marino cae sobre blanco. La herencia lo propaga en silencio en las dos
 * direcciones.
 *
 * No se puede escribir «los elementos con fondo claro» en CSS, así que se
 * enumeran. Son dos, y el auditor de contraste avisa si aparece un tercero.
 */
/* NADA más lleva regla propia, y esa es la corrección.
 *
 * El primer intento aclaró `.campo__etiqueta`, `.campo__ayuda` y la celda de
 * la comparativa suponiendo que caían sobre el azul. No caen: el estimador
 * vive dentro de un `<form>` BLANCO y la comparativa dentro de su tabla
 * clara. Aclararlos los dejó en claro sobre claro —1,32 y 1,00— que es
 * exactamente el defecto que esta sección venía a evitar, cometido al revés.
 *
 * Lo que va sobre una superficie clara conserva sus colores. Solo se ajusta
 * lo que queda SUELTO sobre el azul, y para saber cuál es hay que medirlo,
 * no suponerlo.
 */

/* El rótulo de sección se queda en 4,43 sobre la placa suave, donde el fondo
   es algo más claro que en la integrada. */
.seccion--placa-suave > .contenedor > .centrado > .kicker,
.seccion--placa-suave > .contenedor > .kicker { color: var(--turquesa-100); }

/* La etiqueta de la barra «Después» sobre su propio degradado turquesa. */
.comparativa__barra--despues .comparativa__etiqueta { color: var(--sobre-marino); }

/* El circuito de estas secciones va detrás y muy contenido: es textura, y
   compite con el texto si sube de presencia. */
.seccion--placa .circuito {
  --circuito-fondo: var(--marino-placa);
  opacity: 0.42;
  top: -18%;
  right: -14%;
  width: min(48rem, 76%);
  mask-image: linear-gradient(250deg, var(--mascara-opaca) 25%, transparent 82%);
}

/* En pantalla angosta el circuito ya se oculta por la regla general de
   `.circuito`; acá se recorta además el relleno vertical, que sobre fondo
   oscuro se siente más pesado. */
@media (max-width: 720px) {
  .seccion--placa { padding-block: calc(var(--sp-seccion) * 0.72); }
}

/* --- El logo conserva su proporción en cualquier contexto --- */
.logo__marca { flex: 0 0 auto; }
.logo:hover .logo__marca { color: var(--marino-700); }  /* nunca cambia de color */

/* Variante monocroma clara: única permitida sobre fondo oscuro */
.seccion--marino .logo__rapha,
.seccion--marino .logo__soft,
.seccion--marino .logo__marca { color: var(--sobre-marino); }
.seccion--marino .logo__soft { color: var(--turquesa-400); }

/* El circuito dibujado dentro del SVG se traza con `--logo-acento`, no con
   `color`, así que las reglas de arriba no lo alcanzan: cambian las letras y
   dejan el dibujo con el turquesa de fondo claro. Se ajusta acá, en las
   cuatro superficies oscuras del sitio, junto a las reglas que ya existían
   para las letras. */
.pie .logo,
.hero .logo,
.seccion--marino .logo,
body[data-portada-oscura] .cabecera:not(.cabecera--fija) .logo {
  --logo-acento: var(--marca-turquesa-clara);
}

/* ============================================================ portada oscura
   Ajustes de contraste tras oscurecer la portada. Se agregan al final para
   que ganen por orden de cascada sin tocar las reglas anteriores.
   ========================================================================= */

/* Los puntos de venta bajo el titular: sobre marino, el gris de texto
   secundario baja de 4.5:1 y deja de ser legible. */
.hero__puntos li { color: var(--marino-100); }
.hero__puntos li::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--turquesa-400);
}

/* La cabecera sobre la portada oscura: del color de la portada mientras se
   ve la portada, sólida en cuanto se desplaza. Es lo que evita la costura
   entre una barra blanca y un fondo marino pegados.
 *
 * Estuvo escrito `background: transparent`, y ahí estaba el fallo: la
 * cabecera es `position: sticky`, no `fixed`, así que OCUPA SU SITIO en el
 * flujo y la portada empieza justo debajo, nunca por detrás. Transparente no
 * dejaba ver el marino de la portada: dejaba ver el blanco del `body`.
 *
 * Y como estas reglas ponen el logo y la navegación en blanco —dando por
 * hecho el fondo oscuro que se creía tener detrás—, el resultado era logo
 * blanco sobre blanco. Contraste 1,00. En la portada del sitio público, en
 * los primeros 69 píxeles, que son los primeros que ve cualquiera que entra:
 * de la marca solo se leían «SOFT» y «MIQUNA».
 *
 * Se ve solo antes de desplazar. Al primer giro de rueda entra
 * `.cabecera--fija`, la cabecera se vuelve opaca y el logo reaparece, que es
 * justo lo que hace que el defecto pase desapercibido si no se mira la
 * pantalla de entrada.
 *
 * Con el marino de la portada, la costura desaparece de verdad —que era la
 * intención— y el texto claro cae sobre el fondo oscuro que le corresponde.
 */
body[data-portada-oscura] .cabecera:not(.cabecera--fija) {
  background: var(--marino-900);
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body[data-portada-oscura] .cabecera:not(.cabecera--fija) .nav a,
body[data-portada-oscura] .cabecera:not(.cabecera--fija) .logo__rapha,
body[data-portada-oscura] .cabecera:not(.cabecera--fija) .logo__marca {
  color: var(--sobre-marino);
}
body[data-portada-oscura] .cabecera:not(.cabecera--fija) .logo__soft {
  color: var(--turquesa-400);
}
body[data-portada-oscura] .cabecera:not(.cabecera--fija) .nav a:hover {
  color: var(--turquesa-400);
}
body[data-portada-oscura] .cabecera:not(.cabecera--fija) .menu-btn span {
  background: var(--sobre-marino);
}
/* El botón fantasma pierde su borde gris sobre oscuro. */
body[data-portada-oscura] .cabecera:not(.cabecera--fija) .btn--fantasma {
  color: var(--sobre-marino);
  border-color: var(--linea-sobre-oscuro);
}

/* La maqueta de pantalla sobre el marino: se despega del fondo con un borde
   turquesa tenue y una sombra de color, no con una sombra negra que sobre
   oscuro no se ve. */
.hero .mock {
  border-color: var(--linea-sobre-oscuro);
  box-shadow: 0 24px 60px var(--mascara-opaca), 0 0 0 1px var(--sombra-acento);
}


/* =================================================== iconos de los avisos ==
   Los avisos usaban emoji. Un emoji se dibuja distinto en cada sistema, no
   respeta la paleta y el lector de pantalla puede anunciarlo con un nombre
   que no corresponde. Ahora son SVG del sistema, que heredan el color del
   aviso que los contiene.
   ========================================================================= */
.aviso__icono svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* Confirmación grande de la pantalla de solicitud enviada. */
.marca-exito {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-inline: auto;
  color: var(--tinta-sobre-suave);
  background: var(--turquesa-100);
  border-radius: 50%;
}
.marca-exito__icono { width: 2.5rem; height: 2.5rem; }

/* ========================================================= quiénes somos ==
   Composición en dos columnas asimétricas: el texto pesa más que los
   principios, porque es lo que responde la pregunta que trae el visitante.
   Una rejilla simétrica los presentaría como igual de importantes.
   ========================================================================= */
.empresa {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.empresa__texto > * + * { margin-top: 1rem; }

.empresa__principios {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Los principios se apoyan sobre una superficie propia y una línea de acento
   a la izquierda: se leen como una cita del ideario, no como otra tarjeta
   más de la página. */
.principio {
  position: relative;
  padding: 1.35rem 1.5rem 1.35rem 1.75rem;
  background: var(--nieve);
  border-radius: var(--radio);
  border-left: 3px solid var(--turquesa);
}
.principio h3 {
  font-size: var(--txt-lg);
  margin-top: 0.65rem;
}

.principio__marca {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--tinta-sobre-suave);
  background: var(--turquesa-100);
  border-radius: var(--radio-sm);
}
.principio__marca svg { width: 1.35rem; height: 1.35rem; }

@media (max-width: 900px) {
  .empresa { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- redes -- */
.redes { display: flex; gap: 0.6rem; align-items: center; }

.redes__enlace {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--marino-100);
  border: 1px solid var(--linea-sobre-oscuro);
  border-radius: var(--radio-sm);
  transition: color var(--transicion), border-color var(--transicion),
              background var(--transicion);
}
.redes__enlace svg { width: 1.2rem; height: 1.2rem; }
.redes__enlace:hover {
  color: var(--turquesa-400);
  border-color: var(--turquesa);
  background: var(--superficie-velada);
}
.redes__enlace:focus-visible {
  outline: 2px solid var(--turquesa);
  outline-offset: 2px;
}

/* ------------------------------------------------ anuncio de la portada */
/* El anuncio de software a medida vive en la PORTADA, asi que sus estilos
   tienen que cargarse con la portada.

   Estuvieron en `medida.css`, que solo carga la pagina que el anuncio
   enlaza. El resultado: sin las reglas de tamano, los dos SVG del anuncio
   se estiraban a 1076 px de lado —un icono ocupando la pantalla entera—.
   Un archivo de estilos tiene que cargarse donde esta su marcado, no
   donde esta el tema del que habla. */
/* Va en `web.css` conceptualmente, pero se define acá junto a lo que enlaza
   para que ambos se mantengan a la vez. Es una franja contenida a propósito:
   quien llega buscando un punto de venta no vino por esto. */
.anuncio {
  border-block: 1px solid var(--linea-sobre-oscuro);
  background: var(--marino-700);
  color: var(--marino-100);
}
.anuncio__marca { color: var(--turquesa-400); }
.anuncio strong,
.anuncio b { color: var(--sobre-marino); }
.anuncio__enlace { color: var(--turquesa-100); }

.anuncio__interior {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.4rem;
  flex-wrap: wrap;
}

.anuncio__marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radio);
  background: var(--turquesa-100);
  color: var(--tinta-sobre-suave);
}

.anuncio__marca svg {
  width: 1.4rem;
  height: 1.4rem;
}

.anuncio__texto {
  flex: 1 1 24ch;
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--gris-700);
}

.anuncio__texto strong {
  display: block;
  color: var(--tinta);
  font-size: var(--txt-base);
}

.anuncio__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  font-weight: 600;
  color: var(--marino-700);
  text-decoration: none;
}

.anuncio__enlace svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform var(--transicion);
}

/* Es el único camino de la portada a «Software a medida» desde este aviso, y
   medía 26 px de alto. La zona sensible crece y el aspecto no se mueve: el
   margen negativo devuelve lo que añade el relleno. */
@media (max-width: 40rem) {
  .anuncio__enlace {
    padding-block: 0.6rem;
    margin-block: -0.15rem -0.6rem;
  }
}

.anuncio__enlace:hover svg,
.anuncio__enlace:focus-visible svg {
  transform: translateX(0.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .anuncio__enlace svg {
    transition: none;
  }
}

/* El anuncio sobre fondo marino.
 *
 * Va al FINAL del bloque del anuncio a propósito: sus reglas de color tienen
 * la misma especificidad que las de arriba, así que el orden es lo único que
 * decide. Puesto antes —como quedó en el primer intento— lo pisaban
 * `.anuncio__marca` y `.anuncio__texto`, y solo funcionaba a medias.
 *
 * La franja era `--nieve`, casi blanca, entre dos secciones oscuras. Al
 * oscurecerla, todo lo que llevaba dentro seguía pintado para fondo claro:
 * el texto quedó en 1,59 y el enlace en 1,00. */
.anuncio__texto { color: var(--marino-100); }
.anuncio__texto strong { color: var(--sobre-marino); }
.anuncio__enlace { color: var(--turquesa-100); }
.anuncio__enlace:hover { color: var(--sobre-marino); }


/* ── Mayúsculas en los apartados superiores ──────────────────────────────
 *
 * El menú de la cabecera y los títulos de sección de la portada, en
 * mayúsculas, como el eslogan.
 *
 * Se hace con `text-transform` y no reescribiendo los textos: el HTML sigue
 * diciendo «Quiénes somos», con sus minúsculas y sus tildes, que es lo que
 * leen los buscadores y los lectores de pantalla —un lector de pantalla
 * deletrea letra por letra un texto escrito todo en mayúsculas.
 *
 * El interletraje se abre un poco: en mayúsculas las letras necesitan aire,
 * y el cuerpo baja apenas para que las seis entradas del menú sigan entrando
 * en una línea en una pantalla de escritorio.
 */
.nav a,
.nav-movil a:not(.btn) {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  white-space: nowrap;
}

.nav {
  gap: clamp(0.9rem, 1.5vw, 1.75rem);
}

.seccion--placa h2,
.seccion--marino h2 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Franja intermedia: menú plegado, botones a la vista.
 *
 * Seis entradas de menú, el logotipo y los dos botones no caben en una línea
 * por debajo de unos 1260 px (medido: a 1241 sobraban 16 px). Entre 900 y
 * 1300 —la mayoría de los portátiles; el margen hasta 1300 es a propósito—
 * la cabecera medía más que la pantalla y TODA la página se desplazaba de
 * lado: 147 px a 1024 de ancho, antes incluso de pasar el menú a mayúsculas.
 *
 * En esa franja las seis entradas pasan al botón de menú, que ya existe y ya
 * las lista, y los dos botones —«Iniciar sesión» y «Prueba gratuita», que son
 * a lo que se viene— siguen a la vista, arrimados a la derecha. Por debajo de
 * 900 no cambia nada: la regla original ya pliega también los botones.
 */
@media (min-width: 901px) and (max-width: 1300px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .cabecera__acciones { margin-left: auto; }
  /* Los dos botones ya están en la cabecera: repetirlos en el menú abierto
     sería ofrecer lo mismo dos veces en la misma pantalla. */
  .nav-movil a[href*="/acceso"],
  .nav-movil .btn { display: none; }
}

/* El botón del menú desplegable conserva el color de su texto.
 *
 * `.nav-movil a` pinta los enlaces de gris y, por ser más específica, vencía
 * también a «Prueba gratuita»: quedaba gris sobre turquesa, casi ilegible, en
 * todos los teléfonos. Se devuelve a la tinta que el propio botón declara. */
.nav-movil a.btn { color: var(--btn-fg); }