Álbum de páginas – nodo25

/* ===== VARIABLES Y RESET ===== */
    :root {
      --accent: #ffea00;
      --accent-dark: #ff0000;
      --accent-soft: #ffea24;
      --bg: #f7f4f1;
      --surface: #ffffff;
      --surface-2: #f1ece7;
      --text: #201813;
      --muted: #63564d;
      --border: rgba(32, 24, 19, 0.08);
      --shadow-xs: 0 4px 8px rgba(0, 0, 0, 0.02);
      --shadow-sm: 0 8px 24px rgba(32, 24, 19, 0.06);
      --shadow-md: 0 20px 40px rgba(32, 24, 19, 0.10);
      --shadow-lg: 0 30px 60px rgba(32, 24, 19, 0.15);
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 32px;
      --radius-xl: 40px;
      --container: 1280px;
      --nav-h: 90px;
      --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    * { box-sizing: border-box; }
    *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }

    body {
      margin: 0;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--text);
      background: 
        radial-gradient(ellipse at 0% 0%, rgba(139, 94, 60, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(94, 62, 37, 0.06) 0%, transparent 50%),
        linear-gradient(145deg, #faf7f4 0%, var(--bg) 100%);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
      position: relative;
    }

    section, .section, .container-custom, .navbar-wrap, .footer, .hero, .hero-grid, .grid-2, .services-grid, .features-grid, .motors-grid, .contact-wrap, .footer-grid {
      max-width: 100%;
    }

    img { max-width: 100%; display: block; height: auto; }
    a { text-decoration: none; transition: var(--transition); }
    .container-custom {
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: 24px;
    }

    /* ===== COMPONENTES VISUALES ===== */
    .section {
      padding: 110px 0;
      position: relative;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px 6px 12px;
      border-radius: 100px;
      background: var(--accent-soft);
      color: var(--accent-dark);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 24px;
      border: 1px solid rgba(139, 94, 60, 0.15);
      backdrop-filter: blur(4px);
      box-shadow: var(--shadow-xs);
    }

    .section-title {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin: 0 0 18px;
      color: var(--text);
    }

    .section-subtitle {
      color: var(--muted);
      max-width: 720px;
      margin: 0 auto;
      font-size: 1.15rem;
      line-height: 1.7;
      font-weight: 400;
    }

    /* ===== NAVBAR ===== */
    .navbar-wrap {
      position: sticky;
      top: 0;
      z-index: 1030;
      background: rgba(247, 244, 241, 0.75);
      backdrop-filter: blur(16px) saturate(180%);
      border-bottom: 1px solid rgba(32, 24, 19, 0.06);
    }

    .navbar {
      min-height: var(--nav-h);
      padding: 0.5rem 0;
      flex-wrap: wrap;
      gap: 12px;
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 700;
      color: var(--text) !important;
      transition: var(--transition);
      min-width: 0;
      max-width: calc(100% - 76px);
      flex: 1 1 auto;
    }

    .navbar-brand:hover { opacity: 0.85; }

    .brand-logo, .footer-logo {
      width: auto;
      height: 44px;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
    }

    .brand-text {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      min-width: 0;
    }

    .nav-link {
      color: var(--text) !important;
      font-weight: 600;
      font-size: 0.95rem;
      padding: 0.6rem 1rem !important;
      border-radius: var(--radius-sm);
      transition: var(--transition);
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0.4rem;
      left: 1rem;
      right: 1rem;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transition: transform 0.2s ease;
    }

    .nav-link:hover::after,
    .nav-link:focus::after {
      transform: scaleX(0.6);
    }

    .navbar-toggler {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.6rem 0.75rem;
      background: rgba(255,255,255,0.5);
      margin-left: auto;
      flex: 0 0 auto;
    }

    .navbar-toggler-icon {
      width: 1.25rem;
      height: 1.25rem;
    }

    .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.2); }

    /* ===== BOTONES ===== */
    .btn-main, .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 30px;
      border-radius: 16px;
      font-weight: 700;
      font-size: 0.95rem;
      transition: var(--transition);
      border: none;
      white-space: nowrap;
    }

    .btn-main {
      background: var(--accent);
      color: #000;
      box-shadow: 0 12px 28px -8px rgba(94, 62, 37, 0.4);
      position: relative;
      overflow: hidden;
    }

    .btn-main::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s ease;
    }

    .btn-main:hover {
      background: var(--accent-dark);
      color: #000;
      transform: translateY(-3px);
      box-shadow: 0 20px 32px -8px rgba(94, 62, 37, 0.5);
    }

    .btn-main:hover::before { left: 100%; }

    .btn-main:focus,
    .btn-main:active,
    .btn-main:visited {
      color: #000;
    }

    .btn-ghost {
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(8px);
      color: var(--text);
      border: 1px solid rgba(32, 24, 19, 0.1);
      box-shadow: var(--shadow-sm);
    }

    .btn-ghost:hover {
      background: white;
      transform: translateY(-3px);
      border-color: rgba(139, 94, 60, 0.3);
      box-shadow: var(--shadow-md);
    }

    /* ===== HERO SECTION ===== */
    .hero {
      position: relative;
      padding: 60px 0 100px;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(139,94,60,0.06) 0%, transparent 70%);
      top: -200px;
      right: -200px;
      border-radius: 50%;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 50px;
      align-items: center;
    }

    .hero h1 {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(2.8rem, 6vw, 5.2rem);
      font-weight: 700;
      line-height: 1.0;
      letter-spacing: -0.04em;
      margin: 0 0 20px;
    }

    .hero-lead {
      font-size: 1.1rem;
      line-height: 1.8;
      color: var(--muted);
      max-width: 580px;
      margin-bottom: 35px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 40px;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .hero-badge {
      padding: 8px 16px;
      border-radius: 100px;
      background: rgba(255,255,255,0.6);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(139, 
/* ...cortado... */

.gal-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
  }
  
  .gal-buttons .btn-main{
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  
  .btn-icon{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  /* más separación en phone */
  @media (max-width:576px){
    .gal-buttons{
      gap:20px;
    }
  }

.galeria-mosaico-section{
        padding:80px 0;
        font-family:'Inter',sans-serif;
      }
  
      .galeria-mosaico-section .container-custom{
        max-width:1200px;
        margin:auto;
        padding:0 20px;
      }
  
      .galeria-mosaico-section .text-center{
        text-align:center;
      }
  
      .galeria-mosaico-section .section-title{
        font-size:38px;
        font-weight:800;
        margin-bottom:10px;
        line-height:1.1;
      }
  
      .galeria-mosaico-section .section-subtitle{
        color:#666;
        margin-bottom:40px;
      }
  
      /* ===== GALERÍA ===== */
      .galeria-mosaico-section .mosaic-gallery{
        display:grid;
        grid-template-columns:repeat(12,1fr);
        gap:14px;
      }
  
      .galeria-mosaico-section .mosaic-item{
        display:block;
        border-radius:20px;
        overflow:hidden;
        min-height:220px;
        cursor:pointer;
        background:#ddd;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
      }
  
      .galeria-mosaico-section .mosaic-item img{
        width:100%;
        height:100%;
        display:block;
        object-fit:cover;
        transition:.4s ease;
      }
  
      .galeria-mosaico-section .mosaic-item:hover img{
        transform:scale(1.05);
      }
  
      /* tamaños */
      .galeria-mosaico-section .item-lg{
        grid-column:span 4;
        grid-row:span 2;
        min-height:460px;
      }
  
      .galeria-mosaico-section .item-wide{
        grid-column:span 4;
        grid-row:span 2;
        min-height:460px;
      }
  
      .galeria-mosaico-section .item-sm{
        grid-column:span 2;
      }
  
      .galeria-mosaico-section .item-md{
        grid-column:span 2;
        grid-row:span 2;
        min-height:460px;
      }
  
      /* responsive */
      @media (max-width:991px){
        .galeria-mosaico-section .mosaic-gallery{
          grid-template-columns:repeat(6,1fr);
        }
  
        .galeria-mosaico-section .item-lg,
        .galeria-mosaico-section .item-wide{
          grid-column:span 3;
        }
  
        .galeria-mosaico-section .item-sm,
        .galeria-mosaico-section .item-md{
          grid-column:span 3;
        }
      }
  
      @media (max-width:600px){
        .galeria-mosaico-section{
          padding:64px 0;
        }
  
        .galeria-mosaico-section .section-title{
          font-size:30px;
        }
  
        .galeria-mosaico-section .section-subtitle{
          margin-bottom:28px;
        }
  
        .galeria-mosaico-section .mosaic-gallery{
          grid-template-columns:1fr;
        }
  
        .galeria-mosaico-section .mosaic-item,
        .galeria-mosaico-section .item-lg,
        .galeria-mosaico-section .item-wide,
        .galeria-mosaico-section .item-sm,
        .galeria-mosaico-section .item-md{
          grid-column:auto;
          grid-row:auto;
          min-height:260px;
        }
      }
  
      /* ===== LIGHTBOX ===== */
      #galLightbox .modal-content{
        background:#000;
        border:0;
      }
  
      #galLightbox img{
        width:100%;
        max-height:85vh;
        object-fit:contain;
        background:#000;
        display:block;
      }

.motors-grid-clean{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:24px;
    }
  
    .motor-card-clean{
      background:#fff;
      border:1px solid rgba(0,0,0,.08);
      border-radius:22px;
      padding:28px 24px;
      box-shadow:0 14px 34px rgba(0,0,0,.06);
      height:100%;
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
    }
  
    .motor-card-clean:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 40px rgba(0,0,0,.10);
      border-color:rgba(0,0,0,.14);
    }
  
    .motor-icon{
      width:58px;
      height:58px;
      border-radius:16px;
      background:#f4dd17;
      color:#111;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:18px;
      font-size:26px;
    }
  
    .motor-card-clean .motor-body{
      width:100%;
    }
  
    .motor-card-clean h3{
      margin:0 0 12px;
      font-size:1.18rem;
      line-height:1.25;
      color:var(--text);
    }
  
    .motor-card-clean p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.98rem;
    }
  
    .price-pill-clean{
      display:inline-block;
      margin-top:16px;
      margin-bottom:12px;
      padding:7px 16px;
      border-radius:999px;
      background:#f4dd17;
      color:#000;
      font-weight:800;
      font-size:.95rem;
      letter-spacing:.2px;
    }
  
    .motor-note{
      margin-top:2px !important;
      font-size:.92rem !important;
      color:var(--text-soft);
    }
  
    @media (max-width: 991.98px){
      .motors-grid-clean{
        grid-template-columns:1fr;
      }
  
      .motor-card-clean{
        padding:24px 20px;
      }
    }

