/* =============================================================================================
   Restware · la página de inicio pública (Fase 15). Hoja propia, separada de la del panel.

   Marca: tinta #0D2E3D · turquesa #49EDCB · secundario #598381 · papel #F4F2F3.
   El turquesa NUNCA va como texto sobre claro (3.4:1 sobre papel): es fondo de botón con texto tinta
   (9.7:1) o acento gráfico. El secundario #598381 tampoco es texto pequeño (3.8:1 sobre papel): para
   el texto suave se usa #3F5D5B (6.4:1) y para enlaces #1F6A60 (6.4:1 sobre blanco). Medido, no a ojo.
   Tipografía: Archivo (títulos) + IBM Plex Sans (cuerpo), autoalojadas en /vendor/fonts, variables,
   subset latino, font-display: swap. Móvil primero: todo lo que se toca mide 44 px o más.
   ============================================================================================= */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/vendor/fonts/archivo-latin-var.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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/vendor/fonts/ibm-plex-sans-latin-var.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;
}

:root {
  --tinta: #0D2E3D;
  --tinta-suave: #3F5D5B;
  --turquesa: #49EDCB;
  --turquesa-oscura: #2ED9B7;
  --turquesa-tinte: #D8FAF2;
  --secundario: #598381;
  --papel: #F4F2F3;
  --blanco: #FFFFFF;
  --linea: #DDE3E5;
  --enlace: #1F6A60;
  --suave-sobre-tinta: #B8C7CC;
  --titulos: "Archivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cuerpo: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ancho: 1180px;
  --barra-h: 64px;
  --r: 14px;
  --r-lg: 22px;
  --sombra: 0 18px 50px rgba(13, 46, 61, .12);
  --seccion: clamp(3.5rem, 7vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barra-h) + 16px); }
body {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--cuerpo);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img { max-width: 100%; height: auto; }
a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titulos); color: var(--tinta); margin: 0; font-weight: 700; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.interior { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.interior--estrecho { max-width: 880px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Enlace de salto: invisible hasta que llega el foco del teclado ---------- */
.saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--tinta); color: #fff; padding: .8rem 1.1rem; border-radius: 10px;
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 1rem; outline: 3px solid var(--turquesa); outline-offset: 2px; }

