*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Segoe UI, sans-serif;
    }

    html{
      scroll-behavior:smooth;
      overflow-x:hidden;
    }

    body{
      background:var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }

    section{
      width:100%;
      position:relative;
    }

    .container{
      width:100%;
      max-width:1250px;
      margin:auto;
      padding:0 30px;
    }

    
    /* ================= HERO ================= */

    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      overflow:hidden;
      background:
      radial-gradient(circle at top right, rgba(0,217,217,.12), transparent 30%),
      radial-gradient(circle at left, rgba(0,217,217,.06), transparent 20%),
      #020406;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:60px;
      align-items:center;
      padding-top:120px;
    }

    .hero-text small{
      color:var(--cyan);
      letter-spacing:3px;
      text-transform:uppercase;
      font-weight:600;
    }

    .hero-text h1{
      font-size:4.5rem;
      line-height:1;
      margin:25px 0;
    }

    .hero-text p{
      color:var(--text-soft);
      line-height:1.8;
      font-size:1.1rem;
      max-width:600px;
    }

    .hero-buttons{
      margin-top:40px;
      display:flex;
      gap:20px;
      flex-wrap:wrap;
    }

    .btn-primary,
    .btn-secondary{
      padding:16px 34px;
      border-radius:60px;
      text-decoration:none;
      font-weight:700;
      transition:.35s;
    }

    .btn-primary{
      background:var(--cyan);
      color:black;
      box-shadow:0 0 25px rgba(0,217,217,.35);
    }

    .btn-primary:hover{
      transform:translateY(-4px);
    }

    .btn-secondary{
      border:1px solid rgba(0,217,217,.35);
      color:var(--cyan);
    }

    .btn-secondary:hover{
      background:var(--cyan-soft);
    }

    .hero-card{
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid rgba(0,217,217,.12);
      border-radius:35px;
      padding:40px;
      backdrop-filter:blur(12px);
      position:relative;
      overflow:hidden;
      min-height:520px;
    }

    .hero-card::before{
      content:"";
      position:absolute;
      width:300px;
      height:300px;
      background:radial-gradient(circle, rgba(0,217,217,.18), transparent 70%);
      top:-100px;
      right:-80px;
    }

    .hero-card h3{
      font-size:1.7rem;
      margin-bottom:20px;
    }

    .hero-card p{
      color:var(--text-soft);
      line-height:1.8;
      margin-bottom:40px;
    }
    .hero-card-badge{
        width:max-content;

        padding:10px 18px;

        border-radius:50px;

        background:rgba(0,217,217,.08);

        border:1px solid rgba(0,217,217,.18);

        color:var(--cyan);

        font-size:.85rem;

        letter-spacing:2px;

        text-transform:uppercase;

        margin-bottom:30px;

        backdrop-filter:blur(10px);
    }
    .stats{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
    }

    .stat-box{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.05);
      border-radius:20px;
      padding:25px;
    }

    .stat-box h2{
      color:var(--cyan);
      font-size:2.2rem;
      margin-bottom:10px;
    }

    .stat-box span{
      color:var(--text-soft);
      font-size:.95rem;
    }

    /* ================= INTRO ================= */

    .intro{
      padding:140px 0 80px;
    }

    .section-title{
      text-align:center;
      margin-bottom:70px;
    }

    .section-title small{
      color:var(--cyan);
      letter-spacing:3px;
      text-transform:uppercase;
    }

    .section-title h2{
      font-size:3rem;
      margin-top:20px;
    }

    .section-title p{
      color:var(--text-soft);
      max-width:850px;
      margin:25px auto 0;
      line-height:1.8;
      font-size:1.1rem;
    }

    .intro-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:30px;
    }

    .intro-card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:28px;
      padding:40px 35px;
      transition:.35s;
    }

    .intro-card:hover{
      transform:translateY(-10px);
      border-color:rgba(0,217,217,.35);
      box-shadow:0 0 30px rgba(0,217,217,.08);
    }

    .intro-card h3{
      margin:30px 0 18px;
      font-size:1.5rem;
    }

    .intro-card p{
      color:var(--text-soft);
      line-height:1.8;
    }

    .icon-circle{
      width:70px;
      height:70px;
      border-radius:50%;
      background:rgba(0,217,217,.08);
      border:1px solid rgba(0,217,217,.2);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.6rem;
      color:var(--cyan);
    }

    /* ================= ENFOQUE ================= */

    .focus-section{
      padding:140px 0;
    }

    .focus-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:70px;
      align-items:center;
      margin-bottom:120px;
    }

    .focus-row.reverse{
      direction:rtl;
    }

    .focus-row.reverse .focus-content{
      direction:ltr;
    }

    .focus-image{
      position:relative;
    }

    .focus-image img{
      width:100%;
      border-radius:30px;
      object-fit:cover;
      min-height:450px;
      border:1px solid rgba(255,255,255,.05);
    }

    .focus-image::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:30px;
      background:linear-gradient(to top, rgba(0,0,0,.5), transparent);
    }

    .focus-content small{
      color:var(--cyan);
      letter-spacing:3px;
      text-transform:uppercase;
    }

    .focus-content h2{
      font-size:3rem;
      margin:25px 0;
      line-height:1.1;
    }

    .focus-content p{
      color:var(--text-soft);
      line-height:1.9;
      font-size:1.08rem;
      margin-bottom:25px;
    }

    .focus-list{
      display:flex;
      flex-direction:column;
      gap:18px;
      margin-top:40px;
    }

    .focus-item{
      display:flex;
      align-items:center;
      gap:15px;
      color:white;
      font-weight:500;
    }

    .focus-item div{
      width:35px;
      height:35px;
      border-radius:50%;
      background:rgba(0,217,217,.1);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--cyan);
    }

    /* ================= PROCESO ================= */

    .process{
      padding:140px 0;
      background:linear-gradient(180deg, #05080d 0%, #020406 100%);
    }

    .process-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:25px;
      margin-top:70px;
    }

    .process-card{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.05);
      border-radius:28px;
      padding:40px 30px;
      position:relative;
      overflow:hidden;
      transition:.35s;
    }

    .process-card:hover{
      transform:translateY(-8px);
      border-color:rgba(0,217,217,.3);
    }

    .process-number{
      position:absolute;
      top:20px;
      right:25px;
      font-size:4rem;
      font-weight:800;
      opacity:.08;
    }

    .process-card h3{
      margin:20px 0;
      font-size:1.5rem;
    }

    .process-card p{
      color:var(--text-soft);
      line-height:1.8;
    }

    /* ================= CTA ================= */

    .cta{
      padding:160px 0;
    }

    .cta-box{
      background:
      radial-gradient(circle at top right, rgba(0,217,217,.18), transparent 40%),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));

      border:1px solid rgba(0,217,217,.12);

      border-radius:40px;

      padding:90px 60px;

      text-align:center;

      overflow:hidden;

      position:relative;
    }

    .cta-box h2{
      font-size:3.5rem;
      margin-bottom:25px;
    }

    .cta-box p{
      color:var(--text-soft);
      max-width:850px;
      margin:auto;
      line-height:1.8;
      font-size:1.1rem;
    }

    .cta-buttons{
      margin-top:45px;
      display:flex;
      justify-content:center;
      gap:20px;
      flex-wrap:wrap;
    }

    /* ================= FOOTER ================= */

    footer{
      border-top:1px solid rgba(255,255,255,.05);
      padding:40px 0;
    }

    .footer-container{
      display:flex;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      gap:20px;
    }

    .footer-container p{
      color:var(--text-soft);
    }

    .footer-links{
      display:flex;
      gap:20px;
    }

    .footer-links a{
      color:white;
      text-decoration:none;
      transition:.3s;
    }

    .footer-links a:hover{
      color:var(--cyan);
    }

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

    @media(max-width:1100px){

      .hero-grid,
      .focus-row,
      .focus-row.reverse{
        grid-template-columns:1fr;
        direction:ltr;
      }

      .intro-grid,
      .process-grid{
        grid-template-columns:1fr 1fr;
      }

      .hero-text h1{
        font-size:3.5rem;
      }

    }

    @media(max-width:768px){

      nav ul{
        gap:18px;
        flex-wrap:wrap;
      }

      .hero-text h1,
      .focus-content h2,
      .cta-box h2,
      .section-title h2{
        font-size:2.5rem;
      }

      .intro-grid,
      .process-grid{
        grid-template-columns:1fr;
      }

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

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

      .cta-box{
        padding:70px 30px;
      }

    }

    @media(max-width:500px){

      .container{
        padding:0 20px;
      }

      .hero-text h1{
        font-size:2.1rem;
      }

      .section-title h2,
      .focus-content h2,
      .cta-box h2{
        font-size:2rem;
      }

      .hero-buttons,
      .cta-buttons{
        flex-direction:column;
      }

      .btn-primary,
      .btn-secondary{
        width:100%;
        text-align:center;
      }

    }