/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* marca (de las tarjetas de Yomi) */
  --navy:#001428; --petrol:#0A1E33;
  --copper:#B98C62; --champ-rose:#D6AB95; --champ-light:#CDA173; --champ-matte:#C8A96E;
  --ivory:#F3F0EB;

  /* TEMA CLARO (por defecto) */
  --bg:#F3F0EB; --bg-2:#EAE4D8;
  --text:#0B1C30; --text-dim:rgba(11,28,48,.62);
  --gold-a:#B98C62; --gold-b:#D6AB95;        /* extremos del degradado satinado */
  --gold-solid:#A9784B;                       /* dorado sólido legible en marfil */
  --line:rgba(169,120,75,.30);
  --frame:rgba(169,120,75,.6);
  --map-line:rgba(11,28,48,.14); --map-dot:rgba(169,120,75,.5);
  --card:rgba(11,28,48,.025);
  --map-opacity:.6;

  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Inter",system-ui,sans-serif;
  --maxw:1160px; --gutter:clamp(1.25rem,5vw,4rem); --radius:2px;
}
[data-theme="dark"]{
  --bg:var(--navy); --bg-2:var(--petrol);
  --text:var(--ivory); --text-dim:rgba(243,240,235,.6);
  --gold-a:#B98C62; --gold-b:#D6AB95;
  --gold-solid:#CDA173;
  --line:rgba(185,140,98,.26);
  --frame:rgba(185,140,98,.5);
  --map-line:rgba(185,140,98,.28); --map-dot:rgba(200,169,110,.5);
  --card:rgba(255,255,255,.03);
  --map-opacity:.85;
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--body); font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background .4s ease,color .4s ease; overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.01em;}
a{color:inherit;text-decoration:none;}

.eyebrow{font-family:var(--body);font-size:.72rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-solid);}

/* Tipografía dorada satinada (replica el "GUANXI" de la tarjeta) */
.gold{
  background:linear-gradient(115deg,var(--gold-a) 0%,var(--gold-b) 42%,var(--gold-a) 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gold{color:var(--gold-solid);} /* fallback */
}

.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--body);font-size:.86rem;font-weight:500;letter-spacing:.02em;
  padding:.85em 1.6em;border-radius:var(--radius);border:1px solid var(--gold-solid);
  transition:background .25s,color .25s,border-color .25s;cursor:pointer;
}
.btn--solid{background:var(--gold-solid);color:var(--bg);}
.btn--solid:hover{background:transparent;color:var(--gold-solid);}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--gold-solid);color:var(--gold-solid);}

/* ============================================================
   3. NAV
   ============================================================ */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 84%,transparent);border-bottom:1px solid var(--line);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:72px;}
.brand{font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:.16em;white-space:nowrap;}
.nav__links{display:flex;align-items:center;gap:2.1rem;}
.nav__links a{font-size:.82rem;letter-spacing:.04em;color:var(--text-dim);transition:color .2s;}
.nav__links a:hover{color:var(--text);}
.nav__actions{display:flex;align-items:center;gap:1rem;}
.toggle{background:none;border:1px solid var(--line);color:var(--text);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s;}
.toggle:hover{border-color:var(--gold-solid);color:var(--gold-solid);}
[data-theme="dark"] .toggle .sun{display:none;}
[data-theme="light"] .toggle .moon{display:none;}
.burger{display:none;background:none;border:0;color:var(--text);cursor:pointer;}

/* ============================================================
   4. HERO — enmarcado, mapa detrás, tesis centrada (estilo tarjeta)
   ============================================================ */
.hero{position:relative;overflow:hidden;}
.hero__map{position:absolute;inset:0;z-index:0;opacity:var(--map-opacity);pointer-events:none;}
.hero__map .worldmap{width:100%;height:100%;}
.worldmap .wm-lines{fill:none;stroke:var(--map-line);stroke-width:1;}
.worldmap .wm-dots{fill:var(--map-dot);}
.worldmap .wm-hi{fill:var(--gold-b);fill-opacity:.16;stroke:var(--gold-solid);stroke-width:1.2;}

