/* ------------------------------------------------------------
   VARIABLES CNEIP
------------------------------------------------------------ */
:root{
  --vino:#6f0808;
  --vino-osc:#511111;
  --dorado:#d2b886;
  --beige:#fdeada;
  --soft:#f6f7fb;
  --ink:#1f2328;
  --card:#ffffff;
  --radius:22px;
  --shadow:0 12px 32px rgba(0,0,0,.12);
  --shadow-soft:0 6px 20px rgba(0,0,0,.08);
  --font-head:'Source Serif Pro', serif;
  --font-body:'Inter', sans-serif;
    
    
     --gold:#d8c49c;
  --gold-soft:#eadfc8;
  --gray:#666;
  --bg:#f8f5ef;
  --card:#ffffff;
  --line:#e4dccb;

 

    
    
}








/* ------------------------------------------------------------
   RESET
------------------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--soft);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden!important;
  position:relative;
}

/* ------------------------------------------------------------
   NAVBAR
------------------------------------------------------------ */
.navbar{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:65px;
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,.38);
  border-bottom:1px solid rgba(255,255,255,.4);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  z-index:4000 !important;
}
.nav-left{display:flex;align-items:center;gap:18px;}
.nav-left img{width:58px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.18));}
.nav-title{font-family:var(--font-head);font-size:28px;color:var(--vino-osc);}
.nav-links a{
  margin:0 20px;
  text-decoration:none;
  color:var(--vino-osc);
  font-weight:500;
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:.3s;
}
.nav-links a:hover{border-color:var(--vino);}

/* ------------------------------------------------------------
   BOTÓN MOBILE MENU
------------------------------------------------------------ */
.menu-toggle{
  display:none;
  position:fixed;
  top:0px; left:20px;
  background:white;
  padding:14px;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  cursor:pointer;
  z-index:4500;
}
.menu-toggle span{
  display:block;width:26px;height:3px;
  background:var(--vino);margin:5px 0;border-radius:3px;
}

/* ------------------------------------------------------------
   MAIN CONTENT
------------------------------------------------------------ */
.main{
  margin-left:320px;
  padding-top:65px;

}
@media(max-width:980px){
  .main{margin-left:0;}
}

/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */
.hero{
  background:linear-gradient(180deg, var(--beige) 0%, #ffffff 100%);
  padding:30px 70px 30px;
  position:relative;
}
.hero .title{font-size:48px;font-family:var(--font-head);font-weight:700;color:var(--vino-osc);margin-bottom:0px;}
.hero .sub{font-size:20px;max-width:650px;opacity:.85;margin-bottom:26px;line-height:1.4;}
.btn-primary{padding:14px 26px;background:var(--vino);color:white;border-radius:12px;font-weight:600;text-decoration:none;}

/* ------------------------------------------------------------
   SLIDESHOW
------------------------------------------------------------ */
.slideshow{
  width:88%;height:360px;margin:40px auto;
  border-radius:22px;overflow:hidden;position:relative;
  box-shadow:var(--shadow);background:#000;
}
.slide{
  width:100%;height:100%;position:absolute;
  top:0;left:0;opacity:0;transition:opacity 1.1s ease;
}
.slide.active{opacity:1 !important;}
.slide img{width:100%;height:100%;object-fit:cover;filter:brightness(85%);opacity:1!important;}
.slide .textslide{position:absolute;bottom:40px;left:40px;color:white;max-width:60%;    z-index:10;}
.slide .textslide h1{font-family:var(--font-head);font-size:36px;margin-bottom:10px; color:white}
.slide .textslide p{font-size:18px;}

/* ------------------------------------------------------------
   SECTIONS + CARDS
------------------------------------------------------------ */
.section{padding:70px;background:white;border-bottom:1px solid rgba(0,0,0,.08);}
.section h2{font-family:var(--font-head);font-size:36px;color:var(--vino-osc);margin-bottom:16px;}
.section p{max-width:900px;font-size:18px;line-height:1.65;margin-bottom:18px;color:#333;}



.card{
  background:white;border-radius:18px;padding:32px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow-soft);
  transition:.25s ease;
}
.card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 22px 48px rgba(0,0,0,.16);}

/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */
footerAAA{
  background:#fafafa;padding:40px;text-align:center;
  font-size:14px;color:#666;
  border-top:1px solid rgba(0,0,0,.08);
}


/* ============================================================
   FOOTER
============================================================ */
.footer_p{
  background:var(--vino-osc);
  color:white;
  padding:40px;
  text-align:center;
    
 
    
    
}
@media(max-width:950px){
  .footer_p{margin-left:0;}
}


