/* ==========================================================================
   Portada pública de RemiPrep.

   Los valores son los mismos tokens semánticos que la aplicación web. Aquí
   van con nombres en castellano porque esta hoja no comparte código con la
   aplicación, pero cada uno dice al lado a qué token corresponde.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fuentes/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fuentes/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fuentes/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fuentes/inter-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fuentes/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fuentes/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fuentes/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
}

:root {
  /* Marca definitiva (ADR 0021): los valores de rm-frontend/diseno/TOKENS.md
     (00562c3), con sus contrastes medidos allí. La portada es clara, con el
     héroe y el cierre en azul noche. */
  color-scheme: light;

  --bg: #f8fafc;                 /* bg */
  --bg-hundido: #f1f5f9;         /* bg-secondary */
  --superficie: #ffffff;         /* surface */
  --superficie-elevada: #ffffff; /* surface-elevated */
  --borde: #7c8ba1;              /* border de control: 3,46 sobre superficie */
  --borde-sutil: #e2e8f0;        /* bordes de tarjeta (manual) */

  --texto: #0f172a;              /* texto principal (manual) */
  --texto-2: #475569;            /* text-secondary: 7,24 sobre el fondo */
  --texto-3: #64748b;            /* text-tertiary: 4,55 sobre el fondo */

  --accion: #4f46e5;             /* índigo: 6,29 con blanco */
  --accion-pulsada: #4338ca;
  --sobre-accion: #ffffff;
  --marca: #4f46e5;
  --marca-texto: #4f46e5;        /* brand-text: 6,01 sobre el fondo */
  --marca-tinte: #eef2ff;

  --celeste: #7dd3fc;            /* solo gráfico o sobre azul noche */
  --violeta: #818cf8;            /* solo gráfico o sobre azul noche */
  --noche: #0b1020;              /* fondo oscuro del manual */
  --noche-2: #131a33;
  --sobre-noche: #f8fafc;
  --sobre-noche-2: #cbd5e1;      /* 12,0 sobre la noche */

  /* gradient-brand (sin texto encima) y gradient-text (con texto blanco, ≥4,80
     en todo el recorrido): TOKENS.md, «Degradado de marca». */
  --degradado: linear-gradient(135deg, #7dd3fc 0%, #576efe 50%, #4f46e5 100%);
  --degradado-boton: linear-gradient(135deg, #0277bd 0%, #4f46e5 100%);
  --degradado-texto: linear-gradient(90deg, #7dd3fc 0%, #a5b4fc 100%);

  --acento: #818cf8;
  --sobre-acento: #0f172a;

  --info-tinte: #f0f9ff;
  --info-sobre-tinte: #0369a1;
  --exito: #10b981;
  --exito-tinte: #ecfdf5;
  --exito-sobre-tinte: #047857;
  --error: #ef4444;
  --error-tinte: #fef2f2;
  --error-sobre-tinte: #b91c1c;

  /* Sombras suaves en capas (ADR 0021). */
  --sombra-1: 0 1px 2px rgb(15 23 42 / 0.04), 0 6px 16px rgb(15 23 42 / 0.06);
  --sombra-2: 0 2px 4px rgb(15 23 42 / 0.06), 0 12px 32px rgb(15 23 42 / 0.1);
  --sombra-3: 0 24px 64px rgb(15 23 42 / 0.22), 0 8px 20px rgb(15 23 42 / 0.12);
  --brillo: 0 10px 24px rgb(79 70 229 / 0.2);

  --radio-insignia: 8px;
  --radio-control: 12px;
  --radio-tarjeta: 16px;
  --radio-destacado: 24px;

  --titulos: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;

  --ancho: 1200px;
  --lectura: 760px;
  --margen: 16px;
}


@media (min-width: 640px) {
  :root {
    --margen: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --margen: 40px;
  }
}

/* ==================== Base ==================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--titulos);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

p {
  margin: 0;
}

a {
  color: var(--marca-texto);
  text-underline-offset: 3px;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--accion);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Un `display` de componente no puede ganarle al atributo `hidden`: el script
   de la demostración esconde botones y preguntas con él. */
[hidden] {
  display: none !important;
}

.cifras {
  font-variant-numeric: tabular-nums;
}

.icono {
  width: 1.125em;
  height: 1.125em;
  flex-shrink: 0;
}

.icono-grande {
  width: 32px;
  height: 32px;
  color: var(--marca-texto);
}

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

.saltar {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--radio-control);
  background: var(--accion);
  color: var(--sobre-accion);
  font-weight: 700;
}

.saltar:focus {
  top: 12px;
}

main:focus {
  outline: none;
}

.envoltorio {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 0 var(--margen);
}

/* La columna de lectura se alinea con el título de la página, a la
   izquierda: centrada, el texto empezaba en otra vertical que la cabecera. */
.envoltorio-lectura > * {
  max-width: var(--lectura);
}

/* ==================== Botones ==================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radio-control);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
}

.boton:active {
  transform: scale(0.98);
}

.boton-primario {
  background: var(--accion);
  color: var(--sobre-accion);
}

.boton-primario:hover {
  background: var(--accion-pulsada);
}

.boton-primario:disabled {
  background: var(--bg-hundido);
  color: var(--texto-2);
  cursor: not-allowed;
  transform: none;
}

.boton-secundario {
  background: var(--superficie);
  border-color: var(--borde);
  color: var(--texto);
}

.boton-secundario:hover {
  border-color: var(--accion);
  color: var(--marca-texto);
}

.boton-texto {
  padding-inline: 8px;
  color: var(--marca-texto);
  text-decoration: underline;
}

.boton-claro {
  background: #ffffff;
  color: var(--accion);
}

.boton-claro:hover {
  background: var(--marca-tinte);
}

.boton-contorno-claro {
  border-color: rgb(255 255 255 / 0.7);
  color: #ffffff;
}

.boton-contorno-claro:hover {
  background: rgb(255 255 255 / 0.1);
}

.boton-grande {
  min-height: 56px;
  padding: 14px 28px;
  font-size: 1rem;
}

.boton-compacto {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.9375rem;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  font-weight: 700;
}

/* ==================== Cabecera ==================== */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borde-sutil);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.marca-logo {
  width: 32px;
  height: 32px;
}