.hero__inner{position:relative;z-index:2;max-width:820px;margin-inline:auto;text-align:center;
  padding-block:clamp(4.5rem,13vw,9rem);padding-inline:var(--gutter);}
.hero__eyebrow{margin-bottom:1.8rem;}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.6rem);margin-bottom:1.6rem;}
.hero h1 .gold{font-style:italic;}
.hero__lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--text-dim);max-width:46ch;margin:0 auto 2.4rem;}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.hero__for{margin-top:2rem;font-size:.82rem;letter-spacing:.03em;color:var(--text-dim);}
.hero__for b{color:var(--gold-solid);font-weight:500;}

/* Marco de esquinas (como la tarjeta) */
.frame{position:absolute;inset:clamp(14px,2.2vw,26px);z-index:1;pointer-events:none;}
.frame::before{content:"";position:absolute;inset:0;border:1px solid var(--frame);opacity:.28;}
.frame i{position:absolute;width:44px;height:44px;border:1.5px solid var(--frame);}
.frame i.tl{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.frame i.tr{top:-1px;right:-1px;border-left:0;border-bottom:0;}
.frame i.bl{bottom:-1px;left:-1px;border-right:0;border-top:0;}
.frame i.br{bottom:-1px;right:-1px;border-left:0;border-top:0;}

/* ============================================================
   5. SECCIONES GENÉRICAS
   ============================================================ */
.section{padding-block:clamp(3.5rem,8vw,6.5rem);}
.section--alt{background:var(--bg-2);}
.section__head{margin-bottom:3rem;max-width:54ch;}
.section__head h2{font-size:clamp(1.9rem,4vw,3rem);margin-top:1rem;}
hr.rule{height:1px;background:var(--line);border:0;}

/* ---- Problema / para quién es ---- */
.problem__inner{max-width:58ch;}
.problem h2{font-size:clamp(1.9rem,4vw,3rem);margin-block:1.2rem 1.4rem;}
.problem p{color:var(--text-dim);font-size:1.1rem;margin-bottom:1.4rem;}
.forwho{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:1rem;}
.forwho div{flex:1 1 220px;}
.forwho h3{font-size:1.15rem;font-family:var(--body);font-weight:600;margin-bottom:.5rem;letter-spacing:.02em;}
.forwho ._is{color:var(--gold-solid);}
.forwho p{font-size:.98rem;margin:0;}

/* ---- Sobre mí ---- */
.about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.portrait{position:relative;aspect-ratio:4/5;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;}
.portrait img{width:100%;height:100%;object-fit:cover;}
.portrait__ph{text-align:center;color:var(--text-dim);font-size:.8rem;padding:2rem;}
.portrait__ph span{font-family:var(--display);font-size:2rem;display:block;margin-bottom:.5rem;}
.about__body h2{font-size:clamp(1.9rem,4vw,3rem);margin-block:1rem 1.5rem;}
.about__body p{color:var(--text-dim);margin-bottom:1.2rem;max-width:54ch;}
.facts{list-style:none;display:grid;gap:.9rem;margin-top:2rem;}
.facts li{display:flex;gap:.9rem;align-items:baseline;font-size:.96rem;}
.facts .k{font-family:var(--display);font-size:1.15rem;min-width:1.6ch;}

/* ---- Temas (5 bloques) ---- */
.block{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,4vw,3rem);align-items:baseline;padding-block:2rem;border-top:1px solid var(--line);}
.block:last-child{border-bottom:1px solid var(--line);}
.block__num{font-family:var(--display);font-size:1.6rem;min-width:2.5ch;}
.block__body h3{font-size:1.5rem;margin-bottom:.6rem;}
.block__topics{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;color:var(--text-dim);font-size:.92rem;}
.block__topics li{position:relative;}
.block__topics li:not(:last-child)::after{content:"·";position:absolute;right:-.85rem;color:var(--gold-solid);}
.block__hanzi{font-family:var(--display);font-size:2.4rem;opacity:.85;white-space:nowrap;}

