:root{
    --green:#16a34a;
    --green-2:#22c55e;
    --text:#0f172a;
    --muted:#64748b;
    --bg:#ffffff;
    --card:#f8fafc;
    --border:#e2e8f0;
    --shadow:0 10px 30px rgba(2,6,23,.08);
    --radius:18px;
    --max:1200px;
    --pad:clamp(16px, 3vw, 28px);
  
    --ml-yellow:#facc15;
    --ml-yellow-border:#eab308;
  
    /* ✅ neon helpers */
    --neon-green: rgba(34,197,94,.75);
    --neon-yellow: rgba(250,204,21,.75);
    --neon-white: rgba(255,255,255,.35);
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  
  /* ✅ evita scroll horizontal */
  /* html, body{ overflow-x:hidden; } */
  
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
  }
  
  /* ====== Layout (Flex) ====== */
  .page{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
  }
  .container{
    width:100%;
    max-width:var(--max);
    margin:0 auto;
    padding:0 var(--pad);
  }
  
  /* ====== Header ====== */

  .header{
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.95);
    backdrop-filter:saturate(180%) blur(10px);
  
    position:fixed;   /* ✅ ahora sí queda pegado siempre */
    top:0;
    left:0;
    right:0;
    z-index:999;
  }

  .page{ padding-top:74px; } /* 74px = altura de tu header */
  
  .header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    height:74px;
    position:relative;
  }
  
  /* ====== Brand ====== */
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:220px;
    text-decoration:none;
    color:inherit;
  }
  .brand__logo{
    height:42px;
    width:auto;
    object-fit:contain;
    display:block;
    flex:0 0 auto;
  }
  .brand__text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
  }
  .brand__name{ font-weight:900; letter-spacing:.4px; }
  .brand__tag{ font-size:10px; color:var(--muted); margin-top:2px; }
  
  /* ====== Nav desktop ====== */
  .nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex:1;
  }
  .nav a{
    text-decoration:none;
    color:var(--text);
    font-weight:700;
    font-size:14px;
    padding:10px 10px;
    border-radius:12px;
  }
  .nav a:hover{ background:#f1f5f9; }
  
  /* ====== Actions ====== */
  .header__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    min-width:260px;
  }
  
  /* ====== Buttons ====== */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 14px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
  
    /* ✅ neon motion */
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    will-change: transform, box-shadow, filter;
  }
  .btn:active{ transform:translateY(1px) scale(.99); }
  
  /* ✅ neon hover base (suave, no cambia look demasiado) */
  .btn:hover{
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(15,23,42,.06),
      0 10px 24px rgba(2,6,23,.10);
  }
  
  .btn__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  
  /* ✅ WhatsApp neon */
  .btn--wa{
    background: linear-gradient(135deg, var(--green), var(--green-2));
    color:#fff;
    border:1px solid rgba(34,197,94,.35);
  
    box-shadow:
      0 10px 26px rgba(34,197,94,.24),
      0 0 22px rgba(34,197,94,.35);
  }
  .btn--wa:hover{
    filter:brightness(1.02);
    box-shadow:
      0 12px 30px rgba(34,197,94,.28),
      0 0 26px rgba(34,197,94,.45),
      0 0 0 1px rgba(255,255,255,.10) inset;
  }
  
  /* ✅ Mercado Libre neon amarillo (hero) */
  .btn--ml-yellow{
    background: var(--ml-yellow);
    border:1px solid var(--ml-yellow-border);
    color:#111827;
  
    box-shadow:
      0 10px 26px rgba(234,179,8,.20),
      0 0 22px rgba(250,204,21,.40);
  }
  .btn--ml-yellow:hover{
    filter:brightness(1.02);
    box-shadow:
      0 12px 30px rgba(234,179,8,.24),
      0 0 26px rgba(250,204,21,.50),
      0 0 0 1px rgba(255,255,255,.14) inset;
  }
  
  /* ✅ Mercado Libre header: ahora amarillo (antes era blanco) */
  .btn--ml{
    background: var(--ml-yellow);
    border:1px solid var(--ml-yellow-border);
    color:#111827;
  
    box-shadow:
      0 10px 22px rgba(234,179,8,.16),
      0 0 18px rgba(250,204,21,.30);
  }
  .btn--ml:hover{
    filter:brightness(1.02);
    box-shadow:
      0 12px 26px rgba(234,179,8,.20),
      0 0 22px rgba(250,204,21,.42);
  }
  
  /* ====== Pills ====== */
  .pill{
    font-size:12px;
    font-weight:900;
    letter-spacing:.3px;
    padding:6px 10px;
    border-radius:999px;
    background:#dcfce7;
    color:#166534;
    border:1px solid #bbf7d0;
  }
  
  /* ✅ pill “PLATINUM” sobre amarillo: más legible + mini neon */
  .pill--ml{
    background: rgba(255,255,255,.70);
    border:1px solid rgba(17,24,39,.14);
    color:#14532d;
    box-shadow: 0 0 14px rgba(255,255,255,.18);
  }
  
  /* ====== Mobile hamburger (no JS) ====== */
  .nav__toggle{ display:none; }
  
  .hamburger{
    display:none;
    width:44px;
    height:44px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
    position:relative;
  }
  
  /* ✅ animación a X */
  .hamburger span{
    width:18px;
    height:2px;
    background:var(--text);
    border-radius:999px;
    transition:transform .22s ease, opacity .18s ease;
    transform-origin:center;
  }
  
  /* cuando está checked: X */
  .nav__toggle:checked + .hamburger span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }
  .nav__toggle:checked + .hamburger span:nth-child(2){
    opacity:0;
  }
  .nav__toggle:checked + .hamburger span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }
  
  /* ====== Hero ====== */
  .hero{
    flex:1;
    display:flex;
    position:relative;
    overflow:hidden;
    align-items:center;
    justify-content:center;
  }
  
  .hero__bg{
    position:absolute;
    inset:0;
    z-index:0;
  
    background-image:url("/static/img/hero-bg.png");
    background-size:cover;
    background-position:right center;
    background-repeat:no-repeat;
  
    filter:saturate(1.05) contrast(1.05);
    opacity:.9;
  }
  
  .hero__bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(to right,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.45) 35%,
        rgba(0,0,0,.20) 60%,
        rgba(0,0,0,.05) 80%
      );
  }
  
  .hero__inner{
    position:relative;
    z-index:1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    padding:24px 0;
    min-height:calc(100svh - 74px);
  }
  
  .hero__left{
    flex:0 1 760px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:16px;
    min-width:280px;
  }
  
  .kicker{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    color:rgba(255,255,255,.75);
    font-weight:800;
    font-size:14px;
    align-items:center;
  }
  .dot{ width:6px;height:6px;border-radius:50%; background:var(--green); display:inline-block; }
  
  h1{
    margin:0;
    font-size:clamp(32px, 4vw, 54px);
    line-height:1.05;
    letter-spacing:-.5px;
    color:#ffffff;
  
    /* ✅ mejora lectura sobre foto */
    text-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  .accent{
    color:var(--green);
    font-weight:900;
    font-style:italic;
    text-shadow: 0 0 22px rgba(34,197,94,.28);
  }
  
  .sub{
    margin:0;
    color:rgba(255,255,255,.85);
    font-size:16px;
    line-height:1.5;
    max-width:56ch;
  
    /* ✅ mejora lectura */
    text-shadow: 0 8px 24px rgba(0,0,0,.28);
  }
  
  .hero__ctas{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:6px;
  }
  
  /* Trust chips */
  .trust{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
  }
  .trust__chip{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    background:rgba(248,250,252,.85);
    border:1px solid rgba(226,232,240,.9);
    border-radius:999px;
    font-weight:800;
    color:var(--text);
    font-size:13px;
  }
  .trust__icon{
    width:26px;height:26px;border-radius:999px;
    background:#dcfce7;
    border:1px solid #bbf7d0;
    display:flex;align-items:center;justify-content:center;
    color:#166534;
    font-weight:900;
    flex:0 0 auto;
  }
  
  /* ====== Responsive ====== */
  @media (max-width: 980px){
  
    /* ✅ ocultar el botón del header en mobile */
    .header__actions{ display:none; }
  
    /* mostrar hamburguesa */
    .hamburger{ display:flex; }
  
    /* ✅ evita que el logo/brand empuje y cause overflow */
    .brand{
      min-width:0;
      gap:10px;
    }
    .brand__text{
      min-width:0;
    }
    .brand__name,
    .brand__tag{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:52vw;
    }
  
    /* nav desplegable con transición suave */
    .nav{
      position:absolute;
      top:74px;
      left:0;
      right:0;
      text-align: center;
  
      display:flex;
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-start;
      gap:0;
      padding:10px;
  
      background:#fff;
      border-bottom:1px solid var(--border);
      box-shadow:0 12px 30px rgba(2,6,23,.08);
  
      transform:translateY(-10px);
      opacity:0;
      pointer-events:none;
  
      transition:transform .22s ease, opacity .22s ease;
      will-change:transform, opacity;
    }
  
    .nav a{
      padding:14px 14px;
      border-radius:14px;
    }
  
    .nav__toggle:checked ~ .nav{
      transform:translateY(0);
      opacity:1;
      pointer-events:auto;
    }
  
    /* ✅ Mobile: más padding y ancho correcto */
    .hero__inner{
      flex-direction:column;
      justify-content:flex-start;
      align-items:stretch;
      text-align: center;
      gap:14px;
      padding:16px 0;
      min-height:calc(100svh - 74px);
    }
  
    /* ✅ quita min-width que suele causar overflow */
    .hero__left{
      flex:1;
      min-width:0;
      width:100%;
      align-items:center;
      padding: 10px;
    }
  
    /* ✅ Mobile: overlay menos agresivo */
    .hero__bg::after{
      background:
        linear-gradient(to bottom,
          rgba(0,0,0,.55) 0%,
          rgba(0,0,0,.35) 45%,
          rgba(0,0,0,.10) 75%,
          rgba(0,0,0,0) 100%
        );
    }
  
    .hero__bg{ background-position:center;background-image: url("/static/img/mobile.png"); }
    .kicker{ display:none; }
  
    h1{ font-size:clamp(28px, 8vw, 40px); }
    .sub{ font-size:15px; }
  
    /* ✅ Mobile: botones apilados full */
    .hero__ctas{
      flex-direction:column;
      width:100%;
    }
    .hero__ctas .btn{
      width:100%;
      justify-content:center;
    }
  
    /* ✅ Mobile: chips en 2 columnas */
    .trust{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .trust__chip{
      width:100%;
      justify-content:flex-start;
    }
  }

/* FUENTE H1  ------------------------------*/
/* ====== Hero Title estilo referencia ====== */
.hero__title{
    margin:0;
    line-height:1.05;
    letter-spacing:-.5px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  
  /* Línea superior (tipo condensada, en mayúsculas) */
  .hero__titleTop{
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:clamp(22px, 2.2vw, 34px);
    color:#ffffff;
  }
  
  .hero__titleBottom{
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(34px, 4vw, 58px);
    letter-spacing: .08em;
    color: var(--green-2);
  
    text-shadow: 0 8px 28px rgba(0,0,0,.35);
  }
  
  /* mobile: evita que se corte */
  @media (max-width: 980px){
    .hero__titleTop{ font-size:clamp(18px, 4.6vw, 26px); }
    .hero__titleBottom{ font-size:clamp(30px, 8.5vw, 44px); }
  }

/* =========================================
   NOSOTROS — Premium / Claro / Verde (PRO BG)
========================================= */

.about{
  position: relative;
  padding: 90px 0 80px;
  overflow: hidden;

  /* base suave */
  background:
    radial-gradient(1200px 520px at 50% 0%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(900px 420px at 10% 20%, rgba(45,212,191,.14), transparent 60%),
    radial-gradient(900px 420px at 90% 30%, rgba(34,197,94,.12), transparent 60%),
    linear-gradient(180deg, #f7fbff 0%, #eef6f6 55%, #ffffff 100%);
}

/* ondas + brillo */
.about::before{
  content:"";
  position:absolute;
  inset:-120px -140px;
  pointer-events:none;
  z-index:0;
  opacity:.88;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='20%25' r='70%25'%3E%3Cstop offset='0%25' stop-color='%2322c55e' stop-opacity='.16'/%3E%3Cstop offset='70%25' stop-color='%2322c55e' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%2322c55e' stroke-opacity='.18' stroke-width='3'%3E%3Cpath d='M-80 250 C 220 120, 520 380, 820 250 S 1420 120, 1720 250'/%3E%3Cpath d='M-120 360 C 190 220, 520 520, 860 360 S 1460 220, 1780 360'/%3E%3Cpath d='M-140 480 C 160 340, 560 660, 940 480 S 1500 340, 1820 480'/%3E%3Cpath d='M-180 620 C 120 480, 620 780, 1020 620 S 1540 480, 1880 620'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='240' cy='170' r='2' opacity='.5'/%3E%3Ccircle cx='520' cy='120' r='1.6' opacity='.46'/%3E%3Ccircle cx='980' cy='160' r='2.2' opacity='.42'/%3E%3Ccircle cx='1220' cy='110' r='1.6' opacity='.42'/%3E%3Ccircle cx='1420' cy='210' r='2' opacity='.34'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(700px 340px at 50% 10%, rgba(255,255,255,.65), transparent 65%);

  background-repeat:no-repeat;
  background-size:cover;
  filter: blur(.2px);
}

/* contenido por encima del fondo */
.about .container{
  position: relative;
  z-index: 1;
}

.about__inner{
  display:flex;
  flex-direction:column;
  gap:56px;
}

/* Título centrado con líneas verdes */
.about__titleRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  text-align:center;
}

.about__line{
  height:3px;
  width:min(260px, 22vw);
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  border-radius:999px;
}

.about__title{
  margin:0;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  font-size:26px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#0f172a;
}

.about__title span{ color: var(--green); }

/* Grid principal */
.about__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:28px;
  align-items:stretch;
}

/* Media (izquierda) */
.about__media{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(226,232,240,.85);

  /* glass + sombra premium */
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 55px 140px rgba(2,6,23,.16),
    0 22px 55px rgba(2,6,23,.10);

  min-height: 420px;
}

.about__mediaBg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:saturate(1.03) contrast(1.02);
}

/* overlay sutil */
.about__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 260px at 15% 15%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.16));
}

