/* ==============================================
   VARIABLES
   ============================================== */
:root {
  --bg:         #0d0d0d;
  --bg-2:       #151515;
  --bg-3:       #1e1e1e;
  --surface:    #252525;
  --red:        #F10000;
  --red-dark:   #b80000;
  --text:       #f0f0f0;
  --text-muted: #888888;
  --font-title: 'Oswald', Helvetica, sans-serif;
  --font-body:  'Inter', Arial, sans-serif;
  --t-fast:     0.2s ease;
  --t-base:     0.35s ease;
  --t-slow:     0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.7);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.9);
  --r-sm:       4px;
  --r-md:       8px;
}

/* ==============================================
   RESET & BASE
   ============================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
}

body { font-family: var(--font-body); }

/* ==============================================
   TIPOGRAFÍA GLOBAL
   ============================================== */
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-top: 0;
}

p { line-height: 1.7; }

a { color: inherit; }

strong { color: var(--text); }

/* ==============================================
   LAYOUT: HEADER
   ============================================== */
header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 80px;
  background: rgba(13, 13, 13, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(241, 0, 0, 0.35);
  display: flex;
  align-items: center;
  z-index: 1000;
  transition: height var(--t-base);
}

header.scrolled { height: 60px; }

header .btn_menu {
  display: none;
  position: relative;
}

header #menu-2 {
  position: absolute;
  top: 52px;
  right: -30px;
  width: 160px;
  display: none;
  flex-direction: column;
  background-color: var(--bg);
  border-top: 2px solid var(--red);
  z-index: 999;
  padding: 12px 0 12px 20px;
}

#menu-2 ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu-2 .menu li { margin-bottom: 16px; }

#menu-2.visible { display: flex; }

nav {
  margin-left: auto;
  margin-right: 30px;
}

header a img { margin-left: 30px; }

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  padding-right: 24px;
  color: var(--text-muted);
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--t-fast);
}

nav a:hover,
nav a:hover span,
nav a.active,
nav a.active span { color: var(--red); }

/* ==============================================
   LAYOUT: SCROLLABLE
   ============================================== */
.scrollable {
  position: absolute;
  top: 80px; bottom: 0;
  left: 0; right: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

/* ==============================================
   LAYOUT: FOOTER
   ============================================== */
footer {
  padding: 30px 0 20px;
  background-color: var(--bg-2);
  border-top: 1px solid rgba(241, 0, 0, 0.25);
}

footer p {
  display: flex;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin: 0 0 16px;
}

footer #social_media {
  display: flex;
  justify-content: center;
  gap: 10px;
}

footer .icon {
  color: var(--text-muted);
  font-size: 22px;
  transition: color var(--t-fast);
}

footer .icon:hover { color: var(--red); }

/* ==============================================
   HERO
   ============================================== */
/* ── HERO — Scroll Expansion ─────────────────────────────── */
#video_inicial {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
}

/* Background layer — full-bleed photo, fades out on scroll */
#hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

#hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

/* Expanding video container — width/height/border-radius driven by JS */
#hero-media-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
  width: 300px;
  height: 400px;
  border-radius: 12px;
}

#hero-media-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Dark overlay on the video — opacity driven by JS */
#hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0,0,0,0.45);
  pointer-events: none;
}

/* Title — centered, two words split apart on scroll */
#hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
  white-space: nowrap;
}

#hero-word-1,
#hero-word-2 {
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0,0,0,0.9);
  margin: 0;
  line-height: 1.1;
}

/* Subtitle below the video — top driven by JS */
#hero-meta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
}

#hero-sub-left,
#hero-sub-right {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.4vw, 1rem);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-style: italic;
}

/* Scroll indicator at the bottom */
#hero-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

#hero-scroll-hint span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero-scroll-arrow {
  animation: bounceDown 1.5s ease-in-out infinite;
  color: var(--red) !important;
  font-size: 1.1rem !important;
  letter-spacing: 0 !important;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* Required to animate a custom property as an angle */
@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes gradient-rotate {
  to { --gradient-angle: 360deg; }
}

