/* ==========================================================================
   EL BRO — Sistema de diseño
   Editorial oscuro, cinematográfico. Un solo acento: amarillo ácido.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,300..700&display=swap');

:root{
  /* Paleta oficial El Bro */
  --acid:      #ECF22E;
  --lime:      #D2D92B;
  --olive:     #A1A725;
  --gray-mid:  #404040;
  --bg:        #0D0D0D;
  --bg-alt:    #141414;
  --border:    #1E1E1E;
  --white:     #FFFFFF;
  --text-sec:  #8a8a8a;
  --text-ter:  #555555;

  --font-display: 'Google Sans Flex', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --container: 1180px;
  --gutter: clamp(24px, 5vw, 64px);

  /* Sistema "app" — radios y vidrio */
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;
  --glass-bg: rgba(20,20,20,0.55);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur: blur(22px) saturate(150%);
  --shadow-card: 0 10px 34px rgba(0,0,0,0.38);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* Fondo dinámico — blobs suaves difuminados con la paleta de marca,
   fijos detrás de todo el contenido en cada página. */
body::before{
  content:'';
  position:fixed;
  inset:-15%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(38% 32% at 12% 8%,  rgba(236,242,46,0.13), transparent 70%),
    radial-gradient(34% 30% at 88% 18%, rgba(210,217,43,0.10), transparent 70%),
    radial-gradient(42% 38% at 50% 95%, rgba(161,167,37,0.11), transparent 70%),
    radial-gradient(30% 26% at 95% 85%, rgba(236,242,46,0.07), transparent 70%);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--acid); color:var(--bg); }

:focus-visible{
  outline:2px solid var(--acid);
  outline-offset:3px;
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* Tipografía -------------------------------------------------------- */

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.015em;
  line-height:1.08;
}

.h-display{ font-size:clamp(40px, 7vw, 84px); }
.h-section{ font-size:clamp(30px, 4.2vw, 52px); }
.h-card{ font-size:clamp(20px, 2.4vw, 26px); font-weight:700; }

.eyebrow{
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  color:var(--gray-mid);
}

.lede{
  font-size:clamp(16px,1.7vw,19px);
  color:var(--text-sec);
  font-weight:300;
  max-width:56ch;
  line-height:1.7;
}

.accent{ color:var(--acid); }

/* Regla divisoria corta (nunca full-width) --------------------------- */
.rule{
  width:36px;
  height:1px;
  background:var(--lime);
  border:0;
}

/* Botones ------------------------------------------------------------ */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(236,242,46,0.25); }
.btn-ghost:hover{ transform:translateY(-1px); }

.btn-primary{
  background:var(--acid);
  color:var(--bg);
}
.btn-primary:hover{ background:var(--lime); }

.btn-ghost{
  border:1px solid var(--border);
  color:var(--white);
}
.btn-ghost:hover{ border-color:var(--acid); color:var(--acid); }

/* Nav ------------------------------------------------------------------ */

.nav{
  position:fixed;
  top:14px;
  left:var(--gutter);
  right:var(--gutter);
  z-index:100;
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}

.logo{
  display:flex;
  align-items:center;
}
.logo-img{
  height:44px;
  width:auto;
  display:block;
}

.nav-links{
  display:flex;
  gap:32px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--text-sec);
}
.nav-links a:hover{ color:var(--white); }

.nav-cta{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:500;
  padding:11px 22px;
  border:1px solid var(--border);
  border-radius:999px;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.nav-cta:hover{ border-color:var(--acid); color:var(--bg); background:var(--acid); }

@media (max-width:760px){
  .nav-links{ display:none; }
}

/* Footer ---------------------------------------------------------------- */

.footer{
  border-top:1px solid var(--border);
  padding:48px var(--gutter) 32px;
  margin-top:120px;
}
.footer-grid{
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:24px;
  align-items:center;
}
.footer-links{
  display:flex;
  gap:28px;
  font-size:13px;
  color:var(--text-sec);
}
.footer-links a:hover{ color:var(--acid); }
.footer-meta{
  font-size:12px;
  color:var(--text-ter);
}

/* Sección genérica -------------------------------------------------- */

.section{
  padding:120px 0;
}
.section-tight{ padding:80px 0; }

@media (max-width:760px){
  .section{ padding:80px 0; }
}

/* Grid de tarjetas (hub de trabajos) -------------------------------- */

.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
@media (max-width:900px){
  .service-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .service-grid{ grid-template-columns:1fr; }
}

.service-card{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:36px 30px;
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  position:relative;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card);
  border-color:rgba(236,242,46,0.28);
}
.service-card:hover .service-num{ color:var(--acid); }