:root{
    --wa:#25D366;
    --wa-dark:#20bd5a;
    --wa-darker:#128C7E;

    --light-bg:#ffffff;
    --light-bg-soft:#f7faf7;
    --light-border:#dfe8e1;
    --dark-text:#1d1f1e;
    --muted-text:#66706a;
  }

  .ig-float{
    position:fixed;
    right:18px;
    bottom:92px;
    z-index:9998;
    width:54px;
    height:54px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transition:transform .25s, box-shadow .25s, opacity .25s;
  }
  .ig-float:hover{
    transform:translateY(-2px) scale(1.04);
    box-shadow:0 14px 36px rgba(0,0,0,.35);
  }

  .wa-float{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    font-family:inherit;
  }

  .wa-btn{
    background:#fff;
    color:var(--wa);
    border:2px solid var(--wa);
    width:60px;
    height:60px;
    border-radius:50%;
    display:grid;
    place-items:center;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    cursor:pointer;
    transition:transform .3s, box-shadow .3s, background .3s, color .3s, border-color .3s;
    position:relative;
    overflow:hidden;
    z-index:9999;
  }
  .wa-btn svg{ color:var(--wa); }
  .wa-btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
    opacity:0;
    transition:opacity .3s;
  }
  .wa-btn:hover{
    background:var(--wa);
    border-color:var(--wa-dark);
    color:#fff;
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 14px 36px rgba(0,0,0,.28);
  }
  .wa-btn:hover svg{ color:#fff; }
  .wa-btn:hover::after{ opacity:.2; }

  .wa-card{
    position:absolute;
    right:0;
    bottom:74px;
    width:min(360px, calc(100vw - 36px));
    background:var(--light-bg);
    color:var(--dark-text);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.25);
    border:1px solid var(--light-border);
    transform:translateY(10px);
    opacity:0;
    transition:transform .3s, opacity .3s;
    z-index:10000;
  }
  .wa-card[aria-modal="true"]{
    transform:translateY(0);
    opacity:1;
  }

  .wa-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:linear-gradient(135deg, #ffffff, #eefbf1);
    border-bottom:1px solid var(--light-border);
  }
  .wa-avatar{
    width:40px;
    height:40px;
    border-radius:10px;
    background:#eaf8ee;
    display:grid;
    place-items:center;
    border:1px solid #d4ead9;
    overflow:hidden;
  }
  .wa-title{
    font-weight:700;
    font-size:1.02rem;
    color:var(--dark-text);
  }
  .wa-status{
    font-size:.85rem;
    color:var(--muted-text);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .wa-status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--wa);
  }
  .wa-close{
    margin-left:auto;
    background:transparent;
    color:var(--muted-text);
    border:0;
    font-size:24px;
    cursor:pointer;
    opacity:.7;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
  }
  .wa-close:hover{
    opacity:1;
    background:rgba(0,0,0,.04);
  }

  .wa-body{
    padding:12px 14px;
    max-height:40vh;
    overflow:auto;
    background:var(--light-bg-soft);
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .wa-bubble{
    max-width:88%;
    padding:9px 11px;
    border-radius:14px;
    line-height:1.35;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
    animation:fadeIn .25s ease;
    font-size:.9rem;
  }
  @keyframes fadeIn{
    from{opacity:0; transform:translateY(5px)}
    to{opacity:1; transform:none}
  }
  .wa-bot{
    background:#fff;
    border:1px solid var(--light-border);
    align-self:flex-start;
    border-bottom-left-radius:4px;
  }
  .wa-user{
    background:var(--wa);
    color:#fff;
    align-self:flex-end;
    border-bottom-right-radius:4px;
  }

  .wa-compose{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px 12px;
    background:#fff;
    border-top:1px solid var(--light-border);
  }
  .wa-compose textarea{
    resize:none;
    border-radius:12px;
    padding:10px 12px;
    border:1px solid var(--light-border);
    background:#fafdfa;
    color:var(--dark-text);
    outline:none;
    min-height:44px;
    font-family:inherit;
    font-size:.9rem;
    transition:.2s;
  }
  .wa-compose textarea:focus{
    border-color:var(--wa);
    box-shadow:0 0 0 2px rgba(37,211,102,.15);
    background:#fff;
  }
  .wa-send{
    background:var(--wa);
    color:#fff;
    border:0;
    border-radius:12px;
    padding:0 16px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
  }
  .wa-send:hover{
    background:var(--wa-dark);
    transform:scale(1.04);
  }

  .wa-body::-webkit-scrollbar{ width:6px; }
  .wa-body::-webkit-scrollbar-track{ background:rgba(0,0,0,.03); border-radius:3px; }
  .wa-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:3px; }
  .wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.18); }

  @media (max-width:480px){
    .ig-float{ right:12px; bottom:86px; width:52px; height:52px; }
    .wa-float{ right:12px; bottom:12px; }
    .wa-card{ width:calc(100vw - 24px); right:0; }
  }