/* ------------------------------------------------------------
   RESPONSIVE HERO + SLIDESHOW
------------------------------------------------------------ */
@media(max-width:700px){
  .hero{padding:90px 26px 60px;}
  .hero .title{font-size:34px;}
  .slideshow{width:94%;height:240px;}
}
@media(max-width:700px){
  .navbar{height:70px;padding:0 18px;}
  .nav-left img{width:54px;}
  .main{padding-top:72px !important;}
  .nav-title{font-size:20px;}
  .nav-links{display:none;}
}
@media(max-width:700px){
  .menu-toggle{top:16px;left:16px;padding:10px;border-radius:10px;}
  .menu-toggle span{width:22px;height:3px;margin:4px 0;}
}
@media(max-width:700px){
  .hero{padding:35px 24px 50px !important;}
  .hero .title{font-size:28px;line-height:1.2;}
  .hero .sub{font-size:16px;}
  .btn-primary{padding:12px 20px;font-size:15px;border-radius:10px;}
}
@media(max-width:700px){
  .slideshow{height:210px;width:92%;border-radius:18px;}
  .slide .textslide{bottom:22px;left:20px;max-width:80%;}
  .slide .textslide h1{font-size:22px;}
  .slide .textslide p{font-size:14px;}
}
@media(max-width:700px){
  .section{padding:40px 24px;}
  .section h2{font-size:26px;}
  .section p{font-size:16px;}
}
@media(max-width:700px){
  .menu-toggle{right:16px !important;left:auto !important;top:14px !important;}
}

/* BOTÓN MÓVIL — VERSIÓN FINAL */
.menu-toggle{
    display:none;
    position:fixed;
    top:18px;
    left:18px;
    background:white;
    padding:12px;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.20);
    cursor:pointer;
    z-index:5000 !important;
}
.menu-toggle span{
    display:block;
    width:26px;
    height:3px;
    background:var(--vino);
    margin:5px 0;
    border-radius:3px;
}

/* SOLO EN MÓVIL */
@media(max-width:980px){
    .menu-toggle{display:block;}
}









/* ============================================================
   SIDEBAR — VERSIÓN ÚNICA Y FINAL
=========================================================== */
.sidebar{
    width:320px;
    height:100vh;
    position:fixed;
    top:85px;
    left:0;
    padding:32px 26px;
    overflow-y:auto;
    z-index:3000;
    border-right:1px solid rgba(0,0,0,.06);
    transition:left .35s ease;

    background:rgba(255,255,255,0.70);
    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);

    background-image:
        linear-gradient(to bottom,
            rgba(255,255,255,0.92) 0px,
            rgba(250,245,240,0.72) 80px,
            rgba(255,255,255,0) 200px
        ),
        radial-gradient(circle at 20% 18%,
            rgba(230,224,215,0.45) 0%,
            transparent 55%
        ),
        radial-gradient(circle at 85% 24%,
            rgba(214,205,198,0.32) 0%,
            transparent 60%
        ),
        linear-gradient(
            to bottom,
            rgba(240,232,224,0.40) 260px,
            rgba(255,255,255,0) 500px
        ),
        repeating-linear-gradient(
            45deg,
            rgba(160,150,140,0.05) 0,
            rgba(160,150,140,0.05) 1px,
            transparent 1px,
            transparent 20px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(160,150,140,0.04) 0,
            rgba(160,150,140,0.04) 1px,
            transparent 1px,
            transparent 22px
        );
}













.sidebar .panel a:hover{color:var(--vino);}
.sidebar-qualis{
    display:none;
    margin-top:22px;
    padding-top:10px;
    font-size:17px;
    font-weight:700;
    color:var(--vino);
    
}

/* Main desplazado (desktop) */
.main{margin-left:320px !important;}

/* MOBILE */
@media(max-width:980px){

    .sidebar{
        width:270px;
        top:70px;
        left:-300px !important;
        padding:22px 18px;
        height:calc(100vh - 70px);
    }
    .sidebar.open{left:0 !important;}
    .main{margin-left:0 !important;}
    .sidebar-qualis{display:block;}
}



/* ============================================================
   SIDEBAR · CNEIP – MULTICAPA PREMIUM
   Clase: .bariz
=========================================================== */

.bariz{
    width:320px;
    height:100vh;
    position:fixed;
    top:85px;
    left:0;
    padding:32px 26px;
    overflow-y:auto;
    z-index:3000;
    border-right:1px solid rgba(0,0,0,.06);

    /* VIDRIO REAL */
    background:rgba(255,255,255,0.60);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);

    /* ============================
       MULTICAPA PROFESIONAL REAL
       ============================ */
    
}




.sidebar-qualis{
    display:none;
    margin-top:22px;
    padding-top:10px;
    font-size:17px;
    font-weight:700;
    color:var(--vino);
}






/* ============================================================
   ESTILOS MENU LATERAL (CORREGIDO - ESPACIADO PERFECTO)
============================================================ */

/* 1. Contenedor Flexible */
.acorbariz {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Este gap controla la separación real entre botones visibles */
    gap: 4px; 
}

