/* ============================================================
   medios-v4.css — Publisitios v4 · Páginas de Medios OOH
   Contraste claro/oscuro intercalado (como el index)
   ============================================================ */

body { background: var(--dk) !important; color: #fff; }

/* ── HERO ── */
.hero-banner {
  position: relative;
  width: 100%;
  height: 72vh;
  min-height: 480px;
  max-height: 720px;
  margin-top: 130px;
  overflow: hidden;
}
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6,8,16,.25) 0%, rgba(6,8,16,.78) 100%);
  z-index: 1;
}
.hero-banner img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.hero-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  color: #fff;
  max-width: 900px;
  padding: 0 2rem;
  z-index: 2;
  width: 100%;
}
.hero-content p:first-child {
  font-family: var(--fb);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yel-l);
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hero-content p:first-child::before {
  content: '';
  width: 18px; height: 2px;
  background: var(--yel-l);
  border-radius: 2px;
}
.hero-content h1 {
  font-family: var(--fd) !important;
  font-size: clamp(3rem,8vw,7rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em;
  line-height: .92 !important;
  color: #fff !important;
  margin-bottom: 1.25rem;
}
.hero-content p {
  font-family: var(--fb);
  font-size: clamp(.95rem,2vw,1.1rem);
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.hero-content .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: var(--yel) !important;
  color: #0A0A0A !important;
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  padding: 13px 28px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  box-shadow: 0 4px 20px rgba(245,194,0,.45) !important;
  transition: background .2s,transform .2s !important;
  border: none !important;
}
.hero-content .btn:hover { background: var(--yel-l) !important; transform: translateY(-2px) !important; }

/* ═══════════════════════════════════════════════
   SECCIONES — alternado CLARO / OSCURO
   ═══════════════════════════════════════════════ */

/* Reset del estilo liquid glass viejo */
.intro-section, .services-section {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 80px 24px;
}
.intro-section:hover, .services-section:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── SECCIÓN CLARA (impar) ── */
.intro-section:nth-of-type(odd) {
  background: var(--cr) !important;   /* #F4F1EC crema */
}
.intro-section:nth-of-type(odd) h2,
.intro-section:nth-of-type(odd) h3 { color: #0A0E1A !important; }
.intro-section:nth-of-type(odd) p  { color: rgba(10,14,26,.6) !important; }
.intro-section:nth-of-type(odd) p strong { color: #0A0E1A !important; }
.intro-section:nth-of-type(odd) .section-sub { color: #0A0E1A !important; }
.intro-section:nth-of-type(odd) .section-sub::before { background: var(--yel) !important; }
/* eyebrow label en claro */
.intro-section:nth-of-type(odd) > .container > .s-eye { color: #0A0E1A; }
.intro-section:nth-of-type(odd) > .container > .s-eye::before { background: var(--yel); }

/* ── SECCIÓN OSCURA (par) ── */
.intro-section:nth-of-type(even) {
  background: var(--dk2) !important;  /* #0C0F18 */
}
.intro-section:nth-of-type(even) h2 { color: #fff !important; }
.intro-section:nth-of-type(even) h3 { color: var(--yel) !important; }
.intro-section:nth-of-type(even) p  { color: rgba(255,255,255,.62) !important; }
.intro-section:nth-of-type(even) p strong { color: #fff !important; }

/* #ventajas siempre claro */
#ventajas {
  background: var(--cr2) !important;   /* #EBE7E0 crema medio */
  padding: 80px 24px;
  border-top: none !important;
}
#ventajas h2 { color: #0A0E1A !important; font-family: var(--fd) !important; font-size: clamp(2.4rem,4.5vw,3.8rem) !important; font-weight:900 !important; text-transform:uppercase !important; }
#ventajas h2::after { display:none !important; }
#ventajas h3 { color: #0A0E1A !important; font-family: var(--fd) !important; font-size:1.7rem !important; font-weight:700 !important; text-transform:uppercase !important; margin-top:2rem !important; }
#ventajas p  { color: rgba(10,14,26,.62) !important; font-family:var(--fb) !important; font-size:.93rem !important; }
#ventajas p strong { color: #0A0E1A !important; }
#ventajas .section-sub { color: #0A0E1A !important; }

/* ── PRICING — casi negro con acento amarillo ── */
.pricing-section {
  padding: 80px 24px;
  background: #07090F !important;
  border-top: 3px solid var(--yel) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  position: relative;
}
.pricing-section::before {
  content: '— INVERSIÓN —';
  display: block;
  font-family: var(--fb);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--yel);
  text-align: center;
  margin-bottom: 1.2rem;
}
.pricing-section h2 {
  font-family: var(--fd) !important;
  font-size: clamp(2.6rem,4.5vw,4rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 2rem !important;
  text-align: center;
  letter-spacing: -.01em;
  line-height: .95;
}
.pricing-section h2::after { display:none !important; }
.pricing-section > .container > p {
  font-family: var(--fb);
  color: rgba(255,255,255,.38);
  font-size: .82rem;
  text-align: center;
  margin-top: -.5rem;
  margin-bottom: 2rem;
}
.pricing-row { display:block; }
.left-column { width:100%; }

/* ── FAQS — oscuro ── */
.services-section, #faqs {
  background: var(--dk2) !important;
  padding: 80px 24px;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
#faqs h2 { color:#fff !important; margin-bottom:2rem !important; }

/* ── COBERTURA — claro ── */
#cobertura {
  background: var(--cr) !important;
  padding: 64px 24px;
}
#cobertura h2 { color: #0A0E1A !important; font-family:var(--fd) !important; font-size:clamp(2.4rem,4.5vw,3.8rem) !important; font-weight:900 !important; text-transform:uppercase !important; }
#cobertura h2::after { display:none !important; }
#cobertura p  { color: rgba(10,14,26,.62) !important; font-family:var(--fb) !important; font-size:.93rem !important; }
#cobertura p strong { color:#0A0E1A !important; }

/* ── CTA FINAL — oscuro con amarillo ── */
#cta-final {
  background: var(--dk) !important;
  padding: 80px 24px;
  border-top: 2px solid rgba(245,194,0,.15);
  text-align: center;
}
#cta-final h2 { color:#fff !important; font-family:var(--fd) !important; font-size:clamp(2.4rem,5vw,3.8rem) !important; font-weight:900 !important; text-transform:uppercase !important; line-height:.95; margin-bottom:1rem !important; }
#cta-final h2::after { display:none !important; }
#cta-final p  { color:rgba(255,255,255,.6) !important; font-family:var(--fb) !important; font-size:.93rem !important; margin-bottom:1.5rem !important; }

/* Contenedores */
.intro-section .container, .services-section .container,
#ventajas .container, #cobertura .container,
#cta-final .container, #faqs .container,
.pricing-section .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ── TIPOGRAFÍA SECCIONES OSCURAS ── */
.intro-section h2, .services-section h2 {
  font-family: var(--fd) !important;
  font-size: clamp(2.6rem,5vw,4.2rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em;
  line-height: .95;
  margin-bottom: 1.5rem !important;
}
.intro-section h2::after, .services-section h2::after { display:none !important; }
.intro-section h3 {
  font-family: var(--fd) !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 2.5rem 0 .85rem !important;
  line-height: 1;
}
.intro-section h3::before { display:none !important; }
.intro-section p, .services-section p {
  font-family: var(--fb) !important;
  font-size: .93rem !important;
  line-height: 1.75 !important;
  margin-bottom: 1.25rem !important;
}

.section-sub {
  font-family: var(--fd);
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 2.5rem 0 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-sub::before {
  content: '';
  width: 18px; height: 2px;
  background: var(--yel);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── TABLAS ── */
.table, .table-bordered, .table-striped, .table-hover,
.pricing-section table, .intro-section table, #ventajas table {
  width: 100% !important;
  display: table !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 1.5rem !important;
}
/* Tabla en sección oscura */
.pricing-section table, .intro-section:nth-of-type(even) table {
  background: var(--dk3) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.78) !important;
}
/* Tabla en sección clara */
.intro-section:nth-of-type(odd) table, #ventajas table {
  background: #fff !important;
  border: 1px solid rgba(10,14,26,.08) !important;
  color: rgba(10,14,26,.75) !important;
}

/* thead */
.table thead, .pricing-section table thead,
.intro-section table thead, #ventajas table thead { display:table-header-group !important; }
.table tbody, .pricing-section table tbody,
.intro-section table tbody, #ventajas table tbody { display:table-row-group !important; }
.table tr, .pricing-section table tr,
.intro-section table tr, #ventajas table tr { display:table-row !important; }

/* th oscuro */
.pricing-section table th, .intro-section:nth-of-type(even) table th,
.table th, .table thead th {
  display: table-cell !important;
  background: rgba(6,8,16,.9) !important;
  color: rgba(255,255,255,.38) !important;
  padding: 14px 16px !important;
  text-transform: uppercase !important;
  font-size: .7rem !important;
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-align: left !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
/* th claro */
.intro-section:nth-of-type(odd) table th, #ventajas table th {
  display: table-cell !important;
  background: #0A0E1A !important;
  color: rgba(255,255,255,.55) !important;
  padding: 14px 16px !important;
  font-size: .7rem !important;
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border: none !important;
}

/* td oscuro */
.pricing-section table td, .intro-section:nth-of-type(even) table td, .table td {
  display: table-cell !important;
  padding: 14px 16px !important;
  font-family: var(--fb) !important;
  font-size: .87rem !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  vertical-align: middle;
}
/* td claro */
.intro-section:nth-of-type(odd) table td, #ventajas table td {
  display: table-cell !important;
  padding: 14px 16px !important;
  font-family: var(--fb) !important;
  font-size: .87rem !important;
  border: none !important;
  border-bottom: 1px solid rgba(10,14,26,.06) !important;
  color: rgba(10,14,26,.72) !important;
  vertical-align: middle;
}
.pricing-section table tbody tr:last-child td,
.intro-section table tbody tr:last-child td { border-bottom:none !important; }
.pricing-section table tbody tr:hover td { background: rgba(255,255,255,.035) !important; }
.intro-section:nth-of-type(odd) table tbody tr:hover td { background: rgba(10,14,26,.04) !important; }
.pricing-section table td strong { color:rgba(255,255,255,.9) !important; }
.intro-section:nth-of-type(odd) table td strong { color:#0A0E1A !important; }

/* ── CARDS (4 pasos) — adaptan al contexto ── */
/* Cards en sección clara */
.intro-section:nth-of-type(odd) .card-soft, #ventajas .card-soft {
  background: #fff !important;
  border: 1px solid rgba(10,14,26,.08) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  text-align: center;
  box-shadow: 0 2px 16px rgba(10,14,26,.06) !important;
  backdrop-filter: none !important;
}
.intro-section:nth-of-type(odd) .card-soft:hover, #ventajas .card-soft:hover {
  border-color: var(--yel) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(10,14,26,.1) !important;
}
.intro-section:nth-of-type(odd) .card-soft h4, #ventajas .card-soft h4 {
  font-family: var(--fd) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #0A0E1A !important;
  margin-bottom: .75rem !important;
}
.intro-section:nth-of-type(odd) .card-soft p, #ventajas .card-soft p {
  font-size: .84rem !important;
  color: rgba(10,14,26,.5) !important;
  margin: 0 !important;
  font-family: var(--fb) !important;
}
/* Cards en sección oscura */
.intro-section:nth-of-type(even) .card-soft {
  background: var(--dk3) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  text-align: center;
  transition: border-color .2s,transform .2s !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.intro-section:nth-of-type(even) .card-soft:hover {
  border-color: rgba(245,194,0,.3) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}
.intro-section:nth-of-type(even) .card-soft h4 {
  font-family: var(--fd) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--yel) !important;
  margin-bottom: .75rem !important;
}
.intro-section:nth-of-type(even) .card-soft p {
  font-size: .84rem !important;
  color: rgba(255,255,255,.5) !important;
  margin: 0 !important;
  font-family: var(--fb) !important;
}

