/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO v3 · Cecilia Medrano · hoja compartida
   Extraída de la página del taller. Mismos tokens y componentes.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family:"Archivo"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/archivo.65449f16.woff2) format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:300 400; font-display:swap; src:url(/assets/fonts/newsreader.5d70b133.woff2) format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:300 400; font-display:swap; src:url(/assets/fonts/newsreader-italic.3e7cd790.woff2) format("woff2"); }

:root {
  --hueso: #FAF6F1; --rosa-claro: #F6EAEE; --rosa-bruma: #EDD9DF; --rosa: #C0436A;
  --tinta: #34302E; --gris-texto: #6A605A; --gris-calido: #9A8E87; --gris-inverso: #A69A94;
  --linea: #E3D9D2; --oliva: #6E6A50; --oliva-hover: #5C5942;
  --sans: "Archivo", system-ui, sans-serif; --serif: "Newsreader", Georgia, serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --radius: 4px; --border: 1px solid var(--linea);
  --focus: 0 0 0 3px rgba(192,67,106,0.32);
  --shadow-card: 0 1px 2px rgba(52,48,46,0.05), 0 6px 16px -12px rgba(52,48,46,0.20);
  --t-h1: clamp(34px, 2.6vw + 24px, 56px);
  --t-h2: clamp(27px, 1.4vw + 20px, 40px);
  --t-h3: clamp(21px, 0.8vw + 17px, 28px);
  --t-lead: clamp(21px, 0.6vw + 19px, 26px);
  --t-body: clamp(18px, 0.25vw + 17px, 20px);
  --t-body-sm: clamp(16px, 0.15vw + 15px, 17px);
  --t-small: clamp(14px, 0.1vw + 13px, 15px);
  --t-label: clamp(12px, 0.1vw + 11px, 13px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--hueso); color: var(--tinta); font-family: var(--serif); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1,h2,h3,h4,.eyebrow,.btn,.kicker { font-family: var(--sans); }
h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.04; letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; }
h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }
.lead { font-size: var(--t-lead); line-height: 1.5; }
p { font-size: var(--t-body); line-height: 1.62; }
.eyebrow { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rosa); }
.acento { color: var(--rosa); font-style: normal; }
a { color: var(--rosa); text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 3px; }
a:hover { color: var(--oliva-hover); text-decoration-color: var(--oliva-hover); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
img { max-width: 100%; height: auto; display: block; }

/* ═══ Botones ═══ */
.btn { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; border-radius: var(--radius); padding: 16px 32px; cursor: pointer; border: 1px solid transparent; transition: background .16s, color .16s, border-color .16s, box-shadow .16s; display: inline-flex; align-items: center; gap: var(--space-3); line-height: 1.15; text-decoration: none; text-align: center; }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-primary { background: var(--oliva); color: var(--hueso); }
.btn-primary:hover { background: var(--oliva-hover); color: var(--hueso); }
.btn-primary:active { transform: translateY(1px); }
.btn-lg { font-size: 15px; padding: 20px 40px; }
.btn-secondary { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn-secondary:hover { background: var(--tinta); color: var(--hueso); }
.link-arrow { font-family: var(--sans); font-size: var(--t-body-sm); font-weight: 600; letter-spacing: 0.06em; color: var(--rosa); text-decoration: none; display: inline-flex; gap: 8px; }
.link-arrow:hover { color: var(--oliva-hover); }
.cta-fineprint { font-family: var(--serif); font-size: var(--t-body-sm); line-height: 1.5; color: var(--gris-texto); max-width: 480px; margin-top: var(--space-4); }

/* ═══ Cabecera / navegación (compartida) ═══ */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(250,246,241,0.9); backdrop-filter: blur(10px); border-bottom: var(--border); }
.site-header .row { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--tinta); }
.brand span { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.nav { display: none; align-items: center; gap: var(--space-6); }
.nav a { font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-texto); text-decoration: none; }
.nav a:hover { color: var(--rosa); }
.nav a[aria-current="page"] { color: var(--rosa); }
.nav-cta { display: none; }
.burger { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; margin: -8px; }
.burger i { width: 24px; height: 2px; background: var(--tinta); display: block; }
.burger:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }
.mobile-menu { display: none; border-top: var(--border); padding: var(--space-4) 0 var(--space-5); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; font-family: var(--sans); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta); text-decoration: none; padding: var(--space-3) 0; }
.mobile-menu .btn { margin-top: var(--space-3); width: 100%; justify-content: center; }
@media (min-width: 900px){
  .nav { display: flex; } .nav-cta { display: inline-flex; } .burger { display: none; } .mobile-menu { display: none !important; }
}

