/* =========================================================
RESET VISUAL GENERAL
========================================================= */
.tgp{
  --tgp-yellow:#ffd200;
  --tgp-dark:#111111;
  --tgp-ink:#111111;
  --tgp-bg:#f7f7f7;
  --tgp-bg2:#e8e8e8;
  color:var(--tgp-ink);
  font-family:'Montserrat',sans-serif;
  background:var(--tgp-bg);
}
.tgp *, .tgp *::before, .tgp *::after{ box-sizing:border-box; }
.tgp__container{ max-width:1220px; margin:0 auto; padding:0 30px; }
.tgp img{ display:block; max-width:100%; }
.tgp-placeholder{
  display:flex; align-items:center; justify-content:center;
  min-height:220px; background:#e9e9e9; color:#777;
  font-size:14px; text-align:center; padding:20px;
}

/* =========================================================
FULL WIDTH: rompe contenedores del tema
========================================================= */
body{ overflow-x:hidden; }
body :is(div,main,article,section):has(#tgp-page){
  width:100% !important; max-width:none !important;
  padding:0 !important; margin:0 !important; border:0 !important;
  overflow:visible !important; background:none; box-shadow:none;
}
#tgp-page{
  width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important; padding:0 !important;
}
@supports selector(:has(*)){
  #tgp-page{ width:100% !important; max-width:none !important; margin-left:0 !important; }
}

/* =========================================================
   OCULTAR MIGAS DE PAN DEL TEMA EN LA LANDING
   (el tema las pinta en blanco y chocan con el hero amarillo)
========================================================= */
body:has(#tgp-page) :is(
  .breadcrumbs, .breadcrumb, .breadcrumb-container, .breadcrumb-wrap,
  .breadcrumb-list, .page-breadcrumbs, .site-breadcrumbs,
  .entry-breadcrumbs, .post-breadcrumbs, .yoast-breadcrumbs,
  .rank-math-breadcrumb, .woocommerce-breadcrumb, .tm-breadcrumb,
  .bread-crumb, .bread_crumb, .crumbs, #breadcrumbs, #breadcrumb
){
  display:none !important;
}

/* =========================================================
BOTONES (descarga: siempre negro/blanco, sin hover)
========================================================= */
.tgp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none !important;
  line-height:1; border:0; cursor:pointer;
  border-radius:2px; font-weight:700; letter-spacing:.2px;
  padding:14px 28px; font-size:14px;
}
.tgp-btn--download,
.tgp-btn--download:hover,
.tgp-btn--download:focus,
.tgp-btn--download:active,
.tgp-btn--download:visited{
  background:#111 !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:none !important;
  opacity:1 !important;
}

