/* ============================================================
   GUTTER LATERAL RESPONSIVO (una sola fuente de verdad)
   ============================================================ */
:root {
  --gutter: clamp(1rem, 4vw, 5rem);
}

@media (min-width: 1600px) {
  :root {
    --gutter: clamp(5rem, 7vw, 10rem);
  }
}

/* 1. Bloques de nivel superior: gutter como padding (los fondos también: su ::before usa 100vw centrado, no se afecta) */
.entry-content > *:not(.cinta-azul):not(.banner-quienes):not(.soporte-remoto):not(.contacto-card):not(.cita-gerente):not(.cita-centrada):not(.is-style-cta-azul) {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  box-sizing: border-box !important;
}

/* 2. Banners que son bloque de nivel superior: gutter como margen */
.entry-content > :is(.banner-quienes, .soporte-remoto, .contacto-card, .cita-gerente, .cita-centrada, .is-style-cta-azul) {
  width: auto !important;
  max-width: none !important;
  margin-left: var(--gutter) !important;
  margin-right: var(--gutter) !important;
  box-sizing: border-box !important;
}

/* 3. Banners anidados: margen propio igual al gutter */
.entry-content > * :is(.soporte-remoto, .cita-gerente, .cita-centrada, .is-style-cta-azul) {
  width: auto !important;
  max-width: none !important;
  margin-left: var(--gutter) !important;
  margin-right: var(--gutter) !important;
}

/* ============================================================
   HEADER SISTEMATIC
   ============================================================ */
header.wp-block-template-part {
  position: relative;
  z-index: 10;
  background-color: var(--wp--preset--color--custom-contraste-principal, #fff);
  border-bottom: 1px solid var(--wp--preset--color--custom-border);
}

/* Logo | Navegación centrada | Botón. El grid 1fr auto 1fr centra la navegación de verdad */
header.wp-block-template-part>.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-block: 1.5rem !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  box-sizing: border-box !important;
}

header.wp-block-template-part>.wp-block-group> :first-child {
  justify-self: start;
}

header.wp-block-template-part>.wp-block-group> :last-child {
  justify-self: end;
}

/* Navegación */
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation__container {
  gap: 3rem !important;
}

header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation-item__content {
  font-size: 0.75rem !important;
  /* 12px, como Figma */
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

/* Ítem activo (Inicio): semibold y subrayado */
header.wp-block-template-part .wp-block-navigation .current-menu-item>a,
header.wp-block-template-part .wp-block-navigation a[aria-current="page"] {
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.25em;
}

/* Sin recuadro negro al hacer clic (TT4 pone outline en :focus).
   Se conserva un anillo azul solo para navegación con teclado. */
header.wp-block-template-part .wp-block-navigation a:focus,
header.wp-block-template-part .wp-block-navigation-item__content:focus,
header.wp-block-template-part .wp-block-navigation__responsive-container-content:focus,
header.wp-block-template-part .wp-block-navigation__responsive-container:focus,
header.wp-block-template-part .wp-block-navigation__responsive-container-open:focus,
header.wp-block-template-part .wp-block-navigation__responsive-container-close:focus {
  outline: none !important;
  box-shadow: none !important;
}

header.wp-block-template-part .wp-block-navigation a:focus-visible,
header.wp-block-template-part .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--wp--preset--color--custom-azul) !important;
  outline-offset: 4px;
  border-radius: 0.25rem;
}

/* Dentro del menú desplegable el foco programático al abrir tampoco debe dibujar recuadro */
header.wp-block-template-part .is-menu-open a:focus,
header.wp-block-template-part .is-menu-open a:focus-visible {
  outline: none !important;
}

/* Botón "Solicitar Demo" */
header.wp-block-template-part .wp-block-button__link {
  padding: 0.75rem 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
}

@media (max-width: 781px) {
  header.wp-block-template-part>.wp-block-group {
    grid-template-columns: 1fr auto auto;
    column-gap: 1rem;
  }

  header.wp-block-template-part>.wp-block-group> :nth-child(2) {
    order: 3;
  }
}

/* ============================================================
   HEADER: submenú "Soluciones" (card)
   ============================================================ */
.menu-icono-tienda {
  --icono: url('iconos/mini-market.svg');
}

.menu-icono-camion {
  --icono: url('iconos/truck.svg');
}

.menu-icono-salud {
  --icono: url('iconos/heart-pulse.svg');
}

/* La descripción (WP la oculta por defecto) */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: var(--wp--preset--color--custom-letra-secundaria, #4a4a4a) !important;
}

@media (min-width: 782px) {
  header.wp-block-template-part .wp-block-navigation__submenu-icon {
    display: none !important;
  }

  /* La card, centrada bajo "Soluciones" */
  header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    top: calc(100% + 1.25rem) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    padding: 1.5rem !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid var(--wp--preset--color--custom-border) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  }

  /* Ancho solo cuando está abierta (no tocamos el estado oculto de WP) */
  header.wp-block-template-part .wp-block-navigation .has-child:hover>.wp-block-navigation__submenu-container,
  header.wp-block-template-part .wp-block-navigation .has-child:focus-within>.wp-block-navigation__submenu-container {
    width: 40rem !important;
    max-width: calc(100vw - 2rem) !important;
  }

  /* Puente invisible: evita que el menú se cierre al cruzar el hueco entre el enlace y la card */
  header.wp-block-template-part .wp-block-navigation__submenu-container::before {
    content: "";
    position: absolute;
    top: -1.5rem;
    left: 0;
    right: 0;
    height: 1.5rem;
  }

  /* Cada ítem: ícono | título + descripción */
  header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
    position: relative;
    display: grid !important;
    grid-template-columns: 3.125rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    align-items: center;
    align-content: center;
    padding: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
  }

  /* Caja celeste del ícono */
  header.wp-block-template-part .wp-block-navigation__submenu-container a.wp-block-navigation-item__content::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 0.75rem;
    background-color: var(--wp--preset--color--custom-fondo-celeste);
  }

  /* Ícono azul (máscara) centrado en la caja */
  header.wp-block-template-part .wp-block-navigation__submenu-container a.wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0.8125rem;
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    background-color: var(--wp--preset--color--custom-azul);
    -webkit-mask: var(--icono) center / contain no-repeat;
    mask: var(--icono) center / contain no-repeat;
  }

  header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-weight: 600 !important;
    text-transform: uppercase;
  }

  header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  header.wp-block-template-part .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
    color: var(--wp--preset--color--custom-azul);
  }
}

/* ============================================================
   HEADER: menú desplegable (hamburguesa)
   ============================================================ */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: center !important;
  gap: 1.5rem !important;
}

header.wp-block-template-part .is-menu-open .wp-block-navigation-item.has-child {
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* Los ítems del submenú nunca llevan el subrayado/peso del "ítem activo" */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container a[aria-current="page"],
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item>a {
  text-decoration: none !important;
}

/* Menú desplegable (ventana angosta): sin subrayados, ni en hover ni en el ítem activo.
   En escritorio el subrayado azul se mantiene tal cual. */
header.wp-block-template-part .is-menu-open .wp-block-navigation a,
header.wp-block-template-part .is-menu-open .wp-block-navigation a:hover,
header.wp-block-template-part .is-menu-open .wp-block-navigation a:focus,
header.wp-block-template-part .is-menu-open .wp-block-navigation a[aria-current="page"],
header.wp-block-template-part .is-menu-open .wp-block-navigation a .wp-block-navigation-item__label,
header.wp-block-template-part .is-menu-open .wp-block-navigation a .wp-block-navigation-item__description {
  text-decoration: none !important;
}

/* En su lugar: color azul sutil para el hover y para la página activa */
header.wp-block-template-part .is-menu-open .wp-block-navigation a {
  transition: color 0.2s ease;
}

header.wp-block-template-part .is-menu-open .wp-block-navigation a:hover,
header.wp-block-template-part .is-menu-open .wp-block-navigation a[aria-current="page"] {
  color: var(--wp--preset--color--custom-azul) !important;
}

/* Submenú móvil: la caja del ícono se tiñe suavemente; la descripción no cambia de color */
header.wp-block-template-part .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content::before {
  transition: background-color 0.2s ease;
}

header.wp-block-template-part .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover::before {
  background-color: color-mix(in srgb, var(--wp--preset--color--custom-azul) 14%, #fff);
}

header.wp-block-template-part .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover .wp-block-navigation-item__description {
  color: var(--wp--preset--color--custom-letra-secundaria, #4a4a4a) !important;
}

/* Submenú en el menú desplegable: mini-card con ícono, igual que la de escritorio */
header.wp-block-template-part .is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 24rem !important;
  margin: 0.75rem auto 0 !important;
  padding: 1rem !important;
  gap: 1rem !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid var(--wp--preset--color--custom-border) !important;
  border-radius: 1rem !important;
  box-shadow: none !important;
}

header.wp-block-template-part .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
  position: relative;
  display: grid !important;
  grid-template-columns: 2.5rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  align-items: center;
  align-content: center;
  text-align: left !important;
  padding: 0 !important;
}

/* Caja celeste del ícono */
header.wp-block-template-part .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background-color: var(--wp--preset--color--custom-fondo-celeste);
}

