/* ArchieScope — sistema de diseño compartido por todas las páginas.
   El vidrio es la misma receta del Tesorero (Masters Only); la tipografía
   y el dorado son los de la marca (estilo híbrido, elegido 2026-10-03). */

/* ── Fuentes de la marca (ya vivían en /assets/fonts) ── */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/5d70b133857055167c6efd19eccdbc46d7cf328d.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/a40c62007acb22ff6933aee81b137ef7d136e288.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 400;font-display:swap;src:url("../fonts/3e7cd79008fd0bcbf8dda139c7ebecb3fc44c257.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 400;font-display:swap;src:url("../fonts/ee0be58286a7bebcee2a988cde989343cadfa5ca.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/4f27206c4b1caf8b7805597fcbc6922ff5805daa.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/06ad36000cd89dec93e4398c5b62565ab1d1b1e2.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Layout: una columna centrada de 1120px; barra de vidrio arriba en
   computadora, barra de pestañas flotante abajo en el celular. */
:root{
  --sf:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --spring:cubic-bezier(.32,.72,0,1);
  --ancho:1120px;
  --gutter:clamp(16px, 4vw, 32px);

  /* Un solo color: el dorado de la marca. El rojo es solo para errores. */
  --oro:#8A6A2F; --error:#B3261E;

  /* Papel y tinta */
  --paper:#FAF8F3; --ink:#16130F; --ink2:#4B463D; --muted:#6E6858;
  --sep:rgba(22,19,15,.11); --fill:rgba(120,110,90,.10);
  --accent:var(--oro); --accent-ink:#FFFDF8;
  --blob-a:var(--oro); --blob-b:#B08D57; --blob-c:#8C8273; --blob:.16;

  /* Vidrio líquido */
  --glass:rgba(255,253,248,.55); --glass-top:rgba(255,255,255,.80);
  --glass-edge:rgba(255,255,255,.78); --glass-hi:rgba(255,255,255,.95); --glass-low:rgba(0,0,0,.04);
  --glass-shadow:0 10px 34px rgba(40,30,10,.10), 0 1px 3px rgba(40,30,10,.06);
  --lens:rgba(255,255,255,.72); --sheet:rgba(250,248,243,.94);

  /* Tipografía */
  --display:var(--serif); --display-w:300; --display-track:-.025em; --display-em:italic;
  --body:var(--serif); --label:var(--mono); --label-w:400; --label-track:.18em;
  --num:var(--mono); --num-w:400;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --oro:#C9A96E; --error:#FF8A80;
    --paper:#0E0D0B; --ink:#F4F1EA; --ink2:#CFC8BA; --muted:#A39C8C;
    --sep:rgba(255,255,255,.09); --fill:rgba(255,255,255,.08); --accent-ink:#0E0D0B; --blob:.26;
    --glass:rgba(36,33,28,.50); --glass-top:rgba(62,58,50,.55);
    --glass-edge:rgba(255,255,255,.13); --glass-hi:rgba(255,255,255,.18); --glass-low:rgba(0,0,0,.25);
    --glass-shadow:0 12px 40px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3); --lens:rgba(255,255,255,.14); --sheet:rgba(26,24,20,.94);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --oro:#C9A96E; --error:#FF8A80;
  --paper:#0E0D0B; --ink:#F4F1EA; --ink2:#CFC8BA; --muted:#A39C8C;
  --sep:rgba(255,255,255,.09); --fill:rgba(255,255,255,.08); --accent-ink:#0E0D0B; --blob:.26;
  --glass:rgba(36,33,28,.50); --glass-top:rgba(62,58,50,.55);
  --glass-edge:rgba(255,255,255,.13); --glass-hi:rgba(255,255,255,.18); --glass-low:rgba(0,0,0,.25);
  --glass-shadow:0 12px 40px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3); --lens:rgba(255,255,255,.14); --sheet:rgba(26,24,20,.94);
  color-scheme:dark;
}

