/*
Theme Name: Grupo SAGA - Congreso
Author: Grupo SAGA
Description: Landing del III Congreso de Propiedad Horizontal "De Safari en la PH" (Grupo SAGA). Tema clasico de pagina unica, basado en el HTML ya probado.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.0
Text Domain: grupo-saga-html
*/

/* ===== Variables (equivalentes a theme.json) ===== */
:root{
  --wp--preset--color--base:#FBF4ED;
  --wp--preset--color--surface:#EFE0D3;
  --wp--preset--color--contrast:#2B2620;
  --wp--preset--color--primary:#E08A2E;
  --wp--preset--color--secondary:#C4502A;
  --wp--preset--color--brand-green:#4C6B2F;
  --wp--preset--color--white:#FFFFFF;
  --wp--preset--gradient--cta:linear-gradient(135deg,#E08A2E 0%,#C4502A 100%);
  --wp--preset--font-family--display:'Playfair Display',Georgia,'Times New Roman',serif;
  --wp--preset--font-family--body:'Outfit',system-ui,-apple-system,sans-serif;
  --wp--preset--font-size--small:.95rem;
  --wp--preset--font-size--medium:1.125rem;
  --wp--preset--font-size--large:1.5rem;
  --wp--preset--font-size--x-large:2.25rem;
  --wp--preset--font-size--huge:clamp(3rem,7vw,6rem);
  --content:1200px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--wp--preset--color--base);color:var(--wp--preset--color--contrast);font-family:var(--wp--preset--font-family--body);font-size:var(--wp--preset--font-size--medium);line-height:1.65;}
h1,h2,h3,h4{font-family:var(--wp--preset--font-family--display);font-weight:700;line-height:1.1;margin:0;}
p{margin:0 0 1rem;}
a{color:var(--wp--preset--color--secondary);}

/* ===== Utilidades (equivalentes a las clases has-* de WP) ===== */
.has-text-align-center{text-align:center;}
.has-white-color{color:var(--wp--preset--color--white);}
.has-contrast-color{color:var(--wp--preset--color--contrast);}
.has-secondary-color{color:var(--wp--preset--color--secondary);}
.has-base-color{color:var(--wp--preset--color--base);}
.has-base-background-color{background-color:var(--wp--preset--color--base);}
.has-surface-background-color{background-color:var(--wp--preset--color--surface);}
.has-contrast-background-color{background-color:var(--wp--preset--color--contrast);}
.has-small-font-size{font-size:var(--wp--preset--font-size--small);}
.has-medium-font-size{font-size:var(--wp--preset--font-size--medium);}
.has-large-font-size{font-size:var(--wp--preset--font-size--large);}
.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large);}
.has-huge-font-size{font-size:var(--wp--preset--font-size--huge);}
.has-display-font-family{font-family:var(--wp--preset--font-family--display);}
.has-body-font-family{font-family:var(--wp--preset--font-family--body);}

/* ===== Botones base (equivalente a theme.json elements.button) ===== */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
.wp-block-button{display:inline-block;}
.wp-block-button__link,.wp-element-button{display:inline-block;background:var(--wp--preset--gradient--cta);color:var(--wp--preset--color--white);border:none;border-radius:999px;padding:0.9rem 1.8rem;font-weight:600;font-family:var(--wp--preset--font-family--body);text-decoration:none;cursor:pointer;line-height:1.2;}

/* ===== Maquetacion (equivalente al motor de bloques de WP) ===== */
.alignfull{width:100%;}
.wp-block-columns{display:flex;flex-wrap:wrap;gap:1.5rem;}
.wp-block-column{flex:1 1 0;min-width:200px;}
.wp-block-columns.are-vertically-aligned-center{align-items:center;}
section.wp-block-group{width:100%;}
section.wp-block-group>*{max-width:var(--content);margin-left:auto;margin-right:auto;}
.wp-block-spacer{display:block;}
.wp-block-image{margin:0;}
.wp-block-gallery{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;}
.wp-block-gallery .wp-block-image{flex:1 1 0;}
.wp-block-gallery.columns-4 .wp-block-image{flex:0 0 calc(25% - 1.2rem);}
.wp-block-gallery.columns-6 .wp-block-image{flex:0 0 calc(16.66% - 1.3rem);}
.saga-people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.5rem;}

