/* 45 DIGITAL NOTICIAS - Acerca. Misma paleta y tipografía que columna.css. */ :root{ --paper:#FFFFFF; --paper-gray:#F5F5F7; --ink:#1D1D1F; --ink-2:#6E6E73; --ink-3:#86868B; --rule:#D2D2D7; --rule-soft:#E8E8ED; --laton:#B08D4F; --noche:#0A0D12; --noche-ink:#F2EFE9; --display:"Fraunces",Georgia,serif; --body:"Newsreader",Georgia,serif; --ui:"Inter",system-ui,-apple-system,sans-serif; --gap:100px; --gap-lg:120px; --maxw:1180px; --pad:clamp(22px,5vw,52px); --ease:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box} html{overflow-x:hidden} body{margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:19px; line-height:1.62; -webkit-font-smoothing:antialiased; font-optical-sizing:auto} img{max-width:100%; display:block} a{color:inherit; text-decoration:none} h1,h2,h3{margin:0; font-weight:400} p{margin:0} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)} /* JUSTIFICADO — regla de la casa. Con hyphens:auto obligatorio, que es lo que evita los ríos blancos; el le da el diccionario. Solo la prosa: nunca titulares, etiquetas ni cifras. */ .texto p, .contacto p, .lead .entrada{ text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; } .label{font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase} .label--soft{color:var(--ink-3); font-weight:500} .meta{font-family:var(--ui); font-size:12px; color:var(--ink-3)} .hilo{height:2px; width:34px; background:var(--laton)} /* ===== MASTHEAD (claro, esta página no lleva collage) ===== */ .masthead{border-bottom:1px solid var(--rule)} .masthead .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:78px; gap:24px} .masthead .fecha{font-family:var(--ui); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)} .logo{font-family:var(--display); font-size:23px; font-weight:600; letter-spacing:-.015em; text-align:center; white-space:nowrap} .logo .n{font-weight:400; color:var(--ink-2)} .masthead .hilo{margin:5px auto 0} .masthead nav{display:flex; gap:26px; justify-content:flex-end; font-family:var(--ui); font-size:12px; font-weight:500; letter-spacing:.05em} .masthead nav a{color:var(--ink-2); padding-bottom:2px; border-bottom:1px solid transparent; transition:.2s} .masthead nav a:hover,.masthead nav a[aria-current]{color:var(--ink); border-color:var(--ink)} /* ============================================================ LEAD — abre con el invariante, no con el currículum. La pregunta ES la tesis de la casa; ponerla a 76px la vuelve declaración en vez de nota al pie. ============================================================ */ .lead{padding-block:clamp(58px,7vw,96px) var(--gap)} .lead-kicker{display:flex; align-items:center; gap:12px; margin-bottom:26px} .lead-kicker .tick{width:14px; height:1px; background:var(--ink)} .lead h1{font-family:var(--display); font-size:clamp(42px,6vw,76px); font-weight:600; line-height:1.03; letter-spacing:-.028em; text-wrap:balance; max-width:14em; margin-bottom:30px} .lead .entrada{font-family:var(--body); font-style:italic; font-weight:300; font-size:clamp(20px,2.2vw,25px); line-height:1.45; color:var(--ink-2); max-width:31em} /* ===== bloque de texto corrido ===== */ .bloque{padding-block:var(--gap)} .bloque--gris{background:var(--paper-gray)} .bloque .wrap{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(30px,5vw,64px); align-items:start} .bloque h2{font-family:var(--display); font-size:clamp(26px,3vw,34px); font-weight:600; line-height:1.14; letter-spacing:-.02em; text-wrap:balance} .bloque h2 + .hilo{margin-top:16px} .texto p{margin-bottom:24px; max-width:34em} .texto p:last-child{margin-bottom:0} .texto strong{font-weight:400; font-family:var(--display); font-size:1.04em} .texto em{font-style:italic; color:var(--ink)} /* ============================================================ EL AUTOR ============================================================ */ .autor .wrap{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(30px,5vw,64px); align-items:start} .retrato{width:100%; max-width:260px; aspect-ratio:4/5; background:var(--paper); border:1px solid var(--rule); display:grid; place-items:center; overflow:hidden} .retrato img{width:100%; height:100%; object-fit:cover} .retrato .mono{font-family:var(--display); font-size:52px; font-weight:600; color:var(--rule); letter-spacing:-.02em} .retrato-pie{font-family:var(--ui); font-size:11px; color:var(--ink-3); margin-top:10px; max-width:260px; line-height:1.5} .autor .nombre{font-family:var(--display); font-size:clamp(26px,3vw,34px); font-weight:600; line-height:1.14; letter-spacing:-.02em; margin-bottom:8px} .autor .cargo{font-family:var(--ui); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:26px} /* ============================================================ ESCRÍBENOS ============================================================ */ .contacto{background:var(--noche); color:var(--noche-ink); padding-block:var(--gap)} .contacto .wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(30px,5vw,64px); align-items:center} .contacto h2{font-family:var(--display); font-size:clamp(28px,3.6vw,44px); font-weight:600; line-height:1.1; letter-spacing:-.025em; text-wrap:balance} .contacto p{font-size:18px; line-height:1.6; color:rgba(242,239,233,.72); max-width:32em; margin-bottom:26px} .correo{display:inline-flex; align-items:center; gap:11px; font-family:var(--ui); font-size:clamp(16px,2vw,21px); font-weight:500; color:var(--noche-ink); border-bottom:1px solid rgba(242,239,233,.4); padding-bottom:7px; transition:.25s var(--ease)} .correo:hover{border-color:var(--laton); color:var(--laton)} .correo svg{width:17px; height:17px; flex:none} /* ===== compartir + pie (idénticos a la portada) ===== */ .compartir{border-top:1px solid var(--rule); background:var(--paper-gray)} .compartir .wrap{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-block:34px} .compartir .txt h3{font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.015em} .compartir .txt p{font-family:var(--ui); font-size:12.5px; color:var(--ink-3); margin-top:5px} .btns{display:flex; gap:10px; margin-left:auto; flex-wrap:wrap} .btn-red{position:relative; width:44px; height:44px; border:1px solid var(--rule); border-radius:50%; display:grid; place-items:center; color:var(--ink-2); background:var(--paper); transition:.26s var(--ease)} .btn-red:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-2px)} .btn-red svg{width:17px; height:17px} .btn-red .tip{position:absolute; bottom:calc(100% + 9px); left:50%; translate:-50% 0; font-family:var(--ui); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper); background:var(--ink); padding:4px 9px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .22s} .btn-red:hover .tip,.btn-red.copiado .tip{opacity:1} .btn-red.copiado{border-color:var(--laton); color:var(--laton)} .pie-sitio{border-top:1px solid var(--ink); padding-block:60px 40px} .pie-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(26px,3.4vw,48px); align-items:start} .pie-marca .marca-n{font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.015em} .pie-marca .hilo{margin:8px 0 0} .pie-marca .lema{font-size:15.5px; line-height:1.6; color:var(--ink-2); margin-top:16px; max-width:26em} .pie-col h4{font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; margin-bottom:15px} .pie-col a{display:block; font-family:var(--ui); font-size:13.5px; color:var(--ink-2); padding-block:5px} .pie-col a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px} .pie-bajo{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; margin-top:46px; padding-top:22px; border-top:1px solid var(--rule)} .pie-bajo p{font-family:var(--ui); font-size:11.5px; color:var(--ink-3); line-height:1.7} .redes{display:flex; gap:9px} .redes a{width:34px; height:34px; border:1px solid var(--rule); border-radius:50%; display:grid; place-items:center; color:var(--ink-2); transition:.25s var(--ease)} .redes a:hover{border-color:var(--ink); color:var(--ink)} .redes svg{width:15px; height:15px} @media (max-width:1068px){ .pie-top{grid-template-columns:repeat(3,minmax(0,1fr))} .pie-marca{grid-column:1 / -1; margin-bottom:14px} } @media (max-width:734px){ :root{--gap:64px; --gap-lg:80px} body{font-size:18px} .masthead .wrap{grid-template-columns:minmax(0,1fr); height:auto; padding-block:18px; gap:12px; text-align:center} .masthead .fecha{display:none} .masthead nav{justify-content:center; gap:20px} .bloque .wrap,.autor .wrap,.contacto .wrap{grid-template-columns:minmax(0,1fr)} .bloque h2{margin-bottom:8px} .marca{flex-direction:column; gap:6px} .marca .sig{width:auto} .retrato{max-width:180px} .pie-top{grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px} .pie-marca{grid-column:1 / -1; margin-bottom:10px} } @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}} /* foco de teclado: faltaba en el prototipo */ :focus-visible{outline:2px solid var(--laton); outline-offset:3px} .contacto :focus-visible{outline-color:var(--noche-ink)}