/* ── Base ── */
html{font-size:17px; -webkit-text-size-adjust:100%; scroll-padding-top:90px}
html.big{font-size:20px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; min-height:100%; color:var(--ink); font-family:var(--body); line-height:1.5; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(48% 30% at 0% 0%, color-mix(in srgb, var(--blob-a) calc(var(--blob)*100%), transparent), transparent 70%),
    radial-gradient(40% 28% at 100% 22%, color-mix(in srgb, var(--blob-b) calc(var(--blob)*80%), transparent), transparent 70%),
    radial-gradient(50% 32% at 8% 62%, color-mix(in srgb, var(--blob-c) calc(var(--blob)*70%), transparent), transparent 70%),
    radial-gradient(46% 30% at 100% 96%, color-mix(in srgb, var(--blob-a) calc(var(--blob)*60%), transparent), transparent 70%),
    var(--paper);
  background-attachment:scroll}
a{color:inherit; text-decoration:none}
button,input{font:inherit; color:inherit}
button{cursor:pointer; -webkit-tap-highlight-color:transparent}
img{max-width:100%; display:block}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
::selection{background:var(--accent); color:var(--accent-ink)}
[hidden]{display:none !important}
:root[data-lang="es"] [lang="en"], :root[data-lang="en"] [lang="es"]{display:none !important}

.press{transition:transform .35s var(--spring), opacity .2s, background-color .25s, border-color .25s}
.press:active{transform:scale(.965)}
.wrap{max-width:var(--ancho); margin:0 auto; padding-inline:var(--gutter)}

/* ── Vidrio ── */
.glass{background:linear-gradient(180deg, var(--glass-top), var(--glass));
  -webkit-backdrop-filter:blur(24px) saturate(190%); backdrop-filter:blur(24px) saturate(190%);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-low), var(--glass-shadow)}

/* ── Botones ── */
.round{min-width:44px; height:42px; padding:0 12px; border-radius:999px; display:inline-grid; place-items:center; font-family:var(--sf); font-weight:700; font-size:.82rem;
  border:1px solid var(--glass-edge); background:linear-gradient(180deg, var(--glass-top), var(--glass));
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow)}
.round svg{width:19px; height:19px}
.round[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.pill{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 24px; border-radius:999px; font-family:var(--sf); font-weight:700; font-size:.95rem; border:1px solid transparent; white-space:nowrap}
.pill.solid{background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent)); color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent)}
.pill.clear{border-color:var(--glass-edge); background:linear-gradient(180deg, var(--glass-top), var(--glass)); box-shadow:inset 0 1px 0 var(--glass-hi), 0 2px 8px rgba(0,0,0,.05)}

/* ── Barra superior ── */
.topbar{position:sticky; top:calc(10px + env(safe-area-inset-top, 0px)); z-index:30; margin:10px auto 0; max-width:calc(var(--ancho) - 2 * var(--gutter) + 24px); width:calc(100% - 2 * var(--gutter) + 8px);
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 7px 7px 20px; border-radius:999px}
.brand{display:flex; align-items:baseline; gap:12px; min-width:0}
.brand b{font-family:var(--display); font-weight:400; font-size:1.18rem; letter-spacing:-.01em; white-space:nowrap}
.brand b span{color:var(--accent)}
.brand small{font-family:var(--label); font-weight:var(--label-w); font-size:.62rem; letter-spacing:var(--label-track); color:var(--muted); text-transform:uppercase; white-space:nowrap}
.nav{display:flex; gap:2px; padding:4px; border-radius:999px; background:var(--fill)}
.nav a{font-family:var(--sf); font-size:.84rem; font-weight:600; padding:8px 14px; border-radius:999px; color:var(--ink2)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--lens); color:var(--ink); box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge), 0 3px 10px rgba(0,0,0,.07)}
.tools{display:flex; gap:6px}

/* ── Barra de pestañas (celular) ── */
.tabbar{display:none}
@media (max-width:820px){
  .nav{display:none}
  .brand small{display:none}
  .topbar{padding-left:18px}
  .tabbar{position:fixed; left:10px; right:10px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:30; height:66px; border-radius:999px;
    display:grid; grid-template-columns:repeat(5,1fr); padding:5px}
  .tab{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:999px;
    font-family:var(--sf); font-size:.64rem; font-weight:600; color:var(--ink); -webkit-tap-highlight-color:transparent}
  .tab svg{width:23px; height:23px}
  .tab[aria-current="page"]{color:var(--accent); background:var(--lens); box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge), 0 4px 14px rgba(0,0,0,.08)}
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
}