/* Cover (hero) */
.wp-block-cover{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:2rem;overflow:hidden;background-image:url('assets/hero.jpg');background-size:cover;background-position:center;}
.wp-block-cover__background{position:absolute;inset:0;z-index:0;}
.wp-block-cover__inner-container{position:relative;z-index:1;width:100%;max-width:var(--content);margin:0 auto;}
.wp-block-cover__inner-container>*{max-width:660px;}

/* Grupos flex que en WP se definian por atributos (recuperados con :has) */
.wp-block-group:has(>.saga-meta-pill){display:flex;flex-wrap:wrap;gap:0.7rem;}
.wp-block-group:has(>.saga-ai-icon){display:flex;align-items:center;gap:0.9rem;}
.wp-block-group:has(>.saga-yt-icon){display:flex;align-items:center;gap:1rem;}
.saga-youtube-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}

/* Justificaciones puntuales de botones que WP fijaba por atributo */
.saga-portal .wp-block-buttons,.saga-ponentes .wp-block-buttons{justify-content:center;}
.saga-sponsor-banner .wp-block-buttons{justify-content:flex-end;}

/* ===== Header estatico ===== */
.saga-header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0.85rem 2rem;flex-wrap:wrap;}
.saga-brand{display:flex;align-items:center;gap:0.6rem;text-decoration:none;}
.saga-brand-mark{width:46px;height:46px;border-radius:50%;background:var(--wp--preset--color--brand-green);display:flex;align-items:center;justify-content:center;}
.saga-brand-mark svg{width:26px;height:26px;}
.saga-brand-text{display:flex;flex-direction:column;line-height:1;font-family:var(--wp--preset--font-family--display);color:var(--wp--preset--color--contrast);}
.saga-brand-text small{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;}
.saga-brand-text strong{font-size:1.45rem;font-weight:800;}
.saga-nav{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;}
.saga-nav a{color:var(--wp--preset--color--contrast);text-decoration:none;font-weight:500;font-size:0.95rem;transition:color .2s ease;}
.saga-nav a:hover{color:var(--wp--preset--color--primary);}

/* ===== Footer estatico ===== */
.saga-footer-inner{max-width:var(--content);margin:0 auto;}
.saga-footer-brand{display:flex;align-items:center;gap:0.7rem;}
.saga-social-static{display:flex;gap:0.6rem;}
.saga-social-static a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:#EDE2D4;}
.saga-social-static svg{width:18px;height:18px;}

/* Responsive: columnas y nav en movil */
@media (max-width:782px){
  .wp-block-column{flex:1 1 100% !important;}
  .wp-block-gallery.columns-4 .wp-block-image,.wp-block-gallery.columns-6 .wp-block-image{flex:0 0 calc(50% - 0.8rem);}
  .saga-nav{display:none;}
}

/* Filas de 2-3 columnas de CONTENIDO (agenda, sponsors, ubicacion) y footer:
   deben quedar lado a lado en escritorio. Sus anchos suman ~100% y, con el gap,
   se envolvian a varias filas. Forzamos que no se envuelvan en pantallas grandes;
   en movil (<=782px) la regla de arriba las vuelve a apilar. */
@media (min-width:783px){
  .wp-block-columns.are-vertically-aligned-center,
  .saga-footer .wp-block-columns{ flex-wrap:nowrap; }
}



/* ===== Estilos del tema (style.css original) ===== */
/*
Theme Name: Grupo SAGA — De Safari en la PH
Author: Grupo SAGA
Description: Tema de bloques para el III Congreso de Propiedad Horizontal (Eje Cafetero). Estetica editorial/expedicion con paleta de atardecer de safari. Construido paso a paso.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grupo-saga
*/

