:root{
      --navy:#0B1F33;
      --navy-2:#15324E;
      --blue:#0E6FAF;
      --blue-2:#2891C5;
      --orange:#F5A000;
      --orange-dark:#D98A00;
      --cyan-soft:#D9F1DE;	  
      --orange-soft:#FFF0D9;
      --blue-soft:#DCECF8;
      --bg:#F7F9FC;
      --white:#FFFFFF;
      --text:#243444;
      --muted:#64748B;
      --line:#DCE4EC;
      --shadow:0 18px 50px rgba(11,31,51,.12);
      --radius:24px;
      --container:1240px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:Inter,Arial,sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
    }
    img{display:block;max-width:100%}
    a{text-decoration:none;color:inherit}
    button,input,textarea,select{font:inherit}
    .container{width:min(92%,var(--container));margin-inline:auto}

    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,255,255,.94);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(220,228,236,.9);
    }
    .header-inner{
      min-height:86px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:2rem;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:.8rem;
      flex-shrink:0;
    }
    .brand img{
      width:68px;
      height:48px;
      object-fit:contain;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1;
    }
    .brand-text strong{
      font-family:Manrope,sans-serif;
      font-size:1.65rem;
      color:var(--navy);
      letter-spacing:-.04em;
    }
    .brand-text span{
      margin-top:.32rem;
      font-size:.72rem;
      color:var(--orange);
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    nav ul{
      list-style:none;
      display:flex;
      align-items:center;
      gap:1.8rem;
    }
    nav a{
      font-size:.95rem;
      font-weight:700;
      color:var(--navy-2);
      transition:.2s ease;
    }
    nav a:hover{color:var(--blue)}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.6rem;
      min-height:48px;
      padding:.9rem 1.35rem;
      border-radius:12px;
      font-weight:800;
      transition:.22s ease;
    }
    .btn-primary{
      background:var(--orange);
      color:#fff;
      box-shadow:0 10px 24px rgba(245,160,0,.22);
    }
    .btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px)}
    .btn-secondary{
      background:#fff;
      color:var(--navy);
      border:1px solid var(--line);
    }
    .btn-secondary:hover{border-color:var(--blue);color:var(--blue)}
    .menu-btn{display:none}

    .hero{
      padding:82px 0 74px;
      background:
        radial-gradient(circle at 85% 15%,rgba(40,145,197,.10),transparent 28%),
        linear-gradient(180deg,#fff 0%,#F6FAFD 100%);
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.03fr .97fr;
      gap:4.5rem;
      align-items:center;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      margin-bottom:1.15rem;
      color:var(--blue);
      font-size:.78rem;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;background:var(--orange);
    }
    h1,h2,h3{
      font-family:Manrope,sans-serif;
      color:var(--navy);
    }
    h1{
      max-width:720px;
      font-size:clamp(3rem,5.4vw,5.1rem);
      line-height:1.02;
      letter-spacing:-.055em;
      margin-bottom:1.4rem;
    }
    h1 span{display:block;color:var(--blue)}
    .hero-copy>p{
      max-width:650px;
      font-size:1.08rem;
      color:var(--muted);
      margin-bottom:2rem;
    }
    .hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
    .hero-points{
      margin-top:1.8rem;
      display:flex;
      gap:1.25rem;
      flex-wrap:wrap;
      color:var(--navy-2);
      font-size:.9rem;
      font-weight:700;
    }
    .hero-points span{display:flex;align-items:center;gap:.45rem}
    .hero-points span::before{content:"✓";color:var(--blue);font-weight:900}

    .hero-visual{
      position:relative;
      min-height:470px;
      border-radius:32px;
      overflow:hidden;
      box-shadow:var(--shadow);
      background:#DCEAF3;
    }
    .hero-visual img{
      width:100%;
      height:100%;
      min-height:470px;
      object-fit:cover;
    }
    .hero-visual::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,transparent 45%,rgba(11,31,51,.82));
    }
    .hero-visual-copy{
      position:absolute;
      z-index:2;
      left:2rem;
      right:2rem;
      bottom:1.8rem;
      color:#fff;
    }
    .hero-visual-copy small{
      display:block;
      margin-bottom:.45rem;
      color:rgba(255,255,255,.78);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .hero-visual-copy strong{
      display:block;
      max-width:520px;
      font-family:Manrope,sans-serif;
      font-size:1.55rem;
      line-height:1.25;
    }
	
	/* ============================================================
   HERO - ACCESOS POR SEGMENTO
============================================================ */

.hero-segments{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.8rem;
    margin:1.8rem 0 2rem;
}

.hero-segment{
    position:relative;

    min-height:125px;
    padding:1.05rem;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    border:1px solid var(--line);
    border-radius:16px;

    background:#fff;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.hero-segment:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(11,31,51,.08);
}


/* ICONO */

.hero-segment-icon{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    margin-bottom:.8rem;

    border-radius:11px;

    font-size:.95rem;
}


/* TEXTO */

.hero-segment-copy{
    display:flex;
    flex-direction:column;
}

.hero-segment-copy strong{
    font-family:Manrope,sans-serif;
    color:var(--navy);
    font-size:.98rem;
    line-height:1.2;
}

.hero-segment-copy small{
    margin-top:.3rem;

    color:var(--muted);

    font-size:.72rem;
    line-height:1.35;
}


/* FLECHA */

.hero-segment-arrow{
    position:absolute;

    top:1.15rem;
    right:1rem;

    font-size:.72rem;

    transition:transform .22s ease;
}

.hero-segment:hover .hero-segment-arrow{
    transform:translateX(4px);
}


/* ============================================================
   GOBIERNOS - AZUL
============================================================ */

.hero-segment-government .hero-segment-icon{
    background:var(--blue-soft);
    color:var(--blue-2);
}

.hero-segment-government .hero-segment-arrow{
    color:var(--blue-2);
}

.hero-segment-government:hover{
    border-color:rgba(40,145,197,.38);
    background:#F7FBFD;
}


/* ============================================================
   INSTITUCIONES - VERDE
============================================================ */

.hero-segment-institution .hero-segment-icon{
    background:#E4F4E8;
    color:#43845A;
}

.hero-segment-institution .hero-segment-arrow{
    color:#43845A;
}

.hero-segment-institution:hover{
    border-color:rgba(67,132,90,.38);
    background:#F8FCF9;
}


/* ============================================================
   EMPRESAS - NARANJA
============================================================ */

.hero-segment-business .hero-segment-icon{
    background:var(--orange-soft);
    color:var(--orange-dark);
}

.hero-segment-business .hero-segment-arrow{
    color:var(--orange-dark);
}

.hero-segment-business:hover{
    border-color:rgba(245,160,0,.42);
    background:#FFFBF5;
}


/* ============================================================
   AJUSTE DEL HERO PARA LA NUEVA ESTRUCTURA
============================================================ */

.hero-copy > p{
    margin-bottom:0;
}

.hero-actions{
    margin-top:0;
}


/* ============================================================
   RESPONSIVE HERO SEGMENTOS
============================================================ */

@media (max-width:1050px){

    .hero-segments{
        max-width:760px;
        margin:1.8rem auto 2rem;
    }

    .hero-segment{
        text-align:left;
    }

}


@media (max-width:680px){

    .hero-segments{
        grid-template-columns:1fr;
        max-width:480px;
        gap:.7rem;
    }

    .hero-segment{
        min-height:auto;
        padding:1rem 3rem 1rem 1rem;

        display:grid;
        grid-template-columns:38px 1fr;
        align-items:center;
        column-gap:.85rem;
    }

    .hero-segment-icon{
        margin-bottom:0;
    }

    .hero-segment-copy small{
        margin-top:.15rem;
    }

    .hero-segment-arrow{
        top:50%;
        transform:translateY(-50%);
    }

    .hero-segment:hover .hero-segment-arrow{
        transform:translate(4px,-50%);
    }

}

    .section{padding:100px 0}
    .section-title{
      max-width:820px;
      margin:0 auto 3.4rem;
      text-align:center;
    }
    .section-title h2{
      font-size:clamp(2.2rem,4vw,3.4rem);
      line-height:1.08;
      letter-spacing:-.04em;
      margin-bottom:1rem;
    }
    .section-title p{
      color:var(--muted);
      font-size:1.05rem;
    }

    .segments{background:#fff}
    .segment-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1.4rem;
    }
    .segment-card{
      overflow:hidden;
      border-radius:var(--radius);
      box-shadow:0 14px 34px rgba(11,31,51,.09);
      transition:.25s ease;
    }
    .segment-card:hover{transform:translateY(-6px)}
    .segment-card.government{background:var(--blue-soft)}
    .segment-card.institution{background:var(--cyan-soft)}
    .segment-card.business{background:var(--orange-soft)}
    .segment-media{
      height:235px;
      overflow:hidden;
      background:#E7EEF4;
    }
    .segment-media img{width:100%;height:100%;object-fit:cover}
    .segment-body{padding:1.7rem}
    .segment-body small{
      display:block;
      margin-bottom:.4rem;
      color:var(--blue);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.06em;
    }
    ..segment-card.institution small{color:#43845A}
    .segment-body h3{
      font-size:1.55rem;
      margin-bottom:.7rem;
    }
    .segment-body p{
      color:#4C5D6F;
      margin-bottom:1.25rem;
    }
    .segment-body a{
      color:var(--blue);
      font-weight:800;
    }
    ..segment-card.institution a{color:#43845A}
	
	.segment-card.business small,
	.segment-card.business a{
		color:#D98500;
	}

/* ============================================================
   TARJETAS DE SEGMENTOS
============================================================ */

.segment-card{
    background:#fff;
    border:1px solid #E3EAF0;
    border-radius:22px;
    overflow:hidden;

    box-shadow:0 8px 28px rgba(11,31,51,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.segment-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 38px rgba(11,31,51,.09);
}


/* IMAGEN */

.segment-card .segment-media{
    height:220px;
    overflow:hidden;
}

.segment-card .segment-media img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .4s ease;
}

.segment-card:hover .segment-media img{
    transform:scale(1.025);
}


/* CONTENIDO */

.segment-card .segment-body{
    padding:1.7rem 1.7rem 1.6rem;
    background:#fff;
}

.segment-card .segment-body small{
    display:block;
    margin-bottom:.65rem;

    font-size:.76rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.segment-card .segment-body h3{
    margin:0 0 .75rem;

    font-size:1.35rem;
    line-height:1.25;
    color:var(--navy);
}

.segment-card .segment-body p{
    margin:0 0 1.2rem;

    font-size:.94rem;
    line-height:1.6;
    color:var(--muted);
}

.segment-card .segment-body a{
    font-size:.9rem;
    font-weight:800;
}


/* GOBIERNOS */

.segment-card.government{
    border-bottom:3px solid #2891C5;
}

.segment-card.government small,
.segment-card.government a{
    color:#2891C5;
}


/* INSTITUCIONES */

.segment-card.institution{
    border-bottom:3px solid #43845A;
}

.segment-card.institution small,
.segment-card.institution a{
    color:#43845A;
}


/* EMPRESAS */

.segment-card.business{
    border-bottom:3px solid #D98500;
}

.segment-card.business small,
.segment-card.business a{
    color:#D98500;
}

/* ============================================================
   METODOLOGÍA NUEVA
============================================================ */

.methodology{
    background:
        linear-gradient(
            135deg,
            #0B1F33 0%,
            #163C60 100%
        );

    color:#fff;
}

.methodology .section-title h2{
    color:#fff;
}

.methodology .section-title p{
    color:rgba(255,255,255,.72);
}

.methodology .eyebrow{
    color:#70C3E5;
}

.method-new-grid{
    position:relative;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.2rem;

    margin-top:3.5rem;
}

.method-new-grid::before{
    content:"";

    position:absolute;
    top:64px;
    left:11%;
    right:11%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--blue-2),
            var(--orange)
        );
}

.method-new-card{
    position:relative;
    z-index:2;

    padding:2rem 1.4rem;

    text-align:center;

    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;

    background:rgba(255,255,255,.045);

    transition:.25s ease;
}

.method-new-card:hover{
    transform:translateY(-5px);

    background:rgba(255,255,255,.075);
}

.method-number{
    position:absolute;

    top:1rem;
    right:1rem;

    color:rgba(255,255,255,.2);

    font-family:Manrope,sans-serif;
    font-size:1.5rem;
    font-weight:800;
}

.method-new-icon{
    width:82px;
    height:82px;

    margin:0 auto 1.4rem;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#fff;

    color:var(--blue);

    font-family:Manrope,sans-serif;
    font-size:1rem;
    font-weight:800;

    box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.method-new-icon.method-orange{
    color:var(--orange-dark);
}

.method-new-card h3{
    color:#fff;

    margin-bottom:.3rem;

    font-size:1.25rem;
}

.method-new-card strong{
    display:block;

    margin-bottom:.8rem;

    color:#9BD5ED;

    font-size:.82rem;
}

.method-new-card p{
    color:rgba(255,255,255,.68);

    font-size:.9rem;
}


/* FRASE METODOLÓGICA */

.method-philosophy{
    max-width:900px;

    margin:3rem auto 0;

    display:flex;
    align-items:flex-start;
    gap:1.2rem;

    padding:1.5rem 1.7rem;

    border:1px solid rgba(255,255,255,.11);
    border-radius:18px;

    background:rgba(255,255,255,.06);
}

.method-philosophy > i{
    color:var(--orange);

    font-size:1.5rem;

    margin-top:.15rem;
}

.method-philosophy strong{
    display:block;

    color:#fff;

    font-size:1.05rem;

    margin-bottom:.3rem;
}

.method-philosophy p{
    color:rgba(255,255,255,.68);

    margin:0;
}


/* RESPONSIVE */

@media (max-width:1050px){

    .method-new-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .method-new-grid::before{
        display:none;
    }

}

@media (max-width:680px){

    .method-new-grid{
        grid-template-columns:1fr;
    }

    .method-philosophy{
        flex-direction:column;
    }

}
    .method-card:nth-child(2) .method-icon,
    .method-card:nth-child(5) .method-icon{color:var(--orange)}
    .method-card h3{color:#fff;font-size:1rem;margin-bottom:.35rem}
    .method-card p{color:rgba(255,255,255,.68);font-size:.86rem}

    .contact{background:#fff}
    .contact-grid{
      display:grid;
      grid-template-columns:.85fr 1.15fr;
      gap:3rem;
      align-items:start;
    }
    .contact-copy{
      padding:2rem 0;
    }
    .contact-copy h2{
      font-size:clamp(2.2rem,4vw,3.2rem);
      line-height:1.1;
      margin-bottom:1rem;
    }
    .contact-copy p{color:var(--muted);margin-bottom:1.5rem}
    .contact-list{display:grid;gap:.9rem}
    .contact-list a{font-weight:700;color:var(--navy)}
    .contact-form{
      padding:2rem;
      border:1px solid var(--line);
      border-radius:24px;
      background:var(--bg);
      box-shadow:0 14px 36px rgba(11,31,51,.07);
    }
    .form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1rem;
    }
    .form-group{display:grid;gap:.45rem}
    .form-group.full{grid-column:1/-1}
    label{font-size:.9rem;font-weight:700;color:var(--navy)}
    input,select,textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
      padding:.9rem 1rem;
      color:var(--text);
      outline:none;
    }
    input:focus,select:focus,textarea:focus{
      border-color:var(--blue);
      box-shadow:0 0 0 4px rgba(14,111,175,.10);
    }
    textarea{min-height:150px;resize:vertical}
    .contact-form .btn{margin-top:1rem;width:100%}

    footer{
      padding:46px 0 24px;
      background:#071625;
      color:rgba(255,255,255,.72);
    }
    .footer-main{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:2rem;
      padding-bottom:2rem;
      border-bottom:1px solid rgba(255,255,255,.09);
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:.65rem;
    }
    .footer-brand img{width:34px;height:24px;object-fit:contain}
    .footer-brand strong{color:#fff;font-family:Manrope,sans-serif}
    .footer-brand span{display:block;color:var(--orange);font-size:.62rem;font-weight:800;letter-spacing:.1em}
    .footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}
    .footer-links a:hover{color:#fff}
    .footer-bottom{padding-top:1.25rem;font-size:.88rem}


    .solution-world{background:#fff}
    .solution-world-alt{background:var(--bg)}
    .solution-world-light{background:#fff}
    .solution-hero{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:4rem;
      align-items:center;
      margin-bottom:4rem;
    }
    .solution-hero-image{
      overflow:hidden;
      border-radius:26px;
      box-shadow:var(--shadow);
      background:#E7EEF4;
    }
    .solution-hero-image img{
      width:100%;
      height:100%;
      min-height:390px;
      object-fit:cover;
    }
    .solution-hero-copy .eyebrow{margin-bottom:1rem}
    .solution-hero-copy h2{
      font-size:clamp(2.2rem,4vw,3.3rem);
      line-height:1.08;
      letter-spacing:-.04em;
      margin-bottom:1rem;
    }
    .solution-hero-copy p{
      color:var(--muted);
      margin-bottom:1.5rem;
    }
    .product-family{margin-top:3.5rem}
    .product-family-header{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:2rem;
      margin-bottom:2rem;
      padding-bottom:1.25rem;
      border-bottom:1px solid var(--line);
    }
    .product-family-header h3{
      margin-bottom:.45rem;
      font-size:1.65rem;
    }
    .product-family-header p{
      max-width:700px;
      margin:0;
      color:var(--muted);
    }
    .product-family-badge{
      flex-shrink:0;
      padding:.55rem .85rem;
      border-radius:999px;
      background:#EAF4F9;
      color:var(--blue);
      font-size:.78rem;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .product-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1.25rem;
    }
    .product-grid-3{grid-template-columns:repeat(3,1fr)}
    .product-card{
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:20px;
      background:#fff;
      transition:.22s ease;
    }
    .product-card:hover{
      transform:translateY(-6px);
      border-color:var(--blue);
      box-shadow:0 14px 34px rgba(11,31,51,.09);
    }
    .product-visual{
      position:relative;
      aspect-ratio:16/10;
      overflow:hidden;
      background:#E7EEF4;
    }
    .product-visual img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .4s ease;
    }
    .product-card:hover .product-visual img{transform:scale(1.04)}
    .product-visual::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,transparent 50%,rgba(11,31,51,.24));
    }
    .product-content{padding:1.45rem}
    .product-content small{
      display:block;
      margin-bottom:.5rem;
      color:var(--blue);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .product-content h3{
      font-size:1.35rem;
      margin-bottom:.65rem;
    }
    .product-content p{color:var(--muted)}


    @media (max-width:1050px){
      nav{display:none}
      .header-inner>.btn{display:none}
      .menu-btn{display:block}
      .hero-grid,.contact-grid,.solution-hero{grid-template-columns:1fr}
      .hero-copy{text-align:center}
      .hero-copy>p{margin-inline:auto}
      .hero-actions,.hero-points{justify-content:center}
      .segment-grid{grid-template-columns:1fr}
      .method-grid{grid-template-columns:repeat(3,1fr);row-gap:2.5rem}
      .product-grid,.product-grid-3{grid-template-columns:repeat(2,1fr)}
      .method-grid::before{display:none}
    }

    @media (max-width:680px){
      .header-inner{min-height:74px}
      .brand img{width:56px;height:40px}
      .brand-text strong{font-size:1.35rem}
      .hero{padding:58px 0}
      h1{font-size:2.65rem}
      .hero-visual,.hero-visual img{min-height:360px}
      .section{padding:76px 0}
      .method-grid{grid-template-columns:1fr 1fr}
      .form-grid{grid-template-columns:1fr}
      .product-grid,.product-grid-3{grid-template-columns:1fr}
      .product-family-header{align-items:flex-start;flex-direction:column}
      .form-group.full{grid-column:auto}
      .footer-main{flex-direction:column}
    }

/* ============================================================
   ORGANIZACIONES QUE NOS ACOMPAÑAN
============================================================ */

.clients-section{
    background:#fff;
}

.clients-highlight{
    max-width:760px;
    margin:-1rem auto 4.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.4rem;
    padding:1.4rem 2rem;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--bg);
}

.clients-highlight strong{
    font-family:Manrope,sans-serif;
    font-size:3rem;
    line-height:1;
    color:var(--blue-2);
}

.clients-highlight span{
    max-width:420px;
    color:var(--muted);
    font-weight:600;
    line-height:1.45;
}


/* GRUPOS */

.clients-group{
    margin-top:3.5rem;
}

.clients-group + .clients-group{
    padding-top:3rem;
    border-top:1px solid var(--line);
}

.clients-group-header{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1.6rem;
}

.clients-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:14px;
    font-size:1.25rem;
}

.clients-group-header small{
    display:block;
    margin-bottom:.15rem;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.clients-group-header h3{
    font-size:1.4rem;
}


/* COLORES POR SEGMENTO */

.clients-government .clients-icon{
    background:var(--blue-soft);
    color:var(--blue);
}

.clients-government .clients-group-header small{
    color:var(--blue);
}


.clients-institution .clients-icon{
    background:#E4F4E8;
    color:#43845A;
}

.clients-institution .clients-group-header small{
    color:#43845A;
}


.clients-business .clients-icon{
    background:var(--orange-soft);
    color:var(--orange-dark);
}

.clients-business .clients-group-header small{
    color:var(--orange-dark);
}


/* TARJETAS */

.clients-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
}

.clients-grid-small{
    grid-template-columns:repeat(3,1fr);
}

.client-card{
    position:relative;
    min-height:135px;
    padding:1.4rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.client-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(11,31,51,.08);
}

.client-card small{
    display:block;
    margin-bottom:.25rem;
    color:var(--muted);
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.client-card h4{
    font-family:Manrope,sans-serif;
    color:var(--navy);
    font-size:1.1rem;
    line-height:1.25;
}

.client-card span{
    display:block;
    margin-top:.45rem;
    color:var(--muted);
    font-size:.78rem;
}


/* ACENTO TARJETAS */

.clients-government .client-card:hover{
    border-color:rgba(40,145,197,.45);
}

.clients-institution .client-card:hover{
    border-color:rgba(67,132,90,.45);
}

.clients-business .client-card:hover{
    border-color:rgba(245,160,0,.5);
}


/* RESPONSIVE */

@media (max-width:1050px){

    .clients-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .clients-grid-small{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:680px){

    .clients-highlight{
        flex-direction:column;
        text-align:center;
        margin-bottom:3rem;
    }

    .clients-highlight strong{
        font-size:2.6rem;
    }

    .clients-grid,
    .clients-grid-small{
        grid-template-columns:1fr;
    }

    .client-card{
        min-height:auto;
    }

}

/* ============================================================
   RYC CONNECT
============================================================ */

.connect-section{
    background:#fff;
    padding-top:80px;
    padding-bottom:80px;
}

.connect-card{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:4rem;

    padding:4rem;

    border-radius:30px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(40,145,197,.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0B1F33 0%,
            #123654 100%
        );

    box-shadow:0 24px 60px rgba(11,31,51,.16);
}

.connect-card::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(245,160,0,.08);
    left:-100px;
    bottom:-130px;
}

.connect-copy{
    position:relative;
    z-index:2;
}

.connect-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.55rem;

    margin-bottom:1.2rem;

    color:#77C6E8;

    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.connect-copy h2{
    color:#fff;
    font-size:clamp(2.5rem,5vw,4rem);
    line-height:1;
    margin-bottom:.7rem;
}

.connect-copy h3{
    color:#fff;
    font-size:1.45rem;
    line-height:1.35;
    margin-bottom:1.2rem;
}

.connect-copy p{
    max-width:600px;
    color:rgba(255,255,255,.72);
    font-size:1rem;
    margin-bottom:1.6rem;
}

.connect-features{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-bottom:2rem;
}

.connect-features span{
    display:inline-flex;
    align-items:center;
    gap:.45rem;

    padding:.6rem .8rem;

    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;

    background:rgba(255,255,255,.07);

    color:rgba(255,255,255,.88);

    font-size:.82rem;
    font-weight:700;
}

.connect-features i{
    color:#77C6E8;
}

.connect-btn{
    width:auto;
}


/* VISUAL */

.connect-visual{
    position:relative;
    z-index:2;

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

.connect-screen{
    width:min(100%,480px);

    overflow:hidden;

    border:1px solid rgba(255,255,255,.17);
    border-radius:22px;

    background:#fff;

    box-shadow:
        0 30px 60px rgba(0,0,0,.28),
        0 0 0 10px rgba(255,255,255,.04);

    transform:none;
}

.connect-screen-header{
    height:42px;
    display:flex;
    align-items:center;
    gap:6px;

    padding:0 16px;

    background:#F1F5F9;
    border-bottom:1px solid #E2E8F0;
}

.connect-screen-header span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#CBD5E1;
}

.connect-screen-content{
    min-height:280px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:2.4rem;
}

.connect-symbol{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin-bottom:1.2rem;

    border-radius:16px;

    background:#E5F3F9;

    color:var(--blue-2);
    font-size:1.5rem;
}

.connect-screen-content > span{
    color:var(--blue);
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.connect-screen-content strong{
    max-width:320px;

    margin-top:.4rem;
    margin-bottom:1.5rem;

    font-family:Manrope,sans-serif;
    color:var(--navy);
    font-size:1.45rem;
    line-height:1.25;
}

.connect-line{
    width:90%;
    height:8px;
    border-radius:999px;
    background:#E7EEF4;
    margin-bottom:.6rem;
}

.connect-line-short{
    width:62%;
}


/* RESPONSIVE */

@media (max-width:1050px){

    .connect-card{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .connect-screen{
        transform:none;
    }

}

@media (max-width:680px){

    .connect-section{
        padding-top:60px;
        padding-bottom:60px;
    }

    .connect-card{
        padding:2rem;
        border-radius:22px;
    }

    .connect-copy h3{
        font-size:1.2rem;
    }

    .connect-features{
        flex-direction:column;
        align-items:flex-start;
    }

    .connect-screen-content{
        min-height:230px;
        padding:1.7rem;
    }

}

/* ============================================================
   POR QUÉ RYC
============================================================ */

.why-section{
    background:#fff;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:1.25rem;
}

.why-card{
    padding:2rem;

    border:1px solid var(--line);
    border-radius:20px;

    background:#fff;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.why-card:hover{
    transform:translateY(-6px);

    border-color:rgba(40,145,197,.38);

    box-shadow:
        0 16px 36px rgba(11,31,51,.09);
}

.why-icon{
    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    margin-bottom:1.3rem;

    border-radius:15px;

    background:var(--blue-soft);

    color:var(--blue);

    font-size:1.25rem;
}

.why-card:nth-child(2) .why-icon{
    background:#E4F4E8;
    color:#43845A;
}

.why-card:nth-child(3) .why-icon{
    background:var(--orange-soft);
    color:var(--orange-dark);
}

.why-card:nth-child(4) .why-icon{
    background:#EAF4F9;
    color:var(--blue-2);
}

.why-card h3{
    margin-bottom:.7rem;

    font-size:1.25rem;
}

.why-card p{
    margin:0;

    color:var(--muted);

    font-size:.93rem;
}


/* RESPONSIVE */

@media (max-width:1050px){

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:680px){

    .why-grid{
        grid-template-columns:1fr;
    }

}

/* ============================================================
   PRODUCT CARDS COMPACTAS
============================================================ */

.product-card-compact{
    display:flex;
    min-height:265px;
}

.product-card-compact .product-content{
    width:100%;

    display:flex;
    flex-direction:column;

    padding:1.7rem;
}

.product-card-compact h4{
    margin:0;

    font-family:Manrope,sans-serif;
    font-size:1.75rem;

    color:var(--navy);
}

.product-card-compact h5{
    margin:.15rem 0 .9rem;

    font-family:Manrope,sans-serif;
    font-size:1rem;

    color:var(--navy-2);
}

.product-card-compact p{
    margin-bottom:1.4rem;

    color:var(--muted);

    font-size:.9rem;
    line-height:1.6;
}

.product-more{
    margin-top:auto;

    display:inline-flex;
    align-items:center;
    gap:.5rem;

    width:max-content;

    padding:0;

    border:0;
    background:none;

    color:var(--blue);

    font-weight:800;

    cursor:pointer;
}

.product-more i{
    font-size:.8rem;

    transition:transform .2s ease;
}

.product-more:hover i{
    transform:translateX(4px);
}

/* ============================================================
   PRODUCT MODAL
============================================================ */

.product-modal{
    position:fixed;
    inset:0;

    z-index:5000;

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

    padding:2rem;

    visibility:hidden;
    opacity:0;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.product-modal.is-open{
    visibility:visible;
    opacity:1;
}

.product-modal-backdrop{
    position:absolute;
    inset:0;

    background:rgba(5,18,30,.72);

    backdrop-filter:blur(5px);
}

.product-modal-dialog{
    position:relative;
    z-index:2;

    width:min(100%,760px);
    max-height:90vh;

    overflow-y:auto;

    border-radius:26px;

    background:#fff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.30);

    transform:translateY(15px) scale(.98);

    transition:transform .22s ease;
}

.product-modal.is-open .product-modal-dialog{
    transform:translateY(0) scale(1);
}


/* CERRAR */

.product-modal-close{
    position:absolute;

    top:1.2rem;
    right:1.2rem;

    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border:1px solid var(--line);
    border-radius:50%;

    background:#fff;

    color:var(--navy);

    cursor:pointer;

    z-index:3;
}

.product-modal-close:hover{
    background:var(--bg);
}


/* HEADER */

.product-modal-header{
    padding:2.6rem 3rem 2rem;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(40,145,197,.12),
            transparent 35%
        ),
        #F7FAFC;

    border-bottom:1px solid var(--line);
}

.product-modal-brand{
    display:block;

    margin-bottom:.5rem;

    color:var(--blue);

    font-size:.75rem;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.product-modal-header h2{
    margin:0 0 .35rem;

    font-size:2rem;
}

.product-modal-header p{
    margin:0;

    color:var(--muted);

    font-weight:600;
}


/* BODY */

.product-modal-body{
    padding:2.3rem 3rem;
}

.product-modal-description{
    margin-bottom:2rem;

    color:var(--text);

    font-size:1rem;
    line-height:1.75;
}

.product-modal-features h3{
    margin-bottom:1rem;

    font-size:1rem;
}

.product-modal-features ul{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:.7rem 1.5rem;

    margin:0;
    padding:0;

    list-style:none;
}

.product-modal-features li{
    position:relative;

    padding-left:1.4rem;

    color:var(--muted);

    font-size:.9rem;
}

.product-modal-features li::before{
    content:"✓";

    position:absolute;
    left:0;

    color:var(--blue);

    font-weight:900;
}


/* BENEFICIO */

.product-modal-benefit{
    display:flex;
    gap:1rem;

    margin-top:2rem;

    padding:1.3rem;

    border-radius:16px;

    background:var(--blue-soft);
}

.product-modal-benefit > i{
    margin-top:.2rem;

    color:var(--blue);
}

.product-modal-benefit strong{
    display:block;

    margin-bottom:.25rem;

    color:var(--navy);
}

.product-modal-benefit p{
    margin:0;

    color:var(--navy-2);

    font-size:.88rem;
}


/* FOOTER */

.product-modal-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:1rem;

    padding:1.4rem 3rem;

    border-top:1px solid var(--line);

    background:#fff;
}

.product-modal-secondary{
    padding:.8rem 1.1rem;

    border:0;

    background:none;

    color:var(--muted);

    font-weight:700;

    cursor:pointer;
}


/* MOBILE */

@media(max-width:680px){

    .product-modal{
        padding:.7rem;
    }

    .product-modal-dialog{
        max-height:95vh;

        border-radius:20px;
    }

    .product-modal-header,
    .product-modal-body{
        padding:2rem 1.5rem;
    }

    .product-modal-header{
        padding-right:4rem;
    }

    .product-modal-features ul{
        grid-template-columns:1fr;
    }

    .product-modal-footer{
        padding:1.2rem 1.5rem;

        flex-direction:column-reverse;
    }

    .product-modal-footer .btn{
        width:100%;
    }

}

/* ============================================================
   COLORES MODAL SEGÚN SEGMENTO
   IMPORTANTE: DEJAR AL FINAL DE STYLE.CSS
============================================================ */


/* =========================
   GOBIERNOS / MUNISOFT
========================= */

.product-modal.modal-gobiernos .product-modal-brand{
    color:#2891C5;
}

.product-modal.modal-gobiernos .product-modal-header{
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(40,145,197,.18),
            transparent 38%
        ),
        #F7FAFC;
}

.product-modal.modal-gobiernos .product-modal-features li::before{
    color:#2891C5;
}

.product-modal.modal-gobiernos .product-modal-benefit{
    background:#E5F3F9;
}

.product-modal.modal-gobiernos .product-modal-benefit > i{
    color:#2891C5;
}


/* =========================
   INSTITUCIONES - VERDE
========================= */

.product-modal.modal-instituciones .product-modal-brand{
    color:#43845A;
}

.product-modal.modal-instituciones .product-modal-header{
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(67,132,90,.20),
            transparent 38%
        ),
        #F5FAF6;
}

.product-modal.modal-instituciones .product-modal-features li::before{
    color:#43845A;
}

.product-modal.modal-instituciones .product-modal-benefit{
    background:#E4F4E8;
}

.product-modal.modal-instituciones .product-modal-benefit > i{
    color:#43845A;
}

.product-modal.modal-instituciones .product-modal-benefit strong{
    color:#315F41;
}


/* =========================
   EMPRESAS - NARANJA
========================= */

.product-modal.modal-empresas .product-modal-brand{
    color:#D98500;
}

.product-modal.modal-empresas .product-modal-header{
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(245,160,0,.22),
            transparent 38%
        ),
        #FFF9F0;
}

.product-modal.modal-empresas .product-modal-features li::before{
    color:#D98500;
}

.product-modal.modal-empresas .product-modal-benefit{
    background:#FFF0D8;
}

.product-modal.modal-empresas .product-modal-benefit > i{
    color:#D98500;
}

.product-modal.modal-empresas .product-modal-benefit strong{
    color:#9A6100;
}

/* BOTÓN SEGÚN SEGMENTO */

.product-modal.modal-gobiernos .product-modal-footer .btn-primary{
    background:#2891C5;
    border-color:#2891C5;
}

.product-modal.modal-instituciones .product-modal-footer .btn-primary{
    background:#43845A;
    border-color:#43845A;
}

.product-modal.modal-empresas .product-modal-footer .btn-primary{
    background:#F5A000;
    border-color:#F5A000;
    color:#fff;
}


/* HOVER */

.product-modal.modal-gobiernos .product-modal-footer .btn-primary:hover{
    background:#207EAD;
}

.product-modal.modal-instituciones .product-modal-footer .btn-primary:hover{
    background:#376E4A;
}

.product-modal.modal-empresas .product-modal-footer .btn-primary:hover{
    background:#D98C00;
}

/* ============================================================
   LEER MÁS - COLOR SEGÚN SEGMENTO
============================================================ */

/* GOBIERNOS / MUNISOFT */

#gobiernos .product-more{
    color:#2891C5;
}

#gobiernos .product-more:hover{
    color:#207EAD;
}


