/* ==========================================================================
   EN PLANO — Sistema de diseño editorial · estética "Vogue" (fondo blanco)
   Display: Bodoni Moda (Didone alto contraste) · Texto: Jost (grotesca geométrica)
   ========================================================================== */

:root{
  --bg:#ffffff;
  --ink:#0c0c0c;
  --ink-2:#3a3a3a;
  --ink-3:#7a7a7a;
  --line:#0c0c0c;
  --hair:#e3e3e3;
  --paper:#f6f4f0;          /* gris cálido muy tenue para bloques */
  --accent:#8e1d1d;         /* rojo editorial, usado con MUCHA mesura */
  --font-display:'Bodoni Moda',Didot,'Times New Roman',serif;
  --font-body:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:1240px;
  --gut:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  font-size:17px;
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s,opacity .2s}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}

/* ---------------------------------------------------------- MASTHEAD (estudio/agencia) */
.masthead{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:40}
.mast-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px var(--gut)}
.brand{font-family:var(--font-display);font-weight:700;font-size:clamp(1.05rem,2.4vw,1.4rem);letter-spacing:.05em;line-height:1;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:baseline}
.brand .x{font-weight:800}
.brand .dot{color:var(--accent)}
.brand small{font-family:var(--font-body);font-weight:400;font-size:.65rem;letter-spacing:.22em;color:var(--ink-3);margin-left:.7em;text-transform:uppercase}
.mainnav{display:flex;margin-left:auto}
.mainnav ul{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:26px}
.mainnav a{font-size:.7rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding-bottom:3px;border-bottom:1px solid transparent}
.mainnav a:hover,.mainnav a[aria-current="page"]{border-color:var(--ink)}
.hamb{display:none;width:28px;height:18px;border:0;background:none;cursor:pointer;position:relative}
.hamb span,.hamb::before,.hamb::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink);transition:.3s}
.hamb::before{top:0}.hamb span{top:50%;transform:translateY(-50%)}.hamb::after{bottom:0}
#navtog{position:absolute;opacity:0;pointer-events:none}

/* ---------------------------------------------------------- breadcrumbs */
.crumbs{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:22px 0 0}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-current]{color:var(--ink)}

/* ---------------------------------------------------------- HERO editorial */
.hero{padding:48px 0 30px}
.kicker{font-size:.68rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:1.02;letter-spacing:-.01em;max-width:18ch}
.hero h1 em{font-style:italic}
.lede{font-size:clamp(1.05rem,1.9vw,1.32rem);line-height:1.6;max-width:60ch;margin-top:22px;color:var(--ink-2);font-weight:300}
.byline{margin-top:26px;display:flex;align-items:center;gap:13px;font-size:.78rem;color:var(--ink-3);letter-spacing:.02em}
.byline .av{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--paper);border:1px solid var(--hair);flex:0 0 auto}
.byline b{color:var(--ink);font-weight:400}
.byline a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* hero portrait imagery */
.hero-figure{margin:34px 0 0}
.hero-figure img{max-height:460px;object-fit:cover;width:100%}
figure{margin:0}
figure img{width:100%;height:auto;display:block;background:var(--paper)}
figcaption{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:9px}
.ratio-portrait{aspect-ratio:4/5;object-fit:cover}
.ratio-wide{aspect-ratio:16/9;object-fit:cover}
.ratio-square{aspect-ratio:1/1;object-fit:cover}

/* ---------------------------------------------------------- layout artículo */
.article{padding:40px 0 10px;display:grid;grid-template-columns:1fr;gap:40px}
.prose{max-width:68ch;font-size:1.06rem}
.prose h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.12;letter-spacing:-.01em;margin:52px 0 4px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--font-display);font-weight:600;font-size:1.28rem;margin:32px 0 2px}
.prose p{margin:15px 0;font-weight:300}
.prose a.inline{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:400}
.prose a.inline:hover{color:var(--accent)}
.prose ul,.prose ol{margin:15px 0 15px 1.1em}
.prose li{margin:8px 0;font-weight:300}
.prose strong{font-weight:500}
.prose em{font-style:italic}

.answer{border-left:2px solid var(--ink);padding:4px 0 4px 20px;margin:18px 0;font-size:1.08rem;color:var(--ink)}
.answer p{margin:0;font-weight:300}

.pull{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.25;text-align:center;color:var(--ink);max-width:24ch;margin:54px auto;padding:0 10px}