/* El logotipo provisional (ADR 0018): «Remi» en la tinta y «Prep» en el principal. */
.marca b {
  color: var(--marca-texto);
  font-weight: inherit;
}

.nav-escritorio {
  display: none;
  margin-left: 16px;
}

.nav-escritorio ul {
  display: flex;
  gap: 4px;
}

.nav-escritorio a,
.enlace-entrar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radio-control);
  color: var(--texto-2);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-escritorio a:hover,
.enlace-entrar:hover {
  color: var(--texto);
  background: var(--bg-hundido);
}

.cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.enlace-entrar {
  display: none;
}

.menu-movil {
  position: relative;
}

.menu-movil summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--borde-sutil);
  border-radius: var(--radio-control);
  color: var(--texto);
  cursor: pointer;
  list-style: none;
}

.menu-movil summary::-webkit-details-marker {
  display: none;
}

.menu-movil summary .icono {
  width: 22px;
  height: 22px;
}

.menu-movil-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(280px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-2);
}

.menu-movil-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--radio-control);
  color: var(--texto);
  font-weight: 700;
  text-decoration: none;
}

.menu-movil-panel a:hover {
  background: var(--bg-hundido);
}

/* En la pantalla más estrecha el botón de registro no cabe junto al menú; ya
   está en la portada y en el menú no hace falta repetirlo. */
@media (max-width: 379px) {
  .cabecera .boton-compacto {
    display: none;
  }
}

.boton-compacto {
  white-space: nowrap;
}

@media (max-width: 559px) {
  .solo-ancho {
    display: none;
  }
}

@media (min-width: 900px) {
  .nav-escritorio,
  .enlace-entrar {
    display: flex;
  }

  .menu-movil {
    display: none;
  }
}

/* ==================== Etiquetas y cabezas de sección ==================== */