/* INSTITUCIONES */

#instituciones .product-more{
    color:#43845A;
}

#instituciones .product-more:hover{
    color:#356B48;
}


/* EMPRESAS */

#empresas .product-more{
    color:#D98500;
}

#empresas .product-more:hover{
    color:#B87300;
}


/* ANIMACIÓN DE LA FLECHA */

.product-more{
    transition:color .2s ease;
}

.product-more i{
    transition:transform .2s ease;
}

.product-more:hover i{
    transform:translateX(5px);
}

/* INSTITUCIONES */

#instituciones .product-card{
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

#instituciones .product-card:hover{
    transform:translateY(-5px);
    border-color:rgba(67,132,90,.35);
    box-shadow:0 16px 35px rgba(11,31,51,.09);
}


/* EMPRESAS */

#empresas .product-card{
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

#empresas .product-card:hover{
    transform:translateY(-5px);
    border-color:rgba(217,133,0,.35);
    box-shadow:0 16px 35px rgba(11,31,51,.09);
}

/* ============================================================
   RYC CONNECT
============================================================ */

#connect{
    background:#fff;
}

.connect-card{
    position:relative;
    overflow:hidden;

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:3.5rem;
    align-items:center;

    padding:3.5rem;

    border:1px solid #DCE8F0;
    border-radius:28px;

    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(40,145,197,.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #F8FBFD 0%,
            #EEF7FB 100%
        );

    box-shadow:0 18px 50px rgba(11,31,51,.07);
}

