/* ═══════════════════════════════════════════════════════════════════════
   Sitio público — Clínica Volta
   ═══════════════════════════════════════════════════════════════════════

   CSS propio, servido por WhiteNoise. El sitio NO usa el Tailwind de la app:
   `templates/base.html` lo carga con el script del CDN vendorizado, que
   compila en el navegador. Eso sirve detrás del login —sin presión de primer
   pintado— pero en una página pública deja el contenido sin estilos hasta que
   el JS termina, y bloquea el render. Acá no hay JS: ni de estilos, ni de
   navegación.

   Origen del diseño: `docs/mockup-sitio/*.html`, ya revisado y aprobado. Los
   artboards eran de ancho fijo y su capa responsive corregía estilos inline a
   la fuerza con `!important` sobre selectores de atributo
   (`[style*="font-size: 96px"] { … }`). Acá eso no hace falta: con los estilos
   en clases, el tamaño fluido se declara una vez con clamp() y las grillas se
   apilan con media queries normales.

   Referencia de lo que hay que preservar: sin scroll horizontal a 390, 768 y
   1440 px, y objetivos táctiles de 44 px mínimo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tipografías, servidas desde acá ────────────────────────────────────
   Igual que Inter en la app: con el CDN de Google el sitio se dibuja con la
   fuente del sistema hasta que la red responda, y en una página cuya identidad
   entera es la Oswald condensada en mayúsculas, eso se nota. Además evita una
   conexión a un tercero en la única página del sitio donde alguien escribe
   sobre su salud. Solo el subconjunto `latin`, que ya trae ñ, tildes y ¿¡. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;              /* variable: un archivo cubre todo el rango */
  font-display: swap;
  src: url("../fonts/oswald-var-latin.5f49329007f1.woff2") format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/barlow-300-latin.de218f435ec7.woff2") format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-400-latin.81419bf5abb5.woff2") format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-500-latin.8e986e86d57e.woff2") format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-600-latin.a1e2a2d7d4c0.woff2") format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-400i-latin.f47df445d5cb.woff2") format('woff2');
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --volt: #FFCF00;
  --ink: #0A0A0A;
  --paper: #FAFAF8;
  --line: rgba(255, 255, 255, .13);
  --line-soft: rgba(255, 255, 255, .09);
  --dim: rgba(255, 255, 255, .62);
  --dimmer: rgba(255, 255, 255, .42);
  --ink-dim: #52555A;
  /* El margen lateral de todas las secciones. Una sola variable fluida en vez
     de los tres valores por breakpoint del mockup (80 / 44 / 22 px). */
  --gut: clamp(22px, 5.5vw, 80px);
  --display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #000;
  color: var(--paper);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* La red de seguridad contra el scroll lateral: si algún día una tabla o una
     imagen se pasa de ancho, se recorta acá en vez de correr la página entera. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }

a { color: var(--volt); text-decoration: none; }
a:hover { color: #fff; }

h1, h2, h3, .disp {
  font-family: var(--display);
  text-transform: uppercase;
  margin: 0;
  font-weight: 600;
  letter-spacing: -.01em;
  /* 1.02 y no el .92 del mockup: en mayúsculas sin acentos ese interlineado
     compacto se ve bien, pero todo el sitio está en español y en "VACÍAS" o
     "MÁS" la tilde del renglón de abajo toca la letra del de arriba. */
  line-height: 1.02;
}

/* Los titulares grandes son los que más se parten en varias líneas, y ahí la
   tilde necesita algo más de aire que en un h3 de una línea. */
h1 { line-height: 1.1; }

/* Foco visible en todo lo que se puede tabular: el amarillo de la marca sobre
   negro pasa de sobra el contraste, y sin esto navegar con teclado es a ciegas. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}

.page { max-width: 1440px; margin: 0 auto; background: #000; }
.section { padding: clamp(56px, 9vw, 120px) var(--gut); }
.section--dark { background: var(--ink); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--volt { background: var(--volt); color: var(--ink); }
.section--hair { border-top: 1px solid var(--line-soft); }

.y { color: var(--volt); }

/* Regla amarilla + texto espaciado, el encabezado de sección de la marca. */
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.eyebrow.is-centered { justify-content: center; }
.rule { width: 44px; height: 3px; background: var(--volt); flex: none; }
.eyebrow span {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--volt);
  font-weight: 500;
}