/* 2. Estilo Base de Botones */
.bariz .acorbariz button,
.bariz-btn-link, 
.bariz-btn-link_ini {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    
    font-family: 'Inter', sans-serif;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1f2328;
    
    /* Espacio interno del botón */
    padding: 10px 18px; 
    border-radius: 8px;
    margin: 0; /* Quitamos márgenes externos, el 'gap' hace el trabajo */
    
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

/* 3. Hover (Solo visual) */
.bariz .acorbariz button:hover,
.bariz-btn-link:hover, 
.bariz-btn-link_ini:hover {
    color: var(--vino);
    background: rgba(111, 8, 8, 0.04);
    transform: translateX(4px);
}

/* 4. Estado Activo */
.bariz .acorbariz button.active {
    color: var(--vino);
    font-weight: 700 !important;
    background: rgba(111, 8, 8, 0.02);
}

/* 5. SUBMENÚS (LA SOLUCIÓN AL ESPACIO) */
.barizpanel {
    /* ¡ESTA LÍNEA FALTABA! Oculta el panel por defecto */
    display: none; 
    
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    
    /* Margen solo cuando está abierto para separar los links */
    margin-top: 0px; 
    margin-bottom: 8px; 
    overflow: hidden; 
}

.barizpanel a {
    display: block;
    box-sizing: border-box;
    padding: 8px 10px 8px 25px;
    font-size: 15px;
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.barizpanel a:hover {
    color: var(--vino);
    transform: translateX(4px);
}

/* 6. Ajuste específico para el botón de contacto */
.btn-contact-refined {
    margin-top: 15px !important; /* Un poco de aire extra solo antes de contacto */
    margin-bottom: 0 !important;
}










/* ============================================================
    MAIN DESPLAZADO (DESKTOP)
=========================================================== */
.main{
    margin-left:320px !important;
}



/* ============================================================
    MODO MÓVIL
=========================================================== */
@media(max-width:980px){

    .bariz{
        width:270px;
        top:70px;
        left:-300px !important;
        height:calc(100vh - 70px);
        padding:22px 18px;
        transition:left .35s ease;
    }

    .bariz.open{
        left:0 !important;
    }

    .main{
        margin-left:0 !important;
    }

    .sidebar-qualis{
        display:block;
    }
}

.slide[data-link]{
  transition: transform .45s cubic-bezier(.25,.8,.25,1), 
              box-shadow .45s cubic-bezier(.25,.8,.25,1), 
              filter .45s cubic-bezier(.25,.8,.25,1);
}

.slide[data-link]:hover{
  transform: scale(1);
  filter: brightness(1.08) saturate(120%);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

.slide[data-link] .textslide{
  transition: transform .45s cubic-bezier(.25,.8,.25,1),
              text-shadow .45s cubic-bezier(.25,.8,.25,1);
}

.slide[data-link]:hover .textslide{
  transform: translateY(-6px);
  text-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

.slide {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  transition:opacity 1.1s ease;
  cursor: default;
}

.slide.active {
  opacity:1 !important;
}

.slide-link {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:5;
  cursor:pointer;
  text-decoration:none;
  background:transparent;
  display:block;
}



/* ============================================================
   Flechas VisionOS
=========================================================== */
.slide-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:58px;
  height:58px;
  border-radius:18px;
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  background:rgba(255,255,255,0.28);
  box-shadow:
      0 8px 24px rgba(0,0,0,0.20),
      inset 0 0 0 1px rgba(255,255,255,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:50;
  transition:.35s ease;
}

.slide-arrow:hover {
  background:rgba(255,255,255,0.40);
  box-shadow:
      0 12px 30px rgba(0,0,0,0.24),
      inset 0 0 0 1px rgba(255,255,255,0.55);
  transform:translateY(-50%) scale(1.08);
}

/* Icono flecha VisionOS */
.slide-arrow::before {
  content:"";
  display:block;
  width:16px;
  height:16px;
  border-top:2.4px solid rgba(0,0,0,0.75);
  border-right:2.4px solid rgba(0,0,0,0.75);
  transform:rotate(45deg);
}

/* Flecha izquierda */
.slide-arrow.left {
  left:20px;
}

.slide-arrow.left::before {
  transform:rotate(225deg);
}

/* Flecha derecha */
.slide-arrow.right {
  right:20px;
}

.slide-arrow.right::before {
  transform:rotate(45deg);
}







/* PARALLAX REAL VisionOS */
.slide {
  perspective: 1400px;
  transform-style: preserve-3d;
}

.slide img {
  transition: transform .25s ease-out, filter .35s ease-out;
  transform-origin: center;
}

.slide .textslide {
  position: absolute;
  bottom:40px; left:40px;
  transition: transform .25s ease-out, text-shadow .35s ease-out;
  transform-origin: center;
}



.slide {
  position: relative;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.slide-link {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index:50;           /* SIEMPRE ARRIBA */
  cursor:pointer;
  background:transparent;
}

.slide-link{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    z-index:25;               /* exactamente este valor */
    pointer-events:auto;      /* permite el click */
    background:transparent;
    display:block;
    cursor:pointer;
}

/* FIX SLIDER FINAL */
.slideshow {
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease-in-out;
}

.slide.active {
  opacity: 1;
  z-index: 3;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1 !important;
  display: block !important;
  z-index: 1;
}
/* FORZAR QUE LAS IMÁGENES SE VEAN */
.slide img {
  pointer-events: none;
}


/* ============================================
   FIX DEFINITIVO — CLICK + HOVER EN SLIDES
   ============================================ */

/* Evita que capas superiores bloqueen el click */
.slide *,
.slide::before,
.slide::after,
.slide .textslide,
.slide .textslide::before {
    pointer-events: none !important;
}

/* Permite que SÓLO el slide completo reciba el click */
.slide {
    pointer-events: auto !important;
    cursor: pointer !important;
}



/* ============================================================
        ULTRA VISION PRO ARROWS — HOLOGRAPHIC MOTION
============================================================ */

.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  width: 48px;
  height: 48px;
  border-radius: 19.5px;

  /* Multi-layer glass */
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(38px) saturate(260%);
  -webkit-backdrop-filter: blur(38px) saturate(260%);

  /* Glow volumétrico */
  box-shadow:
      0 0 34px rgba(255,255,255,0.30),
      0 14px 34px rgba(0,0,0,0.32),
      inset 0 0 18px rgba(255,255,255,0.22),
      inset 0 0 40px rgba(255,255,255,0.18);

  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  z-index: 40;
  transition: all .45s cubic-bezier(.25,.1,.25,1);
  overflow: hidden;
}

/* Hologram animated gradient inside */
.slide-arrow::after {
  content:"";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.12) 35%,
      rgba(255,255,255,0) 70%
  );
  opacity: .45;
  transition: opacity .35s ease;
  pointer-events: none;
}

/* Icono VisionOS */
.slide-arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 3px solid rgba(255,255,255,0.85);
  border-right: 3px solid rgba(255,255,255,0.85);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.75));
  transition: all .45s ease;
  z-index: 10;
}