.antetitulo,
.etiqueta {
  color: var(--marca-texto);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.entradilla {
  margin-top: 20px;
  max-width: 36em;
  color: var(--texto-2);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
}

.cabeza-seccion {
  max-width: 44rem;
  margin-bottom: 40px;
}

.cabeza-seccion h2 {
  margin-top: 8px;
}

.cabeza-seccion p:not(.etiqueta) {
  margin-top: 12px;
  color: var(--texto-2);
}

.seccion {
  padding: 64px 0;
}

.seccion-superficie {
  background: var(--superficie);
  border-block: 1px solid var(--borde-sutil);
}

@media (min-width: 1024px) {
  .seccion {
    padding: 96px 0;
  }
}

/* ==================== Portada ==================== */

.hero {
  position: relative;
  padding: 48px 0 64px;
  overflow: hidden;
  background: var(--bg);
}

.hero-rejilla {
  display: grid;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  margin-top: 12px;
}

.hero .acciones {
  margin-top: 32px;
}

.nota-bajo-acciones {
  margin-top: 16px;
  max-width: 34em;
  color: var(--texto-2);
  font-size: 1rem;
}

@media (min-width: 1024px) {
  .hero {
    padding: 80px 0 96px;
  }

  .hero-rejilla {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
  }
}

/* La composición del producto: una práctica y, montado encima, el resumen de
   avance. Dibujada con CSS: pesa unos bytes, se ve nítida en cualquier
   pantalla y reserva su propio espacio, así que no mueve nada al cargar. */
.hero-visual {
  margin: 0;
}

.hero-visual figcaption {
  margin-top: 16px;
  color: var(--texto-2);
  font-size: 0.9375rem;
  text-align: center;
}

/* La tarjeta de ejemplo, plana y con borde (ADR 0018). */
.maqueta {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}

.maqueta-practica {
  padding: 20px;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  font-size: 0.9375rem;
}

.maqueta-barra {
  display: flex;
  justify-content: space-between;
  color: var(--texto-2);
  font-size: 0.875rem;
  font-weight: 700;
}

.maqueta-progreso {
  height: 6px;
  margin: 10px 0 16px;
  border-radius: 999px;
  background: var(--bg-hundido);
}

.maqueta-progreso span {
  display: block;
  width: 15%;
  height: 100%;
  border-radius: inherit;
  background: var(--accion);
}

.maqueta-enunciado {
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.55;
}

.maqueta-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--borde-sutil);
  border-radius: var(--radio-control);
  font-weight: 600;
}

.maqueta-opcion b {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radio-insignia);
  background: var(--bg-hundido);
  font-size: 0.875rem;
}

.maqueta-opcion.es-correcta {
  border-color: var(--exito-sobre-tinte);
  background: var(--exito-tinte);
  color: var(--exito-sobre-tinte);
}

.maqueta-opcion.es-correcta b {
  background: var(--exito-sobre-tinte);
  color: var(--superficie);
}

.maqueta-opcion span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 600;
}

.maqueta-explicacion {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radio-control);
  background: var(--marca-tinte);
  color: var(--texto);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Entrada de la composición: opacidad y 8 px, una vez. El texto de la portada
   no se anima nunca: se lee desde el primer pintado. */
@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.entra {
  animation: entra 300ms cubic-bezier(0.2, 0, 0, 1) both;
}

/* ==================== Método ==================== */

.pasos {
  display: grid;
  gap: 16px;
  counter-reset: paso;
}

.paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--borde-sutil);
}

/* Los pasos, numerados en círculos ámbar con el número grafito: igual que la
   bienvenida de la app (ADR 0018). */
.paso-numero {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.paso h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.paso h3 .icono {
  color: var(--marca-texto);
}

.paso p {
  margin-top: 8px;
  color: var(--texto-2);
}

.paso-recorte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.mini-opcion {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--borde-sutil);
  border-radius: var(--radio-insignia);
  background: var(--superficie);
  font-size: 0.9375rem;
  font-weight: 600;
}

.mini-opcion.es-elegida {
  border-color: var(--accion);
  background: var(--accion);
  color: var(--sobre-accion);
}

.mini-linea {
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--radio-insignia);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: 0.9375rem;
}

.mini-linea.es-ok {
  background: var(--exito-tinte);
  color: var(--exito-sobre-tinte);
  font-weight: 600;
}

