/*
 * La página pública de LEXA.
 *
 * CSS suelto en public/ y no pasado por Vite a propósito: es una página de venta
 * que tiene que pintarse en el primer viaje, sin depender del bundle del SPA —que
 * pesa lo que pesa una aplicación entera y no hace falta aquí—.
 *
 * La paleta y las tipografías son las de la marca, las mismas del manual y del
 * estudio de mercado: navy de fondo, dorado como único acento y un serif para los
 * titulares. No se inventa nada nuevo; una página de venta que no se parece al
 * producto resta confianza en vez de sumarla.
 */

:root {
  --navy: #0D1B2A;
  --navy-claro: #12293D;
  --oro: #C9A55A;
  --oro-claro: #D8BC7E;
  --papel: #FBFAF7;
  --papel-hueso: #F4F1EA;
  --linea: #E3DED2;
  --gris: #6B7280;
  --bien: #2E7D5B;

  /* El serif ya probado en los PDF: se lee bien impreso y en pantalla, y no
     obliga a descargar una fuente. */
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--navy);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

/*
 * Las dos reglas juntas, y en este orden, por un motivo que costó dos vueltas.
 *
 * `height: auto` hace falta: sin él, los atributos `width`/`height` del HTML se
 * respetan al pie de la letra y una captura de 1400×875 metida en una columna de
 * 320 sale estirada a lo alto. Esos atributos están puestos a propósito —reservan
 * el hueco antes de que la imagen cargue, así la página no salta al leerla—, y es
 * el CSS el que tiene que decir «respeta la proporción».
 *
 * Los logos sí necesitan alto fijo, porque son PNG grandes. Lo llevan en una
 * regla de clase, que gana por especificidad al `img` de arriba. Quitar el
 * `height: auto` global —que fue el primer arreglo— resolvió el logo y rompió
 * todas las capturas: la especificidad era la respuesta, no el borrado.
 */
img { max-width: 100%; height: auto; }
.barra__marca img { height: 40px; width: auto; }
.pie-pagina img { height: 40px; width: auto; }
a { color: inherit; }

/* ── El armazón ──────────────────────────────────────────────────────────── */

.contenido {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}
.contenido--estrecho { max-width: 680px; }
.contenido--centro { max-width: 720px; text-align: center; }

