@import 'base.css';

:root {
  --brand-color: #EF3340;
  --brand-color-dark: #c8212e;
}

/* logo partner — altura específica */
.cb-logo-adigital {
  height: 92px;
  width: auto;
  opacity: 0.95;
}

/* Hover pill rojo cálido (en vez del blanco genérico) */
.cb-red-nota-link:hover { color: #ffe5e7; }

/* Focus ring con tono brand */
.cb-input:focus {
  box-shadow: 0 0 0 3px rgba(239,51,64,0.2) !important;
}

/* =====================================================
   FOOTER
===================================================== */
.cb-footer {
  background: #0d0d0d;
  padding: 40px 0;
  color: rgba(255,255,255,0.35);
  font-size: 0.82rem;
}
.cb-footer-links a {
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color .2s;
}
.cb-footer-links a:hover { color: var(--brand-color); }

@media (max-width: 767px) {
  .cb-logo-ancha, .cb-logo-adigital { height: 38px; }
}

/* Forzar cabecera sólida con cristal esmerilado */
.header.header-solid {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
}
/* Contenedor de referencia relativa */
.relative-container {
  position: relative;
}

/* Comportamiento de la botella en Escritorio (Pasa por encima del corte superior) */
.cb-hero-bottle-new {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -180px; /* Controla qué tan arriba sobresale en el olivar */
  max-height: 520px;
  width: auto;
  z-index: 10;
  pointer-events: none; /* Evita que estorbe al hacer clic cerca */
}

/* Margen superior a la sección roja para dar espacio al inicio del cuello de la botella */
.cb-red-section {
  padding-top: 100px;
  padding-bottom: 80px;
  overflow: visible !important; /* Vital para que la botella no se corte */
}

/* --- ADAPTACIÓN RESPONSIVA (MÓVIL) --- */
@media (max-width: 991.98px) {
  /* En móviles quitamos el posicionamiento absoluto para que no tape las letras */
  .cb-hero-bottle-new {
    position: relative;
    left: 0;
    transform: none;
    top: 0;
    margin: 30px auto;
    display: block;
    max-height: 380px; /* Tamaño optimizado para pantallas verticales */
  }
  
  .cb-red-section {
    padding-top: 60px;
  }
  
  /* Asegura el orden del mockup en móvil: 1. Logo, 2. Botella, 3. Texto */
  .cb-red-logo-col {
    order: 1;
    margin-bottom: 20px;
  }
  .cb-hero-bottle-new {
    order: 2;
  }
  .cb-red-text-col {
    order: 3;
    text-align: center;
  }
  .cb-red-list {
    text-align: left;
    display: inline-block;
  }
}