/*
Theme Name: Conga & Galvaia
Theme URI: https://grupogalvaia.com
Author: Equipo Dirección de Marketing
Description: Tema a medida para Conga & Galvaia Grupo Inmobiliario, convertido desde el sitio HTML/CSS/JS original. Páginas editables desde el panel de WordPress (Páginas y Apariencia > Menús).
Version: 1.1
Text Domain: conga-galvaia
*/

/*
================================================================================
  CONGA & GALVAIA — GRUPO INMOBILIARIO
  Archivo: galvaia-styles.css

  ÍNDICE:
  01. Variables y Reset
  02. Base y Contenedor
  03. Navbar
  04. Dropdown Proyectos
  05. Botones globales
  06. Navegación entre páginas (sistema SPA)
  07. Página: Inicio — Hero Slider
  08. Página: Inicio — Stats
  09. Página: Inicio — Tarjetas de proyectos
  10. Página: Inicio — Nosotros + Formulario
  11. Página: Inicio — FAQ
  12. Páginas de Proyecto — Hero
  13. Páginas de Proyecto — Ubicación + Form sticky
  14. Páginas de Proyecto — Iconos beneficios
  15. Páginas de Proyecto — Galería
  16. Páginas de Proyecto — Mapa
  17. Página: Nosotros
  18. Página: Contacto
  19. Footer
  20. Responsive — Tablet ≤ 960px
  21. Responsive — Móvil ≤ 640px
  22. Responsive — Móvil pequeño ≤ 380px
================================================================================
*/


/* ============================================================
   01. VARIABLES Y RESET
   Para cambiar colores de toda la web: modifica aquí
============================================================ */
:root {
  --morado:       #8617c6;
  --morado-h:     #6b12a0;
  --morado-claro: #cc88ff;
  --font:         'Montserrat', sans-serif;
  --max:          1280px;
  --pad-section:  80px;
}

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

html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: var(--font);
  color: #fff;
  overflow-x: hidden;
  min-height: 100vh;
  background: linear-gradient(to bottom,
    #2c134a 0%, #592b8e 30%, #a150fa 55%, #592b8e 78%, #2c134a 100%
  );
}

img { max-width:100%; display:block; }
a   { text-decoration:none; }


/* ============================================================
   02. BASE Y CONTENEDOR
============================================================ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

.section { padding: var(--pad-section) 0; }

.section-tag {
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px; display: block;
}
.section-title {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 900; color: #fff;
  margin-bottom: 14px; line-height: 1.2;
}
/* Título más pequeño para sección de Valores */
.valores-titulo {
  font-size: clamp(18px, 2vw, 26px) !important;
  letter-spacing: 2px;
}
.section-sub {
  color: rgba(255,255,255,0.7);
  font-size: 15px; line-height: 1.75; max-width: 560px;
}
.section-text {
  color: rgba(255,255,255,0.85);
  font-size: 15px; line-height: 1.8; margin-bottom: 16px;
}
.text-center { text-align: center; }
.text-center .section-sub { margin: 0 auto; }


/* ============================================================
   03. NAVBAR
   Sin fondo (siempre transparente)
   Menú: UNA sola barra blanca tipo píldora
   Links: gris normal → morado al hover → morado sólido si activo
============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 34px 0;
  background: transparent;
}
.navbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo */
.nav-logo img {
  height: 56px; width: auto;
  background: #fff;
  border-radius: 10px;
  padding: 5px 10px;
}

/* Barra blanca única que contiene todos los links */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
  background: #ffffff;
  border-radius: 50px;
  padding: 4px 6px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.12);
}

/* Cada link dentro de la barra */
.nav-menu > a,
.nav-menu .drop-btn {
  font-family: var(--font);
  font-size: 13.5px; font-weight: 600;
  color: #555;
  padding: 8px 15px; border-radius: 50px;
  background: transparent; border: none;
  cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s;
  display: flex; align-items: center; gap: 4px;
  text-decoration: none;
}
.nav-menu > a:hover,
.nav-menu .drop-btn:hover {
  background: rgba(134,23,198,0.09);
  color: var(--morado);
}
/* Página activa — morado sólido */
.nav-menu > a.activo {
  background: var(--morado);
  color: #fff;
}

/* Botón CTA derecha */
.nav-cta {
  font-family: var(--font);
  font-weight: 700; font-size: 13.5px;
  background: var(--morado); color: #fff;
  padding: 9px 22px; border-radius: 8px;
  border: none; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .2s;
  box-shadow: 0 2px 12px rgba(134,23,198,0.4);
}
.nav-cta:hover { background: var(--morado-h); transform: translateY(-1px); }

