/**
Theme Name: Baby Sleep By Tati
Author: 13Node.com
Author URI: https://13node.com
Description: Astra personalizado para Baby Sleep By Tati con opciones de accesibilidad por 13Node.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baby-sleep-by-tati
Template: astra
*/

/*13Node Custom CSS*/
.textwidget, .textwidget a, .ast-footer-copyright, .ast-footer-copyright a {
	color: #000000!important;
}
.vc_btn3-container a {
	text-decoration: none!important;
}
@media (min-width: 993px) {
  .ast-separate-container #primary, .ast-separate-container.ast-left-sidebar #primary, .ast-separate-container.ast-right-sidebar #primary {
    margin: 0em 0!important;
    padding: 0;
  }
}
/* Base: aplica a la imagen interna de WPBakery cuando un ancestro tiene .trece-* o .trece-base */
.trece-base .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-base img.vc_single_image-img,
.trece-base img.vc_single_image-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: border-radius .6s ease, transform .3s ease;
}

/* 16 formas redondeadas (usa una por bloque) */
.trece-1  .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-1  img.vc_single_image-img { border-radius: 42% 58% 38% 62% / 55% 35% 65% 45%; }

.trece-2  .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-2  img.vc_single_image-img { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }

.trece-3  .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-3  img.vc_single_image-img { border-radius: 35% 65% 60% 40% / 45% 60% 40% 55%; }

.trece-4  .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-4  img.vc_single_image-img { border-radius: 58% 42% 45% 55% / 62% 45% 55% 38%; }

.trece-5  .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-5  img.vc_single_image-img { border-radius: 50% 50% 40% 60% / 60% 50% 50% 40%; }

.trece-6  .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-6  img.vc_single_image-img { border-radius: 45% 55% 65% 35% / 50% 45% 55% 50%; }

.trece-7  .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-7  img.vc_single_image-img { border-radius: 52% 48% 42% 58% / 58% 42% 48% 52%; }

.trece-8  .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-8  img.vc_single_image-img { border-radius: 63% 37% 46% 54% / 42% 66% 34% 58%; }

.trece-9  .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-9  img.vc_single_image-img { border-radius: 40% 60% 50% 50% / 55% 52% 48% 45%; }

.trece-10 .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-10 img.vc_single_image-img { border-radius: 57% 43% 37% 63% / 44% 58% 42% 56%; }

.trece-11 .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-11 img.vc_single_image-img { border-radius: 48% 52% 58% 42% / 62% 38% 52% 48%; }

.trece-12 .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-12 img.vc_single_image-img { border-radius: 46% 54% 44% 56% / 50% 62% 38% 50%; }

.trece-13 .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-13 img.vc_single_image-img { border-radius: 55% 45% 52% 48% / 48% 56% 44% 52%; }

.trece-14 .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-14 img.vc_single_image-img { border-radius: 41% 59% 59% 41% / 49% 38% 62% 51%; }

.trece-15 .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-15 img.vc_single_image-img { border-radius: 64% 36% 42% 58% / 60% 44% 56% 40%; }

.trece-16 .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-16 img.vc_single_image-img { border-radius: 47% 53% 43% 57% / 57% 43% 53% 47%; }

/* Extras opcionales (seguros) */
.trece-shadow .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-shadow img.vc_single_image-img {
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.25);
}

.trece-hover .wpb_single_image img.vc_single_image-img,
.wpb_single_image.trece-hover img.vc_single_image-img { transition: transform .3s ease; }
.trece-hover .wpb_single_image img.vc_single_image-img:hover,
.wpb_single_image.trece-hover img.vc_single_image-img:hover { transform: scale(1.02); }

/* ACCESIBILIDAD */
.sr-only{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
  color: #000!important;
  background: #fff!important;
}
/* Foco visible en campos y botón de pagar */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .button {
  outline: none;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout .button:focus {
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
}

/* Mensajes arriba en región viva: asegurar legibilidad */
#wc-a11y-notices .woocommerce-error,
#wc-a11y-notices .woocommerce-message,
#wc-a11y-notices ul {
  margin: 0 0 1rem;
}

/* --- Glass "light" accesible para fondos cálidos (#ffcf6b, etc.) --- */
.glass-light-aaa {
  /* Fondo principal (casi blanco para asegurar contraste con #324255) */
  --glass-bg: rgba(255, 255, 255, 0.92); /* >=0.90 mantiene AA/AAA con #324255 */
  background: linear-gradient( to bottom right,
              rgba(255,255,255,0.92), var(--glass-bg) );
  color: #222222;

  /* Glass look */
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.35);
  border-radius: 14px;

  /* Espaciado base */
  padding: 1rem 1.25rem;
}

/* Fallback: si el navegador NO soporta backdrop-filter, usa fondo sólido */
@supports not ((backdrop-filter: blur(2px))) {
  .glass-light-aaa {
    background: #ffffff; /* sólido para que el contraste no dependa del fondo */
  }
}

/* Asegura enlaces distinguibles y con buen contraste dentro del glass */
.glass-light-aaa a {
  color: #222222;                 /* más oscuro que #324255 → AAA */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}
.glass-light-aaa a:hover { text-decoration-thickness: 3px; }

/* Foco visible en elementos interactivos dentro del glass */
.glass-light-aaa :where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Variante pill para badges / botones “chic” */
.glass-pill-aaa {
  composes: glass-light-aaa;  /* si usas CSS Modules; si no, duplica props clave */
  display: inline-block;
  padding: .35rem .75rem;
  border-radius: 999px;
}