/* ==========================================
       VARIABLES & RESET
    ========================================== */
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    :root {
      --navy:       #e43520;
      --navy-deep:  #061e35;
      --navy-mid:   #0d3860;
      --navy-light: #144e82;
      --navy-soft:  rgba(10,43,74,0.06);
      --navy-glow:  rgba(10,43,74,0.18);
      --white:      #ffffff;
      --off:        #f7f8fa;
      --text:       #111418;
      --muted:      #5e6a78;
      --line:       #e8eaed;

      --sh-xs: 0 2px 8px rgba(10,43,74,0.05);
      --sh-sm: 0 6px 20px rgba(10,43,74,0.07);
      --sh-md: 0 14px 40px rgba(10,43,74,0.09);
      --sh-lg: 0 28px 64px rgba(10,43,74,0.12);
      --sh-xl: 0 44px 88px rgba(10,43,74,0.15);

      --r-sm: 14px;
      --r-md: 22px;
      --r-lg: 32px;
      --r-xl: 44px;
      --r-pill: 999px;

      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
      --dur-fast: 0.22s;
      --dur-base: 0.38s;
      --dur-slow: 0.6s;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 88px;
      overflow-x: hidden;
    }

    body {
      font-family: 'Manrope', system-ui, sans-serif;
      color: var(--text);
      background: var(--white);
      overflow-x: hidden;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--line); }
    ::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 10px; }

    /* ==========================================
       TYPOGRAPHY
    ========================================== */
    .font-display { font-family: 'Outfit', sans-serif; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 1.1rem;
      border-radius: var(--r-pill);
      background: var(--navy-soft);
      color: var(--navy);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 1.4rem;
      border: 1px solid rgba(10,43,74,0.12);
    }

    .section-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(1.7rem, 3.4vw, 2.95rem);
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
      margin-bottom: 1rem;
    }

    .section-sub {
      color: var(--muted);
      font-size: 0.98rem;
      max-width: 680px;
      margin: 0 auto;
      font-weight: 400;
      line-height: 1.65;
    }

    /* ==========================================
       ANIMATIONS
    ========================================== */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(32px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes fadeLeft {
      from { opacity:0; transform:translateX(-32px); }
      to   { opacity:1; transform:translateX(0); }
    }
    @keyframes fadeRight {
      from { opacity:0; transform:translateX(32px); }
      to   { opacity:1; transform:translateX(0); }
    }
    @keyframes float {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-12px); }
    }
    @keyframes spin-slow {
      to { transform: rotate(360deg); }
    }
    @keyframes pulse-ring {
      0%   { transform: scale(1);    opacity:0.6; }
      100% { transform: scale(1.35); opacity:0; }
    }
    @keyframes shimmer-line {
      0%   { background-position: -200% 0; }
      100% { background-position:  200% 0; }
    }

    .aos {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity var(--dur-slow) var(--ease),
                  transform var(--dur-slow) var(--ease);
    }
    .aos.visible { opacity: 1; transform: translateY(0); }
    .aos-left  { transform: translateX(-28px); }
    .aos-right { transform: translateX(28px); }
    .aos-left.visible, .aos-right.visible { transform: translateX(0); }

    /* Stagger delays */
    .d1 { transition-delay: 0.05s; }
    .d2 { transition-delay: 0.12s; }
    .d3 { transition-delay: 0.19s; }
    .d4 { transition-delay: 0.26s; }
    .d5 { transition-delay: 0.33s; }
    .d6 { transition-delay: 0.40s; }
    .d7 { transition-delay: 0.47s; }
    .d8 { transition-delay: 0.54s; }

    /* Section */
    .section { padding: 110px 0; position: relative; overflow: hidden; }
    @media(max-width:768px) { .section { padding: 72px 0; } }

    /* ==========================================
       BUTTONS
    ========================================== */
    .btn-primary-cta, .btn-outline-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      height: 56px;
      padding: 0 2rem;
      border-radius: var(--r-md);
      font-weight: 700;
      font-size: 0.92rem;
      cursor: pointer;
      border: none;
      letter-spacing: -0.01em;
      transition: all var(--dur-base) var(--ease);
      position: relative;
      overflow: hidden;
      text-decoration: none;
    }

    .btn-primary-cta {
      background: var(--navy);
      color: white;
      box-shadow: 0 10px 28px -6px var(--navy-glow);
    }
    .btn-primary-cta::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.55s var(--ease);
    }
    .btn-primary-cta:hover { background: var(--navy-mid); transform: translateY(-3px); box-shadow: 0 18px 36px -8px var(--navy-glow); color: white; }
    .btn-primary-cta:hover::after { transform: translateX(100%); }

    .btn-outline-cta {
      background: transparent;
      color: var(--text);
      border: 1.5px solid var(--line);
    }
    .btn-outline-cta:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-soft); transform: translateY(-3px); }

    /* ==========================================
       NAVBAR
    ========================================== */
    .navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      padding: 0;
      height: 80px;
      display: flex;
      align-items: center;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid rgba(10,43,74,0.06);
      transition: background var(--dur-base), box-shadow var(--dur-base);
    }
    .navbar.scrolled {
      background: rgba(255,255,255,0.98);
      box-shadow: var(--sh-sm);
    }
    .navbar .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    .nav-brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
      color: var(--text);
    }
    .nav-brand-logo {
      width: 44px;
      height: 44px;
      object-fit: contain;
      transition: transform var(--dur-base) var(--ease-back);
    }
    .nav-brand:hover .nav-brand-logo { transform: scale(1.08) rotate(-3deg); }
    .nav-brand-name {
      font-family: 'Outfit', sans-serif;
      font-weight: 800;
      font-size: 1.03rem;
      letter-spacing: -0.02em;
      color: var(--navy);
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 0.15rem;
      list-style: none;
    }
    .nav-links a {
      display: block;
      padding: 0.5rem 1rem;
      border-radius: var(--r-pill);
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      transition: all var(--dur-fast) var(--ease);
    
/* ...cortado... */

:root {
      --sky: #0066cc;
      --sky-light: #0088ff;
      --sky-lighter: #e6f2ff;
      --sky-dark: #004d99;
      --ink: #0f172a;
      --ink-light: #334155;
      --muted: #64748b;
      --muted-light: #94a3b8;
      --card: #ffffff;
      --card-hover: #f8fafc;
      --border: rgba(203, 213, 225, 0.6);
      --border-hover: rgba(59, 130, 246, 0.3);
      --radius: 16px;
      --radius-sm: 10px;
      --radius-lg: 24px;
      --shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
      --shadow-hover: 0 20px 60px rgba(0, 102, 204, 0.15);
      --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    
    /* Offset para anclas con navbar fixed */
    section[id], header[id]{ scroll-margin-top: 110px; }
body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--ink);
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      line-height: 1.6;
      overflow-x: hidden;
      position: relative;
      min-height: 100vh;
    }

    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 10% 20%, rgba(0, 102, 204, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(0, 102, 204, 0.04) 0%, transparent 40%);
      z-index: -1;
      pointer-events: none;
    }

    /* Tipografía */
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Montserrat', 'Inter', sans-serif;
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.2;
    }

    h1 { 
      font-size: clamp(2.75rem, 5vw, 4.5rem);
      background: linear-gradient(135deg, var(--ink) 0%, var(--sky-dark) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    h2 { 
      font-size: clamp(2.25rem, 4vw, 3.5rem);
      position: relative;
      display: inline-block;
    }

    h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }

    .lead {
      font-size: 1.25rem;
      font-weight: 400;
      color: var(--ink-light);
      line-height: 1.7;
    }

    /* Componentes */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--sky);
      background: linear-gradient(90deg, var(--sky-lighter) 0%, rgba(230, 242, 255, 0.4) 100%);
      padding: 0.5rem 1.25rem;
      border-radius: 100px;
      border: 1px solid rgba(0, 102, 204, 0.15);
    }

    .section {
      padding: 100px 0;
      position: relative;
    }

    .bg-light {
      background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
      position: relative;
      overflow: hidden;
    }

    .bg-light::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        radial-gradient(circle at 20% 80%, rgba(0, 102, 204, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 102, 204, 0.03) 0%, transparent 50%);
      pointer-events: none;
    }

    .section-title {
      margin-bottom: 1rem;
      position: relative;
    }

    .section-title::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 5px;
      background: linear-gradient(90deg, var(--sky), var(--sky-light));
      border-radius: 3px;
    }

    .section-subtitle {
      color: var(--muted);
      max-width: 800px;
      margin: 2rem auto 3rem;
      font-size: 1.125rem;
      line-height: 1.7;
    }

    .soft-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-card);
      transition: var(--transition);
      overflow: hidden;
      position: relative;
      backdrop-filter: blur(10px);
    }

    .soft-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover);
      border-color: var(--border-hover);
    }

    .icon-pill {
      width: 60px;
      height: 60px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--sky), var(--sky-dark));
      color: white;
      font-size: 1.5rem;
      flex-shrink: 0;
      transition: var(--transition);
      box-shadow: 0 8px 20px rgba(0, 102, 204, 0.2);
    }

    .icon-pill-sm {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      font-size: 1.25rem;
    }

    /* Botones */
    .btn-sky {
      background: linear-gradient(135deg, var(--sky), var(--sky-dark));
      border: none;
      color: white;
      font-weight: 600;
      padding: 1rem 2rem;
      border-radius: 12px;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
      z-index: 1;
      font-size: 1rem;
      box-shadow: 0 8px 24px rgba(0, 102, 204, 0.25);
    }

    .btn-sky::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--sky-dark), var(--sky));
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .btn-sky:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 16px 40px rgba(0, 102, 204, 0.35);
    }

    .btn-sky:hover::before {
      opacity: 1;
    }

    .btn-ghost {
      background: transparent;
      border: 2px solid var(--border);
      color: var(--ink);
      font-weight: 600;
      padding: 1rem 2rem;
      border-radius: 12px;
      transition: var(--transition);
      font-size: 1rem;
    }

    .btn-ghost:hover {
      border-color: var(--sky);
      color: var(--sky);
      background: rgba(0, 102, 204, 0.04);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 102, 204, 0.1);
    }

    /* Navbar */
    .navbar {
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(226, 232, 240, 0.8);
      padding: 1.25rem 0;
      transition: var(--transition);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    }

    .navbar.scrolled {
      padding: 0.75rem 0;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    }

    .brand-mark {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--sky), var(--sky-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 1.5rem;
      box-shadow: 0 8px 24px rgba(0, 102, 204, 0.3);
      transition: var(--transition);
    }

    .brand-mark:hover {
      transform: rotate(10deg) scale(1.05);
    }

    .nav-link {
      font-weight: 600;
      color: var(--ink-light);
      padding: 0.75rem 1.25rem !important;
      border-radius: 10px;
      transition: var(--transition);
      position: relative;
      margin: 0 0.25rem;
    }

    .nav-link:hover {
      color: var(--sky);
      background: rgba(0, 102, 204, 0.08);
      transform: translateY(-2px);
    }

    .nav-link.active {
      color: var(--sky);
      background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 102, 204, 0.05));
      font-weight