/* ============================================================
   CLIENTES
============================================================ */

.clients-section{
    background:#fff;
}

.clients-groups{
    display:grid;
    grid-template-columns:1.45fr .8fr .8fr;
    gap:1.25rem;
    align-items:stretch;
}

.clients-section .section-title{
    margin-bottom:1.5rem;
}

/* GRUPO */

.clients-group{
    position:relative;

    padding:1.7rem;

    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;

    box-shadow:0 8px 28px rgba(11,31,51,.04);
}


/* CABECERA */

.clients-group-title{
    display:flex;
    align-items:center;
    gap:.85rem;

    margin-bottom:1.35rem;
}

.clients-group-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:12px;
}

.clients-group-title small{
    display:block;

    margin-bottom:.15rem;

    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.clients-group-title h3{
    margin:0;

    font-size:1.05rem;
    color:var(--navy);
}


/* LISTADO */

.clients-list{
    display:grid;
    gap:.55rem;
}

.clients-government .clients-list{
    grid-template-columns:repeat(2,1fr);
}

.client-item{
    position:relative;

    padding:.75rem .8rem .75rem 1.6rem;

    background:#FAFCFD;
    border:1px solid #E8EEF2;
    border-radius:10px;

    color:var(--navy);

    font-size:.82rem;
    font-weight:650;
    line-height:1.3;
}

.client-item::before{
    content:"";

    position:absolute;
    left:.75rem;
    top:50%;

    width:5px;
    height:5px;

    border-radius:50%;

    transform:translateY(-50%);
}


/* ============================================================
   GOBIERNOS
============================================================ */

.clients-government{
    border-bottom:3px solid #2891C5;
}

.clients-government .clients-group-icon{
    color:#2891C5;
    background:#EAF5FA;
}

.clients-government .clients-group-title small{
    color:#2891C5;
}

.clients-government .client-item::before{
    background:#2891C5;
}


/* ============================================================
   INSTITUCIONES
============================================================ */

.clients-institution{
    border-bottom:3px solid #43845A;
}

.clients-institution .clients-group-icon{
    color:#43845A;
    background:#EAF5ED;
}

.clients-institution .clients-group-title small{
    color:#43845A;
}

.clients-institution .client-item::before{
    background:#43845A;
}


/* ============================================================
   EMPRESAS
============================================================ */

.clients-business{
    border-bottom:3px solid #D98500;
}

.clients-business .clients-group-icon{
    color:#D98500;
    background:#FFF4E2;
}

.clients-business .clients-group-title small{
    color:#D98500;
}

.clients-business .client-item::before{
    background:#D98500;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:1050px){

    .clients-groups{
        grid-template-columns:1fr 1fr;
    }

    .clients-government{
        grid-column:1 / -1;
    }

    .clients-government .clients-list{
        grid-template-columns:repeat(3,1fr);
    }

}


@media(max-width:680px){

    .clients-groups{
        grid-template-columns:1fr;
    }

    .clients-government{
        grid-column:auto;
    }

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

    .clients-group{
        padding:1.35rem;
    }

}

/* ============================================================
   CONTENIDO
============================================================ */

.connect-content{
    position:relative;
    z-index:2;
}

.connect-eyebrow{
    display:flex;
    align-items:center;
    gap:.5rem;

    margin-bottom:1rem;

    color:#2891C5;

    font-size:.75rem;
    font-weight:800;
    letter-spacing:.09em;
}

.connect-content h2{
    margin:0;

    font-size:clamp(2.3rem,4vw,3.5rem);
    line-height:1;

    color:var(--navy);
}

.connect-content h3{
    margin:.8rem 0 1.1rem;

    max-width:520px;

    font-size:1.45rem;
    line-height:1.3;
    color:var(--navy);
}

.connect-content h3 span{
    color:#2891C5;
}

.connect-content > p{
    max-width:570px;

    margin:0;

    color:var(--muted);

    font-size:1rem;
    line-height:1.7;
}


/* ============================================================
   CARACTERÍSTICAS
============================================================ */

.connect-features{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;

    margin:1.6rem 0 1.8rem;
}

.connect-features span{
    display:flex;
    align-items:center;
    gap:.45rem;

    padding:.65rem .85rem;

    border:1px solid rgba(40,145,197,.18);
    border-radius:999px;

    background:rgba(255,255,255,.75);

    color:var(--navy);

    font-size:.78rem;
    font-weight:700;
}

.connect-features i{
    color:#2891C5;
}


/* ============================================================
   BOTONES
============================================================ */

.connect-actions{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    gap:.8rem;
}

.connect-actions .btn{
    width:auto;
    white-space:nowrap;
}

.connect-actions .btn-primary{
    background:var(--orange);
    border-color:var(--orange);
    color:#fff;
}

.connect-actions .btn-primary:hover{
    background:var(--orange-dark);
    border-color:var(--orange-dark);
}


/* ============================================================
   CAPTURA DEL SISTEMA
============================================================ */

/* ============================================================
   CONNECT - VISUAL DEL PRODUCTO
============================================================ */

.connect-visual{
    position:relative;
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-end; 
}


/* CAPTURA */

.connect-screen{
    position:relative;

    width:100%;
    max-width:680px;

    overflow:hidden;

    border-radius:16px;
    border:1px solid rgba(11,31,51,.12);

    background:#0B1323;

    box-shadow:
        0 20px 45px rgba(11,31,51,.16);
}

.connect-screen img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;
}


