/* Lenzivo · páginas de inicio, soporte y privacidad
   Dirección: óptica moderna, tranquila y precisa. Los colores son los del tema de la app (Lenzivo/Theme/Theme.swift):
   azul petróleo profundo con acento aqua, el color del reflejo de una mica. Títulos en Instrument Serif (elegante,
   de mostrador de óptica) y las cifras de la receta en IBM Plex Mono, alineadas como en un refractómetro.
   Las señas de la marca: los aros del ícono, la tabla OD / OI y un renglón de cartilla de agudeza visual al pie. */

@font-face {
  font-family: "Instrument Serif";
  src: url("fuentes/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fuentes/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fuentes/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fuentes/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #eef4f4;
  --paper-2: #e2eded;
  --card: #ffffff;
  --ink: #0c2934;
  --soft: #4a636c;
  --line: #cbdcde;
  --petrol: #0c3b4c;
  --petrol-deep: #082a36;
  --aqua: #7fe3dc;
  --aqua-deep: #3ccfc6;
  --mist: #b7d3d8;
  --accent: #0a6b77;
  --accent-ink: #ffffff;
  --accent-soft: #dcf2f0;
  --tip: #e3f4f2;
  --tip-ink: #08555f;
  --ring: #a9c9cd;
  --late: #963a01;
  --late-fill: #fee1d5;
  --ready: #03643a;
  --ready-fill: #cdf0d8;
  --lab: #0a5c66;
  --lab-fill: #d9f2f0;
  --quote: #56565b;
  --quote-fill: #e7e7e9;
  --shadow: 0 40px 70px -34px rgba(8, 42, 54, .55), 0 14px 26px -16px rgba(8, 42, 54, .3);
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #061a21;
    --paper-2: #0a222a;
    --card: #0c262e;
    --ink: #e6f2f2;
    --soft: #9db6bc;
    --line: #1c3b44;
    --petrol: #0f3644;
    --petrol-deep: #04141a;
    --accent: #7fe3dc;
    --accent-ink: #06232d;
    --accent-soft: #0f3038;
    --tip: #0c2c32;
    --tip-ink: #9ff0ea;
    --ring: #2c5560;
    --late: #ffa178;
    --late-fill: #3a1a08;
    --ready: #60cd8e;
    --ready-fill: #0e3820;
    --lab: #7fe3dc;
    --lab-fill: #0f3036;
    --quote: #b8b8bd;
    --quote-fill: #2a2a2e;
    --shadow: 0 40px 70px -30px rgba(0, 0, 0, .8), 0 14px 26px -16px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #061a21;
  --paper-2: #0a222a;
  --card: #0c262e;
  --ink: #e6f2f2;
  --soft: #9db6bc;
  --line: #1c3b44;
  --petrol: #0f3644;
  --petrol-deep: #04141a;
  --accent: #7fe3dc;
  --accent-ink: #06232d;
  --accent-soft: #0f3038;
  --tip: #0c2c32;
  --tip-ink: #9ff0ea;
  --ring: #2c5560;
  --late: #ffa178;
  --late-fill: #3a1a08;
  --ready: #60cd8e;
  --ready-fill: #0e3820;
  --lab: #7fe3dc;
  --lab-fill: #0f3036;
  --quote: #b8b8bd;
  --quote-fill: #2a2a2e;
  --shadow: 0 40px 70px -30px rgba(0, 0, 0, .8), 0 14px 26px -16px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 20px; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.6 var(--text);
  overflow-x: hidden;
  overflow-x: clip;
}
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; }
h1, h2, h3 { font-weight: 400; }

/* ---------- Idioma ---------- */
html:not([data-lang]) [data-l="es"],
html[data-lang="es"] [data-l="en"],
html[data-lang="en"] [data-l="es"] { display: none; }

/* ---------- Estructura ---------- */
.band { height: 6px; background: linear-gradient(90deg, var(--petrol-deep), var(--petrol) 45%, var(--aqua-deep)); }
.wrap { width: min(1120px, 100% - 40px); margin: 0 auto; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 6px 16px -6px rgba(8, 42, 54, .55); flex: none; }
.brand b { font: 400 30px/1 var(--display); letter-spacing: .005em; display: block; }
.brand small { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }

