/*
Theme Name: Twentytwentyfive child
Template: twentytwentyfive
Version: 1.0.1
*/

/* ===== 1. TOKENS ===== */
:root {
  --gg-font: 'Urbanist', sans-serif;

  /* Color */
  --gg-azul: #17127A;
  --gg-celeste: #00D7D7;
  --gg-azul-electrico: #3939FF;
  --gg-azul-header: #232A7C;
  --gg-azul-hover: #2B5BE2;
  --gg-blanco: #FFFFFF;
  --gg-gris-borde: #E2E2E2;
  --gg-celeste-tenue: #00D7D70D;
  --gg-celeste-cta: #00D7D712;
  --gg-badge-fondo: #1FBBED1F;

  /* Escala tipografica fluida de 480 a 1440px. Comentarios: px movil -> escritorio.
     Como recalcular: [[WP - Escala fluida con clamp]] en el vault. */
  /* En :root, junto a los demás */
  --gg-h1-size: clamp(2rem, 1.125rem + 2.92vw, 3.75rem);      /* 32 -> 60 */
  --gg-h1-line: clamp(2.1875rem, 1.25rem + 3.13vw, 4.0625rem);
  --gg-h2-size: clamp(1.875rem, 1.406rem + 1.56vw, 2.813rem);  /* 30 -> 45 */
  --gg-h2-line: clamp(2.25rem,  1.75rem  + 1.67vw, 3.25rem);   /* 36 -> 52 */
  --gg-sub-size: clamp(1.125rem, 0.813rem + 1.04vw, 1.75rem);   /* 18 -> 28 */
  --gg-sub-line: clamp(1.625rem, 1.188rem + 1.46vw, 2.5rem);    /* 26 -> 40 */
  --gg-card-h-size: clamp(1.375rem, 0.969rem + 1.35vw, 2.188rem);  /* 22 -> 35 */
  --gg-card-h-line: clamp(1.75rem,  1.375rem + 1.25vw, 2.5rem);    /* 28 -> 40 */
  --gg-card-p-size: clamp(1rem,     0.813rem + 0.63vw, 1.375rem);  /* 16 -> 22 */
  --gg-card-p-line: clamp(1.5rem,   1.313rem + 0.63vw, 1.875rem);  /* 24 -> 30 */

  /* Ritmo */
  --gg-pad-seccion-top: 2rem;
  --gg-pad-seccion-bottom: 4rem;
  --gg-pad-lateral-mov: 2rem;
  --gg-radio: 15px;
  /* Grosor unico de todos los botones con borde: los de tarjeta iban a 4px. */
  --gg-borde-boton: 2px;
}

/* ===== 2. GLOBALES ===== */
.wp-block-video video {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  object-position: center 0%;
  border-radius: 20px;
  display: block;
}

/* ===== 3. COMPONENTES ===== */

/* 3.1 Botones */

/* Boton de tarjeta (Productos y Resultados). */
.btn-perso-card {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 400px;
  height: 70px;
  padding: 1.5rem;
  border-radius: var(--gg-radio);
  cursor: pointer;
  align-self: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-perso-card img {
  width: 40px;
  height: 40px;
  transition: filter 0.2s ease;
}

.btn-perso-card p {
  margin: 0;
  font-family: var(--gg-font);
  font-weight: 700;
  font-style: normal;
  font-size: var(--gg-card-p-size);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  transition: color 0.2s ease;
}

.btn-perso-card--celeste {
  background: transparent;
  border: var(--gg-borde-boton) solid var(--gg-celeste);
}

.btn-perso-card--celeste p {
  color: var(--gg-celeste);
}

.btn-perso-card--celeste:hover {
  background: var(--gg-celeste);
}

.btn-perso-card--celeste:hover p {
  color: var(--gg-blanco);
}

.btn-perso-card--celeste:hover img {
  filter: brightness(0) invert(1);
}

.btn-perso-card--azul {
  background: transparent;
  border: var(--gg-borde-boton) solid var(--gg-azul);
}

.btn-perso-card--azul p {
  color: var(--gg-azul);
}

.btn-perso-card--azul:hover {
  background: var(--gg-azul);
}

.btn-perso-card--azul:hover p {
  color: var(--gg-blanco);
}

.btn-perso-card--azul:hover img {
  filter: brightness(0) invert(1);
}

/* Variante de Resultados */
.btn-perso-card--azul-resu {
  margin-top: 2rem;
}

/* Boton del hero y del CTA. */
.btn-perso,
.btn-perso .wp-block-button__link,
.btn-perso-outline .wp-block-button__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 60px;
  gap: 10px;
  opacity: 1;
  border-radius: var(--gg-radio);
  padding: 5px 27px 7px 28px;
  cursor: pointer;
  color: var(--gg-blanco);
}