@keyframes card-border-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}


/* ==============================================
   DARK SECTION  (info + radio — compartidos)
   ============================================== */
.dark-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  align-items: center;
  padding-top: 60px;
  background-color: var(--bg-2);
}

.dark-section button {
  margin-top: 28px;
  margin-bottom: 48px;
  background-color: var(--red);
  color: var(--text);
  border: none;
  font-family: var(--font-title);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  padding: 12px 28px;
  cursor: pointer;
  transition: background var(--t-fast);
}

.dark-section button:hover { background-color: var(--red-dark); }

.dark-section video {
  margin-bottom: 60px;
  width: 70%;
  max-width: 820px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
}

/* Wave: info (bg-2) → proyectos (bg) */
#seccion_info .wave-path    { fill: var(--bg); }
/* Wave: radio (bg-2) → info (bg-2) — mismo fondo, transición invisible */
#seccion_radio .wave-path   { fill: var(--bg-2); }

/* Info section overrides */
#seccion_info img {
  margin-bottom: 56px;
  width: 550px;
  max-width: 88%;
  height: auto;
  cursor: pointer;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--t-base);
}

#seccion_info img:hover {
  box-shadow: 0 0 32px rgba(241, 0, 0, 0.55);
}

/* info (bg-2) → proyectos (bg) */
#seccion_info + .separador {
  height: 140px;
  background: linear-gradient(to bottom, var(--bg-2) 0%, var(--bg) 100%);
}

/* Radio section overrides */
#seccion_radio .separador {
  height: 100px;
  width: 100%;
  background-color: var(--bg-2);
  overflow: hidden;
  position: relative;
}

/* ==============================================
   PROYECTOS
   ============================================== */
#seccion_proyectos {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-color: var(--bg);
  gap: 3px;
}

.proyecto {
  position: relative;
  overflow: hidden;
  flex: 1 1 calc(33.333% - 2px);
  max-width: calc(33.333% - 2px);
  aspect-ratio: 4 / 2.5;
  background-color: var(--red);
}

.proyecto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}

.proyecto:hover img { transform: scale(1.05); }

.proyecto .info_proyectos {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.94) 0%,
    rgba(241,0,0,0.1) 100%
  );
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px 22px;
  transform: translateY(100%);
  transition: transform var(--t-base);
}

.proyecto:hover .info_proyectos { transform: translateY(0); }

.info_proyectos h1 {
  font-size: clamp(0.9rem, 1.8vw, 1.5rem);
  margin: 0 0 4px;
  letter-spacing: 0.06em;
}

.info_proyectos p {
  font-size: clamp(0.7rem, 1.1vw, 0.95rem);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.3;
}

/* ==============================================
   CARRUSEL SERVICIOS
   ============================================== */
#seccion_servicios {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-2);
  padding: 3rem 2rem 3.5rem;
  overflow: hidden;
}

/* ==============================================
   ENCABEZADOS DE SECCIÓN (unificados)
   ============================================== */
.seccion-header {
  text-align: center;
  margin-bottom: 2rem;
  width: 100%;
}

.seccion-label {
  display: block;
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

.seccion-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 16px;
}

.seccion-line {
  width: 48px;
  height: 2px;
  background: var(--red);
  margin: 0 auto;
}

/* Overrides por sección */
.dark-section   .seccion-header { margin-bottom: 0; }
#seccion_nosotros .seccion-header { margin-bottom: 2.5rem; }
#seccion_proyectos .seccion-header { padding: 60px 20px 40px; }
#seccion_clientes  .seccion-header { padding: 50px 20px 36px; }
#seccion_contacto  .seccion-header { padding: 60px 20px 0; }

.servicios-carousel-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.carousel-track {
  display: flex;
  overflow: hidden;
  gap: 1.5rem;
  align-items: center;
  padding: 40px 50px;
  transition: transform 0.5s ease;
}