/* ── Tipografía ── */
.eyebrow{display:flex; align-items:center; gap:10px; font-family:var(--label); font-weight:var(--label-w); font-size:.66rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--muted)}
.eyebrow i{width:6px; height:6px; border-radius:99px; background:var(--accent); flex:none}
.display{margin:0; font-family:var(--display); font-weight:var(--display-w); letter-spacing:var(--display-track); line-height:1.02; text-wrap:balance}
.display em{font-style:var(--display-em); color:var(--accent)}
.lead{margin:0; font-size:1.12rem; line-height:1.6; color:var(--ink2); text-wrap:pretty; max-width:34em}
.lead strong{color:var(--ink); font-weight:500}
.section-head{display:flex; align-items:center; gap:16px; margin:0 0 22px}
.section-head::after{content:""; flex:1; height:1px; background:var(--sep)}
.section-head h2{margin:0; font-family:var(--label); font-weight:var(--label-w); font-size:.66rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--muted)}

/* ── Héroe ── */
.hero{padding-block:clamp(48px, 9vw, 104px) clamp(36px, 6vw, 64px); display:grid; gap:clamp(28px, 4vw, 48px)}
.hero .display{font-size:clamp(2.5rem, 6.2vw, 4.9rem)}
.hero-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:clamp(28px, 5vw, 64px); align-items:end}
.hero-row > *{min-width:0}

/* Tarjeta del caso: foto con los números en vidrio encima */
.caso{position:relative; overflow:hidden; isolation:isolate; border-radius:30px; padding:clamp(20px, 3vw, 30px); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 60px rgba(20,14,30,.28)}
.caso::before{content:""; position:absolute; inset:0; z-index:-2; background:url("../img/sitio/cdmx-atardecer.webp") 50% 62% / cover}
.caso::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,10,20,.28) 0%, rgba(14,10,20,.62) 100%)}
.caso-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 16px; margin-bottom:clamp(36px, 7vw, 84px)}
.caso-top p{margin:0; font-family:var(--label); font-weight:var(--label-w); font-size:.66rem; letter-spacing:var(--label-track); text-transform:uppercase; opacity:.86}
.glass-pill{display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 16px; border-radius:999px; font-family:var(--sf); font-weight:700; font-size:.84rem; color:#fff;
  border:1px solid rgba(255,255,255,.35); background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.14)}
.numeros{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.numero{padding:14px 14px 16px; border-radius:20px; border:1px solid rgba(255,255,255,.26);
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.numero small{display:block; font-family:var(--sf); font-size:.74rem; font-weight:600; opacity:.85; margin-bottom:6px}
.numero b{display:block; font-family:var(--num); font-weight:var(--num-w); font-size:clamp(1.25rem, 3.6vw, 2.2rem); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap}
.numero.tachado b{text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:rgba(255,255,255,.55); opacity:.8}
.numero.gana b{color:#F3DFB2}
@media (max-width:480px){ .numeros{grid-template-columns:1fr 1fr} .numero.gana{grid-column:1 / -1} }
.mision{display:flex; gap:14px; align-items:flex-start; padding-top:22px; border-top:1px solid var(--sep)}
.mision b{font-family:var(--num); font-weight:var(--num-w); font-size:1.7rem; line-height:1; color:var(--accent); letter-spacing:-.02em}
.mision p{margin:0; padding-top:3px; font-size:.95rem; line-height:1.5; color:var(--muted)}

/* ── Puertas ── */
.puertas{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:16px}
.puerta{position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:18px; min-height:300px; padding:24px; border-radius:28px}
.puerta:hover{transform:translateY(-3px)}
.puerta h3{margin:0; font-family:var(--display); font-weight:var(--display-w); font-size:1.7rem; line-height:1.12; letter-spacing:var(--display-track); text-wrap:balance}
.puerta h3 em{font-style:var(--display-em); color:var(--accent)}
.puerta p{margin:0; font-size:.95rem; line-height:1.55; color:var(--muted); text-wrap:pretty}
.puerta-pie{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--sep);
  font-family:var(--sf); font-weight:700; font-size:.88rem}
.puerta-pie span:last-child{color:var(--accent); font-size:1.1rem}
.puerta .foto{position:absolute; inset:0; z-index:-1; background:50% 50% / cover no-repeat; opacity:.22}
.foto.mesa{background-image:url("../img/sitio/mesa-de-trabajo.webp"); background-position:50% 55%}
.foto.biblioteca{background-image:url("../img/sitio/biblioteca.webp"); background-position:50% 45%}
.foto.noche{background-image:url("../img/sitio/cdmx-noche.webp")}
.puerta .foto::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, var(--paper) 92%); opacity:.6}

