/* ===========================
       RESET + BASE
       =========================== */
    :root{
      --bg: #000;
      --card: #000;
      --accent: #F7E325;     /* verde principal (naturaleza) */
      --accent-2: #c00;   /* azul secundario */
      --muted: #eee;
      --muted-white: #444;
      --maxw: 1100px;
      --radius: 14px;
      --glass: rgba(255,255,255,0.8);
      --shadow: 0 8px 24px rgba(11,111,74,0.08);
      --banner-height: 120px;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      background-color:#000;
      background-image: url("data:image/svg+xml,%3csvg%20width='1118'%20height='883'%20viewBox='0%200%201118%20883'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M165.282%200.228516V882.308H0V0.228516H165.282ZM556.68%20261.352L286.948%20568.96L142.326%20715.304L82.0672%20595.933L196.847%20450.164L358.111%20261.352H556.68ZM385.085%20882.308L201.438%20595.359L315.643%20495.501L556.68%20882.308H385.085Z'%20fill='white'%20fill-opacity='0.1'/%3e%3cpath%20d='M952.718%200.229797V882.309H1118V0.229797H952.718ZM561.32%20261.353L831.052%20568.961L975.674%20715.305L1035.93%20595.935L921.153%20450.165L759.889%20261.353H561.32ZM732.915%20882.309L916.562%20595.361L802.357%20495.503L561.32%20882.309H732.915Z'%20fill='white'%20fill-opacity='0.1'/%3e%3c/svg%3e");
      background-position: bottom right;
      background-repeat: no-repeat;
      background-size:75%;
      color: #0f172a;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
      padding-bottom:60px;
    }

    section:not(#propuesta) h2 {
      color: var(--accent);
    }

    a{color:inherit;}
    a:not(.secondary){text-decoration:none}

    a.secondary:hover:after{
      content: " -> ";
    }
    img{max-width:100%; display:block}

    .container{
      max-width: var(--maxw);
      margin:0 auto;
    }

    /* ===========================
       TOP BANNER: Obligaciones de Publicidad
       =========================== */

    .hero-banner {
      position:relative;
      aspect-ratio: 2.4 / 1;
      background-image: url('/assets/20250918112748-5d7dcd8a035df7c91cd7cb1b8329a4a119afc451.jpg');
      background-size: cover;
      background-position: center;
    }
    .top-banner{
      /*background: linear-gradient(90deg,#ffffff 0%, rgba(10,132,255,0.03) 100%);*/
      background: linear-gradient(0deg,rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
      margin-top:-200px;
      position:relative;
      display:flex;
      flex-direction: column;
      align-items:center;
      gap:20px;
      padding:150px 20px 14px;
      /*border-bottom: 1px solid rgba(11,111,74,0.04);
      position:sticky;
      top:0;
      z-index:60;*/
    }
    .brand{
      display: inline-block;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(rgba(0,0,0,.7), rgba(0,0,0,0));
      background-position: center;
    }
    .brand > div {
      position: absolute;
      margin-top:-40px;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      text-align: center;
      width: 100%;
      z-index: 1;
    }
    .brand svg {
      width: 50%;
      max-width:450px;
      height: auto;
      color:#fff;
    }
    .brand h1{
      color:#fff;
      font-size:48px;
      margin:30px 0 0;
      letter-spacing:0.4px;
      line-height:1.1;
      position:relative;
      z-index:1;
    }
    .banner-logos{
      display:flex;
      gap:16px;
      align-items:center;
    }
    .banner-logos .logo{
      display: inline-block;
      align-items: center;
      /*background-color: var(--accent);*/
      padding: 6px;
      text-align: center;
      border-radius: 10px;
      box-shadow: var(--shadow);
    }
    .banner-logos .logo img {
      height: 40px;
      width: auto;
      object-fit: cover;
      image-rendering: optimizequality;
    }
    .banner-logos .logo + .logo + .logo img {
      width: 180px;
    }
    .banner-text{
      margin-left:auto;
      font-size:14px;
      color:var(--muted);
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .banner-project{
      font-weight:700;
      color:var(--accent);
      font-size:15px;
    }
    .site-menu {position:sticky;top:0;background-color:rgba(0,0,0,.9);z-index:1}

    /* ===========================
       NAVBAR PRINCIPAL
       =========================== */
    header.site-header{
      position:relative;
      padding-top:15px;
      padding-bottom:15px;
      z-index:50;
    }
    .nav{
      display:flex;
      align-items:center;
      gap:18px;
    }
    nav.primary{
      margin-left:auto;
      display:flex;
      gap:12px;
      align-items:center;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:10px 16px;
      border-radius:10px;
      background:var(--accent);
      color:black;
      font-weight:700;
      box-shadow: 0 8px 18px rgba(11,111,74,0.12);
      border: none;
      cursor:pointer;
    }
    .btn:hover,
    .cta-banner:hover .btn {
      color:var(--accent);
      background: #222;

    }
    .btn.secondary{
      background:transparent;
      color:var(--accent-2);
      font-weight:600;
      padding:8px 12px;
      border-radius:10px;
      border:1px solid rgba(10,132,255,0.09);
    }

    /* MOBILE NAV TOGGLE */
    .mobile-toggle{
      display:none;
      background:transparent;
      border: none;
      font-size:20px;
      cursor:pointer;
    }

    /* ===========================
       HERO / PROPOSAL
       =========================== */
    .hero{
      display:grid;
      grid-template-columns: 1fr 460px;
      gap:32px;
      align-items:center;
      margin-bottom:36px;
    }
    .hero-card{
      background-color:black;
      background-image:linear-gradient(-45deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,1) 50%);
      padding:28px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border:1px solid rgba(11,111,74,0.3);
    }
    .kicker{
      display:inline-block;
      background:rgba(10,10,10,0.1);
      font-weight:700;
      padding:6px 10px;
      border-radius:999px;
      font-size:13px;
      margin-bottom:10px;
    }
    .hero h2{
      margin:0 0 12px 0;
      font-size:28px;
      line-height:1.05;
    }
    .hero p.lead{
      color:var(--muted-white);
      margin:0 0 18px 0;
    }
    .highlights{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:18px;
    }
    .chip{
      background:rgba(10,10,10,0.1);
      padding:10px 12px;
      border-radius:10px;
      font-weight:600;
      border:1px solid rgba(11,111,74,0.06);
      font-size:14px;
    }
    .hero-ctas{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
    }

    /* HERO RIGHT — imagen / video */
    .hero-media{
      border-radius:12px;
      overflow:hidden;
      position:relative;
      min-height:320px;
      box-shadow: 0 12px 30px rgba(10,132,255,0.06);
      height: 100%;
    }
    .hero-media img{width:100%; height:100%; object-fit:cover}
    .media-caption{
      position:absolute;
      left:12px;
      bottom:12px;
      background:rgba(0,0,0,0.45);
      color:white;
      padding:8px 12px;
      border-radius:10px;
      font-size:13px;
      backdrop-filter: blur(4px);
    }

    /* ===========================
       PILLARS SECTION
       =========================== */
    .pillars{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:18px;
      margin-bottom:36px;
    }
    .pillar{
      background-color:var(--card);
      background-image:linear-gradient(-45deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,1) 50%);
      padding:18px;
      border-radius:12px;
      box-shadow: 0 8px 20px rgba(9,30,66,0.04);
      border:1px solid rgba(9,30,66,0.03);
    }
    .pillar h3{margin-top:0; color:var(--accent-2)}
    .pillar p{color:var(--muted-white); margin-bottom:0; font-size:16px}

    /* ===========================
       EXPERIENCIAS (oferta local)
       =========================== */
    .experiencias{
      margin:18px 0 36px 0;
    }
    .cards{
      display:grid;
      grid-template-columns: repeat(2,1fr);
      gap:16px;
    }
    .exp-card{
      background: #e9e9e9;
      border-radius:12px;
      border:1px solid rgba(11,111,74,0.03);
      overflow:hidden;
    }
    .exp-card:hover{
      background: #fff;
    }
    .exp-card img{height:300px; width:100%; object-fit:cover; border-radius:8px}
    .exp-card h4{margin:15px 0 6px 0;padding:0 15px;font-size:24px;}
    .exp-card p{color:var(--muted-white); font-size:16px;padding:0 15px}

    /* ===========================
       CTA BANNER (resaltar reserva)
       =========================== */
    .cta-banner{
      background: linear-gradient(90deg, var(--accent-2), var(--bg));
      color:white;
      padding:22px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      margin-bottom:28px;
    }
    .cta-banner .cta-text h3{margin:0;font-size:20px}
    .cta-banner .cta-text p{margin:6px 0 0 0; opacity:0.95}
    .cta-banner .cta-actions{display:flex; gap:12px; align-items:center;}

    /* ===========================
       FOOTER
       =========================== */
    .legal{
      display:inline-block;
      gap:18px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .legal .logos{
      display:flex;
      gap:12px;
      align-items:center;
    }
    .legal small{color:var(--muted)}

    .screen-flex {display:flex; gap:18px; align-items:flex-start;}

    .mob {display:none}

    /* ===========================
       RESPONSIVE
       =========================== */
    @media (max-width:1500px){
      .brand svg {max-width:350px;}
      .brand h1{font-size:36px}
    }
    @media (max-width:1140px){
      .container{
        width:calc(100% - 20px);
      }
    }
    @media (max-width:1000px){
      .hero-banner {aspect-ratio:1.4 / 1}
      .hero{grid-template-columns: 1fr;}
      .pillars{grid-template-columns: 1fr 1fr; }
      .cards{grid-template-columns: 1fr 1fr; }
      .banner-text{display:none}
    }

    @media only screen and (max-width: 821px) {
      .hero-banner {aspect-ratio:1.2 / 1}
      .brand h1{font-size:32px}
      .screen-flex {display: inline-block}
      .experiencias.container {margin: 0 auto}
      .cta-banner {display: inline-block; margin-top:20px}
      #contacto aside {margin-top:20px}
      .banner-logos {display: inline-block;text-align:center;width:100%}
    }
    @media (max-width:700px){
      .brand h1{font-size:28px}
      .mob {display:inherit}
      .site-menu {position:sticky;top:0;background-color:black;width:100%;padding-right:20px}
      nav.primary{text-align:center;width:100%;display:inline-block;padding-right:0}
      .mobile-toggle{
        display: inline-flex;
        filter: invert(1);
        right: 0;
        position: absolute;
        transform: scale(1.5);
      }
      .pillars{grid-template-columns: 1fr}
      .cards{grid-template-columns: 1fr}
      .hero-media{min-height:220px}
      .banner-logos .logo {width:calc(33.335% - 12px);}
      .banner-logos .logo img{height:25px;}
      .cta-banner .cta-text p{margin-bottom:15px}
    }
    @media (max-width:525px){
      .hero-banner {aspect-ratio:1 / 1.1}
      .brand h1{font-size:24px;margin-top:15px}
      .banner-logos .logo:not(.ministerio-cont) {width:calc(30% - 12px);}
      .banner-logos .logo.ministerio-cont {width:calc(40% - 12px);}
      .banner-logos .logo img{height:20px;}
    }
    @media (max-width:431px){
      .brand > div {margin-top:-20px}
      .banner-logos .logo img{height:18px;}
    }

    /* mobile slide nav */
    .mobile-nav{
      display:none;
      position:fixed;
      inset:0;
      z-index:90;
      background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.9));
      padding:32px 20px;
    }
    .mobile-nav.open{display:block}
    .mobile-nav .inner{
      background:white;
      border-radius:12px;
      padding:18px;
      max-width:360px;
      margin:40px auto;
    }