/* ============ Variables ============ */

/* === HOTFIX VISIBILIDAD GLOBAL === */
html, body {
  visibility: visible !important;
  opacity: 1 !important;
}

/* === HOTFIX MODAL: oculto por defecto y solo visible cuando data-tg-open="true" === */
.tg-scope .tg-modal-backdrop {
  display: none !important;
  position: fixed; inset: 0;
  z-index: 9999; /* encima del sitio solo cuando se abre */
}

.tg-scope .tg-modal-backdrop[data-tg-open="true"] {
  display: flex !important;
}

/* (opcional) Asegura que el navbar esté arriba del video/fondos */
.app-navbar { position: relative; z-index: 10000; }













:root{
  --nav-height: 74px;
  --container-max: 1200px;
  --drawer-w: min(84vw, 320px);

  /* Paleta rojo */
  --r400: #f43f5e;
  --r500: #ef4444;
  --r600: #dc2626;
  --r700: #b91c1c;
  --r800: #7f1d1d;

  --text: #111827;
  --white: #ffffff;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color: var(--text);
  padding-top: var(--nav-height);
  line-height: 1.45;
}

/* ============ NAVBAR NUEVA (aislada) ============ */
.app-navbar{
  position: fixed; inset: 0 0 auto 0; height: var(--nav-height);
  z-index: 10000;
  border-bottom: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  will-change: transform, background-position;
}
.app-navbar--gradient{
  background: linear-gradient(90deg, var(--r400) 0%, var(--r500) 25%, var(--r600) 50%, var(--r700) 75%, var(--r800) 100%);
  background-size: 200% 200%;
  animation: navGradient 18s ease infinite, navDropIn .6s ease-out both;
}

.app-navbar__inner{
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* brand | nav | toggle */
  align-items: center;
  gap: 8px;

  /* Blindaje contra temas externos */
  background: transparent !important;
  box-shadow: none !important;
}
.app-navbar__brand{ text-decoration: none; display: inline-flex; align-items: center; justify-self: start; }
.app-navbar__logo{ height: 48px; width: auto; display: block; }

/* ==== Menú escritorio (centrado) ==== */
.app-navbar__nav{ justify-self: center; }
.app-navbar__menu{
  margin: 0; padding: 0; list-style: none;
  display: flex; align-items: center; gap: 28px;

  /* Blindaje contenedor */
  background: transparent !important; background-image: none !important;
  box-shadow: none !important; border: 0 !important;
}
.app-navbar__item{
  /* Sin pseudo-elementos decorativos del tema */
  position: static !important;
}
.app-navbar__item::before,
.app-navbar__item::after{ content: none !important; display: none !important; }

/* Links: sin fondos NUNCA (para matar la franja blanca) */
.app-navbar__link{
  display: inline-flex !important; align-items: center;
  background: transparent !important; background-image: none !important;
  box-shadow: none !important; border: 0 !important;
  position: relative;
  color: var(--white) !important; text-decoration: none;
  padding: 6px 2px; line-height: 1.25;
  transition: border-image .25s ease, border-bottom-width .25s ease,
             transform .15s ease, color .2s ease, opacity .2s ease;
}
.app-navbar__link:hover{ opacity: .95; }

/* Estado activo/hover: borde inferior con gradiente (NO backgrounds) */
@media (min-width: 992px){
  .app-navbar__link:hover,
  .app-navbar__link:focus,
  .app-navbar__link.is-active{
    border-style: solid; border-color: transparent; border-width: 0 0 3px 0;
    border-image: linear-gradient(90deg, var(--r400), var(--r700)) 1;
    transform: translateY(-1px);
    opacity: .98;
  }
}
.app-navbar__link:focus-visible{
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 3px;
}

/* Botón hamburguesa */
.app-navbar__toggle{
  justify-self: end;
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  display: none; position: relative;
}
.app-navbar__toggle span{
  position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, top .3s ease, bottom .3s ease;
}
.app-navbar__toggle span:nth-child(1){ top: 13px; }
.app-navbar__toggle span:nth-child(2){ top: 21px; }
.app-navbar__toggle span:nth-child(3){ top: 29px; }
.app-navbar__toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.app-navbar__toggle.is-open span:nth-child(2){ opacity: 0; }
.app-navbar__toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ==== Móvil: drawer blanco opaco ==== */
.app-navbar__overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 9999; display: none;
}
.app-navbar__overlay.is-active{ display: block; }

.app-navbar__panel{
  position: fixed;
  top: var(--nav-height); right: 0; bottom: 0;
  width: var(--drawer-w);
  padding: 18px 18px 28px;
  background: #ffffff !important;                 /* opaco */
  opacity: 1 !important; filter: none !important;
  mix-blend-mode: normal !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: -18px 0 40px rgba(0,0,0,.28);
  transform: translateX(110%); transition: transform .28s ease;
  z-index: 10000; isolation: isolate;
}
.app-navbar__panel.is-open{ transform: translateX(0); }
.app-navbar__panel *::before, .app-navbar__panel *::after{ content: none !important; } /* fuera pseudo-elementos del tema */

.app-navbar__panel .app-navbar__menu{
  display: grid; gap: 14px; align-items: start;
}
.app-navbar__panel .app-navbar__link{
  color: #111827 !important;
  padding: 10px 6px;
  border: 0;                 /* sin borde en móvil */
  transform: none;
}

/* ==== Responsive ==== */
@media (max-width: 991.98px){
  .app-navbar__toggle{ display: inline-block; }
  .app-navbar__nav{ display: none; } /* ocultar menú de escritorio */
}

/* ============ Animaciones ============ */
@keyframes navDropIn{ 0%{ transform: translateY(-16px); opacity: 0; } 100%{ transform: translateY(0); opacity: 1; } }
@keyframes navGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* ============ Bloques demo (puedes borrar) ============ */
.demo-block{
  min-height: 90vh;
  padding: 40px 16px;
  max-width: var(--container-max);
  margin: 0 auto;
  border-bottom: 1px solid #e5e7eb;
}
.demo-block h2{ margin-top: 0; }