/* Flecha izquierda */
.slide-arrow.left::before {
  transform: rotate(-135deg);
}

/* Flecha derecha */
.slide-arrow.right::before {
  transform: rotate(45deg);
}

.slide-arrow.left  { left: 26px; }
.slide-arrow.right { right: 26px; }

/* ============================================================
      ULTRA HOVER — LEVITATION + REFRACTION + INTENSE GLOW
============================================================ */
.slide-arrow:hover {
    
  background: rgba(255,255,255,0.18);
  transform: translateY(calc(-50% - 2px)) scale(1.18);
  box-shadow:
      0 0 50px rgba(255,255,255,0.40),
      0 22px 40px rgba(0,0,0,0.36),
      inset 0 0 28px rgba(255,255,255,0.45),
      inset 0 0 55px rgba(255,255,255,0.28);
}

.slide-arrow:hover::before {
  border-color: #fff;
  filter: drop-shadow(0 0 10px rgba(255,255,255,1));
}

.slide-arrow:hover::after {
  opacity: .75;
}


/* ============================================================
    MOUSE PARALLAX — LUZ DIRECCIONAL REAL
============================================================ */
.slide-arrow {
  --mx: 50%;
  --my: 50%;
}

.slide-arrow:hover {
  transition: transform .15s cubic-bezier(.25,.5,.15,1.5),
              box-shadow .25s ease;
}


/* ============================================================
      MÓVIL — DOT ARROWS PREMIUM
============================================================ */
@media(max-width: 768px){
  .slide-arrow {
      display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: 8px;
    right: 8px;

    background: rgba(255,255,255,0.28);
    backdrop-filter: blur(20px) saturate(160%);

    box-shadow:
      0 6px 12px rgba(0,0,0,.20),
      inset 0 0 12px rgba(255,255,255,.20);

    border: 1px solid rgba(255,255,255,0.25);
  }

  .slide-arrow::before{
    width: 12px;
    height: 12px;
    border-width: 2px;
  }

  .slide-arrow.left { left: 14px; }
  .slide-arrow.right { right: 14px; }
}


@media(max-width: 768px){

  /* Mantener TODO igual, excepto la posición */
  .slide-arrow.left {
    left: 12px !important;
    right: auto !important;
  }

  .slide-arrow.right {
    right: 12px !important;
    left: auto !important;
  }

}








/* ============================================================
    VISION PRO — HOLOGRAPHIC LAYER SHIFT TRANSITION
============================================================ */

.slide {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .75s ease;
}

.slide.active {
  opacity:1;
}

/* Capas holográficas */
.slide::before,
.slide::after {
  content:"";
  position:absolute;
  inset:0;
  background:inherit;
  background-size:cover;
  background-position:center;
  pointer-events:none;
  opacity:0;
  transition:all .75s cubic-bezier(.25,.1,.25,1);
}

/* Capa left-shift (tono frío) */
.slide.holo-start::before {
  opacity:.55;
  filter:blur(18px) hue-rotate(28deg) saturate(150%);
  transform:translateX(-22px) scale(1.06);
}

/* Capa right-shift (tono cálido) */
.slide.holo-start::after {
  opacity:.40;
  filter:blur(14px) hue-rotate(-22deg) saturate(130%);
  transform:translateX(18px) scale(1.04);
}

/* Cuando entra el slide siguiente */
.slide.holo-end::before,
.slide.holo-end::after {
  opacity:0;
  transform:translateX(0) scale(1);
  filter:blur(0);
}


/* ============================================================
   ULTRA VISION PRO CAPTION — Reactive AI Glass Capsule
============================================================ */

.glass-caption {
  position: absolute;
  bottom: 40px;
  left: 40px;
  max-width: 78%;
  padding: 22px 32px;
  border-radius: 26px;

  /* Base glass */
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.22);

  /* Glow volumétrico */
  box-shadow:
    0 10px 40px rgba(0,0,0,0.35),
    inset 0 0 20px rgba(255,255,255,0.18);

  transform: translateZ(120px);
  z-index: 9;
  overflow: hidden;

  transition:
      background .45s ease,
      padding .35s ease,
      border .45s ease,
      box-shadow .45s ease;
}

