/**
 * Tema pastel multicolor — fundación.
 * 4 colores pastel que combinan: rosa, azul, verde, amarillo.
 * Cada sección tiene su color de fondo suave; los botones usan degradado
 * rosa->azul. Cargar SIEMPRE después de main.css.
 */

:root {
  /* Los 4 pasteles (tono medio, para acentos y tarjetas) */
  --p-rosa:      #F5C6D6;
  --p-azul:      #BBDCF5;
  --p-verde:     #C4E3C8;
  --p-amarillo:  #FBE7B0;

  /* Versiones muy suaves (fondos de sección) */
  --bg-rosa:     #FCEFF4;
  --bg-azul:     #EAF4FC;
  --bg-verde:    #EDF6EE;
  --bg-amarillo: #FDF7E6;

  /* Acentos profundos (texto destacado, legibles sobre blanco/claro) */
  --acc-rosa:    #C25E86;
  --acc-azul:    #4F8FC0;
  --acc-verde:   #4E8A5E;
  --acc-amarillo:#B08428;

  --ink: #3A3A44; /* texto oscuro */

  /* Tipografías: Fraunces para títulos, Inter para el cuerpo */
  --ztc-family-font1: 'Fraunces', Georgia, serif;
  --ztc-family-font2: 'Inter', system-ui, sans-serif;

  /* Cinta de colores pastel (para animaciones de degradado) */
  --cinta: linear-gradient(90deg, #E68AAE, #C89AD6, #8FB8E8, #7FC9C0, #8FB8E8, #C89AD6, #E68AAE);

  /* Botón: degradado rosa -> lavanda (colores vecinos, sin zona turbia) */
  --btn-a: #C25E86;
  --btn-b: #8B6BB0;
}

/* ===== Acentos de texto del template ===== */
:root {
  --ztc-text-text-4: var(--acc-azul);  /* hovers de enlaces, subtítulos */
  --ztc-text-text-5: var(--acc-azul);  /* palabra destacada en títulos de sección */
}

/* ===== Botones — outline con borde "cinta" animado, fondo transparente, texto negro =====
 * El borde se logra con un ::before enmascarado (mask-composite) para que el
 * interior quede 100% transparente, no blanco. Ícono circular con relleno
 * degradado al inicio. Al pasar el mouse el botón entero se rellena sólido.
 * NOTA: todo este bloque usa :not(.btn-outline-grad) porque el botón del
 * header (CTA "Donaciones") también tiene la clase .vl-btn1 pero usa un
 * comportamiento DISTINTO (ver más abajo) — sin el :not() se pisaban entre
 * sí (el ::before de acá se dibujaba encima del degradado sólido del header). */
.vl-btn1:not(.btn-outline-grad) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 2px solid transparent;
  color: #121C27;
  box-shadow: 0 8px 20px -14px rgba(58, 58, 68, 0.35);
}
.vl-btn1:not(.btn-outline-grad)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 2px;
  background-image: var(--cinta);
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.vl-btn1:not(.btn-outline-grad) .btn-text {
  position: relative;
  z-index: 1;
}
.vl-btn1:not(.btn-outline-grad) .btn-ico {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background-image: var(--cinta);
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
  color: #ffffff;
  font-size: 0.8em;
}
.vl-btn1:not(.btn-outline-grad):hover,
.vl-btn1:not(.btn-outline-grad):focus {
  color: #ffffff;
  background: transparent;
  border-color: transparent;
  outline: none;
}
.vl-btn1:not(.btn-outline-grad):hover::before {
  padding: 0;
  background-image: var(--cinta);
  background-size: 200% 100%;
  animation: cinta-texto 3s linear infinite;
  -webkit-mask: none;
  mask: none;
}
.vl-btn1:not(.btn-outline-grad):hover .btn-ico {
  background-image: none;
  background-color: #ffffff;
  color: transparent;
}
.vl-btn1:not(.btn-outline-grad):hover .btn-ico i {
  background-image: var(--cinta);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cinta-texto 3s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vl-btn1:not(.btn-outline-grad),
  .vl-btn1:not(.btn-outline-grad)::before,
  .vl-btn1:not(.btn-outline-grad) .btn-ico { animation: none; }
}

/* ===== Fondos de sección (cada una un color muy suave) ===== */
.about1_section      { background: #ffffff; }
.service_1_section   { background: var(--bg-verde); }
.project_1_section_area { background: var(--bg-amarillo); }
.case_section_area   { background: var(--bg-rosa); }
.team_1_section      { background: var(--bg-azul); }
.testimonial_1_section { background: var(--bg-rosa); }
.contact_1_section   { background: var(--bg-verde); }
.vl_blog_1_section   { background: var(--bg-azul); }

/* ===== Tarjetas: fondo blanco para resaltar sobre el color de sección ===== */
.service_1_boxarea,
.team_images,
.case_1_boxarea,
.case_1_boxarea2,
.conatct_bottom_boxarea {
  background: #ffffff;
}
.conatct_bottom_boxarea .icons { background: var(--bg-rosa); }

/* ===== Pilares/servicios: cada tarjeta un color pastel ===== */
.service_1_boxarea.svc-0 { background: var(--bg-rosa); }
.service_1_boxarea.svc-1 { background: var(--bg-azul); }
.service_1_boxarea.svc-2 { background: var(--bg-verde); }


/* ===== Etiquetas / tags hover ===== */
.service_1_tags li a:hover,
.project_1_list li a:hover {
  background: var(--bg-azul);
  border-color: var(--p-azul);
}

/* ===== Acentos con color fijo en hex (palabra destacada, estrellas) ===== */
.header-heading1 h1 .head_diff,
.hero1-author-area .review-content ul li {
  color: var(--acc-rosa);
}

/* ===== Hero: cinta de colores MUY CLARA animada + blurs + texto contenido =====
 * Fondo con la misma cinta pero muy suave (casi pastel translúcido), texto
 * negro encima. Blurs blancos redondos decorativos. El contenido de texto se
 * limita en ancho para que no se solape con las imágenes de la derecha. */
.hero-bussiness-section {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(90deg,
    #FBE4EC, #EFE1F5, #E1EDFA, #DDF1EE, #E1EDFA, #EFE1F5, #FBE4EC);
  background-size: 200% 100%;
  animation: cinta-texto 16s linear infinite; /* mueve la cinta clara, lento */
  /* Centrado automático: en vez de padding fijo (impreciso), se usa flexbox
   * para que el contenido quede centrado en el alto disponible entre el
   * menú y el final de la sección, sin importar cuánto mida el contenido. */
  padding-top: 200px !important;
  padding-bottom: 100px !important;
}
/* Blurs de COLOR difuminados (orbes suaves que dan vida y movimiento) */
.hero-bussiness-section::before,
.hero-bussiness-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.hero-bussiness-section::before {
  width: 360px; height: 360px;
  top: -90px; left: -70px;
  background: #F5A9C9;  /* rosa */
  animation: blur-flota-1 12s ease-in-out infinite;
}
.hero-bussiness-section::after {
  width: 320px; height: 320px;
  bottom: -70px; left: 26%;
  background: #9CC9F0;  /* azul */
  animation: blur-flota-2 14s ease-in-out infinite;
}
/* Tercer blur (menta) vía un elemento extra simulado con box-shadow del contenedor */
.hero-bussiness-section .container::before {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: #A6E0D4;  /* menta */
  filter: blur(80px);
  opacity: 0.5;
  top: 20%; left: 8%;
  z-index: -1;
  pointer-events: none;
  animation: blur-flota-3 16s ease-in-out infinite;
}
@keyframes blur-flota-1 {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(30px, 25px); }
}
@keyframes blur-flota-2 {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(-25px, -20px); }
}
@keyframes blur-flota-3 {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(20px, -30px); }
}
/* El contenido queda por encima de los blurs */
.hero-bussiness-section .container { position: relative; z-index: 1; }