/* ── GRID ── */
.row { display:flex !important; flex-wrap:wrap !important; gap:1.25rem !important; margin:0 !important; }
.col-md-3 { flex:1 1 200px !important; min-width:170px !important; padding:0 !important; }
.g-4 { gap:1.5rem !important; }
.h-100 { height:auto !important; }

/* ── ALERTS — adaptan ── */
.alert { border-radius:10px; padding:1.25rem 1.5rem; font-family:var(--fb); margin:1.5rem 0; }
.intro-section:nth-of-type(odd) .alert-info, #ventajas .alert-info {
  background: rgba(245,194,0,.1);
  border: 1px solid rgba(245,194,0,.3);
  color: #0A0E1A;
}
.intro-section:nth-of-type(even) .alert-info, .pricing-section .alert-info {
  background: rgba(245,194,0,.08);
  border: 1px solid rgba(245,194,0,.2);
  color: rgba(255,255,255,.8);
}
.alert strong { color: #0A0A0A; }

/* ── LISTAS ── */
.list-group { list-style:none !important; padding:0 !important; margin:0 !important; }
.intro-section:nth-of-type(odd) .list-group-item, #ventajas .list-group-item {
  background: #fff !important;
  border: 1px solid rgba(10,14,26,.08) !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  margin-bottom: 6px !important;
  font-family: var(--fb);
  font-size: .86rem;
  color: rgba(10,14,26,.65);
  display: block !important;
}
.intro-section:nth-of-type(even) .list-group-item {
  background: var(--dk3) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  margin-bottom: 6px !important;
  font-family: var(--fb);
  font-size: .86rem;
  color: rgba(255,255,255,.6);
  display: block !important;
}