/* Hamburger */
/* Botón hamburger — ícono con borde circular */
.hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 10px; cursor: pointer; padding: 8px 10px;
  z-index: 1100; transition: background .2s, border-color .2s;
  width: 44px; height: 44px;
}
.hamburger:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.6); }
.hamburger span {
  display: block; width: 20px; height: 2px;
  background: #fff; border-radius: 2px; transition: all .32s cubic-bezier(.4,0,.2,1);
}
.hamburger.open { background: var(--morado); border-color: var(--morado); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   04. DROPDOWN PROYECTOS
   Zona ::after invisible = puente para no perder el hover
============================================================ */
.nav-dropdown {
  position: relative; display: flex; align-items: center;
}
.nav-dropdown::after {
  content: ''; position: absolute;
  top: 100%; left: 0; right: 0;
  height: 14px; background: transparent; z-index: 200;
}
.drop-menu {
  visibility: hidden; opacity: 0; pointer-events: none;
  position: absolute;
  top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #fff; border-radius: 12px; padding: 10px 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  display: flex; flex-direction: row; gap: 0;
  z-index: 300;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.drop-col {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 140px; padding: 0 4px;
}
.drop-col-divider {
  width: 1px; background: #eee; margin: 6px 4px;
}
.nav-dropdown:hover .drop-menu,
.nav-dropdown:focus-within .drop-menu {
  visibility: visible; opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown.drop-closed .drop-menu {
  visibility: hidden !important; opacity: 0 !important;
  pointer-events: none !important;
}
.drop-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: #aaa;
  padding: 4px 10px 6px;
}
.drop-divider { display: none; }
.drop-culminado { color: #999 !important; font-style: italic; }
.drop-culminado:hover { background: #f0f0f0 !important; color: #555 !important; }
.drop-menu a {
  font-family: var(--font);
  font-size: 13.5px; font-weight: 600; color: #555;
  padding: 10px 18px; border-radius: 8px;
  display: block; transition: background .18s, color .18s;
  cursor: pointer;
}
.drop-menu a:hover { background: var(--morado); color: #fff; }


/* ============================================================
   05. BOTONES GLOBALES
============================================================ */
.btn-primary {
  font-family: var(--font); font-weight: 700; font-size: 14px;
  background: var(--morado); color: #fff;
  padding: 13px 28px; border-radius: 50px; border: none;
  cursor: pointer; transition: all .25s; display: inline-block;
  box-shadow: 0 4px 18px rgba(134,23,198,0.45);
}
.btn-primary:hover { background: var(--morado-h); transform: translateY(-2px); }

.btn-ghost {
  font-family: var(--font); font-weight: 700; font-size: 14px;
  background: transparent; color: #fff;
  padding: 13px 28px; border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.5);
  cursor: pointer; transition: all .25s; display: inline-block;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

.btn-outline {
  font-family: var(--font); font-weight: 700; font-size: 14px;
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.55);
  padding: 12px 30px; border-radius: 50px;
  cursor: pointer; transition: all .25s; display: inline-block;
}
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.btn-submit {
  width: 100%; background: var(--morado); color: #fff;
  border: none; padding: 13px; border-radius: 50px;
  font-family: var(--font); font-weight: 700; font-size: 14px;
  cursor: pointer; transition: all .25s;
  box-shadow: 0 4px 16px rgba(134,23,198,0.4);
}
.btn-submit:hover { background: var(--morado-h); transform: translateY(-2px); }


/* ============================================================
   06. SISTEMA DE NAVEGACIÓN (SPA)
   Cada "página" es una sección oculta por defecto.
   JavaScript activa/desactiva la clase .page-active.
============================================================ */
.cg-page {
  display: none;         /* Oculto por defecto */
  min-height: 100vh;
}
.cg-page.cg-page-active {
  display: block;        /* Solo la página activa se muestra */
}

/* Páginas sin hero a pantalla completa: necesitan espacio para el navbar fijo */
#page-nosotros,
#page-contacto {
  padding-top: 0;
}

/* Hero banner compacto para páginas internas (Nosotros, Contacto) */
.page-hero-banner {
  padding: 188px 0 28px;
  background: transparent;
  border-bottom: none;
  text-align: center;
}
.page-hero-title {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900; color: #fff;
  line-height: 1.2; margin: 10px 0 12px;
}
.page-hero-sub {
  font-size: clamp(14px, 1.5vw, 16px);
  color: rgba(255,255,255,0.72);
  max-width: 520px; margin: 0 auto;
  line-height: 1.7;
}

/* Banner proyectos culminados — sin hero, con padding navbar */
.culm-banner {
  padding: 170px 0 32px;
  background: transparent;
  border-bottom: none;
  text-align: center;
}
.culm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(134,23,198,0.55); border: 1.5px solid rgba(198,85,255,0.6);
  color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 20px; border-radius: 50px; margin-bottom: 18px;
  backdrop-filter: blur(6px);
}
.culm-title {
  font-size: clamp(26px, 4vw, 48px); font-weight: 900; color: #fff;
  line-height: 1.15; margin-bottom: 18px;
}
.culm-sub {
  font-size: clamp(14px, 1.5vw, 16px); color: rgba(255,255,255,0.72);
  max-width: 680px; margin: 0 auto; line-height: 1.75;
}

/* Chips de datos clave */
.culm-chips {
  padding: 20px 0;
  border-bottom: none;
}
.culm-chips-inner {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.culm-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px; padding: 8px 18px;
  color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600;
}
.chip-icon { font-size: 16px; }

/* Panel lateral proyectos activos */
.culm-panel {
  background: #fff; border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  width: 100%;
}
.culm-panel-title {
  font-size: 18px; font-weight: 800; color: #1a0533;
  margin-bottom: 8px; line-height: 1.3; text-align: center;
}
.culm-panel-sub {
  font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 20px; text-align: center;
}
.culm-panel-btns {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.culm-btn-proj {
  width: 80%; max-width: 260px; background: var(--morado); color: #fff;
  border: none; padding: 11px 20px; border-radius: 50px;
  font-family: var(--font); font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background .2s;
}
.culm-btn-proj:hover { background: #6b12a0; }
.culm-btn-asesor {
  width: 80%; max-width: 260px; background: transparent; color: #888;
  border: 2px solid #ccc; padding: 10px 20px; border-radius: 50px;
  font-family: var(--font); font-weight: 700; font-size: 13px;
  cursor: pointer; transition: all .2s; margin-top: 4px;
}
.culm-btn-asesor:hover { background: #f5f5f5; color: #555; border-color: #aaa; }


/* ============================================================
   07. HERO SLIDER — Página Inicio
============================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slide img,
.hero-slide video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Desktop y tablet (>480px): solo imagen horizontal */
.hero-img-desktop { display: block !important; }
.hero-img-mobile  { display: none !important; }
.slide-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: rgba(255,255,255,0.25);
  background: transparent;
}

/* Contenido del slide — desplazado hacia izquierda */
.hero-slide-content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 140px 8% 100px;
  opacity: 0; pointer-events: none;
  transition: opacity .8s ease;
}
.hero-slide-content.active {
  opacity: 1; pointer-events: all;
}
.hero-slide-inner { max-width: 500px; text-align: left; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 20px; margin-bottom: 18px;
}
.hero-slide-inner h1 {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900; color: #fff; line-height: 1.08; margin-bottom: 14px;
}
.hero-slide-inner h1 span { color: #c655ff; }
.hero-slide-inner p {
  color: rgba(255,255,255,0.85); font-size: 16px;
  line-height: 1.75; margin-bottom: 28px;
}
.hero-btns { display: none; }

/* Dots de navegación del slider */
.hero-dots {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%); z-index: 4;
  display: flex; gap: 10px;
}
.hero-dot {
  width: 10px; height: 10px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,0.4);
  border: 2px solid rgba(255,255,255,0.6);
  cursor: pointer; transition: all .3s;
}
.hero-dot.active { background: #fff; transform: scale(1.3); }


/* ============================================================
   08. STATS — Página Inicio
============================================================ */
.stats { padding: 56px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat { text-align: center; padding: 20px 16px; position: relative; }
.stat:not(:last-child)::after {
  content: ''; position: absolute;
  right: 0; top: 20%; height: 60%; width: 1px;
  background: rgba(255,255,255,0.15);
}
.stat-n {
  font-size: clamp(38px,5vw,56px); font-weight: 900;
  color: #fff; line-height: 1; margin-bottom: 8px;
}
.stat-l { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.65); }


/* ============================================================
   09. TARJETAS DE PROYECTOS — Página Inicio
============================================================ */
.projects-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 22px; margin-top: 48px;
}
.pcard {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 22px rgba(0,0,0,0.2);
  transition: transform .3s, box-shadow .3s;
}
.pcard:hover { transform: translateY(-5px); box-shadow: 0 14px 38px rgba(0,0,0,0.3); }
.pcard-img {
  width: 100%; aspect-ratio: 4/3; overflow: hidden;
  position: relative; background: #ece8f4;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pcard-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 1.5s ease;
}
.pcard-img:hover img { transform: scale(1.08); }
.pcard-ph {
  color: #9480b8; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; position: relative; z-index: 1;
}
.pcard-badge {
  position: absolute; top: 12px; right: 12px;
  background: #22c55e; color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px; z-index: 2;
}
.pcard-body { padding: 20px; }
.pcard-name { font-size: 17px; font-weight: 700; color: var(--morado); margin-bottom: 8px; }
.pcard-desc { color: #555; font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.pcard-price { font-size: 18px; font-weight: 900; color: var(--morado); }


/* ============================================================
   10. NOSOTROS + FORMULARIO — Página Inicio
============================================================ */
.about-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 64px; align-items: start;
}
.feats { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.feat {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 10px; padding: 14px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: transform .2s;
}
.feat:hover { transform: translateX(4px); }
.feat-icon {
  width: 38px; height: 38px; min-width: 38px; border-radius: 8px;
  background: rgba(134,23,198,0.12);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.feat-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
.feat-text  { font-size: 12px; color: #555; line-height: 1.5; }

/* Formulario */
.form-box {
  background: #fff; border-radius: 16px; padding: 32px;
  box-shadow: 0 8px 36px rgba(0,0,0,0.2);
  position: sticky; top: 130px;
}
/* Contenedor del formulario embebido de GoHighLevel.
   El iframe usa height:100%, así que este contenedor necesita una
   altura propia — 761px viene del data-height que trae el embed;
   si GoHighLevel cambia el alto del formulario, actualiza este valor
   también. */
/* Sin min-height fijo: dejamos que el script de GoHighLevel
   (form_embed.js) ajuste el alto real del formulario según su
   contenido. El "761px" es solo un punto de partida mientras carga. */
/* Contenedor del formulario: alto más proporcionado (761px era el
   valor genérico del código de GoHighLevel, pero para un formulario
   corto de pocos campos se ve exagerado). Si al probarlo en vivo el
   formulario real de GHL queda con espacio de más o de menos, ajusta
   este mismo número en los dos lugares: aquí y en el atributo
   style="height:...px" del <iframe> en cada página. */
.form-title { font-size: 20px; font-weight: 900; color: #1a1a1a; margin-bottom: 4px; }
.form-sub   { font-size: 13px; color: #666; margin-bottom: 20px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fg { margin-bottom: 12px; }
.fg label { display: block; font-size: 12px; font-weight: 600; color: #444; margin-bottom: 5px; }
.fg label em { color: var(--morado); font-style: normal; }
.fg input, .fg select, .fg textarea {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid #ddd; border-radius: 8px;
  font-family: var(--font); font-size: 13px;
  color: #333; background: #fafafa;
  outline: none; transition: border-color .2s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--morado); background: #fff;
}
.fg textarea { resize: none; height: 76px; }
.chk { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.chk input { margin-top: 2px; accent-color: var(--morado); }
.chk label { font-size: 12px; color: #666; line-height: 1.5; }
.chk a { color: var(--morado); }


/* ============================================================
   10b. GALERÍA CLIENTES — 2 filas, scroll automático infinito
============================================================ */
.clientes-section { padding-bottom: var(--pad-section); }

.clientes-outer {
  width: 100%; overflow: hidden;
  cursor: grab;
}
.clientes-outer:active { cursor: grabbing; }

/* Fila 1 — izquierda a derecha */
.clientes-track {
  display: flex; gap: 18px;
  width: max-content;
  animation: clientesScroll 32s linear infinite;
}
/* Fila 2 — derecha a izquierda */
.clientes-track-rev {
  animation: clientesScrollRev 32s linear infinite;
}

.clientes-track:hover,
.clientes-track-rev:hover { animation-play-state: paused; }

@keyframes clientesScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes clientesScrollRev {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.cli-item { flex-shrink: 0; }
.cli-img {
  width: 280px; height: 200px;
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
}
.cli-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cli-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3); font-size: 12px; text-align: center; padding: 8px;
}

/* ============================================================
   11. FAQ — Página Inicio
============================================================ */
.faq-list {
  max-width: 780px; margin: 42px auto 0;
  display: flex; flex-direction: column; gap: 14px;
}
.faq-item {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: box-shadow .2s;
}
.faq-item:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.15); }
.faq-btn {
  width: 100%; background: none; border: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 17px 22px; color: #1a1a1a;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left; gap: 12px;
}
.faq-icon {
  width: 28px; height: 28px; min-width: 28px;
  border: 2px solid var(--morado); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--morado); font-size: 18px; line-height: 1;
  transition: transform .3s, background .2s;
}
.faq-body {
  max-height: 0; overflow: hidden; transition: max-height .4s ease;
}
.faq-body p { padding: 0 22px 16px; color: #555; font-size: 14px; line-height: 1.7; }
.faq-item.open .faq-body { max-height: 200px; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--morado); color: #fff; }


/* ============================================================
   12. HERO PROYECTO — Armonika / Gemalta / Cataleya
============================================================ */
.hero-project {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.hero-project-bg { position: absolute; inset: 0; z-index: 0; }
/* object-fit: cover recorta el video para llenar el hero sin deformarlo.
   position:absolute permite superponer el video horizontal y el vertical;
   la clase .hero-img-desktop / .hero-img-mobile (con !important) decide
   cuál de los dos se muestra según el ancho de pantalla. */
.hero-project-bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-project-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: rgba(255,255,255,0.25); background: transparent;
}
.hero-project-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(20,5,45,0.35);
}
/* Refiere y Gana: sin overlay de color sobre el video del hero
   (las demás páginas de proyecto lo conservan) */
#page-refiere-y-gana .hero-project-overlay {
  background: transparent;
}
.hero-project-content {
  position: relative; z-index: 2; width: 100%; padding: 172px 0 80px;
}
.hero-project-content h1 {
  font-size: clamp(24px, 3.5vw, 42px); font-weight: 900; color: #fff;
  line-height: 1.2; margin-bottom: 14px;
}
.hero-project-content p {
  color: #fff; font-size: 15px;
  line-height: 1.75; max-width: 560px; margin-bottom: 28px;
}


/* ============================================================
   13. UBICACIÓN + FORMULARIO STICKY — Proyectos
============================================================ */
.ubicacion-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 60px; align-items: start;
}
/* Grid páginas culminadas — más espacio al texto, panel más compacto */
.culm-grid {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 48px; align-items: start;
}
.form-sticky { position: sticky; top: 130px; align-self: start; }
.form-sticky .form-box { position: static; }

.video-box {
  width: 100%; border-radius: 14px; overflow: hidden;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35); font-size: 14px; margin: 24px 0;
}
.video-box video, .video-box iframe { width: 100%; height: 100%; border: none; display: block; }

/* Video de avances de obra — proporción 16/9 estándar en todos los dispositivos */
.video-avance {
  width: 100%; border-radius: 14px; overflow: hidden;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35); font-size: 14px; margin: 24px 0;
}
.video-avance video, .video-avance iframe { width: 100%; height: 100%; border: none; display: block; }


/* ============================================================
   14. ICONOS BENEFICIOS — Proyectos
============================================================ */
.beneficios-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 18px; margin-top: 36px;
}
.beneficio-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px; padding: 22px 14px; text-align: center;
  transition: background .25s, transform .25s;
}
.beneficio-card:hover { background: rgba(255,255,255,0.14); transform: translateY(-4px); }
.beneficio-icon {
  width: 60px; height: 60px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.beneficio-icon img {
  width: 100%; height: 100%; object-fit: contain;
  filter: brightness(0) invert(1); /* Convierte iconos oscuros a blancos */
}
.beneficio-nombre { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.4; }


/* ============================================================
   15. GALERÍA — Proyectos
============================================================ */
.galeria-main {
  position: relative; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16/6; background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12); margin-bottom: 14px;
  width: calc(100% + 120px); margin-left: -80px;
}
.galeria-main img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s;
}
.galeria-main img.active { opacity: 1; }