.kicker {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(13px, 1.6vw, 15px);
  letter-spacing: .28em;
  color: var(--dimmer);
  font-weight: 500;
  margin: 0;
}

/* Marcador de foto: la trama diagonal del mockup. Se queda hasta que llegue la
   sesión de fotos; el texto dice qué toma va en cada hueco. */
.ph {
  background-color: #131416;
  background-image: repeating-linear-gradient(135deg, rgba(255, 207, 0, .07) 0 2px, transparent 2px 11px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ph > img { width: 100%; height: 100%; object-fit: cover; }
/* Desde dónde recorta `object-fit: cover` cuando la foto no calza exacta en el
   hueco. Lo elige quien sube la foto (`PhotoFocus`), porque depende de dónde
   esté lo que no se puede perder — en un retrato, la cabeza. */
.ph > img.focus-arriba { object-position: top; }
.ph > img.focus-abajo { object-position: bottom; }
.ph > img.focus-izquierda { object-position: left; }
.ph > img.focus-derecha { object-position: right; }
.phlab {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 207, 0, .55);
  padding: 14px 16px;
}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: .1em;
  font-weight: 600;
  padding: 18px 38px;
  min-height: 44px;                 /* objetivo táctil, tablet y celular */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-y { background: var(--volt); color: #000; }
.btn-y:hover { background: #fff; color: #000; }
.btn-o { border-color: rgba(255, 255, 255, .3); color: var(--paper); }
.btn-o:hover { border-color: var(--volt); color: var(--volt); }
.btn-ink { background: var(--ink); color: var(--volt); }
.btn-ink:hover { background: #000; color: #fff; }
.btn-ink-o { border-color: rgba(10, 10, 10, .3); color: var(--ink); }
.btn-ink-o:hover { border-color: var(--ink); color: var(--ink); }
.btn-block { display: flex; width: 100%; padding-inline: 12px; }

.cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.cta.is-centered { justify-content: center; }

/* ── Barra superior ───────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px var(--gut);
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 30px);
  letter-spacing: .02em;
  color: var(--paper);
  text-transform: uppercase;
}
.brand:hover { color: #fff; }
.navlinks { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); flex-wrap: wrap; }
.navlink {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.navlink:hover { color: #fff; }
.navlink.is-active { color: var(--volt); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.btn-ghost {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 11px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.btn-ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-book {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--volt);
  color: #000;
  padding: 13px 26px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.btn-book:hover { background: #fff; color: #000; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: clamp(460px, 62vw, 760px); display: flex; }
.hero .ph { position: absolute; inset: 0; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .82) 46%, rgba(0, 0, 0, .35) 100%);
}
/* El rótulo del hueco de foto, por encima del velo. En el mockup quedaba
   debajo y en la zona más oscura del degradado, casi ilegible — y el rótulo
   existe precisamente para que se lea qué toma falta. Cuando la foto esté
   subida, el rótulo desaparece solo. */
.hero .phlab { position: relative; z-index: 1; }
.hero-body {
  position: relative;
  padding: clamp(64px, 9vw, 118px) var(--gut) clamp(56px, 8vw, 100px);
  max-width: 1120px;
  align-self: center;
}
.hero h1 {
  font-size: clamp(38px, 8.4vw, 96px);
  font-weight: 700;
  letter-spacing: -.02em;
  max-width: 15ch;
}
.lead {
  margin-top: clamp(24px, 3vw, 34px);
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.5;
  max-width: 62ch;
  color: rgba(255, 255, 255, .8);
  font-weight: 300;
  text-wrap: pretty;
}

/* ── Quiénes somos ────────────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
.about-text p { font-size: clamp(21px, 3vw, 34px); line-height: 1.35; font-weight: 300; text-wrap: pretty; }
.about-text p + p { margin-top: 28px; }

/* ── Cómo trabajamos ──────────────────────────────────────────────────── */
.steps-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 70px);
}
.steps-head h2 { font-size: clamp(32px, 5.6vw, 62px); font-weight: 700; color: var(--ink); }
.steps-head p { max-width: 400px; font-size: 17px; line-height: 1.6; color: var(--ink-dim); }
/* El gap de 2px sobre el fondo gris son las hairlines entre celdas: es el
   truco del mockup y no un borde real, así no se duplican al apilarse. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: rgba(10, 10, 10, .12); }
.step { background: var(--paper); padding: 36px 30px 42px; }
.step-n {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 46px);
  color: var(--volt);
  -webkit-text-stroke: 1px var(--ink);
  font-weight: 700;
}
.step h3 { font-size: 22px; margin-top: 22px; color: var(--ink); }
.step p { margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--ink-dim); }

/* ── Metodología ──────────────────────────────────────────────────────── */
.method { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); }
.method .ph { min-height: clamp(240px, 42vw, 620px); }
.method-body { padding: clamp(56px, 8vw, 110px) var(--gut); }
.method-body h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 700; }
.method-body > p {
  margin-top: 28px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .75);
  font-weight: 300;
  text-wrap: pretty;
}
.method-body strong { color: var(--paper); font-weight: 500; }