/* ── CAROUSEL CARD — Animated Glowing Border ─────────────── */
.card {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  border-radius: var(--r-sm);
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity    0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    width      0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    height     0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform  0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* During content swap, hide the border glow so the dark background shows cleanly */
.card-changing::before,
.card-changing::after {
  opacity: 0 !important;
}

/* Primary rotating border layer — red + white conic gradient */
.card::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 999px;
  height: 999px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  background: conic-gradient(
    #0d0d0d,
    #F10000   5%,
    #0d0d0d  38%,
    #0d0d0d  50%,
    #ffffff  60%,
    #0d0d0d  87%
  );
  filter: blur(3px);
  animation: card-border-spin 5s linear infinite;
  transition: opacity 0.15s ease;
}

/* Secondary softer layer for depth */
.card::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(82deg);
  background: conic-gradient(
    transparent,
    #b80000,
    transparent  10%,
    transparent  50%,
    rgba(255,255,255,0.5),
    transparent  60%
  );
  filter: blur(2px);
  animation: card-border-spin 5s linear infinite;
  transition: opacity 0.15s ease;
}

/* Hover: spin faster */
.card:hover::before,
.card:hover::after {
  animation-duration: 1.5s;
}

/* Inner content — masks the spinning gradient, leaving ~3px border visible */
.card-inner {
  position: absolute;
  inset: 2px;
  border-radius: calc(var(--r-sm) - 1px);
  background: var(--bg-3);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  transition: opacity 0.18s ease;
}

.card h3 {
  color: var(--text);
  margin: 6px 0 0;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.card .description {
  display: none;
  text-align: justify;
  margin: 8px 2px 0;
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.card.active {
  opacity: 1;
  width: 340px;
  height: 340px;
  box-shadow: var(--shadow-md);
}

.card i { color: var(--red); }

.card.active i {
  font-size: 130px;
  line-height: 1;
}

.card.left i,
.card.right i {
  font-size: 70px;
  line-height: 1;
}

.card.active .description { display: block; }

.card.left,
.card.right {
  transform: scale(0.8);
  opacity: 0.35;
}

.nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  color: var(--red);
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}

.nav:hover {
  background: var(--red);
  color: var(--text);
}

/* Single mode */
.carousel-track.single-mode {
  justify-content: center;
  gap: 0;
  padding-left: 16px;
  padding-right: 16px;
}

.carousel-track.single-mode .card {
  width: 92%;
  max-width: 300px;
  min-width: 180px;
  min-height: 260px;
  padding: 1rem;
  margin: 0 auto;
  opacity: 1;
  box-shadow: var(--shadow-md);
}

.carousel-track.single-mode .card.active {
  max-width: 300px;
  min-height: 300px;
}

.carousel-track.single-mode .card i,
.carousel-track.single-mode .card.active i {
  font-size: 90px;
  height: auto;
  display: block;
  line-height: 1;
}

.carousel-track.single-mode .card h3 {
  font-size: 1rem;
  margin-top: 8px;
}

.carousel-track.single-mode .card .description {
  display: block;
  font-size: 0.86rem;
  margin-top: 8px;
  line-height: 1.3;
}

/* ==============================================
   NOSOTROS
   ============================================== */
#seccion_nosotros {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  background-color: var(--bg);
  padding: 60px 0 70px;
}

.foto_nosotros {
  position: relative;
  width: 36%;
  margin: 0 4% 0 5%;
  flex-shrink: 0;
}

.foto_nosotros img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  box-shadow: 6px 6px 0 var(--red), var(--shadow-lg);
}

.foto_nosotros h2 {
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  margin: 18px 0 4px;
  letter-spacing: 0.06em;
}

.foto_nosotros p {
  font-size: clamp(0.75rem, 1.3vw, 1rem);
  color: var(--red);
  margin: 0;
  font-family: var(--font-title);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.desc_nosotros {
  flex: 1;
  margin-right: 5%;
  padding-left: 28px;
  border-left: 3px solid var(--red);
}

.desc_nosotros p {
  text-align: justify;
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 16px;
}

.desc_nosotros p strong { color: var(--text); }

/* ==============================================
   CONTACTO
   ============================================== */
#seccion_contacto {
  background-color: var(--bg);
  padding-bottom: 60px;
}