.note{font-size:.92rem;color:var(--ink-3);border-top:1px solid var(--hair);padding-top:14px;margin-top:30px}

/* TOC */
.toc{font-size:.82rem}
.toc .box{position:sticky;top:120px}
.toc h4{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.toc a{display:block;padding:8px 0;color:var(--ink-2);border-bottom:1px solid var(--hair)}
.toc a:last-child{border-bottom:0}
.toc a:hover{color:var(--ink);padding-left:5px}

/* ---------------------------------------------------------- HOME: secciones */
.section{padding:56px 0;border-top:1px solid var(--line)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:30px;flex-wrap:wrap}
.section-head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.01em}
.section-head .more{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px}
.section-head .more:hover{color:var(--accent);border-color:var(--accent)}

/* rejilla de categorías / artículos con imagen */
.grid-3{display:grid;grid-template-columns:1fr;gap:34px}
.grid-2{display:grid;grid-template-columns:1fr;gap:34px}
.tile{display:block}
.tile .imgwrap{overflow:hidden;background:var(--paper)}
.tile .imgwrap img{max-height:220px;object-fit:cover;width:100%}
.tile img{width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.04)}
.tile .cat{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:16px 0 6px}
.tile h3{font-family:var(--font-display);font-weight:500;font-size:1.5rem;line-height:1.12;letter-spacing:-.01em}
.tile p{font-size:.95rem;color:var(--ink-2);margin-top:8px;font-weight:300}

/* portada destacada (hero de home) */
.cover{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;padding:46px 0 10px}
.cover .ctext .kicker{margin-bottom:14px}
.cover h1{font-family:var(--font-display);font-weight:500;font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;letter-spacing:-.015em}
.cover h1 em{font-style:italic}
.cover .ctext p{font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--ink-2);margin-top:18px;max-width:46ch;font-weight:300}
.cover .ctext .more{display:inline-block;margin-top:24px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}
.cover .ctext .more:hover{color:var(--accent);border-color:var(--accent)}

/* franja de confianza */
.trust{background:var(--paper)}
.trust .wrap{padding:48px var(--gut)}
.trust .grid-3{gap:30px}
.trust .item h4{font-family:var(--font-display);font-weight:600;font-size:1.15rem;margin-bottom:6px}
.trust .item p{font-size:.92rem;color:var(--ink-2);font-weight:300}

/* newsletter / guía descargable */
.signup{border:1px solid var(--line);padding:40px;text-align:center}
.signup .kicker{margin-bottom:12px}
.signup h3{font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.1;max-width:20ch;margin:0 auto}
.signup p{color:var(--ink-2);max-width:48ch;margin:14px auto 0;font-weight:300}
.signup form{display:flex;gap:0;max-width:430px;margin:24px auto 0;border:1px solid var(--ink)}
.signup input{flex:1;border:0;padding:14px 16px;font-family:inherit;font-size:.95rem;background:var(--bg)}
.signup input:focus{outline:none}
.signup button{border:0;background:var(--ink);color:#fff;font-family:inherit;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:0 22px;cursor:pointer}
.signup button:hover{background:var(--accent)}
.signup small{display:block;margin-top:12px;font-size:.72rem;color:var(--ink-3)}

/* lista de enlaces a guías (texto) */
.guidelist{border-top:1px solid var(--line);margin:32px 0}
.guidelist a{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--hair)}
.guidelist a:hover .gl-t{color:var(--accent)}
.guidelist .gl-t{font-family:var(--font-display);font-weight:500;font-size:1.25rem}
.guidelist .gl-d{font-size:.85rem;color:var(--ink-3);font-weight:300}
.guidelist .arrow{font-size:1.1rem}

/* relacionados */
.related{border-top:1px solid var(--line);padding:42px 0 8px}
.related h4{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}

/* FAQ */
.faq{margin:50px 0}
.faq h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,3.2vw,2.3rem);margin-bottom:10px}
.faq details{border-bottom:1px solid var(--hair);padding:16px 0}
.faq summary{font-family:var(--font-display);font-weight:500;font-size:1.12rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:var(--ink-2);font-weight:300}

/* tablas legales / contacto */
.dl dt{font-weight:500;margin-top:14px}
.dl dd{margin:0 0 4px;color:var(--ink-2);font-weight:300}

