/*
DIGITAL TREND — limpiado
https://templatemo.com/tm-538-digital-trend
*/

/* Fuentes */
@font-face{
  font-family:'Plain-Regular';
  src:url('../fonts/Plain-Regular.woff2') format('woff2'),
      url('../fonts/Plain-Regular.woff') format('woff');
  font-weight:normal; font-style:normal;
}
@font-face{
  font-family:'Plain-Light';
  src:url('../fonts/Plain-Light.woff2') format('woff2'),
      url('../fonts/Plain-Light.woff') format('woff');
  font-weight:bold; font-style:normal;
}
@font-face{
  font-family:'Plain-Bold';
  src:url('../fonts/Plain-Bold.woff2') format('woff2'),
      url('../fonts/Plain-Bold.woff') format('woff');
  font-weight:bold; font-style:normal;
}

/* Variables */
:root{
  --primary-color:#2c7905;
  --secondary-color:#e70202;
  --white-color:#ffffff;
  --dark-color:#171819;
  --project-bg:#0c7adb;
  --menu-bg:#2c7905;

  --title-color:#15141a;
  --gray-color:#909090;
  --link-color:#404040;
  --p-color:#666262;

  --base-font-family:'Plain-Light',sans-serif;
  --title-font-family:'Plain-Regular',sans-serif;
  --font-bold-family:'Plain-Bold',sans-serif;
  --font-weight-bold:bold;

  --h1-font-size:36px;
  --h2-font-size:22px;
  --h3-font-size:20px;
  --p-font-size:18px;
  --base-font-size:16px;
  --menu-font-size:14px;

  --border-radius-large:100px;
  --border-radius-small:5px;
}

/* Base */
*,
*::before,
*::after{ box-sizing:border-box; }

body{
  background:var(--white-color);
  font-family:var(--base-font-family);
}

a{
  color:var(--link-color);
  text-decoration:none;
}
a:hover, a:active, a:focus{
  color:var(--secondary-color);
  outline:0;
}
::selection{ background:var(--secondary-color); color:var(--white-color); }

.section-padding{ padding:8em 0; }
.section-padding-half{ padding:4em 0; }

.google-map iframe{ display:block; width:100%; }

/* Tipografía */
h1,h2,h3,h4,h5,h6{
  font-family:var(--title-font-family);
  line-height:inherit;
}
h1{ color:var(--title-color); font-size:var(--h1-font-size); }
h2{ font-size:var(--h2-font-size); font-weight:100; }
h3{ font-size:var(--h3-font-size); font-weight:100; margin-bottom:0; }
h4{
  color:var(--gray-color);
  font-family:var(--base-font-family);
  font-size:var(--p-font-size);
  letter-spacing:1px;
  text-transform:uppercase;
}
p{ color:var(--p-color); font-size:var(--p-font-size); line-height:1.5em; }
b,strong{ letter-spacing:0; color:var(--secondary-color); }

/* Citas */
.quote{ position:relative; margin:0; }
.quote::after{
  content:"“";
  position:absolute; bottom:-80px; left:20px;
  font-family:times; color:var(--gray-color);
  font-weight:var(--font-weight-bold); font-size:14em; line-height:0; opacity:.1;
}
blockquote{
  border-left:5px solid rgba(0,0,0,.05);
  margin:42px 0; padding:14px 22px; color:rgba(0,0,0,.5);
}

/* Botón genérico */
.custom-btn{
  background:transparent;
  border:2px solid var(--dark-color);
  border-radius:var(--border-radius-large);
  padding:12px 26px 14px;
  color:var(--dark-color);
  font-family:var(--title-font-family);
  font-size:var(--p-font-size);
  white-space:nowrap;
  transition:all .3s ease;
}
.custom-btn.btn-bg{ background:var(--white-color); color:var(--primary-color); border-color:transparent; }
.custom-btn:hover,.custom-btn:focus{ background:var(--dark-color); color:var(--white-color); border-color:transparent; }

