/* =========================================================
   White Magnolia · Sistema de diseno compartido
   Marca 2021 (ARGONAUTA) llevada a web.
   Paleta: Blanco / Negro / Rosa Magnolia #FF8F9E (acento unico).
   Tipografia: Bodoni Moda (display), Archivo (texto), IBM Plex Mono (datos).
   Ley del movimiento: la piedra se mueve, la pagina no.
   ========================================================= */

:root{
  --white:#FFFFFF;
  --paper:#FBF9F7;
  --paper-2:#F4F0EC;
  --ink:#0E0D0C;
  --ink-soft:#5A5551;
  --ink-faint:#8A837D;
  --line:#E7E1DB;
  --line-2:#DBD3CB;
  --magnolia:#FF8F9E;
  --magnolia-deep:#E76B7C;
  --magnolia-soft:#FFEBED;
  --gold:#B08D57;
  --shadow:0 30px 70px -34px rgba(14,13,12,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--magnolia-soft);color:var(--ink)}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:840px;margin:0 auto;padding:0 32px}

/* ---------- tipografia ---------- */
.mono{font-family:'IBM Plex Mono',monospace;font-weight:400}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);
}
.display{font-family:'Bodoni Moda',serif;font-weight:500;line-height:1.04;letter-spacing:-.01em}
.serif{font-family:'Bodoni Moda',serif}
em.it{font-style:italic;font-weight:400}
.mg{color:inherit}

h1,h2,h3{font-family:'Bodoni Moda',serif;font-weight:500;letter-spacing:-.012em;line-height:1.05}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(251,249,247,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-family:'Bodoni Moda',serif;font-weight:500;font-size:1.2rem;letter-spacing:.01em;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center}
.brand span{color:var(--magnolia)}
.brand img{height:22px;width:auto;display:block}
.nav-appt{display:none}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{
  font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.05em;
  color:var(--ink-soft);text-decoration:none;transition:color .25s var(--ease);
}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink)}
.navlinks a[aria-current="page"]{border-bottom:1px solid var(--magnolia);padding-bottom:3px}
.nav-cta{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.06em;
  background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:2px;
  text-decoration:none;transition:background .25s var(--ease),transform .25s var(--ease);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.nav-cta:hover{background:#000;transform:translateY(-1px)}
.nav-cta .dot{width:6px;height:6px;border-radius:50%;background:var(--magnolia)}
.navtoggle{display:none;background:none;border:0;font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.1em;color:var(--ink);cursor:pointer}

/* ---------- botones ---------- */
.cta{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'IBM Plex Mono',monospace;font-size:.82rem;letter-spacing:.08em;
  background:var(--ink);color:var(--paper);padding:16px 30px;border-radius:2px;
  text-decoration:none;transition:background .3s var(--ease),transform .3s var(--ease);
}
.cta:hover{background:#000;transform:translateY(-2px)}
.cta .dot{width:7px;height:7px;border-radius:50%;background:var(--magnolia)}
.cta-ghost{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.08em;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);
  padding-bottom:3px;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.cta-ghost:hover{border-color:var(--magnolia);color:var(--magnolia-deep)}
.cta-ghost .arrow{transition:transform .3s var(--ease)}
.cta-ghost:hover .arrow{transform:translateX(4px)}

/* ---------- seccion base ---------- */
section{position:relative}
.pad{padding:96px 0}
.pad-sm{padding:64px 0}
.center{text-align:center}
.lede{font-size:1.08rem;color:var(--ink-soft);font-weight:300}

/* ---------- pieza en movimiento: la piedra se mueve ---------- */
.stone{
  position:relative;overflow:hidden;border-radius:2px;background:#111;
  box-shadow:var(--shadow);
}
.stone img{width:100%;height:100%;object-fit:cover}
.stone .sheen{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 47%,rgba(255,143,158,.26) 50%,transparent 66%);
  transform:translateX(-120%);
  animation:sheen 6.8s ease-in-out infinite;
}
.stone .frame{position:absolute;inset:0;border:1px solid rgba(255,255,255,.14);pointer-events:none}
@keyframes sheen{0%{transform:translateX(-120%)}55%{transform:translateX(120%)}100%{transform:translateX(120%)}}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}

/* ---------- tiles de categoria ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{
  position:relative;display:block;text-decoration:none;color:var(--ink);
  border-radius:2px;overflow:hidden;background:var(--paper-2);
}
.tile figure{position:relative;aspect-ratio:4/5;overflow:hidden;margin:0}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(transparent,rgba(10,9,8,.72))}
.tile .cap h3{color:#fff;font-size:1.5rem}
.tile .cap .k{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:6px;display:inline-flex;align-items:center;gap:8px}
.tile .cap .arrow{transition:transform .3s var(--ease)}
.tile:hover .cap .arrow{transform:translateX(4px)}

/* ---------- bloque imagen + texto ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.flip .media{order:2}
.media figure{position:relative;overflow:hidden;border-radius:2px;background:#eee;aspect-ratio:4/3;margin:0}
.media.tall figure{aspect-ratio:3/4}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.media figure:hover img{transform:scale(1.03)}
.media .tag{
  position:absolute;top:14px;left:14px;
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(251,249,247,.92);color:var(--ink);padding:6px 10px;border-radius:2px;
}
.media .real{
  position:absolute;bottom:14px;right:14px;
  font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.1em;
  color:rgba(255,255,255,.85);background:rgba(10,9,8,.55);padding:5px 9px;border-radius:2px;
}
.split h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:18px}
.split h2 em{font-style:italic;font-weight:400}
.split p{color:var(--ink-soft);max-width:44ch;margin-bottom:22px}

/* ---------- banda de 4 preguntas ---------- */
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.qcard{
  padding:38px 26px 34px;border-right:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:background .3s var(--ease);position:relative;
}
.qcard:last-child{border-right:0}
.qcard:hover{background:var(--white)}
.qcard .n{font-family:'Bodoni Moda',serif;font-style:italic;font-size:1.1rem;color:var(--ink-faint)}
.qcard h3{font-size:1.32rem;margin:12px 0 10px;line-height:1.15}
.qcard p{font-size:.92rem;color:var(--ink-soft)}
.qcard .arrow{margin-top:16px;display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint);transition:transform .3s var(--ease),color .3s var(--ease)}
.qcard:hover .arrow{transform:translateX(4px);color:var(--magnolia-deep)}