.rows { display: flex; flex-direction: column; margin-top: clamp(30px, 4vw, 46px); }
.row { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row b { font-family: var(--display); font-size: 12px; color: rgba(255, 255, 255, .35); width: 26px; flex: none; font-weight: 500; }
.row span { font-family: var(--display); text-transform: uppercase; font-size: clamp(17px, 2.4vw, 22px); letter-spacing: .04em; font-weight: 500; }

/* ── La app ───────────────────────────────────────────────────────────── */
.appblock { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 40px); align-items: center; }
.appblock h2 { font-size: clamp(30px, 5.2vw, 58px); margin-top: 22px; font-weight: 700; color: var(--ink); }
.appblock .kicker { color: var(--ink); font-size: 13px; }
.appblock > div > p { margin-top: 26px; font-size: clamp(16px, 2vw, 18px); line-height: 1.7; color: rgba(10, 10, 10, .78); max-width: 460px; text-wrap: pretty; }
.metrics { display: flex; gap: clamp(20px, 3vw, 30px); margin-top: 36px; flex-wrap: wrap; }
.metric b { font-family: var(--display); font-size: clamp(30px, 3.6vw, 40px); font-weight: 700; display: block; }
.metric p { font-size: 13px; margin-top: 4px; color: rgba(10, 10, 10, .6); letter-spacing: .04em; }

/* Maqueta del portal. Datos de ejemplo: lo dice la propia tarjeta. */
.portal { background: var(--ink); color: var(--paper); padding: 24px; border: 1px solid rgba(10, 10, 10, .2); }
.portal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.portal-head span:first-child { font-family: var(--display); font-size: 15px; text-transform: uppercase; }
.portal-head span:last-child { font-size: 12px; color: rgba(255, 255, 255, .45); letter-spacing: .06em; }
.bars { display: flex; gap: 3px; margin-top: 20px; }
.bars i { height: 8px; flex: 1 1 0; background: rgba(255, 255, 255, .16); }
.bars i.on { background: var(--volt); }
.stages { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.stages span { font-size: 11px; color: rgba(255, 255, 255, .4); letter-spacing: .1em; }
.stages span.on { color: var(--volt); }
.portal-note { margin-top: 24px; padding: 20px; background: rgba(255, 207, 0, .08); border-left: 3px solid var(--volt); font-size: 15px; line-height: 1.6; }
.portal-note strong { color: var(--volt); font-weight: 600; }
.portal-rows { display: flex; flex-direction: column; gap: 1px; margin-top: 20px; background: rgba(255, 255, 255, .1); }
.portal-row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 4px; background: var(--ink); font-size: 14px; }
.portal-row span:first-child { color: rgba(255, 255, 255, .8); }
.portal-row span:last-child { color: var(--volt); font-variant-numeric: tabular-nums; }
.portal-foot { font-size: 11px; color: rgba(255, 255, 255, .3); margin-top: 14px; letter-spacing: .06em; }