/* Carrusel centrado dentro del wrap — sin desborde */
.galeria-carrusel {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 16/9; background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  width: 100%; max-width: 100%;
}
.galeria-carrusel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s;
}
.galeria-carrusel img.active { opacity: 1; }

/* ── CARRUSEL 3 EN PANTALLA ─────────────────────────────── */
.gal3-outer {
  position: relative;           /* contiene las flechas sin cortarlas */
}
.gal3-wrap {
  overflow: hidden;             /* solo el track se recorta */
}
.gal3-track {
  display: flex; gap: 16px;
  transition: transform .42s cubic-bezier(.4,0,.2,1);
  width: 100%;
}
.gal3-item {
  flex: 0 0 calc((100% - 32px) / 3);
  display: flex; flex-direction: column; gap: 10px;
}
.gal3-img {
  position: relative; border-radius: 14px; overflow: hidden;
  aspect-ratio: 4/3;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}
.gal3-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal3-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3); font-size: 12px; text-align: center; padding: 8px;
}
.gal3-label {
  text-align: center; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.85); letter-spacing: .3px;
}
.gal3-arrow {
  position: absolute; top: 42%; transform: translateY(-50%);
  z-index: 10;
  background: rgba(15,5,35,0.72); backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,0.35); color: #fff;
  width: 42px; height: 42px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.gal3-arrow:hover { background: var(--morado); border-color: var(--morado); }