/* ── Revista ── */
.revista{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 28px; padding:clamp(20px, 3vw, 28px); border-radius:28px}
.revista > div{display:grid; gap:6px; min-width:0; flex:1 1 300px}
.revista .eyebrow{color:var(--accent)}
.revista strong{font-family:var(--display); font-weight:var(--display-w); font-size:1.5rem; letter-spacing:var(--display-track); line-height:1.15}
.revista span.sub{font-size:.95rem; color:var(--muted)}

/* ── Series de lecturas ── */
.series{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:12px}
.serie{display:grid; gap:6px; align-content:start; padding:20px 22px; border-radius:24px; min-width:0}
.serie small{font-family:var(--label); font-weight:var(--label-w); font-size:.62rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--accent)}
.serie b{font-family:var(--display); font-weight:var(--display-w); font-size:1.2rem; letter-spacing:var(--display-track); line-height:1.2}
.serie b{font-weight:400}
.serie span{font-size:.9rem; color:var(--muted); line-height:1.45}

/* ── Lección del día por correo ── */
.correo{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:clamp(20px, 4vw, 48px); align-items:center; padding:clamp(22px, 4vw, 40px); border-radius:32px}
.correo > *{min-width:0}
.correo .display{font-size:clamp(1.9rem, 4vw, 2.8rem)}
.correo form{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
.temas{border:0; margin:0; padding:0; min-inline-size:0}
.temas legend{font-family:var(--sf); font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:8px; padding:0}
/* Lista agrupada (como Ajustes del iPhone): una fila por opción, check a la derecha */
.lista{border-radius:20px; overflow:hidden; border:1px solid var(--glass-edge); background:var(--fill)}
.opcion{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; padding:0 18px; cursor:pointer;
  font-family:var(--sf); font-size:1rem; -webkit-tap-highlight-color:transparent}
.opcion + .opcion{border-top:1px solid var(--sep)}
.opcion input{position:absolute; opacity:0; pointer-events:none}
.opcion .check{width:22px; height:22px; border-radius:50%; flex:none; border:1.5px solid var(--sep); display:grid; place-items:center; transition:background-color .2s, border-color .2s}
.opcion .check::after{content:""; width:10px; height:5px; margin-top:-2px; border:solid var(--accent-ink); border-width:0 0 2px 2px; transform:rotate(-45deg); opacity:0}
.opcion input:checked ~ .check{background:var(--accent); border-color:var(--accent)}
.opcion input:checked ~ .check::after{opacity:1}
.opcion input:focus-visible ~ .check{outline:3px solid var(--accent); outline-offset:2px}
.campo{display:flex; gap:8px; padding:5px; border-radius:999px; border:1px solid var(--glass-edge); background:var(--fill)}
.campo input{flex:1; width:0; min-width:0; border:0; background:transparent; padding:0 16px; font-family:var(--sf); font-size:1rem; outline:none}
.campo:focus-within{border-color:var(--accent)}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.nota{margin:0; min-height:1.4em; font-family:var(--sf); font-size:.85rem; color:var(--muted)}
.nota.ok{color:var(--accent)}
.nota.error{color:var(--error)}

/* ── Caso con título y nota (Negocios) ── */
.caso.mesa::before{background-image:url("../img/sitio/mesa-de-trabajo.webp"); background-position:50% 50%}
.caso.mesa::after{background:linear-gradient(180deg, rgba(16,12,8,.62) 0%, rgba(16,12,8,.74) 100%)}
.caso h2{margin:0 0 clamp(28px, 5vw, 56px); font-family:var(--display); font-weight:400; font-size:clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing:var(--display-track); line-height:1.12; text-wrap:balance}
.caso-nota{margin:16px 0 0; max-width:46em; font-size:.98rem; line-height:1.55; opacity:.9; text-wrap:pretty}

/* ── Pasos del servicio: son una secuencia real, por eso van numerados ── */
.pasos{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:14px}
.paso{display:flex; flex-direction:column; gap:12px; padding:22px; border-radius:26px}
.paso-num{font-family:var(--label); font-size:.66rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--accent)}
.paso h3{margin:4px 0 0; font-family:var(--display); font-weight:400; font-size:1.45rem; letter-spacing:-.015em; line-height:1.15}
.paso p{margin:0; font-size:.95rem; line-height:1.55; color:var(--muted); text-wrap:pretty}
.paso .etiqueta{margin-top:auto; padding-top:12px; border-top:1px solid var(--sep); font-family:var(--label); font-size:.62rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--muted)}

