/* =========================================================
   DF Landing – Hoja de estilos
   ========================================================= */

/* ===== Tipografías ===== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap");

/* ===== Variables de diseño ===== */
:root{
  /* Colores de marca */
  --df-black: #0b0b0c;
  --df-white: #ffffff;

  --df-petroleo: #263746;  
  --df-verde: #36B93B;        
  --df-orange: #f39322; 
  --df-orange-soft: #ffefe0; 
  --df-deep-blue: #13202b;
  --df-gray-100: #F1F1F1; 
  --df-gray-200: #eceff3;
  --df-gray-300: #dfe3e8;
  --df-gray-600: #6b7280; 
  --df-gray-800: #1f2937; 

  /* Tipografía */
  --df-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  --df-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans" !important;

  /* Dimensiones */
  --df-radius-2: .5rem; 
  --df-radius-3: 1rem;  
  --df-radius-4: 1.25rem; 
  --df-shadow-sm: 0 .25rem .75rem rgba(0,0,0,.08);
  --df-shadow-md: 0 .75rem 2rem rgba(0,0,0,.12);
  --df-shadow-lg: 0 1.25rem 3rem rgba(0,0,0,.16);

  /* Escala tipográfica */
  --df-h1: clamp(1.75rem, 2.5vw + 1.1rem, 3rem);
  --df-h2: clamp(1.5rem, 2vw + 1rem, 2.1rem);
  --df-h3: clamp(1.35rem, 1.2vw + .9rem, 1.6rem);
  --df-lead: clamp(1rem, .45vw + .9rem, 1.125rem);
}

/* ===== medida container ===== */
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
      max-width: 1200px;
  }
}

/* ===== Reset fino / suavizados ===== */
html { scroll-behavior: smooth; }
body.suscripciones {
  font-family: var(--df-font-body);
  color: var(--df-gray-800);
  background-color: var(--df-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.suscripciones p { line-height: 1.3 !important; }    

body.suscripciones .header__top,
body.suscripciones .header__bottom { display: none; }

/* ===== margenes especiales ===== */
.p-2rem {padding: 2rem;}
.p-6rem {padding: 6rem;}
.py-6rem {padding-top: 5rem; padding-bottom: 5rem;}

/* ===== anchos especiales ===== */
.w-60 {width: 60% !important;}

/* ===== Titulares ===== */

body.suscripciones section :where(h1,.display-1, .display-2, .display-3, .display-4, h2, h3, h4, .display-5, .display-6) {
  font-family: var(--df-font-display) !important;
  letter-spacing: -0.02em;
  color: var(--df-black);
}

body.suscripciones h1, body.suscripciones .display-4 { font-size: var(--df-h1) !important; font-weight: 800; }
body.suscripciones h2, body.suscripciones .display-5, body.suscripciones .display-6 { font-size: var(--df-h2) !important; font-weight: 700; }
body.suscripciones h3 { font-size: var(--df-h3) !important; font-weight: 600; }
body.suscripciones .lead { font-size: var(--df-lead) !important; color: var(--df-gray-600); }

/* ===== Utilidades de color ===== */
.text-df-black { color: var(--df-black) !important; }
.text-df-muted { color: var(--df-gray-600) !important; }
.text-df-orange { color: var(--df-orange) !important; }
.text-df-white  { color: var(--df-white) !important; }

.bg-df-black   { background-color: var(--df-black) !important; }
.bg-df-white   { background-color: var(--df-white) !important; }
.bg-petroleo   { background-color: var(--df-petroleo) !important; }
.bg-green      { background-color: var(--df-verde) !important; }
.bg-orange     { background-color: var(--df-orange) !important; }
.bg-orange-soft{ background-color: var(--df-orange-soft) !important; }
.bg-gray-100   { background-color: var(--df-gray-100) !important; }
.bg-gray-200   { background-color: var(--df-gray-200) !important; }
.bg-gray-300   { background-color: var(--df-gray-300) !important; }
/* .bg-gradiente  { background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);} */

.rounded-3 { border-radius: var(--df-radius-3) !important; }
.rounded-4 { border-radius: var(--df-radius-4) !important; }


/* ===== Botones (ajustes de marca sobre Bootstrap) ===== */
body.suscripciones .btn-warning {
  --bs-btn-color: #121212;
  --bs-btn-bg: var(--df-orange);
  --bs-btn-border-color: var(--df-orange);
  --bs-btn-hover-bg: #e28217;
  --bs-btn-hover-border-color: #e28217;
}

body.suscripciones .btn-dark {
  --bs-btn-bg: var(--df-black);
  --bs-btn-border-color: var(--df-black);
  --bs-btn-hover-bg: #161617;
  --bs-btn-hover-border-color: #161617;
  transition: 0.3 seg;
  width: fit-content;
  gap: 10px;
}

body.suscripciones .btn-dark:hover {
  background-color: var(--df-white);
  --bs-btn-border-color: var(--df-black);
  --bs-btn-hover-border-color: var(--df-black);
  color: var(--df-black);
}

body.suscripciones .btn-outline-light {
  --bs-btn-color: var(--df-white);
  --bs-btn-border-color: rgba(255,255,255,.6);
  --bs-btn-hover-bg: rgba(255,255,255,.1);
  --bs-btn-hover-border-color: rgba(255,255,255,.9);
}

/* ===== APP ===== */

body.suscripciones #app img {
    width:100px !important;
}

/* Pills/Badges */
body.suscripciones .badge.rounded-pill { padding: .5rem .75rem; }


/* ===== HERO ===== */
body.suscripciones .hero-overlay-dark { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%); }
body.suscripciones .hero-title { color: var(--df-white); }
body.suscripciones .hero-sub  { color: rgba(255,255,255,.85); }

