/* ==========================================================================
   DI Mejoras — correcciones visuales del sitio de Desarrollo Infantil
   Regla de oro: respetar la estética de Lucía (paleta verde agua + Inter).
   Solo se corrigen inconsistencias y bugs. Cada bloque dice qué arregla.
   ========================================================================== */

:root {
  --di-teal: #30C7B5;       /* encabezado (su color) */
  --di-teal-deep: #00AC97;  /* pie de página (su color) */
  --di-teal-ink: #00897A;   /* hover / estados */
  --di-ink: #14261C;        /* títulos (su color) */
  --di-text: #4F5655;       /* texto (su color) */
}

/* 1) Encabezado en celular: salía azul marino (#272C6C), fuera de marca.
      Ahora usa el mismo verde agua que en la compu. No toca el encabezado
      transparente del inicio ni de "Quién es Ana Lucía". */
@media (max-width: 921px) {
  body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .ast-primary-header-bar,
  body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .main-header-bar {
    background-color: var(--di-teal) !important;
  }
}

/* 2) Menú sobre el verde agua: el gris claro casi no se leía (contraste 2,6:1).
      Pasa a su color de títulos (contraste 7:1). */
body:not(.ast-theme-transparent-header) .ast-primary-header-bar .main-header-menu > .menu-item > .menu-link {
  color: var(--di-ink) !important;
}
body:not(.ast-theme-transparent-header) .ast-primary-header-bar .main-header-menu > .menu-item > .menu-link:hover,
body:not(.ast-theme-transparent-header) .ast-primary-header-bar .main-header-menu > .current-menu-item > .menu-link {
  color: var(--di-ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* 3) Botones de compra, cuenta y formularios: estaban en celeste con texto negro
      (otro tono, no es su verde). Se unifican en su verde de marca. */
.woocommerce a.button:not(.show-password-input),
.woocommerce button.button:not(.show-password-input),
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button:not(.show-password-input),
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.wc-block-components-button:not(.is-link),
.wpforms-submit,
.wpcf7-submit {
  background-color: var(--di-teal-deep) !important;
  border-color: var(--di-teal-deep) !important;
  color: #fff !important;
  transition: background-color .2s ease, transform .2s ease;
}
.woocommerce a.button:not(.show-password-input):hover,
.woocommerce button.button:not(.show-password-input):hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.wc-block-components-button:not(.is-link):hover,
.wpforms-submit:hover,
.wpcf7-submit:hover {
  background-color: var(--di-teal-ink) !important;
  border-color: var(--di-teal-ink) !important;
  transform: translateY(-1px);
}
/* Mientras el captcha no esté resuelto el botón queda deshabilitado: que se note. */
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] {
  opacity: .55 !important;
  transform: none !important;
}

/* 4) "Mostrar contraseña": el tema lo pintaba como una pastilla celeste VACÍA
      debajo del campo. Ahora es un ojito dentro del campo, como en cualquier app. */
.woocommerce form .password-input {
  position: relative;
  display: block;
}
.woocommerce form .password-input input[type="password"],
.woocommerce form .password-input input[type="text"] {
  padding-right: 3em !important;
}
.woocommerce form .show-password-input {
  position: absolute !important;
  right: .5em;
  top: 50%;
  transform: translateY(-50%);
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 0 !important;
}
.woocommerce form .show-password-input::before { display: none !important; }
.woocommerce form .show-password-input::after {
  content: "" !important;
  display: block;
  width: 22px;
  height: 22px;
  margin: auto;
  background-color: var(--di-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce form .show-password-input.display-password::after {
  background-color: var(--di-teal-ink);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 19c-6.4 0-10-7-10-7a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c6.4 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 19c-6.4 0-10-7-10-7a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c6.4 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* 5) Selector ARS/USD: en celular flotaba arriba a la derecha y tapaba títulos
      e imágenes de producto. Queda en su borde derecho (así está diseñado,
      asomándose), pero abajo y un poco más chico. */
@media (max-width: 767px) {
  nav.woocs_auto_switcher {
    top: auto !important;
    bottom: 88px !important;
    transform: scale(.85);
    transform-origin: right bottom;
  }
}

/* 6) Testimonios: el ícono de persona era naranja, el único naranja del sitio.
      Pasa a su verde agua. */
.elementor-widget-testimonial img[src*="persona.png"] {
  filter: hue-rotate(150deg) saturate(.9) brightness(.98);
}

/* 7) Páginas de curso: mostraban "3 comentarios / Por Desarrollo-Infantil / 20/07/2023",
      que hace ver el curso viejo. Se oculta esa línea. */
.single-sfwd-courses .entry-meta,
.single-sfwd-lessons .entry-meta,
.single-sfwd-topic .entry-meta {
  display: none !important;
}

/* 8) Portada en celular: el título blanco sobre la foto clara se perdía un poco. */
@media (max-width: 767px) {
  .home .elementor-top-section:first-of-type .elementor-heading-title {
    text-shadow: 0 2px 16px rgba(10, 40, 30, .45);
  }
}