/* ── Formulario de diagnóstico ── */
.diagnostico{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:clamp(22px, 4vw, 48px); padding:clamp(22px, 4vw, 40px); border-radius:32px}
.diagnostico > *{min-width:0}
.diagnostico .display{font-size:clamp(1.9rem, 4vw, 2.8rem)}
.diagnostico form{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-content:start}
.etq{display:grid; gap:7px; font-family:var(--sf); font-size:.82rem; font-weight:600; color:var(--muted)}
.etq input{width:100%; min-height:50px; padding:0 18px; border-radius:16px; border:1px solid var(--glass-edge); background:var(--fill); font-family:var(--sf); font-size:1rem; font-weight:400; color:var(--ink); outline:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
.etq input:focus{border-color:var(--accent)}
.etq input::placeholder{color:var(--muted); opacity:.75}
.acciones{display:grid; gap:12px; justify-items:center}
.acciones .pill{width:100%}
.enlace{border:0; background:none; padding:4px; font-family:var(--sf); font-size:.9rem; font-weight:600; color:var(--ink2); text-decoration:underline; text-decoration-color:var(--sep); text-underline-offset:4px}
.enlace:hover{color:var(--ink)}
.etq select{width:100%; min-height:50px; padding:0 44px 0 18px; border-radius:16px; border:1px solid var(--glass-edge); font-family:var(--sf); font-size:1rem; color:var(--ink); outline:none; -webkit-appearance:none; appearance:none;
  background:var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A6A2F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center}
.etq select:focus{border-color:var(--accent)}
.contacto-directo{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; font-family:var(--sf); font-size:.85rem; color:var(--muted)}
.contacto-directo a{color:var(--ink2); text-decoration:underline; text-decoration-color:var(--sep); text-underline-offset:3px}

/* ── Más fotos para la tarjeta grande ── */
.caso.noche::before{background-image:url("../img/sitio/cdmx-noche.webp"); background-position:50% 50%}
.caso.biblioteca::before{background-image:url("../img/sitio/biblioteca.webp"); background-position:50% 40%}
.caso.noche::after, .caso.biblioteca::after{background:linear-gradient(180deg, rgba(14,11,8,.50) 0%, rgba(14,11,8,.74) 100%)}
.caso .lead{color:rgba(255,255,255,.88); max-width:40em}
.numeros.dos{grid-template-columns:repeat(2, minmax(0,1fr))}
.numero p{margin:10px 0 0; font-family:var(--body); font-size:.92rem; line-height:1.45; opacity:.88}
@media (max-width:480px){ .numeros.dos{grid-template-columns:1fr} }

/* ── Renglones en vidrio (ruta, archivo, series) ── */
.renglones{border-radius:28px; overflow:hidden}
.renglon{display:grid; grid-template-columns:minmax(6.5rem, 9rem) minmax(0,1fr); gap:6px 22px; padding:18px 22px; align-items:baseline}
.renglon + .renglon{border-top:1px solid var(--sep)}
.renglon > :first-child{font-family:var(--label); font-size:.66rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--accent)}
.renglon b{display:block; font-family:var(--display); font-weight:400; font-size:1.22rem; letter-spacing:-.01em; line-height:1.2}
.renglon p{margin:4px 0 0; font-size:.95rem; line-height:1.5; color:var(--muted); text-wrap:pretty}
a.renglon:hover b{color:var(--accent)}
.renglon .ahora{display:block; margin-top:4px; color:var(--ink)}
@media (max-width:560px){ .renglon{grid-template-columns:1fr} }