/* Asegura que cada slide tenga altura de hero y que el fondo no bloquee clics en contenido */
body.suscripciones #heroCarousel .carousel-item section { height: 450px; }
body.suscripciones #heroCarousel .position-absolute[aria-hidden="true"] { pointer-events: none; }




/* ====== ESTILOS mínimos para el slider ====== */
  /* Tamaño responsivo de cada card (1 en xs, 3 en md, 4 en lg) */
  .exp-card { flex: 0 0 100%; height: 280px; transform: scale(.96); transition: transform .4s ease, box-shadow .4s ease; }
  @media (min-width: 768px) { .exp-card { flex-basis: calc((100% - 2rem) / 3); height: 320px; } } /* gap=1rem*2 aprox */
  @media (min-width: 1200px){ .exp-card { flex-basis: calc((100% - 3rem) / 4); height: 360px; } } /* 4 por vista */

  /* Overlay de gradiente: sólo visible en la card activa */
  body.suscripciones .exp-overlay {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10rem 1.5rem 2.5rem 1.5rem;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(31 31 31) 100%);
      opacity: 0;
      transition: opacity .35s ease;
  }
  body.suscripciones .exp-card.is-active { transform: scale(1); box-shadow: 0 1rem 3rem rgba(0,0,0,.15); }
  body.suscripciones .exp-card.is-active .exp-overlay { opacity:1; }

  /* Indicadores */
  body.suscripciones #expIndicators .dot {
    width:15px; height:15px; border-radius:50%; border:2px solid #ff8c00; display:inline-block;
    opacity:.4; transition:opacity .2s ease, background-color .2s ease;
  }
  body.suscripciones #expIndicators .dot.active { background-color:#ff8c00; opacity:1; }

  /* Suaviza el desplazamiento del track */
  body.suscripciones #expTrack { transition: transform .6s ease; }

  /* feedback de arrastre */
body.suscripciones .exp-card { cursor: grab; }
body.suscripciones .exp-card:active { cursor: grabbing; }

/* desactiva selección de texto durante el drag */
body.suscripciones #expTrack, body.suscripciones #expTrack * { user-select: none; -webkit-user-drag: none; }