.contacto-tagline {
  width: 80%;
  max-width: 640px;
  margin: 28px auto 40px;
  text-align: center;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.7;
  border-bottom: 1px solid rgba(241, 0, 0, 0.25);
  padding-bottom: 16px;
}

.mapa_contacto {
  width: 90%;
  aspect-ratio: 2 / 1;
  margin: 0 5% 40px;
  box-shadow: var(--shadow-md);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.mapa_contacto:hover {
  box-shadow: 0 4px 24px rgba(241, 0, 0, 0.35);
}

.mapa_contacto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.texto2_contacto {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 36px;
  padding: 0 5%;
}

.parte1_contacto { width: 40%; }

.parte1_contacto img {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 3 / 1;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.parte1_contacto h3 {
  margin: 18px 0 0 5%;
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  color: var(--red);
  letter-spacing: 0.06em;
}

.parte1_contacto p {
  margin: 4px 0 0 5%;
  font-size: clamp(0.78rem, 1.5vw, 0.95rem);
  color: var(--text-muted);
}

.parte2_contacto {
  width: 50%;
  position: relative;
}

.parte2_contacto .p_contacto {
  margin: 0 0 14px;
  font-size: clamp(0.82rem, 1.4vw, 1rem);
  color: var(--text-muted);
  line-height: 1.65;
}

.parte2-1_contacto {
  position: absolute;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  right: 0;
  left: 0;
}

.parte2-1_contacto h3 {
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  margin-bottom: 6px;
  color: var(--red);
  letter-spacing: 0.06em;
}

.parte2-1_contacto p {
  margin-top: 4px;
  font-size: clamp(0.78rem, 1.3vw, 0.95rem);
  color: var(--text-muted);
}

.parte2-2_contacto { width: 45%; }

#seccion_contacto .separador {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  margin-bottom: 36px;
  background: transparent;
}

#seccion_contacto .separador h1 {
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* Formulario con floating labels */
/* ── FORM — Animated Letter Labels ───────────────────────── */
.form_contacto {
  width: 90%;
  max-width: 680px;
  margin: 0 auto;
}

.form-field {
  position: relative;
  margin-bottom: 40px;
  overflow: visible;
}

/* Bottom-border only inputs — red on focus */
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  outline: none;
  transition: border-color var(--t-fast);
}

.form-field textarea {
  height: 120px;
  resize: none;
  display: block;
}

.form-field input:focus,
.form-field textarea:focus { border-color: var(--red); }

/* Label = flex row of character spans */
.form-field label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  overflow: visible;
  line-height: 1;
}

.form-field--textarea label {
  top: 12px;
  transform: none;
}

/* Individual character — spring-like transition */
.form-field label .char {
  display: inline-block;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.45);
  transition:
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    color      0.24s ease;
  will-change: transform;
}

/* Active state: letters fly up and turn red */
.form-field.is-active label .char {
  transform: translateY(-145%);
  color: var(--red);
}

.btn_enviar {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 20px;
}

.btn_enviar button {
  color: #fff;
  background-color: transparent;
  border: 2px solid var(--red);
  border-radius: var(--r-sm);
  padding: 13px 52px;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.btn_enviar button:hover {
  background-color: var(--red);
  color: #fff;
}

/* ==============================================
   CLIENTES
   ============================================== */
#seccion_clientes {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--bg-3);
  padding: 16px 0;
}

.client_card {
  position: relative;
  overflow: hidden;
  flex: 1 1 calc(16.66% - 5px);
  max-width: calc(16.66% - 5px);
  aspect-ratio: 1 / 1;
  padding: 14px;
}