/* ============================================================
   Estilos base del tema.
   La MAYORIA de colores, fuentes y espaciados viven en theme.json
   (eso es lo recomendado en temas de bloques). Aqui solo dejamos
   reglas que theme.json todavia no cubre comodamente.
   Iremos agregando estilos del header y del hero en los siguientes pasos.
   ============================================================ */

html {
  scroll-behavior: smooth; /* el scroll se desliza suave al hacer clic en anclas del menu */
}

body {
  -webkit-font-smoothing: antialiased; /* fuentes mas nitidas en pantallas Mac/retina */
  text-rendering: optimizeLegibility;
}

/* Las imagenes nunca se desbordan de su contenedor */
img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   HEADER STICKY (cabecera fija)
   La clase .saga-header se la pusimos al <header> en index.html.
   Al ser hijo directo de la pagina, el "sticky" se mantiene en
   todo el scroll.
   ============================================================ */
header.saga-header {
  position: sticky;                 /* se queda pegada al hacer scroll */
  top: 0;
  z-index: 1000;                    /* z-index alto = queda POR ENCIMA del resto */
  background: rgba(239, 224, 211, 0.82); /* crema semi-transparente */
  -webkit-backdrop-filter: blur(12px);   /* efecto cristal esmerilado (frosted glass) */
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(43, 38, 32, 0.06); /* linea sutil debajo */
}

/* Enlaces del menu: oscuros, y al pasar el mouse pasan a ambar */
header.saga-header .wp-block-navigation-item__content {
  font-weight: 500;
  transition: color 0.2s ease;
}
header.saga-header .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary);
}

/* ============================================================
   ANIMACION DE LOS BOTONES (hover scale)
   :hover = al pasar el mouse | transform: scale = crecer
   transition = que el cambio sea suave, no de golpe
   ============================================================ */
.wp-block-button__link {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  will-change: transform;           /* pista al navegador para animar fluido */
}
.wp-block-button__link:hover {
  transform: scale(1.04);           /* crece un poquito, como pediste */
  box-shadow: 0 8px 22px rgba(196, 80, 42, 0.28);
}

/* ============================================================
   HERO
   ============================================================ */

/* Titulo principal: versalitas (small-caps), ese look elegante
   donde las mayusculas iniciales son grandes y el resto va en
   mayuscula pequena. */
.saga-hero-title {
  font-variant: small-caps;
  line-height: 1.04;
  letter-spacing: 0.01em;
  margin: 0;
}
/* La parte "en la" del titulo, en gris claro calido para que se
   lea bien y no se pierda contra el atardecer del fondo */
.saga-accent {
  color: #D9D4CB;
}

/* "Pildora" superior (eyebrow). display:inline-block hace que el
   fondo se ajuste al texto en vez de ocupar todo el ancho. */
.saga-eyebrow {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Pildoras de fecha y lugar */
.saga-meta-pill {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 0.95rem;
  font-weight: 500;
}

/* Boton "fantasma" (ghost / outline): transparente con borde blanco.
   Usa !important para ganarle al degradado que theme.json pone a
   TODOS los botones. */
.saga-btn-ghost .wp-block-button__link {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}
.saga-btn-ghost .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  transform: none;          /* anula el crecimiento global: este boton NO escala */
  box-shadow: none;         /* y tampoco la sombra naranja del CTA */
  border-color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   SECCION PORTAL DEL ASISTENTE
   ============================================================ */

/* Textura de puntos decorativa arriba de la seccion, que se
   desvanece hacia abajo (mask-image). */
.saga-portal {
  position: relative;
}
.saga-portal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  background-image: radial-gradient(rgba(74, 107, 47, 0.4) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
  pointer-events: none;
}

/* "Kicker" (eyebrow de texto): mayusculas espaciadas en terracota */
.saga-kicker {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--wp--preset--color--secondary);
  margin: 0 0 0.6rem;
}