/* ── Tarjetas de programa (home) ──────────────────────────────────────── */
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4.5vw, 60px); }
.block-head h2 { font-size: clamp(32px, 5.6vw, 62px); font-weight: 700; }
.progcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.progcard { border: 1px solid rgba(255, 255, 255, .14); padding: 32px 26px 38px; display: flex; flex-direction: column; gap: 16px; }
.progcard h3 { font-size: 21px; }
.progcard p { font-size: 15px; line-height: 1.65; color: var(--dim); }

/* ── Equipo ───────────────────────────────────────────────────────────── */
.founder { display: grid; grid-template-columns: 5fr 7fr; background: var(--ink); border-top: 1px solid var(--line-soft); }
.founder .ph { min-height: clamp(240px, 40vw, 560px); }
.founder-body { padding: clamp(56px, 8vw, 100px) var(--gut); }
.founder-body h2 { font-size: clamp(30px, 5vw, 52px); margin-top: 20px; font-weight: 700; }
.role { font-family: var(--display); font-size: clamp(15px, 2vw, 17px); color: var(--volt); letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; }
.creds { display: flex; flex-direction: column; margin-top: clamp(28px, 4vw, 40px); max-width: 560px; }
.cred { padding: 17px 0; border-top: 1px solid var(--line); }
.cred:last-child { border-bottom: 1px solid var(--line); }
.cred p { font-size: clamp(15px, 2vw, 17px); color: var(--paper); }
.cred small { display: block; margin-top: 3px; font-size: 14px; color: rgba(255, 255, 255, .5); }
.pending { margin-top: 24px; font-size: 13px; color: rgba(255, 255, 255, .32); letter-spacing: .04em; }