/* Capsule halo behind */
.glass-caption::before {
  content:"";
  position:absolute;
  inset:-28px -38px;
  border-radius:40px;
  background: radial-gradient(
      circle at 50% 55%,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.25) 55%,
      rgba(0,0,0,.1) 85%,
      rgba(0,0,0,0) 100%
  );
  opacity: .9;
  filter: blur(25px);
  pointer-events:none;
  transition: opacity .45s ease, background .45s ease;
  z-index:-1;
}

/* Text */
.glass-caption h1,
.glass-caption p {
  color:#fff;
  text-shadow:
      0 4px 18px rgba(0,0,0,.55),
      0 2px 8px rgba(0,0,0,.35);
}

/* ============================================================
   ZONE LIGHT DETECTOR — If top area is bright
============================================================ */

.slide.bright-zone .glass-caption {
  background: rgba(0,0,0,0.38);
  border-color: rgba(255,255,255,0.12);

  box-shadow:
    0 12px 45px rgba(0,0,0,0.6),
    inset 0 0 26px rgba(255,255,255,0.18);
}

.slide.bright-zone .glass-caption::before {
  opacity: .85;
  background: radial-gradient(
      circle at 45% 45%,
      rgba(0,0,0,.8) 0%,
      rgba(0,0,0,.45) 55%,
      rgba(0,0,0,.2) 90%
  );
}

/* ============================================================
   COLOR DOMINANT BASED GLOW
============================================================ */
.glass-caption[data-color]::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  opacity:.55;
  mix-blend-mode: screen;
  background: var(--caption-glow, transparent);
  filter: blur(45px);
  z-index:-2;
  pointer-events:none;
}

/* ============================================================
   EXPANDING CAPSULE ON LONG TEXT
============================================================ */

.glass-caption.long {
  padding: 28px 40px;
  max-width: 88%;
}

/* ============================================================
   PARALLAX REACTIVE (ONLY CAPTION)
============================================================ */
.glass-caption.parapulse {
  transition: transform .15s ease-out;
}

/* Mobile adjustments */
@media(max-width:768px){
  .glass-caption {
    bottom: 26px;
    left: 22px;
    right: 22px;
    max-width: 100%;
    padding: 18px 22px;
    border-radius: 22px;
  }
}


/* CAPA que se adapta automáticamente */
.slide .textslide::before{
    content:"";
    position:absolute;
    left:-40px;
    right:-40px;
    bottom:-40px;
    height:180px;
    pointer-events:none;
    z-index:-1;

    /* Degradado VisionOS inteligente */
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.68) 0%,
        rgba(0,0,0,0.40) 35%,
        rgba(0,0,0,0.22) 65%,
        rgba(0,0,0,0.0) 100%
    );

    filter: blur(18px);
    border-radius: 40px;
}



/* CONTENEDOR DEL TEXTO: lo convertimos en un “contexto” */
.slide .textslide{
    position:absolute;
    bottom:40px;
    left:40px;
    z-index:20;
    padding:10px 0;
}

/* CAPA QUE SIEMPRE SE PONE DETRÁS DEL TEXTO */
.slide .textslide::before{
    content:"";
    position:absolute;
    bottom:-10px;
    left:-20px;
    right:-20px;
    height:140px;

    z-index:-1;
    pointer-events:none;

    /* AQUÍ ES DONDE FALLABA LO QUE TE DI ERA PORQUE NO ESTABA SOBRESCRIBIENDO */
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.40) 40%,
        rgba(0,0,0,0.15) 75%,
        rgba(0,0,0,0.00) 100%
    );

    filter: blur(18px);
    border-radius:26px;
}

/* GARANTIZA QUE LA IMAGEN SIEMPRE ESTÉ DETRÁS */
.slide img{
    z-index:1 !important;
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    object-fit:cover;
}
/* Aplica el glow SOLO a los slides que tengan la clase .glow */
.slide.glow .textslide::before{
    content:"";
    position:absolute;
    inset:-20px -30px;
    background: radial-gradient(
        circle at center,
        rgba(0,0,0,0.68) 0%,
        rgba(0,0,0,0.45) 45%,
        rgba(0,0,0,0.12) 75%,
        rgba(0,0,0,0) 100%
    );
    filter: blur(28px);
    border-radius:30px;
    z-index:-1;
    pointer-events:none;
}


/* ============================================================
   GLOW + FADE-LIFT VISIONOS — SOLO PARA SLIDES .glow
============================================================ */
.slide.glow .textslide {
    position: relative;
    z-index: 2;
    animation: glowEnter .9s cubic-bezier(.21,.55,.18,1);
}

.slide.glow .textslide::before {
    content:"";
    position:absolute;
    inset:-25px -40px;
    background: radial-gradient(
        circle at center,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.42) 38%,
        rgba(0,0,0,0.12) 70%,
        rgba(0,0,0,0) 100%
    );
    filter: blur(38px);
    border-radius:40px;
    z-index:-1;
    pointer-events:none;
    opacity:0;
    animation: glowFade .9s ease forwards;
}