.mini-chip {
  padding: 6px 14px;
  border: 1.5px solid var(--borde-sutil);
  border-radius: var(--radio-control);
  background: var(--superficie);
  font-size: 0.9375rem;
  font-weight: 600;
}

.mini-chip.es-activo {
  border-color: var(--accion);
  background: var(--marca-tinte);
  color: var(--marca-texto);
}

@media (min-width: 900px) {
  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .paso {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==================== Contenido ==================== */

/* Ocho líneas largas en una sola columna no se leen a 1280 px. */
@media (min-width: 768px) {
  .lista-dos-columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 48px;
  }
}

.biblioteca-rejilla {
  display: grid;
  gap: 48px;
}

@media (min-width: 1024px) {
  .biblioteca-rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
}

.biblioteca-rejilla h3 {
  margin-bottom: 16px;
  font-size: 1.375rem;
}

/* ==================== Progreso (banda con el tinte de marca) ==================== */

/* Era una banda azul marino con texto blanco, la pieza más reconocible de la
   app de origen. Desde el ADR 0018 es el tinte de marca con texto grafito, y el
   ejemplo va en una tarjeta de superficie. */
.seccion-tinte {
  background: var(--marca-tinte);
  border-block: 1px solid var(--borde-sutil);
}

.seccion-tinte h2 + p {
  margin-top: 16px;
  color: var(--texto-2);
}

.progreso-rejilla {
  display: grid;
  gap: 40px;
  align-items: center;
}

.progreso-rejilla h2 {
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .progreso-rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
}

.panel-ejemplo {
  margin: 0;
  padding: 24px;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
}

.sello-ejemplo {
  display: inline-block;
  padding: 4px 10px;
  border: 1.5px dashed var(--borde);
  border-radius: var(--radio-insignia);
  color: var(--texto-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.panel-ejemplo-fila {
  display: grid;
  gap: 24px;
  margin-top: 20px;
}

@media (min-width: 560px) {
  .panel-ejemplo-fila {
    grid-template-columns: 1fr 1fr;
  }
}

.panel-rotulo {
  color: var(--texto-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tendencia {
  width: 100%;
  height: 90px;
  margin: 12px 0 8px;
  color: var(--accion);
}

.panel-area {
  margin-top: 12px;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel-dato {
  color: var(--texto-2);
  font-size: 1rem;
}

.panel-siguiente {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: var(--radio-control);
  background: var(--accion);
  color: var(--sobre-accion);
}

/* ==================== Calidad ==================== */

.calidad-rejilla {
  display: grid;
  gap: 40px;
}

.calidad-rejilla h2 {
  margin-top: 8px;
}

.calidad-rejilla > div > p:not(.etiqueta) {
  margin-top: 16px;
  color: var(--texto-2);
}

@media (min-width: 1024px) {
  .calidad-rejilla {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
  }
}

.lista-calidad {
  display: grid;
  gap: 4px;
}

.lista-calidad li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--borde-sutil);
}

.lista-calidad li:first-child {
  padding-top: 0;
}

.lista-calidad li > .icono {
  width: 28px;
  height: 28px;
  margin-top: 2px;
  color: var(--marca-texto);
}

.lista-calidad p {
  margin-top: 4px;
  color: var(--texto-2);
}

/* ==================== Planes ==================== */

.planes {
  display: grid;
  gap: 16px;
}

@media (min-width: 860px) {
  .planes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
}

.plan-duracion {
  font-size: 1.375rem;
  font-weight: 700;
}

.plan-nombre {
  color: var(--texto-2);
  font-size: 1.0625rem;
  font-weight: 700;
}

.plan-lema {
  margin-top: 4px;
  color: var(--texto-2);
  font-size: 1rem;
}

.plan-precio {
  margin-top: 20px;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.plan-condicion {
  margin: 8px 0 24px;
  color: var(--texto-2);
  font-size: 1rem;
}

.plan .boton {
  margin-top: auto;
}

.condiciones {
  display: grid;
  gap: 10px;
  margin-top: 32px;
  color: var(--texto-2);
  font-size: 1rem;
}

.condiciones li {
  display: flex;
  gap: 10px;
}

.condiciones .icono {
  margin-top: 4px;
  color: var(--exito-sobre-tinte);
}

/* ==================== Preguntas frecuentes ==================== */

.faq-rejilla {
  display: grid;
  gap: 32px;
}

.faq-rejilla h2 {
  margin-top: 8px;
}

.faq-rejilla > div > p:not(.etiqueta) {
  margin-top: 16px;
  color: var(--texto-2);
}

/* El contacto por WhatsApp, bajo la invitación a escribir. */
.faq-contacto + .boton {
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .faq-rejilla {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 64px;
  }
}

.faq {
  border-bottom: 1px solid var(--borde-sutil);
}

.faq:first-child {
  border-top: 1px solid var(--borde-sutil);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Un chevron dibujado con dos bordes: gira al abrir. */
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--marca-texto);
  border-bottom: 2px solid var(--marca-texto);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 140ms ease;
}

.faq[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq p {
  padding-bottom: 20px;
  color: var(--texto-2);
}

/* ==================== Cierre ==================== */

.cierre {
  padding: 72px 0;
  /* La única banda de color fuerte de la página: el principal liso. */
  background: var(--accion);
  color: var(--sobre-accion);
  text-align: center;
}

.cierre-contenido {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.cierre p {
  color: rgb(255 255 255 / 0.9);
}

.cierre .acciones {
  justify-content: center;
  margin-top: 8px;
}

/* ==================== Pie ==================== */

.pie {
  padding: 56px 0 40px;
  background: var(--superficie);
  border-top: 1px solid var(--borde-sutil);
  color: var(--texto-2);
  font-size: 1rem;
}

.pie-rejilla {
  display: grid;
  gap: 32px;
}

@media (min-width: 760px) {
  .pie-rejilla {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.pie-lema {
  margin-top: 12px;
  max-width: 24em;
}

.pie-titulo {
  margin-bottom: 8px;
  color: var(--texto);
  font-size: 1rem;
  font-weight: 700;
}

.pie ul a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--texto-2);
}

.pie ul a:hover {
  color: var(--texto);
}

.pie-legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--borde-sutil);
  color: var(--texto);
  font-weight: 700;
}

.pie-aviso {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pie-aviso a {
  color: inherit;
}

/* ==================== Páginas interiores ==================== */

.cabeza-pagina {
  padding: 40px 0 48px;
  background: var(--bg);
  border-bottom: 1px solid var(--borde-sutil);
}

.cabeza-pagina h1 {
  margin-top: 12px;
  max-width: 18em;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 24px;
  color: var(--texto-2);
  font-size: 1rem;
}

.migas li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--texto-3);
}

.migas a {
  color: var(--texto-2);
}

.texto-y-lateral {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .texto-y-lateral {
    grid-template-columns: minmax(0, var(--lectura)) minmax(0, 340px);
    justify-content: space-between;
    gap: 64px;
  }
}

.prosa > * + * {
  margin-top: 16px;
}

.prosa h2 {
  margin-top: 48px;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa .etiqueta + h2 {
  margin-top: 8px;
}

.prosa p {
  color: var(--texto-2);
}

.lista-marcas {
  display: grid;
  gap: 12px;
}

.lista-marcas li {
  display: flex;
  gap: 12px;
}

.lista-marcas .icono {
  margin-top: 5px;
  color: var(--exito-sobre-tinte);
}

.lista-numerada {
  display: grid;
  gap: 10px;
  padding-left: 1.5em;
  list-style: decimal;
  color: var(--texto-2);
}

.lista-numerada li::marker {
  color: var(--marca-texto);
  font-weight: 700;
}

.lateral {
  align-self: start;
  padding: 24px;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
}

@media (min-width: 1024px) {
  .lateral {
    position: sticky;
    top: 104px;
  }
}

.lateral-titulo {
  font-size: 1.125rem;
}

.lista-areas {
  margin-top: 12px;
  font-size: 1rem;
}

.lista-areas li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde-sutil);
}

.lista-areas li span + span {
  font-weight: 700;
}

.lateral-nota {
  margin-top: 12px;
  color: var(--texto-2);
  font-size: 0.9375rem;
}

.resumen {
  margin: 12px 0 0;
}

.resumen div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde-sutil);
  font-size: 1rem;
}