/* Ícono azul centrado en la caja */
header.wp-block-template-part .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0.625rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  background-color: var(--wp--preset--color--custom-azul);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}

header.wp-block-template-part .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 0.8125rem;
  font-weight: 600 !important;
  line-height: 1.25;
  text-transform: uppercase;
  /* uniforme, sin importar cómo se escribió en el editor */
}

header.wp-block-template-part .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  display: block !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  text-align: left !important;
  max-width: none;
  margin: 0;
}

/* Subrayados */
.subrayado-azul,
.subrayado-amarillo,
.subrayado-blanco {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: auto;
}

.subrayado-azul {
  text-decoration-color: var(--wp--preset--color--custom-azul);
}

.subrayado-amarillo {
  text-decoration-color: var(--wp--preset--color--custom-amarillo);
}

.subrayado-blanco {
  text-decoration-color: #ffffff;
}

/* Subrayado oscuro (títulos de secciones sobre fondo claro): 2px en el color de texto principal */
.subrayado-oscuro {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--custom-letra-principal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: auto;
}

/* Badge */
p.is-style-badge {
  --badge-color: var(--wp--preset--color--custom-azul);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 0;
  padding: 0.25rem 0.75rem;
  color: var(--badge-color);
  background-color: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 999px;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* Ícono antes del texto */
p[class*="icono-"]::before,
h1[class*="icono-"]::before,
h2[class*="icono-"]::before,
h3[class*="icono-"]::before,
h4[class*="icono-"]::before,
.wp-block-button[class*="icono-"] .wp-block-button__link::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.5rem;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}

p.is-style-badge[class*="icono-"]::before {
  margin-right: 0;
}

/* Ícono solo */
.icono-solo {
  display: block;
  position: relative;
  width: var(--icono-size, 1.5rem);
  height: var(--icono-size, 1.5rem);
}

.icono-solo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}

/* Tamaños */
.icono-grande {
  --icono-size: 2.5rem;
}

.icono-medio {
  --icono-size: 1.5rem;
}

/* Colores de ícono */
.icono-error {
  color: var(--wp--preset--color--custom-error);
}

.icono-exito {
  color: var(--wp--preset--color--custom-exito);
}

.icono-azul {
  color: var(--wp--preset--color--custom-azul);
}

.icono-amarillo {
  color: var(--wp--preset--color--custom-amarillo);
}

/* Halo opcional */
.icono-circulo {
  isolation: isolate;
}

.icono-circulo::after {
  content: "";
  position: absolute;
  width: var(--icono-size, 1.5rem);
  height: var(--icono-size, 1.5rem);
  left: -0.5rem;
  top: 0.4rem;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 999px;
  z-index: -1;
}

/* Columnas: texto + imagen */
.wp-block-columns.is-style-texto-imagen {
  align-items: stretch;
}

.wp-block-columns.is-style-texto-imagen>.wp-block-column {
  display: flex;
  flex-direction: column;
}

.wp-block-columns.is-style-texto-imagen .wp-block-image,
.wp-block-columns.is-style-texto-imagen .wp-block-post-featured-image {
  flex: 1 1 0px;
  position: relative;
  margin: 0;
  min-height: 0;
  height: auto !important;
  aspect-ratio: auto !important;
  contain: size;
  /* no aporta altura propia a la fila */
}

.wp-block-columns.is-style-texto-imagen .wp-block-image img,
.wp-block-columns.is-style-texto-imagen .wp-block-post-featured-image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center;
  border-radius: 1.5rem;
}

/* Tarjeta */
.wp-block-group.is-style-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.75rem;
  padding: 1rem;
  background-color: var(--wp--preset--color--custom-fondo);
  border: 1px solid var(--wp--preset--color--custom-border);
  border-radius: 0.75rem;
}

.wp-block-group.is-style-tarjeta .wp-block-heading,
.wp-block-group.is-style-tarjeta p,
.wp-block-group.is-style-tarjeta .wp-block-group {
  margin: 0;
}

.wp-block-group.is-style-tarjeta .wp-block-heading {
  overflow-wrap: normal;
  hyphens: none;
}

/* Columnas con tarjetas: todas con la misma altura */
.wp-block-columns:has(> .wp-block-column > .is-style-tarjeta) {
  align-items: stretch;
}

.wp-block-column:has(> .is-style-tarjeta) {
  display: flex;
}

.wp-block-column>.is-style-tarjeta {
  flex: 1;
}

/* Lista de ítems */
.lista-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.lista-items>p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.lista-items>p::before {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-right: 0;
  background-color: var(--lista-icono-color, currentColor);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}

.lista-items.lista-error {
  --lista-icono-color: var(--wp--preset--color--custom-error);
}

.lista-items.lista-exito {
  --lista-icono-color: var(--wp--preset--color--custom-exito);
}

/* ============================================================
   SECCIÓN CON ENCABEZADO (ANCHO COMPLETO)
   ============================================================ */
.wp-block-group.is-style-seccion-cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2.5rem 0;
  text-align: center;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

.wp-block-group.is-style-seccion-cabecera>.wp-block-heading,
.wp-block-group.is-style-seccion-cabecera>p {
  margin: 0;
}

.wp-block-group.is-style-seccion-cabecera>.wp-block-columns,
.wp-block-group.is-style-seccion-cabecera>.carrusel-testimonios,
.wp-block-group.is-style-seccion-cabecera>.wp-block-group {
  width: 100% !important;
  max-width: 100% !important;
  text-align: left;
}

.wp-block-group.is-style-seccion-cabecera .wp-block-columns {
  gap: 1.5rem;
  width: 100% !important;
  max-width: 100% !important;
}

.wp-block-group.is-style-seccion-cabecera .wp-block-column {
  text-align: left;
}

@media (max-width: 1279px) {
  .wp-block-columns.columnas-6:has(> .wp-block-column > .is-style-tarjeta) {
    flex-wrap: wrap;
  }

  .wp-block-columns.columnas-6:has(> .wp-block-column > .is-style-tarjeta)>.wp-block-column {
    flex-basis: calc(33.333% - 1rem);
  }
}

/* ============================================================
   MARQUEE DE LOGOS
   ============================================================ */
