:root{ --navy-950:#071E38; --navy-900:#0A2A4D; --navy-800:#0A386C; --navy-700:#0D4A87; --blue-500:#1C7BC4; --teal-500:#0AC0C1; --teal-400:#3ED9D2; --teal-300:#8FEAE3; --teal-100:#E4FBF8; --ink:#0C1B2A; --ink-soft:#3E5570; --paper:#F6FAFB; --paper-alt:#EBF3F5; --white:#FFFFFF; --line: rgba(10,56,108,0.12); --shadow: 0 20px 50px -20px rgba(7,30,56,0.35); --radius: 18px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;} } body{ margin:0; font-family:'Inter', sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; } h1,h2,h3,.display{ font-family:'Space Grotesk', sans-serif; color:var(--navy-900); line-height:1.08; margin:0; letter-spacing:-0.01em; } p{margin:0; color:var(--ink-soft); line-height:1.65;} a{color:inherit; text-decoration:none;} ul{margin:0; padding:0; list-style:none;} img{max-width:100%; display:block;} section{position:relative;} .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; } @media (max-width:480px){ .wrap{ padding:0 18px; } } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal-500); } .eyebrow.on-light{color:var(--navy-700);} .eyebrow::before{ content:""; width:16px; height:1px; background:currentColor; display:inline-block; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 28px; border-radius:999px; font-weight:700; font-size:15px; cursor:pointer; border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space:nowrap; } .btn:hover{transform:translateY(-2px);} .btn-primary{ background:linear-gradient(135deg, var(--teal-500), var(--teal-400)); color:var(--navy-950); box-shadow:0 14px 30px -12px rgba(10,192,193,0.55); } .btn-primary:hover{box-shadow:0 18px 34px -12px rgba(10,192,193,0.7);} .btn-ghost{ background:transparent; border-color:rgba(255,255,255,0.35); color:#fff; } .btn-ghost:hover{background:rgba(255,255,255,0.1);} .btn-outline{ background:transparent; border-color:var(--navy-800); color:var(--navy-800); } .btn-outline:hover{background:var(--navy-800); color:#fff;} .btn-sm{padding:10px 18px; font-size:13.5px;} /* ---------- Header ---------- */ /* "body > header" (no solo "header") a propósito: el blog usa su propio

para el título del artículo, una etiqueta

distinta anidada dentro del contenido, no el header del sitio. Con el selector genérico "header" de antes, ESE header del artículo también se volvía sticky/pegajoso y subía a competir por el mismo top:0 que el header real del sitio — de ahí que el título del artículo pareciera "montarse" sobre el menú. Limitando esto a un hijo directo de , solo el header real del sitio quedará fijo arriba; el del artículo se queda quieto en su lugar normal, como cualquier título de página. */ body > header{ position:sticky; top:0; z-index:100; background:rgba(246,250,251,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav-row1{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; } .nav-row2{ display:flex; align-items:center; gap:20px; padding:10px 0; border-top:1px solid var(--line); } .brand{display:flex; align-items:center; gap:12px;} .brand img{height:44px; width:44px; object-fit:contain; object-position:center; background:#fff; padding:3px; border-radius:12px; box-shadow:0 6px 16px -6px rgba(7,30,56,0.3); flex-shrink:0;} .brand-text{display:flex; flex-direction:column; line-height:1.15;} .brand-text b{font-family:'Space Grotesk',sans-serif; font-size:17px; color:var(--navy-900); letter-spacing:0.01em;} .brand-text span{font-size:11px; letter-spacing:0.12em; color:var(--teal-500); font-weight:700; text-transform:uppercase;} .nav-links{display:flex; align-items:center; gap:34px;} .nav-links a{ font-size:14.5px; font-weight:600; color:var(--navy-800); position:relative; padding:4px 0; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--teal-500); transition:width .2s ease; } .nav-links a:hover::after{width:100%;} .nav-links a.active{ color:var(--teal-500); } .nav-links a.active::after{ width:100%; } .row2-actions{display:flex; align-items:center; gap:12px; margin-left:auto; flex:none;} .burger{display:none; background:none; border:none; cursor:pointer; padding:6px;} .burger span{display:block; width:24px; height:2px; background:var(--navy-900); margin:5px 0; transition:.25s;} .lang-switch{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--navy-800); background:#fff; transition:border-color .18s ease, background .18s ease; } .lang-switch:hover{border-color:var(--teal-500); background:var(--teal-100);} /* ---------- Hero ---------- */ .hero{ background:linear-gradient(150deg, var(--navy-950) 0%, var(--navy-800) 58%, var(--navy-700) 100%); overflow:hidden; padding:58px 0 48px; } @media (max-width:720px){ .hero{ padding:30px 0 28px; } } .hero-inner{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; position:relative; z-index:2; } .hero h1{ font-size:clamp(34px, 4.6vw, 56px); color:#fff; margin-top:18px; } .hero h1 em{ font-style:normal; background:linear-gradient(100deg, var(--teal-400), var(--teal-300)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero p.lead{ color:rgba(230,242,247,0.82); font-size:17.5px; max-width:520px; margin-top:20px; } .hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;} .hero-meta{ display:flex; gap:26px; margin-top:42px; flex-wrap:wrap; } .hero-meta div{display:flex; flex-direction:column; gap:2px;} .hero-meta b{color:#fff; font-family:'Space Grotesk',sans-serif; font-size:22px;} .hero-meta span{color:rgba(230,242,247,0.65); font-size:12.5px;} .hero-card{ position:relative; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius); padding:26px; backdrop-filter:blur(6px); } .hero-card img{border-radius:12px; width:100%; aspect-ratio:3/3.9; object-fit:cover; object-position:top center;} /* Barra de mensaje: mismo ancho que la foto (es un hijo normal del mismo contenedor con el mismo padding a los lados, no un elemento flotante superpuesto con posición absoluta calculada a ojo). */ /* Barra de mensaje: overlay pegado a la parte de ABAJO de cada foto (no una barra aparte debajo de la imagen), con degradado para que se sienta parte de la foto y no un parche encima. Al vivir DENTRO de .hero-carousel (que ya tiene overflow:hidden + border-radius), queda recortada automáticamente a las mismas esquinas redondeadas que la imagen — mismo ancho que la foto, sin cálculos manuales. */ .hero-badge{ position:absolute; left:0; right:0; bottom:0; z-index:5; background:linear-gradient(0deg, rgba(7,30,56,0.92) 0%, rgba(7,30,56,0.78) 55%, rgba(7,30,56,0) 100%); color:#fff; padding:34px 18px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; box-sizing:border-box; } #heroMessage{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; line-height:1.35; color:#fff; transition:opacity .25s ease; } /* comet / swoosh signature */ .comet-wrap{position:absolute; inset:0; z-index:1; pointer-events:none;} .comet-path{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 2.6s cubic-bezier(.2,.7,.2,1) .3s forwards; } @keyframes draw{ to{ stroke-dashoffset:0; } } .spark{ position:absolute; animation:twinkle 2.4s ease-in-out infinite; } @keyframes twinkle{ 0%,100%{opacity:.25; transform:scale(.8);} 50%{opacity:1; transform:scale(1.15);} } /* ---------- Trust bar ---------- */ .trust{ background:var(--white); border-bottom:1px solid var(--line); } .trust-inner{ display:grid; grid-template-columns:repeat(4,1fr); padding:34px 0; } .trust-inner div{ text-align:center; border-right:1px solid var(--line); padding:0 12px; } .trust-inner div:last-child{border-right:none;} .trust-inner b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:clamp(22px,3vw,30px); color:var(--navy-900); } .trust-inner span{font-size:12.5px; color:var(--ink-soft); font-weight:600;} /* ---------- Section heading ---------- */ .sec-head{max-width:640px; margin-bottom:52px;} .sec-head h2{font-size:clamp(26px,3.4vw,38px); margin-top:14px;} .sec-head p{margin-top:14px; font-size:16px;} .sec-pad{padding:64px 0;} @media (max-width:720px){ .sec-pad{ padding:40px 0; } } /* ---------- Services ---------- */ .services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; } .svc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent;} .svc-photo{ width:100%; aspect-ratio:4/2.7; overflow:hidden; background:var(--paper-alt); } .svc-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; } .svc-card:hover .svc-photo img{ transform:scale(1.05); } .svc-body{ padding:24px 24px 26px; } .svc-icon{ width:44px; height:44px; border-radius:12px; background:var(--teal-100); display:flex; align-items:center; justify-content:center; margin-bottom:14px; margin-top:-46px; position:relative; box-shadow:0 6px 14px -6px rgba(7,30,56,0.3); border:3px solid #fff; } .svc-icon svg{width:22px; height:22px; stroke:var(--navy-800);} .svc-card h3{font-size:18px; margin-bottom:10px;} .svc-card p{font-size:14.5px;} .svc-card .svc-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13.5px; font-weight:700; color:var(--navy-800); } .svc-card .svc-link svg{width:14px; height:14px; transition:transform .2s;} .svc-card:hover .svc-link svg{transform:translateX(3px);} .svc-price{ margin-top:14px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--navy-900); } .svc-card .svc-link.svc-buy{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:11px 18px; border-radius:999px; background:var(--navy-800); color:#fff; font-size:13.5px; font-weight:700; transition:background .18s ease, transform .18s ease; } .svc-card .svc-link.svc-buy svg{width:16px; height:16px;} .svc-card .svc-link.svc-buy:hover{ background:var(--teal-500); color:var(--navy-950); transform:translateY(-2px); } /* Resaltado al llegar desde un enlace directo (ej. resultados de búsqueda) */ .svc-card{ scroll-margin-top:130px; } .svc-card:target{ outline:3px solid var(--teal-500); outline-offset:3px; animation:svcTargetPulse 1.8s ease-out 1; } @keyframes svcTargetPulse{ 0%{ box-shadow:0 0 0 8px rgba(10,192,193,0.35); } 100%{ box-shadow:0 0 0 0 rgba(10,192,193,0); } } /* ---------- Hero carousel ---------- */ .hero-card{ padding:0; overflow:hidden; } .hero-carousel{ position:relative; width:100%; aspect-ratio:3/3.9; border-radius:12px; overflow:hidden; } .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease; pointer-events:none; } .hero-slide.active{ opacity:1; pointer-events:auto; } .hero-slide img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; } .hero-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:34px; height:34px; border-radius:50%; background:rgba(7,30,56,0.55); border:1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(4px); } .hero-nav svg{ width:16px; height:16px; stroke:#fff; } .hero-nav.prev{ left:10px; } .hero-nav.next{ right:10px; } /* Los puntos ahora viven DENTRO de la barra del mensaje (fondo navy sólido y fijo), en vez de flotar sobre 5 fotos distintas con brillo muy distinto entre sí — así el contraste queda garantizado siempre, sin depender de qué foto esté activa en ese momento. */ .hero-dots{ display:flex; align-items:center; gap:7px; flex:0 0 auto; } .hero-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.35); cursor:pointer; transition:.2s; border:1px solid rgba(255,255,255,0.5); } .hero-dot.active{ background:var(--teal-400); border-color:var(--teal-400); width:20px; border-radius:4px; } /* ---------- Why us ---------- */ .why{background:var(--navy-950); color:#fff;} .why .sec-head p{color:rgba(230,242,247,0.72);} .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;} .why-col{ border-radius:var(--radius); padding:32px 30px; } .why-col.good{background:linear-gradient(160deg, rgba(10,192,193,0.14), rgba(10,192,193,0.03)); border:1px solid rgba(10,192,193,0.35);} .why-col.bad{background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1);} .why-col h3{color:#fff; font-size:19px; margin-bottom:20px; display:flex; align-items:center; gap:10px;} .why-col li{display:flex; gap:12px; padding:10px 0; font-size:14.5px; color:rgba(230,242,247,0.85); border-top:1px solid rgba(255,255,255,0.08);} .why-col li:first-of-type{border-top:none;} .why-col.good li svg{stroke:var(--teal-400);} .why-col.bad li svg{stroke:rgba(255,255,255,0.35);} .why-col svg{flex:none; width:18px; height:18px; margin-top:1px;} /* ---------- Process ---------- */ .process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;} .step{position:relative; padding-top:8px;} .step .num{ font-family:'Space Grotesk',sans-serif; font-size:46px; font-weight:700; color:var(--teal-500); opacity:.9; } .step h3{font-size:19px; margin:10px 0 10px;} .step p{font-size:14.5px;} .step:not(:last-child)::after{ content:""; position:absolute; top:26px; right:-15px; width:30px; height:2px; background:repeating-linear-gradient(90deg, var(--teal-500) 0 6px, transparent 6px 12px); display:none; } @media(min-width:900px){ .step:not(:last-child)::after{display:block;} } /* ---------- Coverage ---------- */ .coverage{background:var(--paper-alt);} .coverage-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;} .chip-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;} .chip{ padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--navy-800); } .cov-visual{ background:#fff; border-radius:var(--radius); padding:6px; position:relative; overflow:hidden; min-height:420px; border:1px solid var(--line); box-shadow:var(--shadow); } #covMap{ width:100%; height:420px; border-radius:12px; } /* Pin estilo Google Maps: gota con punto blanco en el centro */ .impeca-pin{ position:relative; width:30px; height:40px; } .impeca-pin::before{ content:""; position:absolute; top:0; left:0; width:30px; height:30px; background:var(--teal-500); border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 4px 10px rgba(7,30,56,0.35); } .impeca-pin span{ position:absolute; top:8px; left:8px; width:14px; height:14px; background:#fff; border-radius:50%; z-index:1; } .impeca-pin:hover::before{ background:var(--navy-800); } /* Popup / info window estilo Google Maps: blanco, sombra suave */ .leaflet-popup-content-wrapper{ border-radius:10px; background:#fff; color:var(--ink); box-shadow:0 6px 20px rgba(7,30,56,0.25); } .leaflet-popup-content{ font-family:'Inter',sans-serif; font-size:13.5px; margin:10px 14px; color:var(--ink); } .leaflet-popup-content b{ font-family:'Space Grotesk',sans-serif; color:var(--navy-800); } .leaflet-popup-tip{ background:#fff; } .leaflet-container{ background:#e8eaed !important; font-family:'Inter',sans-serif; } .leaflet-control-zoom{ border:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; } .leaflet-control-zoom a{ color:var(--navy-800) !important; } @media (max-width:980px){ #covMap{ height:320px; } .cov-visual{ min-height:320px; } } /* ---------- Testimonials ---------- */ .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} .testi-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:16px; } .testi-card .stars{color:var(--teal-500); font-size:14px; letter-spacing:2px;} .testi-card p{font-size:15px; color:var(--ink);} .testi-who{display:flex; align-items:center; gap:12px; margin-top:auto;} .testi-avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, var(--navy-800), var(--teal-500)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; font-family:'Space Grotesk',sans-serif; } .testi-who b{display:block; font-size:13.5px; color:var(--navy-900);} .testi-who span{font-size:12px; color:var(--ink-soft);} /* ---------- Group section ---------- */ .group{background:var(--white);} .group-intro{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; margin-bottom:56px; } .group-badge{ display:inline-flex; align-items:center; gap:14px; background:var(--paper-alt); border-radius:16px; padding:16px 20px; } .group-badge img{height:52px; width:52px; object-fit:contain; object-position:center; background:#fff; padding:4px; border-radius:12px;} .group-badge b{display:block; font-family:'Space Grotesk',sans-serif; font-size:16px; color:var(--navy-900);} .group-badge span{font-size:12px; color:var(--ink-soft);} .subs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;} .sub-card{ border-radius:var(--radius); padding:24px 22px; border:1px solid var(--line); position:relative; min-height:190px; display:flex; flex-direction:column; } .sub-card.active{ background:linear-gradient(165deg, var(--navy-900), var(--navy-800)); color:#fff; border-color:transparent; } .sub-card.soon{background:var(--paper-alt); color:var(--navy-900);} .sub-tag{ align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; padding:5px 10px; border-radius:999px; margin-bottom:14px; } .sub-card.active .sub-tag{background:rgba(10,192,193,0.22); color:var(--teal-300);} .sub-card.soon .sub-tag{background:rgba(10,56,108,0.1); color:var(--navy-700);} .sub-card h3{font-size:16.5px; margin-bottom:8px;} .sub-card.active h3{color:#fff;} .sub-card p{font-size:13px; flex:1;} .sub-card.active p{color:rgba(230,242,247,0.75);} .sub-card .sub-link{margin-top:14px; font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px;} .sub-card.active .sub-link{color:var(--teal-300);} .sub-card.soon .sub-link{color:var(--ink-soft);} /* ---------- CTA banner ---------- */ .cta-banner{ background:linear-gradient(120deg, var(--navy-950), var(--navy-800)); border-radius:28px; padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden; } .cta-banner h2{color:#fff; font-size:clamp(24px,3vw,32px); max-width:480px;} .cta-banner p{color:rgba(230,242,247,0.75); margin-top:10px;} .cta-actions{display:flex; gap:14px; flex-wrap:wrap;} /* ---------- Aliados: carrusel de 4 columnas ---------- */ .allies-wrap{background:var(--white);} .allies-carousel{ position:relative; overflow:hidden; } .allies-carousel::before, .allies-carousel::after{ content:''; position:absolute; top:0; bottom:0; width:64px; z-index:2; pointer-events:none; } .allies-carousel::before{ left:0; background:linear-gradient(90deg, var(--paper) 0%, rgba(246,250,251,0) 100%); } .allies-carousel::after{ right:0; background:linear-gradient(270deg, var(--paper) 0%, rgba(246,250,251,0) 100%); } .allies-track{ display:flex; gap:20px; width:max-content; animation:alliesMarquee 46s linear infinite; } .allies-carousel:hover .allies-track, .allies-carousel:focus-within .allies-track{ animation-play-state:paused; } @keyframes alliesMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .ally-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; display:flex; align-items:center; justify-content:center; transition:transform .18s ease, box-shadow .18s ease; flex:0 0 240px; } .ally-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } .ally-card img{ width:100%; height:auto; border-radius:10px; } @media (max-width:560px){ .ally-card{ flex:0 0 190px; } } @media (prefers-reduced-motion: reduce){ .allies-track{ animation:none; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; } .ally-card{ scroll-snap-align:start; } .allies-track .ally-card[aria-hidden="true"]{ display:none; } } /* ---------- Contact form ---------- */ .contact-wrap{background:var(--paper-alt);} .contact-card{ display:grid; grid-template-columns:0.85fr 1.15fr; background:#fff; border-radius:28px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); } .contact-info{ background:linear-gradient(165deg, var(--navy-950), var(--navy-800)); color:#fff; padding:48px 40px; display:flex; flex-direction:column; justify-content:center; } .contact-info h2{color:#fff; font-size:clamp(22px,2.6vw,28px); margin-top:12px;} .contact-info p{color:rgba(230,242,247,0.75); margin-top:14px; font-size:14.5px;} .info-list{margin-top:30px; display:flex; flex-direction:column; gap:16px;} .info-list div{display:flex; gap:12px; align-items:center; font-size:14px; color:rgba(230,242,247,0.9);} .info-list svg{flex:none; width:18px; height:18px; stroke:var(--teal-400);} .contact-form{padding:44px 40px; display:flex; flex-direction:column; gap:18px;} .contact-form .form-row{display:flex; flex-direction:column; gap:6px;} .contact-form .form-row.two{display:grid; grid-template-columns:1fr 1fr; gap:16px;} .contact-form .form-row label{font-size:13px; font-weight:700; color:var(--navy-800); display:flex; flex-direction:column; gap:6px;} .contact-form .form-row input, .contact-form .form-row select, .contact-form .form-row textarea{ font-family:'Inter',sans-serif; font-size:14.5px; padding:12px 14px; font-weight:400; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--paper); transition:border-color .18s ease, box-shadow .18s ease; } .contact-form .form-row input:focus, .contact-form .form-row select:focus, .contact-form .form-row textarea:focus{ outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(10,192,193,0.15); } .contact-form .form-row textarea{resize:vertical; min-height:110px; font-weight:400;} .form-submit{margin-top:4px;} @media (max-width:980px){ .contact-card{grid-template-columns:1fr;} .contact-form .form-row.two{grid-template-columns:1fr;} } /* ---------- Footer ---------- */ footer{background:var(--navy-950); color:rgba(230,242,247,0.7); padding:70px 0 26px;} .foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.08);} .foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;} .foot-brand img{height:42px; width:42px; object-fit:contain; object-position:center; background:#fff; padding:3px; border-radius:10px;} .foot-brand b{color:#fff; font-family:'Space Grotesk',sans-serif; font-size:16px;} footer h4{color:#fff; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px;} footer ul li{margin-bottom:10px; font-size:14px;} footer ul li a:hover{color:#fff;} .foot-social{display:flex; gap:10px; margin-top:18px;} .foot-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; } .foot-social a:hover{background:var(--teal-500); border-color:var(--teal-500); color:var(--navy-950);} .foot-social svg{width:16px; height:16px;} .foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; flex-wrap:wrap; gap:10px; } /* ---------- Floating WhatsApp ---------- */ .wa-float{ position:fixed; right:22px; bottom:22px; z-index:200; width:58px; height:58px; border-radius:50%; background:#20BA5A; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px -8px rgba(0,0,0,0.4); transition:transform .2s ease; } .wa-float:hover{transform:scale(1.07);} .wa-float svg{width:28px; height:28px; fill:#fff;} /* ---------- Reveal ---------- */ .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;} .reveal.in{opacity:1; transform:translateY(0);} /* ---------- Mobile ---------- */ @media (max-width:980px){ .hero-inner{grid-template-columns:1fr;} .hero-card{order:-1; max-width:420px;} .services-grid{grid-template-columns:repeat(2,1fr);} .why-grid{grid-template-columns:1fr;} .process-grid{grid-template-columns:1fr;} .coverage-inner{grid-template-columns:1fr;} .testi-grid{grid-template-columns:1fr;} .group-intro{grid-template-columns:1fr;} .subs-grid{grid-template-columns:repeat(2,1fr);} .foot-grid{grid-template-columns:1fr 1fr;} .trust-inner{grid-template-columns:repeat(2,1fr); row-gap:24px;} .trust-inner div:nth-child(2){border-right:none;} } @media (max-width:720px){ .nav-links{ position:fixed; inset:64px 48px auto 48px; background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:18px; flex-direction:column; align-items:flex-start; gap:6px; border:1px solid var(--line); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.22s ease; } .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;} .nav-links a{padding:10px 6px; width:100%;} .burger{display:block;} .nav-cta .btn-sm span.long{display:none;} .services-grid{grid-template-columns:1fr;} .subs-grid{grid-template-columns:1fr;} .foot-grid{grid-template-columns:1fr;} .cta-banner{padding:38px 26px;} /* Con el menú móvil abierto, ocultar los íconos de cuenta y carrito para que no queden asomados detrás/al lado del panel del menú. */ header:has(.nav-links.open) .row2-actions .icon-btn{ display:none; } } /* ---------- Header icons: búsqueda, cuenta, carrito ---------- */ .icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:transparent; border:1px solid var(--line); color:var(--navy-800); cursor:pointer; transition:background .18s ease, border-color .18s ease; } .icon-btn:hover{ background:var(--teal-100); border-color:var(--teal-500); } .icon-btn svg{ width:18px; height:18px; } .cart-btn .cart-count{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:var(--teal-500); color:var(--navy-950); font-size:10px; font-weight:800; line-height:16px; text-align:center; } .search-form-inline{ display:flex; align-items:center; gap:8px; flex:0 1 64%; max-width:64%; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 8px 6px 16px; } .search-form-inline svg{ width:17px; height:17px; color:var(--ink-soft); flex:none; } .search-form-inline input{ flex:1; border:none; background:transparent; outline:none; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); min-width:0; } .search-form-inline input::placeholder{ color:var(--ink-soft); } .search-form-inline button{ padding:9px 18px; border-radius:999px; border:none; cursor:pointer; background:var(--navy-800); color:#fff; font-weight:700; font-size:13px; flex:none; white-space:nowrap; } .search-form-inline button:hover{ background:var(--teal-500); color:var(--navy-950); } @media (max-width:900px){ .nav-row2{ flex-wrap:wrap; } .search-form-inline{ flex:1 1 100%; max-width:100%; order:2; } .row2-actions{ order:1; margin-left:auto; } } @media (max-width:720px){ .icon-btn{ width:34px; height:34px; } .row2-actions{ gap:8px; } .btn.btn-outline.btn-sm{ padding:9px 14px; font-size:12.5px; } } @media (max-width:480px){ .lang-switch{ padding:7px 9px; font-size:11.5px; } } /* ---------- Segmentos: Hogares / Pymes / Empresas ---------- */ .segments{ background:var(--navy-950); padding-top:42px; } .segments-inner{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding-bottom:0; } .segment-tab{ display:flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px 999px 0 0; color:rgba(230,242,247,0.6); font-weight:700; font-size:14px; cursor:pointer; border-bottom:2px solid transparent; transition:color .18s ease, border-color .18s ease; } .segment-tab svg{ width:17px; height:17px; } .segment-tab:hover{ color:rgba(230,242,247,0.9); } .segment-tab.active{ color:#fff; border-color:var(--teal-500); } .segment-copy{ background:linear-gradient(180deg, var(--navy-950), var(--navy-800)); padding:22px 24px 34px; text-align:center; } .segment-text{ display:none; max-width:640px; margin:0 auto; color:rgba(230,242,247,0.85); font-size:15px; } .segment-text.active{ display:block; } @media (max-width:600px){ .segment-tab{ padding:10px 14px; font-size:13px; } } /* ================= CARRUSEL DE TESTIMONIOS ================= */ /* Reutiliza la mecánica de .allies-carousel/.allies-track (definida en colombia.css / haiti.css: desplazamiento continuo con CSS puro, sin JS, con degradado en los bordes y pausa al pasar el mouse). Aquí solo se ajustan las tarjetas de testimonio para que funcionen como items de ese carrusel en vez de como grilla. */ .testi-track{ align-items:stretch; } .testi-track .testi-card{ flex:0 0 300px; min-height:220px; margin:0; } .testi-track .testi-card p{ text-align:justify; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } @media (max-width:560px){ .testi-track .testi-card{ flex:0 0 260px; min-height:210px; } } /* ---------- Formulario "Deja tu reseña" ---------- */ .testi-form-toggle{ margin-top:32px; background:#fff; border:1px solid var(--line); border-radius:var(--radius, 16px); padding:4px 24px; } .testi-form-toggle summary{ cursor:pointer; list-style:none; padding:18px 0; font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--navy-900); font-size:15.5px; display:flex; align-items:center; gap:8px; } .testi-form-toggle summary::-webkit-details-marker{ display:none; } .testi-form-toggle summary::before{ content:'+'; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--teal-100); color:var(--teal-500); font-size:16px; line-height:1; } .testi-form-toggle[open] summary::before{ content:'−'; } .testi-form{ padding:4px 0 26px; max-width:480px; } .testi-form h3{ font-size:18px; color:var(--navy-900); margin-bottom:6px; } .testi-form-sub{ color:var(--ink-soft); font-size:13.5px; margin-bottom:18px; } .testi-field{ display:block; margin-bottom:16px; } .testi-field > span{ display:block; font-size:13.5px; font-weight:600; color:var(--navy-900); margin-bottom:6px; } .testi-field input[type="text"], .testi-field textarea{ width:100%; box-sizing:border-box; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-family:inherit; font-size:14.5px; color:var(--ink); } .testi-field textarea{ resize:vertical; } .testi-honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; } /* Estrellas seleccionables sin JavaScript: los radios van antes que sus labels en el HTML y se muestran en orden invertido (row-reverse) para que, con el combinador ~, seleccionar o pasar el mouse por una estrella también coloree todas las anteriores. */ .star-rating{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; font-size:0; } .star-rating input{ position:absolute; opacity:0; width:1px; height:1px; } .star-rating label{ font-size:28px; line-height:1; color:#d8dee4; cursor:pointer; transition:color .15s ease; } .star-rating input:checked ~ label, .star-rating label:hover, .star-rating label:hover ~ label{ color:var(--teal-500); } .testi-form-notice{ margin-top:20px; padding:14px 18px; border-radius:12px; font-size:14px; } .testi-form-notice--ok{ background:#e7f7f0; color:#166a4c; border:1px solid #bfe9d6; } .testi-form-notice--error{ background:#fdeceb; color:#a3372a; border:1px solid #f4c6c0; } /* Ícono de WhatsApp delante del número en el pie de página */ .foot-contact-wa{ display:inline-flex; align-items:center; gap:7px; color:inherit; text-decoration:none; } .foot-contact-wa svg{ flex:0 0 auto; color:#25D366; } .foot-contact-wa:hover{ color:var(--teal-500); } /* Texto justificado en todo el sitio (escritorio y teléfono) */ p{ text-align:justify; text-justify:inter-word; hyphens:auto; } .btn, .eyebrow, .nav-links a, .hero-meta span, .hero-meta b, h1, h2, h3, h4, .stars, .sub-tag, .foot-bottom span, .page-banner p, .breadcrumb, .cta-banner p{ text-align:inherit; hyphens:none; }