.resumen dt {
  color: var(--texto-2);
}

.resumen dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.llamada {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 40px !important;
  padding: 24px;
  border-radius: var(--radio-tarjeta);
  background: var(--marca-tinte);
}

.llamada p {
  color: var(--texto) !important;
  font-weight: 700;
}

.cabeza-404 {
  min-height: 60vh;
}

.lista-404 {
  display: grid;
  gap: 8px;
  margin-top: 32px;
  font-weight: 700;
}

/* ==================== Movimiento reducido ==================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==================== Medios de pago a la vista (09/10/2026) ==================== */

.medios-aceptados {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px 0 8px;
  text-align: center;
}
.medios-logos { display: flex; align-items: center; gap: 14px; }
.medios-logos img { display: block; height: 24px; width: auto; }
.medios-aceptados p { margin: 0; color: var(--texto-2); font-size: 0.9375rem; font-weight: 700; }

/* ==========================================================================
   ADR 0021 — marca definitiva y estilo moderno.
   Va al final a propósito: sobrescribe las piezas de antes sin reescribirlas
   todas de una vez.
   ========================================================================== */

body {
  font-size: 1.0625rem;
}

.texto-degradado {
  background: var(--degradado-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.boton {
  border-radius: var(--radio-control);
  font-weight: 600;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.boton-primario {
  background: var(--degradado-boton);
  color: #ffffff;
  box-shadow: var(--brillo);
}

.boton-primario:hover {
  background: var(--degradado-boton);
  box-shadow: 0 14px 36px rgb(79 70 229 / 0.45);
  transform: translateY(-1px);
}

.boton-secundario {
  background: var(--superficie);
  border-color: var(--borde-sutil);
  color: var(--texto);
  box-shadow: var(--sombra-1);
}

.boton-secundario:hover {
  border-color: var(--accion);
  color: var(--marca-texto);
}

/* Sobre el azul noche: vidrio claro con borde. */
.boton-cristal {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.28);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

.boton-cristal:hover {
  background: rgb(255 255 255 / 0.14);
}

.boton-claro {
  background: #ffffff;
  color: var(--accion);
}

.boton-claro:hover {
  background: var(--marca-tinte);
}

/* ---------- Cabecera ---------- */

.cabecera {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
}

.marca {
  gap: 0;
}

.marca-logo {
  width: auto;
  height: 36px;
}

/* El logotipo está dentro de la imagen: el texto queda para lectores de pantalla. */
.marca > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Héroe en azul noche ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: 56px 0 72px;
  overflow: hidden;
  background: var(--noche);
  color: var(--sobre-noche);
}

.hero-halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 60% at 85% 10%, rgb(79 70 229 / 0.55), transparent 70%),
    radial-gradient(45% 50% at 10% 90%, rgb(125 211 252 / 0.28), transparent 70%),
    radial-gradient(40% 40% at 60% 60%, rgb(129 140 248 / 0.18), transparent 70%);
}