/* ---------- Botones: 48 px de alto (56 los grandes), texto tinta sobre turquesa ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.25rem; border-radius: 12px;
  font: 600 1rem/1.2 var(--cuerpo); text-decoration: none; text-align: center;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn--primario { background: var(--turquesa); color: var(--tinta); border-color: var(--turquesa); }
.btn--primario:hover { background: var(--turquesa-oscura); border-color: var(--turquesa-oscura); color: var(--tinta); }
.btn--secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--secundario:hover { background: rgba(13, 46, 61, .07); color: var(--tinta); }
.btn--claro { background: transparent; color: var(--papel); border-color: rgba(244, 242, 243, .55); }
.btn--claro:hover { background: rgba(255, 255, 255, .08); border-color: var(--papel); color: #fff; }
.btn--grande { min-height: 56px; padding: 0 1.6rem; font-size: 1.0625rem; border-radius: 14px; }
.btn--bloque { width: 100%; }

/* ---------- La barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 242, 243, .9);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(13, 46, 61, .08);
}
.barra__interior {
  width: min(100% - 2rem, var(--ancho)); margin-inline: auto;
  min-height: var(--barra-h); display: flex; align-items: center; gap: 1rem;
}
.barra__marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--tinta); min-height: 44px; text-decoration: none; }
.monograma { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; }
.marca { width: 128px; height: 21px; display: block; fill: currentColor; }
.marca--pie { width: 146px; height: 24px; }
.barra__nav { display: none; }
.barra__acciones { margin-left: auto; display: none; align-items: center; gap: .5rem; }
.barra__entrar {
  display: none; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 10px;
  color: var(--tinta); font-weight: 500; text-decoration: none;
}
.barra__entrar:hover { background: rgba(13, 46, 61, .06); }
@media (min-width: 600px) {
  .barra__acciones { display: flex; }
}
@media (min-width: 900px) {
  .barra__nav { display: block; margin-left: .25rem; }
  .barra__nav ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
  .barra__nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; border-radius: 10px;
    color: var(--tinta); font-weight: 500; text-decoration: none;
  }
  .barra__nav a:hover { background: rgba(13, 46, 61, .06); }
  .barra__entrar { display: inline-flex; }
}

/* El menú móvil es un <details>: botón, estado y teclado los pone el navegador. */
.barra__movil { margin-left: auto; position: relative; }
@media (min-width: 600px) { .barra__movil { margin-left: 0; } }
@media (min-width: 900px) { .barra__movil { display: none; } }
.barra__hamburguesa {
  list-style: none; display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 10px; cursor: pointer; color: var(--tinta);
}
.barra__hamburguesa::-webkit-details-marker { display: none; }
.barra__hamburguesa:hover { background: rgba(13, 46, 61, .06); }
.barra__movil[open] .barra__icono-abrir { display: none; }
.barra__movil:not([open]) .barra__icono-cerrar { display: none; }
.barra__desplegable {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: min(20rem, calc(100vw - 2rem));
  background: #fff; border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra);
  padding: .6rem; display: grid; gap: .15rem;
}
.barra__desplegable a {
  display: flex; align-items: center; min-height: 48px; padding: 0 .9rem; border-radius: 10px;
  color: var(--tinta); font-weight: 500; text-decoration: none;
}
.barra__desplegable a:hover { background: rgba(13, 46, 61, .06); }
.barra__desplegable .btn { margin-top: .4rem; justify-content: center; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.25rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem); overflow: hidden; }
.hero__interior { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 980px) {
  .hero__interior { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; }
}
.hero__ceja {
  margin: 0 0 1rem; font: 600 .8125rem/1.35 var(--cuerpo); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.hero h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.125rem, 1.3rem + 3.6vw, 3.85rem); line-height: 1.04; letter-spacing: -.025em;
  text-wrap: balance;
}
.hero__sub {
  margin: 0 0 1.75rem; max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem); line-height: 1.55; color: var(--tinta-suave);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.hero__hechos {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  font-size: .9375rem; font-weight: 500; color: var(--tinta-suave);
}
.hero__hechos li { display: flex; align-items: center; gap: .5rem; }
.hero__hechos li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--turquesa);
  box-shadow: 0 0 0 3px var(--turquesa-tinte); flex: 0 0 auto;
}