/* ── Testimonios ──────────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(30px, 4vw, 50px); }
.quote { border-top: 3px solid rgba(255, 255, 255, .2); padding-top: 26px; }
.quote:first-child { border-top-color: var(--volt); }
.quote p { font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, .85); font-weight: 300; font-style: italic; }
.quote cite { display: block; margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .45); letter-spacing: .06em; font-style: normal; }

/* ── Cierre ───────────────────────────────────────────────────────────── */
.closing { text-align: center; }
.closing h2 { font-size: clamp(34px, 6.8vw, 76px); font-weight: 700; color: var(--ink); }
.closing > p { margin: 24px auto 0; max-width: 52ch; font-size: clamp(17px, 2.2vw, 19px); color: var(--ink-dim); line-height: 1.6; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.footer { padding: clamp(48px, 7vw, 80px) var(--gut) 40px; background: #000; border-top: 1px solid rgba(255, 255, 255, .1); }
.footcols { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: clamp(24px, 3vw, 40px); }
.footcol { display: flex; flex-direction: column; gap: 10px; }
/* El título de columna del pie. La de "Contacto" es un enlace, así que su
   span no es hijo directo de .footcol y sin el segundo selector se dibujaba
   como un ítem más de la lista en vez del encabezado amarillo. */
.footcol > span:first-child,
.footcol > a:first-child > span { font-family: var(--display); font-size: 12px; letter-spacing: .18em; color: var(--volt); text-transform: uppercase; }
.footcol a, .footcol span { font-size: 14px; color: var(--dim); }
.footcol a { min-height: 32px; display: inline-flex; align-items: center; }
.footcol a:hover { color: #fff; }
.footbrand p { font-size: 14px; color: rgba(255, 255, 255, .45); margin-top: 12px; line-height: 1.6; }
.footbar { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 60px); padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.footbar span, .footbar a { font-size: 12px; color: rgba(255, 255, 255, .32); }
.footlinks { display: flex; gap: 26px; flex-wrap: wrap; }

/* ── Encabezado de página interior ────────────────────────────────────── */
.pagehead { padding: clamp(56px, 8vw, 100px) var(--gut) clamp(44px, 6vw, 80px); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.pagehead-split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 3vw, 40px); align-items: end; }
.pagehead h1 { font-size: clamp(38px, 7.6vw, 88px); font-weight: 700; }
.pagehead-split > p { font-size: clamp(17px, 2.1vw, 19px); line-height: 1.65; color: rgba(255, 255, 255, .72); font-weight: 300; text-wrap: pretty; }

/* ── Para quién: bloques alternados ───────────────────────────────────── */
.program { display: grid; grid-template-columns: 7fr 5fr; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.program:last-child { border-bottom: 0; }
.program--flip { grid-template-columns: 5fr 7fr; background: var(--ink); }
.program .ph { min-height: clamp(220px, 36vw, 480px); }
.program-body { padding: clamp(52px, 7vw, 90px) var(--gut); }
.program-title { display: flex; align-items: baseline; gap: 22px; }
.program-title b { font-family: var(--display); font-size: 15px; color: rgba(255, 255, 255, .35); font-weight: 500; }
.program-title h2 { font-size: clamp(30px, 5vw, 50px); font-weight: 700; }
.program-body > p { margin-top: 28px; font-size: clamp(16px, 2vw, 18px); line-height: 1.7; color: rgba(255, 255, 255, .75); font-weight: 300; max-width: 560px; text-wrap: pretty; }
.points { display: flex; flex-direction: column; margin-top: clamp(28px, 4vw, 40px); max-width: 560px; }
.point { display: flex; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.point:last-child { border-bottom: 1px solid var(--line); }
.point i { color: var(--volt); font-size: 15px; font-style: normal; flex: none; }
.point span { font-size: 16px; color: rgba(255, 255, 255, .8); }

.cta-split { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-split h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 700; color: var(--ink); }
.cta-split p { margin-top: 18px; font-size: clamp(16px, 2vw, 18px); color: rgba(10, 10, 10, .75); max-width: 460px; line-height: 1.6; }

/* ── Planes ───────────────────────────────────────────────────────────── */
.planhead { padding: clamp(56px, 8vw, 96px) var(--gut) clamp(36px, 5vw, 60px); text-align: center; }
.planhead h1 { font-size: clamp(34px, 7vw, 82px); font-weight: 700; }
.planhead > p { margin: 26px auto 0; font-size: clamp(17px, 2.1vw, 19px); line-height: 1.65; color: rgba(255, 255, 255, .68); max-width: 620px; font-weight: 300; text-wrap: pretty; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; padding: 0 var(--gut); }
.plans-note { padding: 26px var(--gut) clamp(48px, 7vw, 90px); }
.plan { border: 1px solid rgba(255, 255, 255, .16); padding: 40px 32px 44px; display: flex; flex-direction: column; position: relative; }
.plan--hl { border: 2px solid var(--volt); background: rgba(255, 207, 0, .04); }
.plan--hl h3, .plan--hl .price { color: var(--volt); }
.badge { position: absolute; top: -13px; left: 32px; background: var(--volt); color: #000; font-family: var(--display); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 6px 14px; font-weight: 600; }
.plan h3 { font-size: 26px; }
.plan-sub { font-size: 14px; color: rgba(255, 255, 255, .5); margin-top: 8px; }
.price { font-family: var(--display); font-size: clamp(34px, 4vw, 46px); font-weight: 700; margin-top: 30px; display: block; }
.plan-meta { font-size: 13px; color: rgba(255, 255, 255, .42); margin-top: 8px; }
.feats { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.plan--hl .feats { border-top-color: rgba(255, 207, 0, .28); }
.feat { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.feat i { color: var(--volt); font-style: normal; flex: none; }
.feat span { color: rgba(255, 255, 255, .78); }
.feat--off i { color: rgba(255, 255, 255, .25); }
.feat--off span { color: rgba(255, 255, 255, .35); }
.plan .spacer { flex-grow: 1; }
.plan .btn { margin-top: 36px; }
.note { font-size: 13px; color: rgba(255, 255, 255, .3); letter-spacing: .04em; }
.note--center { text-align: center; }

.addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(24px, 3vw, 40px); }
.addon { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid rgba(255, 255, 255, .13); padding: 26px 28px; }
.addon h3 { font-size: 20px; }
.addon p { font-size: 14px; color: rgba(255, 255, 255, .5); margin-top: 6px; }
.addon .price { margin-top: 0; font-size: 22px; color: var(--volt); }

.faq { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(30px, 4vw, 60px); }
.faq-intro h2 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 700; }
.faq-intro p { margin-top: 20px; font-size: 16px; color: rgba(255, 255, 255, .55); line-height: 1.6; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { padding: 24px 0; border-top: 1px solid var(--line); }
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { font-size: 20px; margin-bottom: 12px; }
.faq-item p { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .65); }

/* ── Blog ─────────────────────────────────────────────────────────────── */
.bloghead { padding: clamp(52px, 7vw, 90px) var(--gut) clamp(32px, 4.5vw, 56px); }
.bloghead-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.bloghead h1 { font-size: clamp(34px, 6.6vw, 76px); font-weight: 700; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; }
.chip { font-family: var(--display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .2); color: var(--dim); padding: 9px 18px; min-height: 44px; display: inline-flex; align-items: center; }
.chip.is-active { border-color: var(--volt); color: var(--volt); }

.feature { display: grid; grid-template-columns: 7fr 5fr; border: 1px solid rgba(255, 255, 255, .14); margin: 0 var(--gut) clamp(40px, 6vw, 70px); }
.feature .ph { min-height: clamp(200px, 30vw, 420px); }
.feature-body { padding: clamp(36px, 4vw, 52px) clamp(28px, 3.4vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.feature-body h2 { font-size: clamp(26px, 3.6vw, 40px); margin-top: 18px; font-weight: 700; }
.feature-body > p { margin-top: 20px; font-size: clamp(16px, 2vw, 17px); line-height: 1.65; color: rgba(255, 255, 255, .68); font-weight: 300; text-wrap: pretty; }
.tag { font-family: var(--display); text-transform: uppercase; font-size: 11px; letter-spacing: .16em; color: var(--volt); }
.meta { font-size: 13px; color: rgba(255, 255, 255, .4); letter-spacing: .04em; }
.feature-body .meta { margin-top: 24px; }

.postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 0 var(--gut); }
.post { display: flex; flex-direction: column; gap: 16px; }
.post .ph { height: 220px; }
.post h3 { font-size: clamp(21px, 2.6vw, 25px); }
.post > p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .6); }

.subscribe { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 50px); flex-wrap: wrap; }
.subscribe h2 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 700; color: var(--ink); }
.subscribe > div > p { margin-top: 16px; font-size: 17px; color: rgba(10, 10, 10, .72); max-width: 440px; line-height: 1.6; }
.subform { display: flex; flex: 1 1 340px; max-width: 560px; }
.subform input { flex: 1 1 auto; min-width: 0; background: var(--ink); border: 0; padding: 18px 22px; color: var(--paper); font-family: var(--body); font-size: 16px; }
.subform input::placeholder { color: rgba(255, 255, 255, .4); }

/* ── Contacto ─────────────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 5fr 7fr; }
.contact-aside { padding: clamp(52px, 7vw, 90px) var(--gut); border-right: 1px solid rgba(255, 255, 255, .1); }
.contact-aside h1 { font-size: clamp(36px, 5.6vw, 64px); font-weight: 700; }
.book { margin-top: 38px; border: 2px solid var(--volt); padding: 30px 28px; background: rgba(255, 207, 0, .05); }
.book h2 { font-size: 24px; color: var(--volt); }
.book p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.book .btn { margin-top: 24px; }
.datalist { display: flex; flex-direction: column; margin-top: clamp(32px, 4.6vw, 46px); }
.dataitem { padding: 20px 0; border-top: 1px solid var(--line); }
.datalist .dataitem:last-child { border-bottom: 1px solid var(--line); }
.lab { font-family: var(--display); text-transform: uppercase; font-size: 11px; letter-spacing: .18em; color: rgba(255, 255, 255, .5); }
.dataitem > p { font-size: 18px; margin-top: 8px; color: var(--paper); }
.dataitem > p small { display: block; font-size: 15px; margin-top: 3px; color: rgba(255, 255, 255, .5); }
.hours { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 16px; }
.hours span:first-child { color: rgba(255, 255, 255, .75); }
.ig { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; min-height: 44px; font-size: 16px; color: var(--volt); }

/* La columna derecha es dos piezas: el formulario con margen lateral y, pegado
   abajo, el mapa a sangre completa. Por eso el padding va en `.contact-form` y
   no en el contenedor. */
.contact-main { display: flex; flex-direction: column; }
.contact-form { padding: clamp(52px, 7vw, 90px) var(--gut) clamp(44px, 6vw, 70px); }
.contact-main .map { margin-top: auto; }
.contact-main h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; }
.contact-form > p { margin-top: 16px; font-size: 16px; color: var(--dim); line-height: 1.6; max-width: 480px; }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.formrow { display: flex; flex-direction: column; gap: 9px; }
.formrow--wide { grid-column: 1 / -1; }
.field {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 15px 18px;
  font-size: 16px;                  /* 16px o iOS hace zoom al enfocar */
  min-height: 44px;
  color: var(--paper);
  font-family: var(--body);
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: rgba(255, 255, 255, .35); }
.field:focus { border-color: var(--volt); }
textarea.field { min-height: 130px; resize: vertical; }
select.field { color: var(--paper); }
select.field option { background: var(--ink); color: var(--paper); }

.consent { display: flex; gap: 12px; margin-top: 22px; align-items: flex-start; }
.cbox { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--volt); }
.consent label { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .5); }
/* El señuelo: fuera de la vista y del foco, pero presente en el DOM para que
   el bot lo encuentre. `display:none` lo saltarían los que filtran por eso. */
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.errors { margin-top: 8px; font-size: 13px; color: #FF8A8A; }
.formnote { margin-top: 26px; padding: 18px 20px; border-left: 3px solid var(--volt); background: rgba(255, 207, 0, .07); font-size: 15px; line-height: 1.6; }

.map {
  height: clamp(200px, 30vw, 320px);
  background-color: #101214;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.map-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.map-pin span { font-family: var(--display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 207, 0, .6); text-align: center; }

/* ═══ Responsive ═══════════════════════════════════════════════════════
   Un solo corte, a 900 px, igual que el mockup: todo lo que era grilla de
   varias columnas pasa a una. Los tamaños de letra no necesitan reglas acá
   porque ya son clamp(). */
@media (max-width: 900px) {
  .about,
  .method,
  .appblock,
  .founder,
  .program,
  .program--flip,
  .contact,
  .faq,
  .pagehead-split,
  .feature { grid-template-columns: 1fr; }

  .steps,
  .progcards,
  .quotes,
  .plans,
  .addons,
  .postgrid { grid-template-columns: 1fr; }

  .footcols { grid-template-columns: 1fr 1fr; }

  /* En el móvil la foto va arriba del texto en todos los bloques, también en
     los que en escritorio la tienen a la derecha: leer primero y ver después
     invierte el orden con el que se diseñó cada sección. */
  .program .ph,
  .method .ph,
  .founder .ph,
  .feature .ph { grid-row: 1; }

  .contact-aside { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .formgrid { grid-template-columns: 1fr; }
  .subform { flex: 1 1 100%; }
  .plans { gap: 32px; }          /* aire para la etiqueta que sobresale arriba */
}

@media (max-width: 560px) {
  .footcols { grid-template-columns: 1fr; }
  .cta .btn, .plan .btn { width: 100%; }
}

/* Quien pidió menos movimiento no debería recibir el scroll suave ni
   transiciones: es una preferencia del sistema, no un gusto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}