.client_card img {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.client_card .normal {
  opacity: 0;
  z-index: 1;
}

.client_card .gray {
  z-index: 2;
  filter: brightness(0) invert(1);
  opacity: 0.28;
}

.client_card:hover .normal { opacity: 1; }
.client_card:hover .gray   { opacity: 0; }

/* ==============================================
   RADIO PAGE
   ============================================== */
.radio-page {
  background-color: var(--bg);
  padding: 60px 5% 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.radio-desc {
  max-width: 760px;
  width: 100%;
  text-align: center;
  margin: 28px 0 40px;
}

.radio-desc p {
  color: var(--text-muted);
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  line-height: 1.8;
  margin-bottom: 10px;
}

.radio-desc .radio-intro {
  color: var(--text);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  margin-bottom: 18px;
}

.radio-schedule {
  width: 100%;
  max-width: 640px;
  margin-bottom: 48px;
}

.radio-schedule-title {
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  text-align: center;
  margin: 0 0 16px;
}

.radio-schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.radio-schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--r-sm);
  padding: 12px 16px;

  /* Animated rotating gradient border */
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--bg-3), var(--bg-3)),
    conic-gradient(
      from var(--gradient-angle),
      #380e0e  0%,
      #5a1414 22%,
      #a02828 42%,
      #5a1414 52%,
      #1c0707 62%,
      #b10000 72%,
      #1c0707 82%,
      #5a1414 95%,
      #1c0707 100%
    );
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  animation: gradient-rotate 5s linear infinite;
}

.schedule-region {
  font-size: clamp(0.75rem, 1.2vw, 0.88rem);
  color: var(--text-muted);
}

.schedule-time {
  font-family: var(--font-title);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  color: var(--text);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  margin-left: 12px;
}

.radio-episodes-label {
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 4px;
  align-self: center;
}

/* ==============================================
   RADIO CARDS — Spotlight Glow
   ============================================== */
#radio_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 28px;
  width: 100%;
}

/* Shared spotlight base */
.radio_card,
.radio_card_main {
  /* color system vars */
  --rc-base:    0;
  --rc-spread:  35;
  --rc-size:    260;
  --rc-border:  2;
  --rc-radius:  8;
  --rc-hue: calc(var(--rc-base) + (var(--ptr-xp, 0) * var(--rc-spread)));
  --rc-bs: calc(var(--rc-border) * 1px);
  --rc-ss: calc(var(--rc-size) * 1px);

  position: relative;
  display: flex;
  align-items: center;
  margin: 5px;
  width: 70%;
  border-radius: calc(var(--rc-radius) * 1px);
  border: var(--rc-bs) solid rgba(255, 255, 255, 0.08);
  touch-action: none;
  overflow: hidden;

  /* spotlight fill — follows mouse via fixed attachment */
  background-image: radial-gradient(
    var(--rc-ss) var(--rc-ss)
    at calc(var(--ptr-x, -9999) * 1px) calc(var(--ptr-y, -9999) * 1px),
    hsl(var(--rc-hue) 100% 62% / 0.13),
    transparent
  );
  background-color: rgba(16, 6, 6, 0.78);
  background-attachment: fixed;

  transition: width var(--t-fast), height var(--t-fast), border-color var(--t-fast);
}

/* Regular card */
.radio_card   { height: 52px; }

/* Featured (newest) card */
.radio_card_main {
  --rc-size:   320;
  --rc-border: 2;
  height: 70px;
  border-color: rgba(241, 0, 0, 0.25);
  background-image: radial-gradient(
    var(--rc-ss) var(--rc-ss)
    at calc(var(--ptr-x, -9999) * 1px) calc(var(--ptr-y, -9999) * 1px),
    hsl(var(--rc-hue) 100% 60% / 0.2),
    transparent
  );
}

/* ── Glowing border via ::before (colored) + ::after (white) ── */
.radio_card::before,
.radio_card_main::before,
.radio_card::after,
.radio_card_main::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: calc(var(--rc-bs) * -1);
  border: var(--rc-bs) solid transparent;
  border-radius: calc(var(--rc-radius) * 1px);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* show only on the border strip */
  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  -webkit-mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
}

/* Colored glow on border */
.radio_card::before,
.radio_card_main::before {
  background-image: radial-gradient(
    calc(var(--rc-ss) * 0.75) calc(var(--rc-ss) * 0.75)
    at calc(var(--ptr-x, -9999) * 1px) calc(var(--ptr-y, -9999) * 1px),
    hsl(var(--rc-hue) 100% 50% / 1),
    transparent 100%
  );
  filter: brightness(2.2);
}

