:root{
          --blue:#0b1fb8;
          --red:#c01414;
          --ink:#0f172a;
          --muted:#64748b;
          --bg:#ffffff;
          --soft:#f7f9ff;
          --line:#e6eaf7;
          --radius:22px;
          --max: 1120px;
          --shadow: 0 18px 45px rgba(2,6,23,.10);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
          margin:0;
          font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
          color:var(--ink);
          background:
            linear-gradient(180deg, rgba(11,31,184,.04), transparent 40%),
            var(--bg);
        }
        a{color:inherit; text-decoration:none}
        .container{max-width:var(--max); margin:0 auto; padding:0 18px}

        /* Topbar */
        .topbar{
          position:sticky; top:0; z-index:30;
          background: rgba(255,255,255,.85);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid var(--line);
        }
        .nav{
          height:72px;
          display:flex; align-items:center; justify-content:space-between;
          gap:14px;
        }
        .brand{display:flex; align-items:center; gap:12px}
        .brand img{height:40px; width:auto}
        .menu{display:flex; gap:14px; align-items:center}
        .menu a{
          font-size:14px; color:var(--muted);
          padding:10px 12px; border-radius: 999px;
          transition:.2s ease;
        }
        .menu a:hover{background: rgba(11,31,184,.07); color:var(--ink)}
        .btn{
          padding:10px 14px;
          border-radius:999px;
          font-weight:700;
          font-size:14px;
          border:1px solid var(--line);
          background: white;
          cursor:pointer;
          transition:.2s ease;
        }
        .btn:hover{transform: translateY(-1px)}
        .btn.primary{
          background: linear-gradient(135deg, var(--blue), #3b63ff);
          color:white;
          border-color: transparent;
          box-shadow: 0 18px 30px rgba(11,31,184,.20);
        }
        .burger{display:none}
        @media (max-width: 900px){
          .menu{display:none}
          .burger{display:inline-flex}
        }
        #mobileMenu{display:none; padding: 0 0 14px}
        #mobileMenu a{display:inline-flex; margin:6px 6px 0 0}

        /* Hero */
        .hero{ padding: 52px 0 16px; }
        .hero-shell{
          display:grid;
          grid-template-columns: 1.15fr .85fr;
          gap: 18px;
          align-items: stretch;
        }
        @media (max-width: 980px){ .hero-shell{grid-template-columns:1fr} }

        .hero-left{
          padding: 26px;
          border-radius: var(--radius);
          border: 1px solid var(--line);
          background: linear-gradient(180deg, var(--soft), white);
          box-shadow: var(--shadow);
          position:relative;
          overflow:hidden;
        }
        .hero-left:before{
          content:"";
          position:absolute; right:-140px; top:-140px;
          width: 340px; height: 340px; border-radius: 50%;
          background: radial-gradient(circle at 30% 30%, rgba(192,20,20,.18), transparent 60%);
        }
        .hero-left:after{
          content:"";
          position:absolute; left:-140px; bottom:-140px;
          width: 380px; height: 380px; border-radius: 50%;
          background: radial-gradient(circle at 30% 30%, rgba(11,31,184,.16), transparent 60%);
        }
        .tag{
          display:inline-flex; align-items:center; gap:10px;
          padding:8px 12px;
          border-radius: 999px;
          border: 1px solid var(--line);
          background:white;
          color: var(--muted);
          font-size:12px;
          position:relative;
          z-index:1;
        }
        .tag i{
          width:10px; height:10px; border-radius: 50%;
          background: linear-gradient(135deg, var(--red), var(--blue));
        }
        h1{
          margin: 14px 0 10px;
          font-size: clamp(30px, 3.2vw, 48px);
          line-height: 1.05;
          letter-spacing: -.6px;
          position:relative;
          z-index:1;
        }
        .lead{
          margin:0 0 16px;
          color: var(--muted);
          line-height:1.7;
          max-width: 70ch;
          position:relative;
          z-index:1;
        }
        .hero-actions{display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1;}

        .hero-right{
          border-radius: var(--radius);
          border: 1px solid var(--line);
          background: white;
          box-shadow: 0 12px 30px rgba(2,6,23,.08);
          padding: 18px;
        }
        .hero-right h3{margin:0 0 10px; font-size:14px; color:var(--muted)}
        .feature{
          display:flex; gap:12px;
          padding: 12px;
          border-radius: 16px;
          border: 1px solid var(--line);
          background: var(--soft);
          margin-bottom: 10px;
        }
        .icon{
          width:42px; height:42px;
          border-radius: 14px;
          display:grid; place-items:center;
          background: linear-gradient(135deg, rgba(11,31,184,.12), rgba(192,20,20,.08));
          border: 1px solid rgba(11,31,184,.18);
          font-weight:900;
          color: var(--blue);
        }
        .feature b{display:block; margin-bottom:3px}
        .feature span{display:block; color:var(--muted); font-size:13px; line-height:1.45}

        section{padding: 34px 0}
        .section-head{
          display:flex; justify-content:space-between; align-items:flex-end;
          gap:14px; flex-wrap:wrap;
          margin-bottom: 14px;
        }
        .section-head h2{margin:0; font-size: clamp(22px, 2.2vw, 32px)}
        .section-head p{margin:0; color:var(--muted); line-height:1.6; max-width:78ch}

        .grid{
          display:grid;
          grid-template-columns: repeat(12, 1fr);
          gap: 14px;
        }
        .card{
          border-radius: var(--radius);
          border: 1px solid var(--line);
          background: white;
          padding: 18px;
          box-shadow: 0 12px 28px rgba(2,6,23,.06);
        }

        /* Pills */
        .pill{
          display:inline-flex; gap:8px; align-items:center;
          padding:8px 10px; border-radius:999px;
          border:1px solid var(--line); background: var(--soft);
          font-size:13px; color:var(--muted);
        }

        /* Contact */
        input, textarea{
          width:100%;
          border-radius: 14px;
          border: 1px solid var(--line);
          background: white;
          padding: 12px;
          font: inherit;
          outline:none;
        }
        input:focus, textarea:focus{border-color: rgba(11,31,184,.35); box-shadow: 0 0 0 4px rgba(11,31,184,.10)}
        textarea{min-height: 120px; resize: vertical}
        .row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
        @media (max-width: 760px){ .row{grid-template-columns:1fr} }

        footer{
          padding: 22px 0 44px;
          border-top: 1px solid var(--line);
          color: var(--muted);
          background: linear-gradient(180deg, white, var(--soft));
        }
        .foot{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center}
        .small{font-size:12px}

        /* ===== Photo carousel base (Services + Propósito) ===== */
        .svc-carousel{
          border-radius: var(--radius);
          border: 1px solid var(--line);
          background: linear-gradient(180deg, var(--soft), #fff);
          box-shadow: var(--shadow);
          overflow:hidden;
        }
        .svc-top{
          display:flex; align-items:center; justify-content:space-between;
          gap:12px;
          padding: 14px 18px;
          border-bottom:1px solid var(--line);
        }
        .svc-top b{font-size:14px; color:var(--muted)}
        .svc-dots{display:flex; gap:8px; align-items:center}
        .svc-dot{
          width:8px; height:8px; border-radius:50%;
          background: rgba(100,116,139,.35);
          border:1px solid rgba(100,116,139,.18);
          cursor:pointer;
        }
        .svc-dot.active{
          background: linear-gradient(135deg, var(--red), var(--blue));
          border-color: transparent;
        }
        .svc-track{
          display:flex;
          transition: transform .55s ease; /* un poquito más suave */
          will-change: transform;
        }
        .svc-slide{
          min-width: 100%;
          padding: 16px;
        }
        .svc-card{
          display:grid;
          grid-template-columns: 1.05fr .95fr;
          gap: 14px;
          align-items: stretch;
          min-height: 360px; /* altura fija del bloque completo */
        }
        @media (max-width: 900px){
          .svc-card{
            grid-template-columns:1fr;
            min-height: auto;
          }
        }
        .svc-photo{
          border-radius: 18px;
          border: 1px solid var(--line);
          overflow:hidden;
          background: #fff;
          height: 360px; /* altura fija */
          min-height: 360px;
          max-height: 360px;
          display:flex;
        }
        .svc-photo img{
          width:100%;
          height:100%;
          object-fit: cover;   /* recorta sin deformar */
          object-position: center;
          display:block;
        }
        .svc-info{
          border-radius: 18px;
          border: 1px solid var(--line);
          background: #fff;
          padding: 14px;
          display:flex;
          flex-direction: column;
          justify-content: center;
          min-height: 360px; /* mismo alto que la foto */
        }
        @media (max-width: 900px){
          .svc-photo{
            height: 240px;
            min-height: 240px;
            max-height: 240px;
          }

          .svc-info{
            min-height: auto;
          }
        }
        .svc-info h3{margin:0 0 6px; font-size:18px}
        .svc-info p{margin:0; color:var(--muted); line-height:1.7}
        .svc-hint{
          padding: 0 18px 14px;
          color: var(--muted);
          font-size: 12px;
        }

        /* ===== TEAM (una sola foto + puntos tipo diapositiva) ===== */
        .team-wrap{
          border-radius: var(--radius);
          border: 1px solid var(--line);
          background: linear-gradient(180deg, var(--soft), #fff);
          box-shadow: var(--shadow);
          overflow:hidden;
        }
        .team-grid{
          display:grid;
          grid-template-columns: 1.05fr .95fr;
          gap: 0;
        }
        @media (max-width: 980px){
          .team-grid{grid-template-columns:1fr}
        }
        .team-photo{
          position:relative;
          min-height: 340px;
          background:#fff;
        }
        .team-photo img{
          width:100%;
          height:100%;
          object-fit: cover;
          display:block;
        }
        .team-caption{
          position:absolute;
          left:0; right:0; bottom:0;
          padding: 16px 18px;
          background: linear-gradient(90deg, rgba(11,31,184,.92), rgba(11,31,184,.70));
          color:#fff;
        }
        .team-caption b{display:block; font-size:18px; letter-spacing:.2px}
        .team-caption span{display:block; opacity:.9}
        .team-content{
          padding: 18px;
          display:flex;
          flex-direction: column;
          justify-content: center;
          gap: 14px;
          background: #fff;
          border-left: 1px solid var(--line);
        }
        @media (max-width: 980px){
          .team-content{border-left:0; border-top:1px solid var(--line)}
        }
        .team-kicker{
          display:inline-flex;
          align-items:center;
          gap:10px;
          padding:8px 12px;
          border-radius: 999px;
          border: 1px solid var(--line);
          background:white;
          color: var(--muted);
          font-size:12px;
          width: fit-content;
        }
        .team-kicker i{
          width:10px; height:10px; border-radius: 50%;
          background: linear-gradient(135deg, var(--red), var(--blue));
        }
        .team-content h3{
          margin:0;
          font-size: 22px;
          letter-spacing: -.3px;
        }
        .team-content p{
          margin:0;
          color: var(--muted);
          line-height: 1.7;
          max-width: 70ch;
        }
        .team-list{display:grid; gap:12px; margin-top: 4px}
        .team-item{
          display:flex; gap:12px;
          padding: 12px;
          border-radius: 16px;
          border: 1px solid var(--line);
          background: var(--soft);
        }
        .team-check{
          width:44px; height:44px;
          border-radius: 14px;
          display:grid; place-items:center;
          background: linear-gradient(135deg, rgba(11,31,184,.14), rgba(192,20,20,.10));
          border: 1px solid rgba(11,31,184,.18);
          color: var(--blue);
          font-weight:900;
          flex: 0 0 auto;
        }
        .team-item b{display:block; margin-bottom:3px}
        .team-item span{display:block; color:var(--muted); font-size:13px; line-height:1.45}