/* En el hero .btn-perso envuelve al boton nativo: el padding y el alto
   los pone el enlace. En el CTA es el boton, y ahi si aplica la base. */
.btn-perso:has(> .wp-block-button__link) {
  width: auto;
  height: auto;
  padding: 0;
}

.btn-perso .wp-block-button__link,
.btn-perso-outline .wp-block-button__link,
.btn-perso .btn-label {
  font-family: var(--gg-font);
  font-weight: 700;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.btn-perso-outline .wp-block-button__link {
  background: transparent;
  border: var(--gg-borde-boton) solid var(--gg-blanco);
  color: var(--gg-blanco);
}

/* Solo aplica al del hero, sobre fondo claro. Va despues de la regla base. */
.btn-perso .wp-block-button__link,
.btn-perso .wp-element-button {
  background-color: var(--gg-azul);
  color: var(--gg-blanco);
}

/* Los bloques del CTA no traen fondo ni color propio. */
.sec-cta .cta-btns .btn-perso:first-child {
  background: linear-gradient(90deg, var(--gg-celeste) 1%, var(--gg-azul-electrico) 97%);
}

.sec-cta .cta-btns .btn-perso:first-child p {
  color: var(--gg-blanco);
}

.sec-cta .cta-btns .btn-perso:last-child {
  background: transparent;
  border: var(--gg-borde-boton) solid var(--gg-azul);
}

.sec-cta .cta-btns .btn-perso:last-child p {
  color: var(--gg-azul);
}

/* 3.2 Titulos de seccion. Los usan Resultados, Soluciones y CTA. */

.sec-title {
  margin-top: clamp(2rem, -1.25rem + 10.83vw, 8.5rem);  /* 32 -> 136 */
}

.sec-title h2 {
  font-family: var(--gg-font);
  font-weight: 800;
  font-style: normal;
  font-size: var(--gg-h2-size);
  line-height: var(--gg-h2-line);
  color: var(--gg-azul);
  text-align: center;
}

.sec-title p {
  font-family: var(--gg-font);
  font-weight: 400;
  font-style: normal;
  font-size: var(--gg-sub-size);
  line-height: var(--gg-sub-line);
  color: var(--gg-azul);
  text-align: center;
}

/* Saltos manuales: inertes en escritorio, activos en movil. */
.sec-title br {
  display: none;
}

/* Titulo de dos tonos (Soluciones): el unico con dos h2 seguidos. */
.sec-title:has(h2 + h2) {
  gap: 0 .35em;
}

.sec-title h2:nth-of-type(2) {
  color: var(--gg-celeste);
}

/* ===== 4. SECCIONES ===== */

/* 4.1 Header */

header.wp-block-template-part .wp-block-navigation-item__content {
  padding-left: 14px;
  padding-right: 14px;
  font-family: var(--gg-font);
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}

header.wp-block-template-part {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: unset;
  padding-top: clamp(0.75rem, 0.375rem + 1.25vw, 1.5rem);     /* 12 -> 24 */
  padding-bottom: clamp(0.75rem, 0.375rem + 1.25vw, 1.5rem);
  padding-left: clamp(0.75rem, 2vw, 1.5rem);
  padding-right: clamp(0.75rem, 2vw, 1.5rem);
}

header.wp-block-template-part .wp-block-group.alignwide {
  width: 100%;
  max-width: 100%;
}

.site-main-header-inner-wrap {
  min-height: clamp(4.5rem, 1.75rem + 9.17vw, 10rem);  /* 72 -> 160 */
}

/* 4.2 Hero */

/* Sin width: rompe el alignfull del padre. */
.sec-hero {
  overflow: visible;
}

.hero-bg {
  background-image: url('assets/img/BACKGROUND-HOME.svg');
  background-size: cover;
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(9rem, 20vw, 16rem);
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
  overflow: visible;
  min-height: 100vh;
}

.hero-text {
  width: 100%;
  max-width: 1090px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 2.5rem);
}