.about__badge{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:2;

  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:12px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(226,232,240,.9);
  box-shadow: 0 18px 36px rgba(2,6,23,.14);

  font-weight:900;
  font-size:13px;
  color:#0f172a;
}

.about__badgeDot{
  width:10px;height:10px;border-radius:50%;
  background: var(--green-2);
  box-shadow: 0 0 0 6px rgba(34,197,94,.16);
}

/* Content (derecha) — glass */
.about__content{
  border-radius:28px;

  background: rgba(255,255,255,.78);
  border:1px solid rgba(226,232,240,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 45px 120px rgba(2,6,23,.12),
    0 18px 44px rgba(2,6,23,.08);

  padding: 26px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.about__headline{
  margin:0;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  font-size:22px;
  line-height:1.2;
  color:#0f172a;
}

.about__accent{
  color: var(--green);
}

.about__text{
  margin:0;
  color: #334155;
  font-size:15.5px;
  line-height:1.55;
}

/* bullets */
.about__bullets{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.about__bullet{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;

  background: rgba(255,255,255,.78);
  border:1px solid rgba(226,232,240,.9);
  box-shadow: 0 14px 30px rgba(2,6,23,.06);

  font-weight:800;
  color:#0f172a;
}

.about__icon{
  width:34px;height:34px;border-radius:999px;
  background:#dcfce7;
  border:1px solid #bbf7d0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#166534;
  flex:0 0 auto;
}

/* stats */
.about__stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:4px;
}

.aboutStat{
  border-radius:18px;
  background: rgba(255,255,255,.86);
  border:1px solid rgba(226,232,240,.9);
  padding:14px 12px;
  text-align:center;
  box-shadow: 0 16px 34px rgba(2,6,23,.08);
}

.aboutStat__num{
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  font-size:20px;
  color:#0f172a;
}

.aboutStat__label{
  margin-top:4px;
  font-weight:800;
  font-size:12px;
  color:#64748b;
}

/* ctas */
.about__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}

/* responsive */
@media (max-width: 980px){
  .about{
    padding: 60px 0 50px;
  }

  .about__inner{ gap:34px; }

  .about__grid{
    grid-template-columns: 1fr;
    gap:16px;
  }

  .about__media{
    min-height: 280px;
  }

  .about__content{
    padding:18px;
  }

  .about__headline{
    font-size:19px;
  }

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

@media (max-width: 520px){
  .about__title{ font-size:16px; }
  .about__line{ width:min(160px, 18vw); }

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

  .about__ctas .btn{
    width:100%;
    justify-content:center;
  }
}

  /* categorias -----------------------------------------*/

/* ====== Categorías (BIG / Mockup) ====== */
/* =========================================
   CATEGORÍAS — MOCKUP PREMIUM FINAL
   Más grande + sombra real + botones alineados
========================================= */

.cats{
    padding:100px 0 80px;
    background:#f3f6f9;
  }
  
  .cats__inner{
    display:flex;
    flex-direction:column;
    gap:56px;
  }
  
  /* =========================================
     TÍTULO
  ========================================= */
  
  .cats__titleRow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    text-align:center;
  }
  
  .cats__line{
    height:3px;
    width:min(260px, 22vw);
    background:linear-gradient(90deg, transparent, #22c55e, transparent);
    border-radius:999px;
  }
  
  .cats__title{
    margin:0;
    font-family:'Montserrat', sans-serif;
    font-weight:900;
    font-size:24px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#0f172a;
  }
  
  .cats__title span{
    color:#16a34a;
  }
  
  /* =========================================
     GRID
  ========================================= */
  
  .cats__grid{
    display:flex;
    gap:32px;
    justify-content:center;
    align-items:stretch;
    flex-wrap:nowrap;
  }
  
  /* =========================================
     TARJETA CONTENEDORA
  ========================================= */
  
  .catPoster{
    text-decoration:none;
    color:inherit;
    display:block;
  
    width:min(460px, 26vw);
    min-width:340px;
  }
  
  /* Marco exterior blanco */
  .catPoster__frame{
    position:relative;
    height:250px;
    border-radius:28px;
    padding:16px;
  
    background:#ffffff;
    border:1px solid rgba(226,232,240,.85);
  
    box-shadow:
      0 50px 120px rgba(2,6,23,.25),
      0 25px 60px rgba(2,6,23,.15);
  
    transition:all .28s ease;
  }
  
  /* Glow verde inferior */
  .catPoster__frame::after{
    content:"";
    position:absolute;
    left:26px;
    right:26px;
    bottom:18px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg, transparent, rgba(34,197,94,.95), transparent);
    opacity:.9;
  }
  
  /* Hover flotante más real */
  .catPoster:hover .catPoster__frame{
    transform:translateY(-16px);
    box-shadow:
      0 70px 160px rgba(2,6,23,.30),
      0 35px 80px rgba(2,6,23,.18);
  }
  
  /* =========================================
     IMAGEN INTERNA
  ========================================= */
  
  .catPoster__img{
    position:absolute;
    inset:16px;
    border-radius:22px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  
  /* Overlay suave */
  .catPoster__img::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:22px;
    background:linear-gradient(
      to bottom,
      rgba(255,255,255,.05),
      rgba(0,0,0,.18)
    );
  }
  
  /* =========================================
     LABEL SUPERIOR
  ========================================= */
  
  .catPoster__label{
    position:absolute;
    top:32px;
    left:32px;
    right:32px;
  
    padding:14px 20px;
    border-radius:999px;
    background:#ffffff;
  
    box-shadow:0 18px 36px rgba(2,6,23,.15);
  
    font-size:18px;
    font-weight:900;
    color:#0f172a;
  
    z-index:3;
  }
  
  /* =========================================
     BOTÓN
  ========================================= */
  
  .catPoster__btn{
    position:absolute;
    left:50%;
    bottom:36px;
    transform:translateX(-50%);
  
    min-width:220px;
    padding:16px 30px;
  
    border-radius:999px;
  
    font-size:16px;
    font-weight:900;
    text-align:center;
    line-height:1.2;
  
    color:#fff;
    background:linear-gradient(180deg,#22c55e 0%,#16a34a 100%);
    border:1px solid rgba(8,75,32,.35);
  
    box-shadow:
      0 22px 38px rgba(2,6,23,.20),
      0 14px 30px rgba(34,197,94,.40);
  
    display:flex;
    align-items:center;
    justify-content:center;
  
    white-space:normal;
    z-index:3;
    overflow:hidden;
  }
  
  /* Destello inferior */
  .catPoster__btn::after{
    content:"";
    position:absolute;
    left:22%;
    right:22%;
    bottom:-16px;
    height:20px;
    border-radius:999px;
    background:radial-gradient(closest-side, rgba(34,197,94,.55), transparent 70%);
    filter:blur(1.4px);
  }
  
  /* Shine animado */
  .catPoster__btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 40%, transparent 80%);
    transform:translateX(-120%);
    transition:transform .6s ease;
  }
  
  .catPoster:hover .catPoster__btn::before{
    transform:translateX(120%);
  }
  
  /* Promo más glow */
  .catPoster__btn--promo{
    box-shadow:
      0 22px 38px rgba(2,6,23,.20),
      0 14px 30px rgba(34,197,94,.45),
      0 0 35px rgba(34,197,94,.30);
  }
  
  /* =========================================
     RESPONSIVE
  ========================================= */
  
  @media (max-width:980px){
  
    .cats{
      padding:60px 0 50px;
    }
  
    .cats__grid{
      flex-wrap:wrap;
      gap:24px;
    }
  
    .catPoster{
      width:100%;
      min-width:0;
    }
  
    .catPoster__frame{
      height:270px;
    }
  
  }
  
  @media (max-width:520px){
  
    .cats__title{
      font-size:16px;
    }
  
    .catPoster__frame{
      height:290px;
    }
  
  }



  /* scroll ---------------------------------*/