/* ...cortado... */

.purpose-logo-wrap{
        margin-top: 14px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    
        /* NUEVO: un poquito más centrada visualmente */
        padding-top: 18px;          /* antes 8px */
        transform: translateY(-6px); /* sube un toque para que quede más “en el medio” */
        min-height: 120px;
      }
    
      .purpose-logo{
        max-width: 720px;
        width: 100%;
        height: auto;
        opacity: .98;
        display: block;
    
        /* opcional por si el PNG tiene espacio raro */
        margin: 0 auto;
      }

principal) -->
<style>
  .reglamento-modal{
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(203,213,225,.6);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  }
  .reglamento-modal .modal-header{
    background: rgba(0,102,204,.06);
    border-bottom: 1px solid rgba(203,213,225,.6);
    padding: 1.25rem 1.5rem;
  }
  .reglamento-modal .modal-title{
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .reglamento-modal .btn-close{
    opacity: .8;
  }
  .reglamento-modal .modal-body{
    padding: 0;
  }
  .reglamento-content{
    padding: 1.5rem 1.75rem;
    max-height: min(70vh, 680px);
    overflow: auto;
    color: var(--ink);
  }
  .reglamento-content h4,
  .reglamento-content h5{
    color: var(--ink);
  }
  .reglamento-content ol{
    padding-left: 1.2rem;
  }
  .reglamento-content li{
    margin-bottom: .45rem;
    line-height: 1.55;
  }
  .reglamento-modal .modal-footer{
    border-top: 1px solid rgba(203,213,225,.6);
    background: rgba(255,255,255,.8);
    padding: 1rem 1.5rem;
  }

.gal-gallery .carousel{max-width:980px;margin-inline:auto;position:relative}
  .gal-frame{
    height: clamp(220px, 48vh, 440px);
    background:#fff;border-radius:16px;overflow:hidden;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:center;padding:8px
  }
  .gal-img{
    width:auto !important;max-width:100%;
    height:auto !important;max-height:100%;
    object-fit:contain !important;object-position:center;display:block;cursor:zoom-in
  }
  /* Controles circulares con más contraste */
  .gal-gallery .carousel-control-prev,
  .gal-gallery .carousel-control-next{
    z-index:20;width:50px;height:50px;top:50%;transform:translateY(-50%);
    opacity:1;background:rgba(0,0,0,.55);border-radius:50%;margin:0 12px
  }
  .gal-gallery .carousel-control-prev{left:0}
  .gal-gallery .carousel-control-next{right:0}
  .gal-gallery .gal-ctrl-icon{width:2.6rem;height:2.6rem;background-size:60% 60%}
  /* Indicadores: se sitúan fuera; agregamos espacio inferior para que no se corten */
  .gal-gallery .carousel-indicators{z-index:10;bottom:-50px}
  .gal-gallery .carousel-indicators button{
    width:10px;height:10px;border-radius:50%;
    background:rgba(0,0,0,.5);border:none
  }
  .gal-gallery .carousel-indicators button.active{background:#000}
  .gal-gallery{padding-bottom:56px} /* espacio para indicadores */
  
  /* Modal */
  #galLightbox .modal-content{background:#000}
  #galLightboxImg{max-height:86vh;width:100%;height:auto;object-fit:contain;background:#000}
  .gal-lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    border:0;width:44px;height:44px;border-radius:999px;
    background:rgba(255,255,255,.18);color:#fff;font-size:30px;line-height:44px;text-align:center;z-index:5;cursor:pointer
  }
  .gal-lightbox-nav:hover{background:rgba(255,255,255,.28)}
  .gal-lightbox-nav.gal-prev{left:10px}
  .gal-lightbox-nav.gal-next{right:10px}
  
  /* Pequeños ajustes móviles */
  @media (max-width: 575.98px){
    .gal-frame{height: clamp(200px, 40vh, 360px)}
  }

:root{
    --wa:#25D366;
    --wa-dark:#1DA851;
    --wa-darker:#128C7E;
    --light-bg:#ffffff;
    --light-bg-soft:#f6f8f7;
    --light-border:#dde4df;
    --dark-text:#111827;
    --muted-text:#6b7280;
  }

  .ig-float{
    position:fixed; right:18px; bottom:92px;
    z-index:9998;
    width:54px; height:54px; border-radius:50%;
    display:grid; place-items:center; color:#fff; text-decoration:none;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transition:transform .25s, box-shadow .25s;
  }
  .ig-float:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 14px 36px rgba(0,0,0,.35); }

  .wa-float{
    position:fixed; right:18px; bottom:18px;
    z-index:9999; font-family:inherit;
  }

  .wa-btn{
    background:#fff;
    color:var(--wa);
    border:2px solid var(--wa);
    width:60px; height:60px; border-radius:50%;
    display:grid; place-items:center;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    cursor:pointer;
    transition:transform .3s, box-shadow .3s, background .3s, color .3s, border-color .3s;
    position:relative; overflow:hidden;
    z-index:9999;
  }
  .wa-btn svg{ color:var(--wa); }
  .wa-btn:hover{
    background:var(--wa);
    border-color:var(--wa-dark);
    color:#fff;
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 14px 36px rgba(0,0,0,.28);
  }
  .wa-btn:hover svg{ color:#fff; }

  .wa-card{
    position:absolute; right:0; bottom:74px;
    width:min(360px,92vw);
    background:var(--light-bg);
    color:var(--dark-text);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.25);
    border:1px solid var(--light-border);
    transform:translateY(10px);
    opacity:0;
    transition:transform .28s ease, opacity .28s ease;
    z-index:10000;
  }
  .wa-card[aria-modal="true"]{ transform:translateY(0); opacity:1; }

  .wa-head{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px;
    background:linear-gradient(135deg, #ffffff, rgba(37,211,102,.10));
    border-bottom:1px solid var(--light-border);
  }
  .wa-avatar{
    width:42px; height:42px; border-radius:12px;
    background:rgba(37,211,102,.12);
    display:grid; place-items:center;
    border:1px solid rgba(37,211,102,.25);
    overflow:hidden;
  }
  .wa-title{ font-weight:800; font-size:1.02rem; color:var(--dark-text); }
  .wa-status{
    font-size:.85rem; color:var(--muted-text);
    display:flex; align-items:center; gap:6px;
  }
  .wa-status::before{
    content:""; width:8px; height:8px; border-radius:50%;
    background:var(--wa);
  }
  .wa-close{
    margin-left:auto; background:transparent; color:var(--muted-text);
    border:0; font-size:24px; cursor:pointer; opacity:.7;
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:.2s;
  }
  .wa-close:hover{ opacity:1; background:rgba(0,0,0,.04); }

  .wa-body{
    padding:12px 14px;
    max-height:40vh;
    overflow:auto;
    background:var(--light-bg-soft);
    display:flex; flex-direction:column; gap:8px;
  }
  .wa-bubble{
    max-width:88%;
    padding:9px 11px;
    border-radius:14px;
    line-height:1.35;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
    animation:fadeIn .25s ease;
    font-size:0.9rem;
  }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }

  .wa-bot{
    background:#fff;
    border:1px solid var(--light-border);
    align-self:flex-start;
    border-bottom-left-radius:4px;
  }
  .wa-user{
    background:var(--wa);
    color:#fff;
    align-self:flex-end;
    border-bottom-right-radius:4px;
  }

  .wa-compose{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px 12px;
    background:#fff;
    border-top:1px solid var(--light-border);
  }
  .wa-compose textarea{
    resize:none;
    border-radius:12px;
    padding:10px 12px;
    border:1px solid var(--light-border);
    background:#f9fbfa;
    color:var(--dark-text);
    outline:none;
    min-height:44px;
    font-family:inherit;
    font-size:0.9rem;
    transition:.2s;
  }
  .wa-compose textarea:focus{
    border-color:var(--wa);
    box-shadow:0 0 0 2px rgba(37,211,102,.18);
    background:#fff;
  }
  .wa-send{
    background:var(--wa);
    color:#fff;
    border:0;
    border-radius:12px;
    padding:0 16px;
    font-weight:700;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:.2s;
  }
  .wa-send:hover{ background:var(--wa-dark); transform:scale(1.04); }

  @media (max-width:480px){
    .ig-float{ right:12px; bottom:86px; width:52px; height:52px; }
    .wa-float{ right:12px; bottom:12px; }
    .wa-card{ width:calc(100vw - 24px); right:0; }
  }

