/* ==========================================================================
   Capa moderna sobre tgs.css. Se carga despues del CSS del tema, asi que
   corrige el layout de interiores y moderniza el sistema sin tocar WordPress.
   ========================================================================== */

/* --- 0. Reset minimo: sin esto el navegador deja 8 px blancos de margen -- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0 !important;
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
}

/* --- 0. Reset minimo: el navegador deja 8 px de margen blanco sin esto --- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0 !important;
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
}

:root {
  --tgs-radio: 20px;
  --tgs-sombra-suave: 0 1px 2px rgba(18, 26, 51, 0.04), 0 12px 30px rgba(18, 26, 51, 0.07);
  --tgs-sombra-alta: 0 2px 4px rgba(18, 26, 51, 0.05), 0 22px 50px rgba(18, 26, 51, 0.13);
  --tgs-hueco: clamp(56px, 6.5vw, 104px);
  --tgs-claro: #eef4fc;
  --tgs-borde-suave: rgba(18, 26, 51, 0.08);
}

/* --- 1. El menu es fijo: los interiores necesitan su altura reservada ----- */
body.home main {
  padding-top: 84px !important;
  padding-bottom: 0 !important;
}

body.home.home-inicio main {
  padding-top: 0 !important;
}

@media (max-width: 900px) {
  body.home main {
    padding-top: 72px !important;
  }
  body.home.home-inicio main {
    padding-top: 0 !important;
  }
}

/* --- 2. Cabecera de pagina (reemplaza la banda con box-shadow) ----------- */
.tgs-head {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 76px);
  color: #fff;
  background:
    radial-gradient(120% 130% at 88% -20%, #24375f 0%, rgba(36, 55, 95, 0) 58%),
    linear-gradient(160deg, #192645 0%, #121a33 70%);
}

.tgs-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(131, 177, 242, 0), rgba(131, 177, 242, 0.55), rgba(131, 177, 242, 0));
}

.tgs-head .tgs-wrap {
  position: relative;
}

.tgs-head .tgs-migas {
  margin: 0 0 22px;
}

.tgs-head .tgs-eyebrow {
  color: var(--tgs-celeste) !important;
  margin-bottom: 18px !important;
}

.tgs-head__titulo {
  font-size: clamp(30px, 4.2vw, 50px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  text-transform: uppercase;
  color: #fff !important;
  margin: 0 0 18px !important;
  max-width: 24ch;
}

.tgs-head__lead {
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.7;
  color: #b9c8e2;
  margin: 0;
  max-width: 62ch;
}

.tgs-head__lead a {
  color: var(--tgs-celeste);
}

.tgs-head__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: #93a5c6;
}

.tgs-head__datos b {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f83a6;
  font-weight: 600;
  margin-bottom: 3px;
}

.tgs-head__datos span {
  color: #e2eaf8;
  font-weight: 500;
}

.tgs-migas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #7f92b4;
  padding: 0;
  list-style: none;
}

.tgs-migas a {
  color: #9fb2d1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tgs-migas a:hover {
  color: #fff;
}

.tgs-migas span {
  color: #56688a;
}

/* --- 3. Ritmo vertical y fondos ----------------------------------------- */
.tgs-sec {
  padding-block: var(--tgs-hueco) !important;
}

.tgs-sec--claro,
.tgs-trust {
  background: var(--tgs-claro) !important;
}

.tgs-sec--blanco {
  background: #fff !important;
}

.tgs-eyebrow {
  font-size: 12.5px !important;
  letter-spacing: 0.3em !important;
  margin-bottom: 14px !important;
}

.tgs-h2 {
  font-size: clamp(26px, 3.2vw, 40px) !important;
  letter-spacing: 0.015em !important;
  line-height: 1.14 !important;
}

.tgs-lead {
  font-size: 16.5px !important;
  line-height: 1.72 !important;
}

.tgs-wrap {
  padding-inline: clamp(20px, 4vw, 40px);
}

/* --- 4. Botones: la medida vive en el bloque 27 ------------------------- */
.tgs-btn {
  border-radius: 100px !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease !important;
}

.tgs-btn--celeste {
  box-shadow: 0 10px 26px rgba(131, 177, 242, 0.28);
}

.tgs-btn--celeste:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(131, 177, 242, 0.36);
}

.tgs-btn--marino {
  box-shadow: 0 10px 26px rgba(18, 26, 51, 0.16);
}

.tgs-btn--marino:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(12, 113, 195, 0.3);
}

/* --- 5. Tarjetas --------------------------------------------------------- */
.tgs-card {
  border: 1px solid var(--tgs-borde-suave) !important;
  border-radius: var(--tgs-radio) !important;
  box-shadow: var(--tgs-sombra-suave);
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}

