/* ============ TOKENS ============ */ :root{ --navy-950:#081627; --navy-900:#0A1F33; --navy-800:#102D4A; --blue-600:#1B4B7A; --blue-500:#22598F; --sky-400:#56B4D3; --paper:#F7F9FC; --white:#FFFFFF; --ink:#2A3844; --muted:#6E7F8D; --line:#DEE6EE; --line-dark:rgba(255,255,255,.10); --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --serif-text:'Source Serif 4',Georgia,serif; --sans:'Source Sans 3','Segoe UI',Arial,sans-serif; --ease:cubic-bezier(.22,1,.36,1); --maxw:1200px; } /* ============ BASE ============ */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--sans); font-size:17px; line-height:1.75; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:var(--blue-600);text-decoration:none} ::selection{background:rgba(86,180,211,.32)} a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--sky-400);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:28px} /* Eyebrow: sobretítulo en caps espaciadas */ .eyebrow{ margin:0 0 18px; font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--sky-400); } .eyebrow--dark{color:var(--sky-400)} h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--navy-900);margin:0} h2{font-size:clamp(36px,4.4vw,54px);line-height:1.08;letter-spacing:-.01em} /* Reveal on scroll */ .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ============ HEADER ============ */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:60; padding:22px 0; transition:background .35s var(--ease),padding .35s var(--ease),box-shadow .35s var(--ease); } .site-header.scrolled{ padding:12px 0; background:rgba(8,22,39,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line-dark); } .header-in{display:flex;align-items:center;justify-content:space-between;gap:24px} .logo img{height:34px;width:auto} .nav{display:flex;align-items:center;gap:30px} .nav a{ font-size:13px;font-weight:600;letter-spacing:.10em;text-transform:uppercase; color:rgba(255,255,255,.78); padding:6px 0;position:relative; transition:color .25s ease; } .nav a::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:0; background:var(--sky-400);transition:width .3s var(--ease); } .nav a:hover{color:#fff} .nav a:hover::after{width:100%} .btn-wa{ font-size:13px;font-weight:600;letter-spacing:.10em;text-transform:uppercase; color:var(--navy-950)!important;background:#fff; padding:11px 22px;border-radius:2px; transition:background .25s ease,transform .25s ease; } .btn-wa:hover{background:var(--sky-400);transform:translateY(-1px)} .btn-wa::after{display:none} .burger{display:none;background:none;border:0;cursor:pointer;padding:8px} .burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .3s var(--ease),opacity .3s ease} .mobile-nav{display:none} /* ============ HERO ============ */ .hero{ position:relative;min-height:94vh; display:flex;align-items:center; background:var(--navy-950); overflow:hidden; } .hero-media{position:absolute;inset:0} .hero-media img{ width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.9); opacity:.34; transform:scale(1.06); animation:heroZoom 2.6s var(--ease) forwards; } @keyframes heroZoom{to{transform:scale(1)}} .hero-media::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg, rgba(8,22,39,.42) 0%, rgba(8,22,39,.18) 45%, rgba(8,22,39,.94) 100%), linear-gradient(90deg, rgba(8,22,39,.86) 0%, rgba(8,22,39,.34) 60%, rgba(8,22,39,.55) 100%), linear-gradient(0deg, rgba(27,75,122,.28), rgba(27,75,122,.28)); } .hero.noimg .hero-media{background: radial-gradient(1100px 560px at 82% -10%, rgba(86,180,211,.12), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 190px), var(--navy-950)} .hero-in{position:relative;z-index:2;width:100%;padding-block:170px 120px} .hero-meta{ display:flex;align-items:center;gap:16px; margin:0 0 30px; font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--sky-400); } .hero-meta::before{content:"";width:44px;height:1px;background:var(--sky-400);opacity:.7} .hero h1{ color:#fff; font-size:clamp(54px,8.6vw,112px); line-height:.98; letter-spacing:-.02em; max-width:18ch; text-wrap:balance; } .hero h1 em{font-style:italic;font-weight:500;color:rgba(255,255,255,.94)} .hero-sub{ margin:34px 0 0; max-width:560px; font-size:19px;line-height:1.72; color:rgba(255,255,255,.74); text-wrap:pretty; } .hero-pains{margin:30px 0 0;font-family:var(--serif-text);font-style:italic;font-size:15.5px;line-height:2;color:rgba(255,255,255,.58);max-width:660px} .hero-cta{margin-top:44px;display:flex;flex-wrap:wrap;gap:18px;align-items:center} .btn-primary{ display:inline-block; background:#fff;color:var(--navy-950); font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; padding:17px 38px;border-radius:2px; transition:background .25s ease,transform .25s ease,box-shadow .25s ease; } .btn-primary:hover{background:var(--sky-400);color:var(--navy-950);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.35)} .btn-ghost{ display:inline-flex;align-items:center;gap:10px; color:rgba(255,255,255,.72); font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; padding:17px 4px; transition:color .25s ease; } .btn-ghost:hover{color:#fff} .btn-ghost .arr{transition:transform .3s var(--ease)} .btn-ghost:hover .arr{transform:translateY(3px)} /* Entrada orquestada del hero */ .hero .stag{opacity:0;transform:translateY(26px)} .hero.loaded .stag{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)} .hero.loaded .stag.d1{transition-delay:.08s} .hero.loaded .stag.d2{transition-delay:.2s} .hero.loaded .stag.d3{transition-delay:.34s} .hero.loaded .stag.d4{transition-delay:.46s} @media (prefers-reduced-motion: reduce){ .hero .stag{opacity:1;transform:none} .hero-media img{animation:none;transform:none} } /* ============ AUTORIDAD: tesis SCJN + prensa ============ */ .authority{background:var(--navy-900);border-top:1px solid var(--line-dark)} .authority-in{ padding-block:78px 64px; display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start; } .seal{ font-family:var(--serif);font-style:italic; font-size:15px;line-height:1.5;color:var(--sky-400); border:1px solid rgba(86,180,211,.35); padding:18px 20px;border-radius:2px; text-align:center;min-width:170px; } .seal strong{ display:block;font-style:normal;font-family:var(--sans); font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.55);margin-bottom:8px; } .seal .reg{display:block;margin-top:8px;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.45)} .authority blockquote{ margin:0; font-family:var(--serif); font-size:clamp(21px,2.5vw,29px); line-height:1.42; color:rgba(255,255,255,.92); text-wrap:pretty; } .authority blockquote small{ display:block;margin-top:18px; font-family:var(--sans);font-size:13px;letter-spacing:.06em; color:rgba(255,255,255,.5); } .press{ border-top:1px solid var(--line-dark); padding-block:34px 40px; } .press-label{display:block;margin-bottom:24px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42)} .press-wall{display:flex;flex-wrap:wrap;align-items:center;gap:22px 56px} .pm{color:rgba(255,255,255,.56);white-space:nowrap;line-height:1;transition:color .25s ease} .pm:hover{color:rgba(255,255,255,.88)} .pm-reforma{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:25px;letter-spacing:.03em} .pm-aristegui{font-family:'Segoe UI',Arial,sans-serif;font-weight:300;font-size:23px;letter-spacing:-.01em} .pm-aristegui b{font-weight:700} .pm-proceso{font-family:'Arial Narrow',Impact,'Segoe UI',sans-serif;font-weight:700;font-size:27px;letter-spacing:.02em} .pm-excelsior{font-family:Cambria,Georgia,serif;font-style:italic;font-weight:600;font-size:26px} .pm-indigo{font-family:'Segoe UI',Arial,sans-serif;font-weight:600;font-size:20px;letter-spacing:.18em;text-transform:uppercase} .pm-eje{font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:19px;letter-spacing:.02em} /* ============ QUIÉNES SOMOS ============ */ .about{background:var(--paper)} .about-in{ padding-block:clamp(96px,11vw,150px); display:grid;grid-template-columns:minmax(240px,.9fr) minmax(300px,1.6fr);gap:64px; } .about-head h2{max-width:9ch} .about-head .rule{width:56px;height:2px;background:var(--sky-400);margin-top:30px} .lead{ font-family:var(--serif); font-size:clamp(22px,2.3vw,27px); line-height:1.55;color:var(--navy-900); margin:0;text-wrap:pretty; } .about-body p:not(.lead){margin:26px 0 0;max-width:62ch;font-family:var(--serif-text);font-size:17.5px;line-height:1.85} .link-line{ display:inline-flex;align-items:center;gap:10px; margin-top:36px; font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--blue-600); border-bottom:1px solid var(--sky-400); padding-bottom:6px; transition:color .25s ease,gap .3s var(--ease); } .link-line:hover{color:var(--navy-900);gap:16px} /* ============ ÁREAS DE PRÁCTICA: índice editorial ============ */ .practice{background:var(--white)} .practice-in{padding-block:clamp(96px,11vw,150px)} .practice-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:64px} .practice-head p{margin:0;font-size:15px;color:var(--muted);max-width:34ch} .index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .index li{border-bottom:1px solid var(--line)} .index a{ display:grid; grid-template-columns:minmax(250px,.95fr) minmax(280px,1.55fr) auto; align-items:center;gap:10px 56px; padding:38px 6px; position:relative; transition:padding .35s var(--ease); } .index a::before{ content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0; background:var(--sky-400);transition:width .45s var(--ease); } .index a:hover{padding-left:18px} .index a:hover::before{width:100%} .index .t{ display:block; font-family:var(--serif);font-weight:500; font-size:clamp(24px,2.4vw,30px);line-height:1.15;color:var(--navy-900); transition:color .25s ease;text-wrap:balance; } .index a:hover .t{color:var(--blue-600)} .index .d{display:block;font-family:var(--serif-text);font-size:15.5px;line-height:1.7;color:var(--muted);max-width:56ch;text-wrap:pretty} .index .arr{ font-size:22px;color:var(--line);justify-self:end; transition:color .25s ease,transform .3s var(--ease); } .index a:hover .arr{color:var(--sky-400);transform:translateX(6px)} /* ============ CONTADORES ============ */ .stats{background:var(--navy-950);position:relative;overflow:hidden} .stats::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(900px 480px at 88% 0%, rgba(86,180,211,.10), transparent 55%), radial-gradient(800px 520px at -6% 110%, rgba(27,75,122,.35), transparent 55%); } .stats-in{position:relative;padding-block:clamp(88px,10vw,130px)} .stats-head{margin-bottom:58px;max-width:520px} .stats-head h2{color:#fff} .stats-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:44px 36px; } .stat{border-left:1px solid var(--line-dark);padding-left:20px} .stat b{ display:block; font-family:var(--serif);font-weight:500; font-size:clamp(46px,4.6vw,64px);line-height:1; color:#fff;font-variant-numeric:lining-nums; } .stat span{ display:block;margin-top:10px; font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.52); } .stat.hi b{color:var(--sky-400)} /* ============ CASOS: carrusel editorial ============ */ .cases{background:var(--paper)} .cases-in{padding-block:clamp(96px,11vw,150px)} .cases-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:54px} .cases-nav{display:flex;gap:10px} .cnav{ width:52px;height:52px;border-radius:2px; border:1px solid var(--line);background:var(--white); color:var(--navy-900);font-size:18px;cursor:pointer; transition:background .25s ease,border-color .25s ease,color .25s ease,transform .2s ease; } .cnav:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff;transform:translateY(-2px)} .rail{ display:flex;gap:26px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; cursor:grab; scrollbar-width:none; } .rail::-webkit-scrollbar{display:none} .rail.dragging{cursor:grabbing;scroll-snap-type:none} .case-card{ flex:0 0 min(430px,86vw); scroll-snap-align:start; background:var(--white); border:1px solid var(--line); border-radius:3px; padding:38px 34px 34px; display:flex;flex-direction:column; min-height:360px; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s ease; } .case-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(10,31,51,.12);border-color:transparent} .case-meta{ display:flex;align-items:center;gap:12px; font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--sky-400); margin-bottom:20px; } .case-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line)} .case-meta time{color:var(--muted);letter-spacing:.12em} .case-card h3{font-size:24px;line-height:1.3;font-weight:600;text-wrap:pretty} .case-card p{margin:16px 0 0;font-family:var(--serif-text);font-size:15px;line-height:1.75;color:var(--muted);flex:1} .case-card .link-line{margin-top:26px;align-self:flex-start} /* ============ CONTACTO ============ */ .contact{background:var(--navy-900);position:relative;overflow:hidden} .contact::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(1000px 540px at 100% 0%, rgba(86,180,211,.09), transparent 58%); } .contact-in{ position:relative; padding-block:clamp(96px,11vw,150px); display:grid;grid-template-columns:1.1fr .9fr;gap:70px; } .contact h2{color:#fff;max-width:12ch} .contact .lead-sub{margin:26px 0 0;font-family:var(--serif-text);font-size:17.5px;color:rgba(255,255,255,.66);max-width:46ch} .c-list{margin:44px 0 0;padding:0;list-style:none} .c-list li{ display:flex;gap:16px;align-items:baseline; padding:15px 0;border-top:1px solid var(--line-dark); font-size:15.5px;color:rgba(255,255,255,.78); } .c-list li:last-child{border-bottom:1px solid var(--line-dark)} .c-list .k{flex:0 0 96px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)} .c-list a{color:rgba(255,255,255,.85);border-bottom:1px solid rgba(86,180,211,.4);transition:color .2s ease,border-color .2s ease} .c-list a:hover{color:var(--sky-400);border-color:var(--sky-400)} .form-card{ background:var(--navy-950); border:1px solid var(--line-dark); border-radius:3px; padding:44px 40px; align-self:start; } .form-card h3{color:#fff;font-size:26px;font-weight:500} .form-card .hint{margin:10px 0 26px;font-size:14px;color:rgba(255,255,255,.5)} .field{margin-bottom:18px} .field label{ display:block;margin-bottom:8px; font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.45); } .field input{ width:100%;padding:14px 16px; background:rgba(255,255,255,.045); border:1px solid var(--line-dark); border-radius:2px; color:#fff;font-size:15.5px;font-family:var(--sans); transition:border-color .25s ease,background .25s ease; } .field input::placeholder{color:rgba(255,255,255,.28)} .field input:focus{border-color:var(--sky-400);background:rgba(255,255,255,.07);outline:none} .btn-send{ width:100%;margin-top:8px; background:var(--sky-400);color:var(--navy-950); border:0;border-radius:2px;cursor:pointer; font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; padding:17px 20px; transition:background .25s ease,transform .2s ease; } .btn-send:hover{background:#fff;transform:translateY(-2px)} .alt-mail{margin:16px 0 0;text-align:center;font-size:13.5px;color:rgba(255,255,255,.45)} .alt-mail a{color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.25)} .alt-mail a:hover{color:var(--sky-400)} /* ============ FOOTER ============ */ footer{background:var(--navy-950);border-top:1px solid var(--line-dark)} .foot-in{ padding-block:64px 30px; display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px; } .foot-brand img{height:30px;width:auto} .foot-brand p{margin:20px 0 0;font-size:14px;line-height:1.7;color:rgba(255,255,255,.5);max-width:32ch} .foot-col h4{ margin:0 0 16px; font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.4);font-family:var(--sans); } .foot-col ul{list-style:none;margin:0;padding:0} .foot-col li{margin-bottom:10px} .foot-col a{font-size:14.5px;color:rgba(255,255,255,.72);transition:color .2s ease} .foot-col a:hover{color:var(--sky-400)} .foot-base{ border-top:1px solid var(--line-dark); padding-block:22px 26px; display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px; font-size:13px;color:rgba(255,255,255,.38); } .foot-base a{color:rgba(255,255,255,.55)} .foot-base a:hover{color:var(--sky-400)} /* ============ RESPONSIVE ============ */ @media (max-width:960px){ .authority-in{grid-template-columns:1fr;gap:34px} .about-in,.contact-in{grid-template-columns:1fr;gap:48px} .index a{grid-template-columns:1fr auto;grid-template-areas:"t arr" "d d";gap:10px 18px;padding:28px 4px} .index .t{grid-area:t} .index .d{grid-area:d} .index .arr{grid-area:arr} } @media (max-width:760px){ .nav{display:none} .burger{display:block} .mobile-nav{ display:flex;flex-direction:column; position:fixed;inset:0;z-index:55; background:var(--navy-950); padding:120px 32px 40px;gap:6px; transform:translateY(-100%); transition:transform .5s var(--ease); } .mobile-nav.open{transform:none} .mobile-nav a{ font-family:var(--serif);font-size:32px;color:#fff; padding:12px 0;border-bottom:1px solid var(--line-dark); } .mobile-nav .btn-wa{ font-family:var(--sans);text-align:center;margin-top:26px;border-bottom:0;font-size:13px; } body.nav-open{overflow:hidden} body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.nav-open .burger span:nth-child(2){opacity:0} body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .hero-in{padding-block:150px 90px} .hero-sub{font-size:17px} .stats-grid{gap:34px 24px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .form-card{padding:34px 26px} } /* ================================================================ PÁGINAS INTERNAS Continuación del sistema de la maqueta. base.css no se toca: todo lo de aquí se apoya en sus tokens y sólo redefine uno, --muted, por accesibilidad. El porqué está en el bloque siguiente. ================================================================ */ /* ============ AJUSTE DE CONTRASTE AA (FASE 7.1) ============ El --muted de la maqueta, #6E7F8D, da 3.92:1 sobre --paper y 4.13:1 sobre blanco. WCAG 2.1 AA pide 4.5:1 para texto normal, y TODOS los usos de este token son texto de 13.5 a 15.5px: extractos de listados, descripciones del índice, fechas, pies de recorte y fichas de contacto. Ninguno llega a "texto grande", así que ninguno se acoge al 3:1. #657582 es el mismo tono y la misma saturación al 92 % de luminosidad: 4.50:1 sobre papel y 4.75:1 sobre blanco. Lo comprueba tools/contraste.js. Se redefine AQUÍ y no en base.css a propósito: base.css tiene que seguir siendo byte a byte el CSS de la maqueta aprobada —comparar-home.js lo verifica carácter a carácter— y como styles.css concatena base + páginas, esta declaración gana por orden de origen con la misma especificidad, sin !important y sin duplicar el resto del bloque de tokens. Queda declarada como desviación autorizada 6 en tools/comparar-home.js. ================================================================ */ /* ============ CELESTE LEGIBLE SOBRE FONDO CLARO (FASE 13) ============ El celeste de la maqueta, #56B4D3, da 2.37:1 sobre blanco y 2.25:1 sobre el papel: es un color pensado para fondo navy, donde da 7.05:1. Sobre superficie clara lo usaban los sobretítulos, las fechas de los listados, los rótulos de documentos y el descriptor de las alianzas, todos de 11 a 12px, y ninguno se leía. El nuevo token es el mismo tono (194 grados) con la luminosidad bajada: 5.66:1 sobre blanco y 5.37:1 sobre papel. Lo comprueba tools/contraste.js. El bloque va aparte del :root de arriba a propósito: un comentario dentro de una declaración de tokens confunde a los verificadores que los leen del CSS servido. */ :root{ --muted:#657582; } :root{ --sky-700:#1F6F8C; } /* ============ PAGE-HERO ============ */ .page-hero{position:relative;background:var(--navy-950);overflow:hidden} .page-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(900px 460px at 88% -20%, rgba(86,180,211,.12), transparent 60%), radial-gradient(760px 480px at -6% 120%, rgba(27,75,122,.32), transparent 58%); } .page-hero-in{position:relative;z-index:2;padding-block:190px 74px} .page-hero h1{ color:#fff; font-size:clamp(40px,5.4vw,72px);line-height:1.04;letter-spacing:-.015em; max-width:20ch;text-wrap:balance; } .page-hero .bajada{ margin:26px 0 0;max-width:60ch; font-family:var(--serif-text);font-size:17.5px;line-height:1.8; color:rgba(255,255,255,.7);text-wrap:pretty; } /* Con imagen destacada de fondo: la legibilidad manda sobre la foto. */ .page-hero.con-media .media{position:absolute;inset:0;z-index:0} .page-hero.con-media .media img{ width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.04) brightness(.86); opacity:.30; } .page-hero.con-media .media::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg, rgba(8,22,39,.62) 0%, rgba(8,22,39,.44) 40%, rgba(8,22,39,.96) 100%), linear-gradient(90deg, rgba(8,22,39,.88) 0%, rgba(8,22,39,.46) 70%, rgba(8,22,39,.6) 100%), linear-gradient(0deg, rgba(27,75,122,.26), rgba(27,75,122,.26)); } /* Migas de pan */ .breadcrumb{margin:0 0 24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.44)} .breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .breadcrumb li{display:flex;align-items:center;gap:10px} .breadcrumb li+li::before{content:"/";color:rgba(255,255,255,.24)} .breadcrumb a{color:rgba(255,255,255,.6);transition:color .2s ease} .breadcrumb a:hover{color:var(--sky-400)} .breadcrumb [aria-current="page"]{color:rgba(255,255,255,.44)} /* Meta del page-hero (fecha + categoría) */ .hero-tags{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 20px; font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sky-400)} .hero-tags .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)} .hero-tags time{color:rgba(255,255,255,.5);letter-spacing:.12em} /* ============ CUERPO EDITORIAL ============ */ .seccion{padding-block:clamp(72px,8vw,110px)} .prosa{max-width:68ch;font-family:var(--serif-text);font-size:17.5px;line-height:1.85;color:var(--ink)} .prosa.grande{font-size:18px;line-height:1.9} .prosa p{margin:0 0 26px} .prosa p:last-child{margin-bottom:0} .prosa strong{font-weight:600;color:var(--navy-900)} .prosa a{border-bottom:1px solid var(--line);transition:border-color .2s ease} .prosa a:hover{border-color:var(--sky-400)} /* Título documental bajo el H1 de un caso */ .titulo-doc{ margin:0 0 34px;max-width:76ch; font-size:13.5px;line-height:1.7;letter-spacing:.02em; color:var(--muted); } .titulo-doc b{display:block;margin-bottom:5px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-700)} /* ============ FRANJA CTA REUTILIZABLE ============ */ .cta-franja{background:var(--navy-900);position:relative;overflow:hidden} .cta-franja::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(900px 440px at 92% 0%, rgba(86,180,211,.10), transparent 60%); } .cta-in{ position:relative;padding-block:clamp(58px,6.5vw,86px); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px; } .cta-in h2{color:#fff;font-size:clamp(28px,3.2vw,40px);line-height:1.15;max-width:18ch} .cta-in p{margin:12px 0 0;font-family:var(--serif-text);font-size:16px;color:rgba(255,255,255,.6);max-width:44ch} /* Enlace al listado completo, al pie del carrusel de la home. */ .cases-in>.link-line{margin-top:34px} /* ============ ÍNDICE DE SERVICIOS RELACIONADOS ============ */ .relacionados{background:var(--paper)} .rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;border-top:1px solid var(--line)} .rel-grid a{ display:block;padding:30px 26px 30px 0;border-bottom:1px solid var(--line); transition:padding-left .3s var(--ease); } .rel-grid a:hover{padding-left:14px} .rel-grid .t{display:block;font-family:var(--serif);font-size:23px;line-height:1.2;color:var(--navy-900);transition:color .2s ease} .rel-grid a:hover .t{color:var(--blue-600)} .rel-grid .d{display:block;margin-top:9px;font-family:var(--serif-text);font-size:14.5px;line-height:1.65;color:var(--muted)} /* ============ EQUIPO ============ */ /* FASE 11. Cada persona tiene página propia en /equipo// y /equipo/ es el índice: el fundador solo y centrado, y el resto del equipo en una cuadrícula con nombre, cargo, correo y —quien lo tiene— teléfono a la vista. La tarjeta entera es un enlace a la página; la ficha de contacto va fuera del enlace, porque un no puede contener otros . El modal de semblanza de la fase 5 se retiró. */ /* EL MARCO MANDA, LAS FOTOS OBEDECEN. `display:block` es obligatorio y no decorativo: .retrato es un , y dentro de un enlace no es ítem de grid, así que sin esta línea se queda `inline` e ignora aspect-ratio, width, height y overflow — que fue exactamente el fallo de la fase 5. El marco tiene dimensión propia siempre, aunque la imagen no haya cargado, no exista o el JS no corra. */ .retrato{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:3px; /* Mientras carga, el marco es del color del fondo de la silueta y no navy: así no hay un rectángulo oscuro que aparezca y desaparezca. */ background:var(--paper); } /* FASE 12: los retratos llegan ya compuestos desde el build (src/retratos.js): silueta sobre un fondo común, con el tono unificado en la propia imagen. Aquí no se aplica ningún filtro: un contrast() sobre un fondo plano lo desplaza y, en el hero del perfil, dibujaría una costura contra la banda. Tampoco hay foto alternativa al pasar el cursor: se retiró por decisión del cliente. Las imágenes de casos y noticias conservan su duotono navy, que uniforma el material de stock heredado. */ .retrato img{ position:absolute;inset:0; width:100%;height:100%;object-fit:cover;object-position:center top; } /* Las fotografías de las alianzas no pasan por la composición: conservan la normalización sutil de color que tenían (decisión del GATE 2: rostros a color). */ .aliado .retrato img{filter:saturate(.88) contrast(1.03)} /* Placeholder de iniciales: exactamente el mismo marco .retrato, de modo que mide lo mismo que cualquier foto vecina. Las iniciales se centran en capa aparte para no tocar el display del marco. */ .retrato.iniciales span{ position:absolute;inset:0; display:grid;place-items:center; font-family:var(--serif);font-size:clamp(38px,7vw,58px);font-weight:500; letter-spacing:.06em;color:rgba(255,255,255,.62); } /* La tarjeta-enlace: retrato, nombre, cargo y la pista "Ver semblanza". Todo dentro del es con display:block: los márgenes verticales no aplican a las cajas en línea (fallo de la fase 5.1). */ .tarjeta-enlace{display:block;color:inherit} .tarjeta-enlace .nombre{ display:block;margin-top:18px; font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.25; color:var(--navy-900);transition:color .25s ease; } .tarjeta-enlace:hover .nombre{color:var(--blue-600)} .tarjeta-enlace .cargo{ display:block;margin:8px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--blue-600); } .tarjeta-enlace .ver{ display:inline-flex;align-items:center;gap:7px;margin-top:12px; font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--blue-600); transition:gap .3s var(--ease); } .tarjeta-enlace:hover .ver{gap:13px} .tarjeta-enlace:focus-visible{outline:2px solid var(--sky-400);outline-offset:6px;border-radius:2px} /* El fundador: solo, centrado y con el retrato más grande del índice. */ .eyebrow--centro{text-align:center} .fundador{max-width:560px;margin:0 auto;text-align:center} .fundador .retrato{max-width:400px;margin:0 auto;background:var(--white)} /* su silueta va sobre blanco */ .fundador .nombre{margin-top:26px;font-size:clamp(30px,3.6vw,42px);font-weight:500;letter-spacing:-.01em;line-height:1.1} .fundador .cargo{margin-top:12px;font-size:12.5px;letter-spacing:.24em} /* Primera frase de su semblanza, tal cual está en los datos. */ .fundador-lead{ display:block;margin:20px auto 0;max-width:48ch; font-family:var(--serif-text);font-size:17.5px;line-height:1.7;color:var(--ink); } .fundador .ver{margin-top:16px} .fundador .ficha-contacto{ display:flex;flex-wrap:wrap;justify-content:center;gap:8px 30px; margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:15.5px; } .fundador .ficha-contacto li{padding:0;border:0} .equipo-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:48px 34px; } .miembro .retrato{max-width:340px} .miembro .ficha-contacto{margin-top:14px;font-size:14px} .equipo-nota{margin:0 0 46px;font-size:15px;color:var(--muted);max-width:56ch} .ficha-contacto{margin:20px 0 0;padding:0;list-style:none;font-size:14.5px} .ficha-contacto li{padding:7px 0;border-top:1px solid var(--line);color:var(--muted)} .ficha-contacto a{border-bottom:1px solid var(--line)} .ficha-contacto a:hover{border-color:var(--sky-400)} /* ============ PÁGINA DE PERFIL (fase 11) ============ */ /* Banda clara con el nombre en grande y el retrato apoyado en el borde inferior, barra de contacto y semblanza en columna de lectura con ficha lateral. El fondo de la banda es --paper y no un gris propio: es la única superficie clara sobre la que --muted cumple AA (tools/contraste.js lo exige en toda superficie clara). */ /* Banda PLANA: la silueta del hero viene sobre --paper exacto y se funde con ella; un degradado detrás dibujaría el rectángulo de la imagen. */ .perfil-hero{position:relative;background:var(--paper);overflow:hidden} .perfil-hero-in{position:relative;z-index:1;padding-top:160px} .perfil-hero .breadcrumb{color:var(--muted)} .perfil-hero .breadcrumb a{color:var(--muted)} .perfil-hero .breadcrumb a:hover{color:var(--blue-600)} .perfil-hero .breadcrumb li+li::before{color:var(--line)} .perfil-hero .breadcrumb [aria-current="page"]{color:var(--muted)} .perfil-presentacion{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px; align-items:end;margin-top:16px; } .perfil-titulo{padding-bottom:64px} .perfil-hero h1{ font-size:clamp(42px,6.4vw,88px);line-height:1;letter-spacing:-.02em; color:var(--navy-900);text-wrap:balance; } .perfil-cargo{margin:20px 0 0;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-600)} /* El retrato termina exactamente donde termina la banda: la barra de contacto arranca justo debajo de él. */ /* Sin sombra, sin radio, sin borde: la persona se apoya en la banda, como en la referencia; el marco sólo fija la proporción. */ .perfil-retrato{width:100%;max-width:400px;justify-self:end;border-radius:0} .perfil-contacto{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .perfil-contacto-in{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:12px 32px;padding-block:20px; } .perfil-datos{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;align-items:center;gap:8px 0; font-size:17px;color:var(--ink); } .perfil-datos li{display:flex;align-items:center} .perfil-datos li+li::before{content:"";width:1px;height:18px;margin:0 18px;background:var(--line)} .perfil-datos .lugar{font-weight:600;color:var(--navy-900)} .perfil-datos a{color:var(--navy-900);border-bottom:1px solid var(--line);transition:border-color .2s ease,color .2s ease} .perfil-datos a:hover{color:var(--blue-600);border-color:var(--sky-400)} .perfil-cuerpo-in{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:56px 72px;align-items:start} .perfil-aside{position:sticky;top:110px} .perfil-aside .eyebrow{margin-bottom:6px} .perfil-aside dl{margin:0;font-size:14.5px;line-height:1.55} .perfil-aside dt{margin-top:18px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .perfil-aside dd{margin:4px 0 0;color:var(--ink)} .perfil-aside dd a{border-bottom:1px solid var(--line)} .perfil-aside dd a:hover{border-color:var(--sky-400)} .perfil-semblanza{max-width:70ch} .perfil-semblanza .perfil-lead{font-size:clamp(20px,2.1vw,23px);line-height:1.6;color:var(--navy-900)} /* Zona táctil de 44px en móvil, con el mismo criterio del bloque de accesibilidad de más abajo: los enlaces con vecinos verticales (la barra de contacto, que en móvil se apila) crecen con padding real; el enlace suelto de la ficha lateral, con una capa invisible centrada sobre el texto. */ @media (max-width:760px){ .perfil-datos a{display:inline-block;padding:10px 0} .perfil-aside dd a{position:relative} .perfil-aside dd a::before{ content:"";position:absolute;left:0;right:0; top:50%;transform:translateY(-50%);height:44px; } } @media (max-width:960px){ .perfil-presentacion{grid-template-columns:1fr;gap:28px} .perfil-titulo{padding-bottom:0} .perfil-retrato{max-width:300px;justify-self:start} .perfil-cuerpo-in{grid-template-columns:1fr;gap:36px} .perfil-aside{position:static} } @media (max-width:560px){ .perfil-hero-in{padding-top:124px} .perfil-datos{flex-direction:column;align-items:flex-start;gap:10px} .perfil-datos li+li::before{display:none} .fundador .ficha-contacto{flex-direction:column;gap:10px} } /* ============ SALTAR AL CONTENIDO ============ */ /* Primer elemento enfocable de la página. Sólo se ve al recibir el foco. */ .saltar{ position:fixed;top:0;left:0;z-index:100; transform:translateY(-120%); padding:14px 24px; background:var(--white);color:var(--navy-950); font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; border-radius:0 0 3px 0; box-shadow:0 8px 24px rgba(8,22,39,.28); transition:transform .2s var(--ease); } .saltar:focus{transform:none} @media (prefers-reduced-motion: reduce){.saltar{transition:none}} /* ============ BOTÓN FLOTANTE DE WHATSAPP ============ */ /* No es el verde genérico: usa el navy y el celeste del sistema para que parezca parte del sitio y no un adhesivo pegado encima. */ .wa-flotante{ position:fixed;right:22px;bottom:22px;z-index:80; width:56px;height:56px; display:grid;place-items:center; border-radius:50%; background:var(--navy-800); border:1px solid rgba(86,180,211,.45); color:#fff; box-shadow:0 10px 30px rgba(8,22,39,.34); opacity:0;transform:translateY(10px) scale(.94); /* `visibility:hidden` lo saca del orden de tabulación y del árbol de accesibilidad mientras no toca mostrarlo, y a diferencia de `display:none` deja que la transición funcione. El estado oculto es el del CSS, no el que ponga el JS: si el script no llegara a correr, el botón simplemente no aparece — nunca queda ocupando sitio sin verse. */ visibility:hidden; transition:opacity .3s var(--ease),transform .3s var(--ease), background .25s ease,color .25s ease,visibility 0s linear .3s; } .wa-flotante.visible{ opacity:1;transform:none;visibility:visible; transition:opacity .3s var(--ease),transform .3s var(--ease), background .25s ease,color .25s ease,visibility 0s; } .wa-flotante:hover{ background:var(--sky-400);color:var(--navy-950); transform:translateY(-3px); box-shadow:0 16px 38px rgba(8,22,39,.42); } .wa-flotante:focus-visible{outline:2px solid var(--sky-400);outline-offset:4px} @media (prefers-reduced-motion: reduce){ .wa-flotante{transition:none;transform:none} .wa-flotante:hover{transform:none} } @media (max-width:560px){ .wa-flotante{right:16px;bottom:16px} } /* ============ LISTADOS EDITORIALES ============ */ .lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .lista li{border-bottom:1px solid var(--line)} .lista a{ display:grid; grid-template-columns:132px minmax(0,1fr) auto; align-items:start;gap:8px 34px; padding:32px 6px;position:relative; transition:padding .35s var(--ease); } .lista a::before{ content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0; background:var(--sky-400);transition:width .45s var(--ease); } .lista a:hover{padding-left:16px} .lista a:hover::before{width:100%} .lista .miniatura{ aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--navy-900); } .lista .miniatura img{ width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.04) brightness(.92); transition:filter .4s ease,transform .5s var(--ease); } .lista a:hover .miniatura img{filter:grayscale(.55) contrast(1.05) brightness(.98);transform:scale(1.04)} .lista .meta{ display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-bottom:11px; font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--sky-700); } .lista .meta time{color:var(--muted);letter-spacing:.11em} .lista .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line)} .lista .t{ display:block;font-family:var(--serif);font-weight:500; font-size:clamp(22px,2.2vw,28px);line-height:1.2;color:var(--navy-900); transition:color .25s ease;text-wrap:pretty; } .lista a:hover .t{color:var(--blue-600)} .lista .d{display:block;margin-top:11px;max-width:62ch;font-family:var(--serif-text);font-size:15.5px;line-height:1.72;color:var(--muted);text-wrap:pretty} .lista .arr{font-size:22px;color:var(--line);justify-self:end;align-self:center;transition:color .25s ease,transform .3s var(--ease)} .lista a:hover .arr{color:var(--sky-400);transform:translateX(6px)} /* ============ DETALLE DE CASO / NOTICIA ============ */ .fuente-cita{ margin:46px 0 0;padding:24px 0 0;border-top:1px solid var(--line); font-family:var(--serif-text);font-style:italic;font-size:15.5px;line-height:1.75;color:var(--muted); } .fuente-cita ul{list-style:none;margin:10px 0 0;padding:0} .fuente-cita li{margin-top:6px} .fuente-cita a{font-style:normal;border-bottom:1px solid var(--line)} .fuente-cita a:hover{border-color:var(--sky-400)} .recorte{margin:40px 0 0} .recorte img{width:100%;height:auto;border:1px solid var(--line);border-radius:2px} .recorte figcaption{margin-top:12px;font-size:13.5px;color:var(--muted)} .nav-entradas{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0} .nav-entradas a{ display:block;padding:34px 30px 34px 0; transition:padding .3s var(--ease); } .nav-entradas a.sig{text-align:right;padding:34px 0 34px 30px;border-left:1px solid var(--line)} .nav-entradas a:hover{padding-left:14px} .nav-entradas a.sig:hover{padding-left:30px;padding-right:14px} .nav-entradas .k{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-700);margin-bottom:10px} .nav-entradas .t{display:block;font-family:var(--serif);font-size:20px;line-height:1.28;color:var(--navy-900);transition:color .2s ease} .nav-entradas a:hover .t{color:var(--blue-600)} /* ============ DOCUMENTOS ============ */ .doc-bloque+.doc-bloque{margin-top:76px} .doc-bloque h2{font-size:clamp(28px,3.2vw,40px)} .doc-bloque .sub{margin:12px 0 34px;font-size:15px;color:var(--muted);max-width:56ch} .docs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .docs li{border-bottom:1px solid var(--line)} .docs a{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px; padding:19px 6px;transition:padding .3s var(--ease),background .25s ease; } .docs a:hover{padding-left:14px;background:rgba(86,180,211,.05)} .docs .ico{width:19px;height:19px;flex:none;color:var(--muted);transition:color .25s ease} .docs a:hover .ico{color:var(--sky-700)} .docs .t{font-family:var(--serif-text);font-size:16.5px;line-height:1.5;color:var(--ink);text-wrap:pretty} .docs .f{font-size:13px;letter-spacing:.05em;color:var(--muted);white-space:nowrap} .docs .n{ display:inline-block;min-width:2.2em;margin-right:2px; font-size:12.5px;font-weight:600;color:var(--sky-700); font-variant-numeric:tabular-nums; } /* ============ ALIANZAS ============ */ .aliado{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:52px;align-items:start; } .aliado+.aliado{margin-top:clamp(64px,7vw,96px);padding-top:clamp(64px,7vw,96px);border-top:1px solid var(--line)} .aliado .retrato{max-width:380px} .aliado h2{font-size:clamp(30px,3.4vw,42px)} .aliado .descriptor{margin:10px 0 26px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-700)} /* Sin fotografía: marca tipográfica sobria en vez de un hueco. */ .marca-aliado{ display:grid;place-items:center;aspect-ratio:4/5;max-width:380px; background:var(--navy-900);border-radius:2px;padding:30px;text-align:center; } .marca-aliado span{font-family:var(--serif);font-size:clamp(30px,4vw,42px);line-height:1.15;color:rgba(255,255,255,.9)} .marca-aliado small{display:block;margin-top:14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42)} /* ============ CONTACTO ============ */ .mapa{margin-top:0;border:1px solid var(--line-dark);border-radius:3px;overflow:hidden;background:var(--navy-950)} .mapa iframe{display:block;width:100%;height:420px;border:0;filter:grayscale(1) contrast(1.05) invert(.92)} @media (prefers-color-scheme: dark){.mapa iframe{filter:grayscale(1) contrast(1.05) invert(.92)}} /* ============ 404 ============ */ .e404{min-height:76vh;display:grid;place-items:center;background:var(--navy-950);position:relative;overflow:hidden} .e404::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(900px 500px at 70% -10%, rgba(86,180,211,.12), transparent 60%); } .e404-in{position:relative;text-align:center;padding:130px 28px 90px;max-width:620px} .e404 .num{font-family:var(--serif);font-size:clamp(72px,12vw,140px);line-height:1;color:rgba(255,255,255,.14)} .e404 h1{margin-top:8px;color:#fff;font-size:clamp(30px,4.4vw,48px);line-height:1.1} .e404 p{margin:22px auto 0;max-width:44ch;font-family:var(--serif-text);font-size:17px;line-height:1.8;color:rgba(255,255,255,.66)} .e404 .acciones{margin-top:38px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center} /* ============ RESPONSIVE ============ */ @media (max-width:960px){ .aliado{grid-template-columns:1fr;gap:32px} .aliado .retrato,.marca-aliado{max-width:340px} } @media (max-width:960px){ .lista a{grid-template-columns:100px minmax(0,1fr);grid-template-areas:"mini cuerpo";gap:8px 22px;padding:26px 4px} .lista .miniatura{grid-area:mini} .lista .cuerpo{grid-area:cuerpo} .lista .arr{display:none} .nav-entradas{grid-template-columns:1fr} .nav-entradas a.sig{text-align:left;padding:34px 30px 34px 0;border-left:0;border-top:1px solid var(--line)} .nav-entradas a.sig:hover{padding-left:14px;padding-right:30px} } @media (max-width:760px){ .page-hero-in{padding-block:150px 58px} .cta-in{flex-direction:column;align-items:flex-start;gap:22px} .docs a{grid-template-columns:auto minmax(0,1fr);gap:14px} .docs .f{grid-column:2;white-space:normal} .mapa iframe{height:320px} } @media (max-width:560px){ .lista a{grid-template-columns:1fr;grid-template-areas:"mini" "cuerpo";gap:16px} .lista .miniatura{max-width:200px} } /* ============ SECCIONES CON FONDO ============ Sustituyen a los style en línea que llevaban estas dos secciones. */ .seccion-papel{background:var(--paper)} .seccion-mapa{padding-top:0;background:var(--navy-900)} /* ============ TÍTULOS DE COLUMNA DEL FOOTER ============ La maqueta los marcaba como

, lo que dejaba un salto de nivel en las 48 páginas (h1 o h2 y de golpe h4). Pasan a

, que es su sitio real bajo el título de la página, y aquí se repiten los estilos que base.css les daba como h4: ese archivo es el CSS de la maqueta y no se toca. El aspecto es idéntico. */ .foot-col h2{ margin:0 0 16px; font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.4);font-family:var(--sans); } /* ============ TARGETS TÁCTILES ============ En pantallas táctiles todo lo pulsable debe medir al menos 44x44. Se corrige sólo por debajo de 760px, que es donde importa, para no alterar el escritorio. Donde el enlace vive solo en su fila (migas) se agranda el área con padding y se compensa con margen negativo: el área táctil crece y la posición no se mueve. Donde hay vecinos verticales (footer, fichas de contacto) no se usa esa compensación a propósito: áreas solapadas provocan pulsaciones equivocadas, así que se separa de verdad reasignando el espacio que ya tenían los márgenes de la lista. */ @media (max-width:760px){ .logo{display:inline-flex;align-items:center;min-height:44px} /* Vecinos verticales: se separan de verdad reasignando el margen de la lista. */ .foot-col li{margin-bottom:0} .foot-col a{display:block;padding:11.5px 0} .ficha-contacto li{padding:0} .ficha-contacto a{display:inline-block;padding:11px 0} /* Enlaces sueltos: el área crece con una capa invisible centrada sobre el texto, así que la posición no se mueve ni un píxel. Sólo se aplica donde no hay otro enlace justo encima o debajo, para no solapar áreas. */ .link-line,.c-list a,.alt-mail a,.foot-base a,.breadcrumb a{position:relative} .link-line::before,.c-list a::before,.alt-mail a::before, .foot-base a::before,.breadcrumb a::before{ content:"";position:absolute;left:0;right:0; top:50%;transform:translateY(-50%);height:44px; } /* Las migas quedan 2px por debajo del mínimo a lo ancho por lo corto del texto. */ .breadcrumb a::before{left:-2px;right:-2px} } /* ============ ALTURAS ESTABLES EN MÓVIL ============ En iOS la unidad `vh` mide con la barra de direcciones retraída, así que un `min-height:94vh` deja el hero más alto que la pantalla y empuja el contenido. `svh` usa el viewport pequeño —el que ve el usuario al llegar— y no salta cuando la barra aparece o desaparece. Se declara primero en `vh` y después en `svh`: un navegador que no conozca `svh` ignora la segunda y conserva la primera. El hero vive en base.css, que es el CSS de la maqueta y no se toca; se corrige aquí, que se concatena después. */ .hero{min-height:94vh;min-height:94svh} .e404{min-height:76vh;min-height:76svh} /* ============ SOBRETÍTULOS LEGIBLES SOBRE FONDO CLARO (FASE 13) ============ .eyebrow nace en base.css con --sky-400 y se usa en las dos clases de superficie: navy en los page-hero y en la franja de cifras, papel o blanco en el resto. Pasa a --sky-700 por defecto —que es donde más aparece y donde no se leía— y el celeste claro se restituye ahí donde el fondo es navy. Así un sobretítulo nuevo sobre fondo claro nace accesible sin que nadie tenga que acordarse. */ .eyebrow{color:var(--sky-700)} .page-hero .eyebrow,.stats .eyebrow,.eyebrow--dark{color:var(--sky-400)} /* ============ LA PÁGINA SE LEE SIN JAVASCRIPT (FASE 13) ============ .rv parte de opacity:0 y sólo la clase .in que añade main.js la revela: sin JavaScript la home quedaba en blanco de la primera sección hacia abajo. El script de una línea del cambia no-js por js antes del primer pintado, así que esta regla sólo actúa cuando de verdad no hay JavaScript y no provoca ningún parpadeo. */ html.no-js .rv{opacity:1;transform:none} /* ================================================================ REDISEÑO INSTITUCIONAL DE LA HOME (FASE 10) Se concatena después de base.css y paginas.css. base.css sigue siendo byte a byte el CSS de la maqueta: todo lo nuevo vive aquí y gana por orden de origen con la misma especificidad, sin !important. En el GATE A sólo la home lleva el rediseño —header mínimo, menú overlay, hero de marca, muro de prensa, mosaico y contacto formal—; las 47 internas conservan su header hasta el GATE B. ================================================================ */ /* ============ HEADER MÍNIMO ============ */ .site-header--nuevo .header-in{gap:32px} .site-header--nuevo .logo{transition:opacity .35s var(--ease),visibility 0s} /* En la home el logo pequeño vive oculto sobre el hero —el grande está en el bloque de marca— y aparece con el fondo navy al pasar los 60px de scroll. */ .site-header--home .logo{opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s} .site-header--home.scrolled .logo{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s} /* Páginas internas: navy sólido desde el inicio. */ .site-header--solido{background:var(--navy-950)} /* En las internas el header ya nace navy: al pasar los 60px .scrolled sólo cambiaba el relleno, y ese salto de 22 a 12px desplazaba el contenido fijo de debajo. Compactar el header es un recurso de la home, donde nace transparente sobre el hero. De paso se ahorra un backdrop-filter que aquí no tiene nada que difuminar. */ .site-header--solido.scrolled{padding:22px 0;background:var(--navy-950);-webkit-backdrop-filter:none;backdrop-filter:none} .hdr-acciones{display:flex;align-items:center;gap:36px} .hdr-contacto{ position:relative;padding:8px 0; font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.78);transition:color .25s ease; } .hdr-contacto::after{content:"";position:absolute;left:0;bottom:4px;height:1px;width:0;background:var(--sky-400);transition:width .3s var(--ease)} .hdr-contacto:hover,.hdr-contacto[aria-current="page"]{color:#fff} .hdr-contacto:hover::after,.hdr-contacto[aria-current="page"]::after{width:100%} .menu-btn{ display:inline-flex;align-items:center;gap:12px; min-height:44px;padding:8px 0 8px 4px;background:none;border:0;cursor:pointer; font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.9);transition:color .25s ease; } .menu-btn:hover{color:#fff} .menu-btn-lineas{display:block;width:22px} .menu-btn-lineas span{display:block;height:1.5px;background:currentColor;margin:5px 0;transition:width .3s var(--ease)} .menu-btn-lineas span:nth-child(2){width:16px} .menu-btn:hover .menu-btn-lineas span:nth-child(2){width:22px} @media (max-width:760px){ .site-header--nuevo .logo img{height:26px} /* El overlay ya lleva Contacto: en móvil el header queda logo + Menú. */ .hdr-contacto{display:none} } /* ============ MENÚ OVERLAY ============ */ .menu-overlay{ position:fixed;inset:0;z-index:90; background:rgba(8,22,39,.96); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); overflow-y:auto;-webkit-overflow-scrolling:touch; opacity:0;transition:opacity .35s var(--ease); } .menu-overlay[hidden]{display:none} .menu-overlay.abierto{opacity:1} .menu-in{ position:relative;min-height:100%; display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.75fr);gap:72px; padding-block:118px 70px; transform:translateY(12px);transition:transform .5s var(--ease); } .menu-overlay.abierto .menu-in{transform:none} .menu-cerrar{ position:absolute;top:22px;right:28px; width:44px;height:44px;border-radius:50%; border:1px solid rgba(255,255,255,.28);background:none;color:#fff; font-size:18px;line-height:1;cursor:pointer; transition:background .25s ease,color .25s ease,border-color .25s ease; } .menu-cerrar:hover{background:#fff;color:var(--navy-950);border-color:#fff} .menu-lista,.menu-sub{list-style:none;margin:0;padding:0} .menu-lista>li{border-bottom:1px solid var(--line-dark)} .menu-entrada{ display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%; padding:16px 0;background:none;border:0;cursor:pointer;text-align:left; font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.6vw,46px);line-height:1.1;letter-spacing:-.01em; color:#fff;transition:color .25s ease; } .menu-entrada:hover,.menu-entrada[aria-current="page"],.menu-grupo.activo>.menu-entrada{color:var(--sky-400)} .menu-entrada .chev{ width:12px;height:12px;flex:none;margin-right:6px; border-right:1.5px solid rgba(255,255,255,.5);border-bottom:1.5px solid rgba(255,255,255,.5); transform:translateY(-4px) rotate(45deg);transition:transform .3s var(--ease); } .menu-entrada[aria-expanded="true"] .chev{transform:translateY(2px) rotate(-135deg)} .menu-sub{ display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 36px; padding:2px 0 18px; } /* Cerrado quiere decir cerrado. El atributo hidden que pone main.js no bastaba: la regla de arriba declara display:grid y una hoja de autor gana siempre al [hidden]{display:none} del navegador, así que las sub-entradas seguían visibles y tabulables mientras aria-expanded decía "false". Mismo patrón que .menu-overlay. */ .menu-sub[hidden]{display:none} .menu-sub a{ display:block;padding:7px 0; font-family:var(--sans);font-size:15px;line-height:1.5;color:rgba(255,255,255,.72); transition:color .2s ease,padding-left .25s var(--ease); } .menu-sub a:hover{color:#fff;padding-left:6px} .menu-sub a[aria-current="page"]{color:var(--sky-400)} .menu-datos{ padding:8px 0 0 48px;border-left:1px solid var(--line-dark); font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.72); } .menu-k{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42)} .menu-datos p{margin:0 0 26px} .menu-datos a{color:rgba(255,255,255,.85);border-bottom:1px solid rgba(86,180,211,.4);transition:color .2s ease,border-color .2s ease} .menu-datos a:hover{color:var(--sky-400);border-color:var(--sky-400)} body.menu-abierto{overflow:hidden} @media (max-width:960px){ .menu-in{grid-template-columns:1fr;gap:36px;padding-block:96px 50px} .menu-entrada{font-size:32px;padding:13px 0} .menu-sub{grid-template-columns:1fr} .menu-sub a{padding:10px 0} .menu-datos{padding:26px 0 0;border-left:0;border-top:1px solid var(--line-dark)} } @media (prefers-reduced-motion: reduce){ .menu-overlay,.menu-in,.menu-entrada .chev,.menu-sub a,.menu-btn-lineas span{transition:none} .menu-in{transform:none} } /* ============ HERO: VIDEO + MARCA ============ */ .hero--marca{ min-height:100vh;min-height:100svh; display:flex;align-items:center;justify-content:center; } /* El poster y el video van sin `filter`: el tratamiento está horneado en los archivos, y un filter sobre un video en reproducción es costoso. La opacidad sí es barata, y deja pasar el navy del fondo. El overlay es el ::after de .hero-media, los degradados navy de la maqueta. */ .hero--marca .hero-media img,.hero--marca .hero-media video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:none;animation:none;transform:none; opacity:.82; } .hero--marca .hero-media video{opacity:0;transition:opacity 1.2s var(--ease)} .hero--marca.video-activo .hero-media video{opacity:.82} /* Cuando el video ya reproduce, el poster se retira: si se quedara debajo al 82 % se transparentaría como imagen fija bajo la imagen en movimiento. El tono no cambia, porque el navy del fondo sigue pasando por la opacidad del video. */ .hero--marca .hero-media img{transition:opacity 1.2s var(--ease)} .hero--marca.video-activo .hero-media img{opacity:0} /* Si ninguna sirvió, main.js marca .video-fallido: el