:root {
      --accent: #ef7f1a;
      --accent-strong: #c7650f;
      --accent-light: #ff9a3c;
      --text: #111111;
      --muted: #5e5e5e;
      --line: #ebe5df;
      --soft: #fff7f0;
      --soft-2: #fff3e7;
      --white: #ffffff;
      --shadow: 0 24px 80px rgba(17, 17, 17, .08);
      --shadow-soft: 0 12px 40px rgba(17, 17, 17, .06);
      --shadow-hover: 0 32px 100px rgba(239, 127, 26, .15);
      --radius: 28px;
      --radius-sm: 18px;
      --transition: cubic-bezier(0.4, 0, 0.2, 1);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
      color: var(--text);
      background: var(--white);
      overflow-x: hidden;
      line-height: 1.72;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Typography */
    h1, h2, h3, .section-title, .hero-title {
      font-family: 'Sora', system-ui, sans-serif;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      text-decoration: none;
      transition: all 0.3s var(--transition);
    }

    /* Section Styles */
    .section {
      padding: 120px 0;
      position: relative;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      padding: .56rem 1.25rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--soft) 0%, var(--soft-2) 100%);
      color: var(--accent-strong);
      font-weight: 800;
      font-size: .74rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 1px solid rgba(239, 127, 26, .15);
      animation: fadeInUp 0.8s var(--transition) backwards;
    }

    .section-title {
      font-size: clamp(2.35rem, 4.8vw, 3.75rem);
      line-height: 1.04;
      font-weight: 800;
      margin: 1.05rem 0 1.1rem;
      letter-spacing: -0.03em;
      color: var(--text);
    }

    .section-subtitle {
      font-size: 1.12rem;
      line-height: 1.95;
      color: var(--muted);
      max-width: 720px;
      margin: 0 auto;
      font-weight: 500;
    }

    /* Navbar */
    .navbar {
      padding: 1.1rem 0;
      background: rgba(255, 255, 255, .85);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(17, 17, 17, .04);
      transition: all 0.4s var(--transition);
    }

    .navbar.scrolled {
      padding: 0.8rem 0;
      box-shadow: 0 4px 30px rgba(17, 17, 17, .06);
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: .85rem;
    }

    .navbar-brand img {
      height: 44px;
      width: auto;
      transition: transform 0.3s var(--transition);
    }

    .navbar-brand:hover img {
      transform: scale(1.05);
    }

    .brand-text {
      font-family: 'Sora', system-ui, sans-serif;
      font-size: 1.07rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.025em;
    }

    .navbar-nav .nav-link {
      color: var(--text);
      font-weight: 700;
      font-size: .95rem;
      padding: .9rem 1.15rem;
      position: relative;
      overflow: hidden;
      letter-spacing: -.01em;
    }

    .navbar-nav .nav-link::after {
      content: '';
      position: absolute;
      bottom: 6px;
      left: 50%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--accent), var(--accent-light));
      border-radius: 999px;
      transform: translateX(-50%);
      transition: width 0.35s var(--transition);
    }

    .navbar-nav .nav-link:hover::after,
    .navbar-nav .nav-link:focus::after {
      width: 24px;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
      color: var(--accent-strong);
    }

    .navbar-toggler {
      border: 1px solid rgba(17, 17, 17, .1);
      padding: .5rem .7rem;
      border-radius: 12px;
      transition: all 0.3s var(--transition);
    }

    .navbar-toggler:hover {
      background: var(--soft);
      border-color: var(--accent);
    }

    .navbar-toggler:focus {
      box-shadow: none;
    }

    /* Buttons */
    .btn-main,
    .btn-line {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .65rem;
      border-radius: 999px;
      padding: 1.08rem 1.8rem;
      font-weight: 800;
      font-size: .96rem;
      letter-spacing: -.01em;
      transition: all 0.4s var(--transition);
      position: relative;
      overflow: hidden;
    }

    .btn-main {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
      color: #fff;
      border: none;
      box-shadow: 0 16px 40px rgba(239, 127, 26, .3);
    }

    .btn-main::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
      opacity: 0;
      transition: opacity 0.4s var(--transition);
    }

    .btn-main span {
      position: relative;
      z-index: 1;
    }

    .btn-main:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 50px rgba(239, 127, 26, .4);
      color: #fff;
    }

    .btn-main:hover::before {
      opacity: 1;
    }

    .btn-line {
      background: var(--white);
      color: var(--text);
      border: 2px solid rgba(17, 17, 17, .08);
      box-shadow: 0 8px 30px rgba(17, 17, 17, .04);
    }

    .btn-line:hover {
      border-color: var(--accent);
      color: var(--accent-strong);
      transform: translateY(-3px);
      box-shadow: 0 12px 40px rgba(239, 127, 26, .12);
    }

    /* Hero Section */
    .hero {
      padding: 170px 0 110px;
      position: relative;
      overflow: hidden;
      background: var(--white);
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 80%;
      height: 140%;
      background: radial-gradient(ellipse at center, rgba(239, 127, 26, .08) 0%, transparent 60%);
      pointer-events: none;
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line), transparent);
    }

    /* Decorative shapes */
    .hero-shape {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0.6;
    }

    .hero-shape-1 {
      top: 15%;
      left: 5%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(239, 127, 26, .06) 0%, transparent 70%);
      animation: float 8s ease-in-out infinite;
    }

    .hero-shape-2 {
      bottom: 20%;
      right: 10%;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(255, 189, 89, .08) 0%, transparent 70%);
      animation: float 6s ease-in-out infinite reverse;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(5deg); }
    }

    .hero-copy {
      max-width: 600px;
    }

    .hero-title {
      font-size: clamp(3rem, 5.8vw, 4.6rem);
      line-height: 1.01;
      letter-spacing: -0.04em;
      font-weight: 800;
      margin: 1rem 0 1.35rem;
      color: var(--text);
      animation: fadeInUp 0.8s var(--transition) 0.1s backwards;
    }

    .hero-title .accent {
      color: var(--accent);
      position: relative;
    }

    .hero-title .accent::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 0;
      right: 0;
  
/* ...cortado... */

.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2147483647;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-family:inherit;
}

.wa-btn{
  width:60px;
  height:60px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .25s, box-shadow .25s;
}

.wa-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 36px rgba(37,211,102,.55);
}

.wa-card{
  position:absolute;
  right:0;
  bottom:74px;
  width:min(360px,92vw);
  background:#fff;
  border-radius:18px;
  border:1px solid #e3e6ea;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  overflow:hidden;
  transform:translateY(10px);
  opacity:0;
  transition:.25s ease;
}

.wa-card[aria-modal="true"]{
  transform:none;
  opacity:1;
}

.wa-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
}