/* ===== Ajuste mobile: 1 card por vista, sin cortes ===== */
@media (max-width: 575.98px) {
  /* quitar padding del viewport para que el ancho útil sea 100% */
  .slider-viewport { padding-left: 0 !important; padding-right: 0 !important; }

  /* sin separación entre cards para que no asome la siguiente */
  #expTrack { gap: 0 !important; }

  /* cada card ocupa el 100% y sin escala */
  .exp-card { flex: 0 0 100% !important; transform: none !important; }

  /* opcional: mantener la destacada con sombra sin escalar */
  .exp-card.is-active { box-shadow: 0 .75rem 2rem rgba(0,0,0,.12); }
}





/* ===== PRICING ===== */
body.suscripciones #planes #offer {
margin: 0px auto !important;
}




/* ===== EXPERIENCIAS  ===== */
body.suscripciones .exp-card { border-radius: var(--df-radius-4); overflow: hidden; background: var(--df-gray-100); }
body.suscripciones .exp-card img { display:block; }
body.suscripciones .exp-card.is-active { box-shadow: var(--df-shadow-md); }
body.suscripciones .exp-overlay h3 { font-weight: 600; font-size: 1.25rem; }
body.suscripciones .exp-overlay h3::before {content: ""; display: block; width: 40px; height: 8px; background-color: #f39322; margin-bottom: 8px; border-radius: 6px;}

/* Indicadores del carrusel */
body.suscripciones #expIndicators .dot { border-color: var(--df-orange); }
body.suscripciones #expIndicators .dot.active { background: var(--df-orange); }

/* ===== GRILLA 3×3 – Contenidos clave ===== */
body.suscripciones #contenidos { color: var(--df-white); }
body.suscripciones #contenidos .card {
  background-color: var(--df-white);
  color: var(--df-gray-800);
}
body.suscripciones #contenidos .card img { height:65px !important; width: auto; }
body.suscripciones #contenidos .card .badge { background: var(--df-gray-100); color: var(--df-gray-800); }
body.suscripciones #contenidos .intro-tile { background: var(--df-orange); color: var(--df-white); }
body.suscripciones #contenidos h2 { line-height: 1.1; }
body.suscripciones #contenidos .badge{ white-space: normal; }

/* ===== PODCASTS ===== */
body.suscripciones #podcasts .ratio { border-radius: var(--df-radius-4); box-shadow: var(--df-shadow-sm); }
body.suscripciones #podcasts .btn-dark { border-radius: 999px; }

/* Hover zoom para miniaturas de podcasts */
body.suscripciones .pod-zoom { 
  overflow: hidden; 
  border-radius: var(--df-radius-4);
  box-shadow: var(--df-shadow-sm);
}

body.suscripciones .pod-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: transform .5s ease, filter .5s ease, box-shadow .5s ease;
  transform-origin: 50% 50%;
  will-change: transform;
}

body.suscripciones .pod-zoom:hover img,
body.suscripciones .pod-zoom:focus-visible img {
  transform: scale(1.06); 
}

body.suscripciones .pod-zoom:hover,
body.suscripciones .pod-zoom:focus-visible {
  box-shadow: var(--df-shadow-md);
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
 body.suscripciones .pod-zoom img,
 body.suscripciones .pod-zoom { transition: none; }
}


/* ===== NEWSLETTERS ===== */
body.suscripciones #newsletters { background: var(--df-orange-soft); }
body.suscripciones #newsletters .card { border-radius: var(--df-radius-4); box-shadow: var(--df-shadow-sm); }
body.suscripciones #newsletters .badge.text-bg-warning { background: var(--df-orange) !important; color: #1b1b1b !important; }
body.suscripciones #newsletters .phone-box { width:100%; max-width:430px; aspect-ratio: 9 / 16; background: url('../img/phone-newsletter.png') center bottom / contain no-repeat; }
               
             

/* ===== APP DOWNLOAD ===== */
body.suscripciones .app-strip { background: var(--df-black); color: var(--df-white); }
body.suscripciones .app-strip .btn { border-radius: 999px; }
body.suscripciones .app-strip .btn .small { letter-spacing: .06em; }

