/* ===== Vars ===== */
:root{
  --brand:#00AEEF;
  --brand-dark:#0B2A4A;
  --muted:#64748b;
  --white:#fff;
  --shadow:0 10px 24px rgba(2,6,23,.08);
}

/* ===== Header ===== */
.header .navbar.bsnav-transparent .nav-link{ color:#fff }
.header .navbar.bsnav-sticky.in,
.header .navbar.bsnav-sticky.in.bsnav-sticky-slide{
  background:#E6F7FF;
  box-shadow:0 8px 18px rgba(2,6,23,.08);
}
.header .navbar.bsnav-sticky.in .nav-link{ color:#0B2A4A }

/* ===== Hero ===== */
.planes-hero{
  padding:130px 16px 26px;
  text-align:center;
}

.site-breadcrumb{
  height: 420px;                 /* ajusta si quieres más/menos alto */
  background-position: center center !important;
  background-size: cover;
  background-repeat: no-repeat !important;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.site-breadcrumb.planes-hero-bg{
  background-size: contain !important;
}

.site-breadcrumb .container{
  width: 100%;
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .site-breadcrumb{
    height: 260px;
    background-position: center top !important;  
  }
}
.planes-hero h1{
  margin:0 0 6px;
  font:900 clamp(28px,4.2vw,44px)/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--brand-dark);
  letter-spacing:.3px;
}
.planes-hero p{ margin:0; color:#4a5568 }

/* ===== Carrusel de planes ===== */
.carousel-wrap{
  max-width:1280px;
  margin:0 auto 40px;
  padding-left:clamp(16px,4vw,56px);
  padding-right:clamp(16px,4vw,56px);
  position:relative;
}
.carousel{
  display:flex;
  gap:24px;
  overflow-x:visible; 
  scroll-behavior: smooth;
;
  padding:18px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scroll-padding-left:24px;
  scroll-padding-right:24px;
}

/* Tarjeta */
.plan-card{
  flex:0 0 360px;
  scroll-snap-align:start;
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:var(--shadow);
  padding:22px 20px;
  margin:0 4px;
}
.plan-media{ display:block; width:100%; border-radius:14px; overflow:hidden }
.plan-media img{ display:block; width:100%; height:auto; }

.plan-title{
  margin:.6rem 0 .25rem;
  font:900 22px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--brand-dark);
  letter-spacing:.3px;
  text-transform:uppercase;
  text-align:center;
}
.plan-meta{
  color:var(--brand);
  font:900 20px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  text-align:center;
}
.plan-desc{
  color:#455468;
  margin:.5rem 0 1rem;
  min-height:78px;
}

/* CTA “Si lo quiero” centrado */
.plan-actions{
  display:flex;
  justify-content:center;
  margin-top:12px;
}
.btn-brand{
  background:#FF725E;
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:12px;
  font-weight:800;
  box-shadow:0 8px 20px rgba(255,114,94,.25);
}
.btn-outline{
  border:2px solid var(--brand-dark);
  color:var(--brand-dark);
  background:transparent;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
}

/* Flechas */
.carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px; height:48px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  z-index:3;
  background:#012169;
  border:2px solid #fff;
  box-shadow:0 10px 24px rgba(2,6,23,.20);
  cursor:pointer;
  transition:transform .15s, filter .15s, opacity .15s;
  opacity:.98;
}
.carousel-arrow svg{ width:22px; height:22px; fill:#fff }
.carousel-arrow:hover{ transform:translateY(-50%) scale(1.08); filter:brightness(1.05) }
.carousel-arrow:active{ transform:translateY(-50%) scale(.96) }
.arrow-left{ left:0; transform:translate(-50%,-50%) }
.arrow-right{ right:0; transform:translate(50%,-50%) }

@media (max-width:820px){
  .carousel-wrap{ padding:0 8px }
  .carousel-arrow{ display:none } /* swipe nativo */
  .plan-card{ flex:0 0 86% }
  .planes-hero{ padding-top:110px }
}

/* CTA inferior (opcional) */
.cta-row{ display:flex; justify-content:center }
.main-cta{
  display:inline-block;
  text-decoration:none;
  border:2px solid var(--brand);
  color:var(--brand);
  background:var(--white);
  padding:12px 20px;
  border-radius:999px;
  font-weight:800;
}

/* ===== Programa “Emprende en Fibra” ===== */
.emprende-section{
  padding:56px 0 64px;
  background:#f8fafc;
}
.container-md{ max-width:1040px; margin:0 auto; padding:0 16px }
.emprende-card{
  background:#fff;
  border:1px solid rgba(2,6,23,.06);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:28px 20px;
  text-align:center;
}
.emprende-card h2{
  margin:0 0 6px;
  color:var(--brand-dark);
  font:900 clamp(26px,3.8vw,40px)/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.emprende-copy{
  color:#5b6678;
  margin:6px auto 16px;
  max-width:820px;
}
.emprende-cta{
  display:flex;
  gap:12px;
  justify-content:center;
}
.btn-primary{
  background:var(--brand);
  color:#fff;
  border:none;
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
}
.btn-ghost{
  background:transparent;
  border:2px solid var(--brand-dark);
  color:var(--brand-dark);
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
}


/* CINTA AZUL COMPLETA */
.corporate-band {
    background: #001060;    /* azul corporativo */
    padding: 60px 0;
    width: 100%;
}

.corporate-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

/* TÍTULO CENTRADO */
.planes-heading h2 {
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 6px;
}

.planes-heading p {
    color: rgba(255,255,255,0.85);
    margin-bottom: 40px;
}

/* TARJETAS CENTRADAS */
.corporate-carousel .carousel {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.corporate-card {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.15);
    width: 360px;
    padding-bottom: 10px;
    text-align: center;
}

/* IMAGEN CENTRADA */
.corporate-media img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* FLECHAS SOBRE LA CINTA */
.corporate-carousel .carousel-arrow {
    background: #00219b;
    color: #fff;
}
/* ===== PORTADA PLANES – FIX DEFINITIVO ===== */

.site-breadcrumb.planes-hero-bg {
  position: relative;
  z-index: 1;

  background-image: url('../img/header/planes.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  /* Altura tipo banner (NO full screen) */
  height: 360px;

  /* Compensa el header sticky */
  margin-top: 90px;

  /* Color de respaldo */
  background-color: #001a45;
}

/* Desktop grande */
@media (min-width: 1400px) {
  .site-breadcrumb.planes-hero-bg {
    height: 400px;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .site-breadcrumb.planes-hero-bg {
    height: 300px;
    background-size: contain;
  }
}

/* Mobile (tu versión correcta) */
@media (max-width: 768px) {
  .site-breadcrumb.planes-hero-bg {
    height: 220px;
    margin-top: 70px;
    background-size: cover;
    background-position: center top;
  }
}

/* ===== FIX PORTADA PLANES (SIEMPRE AL FINAL) ===== */

/* Desktop */
.site-breadcrumb.planes-hero-bg{
  height: 360px !important;                 
  background-size: cover !important;        
  background-position: center center !important; 
}

/* Pantallas grandes: un poco más de alto */
@media (min-width: 1400px){
  .site-breadcrumb.planes-hero-bg{
    height: 400px !important;
    background-position: center 42% !important;
  }
}

/* Mobile: como tu versión “perfecta” */
@media (max-width: 768px){
  .site-breadcrumb.planes-hero-bg{
    height: 260px !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* Banner Planes */
.site-breadcrumb.planes-hero-bg{
  height: 360px !important;
  background-size: cover !important;
  background-position: center 35% !important; 
}

@media (max-width: 768px){
  .site-breadcrumb.planes-hero-bg{
    height: 260px !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}

/* 📱 mobile */
@media (max-width: 768px) {
  .carousel {
    flex-direction: column;
    overflow-x: unset;
    gap: 16px;
    padding: 0;
  }

  .plan-card {
    flex: 1 1 auto;
    width: 100%;
    margin: 0 0 20px 0;
  }
}