/* =========================================================== CCE · hoja de estilos única Concepto: papel cuadriculado de economista + tipografía grande. Un solo gesto de color: el rojo de la lapicera que corrige. =========================================================== */ :root{ --paper:#E9EAE3; --panel:#F3F3EE; --ink:#191C15; --ink-soft:#52564A; --rule:rgba(25,28,21,.16); --rule-soft:rgba(25,28,21,.08); --red:#C4321C; --navy:#0C101E; --gold:#D4AC3E; --gap:clamp(20px,5vw,64px); --measure:34rem; --max:78rem; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip} body{overflow-x:clip} body{ margin:0; background-color:var(--paper); background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px); background-size:34px 34px; color:var(--ink); font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.5; font-variant-numeric:tabular-nums; } h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:.98} p{margin:0} a{color:inherit} img{max-width:100%;height:auto;display:block} :focus-visible{outline:2px solid var(--red);outline-offset:3px} .skip{ position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper); padding:12px 18px;z-index:99; } .skip:focus{left:0} /* =========================================================== Temas de scroll: el color de fondo y de la letra cambian según la sección que estés mirando. Las variables se redefinen sobre y todo lo demás las hereda. =========================================================== */ body{transition:background-color .55s ease, color .55s ease} body.t-papel{ --paper:#E9EAE3; --ink:#191C15; --ink-soft:#52564A; --rule:rgba(25,28,21,.16); --rule-soft:rgba(25,28,21,.08); --red:#C4321C; --panel:#F3F3EE; } body.t-rojo{ --paper:#A8281A; --ink:#FBF6EC; --ink-soft:rgba(251,246,236,.84); --rule:rgba(251,246,236,.26); --rule-soft:rgba(251,246,236,.05); --red:#F7D24A; --panel:rgba(255,255,255,.07); } body.t-oro{ --paper:#E8C24E; --ink:#171A12; --ink-soft:#4B4C40; --rule:rgba(23,26,18,.18); --rule-soft:rgba(23,26,18,.05); --red:#A32713; --panel:#F8EBBE; } body.t-navy{ --paper:#0C101E; --ink:#F2F1EA; --ink-soft:rgba(242,241,234,.74); --rule:rgba(242,241,234,.20); --rule-soft:rgba(242,241,234,.04); --red:#D4AC3E; --panel:rgba(255,255,255,.06); } /* la marca del libro es tinta: sobre fondo oscuro se invierte */ .tres-mark{width:32px;height:auto;margin-bottom:18px;filter:invert(1)} /* fila activa de la lista mientras se scrollea (sirve en celular, donde no existe el hover) */ /* ---------- el contenido va centrado en la página ---------- */ .hero-inner,.prose-block,.tres-sticky,.services,.team,.contact,.foot, .corte-inner,.price-inner,.steps li,.marquee span{margin-left:auto;margin-right:auto} /* ---------- titulares que se encienden ---------- */ .fill-w{transition:opacity .35s ease} .js [data-fill] .fill-w{opacity:.2} .js [data-fill] .fill-w.on{opacity:1} /* ---------- círculo que barre el cambio de color ---------- */ main section{position:relative} .wipe{ position:absolute;top:0;left:0;width:100%;height:100vh; overflow:hidden;z-index:-1;pointer-events:none; } .wipe::before{ content:"";position:absolute;left:50%;top:0; width:150vmax;height:150vmax;border-radius:50%; background:var(--c); transform:translate(-50%,-50%) scale(var(--s,0)); will-change:transform; transition:transform .1s linear; } /* ---------- marquesinas ---------- */ .marquee{ overflow:hidden;white-space:nowrap; padding:clamp(10px,2vh,22px) 0; margin-bottom:clamp(18px,3vh,34px); opacity:.68; font-weight:800;letter-spacing:-.03em;line-height:1; font-size:clamp(2rem,5.4vw,4.4rem); color:var(--red); } .marquee span{display:inline-block;will-change:transform} .cierre{ position:relative;overflow:hidden;background:#0C101E; border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); display:flex;align-items:center; min-height:clamp(240px,44vh,420px); } .cierre-video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 55%; } .cierre-scrim{ position:absolute;inset:0; background:linear-gradient(180deg, rgba(6,9,18,.62) 0%, rgba(6,9,18,.42) 55%, rgba(6,9,18,.75) 100%); } .marquee-xl{ position:relative;z-index:2;width:100%;opacity:.92;margin-bottom:0; font-size:clamp(2.6rem,9vw,7.5rem); padding:0;color:#fff;border:0; } .acento{color:var(--gold)} /* ---------- barra ---------- */ .bar{ position:sticky;top:0;z-index:50; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:12px var(--gap); border-bottom:1px solid var(--rule); background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(8px); transition:background-color .55s ease; } .bar::after{ content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%; background:var(--red);transform:scaleX(var(--sp,0));transform-origin:left; transition:transform .1s linear; } .bar-mark{width:19px;height:auto} .bar-brand{ display:flex;align-items:center;gap:11px; text-decoration:none; } .bar-brand img{height:30px;width:auto;transition:filter .55s ease} body.t-navy .bar-brand img, body.t-rojo .bar-brand img{filter:invert(1)} .bar-sigla{font-weight:800;letter-spacing:.01em;font-size:19px;line-height:1} .bar-nombre{ font-size:13.5px;color:var(--ink-soft);line-height:1; padding-left:11px;border-left:1px solid var(--rule); } @media (max-width:760px){ .bar-nombre{display:none} } .bar-nav{display:flex;align-items:center;gap:clamp(14px,3vw,30px);font-size:15px} .bar-nav a{text-decoration:none;color:var(--ink-soft)} .bar-nav a:hover{color:var(--ink)} .bar-nav a.actual{color:var(--ink);font-weight:600} .bar-cta{ color:var(--ink) !important;font-weight:600; border-bottom:2px solid var(--red);padding-bottom:1px; } @media (max-width:640px){ .bar-nav a:not(.bar-cta){display:none} } /* ---------- hero ---------- */ .hero{ position:relative; width:100%; min-height:clamp(440px,80vh,740px); display:flex;align-items:flex-end; overflow:hidden; background:var(--navy); border-bottom:1px solid var(--rule); } .hero-video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 45%; will-change:transform;transform:scale(1.08); } .hero-scrim{ position:absolute;inset:0; background: linear-gradient(95deg, rgba(6,9,18,.9) 0%, rgba(6,9,18,.62) 38%, rgba(6,9,18,.16) 66%, rgba(6,9,18,.42) 100%); } .hero-inner{ position:relative;z-index:2; width:100%;max-width:var(--max);margin:0; padding:clamp(48px,9vh,110px) var(--gap) clamp(40px,7vh,80px); } .hero-eyebrow{ font-size:14px;color:rgba(255,255,255,.66); margin-bottom:clamp(18px,4vh,34px); } .hero-title{ font-size:clamp(2.7rem,7.4vw,6rem); letter-spacing:-.045em;color:#fff; } .hero-title .line{display:block;overflow:hidden;padding-bottom:.04em} .hero-sub{ max-width:31rem;margin-top:clamp(20px,3vh,32px); font-family:Spectral,Georgia,serif;font-size:clamp(1.02rem,2vw,1.22rem); line-height:1.62;color:rgba(255,255,255,.8); } .hero-foot{ margin-top:clamp(26px,4vh,40px); display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px; } .hero-note{font-size:14px;color:rgba(255,255,255,.6);max-width:24rem} .hero .btn{background:var(--gold);color:var(--navy)} .hero .btn:hover{background:#fff} @media (max-width:620px){ .hero-foot{flex-direction:column;align-items:flex-start} .hero-scrim{background:linear-gradient(180deg, rgba(6,9,18,.5) 0%, rgba(6,9,18,.72) 45%, rgba(6,9,18,.9) 100%)} } /* ---------- botón ---------- */ .btn{ display:inline-block;text-decoration:none; background:var(--ink);color:var(--paper); font-weight:600;font-size:16px;letter-spacing:-.01em; padding:14px 26px;border:0;border-radius:0;cursor:pointer; font-family:inherit; transition:background .18s ease; } .btn:hover{background:var(--red)} /* ---------- manifiesto ---------- */ .prose-block{ display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:var(--gap); align-items:start; padding:clamp(50px,9vh,100px) var(--gap); max-width:var(--max); border-top:1px solid var(--rule); } .prose h2{ font-size:clamp(1.9rem,4.4vw,3.3rem);max-width:20ch; margin-bottom:.7em; } .prose p{ font-family:Spectral,Georgia,serif;font-size:1.08rem;line-height:1.72; max-width:var(--measure);margin-bottom:1.15em;color:var(--ink-soft); } .prose p:last-child{margin-bottom:0} .prose .lead{ font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.5; color:var(--ink);max-width:26ch;margin-bottom:1.4em; } .margin-note{ border-left:2px solid var(--red);padding-left:16px; font-size:14.5px;line-height:1.55;color:var(--ink-soft); position:sticky;top:90px; } .mn-video{width:100%;margin-bottom:18px;border:1px solid var(--rule);display:block} .mn-label{display:block;font-weight:800;color:var(--ink);margin-bottom:6px} @media (max-width:860px){ .prose-block{grid-template-columns:1fr} .margin-note{position:static;max-width:var(--measure)} } /* ---------- tres movimientos (sección fija) ---------- */ .tres{position:relative;height:230vh} .tres-sticky{ position:sticky;top:0;height:100vh; display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center;gap:clamp(20px,4vw,60px); padding:64px var(--gap) clamp(20px,4vh,40px); max-width:var(--max); } .tres-fig{position:relative;height:min(46vh,380px)} .tres-fig img{ position:absolute;inset:0;margin:auto; max-width:100%;max-height:100%;width:auto; opacity:0;transition:opacity .5s ease, transform .5s ease; transform:scale(.96); filter:invert(1); } .tres-fig img.on{opacity:1;transform:none} @media (max-width:860px){ .tres-sticky{grid-template-columns:1fr} .tres-fig{display:none} } .tres-kicker{ font-size:14px;color:var(--ink-soft); margin-bottom:clamp(18px,4vh,40px); } .tres-lista{list-style:none;margin:0;padding:0} .tres-lista li{ display:flex;gap:clamp(14px,2.4vw,32px);align-items:baseline; margin-bottom:clamp(12px,2.4vh,26px); opacity:.17;transition:opacity .45s ease; } .tres-lista li.previo{opacity:.4} .tres-lista li.on{opacity:1} .tres-n{ font-size:clamp(12px,1.2vw,15px);font-weight:600; color:var(--red);flex:none;padding-top:.6em; } .tres-t{ font-size:clamp(1.45rem,4vw,3.3rem);font-weight:800; letter-spacing:-.04em;line-height:1.05;max-width:20ch; } .tres-cta{ align-self:flex-start;margin-top:clamp(14px,3vh,30px); opacity:0;transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; } .tres-cta.on{opacity:1;transform:none;pointer-events:auto} /* ---------- lista larga de servicios ---------- */ .lista-larga{ margin-top:clamp(26px,4vh,44px); border-top:1px solid var(--rule);padding-top:20px; } .lista-larga summary{ cursor:pointer;list-style:none; font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:800;letter-spacing:-.02em; } .lista-larga summary::-webkit-details-marker{display:none} .lista-larga summary::after{content:" +";color:var(--red)} .lista-larga[open] summary::after{content:" –"} .ll-cols{ margin-top:26px; display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:clamp(20px,3vw,36px); } .ll-cols h4{ margin:0 0 10px;font-size:14px;font-weight:800;letter-spacing:.01em; padding-bottom:8px;border-bottom:1px solid var(--rule); } .ll-cols ul{margin:0;padding:0;list-style:none} .ll-cols li{ font-size:15px;line-height:1.45;color:var(--ink-soft); padding:5px 0; } /* ---------- giro ---------- */ .turn{ border-top:1px solid var(--rule); padding:clamp(52px,10vh,110px) var(--gap); max-width:var(--max); } .turn-img{width:min(420px,72%);margin-bottom:clamp(24px,4vh,40px)} .turn h2{font-size:clamp(2.6rem,8vw,6rem)} .turn p{ margin-top:16px;font-family:Spectral,Georgia,serif; font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--ink-soft); } /* ---------- corte en video ---------- */ .corte{ position:relative;overflow:hidden; min-height:clamp(360px,62vh,560px); display:flex;align-items:center; background:#0C101E; border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); } .corte-video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 45%; } .corte-scrim{ position:absolute;inset:0; background:linear-gradient(180deg, rgba(6,9,18,.55) 0%, rgba(6,9,18,.35) 50%, rgba(6,9,18,.7) 100%); } .corte-inner{ position:relative;z-index:2;width:100%;max-width:var(--max); padding:0 var(--gap);text-align:center; } .corte-inner h2{font-size:clamp(2.6rem,8vw,6rem);color:#fff} .corte-inner p{ margin-top:16px;font-family:Spectral,Georgia,serif; font-size:clamp(1.05rem,2.2vw,1.4rem);color:rgba(255,255,255,.82); } /* ---------- pasos ---------- */ .steps-section{padding:0 0 clamp(50px,9vh,100px)} .steps{list-style:none;margin:0;padding:0;position:relative} .steps-rail{ position:absolute;left:var(--gap);top:0;width:2px;height:100%; background:var(--rule); } .steps-rail::after{ content:"";position:absolute;inset:0;background:var(--red); transform:scaleY(var(--p,0));transform-origin:top; transition:transform .18s linear; } .steps li{ display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:clamp(10px,2vw,24px); padding:clamp(24px,4vh,40px) var(--gap); border-top:1px solid var(--rule); max-width:var(--max); } .steps li:last-child{border-bottom:1px solid var(--rule)} .step-n{ font-size:14px;font-weight:600;color:var(--ink-soft);padding-top:.45em; transition:color .4s ease, transform .4s ease; } .js .steps li{ opacity:0;transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .js .steps li.visto{opacity:1;transform:none} .js .steps li .step-body h3, .js .steps li .step-body p{ opacity:0;transform:translateY(14px); transition:opacity .6s ease .12s, transform .6s cubic-bezier(.2,.7,.3,1) .12s; } .js .steps li.visto .step-body h3{opacity:1;transform:none} .js .steps li.visto .step-body p{opacity:1;transform:none;transition-delay:.22s} .steps li.foco{background:var(--panel)} .steps li.foco .step-n{color:var(--red);transform:translateX(3px) scale(1.25)} .steps li{transition:background-color .45s ease} .step-body h3{font-size:clamp(1.35rem,3.4vw,2.2rem)} .step-body p{ margin-top:12px;font-family:Spectral,Georgia,serif;font-size:1.05rem; line-height:1.68;color:var(--ink-soft);max-width:var(--measure); } @media (max-width:560px){ .steps li{grid-template-columns:2.6rem 1fr} } /* ---------- servicios ---------- */ .services{ border-top:1px solid var(--rule); padding:clamp(50px,9vh,100px) var(--gap); max-width:var(--max); } .services-head h2{font-size:clamp(1.9rem,4.4vw,3.3rem)} .services-head p{ margin-top:14px;font-family:Spectral,Georgia,serif;font-size:1.08rem; color:var(--ink-soft);max-width:var(--measure); } .svc-grid{ margin-top:clamp(30px,5vh,54px); display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;background:var(--rule);border:1px solid var(--rule); } .svc{ background:var(--panel);padding:clamp(22px,3.5vw,34px); position:relative;transition:background-color .3s ease; } .svc::before{ content:"";position:absolute;left:0;top:0;height:3px;width:100%; background:var(--red);transform:scaleX(0);transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.3,1); } .svc:hover::before{transform:scaleX(1)} .svc-img{transition:transform .35s cubic-bezier(.2,.7,.3,1)} .svc:hover .svc-img{transform:translateY(-4px)} .svc-img{width:auto;height:104px;object-fit:contain;object-position:left bottom;margin-bottom:20px} .svc h3{font-size:clamp(1.2rem,2.6vw,1.7rem);max-width:16ch} .svc > p{ margin-top:12px;font-family:Spectral,Georgia,serif;line-height:1.65; color:var(--ink-soft);font-size:1.02rem; } .svc details{margin-top:18px;border-top:1px solid var(--rule);padding-top:14px} .svc summary{ cursor:pointer;font-weight:600;font-size:15px;color:var(--red); list-style:none; } .svc summary::-webkit-details-marker{display:none} .svc summary::before{content:"+ ";font-weight:800} .svc details[open] summary::before{content:"– "} .svc ul{margin:14px 0 0;padding-left:1.1em;color:var(--ink-soft);font-size:15.5px} .svc li{margin-bottom:8px;line-height:1.5} @media (max-width:760px){ .svc-grid{grid-template-columns:1fr} } /* ---------- precio ---------- */ .price{ border-top:1px solid var(--rule); background:#0C101E;color:#F2F1EA; padding:clamp(55px,10vh,120px) var(--gap); position:relative;overflow:hidden; } .price-video{ position:absolute;right:0;top:0;height:100%;width:52%; object-fit:cover;object-position:center; opacity:.9;pointer-events:none; } .price-scrim{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg, #0C101E 0%, #0C101E 42%, rgba(12,16,30,.72) 58%, rgba(12,16,30,.25) 100%); } .price-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:1} @media (max-width:820px){ .price-video{width:100%;opacity:.5} .price-scrim{background:linear-gradient(180deg, rgba(12,16,30,.72) 0%, rgba(12,16,30,.86) 100%)} } .price h2{font-size:clamp(1.9rem,4.4vw,3.3rem);color:#F2F1EA} .price-big{ font-size:clamp(3.2rem,12vw,9rem);font-weight:800;letter-spacing:-.05em; line-height:1;margin:.18em 0 .5em;color:var(--gold); } .price p:not(.price-big){ font-family:Spectral,Georgia,serif;font-size:1.08rem;line-height:1.72; max-width:var(--measure);color:rgba(242,241,234,.78);margin-bottom:1.15em; } .price p:last-child{margin-bottom:0} /* ---------- equipo ---------- */ .team{ padding:clamp(50px,9vh,100px) var(--gap);max-width:var(--max); } .team h2{font-size:clamp(1.9rem,4.4vw,3.3rem);max-width:18ch} .team-lead{ margin-top:14px;font-family:Spectral,Georgia,serif;font-size:1.08rem; color:var(--ink-soft);max-width:var(--measure); } .team-list{ list-style:none;margin:clamp(28px,5vh,48px) 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(20px,3vw,36px); } .team-list img{ width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top; border:1px solid var(--rule); } .team-list h3{font-size:clamp(1.2rem,2.6vw,1.6rem);margin-top:16px} .team-list p{margin-top:8px;color:var(--ink-soft);font-size:15.5px;line-height:1.5} .team-list .rol{margin-top:6px;color:var(--red);font-size:14px;font-weight:600} .team-list .rol + p{margin-top:10px} /* ---------- contacto ---------- */ .contact{ border-top:1px solid var(--rule); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--gap); padding:clamp(50px,9vh,100px) var(--gap); max-width:var(--max); } .contact-img{width:100%;max-width:400px;margin-bottom:26px} .contact-copy h2{font-size:clamp(2rem,5vw,3.6rem)} .contact-copy p{ margin-top:16px;font-family:Spectral,Georgia,serif;font-size:1.08rem; line-height:1.7;color:var(--ink-soft);max-width:30rem; } .desde-calc{ margin-top:16px !important;padding:12px 14px;border-left:3px solid var(--red); font-family:inherit !important;font-size:14.5px !important;color:var(--ink) !important; background:var(--panel); } .contact-alt{font-size:15px} .mailto{ display:block;margin-top:10px;text-decoration:none; font-size:clamp(1.25rem,3.2vw,2.1rem);font-weight:800;letter-spacing:-.03em; line-height:1.1;word-break:break-word; } .mailto:hover{color:var(--red)} .wa{ display:inline-block;margin-top:12px;font-size:15.5px; color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule); } .wa:hover{color:var(--red)} .form{ background:var(--panel);border:1px solid var(--rule); padding:clamp(22px,3.5vw,36px); } .field{margin-bottom:22px;border:0;padding:0} .field label,.field legend{ display:block;font-weight:600;font-size:15px;margin-bottom:7px; } .opt{font-weight:400;color:var(--ink-soft)} .field input[type=text],.field input[type=email],.field textarea{ width:100%;font:inherit;font-size:16px;color:var(--ink); background:transparent; border:1px solid var(--rule);border-radius:0; padding:11px 13px; } .field textarea{resize:vertical;line-height:1.5} .field input:focus,.field textarea:focus{ outline:none;border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--red); } .hint{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-soft)} .urgency{display:block} .urgency label{ display:inline-flex;align-items:center;gap:8px; margin:0 18px 0 0;font-weight:400;font-size:15.5px; } .urgency input{accent-color:var(--red);width:16px;height:16px} .hp{position:absolute;left:-9999px;opacity:0} .btn-send{width:100%;margin-top:4px} .btn-send[disabled]{opacity:.55;cursor:progress} .form-msg{margin-top:14px;font-size:15px;line-height:1.5;min-height:1px} .form-msg.ok{color:var(--ink);font-weight:600} .form-msg.err{color:var(--red);font-weight:600} .recibido p{margin-bottom:14px;font-size:16px;line-height:1.55;color:var(--ink-soft)} .recibido p:last-child{margin-bottom:0} .recibido p.recibido-titulo{ font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.03em; color:var(--ink);margin-bottom:10px !important; } .recibido p.recibido-ref{ display:inline-block;border:1px solid var(--rule); padding:8px 14px;font-size:15px;color:var(--ink) !important; } .recibido a{color:var(--red)} .form-legal{margin-top:18px;font-size:13px;color:var(--ink-soft);line-height:1.5} @media (max-width:860px){ .contact{grid-template-columns:1fr} } /* ---------- pie ---------- */ .foot{ border-top:1px solid var(--rule); padding:clamp(48px,9vh,96px) var(--gap) clamp(28px,5vh,52px); max-width:var(--max); } .foot-top{ display:flex;flex-wrap:wrap;gap:28px 48px; align-items:flex-end;justify-content:space-between; padding-bottom:clamp(30px,5vh,52px); border-bottom:1px solid var(--rule); } .foot-brand{display:flex;align-items:center;gap:18px} .foot-brand img{width:64px;height:auto} .foot-word strong{display:block;font-size:34px;letter-spacing:-.02em;line-height:1;font-weight:800} .foot-word span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:6px} .foot-claim{ font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.035em; line-height:1; } .foot-cols{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(24px,3vw,40px); padding:clamp(30px,5vh,52px) 0; } .foot-cols h4{ margin:0 0 14px;font-size:14px;font-weight:800;letter-spacing:.01em; } .foot-cols ul{list-style:none;margin:0;padding:0} .foot-cols li{margin-bottom:9px;font-size:15.5px;color:var(--ink-soft);line-height:1.4} .foot-cols a{text-decoration:none;color:var(--ink-soft);border-bottom:1px solid transparent} .foot-cols a:hover{color:var(--ink);border-bottom-color:var(--red)} .foot-legal{ padding-top:clamp(20px,3vh,32px);border-top:1px solid var(--rule); font-size:13.5px;color:var(--ink-soft); } /* ---------- entrada del hero ---------- */ .reveal{will-change:transform,opacity} .hero-title .reveal{display:block} .js .reveal{opacity:0;transform:translateY(.5em)} .js .reveal.in{opacity:1;transform:none;transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} .js .reveal{opacity:1;transform:none} html{scroll-behavior:auto} } html{scroll-behavior:smooth}