.hero-text h1 {
  font-family: var(--gg-font);
  font-weight: 700;
  font-size: var(--gg-h1-size);
  line-height: var(--gg-h1-line);
  text-align: center;
  color: #ffffff;
}

.hero-text h4 {
  font-family: var(--gg-font);
  font-weight: 400;
  font-size: var(--gg-sub-size);   /* 18 -> 28, ya existe */
  line-height: var(--gg-sub-line); /* 26 -> 40, ya existe */
  text-align: center;
  color: #ffffff;
}

.hero-text h1,
.hero-text h4 {
  margin-block: 0;
}

/* El margin-top negativo solapa el video sobre el hero. */
.hero-video {
  width: min(100%, 850px);
  max-width: 850px;
  aspect-ratio: 850 / 443;
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(-14rem, -20vw, -7.5rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  border-radius: clamp(1rem, 2.5vw, 2.5rem);
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

/* 4.3 Logos (carrusel infinito) */

.logos-wrapper {
  overflow: hidden;
  width: 100%;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.logos-track {
  display: flex;
  width: max-content;
  max-width: none;
  animation: logosScroll 45s linear infinite;
}

.logos-track .wp-block-image {
  flex-shrink: 0;
  width: 9.34881rem;
  height: 2.21244rem;
  margin-right: 40px;
}

.logos-track .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes logosScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 4.4 Productos */

.sec-productos {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--gg-celeste-cta);
  padding-top: var(--gg-pad-seccion-top);
  padding-bottom: var(--gg-pad-seccion-bottom);
}

.card-col {
  display: flex;
  justify-content: center;
}

.card {
  display: flex;
  flex-direction: column;
  overflow: visible;
  width: 100%;
  max-width: 615px;
  min-height: auto;
  border: 4px solid var(--gg-blanco);
  border-radius: 1rem;
  padding: 15px;
}

.card-header {
  align-items: center;
  padding: 1.5rem;
  width: 100%;
  height: 136px;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  position: relative;
}

/* Sobresale de la cabecera, por eso .card va con overflow: visible. */
.card-header-img {
  position: absolute;
  width: 170px;
  height: 170px;
  top: -34px;
  left: 380px;
}

.card-header-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* !important: el bloque trae color y tamaño inline desde el editor. */
.card-header h2 {
  color: var(--gg-blanco) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
}

.card-body {
  flex: 1;
  padding: 1.5rem 0;
  gap: 1.5rem;
  width: 100%;
  min-height: 675px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  background-color: var(--gg-blanco);
}

.card-body > :last-child {
  margin-top: auto;
}

.card-body .card-intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-left: 2.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.card-intro h2,
.card-intro p {
  margin: 0;
}

.card-intro h2 {
  font-family: var(--gg-font);
  font-weight: 800;
  font-style: normal;
  font-size: var(--gg-card-h-size);
  line-height: var(--gg-card-h-line);
  letter-spacing: 0;
}

.card-intro p {
  font-family: var(--gg-font);
  font-weight: 300;
  font-style: normal;
  font-size: var(--gg-card-p-size);
  line-height: var(--gg-card-p-line);
  letter-spacing: 0;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  min-height: 300px;
  padding: 1.25rem 1.5rem;
  background-color: var(--gg-celeste-tenue);
}

.card-list-item {
  display: flex;
  align-items: center;
  width: 480px;
  min-height: 90px;
  gap: 30px;
  padding: 10px;
}

.card-list-item p {
  font-family: var(--gg-font);
  font-weight: 300;
  font-style: normal;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.5px;
  color: var(--gg-azul);
  margin: 0;
}

.card-check {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

/* 4.5 Resultados */

.sec-resultados {
  padding-top: var(--gg-pad-seccion-top);
  padding-bottom: var(--gg-pad-seccion-bottom);
  min-height: auto;
}

.sec-resultados .sec-title h2,
.sec-resultados .sec-title p {
  margin: 0;
}

.sec-resultados .sec-title p {
  margin-top: 0.5rem;
}

.stats-wrap {
  flex-wrap: wrap;
  margin-top: 2rem;
  height: auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 5rem);
}

/* El margin-top y el translateY hacen el escalonado. */
.stat-card {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 311px;
  height: auto;
  min-height: 303px;
  gap: clamp(1rem, 0.5625rem + 1.46vw, 1.875rem);      /* 16 -> 30 */
  padding: clamp(1rem, 0.5625rem + 1.46vw, 1.875rem);  /* 16 -> 30 */
}

.stat-card .wp-block-image,
.stat-card img {
  max-width: 100%;
  height: auto;
}

.stat-card.stat-card--down {
  transform: translateY(100px);
}

.stat-card h3 {
  font-family: var(--gg-font);
  font-weight: 800;
  font-style: normal;
  font-size: var(--gg-card-h-size);
  line-height: var(--gg-card-h-line);
  letter-spacing: 0;
  color: var(--gg-azul);
}

/* 4.6 Como funciona */

.sec-como {
  align-items: stretch;
  min-height: auto;
  padding-top: var(--gg-pad-seccion-top);
  padding-bottom: var(--gg-pad-seccion-bottom);
}

.como-top {
  width: 100%;
  max-width: 1450px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  gap: 2rem;
}

.como-text {
  width: 620px;
  max-width: 100%;
  gap: 30px;
}

.como-h2 h2 {
  font-family: var(--gg-font);
  font-weight: 800;
  font-style: normal;
  font-size: var(--gg-h2-size);
  line-height: var(--gg-h2-line);
}

.como-h2 h2:nth-of-type(1) {
  color: var(--gg-azul);
}

.como-h2 h2:nth-of-type(2) {
  color: var(--gg-celeste);
}

.como-h2 br {
  display: none;
}

.como-h2 p {
  max-width: 595px;
  font-family: var(--gg-font);
  font-weight: 400;
  font-style: normal;
  font-size: var(--gg-sub-size);
  line-height: var(--gg-sub-line);
  letter-spacing: 0;
  color: var(--gg-azul);
}

.como-top img {
  width: 560px;
  max-width: 100%;
}

.pms-badges {
  width: 1045px;
  max-width: 100%;
  gap: 15px;
  margin-top: clamp(2rem, 1rem + 3.33vw, 4rem);
  flex-wrap: wrap;
  justify-content: center;
  align-self: stretch;
  row-gap: 16px;
}

/* !important: WordPress mete is-layout-flex en este bloque. */
.badge {
  display: flex !important;
  align-items: center !important;
  width: 250px;
  height: 60px;
  border-radius: 100px;
  background-color: var(--gg-badge-fondo);
}

.badge img {
  width: 24px;
  height: 24px;
  margin-left: 20px !important;
  flex-shrink: 0;
  display:block;
}

.badge p {
  flex: 1;
  text-align: center;
  margin: 0 0 0 -20px;
  font-family: var(--gg-font);
  font-weight: 700;
  font-style: italic;
  font-size: 26px;
  line-height: 40px;
  letter-spacing: 0;
  color: var(--gg-azul);
}

.team-cards {
  width: 100%;
  max-width: 1430px;
  gap: clamp(1.5rem, 1.313rem + 0.63vw, 1.875rem);  /* 24 -> 30 */
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin-top: clamp(2rem, 1rem + 3.33vw, 4rem);
}

.team-card {
  width: 700px;
  max-width: 100%;
  gap: 10px;
  padding: clamp(1.5rem, 0.375rem + 3.75vw, 3.75rem);  /* 24 -> 60 */
  border-radius: 20px;
  background-color: var(--gg-blanco);
}

.team-card h3 {
  font-family: var(--gg-font);
  font-weight: 800;
  font-style: normal;
  font-size: var(--gg-card-h-size);
  line-height: var(--gg-card-h-line);
  letter-spacing: 0;
  color: var(--gg-azul);
}

.team-card p {
  font-family: var(--gg-font);
  font-weight: 300;
  font-style: normal;
  font-size: var(--gg-card-p-size);
  line-height: var(--gg-card-p-line);
  letter-spacing: 0;
  color: var(--gg-azul);
}

.team-card img {
  width: 100px;
  height: 100px;
}

.team-card-text {
  width: 418px;
  max-width: 100%;
  gap: 11px;
}

/* 4.7 Soluciones */

.sec-soluciones {
  padding-top: var(--gg-pad-seccion-top);
  padding-bottom: var(--gg-pad-seccion-bottom);
  min-height: auto;
  display: flex;
  justify-content: center;
}

.sol-cols {
  width: 1480px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 4rem;
}

.sol-cols > .wp-block-column {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}

.sol-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 355px;
  max-width: 100%;
  min-height: clamp(17rem, 7.223rem + 26.07vw, 30.688rem);  /* 272 -> 491 */
  padding: 30px;
  border-radius: 20px;
  border-width: 2px;
  background-color: var(--gg-azul);
  color: var(--gg-blanco);
}

.sol-card > .wp-block-group {
  row-gap: .5rem;
}

.sol-icon {
  width: 105px;
  height: 105px;
}

.sol-text {
  width: 100%;
  gap: 20px;
}

.sol-text p:first-child {
  min-height: 80px;
  font-family: var(--gg-font);
  font-weight: 800;
  font-style: normal;
  font-size: var(--gg-card-h-size);
  line-height: var(--gg-card-h-line);
  letter-spacing: 0;
  color: var(--gg-blanco);
}

.sol-text p:last-child {
  font-family: var(--gg-font);
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.4px;
  color: var(--gg-blanco);
}

.sol-card > div:not(.sol-text):not(.sol-icon) {
  width: 100%;
}

/* 4.8 CTA */

.sec-cta {
  padding-top: var(--gg-pad-seccion-top);
  padding-bottom: var(--gg-pad-seccion-bottom);
  min-height: auto;
}

.sec-cta .sec-title {
  padding-bottom: 2rem;
  gap: 0.5rem;
}

/* 4.9 Footer */

.footer-gradient-bg {
  background: linear-gradient(115deg, #28288b, var(--gg-azul-header), #008da3, #2B2FB4, #28288b);
  background-size: 400% 400%;
  animation: footerGradientMove 18s ease-in-out infinite;
}

@keyframes footerGradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== 5. BREAKPOINTS =====
   De mas ancho a mas estrecho: el mas especifico va despues. */

/* Soluciones: 4 columnas */
@media (min-width: 1080px) {
  .sol-cols > .wp-block-column {
    flex-basis: calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
  }
}

/* Soluciones: 2 columnas */
@media (min-width: 601px) and (max-width: 1079.98px) {
  .sol-cols > .wp-block-column {
    flex-basis: calc((100% - 24px) / 2 - 1px);
    max-width: calc((100% - 24px) / 2 - 1px);
  }
}

/* Tablet */
@media (max-width: 64rem) {
  .sec-productos .wp-block-columns {
    flex-wrap: wrap;
  }

  .sec-productos .wp-block-columns > .wp-block-column {
    flex-basis: 100%;
  }

  .stat-label,
  .stat-card--down {
    transform: none;
  }
}

/* Movil. 600 y no 480: es donde el bloque de Navegacion pasa a hamburguesa. */
@media (max-width: 600px) {

  .sol-cols > .wp-block-column {
    flex-basis: 100%;
    max-width: 100%;
  }

  .sol-card {
    min-height: auto;
  }

  .sec-productos,
  .sec-resultados,
  .sec-como,
  .sec-soluciones,
  .sec-cta {
    padding-left: var(--gg-pad-lateral-mov);
    padding-right: var(--gg-pad-lateral-mov);
    box-sizing: border-box;
  }

  .hero-bg {
    padding-left: var(--gg-pad-lateral-mov);
    padding-right: var(--gg-pad-lateral-mov);
  }

  /* Header. El drawer vive en assets/css/nav-drawer.css. */
  header.wp-block-template-part .wp-block-button {
    display: none;
  }

  /* Botones: todos al mismo ancho, un 10% por debajo del video (300).
     Hay que nombrar tambien el :has porque la regla base le pone width: auto
     con especificidad (0,2,0) y ganaria a un .btn-perso suelto. */
  :root {
    --gg-boton-ancho-mov: 270px;
  }

  .btn-perso,
  .btn-perso:has(> .wp-block-button__link),
  .btn-perso-outline,
  .btn-perso .wp-block-button__link,
  .btn-perso-outline .wp-block-button__link {
    width: var(--gg-boton-ancho-mov);
    max-width: var(--gg-boton-ancho-mov);
  }

  .card-body .btn-perso-card,
  .sec-resultados .btn-perso-card {
    width: var(--gg-boton-ancho-mov);
    max-width: var(--gg-boton-ancho-mov);
    min-width: 0;
    height: auto;
    min-height: 48px;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .btn-perso-card .wp-block-image {
    width: auto;
    margin: 0;
    flex-shrink: 0;
  }

  .btn-perso-card img {
    width: 22px;
    height: 22px;
    display: block;
  }

  /* Titulos */
  .sec-title br {
    display: inline;
  }

  /* Al pasar a columna, el justify-content de WordPress cambia de eje. */
  .sec-title:has(h2 + h2) {
    flex-direction: column;
    align-items: center;
    row-gap: 0.25rem;
  }

  /* Hero */
  .hero-text .wp-block-buttons {
    flex-wrap: wrap;
  }

  .hero-bg {
    min-height: auto;
    padding-top: 2.5rem;
    padding-bottom: 7.5rem;
  }

  .sec-hero .hero-video.alignwide {
    width: 100%;
    max-width: 300px;
    margin-top: -5rem;
    margin-bottom: 2rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  }

  /* Productos */
  .card-header-img {
    left: auto;
    right: 8px;
    top: -35px;
    width: 115px;
    height: 135px;
  }

  .card-header {
    height: 100px;
    padding: 1rem;
  }

  .card-body {
    min-height: auto;
    gap: 1rem;
  }

  /* Padding y no margin: con la red de seguridad al 100% el margen desbordaba
     16px la tarjeta y descentraba el boton. */
  .card-body .card-intro {
    margin-left: 0;
    padding-left: 1.75rem;
  }

  .card-list {
    min-height: auto;
    padding: 1rem 0.75rem;
    gap: 0.5rem;
  }

  .card-list-item {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 4px;
  }

  .card-list-item p {
    font-size: 14px;
    line-height: 20px;
  }

  .card-check {
    width: 32px;
    height: 32px;
  }

  /* Resultados. !important en todo el bloque: pelea contra el layout
     generado por WordPress y contra las medidas fijas de escritorio. */
  .stats-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding-bottom: 2rem;
  }

  .stats-wrap > .stat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 46% !important;
    max-width: 225px !important;
    min-width: 0 !important;
    height: auto !important;
    /* La regla de escritorio pide min-height: 303px y aqui no se anulaba: cada
       tarjeta reservaba 303px de alto para un contenido de la mitad. */
    min-height: 0 !important;
    /* flex: 1 1 240px de escritorio: en un contenedor EN COLUMNA el flex-basis
       es el ALTO, no el ancho. De ahi 240px de tarjeta con 95 de contenido. */
    flex: 0 0 auto !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  .stats-wrap > .stat-card:not(.stat-card--down) {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .stats-wrap > .stat-card.stat-card--down {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .stats-wrap > .stat-card > .wp-block-image {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .stats-wrap > .stat-card > .wp-block-image img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .stats-wrap .stat-card h3 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 20px;
    line-height: 25px;
    text-align: left;
  }

  /* Como funciona */
  .sec-como {
    padding-top: 3.5rem;
  }

  .como-h2 h2 {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .como-h2 br {
    display: inline;
  }

  /* .como-h2 es un flex vertical: sus hijos se alinean al inicio del eje
     transversal, o sea a la izquierda. max-width: 100% es un tope, no una
     medida, asi que no lo ensancha. Lo arregla el align-self. */
  .como-h2 p {
    align-self: stretch;
    max-width: 100%;
    text-align: center;
  }

  .como-img {
    display: none;
  }

  /* !important: WordPress fuerza display:flex en este bloque. */
  .pms-badges {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    box-sizing: border-box;
  }

  .badge {
    width: 100%;
    height: 48px;
  }

  .badge img {
    width: 18px;
    height: 18px;
    margin-left: 14px !important;
  }

  .badge p {
    margin-left: -14px;
    font-size: 13px;
    line-height: 1.2;
  }

  .team-card {
    gap: 1rem;
  }

  .team-card img {
    width: 80px;
    height: 80px;
  }

  .team-card-text {
    width: auto;
    flex: 1;
    min-width: 0;
  }

  .team-card-text br {
    display: none;
  }

  /* Soluciones */
  .sol-cols {
    box-sizing: border-box;
  }

  .sol-icon img {
    width: 64px;
    height: 64px;
  }

  .sol-text p:first-child {
    min-height: auto;
  }

  .sol-text p:last-child {
    font-size: 16px;
    line-height: 24px;
  }

  .sol-text br {
    display: none;
  }

  /* CTA */
  .sec-cta .cta-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    width: 100%;
    gap: 0.75rem;
  }

  .sec-cta .cta-btns .btn-perso {
    width: var(--gg-boton-ancho-mov);
    max-width: var(--gg-boton-ancho-mov);
  }

  /* Reparto de lineas. En movil caben pocas palabras y salen roturas feas:
     "a 502-" / "Room", o una palabra suelta al final.
       balance -> reparte parejo, para titulares de pocas lineas
       pretty  -> evita huerfanas, para parrafos */
  .sec-title h2,
  .como-h2 h2 {
    text-wrap: balance;
  }

  .sec-title p,
  .como-h2 p,
  .sol-text p {
    text-wrap: pretty;
  }

  /* Red de seguridad contra anchos fijos de escritorio. */
  .card-intro,
  .card-body,
  .card-list,
  .como-text,
  .team-card,
  .sol-card,
  .sol-cols,
  .como-top,
  .pms-badges,
  .team-cards {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ============================================================
   Header movil: orden y pastilla de idioma
   ------------------------------------------------------------
   Anadido el 24-08-2026. Estas reglas estaban en la copia de disco
   desde el 21-08 y nunca llegaron a Playground. Se anaden al final,
   en su propio @media, en vez de sobrescribir la hoja entera.
   ============================================================ */

@media (max-width: 600px) {

  /* El envoltorio, no solo el boton: oculto el de dentro, el de fuera
     seguia siendo un elemento flex de ancho 0 y se llevaba dos gap. */
  header.wp-block-template-part .wp-block-buttons {
    display: none;
  }

  /* Orden en movil: logo, selector, hamburguesa.
     El switcher del header es HERMANO de la navegacion; el del drawer
     cuelga de dentro de ella. El ~ es lo unico que los distingue. */
  header.wp-block-template-part .wp-block-navigation ~ .custom-lang-switcher {
    margin-left: auto;
  }

  /* El bloque va con selfStretch: fill, o sea flex-grow: 1, y se estiraba
     240px dejando la hamburguesa en la otra punta. El order la manda al
     final; los demas hijos conservan el orden del marcado. */
  header.wp-block-template-part .wp-block-navigation {
    order: 2;
    flex-grow: 0;
  }

  /* La pastilla se queda solo con el codigo de idioma. El ~ evita que esto
     alcance al selector del drawer, que si conserva globo y flecha. */
  header.wp-block-template-part .wp-block-navigation ~ .custom-lang-switcher .lang-globe,
  header.wp-block-template-part .wp-block-navigation ~ .custom-lang-switcher .lang-arrow {
    display: none;
  }
}