/* ── Quién está detrás ── */
.persona{display:grid; grid-template-columns:minmax(0, 240px) minmax(0, 1fr); gap:clamp(20px, 4vw, 40px); align-items:start; padding:clamp(18px, 3vw, 28px); border-radius:32px}
.persona img{width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:50% 30%; border-radius:22px}
.persona .texto{display:grid; gap:14px}
.persona .texto p{margin:0; font-size:1.05rem; line-height:1.6; color:var(--ink2); text-wrap:pretty}
.datos{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap:12px 24px; margin:6px 0 0; padding-top:16px; border-top:1px solid var(--sep)}
.datos div{display:grid; gap:2px}
.datos dt{font-family:var(--label); font-size:.62rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--muted)}
.datos dd{margin:0; font-family:var(--sf); font-size:.95rem; font-weight:600}
.datos a{text-decoration:underline; text-decoration-color:var(--sep); text-underline-offset:3px}
@media (max-width:620px){ .persona{grid-template-columns:1fr} .persona img{max-width:260px} }

/* ── Lecturas ── */
.lecciones{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:14px}
.leccion{display:grid; gap:12px; align-content:start; padding:10px 10px 16px; border-radius:26px}
.leccion img{width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:50% 0; border-radius:18px; background:var(--fill)}
.leccion small{padding:0 8px; font-family:var(--label); font-size:.62rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--accent)}
.leccion b{padding:0 8px; font-family:var(--display); font-weight:400; font-size:1.1rem; line-height:1.25; text-wrap:pretty}
.filtro{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 24px; margin-bottom:16px}
.filtro .etq{min-width:min(100%, 240px)}
.dia{margin:26px 0 10px; font-family:var(--label); font-size:.66rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--muted)}
.vacio{margin:0; padding:22px; color:var(--muted); font-family:var(--sf)}

/* ── Escuela ── */
.hechos{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap:16px 28px; margin:0; padding:22px 26px; border-radius:26px}
.hechos div{display:grid; gap:4px}
.hechos dt{font-family:var(--label); font-size:.62rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--muted)}
.hechos dd{margin:0; font-family:var(--display); font-size:1.3rem; letter-spacing:-.01em}
.dos-col{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:16px}
.tres-col{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap:16px}
.plan{display:flex; flex-direction:column; gap:14px; padding:26px; border-radius:28px; min-width:0}
.plan .kicker{font-family:var(--label); font-size:.66rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--accent)}
.plan h3{margin:0; font-family:var(--display); font-weight:var(--display-w); font-size:1.75rem; letter-spacing:var(--display-track); line-height:1.12; text-wrap:balance}
.plan p{margin:0; font-size:.98rem; line-height:1.55; color:var(--muted); text-wrap:pretty}
.precio{display:grid; gap:2px}
.precio s{font-family:var(--num); font-size:.85rem; color:var(--muted)}
.precio b{font-family:var(--display); font-weight:300; font-size:2.6rem; letter-spacing:-.03em; line-height:1}
.precio small{font-family:var(--label); font-size:.62rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--muted)}
.incluye{display:grid; gap:8px; margin:0; padding:14px 0 0; list-style:none; border-top:1px solid var(--sep)}
.incluye li{position:relative; padding-left:18px; font-size:.98rem; line-height:1.45; color:var(--ink2)}
.incluye li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.plan .pill{margin-top:auto; align-self:stretch}
.plan .aparte{margin-top:6px; padding-top:14px; border-top:1px solid var(--sep)}
.nota-planes{margin:14px 4px 0; font-size:.9rem; line-height:1.5; color:var(--muted)}
.nota-planes b{font-family:var(--label); font-weight:400; font-size:.7rem; letter-spacing:.08em; color:var(--accent)}
.meta-linea{margin:0; font-family:var(--label); font-size:.66rem; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--muted)}
.acciones.izq{justify-items:start}
.acciones.izq .pill{width:auto}