.wa-avatar{
  width:40px;
  height:40px;
  background:#fff;
  border-radius:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.wa-avatar img{
  width:26px;
  height:26px;
  object-fit:contain;
}

.wa-title{
  font-weight:800;
}

.wa-status{
  font-size:.85rem;
  opacity:.9;
}

.wa-close{
  margin-left:auto;
  border:none;
  background:transparent;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}

.wa-close:hover{
  opacity:1;
  background:rgba(255,255,255,.14);
}

.wa-body{
  padding:14px;
  max-height:40vh;
  overflow:auto;
  background:#f8f9fa;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.wa-bubble{
  max-width:88%;
  padding:10px 12px;
  border-radius:14px;
  font-size:.95rem;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.wa-bot{
  background:#fff;
  border:1px solid #e3e6ea;
  align-self:flex-start;
}

.wa-user{
  background:#eaf7f0;
  border:1px solid #cfeedd;
  align-self:flex-end;
}

.wa-compose{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:10px;
  border-top:1px solid #e3e6ea;
  background:#fff;
}

.wa-compose textarea{
  resize:none;
  border-radius:12px;
  padding:10px;
  border:1px solid #e3e6ea;
  font-family:inherit;
  outline:none;
}

.wa-send{
  background:#25D366;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:0 16px;
  cursor:pointer;
}

.wa-send:hover{
  background:#1fb85a;
}

@media(max-width:480px){
  .wa-float{
    right:12px;
    bottom:12px;
  }

  .wa-card{
    width:calc(100vw - 24px);
  }
}

:root {
      --accent: #fe6e00;
      --accent-dark: #003d77;
      --accent-light: #e8f2fc;
      --accent-glow: rgba(0, 86, 167, 0.15);
      --text: #111111;
      --text-dark: #0a0d12;
      --muted: #5b6570;
      --muted-light: #8892a0;
      --line: #e8edf3;
      --soft: #f6f9fc;
      --white: #ffffff;
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
      --shadow: 0 18px 48px rgba(0,0,0,0.08);
      --shadow-lg: 0 32px 64px rgba(0,0,0,0.12);
      --shadow-accent: 0 20px 50px rgba(0,86,167,0.18);
      --radius: 24px;
      --radius-sm: 16px;
      --radius-xs: 12px;
      --nav-h: 84px;
      --transition: cubic-bezier(0.4, 0, 0.2, 1);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      max-width: 100%;
      overflow-x: clip;
    }

    body {
      margin: 0;
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      background: var(--white);
      color: var(--text);
      max-width: 100%;
      overflow-x: clip;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      text-decoration: none;
      transition: all 0.3s var(--transition);
    }

    /* Container */
    .container-custom {
      width: min(1220px, calc(100% - 48px));
      margin-inline: auto;
    }

    /* Section base */
    .section {
      padding: 120px 0;
      position: relative;
    }

    /* Eyebrow badge */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: 100px;
      background: linear-gradient(135deg, var(--accent-light) 0%, rgba(0,86,167,0.08) 100%);
      color: var(--accent);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: 1px solid rgba(0,86,167,0.12);
      backdrop-filter: blur(8px);
    }

    .eyebrow::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      animation: pulse-dot 2s infinite;
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    /* Section titles */
    .section-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(2.2rem, 4.5vw, 3.2rem);
      line-height: 1.1;
      font-weight: 800;
      letter-spacing: -0.03em;
      margin: 20px 0 16px;
      color: var(--text-dark);
      background: linear-gradient(135deg, var(--text-dark) 0%, #2d3748 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-subtitle {
      max-width: 680px;
      margin: 0 auto;
      color: var(--muted);
      line-height: 1.8;
      font-size: 1.1rem;
      font-weight: 400;
    }

    /* ========== NAVBAR ========== */
    .navbar {
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(0,0,0,0.04);
      padding: 0;
      min-height: var(--nav-h);
      display: flex;
      align-items: center;
      transition: all 0.4s var(--transition);
    }

    .navbar.scrolled {
      background: rgba(255,255,255,0.95);
      box-shadow: 0 4px 30px rgba(0,0,0,0.06);
    }

    .navbar .container-custom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: var(--nav-h);
      position: relative;
      overflow: visible;
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--text-dark) !important;
      font-family: 'Outfit', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin: 0;
      padding: 0;
      min-width: 0;
      flex: 1 1 auto;
    }

    .navbar-brand span {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .brand-logo {
      height: 44px;
      width: auto;
      transition: transform 0.3s var(--transition);
    }

    .navbar-brand:hover .brand-logo {
      transform: scale(1.05);
    }

    .navbar-collapse {
      flex-grow: 0;
      min-width: 0;
    }

    .navbar-nav {
      align-items: center;
      gap: 6px;
    }

    .nav-link {
      color: var(--text) !important;
      font-weight: 600;
      font-size: 0.92rem;
      padding: 10px 18px !important;
      border-radius: 100px;
      position: relative;
      transition: all 0.3s var(--transition);
    }

    .nav-link::after {
      content: "";
      position: absolute;
      bottom: 6px;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
      transition: all 0.3s var(--transition);
      transform: translateX(-50%);
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--accent) !important;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      width: 24px;
    }

    .navbar-toggler {
      border: 1px solid var(--line);
      border-radius: var(--radius-xs);
      padding: 10px 14px;
      box-shadow: none !important;
      transition: all 0.3s var(--transition);
      margin-left: auto;
      flex: 0 0 auto;
      background: var(--white);
    }

    .navbar-toggler-icon {
      width: 1.25rem;
      height: 1.25rem;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(17,17,17,0.88)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .navbar-toggler:hover {
      background: var(--soft);
      border-color: var(--accent-light);
    }

    /* ========== HERO ========== */
    .hero {
      padding: calc(var(--nav-h) + 80px) 0 100px;
      background: 
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(0,86,167,0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(0,86,167,0.05) 0%, transparent 50%),
        linear-gradient(180deg, var(--white) 0%, var(--soft) 100%);
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      top: 20%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(0,86,167,0.06) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      animation: float-slow 20s ease-in-out infinite;
    }

    @keyframes float-slow {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-30px, 30px) scale(1.05); }
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 60px;
      align-items: center;
    }

    .hero-copy {
      animation: fadeInUp 0.8s var(--transition) both;
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(3rem, 6vw, 4.5rem);
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.04em;
      margin: 24px 0;
      color: var(--text-dark);
    }

    .hero-title span {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      p
/* ...cortado... */

.gallery-ticker-wrap{
          position: relative;
          overflow: hidden;
          margin: 0 0 40px;
          padding: 8px 0;
        }
    
        .gallery-ticker-wrap .ticker-wrapper{
          overflow: hidden;
        }
    
        .gallery-ticker-wrap .ticker-track{
          display: flex;
          gap: 30px;
          width: max-content;
          animation: galleryTickerMove 50s linear infinite;
        }
    
        .gallery-ticker-wrap .ticker-track:hover{
          animation-play-state: paused;
        }
    
        .gallery-ticker-wrap img{
          height: 380px;
          width: 260px;
          object-fit: cover;
          border-radius: 16px;
          cursor: pointer;
          transition: transform .3s ease;
        }
    
        .gallery-ticker-wrap img:hover{
          transform: scale(1.05);
        }
    
        @keyframes galleryTickerMove{
          0%{ transform: translateX(0); }
          100%{ transform: translateX(-50%); }
        }
    
        @media (max-width:768px){
          .gallery-ticker-wrap img{
            height: 220px;
            width: 150px;
          }
        }

/* =========================
       POR QUÉ ELEGIRNOS
    ========================= */
    #porque-elegirnos .why-head{
      max-width: 760px;
      margin: 0 auto 42px;
    }
  
    #porque-elegirnos .why-layout{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
      gap:32px;
      align-items:stretch;
    }
  
    #porque-elegirnos .why-cards{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:16px;
      align-content:start;
    }
  
    #porque-elegirnos .reason-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      padding:20px 18px;
      box-shadow:0 12px 28px rgba(0,0,0,.045);
      transition:.25s ease;
      height:100%;
    }
  
    #porque-elegirnos .reason-card:hover{
      transform:translateY(-3px);
      box-shadow:0 18px 36px rgba(0,0,0,.08);
    }
  
    #porque-elegirnos .reason-card .card-icon{
      width:52px;
      height:52px;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:rgba(0,86,167,.10);
      color:var(--accent);
      margin-bottom:14px;
      flex:0 0 auto;
    }
  
    #porque-elegirnos .reason-card .card-icon svg{
      width:24px;
      height:24px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
  
    #porque-elegirnos .reason-card h3{
      margin:0 0 8px;
      font-size:1rem;
      line-height:1.25;
      font-weight:800;
      letter-spacing:-.02em;
      color:#101923;
    }
  
    #porque-elegirnos .reason-card p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.94rem;
    }
  
    #porque-elegirnos .why-media{
      position:relative;
      min-height:100%;
    }
  
    #porque-elegirnos .why-media-frame{
      position:relative;
      height:100%;
      min-height:560px;
      border-radius:30px;
      overflow:hidden;
      border:1px solid var(--line);
      box-shadow:0 22px 48px rgba(0,0,0,.10);
      background:#eef5fc;
    }
  
    #porque-elegirnos .why-media-frame::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.18) 100%);
      pointer-events:none;
    }
  
    #porque-elegirnos .why-media-frame img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
  
    #porque-elegirnos .why-media-badge{
      position:absolute;
      left:20px;
      right:20px;
      bottom:20px;
      z-index:2;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.75);
      border-radius:20px;
      padding:16px 18px;
      box-shadow:0 12px 30px rgba(0,0,0,.12);
    }
  
    #porque-elegirnos .why-media-badge strong{
      display:block;
      margin-bottom:4px;
      color:#101923;
      font-size:1rem;
      font-weight:800;
    }
  
    #porque-elegirnos .why-media-badge span{
      display:block;
      color:#4f5a66;
      line-height:1.6;
      font-size:.94rem;
    }
  
    @media (max-width: 991.98px){
      #porque-elegirnos .why-layout{
        grid-template-columns:1fr;
      }
  
      #porque-elegirnos .why-cards{
        order:1;
      }
  
      #porque-elegirnos .why-media{
        order:2;
      }
  
      #porque-elegirnos .why-media-frame{
        min-height:420px;
      }
    }
  
    @media (max-width: 575.98px){
      #porque-elegirnos .why-head{
        margin-bottom:30px;
      }
  
      #porque-elegirnos .why-cards{
        grid-template-columns:1fr;
        gap:14px;
      }
  
      #porque-elegirnos .reason-card{
        padding:18px 16px;
        border-radius:20px;
      }
  
      #porque-elegirnos .why-media-frame{
        min-height:320px;
        border-radius:24px;
      }
  
      #porque-elegirnos .why-media-badge{
        left:14px;
        right:14px;
        bottom:14px;
        padding:14px 15px;
        border-radius:18px;
      }
    }