/* ===== FAQS ===== */
body.suscripciones #faqs .badge { background: var(--df-gray-100) !important; color: var(--df-black) !important; }
body.suscripciones #faqs .accordion-body p a { color: var(--df-orange) !important; }
body.suscripciones #faqs .accordion-item { border-radius: var(--df-radius-3); overflow: hidden; }
body.suscripciones #faqs .btn img { width:20px !important; }
body.suscripciones #faqs .accordion-button {
  font-weight: 600;
  padding: 1rem 1.125rem;
  border: 1px solid #A5B9CA;
  line-height: 1.3;
}
body.suscripciones #faqs .accordion-button:not(.collapsed) {
  color: var(--df-white);
  background-color: var(--df-petroleo);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
body.suscripciones #faqs .accordion-button:not(.collapsed)::after {
  filter: invert(1) grayscale(1);
}

body.suscripciones #faqs .accordion-body { background: var(--df-white); line-height: 1.3 !important; }




/* ===== Migas de responsive finas ===== */
@media (max-width: 991.98px) {
  body.suscripciones .display-5, body.suscripciones .display-6, body.suscripciones h2 { font-size: clamp(1.8rem, 2vw + 1rem, 2.1rem) !important; }
  body.suscripciones .h3, body.suscripciones h3 { font-size: calc(1.5rem + .6vw) !important; }
  body.suscripciones .hero-title { font-size: clamp(2rem, 4.5vw + 1rem, 2.6rem) !important; }
  body.suscripciones .d-grid.gap-3.d-md-flex > .btn { width: 100% !important; } 
}

/* ===== Utilidades “helper” opcionales ===== */
.shadow-df-sm { box-shadow: var(--df-shadow-sm) !important; }
.shadow-df-md { box-shadow: var(--df-shadow-md) !important; }
.shadow-df-lg { box-shadow: var(--df-shadow-lg) !important; }
.text-gradient-orange {
  background: linear-gradient(90deg, var(--df-orange), #ffb55a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}





/* ===== AJUSTES MOBILE ===== */
@media (max-width: 1220px) {
  body.suscripciones .ratio {aspect-ratio: auto !important; height: auto !important; width: 100%; }
  body.suscripciones #contenidos .row > [class*="col"]{ min-width: 0; }
  body.suscripciones #contenidos .card-body{ overflow-wrap: anywhere; word-break: break-word; }
   body.suscripciones #contenidos .ratio.ratio-1x1{ --bs-aspect-ratio:auto !important; }
  body.suscripciones #contenidos .ratio.ratio-1x1 > .card{ position: static !important; height: auto !important; width: 100%; }
  body.suscripciones #contenidos .ratio.ratio-1x1 > .rounded-3{ min-height: 330px; position: relative;} 
}

@media (max-width: 768px) {
  body.suscripciones .p-6rem {padding: 4rem;}
  body.suscripciones .py-6rem {padding-top: 2rem; padding-bottom: 2rem;}
  body.suscripciones #contenidos h2 { line-height: 1.2; font-size: 2.5rem; }
  body.suscripciones #contenidos .card .badge { font-size: 0.9rem;}
  body.suscripciones .rounded-3, body.suscripciones .rounded-4, body.suscripciones .card { border-radius: .8rem !important; }
  body.suscripciones #planes .tab-content .h1 {font-size: 2rem;}
  body.suscripciones #contenidos .card img {height: 40px;}
  body.suscripciones .ratio {aspect-ratio: auto !important; height: auto !important; width: 100%; }
  body.suscripciones #contenidos .row > [class*="col"]{ min-width: 0; }
  body.suscripciones #contenidos .card-body{ overflow-wrap: anywhere; word-break: break-word; }
   body.suscripciones #contenidos .ratio.ratio-1x1{ --bs-aspect-ratio:auto !important; }
  body.suscripciones #contenidos .ratio.ratio-1x1 > .card{ position: static !important; height: auto !important; width: 100%; }
  body.suscripciones #contenidos .ratio.ratio-1x1 > .rounded-3{ min-height: 230px; position: relative;} 

}