.tgs-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--tgs-sombra-alta) !important;
}

.tgs-card h1,
.tgs-card h2,
.tgs-card h3 {
  letter-spacing: 0.01em;
}

.tgs-obra__foto {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tgs-obra__foto img,
.tgs-tipo__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.tgs-card:hover .tgs-obra__foto img,
.tgs-card:hover .tgs-tipo__foto img {
  transform: scale(1.04);
}

.tgs-obra__body {
  padding: 22px 24px 24px !important;
}

.tgs-obra__body h2,
.tgs-obra__body h3 {
  font-size: 17px !important;
  line-height: 1.3 !important;
}

.tgs-chip {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  padding: 7px 14px !important;
  border-radius: 100px !important;
  background: rgba(18, 26, 51, 0.68) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.tgs-grid {
  gap: clamp(20px, 2.4vw, 32px) !important;
}

/* --- 6. Proyecto: ficha, video y galeria --------------------------------- */
.tgs-ficha {
  background: #fff;
  border: 1px solid var(--tgs-borde-suave);
  border-radius: var(--tgs-radio);
  box-shadow: var(--tgs-sombra-suave);
  padding: 8px 24px;
  margin: 0;
  list-style: none;
}

.tgs-ficha li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 15px 0;
  text-align: left;
  border-bottom: 1px solid rgba(18, 26, 51, 0.07);
}

.tgs-ficha li:last-child {
  border-bottom: 0;
}

.tgs-ficha b {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a89a6;
  font-weight: 600;
}

.tgs-ficha span {
  text-align: left !important;
  font-size: 15.5px;
  color: var(--tgs-marino-2);
  font-weight: 500;
}

/* El video manda: panel 16:9 a todo el ancho del contenido, texto debajo. */
.tgs-obra-contenido:has(.tgs-video) {
  display: block !important;
  max-width: 980px;
  margin-inline: auto;
}

.tgs-obra-contenido:has(.tgs-video) .tgs-video {
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 8px 0 36px;
}

.tgs-video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tgs-radio);
  box-shadow: var(--tgs-sombra-suave);
  background: #0b1026;
}

.tgs-galeria {
  gap: 14px !important;
}

.tgs-galeria a {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--tgs-sombra-suave);
}

.tgs-galeria img {
  border-radius: 14px;
}

.tgs-bloques {
  gap: clamp(20px, 2.4vw, 32px) !important;
  margin-top: 40px !important;
}

.tgs-bloque {
  background: #fff;
  border: 1px solid var(--tgs-borde-suave);
  border-radius: var(--tgs-radio);
  box-shadow: var(--tgs-sombra-suave);
  padding: 28px 30px;
}

.tgs-bloque h3 {
  font-size: 13px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tgs-azul) !important;
  margin: 0 0 14px;
}

.tgs-bloque ul {
  margin: 0;
  padding-left: 18px;
}

.tgs-bloque li {
  font-size: 15px;
  line-height: 1.65;
  color: #4a5878;
  margin-bottom: 8px;
}

