/* Las páginas públicas (la portada, tu cuenta, cómo funciona): el mismo estudio de luz clara. En la portada, la laptop
   y el teléfono naranjas corren el Kavina de verdad en 3D: las notas señalan controles reales, la cámara entra a la
   pantalla de la laptop donde una sesión corre en vivo y después los dos aparatos quedan aparte, unidos por una línea.
   Fuentes servidas desde aquí (la CSP es solo 'self'): Funnel Display (títulos), Funnel Sans (texto) y Geist Mono
   (el contador que se dibuja en la pantalla, como en la app). */
@font-face { font-family: 'Funnel Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/funnel-display-400-latin.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: 'Funnel Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/funnel-display-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Funnel Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fuentes/funnel-display-500-latin.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: 'Funnel Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fuentes/funnel-display-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Funnel Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fuentes/funnel-display-600-latin.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: 'Funnel Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fuentes/funnel-display-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Funnel Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/funnel-sans-400-latin.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: 'Funnel Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/funnel-sans-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Funnel Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fuentes/funnel-sans-500-latin.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: 'Funnel Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fuentes/funnel-sans-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Funnel Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fuentes/funnel-sans-600-latin.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: 'Funnel Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fuentes/funnel-sans-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fuentes/geist-mono-latin.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; }

/* todo color de las páginas públicas sale de aquí (también los de la escena 3D y los que se dibujan en la pantalla
   de la laptop, que portada.js lee con getComputedStyle) */
:root {
  --estudio: #E6E8EA;
  --estudio-rgb: 230,232,234;
  --cielo-rgb: 247,248,249;      /* la luz de arriba del estudio */
  --piso-rgb: 160,168,175;       /* la sombra de abajo */
  --tinta: #111315;
  --tinta-rgb: 17,19,21;
  --tinta-2: #2A2E32;            /* el botón oscuro, al pasar el mouse */
  --tenue: #5A6168;
  --linea: rgba(17,19,21,.15);
  --blanco: #FFFFFF;
  --blanco-rgb: 255,255,255;
  --sombra-rgb: 20,28,36;
  --naranja: #FF5A1F;
  --naranja-rgb: 255,90,31;
  --vivo: #2FBF71;
  --error: #C2361B;              /* un error junto a su campo */
  /* la marca sobre claro */
  --marca-luz-a: #FFB074;
  --marca-luz-b: #FF5A1F;
  --marca-ventana: #FFD2AE;
  --marca-rec: #FF3B2C;
  /* la escena 3D */
  --tres-sala: #9AA2A8;          /* la sala que se refleja en la laca */
  --tres-sol: #FFFFFF;
  --tres-vidrio: #0B0C0D;        /* el frente negro de las pantallas */
  --tres-teclado: #C94A1B;
  --tres-tecla: #16191B;
  --tres-sombra-rgb: 40,46,52;
  /* lo que se dibuja encima de la captura del estudio: los mismos colores de la app */
  --app-fondo: #262B30;
  --app-rec: #FF5247;
  --app-toma: #5F4143;
  --app-onda-rec: rgba(255,170,160,.55);
  --app-panel: #323C42;
  --app-texto: #E6EBEE;
  --app-tenue: #9AA3AB;
  --app-medidor: #C9A26A;
  --app-reloj-a: #283035;
  --app-reloj-b: #1F262A;
  --app-cuenta: #FF8A4C;
  --app-hundido: #1E2428;
  --app-verde: #6CD45A;
  --app-amarillo: #D6C24A;
  --display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --texto: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--estudio); }