.service-num{
  font-size:12px;
  color:var(--gray-mid);
  transition:color .3s ease;
}
.service-card h3{
  font-size:24px;
  font-weight:400;
  margin:20px 0 12px;
}
.service-card p{
  font-size:14px;
  color:var(--text-sec);
  line-height:1.6;
  margin-bottom:24px;
}
.service-more{
  font-size:13px;
  font-weight:500;
  color:var(--white);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.service-card:hover .service-more{ color:var(--acid); }
.service-more svg{ transition:transform .25s ease; }
.service-card:hover .service-more svg{ transform:translateX(4px); }

/* Carrusel infinito de logos ----------------------------------------- */

.logo-cloud{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.logo-cloud.is-static{
  -webkit-mask-image:none;
  mask-image:none;
  overflow:visible;
}
.logo-track{
  display:flex;
  align-items:center;
  gap:64px;
  width:max-content;
  animation:scroll-logos 32s linear infinite;
}
.logo-cloud:hover .logo-track{ animation-play-state:paused; }

/* Modo estático — pocas marcas: fila fija, centrada, sin loop */
.logo-track.is-static{
  animation:none;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
  flex-wrap:wrap;
  justify-content:center;
  row-gap:32px;
  column-gap:56px;
}
.logo-track.is-static img{
  height:46px;
  opacity:0.72;
}
.logo-track.is-static img:hover{ opacity:1; }

.logo-track img{
  height:36px;
  width:auto;
  opacity:0.5;
  filter:grayscale(1) brightness(1.6);
  flex-shrink:0;
}
@keyframes scroll-logos{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Placeholder visual (fotos/logos aún no cargados) -------------------- */

.ph{
  background:
    repeating-linear-gradient(135deg, #161616, #161616 8px, #131313 8px, #131313 16px);
  border:1px dashed var(--border);
  border-radius:var(--r-md);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-ter);
  font-size:11px;
  letter-spacing:0.08em;
  text-align:center;
  padding:12px;
}

/* Portafolio de video (grid + filtros) -------------------------------- */

.filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.filter-btn{
  padding:9px 18px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  color:var(--text-sec);
  background:transparent;
  transition:all .2s ease;
}
.filter-btn:hover{ border-color:var(--gray-mid); color:var(--white); }
.filter-btn.active{
  background:var(--acid);
  border-color:var(--acid);
  color:var(--bg);
  font-weight:500;
}

.video-grid, .media-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media (max-width:900px){
  .video-grid, .media-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .video-grid, .media-grid{ grid-template-columns:1fr; }
}

.video-card{
  position:relative;
  aspect-ratio:16/9;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.video-card:hover{ transform:translateY(-4px); }
.video-card img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease, opacity .3s ease;
}
.video-card:hover img{ transform:scale(1.04); }
.video-card .play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 40%);
}
.video-card .play svg{
  width:44px; height:44px;
  opacity:0;
  transform:scale(0.85);
  transition:opacity .25s ease, transform .25s ease;
}
.video-card:hover .play svg{ opacity:1; transform:scale(1); }
.video-card .cat-tag{
  position:absolute; top:12px; left:12px;
  font-size:10px;
  letter-spacing:0.08em;
  background:rgba(13,13,13,0.75);
  color:var(--lime);
  padding:5px 9px;
  border-radius:999px;
  text-transform:uppercase;
}
.video-card .vc-title{
  position:absolute; bottom:0; left:0; right:0;
  padding:14px;
  font-size:13px;
  color:var(--white);
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
}

/* Lightbox de video ---------------------------------------------------- */

.lightbox{
  position:fixed; inset:0;
  background:rgba(6,6,6,0.94);
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:5vw;
}
.lightbox.open{ display:flex; }
.lightbox-inner{
  width:100%;
  max-width:1000px;
  aspect-ratio:16/9;
  position:relative;
  background:#000;
}
.lightbox-inner iframe{
  width:100%; height:100%; border:0;
}
.lightbox-close{
  position:absolute;
  top:-44px; right:0;
  color:var(--white);
  font-size:14px;
  display:flex; align-items:center; gap:8px;
}
.lightbox-close:hover{ color:var(--acid); }

/* Hero interior de servicio -------------------------------------------- */

.service-hero{
  padding:170px 0 60px;
  border-bottom:1px solid var(--border);
}
.service-hero .eyebrow{ margin-bottom:18px; }
.service-hero h1{ margin-bottom:22px; }

/* Info: precio + proceso ------------------------------------------------ */

.info-grid{
  display:grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap:64px;
}
.info-col{
  display:flex;
  flex-direction:column;
  gap:20px;
}
@media (max-width:800px){
  .info-grid{ grid-template-columns:1fr; gap:48px; }
}

.price-box{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-top:2px solid var(--acid);
  padding:32px;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  align-self:start;
}
.price-box .eyebrow{ margin-bottom:14px; }
.price-value{
  font-family:var(--font-display);
  font-weight:700;
  font-size:38px;
  margin-bottom:6px;
}
.price-value .cur{ font-size:18px; color:var(--text-sec); }
.price-note{ font-size:13px; color:var(--text-sec); margin-bottom:24px; }

/* Forma de pago (debajo del precio) ------------------------------------ */

.payment-box{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:28px 32px;
}
.payment-steps{ list-style:none; }
.payment-steps li{
  display:flex;
  gap:14px;
  align-items:baseline;
  font-size:14px;
  color:var(--text-sec);
  padding:9px 0;
  border-top:1px solid var(--border);
}
.payment-steps li:first-child{ border-top:0; }
.payment-steps li span{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--white);
  width:44px;
  flex-shrink:0;
  font-size:15px;
}
.payment-methods{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pm-chip{
  font-size:11px;
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text-sec);
}
.policy-note{
  font-size:12px;
  color:var(--text-ter);
  line-height:1.65;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.process-list{ list-style:none; }
.process-list li{
  display:flex;
  gap:20px;
  padding:22px 0;
  border-top:1px solid var(--border);
}
.process-list li:last-child{ border-bottom:1px solid var(--border); }

/* Variante: proceso a ancho completo, sin caja de precio al lado (2 columnas) */
.process-full .process-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:56px;
}
.process-full .process-list li{
  border-top:1px solid var(--border);
}
.process-full .process-list li:last-child{ border-bottom:0; }
@media (max-width:760px){
  .process-full .process-list{ grid-template-columns:1fr; }
  .process-full .process-list li:last-child{ border-bottom:1px solid var(--border); }
}
.process-step-num{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--acid);
  flex-shrink:0;
  width:28px;
}
.process-step h4{
  font-size:15px;
  font-weight:500;
  margin-bottom:6px;
}
.process-step p{
  font-size:14px;
  color:var(--text-sec);
  line-height:1.65;
  max-width:52ch;
}

