/* ============================================================
   assets/css/custom.css — Centauro Grupo Empresarial v3
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #444651; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #8f909d; }

:focus-visible {
 outline: 2px solid #b6c4ff;
 outline-offset: 3px;
 border-radius: 3px;
}

/* ── Material Symbols ──────────────────────────────────────── */
.material-symbols-outlined {
 font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 vertical-align: middle;
 line-height: 1;
 user-select: none;
}

/* ── Skip link ─────────────────────────────────────────────── */
.skip-link {
 position: absolute; top: -100%; left: 0;
 padding: 0.5rem 1rem; background: #b6c4ff; color: #05297a;
 font-weight: 700; z-index: 9999; border-radius: 0 0 4px 0;
}
.skip-link:focus { top: 0; }

/* ── Glass card — universal ────────────────────────────────── */
.glass-card {
 background: rgba(255, 255, 255, 0.03);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 0.75rem;
}

/* ── Glow cyan — universal para cards ─────────────────────── */
.glow-cyan {
 box-shadow: 0 0 30px rgba(143, 216, 255, 0.07);
 transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.glow-cyan:hover {
 box-shadow: 0 0 40px rgba(143, 216, 255, 0.16);
 border-color: rgba(143, 216, 255, 0.22);
}

/* ── Pill pulsante — universal ─────────────────────────────── */
/*
 Uso (igual en TODAS las páginas, antes de cada h1/h2):

 <div class="pill">
  <span class="relative flex h-2 w-2" aria-hidden="true">
   <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
   <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
  </span>
  <span class="pill__text">Nombre Sección</span>
 </div>
*/
.pill {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.25rem 0.75rem;
 border-radius: 9999px;
 border: 1px solid rgba(255, 255, 255, 0.1);
 background: rgba(255, 255, 255, 0.05);
 width: fit-content;
 margin-bottom: 1rem;
}

.pill__text {
 font-family: Inter, sans-serif;
 font-size: 12px;
 font-weight: 600;
 line-height: 1;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: #75d1ff; /* secondary-fixed-dim */
}

/* ── Tipografía — clases estándar del proyecto ─────────────── */
/*
 h1 : font-display-xl text-display-xl text-on-surface
 h2 : font-headline-lg text-headline-lg text-on-surface
 h3 : font-headline-md text-headline-md text-on-surface
 p  : font-body-lg text-body-lg text-on-surface-variant  (principal)
 p  : font-body-md text-body-md text-on-surface-variant  (secundario)
*/

/* ── Imágenes — hover: scale-105 + fade ───────────────────── */
/*
 Estructura obligatoria:
 <div class="img-wrap">
  <img class="img-hover" ...>
 </div>
 Para hero (opacity base más alta):
 <img class="img-hover img-hero" ...>
*/
.img-wrap {
 overflow: hidden;
 border-radius: 0.75rem;
 position: relative;
}

.img-hover {
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0.65;
 transform: scale(1);
 transition: opacity 0.4s ease, transform 0.5s ease;
}

.img-wrap:hover .img-hover,
.group:hover .img-hover {
 opacity: 1;
 transform: scale(1.05);
}

.img-hero { opacity: 0.80; }

/* ── Hero imagen de fondo — páginas internas ───────────────── */
/*
 Aplica en: nosotros, eventos, cocktails, logistica, julian
 NO aplica en: home, contacto
 
 Estructura:
 <section class="hero-section">
  <div class="hero-bg">
   <div class="hero-overlay"></div>
   <div class="img-wrap absolute inset-0 rounded-none">
    <img class="img-hover img-hero" style="height:100vh" ...>
   </div>
  </div>
  <div class="hero-content"> ... </div>
 </section>
*/
.hero-section {
 position: relative;
 min-height: 100vh;
 width: 100%;
 display: flex;
 align-items: flex-end;
 overflow: hidden;
}

.hero-bg {
 position: absolute;
 inset: 0;
 z-index: 0;
}

.hero-overlay {
 position: absolute;
 inset: 0;
 z-index: 1;
 background: linear-gradient(to top, #121318 15%, rgba(18,19,24,0.6) 50%, rgba(18,19,24,0.2) 100%);
}

.hero-content {
 position: relative;
 z-index: 10;
 width: 100%;
 padding-bottom: 5rem;
 padding-top: 8rem;
}

/* ── Card standard ─────────────────────────────────────────── */
/*
 Clase universal para TODAS las cards:
 flex-1 glass-card rounded-xl p-stack-lg glow-cyan flex flex-col justify-between
*/

/* ── Badge de certificación sobre imágenes ─────────────────── */
.cert-badge {
 position: absolute;
 z-index: 20;
 background: rgba(41, 42, 47, 0.92);
 border: 1px solid rgba(143, 216, 255, 0.18);
 padding: 1rem 1.25rem;
 border-radius: 0.75rem;
 backdrop-filter: blur(8px);
 max-width: 220px;
}

/* ── Glow effects ──────────────────────────────────────────── */
.aqua-glow    { box-shadow: 0 0 40px rgba(0, 194, 255, 0.15); }
.electric-glow{ box-shadow: 0 0 30px rgba(143, 216, 255, 0.10); }

/* ── Gradient text ─────────────────────────────────────────── */
.gradient-text {
 background: linear-gradient(135deg, #b6c4ff 0%, #8fd8ff 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

/* ── Form feedback ─────────────────────────────────────────── */
.form-feedback { padding: 0.875rem 1rem; border-radius: 0.75rem; font-size: 0.9em; line-height: 1.5; margin-top: 0.75rem; }
.form-feedback[hidden] { display: none; }
.form-feedback.success { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.4); color: #6ee7b7; }
.form-feedback.error   { background: rgba(239,68,68,.10);  border: 1px solid rgba(239,68,68,.35); color: #fca5a5; }

/* ── WhatsApp float ────────────────────────────────────────── */
#whatsapp-float {
 position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
 width: 52px; height: 52px; background: #25D366; border-radius: 9999px;
 display: flex; align-items: center; justify-content: center;
 box-shadow: 0 4px 16px rgba(37,211,102,0.4);
 opacity: 0; pointer-events: none;
 transition: opacity 0.3s ease, transform 0.2s ease;
}
#whatsapp-float:hover { transform: scale(1.08); }
#whatsapp-float svg { width: 28px; height: 28px; fill: white; }

/* ── WhatsApp float — subido para no tapar cookies ─────────────────────── */
#whatsapp-float {
 bottom: 5rem !important;
}

/* ── Hero degradado — termina en el color de la sección siguiente ────────
   Cada página interna define su propio color de cierre via variable CSS.
   Por defecto: surface-container-lowest (#0d0e13) */
.hero-overlay {
 background: linear-gradient(
  to top,
  var(--hero-end, #0d0e13) 0%,
  rgba(18,19,24,0.55) 45%,
  rgba(18,19,24,0.15) 100%
 );
}

/* ── H1 responsive ────────────────────────────────────────────────────── */
.h1-responsive {
 font-size: clamp(2.625rem, 5vw, 3.75rem); /* 42px → 60px */
 line-height: 1.1;
 letter-spacing: -0.02em;
 font-weight: 700;
}
/* breakpoints explícitos para mayor control */
@media (max-width: 640px)  { .h1-responsive { font-size: 2.625rem; } } /* 42px */
@media (min-width: 641px) and (max-width: 1023px) { .h1-responsive { font-size: 3rem; } }   /* 48px */
@media (min-width: 1024px) { .h1-responsive { font-size: 3.75rem; } } /* 60px */

/* ── CTA ghost con glow — hero home ────────────────────────────────────── */
.btn-ghost-glow {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 1rem 2rem;
 border: 1px solid rgba(182,196,255,0.35);
 background: rgba(18,19,24,0.6);
 color: #e3e1e9;
 border-radius: 0.25rem;
 font-family: Inter, sans-serif;
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
 text-decoration: none;
 box-shadow: 0 0 30px rgba(143,216,255,0.08);
 transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
 white-space: nowrap;
}
.btn-ghost-glow:hover {
 background: #b6c4ff;
 color: #05297a;
 border-color: #b6c4ff;
 box-shadow: 0 0 40px rgba(182,196,255,0.35);
}

/* ── Modal de Cookies ─────────────────────────────────────────────────────── */
#cookies-modal-overlay {
 position: fixed;
 inset: 0;
 z-index: 9998;
 background: rgba(13, 14, 19, 0.85);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 1.5rem;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s ease;
}
#cookies-modal-overlay.visible {
 opacity: 1;
 pointer-events: auto;
}
#cookies-modal {
 background: #1e1f25;
 border: 1px solid #444651;
 border-radius: 0.75rem;
 padding: 2rem 2.25rem;
 max-width: 480px;
 width: 100%;
 box-shadow: 0 24px 64px rgba(0,0,0,0.5);
 transform: translateY(16px);
 transition: transform 0.3s ease;
}
#cookies-modal-overlay.visible #cookies-modal {
 transform: translateY(0);
}
.cookies-modal__icon {
 font-size: 2rem;
 margin-bottom: 0.75rem;
}
.cookies-modal__title {
 font-family: "Space Grotesk", sans-serif;
 font-size: 1.25rem;
 font-weight: 600;
 color: #e3e1e9;
 margin-bottom: 0.5rem;
}
.cookies-modal__desc {
 font-size: 0.88em;
 color: #8f909d;
 line-height: 1.6;
 margin-bottom: 1.5rem;
}
.cookies-modal__desc a {
 color: #8fd8ff;
 text-decoration: underline;
 text-underline-offset: 3px;
}
.cookies-modal__actions {
 display: flex;
 flex-direction: column;
 gap: 0.625rem;
}
.cookies-modal__btn-accept {
 width: 100%;
 padding: 0.75rem 1rem;
 background: #b6c4ff;
 color: #05297a;
 border: none;
 border-radius: 0.375rem;
 font-weight: 600;
 cursor: pointer;
 transition: opacity 0.2s;
}
.cookies-modal__btn-accept:hover { opacity: 0.9; }
.cookies-modal__btn-essential {
 width: 100%;
 padding: 0.75rem 1rem;
 background: transparent;
 color: #b6c4ff;
 border: 1px solid #444651;
 border-radius: 0.375rem;
 font-weight: 600;
 cursor: pointer;
 transition: border-color 0.2s;
}
.cookies-modal__btn-essential:hover { border-color: #b6c4ff; }
.cookies-modal__links {
 display: flex;
 justify-content: center;
 gap: 1rem;
 margin-top: 1rem;
 font-size: 0.8em;
}
.cookies-modal__links a {
 color: #8fd8ff;
 text-decoration: none;
}
.cookies-modal__links a:hover { text-decoration: underline; }

/* ── Checkbox personalizado — privacidad ────────────────────────────────── */
input[type="checkbox"] {
 cursor: pointer;
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 width: 20px;
 height: 20px;
 border: 1px solid #8f909d;
 border-radius: 0.25rem;
 background: #1e1f25;
 cursor: pointer;
 transition: background 0.2s, border-color 0.2s;
}
input[type="checkbox"]:checked {
 background: #b6c4ff;
 border-color: #b6c4ff;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23052e7a'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
 background-position: center;
 background-repeat: no-repeat;
 background-size: 100%;
}
input[type="checkbox"]:focus { outline: 2px solid #b6c4ff; outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Mejorar hamburger visibility en móvil ────────────────────────────────── */
@media (max-width: 1023px) {
 #nav-toggle { display: flex !important; }
 .lg\:hidden { display: none !important; }
}

/* ── WCAG 2.1 AA Compliance ────────────────────────────────────────────── */

/* Minimum contrast ratio 4.5:1 for text on dark backgrounds */
body {
 color: #e8e9f3; /* on-surface: contrast 11:1 against #05297a background */
}

a, a:visited {
 color: #8fd8ff; /* secondary: contrast 5.2:1 on dark bg */
 text-decoration: underline;
 transition: opacity 0.2s ease;
}

a:hover, a:active {
 opacity: 0.8;
}

/* High contrast focus indicator (minimum 3px, 3:1 ratio) */
button:focus-visible, 
input:focus-visible, 
textarea:focus-visible, 
select:focus-visible,
a:focus-visible {
 outline: 3px solid #b6c4ff; /* primary: 5.8:1 contrast */
 outline-offset: 2px;
}

/* Ensure skip link has sufficient contrast */
.skip-link {
 background: #b6c4ff;
 color: #05297a; /* High contrast: 8.5:1 */
 font-weight: 700;
 outline-offset: 0;
}

/* Form labels and required indicators */
label {
 font-weight: 500;
 color: #e8e9f3; /* on-surface */
}

label::after {
 content: '';
}

input[required]::after,
textarea[required]::after,
select[required]::after {
 content: ' *';
 color: #ffb4ab; /* error: 4.5:1 contrast */
 font-weight: 700;
}

/* Enhanced checkbox styling for accessibility */
input[type="checkbox"] {
 min-width: 24px;
 min-height: 24px;
 margin-right: 8px;
}

input[type="checkbox"]:focus-visible {
 outline: 2px solid #b6c4ff;
 outline-offset: 2px;
}

/* Button contrast and focus states */
button {
 min-height: 48px; /* Touch target minimum */
 padding: 12px 16px;
 font-size: 16px; /* Prevents iOS zoom on focus */
 border-radius: 6px;
 transition: background-color 0.2s ease, transform 0.2s ease;
}

button:focus-visible {
 outline: 3px solid #b6c4ff;
 outline-offset: 2px;
}

button:active {
 transform: scale(0.98);
}

.bg-primary {
 background-color: #b6c4ff;
}

.bg-primary:hover {
 background-color: #9ab1ff;
}

.text-on-primary {
 color: #0015ff !important;
}

.border-secondary {
 border-color: #8fd8ff;
}

.text-secondary {
 color: #8fd8ff; /* 5.2:1 contrast on dark bg */
}

/* Visited link styling for accessibility */
a[href]:visited {
 color: #a8b3ff; /* slightly muted version of primary */
}

/* Focus visible for nav links */
nav a:focus-visible,
nav button:focus-visible {
 outline: 2px solid #b6c4ff;
 outline-offset: -2px;
}

/* Heading contrast verification */
h1, h2, h3, h4, h5, h6 {
 color: #e8e9f3; /* on-surface: 11:1 contrast */
}

/* Text that needs minimum 4.5:1 */
.text-on-surface {
 color: #e8e9f3; /* on-surface */
}

.text-on-surface-variant {
 color: #cccfe4; /* on-surface-variant: 8.5:1 contrast */
}

/* Error and validation messaging */
.error-message,
[role="alert"] {
 color: #ffb4ab; /* error: 4.5:1 contrast */
 font-weight: 500;
 padding: 12px;
 border-radius: 4px;
 background: rgba(255, 180, 171, 0.1);
 border-left: 4px solid #ffb4ab;
}

/* Success messaging */
.success-message {
 color: #7ae582; /* success: 4.5:1 contrast */
 font-weight: 500;
 padding: 12px;
 border-radius: 4px;
 background: rgba(122, 229, 130, 0.1);
 border-left: 4px solid #7ae582;
}

/* Disabled state contrast */
button:disabled,
input:disabled,
textarea:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 color: #a0a3b1;
}

/* ── Footer responsivo mejorado ───────────────────────────────────────────── */
@media (max-width: 768px) {
 footer { padding: 1rem; }
 footer .max-w-7xl { gap: 1rem !important; }
}
 border: none;
 border-radius: 0.375rem;
 font-weight: 700;
 font-size: 0.9em;
 cursor: pointer;
 transition: opacity 0.2s;
}
.cookies-modal__btn-accept:hover { opacity: 0.88; }
.cookies-modal__btn-essential {
 width: 100%;
 padding: 0.75rem 1rem;
 background: transparent;
 color: #8f909d;
 border: 1px solid #444651;
 border-radius: 0.375rem;
 font-weight: 600;
 font-size: 0.9em;
 cursor: pointer;
 transition: border-color 0.2s, color 0.2s;
}
.cookies-modal__btn-essential:hover { border-color: #8f909d; color: #c5c5d3; }
.cookies-modal__links {
 display: flex;
 justify-content: center;
 gap: 1.25rem;
 margin-top: 1rem;
 font-size: 0.78em;
}
.cookies-modal__links a { color: #64748b; text-decoration: underline; text-underline-offset: 3px; }
.cookies-modal__links a:hover { color: #8f909d; }