/* ---------------------------------------------------------- footer */
footer.site{border-top:1px solid var(--line);margin-top:10px;padding:54px 0 36px}
footer.site .cols{display:grid;grid-template-columns:1fr;gap:32px}
footer.site .brand{justify-self:start;text-align:left;font-size:2rem}
footer.site p{font-size:.9rem;color:var(--ink-2);max-width:40ch;margin-top:10px;font-weight:300}
footer.site h5{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
footer.site ul{list-style:none}
footer.site li{margin:9px 0;font-size:.9rem;font-weight:300}
footer.site li a:hover{color:var(--accent)}
.legal{border-top:1px solid var(--hair);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.74rem;color:var(--ink-3)}
.legal a:hover{color:var(--ink)}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.07s}.d2{animation-delay:.14s}.d3{animation-delay:.21s}.d4{animation-delay:.28s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}*{scroll-behavior:auto}}

/* ---------------------------------------------------------- responsive */
@media(min-width:680px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .cover{grid-template-columns:1.05fr .95fr;gap:48px}
  footer.site .cols{grid-template-columns:2fr 1fr 1fr 1fr}
}
@media(min-width:980px){
  .article{grid-template-columns:minmax(0,1fr) 250px;gap:64px;align-items:start}
  .prose{order:1}.toc{order:2}
}

/* ----- MÓVIL: menú hamburguesa ----- */
@media(max-width:879px){
  .masthead{position:static}
  .mast-top{flex-wrap:wrap}
  .hamb{display:block}
  .mainnav{display:none;flex-basis:100%;order:3;margin-left:0;margin-top:16px;border-top:1px solid var(--line)}
  #navtog:checked ~ .mast-top .mainnav{display:block}
  .mainnav ul{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .mainnav li{width:100%;border-bottom:1px solid var(--hair)}
  .mainnav li:last-child{border-bottom:0}
  .mainnav a{display:block;width:100%;padding:15px 0;font-size:.8rem;letter-spacing:.14em;border:0}
  #navtog:checked ~ .mast-top .hamb span{opacity:0}
}

/* ---------------------------------------------------------- Prueba rápida del estudio */
.prueba{background:var(--paper);border-left:3px solid var(--ink);padding:20px 26px;margin:40px 0}
.prueba .pr-head{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--accent);margin-bottom:12px}
.prueba .pr-title{font-family:var(--font-display);font-weight:500;font-size:1.15rem;margin-bottom:8px}
.prueba p{margin:8px 0;font-size:.97rem;font-weight:300}
.prueba p:first-of-type{margin-top:0}

/* ---------------------------------------------------------- Tablas comparativas */
.tabla-wrap{overflow-x:auto;margin:30px 0;-webkit-overflow-scrolling:touch}
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th{background:var(--ink);color:#fff;font-family:var(--font-body);font-weight:500;text-align:left;padding:11px 14px;font-size:.78rem;letter-spacing:.04em}
.tabla td{border-bottom:1px solid var(--hair);padding:10px 14px;vertical-align:top;font-weight:300;color:var(--ink-2)}
.tabla tr:last-child td{border-bottom:0}
.tabla tr:hover td{background:var(--paper)}
.tabla td:first-child{font-weight:400;color:var(--ink)}
@media(max-width:600px){.tabla th,.tabla td{padding:9px 10px;font-size:.85rem}}

/* Respuesta rápida labeled */
.respuesta{background:var(--paper);border-left:3px solid var(--ink);padding:16px 22px;margin:0 0 36px}
.respuesta .rq-label{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:6px}
.respuesta p{margin:0;font-size:1.05rem;font-weight:300}

/* ---- Tamaños mínimos para móvil (PageSpeed: texto legible) ---- */
@media(max-width:600px){
  .kicker,.tile .cat,.related h4,.prueba .pr-head,.respuesta .rq-label,
  .toc h4,footer.site h5,.section-head .kicker,.byline span,
  .pr-head,.rq-label{font-size:.75rem !important;letter-spacing:.14em}
  .crumbs{font-size:.72rem}
  .cover .ctext .more,.signup button{font-size:.8rem}
  /* Touch targets mínimos: 44px para enlaces de navegación */
  .mainnav a{min-height:44px;display:flex;align-items:center;padding:0 8px}
  /* Tap targets para botones y enlaces importantes */
  .more,.inline,.tile{min-height:44px}
  .tile{min-height:auto}
  /* Botón newsletter */
  .signup button{min-height:48px;padding:0 20px}
}