.gal3-prev { left: -21px; }
.gal3-next { right: -21px; }

@media (max-width: 1080px) {
  .gal3-item { flex: 0 0 calc((100% - 16px) / 2); }
}
@media (max-width: 640px) {
  .gal3-item { flex: 0 0 100%; }
  .gal3-track { gap: 0; }
  .gal3-prev { left: 4px; }
  .gal3-next { right: 4px; }
}
.galeria-carrusel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s;
}
.galeria-carrusel img.active { opacity: 1; }

.galeria-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3); font-size: 14px;
}
.gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.12); backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,0.4); color: #fff;
  width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .22s; z-index: 2;
}
.gal-arrow:hover { background: var(--morado); border-color: var(--morado); transform: translateY(-50%) scale(1.1); }
.gal-arrow.prev { left: 14px; }
.gal-arrow.next { right: 14px; }
.gal-thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.gal-thumb {
  border-radius: 10px; overflow: hidden; aspect-ratio: 4/3;
  cursor: pointer; border: 2px solid transparent;
  background: rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3); font-size: 11px; transition: border-color .2s;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumb.active { border-color: var(--morado); }

/* ── GALERÍA STRIP — ancho completo, múltiples imágenes visibles ── */
.gal-strip-section { padding-bottom: 0; }
.gal-strip-wrap {
  position: relative;
  display: flex; align-items: center;
  width: 100%; margin-top: 28px;
  overflow: hidden;
}
.gal-strip-track {
  display: flex; gap: 12px;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  padding: 0 56px;          /* espacio para flechas */
  box-sizing: border-box;
  width: 100%;
}
.gal-strip-item {
  flex: 0 0 calc(20% - 10px);   /* 5 visibles a la vez */
  display: flex; flex-direction: column; gap: 10px;
}
.gal-strip-img {
  position: relative; border-radius: 14px; overflow: hidden;
  aspect-ratio: 3/4;            /* proporción cuadrada/rectangular como imagen */
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
.gal-strip-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gal-strip-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3); font-size: 12px;
}
.gal-strip-label {
  text-align: center; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.85); letter-spacing: .3px;
}
.gal-strip-arrow {
  position: absolute; top: 50%; transform: translateY(-60%);
  z-index: 10; background: rgba(20,5,45,0.7); backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,0.35); color: #fff;
  width: 42px; height: 42px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.gal-strip-arrow:hover { background: var(--morado); border-color: var(--morado); }
