:root { --blue:#1d2254; --green:#51EDC8; --white:#ffffff; --ink:#121634; --muted:#65708a; --line:#e9edf1; --radius:4px; --max:1440px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:Helvetica, Arial, sans-serif; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,a{-webkit-tap-highlight-color:transparent} .container{width:min(calc(100% - 48px),var(--max));margin:auto} .header{ position:sticky; top:0; z-index:1000; background:#FFFFFF; border-bottom:1px solid rgba(29,34,84,.06); } .nav{height:96px;display:flex;align-items:center;justify-content:space-between;gap:32px} .brand{font-size:27px;line-height:.83;color:var(--blue);letter-spacing:-1.2px;min-width:130px} .brand span{display:block} .brand .studio{font-weight:700} .menu{display:flex;align-items:center;gap:42px;font-size:14px;font-weight:600;color:var(--blue)} .menu a{position:relative} .menu a:not(.btn)::after{ content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--green);transition:.25s ease } .menu a:hover::after,.menu a:focus-visible::after{width:100%} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:14px; min-height:48px;padding:0 24px;border-radius:var(--radius);font-weight:700; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; border:1px solid transparent;cursor:pointer } .btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(29,34,84,.14)} .btn-green{background:var(--green);color:var(--blue)} .btn-outline{border-color:var(--green);color:var(--green);background:transparent} .hero{background:var(--blue);overflow:hidden} .hero-grid{display:grid;grid-template-columns:57% 43%;height:540px;min-height:0} .hero-copy{padding:46px max(52px,calc((100vw - var(--max))/2 + 28px));display:flex;flex-direction:column;justify-content:center} .hero h1{margin:0;color:#fff;font-size:clamp(36px,3.15vw,52px);line-height:1.08;letter-spacing:-1.35px;font-weight:700;max-width:690px} .accent{color:var(--green)} .rule{width:52px;height:4px;background:var(--green);margin:22px 0 20px} .hero p{font-size:clamp(16px,1.18vw,19px);line-height:1.5;color:#fff;max-width:610px;margin:0 0 22px} .hero-media{position:relative;height:540px;min-height:0;background:#f5f1ea;overflow:hidden} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 65%} .whatsapp-icon{width:24px;height:24px;display:inline-block;color:var(--blue)} .intro{padding:70px 0 42px;text-align:center} .eyebrow{font-size:14px;letter-spacing:5px;font-weight:700;color:var(--blue);margin-bottom:8px} .intro h2{margin:0;font-size:clamp(40px,4vw,66px);line-height:1;letter-spacing:-2px;color:var(--blue)} .services{padding:0 0 74px} .services-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .card{border:1px solid var(--line);background:#fff;display:grid;grid-template-columns:42% 58%;min-height:330px;overflow:hidden;border-radius:6px;box-shadow:0 12px 35px rgba(29,34,84,.05);transition:.25s ease} .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(29,34,84,.09)} .card-content{padding:34px;display:flex;flex-direction:column;align-items:flex-start} .service-icon{width:44px;height:44px;border:1px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green);margin-bottom:20px;font-size:24px} .card h3{font-size:28px;line-height:1.05;letter-spacing:-.7px;color:var(--blue);margin:0 0 12px} .mini-rule{width:38px;height:3px;background:var(--green);margin:0 0 18px} .card p{font-size:16px;line-height:1.55;margin:0 0 25px;max-width:360px} .more{margin-top:auto;background:var(--green);color:var(--blue);padding:12px 18px;border-radius:var(--radius);font-weight:700;display:inline-flex;gap:15px;align-items:center} .card-media img{width:100%;height:100%;object-fit:cover} .about{border-top:6px solid var(--blue);padding:64px 0;background:#fff} .about-grid{display:grid;grid-template-columns:26% 42% 32%;gap:34px;align-items:center} .about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(100%)} .about-copy .label{color:var(--green);font-size:14px;font-weight:700;margin-bottom:8px} .about-copy h2{font-size:42px;line-height:1;margin:0 0 14px;color:var(--blue);letter-spacing:-1px} .about-copy .lead{font-size:18px;line-height:1.5;margin:0 0 24px} .about-copy p{font-size:17px;line-height:1.6;color:#36405c} .text-link{color:var(--green);font-weight:700;display:inline-flex;gap:14px;align-items:center;margin-top:10px} .attributes{border-left:1px solid #cfd6df;padding-left:32px;display:grid;gap:24px} .attribute{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center} .attr-icon{width:38px;height:38px;color:var(--green);display:grid;place-items:center;font-size:30px} .attribute strong{display:block;color:var(--blue);font-size:18px} .attribute span{font-size:14px;color:#4c5670} .cta-band{background:var(--blue);padding:28px 0} .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px} .cta-title{color:#fff;font-size:clamp(27px,2.6vw,42px);font-weight:700;line-height:1.08;letter-spacing:-1px;max-width:760px} .footer{background:var(--blue);color:#fff;padding:42px 0 0} .footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1.35fr 1fr;gap:40px;padding-bottom:42px} .footer h4{color:var(--green);font-size:14px;margin:0 0 20px} .footer p,.footer a{font-size:15px;line-height:2;color:#fff} .footer a:hover{color:var(--green)} .contact-line{display:flex;gap:12px;align-items:center} .contact-line .icon{color:var(--green);width:22px} .footer-bottom{border-top:1px solid rgba(255,255,255,.18);padding:20px 0;display:flex;justify-content:space-between;gap:30px;font-size:14px} .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease} .reveal.visible{opacity:1;transform:none} .mobile-toggle{display:none;background:none;border:0;color:var(--blue);font-size:30px} @media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto!important;transition:none!important;animation:none!important} .reveal{opacity:1;transform:none} } svg.button-icon{ width:20px; height:20px; min-width:20px; max-width:20px; flex:0 0 20px; display:block; overflow:visible; } svg.button-icon.whatsapp-icon{ width:21px; height:21px; min-width:21px; max-width:21px; flex-basis:21px; } .hero-main-cta svg, .nav-whatsapp svg{ vertical-align:middle; } .header { background:#FFFFFF !important; } .header .brand, .header .menu a:not(.btn) { color:#1D2254 !important; } .header .menu a:not(.btn)::after { background:#51EDC8 !important; } .header .btn-green { background:#51EDC8; color:#1D2254; } .hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 65%; } :root{ --blue:#1D2254; --green:#51EDC8; --surface:#F8FAFC; --ink:#0F172A; --white:#FFFFFF; --muted:#475569; --line:#E2E8F0; --ease:cubic-bezier(.2,.75,.25,1); } body{background:var(--surface);color:var(--ink)} .header{background:#fff} .header .nav{ width:100%; max-width:none; padding-left:max(52px,calc((100vw - var(--max))/2 + 28px)); padding-right:max(52px,calc((100vw - var(--max))/2 + 28px)); } .header .brand,.header .menu a:not(.btn){color:var(--blue)} .header .menu a:not(.btn)::after{background:var(--green)} /* Hero: compact, aligned to logo, with full notebook visible */ .hero-grid{grid-template-columns:55% 45%;height:520px} .hero-copy{ padding:42px max(52px,calc((100vw - var(--max))/2 + 28px)); } .hero h1{ font-size:clamp(35px,3vw,50px); line-height:1.075; letter-spacing:-1.25px; max-width:680px; } .hero p{font-size:clamp(16px,1.1vw,18px);max-width:610px} .hero-media{height:520px;background:var(--blue)} .hero-media img{ width:100%;height:100%; object-fit:cover; object-position:center bottom; } /* Editorial bridge */ .intro{padding:54px 0 44px;background:var(--surface)} .eyebrow{ margin:0 0 7px; color:var(--blue); font-size:clamp(42px,4.6vw,66px); line-height:.98; letter-spacing:-1.8px; text-transform:none; } .intro h2{ margin:0; font-size:clamp(28px,3vw,40px); line-height:1.05; letter-spacing:-.9px; color:var(--blue); } /* Service cards */ .services{background:var(--surface);padding-bottom:66px} .card{ border:1px solid var(--line); box-shadow:0 10px 28px rgba(15,23,42,.05); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); } .card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(15,23,42,.09);border-color:rgba(81,237,200,.65)} .service-icon{width:45px;height:45px;border:1.5px solid var(--green);font-size:0} .service-icon svg{width:24px;height:24px} .card-media{ background:#fff; display:flex; align-items:center; justify-content:center; padding:12px; } .card-media img{ width:100%; height:100%; object-fit:contain !important; object-position:center; } .about{border-top:0 !important;background:var(--surface);padding:58px 0 64px} .about-photo{overflow:hidden;background:#fff} .about-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(100%) contrast(1.04); transform:scale(1.005); } .attributes{border-left:1px solid rgba(29,34,84,.16)} .attr-icon{width:42px;height:42px;color:var(--green)} .attr-icon svg{width:34px;height:34px} .attribute{transition:transform .3s var(--ease)} .attribute:hover{transform:translateX(4px)} /* CTA made more useful and visually deliberate */ .cta-band{ position:relative; overflow:hidden; padding:34px 0; background:var(--blue); } .cta-band::before{ content:""; position:absolute; inset:auto auto -95px -70px; width:430px;height:200px; border-radius:50%; border:1px solid rgba(81,237,200,.16); box-shadow:0 0 0 24px rgba(81,237,200,.035),0 0 0 48px rgba(81,237,200,.025); pointer-events:none; } .cta-layout{ position:relative; z-index:1; display:grid; grid-template-columns:1.25fr 1.15fr auto; align-items:center; gap:38px; } .cta-kicker{display:block;color:var(--green);font-size:12px;font-weight:700;letter-spacing:1.7px;margin-bottom:8px} .cta-title{font-size:clamp(28px,2.3vw,39px);max-width:600px} .cta-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .cta-step{display:flex;gap:10px;align-items:flex-start;color:#fff;font-size:12px;line-height:1.35} .cta-step svg{flex:0 0 30px;width:30px;height:30px;color:var(--green)} .cta-step strong{display:block;font-size:13px} .cta-button{white-space:nowrap} /* Footer contact/social icon system */ .contact-line .icon{width:24px;height:24px;display:grid;place-items:center;color:var(--green)} .contact-line .icon svg{width:22px;height:22px} .social-icons{display:flex;gap:12px;align-items:center} .social-icon{ width:44px;height:44px; border:1px solid rgba(81,237,200,.55); border-radius:50%; display:grid; place-items:center; color:var(--white); transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease); } .social-icon svg{width:24px;height:24px} .social-icon:hover{background:var(--green);color:var(--blue);transform:translateY(-3px)} .footer-bottom{ position:relative; background:var(--ink); margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:max(52px,calc((100vw - var(--max))/2 + 28px)); padding-right:max(52px,calc((100vw - var(--max))/2 + 28px)); border-top:0; } /* Modern motion: subtle, meaningful and accessible */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease),transform .75s var(--ease); } .reveal.visible{opacity:1;transform:none} .hero-copy>*{ opacity:0; transform:translateY(14px); animation:heroIn .7s var(--ease) forwards; } .hero-copy>h1{animation-delay:.08s} .hero-copy>.rule{animation-delay:.18s} .hero-copy>p{animation-delay:.26s} .hero-copy>div:last-child{animation-delay:.34s} .hero-media img{animation:heroImageIn 1s var(--ease) both} .btn,.more,.text-link{transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease)} .btn:hover,.more:hover{transform:translateY(-2px)} .text-link:hover{transform:translateX(4px)} @keyframes heroIn{to{opacity:1;transform:none}} @keyframes heroImageIn{from{opacity:.2;transform:scale(1.025)}to{opacity:1;transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .hero-copy>*{opacity:1;transform:none;animation:none} .hero-media img{animation:none} } /* "Dos formas..." + "Una misma mirada." now share exactly the same size */ .intro{ padding:50px 0 40px; } .eyebrow, .intro h2{ margin:0; font-family:Helvetica,Arial,sans-serif; font-size:clamp(30px,3.1vw,42px) !important; line-height:1.08; letter-spacing:-1px; font-weight:700; text-transform:none; color:#1D2254; } .eyebrow{margin-bottom:4px} /* Hero image: transparency reveals the brand blue instead of a dark rectangle */ .hero-media{ background:#1D2254 !important; } .hero-media img{ object-fit:cover !important; object-position:center bottom !important; } /* Web image stays fully visible and its new transparent background remains clean */ #web .card-media{ background:#FFFFFF !important; padding:16px !important; } #web .card-media img{ object-fit:contain !important; width:100%; height:100%; filter:none; } /* Biogénesis retains photographic impact while showing the complete composition */ #senaletica .card-media{ padding:10px; background:#FFFFFF; } #senaletica .card-media img{ object-fit:contain !important; width:100%; height:100%; } /* Ceci portrait: lighter grayscale, no extra contrast treatment */ .about-photo img{ filter:grayscale(100%) !important; opacity:1; } /* Copyright strip: deeper brand-blue, never black */ .footer-bottom{ background:#171C4B !important; color:#FFFFFF; } .about-copy .lead{ margin-bottom:18px; } .about-copy p{ max-width:720px; } .about-copy p + p{ margin-top:14px; } /* Hero: 20% less navy width than previous 55/45 split */ .hero-grid{ grid-template-columns:44% 56% !important; height:520px; } .hero-copy{ padding-left:max(52px,calc((100vw - var(--max))/2 + 28px)); padding-right:38px; } .hero h1{ font-size:clamp(33px,2.65vw,47px); line-height:1.08; } .hero-media{ height:520px; background:#f4eee6 !important; overflow:hidden; } .hero-media img{ width:100%; height:100%; object-fit:cover !important; object-position:center 43% !important; } .button-icon{ width:22px; height:22px; flex:0 0 22px; } .nav-whatsapp .button-icon{width:21px;height:21px} .hero .btn .button-icon{margin-left:2px} /* Service lists from final visual reference */ .service-list{ margin:0 0 20px; padding:0; list-style:none; display:grid; gap:5px; font-size:14px; line-height:1.28; color:#0F172A; } .service-list li{ position:relative; padding-left:20px; } .service-list li::before{ content:"✓"; position:absolute; left:0; top:0; width:14px; height:14px; border-radius:50%; display:grid; place-items:center; background:#51EDC8; color:#1D2254; font-size:10px; font-weight:700; line-height:14px; } .card-content{padding:30px 30px 26px} .card p{margin-bottom:14px} .more{margin-top:auto} .card{min-height:390px} /* Lighter portrait background */ .about-photo img{ filter:grayscale(100%) brightness(1.04) contrast(.94) !important; } /* Bigger process icons + white arrows */ .cta-layout{ grid-template-columns:1.15fr 1.45fr auto; } .cta-steps{ display:grid !important; grid-template-columns:1fr 34px 1fr 34px 1fr !important; gap:10px !important; align-items:center; } .cta-step{ flex-direction:column; align-items:center; text-align:center; gap:8px; font-size:12px; } .cta-step svg{ width:46px !important; height:46px !important; flex:0 0 46px !important; color:#51EDC8; } .process-arrow{ color:#FFFFFF; font-size:31px; line-height:1; font-weight:300; text-align:center; transform:translateY(-10px); } .cta-step strong{ font-size:13px; color:#FFFFFF; } /* Buenos Aires locked to the far right */ .footer-bottom > div:last-child{ margin-left:auto !important; text-align:right !important; } /* More polished hover/motion */ .service-icon, .attr-icon, .cta-step svg{ transition:transform .32s cubic-bezier(.2,.75,.25,1),filter .32s ease; } .card:hover .service-icon, .attribute:hover .attr-icon{ transform:translateY(-2px) scale(1.04); } .cta-step:hover svg{ transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 7px 12px rgba(81,237,200,.16)); } .hero-media{ background:#F8FAFC !important; } .hero-media img{ width:100%; height:100%; object-fit:cover !important; object-position:center center !important; } /* HERO — sin esfumados ni degradados */ .hero, .hero-grid, .hero-copy, .hero-media{ background-image:none !important; filter:none !important; } .hero{ background:#1D2254 !important; } .hero-grid{ grid-template-columns:44% 56% !important; height:560px !important; } .hero-copy{ background:#1D2254 !important; } .hero-media{ height:560px !important; background:#F8FAFC !important; overflow:hidden; } .hero-media::before, .hero-media::after, .hero::before, .hero::after{ display:none !important; content:none !important; } .hero-media img{ width:100%; height:100%; object-fit:contain !important; object-position:left center !important; filter:none !important; transform:none !important; animation:none !important; } /* Diseño Web & E-commerce: computadora completa, sin corte izquierdo */ #web .card-media{ overflow:visible !important; padding:18px 20px 18px 26px !important; background:#FFFFFF !important; } #web .card-media img{ width:100%; height:100%; object-fit:contain !important; object-position:center center !important; transform:scale(.96) !important; transform-origin:center center !important; max-width:100%; filter:none !important; } /* HERO: mayor presencia del sector azul */ .hero-grid{ grid-template-columns:55% 45% !important; height:580px !important; } .hero-copy{ background:#1D2254 !important; padding-left:max(52px,calc((100vw - var(--max))/2 + 28px)); padding-right:52px; } .hero-media{ height:580px !important; background:#F8FAFC !important; overflow:hidden !important; } .hero-media img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; filter:none !important; transform:none !important; } /* WEB & E-COMMERCE: notebook completa, sin corte izquierdo */ #web .card-media{ overflow:hidden !important; padding:24px 30px !important; background:#FFFFFF !important; } #web .card-media img{ width:92% !important; height:92% !important; max-width:92% !important; object-fit:contain !important; object-position:center center !important; transform:none !important; margin:auto !important; } /* HERO: la transparencia revela azul, nunca blanco */ .hero{ background:#1D2254 !important; } .hero-grid{ grid-template-columns:55% 45% !important; height:590px !important; background:#1D2254 !important; } .hero-copy{ background:#1D2254 !important; } .hero-media{ height:590px !important; background:#1D2254 !important; overflow:hidden !important; } .hero-media img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; background:transparent !important; transform:none !important; filter:none !important; } /* WEB: imagen entera y con aire a izquierda y derecha */ #web .card-media{ overflow:hidden !important; padding:18px 24px !important; background:#FFFFFF !important; } #web .card-media img{ width:100% !important; height:100% !important; max-width:100% !important; object-fit:contain !important; object-position:center center !important; transform:scale(.90) !important; transform-origin:center center !important; margin:auto !important; } .hero-typographic{position:relative;overflow:hidden;min-height:720px;background:#1D2254!important;color:#fff;isolation:isolate} .hero-typographic-inner{position:relative;z-index:2;min-height:720px;display:flex;align-items:center;padding-top:66px;padding-bottom:66px} .hero-copy-full{width:100%;max-width:none;padding:0!important} .hero-copy-full h1{margin:0;max-width:1400px;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:clamp(58px,6.2vw,104px);line-height:.96;letter-spacing:-3.5px;font-weight:700;text-wrap:balance} .hero-line{display:block;opacity:0;transform:translateY(34px);animation:heroLineIn .9s cubic-bezier(.16,.84,.32,1) forwards} .hero-line-1{animation-delay:.05s}.hero-line-2{animation-delay:.16s}.hero-line-3{animation-delay:.27s}.hero-line-4{animation-delay:.38s} .hero-accent{position:relative;display:inline-block} .hero-accent::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.08em;background:#51EDC8;opacity:.18;transform:scaleX(0);transform-origin:left;animation:accentSweep 1s cubic-bezier(.16,.84,.32,1) .7s forwards} .hero-rule{width:78px;height:5px;margin:34px 0 26px;opacity:0;transform:scaleX(.2);transform-origin:left;animation:ruleIn .7s cubic-bezier(.16,.84,.32,1) .55s forwards} .hero-subcopy{max-width:1040px!important;margin:0 0 32px!important;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:clamp(22px,2vw,31px)!important;line-height:1.4!important;letter-spacing:-.35px;opacity:0;transform:translateY(22px);animation:fadeLift .8s cubic-bezier(.16,.84,.32,1) .68s forwards} .hero-main-cta{min-height:60px;padding:0 30px;font-size:16px;opacity:0;transform:translateY(18px);animation:fadeLift .75s cubic-bezier(.16,.84,.32,1) .82s forwards} .hero-main-cta:hover{transform:translateY(-3px)!important;box-shadow:0 18px 42px rgba(81,237,200,.18)} .hero-decor{position:absolute;right:3vw;bottom:6vh;width:260px;height:160px;opacity:.25;pointer-events:none;z-index:-1} .hero-decor span{position:absolute;display:block;height:1px;background:linear-gradient(90deg,transparent,#51EDC8,transparent);animation:floatLine 7s ease-in-out infinite} .hero-decor span:nth-child(1){width:230px;top:20px;right:0}.hero-decor span:nth-child(2){width:170px;top:72px;right:28px;animation-delay:1.2s}.hero-decor span:nth-child(3){width:210px;top:124px;right:8px;animation-delay:2.1s} @keyframes heroLineIn{to{opacity:1;transform:translateY(0)}}@keyframes accentSweep{to{transform:scaleX(1)}}@keyframes ruleIn{to{opacity:1;transform:scaleX(1)}}@keyframes fadeLift{to{opacity:1;transform:translateY(0)}}@keyframes floatLine{0%,100%{transform:translateX(0);opacity:.15}50%{transform:translateX(-22px);opacity:.4}} .cta-band{background:#1D2254!important}.cta-band::before,.cta-band::after{display:none!important;content:none!important} .footer-bottom-centered{justify-content:center!important;text-align:center!important;background:#1D2254!important;padding-top:22px!important;padding-bottom:22px!important} .footer-bottom-centered>div{margin:0 auto!important;text-align:center!important}.footer-separator{display:inline-block;margin:0 10px;color:#51EDC8} @media(prefers-reduced-motion:reduce){.hero-line,.hero-rule,.hero-subcopy,.hero-main-cta,.hero-accent::after{animation:none!important;opacity:1!important;transform:none!important}.hero-decor{display:none}} /* HERO aligned exactly with the left edge used by the logo/header */ .hero-typographic .container.hero-typographic-inner{ width:100% !important; max-width:none !important; margin:0 !important; padding-left:max(52px, calc((100vw - var(--max))/2 + 28px)) !important; padding-right:max(52px, calc((100vw - var(--max))/2 + 28px)) !important; } /* Main headline slightly smaller */ .hero-copy-full h1{ max-width:1320px !important; font-size:clamp(52px,5.55vw,92px) !important; line-height:.98 !important; letter-spacing:-3px !important; } /* No underline or graphic accent under "conectar personas" */ .hero-accent::after{ display:none !important; content:none !important; } /* Supporting phrase larger and intentionally forced into 3 lines */ .hero-subcopy{ max-width:1120px !important; font-size:clamp(25px,2.2vw,34px) !important; line-height:1.34 !important; letter-spacing:-.45px !important; margin-bottom:28px !important; } .hero-subcopy .sub-line{ display:block; } /* Smaller, left-aligned CTA */ .hero-main-cta{ min-height:52px !important; width:auto !important; padding:0 22px !important; font-size:14px !important; margin-left:0 !important; align-self:flex-start !important; } .hero-main-cta .button-icon{ width:19px !important; height:19px !important; } /* Footer final line truly centered across the full viewport */ .footer-bottom-centered{ width:100% !important; max-width:none !important; margin:0 !important; display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important; background:#1D2254 !important; padding:22px 24px !important; } .footer-bottom-centered > div{ width:100% !important; margin:0 !important; text-align:center !important; } /* Hero principal */ .hero-copy-full h1{ font-weight:600 !important; font-size:clamp(48px,5.05vw,84px) !important; line-height:1 !important; letter-spacing:-2.7px !important; } /* Toda esta expresión en verde, incluida la "y" */ .hero-subcopy .accent{ color:#51EDC8 !important; } /* Footer: centrado matemático respecto de todo el viewport */ footer .footer-bottom-centered{ box-sizing:border-box !important; position:relative !important; left:50% !important; width:100vw !important; max-width:100vw !important; margin-left:-50vw !important; margin-right:0 !important; padding:22px 24px !important; display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important; background:#1D2254 !important; } footer .footer-bottom-centered p{ display:block !important; width:auto !important; max-width:none !important; margin:0 auto !important; padding:0 !important; text-align:center !important; color:#FFFFFF !important; } /* One single left alignment for the whole site: same line as the About photo */ .container, .header .container, .hero-typographic .container.hero-typographic-inner{ width:min(calc(100% - 48px), var(--max)) !important; max-width:var(--max) !important; margin-left:auto !important; margin-right:auto !important; } .hero-typographic .container.hero-typographic-inner{ padding-left:0 !important; padding-right:0 !important; } /* Slightly larger studio logo */ .brand{ font-size:29px !important; line-height:.82 !important; min-width:140px !important; } /* "Un mismo propósito." completely green */ #dos-formas, #dos-formas .accent{ color:#51EDC8 !important; } /* Web image: clean, full composition, same visual weight as Biogénesis */ #web .card-media{ padding:12px !important; background:#FFFFFF !important; overflow:hidden !important; } #web .card-media img{ width:100% !important; height:100% !important; max-width:none !important; object-fit:contain !important; object-position:center center !important; transform:none !important; margin:0 !important; filter:none !important; } #senaletica .card-media{ padding:12px !important; } #senaletica .card-media img{ width:100% !important; height:100% !important; object-fit:contain !important; } /* Keep both media panels visually equivalent */ #web .card-media, #senaletica .card-media{ min-height:300px !important; } :root{ --site-max: 1360px; --site-gutter: 80px; } /* Universal horizontal grid */ .container, .header .container, .hero-typographic .container.hero-typographic-inner{ box-sizing:border-box !important; width:min(calc(100% - (var(--site-gutter) * 2)), var(--site-max)) !important; max-width:var(--site-max) !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; } /* Navigation uses exactly the same left/right margins */ .header .container{ width:min(calc(100% - (var(--site-gutter) * 2)), var(--site-max)) !important; } /* Service images have equal dimensions and visual weight */ #web .card-media, #senaletica .card-media{ box-sizing:border-box !important; height:360px !important; min-height:360px !important; padding:0 !important; overflow:hidden !important; background:#FFFFFF !important; } #web .card-media img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; margin:0 !important; transform:none !important; } #senaletica .card-media img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; margin:0 !important; } #web .card-media, #senaletica .card-media{ height:360px !important; min-height:360px !important; padding:0 !important; overflow:hidden !important; } #web .card-media{ background:#F8FAFC !important; } #web .card-media img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; display:block !important; transform:none !important; } #senaletica .card-media img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; } /* Statement at the top of the right column in Sobre mí */ .about-philosophy{ grid-column:1 / -1; margin:0 0 34px; padding:0 0 30px; border-bottom:1px solid rgba(15,23,42,.12); } .about-philosophy blockquote{ position:relative; margin:0 0 16px; max-width:560px; padding:0; border:0; color:#1D2254; font-family:Helvetica,Arial,sans-serif; font-size:clamp(27px,2.25vw,38px); line-height:1.13; letter-spacing:-1px; font-weight:600; } .about-philosophy blockquote::before{ content:""; display:block; width:54px; height:4px; margin-bottom:20px; background:#51EDC8; } .about-philosophy p{ max-width:540px; margin:0; color:#0F172A; font-size:18px; line-height:1.55; font-weight:400; } /* ===== SERVICES: more editorial, generous white space ===== */ .services{ padding-top:26px !important; padding-bottom:86px !important; } .services-grid{ gap:38px !important; } .services .card{ grid-template-columns:1fr !important; grid-template-rows:auto 1fr !important; min-height:0 !important; background:#FFFFFF !important; border:1px solid #E7ECF1 !important; border-radius:5px !important; overflow:hidden !important; box-shadow:0 12px 34px rgba(29,34,84,.045) !important; } .services .card:hover{ transform:translateY(-5px) !important; box-shadow:0 22px 50px rgba(29,34,84,.09) !important; } .services .card-media{ order:1 !important; box-sizing:border-box !important; height:360px !important; min-height:360px !important; margin:26px 26px 0 !important; padding:14px !important; background:#FFFFFF !important; overflow:hidden !important; } .services .card-media img{ width:100% !important; height:100% !important; display:block !important; object-fit:contain !important; object-position:center center !important; margin:0 !important; transform:none !important; background:#FFFFFF !important; } .services .card-content{ order:2 !important; padding:30px 40px 38px !important; min-height:330px !important; } .services .card h3{ max-width:420px; } .services .card p{ max-width:440px !important; } .services .service-list{ margin-bottom:24px !important; } /* Breathe image stays light and airy */ #web .card-media{ background:#FFFFFF !important; } /* ===== ABOUT ===== */ .about-photo{ background:#FFFFFF !important; overflow:hidden; } .about-photo img{ filter:none !important; width:100% !important; height:auto !important; object-fit:cover !important; } .attributes{ gap:29px !important; } /* ===== CTA / PROCESS ===== */ .cta-title-line{ display:block; } .cta-title{ max-width:780px !important; } .cta-step{ font-size:14px !important; /* +2px from 12px */ } .cta-step strong{ font-size:15px !important; /* +2px from 13px */ } /* ===== COPYRIGHT BAR ===== */ footer .footer-bottom-centered{ background:#51EDC8 !important; color:#1D2254 !important; } footer .footer-bottom-centered p, footer .footer-bottom-centered a{ color:#1D2254 !important; } footer .footer-bottom-centered .footer-separator{ color:#1D2254 !important; } /* ===== Service cards ===== */ .services-grid{ gap:56px !important; align-items:stretch !important; } .service-card{ display:grid !important; grid-template-columns:1fr !important; grid-template-rows:auto auto 1fr !important; background:#fff !important; border:1px solid #E8EDF2 !important; border-radius:5px !important; overflow:hidden !important; box-shadow:0 14px 42px rgba(29,34,84,.055) !important; } .service-card-head{ display:flex !important; align-items:center !important; gap:18px !important; padding:34px 38px 25px !important; } .service-card-head .service-icon{ flex:0 0 auto !important; margin:0 !important; } .service-card-head h3{ margin:0 !important; font-size:clamp(25px,2vw,34px) !important; line-height:1.05 !important; letter-spacing:-.8px !important; } .service-card .card-media{ height:350px !important; min-height:350px !important; margin:0 38px !important; padding:18px !important; background:#fff !important; border:1px solid #EEF2F5 !important; overflow:hidden !important; } .service-card .card-media img{ width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center !important; background:#fff !important; } .service-card-body{ padding:28px 38px 40px !important; } .service-card-body p{ margin:0 0 20px !important; max-width:480px !important; } .service-card-body .service-list{ margin:0 0 25px !important; } /* ===== Process / CTA ===== */ .cta-title{ max-width:880px !important; font-size:clamp(28px,2.25vw,38px) !important; line-height:1.1 !important; } .cta-title-line{ display:block !important; white-space:nowrap; } .cta-step span{ line-height:1.25 !important; } .cta-step strong{ display:block !important; } /* ===== Slim copyright strip ===== */ footer .footer-bottom-centered{ min-height:0 !important; padding:9px 24px !important; } footer .footer-bottom-centered p{ font-size:13px !important; line-height:1.35 !important; } /* Accessible keyboard focus */ a:focus-visible, button:focus-visible{ outline:3px solid #51EDC8 !important; outline-offset:4px !important; } /* Prevent layout shifts for service images */ .service-card .card-media{ aspect-ratio: 16 / 10; } /* Slightly larger logo */ .brand{ font-size:31px !important; line-height:.82 !important; min-width:148px !important; } /* Navigation underlines match the hero divider thickness */ .menu a:not(.btn)::after{ height:5px !important; bottom:-10px !important; border-radius:0 !important; } /* Hero divider: a little longer */ .hero-rule{ width:104px !important; height:5px !important; } /* Two forms / one purpose on a single line */ .intro{ padding:56px 0 38px !important; text-align:left !important; } .intro-single-line{ display:flex !important; align-items:baseline !important; gap:.28em !important; flex-wrap:nowrap !important; white-space:nowrap !important; font-size:clamp(34px,3.5vw,56px) !important; letter-spacing:-1.6px !important; } /* Service images directly under their titles, with generous air */ .service-card-head{ padding-bottom:24px !important; } .service-card .card-media{ margin-top:0 !important; padding:20px !important; background:#FFFFFF !important; } #senaletica .card-media img, #web .card-media img{ object-fit:contain !important; object-position:center center !important; } /* Web image: no crop at the bottom */ #web .card-media{ height:375px !important; min-height:375px !important; } #web .card-media img{ object-fit:contain !important; } /* About differentiators: stronger without becoming heavy */ .attributes{ gap:34px !important; } .attribute{ grid-template-columns:58px 1fr !important; gap:16px !important; } .attr-icon{ width:52px !important; height:52px !important; border:1.5px solid #51EDC8 !important; border-radius:50% !important; background:rgba(81,237,200,.06) !important; } .attr-icon svg{ width:27px !important; height:27px !important; stroke-width:1.8 !important; } .attribute strong{ font-size:19px !important; } .attribute span{ font-size:15px !important; } /* Perfect WhatsApp icon */ .whatsapp-icon{ width:22px !important; height:22px !important; flex:0 0 22px !important; display:block !important; } /* Social icons stay visible and turn blue on hover/focus/active */ .social-icon, .social-icon:visited{ color:#FFFFFF !important; } .social-icon:hover, .social-icon:focus-visible, .social-icon:active{ color:#1D2254 !important; background:#51EDC8 !important; border-color:#51EDC8 !important; } .social-icon svg{ display:block !important; opacity:1 !important; } /* Service images sit immediately below icon + title */ .service-card-head{ padding-bottom:12px !important; } .service-card .card-media{ margin-top:0 !important; } /* Keep both service images large, balanced and directly under titles */ #senaletica .card-media, #web .card-media{ height:370px !important; min-height:370px !important; padding:14px !important; } #senaletica .card-media img, #web .card-media img{ width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center !important; } /* Exact uploaded Breathe image remains uncropped */ #web .card-media img{ background:#FFFFFF !important; } /* About: first sentence same size as body copy */ .about-copy .lead{ font-size:inherit !important; line-height:inherit !important; font-weight:400 !important; letter-spacing:normal !important; margin-bottom:1em !important; } /* Tagline centered, one line on desktop */ .intro{ text-align:center !important; padding:58px 0 42px !important; } .intro-single-line{ display:flex !important; justify-content:center !important; align-items:baseline !important; gap:.28em !important; margin:0 auto !important; text-align:center !important; white-space:nowrap !important; } .intro-single-line .intro-dark{ color:#1D2254 !important; } .intro-single-line .accent{ color:#51EDC8 !important; } /* Explicit content order: title -> image -> copy */ .service-card{ display:grid !important; grid-template-columns:1fr !important; grid-template-rows:auto auto 1fr !important; } .service-card-head{order:1 !important;} .service-card .card-media{order:2 !important;} .service-card-body{order:3 !important;} /* More breathing room around both images */ .service-card .card-media{ margin:0 38px !important; padding:22px !important; background:#FFFFFF !important; border:1px solid #EEF2F5 !important; height:380px !important; min-height:380px !important; } .service-card .card-media img{ width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center !important; } /* Keep service content comfortably below image */ .service-card-body{ padding-top:30px !important; } .service-card-body .more{ display:inline-flex !important; align-items:center !important; gap:7px !important; } /* Biogénesis: cover the entire thin framed image area */ #senaletica .card-media{ padding:0 !important; background:#FFFFFF !important; } #senaletica .card-media img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; display:block !important; } /* Web mockup: ambiented, with controlled white breathing room */ #web .card-media{ padding:0 !important; background:#F8FAFC !important; } #web .card-media img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; display:block !important; } /* Final CTA statement */ .cta-title{ max-width:920px !important; } .cta-title-line{ display:block !important; } /* More breathing room between service titles and images */ .service-card-head{ padding-bottom:30px !important; } .service-card .card-media{ margin-top:0 !important; } /* Slightly larger service intro text */ .service-card-body > p{ font-size:19px !important; line-height:1.5 !important; max-width:560px !important; margin-bottom:24px !important; } /* Service lists in two columns */ .service-card-body .service-list{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; column-gap:28px !important; row-gap:10px !important; margin:0 0 30px !important; padding:0 !important; } .service-card-body .service-list li{ margin:0 !important; min-width:0 !important; } /* Center MÁS INFO in both service cards */ .service-card-body .more{ display:flex !important; width:max-content !important; margin:0 auto !important; justify-content:center !important; align-items:center !important; text-align:center !important; } /* Keep both images balanced and generous */ #senaletica .card-media, #web .card-media{ height:390px !important; min-height:390px !important; } #senaletica .card-media img{ width:100% !important; height:100% !important; object-fit:cover !important; } #web .card-media{ background:#F8FAFC !important; } #web .card-media img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; } /* Narrower service blocks with more separation between them */ .services-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:88px !important; max-width:1180px !important; margin-left:auto !important; margin-right:auto !important; } .service-card{ width:100% !important; max-width:546px !important; } .service-card:first-child{ justify-self:end !important; } .service-card:last-child{ justify-self:start !important; } /* Preserve balanced image areas */ #senaletica .card-media, #web .card-media{ height:350px !important; min-height:350px !important; } #web .card-media{ background:#F8FAFC !important; } #web .card-media img{ object-fit:cover !important; object-position:center center !important; } /* Center titles and icons */ .service-card-head{ justify-content:center !important; text-align:center !important; padding-bottom:34px !important; } .service-card-head h3{ text-align:center !important; } /* Smaller images with more breathing room */ .service-card .card-media{ width:calc(100% - 88px) !important; height:285px !important; min-height:285px !important; margin:0 auto !important; padding:0 !important; border:1px solid #EEF2F5 !important; background:#FFFFFF !important; } #senaletica .card-media img, #web .card-media img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; } /* Larger typography for all remaining service content */ .service-card-body{ padding-top:30px !important; } .service-card-body > p{ font-size:21px !important; line-height:1.45 !important; font-weight:500 !important; } .service-card-body .service-list{ font-size:18px !important; line-height:1.45 !important; } .service-card-body .more{ font-size:17px !important; font-weight:700 !important; } /* Keep the CTA/process heading at the former statement scale */ .cta-title{ max-width:none !important; font-size:clamp(28px,2.25vw,38px) !important; line-height:1.1 !important; color:#51EDC8 !important; white-space:nowrap !important; } :root{ --navy:#1D2254; --ink:#0F172A; --aqua:#51EDC8; --surface:#F8FAFC; --white:#FFFFFF; --line:#E7EDF2; --shadow:0 22px 60px rgba(29,34,84,.08); --shadow-hover:0 28px 78px rgba(29,34,84,.13); } html{ scroll-behavior:smooth; } body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } /* ===== SERVICE BLOCKS ===== */ .services-grid{ gap:96px !important; max-width:1160px !important; } .service-card{ max-width:532px !important; border:1px solid var(--line) !important; box-shadow:var(--shadow) !important; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease !important; } .service-card:hover{ transform:translateY(-8px) !important; box-shadow:var(--shadow-hover) !important; border-color:rgba(81,237,200,.55) !important; } /* Icon ABOVE title */ .service-card-head{ flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:14px !important; text-align:center !important; padding:34px 30px 32px !important; } .service-card-head .service-icon{ width:58px !important; height:58px !important; display:grid !important; place-items:center !important; border-radius:50% !important; background:rgba(81,237,200,.20) !important; border:1px solid rgba(81,237,200,.65) !important; transition:transform .45s cubic-bezier(.2,.7,.2,1), background .3s ease !important; } .service-card:hover .service-icon{ transform:translateY(-4px) rotate(-3deg) !important; background:rgba(81,237,200,.30) !important; } .service-card-head h3{ margin:0 !important; text-align:center !important; } /* Smaller images */ .service-card .card-media{ width:calc(100% - 104px) !important; height:245px !important; min-height:245px !important; margin:0 auto !important; border:1px solid #EDF1F4 !important; overflow:hidden !important; background:#fff !important; } .service-card .card-media img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease !important; } .service-card:hover .card-media img{ transform:scale(1.025) !important; } /* Intro text: a little heavier */ .service-card-body > p{ font-size:20px !important; line-height:1.46 !important; font-weight:600 !important; letter-spacing:-.2px !important; color:var(--navy) !important; text-align:left !important; } /* Lists smaller */ .service-card-body .service-list{ font-size:15px !important; line-height:1.5 !important; font-weight:400 !important; column-gap:24px !important; row-gap:8px !important; } .service-card-body .service-list li::marker{ color:var(--aqua) !important; } .service-card-body .more{ font-size:15px !important; letter-spacing:.02em !important; transition:transform .25s ease, color .25s ease !important; } .service-card-body .more:hover{ transform:translateX(4px) !important; } /* ===== PROCESS CTA ===== */ .cta-title{ font-size:clamp(22px,1.9vw,31px) !important; font-weight:600 !important; line-height:1.1 !important; letter-spacing:-.6px !important; color:var(--aqua) !important; } /* ===== MODERN ENTRANCE ANIMATIONS ===== */ @keyframes riseFade{ from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:translateY(0)} } @keyframes softScale{ from{opacity:0; transform:scale(.985)} to{opacity:1; transform:scale(1)} } @keyframes lineGrow{ from{transform:scaleX(0)} to{transform:scaleX(1)} } .hero-line{ animation-duration:.85s !important; } .hero-rule{ transform-origin:left center !important; animation:lineGrow .9s cubic-bezier(.16,.84,.32,1) .55s both !important; } .service-card.reveal.visible, .about-grid.reveal.visible, .intro.reveal.visible{ animation:riseFade .8s cubic-bezier(.16,.84,.32,1) both; } .service-card.reveal.visible:nth-child(2){ animation-delay:.08s; } .about-photo img{ transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .45s ease !important; } .about-photo:hover img{ transform:scale(1.018); } .attribute{ transition:transform .28s ease !important; } .attribute:hover{ transform:translateX(5px); } .cta-step{ transition:transform .3s ease !important; } .cta-step:hover{ transform:translateY(-4px); } /* ===== ACCESSIBILITY / PERFORMANCE ===== */ img{ height:auto; } a, button{ -webkit-tap-highlight-color:transparent; } a:focus-visible, button:focus-visible{ outline:3px solid var(--aqua) !important; outline-offset:4px !important; } @media(prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } .header{ transition:box-shadow .3s ease, background .3s ease !important; } .header.is-scrolled{ box-shadow:0 8px 30px rgba(15,23,42,.08) !important; } /* Service icons: white background, clean outlined treatment */ .service-card-head .service-icon{ background:#FFFFFF !important; border:1.5px solid #51EDC8 !important; box-shadow:0 8px 22px rgba(29,34,84,.055) !important; } /* Smaller service images */ .service-card .card-media{ width:calc(100% - 138px) !important; height:220px !important; min-height:220px !important; margin-left:auto !important; margin-right:auto !important; } /* Keep both intro sentences aligned at the same vertical level */ .service-card-body{ display:flex !important; flex-direction:column !important; } .service-card-body > p{ min-height:88px !important; display:flex !important; align-items:flex-start !important; } /* Footer/process title: same visual scale as "Dos formas de comunicar." */ .cta-copy{ align-self:center !important; } .cta-title{ font-size:clamp(34px,3.5vw,56px) !important; line-height:1.02 !important; font-weight:600 !important; letter-spacing:-1.5px !important; color:#51EDC8 !important; max-width:360px !important; } /* Footer columns share the same soft gray background as Sobre mí */ .footer{ background:#F8FAFC !important; } .footer .footer-grid{ background:#F8FAFC !important; } .footer .footer-grid > div{ background:#F8FAFC !important; } /* Keep footer headings readable on the gray surface */ .footer h4{ color:#51EDC8 !important; } /* ===== SERVICE SECTION ===== */ .services-grid{ gap:98px !important; max-width:1160px !important; } .service-card{ max-width:531px !important; } .service-card-head{ flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:13px !important; text-align:center !important; padding-bottom:34px !important; } .service-card-head .service-icon{ width:58px !important; height:58px !important; background:#FFFFFF !important; border:1.5px solid #51EDC8 !important; color:#1D2254 !important; box-shadow:0 9px 24px rgba(29,34,84,.055) !important; } .service-card-head h3{ margin:0 !important; text-align:center !important; } /* Same landscape proportion for both service images, slightly smaller */ .service-card .card-media{ width:calc(100% - 132px) !important; aspect-ratio:16 / 9 !important; height:auto !important; min-height:0 !important; margin:0 auto !important; padding:0 !important; border:1px solid #EEF2F5 !important; overflow:hidden !important; background:#FFFFFF !important; } #senaletica .card-media img, #web .card-media img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; display:block !important; } /* Intro copy centered and aligned at identical height */ .service-card-body{ padding-top:28px !important; } .service-card-body > p{ min-height:92px !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; text-align:center !important; margin-left:auto !important; margin-right:auto !important; max-width:430px !important; font-size:20px !important; line-height:1.45 !important; font-weight:600 !important; color:#1D2254 !important; } .service-card-body .service-list{ font-size:14px !important; line-height:1.45 !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; column-gap:26px !important; row-gap:8px !important; } .service-card-body .more{ margin:4px auto 0 !important; font-size:15px !important; } /* ===== PROCESS BAND ===== */ .cta-title{ font-size:clamp(22px,2vw,30px) !important; line-height:1.08 !important; font-weight:500 !important; letter-spacing:-.5px !important; color:#51EDC8 !important; max-width:250px !important; } .cta-step{ font-size:16px !important; } .cta-step strong{ font-size:19px !important; line-height:1.1 !important; } /* ===== FOOTER LIGHT-GRAY AREA ===== */ .footer, .footer .footer-grid, .footer .footer-grid > div{ background:#F8FAFC !important; } .footer .footer-grid a, .footer .footer-grid p, .footer .footer-grid li, .footer .footer-grid span{ color:#1D2254 !important; } .footer .footer-grid a:hover, .footer .footer-grid a:focus-visible{ color:#51EDC8 !important; } .footer h4{ color:#51EDC8 !important; } /* Social icons remain visible and turn navy on interaction */ .footer .social-icon, .footer .social-icon:visited{ color:#1D2254 !important; } .footer .social-icon:hover, .footer .social-icon:focus-visible, .footer .social-icon:active{ color:#1D2254 !important; background:#51EDC8 !important; border-color:#51EDC8 !important; } /* Modern subtle hover */ .service-card{ transition:transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease !important; } .service-card:hover{ transform:translateY(-6px) !important; } /* Service images: +20px wider than v31 */ .service-card .card-media{ width:calc(100% - 112px) !important; } /* About section: pure white */ .about{ background:#FFFFFF !important; } .about .container, .about-grid{ background:#FFFFFF !important; } /* User's exact B&W photo */ .about-photo{ background:#FFFFFF !important; } .about-photo img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; filter:none !important; display:block !important; } /* Project CTA: larger and slightly bolder */ .cta-title{ font-size:clamp(28px,2.45vw,38px) !important; font-weight:600 !important; letter-spacing:-.65px !important; max-width:320px !important; } /* Social icons: green background, white icon */ .footer .social-icon, .footer .social-icon:visited{ background:#51EDC8 !important; border-color:#51EDC8 !important; color:#FFFFFF !important; } .footer .social-icon svg{ color:#FFFFFF !important; fill:none !important; stroke:currentColor !important; } .footer .social-icon:hover, .footer .social-icon:focus-visible, .footer .social-icon:active{ background:#1D2254 !important; border-color:#1D2254 !important; color:#FFFFFF !important; } /* HERO: restore divider line and reduce vertical footprint ~15% */ .hero-typographic, .hero-typographic-inner{ min-height:610px !important; } .hero-typographic-inner{ padding-top:50px !important; padding-bottom:50px !important; } .hero-rule{ display:block !important; width:112px !important; height:5px !important; margin:28px 0 24px !important; background:#51EDC8 !important; opacity:1 !important; transform:none !important; } /* If hero is split layout in current file, reduce image/content height too */ .hero{ min-height:610px !important; } /* Service images: +10px wider, -30px tall */ .service-card .card-media{ width:calc(100% - 102px) !important; aspect-ratio:auto !important; height:190px !important; min-height:190px !important; } /* Bring project prompt closer to process steps */ .cta-band .container, .cta-band .cta-inner{ column-gap:20px !important; } .cta-copy{ margin-right:8px !important; } .cta-title{ max-width:285px !important; margin-right:0 !important; } /* Footer headings underline */ .footer h4{ position:relative !important; display:inline-block !important; padding-bottom:9px !important; margin-bottom:16px !important; } .footer h4::after{ content:"" !important; position:absolute !important; left:0 !important; bottom:0 !important; width:34px !important; height:2px !important; background:#51EDC8 !important; } /* Social icons blue */ .footer .social-icon, .footer .social-icon:visited{ background:transparent !important; border-color:#1D2254 !important; color:#1D2254 !important; } .footer .social-icon svg{ color:#1D2254 !important; stroke:currentColor !important; } .footer .social-icon:hover, .footer .social-icon:focus-visible, .footer .social-icon:active{ background:#51EDC8 !important; border-color:#51EDC8 !important; color:#1D2254 !important; } /* Hero main headline: 2px smaller */ .hero-copy-full h1{ font-size:clamp(46px,4.9vw,82px) !important; } /* Service images: 20px less height than previous version */ .service-card .card-media{ height:170px !important; min-height:170px !important; } /* Process labels a little larger */ .cta-step{ font-size:18px !important; } .cta-step strong{ font-size:21px !important; line-height:1.08 !important; } /* Footer: keep first link directly under its heading */ .footer .footer-grid > div{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; } .footer .footer-grid h4{ margin-bottom:12px !important; } .footer .footer-grid a, .footer .footer-grid p{ margin-top:0 !important; } /* Social icons: green background, white icons */ .footer .social-icon, .footer .social-icon:visited{ background:#51EDC8 !important; border-color:#51EDC8 !important; color:#FFFFFF !important; } .footer .social-icon svg{ color:#FFFFFF !important; stroke:currentColor !important; } .footer .social-icon:hover, .footer .social-icon:focus-visible, .footer .social-icon:active{ background:#1D2254 !important; border-color:#1D2254 !important; color:#FFFFFF !important; } /* Hero: +10px de azul arriba y abajo respecto de la versión anterior */ .hero-typographic-inner{ padding-top:60px !important; padding-bottom:60px !important; } .hero-typographic, .hero-typographic-inner, .hero{ min-height:630px !important; } /* Menos aire arriba y abajo de "Dos formas de comunicar..." */ .intro{ padding-top:34px !important; padding-bottom:26px !important; } /* ¿Tenés un proyecto? al mismo tamaño que "Ceci Acuña" */ .cta-title{ font-size:42px !important; line-height:1 !important; font-weight:600 !important; letter-spacing:-1px !important; max-width:360px !important; } /* Seguime: fondo verde + icono azul oscuro */ .footer .social-icon, .footer .social-icon:visited{ background:#51EDC8 !important; border-color:#51EDC8 !important; color:#1D2254 !important; } .footer .social-icon svg{ color:#1D2254 !important; stroke:currentColor !important; fill:none !important; } .footer .social-icon:hover, .footer .social-icon:focus-visible, .footer .social-icon:active{ background:#51EDC8 !important; border-color:#1D2254 !important; color:#1D2254 !important; } /* Mantener todo igual: solo compactamos alturas/espacios solicitados */ /* Hero ~20% más bajo que v35 */ .hero-typographic, .hero-typographic-inner, .hero{ min-height:504px !important; } .hero-typographic-inner{ padding-top:38px !important; padding-bottom:38px !important; } /* Acercar los servicios a "Dos formas de comunicar..." */ .intro{ padding-top:24px !important; padding-bottom:12px !important; } .services, .services-section{ padding-top:10px !important; } /* Acercar ¿Tenés un proyecto? a los tres pasos */ .cta-band .container, .cta-band .cta-inner{ column-gap:8px !important; gap:8px !important; } .cta-copy{ margin-right:0 !important; padding-right:0 !important; } .cta-title{ margin-right:0 !important; } .cta-steps{ margin-left:0 !important; padding-left:0 !important; gap:10px !important; } /* Mantener todo exactamente igual; solo compactar los enlaces del footer */ .footer .footer-grid > div > a, .footer .footer-grid > div > p{ margin-top:0 !important; margin-bottom:4px !important; line-height:1.28 !important; } .footer .footer-grid > div > a + a, .footer .footer-grid > div > a + p, .footer .footer-grid > div > p + a, .footer .footer-grid > div > p + p{ margin-top:0 !important; } .process-arrow-first{ display:flex !important; align-items:center !important; justify-content:center !important; } /* HERO: 20% más compacto para insinuar los servicios al ingresar */ .hero-typographic, .hero-typographic-inner, .hero{ min-height:404px !important; } .hero-typographic-inner{ padding-top:28px !important; padding-bottom:28px !important; } /* Más aire en "Dos formas de comunicar..." */ .intro{ padding-top:34px !important; padding-bottom:26px !important; } /* Menos interlineado en los textos introductorios de servicios */ .service-card-body > p{ line-height:1.28 !important; min-height:74px !important; margin-bottom:14px !important; } /* Subir las listas de servicios */ .service-card-body .service-list{ margin-top:-4px !important; margin-bottom:24px !important; } /* Proceso: compactar el inicio y dejar aire antes del botón final */ /* Footer: links uno debajo de otro, más compactos */ .footer .footer-grid > div{ gap:0 !important; } .footer .footer-grid > div > a, .footer .footer-grid > div > p{ display:block !important; margin:0 0 3px !important; line-height:1.22 !important; letter-spacing:0 !important; } .footer .footer-grid h4{ margin-bottom:10px !important; } /* Hero: more navy breathing room above first paragraph and below CTA, while keeping the overall section compact enough to reveal services. */ .hero-typographic-inner{ padding-top:42px !important; padding-bottom:42px !important; } .hero-typographic, .hero-typographic-inner, .hero{ min-height:430px !important; } /* Service titles rise because icons are no longer above them */ .service-card-head{ padding-top:18px !important; padding-bottom:22px !important; gap:0 !important; } .service-card-head h3{ margin-top:0 !important; } /* Icons now sit beside MÁS INFO */ .service-action{ display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; margin-top:4px !important; } .service-action .service-icon{ width:38px !important; height:38px !important; flex:0 0 38px !important; background:#FFFFFF !important; border:1.5px solid #51EDC8 !important; border-radius:50% !important; box-shadow:none !important; } .service-action .service-icon svg{ width:20px !important; height:20px !important; } .service-action .more{ margin:0 !important; } /* Make ¿Tenés un proyecto? as large as possible while remaining one line */ /* Footer: remove vertical gaps between consecutive items */ .footer .footer-grid > div{ gap:0 !important; } .footer .footer-grid > div > a, .footer .footer-grid > div > p{ margin-top:0 !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; line-height:1.2 !important; } .footer .footer-grid > div > a + a, .footer .footer-grid > div > a + p, .footer .footer-grid > div > p + a, .footer .footer-grid > div > p + p{ margin-top:0 !important; } /* Más margen blanco superior, equilibrado con el aire inferior de la tarjeta */ .service-card-head{ flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:14px !important; padding-top:38px !important; padding-left:30px !important; padding-right:30px !important; padding-bottom:22px !important; text-align:left !important; } /* Ícono a la izquierda del título */ .service-card-head .service-icon{ width:44px !important; height:44px !important; flex:0 0 44px !important; display:grid !important; place-items:center !important; margin:0 !important; background:#FFFFFF !important; border:1.5px solid #51EDC8 !important; border-radius:50% !important; box-shadow:none !important; } .service-card-head .service-icon svg{ width:22px !important; height:22px !important; } .service-card-head h3{ margin:0 !important; text-align:left !important; } /* MÁS INFO vuelve a quedar centrado y limpio */ .service-card-body .more{ display:flex !important; width:max-content !important; margin:4px auto 0 !important; align-items:center !important; justify-content:center !important; } /* ========================================================= SERVICE CARDS — based on the user's approved reference ========================================================= */ .services{ padding-top:24px !important; padding-bottom:72px !important; } .services-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:56px !important; max-width:1280px !important; margin-left:auto !important; margin-right:auto !important; align-items:stretch !important; } .service-card{ display:flex !important; flex-direction:column !important; width:100% !important; max-width:none !important; min-height:100% !important; background:#FFFFFF !important; border:1px solid #E6EBEF !important; border-radius:7px !important; overflow:hidden !important; box-shadow:0 12px 38px rgba(29,34,84,.055) !important; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease !important; } .service-card:hover{ transform:translateY(-5px) !important; box-shadow:0 22px 55px rgba(29,34,84,.095) !important; border-color:rgba(81,237,200,.55) !important; } /* Header: icon on left, title on right */ .service-card-head{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:18px !important; padding:38px 52px 30px !important; text-align:left !important; } .service-card-head .service-icon{ width:58px !important; height:58px !important; flex:0 0 58px !important; display:grid !important; place-items:center !important; margin:0 !important; background:#FFFFFF !important; color:#1D2254 !important; border:2px solid #51EDC8 !important; border-radius:50% !important; box-shadow:none !important; } .service-card-head .service-icon svg{ width:28px !important; height:28px !important; } .service-card-head h3{ margin:0 !important; color:#1D2254 !important; font-family:Helvetica,Arial,sans-serif !important; font-size:clamp(30px,2.45vw,42px) !important; line-height:1.02 !important; font-weight:700 !important; letter-spacing:-1px !important; text-align:left !important; } /* Large image spanning most of the card width */ .service-card .card-media{ order:2 !important; width:calc(100% - 96px) !important; height:310px !important; min-height:310px !important; margin:0 auto !important; padding:0 !important; background:#FFFFFF !important; border:0 !important; overflow:hidden !important; } .service-card .card-media img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; transform:none !important; } /* Content below image */ .service-card-body{ order:3 !important; display:flex !important; flex-direction:column !important; flex:1 1 auto !important; padding:28px 52px 42px !important; } .service-card-body > p{ min-height:72px !important; margin:0 auto 22px !important; max-width:560px !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; color:#1D2254 !important; font-size:20px !important; line-height:1.32 !important; font-weight:600 !important; text-align:center !important; letter-spacing:-.2px !important; } /* Checklist in two columns */ .service-card-body .service-list{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px 34px !important; margin:0 0 32px !important; padding:0 !important; list-style:none !important; color:#0F172A !important; font-size:16px !important; line-height:1.3 !important; } .service-card-body .service-list li{ position:relative !important; margin:0 !important; padding-left:25px !important; } .service-card-body .service-list li::before{ content:"✓" !important; position:absolute !important; left:0 !important; top:.03em !important; width:17px !important; height:17px !important; display:grid !important; place-items:center !important; border-radius:50% !important; background:#51EDC8 !important; color:#1D2254 !important; font-size:11px !important; line-height:1 !important; font-weight:700 !important; } /* Solid CTA matching reference */ .service-card-body .more{ margin:auto auto 0 !important; min-width:176px !important; min-height:54px !important; padding:0 22px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:14px !important; background:#51EDC8 !important; color:#1D2254 !important; border:1px solid #51EDC8 !important; border-radius:5px !important; font-size:17px !important; line-height:1 !important; font-weight:700 !important; text-decoration:none !important; box-shadow:none !important; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease !important; } .service-card-body .more:hover, .service-card-body .more:focus-visible{ transform:translateY(-2px) !important; background:#1D2254 !important; border-color:#1D2254 !important; color:#FFFFFF !important; box-shadow:0 12px 26px rgba(29,34,84,.14) !important; } .service-card-body .more span{ font-size:20px !important; line-height:1 !important; } /* Keep both cards visually aligned */ #senaletica .service-card-body > p, #web .service-card-body > p{ min-height:72px !important; } /* Responsive */ /* Centrar el conjunto ícono + título respecto de cada tarjeta, manteniendo el ícono a la izquierda del título */ .service-card-head{ justify-content:center !important; width:100% !important; box-sizing:border-box !important; text-align:left !important; } .service-card-head h3{ text-align:left !important; } /* Service cards appear immediately on page load instead of waiting for scroll */ #senaletica.service-card.reveal, #web.service-card.reveal{ opacity:0 !important; transform:translateY(22px) !important; animation:serviceCardLoad .8s cubic-bezier(.16,.84,.32,1) forwards !important; } #senaletica.service-card.reveal{ animation-delay:.18s !important; } #web.service-card.reveal{ animation-delay:.30s !important; } @keyframes serviceCardLoad{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } } /* Prevent the previous reveal/scroll classes from hiding these two cards */ #senaletica.service-card.reveal.visible, #web.service-card.reveal.visible{ opacity:1 !important; } @media(prefers-reduced-motion:reduce){ #senaletica.service-card.reveal, #web.service-card.reveal{ animation:none !important; opacity:1 !important; transform:none !important; } } /* Igualar visualmente el margen superior e inferior del título de sección */ .intro{ padding-top:34px !important; padding-bottom:34px !important; } /* Subir las tarjetas para que comiencen a la misma distancia por debajo de la frase que el aire que hay por encima */ .services{ padding-top:0 !important; } .services-grid{ margin-top:0 !important; } .services-grid{ transform:translateY(-5px) !important; } .hero-main-cta, .nav-whatsapp, .btn{ overflow:hidden; } html,body{margin:0} .hero-typographic, .hero-typographic-inner, .hero{ min-height:430px !important; } .hero-typographic-inner{ padding-top:42px !important; padding-bottom:42px !important; } .hero-copy-full h1{ font-weight:600 !important; font-size:clamp(46px,4.9vw,82px) !important; line-height:1 !important; letter-spacing:-2.7px !important; } svg.button-icon{ width:20px !important; height:20px !important; min-width:20px !important; max-width:20px !important; flex:0 0 20px !important; display:block !important; } svg.button-icon.whatsapp-icon{ width:21px !important; height:21px !important; min-width:21px !important; max-width:21px !important; flex-basis:21px !important; } .service-card .card-media picture, .service-card .card-media picture img{ display:block; width:100%; height:100%; } .service-card .card-media picture img{ object-fit:cover; object-position:center; } .about-photo picture, .about-photo picture img{ display:block; width:100%; height:100%; } .about-photo picture img{ object-fit:cover; object-position:center; } @media screen and (max-width:900px){ html,body{width:100%;max-width:100%;overflow-x:hidden} body{min-width:0!important} .container, .header .container, .hero-typographic .container.hero-typographic-inner{ width:calc(100% - 32px)!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; } /* HEADER */ .header{position:sticky!important;top:0!important;z-index:2000!important;background:#fff!important} .header .nav{ height:80px!important;min-height:80px!important; padding:0!important;display:flex!important;align-items:center!important; justify-content:space-between!important;gap:14px!important; } .brand{ font-size:30px!important;line-height:.79!important;letter-spacing:-1.25px!important; min-width:0!important;color:#1D2254!important; } .mobile-toggle{ display:grid!important;place-items:center!important; width:46px!important;height:46px!important;flex:0 0 46px!important; padding:0!important;background:#fff!important;color:#1D2254!important; border:1.5px solid #51EDC8!important;border-radius:6px!important; font-size:27px!important;line-height:1!important; } #mainMenu.menu{ display:none!important;position:absolute!important;top:80px!important;left:0!important;right:0!important; width:100%!important;padding:8px 18px 20px!important;background:#fff!important; border-top:1px solid rgba(29,34,84,.08)!important; box-shadow:0 18px 34px rgba(15,23,42,.14)!important;z-index:2100!important; } #mainMenu.menu.open{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important} #mainMenu.menu>a:not(.btn){ display:flex!important;align-items:center!important;min-height:50px!important; padding:0 4px!important;color:#1D2254!important;font-size:16px!important;font-weight:700!important; border-bottom:1px solid rgba(29,34,84,.07)!important; } #mainMenu.menu>a:not(.btn)::after{display:none!important} #mainMenu.menu .nav-whatsapp{ width:100%!important;min-height:50px!important;margin-top:14px!important;justify-content:center!important; } /* HERO */ .hero,.hero-typographic,.hero-typographic-inner{min-height:0!important} .hero-typographic .container.hero-typographic-inner{ padding-top:42px!important;padding-bottom:44px!important; } .hero-copy-full{width:100%!important;max-width:none!important} .hero-copy-full h1{ width:100%!important;max-width:none!important;margin:0!important; font-size:46px!important;line-height:.99!important;letter-spacing:-1.9px!important;font-weight:600!important; } .hero-line{display:block!important;width:100%!important} .hero-rule{width:105px!important;height:4px!important;margin:26px 0 21px!important} .hero-subcopy{ width:100%!important;max-width:none!important;margin:0 0 27px!important; font-size:20.5px!important;line-height:1.38!important;letter-spacing:-.15px!important; } .hero-subcopy .sub-line{display:inline!important} .hero-main-cta{ width:100%!important;max-width:390px!important;min-height:54px!important; padding:0 18px!important;font-size:13.5px!important;justify-content:space-between!important; } /* INTRO */ .intro{padding:31px 0 27px!important;text-align:center!important} .intro-single-line{ display:block!important;margin:0 auto!important;white-space:normal!important;text-align:center!important; font-size:32px!important;line-height:1.07!important;letter-spacing:-1px!important; } .intro-single-line span{display:inline!important} /* SERVICES */ .services{padding-top:0!important;padding-bottom:46px!important} .services-grid{ display:flex!important;flex-direction:column!important;gap:24px!important; width:100%!important;max-width:none!important;transform:none!important; } #senaletica{order:1!important} #web{order:2!important} .service-card{width:100%!important;max-width:none!important;min-height:0!important} .service-card-head{ display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important; gap:12px!important;padding:27px 18px 21px!important; } .service-card-head .service-icon{width:47px!important;height:47px!important;flex:0 0 47px!important} .service-card-head h3{margin:0!important;font-size:27px!important;line-height:1.03!important;text-align:left!important} .service-card .card-media{ width:calc(100% - 36px)!important;height:auto!important;min-height:0!important; aspect-ratio:16/10!important;margin:0 auto!important;padding:0!important;overflow:hidden!important; } .service-card .card-media picture, .service-card .card-media picture img{display:block!important;width:100%!important;height:100%!important} .service-card .card-media img{object-fit:cover!important;object-position:center!important;transform:none!important} .service-card-body{padding:22px 20px 28px!important} .service-card-body>p{ min-height:0!important;margin:0 0 18px!important; font-size:18px!important;line-height:1.32!important;text-align:center!important; } .service-card-body .service-list{ display:grid!important;grid-template-columns:1fr 1fr!important; gap:10px 16px!important;margin:0 0 25px!important;font-size:14px!important;line-height:1.3!important; } .service-card-body .more{ min-width:158px!important;min-height:50px!important;margin:0 auto!important;font-size:15px!important; } /* SOBRE MI */ .about{padding:40px 0!important;background:#fff!important} .about-grid{ display:grid!important;grid-template-columns:1fr 2fr!important; column-gap:14px!important;row-gap:22px!important;align-items:start!important; } .about-photo{grid-column:1!important;grid-row:1!important;width:100%!important;align-self:start!important} .about-photo picture,.about-photo picture img,.about-photo img{ display:block!important;width:100%!important;height:auto!important; aspect-ratio:1/1!important;object-fit:cover!important;object-position:center!important;max-height:none!important; } .about-copy{grid-column:2!important;grid-row:1!important;min-width:0!important} .about-copy .label{margin:0 0 6px!important;font-size:12px!important} .about-copy h2{margin:0 0 9px!important;font-size:28px!important;line-height:1!important} .about-copy p,.about-copy .lead{ margin:0 0 9px!important;font-size:13.4px!important;line-height:1.38!important; } .about-copy .text-link{margin-top:1px!important;font-size:12px!important} .attributes{ grid-column:1/-1!important;grid-row:2!important;display:flex!important;flex-direction:column!important; gap:12px!important;margin:0!important;padding:20px 0 0!important; border-left:0!important;border-top:1px solid #DDE2E8!important; } .attribute{ display:grid!important;grid-template-columns:48px 1fr!important;gap:13px!important;align-items:center!important; } .attribute strong{font-size:17px!important} .attribute span{font-size:14px!important} /* PROCESS */ .cta-band{padding:29px 0 31px!important} .cta-layout{ display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:16px!important; } .cta-title{ max-width:none!important;white-space:normal!important;font-size:33px!important;line-height:1.03!important; } .cta-steps{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important} .process-arrow{display:none!important} .cta-step{ display:grid!important;grid-template-columns:44px 1fr!important;gap:12px!important; width:100%!important;align-items:center!important;text-align:left!important; } .cta-step svg{width:42px!important;height:42px!important} .cta-step strong{display:inline!important;font-size:18px!important} .cta-step span{font-size:16px!important} .cta-button{width:100%!important;min-height:52px!important;margin:2px 0 0!important} /* FOOTER */ .footer{padding-top:32px!important} .footer .footer-grid{ display:grid!important;grid-template-columns:1fr!important;gap:24px!important;padding-bottom:28px!important; } .footer .footer-grid>div{width:100%!important} .footer h4{margin:0 0 11px!important;padding-bottom:7px!important;font-size:14px!important} .footer .footer-grid>div>a{ display:block!important;margin:0 0 7px!important;font-size:15.5px!important;line-height:1.35!important; } .footer .footer-grid br{display:none!important} .contact-line{ display:grid!important;grid-template-columns:24px minmax(0,1fr)!important; gap:9px!important;align-items:center!important;margin-bottom:10px!important; } .contact-line a{font-size:15.5px!important;line-height:1.35!important;overflow-wrap:anywhere!important} .social-icons{display:flex!important;gap:11px!important} .social-icon{width:44px!important;height:44px!important} .footer-bottom-centered{padding:13px 18px!important} .footer-bottom-centered p{ margin:0!important;font-size:12px!important;line-height:1.4!important;text-align:center!important; } } @media screen and (max-width:390px){ .container,.header .container,.hero-typographic .container.hero-typographic-inner{ width:calc(100% - 28px)!important; } .brand{font-size:28px!important} .hero-copy-full h1{font-size:40px!important} .hero-subcopy{font-size:19px!important} .intro-single-line{font-size:28px!important} .about-grid{grid-template-columns:34% 66%!important;column-gap:10px!important} .about-copy p,.about-copy .lead{font-size:12.6px!important} .service-card-body .service-list{grid-template-columns:1fr!important} } /* Mobile-only refinement. Desktop styles remain untouched. */ @media screen and (max-width:900px){ :root{--mobile-gutter:clamp(20px,6vw,32px)} html{scroll-padding-top:72px} body.menu-open{overflow:hidden} .container, .header .container, .hero-typographic .container.hero-typographic-inner{ width:calc(100% - (var(--mobile-gutter) * 2))!important; } /* Header and navigation */ .header{box-shadow:0 1px 0 rgba(29,34,84,.08)!important} .header .nav{height:72px!important;min-height:72px!important} .brand{ font-size:clamp(26px,7.5vw,30px)!important; line-height:.82!important; letter-spacing:-1.1px!important; } .mobile-toggle{ position:relative!important;width:48px!important;height:48px!important;flex-basis:48px!important; border:0!important;border-radius:50%!important;background:#F4FFFC!important; font-size:0!important;cursor:pointer!important; } .mobile-toggle::before, .mobile-toggle::after, .mobile-toggle span{ content:"";position:absolute;left:13px;width:22px;height:2px;border-radius:2px; background:#1D2254;transition:transform .22s ease,opacity .18s ease,top .22s ease; } .mobile-toggle::before{top:16px} .mobile-toggle span{top:23px} .mobile-toggle::after{top:30px} .mobile-toggle[aria-expanded="true"]::before{top:23px;transform:rotate(45deg)} .mobile-toggle[aria-expanded="true"] span{opacity:0} .mobile-toggle[aria-expanded="true"]::after{top:23px;transform:rotate(-45deg)} #mainMenu.menu{ top:72px!important;padding:10px var(--mobile-gutter) 24px!important; max-height:calc(100dvh - 72px)!important;overflow-y:auto!important; } #mainMenu.menu>a:not(.btn){min-height:56px!important;padding:0!important;font-size:16px!important} #mainMenu.menu .nav-whatsapp{min-height:54px!important;border-radius:4px!important} /* Hero */ .hero-typographic .container.hero-typographic-inner{ padding-top:clamp(42px,10vw,68px)!important; padding-bottom:clamp(46px,11vw,72px)!important; } .hero-copy-full h1{ font-size:clamp(38px,11.4vw,62px)!important; line-height:1.02!important;letter-spacing:-.045em!important; overflow-wrap:normal!important;word-break:normal!important; } .hero-line{width:auto!important} .hero-rule{width:82px!important;margin:clamp(24px,6vw,34px) 0 22px!important} .hero-subcopy{ max-width:40rem!important;margin-bottom:28px!important; font-size:clamp(18px,5.15vw,22px)!important;line-height:1.42!important; } .hero-main-cta{ width:auto!important;max-width:100%!important;min-height:56px!important; padding:0 20px!important;font-size:13px!important;letter-spacing:.015em!important; } /* Intro and service cards */ .intro{padding:36px 0 30px!important} .intro-single-line{ max-width:620px!important;font-size:clamp(29px,8.5vw,45px)!important; line-height:1.08!important;letter-spacing:-.035em!important; } .services{padding-bottom:52px!important} .services-grid{gap:28px!important} .service-card{border-radius:8px!important;box-shadow:0 12px 32px rgba(29,34,84,.08)!important} .service-card-head{justify-content:flex-start!important;padding:26px 22px 20px!important} .service-card-head h3{font-size:clamp(25px,7.4vw,32px)!important;letter-spacing:-.025em!important} .service-card .card-media{ width:calc(100% - 32px)!important;aspect-ratio:4/3!important;border-radius:4px!important; } .service-card-body{padding:22px 22px 28px!important} .service-card-body>p{ font-size:17px!important;line-height:1.48!important;text-align:left!important;margin-bottom:20px!important; } .service-card-body .service-list{ grid-template-columns:1fr!important;gap:0!important;margin-bottom:24px!important;font-size:15px!important; } .service-card-body .service-list li{ min-height:42px!important;display:flex!important;align-items:center!important; border-bottom:1px solid #E2E8F0!important; } .service-card-body .service-list li::marker{color:#51EDC8} .service-card-body .more{width:100%!important;min-height:52px!important;justify-content:center!important} /* About: a calm, readable single-column composition */ .about{padding:48px 0!important} .about-grid{display:flex!important;flex-direction:column!important;gap:0!important} .about-photo{width:100%!important;margin:0 0 26px!important} .about-photo picture,.about-photo picture img,.about-photo img{ aspect-ratio:4/3!important;object-position:center 27%!important;border-radius:4px!important; } .about-copy{width:100%!important} .about-copy .label{font-size:13px!important;letter-spacing:.08em!important;margin-bottom:8px!important} .about-copy h2{font-size:clamp(36px,10vw,46px)!important;margin-bottom:16px!important} .about-copy p,.about-copy .lead{ font-size:17px!important;line-height:1.55!important;margin-bottom:15px!important;color:#36405C!important; } .about-copy .lead{font-size:19px!important;color:#1D2254!important} .about-copy .text-link{min-height:44px!important;font-size:14px!important;margin-top:4px!important} .attributes{margin-top:28px!important;padding-top:24px!important;gap:16px!important} .attribute{grid-template-columns:48px minmax(0,1fr)!important} .attribute strong{font-size:18px!important} .attribute span{font-size:15px!important} /* Process CTA and footer */ .cta-band{padding:40px 0!important} .cta-layout{gap:24px!important} .cta-title{font-size:clamp(34px,9.5vw,44px)!important} .cta-steps{gap:14px!important} .cta-step{grid-template-columns:48px minmax(0,1fr)!important;gap:14px!important} .cta-step svg{width:46px!important;height:46px!important} .cta-step span{font-size:16px!important;line-height:1.35!important} .cta-button{min-height:56px!important} .footer{padding-top:40px!important} .footer .footer-grid{gap:30px!important} .footer h4{font-size:13px!important;letter-spacing:.06em!important} .footer .footer-grid>div>a,.contact-line a{min-height:38px!important;font-size:16px!important} .footer-bottom-centered{padding:18px var(--mobile-gutter)!important} .footer-bottom-centered p{font-size:13px!important} } @media screen and (max-width:370px){ :root{--mobile-gutter:18px} .hero-copy-full h1{font-size:36px!important} .hero-main-cta{font-size:12px!important;padding:0 15px!important} } .hero-title-desktop{display:contents} .hero-title-mobile{display:none} @media screen and (max-width:900px){ /* More white space above and below the logo */ .header .nav{height:96px!important;min-height:96px!important} #mainMenu.menu{top:96px!important;max-height:calc(100dvh - 96px)!important} /* Exact mobile title composition; desktop title remains unchanged */ .hero-title-desktop{display:none!important} .hero-title-mobile{display:block!important} .hero-title-mobile .hero-line{display:block!important;white-space:nowrap!important} .hero-copy-full h1{ font-size:clamp(29px,8.4vw,50px)!important; line-height:1.06!important; letter-spacing:-.04em!important; } /* Requested 10px lift */ #senaletica{transform:translateY(-10px)!important} /* Center checklist labels precisely against their check icons */ .service-card-body .service-list li{ min-height:42px!important;padding-left:30px!important; display:flex!important;align-items:center!important; } .service-card-body .service-list li::before{ top:50%!important;transform:translateY(-50%)!important; } /* Proportional vertical crop while preserving the full figure */ .about-photo picture,.about-photo picture img,.about-photo img{ aspect-ratio:4/5!important; object-fit:cover!important; object-position:center center!important; } } @media screen and (max-width:370px){ .hero-copy-full h1{font-size:28px!important} } @media screen and (max-width:900px){ /* Preserve each service image in its original proportion */ #senaletica .card-media, #web .card-media{ aspect-ratio:30/19!important; } #senaletica .card-media img, #web .card-media img{ object-fit:contain!important; object-position:center!important; } /* Slight proportional crop, keeping Ceci's full body visible */ .about-photo picture, .about-photo picture img, .about-photo img{ aspect-ratio:4/5!important; object-fit:cover!important; object-position:center center!important; } /* Tighter service-card rhythm around the imagery */ .intro{padding-bottom:8px!important} .service-card-head{ min-height:0!important;height:auto!important; padding:16px 18px 4px!important; } .service-card-body{ min-height:0!important;height:auto!important; padding-top:4px!important; } /* More breathing room between the process heading, steps and CTA */ .cta-layout{gap:34px!important} /* Center the footer hierarchy on small screens */ .footer .footer-grid{text-align:center!important} .footer .footer-grid>div{ display:flex!important;flex-direction:column!important;align-items:center!important; } .footer h4{text-align:center!important} .footer .footer-grid>div>a{display:block!important;text-align:center!important} .footer .contact-line{ display:flex!important;justify-content:center!important;align-items:center!important; width:100%!important;gap:9px!important; } .footer .contact-line a{min-width:0!important;text-align:center!important} .footer .social-icons{justify-content:center!important} } @media screen and (min-width:901px){ /* Service cards: identical internal rhythm and anchored CTAs */ .services-grid{align-items:stretch!important} .service-card{height:100%!important} .service-card-head{ min-height:190px!important; padding-top:34px!important; padding-bottom:32px!important; } .service-card .card-media{ height:245px!important; min-height:245px!important; } .service-card-body{ min-height:286px!important; padding-top:28px!important; padding-bottom:42px!important; } .service-card-body>p{ width:100%!important; min-height:88px!important; margin-bottom:22px!important; } .service-card-body .service-list{ width:100%!important; min-height:58px!important; margin-bottom:32px!important; } .service-card-body .more{margin-top:auto!important} /* About: retain photo size and make long-form copy easier to scan */ .about-copy p, .about-copy .lead{max-width:535px!important} /* Footer remains editorially aligned on desktop */ .footer-grid, .footer-grid h4, .footer-grid a, .footer-grid p{text-align:left!important} .footer-grid .social-icons{justify-content:flex-start!important} } @media screen and (min-width:901px){ /* Bring the process sequence closer to its heading */ .cta-layout{ grid-template-columns:410px minmax(0,1fr) auto!important; column-gap:10px!important; } /* Compact process row so every label fits on one consistent baseline */ .cta-steps{ grid-template-columns:26px minmax(128px,1fr) 26px minmax(128px,1fr) 26px minmax(138px,1fr)!important; gap:6px!important; } .cta-step{ grid-template-rows:38px 42px!important; gap:6px!important; font-size:18px!important; } .cta-step svg{ width:38px!important; height:38px!important; flex-basis:38px!important; } .cta-step span{ min-height:42px!important; font-size:18px!important; line-height:1.2!important; } .cta-step strong{ font-size:21px!important; line-height:1.08!important; } .process-arrow{ font-size:24px!important; transform:translateY(-7px)!important; } } @media screen and (min-width:901px){ /* Keep the three process items on the same vertical baseline */ .cta-step{ display:grid!important; grid-template-rows:46px 52px!important; grid-template-columns:1fr!important; justify-items:center!important; align-items:start!important; align-self:start!important; align-content:start!important; gap:8px!important; } .cta-step svg{ grid-row:1!important; align-self:start!important; margin:0!important; } .cta-step span{ grid-row:2!important; display:block!important; width:100%!important; min-height:52px!important; margin:0!important; padding:0!important; line-height:1.25!important; text-align:center!important; } .cta-step strong{ display:block!important; white-space:nowrap!important; } } /* Case study — Biogénesis Bagó */ .scroll-progress{position:fixed;inset:0 0 auto;height:3px;z-index:2000;background:rgba(255,255,255,.14)} .scroll-progress span{display:block;width:100%;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left} .case-page{background:var(--blue);color:#fff} .case-page .header{position:absolute;left:0;right:0;background:transparent!important;border:0} .case-page .brand{color:#fff!important} .case-back{display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em} .case-back span{color:var(--green);font-size:22px;transition:transform .25s ease} .case-back:hover span{transform:translateX(-5px)} .case-hero{position:relative;min-height:100svh;padding:138px 0 92px;display:grid;align-items:center;overflow:hidden} .case-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 74%,rgba(81,237,200,.1),transparent 31%);pointer-events:none} .case-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:7vw;align-items:center;position:relative} .case-eyebrow,.case-kicker{color:var(--green);font-size:12px;font-weight:700;letter-spacing:.16em;margin:0 0 22px} .case-hero h1{font-size:clamp(70px,8.6vw,142px);line-height:.78;letter-spacing:-.07em;margin:0 0 48px;font-weight:700} .case-hero h1 span{color:var(--green);margin-left:.5em} .case-deck{font-size:clamp(20px,1.8vw,28px);line-height:1.38;max-width:720px;margin:0 0 45px;color:rgba(255,255,255,.92)} .case-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid rgba(255,255,255,.2);padding-top:22px} .case-meta span{display:block;color:var(--green);font-size:10px;font-weight:700;letter-spacing:.13em;margin-bottom:7px} .case-meta strong{font-size:13px;line-height:1.35;font-weight:500} .case-hero-image{margin:0;position:relative;overflow:hidden;aspect-ratio:1/1.08;background:#111534} .case-hero-image::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.15);pointer-events:none} .case-hero-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)} .case-hero-image figcaption{position:absolute;right:20px;bottom:18px;font-size:11px;letter-spacing:.1em;background:var(--blue);padding:9px 12px} .case-scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.15em;font-weight:700;color:rgba(255,255,255,.75)} .case-scroll-cue i{font-size:20px;color:var(--green);font-style:normal;animation:cue 1.8s ease-in-out infinite} @keyframes cue{50%{transform:translateY(6px)}} .case-number{margin:0;color:var(--green);font-size:13px;font-weight:700;letter-spacing:.12em} .case-intro{background:#fff;color:var(--blue);padding:150px 0} .case-intro-grid{display:grid;grid-template-columns:80px 1.25fr .75fr;gap:5vw;align-items:start} .case-intro h2,.families-head h2,.map-copy h2,.result-copy h2{font-size:clamp(46px,5.4vw,82px);line-height:.98;letter-spacing:-.045em;margin:0;font-weight:700} .case-intro h2 span{color:#28b99a} .case-body,.families-head>p,.map-copy>p,.result-copy>p{font-size:18px;line-height:1.65;color:#4d5870;margin:46px 0 0} .system-stage{height:400vh;background:var(--blue)} .system-sticky{height:100vh;position:sticky;top:0;display:grid;align-items:center;overflow:hidden} .system-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:8vw;align-items:center} .system-copy h2{font-size:clamp(48px,5vw,78px);line-height:1;letter-spacing:-.045em;margin:0 0 30px;max-width:650px} .system-copy>p:not(.case-number):not(.case-kicker){font-size:18px;line-height:1.6;color:rgba(255,255,255,.72);max-width:570px} .system-copy .case-number{margin-bottom:28px}.system-copy .case-kicker{margin-bottom:18px} .system-counter{display:flex;align-items:center;gap:12px;margin-top:48px;font-size:13px;font-weight:700;color:rgba(255,255,255,.5)} .system-counter .current{color:var(--green);font-size:21px}.system-counter i{display:block;width:90px;height:1px;background:rgba(255,255,255,.25)} .system-visual{position:relative;height:580px} .system-card{position:absolute;width:65%;min-height:190px;padding:30px;background:#fff;color:var(--blue);box-shadow:0 20px 60px rgba(0,0,0,.18);opacity:.18;transform:scale(.9);transition:opacity .4s ease} .system-card:nth-child(1){top:0;left:0}.system-card:nth-child(2){top:78px;right:0}.system-card:nth-child(3){left:8%;bottom:74px}.system-card:nth-child(4){right:2%;bottom:0} .system-card.is-active{opacity:1} .system-card span{display:block;color:#26b99b;font-size:12px;font-weight:700;margin-bottom:38px} .system-card strong{display:block;font-size:28px;letter-spacing:-.025em;margin-bottom:8px}.system-card small{font-size:14px;color:#647087} .system-lines span{position:absolute;background:var(--green);opacity:.45;transform-origin:left} .system-lines span:nth-child(1){width:35%;height:1px;top:170px;left:31%}.system-lines span:nth-child(2){width:1px;height:34%;top:34%;left:50%}.system-lines span:nth-child(3){width:32%;height:1px;bottom:155px;left:34%} .case-families{background:#eef2f4;color:var(--blue);padding:150px 0} .families-head{display:grid;grid-template-columns:.55fr 1fr .65fr;gap:5vw;align-items:end;margin-bottom:82px} .families-head .case-number{margin-bottom:20px}.families-head .case-kicker{margin:0} .families-head>p{margin:0} .families-grid{display:grid;grid-template-columns:.6fr 1.15fr .75fr;gap:22px;align-items:stretch} .family-panel{margin:0;background:#fff;position:relative;overflow:hidden;min-height:600px} .family-panel img{width:100%;height:100%;object-fit:cover;padding:0;transition:transform .7s cubic-bezier(.2,.75,.25,1)} .family-panel:hover img{transform:scale(1.025)} .family-panel figcaption{position:absolute;left:18px;bottom:18px;background:var(--blue);color:#fff;padding:10px 12px;font-size:11px;letter-spacing:.06em} .family-photo img,.family-tech img,.family-emergency img{object-fit:cover;padding:0;object-position:center} .map-section{background:#fff;color:var(--blue);padding:145px 0} .map-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:7vw;align-items:center} .map-copy .case-number{margin-bottom:22px}.map-copy .case-kicker{margin-bottom:18px}.map-copy h2{font-size:clamp(45px,4.7vw,72px)} .map-figure{margin:0;position:relative;overflow:hidden;background:#f5f7f7;border:1px solid #e4e8e8;padding:0} .map-figure img{width:100%}.map-scan{position:absolute;top:0;bottom:0;width:2px;left:0;background:var(--green);box-shadow:0 0 18px rgba(81,237,200,.9);opacity:.85} .case-result{position:relative;background:#111634;min-height:80vh;display:flex;align-items:center;overflow:hidden} .case-result::before,.case-result::after{content:"";position:absolute;border:1px solid rgba(81,237,200,.16);border-radius:50%;pointer-events:none} .case-result::before{width:66vw;height:66vw;right:-25vw;top:-31vw;box-shadow:0 0 0 60px rgba(81,237,200,.025),0 0 0 120px rgba(81,237,200,.018)} .case-result::after{width:38vw;height:38vw;left:-20vw;bottom:-24vw} .result-image{position:absolute;inset:0}.result-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,22,52,.05) 20%,rgba(17,22,52,.94) 88%)} .result-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)} .result-copy{position:relative;z-index:1;padding-top:100px;padding-bottom:100px;display:grid;grid-template-columns:70px 1fr .65fr;gap:4vw;align-items:end} .result-copy .case-kicker{position:absolute;left:calc(70px + 4vw);top:-36px}.result-copy>p{color:rgba(255,255,255,.74);margin:0}.result-copy h2{font-size:clamp(46px,5vw,78px)} .case-cta{background:var(--green);color:var(--blue);padding:115px 0;text-align:center} .case-cta p{font-size:17px;margin:0 0 12px}.case-cta h2{font-size:clamp(48px,6.5vw,94px);letter-spacing:-.055em;margin:0 0 40px}.case-cta .btn{background:var(--blue);color:#fff} .case-footer{background:var(--blue);padding:40px 0}.case-footer .container{display:flex;align-items:center;justify-content:space-between}.case-footer .brand{color:#fff}.case-footer p{font-size:13px;color:rgba(255,255,255,.65)} @media(max-width:900px){ .case-page .nav{height:84px}.case-page .brand{font-size:23px}.case-back{font-size:10px} .case-hero{padding:112px 0 86px;min-height:auto}.case-hero-grid{grid-template-columns:1fr;gap:55px}.case-hero h1{font-size:clamp(68px,20vw,112px);margin-bottom:35px}.case-hero h1 span{margin-left:.25em}.case-meta{grid-template-columns:1fr;gap:14px}.case-hero-image{aspect-ratio:4/5}.case-scroll-cue{display:none} .case-intro{padding:92px 0}.case-intro-grid{grid-template-columns:1fr;gap:24px}.case-body{margin-top:8px}.case-intro h2,.families-head h2,.map-copy h2,.result-copy h2{font-size:clamp(40px,12vw,62px)} .system-stage{height:auto;padding:90px 0}.system-sticky{position:relative;height:auto}.system-layout{grid-template-columns:1fr;gap:54px}.system-visual{height:auto;display:grid;gap:12px}.system-card{position:relative!important;inset:auto!important;width:100%;min-height:0;opacity:1;transform:none!important;padding:24px}.system-card span{margin-bottom:20px}.system-lines{display:none}.system-counter{display:none} .case-families{padding:90px 0}.families-head{grid-template-columns:1fr;gap:26px;margin-bottom:48px}.families-head>p{margin-top:0}.families-grid{grid-template-columns:1fr}.family-panel{min-height:470px}.family-tech{min-height:350px} .map-section{padding:90px 0}.map-grid{grid-template-columns:1fr;gap:48px}.map-copy>p{margin-top:26px}.map-figure{padding:10px} .case-result{min-height:850px}.result-copy{grid-template-columns:1fr;gap:24px;padding-bottom:64px}.result-copy .case-kicker{position:static}.result-copy>p{margin-top:0}.result-image img{object-position:center} .case-cta{padding:85px 0}.case-footer .container{display:grid;gap:26px;text-align:center;justify-items:center}.case-footer p{margin:0} } @media(prefers-reduced-motion:reduce){.case-scroll-cue i{animation:none}.case-hero-image img,.result-image img{transform:none}.map-scan{display:none}} /* Home motion system */ .home-progress{position:fixed;inset:0 0 auto;height:3px;z-index:2200;background:rgba(29,34,84,.08);pointer-events:none} .home-progress span{display:block;width:100%;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left} .hero-scroll{position:absolute;z-index:4;right:max(52px,calc((100vw - var(--max))/2 + 28px));bottom:34px;display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.72);font-size:10px;font-weight:700;letter-spacing:.15em} .hero-scroll i{font-style:normal;color:var(--green);font-size:20px;animation:homeCue 1.8s ease-in-out infinite} @keyframes homeCue{50%{transform:translateY(6px)}} .hero-typographic::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 0,var(--green) 28%,rgba(81,237,200,.1) 75%,transparent 100%);transform:scaleX(.15);transform-origin:left;opacity:.65} .intro-single-line{overflow:hidden} .intro-single-line>span{display:inline-block} .service-card{will-change:transform} .service-card .card-media{position:relative;isolation:isolate} .service-card .card-media::after{content:"";position:absolute;inset:0;background:var(--green);z-index:2;transform:scaleX(0);transform-origin:right;pointer-events:none} .about-photo{position:relative;isolation:isolate} .about-photo::after{content:"";position:absolute;inset:0;border:1px solid rgba(29,34,84,.11);pointer-events:none} .cta-layout::after{content:"";position:absolute;left:33%;right:17%;top:50%;height:1px;background:rgba(81,237,200,.22);transform:scaleX(0);transform-origin:left;z-index:-1} .cta-step{position:relative} .cta-step::before{content:"";position:absolute;top:-8px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--green);opacity:0;transform:translate(-50%,-8px)} .motion-ready .btn .button-icon,.motion-ready .more span,.motion-ready .text-link span{transition:transform .3s cubic-bezier(.2,.75,.25,1)} .motion-ready .btn:hover .button-icon,.motion-ready .more:hover span,.motion-ready .text-link:hover span{transform:translateX(5px)} @media(max-width:900px){ .hero-scroll{display:none}.home-progress{height:2px}.hero-typographic::after{opacity:.4} .cta-layout::after,.cta-step::before{display:none} } @media(prefers-reduced-motion:reduce){ .hero-scroll i{animation:none}.home-progress{display:none}.hero-typographic::after{transform:none} } /* Case study refinements */ .case-page{--green:#51EDC8} .case-hero h1{ max-width:980px; font-size:clamp(52px,5.55vw,92px); line-height:.94; letter-spacing:-.055em; } .case-hero h1 span{color:var(--green);margin-left:.22em} .case-hero-image{ aspect-ratio:1.38/1; background:#fff; display:flex; align-items:center; justify-content:center; } .case-hero-image img{ width:100%; height:100%; object-fit:contain; object-position:center; transform:scale(1); } .case-intro h2 span{color:var(--green)} .system-visual{ height:auto; min-height:500px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-content:center; position:relative; } .system-card, .system-card:nth-child(1), .system-card:nth-child(2), .system-card:nth-child(3), .system-card:nth-child(4){ position:relative; inset:auto; width:auto; min-height:210px; padding:30px; display:flex; flex-direction:column; justify-content:flex-end; background:rgba(255,255,255,.055); color:#fff; border:1px solid rgba(81,237,200,.24); box-shadow:none; opacity:.5; transform:none; overflow:hidden; transition:background .38s ease,color .38s ease,border-color .38s ease,opacity .38s ease,transform .38s ease,box-shadow .38s ease; } .system-card::after{ content:""; position:absolute; top:24px; right:24px; width:9px; height:9px; border:1px solid var(--green); border-radius:50%; } .system-card.is-active{ background:var(--green); color:var(--blue); border-color:var(--green); opacity:1; transform:translateY(-5px); box-shadow:0 24px 65px rgba(0,0,0,.24); } .system-card.is-active::after{background:var(--blue);border-color:var(--blue)} .system-card span{color:var(--green);font-size:13px;margin:0 0 auto;letter-spacing:.12em} .system-card.is-active span{color:var(--blue)} .system-card strong{font-size:clamp(24px,2vw,32px);line-height:1.05;margin-bottom:10px} .system-card small{font-size:15px;line-height:1.35;color:rgba(255,255,255,.64)} .system-card.is-active small{color:rgba(29,34,84,.72)} .system-lines{display:none} @media(max-width:900px){ .case-hero h1{font-size:clamp(48px,14vw,72px);line-height:.94} .case-hero h1 span{margin-left:.14em} .case-hero-image{aspect-ratio:1.38/1} .system-visual{grid-template-columns:1fr;min-height:0;gap:10px} .system-card,.system-card:nth-child(1),.system-card:nth-child(2),.system-card:nth-child(3),.system-card:nth-child(4){min-height:170px;padding:24px;opacity:1} .system-card.is-active{transform:none} } /* Final case hierarchy and result backdrop */ .case-hero h1{line-height:.82} .case-hero h1 span{display:block;margin-left:.72em;margin-top:-.08em} .case-hero-image{aspect-ratio:1.6/1;background:#f4f0e6} .case-hero-image img{object-fit:contain;object-position:center} .case-result::before{ inset:0; width:auto; height:auto; right:0; top:0; border:0; border-radius:0; background-image:linear-gradient(90deg,rgba(17,22,52,.96) 0%,rgba(17,22,52,.78) 53%,rgba(17,22,52,.42) 100%),url('bio-dibujo-wayfinding.webp'); background-size:cover; background-position:center; box-shadow:none; opacity:1; } .case-result::after{ inset:0; width:auto; height:auto; left:0; bottom:0; border:0; border-radius:0; background:linear-gradient(180deg,rgba(29,34,84,.08),rgba(17,22,52,.38)); } @media(max-width:900px){ .case-hero h1{line-height:.84} .case-hero h1 span{margin-left:.48em;margin-top:-.05em} .case-hero-image{aspect-ratio:1.6/1} .case-result::before{background-position:64% center} } /* Plain brand-blue background for 05 · El resultado */ .case-result{background:var(--blue)} .case-result::before, .case-result::after{display:none!important;content:none!important} /* Strategic inner pages */ .inner-page{background:#fff;color:var(--blue)} .inner-page .menu .is-current::after{width:100%!important} .inner-hero{background:var(--blue);color:#fff;min-height:calc(100svh - 96px);display:grid;align-items:center;overflow:hidden;position:relative} .inner-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent)} .inner-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:8vw;align-items:center;padding-top:72px;padding-bottom:72px} .inner-eyebrow,.section-index{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--green);margin:0 0 24px} .inner-hero h1,.contact-hero h1{font-size:clamp(56px,6.5vw,104px);line-height:.91;letter-spacing:-.06em;margin:0 0 38px;max-width:900px} .inner-hero h1 span,.contact-hero h1 span,.outcomes h2 span{color:var(--green)} .inner-hero-copy>p:not(.inner-eyebrow){font-size:clamp(18px,1.55vw,24px);line-height:1.5;color:rgba(255,255,255,.78);max-width:680px;margin:0 0 36px} .web-console{border:1px solid rgba(81,237,200,.42);min-height:520px;padding:28px;background:rgba(255,255,255,.035);position:relative} .console-top{display:flex;gap:8px;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:24px}.console-top span{width:7px;height:7px;border-radius:50%;background:var(--green)} .console-grid{display:grid;grid-template-columns:1fr auto;margin-top:58px}.console-grid>*{padding:25px 0;border-bottom:1px solid rgba(255,255,255,.14)}.console-grid strong{font-size:clamp(26px,3vw,46px);letter-spacing:-.04em}.console-grid i{font-size:13px;color:var(--green);font-style:normal} .web-console>p{position:absolute;left:28px;bottom:28px;color:rgba(255,255,255,.58);font-size:13px;letter-spacing:.08em;text-transform:uppercase} .inner-intro,.profile-section{padding:145px 0}.split-intro,.profile-grid{display:grid;grid-template-columns:.32fr 1fr .72fr;gap:5vw;align-items:start} .split-intro h2,.profile-grid h2,.section-head h2,.contact-guide h2{font-size:clamp(44px,5vw,76px);line-height:1;letter-spacing:-.05em;margin:0} .split-intro .lead,.profile-grid .lead{font-size:23px;line-height:1.45;color:var(--blue);margin:0 0 24px}.split-intro p,.profile-grid p{font-size:17px;line-height:1.65;color:#536078} .inner-services,.method-section,.contact-types{padding:135px 0;background:#f3f6f7}.section-head{display:grid;grid-template-columns:.32fr 1.68fr;gap:5vw;margin-bottom:72px}.section-head h2{max-width:1050px} .capability-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cad3d9;border-left:1px solid #cad3d9}.capability{min-height:300px;padding:30px;border-right:1px solid #cad3d9;border-bottom:1px solid #cad3d9;display:flex;flex-direction:column}.capability span,.principles-grid span{font-size:12px;color:#28b99a;font-weight:700}.capability h3{font-size:27px;line-height:1.1;margin:auto 0 16px}.capability p{font-size:16px;line-height:1.55;color:#5a667a;margin:0} .process-section{background:var(--blue);color:#fff;padding:135px 0}.section-head.light h2{color:#fff}.process-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.2)}.process-list li{display:grid;grid-template-columns:90px 1fr;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.2)}.process-list b{color:var(--green);font-size:13px}.process-list h3{font-size:32px;margin:0 0 7px}.process-list p{margin:0;color:rgba(255,255,255,.65);font-size:17px} .outcomes{padding:145px 0}.outcomes-grid{display:grid;grid-template-columns:.3fr 1.2fr .5fr;gap:5vw;align-items:end}.outcomes h2{font-size:clamp(56px,7vw,110px);line-height:.9;letter-spacing:-.065em;margin:0}.outcomes>div>p:last-child{font-size:18px;line-height:1.6;color:#59657a} .inner-cta,.contact-close{background:var(--blue);color:#fff;text-align:center;padding:120px 0}.inner-cta p,.contact-close p{color:var(--green);font-weight:700;letter-spacing:.08em}.inner-cta h2,.contact-close h2{font-size:clamp(52px,7vw,104px);line-height:.95;letter-spacing:-.06em;margin:16px auto 38px;max-width:1100px}.inner-footer{background:#111634;color:#fff;padding:38px 0}.inner-footer .container{display:flex;align-items:center;justify-content:space-between}.inner-footer .brand{color:#fff}.inner-footer p{font-size:13px;color:rgba(255,255,255,.62)} .studio-hero .portrait{margin:0;align-self:stretch;min-height:610px;overflow:hidden}.studio-hero .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 24%;filter:grayscale(100%) contrast(1.03)} .manifesto{background:var(--green);padding:120px 0}.manifesto p{font-size:clamp(46px,6vw,88px);line-height:.98;letter-spacing:-.055em;margin:0;max-width:1250px} .principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#cfd7dc}.principles-grid article{background:#fff;min-height:330px;padding:30px;display:flex;flex-direction:column}.principles-grid h3{font-size:30px;margin:auto 0 16px}.principles-grid p{font-size:16px;line-height:1.55;color:#58657a;margin:0} .experience-band{background:var(--blue);color:#fff;padding:70px 0}.experience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}.experience-grid>div{border-left:1px solid rgba(81,237,200,.4);padding-left:24px}.experience-grid strong{display:block;color:var(--green);font-size:45px;letter-spacing:-.04em}.experience-grid span{display:block;font-size:14px;line-height:1.4;color:rgba(255,255,255,.72)} .contact-hero{background:var(--blue);color:#fff;padding:130px 0 110px}.contact-hero-grid{display:grid;grid-template-columns:1fr .85fr;gap:9vw;align-items:center}.contact-paths{display:grid;gap:14px}.contact-paths a{position:relative;border:1px solid rgba(81,237,200,.45);padding:28px;transition:.3s ease}.contact-paths a:hover{background:var(--green);color:var(--blue);transform:translateX(6px)}.contact-paths span{font-size:11px;letter-spacing:.13em;color:var(--green);font-weight:700}.contact-paths a:hover span{color:var(--blue)}.contact-paths h2{font-size:30px;margin:38px 0 8px}.contact-paths p{margin:0;color:rgba(255,255,255,.7)}.contact-paths a:hover p{color:var(--blue)}.contact-paths i{position:absolute;right:28px;top:28px;color:var(--green);font-style:normal;font-size:24px}.contact-paths a:hover i{color:var(--blue)} .contact-guide{padding:135px 0}.contact-guide-grid{display:grid;grid-template-columns:.3fr .9fr .8fr;gap:5vw}.contact-guide ul{list-style:none;margin:0;padding:0;border-top:1px solid #d5dce1}.contact-guide li{font-size:18px;line-height:1.4;padding:22px 0;border-bottom:1px solid #d5dce1}.contact-guide li span{color:#28b99a;font-size:12px;font-weight:700;margin-right:18px} .contact-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.contact-type-grid>div{background:#fff;padding:34px;min-height:230px}.contact-type-grid strong{display:block;font-size:27px;margin-bottom:55px}.contact-type-grid p{font-size:16px;line-height:1.55;color:#58657a} /* Web portfolio — continuous editorial carousel */ .works-showcase{background:#fff;padding:130px 0 105px;overflow:hidden} .works-head{display:grid;grid-template-columns:1.25fr .75fr;gap:8vw;align-items:end;margin-bottom:66px} .works-head h2{font-size:clamp(52px,6.2vw,96px);line-height:.91;letter-spacing:-.06em;margin:0} .works-side{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}.works-side p{font-size:17px;line-height:1.55;color:#58657a;margin:0;max-width:510px} .works-toggle{width:82px;height:82px;border-radius:50%;border:1px solid rgba(29,34,84,.3);background:#fff;color:var(--blue);display:grid;place-items:center;align-content:center;gap:3px;cursor:pointer;transition:.25s ease} .works-toggle:hover{background:var(--green);border-color:var(--green);transform:scale(1.04)}.pause-mark{font-size:18px;line-height:1}.works-toggle-label{font-size:9px;font-weight:700;letter-spacing:.08em} .works-viewport{width:100%;overflow:hidden;outline:none}.works-track{display:flex;width:max-content;gap:22px;align-items:flex-start;animation:worksMarquee 58s linear infinite;will-change:transform}.works-showcase.is-paused .works-track,.works-showcase:hover .works-track,.works-viewport:focus .works-track{animation-play-state:paused} @keyframes worksMarquee{to{transform:translateX(calc(-50% - 11px))}} .work-card{width:min(38vw,560px);flex:0 0 auto}.work-card-wide{width:min(46vw,680px)}.work-card-tall{width:min(32vw,470px)} .work-image{height:420px;overflow:hidden;background:#eef1f3;position:relative}.work-card-tall .work-image{height:510px}.work-card-wide .work-image{height:380px}.work-image::after{content:"";position:absolute;inset:0;border:1px solid rgba(29,34,84,.08);pointer-events:none}.work-image img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .8s cubic-bezier(.2,.75,.25,1)}.work-card:hover img{transform:scale(1.025)} .work-meta{display:grid;grid-template-columns:1fr auto;gap:6px 18px;padding-top:18px;border-top:1px solid var(--blue);margin-top:13px}.work-meta h3{font-size:clamp(24px,2vw,32px);letter-spacing:-.035em;margin:0}.work-meta p{font-size:13px;color:#65708a;margin:0;grid-column:1}.work-meta span{grid-column:2;grid-row:1/3;color:#28b99a;font-size:12px;font-weight:700} .works-hint{display:none} @media(max-width:900px){ .inner-hero{min-height:auto}.inner-hero-grid,.contact-hero-grid{grid-template-columns:1fr;gap:54px;padding-top:70px;padding-bottom:70px}.inner-hero h1,.contact-hero h1{font-size:clamp(50px,14vw,72px)}.web-console{min-height:410px}.studio-hero .portrait{min-height:520px} .inner-intro,.profile-section,.inner-services,.method-section,.process-section,.outcomes,.contact-guide,.contact-types{padding:86px 0}.split-intro,.profile-grid,.section-head,.outcomes-grid,.contact-guide-grid{grid-template-columns:1fr;gap:30px}.section-head{margin-bottom:46px}.capability-grid{grid-template-columns:1fr}.capability{min-height:220px}.principles-grid,.experience-grid,.contact-type-grid{grid-template-columns:1fr}.principles-grid article{min-height:230px}.experience-grid{gap:26px}.process-list li{grid-template-columns:54px 1fr}.outcomes h2{font-size:clamp(52px,14vw,78px)} .manifesto{padding:86px 0}.manifesto p{font-size:clamp(42px,11vw,64px)}.contact-hero{padding:88px 0}.inner-footer .container{display:grid;justify-items:center;text-align:center;gap:22px}.contact-type-grid>div{min-height:190px} .works-showcase{padding:84px 0 75px}.works-head{grid-template-columns:1fr;gap:28px;margin-bottom:42px}.works-head h2{font-size:clamp(48px,13vw,70px)}.works-side{grid-template-columns:1fr;gap:18px}.works-viewport{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px 18px;scrollbar-width:none}.works-viewport::-webkit-scrollbar{display:none}.works-track{animation:none;gap:14px}.work-card,.work-card-wide,.work-card-tall{width:82vw;scroll-snap-align:center}.work-image,.work-card-tall .work-image,.work-card-wide .work-image{height:56vw;min-height:250px;max-height:420px}.work-card:nth-child(n+7){display:none}.works-toggle{display:none}.works-hint{display:flex;justify-content:flex-end;gap:12px;padding:12px 24px 0;margin:0;font-size:10px;letter-spacing:.13em;font-weight:700;color:#65708a} } @media(prefers-reduced-motion:reduce){.works-track{animation:none}.works-viewport{overflow-x:auto}.work-card:nth-child(n+7){display:none}} /* Rounded treatment for the curated four-project carousel */ .work-card{width:min(42vw,640px)} .work-image,.work-card-tall .work-image,.work-card-wide .work-image{height:auto;aspect-ratio:1.897/1;border-radius:24px} .work-image::after{border-radius:24px} .work-meta{margin-left:8px;margin-right:8px} @media(max-width:900px){ .work-card,.work-card-wide,.work-card-tall{width:84vw} .work-image,.work-card-tall .work-image,.work-card-wide .work-image{height:auto;min-height:0;max-height:none;border-radius:18px} .work-image::after{border-radius:18px} .work-card:nth-child(n+5){display:none} } @media(prefers-reduced-motion:reduce){.work-card:nth-child(n+5){display:none}}