/* Titulos de seccion en versalitas, igual estilo que el hero */
.saga-section-title {
  font-variant: small-caps;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Parrafo apagado (texto secundario gris) */
.saga-muted {
  color: rgba(43, 38, 32, 0.62);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- TARJETAS ---- */
.saga-card {
  position: relative;
  height: 100%;
  background: var(--wp--preset--color--white);
  border-radius: 18px;
  padding: 1.6rem;
  box-shadow: 0 10px 30px rgba(43, 38, 32, 0.07);
  /* La animacion: transition prepara un movimiento suave */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Hover lift: sube en el eje Y (translateY negativo = hacia arriba)
   y la sombra se agranda para que "flote". NO cambia de tamano. */
.saga-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 42px rgba(43, 38, 32, 0.14);
}
/* La estrellita ambar de la esquina superior derecha */
.saga-card::after {
  content: "\2726";
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  color: var(--wp--preset--color--primary);
  font-size: 1.05rem;
  opacity: 0.9;
}
/* El cuadrado verde con el icono */
.saga-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--wp--preset--color--brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.saga-card-icon svg {
  width: 28px;
  height: 28px;
  stroke: #ffffff;
  fill: none;
}
.saga-card h3 {
  font-variant: small-caps;
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem;
}
.saga-card p {
  margin: 0;
  color: rgba(43, 38, 32, 0.6);
}

/* Accesibilidad: si la persona configuro su sistema para reducir
   movimiento, desactivamos las animaciones de hover. */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link,
  .saga-card {
    transition: none;
  }
  .wp-block-button__link:hover,
  .saga-card:hover {
    transform: none;
  }
}

/* ============================================================
   SECCION BIENVENIDA ("¡Bienvenido a la era...!")
   ============================================================ */

/* Texto con degradado: se pinta un degradado y se "recorta" a la
   forma de las letras (background-clip: text). El truco es poner
   el color del texto en transparente para que se vea el degradado. */
.saga-gradient-text {
  background: linear-gradient(95deg, #E2A12B 0%, #D2691E 52%, #C13B1E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Parrafo introductorio: ancho limitado y color apagado */
.saga-welcome-text {
  max-width: 720px;
  color: rgba(43, 38, 32, 0.66);
}

/* ---- TARJETAS DE CARACTERISTICAS (con numero) ---- */
.saga-feature-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--wp--preset--color--white);
  border-radius: 20px;
  padding: 2rem 1.8rem;
  box-shadow: 0 6px 16px rgba(43, 38, 32, 0.05); /* reposo: muy sutil */
  /* Solo animamos la sombra (no hay movimiento en estas tarjetas) */
  transition: box-shadow 0.3s ease;
}
/* Hover: aparece una sombra inferior suave que se abre un poco a los
   lados. El desplazamiento en Y (18px) + el difuminado grande la
   concentran abajo. NO hay translateY ni scale: la tarjeta no se mueve. */
.saga-feature-card:hover {
  box-shadow: 0 18px 32px -8px rgba(43, 38, 32, 0.18);
}

/* Cuadrado del icono, con degradado distinto por tarjeta */
.saga-feat-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.saga-feat-icon svg { width: 30px; height: 30px; stroke: #ffffff; fill: none; }
.saga-feat-icon--orange { background: linear-gradient(135deg, #E8822E, #C4361B); }
.saga-feat-icon--green  { background: linear-gradient(135deg, #6E9140, #37571F); }
.saga-feat-icon--amber  { background: linear-gradient(135deg, #ECB23E, #D98A1E); }

.saga-feature-card h3 {
  font-variant: small-caps;
  letter-spacing: 0.01em;
  margin: 0 0 0.6rem;
}
.saga-feature-card p {
  margin: 0;
  color: rgba(43, 38, 32, 0.6);
  max-width: 90%;
}

/* El numero grande y desvanecido de la esquina (01, 02, 03) */
.saga-card-number {
  position: absolute;
  right: 1.2rem;
  bottom: 0.2rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--primary);
  opacity: 0.14;
  pointer-events: none;
}

/* Que estas tarjetas tampoco se animen si se pidio reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .saga-feature-card { transition: none; }
}

/* ============================================================
   SECCION AGENDA (fondo verde)
   ============================================================ */

/* Kicker en version ambar (en vez de terracota), para el fondo verde */
.saga-kicker--amber {
  color: var(--wp--preset--color--primary);
}

/* Palabra en ambar dentro de un titulo */
.saga-amber-text {
  color: var(--wp--preset--color--primary);
}

/* Texto claro sobre el fondo verde */
.saga-on-green {
  color: rgba(255, 255, 255, 0.86);
}

/* Tarjeta "de cristal" de la IA: fondo translucido + borde tenue */
/* Fondo de la seccion Agenda: mapa de expedicion con tinte verde encima.
   Se recorta al alto de la seccion (cover + center) mostrando la franja central. */
.saga-agenda{
  background-image:
    linear-gradient(rgba(73,102,48,0.84), rgba(73,102,48,0.84)),
    url('assets/agenda-map.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.saga-ai-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Cuadrado del icono robot */
.saga-ai-icon {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ECB23E, #D98A1E);
  display: flex;
  align-items: center;
  justify-content: center;
}
.saga-ai-icon svg { width: 26px; height: 26px; stroke: #ffffff; fill: none; }

/* ---- ICONOS DENTRO DE LOS BOTONES ----
   Tecnica de "mascara": dibujamos el icono como SVG, lo usamos de
   plantilla (mask) y lo rellenamos con el color actual del texto.
   Asi el icono siempre combina con el color del boton. */
.saga-ico-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.saga-ico-btn .wp-block-button__link::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.saga-ico-pdf   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); }
.saga-ico-spark { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3l1.6 7.4L21 12l-7.4 1.6L12 21l-1.6-7.4L3 12l7.4-1.6z'/%3E%3C/svg%3E"); }
.saga-ico-copy  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); }

/* ============================================================
   SECCION SPONSORS (banner naranja "Sala de Emprendedores")
   ============================================================ */

/* El banner: caja grande con degradado, muy redondeada y con sombra */
.saga-sponsor-banner {
  background: linear-gradient(120deg, #ECA42B 0%, #E07B22 46%, #C4471E 100%);
  border-radius: 32px;
  padding: 3rem 3.5rem;
  box-shadow: 0 24px 50px -16px rgba(196, 71, 30, 0.45);
  overflow: hidden;
}

/* Texto en degradado dorado (mas claro que el del titulo verde) */
.saga-gold-text {
  background: linear-gradient(95deg, #FBE6AE 0%, #EBB73F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Variante del eyebrow con icono (la pildora "¿Sabias que...?") */
.saga-eyebrow--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.saga-eyebrow--icon::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.saga-ico-store { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M5 9v10h14V9'/%3E%3Cpath d='M3 9a2.2 2.2 0 0 0 4.5 0 2.2 2.2 0 0 0 4.5 0 2.2 2.2 0 0 0 4.5 0 2.2 2.2 0 0 0 4.5 0'/%3E%3C/svg%3E"); }

/* Boton oscuro: al hover su fondo se vuelve mas transparente
   (se "atenua") y deja ver el naranja de atras. Sin crecer. */
.saga-btn-dark .wp-block-button__link {
  background: rgba(43, 38, 32, 0.9) !important;
  color: #ffffff;
  border: none;
  transition: background 0.28s ease;
}
.saga-btn-dark .wp-block-button__link:hover {
  background: rgba(43, 38, 32, 0.45) !important;
  transform: none;     /* no escala */
  box-shadow: none;     /* sin sombra naranja del CTA */
}

/* ============================================================
   SECCION PONENTES ("Expertos que nos Acompañan")
   ============================================================ */

/* Cuadricula responsiva: con minimumColumnWidth la grid se acomoda
   sola (4 en escritorio, menos columnas a medida que se angosta). */
.saga-people-grid {
  gap: 1.5rem;
}

.saga-person-card {
  position: relative;
  height: 100%;
  background: var(--wp--preset--color--white);
  border-radius: 18px;
  overflow: hidden; /* recorta el zoom de la foto para que no se desborde */
  box-shadow: 0 8px 22px rgba(43, 38, 32, 0.06);
  /* Las dos animaciones de la tarjeta: posicion + sombra */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Tarjeta: sube un poco al hover */
.saga-person-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(43, 38, 32, 0.14);
}

/* Marco de la foto */
.saga-person-photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#ffffff, #E7DAC8);
}
.saga-person-img { margin: 0; }
.saga-person-photo img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: top center;
  position: relative;
  z-index: 1;
  /* La foto tiene su PROPIA animacion: crece (zoom) al hover */
  transition: transform 0.45s ease;
}
.saga-person-card:hover .saga-person-photo img {
  transform: scale(1.06);
}
/* Degradado que funde la parte baja de la foto con la tarjeta */
.saga-person-photo::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
}

/* Insignia (badge) sobre la foto */
.saga-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3A2A12;
  background: linear-gradient(135deg, #F2C24B, #E08A2E);
  box-shadow: 0 4px 10px rgba(43, 38, 32, 0.18);
}
/* Variante para los conferencistas */
.saga-badge--conf {
  background: linear-gradient(135deg, #E89A2E, #D2691E);
  color: #ffffff;
}

.saga-person-info { padding: 0.5rem 1.3rem 1.6rem; }
.saga-person-info h3 {
  font-variant: small-caps;
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
}
.saga-person-info p {
  margin: 0;
  color: rgba(43, 38, 32, 0.6);
}

/* Sin animaciones si se pidio reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .saga-person-card,
  .saga-person-photo img { transition: none; }
  .saga-person-card:hover { transform: none; }
  .saga-person-card:hover .saga-person-photo img { transform: none; }
}

/* ============================================================
   SECCION ALIADOS / SPONSORS (galerias de logos)
   ============================================================ */

/* Textura de puntos arriba de la seccion (reutilizable) */
.saga-dots-top { position: relative; }
.saga-dots-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 70px;
  background-image: radial-gradient(rgba(74, 107, 47, 0.4) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
  pointer-events: none;
}

/* Tarjeta blanca que contiene los logos */
.saga-logos-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 12px 34px rgba(43, 38, 32, 0.06);
}

/* Cada logo: altura uniforme y "contain" para que no se recorte ni
   se deforme, sin importar la forma original del logo. */
.saga-logos-grid figure.wp-block-image {
  margin: 0;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.saga-logos-grid figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   SECCION POST-CONGRESO (banner verde con brillo dorado)
   ============================================================ */
.saga-postcongress-banner {
  /* Dos fondos superpuestos: un brillo dorado radial arriba-derecha
     + el degradado verde de base. */
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(232, 170, 46, 0.5) 0%, rgba(232, 170, 46, 0) 46%),
    linear-gradient(110deg, #3C5421 0%, #4A6428 60%, #566F2A 100%);
  border-radius: 32px;
  padding: 3.2rem 3.5rem;
  box-shadow: 0 24px 50px -16px rgba(60, 84, 33, 0.45);
  overflow: hidden;
}

/* ============================================================
   SECCION UBICACION (mapa de Google)
   ============================================================ */
.saga-location {
  /* Degradado verde -> oliva. Detras puede ir la silueta del arbol. */
  background: linear-gradient(100deg, #3C5421 0%, #4F6428 48%, #7C7A33 100%);
}

/* Tarjeta que enmarca el mapa */
.saga-map-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
}
.saga-map-card iframe { display: block; width: 100%; }

/* Pildora de direccion con icono (variante de saga-meta-pill) */
.saga-meta-pill--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.saga-meta-pill--icon::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.saga-ico-pin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.saga-ico-nav { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l19-9-9 19-2-8-8-2z'/%3E%3C/svg%3E"); }

/* ============================================================
   SECCION EVENTOS PASADOS (tarjetas de video + banner YouTube)
   ============================================================ */

/* Tarjeta de video: degradado verde->marron, play al centro, texto abajo */
.saga-video-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border-radius: 18px;
  padding: 1.4rem;
  background: linear-gradient(160deg, #6E7C40 0%, #4E5A2C 45%, #3A2C1C 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 12px 30px rgba(43, 38, 32, 0.1);
}
/* Textura de puntos tenue dentro de la tarjeta */
.saga-video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  pointer-events: none;
}
/* Boton de play circular, centrado */
.saga-play {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3A2A1C;
}
.saga-play svg { width: 26px; height: 26px; margin-left: 3px; }

.saga-video-card h3 {
  position: relative;
  z-index: 1;
  color: #F4ECDD;
  font-variant: small-caps;
  letter-spacing: 0.01em;
  margin: 0 0 0.2rem;
}
.saga-video-card p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* Banner de YouTube */
.saga-youtube-banner {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.4rem 2rem;
  box-shadow: 0 10px 30px rgba(43, 38, 32, 0.06);
  gap: 1.2rem;
}
.saga-yt-icon {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF5E3A, #E0341C);
  display: flex;
  align-items: center;
  justify-content: center;
}
.saga-yt-icon svg { width: 28px; height: 28px; margin-left: 2px; }

/* Boton verde (Ver en YouTube): conserva la animacion de crecimiento */
.saga-btn-green .wp-block-button__link {
  background: var(--wp--preset--color--brand-green) !important;
  color: #ffffff;
  border: none;
}
.saga-ico-play { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }

/* ============================================================
   FOOTER (pie de pagina)
   ============================================================ */
.saga-footer {
  background: #3E2C1E;       /* cafe oscuro */
  color: #D9CFC0;            /* texto crema apagado */
}
.saga-footer a {
  color: #D9CFC0;
  text-decoration: none;
  transition: color 0.2s ease;
}
.saga-footer a:hover { color: var(--wp--preset--color--primary); }

.saga-footer h3 { color: #F4ECDD; font-variant: small-caps; margin: 0; }

.saga-footer-logo {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ECB23E, #E08A2E);
  display: flex;
  align-items: center;
  justify-content: center;
}
.saga-footer-logo svg { width: 24px; height: 24px; }

.saga-footer-desc { color: rgba(217, 207, 192, 0.75); max-width: 340px; }

.saga-footer-head {
  color: #F4ECDD;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 1.1rem;
  margin: 0 0 1.1rem;
}

.saga-footer-links { list-style: none; margin: 0; padding: 0; }
.saga-footer-links li { margin: 0 0 0.65rem; }

/* Iconos sociales: circulos oscuros uniformes con glifo crema */
.saga-social { gap: 0.6rem; }
.saga-social .wp-block-social-link {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50%;
}
.saga-social .wp-block-social-link a { color: #EDE2D4; }
.saga-social .wp-social-link svg,
.saga-social .wp-block-social-link svg { fill: #EDE2D4; }

.saga-footer-copy { color: rgba(217, 207, 192, 0.55); margin-top: 1.6rem; }


/* Evita que el header se solape con la barra de administracion de WordPress */
body.admin-bar .saga-header{ top: 32px; }
@media screen and (max-width:782px){ body.admin-bar .saga-header{ top: 46px; } }

/* ---- Seccion Bienvenida: fondo de hojas tropicales + encabezado a la izquierda ---- */
.saga-welcome{
  background-image:
    linear-gradient(rgba(251,244,237,0.87), rgba(251,244,237,0.87)),
    url('assets/safari-leaves.jpg');
  background-size: 600px auto;
  background-repeat: repeat;
  background-position: center top;
}
/* El encabezado (rotulo + titulo + descripcion) va en columna izquierda */
.saga-welcome-head .saga-kicker,
.saga-welcome-head .saga-section-title,
.saga-welcome-head .saga-welcome-text{
  max-width: 620px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* Portal del Asistente: fondo un poco mas oscuro, igual a la referencia (#EFE6D7) */
section.saga-portal{ background-color:#EFE6D7; }