/* =================================
   SCROLL SUAVE + OFFSET HEADER FIJO
   (funciona con main/div/section/etc)
================================= */
/* ============================
   SCROLL SUAVE (anchors)
============================ */
html, body{
    scroll-behavior: smooth;
  }
  
  /* offset para header fijo (tu header mide 74px) */
  :root{
    scroll-padding-top: 74px;
  }
  
  /* fallback extra */
  [id]{
    scroll-margin-top: 74px;
  }
/* =========================================
   EVENTO (SECCIÓN INDEPENDIENTE)
========================================= */

.event{
  padding: 80px 0;
  background: #f3f6f9;
}

.event .container{
  max-width: 1400px;
}

/* -------- TÍTULO EVENTO -------- */

.event__titleRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  text-align:center;
  margin-bottom:60px;
}

.event__line{
  height:3px;
  width:min(260px, 22vw);
  background:linear-gradient(90deg, transparent, var(--green), transparent);
  border-radius:999px;
}

.event__title{
  margin:0;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  font-size:26px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#0f172a;
}

.event__title span{
  color:var(--green);
}

/* -------- BANNER EVENTO -------- */

.eventBanner{
  position: relative;
  width: 100%;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(226,232,240,.95);

  box-shadow:
    0 30px 90px rgba(2,6,23,.10),
    0 10px 30px rgba(2,6,23,.06);

  padding: 26px;

  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 26px;
  align-items: stretch;
  min-height: 260px;
}
@media (max-width: 1100px){
  .eventBanner{
    display: flex;
    flex-direction: column;
  }

}

