:root{
      --bg:#0b1220;
      --card:#0f1a33cc;
      --text:#eaf0ff;
      --muted:#b8c3e6;
      --stroke:#243458;
      --accent:#ffd166;
      --accent2:#06d6a0;
      --shadow: 0 20px 60px rgba(0,0,0,.35);
      --radius: 18px;
      --max: 1100px;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      color:var(--text);
      background: radial-gradient(1200px 700px at 15% 10%, #1b2a55 0%, var(--bg) 55%, #070b14 100%);
      line-height:1.5;
    }
    a{ color:inherit; text-decoration:none; }
    .container{
      width: min(100% - 32px, var(--max));
      margin-inline:auto;
    }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:20;
      backdrop-filter: blur(10px);
      background: linear-gradient(to bottom, rgba(11,18,32,.85), rgba(11,18,32,.35));
      border-bottom:1px solid rgba(36,52,88,.35);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap: wrap;
      padding:14px 0;
      gap:14px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 220px;
    }
    .logo{
      width:38px; height:38px;
      border-radius:12px;
      background: radial-gradient(circle at 30% 30%, var(--accent), #ff7b7b 45%, #4d7cff 100%);
      box-shadow: 0 10px 30px rgba(255,209,102,.18);
      border:1px solid rgba(255,255,255,.15);
    }
    .brand h1{
      font-size:16px;
      line-height:1.1;
      margin:0;
      letter-spacing:.2px;
    }
    .brand span{
      display:block;
      font-size:12px;
      color:var(--muted);
      margin-top:2px;
    }
    .navlinks{
      display:none;
      gap:18px;
      color:var(--muted);
      font-size:14px;
    }
    .navlinks a:hover{ color:var(--text); }

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

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:11px 14px;
      border-radius:14px;
      border:1px solid rgba(36,52,88,.7);
      background: rgba(15,26,51,.55);
      color:var(--text);
      font-weight:600;
      font-size:14px;
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      white-space:nowrap;
    }
    .btn:hover{
      transform: translateY(-1px);
      background: rgba(15,26,51,.75);
      border-color: rgba(255,255,255,.25);
    }
    .btn.primary{
      border-color: rgba(6,214,160,.55);
      background: linear-gradient(135deg, rgba(6,214,160,.25), rgba(255,209,102,.12));
    }
    .btn.primary:hover{
      border-color: rgba(6,214,160,.85);
    }

    /* Hero */
    .hero{
      position:relative;
      border-bottom: 1px solid rgba(36,52,88,.35);
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      /* FOTO DE PORTADA: cambiala por la tuya */
      background-image:
        linear-gradient(to bottom, rgba(11,18,32,.35), rgba(11,18,32,.92)),
        url("img/portada.jpeg");
      background-size:cover;
      background-position:center;
      filter:saturate(1.1) contrast(1.05);
      transform: scale(1.03);
    }
    .heroContent{
      position:relative;
      padding: 52px 0 34px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 12px;
      border-radius:999px;
      background: rgba(15,26,51,.55);
      border:1px solid rgba(255,255,255,.16);
      color:var(--muted);
      font-size:13px;
    }
    .badge .dot{
      width:8px;height:8px;border-radius:50%;
      background: var(--accent2);
      box-shadow: 0 0 0 6px rgba(6,214,160,.12);
    }
    .heroGrid{
      display:grid;
      gap:18px;
      grid-template-columns: 1fr;
      margin-top:14px;
      align-items:end;
    }
    .hero h2{
      margin: 10px 0 0;
      font-size: 34px;
      line-height:1.08;
      letter-spacing:-.5px;
    }
    .hero p{
      margin: 12px 0 0;
      color: rgba(234,240,255,.86);
      font-size: 16px;
      max-width: 60ch;
    }
    .heroActions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }

    .card{
      background: rgba(15,26,51,.6);
      border:1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .infoCard{
      padding:16px;
      display:grid;
      gap:12px;
    }
    .infoRow{
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .icon{
      width:38px;height:38px;
      border-radius:14px;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      display:grid;
      place-items:center;
      flex: 0 0 auto;
    }
    .infoRow h3{
      margin:0;
      font-size:14px;
      letter-spacing:.2px;
    }
    .infoRow p{
      margin:3px 0 0;
      color: var(--muted);
      font-size:13px;
    }

    /* Sections */
    section{
      padding: 34px 0;
    }
    .sectionTitle{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }
    .sectionTitle h3{
      margin:0;
      font-size:20px;
      letter-spacing:-.2px;
    }
    .sectionTitle span{
      color:var(--muted);
      font-size:13px;
    }

    .features{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }
    .feature{
      padding:16px;
    }
    .feature b{ display:block; margin-bottom:6px; }
    .feature p{ margin:0; color:var(--muted); font-size:14px; }

    .ctaBox{
      padding:18px;
      display:grid;
      gap:14px;
      align-items:center;
    }
    .ctaBox h4{
      margin:0;
      font-size:18px;
    }
    .ctaBox p{
      margin:6px 0 0;
      color:var(--muted);
    }
    .ctaBtns{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    footer{
      padding: 22px 0 40px;
      color: rgba(184,195,230,.9);
      border-top:1px solid rgba(36,52,88,.35);
    }
    footer small{ opacity:.9; }

    /* Responsive */
    @media (min-width: 900px){
      .navlinks{ display:flex; }
      .heroContent{ padding: 64px 0 44px; }
      .heroGrid{
        grid-template-columns: 1.2fr .8fr;
        gap:22px;
      }
      .hero h2{ font-size: 46px; }
      .features{
        grid-template-columns: repeat(3, 1fr);
      }
      .ctaBox{
        grid-template-columns: 1.3fr .7fr;
      }
    }

    #galeria { padding: 34px 0; }
    #galeria .sectionTitle{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }
    #galeria .sectionTitle h3{
      margin:0;
      font-size:20px;
      letter-spacing:-.2px;
    }
    #galeria .sectionTitle span{
      color: var(--muted, #b8c3e6);
      font-size:13px;
    }

    #galeria .carousel{
      position:relative;
      border-radius: var(--radius, 18px);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(15,26,51,.35);
      overflow:hidden;
      box-shadow: var(--shadow, 0 20px 60px rgba(0,0,0,.35));
    }

    #galeria .track{
      display:grid;
      grid-auto-flow: column;
      grid-auto-columns: 86%;
      gap: 12px;
      padding: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
    }
    #galeria .track::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

    #galeria .slide{
      scroll-snap-align: center;
      border-radius: calc(var(--radius, 18px) - 6px);
      overflow:hidden;
      position:relative;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      min-height: 240px;
      isolation: isolate;
    }
    #galeria .slide img{
      width:100%;
      height: clamp(240px, 45vw, 420px);
      object-fit: cover;
      display:block;
      filter: saturate(1.05) contrast(1.05);
      transform: scale(1.02);
    }
    #galeria .slide::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
      z-index: 1;
      pointer-events:none;
    }

    #galeria .caption{
      position:absolute;
      left: 14px;
      right: 14px;
      bottom: 12px;
      z-index: 2;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
    }
    #galeria .caption b{
      display:block;
      font-size:14px;
      letter-spacing:.2px;
    }
    #galeria .caption small{
      display:block;
      color: rgba(234,240,255,.82);
      opacity:.9;
      font-size:12px;
      margin-top:2px;
    }

    #galeria .chip{
      flex: 0 0 auto;
      font-size:12px;
      color: rgba(234,240,255,.9);
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(15,26,51,.55);
      backdrop-filter: blur(8px);
      white-space: nowrap;
    }

    /* Fades laterales para “queda lindo” */
    #galeria .fadeLeft, #galeria .fadeRight{
      position:absolute;
      top:0; bottom:0;
      width: 56px;
      pointer-events:none;
      z-index: 3;
    }
    #galeria .fadeLeft{
      left:0;
      background: linear-gradient(to right, rgba(11,18,32,.95), rgba(11,18,32,0));
    }
    #galeria .fadeRight{
      right:0;
      background: linear-gradient(to left, rgba(11,18,32,.95), rgba(11,18,32,0));
    }

    /* Dots */
    #galeria .dots{
      display:flex;
      justify-content:center;
      gap:8px;
      padding: 10px 0 2px;
    }
    #galeria .dot{
      width: 8px;
      height: 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.10);
      opacity: .7;
      transition: transform .15s ease, opacity .15s ease, background .15s ease;
    }
    #galeria .dot.active{
      opacity: 1;
      transform: scale(1.15);
      background: rgba(255,255,255,.22);
    }

    @media (min-width: 900px){
      #galeria .track{ grid-auto-columns: 46%; }
    }
    @media (min-width: 1200px){
      #galeria .track{ grid-auto-columns: 38%; }
    }