/* Magnus — sitio público: landing, alta y páginas legales.
   Usa los tokens de /shared/base.css. Claro, texto negro, el rojo solo como acento
   (una palabra, un filete, la marca). Un solo botón principal a la vista. */

:root {
  --ancho: 1120px;
  --alto-cabecera: 60px;
  --wa-fondo: #EFEAE2;
  --wa-mio: #D9FDD3;
  --wa-verde: #00A884;
  --wa-tilde: #53BDEB;
  --wa-gris: #667781;
  --wa-sombra: 0 1px .5px rgba(11, 20, 26, .13);
}
html { scroll-padding-top: calc(var(--alto-cabecera) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { overflow-wrap: break-word; }
/* En el celular, los campos en 16px para que el iPhone no haga zoom al tocarlos */
@media (max-width: 700px) { input, select, textarea { font-size: 16px !important; } }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .contenedor { padding: 0 24px; } }
@media (min-width: 1100px) { .contenedor { padding: 0 32px; } }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--papel); padding: 8px 14px; border-radius: var(--radio-chico); }
.saltar:focus { left: 16px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--azul); text-decoration: underline; cursor: pointer; }

/* ── Marca ───────────────────────────────────────────── */
.marca { display: inline-flex; align-items: center; gap: 9px; color: var(--tinta); text-decoration: none; flex: none; }
.marca svg { width: 30px; height: 30px; flex: none; }
.marca-img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex: none; }
.marca-nombre { font: 800 21px/1 var(--f-titulo); font-stretch: 112%; letter-spacing: -.01em; display: inline-flex; align-items: baseline; }
.marca-punto { width: 6px; height: 6px; margin-left: 3px; background: var(--rojo); display: inline-block; }