/* Un marco de navegador alrededor de cada captura: dice «esto es una página», sin dibujitos. */
.ventana {
  margin: 0; background: #fff; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sombra), 0 0 0 1px rgba(13, 46, 61, .08);
}
.ventana__barra { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; background: #E9EDEF; }
.ventana__barra span:not(.ventana__url) { width: 10px; height: 10px; border-radius: 50%; background: #C9D2D6; flex: 0 0 auto; }
.ventana__url {
  margin-left: .6rem; flex: 1; min-width: 0; font: 500 .75rem/1 var(--cuerpo); color: var(--tinta-suave);
  background: #fff; border-radius: 8px; padding: .45rem .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ventana img { display: block; width: 100%; height: auto; }
.ventana--oscura .ventana__barra { background: #1B3A48; }
.ventana--oscura .ventana__barra span:not(.ventana__url) { background: #456170; }
.ventana--oscura .ventana__url { background: var(--tinta); color: var(--suave-sobre-tinta); }

/* ---------- Secciones ---------- */
.titulo-seccion {
  margin: 0 0 .75rem; max-width: 26ch;
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance;
}
.intro-seccion {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem); max-width: 46rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); color: var(--tinta-suave);
}

/* ---------- Por qué Restware: tres argumentos, texto y captura alternados ---------- */
.porque { background: #fff; padding-block: var(--seccion); }
.argumento { display: grid; gap: 1.75rem; align-items: center; padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.argumento + .argumento { border-top: 1px solid var(--linea); }
@media (min-width: 900px) {
  .argumento { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 3.5rem; padding-block: clamp(2rem, 4vw, 3.5rem); }
  .argumento:nth-of-type(even) .argumento__texto { order: 2; }
}
.argumento__numero { margin: 0 0 .6rem; font: 700 .8125rem/1 var(--titulos); letter-spacing: .14em; color: var(--tinta-suave); }
.argumento h3 { margin: 0 0 .75rem; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.18; letter-spacing: -.015em; text-wrap: balance; }
.argumento p { margin: 0; color: var(--tinta-suave); }
.argumento__texto strong { color: var(--tinta); font-weight: 600; }
/* ---------- Los dos aparatos del argumento 01 ---------- */
/* AQUÍ EL MARCO ES DE APARATO, NO DE NAVEGADOR. Lo que este argumento promete es «corre en cualquier
   aparato»: lo que tiene que reconocerse de un vistazo es el aparato, no la barra de direcciones, que
   ya la enseñan el hero y los argumentos 02 y 03 con `.ventana`. Hasta la corrección de imagen el
   celular era la captura pelada con `border-radius: 16px` y una sombra —ni bisel, ni proporción de
   cuerpo, ni nada que dijera «teléfono»— y encima iba absolutamente encima de la tablet tapándole la
   rejilla de productos, que es justo lo que hay que ver. Ahora son dos marcos dibujados en CSS (nada
   de PNG de maqueta: escalan solos y se ven igual de nítidos a 1x y a 2x) y sólo se solapan por la
   esquina.

   LAS MEDIDAS SON PORCENTAJES DEL ANCHO DEL PROPIO MARCO, no píxeles: el celular se pinta a 24 % de la
   columna en escritorio y a 25 % en móvil, y el bisel, el radio, la bocina y la barra de inicio tienen
   que encoger con él o a 90 px de ancho el marco parece un borde de 6 px. `border-radius: X% / Y%`
   lleva los dos ejes a propósito: con un solo valor, un cuerpo que mide el doble de alto que de ancho
   sale con las esquinas ovaladas. */
/* El hueco de la izquierda es el ancho del teléfono menos lo que se le deja pisar a la tablet: unos
   tres puntos porcentuales, lo justo para que se lea como profundidad y no tape ninguna tarjeta de
   producto —que son las que traen las fotos nuevas y las que hay que ver. */
.dupla { position: relative; padding: 0 0 12% 18%; }

.tableta, .telefono {
  position: relative; margin: 0; background: linear-gradient(160deg, #21414F 0%, #0D2E3D 60%);
  box-shadow: var(--sombra), 0 0 0 1px rgba(13, 46, 61, .22), inset 0 0 0 1px rgba(255, 255, 255, .09);
}
/* El teléfono flota por delante: sombra más marcada que la de la tablet, o se leen al mismo plano. */
.telefono { box-shadow: 0 24px 54px rgba(13, 46, 61, .38), 0 0 0 1px rgba(13, 46, 61, .3), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.tableta img, .telefono img { display: block; width: 100%; height: auto; }
/* La pantalla es quien recorta: el cuerpo deja ver el bisel y no puede llevar overflow hidden. */
.tableta__pantalla, .telefono__pantalla { display: block; overflow: hidden; background: var(--blanco); }

/* La tablet: bisel PAREJO en los cuatro lados —es lo que tiene una tablet de verdad— y la camarita
   centrada dentro del bisel de arriba, colocada encima y no en el flujo para que no lo ensanche. */
.tableta { padding: 1.9%; border-radius: 2.6% / 4.1%; }
.tableta__camara {
  display: block; position: absolute; top: 1.5%; left: 50%; transform: translate(-50%, -50%);
  width: .9%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .34);
}
.tableta__pantalla { border-radius: .8% / 1.2%; }

/* EL TELÉFONO, Y EL PORQUÉ DE QUE EL BISEL VAYA EN LOS MÁRGENES DE LOS HIJOS Y NO EN UN PADDING.
   El marco está `position: absolute` para colgar de la tablet, y en un elemento absoluto un padding
   en PORCENTAJE se mide contra el BLOQUE CONTENEDOR —aquí `.dupla`, 674 px— y no contra el propio
   marco. Con `padding: 2.6%` el bisel salía de 17.5 px sobre un teléfono de 141: el 12 % del ancho,
   casi cinco veces lo que se pedía. El marco quedaba rechoncho (proporción 0.533 en vez de 0.46), se
   comía un cuarto de la pantalla y por eso se leía como una tablet encogida y no como un teléfono.
   Los MÁRGENES de un hijo en flujo sí se miden contra el ancho de su contenedor —que es el marco—,
   así que ahí los porcentajes significan lo que dicen. Los verticales también se miden contra el
   ancho, que es justo lo que hace falta para que el bisel sea parejo. */
.telefono { position: absolute; left: 0; bottom: 0; width: 22%; border-radius: 12.6% / 5.7%; }
/* `display: block` NO sobra: son <span>, y a un elemento en línea no le aplican ni el ancho ni la
   proporción ni los márgenes de arriba y abajo. Sin esto la bocina y la barra de inicio no se
   pintaban y el cuerpo medía exactamente lo mismo que la pantalla, sin bisel arriba ni abajo. */
.telefono__bocina { display: block; width: 22%; aspect-ratio: 20 / 2; border-radius: 999px; margin: 4.2% auto 1.9%; background: rgba(255, 255, 255, .32); }
.telefono__inicio { display: block; width: 32%; aspect-ratio: 30 / 1.9; border-radius: 999px; margin: 2% auto 3.1%; background: rgba(255, 255, 255, .45); }
/* EL CANTO DE VIDRIO. Sin él, la barra oscura del panel —que ocupa el quinto de arriba de la
   captura— se fundía con el bisel y el aparato parecía empezar más abajo de donde empieza: de ahí
   que se leyera apaisado. La línea clara dice dónde acaba el marco y dónde empieza la pantalla. */
.telefono__pantalla {
  margin: 0 2.8%; border-radius: 10.4% / 4.8%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
/* En una sola columna la pareja se encoge entera: el teléfono sube a un cuarto del ancho para que
   siga leyéndose como un teléfono y no como una astilla oscura al lado de la tablet. */
@media (max-width: 899px) {
  .dupla { padding: 0 0 15% 23%; }
  .telefono { width: 26%; }
}

/* ---------- Funciones ---------- */
.funciones { padding-block: var(--seccion); }
.rejilla-funciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .rejilla-funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rejilla-funciones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.funcion {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem;
}
.funcion__icono {
  width: 46px; height: 46px; padding: 11px; border-radius: 13px; flex: 0 0 auto;
  background: var(--turquesa-tinte); color: var(--tinta);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.funcion h3 { margin: .25rem 0 0; font-size: 1.15rem; line-height: 1.25; }
.funcion p { margin: 0; color: var(--tinta-suave); font-size: .9875rem; }
/* Las dos últimas son bandas a lo ancho: diez tarjetas en tres columnas dejarían una sola en la última fila. */
.funcion--ancha { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 1.25rem; }
.funcion--ancha h3 { margin-top: 0; }
.funcion--ancha p { max-width: 60ch; }
@media (max-width: 479px) { .funcion--ancha { flex-direction: column; } }
.funcion--destacada {
  grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 1.25rem;
  background: var(--tinta); border-color: var(--tinta); color: var(--papel);
}
.funcion--destacada .funcion__icono { background: var(--turquesa); }
.funcion--destacada h3 { color: #fff; font-size: 1.35rem; margin-top: 0; }
.funcion--destacada p { color: var(--suave-sobre-tinta); font-size: 1.0625rem; max-width: 60ch; }
@media (max-width: 479px) { .funcion--destacada { flex-direction: column; } }

/* ---------- Comparativa: tabla en escritorio, tarjetas en móvil ---------- */
.comparativa { background: #fff; padding-block: var(--seccion); }
.tabla-comparativa { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; line-height: 1.45; }
.tabla-comparativa th, .tabla-comparativa td { text-align: left; vertical-align: top; padding: .9rem 1rem; border-bottom: 1px solid var(--linea); }
.tabla-comparativa thead th {
  font: 700 .8125rem/1.3 var(--cuerpo); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave);
  border-bottom: 2px solid var(--tinta); padding-top: 0;
}
.tabla-comparativa thead th:nth-child(2) { color: var(--tinta); }
/* Con las celdas cortas, el concepto es lo más largo de la fila: si se le deja el 18 %, parte en
   tres líneas mientras los valores ocupan una y la fila se llena de aire. */
.tabla-comparativa tbody th { font-family: var(--titulos); font-weight: 700; color: var(--tinta); width: 22%; }
.tabla-comparativa__nosotros { background: var(--turquesa-tinte); }
@media (min-width: 768px) { .tabla-comparativa td { width: 26%; } }
@media (max-width: 767px) {
  .tabla-comparativa, .tabla-comparativa tbody, .tabla-comparativa tr, .tabla-comparativa td, .tabla-comparativa tbody th { display: block; width: auto; }
  .tabla-comparativa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-comparativa tr { border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; margin-bottom: 1rem; background: #fff; }
  .tabla-comparativa tbody th { background: var(--papel); padding: .85rem 1rem; font-size: 1.05rem; }
  .tabla-comparativa td { padding: .8rem 1rem .9rem; }
  .tabla-comparativa td:last-child { border-bottom: 0; }
  .tabla-comparativa td::before {
    content: attr(data-columna); display: block; margin-bottom: .3rem;
    font: 700 .75rem/1.3 var(--cuerpo); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave);
  }
  .tabla-comparativa__nosotros::before { color: var(--tinta); }
}
/* ---------- El respaldo de la tabla: plegado, y con las palabras exactas de cada empresa ---------- */
/* Va en un <details> para que el navegador ponga el botón, el estado y el teclado sin JavaScript. */
.respaldo { margin: 1.5rem 0 0; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); }
.respaldo__resumen {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 52px; padding: .75rem 1.1rem; cursor: pointer;
  font-family: var(--titulos); font-weight: 600; font-size: 1rem; color: var(--tinta);
  list-style: none;
}
.respaldo__resumen::-webkit-details-marker { display: none; }
.respaldo__resumen:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; border-radius: var(--r); }
.respaldo__flecha { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.respaldo[open] .respaldo__flecha { transform: rotate(180deg); }
.respaldo__cuerpo { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--linea); }
.respaldo__intro { margin: 1rem 0 1.25rem; font-size: .9rem; color: var(--tinta-suave); }
.respaldo__intro a { color: var(--enlace); font-weight: 500; overflow-wrap: anywhere; }
.respaldo__fila + .respaldo__fila { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--linea); }
.respaldo__concepto { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.3; }
.respaldo__citas { margin: 0; font-size: .9rem; }
.respaldo__citas dt { font-weight: 600; color: var(--tinta); }
/* La cita se sangra para que se distinga de quién la dijo, sin depender de la comilla sola. */
.respaldo__citas dd { margin: .15rem 0 .7rem; padding-left: .9rem; border-left: 2px solid var(--turquesa); color: var(--tinta-suave); }
.respaldo__citas dd:last-child { margin-bottom: 0; }
.respaldo__ausente { font-style: italic; }

/* ---------- Precio: un solo plan ---------- */
.precio { padding-block: var(--seccion); }
.plan { background: #fff; border: 1px solid var(--linea); border-radius: 24px; box-shadow: var(--sombra); overflow: hidden; }
.plan__cabecera { padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem); text-align: center; border-bottom: 1px solid var(--linea); }
.plan__precio {
  margin: 0; font: 700 clamp(3rem, 2rem + 5vw, 4.75rem)/1 var(--titulos); letter-spacing: -.03em; color: var(--tinta);
}
.plan__signo { font-size: .5em; vertical-align: top; position: relative; top: .3em; margin-right: .05em; }
.plan__periodo { font: 500 clamp(1rem, .9rem + .5vw, 1.25rem)/1 var(--cuerpo); color: var(--tinta-suave); letter-spacing: 0; }
.plan__anual { margin: 1rem auto 0; max-width: 34rem; color: var(--tinta-suave); }
.plan__anual strong { color: var(--tinta); font-weight: 600; }
.plan__nota { margin: .35rem 0 1.5rem; font-weight: 600; color: var(--tinta); }
.plan__prueba { margin: .9rem 0 0; font-size: .9375rem; color: var(--tinta-suave); }
.plan__listas { display: grid; gap: 1.75rem; padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 3.5vw, 2.5rem); }
@media (min-width: 700px) { .plan__listas { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.plan__listas h3 { margin: 0 0 .85rem; font: 700 .8125rem/1.3 var(--cuerpo); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.lista li { position: relative; padding-left: 2rem; line-height: 1.45; }
.lista li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 62%;
}
.lista--si li::before {
  background-color: var(--turquesa);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2E3D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.lista--no li::before {
  background-color: #E4E9EB;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2E3D' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

/* ---------- Preguntas: <details> nativos, uno abierto a la vez (name=) ---------- */
.preguntas { background: #fff; padding-block: var(--seccion); }
.faq { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__pregunta {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem .25rem; min-height: 56px; font: 600 1.0625rem/1.35 var(--cuerpo); color: var(--tinta);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:focus-visible { outline-offset: -3px; border-radius: 8px; }
.faq__flecha {
  flex: 0 0 auto; width: 22px; height: 22px; color: var(--tinta-suave);
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s;
}
.faq__item[open] .faq__flecha { transform: rotate(180deg); }
.faq__respuesta { padding: 0 .25rem 1.25rem; max-width: 64ch; color: var(--tinta-suave); }
.faq__respuesta p { margin: 0; }

/* ---------- Cierre ---------- */
.cierre { padding-block: 1rem clamp(3.5rem, 7vw, 6rem); }
.cierre__caja {
  position: relative; overflow: hidden; text-align: center;
  background: var(--tinta); color: var(--papel); border-radius: 28px;
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
}
.cierre__caja::before {
  content: ""; position: absolute; right: -12%; bottom: -45%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 237, 203, .38), transparent 64%); pointer-events: none;
}
.cierre__caja h2 {
  position: relative; margin: 0 auto .75rem; max-width: 22ch; color: #fff;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance;
}
.cierre__caja p { position: relative; margin: 0 auto 1.75rem; max-width: 36rem; color: var(--suave-sobre-tinta); }
.cierre__acciones { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.cierre__caja :focus-visible { outline-color: var(--turquesa); }

/* ---------- Pie ---------- */
.pie { padding: 2.5rem 0 2rem; border-top: 1px solid var(--linea); color: var(--tinta-suave); font-size: .9375rem; }
.pie__interior { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; display: grid; gap: 1.75rem; }
@media (min-width: 900px) {
  .pie__interior { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; }
  .pie__copy { grid-column: 1 / -1; }
}
.pie__marca p { margin: .85rem 0 0; max-width: 30rem; }
.pie a { color: var(--tinta); }
.pie a:hover { color: var(--enlace); }
.pie__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.pie__nav a, .pie__legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.pie__nav a:hover, .pie__legal a:hover { text-decoration: underline; }
.pie__legal { display: grid; gap: .1rem; }
.pie__copy { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--linea); }

/* ---------- Páginas secundarias (legales) ---------- */
.pagina { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.prosa { background: #fff; border: 1px solid var(--linea); border-radius: 24px; padding: clamp(1.5rem, 4vw, 3rem); }
.prosa__ceja { margin: 0 0 .75rem; font: 600 .8125rem/1.35 var(--cuerpo); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.prosa h1 { margin: 0 0 .5rem; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
.prosa__fecha { margin: 0 0 2rem; font-size: .9375rem; color: var(--tinta-suave); }
.prosa h2 { margin: 1.75rem 0 .5rem; font-size: 1.25rem; line-height: 1.3; }
.prosa p, .prosa li { max-width: 68ch; }
.prosa ul { padding-left: 1.25rem; }
.prosa li { margin-bottom: .5rem; }