/* Citado por IA — landing (spec §3). Sin fuentes externas: no se envía la IP a terceros.
   Diseño: sobrio y tipográfico, guiado por las HIG de Apple (skill apple-design).
   Reglas: un solo acento (azul) y solo para lo interactivo; ok/error solo en el formulario;
   la firma visual es la escala del margen de error. Sin estilos en línea (CSP). */
:root {
  color-scheme: light dark;
  --fondo: #ffffff; --fondo-2: #f5f5f7; --texto: #1d1d1f; --texto-2: #6e6e73; --linea: #d2d2d7;
  --campo: #86868b; --acento: #0071e3; --enlace: #0066cc; --ok: #1a7f37; --error: #c4281c;
  --inv-fondo: #1d1d1f; --inv-texto: #f5f5f7; --inv-texto-2: #a1a1a6;
  --barra: rgba(255, 255, 255, 0.8);
  --radio: 20px; --ancho: 1024px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000; --fondo-2: #1d1d1f; --texto: #f5f5f7; --texto-2: #a1a1a6; --linea: #424245;
    --campo: #6e6e73; --enlace: #2997ff; --ok: #30d158; --error: #ff6961;
    --inv-fondo: #f5f5f7; --inv-texto: #1d1d1f; --inv-texto-2: #6e6e73;
    --barra: rgba(0, 0, 0, 0.72);
  }
}
* { box-sizing: border-box; }
html { scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; }
a { color: var(--enlace); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* Barra superior: la única capa translúcida (HIG › Materials: el vidrio, solo en los controles flotantes) */
header.barra { position: sticky; top: 0; z-index: 10; background: var(--barra); border-bottom: 1px solid var(--linea); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  header.barra { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
@media (prefers-reduced-transparency: reduce) {
  header.barra { background: var(--fondo); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
header.barra .envoltura { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.logo { font-weight: 600; font-size: 17px; color: var(--texto); text-decoration: none; letter-spacing: -0.01em; }
.logo span { color: inherit; }
nav a { margin-left: 24px; text-decoration: none; color: var(--texto-2); font-size: 14px; }
nav a:hover { color: var(--texto); }

/* Portada */
.portada { text-align: center; padding: clamp(72px, 12vw, 136px) 0 clamp(64px, 10vw, 112px); }
.etiqueta { display: block; font-size: 17px; font-weight: 600; color: var(--texto-2); margin: 0 0 16px; }
h1 { font-size: clamp(40px, 7.4vw, 76px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; margin: 0 auto 24px; max-width: 880px; text-wrap: balance; }
.portada p.lead { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.4; color: var(--texto-2); max-width: 720px; margin: 0 auto 36px; text-wrap: pretty; }
.botones { display: flex; gap: 12px 28px; flex-wrap: wrap; align-items: center; justify-content: center; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 0; border-radius: 980px; padding: 0 28px;
  font: inherit; font-size: 17px; cursor: pointer; text-decoration: none; background: transparent; color: var(--enlace); }
.boton.primario { background: var(--acento); color: #fff; }
.boton.primario:hover { background: #0077ed; }
.boton.secundario { padding: 0 4px; }
.boton.secundario::after { content: "\00a0\203a"; }
.boton.secundario:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) { .boton { transition: background-color 0.2s; } }
.nota { font-size: 14px; color: var(--texto-2); margin: 20px 0 0; }

/* Secciones: se alternan fondo y superficie, sin líneas ni bordes */
section { padding: clamp(72px, 10vw, 120px) 0; --superficie: var(--fondo-2); }
section:nth-of-type(even) { background: var(--fondo-2); --superficie: var(--fondo); }
h2 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; margin: 0 auto 16px; text-align: center; max-width: 820px; text-wrap: balance; }
h2 + :is(.precios, .rejilla, ul.lista, .formulario, details) { margin-top: 48px; }
.subtitulo { color: var(--texto-2); font-size: clamp(17px, 2vw, 21px); line-height: 1.45; max-width: 720px; margin: 0 auto 48px; text-align: center; text-wrap: pretty; }
.rejilla { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.tarjeta { background: var(--superficie); border-radius: var(--radio); padding: 32px; }
.tarjeta h3 { margin: 0 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.tarjeta p { margin: 0; color: var(--texto-2); font-size: 17px; }
.paso { font-size: 14px; font-weight: 600; color: var(--texto-2); margin-bottom: 14px; }
.paso::before { content: "Paso "; }
html[lang="en"] .paso::before { content: "Step "; }
.cita { font-size: 13px; color: var(--texto-2); text-align: center; margin: 28px 0 0; }

/* Firma: la escala del margen de error */
.escala { margin: 0 auto; max-width: 720px; }
.escala .eje { position: relative; height: 12px; border-radius: 99px; background: var(--linea); }
.escala .rango { position: absolute; top: 0; bottom: 0; left: 21%; width: 19%; border-radius: 99px; background: var(--acento); transform-origin: left center; }
.escala .punto { position: absolute; top: 50%; left: 30%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--fondo); border: 4px solid var(--texto); }
.escala .marcas { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-2); margin-top: 14px; }
.escala figcaption { margin-top: 28px; text-align: center; font-size: clamp(19px, 2.4vw, 24px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.escala figcaption small { display: block; margin-top: 6px; font-size: 15px; font-weight: 400; color: var(--texto-2); letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .escala:not(.visto) .rango { transform: scaleX(0); }
  .js .escala:not(.visto) .punto { opacity: 0; }
  .escala .rango { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
  .escala .punto { transition: opacity 0.5s 0.7s; }
}

/* Lista de lo que incluye */
ul.lista { padding: 0; margin: 0 auto; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; max-width: 880px; }
ul.lista li { padding: 18px 0 18px 32px; position: relative; border-bottom: 1px solid var(--linea); }
ul.lista li::before { content: "✓"; position: absolute; left: 0; color: var(--texto); font-weight: 600; }

/* Precios */
.precios { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin: 0 auto; }
.precio { background: var(--superficie); border-radius: var(--radio); padding: 40px 36px; display: flex; flex-direction: column; align-items: flex-start; }
.precio h3 { margin: 0 0 20px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.precio p { margin: 0 0 28px; color: var(--texto-2); }
.precio .cifra { font-size: 48px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 14px; }
.precio .cifra small { display: block; margin-top: 6px; font-size: 15px; font-weight: 400; color: var(--texto-2); letter-spacing: 0; }
.precio .boton { margin-top: auto; }
.precio.destacado { background: var(--inv-fondo); color: var(--inv-texto); }
.precio.destacado p, .precio.destacado .cifra small { color: var(--inv-texto-2); }

/* Formulario */
.formulario { background: var(--superficie); border-radius: 28px; padding: clamp(24px, 5vw, 44px); max-width: 640px; margin: 0 auto; }
.campo { margin-bottom: 20px; }
.campo label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 15px; }
.campo input[type=email], .campo select { width: 100%; min-height: 48px; padding: 0 16px; font: inherit; color: var(--texto); border: 1px solid var(--campo); border-radius: 12px; background: var(--fondo); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consentimiento { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--texto-2); margin: 4px 0 28px; }
.consentimiento input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--acento); }
.formulario .botones { justify-content: flex-start; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mensaje { margin: 18px 0 0; font-weight: 600; }
.mensaje:empty { margin: 0; }
.mensaje.ok { color: var(--ok); } .mensaje.error { color: var(--error); }

/* Preguntas frecuentes */
#preguntas .envoltura, #faq .envoltura { max-width: 760px; }
details { border-bottom: 1px solid var(--linea); }
details:first-of-type { border-top: 1px solid var(--linea); }
summary { font-weight: 600; font-size: 19px; letter-spacing: -0.01em; cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 50%; margin-top: -16px; font-size: 28px; font-weight: 300; line-height: 32px; color: var(--texto-2); }
details[open] summary::after { content: "−"; }
details p { color: var(--texto-2); margin: -6px 0 24px; padding-right: 40px; }

/* Pie */
footer.pie { background: var(--fondo); border-top: 1px solid var(--linea); color: var(--texto-2); padding: 32px 0 40px; font-size: 13px; }
footer.pie p { margin: 0 0 8px; }
footer.pie a { color: var(--texto); margin-right: 20px; text-decoration: none; }
footer.pie a:hover { text-decoration: underline; }

/* Páginas legales */
.legal main { max-width: 720px; margin: 0 auto; padding: 56px 24px 96px; }
.legal h1 { font-size: clamp(32px, 5vw, 44px); text-align: left; margin: 0 0 24px; max-width: none; }
.legal h2 { font-size: 22px; text-align: left; margin: 36px 0 10px; max-width: none; letter-spacing: -0.015em; }

@media (max-width: 760px) {
  .rejilla, .precios, ul.lista, .dos { grid-template-columns: 1fr; }
  nav a:not(.idioma) { display: none; }
  .tarjeta, .precio { padding: 28px 24px; }
  .escala .punto { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
}
@media (prefers-contrast: more) {
  :root { --texto-2: #424245; --linea: #86868b; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --texto-2: #d2d2d7; --linea: #86868b; }
}