.lang { position: relative; display: inline-flex; align-items: center; flex: none; }
.lang svg { position: absolute; left: 14px; pointer-events: none; color: var(--soft); }
.lang select {
  appearance: none; -webkit-appearance: none;
  font: 600 16px/1 var(--text); color: var(--ink);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid var(--line); border-radius: 999px;
  min-height: 46px; padding: 0 40px 0 42px; cursor: pointer;
  transition: border-color .2s var(--ease);
}
.lang select:hover { border-color: var(--accent); }

/* ---------- Portada ---------- */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; padding: clamp(24px, 5vw, 64px) 0 clamp(40px, 6vw, 88px); position: relative; }
.hero-text { grid-column: 1 / span 7; position: relative; z-index: 1; }
.kicker { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 0 0 22px; }
.kicker::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--aqua-deep); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 6px var(--accent); flex: none; }
h1 { font: 400 clamp(50px, 8.4vw, 104px)/.95 var(--display); letter-spacing: -.015em; margin: 0 0 26px; text-wrap: balance; }
h1 em { font-style: italic; color: var(--accent); }
.lead { font-size: clamp(19px, 2.3vw, 22px); line-height: 1.5; color: var(--soft); max-width: 31em; margin: 0 0 30px; }
.meta { font: 500 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--soft); margin: 20px 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font: 650 17px/1 var(--text); text-decoration: none; background: var(--accent); color: var(--accent-ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease); box-shadow: 0 10px 24px -12px rgba(10, 107, 119, .9); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(10, 107, 119, 1); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }

/* Los aros: la mica del ícono, en grande, detrás del arte */
.hero-art { grid-column: 8 / span 5; position: relative; justify-self: center; width: min(100%, 400px); }
.ring { position: absolute; border-radius: 50%; pointer-events: none; }
.ring.r1 { width: 112%; aspect-ratio: 1; left: -6%; top: 50%; transform: translateY(-50%); border: 14px solid color-mix(in srgb, var(--aqua-deep) 30%, transparent); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--aqua) 22%, transparent), transparent 62%); }
.ring.r2 { width: 34%; aspect-ratio: 1; right: -12%; top: -6%; border: 10px solid color-mix(in srgb, var(--accent) 22%, transparent); }

.hero-art.icon { aspect-ratio: 1; width: min(100% - 40px, 330px); }
.hero-art.icon > img { position: relative; width: 100%; height: 100%; border-radius: 22.5%; box-shadow: var(--shadow); transform: rotate(-4deg); }
.float { position: absolute; z-index: 2; white-space: nowrap; font: 600 17px/1 var(--text); padding: 12px 16px; border-radius: 999px; background: var(--card); color: var(--ink); box-shadow: 0 16px 30px -16px rgba(8, 42, 54, .6); border: 1.5px solid var(--line); }
.float.a { left: -14%; bottom: 10%; transform: rotate(-4deg); }
.float.b { right: -10%; top: 8%; transform: rotate(3deg); background: var(--petrol); color: #eaf7f6; border-color: transparent; }

/* La orden de la portada de inicio */
.hero-art.order { padding: 34px 0 128px; }
.ticket { position: relative; z-index: 1; background: var(--card); border-radius: 26px; padding: 22px 22px 18px; box-shadow: var(--shadow); border: 1px solid var(--line); transform: rotate(-1.5deg); }
.t-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.folio { font: 500 14px/1 var(--mono); color: var(--soft); letter-spacing: .04em; }
.pill { font: 650 13px/1 var(--text); padding: 7px 11px; border-radius: 999px; }
.pill.ready { background: var(--ready-fill); color: var(--ready); }
.t-name { font: 400 30px/1.1 var(--display); margin: 10px 0 14px; }
.rxt { width: 100%; border-collapse: separate; border-spacing: 0 6px; font: 500 15px/1 var(--mono); }
.rxt th, .rxt td { text-align: center; padding: 10px 2px; }
.rxt thead th { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--soft); padding: 2px 2px 4px; }
.rxt tbody th { font: 600 14px/1 var(--text); color: var(--accent); text-align: left; padding-left: 4px; width: 2.4em; }
.rxt tbody td { background: var(--paper); }
.rxt tbody td:nth-child(2) { border-radius: 10px 0 0 10px; }
.rxt tbody td:last-child { border-radius: 0 10px 10px 0; }
.t-specs { font-size: 14px; color: var(--soft); margin: 8px 0 14px; }
.t-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px; border-radius: 16px; background: var(--petrol); color: #eaf7f6; }
.t-money div { min-width: 0; }
.t-money dt { font-size: 12px; color: var(--mist); }
.t-money dd { margin: 2px 0 0; font: 500 16px/1.2 var(--mono); white-space: nowrap; }
.t-money .due dd { color: var(--aqua); }
.bubble { position: absolute; z-index: 2; right: -8%; bottom: 0; width: min(78%, 300px); margin: 0; padding: 14px 16px 12px; border-radius: 20px 20px 6px 20px; background: var(--petrol-deep); color: #eaf7f6; font-size: 15px; line-height: 1.45; box-shadow: 0 20px 34px -18px rgba(8, 42, 54, .8); transform: rotate(2deg); }
.bubble .time { display: block; text-align: right; margin-top: 4px; font: 500 11px/1 var(--mono); color: var(--mist); }
.bubble .seen { color: var(--aqua); letter-spacing: -.2em; margin-left: .3em; }

/* Cifras de la receta dentro del texto */
.rxv { font: 500 .92em/1 var(--mono); letter-spacing: -.01em; white-space: nowrap; }

/* ---------- Índice ---------- */
.index { border-top: 1.5px solid var(--ink); margin-bottom: clamp(8px, 2vw, 24px); }
.index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 20px; padding: 20px 0 8px; }
.index-head h2 { font: 400 clamp(32px, 4.4vw, 46px)/1 var(--display); margin: 0; }
.index-head span { color: var(--soft); font-size: 15px; }
.index ol { list-style: none; margin: 0; padding: 0; }
.index li a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 4px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: padding .25s var(--ease), background .25s var(--ease); }
.index li:first-child a { border-top: 0; }
.index li a:hover { padding-left: 14px; background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.index .n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 500 15px/1 var(--mono); color: var(--accent); border: 2px solid var(--ring); background: var(--card); }
.index .t { font: 400 clamp(23px, 2.9vw, 29px)/1.12 var(--display); display: block; }
.index .h { color: var(--soft); font-size: 16px; display: block; margin-top: 3px; }
.index .go { font: 600 22px/1 var(--text); color: var(--soft); transition: transform .25s var(--ease), color .25s; }
.index li a:hover .go { transform: translateX(6px); color: var(--accent); }

