/* Isolínea · páginas interiores (privacidad, términos, soporte, sismo compartido, 404).
   Se carga después de portada.css y usa sus tokens, cabecera, pie y botones.
   Aquí solo va lo propio de estas páginas: encabezado con isosistas, lectura larga, tablas, preguntas. */

/* ---------- Encabezado de página ---------- */
.phead { position: relative; overflow: hidden; isolation: isolate; padding: clamp(128px, 15vw, 188px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule-soft); }
/* Las isosistas: una máscara del SVG pintada con el color de la marca, para que sigan el tema */
.phead__map { position: absolute; z-index: -1; top: clamp(-40px, -2vw, 0px); right: max(-160px, -12vw); width: min(860px, 86vw); aspect-ratio: 800 / 520; pointer-events: none; animation: fade 1.2s ease both; }
/* Las isosistas: una máscara del SVG pintada con el color de la marca, para que sigan el tema.
   Una segunda máscara radial las desvanece hacia los bordes, para que no se corten en seco. */
.phead__map::before { content: ""; position: absolute; inset: 0; background: var(--iso); opacity: .55;
  -webkit-mask-image: url(/img/isosistas.svg), radial-gradient(ellipse 72% 52% at 70% 48%, #000 45%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-in;
  mask-image: url(/img/isosistas.svg), radial-gradient(ellipse 72% 52% at 70% 48%, #000 45%, transparent 100%);
  mask-size: 100% 100%, 100% 100%; mask-repeat: no-repeat; mask-composite: intersect; }
/* Epicentro: el punto desde el que salen las curvas (560, 250 en el SVG) */
.phead__map::after { content: ""; position: absolute; left: 70%; top: 48.08%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--m-strong); box-shadow: 0 0 0 5px color-mix(in srgb, var(--m-strong) 22%, transparent); }
.phead__in { position: relative; max-width: 46rem; }
.eyebrow { font: 500 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); --halo: .5em; }
.phead h1 { margin-top: 14px; font: 740 clamp(46px, 7vw, 96px)/.95 var(--display); letter-spacing: -.04em; --halo: .14em; margin-left: -.03em; }
.phead .lede + .lede { margin-top: 8px; }
.phead .lede { margin-top: 22px; max-width: 36rem; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--ink); --halo: .4em; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 26px; font-size: 14.5px; color: var(--ink-2); }
.meta p { display: inline-flex; align-items: center; gap: 8px; }
.meta p::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--iso); flex: none; }
.langnote { margin-top: 14px; max-width: 40rem; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* El halo de los rótulos necesita el color del fondo exacto */
.phead .halo { -webkit-text-stroke-color: var(--paper); }

/* ---------- Documento: índice + texto ---------- */
.doc { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 42rem); gap: clamp(32px, 6vw, 104px); align-items: start; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(72px, 9vw, 120px); }
.toc { position: sticky; top: 28px; font-size: 15px; }
.toc h2 { font: 500 12.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 2.1em 1fr; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1.5px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 500 12px/1.6 var(--mono); color: var(--ink-3); }
.toc a:hover { color: var(--ink); border-left-color: var(--iso); }

.prose { counter-reset: sec; font-size: 17px; line-height: 1.68; }
.prose > section { scroll-margin-top: 24px; }
.prose > section + section { margin-top: clamp(48px, 5vw, 64px); }
.prose h2 { counter-increment: sec; font: 680 clamp(25px, 2.4vw, 31px)/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 16px; }
.prose h2::before { content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 10px; padding-top: 14px; border-top: 1px solid var(--rule); font: 500 12.5px/1 var(--mono); letter-spacing: .04em; color: var(--iso); }
.prose h3 { font: 650 19px/1.3 var(--display); letter-spacing: -.01em; margin: 28px 0 8px; }
.prose p { margin: 0 0 14px; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--brand); font-weight: 600; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose em { font-style: normal; color: var(--ink); font-weight: 600; }
.prose ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 22px; color: var(--ink-2); }
.prose ul li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--iso); }
.prose .path { font: 500 .9em/1 var(--mono); color: var(--ink); white-space: normal; line-height: 1.5; }

/* Resumen al inicio */
.gist { background: var(--sheet); border: 1px solid var(--rule); border-radius: 20px; padding: clamp(20px, 2.6vw, 30px); }
.prose .gist h2 { counter-increment: none; font-size: 21px; margin-bottom: 14px; }
.prose .gist h2::before { content: none; }
.gist ul { margin: 0; }
.gist li { color: var(--ink) !important; }

/* Lo que todavía no existe: borde punteado, como "Próximamente" en los planes */
.soon { border: 1.5px dashed var(--ink-3); border-radius: 20px; padding: clamp(20px, 2.6vw, 30px); }
.prose .soon h2::before { border-top: 0; padding-top: 0; }
.soon .notyet { margin: 0 0 12px; }

