/*
Theme Name: Hello Elementor Child
Template: hello-elementor
*/

/* =========================================================
   1. LOGIN PAGE LAYOUT (PAGE ID 11)
   ========================================================= */

/* Fondo beige a toda la ventana en esta página */
.page-id-11 body {
  background: #e8dfd0 !important;
}

/* Contenedor general del tema: sin márgenes, sin max-width */
.page-id-11 #page,
.page-id-11 .site,
.page-id-11 .site-content,
.page-id-11 .content-area,
.page-id-11 .site-main,
.page-id-11 .entry-content,
.page-id-11 #content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Ocultar header y título solo en la página de login */
.page-id-11 .site-header,
.page-id-11 header.entry-header,
.page-id-11 .entry-title,
.page-id-11 .page-title,
.page-id-11 h1.entry-title {
  display: none !important;
}

/* Wrapper principal (bloque beige con logos + tarjeta roja) */
.page-id-11 .login-wrapper {
  display: flex;
  flex-direction: column;
  max-width: none !important;
  width: 100% !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: #e8dfd0;
}

/* Asegurar que Gutenberg no lo meta en un contenedor limitado */
.page-id-11 .entry-content > .login-wrapper {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   2. TARJETA ROJA (CONTENEDOR DEL FORMULARIO)
   ========================================================= */

.login-card {
  max-width: 520px;
  margin-inline: auto;
  padding: 48px 64px;
  background: #ff1700;
  border-radius: 40px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

/* Título "Accede a tu cuenta" */
.login-card h1,
.login-card h2,
.login-card .login-title {
  margin: 0 0 28px 0;
  text-align: center;
  color: #ffffff;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 32px;
  font-weight: 700;
}

/* Párrafos internos del form (cada fila: label + input) */
.login-card p {
  margin: 0 0 18px 0;
}

/* Asegurar que el formulario use todo el ancho de la tarjeta */
.login-card form,
.login-card #loginform {
  max-width: none !important;
  width: 100% !important;
  margin-bottom: 0;
}

/* Cada fila del formulario usa el ancho completo */
.login-card form p {
  width: 100%;
}

/* =========================================================
   3. LABELS / TEXTOS DEL FORMULARIO
   ========================================================= */

.login-card label {
  display: block;
  margin-bottom: 6px;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
}

/* =========================================================
   4. INPUTS DEL FORMULARIO (wp_login_form)
   ========================================================= */

.login-card input[type="text"],
.login-card input[type="password"],
.login-card input.input {
  display: block;
  width: 100%;
  margin: 4px 0 16px 0;
  padding: 12px 22px;
  background: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
}

/* Placeholders */
.login-card input::placeholder {
  color: #888888;
}

/* =========================================================
   5. BOTÓN LOGIN
   ========================================================= */

.login-card .login-submit {
  margin-top: 16px;
  text-align: center;
}

/* Estilo del botón real (button-primary) */
.login-card .login-submit .button,
.login-card .login-submit .button-primary,
.login-card input[type="submit"] {
  display: inline-block;
  padding: 12px 46px;
  background: #5d88b5;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
}

/* Forzar visibilidad en caso de estilos del tema */
.login-card .login-submit .button-primary {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Efecto hover suave */
.login-card .login-submit .button-primary:hover,
.login-card input[type="submit"]:hover {
  transform: translateY(1px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

/* =========================================================
   6. MENSAJES Y ELEMENTOS EXTRA
   ========================================================= */

/* Mensaje de error dentro de la tarjeta */
.login-card .login-error {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
}

/* Ocultar "Recuérdame" si no lo quieres */
.login-card .login-remember {
  display: none;
}

/* =========================================================
   7. COMPATIBILIDAD CON INPUTS ANTIGUOS (.login-input)
   ========================================================= */

.login-card .login-input {
  display: block;
  width: 100%;
  margin: 8px 0 24px 0;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  outline: none;
}

/* =========================================================
   8. HEADER ROJO GKL
   ========================================================= */

.gkl-header {
  width: 100%;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 14px 48px !important;
  background: #ff1700 !important;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Texto "SECCIÓN: BIENVENIDA" */
.gkl-header-left {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 14px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Contenedor del logo GKL a la derecha */
.gkl-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 700;
  font-size: 24px;
}

/* Texto GKL */
.gkl-header-right .gkl-text {
  font-weight: 700;
}

/* La imagen del logo redondo se ajusta sola */
.gkl-header-right img {
  height: 40px;
  width: auto;
}

/* =========================================================
   9. FORZAR HEADER A TODO EL ANCHO
   ========================================================= */

/* Romper contenedores del tema para el header */
.site-header,
.gkl-header {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  position: relative;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}

/* EVITAR QUE EL THEME ENVUELVA EL HEADER EN UN CONTENEDOR */
.site {
  max-width: none !important;
  width: 100% !important;
}

/* FORZAR QUE NINGÚN PADRE LO RECORTE */
header,
#site-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* QUITAR MÁRGENES TOP DE LA PÁGINA PARA QUE SE PEGUE A LA PARTE SUPERIOR */
.site-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===========================
   FOOTER GKL (full width)
   =========================== */

.site-footer,
.gkl-footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}

/* Contenido del footer */
.gkl-footer {
  background: #ffffff;
  padding: 10px 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
  box-sizing: border-box;
  font-size: 12px;
}

/* Enlaces del footer */
.gkl-footer-link {
  color: #6f7a86;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.gkl-footer-link:hover {
  color: #333333;
}

/* Responsive footer */
@media (max-width: 600px) {
  .gkl-footer {
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 16px;
  }
}

/* =========================================================
   10. PÁGINA DE BIENVENIDA – WRAPPER GENERAL
   ========================================================= */

/* Contenedor general beige */
.welcome-wrapper {
  background: #e8dfd0;
  padding: 40px 0 0 0;
  margin: 0 !important;
}

/* Elimina el block-gap de Gutenberg entre bloques dentro de la bienvenida */
.entry-content > .welcome-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.welcome-wrapper > * + * {
  margin-top: 0 !important;
}

/* Título central */
.welcome-title {
  text-align: center;
  margin: 0 0 32px 0;
}

.welcome-title h2:first-child {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 32px;
  font-weight: 400;
  color: #d6281f;
  margin: 0;
}

.welcome-title h2:last-child {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 32px;
  font-style: italic;
  font-weight: 700;
  color: #d6281f;
  margin: 0;
}

/* Sección azul inmediatamente pegada al bloque 1 */
.welcome-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: #002552;
  color: #ffffff;
  padding: 48px 64px;
}

/* Por si el tema aplica block-gap por tipo de bloque */
.entry-content > .welcome-section,
.entry-content > .wp-block-group.welcome-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Columnas internas */
.welcome-columns {
  max-width: 960px;
  margin: 0 auto;
}

.welcome-columns > .wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Imagen de la columna izquierda */
.welcome-columns .wp-block-column:first-child img {
  max-width: 260px;
  height: auto;
  margin: 0 auto;
}

/* Título de la columna derecha */
.welcome-section h2 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 20px 0;
}

/* Texto descriptivo */
.welcome-section p {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 0;
}

/* Botón INICIAR DIAGNÓSTICO */
.welcome-section .wp-block-buttons {
  margin-top: 24px;
  justify-content: center;
}

/* Botón general (usado también en login) */
.welcome-btn.wp-block-button__link {
  background: #5d88b5;
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 36px;
  font-weight: 600;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}

/* Hover */
.welcome-btn.wp-block-button__link:hover {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

/* Responsive sencillo */
@media (max-width: 768px) {
  .welcome-section {
    padding: 32px 24px;
  }

  .welcome-columns {
    flex-direction: column;
  }
}

/* =========================================================
   11. UTILIDADES DE ESPACIADO (.no-gap, .no-block-gap)
   ========================================================= */

.no-block-gap {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.no-block-gap > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Forzar también a nivel de entry-content */
.entry-content > .no-block-gap {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.entry-content > .no-block-gap + * {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Bloques sin espacios (.no-gap) */
.no-gap {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  gap: 0 !important;
  --wp--style--block-gap: 0 !important;
}

.no-gap > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Si un bloque .no-gap va seguido de otro, pegarlos totalmente */
.no-gap + .no-gap {
  margin-top: 0 !important;
}

/* WordPress inserta margen entre bloques a nivel .entry-content */
.entry-content > .no-gap {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Y también al bloque inmediatamente después */
.entry-content > .no-gap + * {
  margin-top: 0 !important;
}

/* =========================================================
   12. BLOQUE AZUL – AJUSTES DE ALINEACIÓN
   ========================================================= */

/* Centrar imagen izquierda en sección principal */
.welcome-section-main .wp-block-column:first-child img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Justificar párrafos */
.welcome-section-main p {
  text-align: justify;
}

/* Mantener título centrado */
.welcome-section-main h2 {
  text-align: center !important;
}

/* Centrar el grupo blanco dentro de la columna izquierda */
.welcome-section-main .wp-block-column:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome-icon-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  padding: 24px;
  border-radius: 20px;
}

/* Botón INICIAR DIAGNÓSTICO con estilo igual al del login */
.welcome-btn.wp-block-button__link {
  background: #5d88b5 !important;
  color: #ffffff !important;
  border-radius: 999px;
  padding: 12px 46px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
}

/* Hover igual al login */
.welcome-btn.wp-block-button__link:hover {
  transform: translateY(1px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

/* =========================================================
   13. SECCIÓN ¿QUÉ MEDIMOS?
   ========================================================= */

.welcome-measures {
  background: #f7f7f7; /* fondo casi blanco, muy suave */
  padding: 60px 0 40px;
  margin: 0 !important;
}

/* Título ¿Qué medimos? */
.welcome-measures-top h2 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 42px;
  font-weight: 400;
  color: #002552;
  text-align: center;
  margin: 0 0 40px 0;
}

/* Contenedor de los 3 ítems */
.welcome-measures-icons {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 80px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Cada Stack que contiene un icono */
.welcome-measures-icons > .wp-block-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

/* El grupo interno (imagen + texto) */
.welcome-measures-icons .wp-block-group {
  text-align: center;
  max-width: 260px;
}

/* Imagen del icono */
.welcome-measures-icons img {
  display: block;
  margin: 0 auto 20px;
  max-height: 120px;
  width: auto;
}

/* Texto bajo cada icono */
.welcome-measures-icons p {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.4;
  color: #002552;
  margin: 0;
}

/* =========================================================
   14. SECCIÓN "4 COSAS QUE SABER..." – AJUSTE FINO
   ========================================================= */

.welcome-before-start {
  background: #b2cedb; /* azul claro */
  color: #002552;
  padding: 40px 60px;
  margin: 0 !important;
}

/* quitar márgenes extra entre bloques raíz */
.entry-content > .welcome-before-start {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* columnas internas: ancho y alineación */
.welcome-before-start .wp-block-columns {
  max-width: 1100px;
  margin: 0 auto;
  gap: 60px;
  align-items: stretch;
}

/* Columna izquierda (texto) */
.welcome-before-start .wp-block-column:first-child h3 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 34px;
  font-weight: 400;
  margin: 0 0 24px 0;
  color: #002552;
}

.welcome-before-start .wp-block-column:first-child p {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 14px 0;
}

/* Columna derecha (bloque azul oscuro) */
.welcome-before-start .wp-block-column:last-child {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.welcome-question-box {
  background: #002552;
  padding: 40px;
  min-width: 360px;
  min-height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome-question-box img {
  max-width: 70%;
  height: auto;
}

/* Responsive sección "4 cosas" */
@media (max-width: 768px) {
  .welcome-before-start {
    padding: 32px 24px;
  }

  .welcome-before-start .wp-block-columns {
    gap: 24px;
  }

  .welcome-question-box {
    min-width: auto;
    width: 100%;
  }
}

/* =========================================================
   15. SECCIÓN ROJA – SOBRE PRO MUJER / SOBRE GKL
   ========================================================= */

.welcome-about {
  background: #ff1700; /* rojo Pro Mujer */
  color: #ffffff;
  padding: 80px 80px 70px;
  margin: 0 !important;
}

/* quitar márgenes entre bloques raíz */
.entry-content > .welcome-about {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.welcome-about-columns {
  max-width: 1100px;
  margin: 0 auto;
  gap: 80px;
}

/* columnas: texto en serif, cómodo para leer */
.welcome-about-columns .wp-block-column {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.7;
}

/* títulos "Sobre Pro Mujer" / "Sobre GKL" */
.welcome-about h3 {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 24px 0;
}

/* párrafos normales */
.welcome-about p {
  margin: 0 0 10px 0;
}

/* subtítulos "OFICINAS" y "CONTACTO" */
.welcome-about-subtitle {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 40px;
  margin-bottom: 8px;
}

/* datos de contacto */
.welcome-about a,
.welcome-about strong {
  color: #ffffff;
}

/* Responsive sección roja */
@media (max-width: 768px) {
  .welcome-about {
    padding: 48px 24px 40px;
  }

  .welcome-about-columns {
    flex-direction: column;
    gap: 40px;
  }
}

/* =========================================================
   16. SECCIÓN FINAL – HASHTAG
   ========================================================= */

.welcome-hashtag {
  background: #f3efec; /* beige muy claro del diseño */
  padding: 80px 0;
  text-align: center;
  margin: 0 !important;
}

.welcome-hashtag h2 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 38px;
  font-style: italic;
  font-weight: 700;
  color: #ff1700;
  margin: 0;
  letter-spacing: 0.5px;
}

/* =========================================================
   17. PÁGINA 33 – AJUSTES ESPECÍFICOS
   ========================================================= */

/* Forzar que main-group sea realmente FULL WIDTH (por ID de post) */
.postid-33 .main-group {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}

/* Eliminar paddings del contenedor del tema (postid-33) */
.postid-33 .entry-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Evitar block-gap en postid-33 */
.postid-33 .entry-content > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* PÁGINA DE BIENVENIDA (ID 33) A FULL WIDTH (por page-id) */
.page-id-33 #page,
.page-id-33 .site,
.page-id-33 .site-content,
.page-id-33 .content-area,
.page-id-33 .site-main,
.page-id-33 .entry-content,
.page-id-33 #content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Forzar bloques raíz de Gutenberg a ocupar full width en la página 33 */
.page-id-33 .entry-content > * {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ocultar el título de la página con ID 33 */
.page-id-33 h1.entry-title,
.page-id-33 .entry-title {
  display: none !important;
}
/* ============================================
   PAGE 89 – FULL WIDTH + OCULTAR TÍTULO
   ============================================ */

/* 1) Ocultar título de la página */
body.page-id-89 h1.entry-title,
body.page-id-89 .entry-title {
  display: none !important;
}

/* 2) Romper el límite global de ancho del tema */
body.page-id-89 {
  --wp--style--global--content-size: 100vw !important;
  --wp--style--global--wide-size: 100vw !important;
}

/* 3) Quitar paddings/márgenes del contenedor de contenido */
body.page-id-89 .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  --wp--style--block-gap: 0 !important;
}

/* 4) Hacer full width el grupo raíz "thank-you-page-main" */
body.page-id-89 .entry-content > .wp-block-group.thank-you-page-main {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}


.page-id-107 h1.entry-title {
  display: none !important;
}