/* ---------- Secciones con pasos ---------- */
.sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(24px, 5vw, 72px); padding: clamp(40px, 5.5vw, 72px) 0; border-top: 1.5px solid var(--ink); }
.sec-head { align-self: start; position: sticky; top: 24px; }
.sec-head .num { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--mono); letter-spacing: .12em; color: var(--accent); margin-bottom: 18px; }
.sec-head .num::before { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--aqua-deep); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 7px var(--ring); }
.sec-head h2 { font: 400 clamp(36px, 4.2vw, 54px)/1 var(--display); margin: 0 0 14px; text-wrap: balance; letter-spacing: -.01em; }
.sec-head p { color: var(--soft); font-size: 16px; margin: 0; }
.sec-body > *:first-child { margin-top: 0; }
.sec-body h3 { font: 400 28px/1.15 var(--display); margin: 36px 0 12px; }
.sec-body p { margin: 0 0 16px; }

ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 22px; }
ol.steps li { counter-increment: s; position: relative; padding: 7px 0 26px 66px; margin: 0; min-height: 54px; }
ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 500 16px/1 var(--mono); color: var(--accent); background: var(--card); border: 2px solid var(--ring); }
ol.steps li.last::before { background: var(--aqua-deep); border-color: var(--aqua-deep); color: #06232d; }
ol.steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: 6px; width: 2px; background: repeating-linear-gradient(180deg, var(--ring) 0 4px, transparent 4px 9px); }
ol.steps strong { font-weight: 650; }
.group { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 28px 0 16px; }
.sec-body > .group:first-child { margin-top: 4px; }