/* ── Cabecera fija ───────────────────────────────────── */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(245, 244, 241, .94); border-bottom: 1px solid transparent; transition: border-color .2s; }
@supports (backdrop-filter: blur(8px)) { .cabecera { background: rgba(245, 244, 241, .82); backdrop-filter: saturate(1.3) blur(10px); } }
.cabecera.con-borde { border-bottom-color: var(--linea); }
.cabecera-fila { display: flex; align-items: center; gap: 16px; height: var(--alto-cabecera); }
.nav { display: none; gap: 24px; margin-left: 28px; }
.nav a { color: var(--tinta-2); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.nav a:hover { color: var(--tinta); }
@media (min-width: 1100px) { .nav { display: flex; } }
.cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.enlace-ingresar { color: var(--tinta); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.enlace-ingresar:hover { text-decoration: underline; text-underline-offset: 3px; }
.cabecera .pregunta { color: var(--apagado); font-size: 14px; }
@media (max-width: 520px) { .cabecera .pregunta { display: none; } }
/* El botón de la cabecera aparece recién cuando el del titular sale de la pantalla: nunca hay dos a la vista */
.js .cabecera-cta { display: none; }
.js .cabecera.cta-visible .cabecera-cta { display: inline-flex; animation: aparecer .2s ease-out; }
@media (max-width: 560px) { .js .cabecera.cta-visible .enlace-ingresar { display: none; } }
@media (max-width: 400px) { .js .cabecera.cta-visible .marca-nombre { display: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(-3px); } }

/* ── Titular ─────────────────────────────────────────── */
.hero { padding: 28px 0 48px; }
@media (min-width: 1024px) { .hero { padding: 48px 0 80px; } }
.hero-grilla { display: grid; gap: 40px; }
@media (min-width: 1024px) { .hero-grilla { grid-template-columns: minmax(0, 1fr) 430px; gap: 56px; align-items: center; } }
.rotulo { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px; font: 500 12.5px/1.2 var(--f-codigo); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.rotulo::before { content: ''; width: 8px; height: 8px; background: var(--rojo); flex: none; }
.hero h1 { font-size: clamp(36px, 6.4vw, 60px); line-height: 1.02; font-weight: 800; letter-spacing: -.022em; }
.hero h1 .segunda { display: block; margin-top: .12em; }
.acento { color: var(--rojo); }
.bajada { margin: 20px 0 28px; max-width: 32em; font-size: clamp(17px, 2.1vw, 20px); line-height: 1.5; color: var(--tinta-2); }
.hero-accion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn.grande { min-height: 54px; padding: 0 28px; font-size: 16.5px; border-radius: 9px; }
.hero-letra { margin: 0; font-size: 14px; color: var(--apagado); }

/* ── Demo en vivo (un chat que se ve como WhatsApp) ──── */
.demo { width: 100%; max-width: 440px; justify-self: center; }
@media (min-width: 1024px) { .demo { justify-self: end; } }
.demo-rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.en-vivo { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.2 var(--f-codigo); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.en-vivo .punto { color: var(--verde); animation: latido 1.8s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .3; } }
.demo-rotulo .ayuda { font-size: 13px; color: var(--apagado); text-align: right; }
.wa { display: flex; flex-direction: column; height: 580px; background: var(--wa-fondo); border: 1px solid var(--linea-fuerte); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(21, 23, 27, .05), 0 24px 48px -22px rgba(21, 23, 27, .3); }
@media (max-width: 599px) { .wa { height: 560px; } }
.wa-cabecera { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 8px; background: #fff; border-bottom: 1px solid #E6E2DA; }
.wa-cabecera .volver { width: 22px; height: 22px; color: #54656F; flex: none; }
.wa-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--rojo); color: #fff; font: 700 14.5px/1 var(--f-titulo); letter-spacing: .02em; }
.wa-quien { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.wa-quien strong { font-size: 16px; font-weight: 600; }
.wa-estado { font-size: 13px; color: var(--wa-gris); }
.wa-estado.escribiendo { color: var(--wa-verde); }
.wa-iconos { display: flex; gap: 18px; color: #54656F; }
.wa-iconos svg { width: 20px; height: 20px; }
.wa-mensajes {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin;
  background-color: var(--wa-fondo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23DDD5C8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='20' width='26' height='11' rx='1.5'/%3E%3Crect x='27' y='31' width='26' height='11' rx='1.5'/%3E%3Cpath d='M100 34l18-14 6 20z'/%3E%3Cpath d='M118 20l7-8'/%3E%3Cpath d='M22 120l14-12 14 12v16H22z'/%3E%3Cpath d='M32 136v-9h8v9'/%3E%3Cpath d='M98 102h24l3 30H95z'/%3E%3Cpath d='M99 110h22'/%3E%3Crect x='58' y='70' width='40' height='9' rx='2'/%3E%3Ccircle cx='78' cy='74.5' r='2.2'/%3E%3Cpath d='M140 72h7M143.5 68.5v7M66 146h7M69.5 142.5v7'/%3E%3C/svg%3E");
}
.wa-fecha { align-self: center; margin: 0 0 10px; padding: 5px 12px; border-radius: 8px; background: #fff; color: #54656F; font-size: 12.5px; box-shadow: var(--wa-sombra); }
.wa-nota { align-self: center; max-width: 90%; margin: 6px 0 10px; padding: 7px 12px; border-radius: 8px; background: #FFF4CF; color: #54656F; font-size: 12.5px; line-height: 1.45; text-align: center; box-shadow: var(--wa-sombra); }
.wa-nota.pase { background: #FBEAE9; color: #7E1C18; }
.wa-nota strong { color: inherit; }
.b { position: relative; max-width: min(86%, 330px); padding: 6px 8px 7px 9px; border-radius: 8px; font-size: 14.5px; line-height: 1.42; box-shadow: var(--wa-sombra); white-space: pre-wrap; overflow-wrap: anywhere; }
.b.suya { align-self: flex-start; background: #fff; }
.b.mia { align-self: flex-end; background: var(--wa-mio); }
.b.primera { margin-top: 8px; }
.b.suya.primera { border-top-left-radius: 0; }
.b.mia.primera { border-top-right-radius: 0; }
.b.suya.primera::before, .b.mia.primera::before { content: ''; position: absolute; top: 0; width: 8px; height: 13px; }
.b.suya.primera::before { left: -7px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.b.mia.primera::before { right: -7px; background: var(--wa-mio); clip-path: polygon(0 0, 100% 0, 0 100%); }
.b .meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 8px -2px -5px 12px; font-size: 11px; line-height: 1; color: var(--wa-gris); white-space: nowrap; }
.b .tildes { width: 16px; height: 11px; color: #8696A0; }
.b .tildes.leido { color: var(--wa-tilde); }
.b.img { padding: 3px; width: min(86%, 300px); }
.b.img img { display: block; width: 100%; height: auto; border-radius: 6px; cursor: zoom-in; background: #F3F1EC; min-height: 120px; }
.b.img .meta { position: absolute; right: 8px; bottom: 8px; margin: 0; float: none; padding: 3px 6px; border-radius: 8px; background: rgba(11, 20, 26, .5); color: #fff; }
.b.img .roto { display: block; padding: 18px 12px; font-size: 13px; color: var(--wa-gris); }
.b.escribiendo { display: inline-flex; gap: 4px; padding: 12px 13px; }
.b.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #9AA5AC; animation: salto 1.2s infinite ease-in-out; }
.b.escribiendo i:nth-child(2) { animation-delay: .15s; }
.b.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes salto { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.wa-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 2px; }
.wa-sugerencias[hidden] { display: none; }
.wa-sug { font: 500 13.5px/1.3 var(--f-texto); color: var(--tinta); background: #fff; border: 1px solid #D5CEC3; border-radius: 18px; padding: 7px 12px; text-align: left; cursor: pointer; box-shadow: var(--wa-sombra); }
.wa-sug:hover { border-color: var(--wa-verde); }
.wa-sug:disabled { opacity: .55; cursor: default; }
.wa-pie { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; }
.wa-pie input[type=text] { flex: 1; min-width: 0; min-height: 44px; border: 0; border-radius: 22px; padding: 10px 16px; background: #fff; box-shadow: var(--wa-sombra); font-size: 15px; }
.wa-pie input[type=text]:focus-visible { outline: 2px solid var(--wa-verde); outline-offset: 1px; }
.wa-enviar { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--wa-verde); color: #fff; cursor: pointer; }
.wa-enviar:disabled { background: #93CDBF; cursor: default; }
.wa-enviar svg { width: 20px; height: 20px; }
.demo-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 10px 2px 0; font-size: 13px; color: var(--apagado); }
.demo-pie .enlace-boton { font-size: 13px; color: var(--tinta-2); white-space: nowrap; }

/* Visor de la imagen del presupuesto */
.visor { width: min(94vw, 800px); max-width: none; max-height: 92vh; padding: 0; border: 1px solid var(--linea); border-radius: 12px; background: #fff; box-shadow: 0 30px 80px -24px rgba(21, 23, 27, .45); overflow: auto; }
.visor::backdrop { background: rgba(245, 244, 241, .9); }
.visor img { display: block; width: 100%; height: auto; }
.visor-pie { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linea); background: #fff; font-size: 13px; color: var(--apagado); }

/* ── Secciones ───────────────────────────────────────── */
.seccion { padding: 56px 0; border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .seccion { padding: 88px 0; } }
.seccion h2 { font-size: clamp(27px, 4.2vw, 40px); font-weight: 800; letter-spacing: -.015em; max-width: 24ch; }
.seccion-bajada { margin: 14px 0 0; max-width: 62ch; font-size: 17px; color: var(--tinta-2); }

/* Números medidos */
.comparaciones { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 800px) { .comparaciones { grid-template-columns: 1fr 1fr; } }
.comparacion { margin: 0; padding: 22px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.comparacion figcaption { margin-bottom: 20px; }
.comparacion figcaption strong { display: block; font: 700 18px/1.25 var(--f-titulo); }
.comparacion figcaption span { font-size: 13.5px; color: var(--apagado); }
.barra-fila + .barra-fila { margin-top: 18px; }
.barra-rotulos { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.barra-quien { font-size: 14.5px; color: var(--tinta-2); }
.barra-fila.magnus .barra-quien { color: var(--tinta); font-weight: 600; }
.barra-valor { font: 700 22px/1 var(--f-titulo); font-stretch: 112%; white-space: nowrap; }
.barra-pista { height: 16px; }
.barra { height: 100%; width: var(--v); min-width: 8px; border-radius: 0 4px 4px 0; background: #CBC6BC; }
.barra-fila.magnus .barra { background: var(--rojo); }
.barra.abierta { border-radius: 0; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent); mask-image: linear-gradient(90deg, #000 76%, transparent); }
.cifras { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 800px) { .cifras { grid-template-columns: repeat(3, 1fr); } }
.cifra { padding: 22px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.cifra-valor { display: block; font: 800 44px/1 var(--f-titulo); font-stretch: 112%; letter-spacing: -.02em; }
.cifra-texto { display: block; margin-top: 10px; font-size: 15.5px; color: var(--tinta-2); }
.fuente { margin: 20px 0 0; max-width: 84ch; font-size: 13px; color: var(--apagado); }

/* Cómo funciona: un remito de alta */
.remito { margin-top: 32px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.remito-cabecera, .remito-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 20px; font: 500 12px/1.4 var(--f-codigo); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.remito-cabecera { border-bottom: 1px dashed var(--linea-fuerte); }
.remito-pie { border-top: 1px dashed var(--linea-fuerte); color: var(--tinta-2); }
.remito-pie strong { font-family: var(--f-titulo); font-size: 14px; letter-spacing: .02em; color: var(--tinta); }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; }
.paso { display: flex; gap: 14px; padding: 22px 20px; border-bottom: 1px solid var(--linea); }
.paso:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .pasos { grid-template-columns: 1fr 1fr; }
  .paso:nth-child(odd) { border-right: 1px solid var(--linea); }
  .paso:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .pasos { grid-template-columns: repeat(4, 1fr); }
  .paso { flex-direction: column; gap: 12px; border-bottom: 0; border-right: 1px solid var(--linea); }
  .paso:last-child { border-right: 0; }
}
.paso-n { flex: none; font: 600 13px/1 var(--f-codigo); color: var(--rojo); padding-top: 4px; }
.paso h3 { font-size: 18px; margin-bottom: 6px; }
.paso p { margin: 0; font-size: 15px; color: var(--tinta-2); }

/* Qué hace solo y qué pasa a una persona */
.dos-listas { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 800px) { .dos-listas { grid-template-columns: 1fr 1fr; } }
.lista-caja { padding: 24px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.lista-caja.pase { box-shadow: inset 0 3px 0 var(--rojo); }
.lista-caja h3 { font-size: 19px; margin-bottom: 18px; }
.lista-caja ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.lista-caja li { position: relative; padding-left: 30px; color: var(--tinta-2); }
.lista-caja li strong { color: var(--tinta); font-weight: 600; }
.lista-caja li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%2315171B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E"); }
.lista-caja.pase li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23C8201B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h11M10 5l4 4-4 4'/%3E%3C/svg%3E"); }
.jerga { font-family: var(--f-codigo); font-size: 13px; background: var(--papel-2); padding: 1px 6px; border-radius: 5px; white-space: nowrap; color: var(--tinta); }
.lista-nota { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--linea); font-size: 14.5px; color: var(--tinta-2); }

/* Planes */
.planes { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) { .planes { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.plan.destacado { border-color: var(--tinta); box-shadow: inset 0 4px 0 var(--rojo); }
.plan-etiqueta { position: absolute; top: 22px; right: 20px; font: 500 11.5px/1 var(--f-codigo); letter-spacing: .06em; text-transform: uppercase; color: var(--rojo); }
.plan h3 { font-size: 22px; font-weight: 800; font-stretch: 112%; }
.plan-para { margin: 4px 0 18px; font-size: 14.5px; color: var(--apagado); }
.plan-precio { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.plan-precio .moneda { font: 600 16px/1 var(--f-titulo); }
.plan-precio .monto { font: 800 44px/1 var(--f-titulo); font-stretch: 112%; letter-spacing: -.02em; }
.plan-precio .periodo { color: var(--apagado); }
.plan ul { list-style: none; margin: 20px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 10px; }
.plan li { position: relative; padding-left: 26px; font-size: 15px; }
.plan li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%2315171B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E"); }
.plan-enlace { margin-top: auto; font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.plan-enlace:hover { color: var(--rojo); }
.planes-notas { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--tinta-2); }
@media (min-width: 900px) { .planes-notas { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.planes-notas li { position: relative; padding-left: 16px; }
.planes-notas li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--rojo); }

/* Preguntas frecuentes */
.faq { max-width: 860px; margin-top: 28px; border-top: 1px solid var(--linea-fuerte); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; list-style: none; cursor: pointer; font: 600 18px/1.3 var(--f-titulo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 14px; height: 14px; background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2315171B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 1v12M1 7h12'/%3E%3C/svg%3E"); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--tinta-2); }
.faq .respuesta { max-width: 70ch; padding: 0 2px 20px; color: var(--tinta-2); }
.faq .respuesta p:last-child { margin-bottom: 0; }

/* Hecho en un corralón */
.origen-fila { display: grid; gap: 24px; align-items: center; }
@media (min-width: 700px) { .origen-fila { grid-template-columns: 170px minmax(0, 1fr); gap: 44px; } }
.sello { width: 150px; height: 150px; color: var(--rojo); transform: rotate(-8deg); }
.origen h2 { margin-bottom: 14px; }
.origen p { max-width: 58ch; font-size: 18px; color: var(--tinta-2); }
.origen .cierre { margin: 22px 0 0; font-size: 16px; font-weight: 600; }
.origen .cierre a { color: var(--tinta); text-underline-offset: 4px; }
.origen .cierre a:hover { color: var(--rojo); }

/* Pie */
.pie { padding: 28px 0 40px; border-top: 1px solid var(--linea); }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.pie p { margin: 0; font-size: 13.5px; color: var(--apagado); }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pie nav a { font-size: 14px; color: var(--tinta-2); }

/* ── Alta ────────────────────────────────────────────── */
.alta { padding-top: 28px; padding-bottom: 64px; }
.alta-grilla { display: grid; gap: 28px; }
@media (min-width: 960px) { .alta-grilla { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; } }
.alta h1 { font-size: clamp(30px, 5vw, 42px); font-weight: 800; letter-spacing: -.015em; }
.alta-bajada { margin: 10px 0 24px; font-size: 17px; color: var(--tinta-2); }
.form-caja { padding: 22px 18px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
@media (min-width: 700px) { .form-caja { padding: 30px 32px; } }
.form-caja fieldset { min-width: 0; margin: 0 0 30px; padding: 0; border: 0; }
.form-caja legend { padding: 0; margin-bottom: 16px; font: 700 18px/1.2 var(--f-titulo); }
.campos { display: grid; gap: 16px; }
@media (min-width: 640px) { .campos.dos { grid-template-columns: 1fr 1fr; } .campos .ancho { grid-column: 1 / -1; } }
.campo-suelto { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 14px; }
.campo-suelto .ayuda { font-weight: 400; color: var(--apagado); font-size: 13px; }
label.campo .ayuda { margin-top: -3px; }
[aria-invalid="true"] { border-color: var(--rojo) !important; box-shadow: 0 0 0 1px var(--rojo); }
.error-campo:empty { display: none; }
.clave-caja { position: relative; }
.clave-caja input { padding-right: 96px; }
.clave-caja .btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 0 10px; font-size: 13px; }
.zona-aviso strong { display: block; margin-bottom: 2px; }
.zona-aviso p { margin: 0; }
.zona-ok { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; color: var(--verde); }
.nota-clave { margin: 0; font-size: 13px; color: var(--apagado); }
.ayuda-plan { margin: -8px 0 14px; font-size: 14px; color: var(--apagado); }
.planes-opciones { display: grid; gap: 10px; }
@media (min-width: 640px) { .planes-opciones { grid-template-columns: repeat(3, 1fr); } }
.opcion-plan { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 12px 14px 42px; background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); cursor: pointer; }
.opcion-plan input { position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; margin: 0; accent-color: var(--tinta); }
.opcion-plan:has(input:checked) { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.opcion-plan strong { font: 700 16px/1.2 var(--f-titulo); }
.opcion-plan .precio { font-size: 14px; color: var(--tinta-2); }
.opcion-plan .detalle { font-size: 12.5px; line-height: 1.4; color: var(--apagado); }
.acepto { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; cursor: pointer; }
.acepto input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tinta); }
.form-caja .aviso.alerta { margin-top: 18px; }
.enviar-fila { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
@media (min-width: 640px) { .enviar-fila { flex-direction: row; align-items: center; gap: 18px; } }
.enviar-fila .btn { min-height: 52px; padding: 0 26px; font-size: 16px; }
.enviar-fila p { margin: 0; font-size: 13.5px; color: var(--apagado); }
.alta-lateral { display: grid; gap: 16px; }
.lateral-caja { padding: 20px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.lateral-caja h2 { margin-bottom: 14px; font-size: 17px; }
.lateral-caja ol { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lateral-caja li { position: relative; padding-left: 34px; font-size: 14.5px; color: var(--tinta-2); }
.lateral-caja li::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 600 12.5px/1.5 var(--f-codigo); color: var(--rojo); }
.lateral-caja p { margin: 0; font-size: 14.5px; color: var(--tinta-2); }
.confirmacion { text-align: left; }
.confirmacion svg { width: 40px; height: 40px; color: var(--verde); margin-bottom: 12px; }
.confirmacion h2 { font-size: 24px; margin-bottom: 10px; }
.confirmacion p { color: var(--tinta-2); font-size: 16px; }

/* ── Páginas legales ─────────────────────────────────── */
.legal { padding-top: 32px; padding-bottom: 72px; }
.legal-cuerpo { max-width: 760px; }
.legal h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; letter-spacing: -.015em; }
.legal .actualizado { margin: 8px 0 22px; font-size: 14px; color: var(--apagado); }
.aviso-borrador { margin: 0 0 28px; font-size: 15px; }
.aviso-borrador strong { display: block; font-size: 16px; margin-bottom: 2px; }
.indice { margin-bottom: 36px; padding: 18px 22px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.indice h2 { margin: 0 0 10px; font: 500 12.5px/1.2 var(--f-codigo); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.indice ol { margin: 0; padding-left: 22px; columns: 2 260px; column-gap: 32px; }
.indice li { margin-bottom: 6px; font-size: 14.5px; break-inside: avoid; }
.legal-cuerpo h2 { margin: 40px 0 12px; font-size: 21px; scroll-margin-top: 80px; }
.legal-cuerpo h3 { margin: 22px 0 8px; font-size: 16.5px; }
.legal-cuerpo p, .legal-cuerpo li { font-size: 15.5px; line-height: 1.65; color: var(--tinta-2); }
.legal-cuerpo ul { margin: 0 0 14px; padding-left: 22px; }
.legal-cuerpo li { margin-bottom: 6px; }
/* Datos que faltan en los legales: se ven como "a confirmar", sin corchetes; lo que falta queda en data-falta.
   El aviso "Versión en revisión" se va solo cuando ya no queda ningún .completar. */
.completar, .completar-muestra { padding: 1px 7px; border-radius: 5px; background: var(--papel-2); color: var(--tinta-2); font-size: .9em; font-weight: 500; white-space: nowrap; }
.completar.nota-interna { display: none; }
.aviso-revision { margin: 0 0 28px; font-size: 15px; }
.aviso-revision strong { display: block; font-size: 16px; margin-bottom: 2px; }
.legal-cuerpo:not(:has(.completar)) .aviso-revision { display: none; }
.legal-cuerpo .indice h2 { margin: 0 0 10px; font: 500 12.5px/1.2 var(--f-codigo); }   /* el índice no toma el tamaño de los títulos */
.pie .pie-contacto a { color: var(--tinta-2); overflow-wrap: anywhere; }
.legal-cuerpo .tabla-caja { margin: 8px 0 18px; }

/* ── Clave nueva (/clave/) ───────────────────────────── */
.clave { padding-top: 40px; padding-bottom: 72px; display: grid; justify-items: center; }
.clave-tarjeta { width: min(460px, 100%); }
.clave-tarjeta h1 { margin-bottom: 8px; font-size: clamp(26px, 6vw, 32px); font-weight: 800; letter-spacing: -.01em; }
.clave-tarjeta h1:focus { outline: none; }
.clave-tarjeta .bajada { margin: 0 0 18px; color: var(--tinta-2); overflow-wrap: anywhere; }
.clave-tarjeta form { display: grid; gap: 16px; }
.clave-tarjeta .btn.principal { width: 100%; min-height: 48px; }
.clave-tarjeta .aviso { margin: 0 0 16px; }
.clave-tarjeta #clave-listo { margin: 0; }
.clave-ayuda { margin: 16px 0 0; font-size: 14px; color: var(--apagado); }
.clave-ayuda a { color: var(--tinta-2); }

/* ── Página que no existe (404) ──────────────────────── */
.no-existe { display: grid; gap: 24px; align-items: center; padding-top: 40px; padding-bottom: 80px; }
@media (min-width: 800px) { .no-existe { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; padding-top: 64px; } }
.no-existe-img { width: 100%; max-width: 200px; height: auto; }
@media (min-width: 800px) { .no-existe-img { max-width: 280px; } }
.no-existe h1 { margin-bottom: 10px; font-size: clamp(30px, 6vw, 46px); font-weight: 800; letter-spacing: -.015em; }
.no-existe .bajada { font-size: 17px; color: var(--tinta-2); }
.no-existe-codigo { margin: 0 0 8px; font: 500 12.5px/1 var(--f-codigo); letter-spacing: .08em; text-transform: uppercase; color: var(--rojo); }
.no-existe-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }
.no-existe-acciones .btn { min-height: 48px; padding: 0 24px; }
.legal-cuerpo .tabla td { font-size: 14.5px; vertical-align: top; }
.legal-cuerpo .leyenda { margin-top: 36px; padding: 16px 18px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); font-size: 14px; }

/* Alta: el plan recomendado para arrancar */
.opcion-plan .reco { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--tinta, #15171B); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; vertical-align: 2px; }