/* Aparición del texto tipo “Lift VisionOS” */
@keyframes glowEnter {
    0%   { transform: translateY(18px) scale(0.96); opacity:0; }
    45%  { opacity:1; }
    100% { transform: translateY(0) scale(1); opacity:1; }
}

/* Aparición del aura glow */
@keyframes glowFade {
    0%   { opacity:0; transform: scale(1.1); }
    100% { opacity:.95; transform: scale(1); }
}












.slide.ripple-exit {
  animation: rippleExit .7s ease forwards;
}

@keyframes rippleExit {
  0%   { filter: blur(0); opacity:1; }
  100% { filter: blur(18px); opacity:0; }
}

.slide.ripple-enter {
  opacity:0;
  animation: rippleEnter .7s ease forwards;
}

@keyframes rippleEnter {
  0%   { transform: scale(1.05); filter: blur(14px); opacity:.3; }
  100% { transform: scale(1);    filter: blur(0);    opacity:1; }
}






.barizSDSS{
background:rgba(255,255,255,0.65);
backdrop-filter:blur(22px) saturate(160%);
-webkit-backdrop-filter:blur(22px) saturate(160%);

background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1600'><path d='M0 0 C180 180 360 260 540 200 C760 120 900 40 900 0 L0 0 Z' fill='rgba(255,255,255,0.32)'/><path d='M0 260 C240 420 520 520 820 340 C900 300 900 240 900 220 L900 1600 L0 1600 Z' fill='rgba(210,184,134,0.18)'/><circle cx='180' cy='420' r='220' fill='rgba(111,8,8,0.10)'/><circle cx='680' cy='300' r='260' fill='rgba(210,184,134,0.12)'/><circle cx='620' cy='980' r='300' fill='rgba(255,255,255,0.20)'/><circle cx='160' cy='1250' r='180' fill='rgba(111,8,8,0.08)'/><path d='M0 820 C200 1000 480 1120 900 820 L900 1600 L0 1600 Z' fill='rgba(210,184,134,0.15)'/></svg>");

background-size:cover;
background-repeat:no-repeat;
background-position:top left;
}



.barizAAAAAAA{
background:rgba(255,255,255,0.65);
backdrop-filter:blur(22px) saturate(160%);
-webkit-backdrop-filter:blur(22px) saturate(160%);
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1600'><path d='M0 0 C180 150 380 220 560 140 C720 70 900 20 900 20 L900 0 L0 0 Z' fill='rgba(210,184,134,0.28)'/><path d='M0 250 C240 420 520 490 780 310 C900 240 900 200 900 200 L900 1600 L0 1600 Z' fill='rgba(111,8,8,0.12)'/><circle cx='260' cy='420' r='180' fill='rgba(210,184,134,0.18)'/><circle cx='620' cy='980' r='250' fill='rgba(111,8,8,0.10)'/><circle cx='120' cy='1220' r='160' fill='rgba(255,255,255,0.15)'/></svg>");
background-size:cover;
background-repeat:no-repeat;
background-position:top left;
}

.barizASSS{
    width:320px;
    height:100vh;
    background:rgba(255,255,255,0.58);
    backdrop-filter:blur(26px) saturate(180%);
    -webkit-backdrop-filter:blur(26px) saturate(180%);
background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1600'>\
<rect width='900' height='1600' fill='rgba(255,255,255,0.22)'/>\
<path d='M0 160 C260 260 520 240 900 120 L900 0 L0 0 Z' fill='rgba(255,255,255,0.45)'>\
<animate attributeName='d' dur='8s' repeatCount='indefinite'\
values='M0 160 C260 260 520 240 900 120 L900 0 L0 0 Z;\
        M0 140 C260 240 520 300 900 180 L900 0 L0 0 Z;\
        M0 160 C260 260 520 240 900 120 L900 0 L0 0 Z'/>\
</path>\
<circle cx='720' cy='340' r='210' fill='rgba(255,255,255,0.38)'>\
<animate attributeName='cx' dur='11s' values='720;760;720' repeatCount='indefinite'/>\
</circle>\
<circle cx='260' cy='780' r='260' fill='rgba(255,255,255,0.30)'>\
<animate attributeName='cy' dur='9s' values='780;820;780' repeatCount='indefinite'/>\
</circle>\
</svg>");
    background-size:cover;
    background-repeat:no-repeat;
}



.barizAAA {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);

    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1600'>\
<path d='M0 0 C120 140 260 200 420 0 L800 0 L800 1600 L0 1600 Z' fill='rgba(230,215,200,0.25)'/>\
<path d='M0 300 C180 460 420 520 650 300 L800 300 L800 1600 L0 1600 Z' fill='rgba(215,200,185,0.22)'/>\
<path d='M0 900 C200 1100 500 1250 800 900 L800 1600 L0 1600 Z' fill='rgba(240,230,220,0.20)'/>\
</svg>");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
}