/* ---------- banda de certeza ---------- */
.trust{background:var(--ink);color:var(--paper)}
.trust .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.trust .item .k{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--magnolia)}
.trust .item h3{color:var(--paper);font-size:1.4rem;margin:10px 0 8px}
.trust .item p{color:rgba(251,249,247,.66);font-size:.95rem}

/* ---------- GEO / FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:26px 0}
.faq-item h3{font-size:1.18rem;margin-bottom:10px;font-weight:500}
.faq-item p{color:var(--ink-soft);max-width:70ch}

/* ---------- CTA final ---------- */
.finale{text-align:center}
.finale h2{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.08}
.finale h2 em{font-style:italic;font-weight:400}
.finale p{margin-top:20px;color:var(--ink-soft);font-size:1.06rem}
.finale .ways{margin-top:36px;display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
.finale .noform{margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--ink-faint)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:0}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-brand .brand{font-size:1.3rem}
.foot-brand .brand img{height:34px}
.foot-brand p{margin-top:14px;color:var(--ink-soft);font-size:.92rem;max-width:34ch}
.foot-col h4{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px;font-weight:400}
.foot-col a{display:block;color:var(--ink-soft);text-decoration:none;font-size:.94rem;margin-bottom:9px;transition:color .25s var(--ease)}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px}
.foot-bottom p{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.06em;color:var(--ink-faint)}

/* ---------- responsive ---------- */
/* nav: colapsa a menú antes, para que el logotipo no se encime con el CTA */
@media(max-width:1024px){
  .navlinks{display:none}
  .navtoggle{display:inline-block}
  .nav-cta{display:none}
  .nav .wrap{position:relative}
  .navlinks.open{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:70px;left:0;right:0;
    background:rgba(251,249,247,.98);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    padding:6px 32px 20px;box-shadow:var(--shadow);
  }
  .navlinks.open a{
    font-size:.9rem;letter-spacing:.05em;
    padding:14px 0;border-bottom:1px solid var(--line);
  }
  .navlinks.open a:last-child{border-bottom:0}
  .navlinks.open .nav-appt{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    margin-top:14px;padding:14px 18px;border-bottom:0;
    background:var(--ink);color:var(--paper);border-radius:2px;
  }
  .navlinks.open .nav-appt .dot{width:6px;height:6px;border-radius:50%;background:var(--magnolia)}
}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:30px}
  .split.flip .media{order:0}
  .tiles{grid-template-columns:1fr;gap:16px}
  .tile figure{aspect-ratio:16/10}
  .quad{grid-template-columns:1fr 1fr}
  .qcard:nth-child(2){border-right:0}
  .qcard{border-bottom:1px solid var(--line)}
  .trust .wrap{grid-template-columns:1fr;gap:26px}
  .foot-top{grid-template-columns:1fr;gap:28px}
  .pad{padding:66px 0}
}
@media(max-width:520px){
  .wrap,.wrap-narrow{padding:0 22px}
  .quad{grid-template-columns:1fr}
  .qcard{border-right:0}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .stone .sheen{animation:none;opacity:.28;transform:none}
  .reveal{opacity:1;transform:none;transition:none}
  .tile img,.media img{transition:none}
}