/* ═══ Secciones ═══ */
main { display: block; }
section { padding: var(--space-8) 0; }
section.tint { background: var(--rosa-claro); }
section.bruma { background: var(--rosa-bruma); }
@media (min-width: 720px){ section { padding: var(--space-9) 0; } }
.kicker { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.kicker .bar { width: 40px; height: 3px; background: var(--rosa); border-radius: 2px; }
.sec-lead { color: var(--gris-texto); max-width: 60ch; margin-top: var(--space-3); }
.section-cta { margin-top: var(--space-8); }

/* ═══ Héroe genérico ═══ */
.hero { padding-top: var(--space-8); padding-bottom: var(--space-9); }
.hero .lead { color: var(--tinta); max-width: 560px; margin: var(--space-5) 0 var(--space-6); }
.hero h1 { margin-bottom: var(--space-4); }
.hero-cta { margin-top: var(--space-2); }

/* Héroe con foto (Home y Sobre mí) */
.hero-photo { background: var(--rosa-bruma); }
.hero-photo.hueso { background: var(--hueso); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
.hero-grid .figure img { width: 100%; border-radius: var(--radius); }
/* Móvil: orden natural = texto → foto → CTA (la foto nunca va antes del titular). */
@media (min-width: 900px){
  .hero-grid:not(.portrait) { grid-template-columns: 1.05fr 0.95fr; column-gap: var(--space-8); align-items: start;
    grid-template-areas: "text figure" "cta figure"; }
  .hero-grid:not(.portrait) .hero-text { grid-area: text; }
  .hero-grid:not(.portrait) .hero-cta { grid-area: cta; }
  .hero-grid:not(.portrait) .figure { grid-area: figure; align-self: center; }
}
/* Sobre mí: retrato grande junto al titular (a media página), sin CTA en el héroe. */
.hero-grid.portrait { grid-template-columns: 1fr; }
@media (min-width: 900px){ .hero-grid.portrait { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); align-items: center; } }

/* ═══ La verdad · bloque tinta a todo ancho ═══ */
.verdad { background: var(--tinta); }
.verdad h2 { color: var(--hueso); max-width: 20ch; }
.verdad p { color: var(--rosa-bruma); max-width: 60ch; margin-top: var(--space-5); font-family: var(--serif); }
.verdad .acento { color: var(--rosa); }

/* ═══ Tarjetas «¿Esto te suena?» ═══ */
.cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-7); }
@media (min-width: 720px){ .cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.card { border: var(--border); border-radius: var(--radius); background: var(--hueso); padding: var(--space-6); }
.card h3 { font-size: 19px; letter-spacing: 0.02em; text-transform: none; margin-bottom: var(--space-3); }
.card p { font-size: var(--t-body-sm); color: var(--gris-texto); line-height: 1.5; }
.remate { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); letter-spacing: 0.02em; text-transform: uppercase; text-align: center; max-width: 24ch; margin: var(--space-8) auto 0; text-wrap: balance; }