/* -------- PANEL EVENTO -------- */

.eventPanel{
  background: #ffffff;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 16px 40px rgba(2,6,23,.06);
  display: flex;
  flex-direction: column;
  justify-content: center;

  transform: rotate(-0.6deg);
}

.eventTopTitle{
  margin: 0 0 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 13px;
  text-transform: uppercase;
  color: #0f172a;
}

.eventTopTitle span{
  color:#16a34a;
}

.eventInfo{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eventInfo__row{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(226,232,240,.9);
}

.eventInfo__ico{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  flex: 0 0 auto;
  font-size: 14px;
}

.eventInfo__txt strong{
  display: block;
  font-weight: 900;
  font-size: 15px;
  color: #0f172a;
}

.eventInfo__sub{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

/* -------- BOTÓN EVENTO -------- */

.eventBtn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  color: #fff;

  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  border: 1px solid rgba(8,75,32,.28);

  box-shadow:
    0 16px 28px rgba(2,6,23,.08),
    0 8px 16px rgba(34,197,94,.18);

  transition: all .2s ease;
}

.eventBtn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 34px rgba(2,6,23,.12),
    0 10px 20px rgba(34,197,94,.24);
}

/* -------- MEDIA EVENTO -------- */

.eventMedia{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 16px 40px rgba(2,6,23,.06);
  transform: rotate(0.8deg);
  min-height: 260px;
  background:#f8fafc;
  display:flex;
}