/* Hoja de la evaluación (dialog nativo) */
dialog.hoja{border:0; padding:0; background:transparent; color:var(--ink); width:min(100% - 20px, 600px); max-height:calc(100% - 24px); margin:auto; overflow:visible}
dialog.hoja::backdrop{background:rgba(12,9,5,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.hoja-cuerpo{max-height:calc(100dvh - 24px); overflow-y:auto; padding:18px clamp(18px, 4vw, 30px) 26px; border-radius:34px;
  background:var(--sheet); -webkit-backdrop-filter:blur(40px) saturate(190%); backdrop-filter:blur(40px) saturate(190%);
  border:1px solid var(--glass-edge); box-shadow:inset 0 1px 0 var(--glass-hi), 0 30px 80px rgba(0,0,0,.28)}
dialog.hoja[open] .hoja-cuerpo{animation:sube .5s var(--spring)}
@keyframes sube{from{transform:translateY(40px); opacity:0}to{transform:none; opacity:1}}
@media (max-width:620px){ dialog.hoja{margin:auto auto 8px; width:calc(100% - 16px)} .hoja-cuerpo{max-height:calc(100dvh - 16px)} }
.hoja-top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px}
.hoja-top .eyebrow{margin:0}
.progreso{display:flex; align-items:center; gap:12px; margin-bottom:18px; font-family:var(--num); font-size:.8rem; color:var(--muted)}
.progreso .barra{flex:1; height:6px; border-radius:99px; background:var(--fill); overflow:hidden}
.progreso .barra span{display:block; height:100%; border-radius:99px; background:var(--accent); transition:width .45s var(--spring)}
.pasaje{margin:0 0 14px; padding:14px 16px; border-radius:18px; background:var(--fill); font-size:1rem; line-height:1.55; color:var(--ink2)}
.pregunta{margin:0 0 16px; font-family:var(--display); font-weight:400; font-size:1.6rem; letter-spacing:-.015em; line-height:1.2}
button.opcion{width:100%; border:0; background:transparent; text-align:left; justify-content:flex-start; gap:14px; min-height:54px; padding:12px 18px; line-height:1.35}
button.opcion:hover{background:var(--fill)}
button.opcion .letra{font-family:var(--num); font-size:.8rem; color:var(--accent); width:1.2em; flex:none}
.pie-hoja{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; font-family:var(--sf); font-size:.82rem; color:var(--muted)}
.etq textarea{width:100%; min-height:72px; padding:12px 18px; border-radius:16px; border:1px solid var(--glass-edge); background:var(--fill); font-family:var(--sf); font-size:1rem; color:var(--ink); outline:none; resize:vertical}
.etq textarea:focus{border-color:var(--accent)}
.campos{display:grid; gap:14px}
.nivel{display:flex; align-items:baseline; gap:16px; margin:6px 0 10px}
.nivel b{font-family:var(--display); font-weight:300; font-size:4.6rem; line-height:.9; letter-spacing:-.04em; color:var(--accent)}
.nivel span{font-family:var(--display); font-size:1.4rem; color:var(--ink2)}
.bandas{display:grid; gap:10px; margin:18px 0}
.banda{display:grid; grid-template-columns:2.5rem 1fr 2.5rem; align-items:center; gap:12px; font-family:var(--num); font-size:.82rem}
.banda .barra{height:6px; border-radius:99px; background:var(--fill); overflow:hidden}
.banda .barra span{display:block; height:100%; background:var(--muted); border-radius:99px}
.banda.suya .barra span{background:var(--accent)}
.banda > :last-child{text-align:right; color:var(--muted)}

/* ── Pie ── */
.pie{margin-top:clamp(56px, 8vw, 96px); border-top:1px solid var(--sep)}
.pie .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:18px 32px; padding-block:36px 44px}
.pie b{font-family:var(--display); font-weight:var(--display-w); font-size:1.1rem}
.pie b{font-weight:400}
.pie small{font-family:var(--label); font-size:.62rem; letter-spacing:var(--label-track); color:var(--muted); margin-left:12px}
.pie nav{display:flex; flex-wrap:wrap; gap:10px 26px; font-family:var(--sf); font-size:.86rem; color:var(--muted)}
.pie nav a:hover{color:var(--ink)}
.pie nav a.discreto{opacity:.28}

.bloque{padding-block:clamp(28px, 5vw, 48px)}


/* ── Accesibilidad y respaldo ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:color-mix(in srgb, var(--paper) 96%, transparent); --glass-top:var(--paper)}
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }
@media (prefers-reduced-transparency: reduce){
  .glass,.round,.numero,.glass-pill{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--paper)}
}