/* ── FAQ ── */
.faq-item {
  background: var(--dk3) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  overflow: hidden;
  transition: border-color .2s !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}
.faq-item:hover { border-color:rgba(245,194,0,.28) !important; transform:none !important; }
.faq-question {
  font-family: var(--fb) !important;
  font-size: .93rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: rgba(255,255,255,.03) !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  margin: 0 !important;
}
.faq-item p {
  padding: 16px 20px !important;
  margin: 0 !important;
  font-size: .86rem !important;
  color: rgba(255,255,255,.55) !important;
  line-height: 1.72 !important;
  font-family: var(--fb) !important;
}

/* ── BOTÓN CTA ── */
.btn, a.btn {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--yel) !important;
  color: #0A0A0A !important;
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  padding: 13px 28px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  transition: background .2s,transform .2s !important;
  box-shadow: 0 4px 20px rgba(245,194,0,.35) !important;
  border: none !important;
  cursor: pointer !important;
}
.btn:hover, a.btn:hover { background:var(--yel-l) !important; transform:translateY(-2px) !important; color:#0A0A0A !important; }

/* ── RESIDUOS OCULTOS ── */
.scroll-top-arrow { display:none !important; }
.language-toggle  { display:none !important; }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .hero-banner { margin-top:108px; height:60vh; min-height:380px; }
  .intro-section,.services-section,.pricing-section,
  #ventajas,#cobertura,#cta-final,#faqs { padding:52px 16px; }
  .row { gap:.875rem !important; }
  .col-md-3 { flex:1 1 100% !important; }
}
@media(max-width:480px){ .hero-banner { margin-top:96px; } }