.hero-halo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 80%);
}

.hero h1 {
  margin-top: 20px;
  color: #ffffff;
}

.hero .entradilla {
  color: var(--sobre-noche-2);
}

.hero .nota-bajo-acciones {
  color: var(--sobre-noche-2);
}

.hero-sello {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  color: var(--sobre-noche-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.hero-sello-punto {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--celeste);
  box-shadow: 0 0 0 4px rgb(125 211 252 / 0.2);
}

.hero-rejilla {
  gap: 56px;
}

@media (min-width: 1024px) {
  .hero {
    padding: 88px 0 104px;
  }

  .hero-rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
  }
}

/* ---------- Dispositivos (dibujados con CSS) ---------- */

.dispositivos {
  position: relative;
  margin: 0;
  padding-bottom: 28px;
}

.dispositivos figcaption {
  margin-top: 18px;
  color: var(--sobre-noche-2);
  font-size: 0.875rem;
  text-align: center;
}

.laptop {
  width: min(100%, 560px);
  margin-left: auto;
}

/* Con dos columnas el teléfono va en el hueco de la izquierda y apenas
   monta sobre el borde de la laptop, sin taparle el contenido. */
@media (min-width: 1024px) {
  .laptop {
    width: 82%;
  }

  .telefono {
    left: -2%;
    width: 30%;
  }
}