.barizmotion{
background:rgba(255,255,255,0.60);
backdrop-filter:blur(40px) saturate(220%);
-webkit-backdrop-filter:blur(40px) saturate(220%);
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1650 2200'><defs><radialGradient id='lm1' cx='40%' cy='8%' r='65%'><stop offset='0%' stop-color='rgba(255,255,255,0.65)'/><stop offset='100%' stop-color='rgba(255,255,255,0)'/></radialGradient><radialGradient id='lm2' cx='75%' cy='50%' r='60%'><stop offset='0%' stop-color='rgba(210,184,134,0.22)'/><stop offset='100%' stop-color='rgba(210,184,134,0)'/></radialGradient><radialGradient id='lm3' cx='20%' cy='80%' r='70%'><stop offset='0%' stop-color='rgba(111,8,8,0.12)'/><stop offset='100%' stop-color='rgba(111,8,8,0)'/></radialGradient></defs><rect width='1650' height='2200' fill='url(%23lm1)'/><rect width='1650' height='2200' fill='url(%23lm2)'/><rect width='1650' height='2200' fill='url(%23lm3)'/><path d='M0 350 Q800 200 1650 350 L1650 520 Q900 630 500 560 T0 520 Z' fill='rgba(255,255,255,0.20)'/><path d='M0 1300 Q850 1500 1650 1300 L1650 1600 Q900 1800 350 1600 T0 1600 Z' fill='rgba(210,184,134,0.14)'/></svg>");
background-size:cover;background-repeat:no-repeat;background-position:center;
}




.barizmmm{
background:rgba(255,255,255,0.58);
backdrop-filter:blur(45px) saturate(240%);
-webkit-backdrop-filter:blur(45px) saturate(240%);
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1700 2200'><defs><radialGradient id='gp1' cx='50%' cy='0%' r='70%'><stop offset='0%' stop-color='rgba(255,255,255,0.75)'/><stop offset='100%' stop-color='rgba(255,255,255,0)'/></radialGradient><radialGradient id='gp2' cx='80%' cy='50%' r='70%'><stop offset='0%' stop-color='rgba(210,184,134,0.35)'/><stop offset='100%' stop-color='rgba(210,184,134,0)'/></radialGradient><radialGradient id='gp3' cx='20%' cy='75%' r='65%'><stop offset='0%' stop-color='rgba(111,8,8,0.08)'/><stop offset='100%' stop-color='rgba(111,8,8,0)'/></radialGradient></defs><rect width='1700' height='2200' fill='url(%23gp1)'/><rect width='1700' height='2200' fill='url(%23gp2)'/><rect width='1700' height='2200' fill='url(%23gp3)'/><path d='M0 1000 Q900 1200 1700 1000 L1700 1400 Q900 1600 300 1400 T0 1400 Z' fill='rgba(210,184,134,0.18)'/></svg>");
background-size:cover;background-repeat:no-repeat;background-position:center;
}





.barizOK{
background:rgba(255,255,255,0.58);
backdrop-filter:blur(45px) saturate(240%);
-webkit-backdrop-filter:blur(45px) saturate(240%);
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700'><path d='M0 300 Q420 100 800 300 T1600 300 L1600 700 L0 700 Z' fill='rgba(111,8,8,0.16)'/><path d='M0 450 Q420 250 800 450 T1600 450 L1600 700 L0 700 Z' fill='rgba(255,255,255,0.18)'/></svg>");
background-size:cover;background-repeat:no-repeat;background-position:center;
}





.bariz{

background:rgba(255,255,255,0.65);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1600'><path d='M0 0 C120 140 260 200 420 0 L800 0 L800 1600 L0 1600 Z' fill='rgba(230,215,200,0.18)'/><path d='M0 300 C180 460 420 520 650 300 L800 300 L800 1600 L0 1600 Z' fill='rgba(215,200,185,0.15)'/><path d='M0 900 C200 1100 500 1250 800 900 L800 1600 L0 1600 Z' fill='rgba(240,230,220,0.14)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:top left;

    
    
}



/* ============================================================
   FIX ABSOLUTO — ACTIVAR PAUSA, HOVER Y MOUSEENTER DEL SLIDESHOW
=========================================================== */

/* FIX FINAL: restaurar eventos en el contenedor del slide */
#slideshow,
#slideshow .slide {
    pointer-events: auto !important;
}

/* evitar que la pseudo-capa del texto bloquee el hover */
#slideshow .slide .textslide,
#slideshow .slide .textslide::before {
    pointer-events: none !important;
}

/* evitar que imágenes bloqueen hover */
#slideshow .slide img {
    pointer-events: none !important;
}

/* capa entera del slide debe recibir hover */
#slideshow .slide {
    pointer-events: auto !important;
    cursor: pointer;
}


/* FIX DEFINITIVO — PERMITE QUE #slideshow RECIBA mouseenter */
.slide img {
    pointer-events: none !important;
}


/* ================================================================
   MICRO BADGE VISIONOS PRIME — pequeño, visible, elegante
=================================================================== */

.link-badge-micro {
    position:absolute;
    top:18px;
    right:18px;
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:13px;
    background:rgba(255,255,255,0.22);
    backdrop-filter:blur(12px) saturate(220%);
    -webkit-backdrop-filter:blur(12px) saturate(220%);

    box-shadow:
      0 0 14px rgba(255,255,255,0.55),
      0 4px 14px rgba(0,0,0,0.35),
      inset 0 0 8px rgba(255,255,255,0.35),
      inset 0 0 18px rgba(255,255,255,0.18);

    z-index:150 !important;
    pointer-events:none;
    opacity:.95;

    transition:transform .25s ease, opacity .25s ease;
}