/* Los nombres de botones y pestañas, como una ficha de la app */
.ui { display: inline; font: 600 .86em/1 var(--text); padding: .2em .62em .26em; border-radius: 999px; background: var(--card); color: var(--ink); border: 1.5px solid var(--ring); white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sep { color: var(--soft); }

ul.ticks { list-style: none; padding: 0; margin: 0 0 20px; }
ul.ticks li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); margin: 0; }
ul.ticks li:first-child { border-top: 0; }
ul.ticks li::before { content: ""; width: 24px; height: 24px; margin-top: 3px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.7 2.7L12.2 5.3' fill='none' stroke='%230a6b77' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow: inset 0 0 0 1.5px var(--ring); }

.tip { position: relative; margin: 22px 0 0; padding: 18px 20px 18px 64px; background: var(--tip); border-radius: 20px; }
.tip::before { content: ""; position: absolute; left: 20px; top: 19px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--aqua-deep); box-shadow: inset 0 0 0 4px var(--tip), inset 0 0 0 13px var(--accent); }
.tip b { display: block; font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tip-ink); margin-bottom: 8px; }
.tip p { margin: 0; }

/* ---------- Documentos (inicio) ---------- */
.shots { border-top: 1.5px solid var(--ink); padding: clamp(40px, 5.5vw, 72px) 0; }
.shots-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; margin-bottom: clamp(26px, 4vw, 48px); }
.shots-head h2 { font: 400 clamp(36px, 4.2vw, 54px)/1 var(--display); margin: 0; letter-spacing: -.01em; }
.shots-head span { color: var(--soft); font-size: 16px; max-width: 26em; }
.docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.docs li { margin: 0; }
.docs li:nth-child(2) { margin-top: clamp(0px, 3vw, 36px); }
.docs li:nth-child(3) { margin-top: clamp(0px, 6vw, 72px); }
.docs figure { margin: 0; }
.doc { position: relative; background: #fff; color: #0c2934; border-radius: 6px; padding: 20px 18px 22px; aspect-ratio: 210 / 270; overflow: hidden; box-shadow: 0 28px 50px -30px rgba(8, 42, 54, .6), 0 2px 0 rgba(8, 42, 54, .04); border: 1px solid #dbe6e7; display: flex; flex-direction: column; gap: 4px; }
.doc-head { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--text); padding-bottom: 12px; border-bottom: 1px solid #e3eced; }
.doc-head .dot { width: 18px; height: 18px; border-radius: 50%; background: #0c3b4c; box-shadow: inset 0 0 0 4px #0c3b4c, inset 0 0 0 6px #7fe3dc; flex: none; }
.doc-head .folio { margin-left: auto; font-size: 11px; color: #5c7178; }
.doc-title { font: 400 25px/1.05 var(--display); margin: 12px 0 8px; }
.doc dl { margin: 0; }
.doc dl div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed #dbe6e7; }
.doc dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3b5259; }
.doc dd { margin: 0; font: 500 12.5px/1.4 var(--mono); white-space: nowrap; }
.doc .doc-totals { margin-top: auto; padding: 8px 10px; border-radius: 8px; background: #eef4f4; }
.doc .doc-totals div { border: 0; padding: 3px 0; }
.doc .doc-totals .due dt, .doc .doc-totals .due dd { color: #0a6b77; font-weight: 650; }
.doc-foot, .doc-spec, .doc-to, .doc-sign { font-size: 12.5px; margin: 6px 0 0; color: #3b5259; }
.doc-to { font-weight: 650; color: #0c2934; margin: 0 0 4px; }
.doc .rxt { font-size: 12.5px; border-spacing: 0 4px; margin: 2px 0 4px; }
.doc .rxt th, .doc .rxt td { padding: 6px 1px; }
.doc .rxt thead th { font-size: 9.5px; color: #5c7178; }
.doc .rxt tbody th { color: #0a6b77; font-size: 12px; }
.doc .rxt tbody td { background: #eef4f4; }
.doc-sign { margin-top: auto; padding-top: 22px; border-top: 1px solid #0c2934; font-size: 11.5px; }
.stamp { position: absolute; right: 14px; bottom: 18px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #0a6b77; border: 2px solid #0a6b77; padding: 8px 10px; border-radius: 8px; transform: rotate(-8deg); background: rgba(255, 255, 255, .85); }
.doc.lab { padding-bottom: 64px; }
.docs figcaption { margin-top: 18px; }
.docs figcaption b { display: block; font: 400 27px/1.1 var(--display); margin-bottom: 4px; }
.docs figcaption span { color: var(--soft); font-size: 16px; }

/* ---------- La lista de órdenes (inicio) ---------- */
.sec.split .sec-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(20px, 3.5vw, 44px); align-items: start; }
.board { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 16px; box-shadow: var(--shadow); }
.board-due { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--petrol); color: #eaf7f6; margin-bottom: 10px; }
.board-due span { font-size: 13px; color: var(--mist); }
.board-due b { font: 500 28px/1.1 var(--mono); color: var(--aqua); font-weight: 500; }
.board ul { list-style: none; margin: 0; padding: 0; }
.board li { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-top: 1px solid var(--line); margin: 0; font-size: 16px; }
.board li:first-child { border-top: 0; }
.board .c { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 500 14px/1 var(--mono); flex: none; order: -1; }
.board .late .c { background: var(--late-fill); color: var(--late); }
.board .ready .c { background: var(--ready-fill); color: var(--ready); }
.board .lab .c { background: var(--lab-fill); color: var(--lab); }
.board .quote .c { background: var(--quote-fill); color: var(--quote); }

/* ---------- Planes (inicio) ---------- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 28px 28px 12px; }
.plan h3 { margin: 0 0 6px; font: 400 36px/1 var(--display); display: flex; align-items: center; gap: 10px; }
.plan > p { color: var(--soft); font-size: 16px; margin: 0 0 12px; }
.plan.pro { background: var(--petrol); color: #eaf7f6; border-color: transparent; position: relative; overflow: hidden; }
.plan.pro::after { content: ""; position: absolute; right: -90px; top: -100px; width: 180px; height: 180px; border-radius: 50%; border: 16px solid rgba(127, 227, 220, .16); pointer-events: none; }
.plan.pro > p { color: var(--mist); }
.plan.pro ul.ticks li { border-color: rgba(255, 255, 255, .14); }
.plan.pro ul.ticks li::before { background-color: rgba(127, 227, 220, .16); box-shadow: inset 0 0 0 1.5px rgba(127, 227, 220, .5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.7 2.7L12.2 5.3' fill='none' stroke='%237fe3dc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pro-tag { font: 500 12px/1 var(--mono); letter-spacing: .14em; background: var(--aqua); color: #06232d; padding: 6px 9px; border-radius: 999px; }
.scope { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--soft); max-width: 40em; }

/* ---------- Preguntas rápidas ---------- */
.faq { border-top: 1.5px solid var(--ink); padding: clamp(40px, 5.5vw, 72px) 0 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(24px, 5vw, 72px); }
.faq h2 { font: 400 clamp(36px, 4.2vw, 54px)/1 var(--display); margin: 0 0 20px; letter-spacing: -.01em; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; font: 400 clamp(23px, 2.6vw, 27px)/1.15 var(--display); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ring); color: var(--accent); font: 500 20px/1 var(--mono); transition: transform .25s var(--ease), background .25s var(--ease); }
details[open] summary::after { transform: rotate(45deg); background: var(--accent-soft); }
details > div { padding: 0 4px 22px; color: var(--soft); max-width: 36em; }
details > div p { margin: 0 0 12px; }

/* ---------- Cierre ---------- */
.contact { margin: clamp(48px, 7vw, 96px) 0 0; background: var(--petrol); color: #eaf7f6; border-radius: 34px; padding: clamp(36px, 6vw, 72px) clamp(26px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 28px 44px; align-items: center; position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; right: -90px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; border: 22px solid rgba(127, 227, 220, .13); pointer-events: none; }
.contact::after { content: ""; position: absolute; right: 150px; bottom: -150px; width: 220px; height: 220px; border-radius: 50%; border: 14px solid rgba(127, 227, 220, .08); pointer-events: none; }
.contact h2 { font: 400 clamp(42px, 6vw, 72px)/.95 var(--display); margin: 0 0 14px; position: relative; z-index: 1; letter-spacing: -.01em; }
.contact h2 em { font-style: italic; color: var(--aqua); }
.contact p { margin: 0; color: var(--mist); position: relative; z-index: 1; max-width: 28em; }
.contact p a { color: var(--aqua); }
.contact-ways { display: grid; gap: 12px; position: relative; z-index: 1; }
.way { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(183, 211, 216, .28); color: #eaf7f6; text-decoration: none; transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); min-width: 0; }
.way:hover { background: rgba(127, 227, 220, .12); box-shadow: inset 0 0 0 1.5px var(--aqua); transform: translateY(-2px); }
.way svg { flex: none; color: var(--aqua); width: 24px; height: 24px; }
.way span { display: flex; flex-direction: column; min-width: 0; }
.way b { font: 650 17px/1.25 var(--text); }
.way small { font: 500 13px/1.4 var(--mono); color: var(--mist); overflow-wrap: anywhere; }

footer { padding: 40px 0 56px; color: var(--soft); font-size: 14px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 32px; justify-content: space-between; }
footer a { color: var(--soft); }
.foot-text { display: flex; flex-wrap: wrap; gap: 6px 24px; }
/* Un renglón de cartilla: cada letra más chica que la anterior */
.chart { display: inline-flex; align-items: baseline; gap: .32em; font: 700 28px/1 var(--text); color: var(--ring); letter-spacing: 0; }
.chart span { font-size: calc(28px - var(--k) * 2.1px); }

/* ---------- Privacidad ---------- */
.promises { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.promises li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); font: 400 clamp(26px, 3.4vw, 38px)/1.1 var(--display); margin: 0; }
.promises li::before { content: ""; width: 46px; height: 46px; border-radius: 50%; background: var(--petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.7 2.7L12.2 5.3' fill='none' stroke='%237fe3dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat; }
.qa { margin-top: clamp(44px, 6vw, 92px); }
.qa-head { border-top: 1.5px solid var(--ink); padding: 20px 0 8px; }
.qa-head h2 { font: 400 clamp(32px, 4.4vw, 46px)/1 var(--display); margin: 0; }
.qa article { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px clamp(24px, 5vw, 72px); padding: 28px 0; border-top: 1px solid var(--line); }
.qa article:first-of-type { border-top: 0; }
.qa h3 { font: 400 clamp(25px, 2.9vw, 31px)/1.1 var(--display); margin: 0; text-wrap: balance; }
.qa p { margin: 0 0 12px; max-width: 38em; }
.qa p:last-child { margin-bottom: 0; }

.note { margin: 22px 0 0; font-size: clamp(18px, 2.2vw, 21px); color: var(--soft); max-width: 34em; }

/* ---------- Movimiento ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .btn, .way, .index li a, .index .go, summary::after { transition: none; }
}

/* ---------- Pantallas medianas y móvil ---------- */
@media (max-width: 900px) {
  .hero-text { grid-column: 1 / -1; }
  .hero-art { grid-column: 1 / -1; justify-self: start; margin-top: 36px; }
  .hero-art.order { width: min(100% - 24px, 380px); margin-left: 4px; }
  .hero-art.icon { width: 220px; margin-left: 30px; }
  .float { font-size: 15px; padding: 10px 13px; }
  .float.a { left: 58%; bottom: 4%; }
  .float.b { right: auto; left: 70%; top: 6%; }
  .sec, .faq, .qa article, .contact, .plans, .sec.split .sec-body { grid-template-columns: minmax(0, 1fr); }
  .sec.split .sec-body { gap: 28px; }
  .sec-head { position: static; margin-bottom: 26px; }
  .faq h2 { margin-bottom: 8px; }
  .qa article { gap: 10px; }
  .index-head { flex-direction: column; gap: 2px; }
  .docs { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .docs li:nth-child(2), .docs li:nth-child(3) { margin-top: 0; }
  .docs figure { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 22px; align-items: center; }
  .docs figcaption { margin-top: 0; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .brand small { display: none; }
  .index li a { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
  .index .n { width: 42px; height: 42px; font-size: 14px; }
  ol.steps li { padding-left: 58px; }
  .tip { padding-left: 20px; padding-top: 56px; }
  .ui { white-space: normal; }
  .btn { width: 100%; }
  .actions { width: 100%; }
  .promises li { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .promises li::before { width: 40px; height: 40px; background-size: 20px; }
  .hero-art.order { padding-bottom: 150px; }
  .ticket { padding: 18px 14px 14px; border-radius: 22px; }
  .rxt { font-size: 13.5px; }
  .t-money { padding: 12px 10px; }
  .t-money dd { font-size: 14px; }
  .bubble { right: -2%; width: 86%; font-size: 14px; }
  .hero-art.icon { width: 180px; }
  .float.a { left: 48%; }
  .float.b { left: 62%; }
  .docs figure { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .doc { aspect-ratio: auto; min-height: 330px; }
  .contact { border-radius: 26px; }
  .chart { font-size: 22px; }
  .chart span { font-size: calc(22px - var(--k) * 1.5px); }
}
@media print {
  .lang, .band, .hero-art, .ring, .contact::before, .contact::after { display: none; }
  .js .rv { opacity: 1; transform: none; }
  .sec-head { position: static; }
}