.laptop-pantalla {
  padding: 10px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 18px 18px 6px 6px;
  background: #1e2440;
  box-shadow: var(--sombra-3);
}

.laptop-base {
  height: 14px;
  margin: 0 -6%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#cbd5e1, #94a3b8);
}

.app {
  display: flex;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg);
  color: var(--texto);
  font-size: 11px;
  aspect-ratio: 16 / 10;
}

.app-lateral {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 15%;
  padding: 10px 8px;
  border-right: 1px solid var(--borde-sutil);
  background: #ffffff;
}

.app-logo {
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  border-radius: 7px;
  background: var(--degradado);
}

.app-lateral i {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-hundido);
}

.app-lateral i.es-activo {
  background: var(--marca-tinte);
  box-shadow: inset 3px 0 0 var(--accion);
}

.app-cuerpo {
  flex: 1;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
}

.app-saludo {
  font-family: var(--titulos);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.app-fila {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}

.app-tarjeta {
  padding: 8px 10px;
  border: 1px solid var(--borde-sutil);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--sombra-1);
}

.app-rotulo {
  display: block;
  color: var(--texto-3);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-cuenta b {
  display: block;
  margin-top: 2px;
  background: var(--degradado-boton);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--titulos);
  font-size: 26px;
  line-height: 1;
}

.app-cuenta > span:last-child {
  color: var(--texto-2);
  font-size: 9px;
}

.app-anillo {
  position: relative;
  display: grid;
  place-items: center;
}

.app-anillo svg {
  width: 58px;
  height: 58px;
  transform: rotate(-90deg);
}

.app-anillo circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.app-anillo .pista {
  stroke: var(--bg-hundido);
}

.app-anillo .valor {
  stroke: var(--accion);
}

.app-anillo span {
  position: absolute;
  font-family: var(--titulos);
  font-size: 12px;
  font-weight: 800;
}

.app-siguiente {
  border: 0;
  background: var(--degradado-boton);
  color: #ffffff;
}

.app-siguiente .app-rotulo {
  color: rgb(255 255 255 / 0.85);
}

.app-siguiente b {
  display: block;
  margin: 2px 0 6px;
  font-size: 12px;
}

.app-boton {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: #ffffff;
  color: var(--accion);
  font-size: 9px;
  font-weight: 700;
}

.app-barras {
  display: grid;
  gap: 5px;
}

.app-barras i {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #7dd3fc, #4f46e5) 0 0 / var(--v) 100% no-repeat, var(--bg-hundido);
}

.telefono {
  position: absolute;
  left: 0;
  bottom: 52px;
  width: 36%;
  max-width: 200px;
  padding: 7px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 28px;
  background: #1e2440;
  box-shadow: var(--sombra-3);
}

.telefono-pantalla {
  display: grid;
  gap: 6px;
  padding: 14px 10px 12px;
  border-radius: 22px;
  background: var(--bg);
  color: var(--texto);
  font-size: 10px;
}

.tel-barra {
  display: flex;
  justify-content: space-between;
  color: var(--texto-2);
  font-weight: 700;
}

.tel-progreso {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-hundido);
}

.tel-progreso span {
  display: block;
  width: 15%;
  height: 100%;
  border-radius: inherit;
  background: var(--degradado);
}

.tel-enunciado {
  font-weight: 600;
  line-height: 1.4;
}

.tel-opcion {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--borde-sutil);
  border-radius: 8px;
  background: #ffffff;
  font-weight: 600;
}

.tel-opcion b {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--bg-hundido);
  font-size: 9px;
}

.tel-opcion.es-correcta {
  border-color: var(--exito);
  background: var(--exito-tinte);
  color: var(--exito-sobre-tinte);
}

.tel-opcion.es-correcta b {
  background: var(--exito-sobre-tinte);
  color: #ffffff;
}

.tel-porque {
  padding: 6px;
  border-radius: 8px;
  background: var(--marca-tinte);
  line-height: 1.4;
}

@media (max-width: 559px) {
  .telefono {
    display: none;
  }
}