body {
  margin: 0; background: var(--estudio); color: var(--tinta); font-family: var(--texto); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-image: radial-gradient(110% 65% at 50% 0%, rgb(var(--cielo-rgb)) 0%, rgba(var(--cielo-rgb), 0) 62%), linear-gradient(180deg, rgba(var(--piso-rgb), 0) 55%, rgba(var(--piso-rgb), .2) 100%); background-attachment: fixed;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.g { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.ancho { max-width: 1280px; margin: 0 auto; position: relative; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#escena { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; }

/* la marca y la palabra, sobre claro */
.marca .m-rec, .palabra .m-rec { fill: var(--marca-rec); }
.marca .m-luz { fill: url(#marca-luz); }
.marca .m-luz-a { stop-color: var(--marca-luz-a); }
.marca .m-luz-b { stop-color: var(--marca-luz-b); }
.marca .m-piso { fill: url(#marca-piso); }
.marca .m-piso-a { stop-color: var(--marca-luz-b); stop-opacity: .55; }
.marca .m-piso-b { stop-color: var(--marca-luz-b); stop-opacity: 0; }
.marca .m-puerta { fill: var(--tinta); stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; }
.marca .m-ventana { fill: var(--marca-ventana); }
.marca .m-manija { fill: none; stroke: var(--marca-luz-b); stroke-width: 2.6; stroke-linecap: round; }
.palabra .m-letras { fill: var(--tinta); }
.palabra, .marca { display: block; flex: none; overflow: visible; }

.nav { position: fixed; inset: 0 0 auto; z-index: 30; padding-block: 14px; transition: background .25s ease; }
.nav.solida { background: rgba(var(--estudio-rgb), .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav .ancho { display: flex; align-items: center; gap: 26px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo .marca { width: 16px; height: 22px; }
.logo .palabra { height: 19px; width: auto; }
.nav nav { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; }
.nav nav a:not(.boton), .nav nav .enlace { text-decoration: none; color: var(--tenue); transition: color .15s ease; }
.nav nav a:not(.boton):hover, .nav nav .enlace:hover { color: var(--tinta); }
.nav form { margin: 0; display: contents; }
.enlace { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; font: 600 15px/1 var(--texto); padding: 15px 21px; border-radius: 999px; background: var(--tinta); color: var(--blanco); transition: transform .16s var(--ease-out), background .15s ease; min-height: 46px; }
.boton:active { transform: scale(.97); }
.boton:hover { background: var(--tinta-2); }
.boton.claro { background: rgba(var(--blanco-rgb), .78); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
.boton.claro:hover { background: var(--blanco); }
.nav .boton { padding: 11px 16px; font-size: 14px; min-height: 40px; }
.boton svg { width: 13px; height: 13px; }

.heroe { position: relative; height: 100svh; min-height: 660px; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(92px, 13vh, 124px); padding-bottom: 26px; }
h1 { position: relative; z-index: 3; margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5.4vw, 84px); line-height: .95; letter-spacing: -.045em; max-width: 16ch; }
h1 .pal { display: inline-block; }
.pie-heroe { position: relative; z-index: 3; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.acciones form { margin: 0; }
.estado { margin: 0; color: var(--tenue); min-height: 1.5em; font-size: 15px; font-variant-numeric: tabular-nums; }
.estado b { color: var(--tinta); }

/* las notas, ancladas a controles reales (se ubican cada cuadro desde la escena 3D) */
.capa-notas { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.capa-notas svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.capa-notas path { fill: none; stroke: var(--tinta); stroke-width: 1; opacity: .6; }
.capa-notas.oscuro path { stroke: var(--blanco); opacity: .9; }
.capa-notas circle { fill: var(--naranja); }
.nota { position: absolute; left: 0; top: 0; max-width: 230px; font: 500 15px/1.35 var(--texto); color: var(--tinta); will-change: transform, opacity; opacity: 0; }
.nota b { display: block; font-weight: 600; font-size: 13px; color: var(--tenue); margin-bottom: 2px; }
.nota.tarjeta { background: var(--blanco); padding: 10px 13px; border-radius: 10px; box-shadow: 0 12px 26px -12px rgba(var(--sombra-rgb), .6); max-width: 250px; }

.dentro { position: relative; height: 460vh; }
/* z-index: lo pegado al scroll arma su propio apilamiento; sin él, el chip y el título quedan debajo del canvas 3D */
.dentro .fijo { position: sticky; top: 0; height: 100svh; z-index: 3; }
.paso-ui { position: absolute; left: 0; right: 0; bottom: max(26px, 4svh); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; pointer-events: none; }
.paso-ui .chip { display: inline-flex; align-items: center; gap: 14px; background: rgba(var(--tinta-rgb), .86); color: var(--blanco); border-radius: 999px; padding: 10px 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 15px; max-width: calc(100vw - 32px); }
.paso-ui .chip span { color: rgba(var(--blanco-rgb), .55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paso-ui .chip strong { font-weight: 600; }
.paso-ui p { margin: 0; max-width: 34em; background: rgba(var(--estudio-rgb), .92); padding: 8px 14px; border-radius: 12px; color: var(--tinta); font-size: 15px; display: none; }

.dos { position: relative; height: 240vh; }
.dos .fijo { position: sticky; top: 0; height: 100svh; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(96px, 14vh, 126px); }
.dos h2 { position: relative; z-index: 3; margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4.2vw, 64px); line-height: .98; letter-spacing: -.035em; max-width: 22ch; }
.cap { position: fixed; left: 0; top: 0; z-index: 4; width: 300px; margin-left: -150px; text-align: center; opacity: 0; pointer-events: none; will-change: transform; }
.cap strong { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.cap strong i { width: 8px; height: 8px; border-radius: 50%; background: var(--vivo); }
.cap p { margin: 6px 0 0; color: var(--tenue); font-size: 15px; line-height: 1.45; }

.trae { position: relative; z-index: 3; padding-block: 14vh 6vh; }
.trae h2, .final h2 { margin: 0; font-family: var(--display); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.trae h2 { font-size: clamp(32px, 3.8vw, 56px); max-width: 18ch; }
.lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 44px 0 0; padding: 0; list-style: none; }
.lista li { border-top: 1px solid var(--linea); padding: 18px 0 26px; min-width: 0; }
.lista b { display: block; font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -.02em; margin-bottom: 6px; }
.lista span { color: var(--tenue); font-size: 16px; }
.datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 48px 0 0; background: var(--blanco); border-radius: 18px; padding: 8px; }
.datos div { padding: 20px 22px; min-width: 0; }
.datos div + div { border-left: 1px solid var(--linea); }
.datos dt { color: var(--tenue); font-size: 15px; }
.datos dd { margin: 6px 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.02em; line-height: 1.15; }

.final { position: relative; height: 100svh; min-height: 660px; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(96px, 14vh, 126px); padding-bottom: max(26px, 4svh); }
.final h2 { position: relative; z-index: 3; font-size: clamp(40px, 5.4vw, 84px); max-width: 15ch; }
.final .pie-heroe p { margin: 0; color: var(--tenue); font-size: 15px; max-width: 30em; }
.respaldo { position: relative; z-index: 3; display: block; width: min(980px, 100%); height: auto; margin: 28px auto 0; -webkit-mask-image: linear-gradient(180deg, var(--tinta) 82%, transparent); mask-image: linear-gradient(180deg, var(--tinta) 82%, transparent); }
.pie { position: relative; z-index: 3; border-top: 1px solid var(--linea); padding-block: 20px 30px; color: var(--tenue); font-size: 14px; }
.pie .ancho { display: flex; flex-wrap: wrap; gap: 16px; }
.pie .ancho > :last-child { margin-left: auto; }
.pie a { color: var(--tenue); }
.pie a:hover { color: var(--tinta); }

/* sin WebGL (o con menos movimiento): la foto de los dos aparatos y todo el texto, sin escenas pegadas al scroll */
.sin-tres #escena, .sin-tres .capa-notas, .sin-tres .paso-ui, .sin-tres .cap { display: none; }
.sin-tres .heroe { height: auto; min-height: 0; }
.sin-tres .heroe .pie-heroe { margin-top: 28px; }
.sin-tres .dentro, .sin-tres .dos { height: auto; }
.sin-tres .dentro .fijo, .sin-tres .dos .fijo { position: static; height: auto; padding-block: 12vh 0; }
.sin-tres .dentro .sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.sin-tres .pasos { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; padding: 0; list-style: none; counter-reset: paso; }
.sin-tres .pasos li { border-top: 1px solid var(--linea); padding: 18px 0 0; font-size: 17px; counter-increment: paso; }
.sin-tres .pasos li::before { content: counter(paso) " de 3"; display: block; color: var(--tenue); font-size: 15px; margin-bottom: 6px; }
.sin-tres .dos .caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 760px; margin: 40px auto 0; }
.sin-tres .dos .caps .cap { display: block; position: static; opacity: 1; width: auto; margin: 0; }
.sin-tres .final { height: auto; min-height: 0; padding-block: 14vh 10vh; }
.sin-tres .final .pie-heroe { margin-top: 32px; }
.caps { display: contents; }
html:lang(en) .sin-tres .pasos li::before { content: counter(paso) " of 3"; }

@media (max-width: 899px) {
  .nav nav a:not(.boton), .nav nav .enlace { display: none; }
  .capa-notas .nota, .capa-notas svg { display: none; }
  .paso-ui p { display: block; }
  .lista { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr 1fr; }
  .datos div:nth-child(3) { border-left: 0; }
  .datos div:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .dos h2 { font-size: 30px; }
  .cap { width: 172px; margin-left: -86px; }
  .cap p { font-size: 14px; }
  #cap-b { margin-left: -180px; text-align: right; }
  .sin-tres #cap-b { margin-left: 0; text-align: inherit; }   /* la foto de respaldo: los dos textos en su columna */
  .lista { grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .lista b { font-size: 19px; }
  .lista span { font-size: 15px; }
  /* en el teléfono: dos etiquetas cortas sobre los aparatos, sin líneas */
  .capa-notas .nota.movil { display: block; }
  .nota.chica { font-size: 14px; max-width: 170px; background: rgba(var(--blanco-rgb), .86); padding: 7px 11px; border-radius: 999px; box-shadow: 0 8px 20px -12px rgba(var(--sombra-rgb), .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
  .nota.chica b { display: inline; margin: 0 6px 0 0; color: var(--tinta); font-size: 14px; }
  .nota.chica i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); margin-right: 7px; vertical-align: 1px; }
  .paso-ui p { font-size: 14px; }
  .sin-tres .pasos, .sin-tres .dos .caps { grid-template-columns: 1fr; gap: 20px; }
}

/* tu cuenta (entrar, crear, olvidé, restablecer) y las páginas de texto: el mismo estudio, sin 3D. La foto de los dos
   aparatos al lado de la tarjeta (arriba, en el teléfono) */
.publica .nav { position: sticky; }
.acceso { min-height: calc(100svh - 70px); display: grid; align-items: center; padding-block: 24px 64px; }
.acceso-rejilla { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 440px); gap: 56px; align-items: center; }
.acceso-foto { width: 100%; height: auto; display: block; -webkit-mask-image: linear-gradient(180deg, var(--tinta) 85%, transparent); mask-image: linear-gradient(180deg, var(--tinta) 85%, transparent); }
.tarjeta { background: var(--blanco); border-radius: 22px; padding: 32px; box-shadow: 0 40px 80px -48px rgba(var(--sombra-rgb), .55); min-width: 0; }
.tarjeta h1 { font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: -.035em; max-width: none; margin: 0 0 20px; }
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 24px; border-radius: 999px; background: var(--estudio); }
.modos a { text-align: center; text-decoration: none; padding: 10px 12px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--tenue); min-height: 44px; display: grid; place-items: center; }
.modos a[aria-current="page"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(var(--sombra-rgb), .18); }
.tarjeta form { display: grid; gap: 16px; margin: 0; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: 14px; }
.campo input, .con-ojo { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid rgba(var(--tinta-rgb), .22); background: var(--blanco); font: 400 16px var(--texto); color: var(--tinta); }
.campo input { padding: 0 14px; }
.campo input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
.campo input[aria-invalid="true"], .con-ojo:has(input[aria-invalid="true"]) { border-color: var(--error); }
.con-ojo { display: flex; align-items: center; padding: 0; }
.con-ojo input { border: 0; min-height: 46px; flex: 1; min-width: 0; background: transparent; border-radius: 12px 0 0 12px; }
.ver-clave { flex: none; align-self: stretch; border: 0; background: none; padding: 0 14px; font: 600 14px var(--texto); color: var(--tenue); cursor: pointer; border-radius: 0 12px 12px 0; min-width: 44px; }
.ver-clave:hover { color: var(--tinta); }
.regla, .tarjeta .nota { margin: 0; font-size: 14px; color: var(--tenue); }
.error-campo, .error-form { margin: 0; font-size: 14px; font-weight: 500; color: var(--error); }
.casilla { display: flex; align-items: center; gap: 10px; font-size: 15px; min-height: 44px; }
.casilla input { width: 20px; height: 20px; accent-color: var(--tinta); }
.tarjeta .boton { width: 100%; }
.tarjeta .boton:disabled { opacity: .55; cursor: default; }
.tarjeta .enlaces { margin: 0; font-size: 14px; color: var(--tenue); text-align: center; }
.tarjeta .enlaces a { color: var(--tinta); }
.aviso-acceso { margin: 16px 0 0; font-size: 15px; }
.aviso-acceso:empty { display: none; }
.pie-tarjeta { margin-top: 20px !important; }
.cuenta { display: grid; gap: 12px; }
.cuenta p { margin: 0; color: var(--tenue); }
.cuenta b { color: var(--tinta); font-weight: 600; word-break: break-all; }
.cuenta > form { margin: 0; }
.borrar { margin-top: 20px !important; padding-top: 20px; border-top: 1px solid var(--linea); }

/* las páginas de texto: privacidad y cómo funciona */
.texto { max-width: 760px; margin: 0 auto; padding-block: 48px 80px; }
.texto h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1; letter-spacing: -.04em; max-width: 18ch; margin: 0 0 20px; }
.texto h2 { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.025em; line-height: 1.1; margin: 48px 0 12px; }
.texto p, .texto li { color: var(--tinta); }
.texto .lead { font-size: 19px; color: var(--tenue); margin: 0 0 8px; }
.texto ul { padding-left: 20px; }
.texto li + li { margin-top: 6px; }
.texto figure { margin: 24px 0 0; }
.texto figure img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px -40px rgba(var(--sombra-rgb), .6); }
.texto figure.tel img { max-width: 300px; margin: 0 auto; border-radius: 28px; }
.texto figcaption { margin-top: 10px; font-size: 14px; color: var(--tenue); text-align: center; }
.texto .acciones { justify-content: flex-start; margin-top: 32px; }

@media (max-width: 899px) {
  .acceso { align-items: start; }
  .acceso-rejilla { grid-template-columns: 1fr; gap: 8px; }
  .acceso-foto { max-width: 520px; margin: 0 auto; }
  .tarjeta { padding: 24px 20px; }
}
.texto .faq h3 { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -.015em; margin: 24px 0 4px; }
.texto .faq p { margin: 0; color: var(--tenue); }