.gal-strip-prev { left: 8px; }
.gal-strip-next { right: 8px; }

/* Responsive strip */
@media (max-width: 1080px) {
  .gal-strip-item { flex: 0 0 calc(33.33% - 9px); }
}
@media (max-width: 640px) {
  .gal-strip-item { flex: 0 0 calc(50% - 7px); }
  .gal-strip-track { padding: 0 44px; }
}


/* ============================================================
   16. MAPA — Proyectos
============================================================ */
.mapa-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
.mapa-box {
  border-radius: 14px; overflow: hidden; aspect-ratio: 4/3;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35); font-size: 13px;
}
.mapa-box iframe { width: 100%; height: 100%; border: none; display: block; }
.mapa-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.btn-maps {
  font-family: var(--font); font-weight: 700; font-size: 13px;
  background: var(--morado); color: #fff; padding: 10px 22px;
  border-radius: 50px; border: none; cursor: pointer; text-decoration: none;
  transition: all .22s; box-shadow: 0 3px 14px rgba(134,23,198,0.4);
}
.btn-maps:hover { background: var(--morado-h); transform: translateY(-2px); }
.btn-wsp {
  font-family: var(--font); font-weight: 700; font-size: 13px;
  background: transparent; color: #fff; padding: 10px 22px;
  border-radius: 50px; border: 2px solid rgba(255,255,255,0.5);
  cursor: pointer; text-decoration: none; transition: all .22s;
}
.btn-wsp:hover { border-color: #fff; background: rgba(255,255,255,0.08); }


/* ============================================================
   17. PÁGINA NOSOTROS
============================================================ */
/* Tarjetas Misión / Visión / Propósito — fondo blanco */
.mv-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; max-width: 720px; margin-left: auto; margin-right: auto; }

/* Grid 2 columnas Misión/Visión | Propósito/Valores */
.mvpv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.mvpv-col { display: flex; flex-direction: column; gap: 20px; }
.mv-card-valores { flex-direction: column; align-items: flex-start; }
.mv-card-valores .mv-card-body { gap: 0; width: 100%; }

/* Imagen empresa en carrusel — más alta */
.cli-img-empresa { width: 300px; height: 220px; }

/* ── SLIDER GALERÍA EMPRESA ───────────────────────────────── */
.empresa-slider {
  position: relative; width: 100%; max-width: 900px;
  margin: 32px auto 0; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16/7; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}
.emp-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .7s ease;
}
.emp-slide.active { opacity: 1; }
.emp-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emp-ph { color: rgba(255,255,255,0.3); font-size: 14px; }

.emp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; background: rgba(15,5,35,0.65); backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,0.35); color: #fff;
  width: 42px; height: 42px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.emp-arrow:hover { background: var(--morado); border-color: var(--morado); }
.emp-prev { left: 14px; }
.emp-next { right: 14px; }

.emp-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 5;
}
.emp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4); cursor: pointer;
  transition: background .2s, transform .2s;
}
.emp-dot.active { background: #fff; transform: scale(1.3); }
.mv-card {
  background: #fff;
  border: none;
  border-radius: 16px; padding: 22px 20px;
  display: flex; flex-direction: row; gap: 16px;
  align-items: flex-start;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: box-shadow .25s, transform .25s;
  flex: 1;                /* altura igual entre tarjetas de la misma columna */
}
.mv-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mv-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,0.22);
  transform: translateY(-3px);
}