/* ===== TICKER ===== */
        .gallery-ticker-wrap{
          position: relative;
          overflow: hidden;
          margin: 0 0 56px;
          padding: 8px 0;
        }
    
        .gallery-ticker-wrap .ticker-wrapper{
          overflow: hidden;
        }
    
        .gallery-ticker-wrap .ticker-track{
          display: flex;
          gap: 30px;
          width: max-content;
          animation: galleryTickerMove 34s linear infinite;
        }
    
        .gallery-ticker-wrap .ticker-track:hover{
          animation-play-state: paused;
        }
    
        .gallery-ticker-wrap img{
          height: 380px;
          width: 260px;
          object-fit: cover;
          border-radius: 16px;
          cursor: pointer;
        }
    
        @keyframes galleryTickerMove{
          0%{ transform: translateX(0); }
          100%{ transform: translateX(-50%); }
        }
    
        /* ===== MOSAIC (FIX REAL) ===== */
        .mosaic-gallery{
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
    
        .mosaic-item{
          display: block;
          overflow: hidden;
          border-radius: 14px;
        }
    
        .mosaic-item img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          transition: transform .3s ease;
        }
    
        .mosaic-item:hover img{
          transform: scale(1.05);
        }
    
        .item-sm{ grid-row: span 1; }
        .item-md{ grid-row: span 2; }
        .item-lg{ grid-column: span 2; grid-row: span 2; }
        .item-wide{ grid-column: span 2; }
    
        /* responsive */
        @media (max-width: 768px){
          .mosaic-gallery{
            grid-template-columns: repeat(2, 1fr);
          }
    
          .item-lg,
          .item-wide{
            grid-column: span 2;
          }
        }

.wa-float{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:2147483647;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    font-family:inherit;
  }
  
  .wa-btn{
    min-width:60px;
    height:60px;
    padding:0 14px 0 18px;
    border-radius:999px;
    border:none;
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(37,211,102,.45);
    transition:transform .25s, box-shadow .25s;
  }
  .wa-btn:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 14px 36px rgba(37,211,102,.55);
  }
  .wa-btn-text{
    font-size:.95rem;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
  }
  .wa-btn svg{
    flex:0 0 auto;
  }
  
  .wa-card{
    position:absolute;
    right:0;
    bottom:74px;
    width:min(360px,92vw);
    background:#fff;
    border-radius:18px;
    border:1px solid #e3e6ea;
    box-shadow:0 18px 60px rgba(0,0,0,.25);
    overflow:hidden;
    transform:translateY(10px);
    opacity:0;
    transition:.25s ease;
  }
  .wa-card[aria-modal="true"]{
    transform:none;
    opacity:1;
  }
  
  .wa-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    background:linear-gradient(135deg,#0056a7,#003d77);
    color:#fff;
  }
  .wa-avatar{
    width:40px;
    height:40px;
    background:#fff;
    border-radius:10px;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .wa-avatar img{
    width:26px;
    height:26px;
    object-fit:contain;
  }
  .wa-title{
    font-weight:800;
  }
  .wa-status{
    font-size:.85rem;
    opacity:.9;
  }
  
  .wa-close{
    margin-left:auto;
    border:none;
    background:transparent;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.9;
  }
  .wa-close:hover{
    opacity:1;
    background:rgba(255,255,255,.14);
  }
  
  .wa-body{
    padding:14px;
    max-height:40vh;
    overflow:auto;
    background:#f8f9fa;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .wa-bubble{
    max-width:88%;
    padding:10px 12px;
    border-radius:14px;
    font-size:.95rem;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
  }
  .wa-bot{
    background:#fff;
    border:1px solid #e3e6ea;
    align-self:flex-start;
  }
  .wa-user{
    background:#eaf7f0;
    border:1px solid #cfeedd;
    align-self:flex-end;
  }
  
  .wa-compose{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px;
    border-top:1px solid #e3e6ea;
    background:#fff;
  }
  .wa-compose textarea{
    resize:none;
    border-radius:12px;
    padding:10px;
    border:1px solid #e3e6ea;
    font-family:inherit;
    outline:none;
  }
  .wa-send{
    background:#25D366;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:0 16px;
    cursor:pointer;
  }
  .wa-send:hover{
    background:#1fb85a;
  }
  
  @media(max-width:480px){
    .wa-float{
      right:12px;
      bottom:12px;
    }
    .wa-btn{
      height:54px;
      padding:0 12px 0 16px;
      gap:8px;
    }
    .wa-btn-text{
      font-size:.82rem;
    }
    .wa-card{
      width:calc(100vw - 24px);
    }
  }

:root {
      --accent: #fe6e00;
      --accent-dark: #003d77;
      --accent-light: #e8f2fc;
      --accent-glow: rgba(0, 86, 167, 0.15);
      --text: #111111;
      --text-dark: #0a0d12;
      --muted: #5b6570;
      --muted-light: #8892a0;
      --line: #e8edf3;
      --soft: #f6f9fc;
      --white: #ffffff;
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
      --shadow: 0 18px 48px rgba(0,0,0,0.08);
      --shadow-lg: 0 32px 64px rgba(0,0,0,0.12);
      --shadow-accent: 0 20px 50px rgba(0,86,167,0.18);
      --radius: 24px;
      --radius-sm: 16px;
      --radius-xs: 12px;
      --nav-h: 84px;
      --transition: cubic-bezier(0.4, 0, 0.2, 1);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      max-width: 100%;
      overflow-x: clip;
    }

    body {
      margin: 0;
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      background: var(--white);
      color: var(--text);
      max-width: 100%;
      overflow-x: clip;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      text-decoration: none;
      transition: all 0.3s var(--transition);
    }

    /* Container */
    .container-custom {
      width: min(1220px, calc(100% - 48px));
      margin-inline: auto;
    }

    /* Section base */
    .section {
      padding: 120px 0;
      position: relative;
    }

    /* Eyebrow badge */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: 100px;
      background: linear-gradient(135deg, var(--accent-light) 0%, rgba(0,86,167,0.08) 100%);
      color: var(--accent);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: 1px solid rgba(0,86,167,0.12);
      backdrop-filter: blur(8px);
    }

    .eyebrow::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      animation: pulse-dot 2s infinite;
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    /* Section titles */
    .section-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(2.2rem, 4.5vw, 3.2rem);
      line-height: 1.1;
      font-weight: 800;
      letter-spacing: -0.03em;
      margin: 20px 0 16px;
      color: var(--text-dark);
      background: linear-gradient(135deg, var(--text-dark) 0%, #2d3748 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-subtitle {
      max-width: 680px;
      margin: 0 auto;
      color: var(--muted);
      line-height: 1.8;
      font-size: 1.1rem;
      font-weight: 400;
    }

    /* ========== NAVBAR ========== */
    .navbar {
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(0,0,0,0.04);
      padding: 0;
      min-height: var(--nav-h);
      display: flex;
      align-items: center;
      transition: all 0.4s var(--transition);
    }

    .navbar.scrolled {
      background: rgba(255,255,255,0.95);
      box-shadow: 0 4px 30px rgba(0,0,0,0.06);
    }

    .navbar .container-custom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: var(--nav-h);
      position: relative;
      overflow: visible;
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--text-dark) !important;
      font-family: 'Outfit', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin: 0;
      padding: 0;
      min-width: 0;
      flex: 1 1 auto;
    }

    .navbar-brand span {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .brand-logo {
      height: 44px;
      width: auto;
      transition: transform 0.3s var(--transition);
    }

    .navbar-brand:hover .brand-logo {
      transform: scale(1.05);
    }

    .navbar-collapse {
      flex-grow: 0;
      min-width: 0;
    }

    .navbar-nav {
      align-items: center;
      gap: 6px;
    }

    .nav-link {
      color: var(--text) !important;
      font-weight: 600;
      font-size: 0.92rem;
      padding: 10px 18px !important;
      border-radius: 100px;
      position: relative;
      transition: all 0.3s var(--transition);
    }

    .nav-link::after {
      content: "";
      position: absolute;
      bottom: 6px;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
      transition: all 0.3s var(--transition);
      transform: translateX(-50%);
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--accent) !important;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      width: 24px;
    }

    .navbar-toggler {
      border: 1px solid var(--line);
      border-radius: var(--radius-xs);
      padding: 10px 14px;
      box-shadow: none !important;
      transition: all 0.3s var(--transition);
      margin-left: auto;
      flex: 0 0 auto;
      background: var(--white);
    }

    .navbar-toggler-icon {
      width: 1.25rem;
      height: 1.25rem;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(17,17,17,0.88)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .navbar-toggler:hover {
      background: var(--soft);
      border-color: var(--accent-light);
    }

    /* ========== HERO ========== */
    .hero {
      padding: calc(var(--nav-h) + 80px) 0 100px;
      background: 
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(0,86,167,0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(0,86,167,0.05) 0%, transparent 50%),
        linear-gradient(180deg, var(--white) 0%, var(--soft) 100%);
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      top: 20%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(0,86,167,0.06) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      animation: float-slow 20s ease-in-out infinite;
    }

    @keyframes float-slow {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-30px, 30px) scale(1.05); }
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 60px;
      align-items: center;
    }

    .hero-copy {
      animation: fadeInUp 0.8s var(--transition) both;
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(3rem, 6vw, 4.5rem);
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.04em;
      margin: 24px 0;
      color: var(--text-dark);
    }

    .hero-title span {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      p
/* ...cortado... */

.gallery-ticker-wrap{
          position: relative;
          overflow: hidden;
          margin: 0 0 40px;
          padding: 8px 0;
        }
    
        .gallery-ticker-wrap .ticker-wrapper{
          overflow: hidden;
        }
    
        .gallery-ticker-wrap .ticker-track{
          display: flex;
          gap: 30px;
          width: max-content;
          animation: galleryTickerMove 50s linear infinite;
        }
    
        .gallery-ticker-wrap .ticker-track:hover{
          animation-play-state: paused;
        }
    
        .gallery-ticker-wrap img{
          height: 380px;
          width: 260px;
          object-fit: cover;
          border-radius: 16px;
          cursor: pointer;
          transition: transform .3s ease;
        }
    
        .gallery-ticker-wrap img:hover{
          transform: scale(1.05);
        }
    
        @keyframes galleryTickerMove{
          0%{ transform: translateX(0); }
          100%{ transform: translateX(-50%); }
        }
    
        @media (max-width:768px){
          .gallery-ticker-wrap img{
            height: 220px;
            width: 150px;
          }
        }

/* =========================
       POR QUÉ ELEGIRNOS
    ========================= */
    #porque-elegirnos .why-head{
      max-width: 760px;
      margin: 0 auto 42px;
    }
  
    #porque-elegirnos .why-layout{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
      gap:32px;
      align-items:stretch;
    }
  
    #porque-elegirnos .why-cards{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:16px;
      align-content:start;
    }
  
    #porque-elegirnos .reason-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      padding:20px 18px;
      box-shadow:0 12px 28px rgba(0,0,0,.045);
      transition:.25s ease;
      height:100%;
    }
  
    #porque-elegirnos .reason-card:hover{
      transform:translateY(-3px);
      box-shadow:0 18px 36px rgba(0,0,0,.08);
    }
  
    #porque-elegirnos .reason-card .card-icon{
      width:52px;
      height:52px;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:rgba(0,86,167,.10);
      color:var(--accent);
      margin-bottom:14px;
      flex:0 0 auto;
    }
  
    #porque-elegirnos .reason-card .card-icon svg{
      width:24px;
      height:24px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
  
    #porque-elegirnos .reason-card h3{
      margin:0 0 8px;
      font-size:1rem;
      line-height:1.25;
      font-weight:800;
      letter-spacing:-.02em;
      color:#101923;
    }
  
    #porque-elegirnos .reason-card p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.94rem;
    }
  
    #porque-elegirnos .why-media{
      position:relative;
      min-height:100%;
    }
  
    #porque-elegirnos .why-media-frame{
      position:relative;
      height:100%;
      min-height:560px;
      border-radius:30px;
      overflow:hidden;
      border:1px solid var(--line);
      box-shadow:0 22px 48px rgba(0,0,0,.10);
      background:#eef5fc;
    }
  
    #porque-elegirnos .why-media-frame::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.18) 100%);
      pointer-events:none;
    }
  
    #porque-elegirnos .why-media-frame img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
  
    #porque-elegirnos .why-media-badge{
      position:absolute;
      left:20px;
      right:20px;
      bottom:20px;
      z-index:2;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.75);
      border-radius:20px;
      padding:16px 18px;
      box-shadow:0 12px 30px rgba(0,0,0,.12);
    }
  
    #porque-elegirnos .why-media-badge strong{
      display:block;
      margin-bottom:4px;
      color:#101923;
      font-size:1rem;
      font-weight:800;
    }
  
    #porque-elegirnos .why-media-badge span{
      display:block;
      color:#4f5a66;
      line-height:1.6;
      font-size:.94rem;
    }
  
    @media (max-width: 991.98px){
      #porque-elegirnos .why-layout{
        grid-template-columns:1fr;
      }
  
      #porque-elegirnos .why-cards{
        order:1;
      }
  
      #porque-elegirnos .why-media{
        order:2;
      }
  
      #porque-elegirnos .why-media-frame{
        min-height:420px;
      }
    }
  
    @media (max-width: 575.98px){
      #porque-elegirnos .why-head{
        margin-bottom:30px;
      }
  
      #porque-elegirnos .why-cards{
        grid-template-columns:1fr;
        gap:14px;
      }
  
      #porque-elegirnos .reason-card{
        padding:18px 16px;
        border-radius:20px;
      }
  
      #porque-elegirnos .why-media-frame{
        min-height:320px;
        border-radius:24px;
      }
  
      #porque-elegirnos .why-media-badge{
        left:14px;
        right:14px;
        bottom:14px;
        padding:14px 15px;
        border-radius:18px;
      }
    }

