/**
Theme Name: Garcia Baez
Author: 13Node
Author URI: https://13node.com
Description: Astra child theme personalizado para el Doctor Miguel García Báez con accesibilidad.
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: garciabaez
Template: astra
*/

/* 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;
}

/* --- 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: #324255;

  /* 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: #223047;                 /* 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;
}

 :root{
      --radius:16px;
      --text:#1b1b1f;
      --muted:#5e6074;
			--ring: #dbeafe;
	 --card: #ffffff;
  --card-2: #f8fafc;
	 --brand: #3b82f6;
      --line:rgba(17,17,34,.08);
      --shadow:0 12px 24px rgba(17,17,34,.10);
    }
img {
    box-shadow: none !important;
}
.trecebg {
	margin-top: 5px;
	margin-bottom: 5px;
	color: white;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
}
.pcp-readmore-link:hover {
  background-color: #cdddca!important;
  color: #000!important;
  border-color: #0c5134!important;
}
.trgradient {
	padding-top: 50px;
	background:linear-gradient(135deg, #cdddca 0%,#ffffff 100%);
}
.vc_do_btn a {
	text-decoration: none!important;
}
.trece-auto .wpb_wrapper{
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
    .glass{
      background:linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.32));
      border:1px solid rgba(102,45,145,.22);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      backdrop-filter: blur(16px) saturate(160%);
      border-radius:var(--radius);
      box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.35);
    padding:20px;
}

    @supports not ((backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))){
      .glass, .glass--violet{background:rgba(255,255,255,.92)}
    }
@media (min-width: 993px) {
  .ast-separate-container #primary, .ast-separate-container.ast-left-sidebar #primary, .ast-separate-container.ast-right-sidebar #primary {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 4em;
    margin-left: 0px;
    padding: 0;
  }
}
@media (min-width: 1201px) {
  .ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single, .ast-separate-container .ast-author-box, .ast-separate-container .ast-404-layout-1, .ast-separate-container .no-results {
    padding-top: 0px;
  }
}
.cta-inline {
  border: 1px dashed var(--ring);
  border-radius: 16px;
  padding: 1rem;
  background: #f8fbff;
  margin: 1.5rem 0;
}
.note {
  background: var(--card-2);
  border-left: 4px solid var(--brand);
  padding: 1rem;
  border-radius: 12px;
}
.cta-final {
	background: var(--card);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1rem;
}
/* ===========================
   Footer – Mejora rápida (solo CSS)
   =========================== */

:is(footer, .site-footer, #colophon) {
  /* Ajusta estos colores a tu marca */
  --footer-bg: #0b1220;      /* fondo oscuro elegante */
  --footer-fg: #f8fafc;      /* texto principal */
  --footer-muted: rgba(248, 250, 252, .75);
  --footer-border: rgba(248, 250, 252, .12);

  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: 1px solid var(--footer-border);
  padding: clamp(2rem, 4vw, 4rem) 1rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Contenedor centrado: si tu tema ya añade uno, no pasa nada */
:is(footer, .site-footer, #colophon) > * {
  max-width: 1100px;
  margin-inline: auto;
}

/* Rejilla responsive para las secciones del footer */
:is(footer, .site-footer, #colophon) .footer-grid,
:is(footer, .site-footer, #colophon) .wp-block-columns,
:is(footer, .site-footer, #colophon) > .wp-block-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem 2rem;
}

/* Títulos de sección */
:is(footer, .site-footer, #colophon) :is(h2, h3) {
  margin: 0 0 .75rem 0;
  font-size: 0.95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--footer-fg);
  opacity: .9;
}

/* Listas limpias */
:is(footer, .site-footer, #colophon) ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(footer, .site-footer, #colophon) li + li { margin-top: .45rem; }

/* Enlaces: estados accesibles */
:is(footer, .site-footer, #colophon) a {
  color: var(--footer-fg);
  text-decoration: none;
}
:is(footer, .site-footer, #colophon) a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:is(footer, .site-footer, #colophon) a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Subfooter (copyright / crédito) */
:is(footer, .site-footer, #colophon) .subfooter,
:is(footer, .site-footer, #colophon) .site-info,
:is(footer, .site-footer, #colophon) > .wp-block-group:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(1.25rem, 2vw, 2rem);
  padding-top: 1rem;
  border-top: 1px solid var(--footer-border);
  color: var(--footer-muted);
  font-size: .88rem;
}

/* Botón “volver arriba” / enlaces auxiliares dentro del footer */
:is(footer, .site-footer, #colophon) a[href*="#arriba"],
:is(footer, .site-footer, #colophon) a[href*="top"],
:is(footer, .site-footer, #colophon) a[aria-label*="arriba" i] {
  font-size: .9rem;
  opacity: .85;
}
:is(footer, .site-footer, #colophon) a[href*="#arriba"]:hover,
:is(footer, .site-footer, #colophon) a[href*="top"]:hover {
  opacity: 1;
}

/* Ajustes finos en mobile */
@media (max-width: 480px) {
  :is(footer, .site-footer, #colophon) { font-size: .98rem; }
  :is(footer, .site-footer, #colophon) .subfooter,
  :is(footer, .site-footer, #colophon) .site-info {
    justify-content: center;
    text-align: center;
    gap: .5rem 1rem;
  }
}

/* —— Opcional: versión clara si prefieres mantener el footer claro ——
:is(footer, .site-footer, #colophon) {
  --footer-bg: #f8fafc;
  --footer-fg: #0b1220;
  --footer-muted: rgba(2, 6, 23, .7);
  --footer-border: rgba(2, 6, 23, .12);
}
*/

/* Post Carousel Personalizado */
.sp-pcp-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;       /* opcional */
}

/* La imagen se adapta y recorta centrada */
.sp-pcp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;  /* centra el recorte */
  display: block;           /* elimina huecos por inline-img */
}