/* ==============================
   Santiago's Partners — v2 Pro
   - Paleta mejor equilibrada
   - Glassmorphism sutil
   - Focus states accesibles
   - Dark/Light refinado
   ============================== */

/* ---------- Variables ---------- */
:root{
  --bg: #0b0e13;
  --surface: rgba(255,255,255,0.06);
  --text: #eaf0f7;
  --muted: #b5c0ce;
  --line: rgba(255,255,255,0.14);

  --brand: #67e8f9;     /* cyan */
  --brand-2: #a78bfa;   /* purple */
  --brand-3: #22d3ee;   /* cyan deep */
  --warn: #f59e0b;

  --radius: 16px;
  --shadow: 0 12px 32px rgba(0,0,0,.35);
  --blur: saturate(140%) blur(10px);

  --fs-0: clamp(14px, 1.7vw, 15px);
  --fs-1: clamp(16px, 1.8vw, 17px);
  --fs-2: clamp(18px, 2vw, 19px);
  --fs-3: clamp(20px, 3vw, 28px);
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f7f9fc;
    --surface: rgba(255,255,255,0.8);
    --text: #12161c;
    --muted: #586272;
    --line: rgba(2,6,23,.08);
    --shadow: 0 10px 28px rgba(2,6,23,.08);
  }
}

/* ---------- Reset mínimo ---------- */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--fs-1);
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(103,232,249,.12), transparent 40%),
    radial-gradient(1100px 700px at 95% 0%, rgba(167,139,250,.12), transparent 40%),
    var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: inherit; text-decoration: none; }
img{ display:block; max-width:100%; }

/* ---------- Accesibilidad ---------- */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--brand), white 10%);
  outline-offset: 3px;
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---------- Utilidades ---------- */
.container{ width:min(1200px, 92%); margin-inline:auto; }
.shadow{ box-shadow: var(--shadow); }

/* ================= Header ================= */
header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  background: linear-gradient(180deg, rgba(10,12,16,.65), rgba(10,12,16,.35));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
header .container,
header{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 1rem;
}

/* Logo */
.logo{
  font-weight: 700; letter-spacing:.2px;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  display:inline-flex; gap:.65rem; align-items:center;
}
.logo::before{
  content:"SP"; display:inline-grid; place-items:center;
  width:2.1rem; height:2.1rem; border-radius:12px;
  background:
    linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#041018; font-weight:700; font-size:.95rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.2);
}

/* Nav */
nav{ display:flex; align-items:center; gap:.8rem; }
nav a{
  padding:.55rem .9rem; border-radius:12px; border:1px solid transparent;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  font-weight:600; font-size:.95rem; opacity:.98;
  -webkit-tap-highlight-color: transparent;
}
nav a:hover{
  background: color-mix(in oklab, var(--surface), white 4%);
  border-color: var(--line);
  transform: translateY(-1px);
}

/* Botón destacado reusando tu .btn */
.btn{
  background: linear-gradient(135deg, var(--brand-3), var(--brand-2));
  color:#041018; border:none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.btn:hover{ filter: brightness(.98); }

/* Dropdown */
.dropdown{ position:relative; }
.dropdown > a{ display:inline-flex; align-items:center; gap:.45rem; }
.dropdown > a::after{ content:"▾"; font-size:.8rem; opacity:.85; }
.dropdown-content{
  position:absolute; top:calc(100% + .55rem); right:0; min-width:240px;
  padding:.5rem; background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow);
  display:none;
}
.dropdown-content a{
  display:block; padding:.65rem .75rem; border-radius:10px; color:var(--text);
}
.dropdown-content a:hover{
  background: color-mix(in oklab, var(--surface), white 6%);
}
.dropdown:hover .dropdown-content{ display:block; }

/* Select idioma */
#languageSwitcher{
  appearance:none; cursor:pointer;
  background: var(--surface); color: var(--text);
  border:1px solid var(--line); border-radius:12px; padding:.55rem 2.2rem .55rem .9rem;
  font-weight:600; transition: transform .2s ease, background .2s ease;
  position: relative;
}
#languageSwitcher:hover{ transform: translateY(-1px); }
#languageSwitcher{
  background-image:
    linear-gradient(135deg, var(--brand) 0, var(--brand-2) 100%),
    linear-gradient(transparent, transparent);
  background-clip: text, padding-box;
  -webkit-text-fill-color: transparent;
}
#languageSwitcher::after{
  content:"▾"; position:absolute; right:.7rem; top:50%; translate:0 -50%;
  -webkit-text-fill-color: initial; color: var(--muted);
}

/* ================= Hero & Carousel ================= */
.hero{
  position:relative; height: clamp(60vh, 72vh, 80vh); overflow:hidden;
  border-bottom: 1px solid var(--line);
}

/* Overlay (tu HTML ya lo trae) */
.hero .hero-overlay{
  padding-inline: min(5vw, 32px);
}
.hero .hero-overlay h1{
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.12; letter-spacing:.2px; text-wrap: balance;
  text-shadow: 0 14px 36px rgba(0,0,0,.5);
  animation: fadeUp .8s ease both;
}
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Carrusel */
.carousel{
  display:flex; width:100%; height:100%;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.carousel img{
  min-width:100%; height:100%; object-fit:cover;
  filter: saturate(1.04) contrast(1.03);
  transform: scale(1.015);
}

/* Sutileza de degradado en bordes superior/inferior */
.hero::before,
.hero::after{
  content:""; position:absolute; left:0; width:100%; pointer-events:none;
}
.hero::before{
  top:0; height:120px;
  background: linear-gradient(180deg, rgba(0,0,0,.3), transparent);
}
.hero::after{
  bottom:0; height:160px;
  background: linear-gradient(0deg, rgba(0,0,0,.35), transparent);
}

/* ================= Footer ================= */
footer{
  padding: 2.2rem 1rem; text-align:center; color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ================= Responsive ================= */
@media (max-width: 960px){
  nav{ gap:.55rem; }
  .dropdown-content{ right:auto; left:0; }
}

@media (max-width: 720px){
  header{ padding:.7rem 1rem; }
  header .container{
    flex-direction: column; align-items:stretch; gap:.6rem;
  }
  nav{ flex-wrap:wrap; gap:.5rem; }
  nav a, #languageSwitcher{
    flex: 1 1 auto; text-align:center;
  }
  .hero .hero-overlay h1{
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
  }
}

/* ================= Micro-detalles pro ================= */
/* Borde luminoso muy sutil al pasar por el header */
header:hover{
  box-shadow:
    0 6px 20px rgba(0,0,0,.22),
    inset 0 -1px 0 color-mix(in oklab, var(--brand-2), white 80%);
}

/* Hover line bajo enlaces del nav */
nav a:not(.btn){
  position:relative;
}
nav a:not(.btn)::after{
  content:""; position:absolute; left:10%; right:10%; bottom:6px; height:2px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
nav a:not(.btn):hover::after{ transform: scaleX(1); }

/* Elevación al pasar por .btn para sensación de “clic” */
.btn{ transition: transform .15s ease, filter .2s ease, box-shadow .2s ease; }
.btn:active{ transform: translateY(1px) scale(.995); }

/* Mejora de contraste del dropdown en light */
@media (prefers-color-scheme: light){
  .dropdown-content{
    background: #fff;
  }
}

/* Ajuste de espacios en dispositivos con notch */
@supports (padding: max(0px)){
  header{ padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  footer{ padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
}