/* ===== TICKER ===== */
        .gallery-ticker-wrap{
          position: relative;
          overflow: hidden;
          margin: 0 0 56px;
          padding: 8px 0;
        }
    
        .gallery-ticker-wrap .ticker-wrapper{
          overflow: hidden;
        }
    
        .gallery-ticker-wrap .ticker-track{
          display: flex;
          gap: 30px;
          width: max-content;
          animation: galleryTickerMove 34s linear infinite;
        }
    
        .gallery-ticker-wrap .ticker-track:hover{
          animation-play-state: paused;
        }
    
        .gallery-ticker-wrap img{
          height: 380px;
          width: 260px;
          object-fit: cover;
          border-radius: 16px;
          cursor: pointer;
        }
    
        @keyframes galleryTickerMove{
          0%{ transform: translateX(0); }
          100%{ transform: translateX(-50%); }
        }
    
        /* ===== MOSAIC (FIX REAL) ===== */
        .mosaic-gallery{
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
    
        .mosaic-item{
          display: block;
          overflow: hidden;
          border-radius: 14px;
        }
    
        .mosaic-item img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          transition: transform .3s ease;
        }
    
        .mosaic-item:hover img{
          transform: scale(1.05);
        }
    
        .item-sm{ grid-row: span 1; }
        .item-md{ grid-row: span 2; }
        .item-lg{ grid-column: span 2; grid-row: span 2; }
        .item-wide{ grid-column: span 2; }
    
        /* responsive */
        @media (max-width: 768px){
          .mosaic-gallery{
            grid-template-columns: repeat(2, 1fr);
          }
    
          .item-lg,
          .item-wide{
            grid-column: span 2;
          }
        }

.wa-float{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:2147483647;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    font-family:inherit;
  }
  
  .wa-btn{
    min-width:60px;
    height:60px;
    padding:0 14px 0 18px;
    border-radius:999px;
    border:none;
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(37,211,102,.45);
    transition:transform .25s, box-shadow .25s;
  }
  .wa-btn:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 14px 36px rgba(37,211,102,.55);
  }
  .wa-btn-text{
    font-size:.95rem;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
  }
  .wa-btn svg{
    flex:0 0 auto;
  }
  
  .wa-card{
    position:absolute;
    right:0;
    bottom:74px;
    width:min(360px,92vw);
    background:#fff;
    border-radius:18px;
    border:1px solid #e3e6ea;
    box-shadow:0 18px 60px rgba(0,0,0,.25);
    overflow:hidden;
    transform:translateY(10px);
    opacity:0;
    transition:.25s ease;
  }
  .wa-card[aria-modal="true"]{
    transform:none;
    opacity:1;
  }
  
  .wa-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    background:linear-gradient(135deg,#0056a7,#003d77);
    color:#fff;
  }
  .wa-avatar{
    width:40px;
    height:40px;
    background:#fff;
    border-radius:10px;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .wa-avatar img{
    width:26px;
    height:26px;
    object-fit:contain;
  }
  .wa-title{
    font-weight:800;
  }
  .wa-status{
    font-size:.85rem;
    opacity:.9;
  }
  
  .wa-close{
    margin-left:auto;
    border:none;
    background:transparent;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.9;
  }
  .wa-close:hover{
    opacity:1;
    background:rgba(255,255,255,.14);
  }
  
  .wa-body{
    padding:14px;
    max-height:40vh;
    overflow:auto;
    background:#f8f9fa;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .wa-bubble{
    max-width:88%;
    padding:10px 12px;
    border-radius:14px;
    font-size:.95rem;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
  }
  .wa-bot{
    background:#fff;
    border:1px solid #e3e6ea;
    align-self:flex-start;
  }
  .wa-user{
    background:#eaf7f0;
    border:1px solid #cfeedd;
    align-self:flex-end;
  }
  
  .wa-compose{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px;
    border-top:1px solid #e3e6ea;
    background:#fff;
  }
  .wa-compose textarea{
    resize:none;
    border-radius:12px;
    padding:10px;
    border:1px solid #e3e6ea;
    font-family:inherit;
    outline:none;
  }
  .wa-send{
    background:#25D366;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:0 16px;
    cursor:pointer;
  }
  .wa-send:hover{
    background:#1fb85a;
  }
  
  @media(max-width:480px){
    .wa-float{
      right:12px;
      bottom:12px;
    }
    .wa-btn{
      height:54px;
      padding:0 12px 0 16px;
      gap:8px;
    }
    .wa-btn-text{
      font-size:.82rem;
    }
    .wa-card{
      width:calc(100vw - 24px);
    }
  }