.eventMedia__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* =========================================
   UBICACIÓN (FIJA) — PRO BACKGROUND
========================================= */

.loc{
  position: relative;
  padding: 90px 0;
  overflow: hidden;

  /* base suave */
  background:
    radial-gradient(1200px 520px at 50% 0%, rgba(34,197,94,.22), transparent 60%),
    radial-gradient(900px 420px at 10% 20%, rgba(45,212,191,.18), transparent 60%),
    radial-gradient(900px 420px at 90% 30%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, #f7fbff 0%, #eef6f6 55%, #f3f6f9 100%);
}

/* ondas + brillo */
.loc::before{
  content:"";
  position:absolute;
  inset:-120px -140px;
  pointer-events:none;
  z-index:0;
  opacity:.92;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='20%25' r='70%25'%3E%3Cstop offset='0%25' stop-color='%2322c55e' stop-opacity='.18'/%3E%3Cstop offset='70%25' stop-color='%2322c55e' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%2322c55e' stroke-opacity='.22' stroke-width='3'%3E%3Cpath d='M-80 250 C 220 120, 520 380, 820 250 S 1420 120, 1720 250'/%3E%3Cpath d='M-120 360 C 190 220, 520 520, 860 360 S 1460 220, 1780 360'/%3E%3Cpath d='M-140 480 C 160 340, 560 660, 940 480 S 1500 340, 1820 480'/%3E%3Cpath d='M-180 620 C 120 480, 620 780, 1020 620 S 1540 480, 1880 620'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='240' cy='170' r='2' opacity='.55'/%3E%3Ccircle cx='520' cy='120' r='1.6' opacity='.5'/%3E%3Ccircle cx='980' cy='160' r='2.2' opacity='.45'/%3E%3Ccircle cx='1220' cy='110' r='1.6' opacity='.45'/%3E%3Ccircle cx='1420' cy='210' r='2' opacity='.38'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(700px 340px at 50% 10%, rgba(255,255,255,.65), transparent 65%);

  background-repeat:no-repeat;
  background-size:cover;
  filter: blur(.2px);
}

/* contenido por encima del fondo */
.loc .container{
  position: relative;
  z-index: 1;
  max-width: 1400px;
}

/* -------- TÍTULO UBICACIÓN (CONSISTENTE) -------- */

.loc__titleRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  text-align:center;
  margin-bottom:60px;
}