/* ═══ Método · pasos numerados ═══ */
.pasos { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-7); }
@media (min-width: 640px){ .pasos { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
@media (min-width: 960px){ .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso { position: relative; padding-top: var(--space-5); border-top: 2px solid var(--rosa-bruma); }
.paso .n { font-family: var(--sans); font-weight: 700; font-size: 30px; line-height: 1; color: var(--rosa); display: block; margin-bottom: var(--space-3); }
.paso h3 { font-size: 17px; letter-spacing: 0.04em; margin-bottom: var(--space-2); }
.paso p { font-size: var(--t-body-sm); color: var(--gris-texto); line-height: 1.5; }

/* ═══ Escalera · tres peldaños ascendentes ═══ */
.escalera { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-7); align-items: end; }
@media (min-width: 820px){ .escalera { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.peldano { border: var(--border); border-radius: var(--radius); padding: var(--space-6); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.peldano.p1 { background: var(--hueso); }
.peldano.p2 { background: var(--rosa-claro); }
.peldano.p3 { background: var(--rosa-bruma); }
@media (min-width: 820px){ .peldano.p2 { margin-bottom: var(--space-4); } .peldano.p3 { margin-bottom: var(--space-8); } }
.peldano .paso-eyebrow { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rosa); }
.peldano h3 { font-size: 21px; letter-spacing: 0.02em; text-transform: none; margin: var(--space-2) 0 var(--space-3); }
.peldano .que { font-family: var(--serif); font-size: var(--t-body-sm); color: var(--gris-texto); line-height: 1.5; flex: 1; }
.peldano .meta { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border); }
.peldano .formato { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-texto); display: block; margin-bottom: var(--space-2); }
.peldano .desde { font-family: var(--sans); font-weight: 700; font-size: 18px; color: var(--tinta); }
a.peldano:hover { border-color: var(--tinta); }
a.peldano:focus-visible { outline: none; box-shadow: var(--focus); }
.peldano .ver { margin-top: var(--space-3); font-family: var(--sans); font-size: var(--t-body-sm); font-weight: 600; letter-spacing: 0.06em; color: var(--rosa); }

/* ═══ Listas de beneficios (con marca +) ═══ */
.beneficios { list-style: none; margin-top: var(--space-6); display: grid; grid-template-columns: 1fr; gap: var(--space-4); max-width: 820px; }
@media (min-width: 720px){ .beneficios { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
.beneficios li { position: relative; padding-left: var(--space-6); font-size: var(--t-body-sm); line-height: 1.5; color: var(--gris-texto); }
.beneficios li::before { content: "+"; position: absolute; left: 0; top: 0; font-family: var(--sans); font-weight: 700; color: var(--rosa); }
.beneficios li b { font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; color: var(--tinta); display: block; margin-bottom: 2px; }

/* ═══ Timeline vertical (fases de consultoría) ═══ */
.tl { position: relative; padding-left: var(--space-6); margin-top: var(--space-7); max-width: 780px; }
.tl::before { content:""; position:absolute; left: 7px; top: 6px; bottom: 8px; width: 2px; background: var(--rosa-bruma); }
.tl-item { position: relative; padding-bottom: var(--space-6); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content:""; position:absolute; left: calc(-1 * var(--space-6) + 1px); top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--hueso); border: 2px solid var(--rosa); }
.tl-item .ph { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rosa); }
.tl-item h3 { font-family: var(--sans); font-weight: 600; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; margin: 4px 0; }
.tl-item p { font-size: var(--t-body-sm); color: var(--gris-texto); line-height: 1.5; }
.tl-item .dur { font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-calido); }
.tl-item.paralelo::before { background: var(--rosa); }
.tl-item.cierre { margin-top: var(--space-4); }
.tl-item.cierre::before { border-style: dashed; }

/* ═══ Bloque de precio destacado ═══ */
.precio-card { max-width: 640px; margin-top: var(--space-6); background: var(--rosa-bruma); border-radius: var(--radius); padding: var(--space-7) var(--space-6); }
.precio-card .total { font-family: var(--sans); font-weight: 700; font-size: clamp(34px, 3vw + 20px, 48px); line-height: 1; color: var(--tinta); }
.precio-card .total small { font-size: 22px; }
.precio-card .sub { font-family: var(--sans); font-size: var(--t-body-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--tinta); margin-top: var(--space-2); }
.precio-card .exp { font-family: var(--serif); font-size: var(--t-body-sm); color: var(--gris-texto); line-height: 1.55; margin-top: var(--space-4); }
.precio-list { list-style: none; margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.precio-list li { position: relative; padding-left: var(--space-5); font-size: var(--t-body-sm); color: var(--gris-texto); line-height: 1.5; }
.precio-list li::before { content: "·"; position: absolute; left: var(--space-2); color: var(--rosa); font-weight: 700; }
.precio-cierre { font-family: var(--sans); font-weight: 600; font-size: var(--t-body-sm); letter-spacing: 0.02em; color: var(--tinta); margin-top: var(--space-5); }

/* Bloque «100%» / crédito */
.credito { max-width: 640px; margin-top: var(--space-6); background: var(--rosa-bruma); border-radius: var(--radius); padding: var(--space-6); display: flex; gap: var(--space-5); align-items: baseline; flex-wrap: wrap; }
.credito .big { font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: 1; color: var(--rosa); }
.credito .txt { flex: 1; min-width: 240px; }
.credito .txt b { font-family: var(--sans); font-weight: 700; font-size: var(--t-body-sm); color: var(--tinta); display: block; margin-bottom: var(--space-2); }
.credito .txt span { font-family: var(--serif); font-size: var(--t-body-sm); color: var(--gris-texto); line-height: 1.5; }

/* ═══ «Quién te acompaña» / cita ═══ */
.quien .wrap { max-width: 760px; }
.quien p { font-size: var(--t-lead); line-height: 1.5; color: var(--tinta); }

/* ═══ Formulario (contacto / captura) ═══ */
.form-block { max-width: 560px; margin-top: var(--space-6); }
.form-block .field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-block label { font-family: var(--sans); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-texto); }
.form-block input, .form-block textarea { font-family: var(--serif); font-size: var(--t-body); background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--radius); padding: 13px 15px; color: var(--tinta); width: 100%; }
.form-block textarea { min-height: 120px; resize: vertical; }
.form-block input::placeholder, .form-block textarea::placeholder { color: var(--gris-calido); }
.form-block input:focus, .form-block textarea:focus { outline: none; border-color: var(--rosa); box-shadow: var(--focus); }
.form-block .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-block .btn { margin-top: var(--space-2); }
.form-status { font-family: var(--serif); font-size: var(--t-body-sm); line-height: 1.5; margin-top: var(--space-4); }
.form-status:empty { margin-top: 0; }
.form-status[data-kind="error"] { color: var(--rosa); }
.form-status a { color: inherit; }
.alt-canal { font-family: var(--serif); font-size: var(--t-body-sm); color: var(--gris-texto); margin-top: var(--space-6); }
.alt-canal a { font-weight: 400; }