/* Formulario de contacto ------------------------------------------------ */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
}
@media (max-width:800px){
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
}

.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-size:12px;
  color:var(--text-sec);
  margin-bottom:8px;
  letter-spacing:0.03em;
}
.field input, .field textarea{
  width:100%;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:13px 14px;
  color:var(--white);
  font-family:var(--font-body);
  font-size:14px;
  transition:border-color .2s ease;
}
.field input:focus, .field textarea:focus{
  border-color:var(--acid);
  outline:none;
}
.field textarea{ min-height:120px; resize:vertical; }

.contact-channels{ margin-top:8px; }
.channel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
  border-top:1px solid var(--border);
  font-size:14px;
}
.channel:last-child{ border-bottom:1px solid var(--border); }
.channel span:first-child{ color:var(--text-sec); }
.channel a:hover{ color:var(--acid); }

.logo-cloud {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.logo-cloud [data-logo-track] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
  transform: none !important;
  flex-wrap: nowrap;
}

.logo-cloud [data-logo-track] img {
  width: 200px;
  height: 150px;
  object-fit: contain;
  flex-shrink: 0;
  animation: none !important;
  transition: none !important;
}

/* Utilidades de scroll-reveal (un solo momento, no todo se anima) ------ */

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{ opacity:1; transform:translateY(0); }


/* Próximamente ------------------------------------------------------- */
.coming-soon{
  max-width:640px;
  padding:48px 40px;
  background:var(--glass-bg);
  border:0.5px solid var(--border);
  border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.coming-chip{
  display:inline-block;
  padding:5px 10px;
  margin-bottom:22px;
  background:var(--acid);
  color:#0D0D0D;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  border-radius:2px;
}
.coming-soon h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(24px,3vw,34px);
  line-height:1.15;
  margin:0 0 14px;
}
.coming-soon p{ color:var(--text-ter); font-size:14px; line-height:1.7; margin:0 0 26px; }
@media (max-width:600px){ .coming-soon{ padding:32px 24px; } }