.marquee {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.wp-block-group.is-style-seccion-cabecera>.marquee {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.marquee .marquee-fila {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  width: max-content;
  max-width: none;
  margin: 0;
}

.marquee .marquee-fila>* {
  flex-shrink: 0;
  margin: 0 1.5rem;
}

.marquee .marquee-fila img {
  display: block;
  width: auto;
  height: 2.5rem;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
}

.marquee .marquee-fila.marquee-listo {
  animation: marquee-izquierda var(--marquee-duracion, 40s) linear infinite;
}

.marquee .marquee-fila.marquee-listo.marquee-inversa {
  animation-name: marquee-derecha;
}

.marquee:hover .marquee-fila {
  animation-play-state: paused;
}

@keyframes marquee-izquierda {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-derecha {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.editor-styles-wrapper .marquee .marquee-fila {
  animation: none;
}

.editor-styles-wrapper .marquee {
  overflow: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
  .marquee .marquee-fila.marquee-listo {
    animation: none;
  }
}

/* ============================================================
   RESEÑA DESTACADA (ANCHO COMPLETO)
   ============================================================ */
.wp-block-group.is-style-resena-destacada,
.wp-block-group.is-style-resena-destacada.alignfull,
.wp-block-group.is-style-resena-destacada.alignwide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 5rem;
  background-color: var(--wp--preset--color--custom-fondo-secundario);
  border: 0.1875rem solid var(--wp--preset--color--custom-border);
  border-radius: 2rem;
  text-align: left;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}

.is-style-resena-destacada .resena-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 34rem;
}

.is-style-resena-destacada .resena-info>* {
  margin: 0;
}

.is-style-resena-destacada .resena-info .wp-block-heading img {
  display: inline-block;
  height: 0.9em;
  width: auto;
  vertical-align: -0.1em;
}

.is-style-resena-destacada .resena-puntaje {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.is-style-resena-destacada .resena-puntaje>* {
  margin: 0;
}

.is-style-resena-destacada .resena-nota {
  font-weight: 700;
  line-height: 1;
}

.avatares {
  --avatar: 5rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 0.75rem;
}

.wp-block-group.avatares>* {
  flex-shrink: 0;
  margin: 0 0 0 calc(var(--avatar) * -0.35);
}

.wp-block-group.avatares>*:first-child {
  margin-left: 0;
}

@font-face {
  font-family: "Roboto Avatar";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-latin-500-normal.woff2") format("woff2");
}

p.avatar-inicial {
  --google-morado: #7b1fa2;
  --google-turquesa: #0097a7;
  --google-gris: #78909c;
  --google-naranja: #e64a19;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--avatar, 5rem);
  height: var(--avatar, 5rem);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: var(--avatar-borde, 2px) solid var(--wp--preset--color--custom-blanco);
  border-radius: 999px;
  color: var(--wp--preset--color--custom-contraste-principal);
  font-family: "Roboto Avatar", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--avatar, 5rem) * 0.525);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.avatar-morado {
  background-color: var(--google-morado);
}

.avatar-turquesa {
  background-color: var(--google-turquesa);
}

.avatar-gris {
  background-color: var(--google-gris);
}

.avatar-naranja {
  background-color: var(--google-naranja);
}

.avatares .wp-block-image img {
  display: block;
  width: var(--avatar);
  height: var(--avatar);
  object-fit: cover;
  border-radius: 999px;
  border: 2px solid var(--wp--preset--color--custom-blanco);
  box-sizing: border-box;
}

.avatares .avatar-google img {
  padding: 1rem;
  object-fit: contain;
  background-color: var(--wp--preset--color--custom-letra-principal);
}

.numero-destacado,
.is-style-numero-destacado {
  margin: 0;
  font-weight: 700;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {

  .numero-destacado,
  .is-style-numero-destacado {
    margin-block: -0.16em -0.14em !important;
  }
}

.numero-destacado+.estrellas,
.is-style-numero-destacado+.estrellas {
  margin-top: 3rem;
}

.estrellas {
  --estrella: 1.5rem;
  --paso: 2.25rem;
  --valor: 5;
  --enteras: round(down, var(--valor), 1);
  --corte: calc(var(--enteras) * var(--paso) + (var(--paso) - var(--estrella)) / 2 + (var(--valor) - var(--enteras)) * var(--estrella));
  display: block;
  width: calc(var(--paso) * 5);
  height: var(--estrella);
  margin-inline: auto;
  background: var(--wp--preset--color--custom-amarillo);
  background: linear-gradient(90deg, var(--wp--preset--color--custom-amarillo) var(--corte), transparent 0);
  -webkit-mask: var(--icono) 0 0 / var(--paso) var(--estrella) repeat-x;
  mask: var(--icono) 0 0 / var(--paso) var(--estrella) repeat-x;
}

.estrellas-45 {
  --valor: 4.5;
}

.estrellas-49 {
  --valor: 4.9;
}

/* ============================================================
   TESTIMONIO (INDIVIDUAL)
   ============================================================ */
.autor {
  --avatar: 2rem;
  --avatar-borde: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

.wp-block-group.autor>* {
  margin: 0;
}

.autor .wp-block-image {
  flex-shrink: 0;
}

.autor .wp-block-image img {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 999px;
}

.autor-datos {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wp-block-group.autor-datos>* {
  margin: 0;
}

.autor-datos .wp-block-heading {
  font-size: var(--wp--preset--font-size--m);
  font-weight: 600;
  line-height: 1.2;
}

.autor-datos p {
  font-size: var(--wp--preset--font-size--xxs);
  font-weight: 500;
  line-height: 1.2;
  color: var(--wp--preset--color--custom-letra-terciaria);
}

.is-style-tarjeta .autor+p {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  line-height: 1.25;
}

/* ============================================================
   CITA CENTRADA (testimonio en banner)
   ============================================================ */
.wp-block-group.cita-centrada {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem !important;
  /* 40px */
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: 3.75rem 5rem !important;
  /* 60px arriba/abajo, 80px a los lados */
  text-align: center;
  background-color: var(--wp--preset--color--custom-fondo-secundario);
  border: 1px solid var(--wp--preset--color--custom-border);
  border-radius: 2rem;
  /* 32px */
  box-sizing: border-box !important;
}

/* La cita: semibold, centrada y con un ancho de lectura cómodo */
.wp-block-group.cita-centrada>p {
  max-width: 56rem;
  margin: 0 !important;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

/* Autor centrado bajo la cita */
.wp-block-group.cita-centrada>.autor {
  justify-content: center;
}

.wp-block-group.cita-centrada .autor-datos {
  text-align: left;
}

@media (max-width: 781px) {
  .wp-block-group.cita-centrada {
    padding: 2.5rem 1.5rem !important;
    border-radius: 1.5rem;
  }
}

/* ============================================================
   CARRUSEL DE TESTIMONIOS (3 EN 3)
   ============================================================ */
.carrusel-testimonios {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.carrusel-track {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carrusel-track::-webkit-scrollbar {
  display: none;
}

.carrusel-track>.wp-block-columns {
  flex: 0 0 100%;
  min-width: 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  gap: 1.5rem;
}

/* Puntos interactivos */
.puntos-interactivos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.puntos-interactivos .punto-btn {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 999px;
  background-color: var(--wp--preset--color--custom-azul-40);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.puntos-interactivos .punto-btn:focus,
.puntos-interactivos .punto-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.puntos-interactivos .punto-btn.is-active {
  background-color: var(--wp--preset--color--custom-azul);
  transform: scale(1.1);
}

/* Puntos estáticos de respaldo */
.puntos {
  --punto: 0.5rem;
  --separacion: 0.75rem;
  --puntos: 3;
  --ancho: calc(var(--puntos) * var(--punto) + (var(--puntos) - 1) * var(--separacion));
  display: block;
  width: var(--ancho);
  height: var(--punto);
  margin-inline: auto;
  background:
    radial-gradient(circle at calc(var(--punto) / 2) 50%, var(--wp--preset--color--custom-azul) calc(var(--punto) / 2 - 0.5px), transparent calc(var(--punto) / 2)) 0 0 / var(--punto) 100% no-repeat,
    radial-gradient(circle at calc(var(--punto) / 2) 50%, var(--wp--preset--color--custom-azul-40) calc(var(--punto) / 2 - 0.5px), transparent calc(var(--punto) / 2)) 0 0 / calc(var(--punto) + var(--separacion)) 100% repeat-x;
}

.puntos-4 {
  --puntos: 4;
}

.puntos-5 {
  --puntos: 5;
}

.wp-block-group.is-style-seccion-cabecera>.puntos {
  width: var(--ancho);
}

/* ============================================================
   CTA AZUL FINAL (ANCHO COMPLETO)
   ============================================================ */
.wp-block-group.is-style-cta-azul,
.wp-block-group.is-style-cta-azul.alignfull,
.wp-block-group.is-style-cta-azul.alignwide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
  padding: 5rem 2rem !important;
  margin-top: 4rem !important;
  margin-bottom: 5rem !important;
  /* Espacio de separación claro con el footer */
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  background: linear-gradient(90deg,
      var(--wp--preset--color--custom-azul-oscuro) 0%,
      var(--wp--preset--color--custom-azul) 35%,
      var(--wp--preset--color--custom-azul) 65%,
      var(--wp--preset--color--custom-azul-oscuro) 100%) !important;
  border-radius: 2rem;
  color: #ffffff !important;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box !important;
}

/* Ondas izquierda */
.wp-block-group.is-style-cta-azul::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -10%;
  width: 45%;
  background: url('svg/ondas-cta.svg') no-repeat center left / contain;
  pointer-events: none;
  z-index: -1;
  opacity: 0.9;
}

/* Ondas derecha (espejo) */
.wp-block-group.is-style-cta-azul::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  right: -10%;
  width: 45%;
  background: url('svg/ondas-cta.svg') no-repeat center left / contain;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: -1;
  opacity: 0.9;
}

.wp-block-group.is-style-cta-azul>* {
  position: relative;
  z-index: 1;
  margin: 0;
}

.wp-block-group.is-style-cta-azul .wp-block-heading {
  color: #ffffff;
  font-size: var(--wp--preset--font-size--4-xl, 3rem);
  font-weight: 700;
  line-height: 1.15;
  max-width: 52rem;
}

.wp-block-group.is-style-cta-azul p {
  color: #ffffff;
  font-size: var(--wp--preset--font-size--m, 1rem);
  line-height: 1.4;
  max-width: var(--cta-ancho-texto, 42rem);
  /* ≈756px con rem = 18px: lo que ocupa el texto */
  opacity: 0.95;
}

.wp-block-group.is-style-cta-azul .cta-letra-pequena {
  font-size: var(--wp--preset--font-size--xs, 0.75rem);
  opacity: 0.8;
  margin-top: -0.5rem;
}

/* Botón del CTA: mismo ancho que el texto grande (758px en Figma).
   Para cambiarlo, solo hay que tocar --cta-ancho-texto (se usa también en el párrafo). */
.wp-block-group.is-style-cta-azul .wp-block-buttons {
  /* Ancho fijo (no %): funciona aunque el padre se ajuste al contenido */
  width: var(--cta-ancho-texto, 42rem) !important;
  max-width: 100% !important;
  justify-content: stretch !important;
}

.wp-block-group.is-style-cta-azul .wp-block-buttons>.wp-block-button {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
}

.wp-block-group.is-style-cta-azul .wp-block-button__link {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  text-align: center;
  justify-content: center;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* Responsivo: reseña + CTA */
@media (max-width: 781px) {
  .wp-block-group.is-style-resena-destacada {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }

  .is-style-resena-destacada .resena-puntaje {
    align-items: flex-start;
  }

  .avatares {
    --avatar: 3.5rem;
  }

  .avatares .avatar-google img {
    padding: 0.75rem;
  }

  .wp-block-group.is-style-cta-azul {
    padding: 3rem 1.5rem !important;
    border-radius: 1.25rem;
  }

  .wp-block-group.is-style-cta-azul::before,
  .wp-block-group.is-style-cta-azul::after {
    width: 60%;
    opacity: 0.4;
  }

  .wp-block-group.is-style-cta-azul .wp-block-heading {
    font-size: var(--wp--preset--font-size--2-xl, 2rem);
  }
}

/* ============================================================
   FOOTER SISTEMATIC (IDÉNTICO A FIGMA)
   ============================================================ */

/* 1. Contenedor de ancho completo de borde a borde */
footer.wp-block-template-part,
.wp-block-group.is-style-footer-sistematic {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  /* Degradado vertical de Figma: Linear de #0000FF (0%) a #000099 (100%) */
  background: linear-gradient(180deg,
      var(--wp--preset--color--custom-azul, #0000FF) 0%,
      var(--wp--preset--color--custom-azul-oscuro, #000099) 100%) !important;
  background-color: var(--wp--preset--color--custom-azul, #0000FF) !important;
  color: #ffffff !important;
  overflow: hidden !important;
  /* Corta los 2138px del vector en los extremos */
  isolation: isolate;
  padding-top: 3.5rem !important;
  padding-bottom: 2rem !important;
  margin: 0 !important;
  border-radius: 0 !important;
  /* Recto en Figma, sin esquinas redondas */
  box-sizing: border-box !important;
}

/* Neutralizar el wrapper nativo de plantilla si el estilo está en el Grupo interno */
footer.wp-block-template-part:has(.is-style-footer-sistematic) {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2. Malla vectorial */
.wp-block-group.is-style-footer-sistematic::before,
footer.wp-block-template-part::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2138px;
  height: 100%;
  min-height: 439px;
  background-image: url('svg/malla-footer.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 2138px auto;
  opacity: 0.75 !important;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* Evita que la malla se dibuje dos veces si el grupo vive dentro del <footer> */
footer.wp-block-template-part:has(.is-style-footer-sistematic)::before {
  display: none !important;
}

/* 3. Contenido: mismo gutter lateral que el resto de la landing */
.wp-block-group.is-style-footer-sistematic>*,
footer.wp-block-template-part>* {
  position: relative !important;
  z-index: 2 !important;
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  box-sizing: border-box !important;
}

/* Separación para el grupo inferior de copyright / términos */
.wp-block-group.is-style-footer-sistematic>.wp-block-group,
footer.wp-block-template-part>.wp-block-group:last-child {
  margin-top: 3rem !important;
}

/* 4. Textos y enlaces en blanco puro ($contraste_principal) */
.wp-block-group.is-style-footer-sistematic p,
.wp-block-group.is-style-footer-sistematic h1,
.wp-block-group.is-style-footer-sistematic h2,
.wp-block-group.is-style-footer-sistematic h3,
.wp-block-group.is-style-footer-sistematic h4,
.wp-block-group.is-style-footer-sistematic a,
.wp-block-group.is-style-footer-sistematic span,
.wp-block-group.is-style-footer-sistematic li,
footer.wp-block-template-part p,
footer.wp-block-template-part h1,
footer.wp-block-template-part h2,
footer.wp-block-template-part h3,
footer.wp-block-template-part h4,
footer.wp-block-template-part a,
footer.wp-block-template-part span,
footer.wp-block-template-part li {
  color: #ffffff !important;
}

.wp-block-group.is-style-footer-sistematic a:hover,
footer.wp-block-template-part a:hover {
  opacity: 0.8;
}

/* Sin recuadro negro al hacer clic en los enlaces del footer; anillo blanco solo con teclado */
.wp-block-group.is-style-footer-sistematic a:focus,
footer.wp-block-template-part a:focus {
  outline: none !important;
}

.wp-block-group.is-style-footer-sistematic a:focus-visible,
footer.wp-block-template-part a:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 3px;
}

/* 5. Columna derecha: Navegación + Síguenos como un solo bloque pegado al borde */
@media (min-width: 782px) {
  .wp-block-group.is-style-footer-sistematic>.wp-block-columns>.wp-block-column:last-child {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* El wrapper único que contiene Navegación + Síguenos */
  .wp-block-group.is-style-footer-sistematic>.wp-block-columns>.wp-block-column:last-child>* {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Navegación: su ancho fija dónde empieza Síguenos (258px en Figma) */
  .wp-block-group.is-style-footer-sistematic>.wp-block-columns>.wp-block-column:last-child>*> :first-child {
    flex: 0 0 258px !important;
    width: 258px !important;
  }

  /* Síguenos: ancho según su contenido, íconos a la izquierda bajo el título */
  .wp-block-group.is-style-footer-sistematic>.wp-block-columns>.wp-block-column:last-child>*> :last-child {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* Íconos sociales siempre alineados a la izquierda bajo su título */
.wp-block-group.is-style-footer-sistematic .wp-block-social-links {
  justify-content: flex-start !important;
  margin-left: 0 !important;
}

@media (max-width: 781px) {

  /* Aire entre columnas apiladas */
  .wp-block-group.is-style-footer-sistematic>.wp-block-columns {
    gap: 2.5rem !important;
  }

  /* Navegación y Síguenos, uno bajo el otro con separación */
  .wp-block-group.is-style-footer-sistematic>.wp-block-columns>.wp-block-column:last-child>* {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2rem !important;
  }
}

/* Títulos NAVEGACIÓN y SÍGUENOS: Montserrat 12 semibold (Figma) */
.wp-block-group.is-style-footer-sistematic .wp-block-column:last-child .wp-block-heading {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  margin: 0 0 0.75rem !important;
}

/* ============================================================
   FONDO VECTOR (hero + "El costo de no tener control")
   Medidas de Figma: 1581 x 564, empieza ~360px bajo el inicio del hero
   ============================================================ */
.wp-block-group.fondo-vector {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  /* recorta lo que sobresale a los lados, sin tocar el eje vertical */
}

.wp-block-group.fondo-vector::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--vector-top, 22.5rem);
  /* ≈360px: sube o baja para calzar con Figma */
  left: 50%;
  width: 1581px;
  height: 564px;
  transform: translateX(-50%) scale(var(--vector-escala, 1.25));
  transform-origin: center top;
  /* al agrandar crece hacia los lados y hacia abajo, sin subir */
  background: url('svg/fondo-hero.svg') no-repeat center / contain;
  pointer-events: none;
}

/* Las secciones internas no pueden tapar el vector con su propio fondo */
.wp-block-group.fondo-vector>.wp-block-group {
  background: transparent !important;
}

@media (max-width: 781px) {
  .wp-block-group.fondo-vector::before {
    top: 14rem;
  }
}

/* ============================================================
   FONDO VECTOR LATERAL (inclinado, exportado de Figma)
   Grupo de 1583×574 girado -106.34° → caja visible ≈ 997×1681.
   Se ancla al CENTRO de la página: calza igual en cualquier ancho de pantalla.
   ============================================================ */
.wp-block-group.fondo-vector-lateral {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* recorta arriba, abajo y a los lados, como el frame de Figma */
}

.wp-block-group.fondo-vector-lateral::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--vector-x, 240px);
  top: var(--vector-y, 520px);
  width: var(--vector-ancho, 997px);
  height: var(--vector-alto, 1681px);
  transform: translate(-50%, -50%) rotate(var(--vector-giro, 0deg)) scale(var(--vector-escala, 0.85));
  -webkit-mask: url('svg/fondo-lateral.svg') no-repeat center / contain;
  background-color: color-mix(in srgb, var(--wp--preset--color--custom-azul, #0000FF) 10%, transparent);
  mask: url('svg/fondo-lateral.svg') no-repeat center / contain;
  pointer-events: none;
}

/* Las secciones internas no tapan el vector (la cinta conserva su azul) */
.wp-block-group.fondo-vector-lateral>.wp-block-group:not(.cinta-azul) {
  background: transparent !important;
}

@media (max-width: 781px) {
  .wp-block-group.fondo-vector-lateral::before {
    display: none;
  }

  /* hasta contrastar el frame móvil */
}


/* ============================================================
   BANNER "¿QUIÉNES SOMOS?" (texto + imagen con degradado)
   ============================================================ */
.wp-block-group.banner-quienes {
  position: relative;
  display: flex !important;
  align-items: stretch;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  background: #fff;
  border: 1px solid var(--wp--preset--color--custom-border);
  border-radius: 2rem;
  overflow: hidden;
  box-sizing: border-box !important;
  --banner-texto: 56%;
}

/* Grupo de texto: más ancho, y es quien fija la altura */
.wp-block-group.banner-quienes> :first-child {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: var(--banner-texto);
  padding: 4rem 2.5rem 4rem 4rem !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.wp-block-group.banner-quienes> :first-child>* {
  margin: 0;
}

.wp-block-group.banner-quienes> :first-child p {
  max-width: none;
}

/* Imagen: pegada a la derecha, tan alta como el banner (que la fija el texto) */
.wp-block-group.banner-quienes>.wp-block-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  margin: 0 !important;
}

.wp-block-group.banner-quienes>.wp-block-image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 30%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%);
  mask-image: linear-gradient(to right, transparent 0, #000 40%);
}

@media (max-width: 781px) {
  .wp-block-group.banner-quienes {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .wp-block-group.banner-quienes> :first-child {
    width: 100%;
    padding: 2rem 1.5rem !important;
  }

  .wp-block-group.banner-quienes>.wp-block-image {
    position: relative;
    width: 100%;
    height: 14rem;
  }

  .wp-block-group.banner-quienes>.wp-block-image img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
  }
}

/* ============================================================
   SECCIÓN TRAYECTORIA (contenedor de 1280 con padding 40 y gap 32)
   ============================================================ */
.wp-block-group.is-style-seccion-cabecera.seccion-trayectoria {
  padding: 2.5rem;
  gap: 2rem;
}

/* ============================================================
   LÍNEA DE TIEMPO (921 px: 384 + 64 + 24 + 64 + 384)
   ============================================================ */
.wp-block-group.linea-tiempo,
.wp-block-group.is-style-seccion-cabecera>.wp-block-group.linea-tiempo {
  --hito-verde: #0FFCA1;
  --hito-ancho: 24rem;
  /* 384px */
  --hito-sep: 4rem;
  /* 64px: card → círculo */
  --hito-alto: 5rem;
  /* 80px */
  --hito-hueco: 1.25rem;
  /* paso de 100px entre hitos (80 + 20) */
  --punto: 1.5rem;
  /* círculo exterior: 24px */
  position: relative;
  display: grid !important;
  grid-template-columns: var(--hito-ancho) var(--punto) var(--hito-ancho);
  grid-auto-rows: minmax(var(--hito-alto), auto);
  column-gap: var(--hito-sep);
  row-gap: var(--hito-hueco);
  width: calc(var(--hito-ancho) * 2 + var(--hito-sep) * 2 + var(--punto)) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Línea central, de centro a centro del primer y el último círculo */
.wp-block-group.linea-tiempo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--hito-alto) / 2);
  bottom: calc(var(--hito-alto) / 2);
  width: 2px;
  transform: translateX(-50%);
  background: var(--wp--preset--color--custom-azul-40, #9999ff);
  z-index: 0;
}

.wp-block-group.linea-tiempo>.hito {
  position: relative;
  z-index: 1;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1rem 1.5rem !important;
  box-sizing: border-box;
  border: 1px solid var(--wp--preset--color--custom-border);
  border-radius: 0.75rem;
}

.wp-block-group.linea-tiempo>.hito>* {
  margin: 0;
}

.wp-block-group.linea-tiempo>.hito p {
  margin-top: 0.25rem;
  line-height: 1.3;
}

/* Posición: impares columna izquierda, pares columna derecha, una fila por hito */
.wp-block-group.linea-tiempo>.hito:nth-child(odd) {
  grid-column: 1;
  text-align: right;
}

.wp-block-group.linea-tiempo>.hito:nth-child(even) {
  grid-column: 3;
  text-align: left;
}

.wp-block-group.linea-tiempo>.hito:nth-child(1) {
  grid-row: 1;
}

.wp-block-group.linea-tiempo>.hito:nth-child(2) {
  grid-row: 2;
}

.wp-block-group.linea-tiempo>.hito:nth-child(3) {
  grid-row: 3;
}

.wp-block-group.linea-tiempo>.hito:nth-child(4) {
  grid-row: 4;
}

.wp-block-group.linea-tiempo>.hito:nth-child(5) {
  grid-row: 5;
}

.wp-block-group.linea-tiempo>.hito:nth-child(6) {
  grid-row: 6;
}

.wp-block-group.linea-tiempo>.hito:nth-child(7) {
  grid-row: 7;
}

.wp-block-group.linea-tiempo>.hito:nth-child(8) {
  grid-row: 8;
}

/* Franja degradada en el lado que mira a la línea */
.wp-block-group.linea-tiempo>.hito:nth-child(odd) {
  border-right-width: 0;
  background:
    linear-gradient(180deg, var(--wp--preset--color--custom-azul), var(--hito-verde)) right / 4px 100% no-repeat,
    #fff;
  background-origin: border-box;
}

.wp-block-group.linea-tiempo>.hito:nth-child(even) {
  border-left-width: 0;
  background:
    linear-gradient(180deg, var(--wp--preset--color--custom-azul), var(--hito-verde)) left / 4px 100% no-repeat,
    #fff;
  background-origin: border-box;
}

/* Círculo exterior (24px): relleno blanco + borde de 1px con degradado azul → verde */
.wp-block-group.linea-tiempo>.hito::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--punto);
  height: var(--punto);
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(180deg, var(--wp--preset--color--custom-azul), var(--hito-verde)) border-box;
  transform: translateY(-50%);
}

.wp-block-group.linea-tiempo>.hito:nth-child(odd)::after {
  left: calc(100% + var(--hito-sep));
}

.wp-block-group.linea-tiempo>.hito:nth-child(even)::after {
  right: calc(100% + var(--hito-sep));
}

/* Círculo interior (relleno): alterna 16px / 20px */
.wp-block-group.linea-tiempo>.hito::before {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 2;
  width: var(--relleno);
  height: var(--relleno);
  border-radius: 999px;
  background: var(--wp--preset--color--custom-azul);
  transform: translateY(-50%);
}

.wp-block-group.linea-tiempo>.hito:nth-child(odd) {
  --relleno: 1rem;
}

/* 16px */
.wp-block-group.linea-tiempo>.hito:nth-child(even) {
  --relleno: 1.25rem;
}

/* 20px */
.wp-block-group.linea-tiempo>.hito:nth-child(odd)::before {
  left: calc(100% + var(--hito-sep) + (var(--punto) - var(--relleno)) / 2);
}

.wp-block-group.linea-tiempo>.hito:nth-child(even)::before {
  right: calc(100% + var(--hito-sep) + (var(--punto) - var(--relleno)) / 2);
}

/* Móvil: una columna, línea a la izquierda */
@media (max-width: 781px) {

  .wp-block-group.linea-tiempo,
  .wp-block-group.is-style-seccion-cabecera>.wp-block-group.linea-tiempo {
    --hito-sep: 1.5rem;
    grid-template-columns: var(--punto) 1fr;
    width: 100% !important;
    column-gap: var(--hito-sep);
  }

  .wp-block-group.linea-tiempo::before {
    left: calc(var(--punto) / 2);
  }

  .wp-block-group.linea-tiempo>.hito:nth-child(odd),
  .wp-block-group.linea-tiempo>.hito:nth-child(even) {
    grid-column: 2;
    grid-row: auto;
    text-align: left;
    border-width: 1px;
    border-left-width: 0;
    background:
      linear-gradient(180deg, var(--wp--preset--color--custom-azul), var(--hito-verde)) left / 4px 100% no-repeat,
      #fff;
    background-origin: border-box;
  }

  .wp-block-group.linea-tiempo>.hito:nth-child(odd)::after,
  .wp-block-group.linea-tiempo>.hito:nth-child(even)::after {
    left: calc(-1 * (var(--hito-sep) + var(--punto)));
    right: auto;
  }

  .wp-block-group.linea-tiempo>.hito:nth-child(odd)::before,
  .wp-block-group.linea-tiempo>.hito:nth-child(even)::before {
    left: calc(-1 * (var(--hito-sep) + var(--punto)) + (var(--punto) - var(--relleno)) / 2);
    right: auto;
  }
}

/* ============================================================
   CITA DEL GERENTE (variante de reseña destacada)
   Va DESPUÉS de las reglas de .is-style-resena-destacada
   ============================================================ */
.wp-block-group.is-style-resena-destacada.cita-gerente,
.wp-block-group.is-style-resena-destacada.cita-gerente.alignfull,
.wp-block-group.is-style-resena-destacada.cita-gerente.alignwide {
  padding: 2.5rem !important;
  border-width: 1px;
  gap: 2.5rem;
}

.cita-gerente .resena-info {
  max-width: 40rem;
  gap: 1.5rem;
}

.cita-gerente .resena-info .wp-block-heading,
.cita-gerente .resena-info>p:first-child {
  font-size: var(--wp--preset--font-size--2-xl, 2rem);
  font-weight: 500;
  line-height: 1.2;
}

.cita-gerente>.wp-block-image {
  margin: 0;
  flex: 0 1 27.5rem;
}

.cita-gerente>.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 440 / 211;
  object-fit: cover;
  border-radius: 1.5rem;
}

@media (max-width: 781px) {
  .wp-block-group.is-style-resena-destacada.cita-gerente {
    padding: 1.5rem !important;
  }

  .cita-gerente>.wp-block-image {
    flex-basis: 100%;
  }
}

/* ============================================================
   CINTA AZUL (beneficios en una línea)
   ============================================================ */
.wp-block-group.cinta-azul {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem !important;

  /* --- FORZAR ANCHO COMPLETO (EDGE-TO-EDGE) --- */
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  /* --------------------------------------------- */

  padding: 2.5rem !important;
  background: linear-gradient(90deg,
      var(--wp--preset--color--custom-azul) 0%,
      #000063 100%) !important;
  color: #fff !important;
  box-sizing: border-box !important;
}

.wp-block-group.cinta-azul>p {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  color: #fff !important;
  white-space: nowrap;
}

.wp-block-group.cinta-azul>p::before {
  margin-right: 0.5rem;
}

@media (max-width: 781px) {
  .wp-block-group.cinta-azul {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem !important;
  }

  .wp-block-group.cinta-azul>p {
    white-space: normal;
  }
}

/* ============================================================
   ACORDEONES (bloque Detalles)
   ============================================================ */
.wp-block-group.acordeones {
  --acordeon-ancho: 50rem;
  /* ≈800px, medido de tu Figma: confírmalo */
  display: flex !important;
  flex-direction: column;
  gap: 1rem !important;
  width: 100% !important;
  max-width: var(--acordeon-ancho) !important;
  margin-inline: auto !important;
}

.acordeones .wp-block-details {
  --acordeon-verde: #0FFCA1;
  margin: 0 !important;
  padding: 1rem 1.5rem !important;
  box-sizing: border-box;
  border: 1px solid var(--wp--preset--color--custom-border);
  border-left-width: 0;
  border-radius: 0.5rem;
  background:
    linear-gradient(180deg, var(--wp--preset--color--custom-azul), var(--acordeon-verde)) left / 4px 100% no-repeat,
    #fff;
  background-origin: border-box;
}

/* Resumen: título a la izquierda, + / − a la derecha */
.acordeones .wp-block-details>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
}

.acordeones .wp-block-details>summary::-webkit-details-marker {
  display: none;
}

.acordeones .wp-block-details>summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}

.acordeones .wp-block-details[open]>summary::after {
  content: "−";
}

/* Sin recuadro negro al hacer clic; anillo azul solo con teclado */
.acordeones .wp-block-details>summary:focus {
  outline: none;
}

.acordeones .wp-block-details>summary:focus-visible {
  outline: 2px solid var(--wp--preset--color--custom-azul);
  outline-offset: 4px;
}

/* Contenido desplegado */
.acordeones .wp-block-details[open]>summary {
  margin-bottom: 0.75rem;
}

.acordeones .wp-block-details> :not(summary) {
  margin: 0 0 0.75rem;
}

.acordeones .wp-block-details> :last-child {
  margin-bottom: 0;
}

/* Lista con check azul */
.acordeones .lista-items {
  --lista-icono-color: var(--wp--preset--color--custom-azul);
}

/* Enlace "Solicitar más detalles": hereda tamaño y peso del párrafo (los controlas desde el panel) */
.acordeones .acordeon-enlace a {
  font-size: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 781px) {
  .acordeones .wp-block-details {
    padding: 1rem;
  }
}

/* ============================================================
   FONDO DE PÁGINA BLANCO
   ============================================================ */
body,
.wp-site-blocks,
.editor-styles-wrapper {
  background-color: var(--wp--preset--color--custom-contraste-principal, #ffffff) !important;
}

/* ============================================================
   PLANES (3 tarjetas de precios)
   ============================================================ */
.wp-block-group.planes {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 2.5rem !important;
  /* 40px */
  width: 100% !important;
  max-width: 70rem !important;
  /* ≈1120px, medido de Figma */
  margin-inline: auto !important;
  padding: 0 !important;
}

.wp-block-group.planes>.plan {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 1rem !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  box-sizing: border-box;
  background-color: #fff;
  border: 2px solid var(--wp--preset--color--custom-azul-40, #9999ff);
  border-radius: 1.5rem;
  text-align: left;
}

.wp-block-group.planes>.plan>* {
  margin: 0 !important;
}

/* Precio: cifra grande + "/mes + IGV" pequeño, en la misma línea base */
.plan .plan-precio {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-block: 0.5rem !important;
}

.plan .plan-precio>* {
  margin: 0 !important;
}

/* Botón a todo el ancho, borde azul, pastilla */
.plan .wp-block-buttons {
  width: 100% !important;
}

.plan .wp-block-buttons>.wp-block-button {
  width: 100% !important;
  flex: 1 1 100% !important;
}

.plan .wp-block-button__link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  background: transparent !important;
  color: var(--wp--preset--color--custom-azul) !important;
  border: 1px solid var(--wp--preset--color--custom-azul) !important;
  border-radius: 999px !important;
  font-weight: 500;
}

/* Lista de checks en azul */
.plan .lista-items {
  --lista-icono-color: var(--wp--preset--color--custom-azul);
  margin-top: 0.5rem;
}

/* ---------- Plan destacado (azul) ---------- */
.wp-block-group.planes>.plan.plan-destacado {
  background-color: var(--wp--preset--color--custom-azul);
  transform: scale(1.03);
  z-index: 1;
}

.plan-destacado,
.plan-destacado .wp-block-heading,
.plan-destacado p {
  color: #fff !important;
}

.plan-destacado .wp-block-button__link {
  background: #fff !important;
  color: var(--wp--preset--color--custom-letra-principal) !important;
  border-color: #fff !important;
}

.plan-destacado .lista-items {
  --lista-icono-color: #fff;
}

/* Etiqueta "POPULAR" sobre el borde superior */
.plan-destacado>p.plan-popular {
  position: absolute !important;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.75rem;
  background: var(--wp--preset--color--custom-amarillo);
  border-radius: 999px;
  color: var(--wp--preset--color--custom-letra-principal) !important;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Ícono de soporte en el botón */
.icono-soporte {
  --icono: url('iconos/headset.svg');
}

@media (max-width: 781px) {
  .wp-block-group.planes {
    grid-template-columns: 1fr;
    gap: 2rem !important;
  }

  .wp-block-group.planes>.plan.plan-destacado {
    transform: none;
  }
}

/* ============================================================
   SOPORTE REMOTO (banner oscuro, texto + foto con degradado)
   ============================================================ */
.wp-block-group.soporte-remoto {
  min-height: 15.9375rem;
  --soporte-vector-opacidad: 100%;
  position: relative;
  isolation: isolate;
  display: flex !important;
  align-items: stretch;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  background-color: #010102;
  border-radius: 2rem;
  overflow: hidden;
  color: #fff;
  box-sizing: border-box !important;
}

/* Vector de líneas, blanco y tenue, detrás del texto */
.wp-block-group.soporte-remoto::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: color-mix(in srgb, #fff var(--soporte-vector-opacidad), transparent);
  -webkit-mask: url('svg/fondo-soporte.svg') no-repeat left center / var(--soporte-vector-ancho, 48.25rem) auto;
  mask: url('svg/fondo-soporte.svg') no-repeat left center / var(--soporte-vector-ancho, 48.25rem) auto;
  pointer-events: none;
}

/* Texto: fija la altura del banner */
.wp-block-group.soporte-remoto> :first-child {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  width: 58%;
  max-width: 28rem !important;
  margin: 0 !important;
  padding: 2.5rem 2.5rem !important;
  box-sizing: border-box;
}

.wp-block-group.soporte-remoto> :first-child>* {
  margin: 0;
}

.wp-block-group.soporte-remoto .wp-block-heading,
.wp-block-group.soporte-remoto p {
  color: #fff !important;
}

/* Foto: pegada a la derecha, tan alta como el texto, fundida con el negro */
.wp-block-group.soporte-remoto>.wp-block-image {
  position: absolute;
  width: 45%;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  margin: 0 !important;
  z-index: 0;
}

.wp-block-group.soporte-remoto>.wp-block-image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 30%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%);
  mask-image: linear-gradient(to right, transparent 0, #000 40%);
}

/* Botón: contorno blanco, pastilla, ícono antes del texto */
.soporte-remoto .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  padding: 0.625rem 1rem !important;
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  font-size: 0.75rem;
  font-weight: 500;
}

.soporte-remoto .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

.icono-externo {
  --icono: url('iconos/external-link.svg');
}

@media (max-width: 781px) {
  .wp-block-group.soporte-remoto {
    flex-direction: column;
    border-radius: 1.5rem;
  }

  .wp-block-group.soporte-remoto> :first-child {
    width: 100%;
    padding: 2rem 1.5rem !important;
  }

  .wp-block-group.soporte-remoto>.wp-block-image {
    position: relative;
    width: 100%;
    height: 14rem;
  }

  .wp-block-group.soporte-remoto>.wp-block-image img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 40%);
  }
}

/* ============================================================
   CONTACTO (tarjeta: info azul + formulario)
   Figma: 1200 de ancho, radio 32, panel azul 375 (5/16), padding 32
   ============================================================ */
.wp-block-group.contacto-card {
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 11fr);
  align-items: stretch;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  background: #fff;
  border: 1px solid var(--wp--preset--color--custom-border);
  border-radius: 2rem;
  overflow: hidden;
  box-sizing: border-box !important;
}

/* ---------- Panel azul ---------- */
.wp-block-group.contacto-card>.contacto-info {
  position: relative;
  isolation: isolate;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 1rem !important;
  margin: 0 !important;
  padding: 2rem !important;
  box-sizing: border-box;
  background: var(--wp--preset--color--custom-azul);
  overflow: hidden;
}

.contacto-info>* {
  margin: 0 !important;
}

.contacto-info .wp-block-heading,
.contacto-info p,
.contacto-info a {
  color: #fff !important;
}

/* Círculos decorativos (90px y 160px, asoman por la esquina inferior derecha) */
.contacto-info::before,
.contacto-info::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
}

.contacto-info::before {
  width: 5.625rem;
  height: 5.625rem;
  right: 3.9375rem;
  bottom: 3.9375rem;
  background: color-mix(in srgb, #fff 20%, transparent);
}

.contacto-info::after {
  width: 10rem;
  height: 10rem;
  right: -3.0625rem;
  bottom: -3.0625rem;
  background: color-mix(in srgb, #fff 15%, transparent);
}

/* Cada dato: círculo con ícono | 3 líneas de texto */
.contacto-info .contacto-dato {
  position: relative;
  display: grid !important;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 0.75rem;
  row-gap: 0;
  align-items: start;
  margin-top: 0.5rem !important;
}

.contacto-dato>* {
  grid-column: 2;
  margin: 0 !important;
}

.contacto-dato> :first-child {
  text-transform: uppercase;
}

.contacto-dato> :nth-child(2) {
  font-weight: 600;
}

/* Halo del ícono */
.contacto-dato::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -0.375rem;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 15%, transparent);
}

/* Ícono blanco centrado en el halo */
.contacto-dato::after {
  content: "";
  position: absolute;
  left: 0.625rem;
  top: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #fff;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}

.icono-correo {
  --icono: url('iconos/mail.svg');
}

.icono-ubicacion {
  --icono: url('iconos/map-pin.svg');
}

/* Redes: abajo del panel, en blanco */
.contacto-info .contacto-redes {
  margin-top: auto !important;
  padding-top: 1.5rem;
  justify-content: flex-start !important;
}

.contacto-info .contacto-redes .wp-social-link {
  background: transparent !important;
  color: #fff !important;
}

.contacto-info .contacto-redes .wp-social-link a {
  color: #fff !important;
}

/* ---------- Panel del formulario ---------- */
.wp-block-group.contacto-card>.contacto-form {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 1.25rem !important;
  margin: 0 !important;
  padding: 2rem !important;
  box-sizing: border-box;
  background: #fff;
}

.contacto-form>* {
  margin: 0 !important;
}

.contacto-form>p:last-child {
  text-align: center;
  color: var(--wp--preset--color--custom-letra-terciaria);
}

/* Contact Form 7 */
.contacto-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.contacto-form .wpcf7-form p {
  margin: 0;
}

.contacto-form .wpcf7-form br {
  display: none;
}

.contacto-form .wpcf7-form label,
.contacto-form .campo-etiqueta {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}

.contacto-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.375rem;
}

.contacto-form .wpcf7 input[type="text"],
.contacto-form .wpcf7 input[type="email"],
.contacto-form .wpcf7 input[type="tel"],
.contacto-form .wpcf7 select,
.contacto-form .wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.875rem;
  background: #fff;
  border: 1px solid var(--wp--preset--color--custom-border);
  border-radius: 0.5rem;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
}

.contacto-form .wpcf7 input[type="text"],
.contacto-form .wpcf7 input[type="email"],
.contacto-form .wpcf7 input[type="tel"],
.contacto-form .wpcf7 select {
  height: 2.5rem;
}

.contacto-form .wpcf7 textarea {
  min-height: 7.5rem;
  resize: vertical;
}

/* Sin recuadro negro; borde azul al enfocar */
.contacto-form .wpcf7 input:focus,
.contacto-form .wpcf7 select:focus,
.contacto-form .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--custom-azul);
  box-shadow: 0 0 0 1px var(--wp--preset--color--custom-azul);
}

/* Teléfono: prefijo + número en una fila */
.contacto-form .campo-telefono-fila {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.contacto-form .campo-telefono-fila .wpcf7-form-control-wrap {
  margin-top: 0;
}

.contacto-form .campo-telefono-fila .wpcf7-form-control-wrap:first-child {
  flex: 0 0 6rem;
}

.contacto-form .campo-telefono-fila .wpcf7-form-control-wrap:last-child {
  flex: 1 1 auto;
}

/* Botón amarillo a todo el ancho */
.contacto-form .wpcf7 input[type="submit"] {
  width: 100%;
  height: 2.5rem;
  margin-top: 0.5rem;
  padding: 0 1rem;
  background: var(--wp--preset--color--custom-amarillo);
  color: var(--wp--preset--color--custom-letra-principal);
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  /* Montserrat, como el resto del sitio */
  font-size: 0.75rem;
  /* 12px */
  font-weight: 500;
  /* medium */
  line-height: normal;
  /* "Auto" en Figma */
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.contacto-form .wpcf7 input[type="submit"]:hover {
  opacity: 0.9;
}

.contacto-form .wpcf7 input[type="submit"]:focus-visible {
  outline: 2px solid var(--wp--preset--color--custom-azul);
  outline-offset: 3px;
}

/* Mensajes de validación y de envío */
.contacto-form .wpcf7-not-valid-tip {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--wp--preset--color--custom-error);
}

.contacto-form .wpcf7-response-output {
  margin: 0.75rem 0 0 !important;
  padding: 0.625rem 0.875rem !important;
  border-radius: 0.5rem;
  font-size: 0.75rem;
}

.contacto-form .wpcf7-spinner {
  position: absolute;
}

@media (max-width: 781px) {
  .wp-block-group.contacto-card {
    grid-template-columns: 1fr;
    border-radius: 1.5rem;
  }

  .wp-block-group.contacto-card>.contacto-info,
  .wp-block-group.contacto-card>.contacto-form {
    padding: 1.5rem !important;
  }

  .contacto-info .contacto-redes {
    margin-top: 1.5rem !important;
  }
}

/* ---------- Correcciones contacto ---------- */

/* 1. Todo alineado a la izquierda (la sección cabecera lo centra) */
.wp-block-group.contacto-card,
.wp-block-group.contacto-card .contacto-info,
.wp-block-group.contacto-card .contacto-form,
.contacto-card .wp-block-heading,
.contacto-card .contacto-info p {
  text-align: left !important;
}

.contacto-form>p:last-child {
  text-align: center !important;
}

/* 2. Neutralizar el ancho de contenido de .is-layout-constrained */
.wp-block-group.contacto-card .contacto-info>*,
.wp-block-group.contacto-card .contacto-form>* {
  max-width: none !important;
  margin-inline: 0 !important;
}

.contacto-form .wp-block-shortcode,
.contacto-form .wpcf7,
.contacto-form .wpcf7-form {
  width: 100% !important;
  max-width: none !important;
}

/* 3. Teléfono: prefijo + número en una sola fila (aunque CF7 meta un <p>) */
.contacto-form .campo-telefono-fila,
.contacto-form .campo-telefono-fila>p {
  display: flex !important;
  gap: 0.5rem;
  margin: 0;
}

.contacto-form .campo-telefono-fila {
  margin-top: 0.375rem;
}

.contacto-form .campo-telefono-fila>p {
  flex: 1 1 100%;
}

.contacto-form .wpcf7-form-control-wrap[data-name="prefijo"] {
  flex: 0 0 6rem;
  margin-top: 0;
}

.contacto-form .wpcf7-form-control-wrap[data-name="telefono"] {
  flex: 1 1 auto;
  margin-top: 0;
}

/* 4. Panel azul con el degradado de Figma (0000FF → 000099, vertical) */
.wp-block-group.contacto-card>.contacto-info {
  background: linear-gradient(180deg,
      var(--wp--preset--color--custom-azul) 0%,
      var(--wp--preset--color--custom-azul-oscuro, #000099) 100%) !important;
}

/* Redes: al pie del panel azul, iconos de 1rem */
.contacto-info>.contacto-redes {
  margin-top: auto !important;
  padding-top: 1.5rem;
  justify-content: flex-start !important;
}


/* ---------- Iconos sociales: 1rem en todo el sitio ---------- */
:root {
  --icono-red: 1rem;
}

/* cambia aquí el tamaño para todos */

.wp-block-social-links {
  font-size: var(--icono-red) !important;
  gap: 1rem !important;
}

.wp-block-social-links .wp-social-link {
  width: auto !important;
  height: auto !important;
}

.wp-block-social-links .wp-social-link a,
.wp-block-social-links .wp-block-social-link-anchor {
  padding: 0 !important;
}

.wp-block-social-links .wp-social-link svg {
  width: var(--icono-red) !important;
  height: var(--icono-red) !important;
}

/* Solo en el panel azul: blanco, sin fondo y empujados al pie */
.contacto-info .wp-block-social-links {
  justify-content: flex-start !important;
}

.contacto-info .wp-block-social-links .wp-social-link {
  background: transparent !important;
}

.contacto-info .wp-block-social-links .wp-social-link a,
.contacto-info .wp-block-social-links .wp-block-social-link-anchor {
  color: #fff !important;
}

.contacto-info .wp-block-social-links .wp-social-link svg {
  fill: #fff !important;
}

.contacto-info> :has(.wp-block-social-links),
.contacto-info>.wp-block-social-links {
  margin-top: auto !important;
  padding-top: 1.5rem;
}


/* ============================================================
   HERO DEMO (bloque Columnas: texto + widget de Calendly)
   Figma: widget visible ≈ 640 px, dos paneles
   ============================================================ */
.wp-block-columns.hero-demo-columnas {
  align-items: center;
  gap: 3.5rem;
  flex-wrap: nowrap !important;
}

.wp-block-columns.hero-demo-columnas>.wp-block-column {
  flex: 1 1 0 !important;
  /* mismo ancho, gane o no el que ponga WordPress */
  min-width: 0;
}

/* ============================================================
   CALENDLY: Escalado por transform (reemplazo de zoom)
   ============================================================ */

.wp-block-columns.hero-demo-columnas>.wp-block-column.calendly-columna {
  --calendly-ancho: 1000px;
  /* no tocar: mantiene los dos paneles */
  --calendly-alto: 700px;
  --calendly-escala: 0.65;
  /* sube o baja el tamaño */
  --recorte-x: 20px;
  /* margen de Calendly que se recorta a izquierda y derecha */
  --recorte-y: 20px;
  /* ... y arriba y abajo */
  position: relative;
  overflow: hidden;
  align-self: center;
  flex: 0 0 calc((var(--calendly-ancho) - 2 * var(--recorte-x)) * var(--calendly-escala)) !important;
  width: calc((var(--calendly-ancho) - 2 * var(--recorte-x)) * var(--calendly-escala));
  height: calc((var(--calendly-alto) - 2 * var(--recorte-y)) * var(--calendly-escala));
  min-width: 0;
}

.hero-demo-columnas .calendly-columna .calendly-inline-widget {
  position: absolute !important;
  top: 0;
  left: 0;
  width: var(--calendly-ancho) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--calendly-alto) !important;
  min-height: 0 !important;
  margin: 0;
  transform-origin: top left;
  transform:
    translate(calc(-1 * var(--recorte-x) * var(--calendly-escala)),
      calc(-1 * var(--recorte-y) * var(--calendly-escala))) scale(var(--calendly-escala));
}

.hero-demo-columnas .calendly-columna .calendly-inline-widget iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

@media (max-width: 781px) {
  .wp-block-columns.hero-demo-columnas>.wp-block-column.calendly-columna {
    flex: 1 1 100% !important;
    width: 100%;
    height: auto;
    overflow: visible;
    position: static;
  }

  .hero-demo-columnas .calendly-columna .calendly-inline-widget {
    position: static !important;
    transform: none;
    width: 100% !important;
    min-width: 320px !important;
    height: 700px !important;
  }
}

/* ============================================================
   Prueba social: avatares + frase
   ============================================================ */
.hero-demo-columnas .prueba-social {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center !important;
  gap: 0.75rem !important;
  margin: 0 !important;
}

.hero-demo-columnas .prueba-social>p {
  margin: 0 !important;
}

.hero-demo-columnas .prueba-social .avatares {
  --avatar: 40px;
  /* incluye el borde blanco (box-sizing: border-box) */
  --avatar-borde: 2px;
  gap: 0 !important;
  margin: 0 !important;
}

.hero-demo-columnas .prueba-social .avatares>* {
  margin: 0 0 0 -12px !important;
  /* solape ≈ 30% */
  flex-shrink: 0;
}

.hero-demo-columnas .prueba-social .avatares>*:first-child {
  margin-left: 0 !important;
}

/* Si usas fotos en vez de letras */
.hero-demo-columnas .prueba-social .avatares img {
  width: 40px !important;
  height: 40px !important;
  border: 2px solid #fff;
  border-radius: 999px;
  box-sizing: border-box;
  object-fit: cover;
}

/* ============================================================
   LÍNEAS DE FONDO a todo el ancho (Inicio, Nosotros, Contacto)
   ============================================================ */
body {
  overflow-x: hidden;
  /* Obligatorio para evitar scroll en Windows */
}

.wp-block-group.fondo-lineas {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  /* Destruye cualquier tijera de WordPress */
}

.wp-block-group.fondo-lineas::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;

  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  top: var(--lineas-top, 0);
  bottom: var(--lineas-bottom, auto);
  aspect-ratio: var(--lineas-ratio, auto);

  background-image: var(--lineas-svg);
  background-repeat: no-repeat;

  /* Permite usar "auto" en la altura para que NUNCA se aplaste o deforme */
  background-size: var(--vector-ancho, 100vw) var(--vector-alto, auto);
  background-position: var(--vector-x, center) top;
}

/* Las secciones internas no taparán el vector, EXCEPTO el banner de quiénes somos */
.wp-block-group.fondo-lineas>.wp-block-group:not(.banner-quienes) {
  background: transparent !important;
}

/* --- VARIABLES POR PÁGINA --- */

.fondo-lineas-inicio {
  --lineas-svg: url('svg/fondo-hero.svg');

  /* Medidas extraídas exactamente de Figma */
  --lineas-ratio: 1581 / 564;
  --lineas-top: 530px;
  --lineas-bottom: auto;

  /* 1581px equivale aprox a 110vw (110% de la pantalla) */
  --vector-ancho: 110vw;
  /* Mantiene la curvatura perfecta de Figma sin achatarse */
  --vector-alto: auto;

  /* -150px de Left equivale aprox a -10vw. 
     Con 110vw de ancho total y -10vw de inicio, el lado derecho será (110 - 10) = 100vw.
     ¡Tocará milimétricamente el borde derecho de tu monitor sin huecos! */
  --vector-x: -10vw;
}

.fondo-lineas-nosotros {
  --lineas-svg: url('svg/fondo-nosotros.svg');
  --lineas-top: 136px;
  --lineas-ratio: auto;
  --lineas-bottom: 0;

  --vector-ancho: 140vw;
  --vector-alto: 100%;
  /* Estira el gráfico para cubrir toda la trayectoria */
  --vector-x: -20vw;
  /* Ajusta a gusto */
}



.fondo-lineas-contacto {
  --lineas-svg: url('svg/fondo-contacto.svg');
  --lineas-ratio: 1593 / 582.45;
  --lineas-top: 189px;

  --vector-ancho: 100vw;
  --vector-x: center;
}

@media (max-width: 781px) {
  .wp-block-group.fondo-lineas::before {
    --vector-ancho: 200vw;
    /* En celular el gráfico debe ser el doble de ancho */
    --vector-x: center;
    top: 8rem;
  }
}

/* ============================================================
   AJUSTE ESPECÍFICO PARA CONTACTO (Fondo Vector Lateral)
   ============================================================ */
.wp-block-group.fondo-vector-lateral.fondo-vector-lateral-contacto::before {
  /* 1. Bajamos la opacidad/intensidad para que sea sutil y elegante (como las demás líneas) */
  background-color: color-mix(in srgb, var(--wp--preset--color--custom-azul, #0000FF) 4%, transparent) !important;

  /* 2. Aumentamos la altura del vector para que cubra más espacio hacia abajo y no se corte bruscamente */
  --vector-alto: 2200px !important;

  /* 3. Ajustamos la posición vertical y horizontal para que fluya armónicamente tras las preguntas frecuentes */
  --vector-y: 650px !important;
  --vector-x: 240px !important;
}

/* Columna de imagen a la proporción del archivo (1916 × 916) */
.wp-block-column.imagen-natural {
  display: block !important;
  align-self: center !important;
}

.wp-block-column.imagen-natural .wp-block-image,
.wp-block-column.imagen-natural .wp-block-post-featured-image {
  position: relative !important;
  display: block !important;
  contain: none !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--imagen-ratio, 1916 / 916) !important;
  margin: 0 !important;
}

.wp-block-column.imagen-natural .wp-block-image img,
.wp-block-column.imagen-natural .wp-block-post-featured-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border-radius: 1.5rem !important;
}

.wp-block-column.imagen-natural .wp-block-image figcaption {
  display: none;
}

/* Hero de Soporte: 650 × 224 */
.wp-block-column.imagen-natural.imagen-soporte {
  --imagen-ratio: 2360 / 766;
}

.wp-block-column.imagen-natural.imagen-soporte .wp-block-image img,
.wp-block-column.imagen-natural.imagen-soporte .wp-block-post-featured-image img {
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* Línea de tiempo: filas de igual altura para que la línea empiece y acabe en el centro de los círculos.
   --hitos = número de hitos. Se descuenta el row-gap en el cálculo. */
.wp-block-group.linea-tiempo,
.wp-block-group.is-style-seccion-cabecera>.wp-block-group.linea-tiempo {
  --hitos: 6;
  grid-auto-rows: 1fr;
}

.wp-block-group.linea-tiempo>.hito {
  align-self: center;
}

.wp-block-group.linea-tiempo::before {
  top: calc((100% - (var(--hitos) - 1) * var(--hito-hueco)) / (var(--hitos) * 2));
  bottom: calc((100% - (var(--hitos) - 1) * var(--hito-hueco)) / (var(--hitos) * 2));
}