/* =========================================================
HERO AMARILLO (texto + portátil)
========================================================= */
.tgp-hero{ background:var(--tgp-yellow); padding:64px 0; }
.tgp-hero__grid{ display:grid; grid-template-columns:52% 48%; align-items:center; gap:50px; }
.tgp-hero__eyebrow{ margin:0 0 18px; font-size:15px; font-weight:600; color:#111; }
.tgp-hero__title{
  margin:0 0 22px; max-width:560px;
  font-size:clamp(38px, 4.2vw, 56px) !important;
  line-height:1.05; font-weight:700 !important;
  color:#111; letter-spacing:-0.02em;
}
.tgp-hero__subtitle{ margin:0 0 32px; max-width:420px; font-size:16px; line-height:1.5; color:#111; font-weight:500; }
.tgp-hero__media img{ width:100%; max-width:600px; margin-left:auto; }

/* =========================================================
MIGAS DE PAN
========================================================= */
.tgp-crumbs{ padding:26px 0; }
.tgp-crumbs__list{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; }
.tgp-crumbs__item{ padding:0 18px; border-right:1px solid #cfcfcf; font-size:13px; color:#9a9a9a; }
.tgp-crumbs__item:first-child{ padding-left:0; }
.tgp-crumbs__item:last-child{ border-right:0; }
.tgp-crumbs__item a{ color:#9a9a9a; text-decoration:none; }
.tgp-crumbs__item a:hover{ color:#111; }

/* =========================================================
CUERPO DE LA GUÍA (bloques de Gutenberg)
========================================================= */
.tgp-section--content{ padding:30px 0 0; }
.tgp-content{ max-width:1060px; }
.tgp-content h2{ margin:40px 0 18px; font-size:26px; line-height:1.25; font-weight:700; color:#111; }
.tgp-content h3{ margin:-6px 0 18px; font-size:22px; font-weight:500; color:#e8b400; }
.tgp-content p{ margin:0 0 18px; font-size:13.5px; line-height:1.75; color:#333; max-width:1000px; }
.tgp-content ul, .tgp-content ol{ margin:0 0 22px; padding:0; list-style:none; }
.tgp-content li{
  position:relative; padding-left:18px;
  margin-bottom:10px; font-size:13.5px; line-height:1.6; color:#333;
}
.tgp-content li::before{ content:"·"; position:absolute; left:2px; color:#333; font-weight:800; }

/* =========================================================
CTA FORMULARIO (caja con foto, solapada)
========================================================= */
.tgp-cta{
  position:relative; z-index:2; overflow:hidden;
  margin:60px 0 -95px; /* mitad fuera de la sección de contenido */
  background:#222 center center / cover no-repeat;
  text-align:center;
}
.tgp-cta__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.tgp-cta__inner{ position:relative; z-index:1; padding:64px 30px; max-width:900px; margin:0 auto; }
.tgp-cta__title{
  margin:0 0 28px;
  font-size:clamp(26px, 2.8vw, 38px); line-height:1.25;
  font-weight:700; color:#fff;
}

/* =========================================================
RECURSOS RELACIONADOS (fondo gris)
========================================================= */
.tgp-section--rel{ background:var(--tgp-bg2); padding:170px 0 90px; }
.tgp-rel__h2{ margin:0 0 44px; text-align:center; font-size:28px; font-weight:700; color:#111; }
.tgp-rel__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.tgp-rel__card{ background:#fbfbfb; display:flex; flex-direction:column; }
.tgp-rel__media img{ width:100%; height:200px; object-fit:cover; }
.tgp-rel__body{ padding:26px 22px 24px; display:flex; flex-direction:column; align-items:flex-start; flex:1; }
.tgp-rel__title{ margin:0 0 22px; font-size:16px; line-height:1.45; font-weight:500; color:#111; }
.tgp-rel__link{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:6px;
  color:#f0a800; font-size:14px; font-weight:600; text-decoration:none;
}
.tgp-rel__link:hover{ color:#c98b00; }

/* =========================================================
MODAL
========================================================= */
.tgp-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.tgp-modal.is-open{ display:block; }
.tgp-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.tgp-modal__dialog{
  position:relative; z-index:1; background:#fff;
  max-width:560px; margin:8vh auto; padding:48px 36px 36px;
}
.tgp-modal__close{ position:absolute; top:10px; right:10px; background:none; border:0; cursor:pointer; color:#111; }
.tgp-modal-lock{ overflow:hidden; }

/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width:1100px){
  .tgp-hero__grid{ grid-template-columns:1fr; gap:40px; }
  .tgp-hero__media img{ margin:0 auto; }
  .tgp-rel__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:768px){
  .tgp-hero{ padding:50px 0; }
  .tgp-hero__title{ font-size:34px !important; }
  .tgp-crumbs__item{ padding:0 12px; }
  .tgp-content h2{ font-size:22px; }
  .tgp-content h3{ font-size:19px; }
  .tgp-cta{ margin:40px 0 -50px; }
  .tgp-section--rel{ padding:120px 0 60px; }
  .tgp-rel__grid{ grid-template-columns:1fr; }
}