/* ELIMINAMOS EL BRILLO ARTIFICIAL */

.connect-screen::after{
    display:none;
}


/* BADGE DEBAJO, NO SOBRE LA IMAGEN */

.connect-product-badge{
    position:relative;

    right:auto;
    bottom:auto;

    display:inline-flex;
    align-items:center;
    gap:.45rem;

    margin-top:.9rem;
    margin-right:.4rem;

    padding:.6rem .85rem;

    border:1px solid #DCE7EE;
    border-radius:10px;

    background:rgba(255,255,255,.9);

    box-shadow:none;

    color:var(--navy);

    font-size:.73rem;
    font-weight:800;
}

.connect-product-badge i{
    color:#2891C5;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:1050px){

    .connect-card{
		grid-template-columns:.82fr 1.18fr;
		gap:3rem;
        padding:2.8rem;
    }

    .connect-content{
        max-width:720px;
    }

    .connect-visual{
        max-width:800px;
    }

}


@media(max-width:680px){

    .connect-card{
        padding:1.5rem;
        border-radius:20px;
    }

    .connect-content h2{
        font-size:2.4rem;
    }

    .connect-content h3{
        font-size:1.25rem;
    }

    .connect-features{
        align-items:flex-start;
    }

	.connect-actions{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		align-items:center;
		gap:.8rem;
	}

	.connect-actions .btn{
		width:auto;
	}

    .connect-product-badge{
        position:relative;
        right:auto;
        bottom:auto;

        width:max-content;
        max-width:100%;

        margin:1rem 0 0 auto;
    }

}