/* ====== HERO / Intro con video ====== */
.hero{
  position: relative;
  min-height: calc(100vh - var(--nav-height, 74px));
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}
.hero__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; background: #000;
}
.hero__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35), rgba(0,0,0,.45));
}
.hero__content{
  position: relative; z-index: 1;
  max-width: 900px; padding: 24px; text-align: center; color: #fff;
}
.hero__title{ margin: 0 0 12px 0; font-size: clamp(28px, 6vw, 56px); line-height: 1.1; letter-spacing: .2px; text-wrap: balance; }
.hero__subtitle{ margin: 0 0 22px 0; font-size: clamp(16px, 2.5vw, 20px); opacity: .95; }

/* Botón primario (reutilizable) */
.btn{
  --btn-radius: 999px; --btn-pad-x: 22px; --btn-pad-y: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--btn-radius);
  font-weight: 700; text-decoration: none; color: #fff;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.btn--primary:hover{ opacity: .95; }

/* ======= Servicios ======= */
.services{
  position: relative;
  padding: clamp(48px, 6vw, 96px) 16px;
  background: #fff;
}
.services__inner{
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
}

/* Media */
.services__media{
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  transform: translateZ(0);
}
.services__img{
  width: 100%; height: auto; display: block;
  transform: scale(1.02);
  transition: transform .6s ease;
}
.services__media:hover .services__img{ transform: scale(1.06); }
.services__badge{
  position: absolute; left: 16px; top: 16px;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  color: #fff; font-weight: 800; letter-spacing: .5px;
  padding: 6px 12px; border-radius: 999px; font-size: .78rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
}
.services__glow{
  position: absolute; inset: auto -20% -30% -20%;
  height: 50%; filter: blur(42px);
  background: radial-gradient(60% 50% at 50% 50%, rgba(239,68,68,.35), transparent 70%);
  pointer-events: none;
}