/* Limitar el ancho del texto para que NO invada la zona de imágenes (derecha) */
.hero-bussiness-section .header-heading1 {
  max-width: 620px;
}
/* Reducir un poco el título gigante para que respire dentro de su columna */
.hero-bussiness-section .header-heading1 h1 {
  font-size: 60px;
  line-height: 1.1;
}
@media (max-width: 767px) {
  .hero-bussiness-section .header-heading1 h1 {
    font-size: 46px;
    line-height: 1.15;
  }
  .hero-bussiness-section .header-heading1 p {
    font-size: 16px !important;
  }
}

/* Textos del hero en negro/oscuro (se leen sobre la cinta clara) */
.hero-bussiness-section .header-heading1 .sub_title,
.hero-bussiness-section .header-heading1 h1 {
  color: #121C27;
}
.hero-bussiness-section .header-heading1 p,
.hero-bussiness-section .hero1-author-area .review-content p {
  color: var(--ink);
}
.hero-bussiness-section .header-heading1 h1 .head_diff {
  color: var(--acc-rosa);
}
.hero-bussiness-section .hero1-author-area .review-content ul li {
  color: var(--acc-rosa);
}

/* ===== Logo (SVG): respetar proporción dentro del espacio fijo ===== */
.vl-logo img,
.vl-offcanvas-logo img,
.vl-footer-logo img {
  width: auto;
  height: 40px;
  max-width: 180px;
  object-fit: contain;
}

/* Tamaño final del logo en el header transparente (desktop) */
.homepage1-body .vl-transparent-header .vl-logo img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

/* ===== Redondeo: botones tipo píldora + header muy redondeado ===== */
.vl-btn1 {
  border-radius: 100px;   /* píldora: extremos totalmente redondos */
}
.homepage1-body .vl-transparent-header .row-bg1,
.homepage1-body .header-sticky .row-bg1 {
  border-radius: 100px;   /* barra del header en píldora completa */
}

/* ===== Botón outline con borde degradado ANIMADO (CTA del header) =====
 * El degradado es una cinta larga de pasteles bonitos (rosa, lavanda, azul,
 * menta) que se DESPLAZA suavemente, dando una transición gradual y fluida.
 * El ícono va en un círculo de fondo transparente con color animado. */

/* Cinta de colores: se usa la variable global --cinta definida en :root */

@keyframes cinta-mueve {
  0%   { background-position: 0% 50%, 0% 50%; }
  100% { background-position: 200% 50%, 200% 50%; }
}
@keyframes cinta-texto {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.vl-btn1.btn-outline-grad {
  position: relative;
  border: 2px solid transparent;
  background-image: var(--cinta), var(--cinta);
  background-size: 200% 100%, 200% 100%;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  animation: cinta-mueve 8s linear infinite;
}
/* Texto e ícono en blanco por defecto (botón sólido) */
.vl-btn1.btn-outline-grad .btn-text {
  color: #ffffff;
  font-family: 'Fraunces', Georgia, serif;
}
.vl-btn1.btn-outline-grad .btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: transparent;
  color: #ffffff;
  font-size: 0.9em;
  flex-shrink: 0;
}
/* Hover: se vuelve outline — fondo blanco, borde y texto de color animado */
.vl-btn1.btn-outline-grad:hover {
  background: #ffffff;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    var(--cinta);
  background-size: 100% 100%, 200% 100%;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-repeat: no-repeat, repeat;
}
.vl-btn1.btn-outline-grad:hover .btn-text {
  background-image: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #121C27;
  color: #121C27;
  animation: none;
}
.vl-btn1.btn-outline-grad:hover .btn-ico {
  background: transparent;
  color: #E68AAE;
  border-color: #E68AAE;
  animation: icono-suave 8s ease-in-out infinite;
}
@keyframes icono-suave {
  0%,100% { color: #E68AAE; border-color: #E68AAE; }
  33%     { color: #C89AD6; border-color: #C89AD6; }
  66%     { color: #8FB8E8; border-color: #8FB8E8; }
}
/* Respetar a quien prefiere menos animación */
/* Botón "Donaciones" del header: mismo alto que el switch de idioma (58px) */
.vl-hero-btn .btn-area1 .vl-btn1.btn-outline-grad {
  height: 58px;
  padding: 0 26px;
  font-size: 17px;
  box-sizing: border-box;
}
.vl-hero-btn .btn-area1 .vl-btn1.btn-outline-grad .btn-ico {
  width: 34px;
  height: 34px;
}

@media (prefers-reduced-motion: reduce) {
  .vl-btn1.btn-outline-grad,
  .vl-btn1.btn-outline-grad .btn-text,
  .vl-btn1.btn-outline-grad .btn-ico,
  .vl-btn1.btn-outline-grad:hover {
    animation: none;
  }
}

/* ===== Hero: flecha scroll-down animada (reemplaza los botones) ===== */
@keyframes scroll-rebote {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}
.hero-scroll-down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--acc-rosa);
  color: var(--acc-rosa);
  font-size: 20px;
  background: rgba(255, 255, 255, 0.5);
  animation: scroll-rebote 1.6s ease-in-out infinite;
  transition: background 0.3s, color 0.3s;
  text-decoration: none;
}
.hero-scroll-down:hover {
  background: var(--acc-rosa);
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-down { animation: none; }
}

/* ===== Hero: más vida — badge en el eyebrow + palabras del título animadas ===== */

/* Eyebrow "Accelerate Your Business..." como badge glassmorphism (blur) */
.hero-bussiness-section .header-heading1 .sub_title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 7px 18px 7px 7px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -12px rgba(58, 58, 68, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.hero-bussiness-section .header-heading1 .sub_title:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px -12px rgba(58, 58, 68, 0.3);
}
/* Ícono redondo con fondo de color (cinta animada) e ícono blanco */
.hero-bussiness-section .header-heading1 .sub_title .eyebrow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-image: var(--cinta);
  background-size: 200% 100%;
  color: #ffffff;
  font-size: 13px;
  flex-shrink: 0;
  animation: cinta-texto 8s linear infinite;
}

