/* ===========================
   Presentación mentaBase
   =========================== */

/* ---- Layout específico de presentacion ---- */
#folleto .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; }
#folleto .section { margin: 44px 0; }
#folleto .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
#folleto .cta-row.center { justify-content: center; }
#folleto .hero-shot { margin-top: 16px; }

/* ---- Conmutador de idioma (opcional, discreto) ---- */
.lang-switch {
  position: absolute; right: 24px; top: 8px;
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 0.95rem; opacity: .85;
}
.lang-switch a { text-decoration: none; }
.lang-switch .sep { opacity: .6; }
.lang-switch [aria-current="page"] { font-weight: 600; }

/* ---- Hero: logo arriba + nombre (Press Start) ---- */
.hero-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.logo-hero {
  height: clamp(90px, 12vw, 120px);
  width: auto;
  display: block;
  margin-bottom: 8px;
}
.hero-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.4rem;
  color: var(--primary-color, #105b63);
  line-height: 1;
}

/* ---- Imagen HERO con borde elegante ---- */
#folleto .hero-shot.bordered img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--secondary-color, #000) 35%, transparent);
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
}

/* ---- Galería (grid y hover sutil) ---- */
#folleto .gallery-3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}

#folleto .gallery-3 figure {
  overflow: hidden;
  border-radius: 12px;
}

#folleto .gallery-3 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}

#folleto .gallery-3 img:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

@media (max-width: 768px) {
  #folleto .gallery-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #folleto .gallery-3 figure::after {
    opacity: 1;
    transform: none;
  }
}

#folleto .gallery-3 img {
  cursor: zoom-in;
}

/* =========================================================
   SECTION: Capturas hover caption
   ========================================================= */

#folleto .gallery-3 figure {
  position: relative;
}

#folleto .gallery-3 figure::after {
  content: attr(data-caption);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.3;

  background: rgba(0,0,0,0.65);
  color: #fff;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;

  border-radius: 0 0 12px 12px;
}

#folleto .gallery-3 figure:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Botonera base (hereda theme.css) ---- */
.btn.btn-lg { padding: 10px 18px; font-size: 1.05rem; }

/* Outline mejorado (color primario, redondeado, cómodo) */
.btn.btn-outline {
  background: transparent;
  color: var(--primary-color, #105b63);
  border: 2px solid var(--primary-color, #105b63);
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 1rem; font-weight: 500;
  transition: all 0.2s ease;
}
.btn.btn-outline:hover {
  background: var(--primary-color, #105b63);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Botones con icono Lucide */
.btn-icon { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; }
.btn-icon svg { width: 19px; height: 19px; vertical-align: middle; }

/* ---- KPI (ventajas) ---- */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.kpi {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.kpi-icon {
  flex: 0 0 44px; height: 44px; border-radius: 12px;
  background: color-mix(in oklab, var(--soft-color, #ddd) 75%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon i, .kpi-icon svg { width: 24px; height: 24px; color: var(--secondary-color, currentColor); }
.kpi-body h3 { margin: 0 0 6px; font-size: 1.1rem; }

/* ---- Bullets de confianza (no duplican KPI) ---- */
.bullet-cards { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.bullet-cards .card { padding: 10px 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: #fff; }

/* ---- Sección ¿Qué es mentaBase? / What is mentaBase ---- */
.section.que-es p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 20px;
}
.section.que-es h2 { margin-bottom: 18px; font-size: 1.8rem; }
.section.que-es .bullet-cards { margin-top: 26px; gap: 14px; }
.section.que-es .bullet-cards .card { font-size: 0.98rem; line-height: 1.5; padding: 14px 16px; }

/* Títulos con logo (¿Qué es...? y CTA final) */
.que-es-titulo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.que-es-titulo .titulo-brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.que-es-titulo .logo-titulo {
  height: clamp(32px, 4vw, 64px);
  width: auto;
  vertical-align: middle;
  margin-right: 6px;
}
.logo-titulo{
  height:42px;
  position:relative;
  top:2px;
  margin-left: -6px;
}


.que-es-pregunta .titulo-brand::after{
    content: "?";
    margin-left: -4px;
}

.que-es-titulo .titulo-texto {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.2rem;
  /* si prefieres gris: color: #666; */
}

.que-es-titulo-final {
  justify-content: center;
}

/* ---- Footer fino ---- */
.footer-mini {
  margin-top: 48px; padding: 26px 0; text-align: center;
  border-top: 1px solid color-mix(in oklab, var(--secondary-color, #000) 20%, transparent);
}
.footer-mini .brand { display: inline-flex; gap: 10px; align-items: center; justify-content: center; }
.footer-mini .brand img {
  height: clamp(22px, 3vw, 32px);
  width: auto;
  opacity: .9;
}
.footer-mini .brand span { font-size: 0.95rem; line-height: 1.2; opacity: .9; }
.footer-mini nav { margin-top: 6px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.footer-mini nav a { font-size: 0.95rem; opacity: .9; }
.footer-mini small { display: block; margin-top: 8px; opacity: .75; font-size: 0.86rem; }

/* ---- Lightbox (modal de capturas) ---- */
#folleto-lightbox{ position:fixed; inset:0; display:none; z-index:9999; }
#folleto-lightbox.active{ display:block; }
#folleto-lightbox .lb-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
#folleto-lightbox .lb-dialog{ position:absolute; inset:0; display:grid; place-items:center; padding: 24px; }
#folleto-lightbox .lb-figure{ margin:0; position:relative; max-width: 92vw; max-height: 92vh; display:flex; flex-direction:column; align-items:center; gap:8px; }
#folleto-lightbox .lb-img{ max-width: 92vw; max-height: 86vh; width:auto; height:auto; display:block; border-radius:12px; border:1px solid rgba(255,255,255,.25); box-shadow: 0 16px 48px rgba(0,0,0,.4); background: #fff; }
#folleto-lightbox .lb-caption{ color:#fff; font-size:.95rem; opacity:.9; text-align:center; max-width: 88vw; }
#folleto-lightbox .lb-close, #folleto-lightbox .lb-prev, #folleto-lightbox .lb-next{
  position:absolute; background: rgba(0,0,0,.55); color:#fff; border: none; border-radius: 10px;
  width: 38px; height: 38px; cursor:pointer; display:grid; place-items:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .16s ease, background .16s ease;
}
#folleto-lightbox .lb-close{ right: 18px; top: 18px; font-size: 18px; }
#folleto-lightbox .lb-prev { left: 18px;  top: calc(50% - 19px); font-size: 28px; }
#folleto-lightbox .lb-next { right: 18px; top: calc(50% - 19px); font-size: 28px; }
#folleto-lightbox .lb-close:hover, #folleto-lightbox .lb-prev:hover, #folleto-lightbox .lb-next:hover{
  transform: translateY(-1px); background: rgba(0,0,0,.7);
}
body.lb-open { overflow: hidden; }

.cta-row {
  display: flex;
  justify-content: center;
  gap: 1rem; /* espacio entre botones */
}