/* White highlight on border */
.radio_card::after,
.radio_card_main::after {
  background-image: radial-gradient(
    calc(var(--rc-ss) * 0.45) calc(var(--rc-ss) * 0.45)
    at calc(var(--ptr-x, -9999) * 1px) calc(var(--ptr-y, -9999) * 1px),
    hsl(0 100% 100% / 0.75),
    transparent 100%
  );
}

/* Hover: slight expand + border hint */
.radio_card:hover {
  width: 72%;
  height: 54px;
  border-color: rgba(241, 0, 0, 0.3);
}

.radio_card_main:hover {
  width: 72%;
  height: 72px;
  border-color: rgba(241, 0, 0, 0.5);
}

/* Text + icon */
.radio_card icon,
.radio_card_main icon {
  color: var(--text);
  font-size: 24px;
  margin-left: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.radio_card p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 18px;
  margin-right: 8px;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
  transition: color var(--t-fast);
}

.radio_card_main p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4%;
  padding-right: 1%;
  font-weight: 700;
  font-size: clamp(0.88rem, 1.5vw, 1.05rem);
  color: var(--text);
  position: relative;
  z-index: 1;
}

.radio_card:hover p,
.radio_card_main:hover p { color: var(--text); }

#radio_container a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* ==============================================
   MODAL
   ============================================== */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
}

.modal-content {
  background-color: var(--bg-3);
  border: 1px solid rgba(241, 0, 0, 0.3);
  position: relative;
  margin: 12% auto;
  padding: 36px 28px 24px;
  width: 85%;
  max-width: 480px;
  text-align: center;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

.modal.active { display: block; }

.modal-buttons {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.modal-buttons button {
  padding: 10px 28px;
  font-size: 0.88rem;
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: 0.1em;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-transform: uppercase;
}

.btn-salir {
  background-color: var(--red);
  color: var(--text);
}

.btn-salir:hover { background-color: var(--red-dark); }

/* ==============================================
   SEPARADORES & WAVE
   ============================================== */

/* Base: sin fondo, solo espacio */
.separador {
  width: 100%;
  height: 120px;
  text-align: center;
  background: transparent;
  overflow: hidden;
  position: relative;
}

.separador h1 {
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin: 36px 20px 0;
}

/* ── Gradientes orgánicos entre secciones ── */

/* proyectos (bg) → servicios (bg-2) */
#seccion_proyectos + .separador {
  height: 140px;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-2) 100%);
}

/* servicios (bg-2) → nosotros (bg) */
#seccion_servicios + .separador {
  height: 140px;
  background: linear-gradient(to bottom, var(--bg-2) 0%, var(--bg) 100%);
}

/* contacto (bg) → clientes (bg-3) */
#seccion_contacto + .separador {
  height: 140px;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-3) 100%);
}

/* nosotros (bg) → contacto (bg): mismo color, solo espacio */
#seccion_nosotros + .separador {
  height: 0;
}

/* clientes (bg-3) → radio (bg-2) */
#seccion_clientes + .separador {
  height: 140px;
  background: linear-gradient(to bottom, var(--bg-3) 0%, var(--bg-2) 100%);
}

/* Separador interno del contacto con texto */
#seccion_contacto .separador {
  background: transparent;
  height: 80px;
}

.separador2 {
  width: 100%;
  height: 200px;
  background-color: var(--bg-2);
  overflow: hidden;
  position: relative;
}

.img_sup {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 90%;
  object-fit: contain;
}