/* Palabras destacadas del título con la cinta de colores animada */
.hero-bussiness-section .header-heading1 h1 .head_diff {
  background-image: var(--cinta, linear-gradient(90deg,#E68AAE,#C89AD6,#8FB8E8,#7FC9C0,#8FB8E8,#C89AD6,#E68AAE));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cinta-texto 8s linear infinite;
}

/* ===== Tipografía base: asegurar Inter en el cuerpo y Fraunces en títulos ===== */
body {
  font-family: 'Inter', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.header-heading1 h1, .heading1 h2, .heading1-w h2 {
  font-family: 'Fraunces', Georgia, serif;
  color: #121C27;
}

/* ===== Switch de idioma ES/EN tipo interruptor ===== */
.lang-switch .lang-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 58px;               /* más alto */
  padding: 5px;
  border-radius: 100px;
  border: 2px solid transparent;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    var(--cinta);
  background-size: 100% 100%, 200% 100%;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-repeat: no-repeat, repeat;
  cursor: pointer;
  animation: cinta-mueve 8s linear infinite;
  overflow: hidden;
}
.lang-switch .lang-opt {
  position: relative;
  z-index: 2;
  width: 48px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  transition: color 0.3s;
}
/* La perilla que se desliza detrás del idioma activo (círculo perfecto) */
.lang-switch .lang-knob {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 5px;
  width: 48px;
  height: calc(100% - 10px);
  border-radius: 50%;
  background-image: var(--cinta);
  background-size: 200% 100%;
  animation: cinta-texto 8s linear infinite;
  transition: transform 0.3s ease;
}
/* Estado ES (por defecto): perilla a la izquierda, ES en blanco */
.lang-switch .lang-toggle[data-lang="es"] .lang-es { color: #ffffff; }
/* Estado EN: perilla a la derecha, EN en blanco */
.lang-switch .lang-toggle[data-lang="en"] .lang-knob { transform: translateX(48px); }
.lang-switch .lang-toggle[data-lang="en"] .lang-en { color: #ffffff; }
@media (prefers-reduced-motion: reduce) {
  .lang-switch .lang-toggle, .lang-switch .lang-knob { animation: none; }
}

/* ===== Header: neutralizar nav-pills de Bootstrap (estira el menú) ===== */
.homepage1-body .vl-main-menu ul.nav-pills {
  display: inline-flex !important;   /* no ocupa todo el ancho */
  flex-wrap: nowrap !important;      /* nunca se parte en dos líneas */
  width: auto !important;
  gap: 0;
  justify-content: center;
}
.homepage1-body .vl-main-menu ul.nav-pills > li {
  margin: 0 8px;
  white-space: nowrap;
  float: none;
}
.homepage1-body .vl-main-menu ul > li a.nav-link {
  font-size: 17px;
  white-space: nowrap;
  background-image: linear-gradient(#121C27, #121C27); /* "degradado" de un solo color en reposo */
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  transition: transform 0.3s ease;
}
.homepage1-body .vl-main-menu ul > li a.nav-link:hover {
  transform: translateY(-3px);
}
.homepage1-body .vl-main-menu ul > li a.nav-link span {
  background-image: inherit;
  background-size: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Link activo (sección visible en pantalla): texto con la cinta de colores animada,
 * declarada directo en el <span> (no solo "inherit") para que la animación de
 * background-position sí se vea moviéndose ahí, no solo en el <a> padre. */
.homepage1-body .vl-main-menu ul > li a.nav-link.active,
.homepage1-body .vl-main-menu ul > li a.nav-link.active span {
  background-image: var(--cinta);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cinta-texto 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .homepage1-body .vl-main-menu ul > li a.nav-link.active,
  .homepage1-body .vl-main-menu ul > li a.nav-link.active span { animation: none; }
}
/* Botones (idioma + donaciones) sin cortarse, en una línea, alineados a la derecha.
 * Nota: se usa CSS propio porque la clase xl:flex de Tailwind no existe en este build. */
.vl-hero-btn.hidden.xl\:block {
  display: none;
}
@media (min-width: 1200px) {
  .vl-hero-btn.hidden.xl\:block {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }
}
.vl-hero-btn { flex-wrap: nowrap; }
.vl-hero-btn .btn-area1 { display: inline-block; }
.vl-hero-btn .btn-area1 .vl-btn1 { white-space: nowrap; }

/* ===== Widget de progreso de donaciones (hero) ===== */
.hero-donation-widget {
  max-width: 480px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 20px 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -14px rgba(58, 58, 68, 0.25);
}
.donation-widget-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.donation-raised {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 600;
  background-image: var(--cinta);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cinta-texto 8s linear infinite;
}
.donation-goal {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.75;
}
.donation-progress-track {
  width: 100%;
  height: 12px;
  border-radius: 100px;
  background: rgba(58, 58, 68, 0.08);
  overflow: hidden;
  margin-bottom: 16px;
}
.donation-progress-fill {
  height: 100%;
  border-radius: 100px;
  background-image: var(--cinta);
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
}
.donation-impact-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.donation-impact-item {
  display: flex;
  flex-direction: column;
}
.donation-impact-number {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.donation-impact-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink);
  opacity: 0.7;
}
.donation-impact-divider {
  width: 1px;
  height: 32px;
  background: rgba(58, 58, 68, 0.15);
}
@media (max-width: 767px) {
  .hero-donation-widget { max-width: 100%; }
}

/* ===== Fila de pilares en el hero (Educación, Salud, Protección) ===== */
.hero-pillars-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 6px;
}
.hero-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.hero-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 22px;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: default;
}
/* El "aro" que rodea el círculo: un anillo con espacio (padding) respecto al ícono */
.hero-pillar-icon::before {
  content: "";
  position: absolute;
  inset: -7px;                 /* separación del aro respecto al círculo */
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.35;
  transition: inset 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
/* Hover: el aro se expande y gira suavemente, el círculo "flota" */
.hero-pillar:hover .hero-pillar-icon {
  transform: translateY(-6px);
}
.hero-pillar:hover .hero-pillar-icon::before {
  inset: -10px;
  opacity: 0.8;
  transform: rotate(45deg);
}
.hero-pillar-label {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 6px 16px -8px rgba(58, 58, 68, 0.25);
  z-index: 5;
}
.hero-pillar:hover .hero-pillar-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Borde y texto de color según el área, fondo transparente */
.hero-pillar-pink .hero-pillar-label { border-color: #C25E86; color: #C25E86; }
.hero-pillar-blue .hero-pillar-label { border-color: #4E7EAA; color: #4E7EAA; }
.hero-pillar-green .hero-pillar-label { border-color: #4E8A5E; color: #4E8A5E; }
.hero-pillar-lavender .hero-pillar-label { border-color: #7B579E; color: #7B579E; }
.hero-pillar-peach .hero-pillar-label { border-color: #C9793D; color: #C9793D; }
/* Fondo pastel transparente por pilar, ícono en color plano de la gama */
.hero-pillar-pink .hero-pillar-icon {
  background: rgba(245, 198, 214, 0.55); /* rosa pastel transparente */
  color: #C25E86;
}
.hero-pillar-pink .hero-pillar-icon::before { border-color: #C25E86; }

.hero-pillar-blue .hero-pillar-icon {
  background: rgba(201, 222, 240, 0.55); /* azul pastel transparente */
  color: #4E7EAA;
}
.hero-pillar-blue .hero-pillar-icon::before { border-color: #4E7EAA; }

.hero-pillar-green .hero-pillar-icon {
  background: rgba(196, 227, 200, 0.55); /* verde pastel transparente */
  color: #4E8A5E;
}
.hero-pillar-green .hero-pillar-icon::before { border-color: #4E8A5E; }

.hero-pillar-lavender .hero-pillar-icon {
  background: rgba(220, 203, 235, 0.55); /* lavanda pastel transparente */
  color: #7B579E;
}
.hero-pillar-lavender .hero-pillar-icon::before { border-color: #7B579E; }

.hero-pillar-peach .hero-pillar-icon {
  background: rgba(245, 214, 181, 0.55); /* durazno pastel transparente */
  color: #C9793D;
}
.hero-pillar-peach .hero-pillar-icon::before { border-color: #C9793D; }
@media (max-width: 575px) {
  .hero-pillars-row { gap: 18px; }
  .hero-pillar-icon { width: 46px; height: 46px; font-size: 18px; }
  .hero-pillar-label { font-size: 11px; }
}

/* ===== Hero: composición derecha — 2 fotos + tarjeta de confianza =====
 * Ahora es una columna real dentro del contenedor (no posición absoluta),
 * así respeta el ancho y los márgenes del hero sin desbordarse. */

/* Corrige un comportamiento por defecto de flexbox: un elemento flex no se
 * encoge por debajo del ancho de su contenido interno (min-width: auto),
 * lo que forzaba a esta fila a partirse en dos líneas en vez de quedar
 * lado a lado. Con min-width:0 respeta el 50%/50% asignado. Además se
 * fuerza flex-wrap:nowrap para que las dos columnas queden SIEMPRE en la
 * misma línea (texto a la izquierda, fotos a la derecha). */
.hero-bussiness-section .container > .flex.items-center {
  flex-wrap: nowrap;
}
.hero-bussiness-section .container > .flex.items-center > div {
  min-width: 0;
}
@media (max-width: 1279px) {
  /* Por debajo de xl no hay segunda columna (está oculta): permitir que
     la fila vuelva a envolver para que el texto ocupe el 100% normal. */
  .hero-bussiness-section .container > .flex.items-center {
    flex-wrap: wrap;
  }
}

.hero-right-visual {
  max-width: 620px;
  margin-left: auto;
  position: relative;
}
.hero-bussiness-section .container > .flex.items-center > div:last-child {
  padding-left: 0.5rem; /* menos separación entre el texto y las fotos */
}
.hero-two-photos {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.hero-photo-big {
  width: 60%;
  height: 480px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 20px 40px -18px rgba(58, 58, 68, 0.35);
}
.hero-photo-small {
  width: 40%;
  height: 340px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 20px 40px -18px rgba(58, 58, 68, 0.35);
}
.hero-trust-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 14px 20px;
  margin-top: -28px;
  margin-left: 20px;
  position: relative;
  z-index: 2;
  box-shadow: 0 14px 30px -14px rgba(58, 58, 68, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: hero-trust-card-float 4s ease-in-out infinite;
}
.hero-trust-card:hover {
  animation-play-state: paused;
  transform: translateY(-6px);
  box-shadow: 0 20px 36px -14px rgba(58, 58, 68, 0.35);
}
@keyframes hero-trust-card-float {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(30px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-trust-card { animation: none; }
}
.hero-trust-avatars {
  display: flex;
}
.hero-trust-avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  margin-left: -12px;
}
.hero-trust-avatars img:first-child { margin-left: 0; }
.hero-trust-stars {
  font-size: 18px;
  letter-spacing: 2px;
  background-image: var(--cinta);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cinta-texto 8s linear infinite;
}
.hero-trust-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}


/* ===== Menú centrado de verdad entre el logo y el switch de idioma =====
 * Se usa CSS Grid de 3 columnas (logo | menú | botones) en vez de flex,
 * porque logo y botones no miden lo mismo — con grid, la columna del
 * medio (menú) siempre queda perfectamente centrada, sin recortarse. */
@media (min-width: 1200px) {
  .homepage1-body .row-bg1 {
    display: grid !important;
    grid-template-columns: min-content 1fr min-content; /* ambos lados: solo su tamaño real, sin relleno */
    align-items: center;
  }
  .homepage1-body .row-bg1 > div:nth-child(1) {
    justify-self: start; /* el logo se queda pegado a la izquierda, sin estirarse */
  }
  .homepage1-body .row-bg1 > div:nth-child(2) {
    justify-self: center;
  }
  .homepage1-body .row-bg1 > div:nth-child(3) {
    justify-self: end;
  }
  /* Los anchos de Tailwind (w-2/12 etc.) ya no aplican: Grid controla el tamaño */
  .homepage1-body .row-bg1 > div {
    width: auto !important;
  }
}

/* ===== Hero: composición derecha — forma orgánica (blob) + chip ===== */
.hero-blob-wrap {
  position: relative;
  width: 420px;
  height: 420px;
  max-width: 100%;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dos formas de degradado detrás de la foto, asomando en las esquinas */
.hero-blob-wrap::before,
.hero-blob-wrap::after {
  content: "";
  position: absolute;
  background-image: var(--cinta);
  background-size: 200% 100%;
  z-index: 0;
  animation: cinta-mueve 8s linear infinite, hero-blob-morph-2 10s ease-in-out infinite;
}
.hero-blob-wrap::before {
  width: 400px;
  height: 400px;
  top: -95px;
  left: -85px;
  border-radius: 58% 42% 35% 65% / 55% 45% 55% 45%;
  opacity: 0.4;
}
.hero-blob-wrap::after {
  width: 330px;
  height: 330px;
  bottom: -100px;
  right: -75px;
  border-radius: 42% 58% 65% 35% / 45% 55% 45% 55%;
  opacity: 0.35;
  animation-direction: reverse;
}
@keyframes hero-blob-morph-2 {
  0%, 100% { border-radius: 58% 42% 35% 65% / 55% 45% 55% 45%; }
  50%      { border-radius: 42% 58% 65% 35% / 45% 55% 45% 55%; }
}
.hero-blob-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  box-shadow: 0 30px 60px -20px rgba(58, 58, 68, 0.4);
  animation: hero-blob-morph 8s ease-in-out infinite;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-blob-photo:hover {
  transform: scale(1.07);
}
@keyframes hero-blob-morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
  50%      { border-radius: 58% 42% 35% 65% / 55% 55% 45% 45%; }
}
.hero-blob-chip {
  position: absolute;
  bottom: 40px;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: 12px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #C25E86;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.hero-blob-stars {
  color: #D96F94;
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-blob-photo { animation: none; }
}

/* ===== Chatbox: botón con la cinta de colores del sitio, ícono WhatsApp ===== */
.arva-chatbox-btn {
  background-image: var(--cinta) !important;
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
}
.arva-chatbox-btn:hover {
  background-image: var(--cinta) !important;
}
/* Header de la ventana de chat: también con la cinta de colores */
.arva-chatbox-header {
  background-image: var(--cinta) !important;
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .arva-chatbox-btn, .arva-chatbox-header { animation: none; }
}

/* Quitar el pulso (anillo) por completo */
.arva-chatbox-btn::after {
  display: none !important;
}
/* El botón mismo late suavemente (escala) para llamar la atención */
@keyframes chatbox-btn-latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.arva-chatbox-btn {
  animation: cinta-mueve 8s linear infinite, chatbox-btn-latido 2.2s ease-in-out infinite;
}
/* Hover: sin cambios, el botón se queda igual */
/* Botón de enviar mensaje dentro del chat */
.arva-chatbox-footer button {
  background-image: var(--cinta) !important;
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
}
.arva-chatbox-footer button:hover {
  background-image: var(--cinta) !important;
}
@media (prefers-reduced-motion: reduce) {
  .arva-chatbox-btn::after, .arva-chatbox-footer button { animation: none; }
}

/* ===== Barra vertical de redes sociales, anclada dentro del hero =====
 * position:absolute (no fixed): solo aparece en el hero, no persigue al
 * usuario por el resto de la página al hacer scroll. */
.social-sidebar {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  padding: 16px 10px;
  box-shadow: 0 12px 28px -12px rgba(58, 58, 68, 0.3);
}
.social-sidebar-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.social-sidebar-icon:hover {
  background-image: var(--cinta);
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
  color: #ffffff;
  transform: scale(1.1);
}
@media (max-width: 1400px) {
  .social-sidebar { display: none; } /* se oculta en laptops/tablet/móvil para no chocar con el contenido */
}

/* ===== Hero: partículas flotantes (le dan vida sin recargar) ===== */
/* ===== Hero: íconos flotantes con significado (amor, servicio, fundación) =====
 * En vez de puntitos genéricos, íconos temáticos (corazón, manos, semilla,
 * estrella, globo, birrete) flotando suave, cada uno con su color y brillo. */
.hero-particle {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  animation: hero-particle-float 10s ease-in-out infinite;
}
.hero-particle-1 { font-size: 20px; top: 10%;  left: 15%; color: #E8899F; filter: drop-shadow(0 0 6px rgba(232,137,159,.5)); animation-duration: 9s; }
.hero-particle-2 { font-size: 24px; top: 88%;  left: 10%; color: #7EB6E8; filter: drop-shadow(0 0 6px rgba(126,182,232,.5)); animation-duration: 11s; animation-delay: 1s; }
.hero-particle-3 { font-size: 18px; top: 22%;  left: 45%; color: #E8C15E; filter: drop-shadow(0 0 6px rgba(232,193,94,.5)); animation-duration: 13s; animation-delay: 2s; }
.hero-particle-4 { font-size: 22px; top: 95%;  left: 38%; color: #6EBE86; filter: drop-shadow(0 0 6px rgba(110,190,134,.5)); animation-duration: 10s; animation-delay: 0.5s; }
.hero-particle-5 { font-size: 19px; top: 5%;   left: 58%; color: #B597D6; filter: drop-shadow(0 0 6px rgba(181,151,214,.5)); animation-duration: 12s; animation-delay: 1.5s; }
.hero-particle-6 { font-size: 21px; top: 60%;  left: 6%;  color: #E0A868; filter: drop-shadow(0 0 6px rgba(224,168,104,.5)); animation-duration: 14s; animation-delay: 3s; }
.hero-particle-7 { font-size: 20px; top: 40%;  left: 52%; color: #7EB6E8; filter: drop-shadow(0 0 6px rgba(126,182,232,.5)); animation-duration: 11.5s; animation-delay: 2.5s; }
.hero-particle-8 { font-size: 16px; top: 75%;  left: 48%; color: #E8899F; filter: drop-shadow(0 0 6px rgba(232,137,159,.5)); animation-duration: 9.5s; animation-delay: 0.8s; }
@keyframes hero-particle-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
  50%      { transform: translate(18px, -26px) rotate(12deg); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-particle { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pillar:hover .hero-pillar-icon,
  .hero-bussiness-section .header-heading1 .sub_title:hover {
    animation: none;
  }
}

/* ===== Hero: badge cuadrado "+50 Donantes este año" ===== */
.hero-stat-badge {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 14px 30px -14px rgba(58, 58, 68, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: hero-stat-badge-float 5s ease-in-out infinite;
  text-align: center;
  min-width: 100px;
}
.hero-stat-number {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  background-image: var(--cinta);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cinta-texto 8s linear infinite;
  line-height: 1;
}
.hero-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.3;
}
.hero-stat-badge:hover {
  animation-play-state: paused;
  transform: translateY(-6px);
  box-shadow: 0 20px 36px -14px rgba(58, 58, 68, 0.35);
}
@keyframes hero-stat-badge-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stat-badge { animation: none; }
}

/* ===== Menú: texto con degradado animado al pasar el mouse ===== */
.homepage1-body .vl-main-menu ul > li a.nav-link:hover,
.homepage1-body .vl-main-menu ul > li a.nav-link:hover span {
  background-image: var(--cinta);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cinta-texto 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .homepage1-body .vl-main-menu ul > li a.nav-link:hover,
  .homepage1-body .vl-main-menu ul > li a.nav-link:hover span { animation: none; }
}

/* ===== Preloader rediseñado: fondo con cinta pastel, logo con zoom,
 * nombre de marca, barra compacta con degradado, número discreto =====
 * Composición pensada como UN bloque cohesivo, no elementos sueltos. */
.cs_preloader {
  background-image: linear-gradient(90deg,
    #FBE4EC, #EFE1F5, #E1EDFA, #DDF1EE, #E1EDFA, #EFE1F5, #FBE4EC) !important;
  background-size: 200% 100% !important;
  animation: cinta-texto 16s linear infinite;
}
.cs_preloader .cs_preloader_container {
  background: transparent !important;
}
.cs_preloader_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px; /* mismo espacio: logo-a-barra = barra-a-texto */
}
.cs_preloader_logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  animation: cs_preloader_zoom 1.4s ease-in-out infinite;
}
@keyframes cs_preloader_zoom {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.cs_preloader .cs_progressbar_wrapper {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 400px !important;
  max-width: 400px !important;
  height: 4px !important;
  background: rgba(58, 58, 68, 0.15) !important;
  border-radius: 100px !important;
  overflow: hidden;
  margin: 0 !important;
}
.cs_preloader .cs_progressbar {
  height: 100% !important;
  width: 0%;
  background: var(--cinta) !important;
  background-size: 200% 100%;
  border-radius: 100px;
  transition: width 0.05s linear;
}
.cs_preloader .cs_loading_percentage {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #121C27 !important;
  opacity: 1 !important;
  margin: 0 !important;
  letter-spacing: normal !important;
}

/* ===== Hero: botón CTA principal (debajo del párrafo, arriba de los pilares) ===== */
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

/* ===== Header móvil: logo más chico, acciones compactas junto al hamburguesa ===== */
@media (max-width: 1279px) {
  .homepage1-body .vl-transparent-header .vl-logo img {
    width: 50px;
    height: 50px;
  }
  /* El grid se dividía 50/50 (herencia de w-6/12 de Tailwind) dejando medio
   * espacio vacío junto al logo. Se angosta la columna del logo a su
   * contenido real, y la de acciones toma el resto del espacio disponible. */
  .homepage1-body .row-bg1 > .vl-logo-col {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .homepage1-body .row-bg1 > .vl-actions-col {
    width: auto !important;
    flex: 1 1 auto !important;
  }
}
.vl-mobile-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
/* Switch de idioma compacto (versión móvil, más chico que el de escritorio) */
.lang-toggle-mobile {
  height: 40px !important;
  padding: 3px !important;
}
.lang-toggle-mobile .lang-opt {
  width: 34px !important;
  font-size: 12px !important;
}
.lang-toggle-mobile .lang-knob {
  width: 34px !important;
}
.lang-switch:has(.lang-toggle-mobile[data-lang="en"]) .lang-knob {
  transform: translateX(34px);
}
/* Botón de donaciones compacto (solo ícono, mismo degradado que el de escritorio) */
.vl-donate-mobile {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 50% !important;
}
/* En hover, solo un pequeño efecto de "subir" — no cambia de color (se anula
 * el hover heredado del botón base, que normalmente invierte a blanco/outline) */
.vl-donate-mobile {
  transition: transform 0.3s ease;
}
.vl-donate-mobile:hover {
  transform: translateY(-4px);
  background: none !important;
  background-image: var(--cinta) !important;
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
}
.vl-donate-mobile:hover .btn-ico,
.vl-donate-mobile:hover i {
  color: #ffffff !important;
}
.vl-offcanvas-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #121C27;
  background: transparent;
  color: #121C27;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.vl-offcanvas-toggle:hover {
  background: transparent;
  border-color: #121C27;
  color: #121C27;
}

/* ===== Padding del hero SOLO para móvil — edita estos 2 números a tu gusto =====
 * Estos valores NO afectan escritorio/tablet, solo pantallas de 767px o menos. */
@media (max-width: 767px) {
  .hero-bussiness-section {
    padding-top: 140px !important;      /* <- cambia este número */
    padding-bottom: 60px !important;    /* <- y este número */
  }
}

/* ===== Composición de fotos del hero: también visible en móvil =====
 * Antes estaba oculta (hidden xl:block). En vez de mantener la superposición
 * absoluta (pensada para escritorio, con el badge y la tarjeta flotando
 * ENCIMA de la foto), en móvil se apilan en flujo normal: foto, luego
 * badge, luego tarjeta — uno debajo del otro, sin toparse. */
@media (max-width: 1279px) {
  .hero-right-visual {
    position: relative;
    margin: 40px auto 0;
    max-width: 320px;
  }
  .hero-blob-wrap {
    width: 300px;
    height: 300px;
    margin: 0 auto;
  }
  .hero-stat-badge {
    top: -10px;
    left: auto;
    right: -10px;
  }
  .hero-trust-card {
    margin-top: -20px;
    margin-left: 10px;
  }
  /* Solo se deja la forma decorativa de abajo; la de arriba se quita para
     no recargar visualmente el espacio angosto de móvil. */
  .hero-blob-wrap::before {
    display: none;
  }
}

/* ===== Menú offcanvas (móvil): rediseño completo =====
 * Fondo blanco, logo a color (sin filtro blanco), botón cerrar oscuro,
 * enlaces en Fraunces grande con degradado, información de contacto y
 * redes en tono oscuro, y botón de Donaciones al final. */
.vl-offcanvas {
  background: #ffffff !important;
}
.vl-offcanvas .vl-offcanvas-logo {
  filter: none !important; /* cancela el brightness(0) invert(1) del template original (main.css), que vuelve blanco todo el contenido del div */
}
.vl-offcanvas .vl-offcanvas-logo img {
  height: 50px !important;
  width: auto !important;
  max-width: 160px;
  object-fit: contain;
}
.vl-offcanvas .vl-offcanvas-close button,
.vl-offcanvas-close-toggle {
  color: #121C27 !important;
}
/* Enlaces del menú: Fraunces grande, color sólido azul-negro en reposo */
.vl-offcanvas-menu ul li a,
.vl-offcanvas-menu ul li a.nav-link {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  padding: 12px 0 !important;
  color: #121C27 !important;
  display: inline-block;
  transition: transform 0.3s ease;
}
.vl-offcanvas-menu ul li a span {
  color: #121C27 !important;
}
/* Hover: degradado + se desliza hacia el lado */
.vl-offcanvas-menu ul li a:hover,
.vl-offcanvas-menu ul li a.nav-link:hover {
  transform: translateX(10px);
  background-image: var(--cinta) !important;
  background-size: 200% 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: cinta-texto 8s linear infinite;
}
.vl-offcanvas-menu ul li a:hover span {
  background-image: inherit;
  background-size: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Sección de contacto y redes: tono oscuro (antes blanco, ilegible en fondo blanco) */
.vl-offcanvas-sm-title,
.vl-offcanvas-title {
  color: #121C27 !important;
  font-family: 'Fraunces', Georgia, serif !important;
}
.vl-offcanvas-info span a,
.vl-offcanvas-info span a i {
  color: #121C27 !important;
}
.vl-offcanvas-social a {
  color: #121C27 !important;
  border-color: #121C27 !important;
}
.vl-offcanvas-social a:hover {
  background-image: var(--cinta);
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
  color: #ffffff !important;
  border-color: transparent !important;
}
.vl-offcanvas-info {
  margin-top: 50px;
}
.vl-offcanvas-donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 16px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 100px;
  background-image: var(--cinta);
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vl-offcanvas-menu ul li a,
  .vl-offcanvas-social a:hover,
  .vl-offcanvas-donate {
    animation: none;
  }
}

/* Ocultar el botón flotante de WhatsApp mientras el menú móvil está abierto,
 * para que no se superponga con el menú offcanvas.
 * Nota: el chatbox (footer.php) y el offcanvas (header.php) NO son hermanos
 * en el DOM (el offcanvas queda anidado dentro de su propio div wrapper),
 * así que un selector de hermanos (~) entre ambos nunca coincide. Por eso
 * se usa una clase en <body> (agregada/quitada por JS en main.js). */
body.vl-menu-open .arva-chatbox-container,
.vl-offcanvas.vl-offcanvas-open ~ .arva-chatbox-container {
  display: none !important;
}

/* Mismo problema con el botón "volver arriba" (.progress-wrap, position:fixed
 * definido en main.css): al ser fixed, queda flotando por encima del menú
 * offcanvas abierto. Se oculta con la misma clase en <body>. */
body.vl-menu-open .paginacontainer {
  display: none !important;
}

/* =========================================================================
 * NOSOTROS (About): mismo lenguaje visual del hero.
 * Badge glassmorphism en el eyebrow, palabra clave del título con la cinta,
 * checklist con íconos circulares de color pastel, y una tarjeta flotante
 * de impacto sobre las fotos (mismo patrón que el badge "+50 Donantes" y la
 * tarjeta de confianza del hero).
 * ========================================================================= */

/* Eyebrow "Quiénes Somos": mismo badge glassmorphism que el del hero */
.about_1_heading .sub_title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Degradado claro solo rosa + azul (sin verde), tonos --bg-* más pálidos. */
  background-image: linear-gradient(90deg,
    var(--bg-azul), var(--bg-rosa), var(--bg-azul));
  background-size: 200% 100%;
  animation: cinta-texto 12s linear infinite;
  border: 1px solid rgba(58, 58, 68, 0.1);
  padding: 7px 18px 7px 7px;
  border-radius: 100px;
  box-shadow: 0 8px 24px -14px rgba(58, 58, 68, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #121C27; /* texto azul-negro de marca, en vez del azul de acento heredado */
}
.about_1_heading .sub_title:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px -12px rgba(58, 58, 68, 0.3);
}
.about_1_heading .sub_title .eyebrow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-image: var(--cinta);
  background-size: 200% 100%;
  color: #ffffff;
  font-size: 13px;
  flex-shrink: 0;
  animation: cinta-texto 8s linear infinite;
}

/* Palabra clave del título ("sus cimientos") con la cinta de colores */
.about_1_heading h2 .head_diff {
  background-image: var(--cinta);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cinta-texto 8s linear infinite;
}

/* Checklist: círculos de color pastel con check en vez del ícono plano del template */
.about_1_list ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}
.about-check-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
  color: #ffffff;
  flex-shrink: 0;
}
/* Un color pastel distinto por cada punto de la lista, alternando */
.about_1_list ul li:nth-child(3n+1) .about-check-ico { background: var(--acc-rosa); }
.about_1_list ul li:nth-child(3n+2) .about-check-ico { background: var(--acc-azul); }
.about_1_list ul li:nth-child(3n+3) .about-check-ico { background: var(--acc-verde); }

/* Fotos: apilado vertical estilo collage (opción 3 elegida por el cliente) —
 * una foto grande arriba y una más chica superpuesta abajo con marco blanco,
 * más blobs decorativos pastel detrás. Reemplaza el esquema anterior de dos
 * columnas parejas por uno más alto y con más personalidad.
 *
 * IMPORTANTE — NO usar las clases .image-anime/.reveal (animación GSAP
 * ScrollTrigger) en estas fotos: esa animación arranca en visibility:hidden
 * y solo se revela cuando el scroll dispara el trigger. Si la página carga
 * saltando directo a un ancla de URL (ej. #about, que es justo cómo navega
 * el menú del sitio), el salto nativo del navegador le puede ganar al
 * cálculo de GSAP y la animación nunca dispara — la foto queda invisible
 * para siempre. Por eso estas fotos usan solo data-aos (AOS), que sí maneja
 * bien la carga por ancla, igual que el resto de la página. */
/* CAUSA RAÍZ del bug "las fotos no aparecen en mobile": .xl\:w-6/12 (la clase
 * que le da 50% de ancho a esta columna) solo se activa desde 1280px hacia
 * arriba en este build de Tailwind. Por debajo de eso la columna no tiene
 * ancho explícito, y como TODO su contenido usa position:absolute (no aporta
 * ancho intrínseco), la columna colapsa a ~0px — y los porcentajes de ancho
 * de las fotos (88%, 55%) se calculan sobre ese cero. Se le fuerza 100% de
 * ancho por debajo de 1280px para que tenga una base real. */
@media (max-width: 1279px) {
  .about-photo-col {
    width: 100%;
  }
}
.about_h1_images_area {
  position: relative;
  width: 100%;
  min-height: 480px; /* alto total del bloque, deja espacio para el apilado + la tarjeta flotante */
  margin-bottom: 60px;
}
.about_h1_images_area::before,
.about_h1_images_area::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
/* Blob rosa: esquina superior derecha — ahí la foto de arriba (88% de ancho)
 * deja un huequito libre, así que ahora SÍ se alcanza a ver asomando. */
.about_h1_images_area::before {
  width: 170px;
  height: 170px;
  background: var(--p-rosa);
  top: -25px;
  right: -15px;
  left: auto;
}
/* Blob azul: esquina inferior derecha, justo detrás/debajo de la foto chica. */
.about_h1_images_area::after {
  width: 150px;
  height: 150px;
  background: var(--p-azul);
  bottom: -25px;
  right: -15px;
}

/* Foto grande, arriba a la izquierda */
.about-stack-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 88%;
  height: 300px;
  z-index: 1;
  overflow: hidden;
  border-radius: 30px 100px 30px 100px; /* esquinas asimétricas, mismo criterio orgánico del blob del hero */
  box-shadow: 0 24px 50px -22px rgba(58, 58, 68, 0.3);
}
/* Foto chica, superpuesta abajo a la derecha, con marco blanco tipo polaroid */
.about-stack-bottom {
  position: absolute;
  bottom: 20px;
  right: 0;
  width: 55%;
  height: 220px;
  z-index: 2;
  overflow: hidden;
  border-radius: 100px 30px 100px 30px;
  border: 6px solid #ffffff;
  box-shadow: 0 24px 50px -20px rgba(58, 58, 68, 0.35);
}
.about-stack-top img,
.about-stack-bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* mismo zoom elástico del hero */
}
.about-stack-top:hover img,
.about-stack-bottom:hover img {
  transform: scale(1.06);
}

/* Tarjeta flotante de impacto, esquina inferior izquierda (mismo patrón que el
 * hero: ícono circular con la cinta + cifra en Fraunces con la cinta + texto
 * de apoyo). Se anima solo con transition (no animation) en transform, para
 * no repetir el problema de mezclar animation+transition sobre la misma
 * propiedad. */
.about-impact-badge {
  position: absolute;
  left: 0;
  bottom: -30px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 260px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 16px 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 34px -16px rgba(58, 58, 68, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-impact-badge:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -16px rgba(58, 58, 68, 0.35);
}
.about-impact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-image: var(--cinta);
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
  color: #ffffff;
  font-size: 18px;
  flex-shrink: 0;
}
.about-impact-text {
  display: flex;
  flex-direction: column;
}
.about-impact-number {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  background-image: var(--cinta);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cinta-texto 8s linear infinite;
}
.about-impact-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .about_1_heading .sub_title,
  .about_1_heading .sub_title .eyebrow-ico,
  .about_1_heading h2 .head_diff,
  .about-impact-icon,
  .about-impact-number {
    animation: none;
  }
}

@media (max-width: 767px) {
  .about_h1_images_area {
    min-height: 340px;
    margin-bottom: 50px;
  }
  .about-stack-top { height: 210px; }
  .about-stack-bottom { height: 150px; border-width: 4px; }
  .about-impact-badge {
    max-width: 85%;
    padding: 12px 16px;
    bottom: -24px;
    gap: 10px;
  }
  .about-impact-icon { width: 38px; height: 38px; font-size: 15px; }
  .about-impact-number { font-size: 19px; }
  .about-impact-label { font-size: 11px; }
  .about_h1_images_area::before,
  .about_h1_images_area::after { display: none; }
}

/* ===== ALIADOS (marquee de logos) — una sola línea, misma paleta que el hero
 * pero un tono más oscuro (pasteles "medios" en vez de los ultra clarito del hero). */
.brand_section {
  background-image: linear-gradient(90deg,
    #F5C6D6, #E3C4EC, #BBDCF5, #C4E3C8, #BBDCF5, #E3C4EC, #F5C6D6);
  background-size: 200% 100%;
  animation: cinta-texto 16s linear infinite;
  padding-top: 90px;
  padding-bottom: 80px;
}
.brand_heading1 {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 26px;
}
/* Badge "eyebrow" arriba del título, mismo lenguaje visual que el resto del sitio */
.brand-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 7px 20px 7px 7px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -14px rgba(58, 58, 68, 0.3);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #121C27;
  margin-bottom: 18px;
}
.brand-eyebrow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background-image: var(--cinta);
  background-size: 200% 100%;
  animation: cinta-mueve 8s linear infinite;
  color: #ffffff;
  font-size: 0.85em;
}
.brand_heading1 h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 38px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.2px;
  line-height: 1.3;
  max-width: 640px;
  margin: 0 auto;
  color: #121C27 !important;
}
@media (prefers-reduced-motion: reduce) {
  .brand-eyebrow-ico { animation: none; }
}
@media (max-width: 767px) {
  .brand_heading1 h2 { font-size: 24px !important; }
  .brand_heading1 { padding-bottom: 8px; margin-bottom: 18px; }
  .brand-eyebrow { font-size: 13px; }
}
.brand-single-box {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 84px;
  margin: 0 14px;
  padding: 10px 22px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 30px -18px rgba(58, 58, 68, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.brand-single-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px -16px rgba(58, 58, 68, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .brand_section,
  .brand_heading1 h2 { animation: none; }
}
.brand-single-box img {
  max-height: 54px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
@media (max-width: 767px) {
  .brand_section { padding-top: 56px; padding-bottom: 50px; }
  .brand-single-box { height: 64px; margin: 0 8px; padding: 8px 14px; border-radius: 14px; }
  .brand-single-box img { max-height: 40px; max-width: 150px; }
}