/* The Frame Academy · estilos compartidos (hub, digital, experimental).
 * Mismo sistema que la landing de Mentorías (fotoseptiembre-deploy):
 * crema / negro, Big Shoulders + Archivo + IBM Plex Mono + Playfair.
 * Acento: dorado (hub y experimental) · azul (digital), desde el 7 oct 2026. */
:root{
  --bg:#FFFDF4; --ink:#0A0A0A; --mute:#5E5C54; --line:#D9D4C4; --line-2:#B4AE9B;
  --dk-mute:#A9A69B; --dk-line:#2A2924;
  --acc:#AB8A26;      /* decorativo, cifras grandes */
  --acc-t:#7A6119;    /* texto chico sobre crema (AA) */
  --acc-d:#C9A43A;    /* sobre negro */
  --f-d:'Big Shoulders Display',Impact,sans-serif;
  --f-b:Archivo,system-ui,sans-serif;
  --f-m:'IBM Plex Mono',ui-monospace,monospace;
  --f-s:'Playfair Display',Georgia,serif;
  --pad:clamp(20px,4vw,56px);
}
/* 7 oct (Ajustes generales): los acentos se intercambian: digital en azul, experimental en dorado. */
.t-digital{ --acc:#1E4B73; --acc-t:#1E4B73; --acc-d:#8FB6DA; }

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-b);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink)}
a:hover{color:var(--acc-t)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
::selection{background:var(--ink);color:var(--bg)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
h1,h2,h3,p,ul,ol,figure{margin:0}

.wrap{max-width:1320px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,8vw,120px)}
.sec + .sec{padding-top:0}

/* Tipografia */
.mono{font-family:var(--f-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.mono b{color:var(--ink);font-weight:500}
.disp{font-family:var(--f-d);font-weight:800;text-transform:uppercase;letter-spacing:-.008em;line-height:.9}
.h2{font-family:var(--f-d);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.008em;font-size:clamp(42px,6vw,92px);text-wrap:balance}
.serif{font-family:var(--f-s);font-style:italic;font-weight:400;letter-spacing:-.01em}
.acc{color:var(--acc-t)}
.lead{color:var(--mute);font-size:clamp(16px,1.35vw,18px);line-height:1.62;text-wrap:pretty;max-width:56ch}
.prose{display:flex;flex-direction:column;gap:16px;color:var(--mute);font-size:clamp(16px,1.3vw,17.5px);line-height:1.64}
.prose p{max-width:56ch;text-wrap:pretty}
.prose b{color:var(--ink);font-weight:600}

/* Skip link */
.skip{position:fixed;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;font-family:var(--f-d);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:15px;text-decoration:none}
.skip:focus{top:12px;color:var(--bg)}

/* Nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,253,244,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{padding-top:12px;padding-bottom:12px;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:16px}
.nav-logo img{width:clamp(180px,24vw,300px);height:auto}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.nav-links a{font-family:var(--f-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:820px){ .nav-links a:not(.btn){display:none} }

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-d);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:21px;line-height:1.1;padding:15px 28px;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:var(--bg);transition:background .15s,color .15s,border-color .15s;text-align:center}
.btn:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);font-size:18px;padding:13px 22px}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{font-size:15px;padding:8px 14px;background:transparent;color:var(--ink)}
.btn-sm:hover{background:var(--ink);color:var(--bg)}
/* 15 oct (Ajustes Finales §10): el botón de la barra va negro con letras blancas */
.nav-links .btn-sm{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.nav-links .btn-sm:hover{background:transparent;color:var(--ink)}
/* Reseñas de Virgilio y Aurora */
.autor{align-items:center}
.autor figure{margin:0;max-width:420px}
.autor figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.autor .h2{margin:6px 0 18px}
.dark .btn{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.dark .btn:hover{background:transparent;color:var(--bg)}
.dark .btn-ghost{background:transparent;color:var(--bg);border-color:#5E5C54}
.dark .btn-ghost:hover{border-color:var(--bg)}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Hero */
.hero{padding-top:clamp(28px,4vw,56px)}
.hero-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;padding-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--ink)}
.hero-top .mono{font-size:clamp(10px,1vw,12px)}
.hero-kicker{display:block;margin-top:clamp(28px,4vw,48px)}
.hero h1{font-family:var(--f-d);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.012em;margin:14px 0 0 -0.03em;font-size:clamp(52px,10.4vw,160px);text-wrap:balance}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(24px,3.6vw,48px);padding-bottom:clamp(30px,4vw,56px)}
.hero-sub{font-family:var(--f-s);font-style:italic;font-size:clamp(28px,3.6vw,52px);line-height:1.06;max-width:18ch;letter-spacing:-.01em}
.hero-side{display:flex;flex-direction:column;gap:20px;max-width:52ch}
.facts{font-family:var(--f-m);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;line-height:1.8}
.facts span{white-space:nowrap}
.note{font-family:var(--f-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* Tira de fotos */
.tira{background:var(--ink);padding:0 0 12px}
.perfo{height:14px;background-image:repeating-linear-gradient(90deg,transparent 0 10px,var(--bg) 10px 20px);opacity:.9}
.tira-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;padding:12px 8px 0}
.tira-grid img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* 15 oct (cliente): las fotos de Fotografía digital van a color, para separarse de PhotoWalk */
.tira figcaption{font-family:var(--f-m);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dk-mute);padding:10px 2px 6px}
.tira .perfo:last-child{margin-top:4px}

/* Cabecera de seccion */
.sh{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.sh img{width:14px;height:14px;opacity:.6;flex:none}
.sh .rule{flex:1;height:1px;background:var(--line)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,4vw,72px);align-items:start}

/* Ledger (celdas con lineas) */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;background:var(--line);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ledger > *{background:var(--bg);padding:clamp(22px,2.6vw,34px) clamp(18px,2vw,28px)}
.ledger .k{display:block;font-family:var(--f-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc-t);margin-bottom:16px}
/* 7 oct (Ajustes generales): sin partir palabras; el tamaño baja para que «independiente» y «programación» quepan enteras */
.ledger .v{display:block;font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:clamp(28px,2.25vw,40px);line-height:.95;letter-spacing:-.005em;overflow-wrap:normal;word-break:normal;hyphens:manual;-webkit-hyphens:manual}
.ledger p{margin-top:14px;font-size:15.5px;color:var(--mute);max-width:32ch;text-wrap:pretty}
.ledger .sub{display:block;margin-top:12px;font-family:var(--f-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);line-height:1.7}

/* Lista de lineas */
.lines{list-style:none;padding:0;border-top:1px solid var(--line)}
.lines li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.dark .lines{border-top-color:var(--dk-line)}
.dark .lines li{border-bottom-color:var(--dk-line);color:var(--bg)}
.dash li{padding-left:20px;position:relative}
.dash li::before{content:"";position:absolute;left:0;top:1.3em;width:10px;height:1px;background:var(--acc)}
.dark .dash li::before{background:var(--acc-d)}

/* Programa (cursos / talleres) */
.prog{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1px;background:var(--line);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.prog > li{background:var(--bg);padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:10px;position:relative}
.prog .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.prog .n{font-family:var(--f-d);font-weight:800;font-size:clamp(40px,4vw,56px);line-height:.85;color:var(--acc)}
.prog .m{font-family:var(--f-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.prog h3{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:clamp(25px,2.4vw,32px);line-height:.98;letter-spacing:-.005em;text-wrap:balance}
.prog .tag{font-family:var(--f-s);font-style:italic;font-size:18px;line-height:1.2;color:var(--acc-t)}
.prog p{font-size:15.5px;color:var(--mute);line-height:1.55;text-wrap:pretty}
.prog .foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line)}
.prog .price{font-family:var(--f-d);font-weight:800;font-size:28px;line-height:1}
.prog .price small{font-family:var(--f-m);font-size:11px;letter-spacing:.18em;font-weight:400;color:var(--mute);margin-left:4px}
.prog .ask{font-family:var(--f-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding:8px 0 2px}
.prog .ask:hover{border-bottom-color:var(--ink)}
.prog .now{display:none;position:absolute;top:0;left:0;right:0;height:4px;background:var(--acc)}
.prog .now-l{display:none;font-family:var(--f-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:var(--bg);padding:3px 8px}
.prog li.is-now .now,.prog li.is-now .now-l{display:block}
.prog li.is-now{background:#F6F1E2}
.t-exp .prog li.is-now{background:#EEF2F4}
.sublist{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--f-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}

/* Bloques negros */
.dark{background:var(--ink);color:var(--bg)}
.dark .mono{color:var(--dk-mute)}
.dark .lead,.dark .prose{color:var(--dk-mute)}
.dark .prose b{color:var(--bg)}
.dark .acc{color:var(--acc-d)}
.big{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:clamp(46px,7vw,108px);line-height:.88;letter-spacing:-.01em;text-wrap:balance}

/* FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom-color:var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr 28px;gap:0 14px;align-items:baseline;padding:18px 0;font-size:clamp(17px,1.5vw,19px);font-weight:500;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q-n{font-family:var(--f-m);font-size:11px;letter-spacing:.2em;color:var(--acc-t)}
.faq summary .q-i{justify-self:end;font-family:var(--f-m);font-size:20px;line-height:1;transition:transform .2s}
.faq details[open] summary .q-i{transform:rotate(45deg)}
.faq summary:hover{color:var(--acc-t)}
.faq .a{padding:0 42px 22px 58px;color:var(--mute);font-size:16px;line-height:1.66;max-width:78ch}
@media(max-width:560px){ .faq summary{grid-template-columns:34px 1fr 22px;gap:0 10px} .faq .a{padding:0 0 20px 44px} }

/* Proximo curso / taller */
.next{border:1px solid var(--ink);padding:clamp(24px,3.6vw,52px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,4vw,56px);align-items:end;background:var(--bg)}
.next-t{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:clamp(42px,6.2vw,96px);line-height:.88;letter-spacing:-.01em;text-wrap:balance;margin-top:14px}
.next-n{color:var(--acc)}
.next-m{display:block;margin-top:14px;font-family:var(--f-m);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc-t)}

/* Cruce entre paginas */
.cross{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(20px,3vw,48px);align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:clamp(28px,3.6vw,48px) 0}
.cross figure img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* Hub: tarjetas */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2vw,28px)}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border-top:1px solid var(--ink);padding-top:16px}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:18px;transition:filter .2s}
.card .mono{display:block;margin-bottom:10px}
.card h2{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:clamp(34px,3.4vw,50px);line-height:.92;letter-spacing:-.008em}
.card p{margin-top:12px;color:var(--mute);font-size:16px;line-height:1.55;max-width:40ch}
.card .go{margin-top:18px;font-family:var(--f-d);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:18px;display:inline-flex;gap:8px;align-items:center;border-bottom:2px solid var(--acc);align-self:flex-start;padding-bottom:2px}
.card:hover{color:var(--ink)}
.card:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.card .bw{filter:grayscale(1) contrast(1.05)}

/* Donde estamos */
.ubica{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,4vw,56px);align-items:start}
.ubica figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ubica figcaption{font-family:var(--f-m);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);padding-top:10px}
.ubica address{font-style:normal;font-size:clamp(17px,1.5vw,20px);line-height:1.5}
.ubica dl{margin:22px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;border-top:1px solid var(--line);padding-top:18px;font-size:16px}
.ubica dt{font-family:var(--f-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding-top:4px}
.ubica dd{margin:0}
.mapa{margin-top:clamp(24px,3vw,40px);border:1px solid var(--ink);background:#EDE9DC}
.mapa iframe{display:block;width:100%;height:clamp(280px,36vw,420px);border:0}
.link-u{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.link-u:hover{border-bottom-color:var(--ink);color:var(--ink)}

/* Footer */
.footer{border-top:1px solid var(--line);color:var(--mute);font-size:14.5px}
.footer .wrap{padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px 48px;align-items:start}
.footer a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line-2)}
.footer a:hover{color:var(--ink)}
.footer .logo{height:26px;width:auto}
.footer .mono{line-height:2}
.footer nav ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}

/* Boton flotante de WhatsApp */
#wa-flotante{position:fixed;right:clamp(14px,3vw,26px);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:55;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;border-radius:50%;box-shadow:0 6px 20px rgba(10,10,10,.28);transition:transform .18s ease,box-shadow .18s ease}
#wa-flotante:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,10,10,.34);color:#fff}
#wa-flotante:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:620px){ #wa-flotante{width:52px;height:52px} }
[hidden]{display:none!important}
.faq .a a{color:var(--ink)}
@media(max-width:560px){ .sh .rule ~ .mono{display:none} }
.prog-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.card p.mono{font-size:11px;line-height:1.8;color:var(--ink)}