/* Contenido */
.services__content{ display: grid; gap: 16px; }
.services__title{ font-size: clamp(28px, 4.5vw, 40px); line-height: 1.1; margin: 0; }
.services__lead{ margin: 0; font-size: clamp(16px, 2.5vw, 18px); color: #374151; }
.services__features{ margin: 8px 0 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.services__features li{
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;
  font-weight: 600; color: #1f2937;
}
.services__icon{
  width: 26px; height: 26px; display: grid; place-items: center;
  background: #fef2f2; color: var(--r600,#dc2626);
  border: 1px solid #fee2e2; border-radius: 8px; font-weight: 800;
}

/* Grid de tarjetas */
.services__grid{
  display: grid; gap: 16px; margin-top: 8px;
  grid-template-columns: repeat(2, 1fr);
}
.service-card{
  background: #fff; border-radius: 16px; overflow: hidden;
  border: 1px solid #f1f5f9;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transform: translateZ(0);
  transition: box-shadow .3s ease, transform .3s ease;
}
.service-card:hover{ box-shadow: 0 18px 48px rgba(0,0,0,.12); transform: translateY(-2px); }
.service-card__img{ width: 100%; height: 160px; object-fit: cover; display: block; }
.service-card__title{ margin: 12px 12px 4px 12px; font-size: 1.04rem; }
.service-card__text{ margin: 0 12px 16px 12px; color: #4b5563; }

/* Layout desktop */
@media (min-width: 992px){
  .services__inner{ grid-template-columns: 1.2fr 1fr; align-items: center; }
  .services__grid{ grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
}

/* ===== Animaciones (reveal al hacer scroll) ===== */
.reveal{ opacity: 0; transform: translateY(14px); }
.reveal.is-visible{ opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
[data-animate="fade-up"].is-visible{ transition-delay: var(--reveal-delay, 0ms); }
[data-animate="reveal"].is-visible .services__img{ transition: transform 1s cubic-bezier(.2,.7,.2,1); transform: scale(1.02); }

/* Tilt/Parallax (hover) */
.tilt{ will-change: transform; transform-style: preserve-3d; }
.tilt:hover{ transition: transform .12s ease-out; }

/* Respeta usuarios con menos movimiento */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
  .tilt{ transform: none !important; }
  .hero__video{ display: none; }
  .hero{ background: #111; }
}

/* ===== Ventajas ===== */
.advantages{
  background: #fff;
  padding: clamp(48px, 6vw, 96px) 16px;
}
.advantages__inner{ max-width: var(--container-max, 1200px); margin: 0 auto; }
.advantages__header{ text-align: center; margin-bottom: 18px; }
.advantages__title{ margin: 0 0 8px 0; font-size: clamp(28px, 4.5vw, 40px); }
.advantages__subtitle{ margin: 0; color: #4b5563; }

.advantages__grid{
  display: grid; gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .advantages__grid{ grid-template-columns: 1.2fr .8fr; align-items: start; }
}

.advantages__charts{
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .advantages__charts{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px){
  .advantages__charts{ grid-template-columns: repeat(3, 1fr); }
}

/* Tarjeta de gráfico */
.chart-card{
  background: #fff; border: 1px solid #f1f5f9; border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.chart-card__head{
  padding: 12px 14px;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  color: #fff;
}
.chart-card__title{ margin: 0; font-size: 1rem; }
.chart-card__body{ padding: 14px; }
.chart-card__note{ margin: 0 14px 14px; color: #4b5563; font-size: .92rem; }

/* Lista de beneficios */
.benefits{ list-style: none; margin: 0 0 16px 0; padding: 0; display: grid; gap: 10px; }
.benefit{ display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.benefit__icon{
  width: 26px; height: 26px; display: grid; place-items: center;
  background: #fef2f2; color: var(--r600,#dc2626);
  border: 1px solid #fee2e2; border-radius: 8px; font-weight: 800;
}
.benefit__text{ color: #1f2937; }

/* ROI Card */
.roi-card{
  background: #fff; border: 1px solid #f1f5f9; border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.roi-card__title{
  margin: 0; padding: 12px 14px; color:#fff;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
}
.roi-form{ padding: 12px 14px; display: grid; gap: 10px; }
.roi-form__row{ display: grid; gap: 10px; grid-template-columns: 1fr; }
.roi-form label{ display: grid; gap: 6px; font-weight: 600; color: #111827; font-size: .95rem;}
.roi-form input{
  appearance: none; -webkit-appearance: none;
  padding: 10px 12px; border-radius: 10px; border: 1px solid #e5e7eb;
  font: inherit; outline: none;
}
.roi-form input:focus{ border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
@media (min-width: 640px){
  .roi-form__row{ grid-template-columns: repeat(2, 1fr); }
}

.roi-results{ padding: 0 14px 12px; display: grid; gap: 8px; }
.roi-results__item{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px dashed #e5e7eb; border-radius: 10px;
  background: #fafafa;
}
.roi-results__item--save{ border-style: solid; border-color: rgba(16,185,129,.25); background: linear-gradient(90deg,#ecfdf5,#ffffff); }
.roi-card__note{ margin: 8px 14px 14px; color:#6b7280; font-size:.9rem; }

/* Reveal (reutiliza tu animación) */
.reveal{ opacity: 0; transform: translateY(14px); }
.reveal.is-visible{ opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }


/* ======= OFRECEMOS ======= */
/* ======= OFRECEMOS (RESPONSIVE REWORK) ======= */

/* ======= OFRECEMOS (RESPONSIVE + NO OVERFLOW) ======= */
.offer{
  background:#fff;
  padding: clamp(40px, 6vw, 96px) 16px;
}
.offer__inner{
  width: min(100%, var(--container-max, 1200px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 28px);
}
/* Evita desbordes de columnas en grid (clave para móvil) */
.offer__media,
.offer__content{ min-width: 0; }

@media (min-width: 992px){
  .offer__inner{ grid-template-columns: 1.1fr .9fr; align-items: start; }
}

/* === Media (imagen principal) === */
.offer__main{
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.15);
  background:#111;
  aspect-ratio: 16/9;
}
.offer__main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.01);
  transition: transform .6s ease;
}
.offer__main:hover img{ transform: scale(1.03); }

/* Fallback si el navegador no soporta aspect-ratio */
@supports not (aspect-ratio: 1){
  .offer__main{ position: relative; padding-top: 56.25%; }
  .offer__main img{ position:absolute; inset:0; }
}

/* === Miniaturas (scroll horizontal, no se salen) === */
.offer__thumbs{
  --thumb-min: 80px;
  --thumb-max: 128px;
  --thumb-w: clamp(var(--thumb-min), 24vw, var(--thumb-max));
  --thumb-h: calc(var(--thumb-w) * 0.64);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--thumb-w);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 8px;
  padding: 0 2px 6px;
}
.offer__thumbs::-webkit-scrollbar{ height: 6px; }
.offer__thumbs::-webkit-scrollbar-thumb{ background: #e5e7eb; border-radius: 999px; }

.offer__thumb{
  scroll-snap-align: start;
  border: 0; background: transparent; padding:0; cursor: pointer;
  width: var(--thumb-w); height: var(--thumb-h);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .2s ease, outline-offset .15s ease;
  outline: 2px solid transparent;
  /* Asegura targets accesibles sin romper layout */
  min-height: 44px;
}
.offer__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.offer__thumb:hover{ transform: translateY(-2px); }
.offer__thumb.is-active{ outline-color: #ef4444; outline-offset: 2px; }

@media (max-width: 380px){
  .offer__thumbs{ --thumb-min: 72px; }
}

/* === Video responsivo === */
.offer__videoTitle{
  margin: 6px 0 8px 0;
  font-size: 1rem; font-weight: 800;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.offer__videoPlayer{
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  max-height: 60vh;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
@supports not (aspect-ratio: 1){
  .offer__videoPlayer{ height: auto; }
}
@media (orientation: landscape) and (max-width: 820px){
  .offer__videoPlayer{ max-height: 50vh; }
}

/* === Textos y bullets (evita desbordes por palabras largas) === */
.offer__header{ display:grid; gap: 8px; }
.offer__title{
  margin:0; font-size: clamp(28px, 4.5vw, 40px);
  line-height:1.1;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.offer__lead{
  margin:0; color:#374151;
  overflow-wrap: anywhere; word-break: break-word;
}
.offer__list{
  list-style:none; margin: 12px 0 0 0; padding:0;
  display:grid; gap: 10px;
}
.offer__list li{
  display:flex; align-items:flex-start; gap: 8px;
  font-weight: 600; color:#1f2937;
  overflow-wrap: anywhere; word-break: break-word;
}
.offer__icon{
  width: 26px; height: 26px; display:inline-grid; place-items:center;
  background:#fef2f2; color: var(--r600,#dc2626);
  border:1px solid #fee2e2; border-radius:8px; font-weight:800;
}

/* === Imagen final (facts) === */
.offer__facts{
  margin: 14px 0 0 0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.offer__facts img{ width:100%; height:auto; display:block; }

/* === Seguridad extra para que NADA se salga del viewport === */
.offer img,
.offer video{ max-width: 100%; }
.offer *{ box-sizing: border-box; }


/* ===== ¿Por qué elegirnos? ===== */
.why{
  background:#fff;
  padding: clamp(48px, 6vw, 96px) 16px;
}
.why__inner{ max-width: var(--container-max, 1200px); margin: 0 auto; }
.why__header{ text-align:center; margin-bottom: 20px; }
.why__title{
  margin:0; font-size: clamp(28px, 4.6vw, 40px); line-height:1.1;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.why__subtitle{ margin:6px 0 0 0; color:#4b5563; }

/* Grid de razones */
.why__grid{
  display:grid; gap: 16px; margin-top: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){ .why__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px){ .why__grid{ grid-template-columns: repeat(3, 1fr); } }

.why-card{
  background:#fff; border:1px solid #f1f5f9; border-radius:16px; overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 16px;
  position: relative;
}
.why-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg, var(--r400,#f43f5e), var(--r700,#b91c1c));
}
.why-card__icon{ font-size: 28px; line-height:1; }
.why-card__title{ margin:8px 0 6px 0; font-size:1.06rem; }
.why-card__text{ margin:0; color:#374151; }

/* Stats */
.why-stats{
  margin-top: 18px;
  display:grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px){ .why-stats{ grid-template-columns: repeat(4, 1fr); } }

.stat{
  background: linear-gradient(0deg, #ffffff, #ffffff), linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  background-origin: border-box; background-clip: padding-box, border-box;
  border: 1px solid transparent;
  border-radius: 16px; padding: 16px; text-align:center;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.stat__num{
  font-weight: 900; font-size: 28px; line-height:1;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label{ margin-top: 6px; color:#374151; }

/* CTA */
.why-cta{
  margin-top: 24px;
  padding: 18px;
  border-radius: 18px;
  text-align:center;
  color:#fff;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  box-shadow: 0 16px 40px rgba(0,0,0,.15);
}
.why-cta__title{ margin:0 0 10px 0; font-size: clamp(18px, 2.4vw, 22px); }

/* Reveal reutiliza tus reglas existentes */
.reveal{ opacity:0; transform: translateY(14px); }
.reveal.is-visible{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }


/* ===== Footer ===== */
.site-footer{
  color:#e5e7eb;
  background: #0f0f12; /* base oscura */
  margin-top: 24px;
  border-top: 4px solid transparent;
  background-image:
    linear-gradient(#0f0f12,#0f0f12),
    linear-gradient(90deg, var(--r400,#f43f5e), var(--r800,#7f1d1d));
  background-origin: border-box;
  background-clip: padding-box, border-box; /* borde superior con gradiente */
}
.site-footer__inner{
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 28px 16px 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .site-footer__inner{ grid-template-columns: 1.1fr .6fr .9fr; align-items: start; }
}

/* Columna marca */
.footer-brand__logo img{ height: 48px; width: auto; display: block; }
.footer-brand__name{ margin: 8px 0 4px 0; color:#fff; font-size: 1.1rem; }
.footer-brand__tag{ margin: 0; color:#cbd5e1; }

/* Redes */
.footer-social{ display:flex; gap:10px; margin-top: 12px; }
.footer-social__link{
  width: 38px; height: 38px; border-radius: 50%;
  display:grid; place-items:center;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  transition: transform .15s ease, opacity .2s ease;
}
.footer-social__link:hover{ transform: translateY(-2px); opacity:.95; }
.footer-social__link svg{ width: 20px; height: 20px; fill:#fff; }

/* Enlaces */
.footer-col__title{ color:#fff; margin:0 0 8px 0; font-size:1.02rem; }
.footer-nav__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-nav__list a{
  color:#e5e7eb; text-decoration:none;
  border-bottom: 2px solid transparent;
}
.footer-nav__list a:hover{
  border-image: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c)) 1;
  border-bottom-width: 2px;
}

/* Contacto */
.footer-contact{ font-style: normal; color:#d1d5db; }
.footer-contact a{ color:#fff; text-decoration:none; }
.footer-contact a:hover{ text-decoration: underline; }

/* Privacidad */
.footer-privacy{ max-width: var(--container-max, 1200px); margin: 0 auto; padding: 4px 16px 18px; }
.footer-privacy details{
  background:#121217; border:1px solid #1f2937; border-radius: 14px; color:#e5e7eb;
}
.footer-privacy summary{
  cursor: pointer; padding: 12px 14px; list-style: none; user-select: none;
  font-weight: 700; color:#fff;
  background: linear-gradient(90deg, rgba(239,68,68,.15), rgba(185,28,28,.15));
  border-radius: 14px;
}
.footer-privacy summary::-webkit-details-marker{ display:none; }
.footer-privacy .privacy-body{ padding: 12px 14px 14px; }
.footer-privacy a{ color:#fff; text-decoration: underline; }
.privacy-note{ color:#9ca3af; font-size: .9rem; }

/* Franja inferior */
.footer-bottom{
  border-top: 1px solid #1f2937;
  text-align:center; padding: 12px 16px; color:#cbd5e1;
}


/* Hero imagen 50% alto */
.hero--half{ min-height: 50vh; }                 /* mitad de la ventana */
.hero__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;  /* cubre sin deformar */
  display: block;
}
/* Opcional: oscurecer un poco la imagen para que el título resalte */
.hero__overlay{
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
}


/* ===== Nosotros FX ===== */
.about{
  position: relative;
  background:; /* base oscura para que luzcan los brillos */
  padding: clamp(56px, 7vw, 110px) 16px;
  overflow: hidden;
}
.about__inner{
  position: relative;
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  display: grid; gap: 20px;
  isolation: isolate;
}

/* Fondos animados (blobs) */
.about__bg{ position:absolute; inset:-20% -10% -10% -10%; z-index:0; filter: blur(36px); opacity:.55; }
.blob{
  position:absolute; width: 40vmin; height: 40vmin; border-radius: 50%;
  background: radial-gradient(35% 35% at 50% 50%, rgba(239,68,68,.65), rgba(185,28,28,.35) 60%, transparent 70%);
  animation: blobFloat 18s ease-in-out infinite;
}
.blob--1{ top:10%; left:5%; animation-delay:0s; }
.blob--2{ bottom:5%; right:8%; animation-delay: -6s; }
.blob--3{ top:40%; right:35%; width:34vmin; height:34vmin; animation-delay: -12s; }

@keyframes blobFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-4%, 6%) scale(1.08); }
}

/* Encabezado */
.about__kicker{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-weight:800; letter-spacing:.3px; color:#fff; font-size:.8rem;
  background: linear-gradient(90deg, rgba(239,68,68,.25), rgba(185,28,28,.25));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
}
.about__title{
  margin:10px 0 4px 0; text-align:center;
  font-size: clamp(28px, 4.6vw, 46px); line-height:1.08;
}
.about__shine{
  background: linear-gradient(90deg, var(--r400,#f43f5e), var(--r700,#b91c1c), var(--r400,#f43f5e));
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shineMove 10s ease infinite;
}
@keyframes shineMove{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.about__divider{
  height:4px; width:min(180px, 30%); margin:10px auto 0;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  border-radius:999px;
  box-shadow: 0 8px 30px rgba(239,68,68,.35);
}
.about__intro{
  margin: 14px auto 0; max-width: 980px; color:#e5e7eb;
  text-align: justify; text-justify: inter-word; hyphens: auto;
  font-size: clamp(16px, 2.3vw, 18px);
  line-height: 1.7;
}

/* Grid de tarjetas */
.about__grid{
  display:grid; gap: 16px; margin-top: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){ .about__grid{ grid-template-columns: repeat(3, 1fr); } }

/* Tarjeta con efectos */
.about-card{
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 18px 16px; backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.about-card:hover{
  box-shadow: 0 24px 60px rgba(0,0,0,.32);
  border-color: rgba(239,68,68,.35);
}
.about-card__glow{
  position:absolute; inset:-40% -40% auto -40%; height: 60%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(239,68,68,.25), transparent 70%);
  transform: translateZ(-1px); pointer-events: none;
}
.about-card__icon{
  width: 42px; height: 42px; border-radius: 12px;
  display:grid; place-items:center; font-size: 20px; color: var(--r600,#dc2626);
  background: #fef2f2; border: 1px solid #fee2e2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.about-card__title{
  margin: 10px 0 6px 0; font-size: 1.08rem; color:#fff;
  letter-spacing: .2px;
}
.about-card__text{
  margin: 0; color:#cbd5e1;
  text-align: justify; text-justify: inter-word; hyphens: auto;
}

/* CTA */
.about__cta{ display:flex; justify-content:center; margin-top: 8px; }

/* Reveal (reutiliza tu sistema) */
.reveal{ opacity: 0; transform: translateY(14px); }
.reveal.is-visible{ opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }

/* Menos movimiento */
@media (prefers-reduced-motion: reduce){
  .about__bg, .about__shine{ animation:none; }
  .about-card, .tilt{ transform: none !important; }
}


/* ====== Nosotros FX: variante FONDO BLANCO ====== */
#nosotros.about--fx{
  background: #ffffff;              /* fondo blanco */
  color: #111827;                   /* texto base oscuro */
}

/* Encabezado y elementos */
#nosotros.about--fx .about__kicker{
  color: #111827;
  background: linear-gradient(90deg, rgba(239,68,68,.08), rgba(185,28,28,.08));
  border-color: rgba(17,24,39,.08);
}
#nosotros.about--fx .about__intro{
  color: #374151;
  text-align: justify; text-justify: inter-word; hyphens: auto;
}
#nosotros.about--fx .about__divider{
  box-shadow: 0 8px 24px rgba(239,68,68,.22);
}

/* Tarjetas sobre blanco (sin vidrio) */
#nosotros.about--fx .about-card{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  backdrop-filter: none;                   /* quitar blur de “vidrio” */
}
#nosotros.about--fx .about-card:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  border-color: rgba(239,68,68,.28);
}
#nosotros.about--fx .about-card__title{ color: #111827; }
#nosotros.about--fx .about-card__text{
  color: #374151;
  text-align: justify; text-justify: inter-word; hyphens: auto;
}
#nosotros.about--fx .about-card__glow{
  /* glow más sutil sobre blanco */
  background: radial-gradient(50% 50% at 50% 50%, rgba(239,68,68,.12), transparent 70%);
}

/* Blobs/fondos animados suavizados para blanco */
#nosotros.about--fx .about__bg{
  filter: blur(52px);
  opacity: .22;                    /* menos presencia en blanco */
}
#nosotros.about--fx .blob{
  background: radial-gradient(35% 35% at 50% 50%,
              rgba(239,68,68,.25),
              rgba(185,28,28,.12) 60%,
              transparent 70%);
}


/* ===== Testimonios ===== */
.testimonials{
  background:#fff;
  padding: clamp(48px, 6vw, 96px) 16px;
}
.testimonials__inner{
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
}
.testimonials__header{ text-align:center; }
.testimonials__title{
  margin:0;
  font-size: clamp(28px, 4.6vw, 40px);
  line-height:1.1;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.testimonials__subtitle{ margin:6px 0 0 0; color:#4b5563; }

/* Controles */
.t-controls{
  display:flex; justify-content:flex-end; gap:8px;
  margin: 10px 0;
}
.t-btn{
  width: 40px; height: 40px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  color:#fff; font-weight:900; line-height:40px; text-align:center;
  box-shadow: 0 8px 22px rgba(0,0,0,.15);
  transition: transform .15s ease, opacity .2s ease;
}
.t-btn:hover{ transform: translateY(-1px); opacity:.95; }

/* Slider en móvil (scroll-snap) */
.t-slider{
  display: grid; grid-auto-flow: column; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 10px;
  padding-bottom: 6px;
}
.t-slider:focus{ outline: 2px dashed rgba(239,68,68,.6); outline-offset: 4px; }

/* Tarjeta */
.t-card{
  scroll-snap-align: start;
  background:#fff; border:1px solid #f1f5f9; border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 16px;
  min-width: min(86vw, 420px);   /* ancho de slide en móvil */
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative; overflow: hidden;
}
.t-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 48px rgba(0,0,0,.12); }
.t-accent{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg, var(--r400,#f43f5e), var(--r700,#b91c1c));
}
.t-quote{
  margin: 6px 0 10px 0; color:#1f2937;
  text-align: justify; text-justify: inter-word; hyphens: auto;
}
.t-rating{ color:#f59e0b; font-size: 18px; letter-spacing: 1px; }
.t-user{ display:flex; align-items:center; gap: 10px; margin-top: 10px; }
.t-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  display:grid; place-items:center; font-weight:800; color: var(--r600,#dc2626);
  background:#fef2f2; border:1px solid #fee2e2;
}
.t-meta small{ color:#6b7280; display:block; }

/* Grid en desktop */
@media (min-width: 992px){
  .t-controls{ display:none; }                /* ocultamos flechas en desktop */
  .t-slider{
    overflow: visible;
    grid-auto-flow: row;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .t-card{ min-width: 0; }                    /* ancho fluido en grid */
}

/* Reveal reuso */
.reveal{ opacity:0; transform: translateY(14px); }
.reveal.is-visible{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }



/* ===== Galería ===== */
.gallery{
  background:#fff;
  padding: clamp(48px, 6vw, 96px) 16px;
}
.gallery__inner{
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
}
.gallery__header{ text-align: center; margin-bottom: 12px; }
.gallery__title{
  margin:0;
  font-size: clamp(28px, 4.6vw, 40px);
  line-height:1.1;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gallery__subtitle{ margin:6px 0 0 0; color:#4b5563; }

/* Grid */
.gallery__grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px){
  .gallery__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px){
  .gallery__grid{ grid-template-columns: repeat(4, 1fr); }
}

/* Item */
.g-item{ margin:0; }
.g-btn{
  appearance: none; -webkit-appearance: none;
  border:0; padding:0; background: transparent; cursor: zoom-in;
  width: 100%; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .25s ease, outline-offset .15s ease;
  outline: 2px solid transparent;
  position: relative;
}
.g-btn::after{
  content:""; position:absolute; inset:auto 8px 8px auto; width: 20px; height: 20px;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.293 14.293l3.707 3.707 1.414-1.414-3.707-3.707A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.293 14.293l3.707 3.707 1.414-1.414-3.707-3.707A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z"/></svg>') center/contain no-repeat;
  opacity:.0; transition: opacity .2s ease;
}
.g-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.g-btn:hover::after{ opacity:.9; }
.g-btn:focus-visible{ outline-color: rgba(239,68,68,.6); outline-offset: 3px; }

.g-btn img{
  width: 100%; height: 100%; display: block; object-fit: cover;
  aspect-ratio: 4/3; /* ajuste cómodo; cámbialo si quieres 16/9 */
  transform: scale(1.01);
  transition: transform .6s ease;
}
.g-btn:hover img{ transform: scale(1.04); }

/* Lightbox */
.g-lightbox{
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,.85);
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: clamp(10px, 3vw, 24px);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.g-lightbox.is-open{ opacity: 1; pointer-events: auto; }
.g-stage{
  grid-column: 2; grid-row: 2;
  margin: 0; display: grid; place-items: center; min-height: 0; min-width: 0;
}
#gStageImg{
  max-width: 92vw; max-height: 86vh; object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: gZoom .18s ease;
}
@keyframes gZoom{
  from{ transform: scale(.96); opacity:.6; }
  to{ transform: scale(1); opacity:1; }
}
.g-caption{
  grid-column: 2; grid-row: 3;
  color: #e5e7eb; text-align: center; margin-top: 6px;
}

/* Controles */
.g-close{
  grid-column: 3; grid-row: 1;
  justify-self: end; align-self: start;
  width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: rgba(255,255,255,.1); color: #fff; font-size: 28px; line-height: 44px;
  cursor: pointer; transition: background .2s ease, transform .1s ease;
}
.g-close:hover{ background: rgba(255,255,255,.2); transform: translateY(-1px); }

.g-nav{
  align-self: center; width: 44px; height: 44px; border:0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c)); color:#fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .1s ease, opacity .2s ease;
}
.g-prev{ grid-column: 1; grid-row: 2; justify-self: start; }
.g-next{ grid-column: 3; grid-row: 2; justify-self: end; }
.g-nav:hover{ transform: translateY(-1px); opacity:.95; }

@media (max-width: 768px){
  .g-lightbox{
    grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto;
  }
  .g-close{ grid-column: 1; grid-row: 1; justify-self: end; }
  .g-stage{ grid-column: 1; grid-row: 2; }
  .g-caption{ grid-column: 1; grid-row: 3; }
  .g-prev, .g-next{
    grid-column: 1; grid-row: 4;
    justify-self: center; margin: 4px; width: 42px; height: 42px;
  }
}

/* Reveal reuso */
.reveal{ opacity:0; transform: translateY(14px); }
.reveal.is-visible{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }


/* ===== Contacto ===== */
.contact{
  background:#fff;
  padding: clamp(48px, 6vw, 96px) 16px;
}
.contact__inner{
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .contact__inner{ grid-template-columns: .9fr 1.1fr; align-items: start; }
}

.contact__title{
  margin: 0 0 8px 0;
  font-size: clamp(26px, 4.2vw, 36px);
  line-height: 1.1;
  background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact__subtitle{ margin: 0 0 10px 0; }

.contact__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact__label{ display:block; font-weight: 800; color:#111827; }
.contact__text{ margin: 2px 0 0 0; color:#374151; }
.contact__text a{ color:#111827; text-decoration: none; border-bottom: 2px solid transparent; }
.contact__text a:hover{
  border-image: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c)) 1;
  border-bottom-width: 2px;
}

.contact__form{ display: grid; gap: 12px; }
.form-row{ display:grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px){
  .form-row{ grid-template-columns: repeat(2, 1fr); }
}
.contact__form label{ display:grid; gap: 6px; font-weight:600; color:#111827; }
.contact__form input,
.contact__form textarea{
  appearance:none; -webkit-appearance:none;
  font: inherit;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  outline: none;
  background: #fff;
  color:#111827;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact__form textarea{ resize: vertical; min-height: 160px; }
.contact__form input:focus,
.contact__form textarea:focus{
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

.form-actions{ display:flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form-status{ min-height: 24px; color:#374151; }
.form-status.success{ color: #059669; } /* verde */
.form-status.error{ color: #dc2626; }   /* rojo */

.hp-field{ position: absolute !important; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; }

/* Mapa */
.contact__map{
  grid-column: 1 / -1; /* ancho completo */
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  margin-top: 12px;
}
.contact__map iframe{
  display:block;
  width: 100%;
  height: 260px; /* ajusta si quieres más alto */
  border: 0;
}
@media (min-width: 992px){
  .contact__map{ margin-top: 16px; }
}
.contact__mapLink{
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px 10px 10px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #111827; text-decoration: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: transform .15s ease, border-color .2s ease;
}
.contact__mapLink:hover{
  transform: translateY(-1px);
  border-color: #ef4444;
}


/* ===== Botón flotante WhatsApp ===== */
.wapp-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  background: #25D366; /* WhatsApp brand */
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  z-index: 100000;
  animation: wappPulse 2.6s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.wapp-float:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 18px 56px rgba(0,0,0,.28);
}
.wapp-float__icon{
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}
.wapp-float__label{
  display: none;                /* oculto en móvil para que sea circular */
  font-weight: 800;
  letter-spacing: .2px;
}

/* En pantallas medianas, mostramos una pastilla con texto */
@media (min-width: 768px){
  .wapp-float{
    width: auto; height: 52px; padding: 0 14px;
    border-radius: 999px;
  }
  .wapp-float__label{ display: inline; }
}

/* Animación de pulso suave */
@keyframes wappPulse{
  0%, 100% { box-shadow: 0 14px 40px rgba(37,211,102,.35); }
  50%      { box-shadow: 0 18px 56px rgba(37,211,102,.55); }
}

/* Respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .wapp-float{ animation: none; }
}


/* ===== Barra de Cookies (bottom) ===== */
.cookiebar{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 100000;
  background: #ffffff;
  border-top: 1px solid transparent;
  /* Borde superior con gradiente rojo */
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 -14px 36px rgba(0,0,0,.12);
  transform: translateY(100%);
  transition: transform .28s ease;
}
.cookiebar.is-open{ transform: translateY(0); }
.cookiebar[hidden]{ display:none !important; }

.cookiebar__inner{
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
@media (max-width: 720px){
  .cookiebar__inner{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.cookiebar__text p{
  margin: 0; color: #1f2937; line-height: 1.55;
  font-size: 0.98rem;
}
.cookiebar__link{
  color:#111827; text-decoration:none; border-bottom:2px solid transparent;
}
.cookiebar__link:hover{
  border-image: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c)) 1;
  border-bottom-width: 2px;
}

.cookiebar__actions{
  display: inline-flex; gap: 10px; flex-wrap: wrap; justify-self: end;
}
@media (max-width: 720px){
  .cookiebar__actions{ justify-self: start; }
}

/* Botones auxiliares por si no los tienes */
.btn--ghost{
  background:#fff; color:#111827; border:1px solid #e5e7eb;
  border-radius: 999px; padding: 10px 16px; font-weight:700;
}
.btn--ghost:hover{ border-color:#ef4444; }

/* Reutiliza tu .btn .btn--primary existente; si no, descomenta:
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none; }
.btn--primary{ color:#fff; background: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c)); }
.btn--primary:hover{ opacity:.95; }
*/


.footer-credit a{
  color: #cbd5e1;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.footer-credit a:hover{
  border-image: linear-gradient(90deg, var(--r500,#ef4444), var(--r700,#b91c1c)) 1;
  border-bottom-width: 2px;
}
/* ===== Modal Catálogos (scope aislado) ===== */
.tg-scope { /* paleta local al scope */
  --tg-primary: #0c4aa3;  /* azul */
  --tg-accent:  #ffb703;  /* acento */
  --tg-white:   #ffffff;
  --tg-text:    #0f172a;
  --tg-muted:   #6b7280;
  --tg-border:  #e5e7eb;
  --tg-shadow:  0 20px 50px rgba(2,6,23,.35);
}

/* Backdrop + modal */
.tg-scope .tg-modal-backdrop{
  position: fixed; left:0; top:0; right:0; bottom:0;
  background: rgba(2,6,23,.6);
  display: none;
  align-items:center; justify-content:center; padding: 24px; z-index: 9999;
}
.tg-scope .tg-modal-backdrop[data-tg-open="true"]{ display:flex; }

.tg-scope .tg-modal{
  width: min(980px, 100%);
  background: var(--tg-white);
  border-radius: 16px;
  box-shadow: var(--tg-shadow);
  padding: 24px;
  position: relative;
  border: 3px solid var(--tg-accent);
  animation: tg-pop .18s ease-out;
}
@keyframes tg-pop{ from{transform: scale(.98); opacity:.7;} to{transform: scale(1); opacity:1;} }

.tg-scope .tg-modal-title{
  margin: 0 0 16px 0;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--tg-primary);
  display: inline-flex; align-items: center; gap: 10px;
}
.tg-scope .tg-modal-title::after{
  content: ""; width: 48px; height: 4px; border-radius: 2px; background: var(--tg-accent);
}

.tg-scope .tg-close{
  position:absolute; top:10px; right:12px;
  background: transparent; border:0; font-size:30px; line-height:1; cursor:pointer;
  color: var(--tg-muted);
}
.tg-scope .tg-close:hover{ color: var(--tg-primary); }

.tg-scope .tg-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.tg-scope .tg-card{
  grid-column: span 12;
  background: #fafafa; border:1px solid var(--tg-border); border-radius: 14px; padding:16px;
}
@media(min-width: 720px){
  .tg-scope .tg-card{ grid-column: span 4; }
}
.tg-scope .tg-card-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.tg-scope .tg-card-title{ margin:0; font-size: 18px; color: var(--tg-text); }
.tg-scope .tg-badge{
  background: var(--tg-primary); color: var(--tg-white);
  font-size: 12px; padding: 4px 8px; border-radius: 999px;
}
.tg-scope .tg-card-text{ color: var(--tg-muted); margin: 0 0 12px 0; }

.tg-scope .tg-actions{ display:flex; gap:10px; flex-wrap: wrap; }
.tg-scope .tg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding: 0 14px; border-radius: 10px; font-weight: 700;
  text-decoration:none; border: 2px solid transparent; transition: transform .06s ease, box-shadow .2s ease;
}
.tg-scope .tg-btn:active{ transform: translateY(1px); }
.tg-scope .tg-btn-primary{ background: var(--tg-primary); color: var(--tg-white); }
.tg-scope .tg-btn-primary:hover{ box-shadow: 0 8px 24px rgba(12,74,163,.3); }
.tg-scope .tg-btn-outline{ background: transparent; color: var(--tg-primary); border-color: var(--tg-primary); }
.tg-scope .tg-btn-outline:hover{ background: rgba(12,74,163,.06); }

/* ===== Modal Catálogos (scope aislado) ===== */
.tg-scope{
  --tg-primary:#0c4aa3; /* azul marca (ajústalo si quieres) */
  --tg-accent:#ffb703;  /* acento */
  --tg-white:#fff;
  --tg-text:#0f172a;
  --tg-muted:#6b7280;
  --tg-border:#e5e7eb;
  --tg-shadow:0 20px 50px rgba(2,6,23,.35);
}

/* Backdrop + contenedor modal */
.tg-scope .tg-modal-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.6);
  display:none; align-items:center; justify-content:center; padding:24px;
  z-index:9999;
}
.tg-scope .tg-modal-backdrop[data-tg-open="true"]{ display:flex; }

.tg-scope .tg-modal{
  width:min(980px,100%); background:var(--tg-white);
  border-radius:16px; box-shadow:var(--tg-shadow);
  padding:24px; position:relative; border:3px solid var(--tg-accent);
  animation:tg-pop .18s ease-out;
}
@keyframes tg-pop{from{transform:scale(.98);opacity:.7}to{transform:scale(1);opacity:1}}

.tg-scope .tg-modal-title{
  margin:0 0 16px 0; font-size:clamp(22px,3vw,28px); color:var(--tg-primary);
  display:inline-flex; align-items:center; gap:10px;
}
.tg-scope .tg-modal-title::after{
  content:""; width:48px; height:4px; border-radius:2px; background:var(--tg-accent);
}

.tg-scope .tg-close{
  position:absolute; top:10px; right:12px; background:transparent; border:0;
  font-size:30px; line-height:1; cursor:pointer; color:var(--tg-muted);
}
.tg-scope .tg-close:hover{color:var(--tg-primary)}

.tg-scope .tg-grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.tg-scope .tg-card{
  grid-column:span 12; background:#fafafa; border:1px solid var(--tg-border);
  border-radius:14px; padding:16px;
}
@media(min-width:720px){.tg-scope .tg-card{grid-column:span 4}}

.tg-scope .tg-card-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
}
.tg-scope .tg-card-title{margin:0; font-size:18px; color:var(--tg-text)}
.tg-scope .tg-badge{
  background:var(--tg-primary); color:#fff; font-size:12px; padding:4px 8px; border-radius:999px;
}
.tg-scope .tg-card-text{color:var(--tg-muted); margin:0 0 12px 0}

.tg-scope .tg-actions{display:flex; gap:10px; flex-wrap:wrap}
.tg-scope .tg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 14px; border-radius:10px; font-weight:700;
  text-decoration:none; border:2px solid transparent; transition:transform .06s ease, box-shadow .2s ease;
}
.tg-scope .tg-btn:active{transform:translateY(1px)}
.tg-scope .tg-btn-primary{background:var(--tg-primary); color:#fff}
.tg-scope .tg-btn-primary:hover{box-shadow:0 8px 24px rgba(12,74,163,.3)}
.tg-scope .tg-btn-outline{background:transparent; color:var(--tg-primary); border-color:var(--tg-primary)}
.tg-scope .tg-btn-outline:hover{background:rgba(12,74,163,.06)}


/* ===== Modal Catálogos: móvil ULTRA compacto ===== */

/* Teléfonos (<=480px) */
@media (max-width: 480px){
  .tg-scope .tg-modal{
    width: min(78vw, 360px);
    max-height: calc(100dvh - 160px);
    padding: 10px 12px;
    border-radius: 10px;
    border-width: 2px;
  }

  .tg-scope .tg-modal-title{
    font-size: clamp(16px, 4.6vw, 18px);
    margin-bottom: 10px;
  }

  .tg-scope .tg-close{
    top: 4px; right: 6px;
    width: 36px; height: 36px;
    font-size: 22px;
  }

  .tg-scope .tg-grid{ gap: 10px; }
  .tg-scope .tg-card{
    padding: 10px;
    border-radius: 10px;
  }

  .tg-scope .tg-card-title{ font-size: 15px; }
  .tg-scope .tg-card-text{ font-size: 0.86rem; }

  .tg-scope .tg-badge{
    font-size: 11px; padding: 3px 6px;
  }

  /* Botones compactos y apilados */
  .tg-scope .tg-actions{
    flex-direction: column;
    gap: 8px;
  }
  .tg-scope .tg-btn{
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 0.94rem;
  }
}

/* Móviles muy angostos (<=360px) */
@media (max-width: 360px){
  .tg-scope .tg-modal{
    width: 82vw;                    /* aún más pequeño */
    max-height: calc(100dvh - 180px);
    padding: 8px 10px;
    border-radius: 8px;
  }
  .tg-scope .tg-modal-title{ font-size: 16px; }
  .tg-scope .tg-card{ padding: 8px; }
  .tg-scope .tg-btn{ height: 36px; font-size: 0.9rem; }
}

/* Pantallas con poca altura: recorta más */
@media (max-height: 680px){
  .tg-scope .tg-modal{ max-height: calc(100dvh - 200px); }
}