.loc__line{
  height:3px;
  width:min(260px, 22vw);
  background:linear-gradient(90deg, transparent, var(--green), transparent);
  border-radius:999px;
}

.loc__title{
  margin:0;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  font-size:26px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#0f172a;
}

.loc__title span{
  color:var(--green);
}

/* -------- BANNER UBICACIÓN -------- */

.locBanner{
  position: relative;
  width: 100%;
  border-radius: 22px;

  /* glass */
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 40px 120px rgba(2,6,23,.12),
    0 12px 40px rgba(2,6,23,.06);

  padding: 28px;

  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 26px;
  align-items: stretch;
  min-height: 280px;
}

/* tarjeta lateral */
.locPanel{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 18px;
  padding: 22px;

  box-shadow:
    0 18px 55px rgba(2,6,23,.08);

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* MAPA */
.locMapCard{
  position: relative;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(226,232,240,.95);
  overflow: hidden;

  box-shadow:
    0 40px 110px rgba(2,6,23,.14),
    0 12px 38px rgba(2,6,23,.08);

  min-height: 320px;
  transform: rotate(0.6deg);
}

.locMapCard::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.9);
  pointer-events:none;
  z-index:2;
}

.locMapCard__iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* panel ubícanos */
.locPanel--find{
  text-align: center;
  gap: 14px;
}