/* Ícono en cada tarjeta — reducido */
.mv-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--morado);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mv-icon svg { width: 19px; height: 19px; fill: #fff; }

/* Ícono de valores — aún más pequeño */
.mv-card-valores .mv-icon { width: 28px; height: 28px; border-radius: 7px; }
.mv-card-valores .mv-icon svg { width: 14px; height: 14px; }

.mv-card h3 {
  font-size: 13px; font-weight: 800; color: #555;
  letter-spacing: 2px; text-transform: uppercase;
  margin: 0;
}
.mv-card p { color: #777; font-size: 13px; line-height: 1.8; margin: 0; }

/* Sección Valores */
.valores-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.valores-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.valores-list li {
  display: flex; align-items: center; gap: 10px;
  color: #777; font-size: 13px; font-weight: 600;
  padding: 4px 0;
  background: none;
  border: none;
  line-height: 1;
}
.valores-list li span { line-height: 1; }

/* Ícono check para cada valor — más pequeño */
.valor-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--morado);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.valor-icon svg { width: 12px; height: 12px; fill: #fff; }

.valores-img {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px; aspect-ratio: 4/3; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35); font-size: 14px;
}
.valores-img img { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================
   18. PÁGINA CONTACTO
============================================================ */
.contacto-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 48px; align-items: start;
}

/* Columna izquierda: concepto + video */
.contacto-concepto { display: flex; flex-direction: column; gap: 28px; }
.concepto-titulo {
  font-size: clamp(20px, 2.5vw, 30px); font-weight: 900;
  color: #fff; line-height: 1.25; margin-bottom: 16px;
}
.concepto-desc {
  color: rgba(255,255,255,0.75); font-size: 14px; line-height: 1.8;
  margin-bottom: 10px;
}
.concepto-desc strong { color: #fff; }
.concepto-stats {
  display: flex; gap: 24px; padding: 20px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.concepto-stat { display: flex; flex-direction: column; gap: 3px; }
.concepto-num {
  font-size: 28px; font-weight: 900; color: #fff;
  line-height: 1;
}
.concepto-label { font-size: 11px; color: rgba(255,255,255,0.55); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

.contacto-video {
  border-radius: 14px; overflow: hidden; aspect-ratio: 16/9;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35); font-size: 14px;
}
.contacto-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

.oficinas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.oficina-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px; overflow: hidden;
}
.oficina-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.oficina-icon {
  width: 40px; height: 40px; min-width: 40px;
  background: var(--morado); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.oficina-icon svg { width: 20px; height: 20px; fill: #fff; }
.oficina-header h3 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.oficina-header span { font-size: 12px; color: rgba(255,255,255,0.6); }
.oficina-mapa {
  aspect-ratio: 16/10; background: rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35); font-size: 13px; overflow: hidden;
}
.oficina-mapa iframe { width: 100%; height: 100%; border: none; display: block; }
.oficina-mapa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oficina-footer { padding: 14px 20px; text-align: center; }
.oficina-footer p { color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 500; line-height: 1.6; }

.cta-final { text-align: center; padding: 64px 0; }
.cta-final h2 { font-size: clamp(22px,3vw,36px); font-weight: 900; color: #fff; margin-bottom: 12px; }
.cta-final p  { color: rgba(255,255,255,0.72); font-size: 15px; margin-bottom: 28px; }


/* ============================================================
   19. FOOTER
============================================================ */
.footer { padding: 60px 0 24px; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px; margin-bottom: 44px;
}
.footer-logo img {
  height: 58px; width: auto; background: #fff;
  border-radius: 10px; padding: 5px 10px; margin-bottom: 14px;
}
.footer-desc { color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.7; margin-bottom: 18px; }
.footer-socials { display: flex; gap: 8px; }
.soc {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; transition: all .22s;
}
.soc svg { width: 15px; height: 15px; fill: currentColor; }
.soc:hover { background: var(--morado); border-color: var(--morado); transform: translateY(-2px); }
.footer-col h5 {
  color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col ul li { display: flex; align-items: center; gap: 9px; }
.footer-col ul li a { color: rgba(255,255,255,0.55); font-size: 13px; transition: color .2s; cursor: pointer; }
.footer-col ul li a:hover { color: #fff; }
.footer-col ul li span { color: rgba(255,255,255,0.55); font-size: 13px; }
.footer-ico {
  width: 15px; height: 15px; min-width: 15px;
  fill: rgba(255,255,255,0.45); flex-shrink: 0;
}
.footer-culminados-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  margin-top: 6px; display: block;
}
.footer-culminado {
  color: rgba(255,255,255,0.35) !important;
  font-style: italic;
}
.footer-culminado:hover { color: rgba(255,255,255,0.65) !important; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p { color: rgba(255,255,255,0.35); font-size: 12px; }
.footer-bottom a { color: rgba(255,255,255,0.4); font-size: 12px; transition: color .2s; }
.footer-bottom a:hover { color: #fff; }


/* ============================================================
   19b. PÁGINA BLOG
   Grid de entradas. Cada tarjeta usa .blog-card; por ahora las
   3 tarjetas de ejemplo se pueden duplicar/editar directo en el
   HTML (busca "TARJETA BLOG" en index.html). Cuando el sitio
   pase a WordPress, este grid se puede alimentar con el loop
   de entradas del blog.
============================================================ */
.blog-filtros {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin: 0 0 40px;
}
.blog-filtro {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 9px 20px; border-radius: 50px;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.blog-filtro:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.blog-filtro.activo { background: var(--morado); border-color: var(--morado); color: #fff; }

.blog-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 26px;
}
.blog-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 22px rgba(0,0,0,0.2);
  transition: transform .3s, box-shadow .3s;
  display: flex; flex-direction: column;
  cursor: pointer;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,0.3); }
.blog-card-img {
  position: relative; aspect-ratio: 16/10;
  background: linear-gradient(135deg, #f0e4fb, #e3cffb);
  display: flex; align-items: center; justify-content: center;
  color: rgba(134,23,198,0.35); font-size: 12px; font-weight: 700;
  overflow: hidden;
}
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--morado); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 50px;
}
.blog-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: #999; font-weight: 600;
}
.blog-card-meta span:not(:last-child)::after { content: '•'; margin-left: 10px; color: #ccc; }
.blog-card-title {
  font-size: 17px; font-weight: 800; color: #1a1a1a; line-height: 1.35;
}
.blog-card-desc { font-size: 13.5px; color: #666; line-height: 1.6; flex: 1; }
.blog-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--morado);
  margin-top: 4px; transition: gap .2s;
}
.blog-card:hover .blog-card-link { gap: 10px; }

/* Aviso de "próximamente" mientras no hay entradas reales */
.blog-aviso {
  text-align: center; max-width: 560px; margin: 0 auto 44px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 18px 24px; font-size: 13.5px;
  color: rgba(255,255,255,0.75); line-height: 1.6;
}


/* ============================================================
   19c. PÁGINA REFIERE Y GANA
============================================================ */

/* Pasos Cómo Funciona */
.refiere-pasos {
  display: flex; align-items: flex-start; gap: 16px;
  justify-content: center; flex-wrap: wrap;
}
.refiere-paso {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 32px 24px;
  text-align: center; flex: 1; min-width: 200px; max-width: 280px;
}
.refiere-paso-num {
  font-size: 36px; font-weight: 900; color: #c655ff;
  opacity: .35; line-height: 1; margin-bottom: 12px;
}
.refiere-paso-icon { font-size: 36px; margin-bottom: 14px; }
.refiere-paso h3 { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.refiere-paso p  { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.7; }
.refiere-paso-flecha {
  font-size: 28px; color: rgba(255,255,255,0.25);
  align-self: center; padding-top: 24px; flex-shrink: 0;
}

/* Beneficios — fondo blanco */
.refiere-beneficios {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;
}
.refiere-beneficio {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px; padding: 28px 22px; text-align: center;
  transition: background .2s, transform .2s;
}
.refiere-beneficio:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); }
.refiere-ben-icon { font-size: 34px; margin-bottom: 14px; }
.refiere-beneficio h4 { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.refiere-beneficio p  { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.7; }

/* Formulario grid */
.refiere-form-grid {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start;
}
.refiere-info { padding-top: 8px; }

/* Destacados en columna izquierda */
.refiere-destacados { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.refiere-destacado {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.refiere-dest-ico {
  font-size: 22px; flex-shrink: 0; margin-top: 2px;
}
.refiere-destacado strong {
  display: block; font-size: 14px; font-weight: 700; color: #1a0533; margin-bottom: 3px;
}
.refiere-destacado span {
  font-size: 13px; color: #666; line-height: 1.6;
}
.refiere-destacado span a { color: #8617c6; font-weight: 700; }

/* ============================================================
   20. RESPONSIVE — TABLET ≤ 1080px
   (antes el corte era en 960px: en tablets como iPad, 1024px de
   ancho, el menú de escritorio quedaba muy apretado. Subimos el
   punto de quiebre para que el menú hamburguesa entre antes y
   los grids se acomoden mejor en pantallas de tablet)
============================================================ */
@media (max-width: 1080px) {
  .wrap { padding: 0 20px; }

  /* Nav mobile */
  .nav-menu { display: none; }
  .nav-cta  { display: none; }
  .hamburger { display: flex; }

  .nav-menu.open {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(300px, 88vw);
    background: #120530;
    z-index: 1050; align-items: stretch; justify-content: flex-start;
    gap: 6px; padding: 104px 14px 36px;
    overflow-y: auto;
    box-shadow: -12px 0 48px rgba(0,0,0,0.6);
    animation: slideInRight .28s cubic-bezier(.4,0,.2,1);
  }
  @keyframes slideInRight {
    from { transform: translateX(110%); }
    to   { transform: translateX(0); }
  }
  .nav-menu.open > a {
    font-size: 15px; font-weight: 600; padding: 12px 16px;
    border-radius: 10px; color: rgba(255,255,255,0.85) !important;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    display: block; text-align: left;
    transition: background .18s, color .18s;
  }
  .nav-menu.open > a:hover  { background: rgba(255,255,255,0.1); color: #fff !important; }
  .nav-menu.open > a.activo { background: var(--morado); color: #fff !important; border-color: var(--morado); }
  .nav-menu.open .nav-dropdown { flex-direction: column; width: 100%; align-items: stretch; position: static; }
  .nav-menu.open .nav-dropdown::after { display: none; }
  .nav-menu.open .drop-btn {
    font-size: 15px; font-weight: 600; padding: 12px 16px;
    border-radius: 10px; color: rgba(255,255,255,0.85) !important;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; cursor: pointer; transition: background .18s;
  }
  .nav-menu.open .drop-btn:hover,
  .nav-menu.open .nav-dropdown.mob-open .drop-btn { background: rgba(134,23,198,0.3); color: #fff !important; }
  /* Submenú oculto por defecto en mobile */
  .nav-menu.open .drop-menu {
    visibility: hidden; opacity: 0; max-height: 0; overflow: hidden;
    position: static; transform: none;
    background: rgba(134,23,198,0.15);
    border: 1px solid rgba(134,23,198,0.3);
    border-radius: 10px; padding: 0; margin-top: 4px; width: 100%;
    display: flex; flex-direction: column;
    box-shadow: none; pointer-events: none;
    transition: opacity .22s, max-height .28s, padding .22s;
  }
  /* Submenú visible al hacer clic */
  .nav-menu.open .nav-dropdown.mob-open .drop-menu {
    visibility: visible; opacity: 1; max-height: 300px;
    padding: 8px 6px; pointer-events: all;
  }
  .nav-menu.open .drop-col { min-width: unset; padding: 0; display: flex; flex-direction: column; }
  .nav-menu.open .drop-col-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.12); margin: 4px 0; }
  .nav-menu.open .drop-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.4); padding: 5px 10px 3px; }
  .nav-menu.open .drop-menu a { color: rgba(255,255,255,0.82) !important; font-size: 14px; padding: 9px 12px; border-radius: 8px; text-align: left; display: block; font-style: normal; transition: background .15s; }
  .nav-menu.open .drop-menu a:hover { background: var(--morado); color: #fff !important; }
  .nav-menu.open .drop-culminado { color: rgba(255,255,255,0.45) !important; font-style: italic; }
  .nav-menu.open .drop-culminado:hover { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.7) !important; }
  .nav-cta-mob {
    display: block !important; width: 100%; margin-top: 8px;
    text-align: center; background: var(--morado); color: #fff !important;
    font-family: var(--font); font-weight: 700; font-size: 15px;
    padding: 14px 20px; border-radius: 50px; text-decoration: none; border: none;
  }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2)::after, .stat:nth-child(4)::after { display: none; }

  /* Proyectos */
  .projects-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }

  /* Nosotros / Form */
  .about-grid, .ubicacion-grid, .mapa-grid,
  .refiere-beneficios { grid-template-columns: repeat(2,1fr); }
  .refiere-form-grid { grid-template-columns: 1fr; gap: 32px; }
  .refiere-paso-flecha { display: none; }
  .refiere-paso { min-width: 160px; }
  .mv-grid, .mvpv-grid, .valores-wrap, .contacto-grid, .oficinas-grid {
    grid-template-columns: 1fr; gap: 28px;
  }
  .form-box   { position: static; }
  .form-sticky { position: static; }
  .form-row   { grid-template-columns: 1fr 1fr; }

  /* Galería */
  .gal-thumbs  { grid-template-columns: repeat(2,1fr); }
  .beneficios-grid { grid-template-columns: repeat(3,1fr); }

  /* Blog */
  .blog-grid { grid-template-columns: repeat(2,1fr); }

  /* Proyectos CULMINADOS — columna única en tablet */
  .culm-grid { grid-template-columns: 1fr; gap: 32px; }
  .culm-panel { max-width: 480px; margin: 0 auto; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}


/* ============================================================
   21. RESPONSIVE — MÓVIL ≤ 640px
============================================================ */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .nav-logo img { height: 42px; }
  .navbar { padding: 20px 0; }
  .section { padding: 52px 0; }
  .section-title { font-size: 22px; }
  .section-sub, .section-text { font-size: 14px; }

  /* Hero */
  /* Hero mobile */
  .hero-slide-content { padding: 100px 16px 70px; justify-content: flex-start; }
  .hero-slide-inner { max-width: 100%; }
  .hero-slide-inner h1 { font-size: clamp(28px, 8vw, 38px); }
  .hero-slide-inner { max-width: 100%; }
  .hero-slide-inner h1 { font-size: clamp(26px,7vw,36px); }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns a { text-align: center; width: 100%; }
  .hero-project-content h1 { font-size: clamp(20px, 5vw, 28px); }

  /* Hero proyecto activo / culminado en mobile */
  .hero-project-content { padding: 132px 0 60px; }
  .hero-project-content h1 { font-size: clamp(22px, 6vw, 32px); }
  .hero-project-content p { font-size: 14px; }

  /* Proyectos CULMINADOS mobile */
  .culm-grid { grid-template-columns: 1fr; gap: 24px; }
  .culm-panel { width: 100%; max-width: 100%; }
  .culm-panel-btns { align-items: stretch; }
  .culm-btn-proj, .culm-btn-asesor { width: 100%; max-width: 100%; }
  .culm-badge { font-size: 10px; padding: 6px 14px; }

  /* Video avances — ocupa ancho completo en mobile */
  .video-avance { border-radius: 10px; margin: 16px 0; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-n { font-size: 30px; }
  .stat::after { display: none !important; }

  /* Proyectos */
  .projects-grid { grid-template-columns: 1fr; }
  .beneficios-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }
  .blog-filtros { gap: 8px; }
  .blog-filtro { font-size: 12px; padding: 8px 16px; }

  /* Forms */
  .form-box { padding: 22px 16px; }
  .form-row { grid-template-columns: 1fr; }

  /* Nosotros / Ubicación / Mapa / Refiere — 1 sola columna en mobile
     (bug: heredaban las 2 columnas del breakpoint de tablet ≤960px
     y el formulario quedaba comprimido/cortado) */
  .about-grid, .ubicacion-grid, .mapa-grid, .refiere-beneficios {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Refiere y Gana — pasos "¿Cómo funciona?" en una sola tarjeta por fila
     (antes usaban flex-wrap y a veces caían 2 por fila de forma desordenada) */
  .refiere-pasos { flex-direction: column; align-items: stretch; }
  .refiere-paso  { max-width: 100%; min-width: 0; width: 100%; }

  /* FAQ */
  .faq-btn { font-size: 13px; padding: 14px 16px; }

  /* Nosotros — tarjetas compactas en mobile */
  .mv-card { padding: 14px 12px; gap: 10px; }
  .mv-card h3 { font-size: 11px; letter-spacing: 1.5px; }
  .mv-card p { font-size: 12px; line-height: 1.7; }
  .mv-icon { width: 30px; height: 30px; border-radius: 8px; }
  .mv-icon svg { width: 15px; height: 15px; }
  .mv-card-valores .mv-icon { width: 22px; height: 22px; }
  .mv-card-valores .mv-icon svg { width: 11px; height: 11px; }
  .mvpv-grid { gap: 12px; }
  .mvpv-col { gap: 12px; }

  /* Galería empresa — más grande en mobile, bordes redondeados conservados */
  .empresa-slider {
    max-width: 100%;
    border-radius: 16px;
    aspect-ratio: 4/3;
    margin-left: 0; margin-right: 0;
  }
  .emp-arrow { width: 36px; height: 36px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}


/* ============================================================
   21b. HERO VERTICAL — Solo celulares ≤ 480px
============================================================ */
@media (max-width: 480px) {
  .hero { min-height: 100svh; }
  .hero-img-desktop { display: none !important; }
  .hero-img-mobile  { display: block !important; object-position: center top; }

  /* Texto posicionado en la parte inferior de la imagen */
  .hero-slide-content {
    position: absolute; inset: 0;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 20px 140px;
  }
  .hero-slide-inner { max-width: 100%; }
  .hero-slide-inner h1 { font-size: clamp(22px, 6vw, 28px); margin-bottom: 6px; }
  .hero-slide-inner p  { font-size: 13px; margin-bottom: 0; }
  .hero-badge { margin-bottom: 8px; }
  .hero-btns  { display: none !important; }
}

/* ============================================================
   22. RESPONSIVE — MÓVIL PEQUEÑO ≤ 380px
============================================================ */
@media (max-width: 380px) {
  .nav-logo img { height: 36px; }
  .section-title { font-size: 20px; }
  .hero-slide-inner h1 { font-size: 22px; }
  .stat-n { font-size: 26px; }
}

/* ============================================================
   EXTRA — Contenido de entradas individuales del Blog
============================================================ */
.single-post-content h2,
.single-post-content h3 {
  color: #fff;
  margin: 28px 0 12px;
  line-height: 1.3;
}
.single-post-content p { margin-bottom: 16px; }
.single-post-content img {
  max-width: 100%;
  border-radius: 12px;
  margin: 20px 0;
  display: block;
}
.single-post-content figure { margin: 20px 0; }
.single-post-content ul,
.single-post-content ol { margin: 0 0 16px 20px; }
.single-post-content a { color: var(--morado-claro); text-decoration: underline; }

.page-links a,
.page-links > span {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.55);
  color: #fff;
}

/* ============================================================
   EXTRA — Contenedor del formulario embebido de GoHighLevel
   (el iframe usa height:100%, así que este contenedor necesita
   un alto propio; sin esto, en mobile el navegador improvisa
   y deja espacios enormes entre campos)
============================================================ */
.ghl-form-embed { min-height: 620px; }
.ghl-form-embed iframe { min-height: 620px; }

@media (max-width: 640px) {
  .ghl-form-embed { min-height: 720px; }
  .ghl-form-embed iframe { min-height: 720px; }
}

/* ============================================================
   EXTRA — Refiere y Gana: hero más corto en mobile
   (el texto del hero quedó desactivado en el diseño original,
   así que sin él el video/imagen no llenaba el alto completo
   de 100vh, dejando un espacio vacío grande debajo)
============================================================ */
@media (max-width: 640px) {
  #page-refiere-y-gana .hero-project { min-height: 60vh; }
}