:root {
  --primary-950:#04134f;
  --primary-900:#071f87;
  --primary-800:#0b2ba7;
  --primary-700:#123ccf;
  --primary-600:#1f54eb;
  --primary-500:#3471ff;
  --primary-100:#eaf0ff;
  --primary-50:#f5f8ff;
  --ink:#0c1733;
  --muted:#5e687d;
  --line:#dce2ef;
  --surface:#ffffff;
  --surface-soft:#f6f8fc;
  --success:#19a463;
  --whatsapp:#25d366;
  --shadow-sm:0 8px 24px rgba(12,23,51,.08);
  --shadow-md:0 20px 55px rgba(12,23,51,.13);
  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:30px;
  --container:1180px;
  --transition:220ms ease;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--surface);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
ul,ol{padding:0;margin:0;list-style:none}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.12;letter-spacing:-.025em}
section[id]{scroll-margin-top:96px}

.container{width:min(calc(100% - 32px),var(--container));margin-inline:auto}
.section{padding:96px 0}
.section-heading{max-width:720px;margin:0 auto 48px;text-align:center}
.section-heading h2{font-size:clamp(2rem,5vw,3.35rem);margin-bottom:18px}
.section-heading p{color:var(--muted);font-size:1.05rem}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color:var(--primary-700)!important;
  font-size:.78rem!important;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;border-radius:2px}