/* ---------- Franja de confianza ---------- */

.franja {
  position: relative;
  margin-top: -40px;
  padding-bottom: 8px;
}

.franja-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-destacado);
  background: var(--borde-sutil);
  box-shadow: var(--sombra-2);
}

.franja-lista li {
  display: grid;
  gap: 4px;
  padding: 20px;
  background: var(--superficie);
}

.franja-lista b {
  white-space: nowrap;
  background: var(--degradado-boton);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--titulos);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.franja-lista span {
  color: var(--texto-2);
  font-size: 0.9375rem;
  line-height: 1.4;
}

@media (min-width: 900px) {
  .franja-lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .franja-lista li {
    padding: 28px;
  }
}

/* ---------- Funciones ---------- */

.cabeza-centrada {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.funciones {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .funciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .funciones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.funcion {
  position: relative;
  padding: 28px;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.funcion:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
}

.funcion-icono {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--degradado);
  color: #ffffff;
  box-shadow: 0 8px 20px rgb(79 70 229 / 0.25);
}

.funcion-icono .icono {
  width: 24px;
  height: 24px;
}

.funcion p {
  margin-top: 8px;
  color: var(--texto-2);
  font-size: 1rem;
}

/* ---------- Secciones y tarjetas ---------- */

.etiqueta,
.antetitulo {
  color: var(--marca-texto);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.seccion-superficie {
  background: var(--superficie);
}

.lateral,
.panel-ejemplo {
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-1);
}

.paso-numero {
  background: var(--degradado);
  color: #ffffff;
  box-shadow: 0 6px 16px rgb(79 70 229 / 0.3);
}

.lista-marcas .icono {
  color: var(--accion);
}

.seccion-tinte {
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(125 211 252 / 0.18), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgb(129 140 248 / 0.16), transparent 70%),
    var(--marca-tinte);
}

.tendencia {
  color: var(--accion);
}

.panel-siguiente {
  background: var(--degradado-boton);
}

/* ---------- Planes ---------- */

.plan {
  position: relative;
  border-radius: var(--radio-destacado);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

.plan.es-recomendado {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--superficie), var(--superficie)) padding-box,
    var(--degradado) border-box;
  box-shadow: var(--sombra-2);
}

.plan-insignia {
  position: absolute;
  top: -13px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--degradado-boton);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: var(--brillo);
}

.plan-precio {
  font-family: var(--titulos);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.planes {
  padding-top: 14px;
}

.incluye {
  margin-top: 40px;
  padding: 28px;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-tarjeta);
  background: var(--bg);
}

.incluye h3 {
  margin-bottom: 16px;
}

/* ---------- Cierre en azul noche ---------- */

.cierre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0;
  background:
    radial-gradient(50% 80% at 20% 0%, rgb(125 211 252 / 0.3), transparent 70%),
    radial-gradient(50% 80% at 90% 100%, rgb(79 70 229 / 0.6), transparent 70%),
    var(--noche);
  color: #ffffff;
}

.cierre h2 {
  color: #ffffff;
}

.cierre p {
  color: var(--sobre-noche-2);
}

.cierre .boton-contorno-claro {
  border-color: rgb(255 255 255 / 0.3);
}

/* ---------- Pie ---------- */

.pie .marca-logo {
  height: 40px;
}

/* «Hasta tu Residentado», destacado encima de los otros tres. */
.plan-destacado {
  display: grid;
  gap: 20px;
  margin-bottom: 28px;
  padding: 56px 24px 28px;
}

.plan-destacado .plan-insignia {
  right: 24px;
  left: 24px;
  width: fit-content;
  max-width: calc(100% - 48px);
}

.plan-destacado .plan-lema {
  max-width: 34em;
}

.plan-destacado .plan-precio {
  margin-top: 0;
}

@media (min-width: 860px) {
  .plan-destacado {
    padding: 36px 28px 28px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
  }

  .plan-destacado-precio {
    text-align: right;
  }
}

.plan-destacado-precio .boton {
  margin-top: 4px;
}

.plan-insignia-suave {
  background: var(--marca-tinte);
  color: var(--marca-texto);
  box-shadow: none;
}