/* ═══════════════════════════════════════════════════════
   sei-hero — Componente Hero compartido
   Usado por: / (Inicio) · /actuaciones/
═══════════════════════════════════════════════════════ */

/* Tokens con scope al hero: resuelven correctamente
   en cualquier página, independientemente del --pad global */
.sei-hero {
  --pad:  clamp(40px,3.5vw,72px);
  --ease: cubic-bezier(.25,.1,.25,1);
  --mono: 'SFMono-Regular','Consolas','Liberation Mono',monospace;
}
@media (max-width:1024px) { .sei-hero { --pad:32px; } }
@media (max-width:640px)  { .sei-hero { --pad:18px; } }

/* ── Base ── */
.sei-hero {
  padding-top:80px;
  position:relative; overflow:hidden;
  min-height:88vh;
  display:flex; flex-direction:column;
}

/* ── Carrusel / fondo ── */
.sei-hero__carousel { position:absolute; inset:0; z-index:0; }
.sei-hero__slides   { position:relative; width:100%; height:100%; }
.sei-hero__slide {
  position:absolute; inset:0;
  opacity:0; transition:opacity .9s ease;
  pointer-events:none;
}
.sei-hero__slide.active { opacity:1; z-index:1; pointer-events:auto; }
.sei-hero__slide img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

/* ── Degradado horizontal ── */
.sei-hero__overlay {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(
    90deg,
    #0D1F33 0%,
    #0D1F33 17%,
    rgba(13,31,51,.86) 27%,
    rgba(13,31,51,.42) 40%,
    rgba(13,31,51,.10) 56%,
    transparent 68%
  );
}

/* ── Flechas carrusel ── */
.sei-hero__arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--white); cursor:pointer;
  transition:background .2s, border-color .2s;
}
.sei-hero__arrow:hover         { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.45); }
.sei-hero__arrow:focus-visible { outline:2px solid var(--ochre); outline-offset:3px; }
.sei-hero__arrow svg           { width:18px; height:18px; flex-shrink:0; }
.sei-hero__arrow--prev         { right:80px; }
.sei-hero__arrow--next         { right:24px; }

/* ── Puntos indicadores ── */
.sei-hero__dots { position:absolute; bottom:22px; right:24px; z-index:4; display:flex; gap:9px; align-items:center; }
.sei-hero__dot  { width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer; background:rgba(255,255,255,.35); transition:background .25s, transform .25s; }
.sei-hero__dot.active         { background:var(--ochre-lt); transform:scale(1.45); }
.sei-hero__dot:focus-visible  { outline:2px solid var(--ochre); outline-offset:2px; }

/* ── Contenido ── */
.sei-hero__cnt   { position:relative; z-index:3; display:flex; align-items:center; flex:1; }
.sei-hero__inner { width:100%; margin:0; padding:80px var(--pad) 60px; display:flex; flex-direction:column; gap:0; }
.sei-hero__text  { max-width:clamp(600px,44vw,760px); }
.sei-hero__benefits { margin-top:16px; }
.sei-hero__logo-img { display:none; }
.sei-hero__credit {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--mono); font-size:8px; color:rgba(255,255,255,.28);
  letter-spacing:.05em; text-align:center; line-height:1.6;
  pointer-events:none; white-space:nowrap;
}

/* ── Eyebrow ── */
.sei-hero__ref {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:14px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--ochre-lt); margin-bottom:18px;
}
.sei-hero__ref::before { content:''; display:block; width:16px; height:1px; background:var(--ochre-lt); flex-shrink:0; }

/* ── H1 ── */
.sei-hero__claim {
  font-family:var(--serif); font-size:clamp(34px,3.6vw,70px);
  font-weight:400; line-height:1.1; letter-spacing:-.03em;
  color:var(--white); margin-bottom:16px; max-width:780px;
  text-shadow:0 2px 32px rgba(0,0,0,.22);
}
.sei-hero__claim em { font-style:italic; color:rgba(255,255,255,.80); }

/* Modificador: em en dorado ochre (Actuaciones) */
.sei-hero--ochre .sei-hero__claim em { font-style:normal; color:var(--ochre-lt); }

/* ── Párrafo descriptivo ── */
.sei-hero__technical {
  font-size:clamp(13px,1.15vw,15px); color:rgba(255,255,255,.50);
  line-height:1.68; margin-bottom:20px; max-width:420px;
}
.sei-hero__sub {
  font-size:clamp(13px,1.25vw,15px); color:rgba(255,255,255,.60);
  line-height:1.72; margin-bottom:32px; max-width:400px;
  border-left:2px solid var(--sage-lt); padding-left:14px;
}

/* ── CTAs ── */
.sei-hero__btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; margin-bottom:14px; }

/* ══════════════════════════════════════════
   MODIFICADOR — COMPACT (estilo Quiénes Somos)
   Usado por: /actuaciones/
   Altura compacta, tipografía reducida, padding ajustado.
   Las propiedades globales del hero se heredan; solo se sobreescriben
   las que difieren del hero full-height de Inicio.
══════════════════════════════════════════ */
.sei-hero--compact {
  min-height: clamp(400px, 46vh, 560px);
}
.sei-hero--compact .sei-hero__claim {
  font-size: clamp(30px, 3.2vw, 52px);
}
.sei-hero--compact .sei-hero__inner {
  padding: clamp(28px, 3vw, 48px) var(--pad);
}
.sei-hero--compact .sei-hero__text {
  max-width: clamp(520px, 40vw, 680px);
}
@media (max-width:1024px) {
  .sei-hero--compact { min-height: clamp(360px, 40vh, 480px); }
  .sei-hero--compact .sei-hero__claim { font-size: clamp(24px, 4.5vw, 36px); }
}
@media (max-width:640px) {
  .sei-hero--compact { min-height: auto; }
  .sei-hero--compact .sei-hero__cnt { min-height: 52svh; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
══════════════════════════════════════════ */
@media (max-width:1024px) {
  .sei-hero { min-height:75vh; }
  .sei-hero__overlay {
    background:linear-gradient(
      90deg,
      #0D1F33 0%, #0D1F33 26%,
      rgba(13,31,51,.85) 40%, rgba(13,31,51,.45) 58%,
      rgba(13,31,51,.10) 78%, transparent 100%
    );
  }
  .sei-hero__claim { font-size:clamp(26px,5vw,40px); }
  .sei-hero__arrow--prev { right:70px; }
  .sei-hero__arrow--next { right:18px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — MÓVIL (≤ 640px)
══════════════════════════════════════════ */
@media (max-width:640px) {
  .sei-hero { min-height:auto; }
  .sei-hero__cnt { min-height:72svh; }
  .sei-hero__overlay {
    background:linear-gradient(
      to bottom,
      rgba(13,31,51,.25) 0%,
      rgba(13,31,51,.72) 40%,
      #0D1F33 100%
    );
  }
  .sei-hero__inner { padding:52px var(--pad) 44px; }
  .sei-hero__text  { max-width:100%; }
  .sei-hero__btns  { flex-direction:column; align-items:stretch; }
  .sei-hero__btns .sei-btn { justify-content:center; }
  .sei-hero__arrow { width:38px; height:38px; }
  .sei-hero__arrow svg { width:15px; height:15px; }
  .sei-hero__arrow--prev { right:64px; }
  .sei-hero__arrow--next { right:16px; }
  .sei-hero__dots  { bottom:16px; right:16px; }
}