.locFindTitle{
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 15px;
  text-transform: uppercase;
  color: #0f172a;
}

.locFindLine{
  width: 86px;
  height: 3px;
  border-radius: 999px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
}

.locFindText{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #475569;
  line-height: 1.45;
}

.locSchedule{
  margin: 6px 0 18px;
  font-size:14px;
  font-weight:700;
  color:#475569;
  line-height:1.45;
}

/* botón */
.locBtn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 15px 18px;
  border-radius: 16px;
  font-weight: 900;
  text-decoration: none;
  color: #fff;

  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  border: 1px solid rgba(8,75,32,.28);

  box-shadow:
    0 18px 32px rgba(2,6,23,.08),
    0 10px 20px rgba(34,197,94,.18);

  transition: all .2s ease;
}

.locBtn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 26px 44px rgba(2,6,23,.12),
    0 14px 26px rgba(34,197,94,.24);
}

/* =========================================
   RESPONSIVE UBICACIÓN
========================================= */

@media (max-width: 1100px){
  .loc{
    padding: 70px 0;
  }

  .locBanner{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
  }

  .locMapCard{
    transform: rotate(.35deg);
    min-height: 260px;
    border-radius: 16px;
  }

  .locPanel{
    border-radius: 16px;
  }
}

/* footer ----------------------------------------------*/
/* =========================================
   FOOTER SINERGY — igual referencia
========================================= */
/* =========================================
   FOOTER SINERGY — FINAL PRO VERSION
========================================= */

.siteFooter{
  position: relative;
  background:#ffffff;
  overflow:hidden;
  border-top: 1px solid rgba(226,232,240,.9);
}

/* Wrap */
.siteFooter__wrap{
  position: relative;
  z-index: 3;
  padding: 24px 0 0;
}

/* =========================
   TOP ROW
========================= */

.siteFooter__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 24px;
  padding-bottom: 18px;
}

