/* ===================================================================== YAMATELL COMUNICACIONES — style.css Sitio ISP · HTML5 + CSS3 + JS vanilla · Mobile-first Sistema de diseño: edita los tokens de :root para ajustar la marca. ===================================================================== */ /* -------------------------------------------------- */ /* 1. TOKENS */ /* -------------------------------------------------- */ :root{ /* Marca (inspirados en el logo) */ --navy-950:#03102a; --navy-900:#061a3d; --navy-800:#0a2450; --navy-700:#0f3370; --blue-700:#1442b0; --blue-600:#1552d6; --blue-500:#2563eb; --cyan-500:#12b6d4; --cyan-400:#22d3ee; --cyan-300:#67e4f2; --white:#ffffff; /* Superficies y texto */ --bg:#eef3fb; --bg-tint:#e7eefc; --surface:#ffffff; --surface-2:#f7faff; --ink:#0b1730; --ink-soft:#41506e; --muted:#7789a6; --line:#e3e9f5; --line-2:#eef2fa; --line-dark:rgba(255,255,255,.12); --text-on-dark:#eef4ff; --muted-on-dark:#aebfe0; /* Gradientes */ --grad:linear-gradient(118deg,#22d3ee 0%,#2c7ff0 52%,#1552d6 100%); --grad-bright:linear-gradient(118deg,#5fe6f5 0%,#3b9bff 52%,#2f6ef0 100%); --grad-soft:linear-gradient(120deg,rgba(34,211,238,.14),rgba(37,99,235,.14)); --hero-bg: radial-gradient(1100px 620px at 84% -12%,rgba(34,211,238,.30),transparent 60%), radial-gradient(820px 560px at 2% 118%,rgba(21,82,214,.40),transparent 55%), linear-gradient(165deg,#082247 0%,#050f28 78%); /* Radios */ --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px; /* Sombras (tinte azul) */ --sh-xs:0 2px 8px rgba(9,26,60,.06); --sh-sm:0 8px 22px rgba(9,26,60,.09); --sh-md:0 18px 42px rgba(9,26,60,.14); --sh-lg:0 34px 70px rgba(9,26,60,.20); --sh-glow:0 26px 60px rgba(21,82,214,.32); /* Layout / motion */ --maxw:1180px; --nav-h:74px; --nav-h-sm:62px; --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.16,.84,.44,1); --dur:.26s; } /* -------------------------------------------------- */ /* 2. RESET / BASE */ /* -------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px); } body{ font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* 'clip' evita scroll horizontal sin volver contenedor de scroll */ overflow-x:clip; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul{list-style:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} h1,h2,h3,h4{ font-family:"Poppins","Inter","Segoe UI",sans-serif; line-height:1.12; color:var(--ink); font-weight:700; letter-spacing:-.018em; text-wrap:balance; } p{text-wrap:pretty} :focus-visible{outline:3px solid var(--cyan-400);outline-offset:3px;border-radius:8px} .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px} /* -------------------------------------------------- */ /* 3. SECCIONES / UTILIDADES */ /* -------------------------------------------------- */ .section{padding:66px 0} .section--tight{padding:50px 0} .section--dark{background:var(--hero-bg);color:var(--text-on-dark)} .section--dark h2,.section--dark h3{color:#fff} .section__head{max-width:640px;margin:0 auto 42px;text-align:center} .section__eyebrow{ display:inline-flex;align-items:center;gap:9px; font-family:"Poppins",sans-serif; font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--blue-600); margin-bottom:14px; } .section__eyebrow::before{ content:"";width:22px;height:2px;border-radius:2px;background:var(--grad); } .section--dark .section__eyebrow{color:var(--cyan-300)} .section--dark .section__eyebrow::before{background:var(--cyan-300)} .section__title{font-size:clamp(1.75rem,1.1rem + 3vw,2.7rem)} .section__sub{margin-top:13px;color:var(--ink-soft);font-size:1.03rem} .section--dark .section__sub{color:var(--muted-on-dark)} .text-center{text-align:center} .badge-line{ display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center; margin-top:26px;color:var(--ink-soft);font-size:.92rem;font-weight:600; } .badge-line span{display:inline-flex;align-items:center;gap:8px} .badge-line span::before{ content:"";width:9px;height:9px;border-radius:50%; background:var(--grad);box-shadow:0 0 0 4px rgba(34,211,238,.16); } /* -------------------------------------------------- */ /* 4. BOTONES */ /* -------------------------------------------------- */ .btn{ --btn-pad:15px 27px; position:relative; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:var(--btn-pad); min-height:52px; border-radius:999px; font-family:"Poppins",sans-serif; font-weight:600;font-size:1rem;letter-spacing:.015em; text-align:center;white-space:nowrap; overflow:hidden; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease),color var(--dur) var(--ease), border-color var(--dur) var(--ease); will-change:transform; } .btn svg{width:20px;height:20px;flex:none} .btn:active{transform:translateY(0) scale(.98)} .btn--primary{color:#fff;background:var(--grad);background-size:180% 180%;box-shadow:var(--sh-glow)} /* Brillo que cruza al pasar el cursor */ .btn--primary::after{ content:"";position:absolute;inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%); transform:translateX(-120%); transition:transform .6s var(--ease); } .btn--primary:hover{transform:translateY(-3px);background-position:100% 0;box-shadow:0 30px 66px rgba(21,82,214,.44)} .btn--primary:hover::after{transform:translateX(120%)} .btn--ghost{color:#fff;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.05)} .btn--ghost:hover{transform:translateY(-3px);border-color:#fff;background:rgba(255,255,255,.14)} .btn--outline{color:var(--blue-600);border:2px solid var(--blue-500);background:transparent} .btn--outline:hover{transform:translateY(-3px);background:var(--grad-soft);border-color:var(--blue-600)} .btn--wa{background:#25d366;color:#053a1d;box-shadow:0 18px 40px rgba(37,211,102,.3)} .btn--wa:hover{transform:translateY(-3px);background:#20c25c;box-shadow:0 24px 52px rgba(37,211,102,.42)} .btn--lg{--btn-pad:18px 36px;min-height:60px;font-size:1.08rem} .btn--block{display:flex;width:100%} /* La flecha final de la tarjeta de plan se desplaza al pasar el cursor */ .plan__cta svg{transition:transform .22s var(--ease)} .plan:hover .plan__cta svg{transform:translateX(4px)} /* -------------------------------------------------- */ /* 5. NAVBAR */ /* -------------------------------------------------- */ .nav{ position:fixed;inset:0 0 auto 0;z-index:1000; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid transparent; transition:box-shadow .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease); } .nav--scrolled{ background:rgba(255,255,255,.95); border-bottom-color:var(--line); box-shadow:0 10px 30px rgba(9,26,60,.10); } .nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h);transition:height .3s var(--ease)} .nav--scrolled .nav__inner{height:var(--nav-h-sm)} .nav__brand{display:flex;align-items:center;flex:none} .nav__logo{height:42px;width:auto;transition:height .3s var(--ease)} .nav--scrolled .nav__logo{height:36px} .nav__menu{display:flex;align-items:center} .nav__list{display:flex;align-items:center;gap:4px} .nav__link{ position:relative;display:block;padding:10px 15px;border-radius:10px; font-family:"Poppins",sans-serif;font-weight:500;font-size:.97rem;color:var(--ink-soft); transition:color .2s var(--ease),background-color .2s var(--ease); } .nav__link:hover{color:var(--blue-600);background:var(--grad-soft)} .nav__link.is-active{color:var(--blue-600);font-weight:600} .nav__link.is-active::after{ content:"";position:absolute;left:15px;right:15px;bottom:3px;height:3px;border-radius:3px;background:var(--grad); } .nav__actions{display:flex;align-items:center;gap:12px} .nav__cta{--btn-pad:12px 22px;min-height:46px;font-size:.94rem;letter-spacing:.03em} .nav__toggle{ display:none;width:46px;height:46px;border-radius:13px; flex-direction:column;align-items:center;justify-content:center;gap:5px; border:1px solid var(--line);background:var(--surface); transition:background-color .2s var(--ease); } .nav__toggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink); transition:transform .3s var(--ease),opacity .2s var(--ease)} .nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:960px){ .nav__toggle{display:flex} .nav__menu{ position:absolute;top:100%;left:0;right:0; flex-direction:column; background:rgba(255,255,255,.98); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); box-shadow:0 26px 44px rgba(9,26,60,.16); padding:14px 22px 24px; transform:translateY(-14px);opacity:0;pointer-events:none; transition:transform .32s var(--ease),opacity .32s var(--ease); } .nav__menu.is-open{transform:none;opacity:1;pointer-events:auto} .nav__list{flex-direction:column;align-items:stretch;gap:2px;width:100%} .nav__link{padding:15px 12px;font-size:1.05rem;border-radius:12px} .nav__link.is-active::after{display:none} .nav__link.is-active{background:var(--grad-soft)} .nav__cta{display:none} /* en móvil: menú + botón flotante */ } /* -------------------------------------------------- */ /* 6. HERO */ /* -------------------------------------------------- */ .hero{ position:relative;overflow:hidden;isolation:isolate; background:var(--hero-bg); color:var(--text-on-dark); padding:calc(var(--nav-h) + 60px) 0 78px; } /* Resplandor cónico animado */ .hero::before{ content:"";position:absolute;z-index:-1; width:780px;height:780px;left:58%;top:-260px;border-radius:50%; background:conic-gradient(from 0deg,rgba(34,211,238,.0),rgba(34,211,238,.22),rgba(37,99,235,.20),rgba(34,211,238,0)); filter:blur(30px); animation:spin 26s linear infinite; } /* Retícula tenue */ .hero::after{ content:"";position:absolute;z-index:-1;inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%); -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%); } @keyframes spin{to{transform:rotate(1turn)}} .hero__grid{display:grid;gap:46px;align-items:center} .hero__eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px;border-radius:999px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16); font-family:"Poppins",sans-serif;font-size:.8rem;font-weight:500;letter-spacing:.05em; color:var(--cyan-300); } .hero__eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan-400); box-shadow:0 0 12px var(--cyan-400);animation:pulse 2.4s var(--ease) infinite} @keyframes pulse{0%,100%{box-shadow:0 0 10px var(--cyan-400)}50%{box-shadow:0 0 22px var(--cyan-400)}} .hero h1{ margin:22px 0 18px; font-size:clamp(2.7rem,1.6rem + 5.4vw,4.7rem); color:#fff;letter-spacing:-.03em;line-height:1.02; } .hero h1 .accent{ position:relative; background:linear-gradient(115deg,#7cebf7,#22d3ee 42%,#5aa0ff); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero__lead{max-width:560px;font-size:1.13rem;color:#c6d4ee} .hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .hero__stats{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:38px} .hero__stat{display:flex;flex-direction:column;position:relative;padding-left:16px} .hero__stat::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--grad)} .hero__stat b{font-family:"Poppins",sans-serif;font-size:1.5rem;color:#fff;font-weight:700} .hero__stat span{font-size:.84rem;color:var(--muted-on-dark)} .hero__visual{position:relative;min-height:300px} .hero__fiber{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(3,16,42,.6))} .fiber-flow{stroke-dasharray:16 230;animation:fiberflow 3.4s linear infinite} .fiber-flow.f2{animation-duration:4.8s;animation-delay:-1.2s} .fiber-flow.f3{animation-duration:6s;animation-delay:-2.6s} @keyframes fiberflow{to{stroke-dashoffset:-246}} .hero__chip{ position:absolute;right:4%;top:12%; display:flex;align-items:center;gap:13px; padding:14px 18px;border-radius:16px; background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); box-shadow:0 20px 40px rgba(3,16,42,.4); animation:floaty 5.5s ease-in-out infinite; } .hero__chip b{font-family:"Poppins",sans-serif;color:#fff;font-size:1.05rem} .hero__chip small{display:block;color:var(--cyan-300);font-size:.72rem;letter-spacing:.1em} .hero__chip .dot{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;flex:none} .hero__chip .dot svg{width:20px;height:20px;color:#fff} .hero__chip--b{top:auto;bottom:8%;right:auto;left:0;animation-delay:-2.6s} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .hero__wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:64px;color:var(--bg);z-index:-1} /* -------------------------------------------------- */ /* 7. FEATURES (¿Por qué Yamatell?) */ /* -------------------------------------------------- */ .features{display:grid;grid-template-columns:1fr;gap:18px} .feature{ position:relative; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:27px 24px;box-shadow:var(--sh-xs); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } /* Línea de acento superior en hover */ .feature::before{ content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:3px; background:var(--grad);transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease); } .feature:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:rgba(37,99,235,.28)} .feature:hover::before{transform:scaleX(1)} .feature__icon{ width:54px;height:54px;border-radius:15px;display:grid;place-items:center; background:var(--grad-soft);color:var(--blue-600);margin-bottom:17px; transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease); } .feature__icon svg{width:26px;height:26px} .feature:hover .feature__icon{background:var(--grad);color:#fff;transform:scale(1.06)} .feature h3{font-size:1.12rem;margin-bottom:6px} .feature p{font-size:.95rem;color:var(--ink-soft)} /* -------------------------------------------------- */ /* 8. PLANES */ /* -------------------------------------------------- */ .plans{display:grid;grid-template-columns:1fr;gap:22px} .plan{ position:relative; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); padding:30px 27px;box-shadow:var(--sh-sm); display:flex;flex-direction:column; transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease); } .plan:hover{transform:translateY(-7px);box-shadow:var(--sh-lg);border-color:rgba(37,99,235,.3)} .plan__badge{ position:absolute;top:-14px;left:50%;transform:translateX(-50%); padding:7px 17px;border-radius:999px; font-family:"Poppins",sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.14em; color:#fff;background:var(--grad);box-shadow:0 12px 26px rgba(21,82,214,.4);white-space:nowrap; } .plan__head{display:flex;align-items:center;gap:12px;margin-bottom:14px} .plan__icon{ width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center; background:var(--grad-soft);color:var(--blue-600); } .plan__icon svg{width:22px;height:22px} .plan__name{ font-family:"Poppins",sans-serif; font-size:.9rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600); } .plan__speed{display:flex;align-items:baseline;gap:8px;margin-top:4px} .plan__num{font-family:"Poppins",sans-serif;font-size:3.1rem;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums} .plan__unit{font-family:"Poppins",sans-serif;font-size:1rem;font-weight:600;color:var(--muted)} .plan__sym{margin-top:8px;font-size:.88rem;color:var(--ink-soft)} .plan__price{ margin:20px 0 2px;font-family:"Poppins",sans-serif;font-size:1.75rem;font-weight:700;color:var(--ink); } .plan__price .cur{font-size:1rem;font-weight:600;color:var(--muted);margin-right:4px} .plan__price .cycle{font-size:.92rem;font-weight:500;color:var(--muted)} .plan__list{margin:20px 0 26px;display:grid;gap:11px} .plan__list li{position:relative;padding-left:29px;font-size:.93rem;color:var(--ink-soft)} .plan__list li::before{ content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--grad-soft); } .plan__list li::after{ content:"";position:absolute;left:6.5px;top:6px;width:6px;height:10px; border:solid var(--blue-600);border-width:0 2px 2px 0;transform:rotate(45deg); } .plan__cta{margin-top:auto} .plan--featured{ border:2px solid transparent; background: linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box; box-shadow:var(--sh-glow); } .plan--featured .plan__icon{background:var(--grad);color:#fff} .plan--featured .plan__num{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* Reflejo sutil que recorre la tarjeta destacada */ .plan--featured::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%); transform:translateX(-120%); animation:shine 5.5s var(--ease) 1.5s infinite; } @keyframes shine{0%{transform:translateX(-120%)}18%,100%{transform:translateX(120%)}} @media (min-width:640px){ .plan--featured{transform:scale(1.035)} .plan--featured:hover{transform:scale(1.035) translateY(-7px)} } .plans-note{margin-top:28px;text-align:center;color:var(--ink-soft);font-size:.95rem} .plans-note strong{color:var(--ink)} /* -------------------------------------------------- */ /* 9. TESTIMONIOS */ /* -------------------------------------------------- */ .testimonials{display:grid;grid-template-columns:1fr;gap:18px} .testimonial{ position:relative;overflow:hidden; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:26px 24px;box-shadow:var(--sh-xs); transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .testimonial::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)} .testimonial:hover{transform:translateY(-5px);box-shadow:var(--sh-md)} .testimonial__quote{font-size:2.6rem;line-height:1;color:var(--cyan-400);font-family:Georgia,serif} .testimonial p{margin:4px 0 16px;color:var(--ink-soft);font-style:italic} .testimonial__author{display:flex;align-items:center;gap:12px;color:var(--ink)} .testimonial__avatar{ position:relative;width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden; background:var(--grad);display:grid;place-items:center; box-shadow:0 0 0 3px rgba(37,99,235,.14); } .testimonial__avatar::before{ content:attr(data-initial); font-family:"Poppins",sans-serif;font-weight:600;font-size:.95rem;color:#fff; } .testimonial__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .testimonial__meta{display:flex;flex-direction:column;line-height:1.25} .testimonial__meta b{font-family:"Poppins",sans-serif;font-weight:600;font-size:.92rem} .testimonial__meta small{font-size:.78rem;font-weight:500;color:var(--muted)} .disclaimer{margin-top:22px;text-align:center;font-size:.82rem;color:var(--muted)} /* -------------------------------------------------- */ /* 10. CTA FINAL */ /* -------------------------------------------------- */ .cta{ position:relative;overflow:hidden;text-align:center;isolation:isolate; background:var(--hero-bg);color:var(--text-on-dark); padding:78px 0; } .cta::before{ content:"";position:absolute;z-index:-1;left:50%;top:50%;translate:-50% -50%; width:620px;height:620px;border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.22),transparent 62%); } .cta h2{color:#fff;font-size:clamp(1.95rem,1.2rem + 3.4vw,3.1rem)} .cta p{max-width:520px;margin:14px auto 30px;color:var(--muted-on-dark);font-size:1.06rem} .cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .cta__phone{ margin-top:26px;display:inline-flex;align-items:center;gap:10px; font-family:"Poppins",sans-serif;font-weight:600;color:#fff;font-size:1.05rem; } .cta__phone svg{width:22px;height:22px;color:#25d366} /* -------------------------------------------------- */ /* 11. CABECERA DE PÁGINA */ /* -------------------------------------------------- */ .page-header{ background:var(--hero-bg);color:var(--text-on-dark); padding:calc(var(--nav-h) + 54px) 0 64px;text-align:center;position:relative;overflow:hidden;isolation:isolate; } .page-header::after{ content:"";position:absolute;z-index:-1;inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%); } .page-header h1{color:#fff;font-size:clamp(2.15rem,1.4rem + 3.4vw,3.3rem);margin-bottom:12px} .page-header p{max-width:610px;margin:0 auto;color:var(--muted-on-dark);font-size:1.05rem} .page-header__crumb{ font-family:"Poppins",sans-serif;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase; color:var(--cyan-300);margin-bottom:16px; } /* -------------------------------------------------- */ /* 12. SERVICIOS */ /* -------------------------------------------------- */ .service{ display:grid;grid-template-columns:1fr;gap:22px;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); padding:30px 26px;box-shadow:var(--sh-sm);margin-bottom:22px; transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .service:hover{transform:translateY(-4px);box-shadow:var(--sh-md)} .service__media{ border-radius:var(--r-md);background:var(--grad-soft); display:grid;place-items:center;padding:34px;min-height:190px; position:relative;overflow:hidden; } .service__media::before{ content:"";position:absolute;width:220px;height:220px;border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.22),transparent 65%); } .service__media svg{width:78px;height:78px;color:var(--blue-600);position:relative} /* Imagen a sangre dentro del recuadro del servicio */ .service__media:has(img){padding:0;min-height:230px} .service__media img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block; } .service h2{font-size:1.55rem;margin-bottom:6px} .service__tag{ display:inline-block;margin-bottom:12px;padding:5px 13px;border-radius:999px; background:var(--grad-soft);color:var(--blue-600); font-family:"Poppins",sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; } .service p{color:var(--ink-soft)} .service__benefits{margin:16px 0 22px;display:grid;gap:11px} .service__benefits li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:.95rem} .service__benefits li::before{ content:"";position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:6px;background:var(--grad); } .service__benefits li::after{ content:"";position:absolute;left:5px;top:9px;width:5px;height:8px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg); } @media (min-width:820px){ .service{grid-template-columns:320px 1fr;gap:36px;padding:40px 36px} .service--reverse .service__media{order:2} } /* -------------------------------------------------- */ /* 13. COBERTURA */ /* -------------------------------------------------- */ .coverage__map{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); padding:18px;box-shadow:var(--sh-sm);overflow:hidden; } .coverage__map svg{width:100%;height:auto} .map-flow{stroke-dasharray:5 9;animation:mapflow 1.4s linear infinite} @keyframes mapflow{to{stroke-dashoffset:-14}} .zone-pulse{transform-box:fill-box;transform-origin:center;animation:zonepulse 2.8s ease-out infinite} .zone-pulse.z2{animation-delay:.55s} .zone-pulse.z3{animation-delay:1.1s} .zone-pulse.z4{animation-delay:1.65s} .zone-pulse.z5{animation-delay:2.2s} @keyframes zonepulse{0%{opacity:.7;transform:scale(.6)}70%{opacity:0;transform:scale(2.6)}100%{opacity:0}} .zones{display:grid;grid-template-columns:1fr;gap:14px;margin-top:28px} .zone{ display:flex;align-items:center;gap:14px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:16px 18px;box-shadow:var(--sh-xs); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease); } .zone:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:rgba(37,99,235,.28)} .zone__pin{ width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center; background:var(--grad-soft);color:var(--blue-600); } .zone__pin svg{width:22px;height:22px} .zone b{font-family:"Poppins",sans-serif;display:block;font-size:1rem} .zone span{font-size:.83rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px} .zone span::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)} .coverage__cta{text-align:center;margin-top:38px} /* -------------------------------------------------- */ /* 14. CONTACTO */ /* -------------------------------------------------- */ .contact-grid{display:grid;grid-template-columns:1fr;gap:18px} .contact-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:24px;box-shadow:var(--sh-xs); transition:transform .25s var(--ease),box-shadow .25s var(--ease); } .contact-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)} .contact-card__icon{ width:50px;height:50px;border-radius:13px;display:grid;place-items:center; background:var(--grad-soft);color:var(--blue-600);margin-bottom:14px; } .contact-card__icon svg{width:24px;height:24px} .contact-card h3{font-size:1.05rem;margin-bottom:4px} .contact-card p,.contact-card a{color:var(--ink-soft);font-size:.98rem;word-break:break-word} .contact-card a:hover{color:var(--blue-600)} .hours{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:24px;box-shadow:var(--sh-xs); } .hours h3{margin-bottom:14px} .hours__row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line)} .hours__row:last-child{border-bottom:0} .hours__row span:first-child{font-weight:600;color:var(--ink)} .hours__row span:last-child{color:var(--ink-soft);text-align:right} .contact-cta{text-align:center;margin-top:38px} /* -------------------------------------------------- */ /* 15. ASESORÍA (bloque reutilizable) */ /* -------------------------------------------------- */ .advisor{ position:relative;overflow:hidden; text-align:center;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-xl);padding:46px 26px;box-shadow:var(--sh-sm); max-width:740px;margin:0 auto; } .advisor::before{ content:"";position:absolute;left:50%;top:-40%;translate:-50% 0; width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.14),transparent 65%); } .advisor h2{font-size:clamp(1.5rem,1.1rem + 2vw,2.05rem);margin-bottom:10px;position:relative} .advisor p{color:var(--ink-soft);max-width:520px;margin:0 auto 24px;position:relative} .advisor .btn{position:relative} /* -------------------------------------------------- */ /* 16. FOOTER */ /* -------------------------------------------------- */ .footer{background:var(--navy-950);color:var(--muted-on-dark);padding:58px 0 26px} .footer__grid{display:grid;grid-template-columns:1fr;gap:36px} .footer__logo{height:44px;width:auto;margin-bottom:14px} .footer__brand p{font-size:.92rem;max-width:320px} .footer__slogan{ display:block;font-family:"Poppins",sans-serif;color:var(--cyan-300); font-weight:500;letter-spacing:.01em;margin-bottom:12px; } .footer h4{ color:#fff;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase; margin-bottom:16px;font-family:"Poppins",sans-serif; } .footer ul{display:grid;gap:11px} .footer a{font-size:.92rem;transition:color .2s var(--ease),padding-left .2s var(--ease)} .footer__grid ul:not(.footer__contact) a:hover{color:#fff;padding-left:5px} .footer__contact li{font-size:.92rem;display:flex;gap:10px;align-items:flex-start} .footer__contact svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--cyan-400)} .footer__social{display:flex;gap:12px;margin-top:20px} .footer__social a{ width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:rgba(255,255,255,.06);border:1px solid var(--line-dark); transition:background .25s var(--ease),transform .25s var(--ease); } .footer__social a:hover{background:var(--grad);transform:translateY(-3px)} .footer__social svg{width:18px;height:18px;color:#fff} .footer__bottom{ margin-top:42px;padding-top:22px;border-top:1px solid var(--line-dark); text-align:center;font-size:.85rem;color:var(--muted-on-dark); } /* -------------------------------------------------- */ /* 17. BOTÓN FLOTANTE WHATSAPP */ /* -------------------------------------------------- */ .wa-float{ position:fixed;right:18px;bottom:18px;z-index:900; width:58px;height:58px;border-radius:50%; background:#25d366;display:grid;place-items:center; box-shadow:0 16px 34px rgba(37,211,102,.45); transition:transform .25s var(--ease); } .wa-float:hover{transform:scale(1.08)} .wa-float svg{width:30px;height:30px;color:#fff} .wa-float::after{ content:"";position:absolute;inset:0;border-radius:50%; border:2px solid #25d366;animation:waring 2.4s ease-out infinite; } @keyframes waring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}} @media (min-width:600px){ .wa-float{width:62px;height:62px;right:26px;bottom:26px} /* Etiqueta al pasar el cursor (solo escritorio) */ .wa-float::before{ content:"Escríbenos"; position:absolute;right:74px;top:50%;translate:0 -50%; background:#0b1730;color:#fff;font-size:.8rem;font-weight:600; font-family:"Poppins",sans-serif; padding:7px 12px;border-radius:9px;white-space:nowrap; opacity:0;pointer-events:none;transform:translateX(6px); transition:opacity .2s var(--ease),transform .2s var(--ease); } .wa-float:hover::before{opacity:1;transform:translateX(0)} } /* -------------------------------------------------- */ /* 18. ANIMACIONES DE SCROLL */ /* -------------------------------------------------- */ html.js .reveal{ opacity:0;transform:translate3d(0,28px,0); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); } html.js .reveal.is-visible{opacity:1;transform:none} /* -------------------------------------------------- */ /* 19. BREAKPOINTS */ /* -------------------------------------------------- */ @media (min-width:600px){ .section{padding:82px 0} .testimonials{grid-template-columns:1fr 1fr} } @media (min-width:720px){ .features{grid-template-columns:1fr 1fr} .plans{grid-template-columns:1fr 1fr} .zones{grid-template-columns:1fr 1fr} .contact-grid{grid-template-columns:1fr 1fr} } @media (min-width:900px){ .hero__grid{grid-template-columns:1.05fr .95fr} .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.25fr} .zones{grid-template-columns:repeat(3,1fr)} } @media (min-width:1000px){ .section{padding:100px 0} .features{grid-template-columns:repeat(4,1fr)} .plans{grid-template-columns:repeat(3,1fr)} .testimonials{grid-template-columns:repeat(4,1fr)} } /* -------------------------------------------------- */ /* 20. MOVIMIENTO REDUCIDO */ /* -------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } html.js .reveal{opacity:1;transform:none} } /* -------------------------------------------------- */ /* 21. IMPRESIÓN / PDF */ /* -------------------------------------------------- */ @media print{ *,*::before,*::after{ animation:none!important;transition:none!important; -webkit-print-color-adjust:exact;print-color-adjust:exact; } html,body{background:#fff} .nav{position:static;box-shadow:none;background:#fff;border-bottom:1px solid var(--line)} .nav__toggle,.wa-float,.hero__chip{display:none!important} html.js .reveal{opacity:1!important;transform:none!important} .hero,.page-header,.cta,.section--dark,.footer{ background:var(--navy-900)!important;color:#fff!important; } .section,.hero,.cta,.page-header{padding-top:34px;padding-bottom:34px} .hero::before,.hero::after,.cta::before,.page-header::after,.advisor::before,.service__media::before{display:none} .feature,.plan,.testimonial,.zone,.contact-card,.hours,.service,.advisor{ box-shadow:none;break-inside:avoid;page-break-inside:avoid; } .section__head,figure,article{break-inside:avoid} .btn{box-shadow:none!important} a[href]{text-decoration:none} }