/* --- 7. FAQ -------------------------------------------------------------- */
.tgs-faq details {
  border: 1px solid var(--tgs-borde-suave) !important;
  border-radius: 16px !important;
  box-shadow: var(--tgs-sombra-suave);
  padding: 20px 26px !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.tgs-faq details[open] {
  border-color: rgba(12, 113, 195, 0.28) !important;
  box-shadow: var(--tgs-sombra-alta);
}

.tgs-faq summary {
  font-size: 16px !important;
}

.tgs-faq summary::after {
  font-size: 22px !important;
  line-height: 1;
}

/* --- 8. Contenido largo ------------------------------------------------- */
.tgs-articulo {
  margin-inline: 0;
  max-width: 780px;
}

.tgs-articulo > p:first-of-type {
  font-size: 17.5px;
  color: #3c4a6b;
}

.tgs-articulo img,
.tgs-articulo figure img {
  border-radius: var(--tgs-radio);
}

.tgs-articulo h2 {
  letter-spacing: 0.01em;
}

.tgs-articulo ul li::marker {
  color: var(--tgs-azul);
}

/* --- 9. Pie ------------------------------------------------------------- */
.tgs-foot {
  padding-block: clamp(48px, 5vw, 72px) 0;
}

.tgs-foot__cols {
  gap: clamp(28px, 4vw, 56px);
}

.tgs-foot__cols h2 {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7f92b4;
  margin-bottom: 14px;
}

.tgs-foot__cols a {
  transition: color 0.2s ease;
}

.tgs-foot__cols a:hover {
  color: #fff;
}

/* --- 10. Formulario ----------------------------------------------------- */
.tgs-form input,
.tgs-form select,
.tgs-form textarea {
  border-radius: 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tgs-form input:focus,
.tgs-form select:focus,
.tgs-form textarea:focus {
  outline: none;
  border-color: var(--tgs-celeste) !important;
  box-shadow: 0 0 0 3px rgba(131, 177, 242, 0.22);
}

.tgs-cta .tgs-eyebrow {
  color: var(--tgs-celeste) !important;
}

.tgs-cta {
  background: radial-gradient(120% 130% at 85% -10%, #24375f 0%, rgba(36, 55, 95, 0) 60%),
    linear-gradient(160deg, #192645 0%, #121a33 75%) !important;
}

@media (max-width: 900px) {
  .tgs-head {
    padding: 32px 0 44px;
  }

  .tgs-head__titulo {
    font-size: clamp(26px, 7vw, 34px) !important;
  }

  .tgs-bloque {
    padding: 24px 22px;
  }

  .tgs-ficha {
    padding: 4px 20px;
  }
}

/* --- 11. Ajustes finos de paridad --------------------------------------- */
/* El CSS del tema aplica el menu oscuro con body:not(.home); como todas las
   paginas llevan class="home", hay que devolverlo salvo en la portada. */
body.home:not(.home-inicio) .tgs-nav {
  background: rgba(18, 26, 51, 0.97) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.tgs-obra-cols > .tgs-ficha li {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left;
}

.tgs-obra-cols > .tgs-ficha li b,
.tgs-obra-cols > .tgs-ficha li span {
  text-align: left !important;
}

/* --- 12. Ritmo entre la cabecera y el contenido ------------------------- */
.tgs-head + .tgs-sec {
  padding-top: clamp(40px, 4.5vw, 64px) !important;
}

/* --- 13. WhatsApp flotante --------------------------------------------- */
.tgs-wa-flotante {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 60;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  box-shadow: 0 8px 24px rgba(7, 94, 44, 0.34);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tgs-wa-flotante:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 32px rgba(7, 94, 44, 0.42);
}

@media (max-width: 600px) {
  .tgs-wa-flotante {
    width: 52px;
    height: 52px;
  }
}

/* --- 14. Banda de confianza -------------------------------------------- */
.tgs-ico {
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 auto;
}

.tgs-ico path,
.tgs-ico circle,
.tgs-ico rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tgs-trust__in {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.tgs-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 30px 18px !important;
  border-right: 1px solid rgba(18, 26, 51, 0.08);
  text-align: center;
}

.tgs-trust__item:last-child {
  border-right: 0;
}

.tgs-trust__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #fff;
  color: var(--tgs-azul);
  box-shadow: 0 4px 14px rgba(18, 26, 51, 0.08);
}

.tgs-trust__ico svg {
  width: 18px;
  height: 18px;
}

.tgs-trust__item strong {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.1em !important;
  text-align: center;
}

.tgs-trust__item small {
  font-size: 13px;
  line-height: 1.4;
  color: #5b6b8a;
}

/* Los iconos del proceso tambien necesitan tamano */
.tgs-card__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tgs-claro);
  color: var(--tgs-azul);
  margin-bottom: 6px;
}

@media (max-width: 900px) {
  .tgs-trust__in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgs-trust__item:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 520px) {
  .tgs-trust__in {
    grid-template-columns: 1fr;
  }

  .tgs-trust__item {
    border-right: 0;
    border-bottom: 1px solid rgba(18, 26, 51, 0.08);
  }
}

/* --- 15. El video del hero cubre sin deformarse ------------------------ */
.tgs-hero__video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* --- 16. Titulo de la seccion de contacto ------------------------------ */
.tgs-cta__titulo {
  font-size: clamp(30px, 4.2vw, 50px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  text-transform: uppercase;
  color: #fff !important;
  text-align: center;
  margin: 0 auto 20px !important;
  max-width: 20ch;
}

/* --- 17. Secciones: el tema dejaba padding-bottom en 0 y las tarjetas
        quedaban pegadas al borde del cambio de fondo -------------------- */
body.home .tgs-sec {
  padding-block: var(--tgs-hueco) !important;
}

body.home .tgs-head + .tgs-sec {
  padding-top: clamp(40px, 4.5vw, 64px) !important;
  padding-bottom: var(--tgs-hueco) !important;
}

/* El icono del paso venia en position:absolute arriba a la derecha:
   se veia descolgado. Ahora va al lado del numero, en la misma linea. */
.tgs-card__ico {
  position: static !important;
  float: none !important;
  display: inline-flex !important;
  vertical-align: middle;
  margin: 0 0 16px 10px !important;
}


/* --- 19. Menu: transparente sobre el hero, navy con blur al scrollear.
        Mismo efecto que el tema de WordPress (.is-scrolled). ------------ */
body.home.home-inicio .tgs-nav {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

body.home:not(.home-inicio) .tgs-nav,
body.home .tgs-nav.is-scrolled {
  background: rgba(18, 26, 51, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important;
}

/* --- 20. La foto de las tarjetas de tipo se salia del redondeo ---------- */
.tgs-tipo__foto {
  overflow: hidden;
  border-radius: var(--tgs-radio) var(--tgs-radio) 0 0;
}

.tgs-obra__foto {
  overflow: hidden;
  border-radius: var(--tgs-radio) var(--tgs-radio) 0 0;
}

.tgs-card.tgs-tipo,
.tgs-card.tgs-obra {
  overflow: hidden;
}

/* --- 21. Pasos: numero como indice, sin icono duplicado ----------------- */
.tgs-card__num {
  display: block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--tgs-azul) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  margin: 0 0 14px !important;
}

.tgs-card__num::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 10px;
  background: var(--tgs-celeste);
}

/* --- 22. Tarjetas y cabecera de las guias ------------------------------ */
.tgs-nota__fecha {
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tgs-azul) !important;
  margin: 0 0 8px !important;
}

.tgs-nota__resumen {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #5b6b8a !important;
  margin: 8px 0 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tgs-obra__body h2 {
  font-size: 17.5px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: var(--tgs-marino-2) !important;
  margin: 0 !important;
}

.tgs-nota__foto {
  margin: 0 0 36px;
}

.tgs-nota__foto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--tgs-radio);
  box-shadow: var(--tgs-sombra-suave);
}

/* --- 23. Guias: con uno o dos articulos la tarjeta va apaisada ---------- */
.tgs-guia-ancha.tgs-grid {
  display: block;
  max-width: 980px;
}

.tgs-guia-ancha .tgs-obra__link {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
  text-decoration: none;
}

.tgs-guia-ancha .tgs-obra__foto {
  aspect-ratio: auto;
  height: 100%;
  min-height: 280px;
}

.tgs-guia-ancha .tgs-obra__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3.5vw, 44px) !important;
}