/* ---------- articulo del diario ---------- */
.article{max-width:720px;margin:0 auto}
.article .lede{color:var(--ink);font-size:1.12rem;margin-bottom:26px}
.article h2{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:38px 0 14px;line-height:1.18;letter-spacing:-.01em}
.article h3{font-family:'Archivo',sans-serif;font-weight:600;font-size:1.12rem;margin:26px 0 8px;color:var(--ink)}
.article p{color:var(--ink-soft);margin-bottom:18px;font-size:1.02rem}
.article ul{color:var(--ink-soft);margin:0 0 20px 1.15em}
.article li{margin-bottom:9px}
.article li strong{color:var(--ink);font-weight:600}
.postmeta{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase}
.backlink{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.06em;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.backlink:hover{color:var(--magnolia-deep);border-color:var(--magnolia)}
.postcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--white);text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),border-color .3s var(--ease)}
.postcard:hover{transform:translateY(-3px);border-color:var(--line-2)}
.postcard figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.postcard figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.postcard:hover figure img{transform:scale(1.04)}
.postcard .body{padding:26px;display:flex;flex-direction:column;flex:1}
.article-hero{margin:0 0 32px;text-align:center}
.article-hero img{max-width:100%;max-height:540px;width:auto;border-radius:3px;display:inline-block}
.foot-social{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.04em;color:var(--ink-faint)}
.foot-social a{color:var(--ink-soft);text-decoration:none;transition:color .25s var(--ease)}
.foot-social a:hover{color:var(--ink)}
.postcard h3{font-size:1.3rem;margin:12px 0 10px;line-height:1.2}
.postcard p{color:var(--ink-soft);font-size:.95rem;margin-bottom:16px;flex:1}
.postcard .cat{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.postcard .date{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;color:var(--ink-faint)}
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{display:grid;grid-template-columns:1.05fr 1fr;gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--white);text-decoration:none;color:var(--ink);transition:border-color .3s var(--ease)}
.feature:hover{border-color:var(--line-2)}
.feature figure{margin:0;overflow:hidden;background:var(--paper-2);min-height:340px}
.feature figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.feature:hover figure img{transform:scale(1.03)}
.feature .body{padding:44px;display:flex;flex-direction:column;justify-content:center}
.feature .cat{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.feature h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.14;margin-bottom:14px}
.feature .body p{color:var(--ink-soft);margin-bottom:20px}
.feature .more{font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.06em;color:var(--ink)}
.feature .date{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;color:var(--ink-faint);margin-top:14px}
@media(max-width:760px){.feature{grid-template-columns:1fr}.feature figure{aspect-ratio:16/10;min-height:0}.feature .body{padding:30px}}
@media(max-width:900px){.postgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.postgrid{grid-template-columns:1fr}}

/* ---------- aviso de cookies ---------- */
.cookie-bar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  max-width:760px;margin:0 auto;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
  background:var(--ink);color:var(--paper);
  border-radius:4px;padding:16px 20px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(14px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.cookie-bar.show{opacity:1;transform:none}
.cookie-bar p{margin:0;font-size:.86rem;color:rgba(251,249,247,.82);max-width:52ch}
.cookie-bar a{color:var(--magnolia);text-decoration:underline}
.cookie-ok{
  flex:none;cursor:pointer;border:0;
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.06em;
  background:var(--paper);color:var(--ink);padding:11px 22px;border-radius:2px;
  transition:transform .25s var(--ease);
}
.cookie-ok:hover{transform:translateY(-1px)}
@media(max-width:520px){.cookie-bar{flex-direction:column;gap:12px;text-align:center}}
@media(prefers-reduced-motion:reduce){.cookie-bar{transition:none}}

/* ---------- galeria masonry ---------- */
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:30px}
.mosaic{column-count:4;column-gap:14px}
.mosaic a{display:block;margin-bottom:14px;break-inside:avoid;position:relative;overflow:hidden;border-radius:2px;background:#eee}
.mosaic img{width:100%;display:block;transition:transform 1.3s var(--ease)}
.mosaic a:hover img{transform:scale(1.05)}
.mosaic .cap2{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(10,9,8,.55));font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.9);opacity:0;transition:opacity .3s var(--ease)}
.mosaic a:hover .cap2{opacity:1}
@media(max-width:900px){.mosaic{column-count:3}}
@media(max-width:520px){.mosaic{column-count:2}}
@media(prefers-reduced-motion:reduce){.mosaic img{transition:none}}