/* ---------- NAVBAR ---------- */
.navbar{
  background:var(--menu-bg);
  z-index:2;
  top:0; right:0; left:0;
  padding:1.5em;
}
.navbar-brand{ color:var(--white-color); font-size:var(--h2-font-size); display:flex; align-items:center; gap:.5rem; }
.navbar-brand img{ height:64px; width:auto; display:block; }
.brand-text{ color:var(--white-color); line-height:1; }

/* Pills blancos → rojo al hover/activo */
.navbar .nav-link{
  position:relative;
  background:transparent;
  color:var(--white-color);
  border:2px solid var(--white-color);
  border-radius:999px;
  padding:.75rem 1.35rem;
  margin:.35rem .5rem;
  line-height:1;
  font-size:calc(var(--menu-font-size) + 1px);
  letter-spacing:.2px;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .06s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  background:var(--secondary-color);
  color:var(--white-color);
  border-color:var(--secondary-color);
}
.navbar .nav-link:active{ transform:scale(.98); }

/* CTA “Eventos” (opcional diferenciar) */
.navbar .nav-link.eventos-cta{
  border-color:var(--secondary-color);
  color:var(--secondary-color);
}
.navbar .nav-link.eventos-cta:hover,
.navbar .nav-link.eventos-cta.active{
  background:var(--secondary-color); color:var(--white-color);
}