.slide:hover .link-badge-micro {
    transform:scale(1.12);
    opacity:1;
}

.link-badge-micro svg {
    width:16px;
    height:16px;
    fill:white;
    opacity:.92;
    filter:drop-shadow(0 0 6px rgba(255,255,255,0.9));
}




.link-badge-vpro {
    position: absolute;
    top: 14px;
    right: 44px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: linear-gradient(135deg, #ffcf2d 0%, #ffd76b 40%, #ffb300 100%);
    box-shadow:
      0 0 6px rgba(255,207,45,0.8),
      0 0 14px rgba(255,207,45,0.6),
      inset 0 0 8px rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.55);

    z-index: 200;
    pointer-events: none;
    opacity: 0.95;
    transition: transform .25s ease, opacity .25s ease;
}

.slide:hover .link-badge-vpro {
    transform: scale(1.18);
    opacity: 1;
}

.link-badge-vpro svg {
    width: 15px;
    height: 15px;
    fill: #4a2c00;
    opacity: 0.9;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.9));
}



/* ================================================================
   DISEÑO BOTON 2
=================================================================== */


.hero-btn{
  padding:14px 26px;
  background:var(--vino);
  color:white;
  text-decoration:none;
  border-radius:10px;
  font-weight:600;
  border:3px solid var(--gold);
  box-shadow:0 12px 28px rgba(0,0,0,.32);
}




/* ============================================================
   INSIGHTS — NUEVO BLOQUE EDITORIAL TIPO MIT
============================================================ */
.insights{
  margin-left:0px;
  padding:80px 60px;
}
@media(max-width:950px){
  .insights{margin-left:0;padding:70px 30px;}
}

.insights h2{
  font-family:var(--font-head);
  font-size:42px;
  color:var(--vino-osc);
  margin-bottom:30px;
}

.insights-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:36px;
}

.insight{
  background:white;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.insight img{
  width:100%; height:200px;
  object-fit:cover;
}
.insight div{
  padding:26px;
}
.insight h3{
  font-size:22px;
  font-family:var(--font-head);
  margin-bottom:10px;
}
.insight p{
  color:#444;
  font-size:16px;
}




/* ============================================================
   SECCIÓN — SPATIAL GRID
============================================================ */
.section{
  padding:100px 90px;
  background:white;
}
.section1{
  background:#f8f5ef;
      border-bottom:2px solid var(--gold);
      border-top:2px solid var(--gold);

}

.section1 h2{
  font-family:var(--font-head);
  font-size:46px;
  color:var(--vino2);
  margin-bottom:28px;
}



.section h2{
  font-family:var(--font-head);
  font-size:46px;
  color:var(--vino2);
  margin-bottom:28px;
}

.spatial-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:38px;
}

.spatial-card{
  background:var(--glass);
  backdrop-filter:blur(20px);
  border-radius:var(--radius);
  border:1.5px solid var(--gold);

  padding:32px;
  min-height:200px;
  transition:.3s;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}
/**
.spatial-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-heavy);
  background:var(--glass2);
}**/


.spatial-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 22px 48px rgba(0,0,0,.18);
}


.spatial-card h3{
  font-family:var(--font-head);
  font-size:24px;
  margin-bottom:12px;
}

/* ============================================================
   CONSTELACIÓN — CÍRCULOS ESPACIALES
============================================================ */
.constel{
  padding:100px 70px;
  background:var(--bg);
}
.constel h2{
  font-family:var(--font-head);
  font-size:46px;
  color:var(--vino2);
  margin-bottom:40px;
  text-align:center;
}

.constel-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:34px;
}

.constel-item{
  width:160px;
  height:160px;
  border-radius:50%;
  background:var(--glass);
  border:1px solid var(--neo-border);
  backdrop-filter:blur(16px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:22px;
  box-shadow:var(--shadow-soft);
  transition:.3s;
}
.constel-item:hover{
  transform:scale(1.08);
  box-shadow:var(--shadow-heavy);
}
.constel-item span{
  color:var(--vino2);
  font-weight:600;
  font-size:16px;
}


/* ============================================================
   FIX ABSOLUTO — FORZAR CLICS EN EL MENÚ
   NO rompe estilos, no altera colores, no afecta animaciones.
=========================================================== */

/* 1. Los enlaces del menú siempre reciben el clic (pasan por encima de todo) */
.barizpanel a,
.acorbariz a {
    position: relative !important;
    z-index: 999999999 !important;
    pointer-events: auto !important;
}

/* 2. Todo lo que pueda estar encima del menú deja de recibir clics */
.bariz *,
.bariz *::before,
.bariz *::after {
    pointer-events: auto;
}

/* 3. Los pseudo-elementos NO pueden bloquear el clic */
.barizpanel::before,
.barizpanel::after,
.acorbariz::before,
.acorbariz::after,
.acorbariz button::before,
.acorbariz button::after {
    pointer-events: none !important;
}

/* 4. El panel mismo queda completamente clickeable */
.barizpanel {
    z-index: 999999999;
    pointer-events: auto !important;
}