:root{--cream:#F5EFE0;--cream-dark:#EAE0CC;--ink:#141210;--earth:#8B6E4E;--earth-light:#B8976A;--rust:#7C3D1E;--paper:#FAF7F0;--text-body:#3D3025;--line:rgba(139,110,78,.22);} *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;} body{background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden;max-width:100vw;} body::after{content:'';position:fixed;inset:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none;z-index:0;} nav{position:sticky;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;justify-content:space-between;padding:20px 48px;background:#FAF7F0;backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(20,18,16,.06);} .nav-logo{font-family:'Playfair Display',serif;font-size:18px;font-weight:400;letter-spacing:.02em;color:#1A1A1A;text-decoration:none;flex-shrink:0;} .nav-links{display:flex;gap:28px;list-style:none;align-items:center;} .nav-links a{font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:#1A1A1A;text-decoration:none;transition:color .3s;white-space:nowrap;font-weight:500;} .nav-links a:hover,.nav-links a.active{color:var(--earth);} .nav-cta{background:#1A1A1A!important;color:#F5EFE0!important;padding:10px 24px;font-size:12px!important;font-weight:600!important;} .nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;} .nav-hamburger span{display:block;width:28px;height:3px;background:#1A1A1A;transition:all .3s;} .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-hamburger.open span:nth-child(2){opacity:0;} .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .nav-drawer{display:none;position:fixed;inset:70px 0 0 0;background:#FAF7F0;z-index:490;flex-direction:column;padding:40px 32px;border-top:1px solid var(--line);} .nav-drawer.open{display:flex;} .nav-drawer li{list-style:none;border-bottom:1px solid var(--line);} .nav-drawer li a{display:block;padding:18px 0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-body);text-decoration:none;} .nav-drawer li:last-child{border-bottom:none;padding-top:24px;} .nav-drawer li:last-child a{background:var(--ink);color:var(--cream);padding:16px 24px;text-align:center;display:block;} /* HEADER */ .hem-header{padding:100px 72px 0;background:var(--paper);} .hem-header-inner{border-bottom:1px solid var(--line);padding-bottom:52px;max-width:1180px;margin:0 auto;} .hem-eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--earth);display:flex;align-items:center;gap:14px;margin-bottom:20px;} .hem-eyebrow::before{content:'';width:28px;height:1px;background:var(--earth);} .hem-title{font-family:'Playfair Display',serif;font-size:clamp(44px,6vw,80px);font-weight:900;line-height:.95;color:var(--ink);margin-bottom:14px;} .hem-title em{font-style:italic;color:var(--earth);} .hem-desc{font-family:'EB Garamond',serif;font-size:18px;font-style:italic;color:var(--text-body);opacity:.65;max-width:520px;line-height:1.6;} .hem-stats{display:flex;gap:40px;margin-top:32px;flex-wrap:wrap;} .hem-stat-num{font-family:'Playfair Display',serif;font-size:28px;font-weight:900;color:var(--ink);line-height:1;} .hem-stat-lbl{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--earth);margin-top:4px;} /* FILTER BAR */ .filter-bar{padding:20px 72px;background:var(--cream-dark);border-bottom:1px solid var(--line);position:sticky;top:61px;z-index:400;} .filter-bar-inner{max-width:1180px;margin:0 auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .filter-label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--earth);margin-right:8px;flex-shrink:0;} .yr-btn{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;border:1px solid var(--line);background:var(--paper);color:var(--text-body);cursor:pointer;transition:all .18s;font-family:'DM Sans',sans-serif;} .yr-btn:hover{border-color:var(--earth);color:var(--earth);} .yr-btn.active{background:var(--ink);color:var(--cream);border-color:var(--ink);} .search-wrap{margin-left:auto;position:relative;} .h-search{padding:8px 14px 8px 32px;border:1px solid var(--line);background:var(--paper);font-family:'DM Sans',sans-serif;font-size:12px;color:var(--ink);outline:none;width:200px;transition:border-color .2s;} .h-search:focus{border-color:var(--earth);} .h-search::placeholder{color:rgba(60,48,37,.35);} .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.4;pointer-events:none;} #results-count{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--earth);opacity:.7;margin-left:8px;flex-shrink:0;} /* CARDS */ .h-grid-wrap{padding:48px 72px 88px;max-width:1180px;margin:0 auto;} .h-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);} .h-card{background:var(--paper);padding:24px 26px;display:flex;flex-direction:column;gap:8px;border-bottom:2px solid transparent;transition:background .18s,border-color .2s;} .h-card:hover{background:var(--cream-dark);border-bottom-color:var(--earth);} .h-card.hidden{display:none;} .h-card.expanded{background:var(--cream-dark);border-bottom-color:var(--rust);grid-column:span 1;} .h-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;} .h-tag{font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:var(--earth);padding:3px 9px;font-weight:500;white-space:nowrap;} .h-date{font-family:'EB Garamond',serif;font-size:12px;font-style:italic;color:var(--earth);opacity:.7;white-space:nowrap;} .h-card-title{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--ink);line-height:1.25;} .h-card-excerpt{font-family:'EB Garamond',serif;font-size:14px;font-style:italic;color:var(--text-body);line-height:1.65;} .h-card-full{font-family:'EB Garamond',serif;font-size:16px;line-height:1.85;color:var(--text-body);margin-top:8px;border-top:1px solid var(--line);padding-top:16px;} .h-card-full p{margin-bottom:14px;} .h-card-full p:last-child{margin-bottom:0;} .h-card-footer{display:flex;align-items:center;gap:16px;margin-top:8px;flex-wrap:wrap;} .h-expand-btn{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--earth);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;padding:0;transition:color .2s;} .h-expand-btn:hover{color:var(--ink);} .h-orig-link{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(60,48,37,.4);text-decoration:none;display:flex;align-items:center;gap:5px;transition:color .2s;} .h-orig-link:hover{color:var(--earth);} .no-results{grid-column:1/-1;padding:56px 0;text-align:center;font-family:'EB Garamond',serif;font-size:20px;font-style:italic;color:var(--earth);opacity:.6;} /* FOOTER */ footer{background:var(--ink);border-top:1px solid rgba(139,110,78,.1);padding:24px 72px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;} .footer-logo{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:var(--cream);text-decoration:none;} .footer-nav{display:flex;gap:20px;flex-wrap:wrap;} .footer-nav a{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,239,224,.3);text-decoration:none;transition:color .2s;} .footer-nav a:hover{color:var(--earth-light);} .footer-copy{font-size:11px;color:rgba(245,239,224,.18);} @media(max-width:1024px){ nav{padding:16px 24px;}.nav-links{display:none;}.nav-hamburger{display:flex;} .hem-header,.filter-bar,.h-grid-wrap,footer{padding-left:32px;padding-right:32px;} .h-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:600px){ .hem-header{padding:88px 24px 0;} .filter-bar{padding:14px 24px;} .h-grid-wrap{padding:32px 24px 64px;} .h-grid{grid-template-columns:1fr;} .h-search{width:120px;} footer{padding:20px 24px;flex-direction:column;text-align:center;}.footer-nav{justify-content:center;} nav{padding:14px 20px;} } /* ── OVERFLOW / HORIZONTAL SCROLL FIX ── */ html, body { overflow-x: hidden; max-width: 100%; } img, video, iframe, embed, object { max-width: 100%; } .x-embed-container, .x-embed-container iframe { max-width: 100% !important; width: 100% !important; } section, header, footer, nav, div { max-width: 100vw; box-sizing: border-box; } /* ── LANGUAGE SWITCHER ── */ .lang-switch{display:flex;gap:6px;align-items:center;margin-left:16px;} .lang-switch a{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8B6E4E;text-decoration:none;padding:4px 6px;transition:color .2s;font-weight:400;} .lang-switch a:hover,.lang-switch a.active{color:#1A1A1A;font-weight:600;} .lang-switch span{color:rgba(139,110,78,.3);font-size:9px;} @media(max-width:1024px){ .lang-switch{margin-left:auto;margin-right:16px;} .lang-switch a{font-size:12px;font-weight:500;color:#1A1A1A;padding:6px 8px;} .lang-switch a.active{color:#8B6E4E;font-weight:700;} } @media(max-width:600px){ .lang-switch{margin-right:8px;} } /* ═══════════════════════════════════════════════════════════════════ SISTEMA DE DISEÑO — Antonio Romeo · 2026 Esta capa se aplica al final de la hoja e impone orden sobre los valores que se habían ido eligiendo a ojo. No cambia la identidad: misma paleta, mismas tipografías, mismo carácter. · Escala tipográfica modular (razón 1,25) · Ritmo vertical con base 8 · Contraste conforme a WCAG AA · Suelo de legibilidad en 11 px · Foco visible y respeto al movimiento reducido ═══════════════════════════════════════════════════════════════════ */ :root{ /* Escala tipográfica ───────────────────────────────────── */ --fs-xs: .6875rem; /* 11px · etiquetas, meta */ --fs-sm: .8125rem; /* 13px · fechas, pies */ --fs-base: 1.0625rem; /* 17px · cuerpo */ --fs-md: 1.3125rem; /* 21px · entradilla */ --fs-lg: 1.625rem; /* 26px */ --fs-xl: 2.0625rem; /* 33px · títulos de sección */ --fs-2xl: 2.5625rem; /* 41px */ --fs-3xl: 4rem; /* 64px · hero */ /* Ritmo vertical ──────────────────────────────────────── */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 88px; --sp-8:120px; /* Texto sobre fondo tinta — contraste verificado AA ────── */ --on-ink-strong: rgba(245,239,224,.95); --on-ink: rgba(245,239,224,.80); --on-ink-soft: rgba(245,239,224,.66); --focus: #7C3D1E; } /* ── Suelo de legibilidad: nada por debajo de 11 px ───────────────── */ .hero-eyebrow,.eyebrow,.stat-lbl,.hstrip-eyebrow,.obra-type,.obra-link, .link-all,.cf-more,.cs-link,.cc-more,.hero-caption-label,.cx-lbl, .cx-series-label,.x-embed-label,.filter-label,.h-tag,.h-date, .footer-nav a,.btn-primary,.btn-ghost,.apoyo-btn,.nav-cta, .cx-link-main,.cx-link-medium,.hem-stat-lbl{ font-size: var(--fs-xs); } .cc-tag,.cf-tag,.hstrip-tag,.hstrip-medio{ font-size: var(--fs-xs); letter-spacing: .14em; } .cc-date,.hstrip-date,.cf-date,.footer-copy,.apoyo-note{ font-size: var(--fs-sm); } /* ── Contraste: los susurros siguen siendo susurros, pero se oyen ── */ .cf-excerpt,.rss-featured-excerpt,.cx-series-desc{ color: var(--on-ink); } .cs-text{ color: var(--on-ink-soft); } .cf-date{ color: var(--earth-light); opacity: .88; } .footer-nav a{ color: rgba(245,239,224,.68); } .footer-copy{ color: rgba(245,239,224,.55); } .hstrip-medio{ color: rgba(60,48,37,.62); } .hero-caption-label{ opacity: 1; color: var(--earth-light); } /* ── Ritmo vertical: un solo sistema de espaciados ────────────────── */ .cuaderno-section{ padding: var(--sp-7) var(--sp-6); } .about-section { padding: var(--sp-7) var(--sp-6); } .hemeroteca-strip{ padding: var(--sp-5) var(--sp-6); } .obra-section { padding: var(--sp-7) var(--sp-6); } .apoyo-strip { padding: var(--sp-5) var(--sp-6); } footer { padding: var(--sp-3) var(--sp-6); } @media(max-width:1024px){ .cuaderno-section,.about-section,.hemeroteca-strip, .obra-section,.apoyo-strip{ padding-left: var(--sp-4); padding-right: var(--sp-4); } footer{ padding-left: var(--sp-4); padding-right: var(--sp-4); } } @media(max-width:600px){ .cuaderno-section,.about-section,.hemeroteca-strip, .obra-section,.apoyo-strip{ padding-left: var(--sp-3); padding-right: var(--sp-3); } footer{ padding-left: var(--sp-3); padding-right: var(--sp-3); } } /* ── El retrato se ve ─────────────────────────────────────────────── */ .hero-photo{ filter: contrast(1.04) saturate(.96); } .hero-overlay{ background: linear-gradient(to right, rgba(20,18,16,.88) 0%, rgba(20,18,16,.30) 20%, rgba(20,18,16,.04) 42%, transparent 60%); } .hero-right::after{ content:''; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(to top, rgba(20,18,16,.75), transparent); pointer-events:none; } /* ── Navegación: decir dónde estás ────────────────────────────────── */ .nav-links a[aria-current="page"]{ color: var(--earth); position: relative; } .nav-links a[aria-current="page"]::after{ content:''; position:absolute; left:0; right:0; bottom:-7px; height:1px; background: var(--earth); } .nav-drawer a[aria-current="page"]{ color: var(--earth); } /* ── Selector de idioma: visible y pulsable ───────────────────────── */ .lang-switch a{ font-size: var(--fs-xs); color: var(--text-body); font-weight: 500; letter-spacing: .08em; } .lang-switch a:hover{ color: var(--ink); } .lang-switch a.active{ color: var(--ink); font-weight: 700; } .lang-switch span{ color: rgba(139,110,78,.45); } @media(max-width:1024px){ .lang-switch a{ min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } } /* ── Foco visible: quien navega con teclado sabe dónde está ───────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 1px; } .cuaderno-featured:focus-visible, .cuaderno-card:focus-visible, .obra-item:focus-visible, .hstrip-item:focus-visible, .h-card a:focus-visible{ outline-offset: -2px; } /* Salto al contenido, para lectores de pantalla */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:9999; background:var(--ink); color:var(--cream); padding:12px 20px; font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; } .skip-link:focus{ left:0; } /* ── Movimiento reducido ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1 !important; transform:none !important; } } /* ── Rendimiento y desbordamiento ─────────────────────────────────── */ /* La textura de ruido pasa a capa propia: deja de repintarse al hacer scroll. Mismo aspecto, sin coste de batería en móvil. */ body::after{ transform: translateZ(0); will-change: transform; backface-visibility: hidden; } /* `overflow-x:hidden` en html/body rompe position:sticky en algunos navegadores — y la barra de navegación es sticky. `clip` no. */ html, body{ overflow-x: clip; max-width: 100%; } /* Se retira el `max-width:100vw` que se aplicaba a TODOS los div: 100vw incluye la barra de scroll y provocaba el desbordamiento que pretendía arreglar. */ section, header, footer, nav, div{ max-width: none; } img, picture, video, iframe{ max-width: 100%; height: auto; } .hero-photo, .obra-cover img, .book-cover img{ height: 100%; } /* ── Enlaces sociales del pie ─────────────────────────────────────── */ .footer-social{ display:flex; gap: var(--sp-2); align-items:center; } .footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; color: rgba(245,239,224,.62); border:1px solid rgba(139,110,78,.28); transition: all .2s; } .footer-social a:hover{ color: var(--cream); border-color: var(--earth); background: rgba(139,110,78,.16); } .footer-social svg{ width:15px; height:15px; fill:currentColor; } .footer-contact{ font-family:'EB Garamond',serif; font-size: var(--fs-sm); color: rgba(245,239,224,.72); text-decoration:none; border-bottom:1px solid rgba(139,110,78,.35); } .footer-contact:hover{ color: var(--cream); border-bottom-color: var(--earth-light); } .footer-col{ display:flex; flex-direction:column; gap: var(--sp-1); align-items:flex-start; } @media(max-width:1024px){ .footer-col{ align-items:center; } } /* ── Botón "Seguir en Medium" de la barra ─────────────────────────── */ .nav-cta{ display:inline-flex; align-items:center; gap:8px; } .nav-cta::before{ content:''; width:14px; height:14px; flex-shrink:0; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z'/%3E%3C/svg%3E") center/contain no-repeat; } /* ── Bloque de café en el pie (ya no compite con nada) ────────────── */ .apoyo-strip{ background: var(--cream-dark); } .apoyo-title{ font-size: clamp(1.375rem, 2.4vw, 1.75rem); } /* ── Cursiva: EB Garamond sustituye a Cormorant en todas partes ───── */ .hero-subtitle, .hero-caption-name{ font-family:'EB Garamond', serif; } /* ── Correcciones de herencia ─────────────────────────────────────── */ /* `` es inline por defecto: dentro de un contenedor con altura fija, la imagen colapsaba a 0. `display:contents` la hace transparente. */ picture{ display: contents; } /* El selector de elemento `nav{...}` de la barra superior se estaba aplicando también al `