/* ---- Blog ---- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;transition:border-color .25s,transform .25s;}
.post:hover{border-color:var(--gold-solid);transform:translateY(-3px);}
.post__cat{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-solid);}
.post h3{font-size:1.35rem;margin-block:.8rem .6rem;}
.post p{color:var(--text-dim);font-size:.92rem;}
.post__more{display:inline-block;margin-top:1.2rem;font-size:.82rem;color:var(--gold-solid);}

/* ---- Servicios ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.tier{border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem 1.8rem;display:flex;flex-direction:column;transition:border-color .25s;}
.tier:hover{border-color:var(--gold-solid);}
.tier__step{font-family:var(--display);font-size:1.1rem;}
.tier h3{font-size:1.6rem;margin-block:.6rem 1rem;}
.tier p{color:var(--text-dim);font-size:.95rem;flex-grow:1;}
.tier__cta{margin-top:1.6rem;font-size:.84rem;color:var(--gold-solid);}

/* ---- Lead magnet ---- */
.magnet{text-align:center;}
.magnet .wrap{max-width:640px;}
.magnet h2{font-size:clamp(1.8rem,4vw,2.7rem);margin-block:1rem;}
.magnet p{color:var(--text-dim);margin-bottom:2rem;}
.magnet__form{display:flex;gap:.6rem;max-width:460px;margin-inline:auto;flex-wrap:wrap;}
.magnet__form input{flex:1 1 220px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.9em 1.1em;color:var(--text);font-family:var(--body);font-size:.9rem;}
.magnet__form input:focus{outline:none;border-color:var(--gold-solid);}

/* ---- Contacto ---- */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;max-width:900px;margin-inline:auto;}
.contact__grid h2{font-size:clamp(2rem,5vw,3.4rem);margin-block:1rem 1.3rem;}
.contact__grid p{color:var(--text-dim);margin-bottom:2rem;max-width:44ch;}
.contact__links{display:grid;gap:1rem;}
.contact__links a{display:flex;align-items:center;gap:.8rem;color:var(--text-dim);transition:color .2s;}
.contact__links a:hover{color:var(--gold-solid);}
.contact__links .ic{color:var(--gold-solid);flex:none;}

/* ---- Footer ---- */
footer{border-top:1px solid var(--line);padding-block:2.5rem;}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;text-align:center;}
.footer__brand{font-family:var(--display);letter-spacing:.16em;}
.footer__socials{display:flex;gap:1.2rem;}
.footer__socials a{color:var(--gold-solid);transition:opacity .2s;}
.footer__socials a:hover{opacity:.6;}
.footer__copy{font-size:.78rem;color:var(--text-dim);}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .nav__links{position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:1rem var(--gutter);transform:translateY(-120%);transition:transform .35s;}
  .nav__links[data-open="true"]{transform:translateY(0);}
  .nav__links a{padding:.9rem 0;width:100%;border-bottom:1px solid var(--line);}
  .burger{display:block;}
  .about__grid,.contact__grid{grid-template-columns:1fr;}
  .posts,.tiers{grid-template-columns:1fr;}
  .block{grid-template-columns:auto 1fr;}
  .block__hanzi{display:none;}
  .footer__inner{flex-direction:column;align-items:center;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto;}}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.hero__eyebrow,.hero h1,.hero__lead,.hero__cta,.hero__for{animation:rise .7s ease both;}
.hero h1{animation-delay:.08s;} .hero__lead{animation-delay:.16s;} .hero__cta{animation-delay:.24s;} .hero__for{animation-delay:.32s;}