/* Contacto definitivo */
#contacto{padding:100px 0;background:#fff}
#contacto .section-header{max-width:760px;margin:0 auto 3rem;text-align:center}
#contacto .section-subtitle{display:inline-block;margin-bottom:.7rem;color:var(--blue);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#contacto .section-header h2{font-family:Manrope,sans-serif;color:var(--navy);font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.04em;margin-bottom:1rem}
#contacto .section-header p{color:var(--muted);font-size:1.05rem}
#contacto .contact-grid{grid-template-columns:.85fr 1.15fr;gap:2rem;align-items:stretch}
.contact-info{display:grid;gap:1rem}
.contact-card{display:flex;align-items:center;gap:1rem;padding:1.35rem;border:1px solid var(--line);border-radius:18px;background:var(--bg);transition:.22s ease}
.contact-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 12px 28px rgba(11,31,51,.08)}
.contact-card i{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:14px;background:var(--blue-soft);color:var(--blue);font-size:1.25rem}
.contact-card:nth-child(3) i{background:#E9F8EF;color:#25D366}
.contact-card h3{font-size:1rem;margin-bottom:.15rem}
.contact-card p{color:var(--muted);font-size:.92rem}
#contacto .contact-form{height:100%}
#contacto .contact-form form{display:grid;gap:1rem}
#contacto .contact-form label{display:block}
#contacto .contact-form input,#contacto .contact-form select,#contacto .contact-form textarea{width:100%}
#contacto .contact-form .btn{margin-top:0}
.hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.form-message{min-height:1.4em;color:var(--muted);font-size:.9rem;text-align:center}
.whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:1200;width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:#25D366;color:#fff;font-size:2rem;box-shadow:0 12px 30px rgba(0,0,0,.22);transition:.2s ease}
.whatsapp-float:hover{transform:translateY(-3px) scale(1.03)}
@media (max-width:1050px){#contacto .contact-grid{grid-template-columns:1fr}}
@media (max-width:680px){#contacto{padding:76px 0}.whatsapp-float{right:16px;bottom:16px;width:54px;height:54px;font-size:1.75rem}}