/* captura de correo compacta */
.email-cap { max-width: 520px; margin-top: var(--space-6); }
.email-cap .lbl { font-family: var(--serif); font-size: var(--t-body-sm); color: var(--gris-texto); margin-bottom: var(--space-4); }
.email-cap .form { display: flex; flex-direction: column; gap: var(--space-3); }
.email-cap input { font-family: var(--serif); font-size: var(--t-body); background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--radius); padding: 13px 15px; flex: 1; color: var(--tinta); }
.email-cap input:focus { outline: none; border-color: var(--rosa); box-shadow: var(--focus); }
.email-cap .send { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--oliva); border: 1px solid var(--oliva); border-radius: var(--radius); padding: 13px 24px; cursor: pointer; color: var(--hueso); white-space: nowrap; }
.email-cap .send:hover { background: var(--oliva-hover); border-color: var(--oliva-hover); }
.email-cap .send:focus-visible { outline: none; box-shadow: var(--focus); }
.cap-done { font-family: var(--serif); font-size: var(--t-body-sm); color: var(--oliva); }
@media (min-width: 480px){ .email-cap .form { flex-direction: row; } }

/* ═══ Página de gracias ═══ */
.gracias .wrap { max-width: 640px; }
.gracias .eyebrow { color: var(--oliva); }
.gracias h1 { margin: var(--space-4) 0 var(--space-5); }
.gracias p.lead { color: var(--tinta); margin-bottom: var(--space-6); }
.gracias .g-note { font-family: var(--serif); font-size: var(--t-body-sm); color: var(--gris-texto); margin-top: var(--space-4); }

/* ═══ Bloques legales ═══ */
.legal .wrap { max-width: 720px; }
.legal h1 { margin: var(--space-4) 0 var(--space-3); }
.legal h2 { font-size: var(--t-h3); margin: var(--space-7) 0 var(--space-3); }
.legal p { margin-bottom: var(--space-4); }
.legal ul { margin: 0 0 var(--space-4) var(--space-5); }
.legal li { margin-bottom: var(--space-2); }
.legal .updated { font-family: var(--sans); font-size: var(--t-label); letter-spacing: 0.06em; color: var(--gris-texto); text-transform: uppercase; }
.legal .policy { margin: var(--space-4) 0; padding: var(--space-5) var(--space-6); background: var(--rosa-claro); border-radius: var(--radius); font-style: italic; color: var(--tinta); }
.lawyer { margin-top: var(--space-8); padding: var(--space-5) var(--space-6); background: var(--rosa-claro); border-left: 3px solid var(--rosa); border-radius: var(--radius); font-family: var(--sans); font-size: var(--t-body-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--tinta); }
.backlink { display: inline-block; margin-top: var(--space-7); font-family: var(--sans); font-size: var(--t-body-sm); font-weight: 600; letter-spacing: 0.06em; text-decoration: none; color: var(--rosa); }

/* ═══ Pie ═══ */
.footer { background: var(--tinta); color: var(--hueso); padding: var(--space-8) 0; }
.footer .brandline { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--rosa-bruma); max-width: 26ch; margin-bottom: var(--space-6); }
.footer .cols { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 640px){ .footer .cols { grid-template-columns: 2fr 1fr 1fr; } }
.footer h4 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris-inverso); margin-bottom: var(--space-3); font-weight: 600; }
.footer a { color: var(--hueso); text-decoration: none; font-size: var(--t-body-sm); display: block; margin-bottom: var(--space-2); }
.footer a:hover { color: var(--rosa-bruma); }
.footer .sig { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(250,246,241,0.14); font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-inverso); }

:focus-visible { outline: none; }