/* Toggler */
.navbar-nav .navbar-toggler-icon{ background:none; }
.navbar-toggler{
  border:0; padding:0; cursor:pointer; margin:0 10px 0 0; width:30px; height:35px; outline:none;
}
.navbar-toggler:focus{ outline:none; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{ background:transparent; }
.navbar-toggler .navbar-toggler-icon{
  background:var(--white-color); transition:background 10ms 300ms ease;
  display:block; width:30px; height:2px; position:relative;
}
.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after{
  position:absolute; right:0; left:0; background:var(--white-color);
  width:30px; height:2px; content:''; transition:top 300ms 350ms ease, transform 300ms 50ms ease;
}
.navbar-toggler .navbar-toggler-icon::before{ top:-8px; }
.navbar-toggler .navbar-toggler-icon::after{ top:8px; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{ top:0; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{ transform:rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{ transform:rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{ position:relative; padding:5em 0; overflow:hidden; }
.hero-bg{ background:linear-gradient(170deg,var(--primary-color) 64%,var(--white-color) 30%); }
.hero-image{ position:relative; top:2em; }

/* ---------- PROJECT / OWL ---------- */
.project{ background:var(--project-bg); }
.project-wrapper{ position:relative; }
.project-wrapper img{ border-radius:var(--border-radius-small); }
.project-info{
  background:var(--white-color);
  border-radius:var(--border-radius-small);
  position:absolute; bottom:32px; right:32px; left:32px; width:90%; padding:32px;
}
.project-info small{ font-family:Plain-Bold; color:var(--gray-color); position:relative; top:2px; }
.project-info a{ color:var(--primary-color); }
.project-info .project-icon{ background:var(--primary-color); }
.project-icon{
  position:absolute; right:30px; top:40px;
  background:var(--dark-color); border-radius:var(--border-radius-large);
  color:var(--white-color); font-size:var(--h2-font-size);
  width:40px; height:40px; line-height:40px; text-align:center; padding-left:5px;
}
.owl-theme .owl-dots .owl-dot{ outline:none; }
.owl-theme .owl-dots .owl-dot span{ background:var(--gray-color); width:50px; height:3px; margin:35px 5px; }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{ background:var(--secondary-color); }

/* ---------- LISTAS / CLIENTES ---------- */
.list-detail{ margin-left:1em; padding-left:1em; position:relative; }
.list-detail li{
  list-style:none; margin:.6em 0 0 .8em;
}
.list-detail li::before{
  content:""; width:0; height:0;
  border-width:0 16px 16px 0;
  border-color:transparent var(--secondary-color) transparent transparent;
  border-style:solid; position:absolute; left:0;
}
.list-detail span{ position:relative; bottom:5px; }
.client-info img{ width:100px; margin-right:1em; }

/* ---------- ABOUT ---------- */
.about{ position:relative; overflow:hidden; }
.about-image img{ display:block; margin:0 auto; }

/* ---------- BLOG ---------- */
.blog-header{ border-radius:var(--border-radius-small); position:relative; overflow:hidden; }
.blog-header img{ border-radius:var(--border-radius-small); display:block; }
.blog-header-info{
  background:linear-gradient(transparent,rgba(0,0,0,.95));
  position:absolute; right:0; left:0; bottom:0; padding:2em;
}
.blog-header-info h3{ max-width:80%; }
.blog-header-info a{ color:var(--white-color); }
.blog-header-info a:hover{ color:var(--secondary-color); }
.blog-sidebar img{ border-radius:var(--border-radius-small); width:159px; margin-right:22px; }
.blog-sidebar h3{ font-size:18px; }

/* ---------- FORMULARIOS ---------- */
.newsletter-form .form-control,
.contact-form .form-control{
  box-shadow:none; background:var(--project-bg);
  border:0; padding:1.7em 1.3em; margin:14px 0;
}
.newsletter-form button,
.contact-form #submit-button{
  background:var(--primary-color);
  border-radius:var(--border-radius-large);
  color:var(--white-color);
  cursor:pointer; font-size:var(--p-font-size);
  line-height:0; padding:1.5em 1.3em;
}
.newsletter-form button{ background:var(--secondary-color); }

/* ---------- FOOTER (en blanco forzado) ---------- */
.site-footer .footer-brand{display:flex;align-items:center;gap:.75rem}
.footer-logo{height:56px;width:auto;display:block;border-radius:6px}
@media (max-width:767px){ .footer-logo{height:44px} }
.site-footer{ background:var(--secondary-color); padding:7em 0 6em; color:#fff; }
.site-footer,
.site-footer p,
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,.site-footer h5,.site-footer h6,
.site-footer small,.site-footer strong,.site-footer .footer-brand-text{ color:#fff !important; }
.site-footer a{ color:#fff !important; }
.site-footer a:hover{ color:#ffe2e2 !important; }
.footer-link li{ display:inline-block; list-style:none; margin:0 10px; }
.copyright-text,.footer-link,.site-footer .social-icon{ margin-top:6em; }
.footer-icon, .site-footer .social-icon li a{ color:#fff !important; }
.footer-pills{ display:flex; gap:.5rem; padding:0; margin:0; list-style:none; }
.footer-pills .pill{
  display:inline-block; padding:.35rem .7rem; border:1px solid rgba(255,255,255,.75);
  border-radius:999px; font-size:.85rem; color:#fff !important;
}
.footer-pills .pill:hover{ background:rgba(255,255,255,.15); }

/* ---------- UTILIDADES ---------- */
.disabled-link{ opacity:.75; cursor:not-allowed; pointer-events:none; }
.disabled-link:hover{ color:inherit; }

/* ---------- PRICING ---------- */
.pricing-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:24px; position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.pricing .pc-head{ margin-bottom:12px; }
.pc-tier{ text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; color:#6b7280; }
.pc-plan{ margin:.25rem 0 .5rem; font-weight:700; }
.pc-price{ font-size:1.75rem; font-weight:800; color:#111; }
.pc-price span{ font-size:.9rem; font-weight:500; color:#6b7280; margin-left:.25rem; }
.pc-features{ list-style:none; padding:0; margin:0 0 18px; }
.pc-features li{ margin:.35rem 0; color:#374151; }
.badge-popular{
  position:absolute; top:18px; right:18px; background:#16a34a; color:#fff; font-size:.7rem;
  padding:.25rem .5rem; border-radius:999px;
}
@media (prefers-color-scheme:dark){
  .pricing-card{ background:#111; border-color:#1f2937; color:#e5e7eb; }
  .pc-price{ color:#f9fafb; }
  .pc-features li{ color:#d1d5db; }
}
.pricing-card.is-expert{ border-color:#d1d5db; }
.pricing-card.featured{ box-shadow:0 10px 24px rgba(44,121,5,.15); }

/* ---------- Bandas Emprendedores vs Expertos ---------- */
.band{
  border-radius:18px; padding:28px 24px; margin-bottom:32px; position:relative;
}
.band-entrepreneurs{
  background:linear-gradient(180deg,rgba(44,121,5,.06),rgba(44,121,5,.02));
  border:1px solid rgba(44,121,5,.15);
}
.band-experts{
  background:linear-gradient(180deg,rgba(23,24,25,.05),rgba(23,24,25,.02));
  border:1px solid rgba(23,24,25,.15);
}
.band-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:12px; }
.band-title{ margin:0; }

/* Chips */
.chip{
  display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.75rem;
  letter-spacing:.02em; border:1px solid transparent;
}
.chip-green{ background:rgba(44,121,5,.12); color:#205703; border-color:rgba(44,121,5,.25); }
.chip-dark{  background:rgba(23,24,25,.12); color:#171819; border-color:rgba(23,24,25,.25); }

/* ---------- Lightbox ---------- */
.lb{ position:fixed; inset:0; display:none; background:rgba(0,0,0,.85); z-index:9999; align-items:center; justify-content:center; padding:2rem; }
.lb.open{ display:flex; }
.lb-img{ max-width:min(96vw,1200px); max-height:86vh; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.lb-close{
  position:absolute; top:12px; right:12px; width:44px; height:44px; border:0; border-radius:999px;
  background:rgba(255,255,255,.15); color:#fff; font-size:28px; line-height:1; cursor:pointer;
}
.lb-close:hover{ background:rgba(255,255,255,.25); }
.lb-caption{ margin-top:.75rem; color:#eee; text-align:center; max-width:90ch; font-size:.95rem; }

/* ---------- Grid fotos SPEAKERS ---------- */
/* Tamaño por defecto (3:2) */
.speaker-media{ position:relative; padding-top:66%; overflow:hidden; }
/* Variante retrato (4:5) */
.speaker-media.portrait{ padding-top:125%; }
/* Imagen */
.speaker-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%;
}
/* aspect-ratio nativo cuando exista */
@supports (aspect-ratio:1 / 1){
  .speaker-media{ padding-top:0; aspect-ratio:3 / 2; }
  .speaker-media.portrait{ aspect-ratio:4 / 5; }
}

/* ---------- Responsive ---------- */
@media (min-width:1200px){
  .about-info h2{ max-width:70%; }
}
@media (min-width:991px){
  .project h2{ max-width:32%; margin:0 auto; }
}
@media (max-width:991px){
  .hero{ padding-top:14em; }
  .hero-text{ bottom:2em; }
  .navbar{ padding:1em; }
  .navbar-collapse{ text-align:center; padding:2.5em 0; }
  .navbar .navbar-nav{ flex-wrap:wrap; gap:.25rem .4rem; }
  .navbar .nav-link{ display:inline-block; }
  .copyright-text,.footer-link,.site-footer .social-icon{ margin-top:3em; padding:0; text-align:left; }
}
@media (max-width:767px){
  h1{ font-size:36px; }
  h2{ font-size:28px; }
  h3{ font-size:22px; }
  .project-info{ right:0; left:0; margin:0 auto; }
  .footer-link, .site-footer .social-icon{ margin-top:1em; }
  .copyright-text{ margin:2.5em 0 1em; }
  .footer-link li{ margin-left:0; }
  .brand-text{ font-size:1.1rem; }
  .navbar-brand img{ height:48px; }
  .band{ padding:20px 16px; }
}