/* ── UTILIDADES Bootstrap (reemplazo sin la librería) ── */
.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.d-flex      { display: flex !important; }
.flex-column { flex-direction: column !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center     { align-items: center !important; }

/* Margin bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .75rem !important; }
.mb-2 { margin-bottom: 1.25rem !important; }
.mb-3 { margin-bottom: 2rem !important; }
.mb-4 { margin-bottom: 2.5rem !important; }
.mb-5 { margin-bottom: 3.5rem !important; }

/* Margin top */
.mt-1 { margin-top: .75rem !important; }
.mt-2 { margin-top: 1.25rem !important; }
.mt-3 { margin-top: 2rem !important; }
.mt-4 { margin-top: 2.5rem !important; }
.mt-5 { margin-top: 3.5rem !important; }

/* Padding */
.p-3  { padding: 1rem !important; }
.p-4  { padding: 1.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* ── EYEBROW v4 dentro de secciones claras/oscuras ── */
.intro-section:nth-of-type(odd)  .s-eye { color: var(--yel); }
.intro-section:nth-of-type(even) .s-eye { color: var(--yel-l); }

/* ── ROUNDED CORNERS ON IMAGES ── */
.intro-section img,
.services-section img,
.pricing-section img,
.hero-banner img,
.ventajas-section img,
section img:not(.ft-logo img):not(.nav-logo img) {
  border-radius: 14px;
  overflow: hidden;
}

/* Ensure containers don't clip rounded corners */
.intro-section figure,
.services-section figure,
section figure {
  border-radius: 14px;
  overflow: hidden;
}