.skip-link{position:fixed;left:16px;top:-80px;z-index:9999;background:#fff;padding:12px 18px;border-radius:10px;box-shadow:var(--shadow-sm)}
.skip-link:focus{top:16px}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(220,226,239,.75);
  backdrop-filter:blur(18px);
  transition:box-shadow var(--transition),background var(--transition);
}
.site-header.is-scrolled{background:rgba(255,255,255,.96);box-shadow:0 10px 35px rgba(12,23,51,.08)}
.header-container{min-height:76px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand-logo{width:auto;height:44px}
.main-navigation{margin-left:auto}
.navigation-list{display:flex;align-items:center;gap:24px}
.navigation-list a{font-size:.93rem;font-weight:700;color:#34405a;transition:color var(--transition)}
.navigation-list a:hover,.navigation-list a:focus-visible{color:var(--primary-700)}
.navigation-cta{margin-left:8px}
.menu-toggle{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:13px;position:relative}
.menu-toggle::before,.menu-toggle::after,.menu-toggle span{content:"";position:absolute;left:12px;right:12px;height:2px;background:var(--ink);transition:transform var(--transition),top var(--transition),opacity var(--transition)}
.menu-toggle::before{top:14px}.menu-toggle span{top:21px}.menu-toggle::after{top:28px}
.menu-toggle[aria-expanded="true"]::before{top:21px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span{opacity:0}
.menu-toggle[aria-expanded="true"]::after{top:21px;transform:rotate(-45deg)}

.button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:14px;
  font-weight:800;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
}
.button:hover{transform:translateY(-2px)}
.button-primary{color:#fff;background:linear-gradient(135deg,var(--primary-700),var(--primary-500));box-shadow:0 12px 28px rgba(31,84,235,.26)}
.button-secondary{background:#fff;border-color:var(--line);color:var(--ink)}
.button-light{background:#fff;color:var(--primary-800)}
.button-whatsapp{background:var(--whatsapp);color:#072b18;box-shadow:0 12px 28px rgba(37,211,102,.25)}
.text-link{font-weight:800;color:var(--primary-700)}

.hero-section{
  position:relative;
  overflow:hidden;
  padding:100px 0 84px;
  background:
    radial-gradient(circle at 87% 8%,rgba(52,113,255,.18),transparent 32%),
    linear-gradient(180deg,#f7f9ff 0%,#fff 100%);
}
.hero-section::before{
  content:"";position:absolute;width:620px;height:620px;border-radius:50%;
  right:-240px;top:-300px;border:1px solid rgba(52,113,255,.18);
  box-shadow:0 0 0 70px rgba(52,113,255,.025),0 0 0 140px rgba(52,113,255,.02);
}
.hero-container{position:relative;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:70px}
.hero-content{max-width:650px}
.hero-content h1{font-size:clamp(2.7rem,6vw,5.15rem);margin-bottom:24px}
.hero-content h1 strong{color:var(--primary-700)}
.hero-description{max-width:620px;color:var(--muted);font-size:clamp(1.04rem,2vw,1.22rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0}
.trust-list{display:flex;flex-wrap:wrap;gap:12px 20px;color:#40506c;font-size:.92rem;font-weight:700}
.trust-list li::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:7px;border-radius:50%;color:#fff;background:var(--success);font-size:.75rem}
.hero-media{position:relative}
.hero-media::before{content:"";position:absolute;inset:10% 8% 2%;border-radius:48% 52% 42% 58%;background:linear-gradient(135deg,var(--primary-100),#dbe6ff);filter:blur(1px)}
.hero-media img{position:relative;width:min(100%,560px);margin:auto;filter:drop-shadow(0 28px 40px rgba(7,31,135,.20))}

.brands-section{padding:34px 0;border-block:1px solid var(--line);background:#fff}
.brands-heading{text-align:center;color:var(--muted);font-size:.9rem;font-weight:800;margin-bottom:20px}
.brands-heading p{margin:0}
.brands-list,.device-list{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.brands-list li,.device-list li{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface-soft);font-size:.86rem;font-weight:800}
.device-list{margin-top:12px}
.device-list li{background:transparent;color:var(--muted)}

.services-section{background:var(--surface)}
.services-grid,.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card,.benefit-card{
  position:relative;
  padding:30px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:0 1px 0 rgba(12,23,51,.02);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.service-card:hover,.benefit-card:hover{transform:translateY(-6px);border-color:#b9c9f8;box-shadow:var(--shadow-md)}
.service-card h3,.benefit-card h3{font-size:1.25rem;margin-bottom:10px}
.service-card p,.benefit-card p{color:var(--muted)}
.service-icon,.benefit-icon{
  display:grid;place-items:center;width:52px;height:52px;margin-bottom:22px;border-radius:16px;
  color:var(--primary-700);background:var(--primary-100);font-weight:900
}
.service-card .text-link{display:inline-flex;margin-top:8px}

.benefits-section{background:var(--surface-soft)}
.benefit-icon{font-size:.8rem;letter-spacing:.08em}

.process-section{background:linear-gradient(150deg,var(--primary-950),var(--primary-800));color:#fff}
.process-section .section-heading p{color:#c9d5ff}
.process-section .eyebrow{color:#9db7ff!important}
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:process}
.process-card{position:relative;padding:26px 20px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.07);backdrop-filter:blur(8px)}
.process-card:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);z-index:2;color:#9db7ff;font-weight:900}
.process-number{display:block;margin-bottom:18px;color:#9db7ff;font-size:.78rem;font-weight:900;letter-spacing:.12em}
.process-card h3{font-size:1.08rem}
.process-card p{margin-bottom:0;color:#dbe3ff;font-size:.92rem}

.transparency-section{background:#fff}
.transparency-container{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:56px;
  padding:54px;
  border-radius:var(--radius-lg);
  background:linear-gradient(140deg,#f2f6ff,#fff);
  border:1px solid #dce6ff;
  box-shadow:var(--shadow-sm);
}
.transparency-content h2{font-size:clamp(2rem,4vw,3.1rem)}
.transparency-content p{color:var(--muted)}
.transparency-list{display:grid;gap:13px;align-content:center}
.transparency-list li{position:relative;padding-left:34px;font-weight:750}
.transparency-list li::before{content:"✓";position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--primary-100);color:var(--primary-700);font-size:.72rem}
.transparency-notice{grid-column:1/-1;margin:0;padding-top:22px;border-top:1px solid #dce6ff;color:var(--muted);font-size:.88rem}

.quote-section{background:var(--surface-soft)}
.quote-container{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.quote-content{position:sticky;top:110px}
.quote-content h2{font-size:clamp(2rem,4vw,3.25rem)}
.quote-content>p{color:var(--muted)}
.quote-features{display:grid;gap:10px;margin-top:24px}
.quote-features li::before{content:"✓";margin-right:9px;color:var(--success);font-weight:900}
.quote-form{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:34px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-sm)}
.form-group{display:grid;gap:8px}
.form-group:has(textarea),.checkbox-group,.form-notice,.quote-form>.button{grid-column:1/-1}
.form-group label{font-size:.9rem;font-weight:800}
.form-group input,.form-group select,.form-group textarea{
  width:100%;border:1px solid #cfd7e7;background:#fff;border-radius:12px;padding:13px 14px;color:var(--ink);
  outline:none;transition:border-color var(--transition),box-shadow var(--transition)
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-500);box-shadow:0 0 0 4px rgba(52,113,255,.12)}
.form-group textarea{min-height:145px;resize:vertical}
.field-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.78rem}
.checkbox-group{display:flex;align-items:flex-start;gap:10px}
.checkbox-group input{margin-top:5px}
.form-error{min-height:18px;color:#c93434;font-size:.78rem}
.form-notice{padding:13px 15px;border-radius:12px;background:var(--primary-50);color:var(--muted);font-size:.82rem}

.locations-section{background:#fff}
.locations-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.location-card{padding:34px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-sm)}
.location-card h3{font-size:1.35rem}
.location-card p{color:var(--muted)}
.location-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

.faq-section{background:var(--surface-soft)}
.faq-container{max-width:900px}
.accordion{display:grid;gap:12px}
.accordion-item{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.accordion-item h3{margin:0}
.accordion-trigger{width:100%;padding:21px 56px 21px 22px;border:0;background:#fff;text-align:left;font-weight:850;color:var(--ink);position:relative}
.accordion-trigger::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.55rem;color:var(--primary-700);transition:transform var(--transition)}
.accordion-trigger[aria-expanded="true"]::after{transform:translateY(-50%) rotate(45deg)}
.accordion-panel{padding:0 22px 22px;color:var(--muted)}
.accordion-panel p{margin:0}

.social-section{background:#fff}
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.social-card{display:flex;align-items:center;justify-content:space-between;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;font-weight:850;transition:transform var(--transition),box-shadow var(--transition)}
.social-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}

.final-cta{padding:84px 0;background:linear-gradient(135deg,var(--primary-950),var(--primary-700));color:#fff}
.final-cta-container{text-align:center;max-width:850px}
.final-cta h2{font-size:clamp(2rem,5vw,3.7rem);margin-bottom:18px}
.final-cta p{color:#d8e1ff;font-size:1.06rem}
.final-cta .button{margin:8px 5px 0}

.site-footer{background:#07132f;color:#d6def4;padding-top:68px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:38px;padding-bottom:48px}
.footer-brand p,.footer-column p{color:#9eaccb}
.footer-column h3{color:#fff;font-size:1rem}
.footer-column ul{display:grid;gap:10px}
.footer-column a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0}
.footer-bottom-container{display:flex;justify-content:space-between;gap:18px;align-items:center}
.footer-legal{display:flex;gap:18px;font-size:.85rem}

.floating-whatsapp{

    position:fixed;

    right:30px;

    bottom:30px;

    width:80px;

    height:80px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 12px 30px rgba(37,211,102,.35);

    z-index:9999;

    transition:.25s;
}

.floating-whatsapp img{

    width:80px;

    height:80px;

    display:block;
}

.floating-whatsapp:hover{

    transform:translateY(-4px) scale(1.08);

    box-shadow:
        0 18px 40px rgba(37,211,102,.45);
}

.notification{
  position:fixed;left:50%;bottom:28px;z-index:1100;transform:translate(-50%,30px);
  max-width:min(92vw,560px);padding:14px 18px;border-radius:12px;background:#0e1932;color:#fff;
  box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--transition),transform var(--transition)
}
.notification.is-visible{opacity:1;transform:translate(-50%,0)}
.notification p{margin:0}

@media (max-width:1050px){
  .navigation-list{gap:15px}
  .navigation-list a{font-size:.86rem}
  .process-grid{grid-template-columns:repeat(3,1fr)}
  .process-card::after{display:none}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:840px){
  .section{padding:72px 0}
  .menu-toggle{display:block}
  .main-navigation{
    position:absolute;left:16px;right:16px;top:76px;
    padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-md);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:all var(--transition)
  }
  .main-navigation.is-open{opacity:1;visibility:visible;transform:none}
  .navigation-list{display:grid;gap:2px}
  .navigation-list a{display:block;padding:12px;border-radius:10px}
  .navigation-list a:hover{background:var(--surface-soft)}
  .navigation-cta{display:none}
  .hero-section{padding-top:74px}
  .hero-container,.quote-container,.transparency-container{grid-template-columns:1fr}
  .hero-content{text-align:center;margin:auto}
  .hero-actions,.trust-list{justify-content:center}
  .hero-media{max-width:580px;margin:auto}
  .services-grid,.benefits-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .quote-content{position:static}
  .social-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:600px){
  .container{width:min(calc(100% - 24px),var(--container))}
  .section{padding:60px 0}
  .site-header .brand-logo{height:38px}
  .hero-section{padding:58px 0 60px}
  .hero-content h1{font-size:clamp(2.3rem,12vw,3.55rem)}
  .hero-actions{display:grid}
  .hero-actions .button{width:100%}
  .trust-list{display:grid;justify-content:start;text-align:left}
  .services-grid,.benefits-grid,.process-grid,.locations-grid,.social-grid{grid-template-columns:1fr}
  .service-card,.benefit-card,.location-card{padding:24px}
  .transparency-container{padding:30px 22px;gap:30px}
  .quote-form{grid-template-columns:1fr;padding:24px}
  .form-group{grid-column:1/-1}
  .location-actions{display:grid}
  .location-actions .button{width:100%}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom-container{align-items:flex-start;flex-direction:column}
  .footer-legal{flex-wrap:wrap}
  .floating-whatsapp{right:14px;bottom:14px;width:56px;height:56px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* ==========================================================
   PREMIUM V4 — IMÁGENES, TRABAJOS Y ANIMACIONES
========================================================== */

.service-card{
  overflow:hidden;
  padding-top:0;
}
.service-media{
  margin:0 -30px 24px;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg,#071f87,#0c1733);
}
.service-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 500ms ease,filter 500ms ease;
}
.service-card:hover .service-media img{
  transform:scale(1.055);
  filter:saturate(1.08);
}

.works-section{
  background:
    radial-gradient(circle at 10% 0%,rgba(52,113,255,.09),transparent 30%),
    var(--surface);
}
.works-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.work-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition);
}
.work-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}
.work-image{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
}
.work-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 500ms ease;
}
.work-card:hover .work-image img{transform:scale(1.05)}
.work-badge{
  position:absolute;
  left:16px;
  top:16px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(7,19,47,.84);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.05em;
  backdrop-filter:blur(10px);
}
.work-content{padding:24px}
.work-category{
  margin-bottom:8px;
  color:var(--primary-700);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.work-content h3{font-size:1.28rem;margin-bottom:10px}
.work-content p:last-child{margin-bottom:0;color:var(--muted)}
.works-note{
  max-width:780px;
  margin:28px auto 0;
  padding:16px 20px;
  text-align:center;
  border:1px dashed #b8c6e6;
  border-radius:14px;
  color:var(--muted);
  background:var(--primary-50);
}
.works-note p{margin:0}

.reveal{
  opacity:1;
  transform:none;
}

/* La animación solo se activa cuando JavaScript cargó correctamente. */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity 650ms cubic-bezier(.2,.7,.2,1),
    transform 650ms cubic-bezier(.2,.7,.2,1);
}
.js .reveal.is-visible{
  opacity:1;
  transform:none;
}

@media (max-width:840px){
  .works-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .service-media{margin:0 -24px 22px}
  .works-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
}


/* Corrección V5: visibilidad segura de contenido e imágenes */
.hero-media,
.service-media,
.work-image,
.quote-form,
.transparency-container{
  visibility:visible;
}

.hero-media img,
.service-media img,
.work-image img{
  display:block;
  opacity:1;
  visibility:visible;
}

.service-media{
  min-height:190px;
}

@media (max-width:600px){
  .service-media{
    min-height:175px;
  }
}

/* ==========================================================
   CARRUSEL DE SERVICIOS
========================================================== */

.services-carousel {
    position: relative;
    overflow: hidden;
    padding: 56px 0 64px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(13, 88, 198, 0.55),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #031a3d 0%,
            #020b1d 100%
        );
}

/* ENCABEZADO */

.services-carousel__heading {
    width: min(calc(100% - 40px), 1380px);
    margin: 0 auto 30px;
    text-align: center;
}

.services-carousel__heading > p {
    margin: 0 0 6px;

    color: #1787ff;

    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.services-carousel__heading h2 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.05;
}

.services-carousel__heading span {
    color: #bac9dd;
    font-size: 0.95rem;
}

/* CONTENEDOR GENERAL */

.services-carousel__wrapper {
    position: relative;

    width: min(calc(100% - 40px), 1460px);
    margin: 0 auto;
}

/* PISTA DEL CARRUSEL */

.services-carousel__track {
    display: grid;

    grid-auto-flow: column;
    grid-auto-columns: clamp(270px, 23vw, 330px);

    gap: 22px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 8px 8px 24px;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;
}

.services-carousel__track::-webkit-scrollbar {
    display: none;
}

/* TARJETA */

.carousel-service-card {
    scroll-snap-align: start;

    display: flex;
    flex-direction: column;

    min-height: 540px;

    overflow: hidden;

    border: 1px solid rgba(102, 158, 230, 0.34);
    border-radius: 20px;

    background:
        linear-gradient(
            160deg,
            rgba(8, 39, 82, 0.98),
            rgba(2, 17, 42, 0.98)
        );

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.24);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.carousel-service-card:hover {
    transform: translateY(-7px);

    border-color: rgba(44, 137, 255, 0.85);

    box-shadow:
        0 26px 48px rgba(0, 0, 0, 0.34);
}

/* IMAGEN PRINCIPAL */

.carousel-service-card__image {
    position: relative;

    width: 100%;
    height: 345px;

    overflow: hidden;

    background: #06152e;
}

.carousel-service-card__image::after {
    content: "";

    position: absolute;
    inset: auto 0 0;

    height: 70px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(3, 18, 44, 0.92)
        );

    pointer-events: none;
}

.carousel-service-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 500ms ease,
        filter 500ms ease;
}

.carousel-service-card:hover
.carousel-service-card__image img {
    transform: scale(1.055);
    filter: saturate(1.08);
}

/* CONTENIDO */

.carousel-service-card__content {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 22px 22px 20px;
}

.carousel-service-card__content h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 1.28rem;
    line-height: 1.15;
}

.carousel-service-card__content p {
    flex: 1;

    margin: 0 0 20px;

    color: #c8d5e7;

    font-size: 0.92rem;
    line-height: 1.55;
}

/* BOTÓN */

.carousel-service-card__content a {
    width: 100%;
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 14px;

    border: 1px solid #1683ff;
    border-radius: 999px;

    color: #ffffff;
    background: rgba(7, 74, 159, 0.18);

    font-size: 0.87rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.carousel-service-card__content a:hover {
    transform: translateY(-2px);

    background: #0872e5;
    border-color: #2a96ff;

    box-shadow:
        0 10px 22px rgba(13, 121, 235, 0.25);
}

/* FLECHAS */

.carousel-arrow {
    position: absolute;
    top: 47%;
    z-index: 10;

    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(1, 16, 40, 0.88);

    font-size: 2.2rem;
    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(12px);

    transition:
        background 180ms ease,
        transform 180ms ease;
}

.carousel-arrow:hover {
    transform: scale(1.08);
    background: #0877ed;
}

.carousel-arrow--prev {
    left: -20px;
}

.carousel-arrow--next {
    right: -20px;
}

/* TEXTO INFERIOR */

.services-carousel__indicator {
    margin-top: 16px;

    color: #8ea4c2;

    font-size: 0.78rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ==========================================================
   RESPONSIVE DEL CARRUSEL
========================================================== */

@media (max-width: 1100px) {

    .services-carousel__track {
        grid-auto-columns: minmax(290px, 36vw);
    }

}

@media (max-width: 760px) {

    .services-carousel {
        padding: 44px 0 52px;
    }

    .services-carousel__wrapper {
        width: 100%;
    }

    .services-carousel__track {
        grid-auto-columns:
            minmax(280px, calc(84vw - 20px));

        gap: 16px;

        padding-inline: 20px;
        scroll-padding-left: 20px;
    }

    .carousel-service-card {
        min-height: 515px;
    }

    .carousel-service-card__image {
        height: 330px;
    }

    .carousel-arrow {
        display: none;
    }

}

@media (max-width: 480px) {

    .services-carousel__heading {
        width: calc(100% - 28px);
    }

    .services-carousel__track {
        grid-auto-columns: calc(88vw - 16px);
        padding-inline: 16px;
    }

    .carousel-service-card {
        min-height: 500px;
        border-radius: 17px;
    }

    .carousel-service-card__image {
        height: 315px;
    }

    .carousel-service-card__content {
        padding: 19px 18px 18px;
    }

}

/* ==========================================================
   NAVBAR PREMIUM V7
========================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(216,224,239,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:
    background 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.site-header.is-scrolled{
  background:rgba(255,255,255,.97);
  border-color:rgba(204,214,232,.95);
  box-shadow:0 12px 36px rgba(14,30,66,.09);
}

.header-shell{
  width:min(calc(100% - 40px),1240px);
  min-height:82px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:22px;
}

.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
  line-height:0;
}

.brand-logo{
  display:block;
  width:190px;
  height:auto;
  max-height:58px;
  object-fit:contain;
}

.main-navigation{
  margin:0;
  justify-self:start;
  min-width:0;
}

.navigation-list{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.navigation-list a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 11px;
  border-radius:10px;
  color:#27324a;
  font-size:.88rem;
  font-weight:750;
  white-space:nowrap;
  transition:
    color 180ms ease,
    background 180ms ease;
}

.navigation-list a:hover,
.navigation-list a:focus-visible{
  color:var(--primary-700);
  background:var(--primary-50);
}

.navigation-list a[aria-current="page"]{
  color:var(--primary-700);
}

.navigation-list a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:3px;
  height:2px;
  border-radius:99px;
  background:var(--primary-600);
}

.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.header-whatsapp{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 17px;
  border:1px solid #65c977;
  border-radius:999px;
  background:#fff;
  color:#172238;
  font-size:.9rem;
  font-weight:850;
  box-shadow:0 5px 16px rgba(31,157,65,.08);
  white-space:nowrap;
  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.header-whatsapp svg{
  width:21px;
  height:21px;
  flex:0 0 auto;
  fill:#19a844;
}

.header-whatsapp:hover,
.header-whatsapp:focus-visible{
  transform:translateY(-1px);
  color:#fff;
  background:#19a844;
  box-shadow:0 10px 22px rgba(25,168,68,.22);
}

.header-whatsapp:hover svg,
.header-whatsapp:focus-visible svg{
  fill:#fff;
}

.menu-toggle{
  display:none;
  position:relative;
  width:46px;
  height:46px;
  margin:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  cursor:pointer;
}

.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  height:2px;
  border-radius:9px;
  background:var(--ink);
  transition:
    transform 180ms ease,
    top 180ms ease,
    opacity 180ms ease;
}

.menu-toggle::before{top:14px}
.menu-toggle span{top:21px}
.menu-toggle::after{top:28px}
.menu-toggle[aria-expanded="true"]::before{top:21px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span{opacity:0}
.menu-toggle[aria-expanded="true"]::after{top:21px;transform:rotate(-45deg)}

@media (max-width:1120px){
  .header-shell{
    min-height:78px;
  }

  .brand-logo{
    width:178px;
  }

  .navigation-list a{
    padding-inline:8px;
    font-size:.83rem;
  }

  .header-whatsapp{
    padding-inline:14px;
  }
}

@media (max-width:980px){
  .header-shell{
    grid-template-columns:auto 1fr auto;
    width:min(calc(100% - 28px),1240px);
  }

  .brand-logo{
    width:174px;
  }

  .menu-toggle{
    display:block;
  }

  .main-navigation{
    position:absolute;
    left:14px;
    right:14px;
    top:calc(100% + 8px);
    margin:0;
    padding:12px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,.98);
    box-shadow:0 20px 48px rgba(14,30,66,.16);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:
      opacity 180ms ease,
      visibility 180ms ease,
      transform 180ms ease;
  }

  .main-navigation.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .navigation-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
  }

  .navigation-list a{
    width:100%;
    min-height:46px;
    padding-inline:14px;
    font-size:.92rem;
  }

  .navigation-list a[aria-current="page"]::after{
    display:none;
  }
}

@media (max-width:680px){
  .header-shell{
    min-height:72px;
    width:min(calc(100% - 22px),1240px);
    column-gap:12px;
  }

  .brand-logo{
    width:152px;
    max-height:48px;
  }

  .header-whatsapp span{
    display:none;
  }

  .header-whatsapp{
    width:44px;
    min-height:44px;
    padding:0;
  }

  .header-whatsapp svg{
    width:23px;
    height:23px;
  }

  .menu-toggle{
    width:44px;
    height:44px;
  }

  .navigation-list{
    grid-template-columns:1fr;
  }
}

@media (max-width:390px){
  .brand-logo{
    width:138px;
  }

  .header-actions{
    gap:7px;
  }
}


/* ===== LAYOUT V8 ===== */
.hero-v8{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 72% 28%,rgba(14,86,202,.55),transparent 38%),linear-gradient(110deg,#02102a 0%,#031c47 48%,#010817 100%)}
.hero-v8__grid{width:min(calc(100% - 48px),1460px);min-height:490px;margin:auto;display:grid;grid-template-columns:38% 62%;align-items:stretch}
.hero-v8__content{z-index:2;display:flex;flex-direction:column;justify-content:center;padding:52px 26px 120px 18px}
.hero-v8__eyebrow{width:max-content;margin:0 0 14px;padding:9px 15px;border-radius:999px;background:#075dcc;color:#fff;font-size:.78rem;font-weight:900;text-transform:uppercase}
.hero-v8__content h1{max-width:650px;margin:0 0 18px;font-size:clamp(2.55rem,4vw,4.45rem);line-height:.98;letter-spacing:-.045em;color:#fff}
.hero-v8__content h1 span{color:#1683ff}
.hero-v8__description{max-width:590px;margin:0 0 26px;color:#dbe7f8;font-size:1.06rem;line-height:1.55}
.hero-v8__actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-v8__button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border-radius:999px;font-weight:850;text-decoration:none}
.hero-v8__button--whatsapp{background:#20c35a;color:#fff}.hero-v8__button--secondary{border:1px solid rgba(255,255,255,.65);color:#fff;background:rgba(255,255,255,.04)}
.hero-v8__media{min-height:490px;overflow:hidden}.hero-v8__media picture,.hero-v8__media img{width:100%;height:100%;display:block}.hero-v8__media img{object-fit:cover;object-position:center right}
.hero-v8__benefits{width:min(calc(100% - 72px),1460px);margin:-98px auto 8px;position:relative;z-index:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:18px 20px;border:1px solid rgba(107,163,235,.3);border-radius:18px;background:rgba(2,18,46,.93);backdrop-filter:blur(14px);box-shadow:0 20px 45px rgba(0,0,0,.22)}
.hero-v8__benefit{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center;padding:8px 20px;border-right:1px solid rgba(255,255,255,.15)}.hero-v8__benefit:last-child{border-right:0}
.hero-v8__benefit>span{width:42px;height:42px;display:grid;place-items:center;border:2px solid #68aaff;border-radius:50%;color:#68aaff;font-weight:900}
.hero-v8__benefit h2{margin:0 0 4px;color:#fff;font-size:.95rem}.hero-v8__benefit p{margin:0;color:#c9d7ea;font-size:.78rem;line-height:1.42}

/* ==========================================================
   LOGOTIPOS DE MARCAS
========================================================== */
/* ==========================================================
   FRANJA DE MARCAS V9
========================================================== */

.brand-strip-v9 {
    padding: 30px 0 28px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fd 100%
        );

    border-top: 1px solid #e3e8f1;
    border-bottom: 1px solid #e3e8f1;
}

.brand-strip-v9__container {
    width: min(calc(100% - 40px), 1320px);
    margin-inline: auto;
}

/* ENCABEZADO */

.brand-strip-v9__heading {
    max-width: 820px;
    margin: 0 auto 24px;
    text-align: center;
}

.brand-strip-v9__eyebrow {
    margin: 0 0 5px;

    color: #147fe8;

    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.brand-strip-v9__heading h2 {
    margin: 0 0 8px;

    color: #102a5e;

    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.15;
}

.brand-strip-v9__description {
    margin: 0;

    color: #66738a;

    font-size: 0.94rem;
    line-height: 1.55;
}

/* LOGOS */

.brand-strip-v9__logos {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px 20px;

    margin: 0 auto 22px;
}

.brand-logo-v9 {
    width: 128px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px 10px;

    border: 1px solid #e0e6ef;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 5px 14px rgba(18, 43, 86, 0.06);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.brand-logo-v9 img {
    display: block;

    width: 100%;
    max-width: 105px;
    height: 42px;

    object-fit: contain;
    object-position: center;

    filter: none;
    opacity: 1;

    transition: transform 180ms ease;
}

/* HOVER: SOLO AUMENTA LIGERAMENTE */

.brand-logo-v9:hover {
    transform: translateY(-2px);

    border-color: #b7d5f5;

    box-shadow:
        0 10px 22px rgba(18, 71, 136, 0.12);
}

.brand-logo-v9:hover img {
    transform: scale(1.07);
}

/* AJUSTES INDIVIDUALES */

.brand-logo-v9 img[alt="Apple"] {
    max-width: 47px;
    height: 47px;
}

.brand-logo-v9 img[alt="Samsung"] {
    max-width: 108px;
}

.brand-logo-v9 img[alt="Motorola"] {
    max-width: 103px;
}

.brand-logo-v9 img[alt="Xiaomi"] {
    max-width: 86px;
}

.brand-logo-v9 img[alt="Huawei"] {
    max-width: 92px;
}

.brand-logo-v9 img[alt="Honor"] {
    max-width: 90px;
}

.brand-logo-v9 img[alt="Oppo"] {
    max-width: 84px;
}

.brand-logo-v9 img[alt="Realme"] {
    max-width: 88px;
}

/* TIPOS DE EQUIPOS */

.brand-strip-v9__devices {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    padding-top: 20px;

    border-top: 1px solid #e1e7f0;
}

.brand-strip-v9__devices span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 8px 16px;

    border: 1px solid #d8e1ee;
    border-radius: 999px;

    color: #273a5c;
    background: #ffffff;

    font-size: 0.85rem;
    font-weight: 800;

    box-shadow:
        0 4px 12px rgba(20, 50, 90, 0.05);
}

@media (max-width: 900px) {

    .brand-strip-v9__logos {
        gap: 12px;
    }

    .brand-logo-v9 {
        width: 118px;
        height: 60px;
    }

}

@media (max-width: 600px) {

    .brand-strip-v9 {
        padding: 26px 0 24px;
    }

    .brand-strip-v9__container {
        width: calc(100% - 24px);
    }

    .brand-strip-v9__logos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .brand-logo-v9 {
        width: 100%;
        height: 62px;
    }

    .brand-strip-v9__devices {
        gap: 8px;
    }

    .brand-strip-v9__devices span {
        padding: 7px 13px;
        font-size: 0.8rem;
    }

}
.services-v8{padding:20px 0 42px;color:#fff;background:radial-gradient(circle at 50% 0%,rgba(10,66,145,.72),transparent 36%),linear-gradient(180deg,#031a3d 0%,#020c20 100%)}
.services-v8__heading{width:min(calc(100% - 48px),1460px);margin:0 auto 18px;text-align:center}.services-v8__heading p{margin:0 0 4px;color:#1384ff;font-size:.8rem;font-weight:900;text-transform:uppercase}.services-v8__heading h2{margin:0;color:#fff;font-size:clamp(1.8rem,2.7vw,2.55rem)}
.services-v8__grid{width:min(calc(100% - 48px),1460px);margin:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-items:stretch}
.service-v8__card{min-width:0;min-height:310px;display:grid;grid-template-columns:43% 57%;overflow:hidden;border:1px solid rgba(103,154,222,.4);border-radius:14px;background:linear-gradient(145deg,rgba(7,35,75,.98),rgba(2,16,39,.99));box-shadow:0 16px 32px rgba(0,0,0,.2)}
.service-v8__image{min-height:310px;overflow:hidden;background:#07162f}.service-v8__image img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.service-v8__content{display:flex;flex-direction:column;padding:16px 13px 12px}.service-v8__content h3{min-height:2.4em;margin:0 0 8px;color:#fff;font-size:.98rem;line-height:1.15}.service-v8__content p{flex:1;margin:0 0 14px;color:#d1ddec;font-size:.71rem;line-height:1.5}
.service-v8__content a{width:100%;min-height:34px;display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border:1px solid #1683ff;border-radius:999px;color:#fff;font-size:.72rem;font-weight:800;text-align:center;text-decoration:none}

@media(max-width:1250px){.services-v8__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.hero-v8__grid{grid-template-columns:1fr}.hero-v8__content{padding:54px 16px 34px}.hero-v8__media{min-height:380px}.hero-v8__benefits{margin:0 auto;grid-template-columns:repeat(2,minmax(0,1fr))}.brand-strip-v8__row{grid-template-columns:1fr}.brand-strip-v8__devices{padding:20px 0 0;border-left:0;border-top:1px solid #dce2ec}}
@media(max-width:760px){.services-v8__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hero-v8__grid,.hero-v8__benefits,.brand-strip-v8__container,.services-v8__heading,.services-v8__grid{width:min(calc(100% - 24px),1460px)}.hero-v8__content h1{font-size:2.45rem}.hero-v8__media{min-height:300px}.hero-v8__benefits{grid-template-columns:1fr;padding:10px}.hero-v8__benefit{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}.brand-strip-v8__brands,.brand-strip-v8__devices{flex-wrap:wrap;justify-content:center}.services-v8__grid{grid-template-columns:1fr}.service-v8__card{grid-template-columns:40% 60%}}


/* ==========================================================
   REDES SOCIALES V11
========================================================== */

.social-section-v11 {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(35, 112, 255, 0.08),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f9ff 100%
        );
}

.social-grid-v11 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.social-card-v11 {
    min-width: 0;
    min-height: 112px;

    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;

    padding: 20px;

    border: 1px solid #dce4f0;
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow:
        0 10px 28px rgba(17, 45, 91, 0.07);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.social-card-v11:hover,
.social-card-v11:focus-visible {
    transform: translateY(-5px);

    border-color: #bfd4f1;

    box-shadow:
        0 18px 38px rgba(17, 45, 91, 0.13);
}

.social-icon-v11 {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    color: #ffffff;

    transition: transform 180ms ease;
}

.social-card-v11:hover .social-icon-v11,
.social-card-v11:focus-visible .social-icon-v11 {
    transform: scale(1.08);
}

.social-icon-v11 svg {
    width: 30px;
    height: 30px;

    display: block;

    fill: currentColor;
}

.social-card-v11--facebook .social-icon-v11 {
    background: linear-gradient(145deg, #1877f2, #0d5dcc);
}

.social-card-v11--instagram .social-icon-v11 {
    background:
        radial-gradient(
            circle at 30% 105%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 45%,
            #d6249f 60%,
            #285aeb 90%
        );
}

.social-card-v11--tiktok .social-icon-v11 {
    background: linear-gradient(145deg, #161616, #000000);
    box-shadow:
        inset 3px 0 0 rgba(37, 244, 238, 0.72),
        inset -3px 0 0 rgba(254, 44, 85, 0.72);
}

.social-card-v11--youtube .social-icon-v11 {
    background: linear-gradient(145deg, #ff1f1f, #d80000);
}

.social-card-v11__meta {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.social-card-v11__meta strong {
    overflow: hidden;

    color: #13294f;

    font-size: 1rem;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-card-v11__meta small {
    color: #78859a;

    font-size: 0.77rem;
    font-weight: 750;
}

.social-card-v11__arrow {
    color: #98a7bd;

    font-size: 1.1rem;
    font-weight: 900;

    transition:
        transform 180ms ease,
        color 180ms ease;
}

.social-card-v11:hover .social-card-v11__arrow,
.social-card-v11:focus-visible .social-card-v11__arrow {
    transform: translate(2px, -2px);
    color: #176ed7;
}

@media (max-width: 940px) {
    .social-grid-v11 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .social-grid-v11 {
        grid-template-columns: 1fr;
    }

    .social-card-v11 {
        min-height: 96px;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        padding: 17px;
    }

    .social-icon-v11 {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .social-icon-v11 svg {
        width: 27px;
        height: 27px;
    }
}