.franja { padding: 78px 0; }
.franja--papel { background: var(--papel-hueso); }
.franja--oscura { background: var(--navy); color: #EAE6DC; }

/* ── Barra ───────────────────────────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 13px 22px;
  background: rgba(13, 27, 42, .95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(201, 165, 90, .22);
}
.barra__marca { display: flex; align-items: center; }
.barra__nav { display: flex; align-items: center; gap: 22px; }
.barra__nav a {
  color: #D8D3C8; text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.barra__nav a:hover { color: var(--oro-claro); }
.barra__cta { display: none; }
.barra__entrar {
  border: 1px solid rgba(201, 165, 90, .55);
  border-radius: 6px; padding: 7px 15px;
  color: var(--oro-claro) !important;
}
.barra__entrar:hover { background: rgba(201, 165, 90, .12); }

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

.portada {
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(201, 165, 90, .16), transparent 55%),
    var(--navy);
  color: #EFEBE1;
  padding: 96px 0 88px;
}
.sello {
  display: inline-block;
  margin: 0 0 22px;
  padding: 5px 13px;
  border: 1px solid rgba(201, 165, 90, .45);
  border-radius: 100px;
  font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--oro-claro);
}
.portada h1 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6.4vw, 4.3rem);
  line-height: 1.06;
  font-weight: 400;
  margin: 0 0 26px;
  text-wrap: balance;
}
.portada h1 em { color: var(--oro); font-style: italic; }
.portada__bajada {
  max-width: 62ch;
  font-size: 1.1rem;
  color: #CFC9BC;
  margin: 0 0 32px;
}
.portada__botones { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 26px; }
.portada__pie { font-size: 13.5px; color: #9A9384; margin: 0; }

/* ── Botones ─────────────────────────────────────────────────────────────── */

.boton {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 7px;
  font-size: 15.5px; font-weight: 600;
  text-decoration: none;
  transition: transform .12s ease, background .15s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton--oro { background: var(--oro); color: var(--navy); border: 1px solid var(--oro); }
.boton--oro:hover { background: var(--oro-claro); }
.boton--linea { border: 1px solid rgba(239, 235, 225, .35); color: #EFEBE1; }
.boton--linea:hover { background: rgba(239, 235, 225, .08); }
.boton--bloque {
  display: block; width: 100%; text-align: center;
  border: 1px solid var(--navy); color: var(--navy);
  padding: 11px 0; font-size: 14.5px;
}
.boton--bloque:hover { background: var(--navy); color: var(--papel); }
.boton--oro.boton--bloque { border-color: var(--oro); }
.boton--oro.boton--bloque:hover { background: var(--oro-claro); color: var(--navy); }
button.boton { font-family: inherit; cursor: pointer; }

/* ── Títulos de sección ──────────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gris);
}
.eyebrow--oro { color: var(--oro); }
.franja h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 400; line-height: 1.16;
  margin: 0 0 16px;
  text-wrap: balance;
}
.entradilla { max-width: 66ch; color: #4A5560; margin: 0 0 34px; }
.entradilla--claro { color: #C3BDB0; margin-left: auto; margin-right: auto; }

/* ── Rejillas ────────────────────────────────────────────────────────────── */

.rejilla { display: grid; gap: 20px; }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

.ficha {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 11px;
  padding: 26px 24px;
}
.ficha h3 {
  font-family: var(--serif); font-size: 1.24rem; font-weight: 400;
  margin: 0 0 11px; line-height: 1.25;
}
.ficha p { margin: 0; color: #4A5560; font-size: 15.2px; }

/* ── Bloques con captura, alternando lado ────────────────────────────────── */

.doble {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 44px;
  align-items: center;
  padding: 46px 0;
  border-top: 1px solid var(--linea);
}
.doble:first-of-type { border-top: 0; padding-top: 14px; }
/* Se invierte con `order` y no reordenando el HTML: en el móvil, donde las dos
   columnas se apilan, el texto tiene que ir siempre antes que la imagen. */
.doble--invertido .doble__texto { order: 2; }

.doble__texto h3 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 400; line-height: 1.2;
  margin: 0 0 13px;
  text-wrap: balance;
}
.doble__texto > p { color: #4A5560; margin: 0 0 16px; }

.lista-marcas { list-style: none; margin: 0; padding: 0; }
.lista-marcas li {
  position: relative;
  padding: 5px 0 5px 24px;
  font-size: 14.8px;
  color: #3D4750;
}
/* La palomita va en `::before` y no como carácter en el HTML: es decoración y
   un lector de pantalla no tiene por qué leer «✓» en cada línea. */
.lista-marcas li::before {
  content: '';
  position: absolute; left: 4px; top: 13px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--oro);
}

.doble__imagen { margin: 0; }
.doble__imagen img {
  width: 100%;
  border-radius: 11px;
  border: 1px solid var(--linea);
  /* La sombra da el volumen que separa la captura del fondo de papel. */
  box-shadow: 0 16px 44px rgba(13, 27, 42, .16);
  display: block;
}

.ficha--corta p { font-size: 14.6px; }
.ficha--corta h3 { font-size: 1.12rem; }

/* ── Tabla de módulos ────────────────────────────────────────────────────── */

.tabla-envoltura { overflow-x: auto; }
.tabla-modulos {
  width: 100%; min-width: 620px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 11px;
}
.tabla-modulos th, .tabla-modulos td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.tabla-modulos thead th {
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gris); font-weight: 700;
  background: var(--papel-hueso);
  white-space: nowrap;
}
.tabla-modulos tbody tr:last-child td { border-bottom: 0; }
.tabla-modulos .num { text-align: center; width: 108px; }
.tabla-modulos strong { display: block; font-size: 15px; font-weight: 600; }
.tabla-modulos__resumen {
  display: block; margin-top: 3px;
  font-size: 13.2px; color: var(--gris); line-height: 1.45;
}
.si { color: var(--bien); font-weight: 700; }
.no { color: #C3BDB0; }

/* ── Planes ──────────────────────────────────────────────────────────────── */

.plan {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 26px 22px 22px;
}
.plan--destacado {
  border-color: var(--oro);
  box-shadow: 0 10px 34px rgba(13, 27, 42, .11);
}
.plan__cinta {
  position: absolute; top: -11px; left: 22px;
  background: var(--oro); color: var(--navy);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 11px; border-radius: 100px;
}
.plan h3 {
  font-family: var(--serif); font-size: 1.42rem; font-weight: 400;
  margin: 0 0 3px;
}
.plan__para { margin: 0 0 18px; font-size: 13.6px; color: var(--gris); min-height: 2.9em; }
.plan__precio {
  font-family: var(--serif);
  font-size: 2.05rem; line-height: 1;
  margin: 0 0 5px;
  font-variant-numeric: tabular-nums;
}
.plan__moneda { font-size: 1.1rem; vertical-align: 0.42em; color: var(--gris); }
.plan__periodo { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--gris); margin-top: 6px; }
.plan__iva { margin: 0 0 18px; font-size: 12.6px; color: var(--gris); }
.plan__lista { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.plan__lista li {
  padding: 7px 0; border-bottom: 1px dashed var(--linea);
  font-size: 14.3px;
}
.plan__lista li:last-child { border-bottom: 0; }
.plan__anual { color: var(--gris); }
.plan__anual span { font-size: 12.5px; }

.aviso {
  margin-top: 26px; padding: 16px 20px;
  background: var(--papel-hueso);
  border-left: 3px solid var(--oro);
  border-radius: 0 8px 8px 0;
  font-size: 14.6px;
}

/* ── Formulario ──────────────────────────────────────────────────────────── */

.formulario { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.campo--par { grid-template-columns: 1fr 1fr; gap: 16px; }
.campo--par > label { display: grid; gap: 6px; }
/*
 * El rótulo va envuelto en su propio elemento.
 *
 * Sin él, `label { display: grid }` convertía cada hijo en una fila de la
 * rejilla: el asterisco de «obligatorio» caía en un renglón aparte y esos dos
 * campos quedaban un renglón más altos que sus vecinos, así que la parrilla se
 * desalineaba entera.
 */
.campo__rotulo { display: block; }
.campo__rotulo b { color: var(--oro); font-weight: 700; }

.formulario input, .formulario select, .formulario textarea {
  font-family: inherit; font-size: 15.5px; font-weight: 400;
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  width: 100%;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  outline: 2px solid rgba(201, 165, 90, .55);
  outline-offset: 1px;
  border-color: var(--oro);
}
.formulario textarea { resize: vertical; }
.formulario__nota { margin: 2px 0 0; font-size: 12.8px; color: var(--gris); font-weight: 400; }

/* La trampa para robots: fuera de la vista sin usar display:none, que algunos
   robots detectan, y sin que ningún lector de pantalla la anuncie. */
.trampa {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.exito, .error {
  padding: 17px 20px; border-radius: 9px; margin-bottom: 4px;
  font-size: 15px;
}
.exito { background: rgba(46, 125, 91, .1); border-left: 3px solid var(--bien); }
.error { background: rgba(179, 69, 58, .09); border-left: 3px solid #B3453A; }
.error ul { margin: 6px 0 0; padding-left: 20px; }

.contacto-directo { margin-top: 24px; font-size: 14.5px; color: var(--gris); }
.contacto-directo a { color: var(--navy); font-weight: 600; }

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

.pie-pagina {
  background: var(--navy); color: #8C8578;
  padding: 42px 0 48px;
  font-size: 13.6px;
}
.pie-pagina img { margin-bottom: 14px; opacity: .92; }
.pie-pagina p { margin: 0 0 7px; max-width: 62ch; }
.pie-pagina__contacto { margin-top: 14px; line-height: 1.75; }
.pie-pagina__contacto a { color: var(--oro-claro); text-decoration: none; }
.pie-pagina__contacto a:hover { text-decoration: underline; }

/* ── Pantallas pequeñas ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3 { grid-template-columns: 1fr; }
  .doble { grid-template-columns: 1fr; gap: 26px; padding: 34px 0; }
  /* Apiladas, el texto va primero siempre: la captura ilustra lo que ya se leyó. */
  .doble--invertido .doble__texto { order: 0; }
}

@media (max-width: 640px) {
  .franja { padding: 54px 0; }
  .portada { padding: 66px 0 60px; }
  .rejilla--4 { grid-template-columns: 1fr; }
  .campo--par { grid-template-columns: 1fr; }
  /* En el teléfono la barra deja solo la marca y «Entrar»: los enlaces de
     sección caben mal y la página se recorre bajando de todos modos. */
  .barra__nav a:not(.barra__entrar) { display: none; }
  .plan__para { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton:hover { transform: none; }
}