/* Tablas de datos */
.dtable { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15.5px; line-height: 1.5; }
.dtable thead th { text-align: left; font: 500 12.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: 0 16px 10px 0; border-bottom: 1px solid var(--rule); }
.dtable tbody th, .dtable td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.dtable tbody th { font-weight: 600; color: var(--ink); width: 26%; }
.dtable tbody th span { display: block; font-weight: 400; font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.dtable td { color: var(--ink-2); }
.dtable td p { margin: 0 0 6px; color: inherit; }
.dtable td p:last-child { margin: 0; }
.dtable .k { display: none; }

/* Precios */
.prices { margin: 4px 0 18px; display: grid; gap: 1px; border-radius: 14px; overflow: hidden; background: var(--rule); border: 1px solid var(--rule); }
.prices > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 14px 16px; background: var(--paper); }
.prices dt { font: 650 18px/1.25 var(--display); color: var(--ink); }
.prices dd { margin: 0; text-align: right; font: 400 16px/1.35 var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.prices dd + dd { grid-column: 1 / -1; text-align: left; font-size: 14.5px; color: var(--ink-2); }
.prices .notyet { margin-left: 6px; vertical-align: 2px; }

/* ---------- Soporte ---------- */
.help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(32px, 6vw, 96px); align-items: start; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(72px, 9vw, 120px); }
.help__faq > h2, .contact h2 { font: 700 clamp(28px, 3vw, 38px)/1.05 var(--display); letter-spacing: -.03em; }
.faq { margin-top: 22px; border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 18px 48px 18px 0; font: 650 clamp(18px, 1.7vw, 21px)/1.3 var(--display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
/* Más / menos dibujado, para no depender de un ícono */
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.8px; margin-top: -1px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] > summary::after { transform: rotate(0deg); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq .ans { padding: 0 0 22px; max-width: 40rem; color: var(--ink-2); }
.faq .ans p { margin: 0 0 12px; }
.faq .ans p:last-child { margin: 0; }
.faq .ans ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.faq .ans li { position: relative; padding-left: 22px; }
.faq .ans li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--iso); }
.faq .ans a { color: var(--brand); font-weight: 600; }
.faq .ans strong, .faq .ans em { color: var(--ink); font-weight: 600; font-style: normal; }
.faq .path { font: 500 .9em/1 var(--mono); color: var(--ink); white-space: normal; line-height: 1.5; }

.contact { position: sticky; top: 28px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 24px; padding: clamp(22px, 2.6vw, 32px); box-shadow: var(--shadow); }
.contact > p { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.mail { display: inline-block; margin-top: 18px; font: 650 clamp(22px, 2.1vw, 27px)/1.15 var(--display); letter-spacing: -.02em; color: var(--brand); text-decoration-thickness: 1.5px; word-break: break-word; }
.contact ul { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.contact li { position: relative; padding-left: 20px; }
.contact li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--iso); }
.contact .fine { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-3); }
.contact .fine a { color: var(--ink-2); }
.contact .path { font: 500 .9em/1 var(--mono); color: var(--ink); white-space: normal; line-height: 1.5; }

/* ---------- Sismo compartido y 404: una sola pantalla ---------- */
.solo { min-height: max(620px, 86svh); display: flex; align-items: center; border-bottom: 0; padding-bottom: clamp(56px, 8vw, 96px); }
.solo .phead__map { top: 50%; right: max(-200px, -16vw); width: min(1000px, 110vw); transform: translateY(-50%); }
.solo > .wrap { width: 100%; }
.solo .acts { margin-top: 32px; }
.solo .acts small { --halo: .45em; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn--off { background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--rule); cursor: default; font-weight: 400; }
.btn--off:hover { filter: none; }
.ref { margin-top: 22px; font-size: 14px; color: var(--ink-3); }
.ref code { font: 500 13.5px/1 var(--mono); color: var(--ink-2); background: var(--raise); padding: 3px 7px; border-radius: 6px; word-break: break-all; }
.solo .links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; }
.solo .links a { color: var(--ink-2); --halo: .5em; }
.solo .links a:hover { color: var(--ink); }
.solo .note { margin-top: 26px; max-width: 34rem; font-size: 14.5px; color: var(--ink-3); --halo: .5em; }

/* ---------- Pie: idiomas (lo llena el build) ---------- */
footer .langs { display: flex; flex-wrap: wrap; gap: 6px 16px; width: 100%; }
footer .langs:empty { display: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
  .help { grid-template-columns: 1fr; }
  .contact { position: static; max-width: 34rem; }
}
@media (max-width: 860px) {
  .doc { grid-template-columns: 1fr; gap: 36px; }
  .toc { position: static; }
  .toc ol { columns: 2; column-gap: 24px; }
  .toc li { break-inside: avoid; }
}
@media (max-width: 720px) {
  /* La tabla se vuelve una ficha por fila; cada celda lleva su rótulo */
  .dtable thead { display: none; }
  .dtable, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; width: auto; }
  .dtable tr { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .dtable tbody th, .dtable td { border: 0; padding: 0; }
  .dtable tbody th { width: auto; font-size: 17px; margin-bottom: 10px; }
  .dtable td + td { margin-top: 10px; }
  .dtable .k { display: block; font: 500 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
}
@media (max-width: 640px) {
  .phead { padding-top: 112px; }
  .phead__map { width: 150vw; right: -62vw; top: -10px; }
  .phead__map::before { opacity: .4; }
  .solo .phead__map { width: 190vw; right: -95vw; top: 34%; }
  .solo { min-height: 0; padding-top: 132px; }
  /* En el teléfono el índice se vuelve una fila de rótulos, para no empujar el texto hacia abajo */
  .toc ol { columns: auto; display: flex; flex-wrap: wrap; gap: 8px; border-left: 0; }
  .toc a { display: block; padding: 7px 13px; margin: 0; border: 1px solid var(--rule); border-radius: 999px; font-size: 14.5px; line-height: 1.25; }
  .toc a::before { content: none; }
  .toc a:hover { border-color: var(--iso); }
  .prose { font-size: 16.5px; }
  .prices > div { grid-template-columns: 1fr; }
  .prices dd { text-align: left; }
  .solo .acts .btn, .stores .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .phead__map { animation: none; }
  .faq summary::before, .faq summary::after { transition: none; }
}