.tgs-guia-ancha .tgs-obra__body h2 {
  font-size: clamp(21px, 2.4vw, 28px) !important;
  line-height: 1.22 !important;
  margin-bottom: 10px !important;
}

.tgs-guia-ancha .tgs-nota__resumen {
  font-size: 15.5px !important;
  -webkit-line-clamp: 4;
}

@media (max-width: 760px) {
  .tgs-guia-ancha .tgs-obra__link {
    grid-template-columns: 1fr;
  }

  .tgs-guia-ancha .tgs-obra__foto {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

/* --- 24. El menu siempre por encima del contenido ----------------------- */
.tgs-nav {
  z-index: 100 !important;
}

/* --- 25. Los articulos de guias se centran: una columna de lectura ---- */
.tgs-articulo:has(.tgs-nota__foto) {
  margin-inline: auto;
  max-width: 820px;
}

/* --- 26. Aire bajo el texto de la cabecera. tgs.css trae
        body.home main > * { padding-block-end: 0 !important } y dejaba
        el lead pegado al borde de la banda navy. -------------------- */
/* body.home main > * gana por especificidad, asi que hay que igualarla */
body.home main > .tgs-head {
  padding-bottom: clamp(52px, 6.5vw, 84px) !important;
}

@media (max-width: 760px) {
  body.home main > .tgs-head {
    padding-bottom: 44px !important;
  }
}

/* --- 27. Botones a la escala 8/4: alto 48, padding horizontal 24,
        texto 14.5. El tema los dejaba en 88 px con 36 de padding. ------ */
body.home .tgs-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px !important;
  padding: 0 24px !important;
  font-size: 14.5px !important;
  line-height: 1 !important;
  letter-spacing: 0.1em;
  border-radius: 100px !important;
}

body.home .tgs-hero__ctas .tgs-btn {
  padding: 0 28px !important;
}

body.home .tgs-form button[type="submit"],
body.home .tgs-cta .tgs-btn {
  min-height: 48px !important;
  padding: 0 24px !important;
}

@media (max-width: 760px) {
  .tgs-btn,
  .tgs-hero__ctas .tgs-btn {
    min-height: 44px !important;
    padding: 0 20px !important;
  }
}

/* --- 28. El hero tambien perdia el padding inferior por main > * ------ */
body.home main > .tgs-hero {
  padding-bottom: clamp(56px, 9vh, 120px) !important;
}