/* =========================
   BRAND
========================= */

.siteFooter__brand{
  display:flex;
  align-items:center;
  gap: 14px;
  text-decoration:none;
  color:#0f172a;
  min-width: 260px;
}

.siteFooter__logo{
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.siteFooter__brandText{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.siteFooter__brandName{
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:22px;
}

.siteFooter__brandTag{
  margin-top:4px;
  font-size:10px;
  font-weight:800;
  color:#64748b;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* =========================
   BLOCKS
========================= */

.siteFooter__block{
  flex:1;
  max-width:360px;
  padding: 0 18px;
  position:relative;
}

/* Separadores verticales */
.siteFooter__block:not(:first-of-type)::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(34,197,94,.45),
    rgba(148,163,184,.25),
    transparent
  );
}

/* Titles */
.siteFooter__blockTitle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;

  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#0f172a;
  margin-bottom:10px;
}

.siteFooter__blockTitle::before,
.siteFooter__blockTitle::after{
  content:"";
  height:2px;
  width:80px;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
}

/* =========================
   CONTACT ITEMS
========================= */

.siteFooter__items{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.siteFooter__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  color:#0f172a;
}

.siteFooter__ico{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eafff1;
  border:1px solid rgba(34,197,94,.35);
  color:#16a34a;
  font-size:14px;
}

/* =========================
   SOCIAL
========================= */

.siteFooter__social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:4px;
}

.siteFooter__socialBtn{
  width:30px;
  height:30px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:#ffffff;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 8px 18px rgba(2,6,23,.08);
  font-weight:900;
  color:#0f172a;
  transition:.2s ease;
}

.siteFooter__socialBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(2,6,23,.12);
}

.siteFooter__handles{
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  text-align:center;
  color:#334155;
}

/* =========================
   WHATSAPP BUTTON (FIXED)
========================= */

.siteFooter__cta{
  min-width:260px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  position:relative;
  z-index:5;
}

/* botón más limpio */
.siteFooter__waBtn{
  display:inline-flex;
  align-items:center;
  gap:12px;

  height:44px;
  padding:0 18px 0 14px;
  border-radius:999px;

  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:15px;
  white-space:nowrap;
  text-decoration:none;
  color:#fff;

  background:linear-gradient(180deg,#28d566 0%,#1fb154 100%);
  border:1px solid rgba(10,120,50,.2);

  box-shadow:
    0 14px 28px rgba(34,197,94,.25),
    0 10px 20px rgba(2,6,23,.15);

  transition:.18s ease;
}

.siteFooter__waBtn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 18px 34px rgba(34,197,94,.35),
    0 14px 26px rgba(2,6,23,.18);
}

/* círculo icono */
.siteFooter__waIco{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.2);
}

.siteFooter__waIco svg{
  width:16px;
  height:16px;
  display:block;
}

/* =========================
   BOTTOM ROW
========================= */

.siteFooter__bottom{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px 0 18px;
  border-top:1px solid rgba(226,232,240,.85);
}

.siteFooter__copy{
  font-size:13px;
  font-weight:700;
  color:#334155;
}

.siteFooter__ml{
  position:absolute;
  right:140px;
  top:50%;
  transform:translateY(-50%);
}

.siteFooter__mlImg{
  height:34px;
  filter:drop-shadow(0 10px 18px rgba(2,6,23,.12));
  border-radius:8px;
}

/* =========================
   DECORATION
========================= */

.siteFooter__decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.siteFooter__decor::after{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-30px;
  width:520px;
  height:140px;
  background:linear-gradient(180deg,#16a34a 0%,#0f7a34 100%);
  transform:rotate(-12deg);
  border-radius:28px;
  box-shadow:0 30px 70px rgba(2,6,23,.22);
}

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

@media (max-width:1100px){

  .siteFooter__top{
    flex-direction:column;
    align-items:center;
    gap:20px;
  }

  .siteFooter__block{
    max-width:none;
    padding:0;
  }

  .siteFooter__block:not(:first-of-type)::before{
    display:none;
  }

  .siteFooter__cta{
    justify-content:center;
  }

  .siteFooter__ml{
    position:static;
    transform:none;
  }

  .siteFooter__bottom{
    justify-content:space-between;
    flex-direction: column;
  }
}

@media (max-width:520px){

  .siteFooter__brand{
    justify-content:center;
  }

  .siteFooter__waBtn{
    width:100%;
    justify-content:center;
  }

  .siteFooter__copy{
    font-size:12px;
  }
}