.img_inf {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.separador img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wave-transition svg {
  display: block;
  width: 100%;
  height: 100px;
}

.wave-path {
  fill: var(--bg);
  animation: wave 6s ease-in-out infinite alternate;
}

@keyframes wave {
  0%   { d: path("M0,160L60,176C120,192,240,224,360,213.3C480,203,600,149,720,144C840,139,960,181,1080,186.7C1200,192,1320,160,1380,144L1440,128L1440,0L0,0Z"); }
  100% { d: path("M0,160L60,180C120,200,240,220,360,210C480,190,600,150,720,150C840,150,960,180,1080,190C1200,200,1320,180,1380,160L1440,140L1440,0L0,0Z"); }
}

/* ==============================================
   ANIMACIONES SCROLL (Intersection Observer)
   ============================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}

[data-animate].visible {
  opacity: 1;
  transform: none;
}

/* Delay escalonado para clientes */
.client_card:nth-child(1)[data-animate]  { transition-delay: 0.05s; }
.client_card:nth-child(2)[data-animate]  { transition-delay: 0.10s; }
.client_card:nth-child(3)[data-animate]  { transition-delay: 0.15s; }
.client_card:nth-child(4)[data-animate]  { transition-delay: 0.20s; }
.client_card:nth-child(5)[data-animate]  { transition-delay: 0.25s; }
.client_card:nth-child(6)[data-animate]  { transition-delay: 0.30s; }
.client_card:nth-child(7)[data-animate]  { transition-delay: 0.05s; }
.client_card:nth-child(8)[data-animate]  { transition-delay: 0.10s; }
.client_card:nth-child(9)[data-animate]  { transition-delay: 0.15s; }
.client_card:nth-child(10)[data-animate] { transition-delay: 0.20s; }
.client_card:nth-child(11)[data-animate] { transition-delay: 0.25s; }
.client_card:nth-child(12)[data-animate] { transition-delay: 0.30s; }

/* Delay escalonado proyectos */
.proyecto:nth-child(1)[data-animate]  { transition-delay: 0.00s; }
.proyecto:nth-child(2)[data-animate]  { transition-delay: 0.07s; }
.proyecto:nth-child(3)[data-animate]  { transition-delay: 0.14s; }
.proyecto:nth-child(4)[data-animate]  { transition-delay: 0.00s; }
.proyecto:nth-child(5)[data-animate]  { transition-delay: 0.07s; }
.proyecto:nth-child(6)[data-animate]  { transition-delay: 0.14s; }

/* ==============================================
   UTILIDADES
   ============================================== */
.btn_Mas {
  display: flex;
  justify-content: center;
  margin: 16px 0 50px;
}

.btn_Mas button {
  background-color: var(--red);
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  border: none;
  border-radius: var(--r-sm);
  padding: 12px 28px;
  cursor: pointer;
  transition: background var(--t-fast);
}

.btn_Mas button:hover { background-color: var(--red-dark); }

/* ==============================================
   MEDIA QUERIES
   ============================================== */
@media (max-width: 1024px) {
  .proyecto {
    flex: 1 1 calc(50% - 2px);
    max-width: calc(50% - 2px);
  }
}

@media (max-width: 700px) {
  nav { display: none; }

  header .btn_menu {
    display: block;
    width: 70px;
    margin-right: 0;
    margin-left: auto;
  }

  .btn_menu button {
    all: unset;
    font-size: 24px;
    cursor: pointer;
    color: var(--text);
  }

  .btn_menu button:hover { color: var(--red); }

  #hero-word-1,
  #hero-word-2 { font-size: 2.2rem; }

  #seccion_nosotros {
    flex-direction: column;
    padding: 40px 0;
  }

  .foto_nosotros {
    width: 82%;
    margin: 0 auto 0 7%;
  }

  .desc_nosotros {
    width: 82%;
    margin: 28px auto 0;
    padding-left: 18px;
  }

  .proyecto {
    flex: 1 1 100%;
    max-width: 100%;
  }

  footer p {
    font-size: 12px;
    text-align: center;
    padding: 0 12px;
  }

  .radio_card p { font-size: 0.82rem; }

  .dark-section video { width: 92%; }

  .texto2_contacto {
    flex-direction: column;
    align-items: center;
  }

  .parte1_contacto,
  .parte2_contacto { width: 90%; }

  .parte2-1_contacto {
    position: static;
    margin-top: 20px;
  }

  .client_card {
    flex: 1 1 calc(33.33% - 5px);
    max-width: calc(33.33% - 5px);
  }

  #seccion_info img {
    width: 92%;
  }
}