/* ========================================================================
   global.css — Variables CSS y resets básicos
   ======================================================================== */

/* Reset simplificado */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables de color y tipografía */
:root {
  --color-primario: #005f73;
  --color-secundario: #e9d8a6;
  --texto-principal: #333;
  --fuente-base: 'Inter', sans-serif;
  --espacio: 1rem;
}

/* Base tipográfica */
body {
  font-family: var(--fuente-base);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto-principal);
  background: #fafafa;
}
a {
  color: var(--color-primario);
  text-decoration: none;
}

/* 1) Aseguramos que el cover actúe como contenedor overflow-hidden */
.wp-block-cover.region-card.region-home-hover {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* 2) Preparamos el <img> de fondo para el zoom */
.wp-block-cover.region-home-hover .wp-block-cover__image-background {
  transition: transform 0.6s ease;
  transform-origin: center center;
}
/* Zoom interno al hover */
.wp-block-cover.region-home-hover:hover .wp-block-cover__image-background {
  transform: scale(1.1);
}

/* 3) Forzamos que el inner container centre verticalmente */
.wp-block-cover.region-home-hover .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease;
}

/* 4) Título siempre centrado y listo para animar */
.wp-block-cover.region-home-hover .region-title {
  margin: 0;
  transition: transform 0.3s ease;
}

/* 5) Descripción oculta inicialmente */
.wp-block-cover.region-home-hover .region-description {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 6) En hover: desplazamos el título hacia arriba y mostramos la descripción */
.wp-block-cover.region-home-hover:hover .region-title {
  transform: translateY(-10px);
}
.wp-block-cover.region-home-hover:hover .region-description {
  opacity: 1;
  transform: translateY(0);
}

/* 1) En el contenedor que agrupa sidebar + main, alinea al inicio */
#content .ast-container {
  display: flex;              /* ya debe estar, pero por si acaso */
  align-items: flex-start !important;
}

/* 2) Asegura que la barra lateral arranque en el tope y apile sus widgets */
#sidebar-lateral.widget-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: stretch !important;
  /* opcional: si quieres un ancho fijo o padding */
  /* width: 300px; */
}

/* 3) Limpia cualquier margen/padding extra de los widgets */
#sidebar-lateral .widget {
  margin: 0 0 1.5rem;   /* sólo margin-bottom para separar, sin centrar */
  padding: 0;           /* quita padding ↑ si algún inline-style lo imponía */
}

/* Sombra en las cajas con clase bg_title_seo */
.sombra-caja {
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Reels Carrusel — Grid 3/2/1 columnas
   ========================================================================== */
.reels-carrusel .reels-slider {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-gap: 1rem !important;
  margin: 0 auto;
  padding-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

.reels-carrusel .reels-slider .reel-item iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9/16 !important;
  display: block !important;
  border: none !important;
}

.reels-title {
  text-align: center;   /* centra el texto */
  padding-top: 10px;    /* espaciado de 10px arriba */
  padding-bottom: 10px; /* espaciado de 10px abajo */
  margin: 0 auto;       /* asegura que el elemento esté centrado */
  display: block;       /* si fuera un inline o inline-block */
}

/* Tablet: 2 columnas */
@media (max-width: 768px) {
  .reels-carrusel .reels-slider {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Móvil: 1 columna */
@media (max-width: 480px) {
  .reels-carrusel .reels-slider {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   CSS pagina REDES!
   ========================================================================== */
.linktree-container {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 1rem;
  font-family: sans-serif;
}

.linktree-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.linktree-bio {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #333;
}

.linktree-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.linktree-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #f4f4f4;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: #000;
  transition: background 0.2s ease;
}

.linktree-link:hover {
  background: #ddd;
}

.linktree-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}