/* =========================
   Global Soluciones
   Hero Video -> Slideshow + Glass Navbar
   ========================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

/* Reset */
/* Reset */
*{ box-sizing:border-box; }

/* en vez de height:100% */
html, body{
  min-height: 100%;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

body{
  height: auto; /* clave: que el body pueda crecer */
}

:root{
  --gold: #b08a3b;
  --bg-base: #0f0f10;

  /* Navbar */
  --nav-top: 20px;
  --nav-x: 40px;
  --nav-h: 90px;

  /* Fondo integrado (más sutil, menos “difuminado feo”) */
  --bg-soft-opacity: .55;  /* bajalo/subilo */
  --bg-soft-blur: 18px;    /* bajalo/subilo */
  --bg-soft-sat: 120%;

  /* Presencia frase */
  --claim-max: 1100px;

  /* Fondo arena/dorado para secciones alternadas */
  --bg-sand: #DFC88F;
  --gold-dark: #6b5018;
  --text-sand-dark: #1a1408;
  --text-sand-mid: rgba(26,20,8,.65);
  --text-sand-soft: rgba(26,20,8,.42);
  --border-sand: rgba(26,20,8,.14);
}

body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight:400;
  color:#111;
  background: var(--bg-base);
}

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

.hero-header{
  position:relative;
  height:100vh;
  scroll-snap-align: start;
  min-height:600px;
  background: var(--bg-base);
}

.hero-media{
  position:relative;
  height:100%;
  overflow:hidden;
  background: var(--bg-base);
}

/* Fondo “integrado” (pero sutil, no invade) */
.hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

  background-image: var(--blur-bg, url("../img/main1.jpg"));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  filter: blur(var(--bg-soft-blur)) saturate(var(--bg-soft-sat));
  transform: scale(1.08);
  opacity: var(--bg-soft-opacity);
}

/* Capa de contraste suave (mejora legibilidad sin “ensuciar”) */
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.10) 45%, rgba(0,0,0,.45));
}

/* =========================
   VIDEO + SLIDESHOW (FULL)
   ========================= */

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:2;
}

.hero-video.is-hidden{
  opacity:0;
  transition: opacity 1.0s ease;
  pointer-events:none;
}

.hero-slideshow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  opacity:0;
  pointer-events:none;
}

.hero-slideshow.is-visible{
  opacity:1;
  transition: opacity 1.0s ease;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active{ opacity:1; }

/* =========================
   NAVBAR (glass)
   ========================= */

.navbar{
  position:fixed;
  top: var(--nav-top);
  left: var(--nav-x);
  right: var(--nav-x);
  height: var(--nav-h);

  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 60px;

  z-index:50;

  background: linear-gradient(to bottom, rgba(20,20,22,0.62), rgba(20,20,22,0.42));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);

  border-radius:22px;
  border:1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 12px 35px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.nav-left .logo{
  height:82px;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.12));
}

.nav-right{ display:flex; align-items:center; gap:34px; }

.nav-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:28px;
}

.nav-links a{
  color:#fff;
  text-decoration:none;
  font-size:18px;
  font-weight:500;
  letter-spacing:.2px;
  position:relative;
  transition: color .18s ease;
}
.nav-links a:hover{ color: var(--gold); }

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .2s ease;
  opacity:.9;
}
.nav-links a:hover::after{ transform: scaleX(1); }

.nav-search input{
  width:280px;
  padding:13px 18px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);

  color:#fff;
  font-size:15px;
  outline:none;
  font-family:inherit;

  backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav-search input::placeholder{ color: rgba(255,255,255,.60); }
.nav-search input:focus{
  background: rgba(255,255,255,.14);
  border-color: rgba(176,138,59,.45);
  box-shadow: 0 0 0 4px rgba(176,138,59,.14);
}

/* =========================
   OVERLAY LOGO (solo logo)
   - aparece al terminar el video
   - luego: fade out y aparece chico en esquina
   ========================= */

.video-end-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;
  background: rgba(0,0,0,0);

  transition: opacity .9s ease, visibility .3s ease, background .9s ease;
  z-index:20;
  pointer-events:none;
}

.video-end-overlay.visible{
  opacity:1;
  visibility:visible;
  background: rgba(0,0,0,0.18);
}

.overlay-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  transform: translateY(10px) scale(0.985);
  filter: blur(6px);
  opacity:0;

  transition:
    transform .95s cubic-bezier(.2,.9,.2,1),
    filter .95s ease,
    opacity .95s ease;
}
.video-end-overlay.visible .overlay-inner{
  transform: translateY(0) scale(1);
  filter: blur(0);
  opacity:1;
}

/* Logo grande */
.logo-final{
  width:360px;
  max-width:85%;
  height:auto;

  opacity:1;
  transform:scale(1);
  transition:
    opacity .55s ease,
    transform .55s ease;

  filter:
    drop-shadow(0 12px 28px rgba(0,0,0,.35))
    drop-shadow(0 0 18px rgba(176,138,59,.18));
}


@media (max-width: 600px) {
  .logo-final {
    width: 200px;
  }
  .video-end-overlay.is-docked::after {
    width: 90px;
    height: 90px;
    left: 20px;
    bottom: 20px;
  }
  .video-end-overlay.is-docked {
    padding: 0 0 20px 20px;
  }
}

/* Si todavía existe overlay-note en tu HTML, lo ocultamos */
.overlay-note{ display:none !important; }

/* Estado: dock (fade-out + aparece chico) */
.video-end-overlay.is-docked{
  align-items:flex-end;
  justify-content:flex-start;
  padding:0 0 36px 36px;
  background: rgba(0,0,0,0.10);
}

/* el grande se va */
.video-end-overlay.is-docked .logo-final{
  opacity:0;
  transform:scale(.86);
}

/* aparece versión chica (sin movimiento) */
.video-end-overlay.is-docked::after{
  content:"";
  position:absolute;
  left:36px;
  bottom:36px;

  width:150px;
  height:150px;

  background-image:url("../img/logo1.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:left bottom;

  opacity:0;
  transform:scale(.92);
  animation: smallLogoIn .55s ease forwards;
  animation-delay: .25s; /* delay para que se note el “corte” grande->chico */
}

@keyframes smallLogoIn{
  to { opacity:1; transform:scale(1); }
}

/* =========================
   HERO CONTENT (frase + ver más)
   - aparece recién al terminar el video
   - con presencia y alineado
   ========================= */

.hero-content{
  position:absolute;
  left:50%;
  bottom:92px;
  transform: translateX(-50%) translateY(14px);
  z-index:18; /* arriba de slides, abajo del overlay */
  width:min(var(--claim-max), calc(100% - 80px));
  text-align:center;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.2,.9,.2,1),
    visibility 0s linear .85s;
}

.hero-content.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.2,.9,.2,1),
    visibility 0s;
}

/* Banda sutil detrás del texto (NO blur, NO “botón feo”) */
.hero-content::before{
  content:"";
  position:absolute;
  inset:-18px -18px -22px -18px;
  z-index:-1;
  border-radius: 22px;

  background:
    radial-gradient(circle at 50% 20%, rgba(176,138,59,.14), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,.14));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.40);
}

/* Frase con más presencia + “destello” dorado sutil */
.hero-claim{
  margin:0 0 18px 0;
  color:#fff;

  font-family:"Montserrat", sans-serif;
  font-weight:400;
  font-size: clamp(34px, 4.6vw, 40px);
  line-height:1.12;
  letter-spacing:-0.4px;

  text-shadow:
    0 10px 44px rgba(0,0,0,.55),
    0 2px 12px rgba(0,0,0,.35);
}

.hero-claim .gold{
  color: #fff;
  text-shadow:
    0 10px 44px rgba(0,0,0,.55),
    0 0 14px rgba(176,138,59,.35);
}

/* “VER MÁS” minimal (sin botón sólido) */
.hero-more{
  display:inline-flex;
  align-items:center;
  flex-direction: column;
  gap:12px;

  padding:14px 26px;
  border-radius:999px;

  font-size:14px;
  letter-spacing:2.5px;
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;

  color:#fff;

  border:1px solid rgba(176,138,59,.55);

  background:
    linear-gradient(135deg,
      rgba(176,138,59,.18),
      rgba(176,138,59,.08)
    );

  backdrop-filter: blur(6px);

  box-shadow:
    0 12px 32px rgba(0,0,0,.35),
    0 0 18px rgba(176,138,59,.18);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    border-color .28s ease;
}

.hero-more:hover{
  transform: translateY(-3px);
  border-color: rgba(176,138,59,.85);

  background:
    linear-gradient(135deg,
      rgba(176,138,59,.28),
      rgba(176,138,59,.12)
    );

  box-shadow:
    0 18px 42px rgba(0,0,0,.45),
    0 0 26px rgba(176,138,59,.35);
}

/* Flecha dorada tipo V */
.hero-more .arrow{
  width:20px;
  height:20px;
  border-left:3px solid var(--gold);
  border-bottom:3px solid var(--gold);
  transform: rotate(-45deg);
  transition: transform .28s ease;
  filter: drop-shadow(0 0 10px rgba(176,138,59,.35));
}

.hero-more:hover .arrow{
  transform: rotate(-45deg) translateY(6px);
}

/* micro “respira” */
.hero-content.is-visible .hero-more .arrow{
  animation: arrowFloat 1.8s ease-in-out infinite;
}
@keyframes arrowFloat{
  0%,100%{ transform: rotate(-45deg) translateY(0); }
  50%{ transform: rotate(-45deg) translateY(4px); }
}

.hero-content { pointer-events: none; }
.hero-content.is-visible { pointer-events: auto; }

/* CTA: mostrar SOLO el botón antes (durante el video) */
.hero-more {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .55s ease, transform .55s ease;
}

.hero-more.is-early {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* =========================
   VOLUMEN
   ========================= */

.volume-toggle{
  position:absolute;
  bottom:28px;
  left:28px;

  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  background: rgba(15,15,16,.45);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor:pointer;

  opacity:.85;
  transition: opacity .25s ease, transform .25s ease;
  z-index:25;
}
.volume-toggle:hover{ opacity:1; transform:scale(1.08); }

.volume-icon{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* Altavoz: triángulo CSS */
.volume-icon::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 6px solid rgba(255,255,255,.9);
  margin-right: 3px;
  flex-shrink: 0;
}

/* Onda: arco con border */
.volume-icon::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid rgba(255,255,255,.9);
  border-right: 1.5px solid rgba(255,255,255,.9);
  border-radius: 0 6px 0 0;
  transform: rotate(45deg) translateX(-1px);
  transition: opacity .2s;
}

/* Muted: ocultar onda + línea dorada diagonal */
.volume-toggle.is-muted .volume-icon::after {
  opacity: 0;
}
.volume-toggle.is-muted::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
  transform: rotate(-45deg);
}
.volume-toggle:not(.is-muted)::after {
  display: none;
}

.volume-toggle.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 900px){
  :root{ --nav-x: 18px; --nav-h: 82px; }

  .navbar{ padding: 0 26px; }
  .nav-right{ gap:18px; }
  .nav-links{ gap:18px; }
  .nav-links a{ font-size:16px; }
  .nav-search input{ width:190px; }
  .nav-left .logo{ height:62px; }

  .hero-content{ bottom:76px; width: calc(100% - 36px); }
}

/* ── Burger button (oculto en desktop) ── */
.nav-burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background .2s;
  flex-shrink: 0;
}
.nav-burger:hover{ background: rgba(255,255,255,.08); }

.nav-burger__bar{
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.2,.9,.2,1), opacity .2s, width .3s;
}

.nav-burger.is-open .nav-burger__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open .nav-burger__bar:nth-child(2){ opacity: 0; width: 0; }
.nav-burger.is-open .nav-burger__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ── Menú mobile desplegable ── */
.mobile-menu{
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(10,9,8,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.mobile-menu.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-menu__links{
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.mobile-menu__links li a{
  display: block;
  padding: 16px 24px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,.80);
  text-decoration: none;
  letter-spacing: .5px;
  transition: color .2s, background .2s;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mobile-menu__links li:last-child a{ border-bottom: none; }
.mobile-menu__links li a:hover{
  color: var(--gold);
  background: rgba(255,255,255,.04);
}

@media (max-width: 600px){
  .nav-links{ display: none; }
  .nav-search{ display: none; }
  .navbar{ padding: 0 18px; }
  .nav-burger{ display: flex; }
  .mobile-menu{ display: block; }

  .hero-claim{ font-size: clamp(26px, 7vw, 40px); }
  .video-end-overlay.is-docked{
    padding: 0 0 22px 18px;
  }
  .video-end-overlay.is-docked::after{
    left:18px; bottom:22px; width:120px; height:120px;
  }
}

/* ====== Modo CTA temprano (solo botón) ====== */
.hero-content.is-cta{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .55s ease, transform .55s ease, visibility 0s;
}
.hero-content.is-cta{
  bottom:70px;
}
/* En modo CTA temprano NO mostrar el recuadro */
.hero-content.is-cta::before{
  display:none;
}
/* En modo CTA: ocultamos la frase */
.hero-content.is-cta .hero-claim{
  display:none;
}

/* Botón oculto por defecto, aparece con is-early */
.hero-more{
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .55s ease, transform .55s ease;
}

.hero-more.is-early{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
/* Cuando aparece el contenido final (frase), el botón siempre visible */
.hero-content.is-visible .hero-more{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


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


/* =========================
   GS SERVICES (cards)
   ========================= */

.gs-services{
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #f3efe8;
  scroll-snap-align: start;
}

.gs-services__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 22px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
}

.gs-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 800px));
  justify-content: center;
  gap: 28px;
}

@media (max-width: 980px){
  .gs-cards{ grid-template-columns: 1fr; }
}

/* =========================
   CARD
   ========================= */

.gs-card{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #1b1b1b;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

/* Borde negro como overlay — no afecta el content box */
.gs-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 6px solid #121212;
  pointer-events: none;
  z-index: 5;
}

/* IMG */
.gs-card__img{
  width: 100%;
  height: clamp(380px, 52vh, 560px);
  display: block;
  object-fit: cover;
  object-position: center;

  opacity: 1;
  transform: scale(1);
  transition: opacity .45s ease, transform .35s ease;
}

/* =========================
   CAPTION (título siempre visible)
   ========================= */

.gs-card__caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;

  padding: 16px 18px 18px;
  height: 92px;                 /* banda chica siempre */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;

  background: rgba(10,10,10,.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition: transform .35s ease, opacity .35s ease;
  z-index: 3;
}

/* ✅ línea dorada MÁS cerca del título */
.gs-card__line{
  display: block;
  height: 2px;
  width: 100%;
  background: #b08a3b;
  opacity: .95;
  border-radius: 2px;
  transform: translateY(4px); /* más cerca del título */
}

.gs-card__title{
  margin: 0;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 1.6px;
  font-size: 22px;
  transform: translateY(0);
  transition: transform .35s ease;
}

/* =========================
   INFO (solo aparece en hover)
   ========================= */

.gs-card__info{
  position: absolute;
  left: 0; right: 0; bottom: 0;

  padding: 18px 18px 18px;
  height: 170px;                /* panel grande */
  display: flex;
  align-items: flex-end;

  /* ✅ recuadro grande solo en hover */
  background: rgba(10,10,10,.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;

  transition: opacity .25s ease, transform .35s ease;
  z-index: 2;
}

.gs-card__info p{
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 14.5px;
  line-height: 1.35;
}

/* =========================
   HOVER / FOCUS
   ========================= */

.gs-card:hover .gs-card__img,
.gs-card:focus-within .gs-card__img{
  transform: scale(1.03);
}

/* ✅ el título “sube” y deja lugar al texto */
.gs-card:hover .gs-card__caption,
.gs-card:focus-within .gs-card__caption{
  transform: translateY(-86px); /* mueve la banda hacia arriba */
}

.gs-card:hover .gs-card__title,
.gs-card:focus-within .gs-card__title{
  transform: translateY(-2px);
}

/* ✅ aparece el panel grande con texto SIN pisar el título */
.gs-card:hover .gs-card__info,
.gs-card:focus-within .gs-card__info{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================
   TEXTO SECCION SERVICIOS
   ========================= */

.gs-services-text{
  margin-top: 60px;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* línea + texto */
.gs-services-label{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.gs-line{
  flex: 1;
  max-width: 80px;
  height: 2px;
  background: #b08a3b;
  opacity: .8;
}

.gs-label-text{
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #b08a3b;
  letter-spacing: .6px;
}

/* título principal */
.gs-services-title{
  margin: 0 0 14px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #1c1c1c;
}

/* descripción */
.gs-services-description{
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #5b5b5b;
}

.gs-services-bg{
  position: relative;
  background-image: url("assets/img/misiones.jpg");
  background-size: cover;
  background-position: center;
}

.gs-services-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    #ffffff 0%,
    #ffffff 55%,
    rgba(255,255,255,0.7) 70%,
    rgba(255,255,255,0) 100%
  );
}


/* =========================
   FIN SECCION SERVICIOS
   ========================= */




/* =========================
   GS SPLIT (¿Quiénes somos?)
   ========================= */

.gs-split{
  background: #fff;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
}

/* El wrapper NO limita el ancho — el grid ocupa todo */
.gs-split__wrap{
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Grid: columnas iguales, imagen llega al borde derecho */
.gs-split__inner{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 0;
  align-items: stretch;
  min-height: 1000px;
  width: 100%;
}

/* Columna izquierda: centrada horizontal y verticalmente */
.gs-split__left{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 60px 70px 8%;
  position: relative;
}

/* Marca de agua centrada detrás del texto */
.gs-split__left::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
  width: 680px;
  height: 680px;
  background: url("../img/logo1.png") no-repeat center / contain;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}

/* Contenido: centrado, ancho controlado, arriba del logo */
.gs-split__content{
  position: relative;
  z-index: 1;
  max-width: 520px;
  width: 100%;
  text-align: center;
}

/* Tipografías */
.gs-split__title{
  margin: 0 0 18px 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 4.4vw, 50px);
  line-height: 1.05;
  color: #111;
}

.gs-split__text{
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.65;
  text-align: justify;
  color: rgba(0,0,0,.72);
}

/* Columna derecha: ocupa todo su espacio */
.gs-split__right{
  height: 100%;
  min-height: inherit;
}

/* Bleed: la imagen llega al borde derecho de la ventana */
.gs-split__right--bleed{
  position: relative;
}

/* Contenedor de imagen */
.gs-split__media{
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
}

/* Imagen: cubre toda la columna */
.gs-split__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity .45s ease;
}

/* crossfade */
.gs-split__media img.is-fading{
  opacity: 0;
}

/* Responsive */
@media (max-width: 980px){
  .gs-split__inner{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .gs-split__left{
    padding: 52px 24px 32px;
    justify-content: center;
  }

  .gs-split__title{
    font-size: clamp(28px, 7.2vw, 36px);
    line-height: 1.1;
  }

  .gs-split__text{
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
  }

  .gs-split__right{
    height: auto;
    min-height: 0;
  }

  .gs-split__right--bleed{
    margin-right: 0;
  }

  /* En mobile: la imagen fluye con su altura natural */
  .gs-split__media{
    height: auto;
    min-height: 0;
  }

  .gs-split__media img{
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }
}
/* =========================
   HERO ARROWS (prev / next)
   ========================= */

.hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(.88);
  z-index: 30;

  /* Tamaño fijo — no se puede deformar en un div */
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(15,15,16,.45) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;
  color: #fff;
  user-select: none;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .35s ease,
    visibility .35s ease,
    transform .35s ease,
    background .2s ease,
    border-color .2s ease;
}

.hero-arrow.is-ready{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

.hero-arrow:hover{
  background: rgba(176,138,59,.32);
  border-color: rgba(176,138,59,.55);
  transform: translateY(-50%) scale(1.08);
}

.hero-arrow:active{
  transform: translateY(-50%) scale(.96);
}

.hero-arrow--prev{ left: 28px; }
.hero-arrow--next{ right: 28px; }

.hero-arrow svg{
  width: 22px;
  height: 22px;
  stroke: #fff;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke .2s ease;
}

.hero-arrow:hover svg{
  stroke: var(--gold);
}

@media (max-width: 480px){
  .hero-arrow{
    width: 40px;
    height: 40px;
  }
  .hero-arrow--prev{ left: 12px; }
  .hero-arrow--next{ right: 12px; }
  .hero-arrow svg{ width: 17px; height: 17px; }
}
/* =========================
   ANIMACIONES DE ENTRADA (scroll reveal)
   Controladas por IntersectionObserver en main.js
   ========================= */

/* --- Estado inicial: todos los elementos animables están ocultos --- */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

/* Desde abajo (cards, textos) */
[data-reveal="up"] {
  transform: translateY(48px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.2,1);
}

/* Desde izquierda (lado texto del split) */
[data-reveal="left"] {
  transform: translateX(-52px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.9,.2,1);
}

/* Desde derecha (imagen del split) */
[data-reveal="right"] {
  transform: translateX(52px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.9,.2,1);
}

/* Fade puro (label, líneas decorativas) */
[data-reveal="fade"] {
  transition: opacity .8s ease;
}

/* --- Estado final: visible --- */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* --- Delays escalonados para grupos (ej: las 3 cards) --- */
[data-delay="100"] { transition-delay: .10s; }
[data-delay="200"] { transition-delay: .20s; }
[data-delay="250"] { transition-delay: .25s; }
[data-delay="320"] { transition-delay: .32s; }
[data-delay="400"] { transition-delay: .40s; }

/* respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* =========================
   NAV CART
   ========================= */

.nav-cart{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  padding: 4px;
  transition: transform .2s ease;
}

.nav-cart:hover{
  transform: scale(1.1);
}

.nav-cart__icon{
  width: 26px;
  height: 26px;
  stroke: #fff;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s ease;
}

.nav-cart:hover .nav-cart__icon{
  stroke: var(--gold);
}

/* Badge contador — círculo dorado pequeño pegado arriba derecha */
.nav-cart__badge{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 600px){
  .nav-cart__icon{ width: 22px; height: 22px; }
}

/* =========================
   GS VALORES — Opción C: Línea de tiempo
   ========================= */

.gs-valores{
  background: var(--bg-sand);
  min-height: 100vh;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

/* Marca de agua tenue de fondo */
.gs-valores::before{
  content: "";
  position: absolute;
  right: -160px;
  bottom: -160px;
  width: 640px;
  height: 640px;
  background: url("../img/logo1.png") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

.gs-valores__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 22px;
  width: 100%;
}

/* Header */
.gs-valores__header{
  text-align: center;
  margin-bottom: 72px;
}

.gs-valores__label{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.gs-valores__line{
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--gold-dark);
  opacity: .6;
  display: block;
}

.gs-valores__label-text{
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.gs-valores__title{
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 58px);
  letter-spacing: 3px;
  color: var(--text-sand-dark);
  line-height: 1;
}

/* ---- Timeline ---- */
.gs-valores__timeline{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Línea dorada continua entre puntos */
.gs-valores__timeline::before{
  content: "";
  position: absolute;
  top: 19px;
  left: calc(12.5%);
  right: calc(12.5%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--gold-dark) 8%,
    var(--gold-dark) 92%,
    transparent
  );
  opacity: .35;
}

/* ---- Item ---- */
.gs-valor-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 22px;
  position: relative;
}

/* Punto dorado */
.gs-valor-item__dot{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gold-dark);
  background: var(--bg-sand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.gs-valor-item:hover .gs-valor-item__dot{
  background: var(--gold-dark);
  transform: scale(1.15);
  box-shadow: 0 4px 18px rgba(107,80,24,.3);
}

.gs-valor-item__dot-inner{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-dark);
  transition: background .3s ease;
}

.gs-valor-item:hover .gs-valor-item__dot-inner{
  background: #fff;
}

/* Número */
.gs-valor-item__num{
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: 1.5px;
  opacity: .7;
  margin-top: 22px;
}

/* Nombre */
.gs-valor-item__name{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 24px);
  color: var(--text-sand-dark);
  margin: 8px 0 0 0;
  letter-spacing: .3px;
  transition: color .3s ease;
}

.gs-valor-item:hover .gs-valor-item__name{
  color: var(--gold-dark);
}

/* Separador */
.gs-valor-item__sep{
  display: block;
  width: 28px;
  height: 2px;
  background: var(--gold-dark);
  border-radius: 2px;
  margin: 14px auto;
  opacity: .45;
  transition: width .4s ease, opacity .3s ease;
}

.gs-valor-item:hover .gs-valor-item__sep{
  width: 56px;
  opacity: 1;
}

/* Descripción */
.gs-valor-item__desc{
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-sand-mid);
  max-width: 210px;
  transition: color .3s ease;
}

.gs-valor-item:hover .gs-valor-item__desc{
  color: var(--text-sand-dark);
}

/* ---- Responsive ---- */
@media (max-width: 860px){
  .gs-valores__timeline{
    grid-template-columns: 1fr;
    padding-left: 20px;
  }

  /* Línea vertical a la izquierda */
  .gs-valores__timeline::before{
    top: 20px;
    bottom: 20px;
    left: 19px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      transparent,
      var(--gold) 5%,
      var(--gold) 95%,
      transparent
    );
  }

  .gs-valor-item{
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding: 0 0 44px 52px;
    gap: 0;
  }

  /* Punto posicionado sobre la línea vertical */
  .gs-valor-item__dot{
    position: absolute;
    left: 0;
    top: 0;
  }

  .gs-valor-item__content{
    display: flex;
    flex-direction: column;
  }

  .gs-valor-item__num{ margin-top: 0; }

  .gs-valor-item__sep{ margin: 10px 0; }

  .gs-valor-item__desc{ max-width: 100%; }
}

@media (max-width: 560px){
  .gs-valores__inner{ padding: 60px 16px; }
  .gs-valores__header{ margin-bottom: 52px; }
}


/* =========================
   GS FAQ (Preguntas Frecuentes)
   ========================= */

.gs-faq{
  background: var(--bg-sand);
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

/* Grid: texto izquierda, imagen derecha full-bleed */
.gs-faq__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 100vh;
}

/* ---- Columna izquierda ---- */
.gs-faq__left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 60px 80px 8%;
  position: relative;
}

/* Header */
.gs-faq__label{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.gs-faq__label-line{
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--gold-dark);
  opacity: .6;
  display: block;
}

.gs-faq__label-text{
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.gs-faq__title{
  margin: 0 0 48px 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.1;
  color: var(--text-sand-dark);
}

/* ---- Acordeón ---- */
.gs-faq__list{
  display: flex;
  flex-direction: column;
}

.faq-item{
  border-bottom: 1px solid var(--border-sand);
  overflow: hidden;
}

.faq-item:first-child{
  border-top: 1px solid var(--border-sand);
}

/* Quitar el triángulo nativo */
.faq-item summary{ list-style: none; }
.faq-item summary::-webkit-details-marker{ display: none; }

.faq-item__q{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-sand-mid);
  transition: color .2s ease;
  user-select: none;
}

.faq-item__q:hover{ color: var(--text-sand-dark); }

/* Ícono + rotación al abrir */
.faq-item__q::after{
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-right: 2px solid var(--gold-dark);
  border-bottom: 2px solid var(--gold-dark);
  transform: rotate(45deg);
  transition: transform .3s cubic-bezier(.2,.9,.2,1), border-color .2s;
  margin-top: -4px;
  opacity: .7;
}

.faq-item[open] .faq-item__q{
  color: #fff;
}

.faq-item[open] .faq-item__q::after{
  transform: rotate(-135deg);
  margin-top: 4px;
}

/* Respuesta con animación de altura */
.faq-item__a{
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-sand-mid);
  padding: 0 24px 20px 0;
  max-width: 520px;
}

/* Línea dorada a la izquierda del item abierto */
.faq-item[open]{
  border-bottom-color: rgba(107,80,24,.3);
}

.faq-item[open] .faq-item__q{
  color: var(--gold-dark);
  font-weight: 600;
}

/* ---- Columna derecha: imagen ---- */
.gs-faq__right{
  position: relative;
  min-height: 100%;
}

.gs-faq__media{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gs-faq__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Degradado oscuro sobre la imagen para integrar con el fondo */
.gs-faq__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--bg-sand) 0%,
    transparent 28%
  );
  pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .gs-faq__inner{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .gs-faq__left{
    padding: 60px 24px 40px;
  }

  .gs-faq__right{
    height: auto;
    min-height: 0;
  }

  .gs-faq__media{
    position: relative;
    height: auto;
  }

  .gs-faq__img{
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }

  .gs-faq__media::after{
    background: linear-gradient(
      to bottom,
      var(--bg-sand) 0%,
      transparent 30%
    );
  }
}

@media (max-width: 560px){
  .gs-faq__title{ margin-bottom: 32px; }
}

/* =========================
   GS TESTIMONIOS
   ========================= */

.gs-testimonials {
  background: linear-gradient(180deg, var(--bg-sand) 0%, #eedfa5 15%, #f7f0d8 30%, #faf5e8 50%, #ffffff 70%);
  scroll-snap-align: start;
  padding: 80px 24px 80px;
}

.gs-testimonials__inner {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

.gs-testimonials__eyebrow {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 14px;
}

.gs-testimonials__title {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3.8vw, 38px);
  color: var(--text-sand-dark);
  margin-bottom: 32px;
}

.gs-testimonials__rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark) 20%, var(--gold-dark) 80%, transparent);
  opacity: .25;
  margin-bottom: 64px;
}

/* ── Stack wrap ── */
.gs-testimonials__stack-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
  /* Espacio extra arriba para que las tarjetas de atrás sean visibles */
  padding-top: 48px;
}

/* Contenedor de apilado */
.gs-testimonials__stack {
  position: relative;
  width: 100%;
  max-width: 680px;
  /* Altura fija para que el stack no colapse */
  height: 300px;
}

/* ── Base: todas las tarjetas sin clase son invisibles ── */
.gs-testimonial-card {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 20px;
  padding: 40px 48px 36px;
  box-shadow: 0 8px 40px rgba(107,80,24,.13), 0 2px 8px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: rotate(0deg) translateY(0px) scale(0.88);
  pointer-events: none;
  will-change: transform, opacity;
  /* Sin transición en el base — las animaciones van por keyframes */
  transition: none;
}

/* ── Tarjeta al frente (estado estático) ── */
.gs-testimonial-card.is-front {
  opacity: 1;
  transform: rotate(0deg) translateY(0px) scale(1);
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 12px 52px rgba(107,80,24,.18), 0 4px 12px rgba(0,0,0,.08);
}

/* ── Primera tarjeta de atrás (estado estático) ── */
.gs-testimonial-card.is-back-1 {
  opacity: 1;
  transform: rotate(-4deg) translateY(-24px) scale(0.95);
  z-index: 2;
}

/* ── Segunda tarjeta de atrás (estado estático) ── */
.gs-testimonial-card.is-back-2 {
  opacity: 0.7;
  transform: rotate(3.5deg) translateY(-44px) scale(0.90);
  z-index: 1;
}

/* ══════════════════════════════════════════════════════
   KEYFRAMES — animación estilo Bitly
   ══════════════════════════════════════════════════════ */

/* FASE 1: la nueva sube desde atrás — z-index BAJO, queda detrás de la del frente */
@keyframes gs-card-rise {
  0%   { transform: rotate(-4deg) translateY(-24px) scale(0.88); opacity: 0.7; }
  100% { transform: translate(55px, -280px) rotate(7deg) scale(0.97); opacity: 1; }
}

/* FASE 2: baja al frente — z-index ALTO, ya está por encima */
@keyframes gs-card-land {
  0%   { transform: translate(55px, -280px) rotate(7deg) scale(0.97); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
}

/* La tarjeta que sale se difumina hacia atrás — empieza con FASE 2 */
@keyframes gs-card-out {
  0%   { transform: rotate(0deg) translateY(0) scale(1); opacity: 1; }
  100% { transform: rotate(-4deg) translateY(-24px) scale(0.88); opacity: 0.2; }
}

/* Durante la subida: z-index bajo (detrás del frente) */
.gs-testimonial-card.anim-rise {
  z-index: 2 !important;
  animation: gs-card-rise 0.75s cubic-bezier(.4,0,.6,1) forwards;
  pointer-events: none;
}

/* Durante la bajada: z-index alto (delante de todo) */
.gs-testimonial-card.anim-land {
  z-index: 10 !important;
  animation: gs-card-land 0.85s cubic-bezier(.4,0,.15,1) forwards;
  pointer-events: none;
}

/* La que sale: empieza con fase 2 (ya está al fondo en z-index) */
.gs-testimonial-card.anim-out {
  z-index: 1 !important;
  animation: gs-card-out 0.85s cubic-bezier(.4,0,.6,1) forwards;
  pointer-events: none;
}

/* ── Contenido de la tarjeta ── */
.gs-testimonial-card__quote {
  margin-bottom: 18px;
}

.gs-quote-img {
  width: 42px;
  height: auto;
  display: block;
}

.gs-testimonial-card__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text-sand-dark);
  flex: 1;
  margin-bottom: 28px;
}

.gs-testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gs-testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(176,138,59,.3);
}

.gs-testimonial-card__name {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-sand-dark);
}

.gs-testimonial-card__role {
  font-size: 12px;
  color: var(--text-sand-mid);
}

/* ── Flechas estilo Bitly ── */
.gs-testimonials__nav {
  display: flex;
  gap: 12px;
  margin-top: 52px;
  position: relative;
  z-index: 10;
}

.gs-testimonials__arrow {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 2px solid var(--text-sand-dark);
  background: transparent;
  color: var(--text-sand-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}

.gs-testimonials__arrow svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.gs-testimonials__arrow:hover {
  background: var(--text-sand-dark);
  color: #fff;
  transform: scale(1.06);
}

.gs-testimonials__arrow:active {
  transform: scale(0.96);
}

/* ---- Separador entregas ---- */
.gs-testimonials__divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 64px 0 48px;
}

.gs-testimonials__divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark) 30%, var(--gold-dark) 70%, transparent);
  opacity: .25;
  display: block;
}

.gs-testimonials__divider-label {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-dark);
  opacity: .65;
  white-space: nowrap;
}

/* ---- Galería entregas — altura uniforme ---- */
.gs-entregas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.gs-entrega {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,.13);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
  aspect-ratio: 4 / 5;
}

.gs-entrega:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 52px rgba(0,0,0,.2);
}

.gs-entrega img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform .4s ease;
}

.gs-entrega:hover img {
  transform: scale(1.04);
}

.gs-entrega__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,20,8,.4) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .3s ease;
}

.gs-entrega:hover .gs-entrega__overlay {
  opacity: 1;
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .gs-testimonials { padding: 56px 16px 56px; }
  .gs-testimonials__stack { height: 340px; }
  .gs-testimonial-card { padding: 28px 24px 24px; }
  .gs-testimonial-card__text { font-size: 14px; }
  .gs-entregas { grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (max-width: 480px) {
  .gs-testimonials__stack { height: 380px; }
  .gs-entregas {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
  .gs-entrega { aspect-ratio: 4 / 5; }
}
/* ============================================================
   MARCAS — carrusel de logos con scroll infinito
   ============================================================ */

.gs-brands {
  background: #FAF6EE;
  padding: 72px 0 64px;
  overflow: hidden;
}

.gs-brands__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.gs-brands__eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.gs-brands__title {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--bg-base);
  margin-bottom: 10px;
  line-height: 1.15;
}

.gs-brands__subtitle {
  font-size: 15px;
  color: rgba(15,15,16,.5);
  margin-bottom: 48px;
}

/* Viewport: recorta el track */
.gs-brands__viewport {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Track: scroll infinito con CSS animation */
.gs-brands__track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: brands-scroll 28s linear infinite;
}

.gs-brands__track:hover {
  animation-play-state: paused;
}

@keyframes brands-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.gs-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 72px;
  margin: 0;
  padding: 0;
}

.gs-brand img {
  max-width: 110px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.55);
  transition: filter .3s ease;
}

.gs-brand img:hover {
  filter: grayscale(0) opacity(1);
}

@media (max-width: 700px) {
  .gs-brands { padding: 52px 0 44px; }
  .gs-brands__inner { padding: 0 20px; }
  .gs-brands__track { gap: 32px; animation-duration: 20s; }
  .gs-brand { width: 100px; height: 56px; }
  .gs-brand img { max-width: 82px; max-height: 46px; }
}

/* ============================================================
   ÚNETE — fondo oscuro con acentos dorados
   ============================================================ */

.gs-join {
  background: var(--bg-base);
  padding: 96px 0 88px;
  position: relative;
  overflow: hidden;
}

/* Decoración: círculo dorado difuso de fondo */
.gs-join::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,138,59,.13) 0%, transparent 70%);
  pointer-events: none;
}

.gs-join__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.gs-join__eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.gs-join__title {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 24px;
}

.gs-join__title span {
  color: var(--gold);
}

.gs-join__intro {
  font-size: clamp(14px, 1.8vw, 16px);
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 64px;
}

/* Grid de 4 items */
.gs-join__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: stretch;
}

.gs-join__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 36px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(176,138,59,.18);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
  height: 100% !important;
  box-sizing: border-box !important;
}

.gs-join__item:hover {
  background: rgba(176,138,59,.08);
  border-color: rgba(176,138,59,.45);
  transform: translateY(-4px);
}

.gs-join__icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(176,138,59,.15);
  border-radius: 50%;
  flex-shrink: 0;
}

.gs-join__icon svg {
  width: 26px; height: 26px;
  fill: var(--gold);
}

.gs-join__label {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 1.4;
  text-align: center;
}

/* Responsive */
@media (max-width: 780px) {
  .gs-join__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
  .gs-join { padding: 64px 0 56px; }
  .gs-join__inner { padding: 0 20px; }
  .gs-join__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .gs-join__item { padding: 24px 14px; }
}
/* ============================================================
   FOOTER
   ============================================================ */

.gs-footer {
  background: #ffffff;
  border-top: 1px solid #e8e0ce;
  font-family: "Poppins", sans-serif;
  padding-top: 40px;
}

.gs-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0px 40px 16px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
  gap: 36px;
  align-items: center;
}

.gs-footer__logo-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gs-footer__logo-col img {
  width: 160px;
  object-fit: contain;
  display: block;
}

.gs-footer__socials {
  display: flex;
  gap: 8px;
}

.gs-footer__social-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(176,138,59,.3);
  display: flex; align-items: center; justify-content: center;
  color: rgba(30,20,5,.4);
  background: transparent;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}

.gs-footer__social-btn:hover {
  background: rgba(176,138,59,.1);
  border-color: var(--gold);
  color: var(--gold);
}

.gs-footer__social-btn svg {
  width: 17px; height: 17px;
  fill: currentColor;
}

.gs-footer__heading {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  margin-top: 0;
}

.gs-footer__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.gs-footer__list li {
  font-size: 12px;
  color: rgba(30,20,5,.5);
  line-height: 1.6;
}

.gs-footer__nav-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.gs-footer__nav-list a {
  font-size: 12px;
  color: rgba(30,20,5,.45);
  text-decoration: none;
  transition: color .2s;
}

.gs-footer__nav-list a:hover {
  color: var(--gold);
}

.gs-footer__text {
  font-size: 12px;
  color: rgba(30,20,5,.5);
  line-height: 1.75;
  margin-bottom: 14px;
  margin-top: 0;
}

.gs-footer__form-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.gs-footer__input {
  padding: 10px 14px;
  border: 1px solid rgba(176,138,59,.3);
  border-radius: 10px;
  font-size: 12px;
  outline: none;
  background: #faf6f0;
  color: #1a1408;
  font-family: inherit;
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box;
}

.gs-footer__input:focus {
  border-color: var(--gold);
}

.gs-footer__btn {
  background: linear-gradient(135deg, var(--gold), #8a6520);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  font-family: "Montserrat", sans-serif;
  transition: opacity .2s;
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.gs-footer__bottom {
  background: #f7f3ec;
  border-top: 1px solid #e3d9c8;
  padding: 16px 40px;
}

.gs-footer__bottom-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gs-footer__copy {
  font-size: 11px;
  color: rgba(30,20,5,.35);
  margin: 0;
}

.gs-footer__stars {
  display: flex;
  gap: 5px;
}

.gs-footer__stars svg {
  width: 11px; height: 11px;
  fill: var(--gold);
}

@media (max-width: 900px) {
  .gs-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .gs-footer__inner { grid-template-columns: 1fr; padding: 32px 20px 24px; gap: 24px; }
  .gs-footer__bottom { padding: 14px 20px; }
  .gs-footer__bottom-inner { flex-direction: column; gap: 8px; text-align: center; }
}
/* ── Logo WP en navbar (the_custom_logo genera .custom-logo-link > img.custom-logo) ── */
.nav-left .custom-logo-link {
  display: block;
  line-height: 0;
}
.nav-left .custom-logo-link img,
.nav-left .custom-logo {
  height: 56px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.18));
}
@media (max-width: 600px) {
  .nav-left .custom-logo-link img,
  .nav-left .custom-logo { height: 40px !important; }
}

/* ── FiboSearch — solo estética glass, sin tocar funcionalidad ── */

/* Ancho del wrapper */
.nav-search .dgwt-wcas-search-wrapp,
.nav-search .dgwt-wcas-sf-wrapp {
  width: 260px;
}

/* Wrapper externo + tema pirx — forma circular */
.nav-search .dgwt-wcas-search-wrapp,
.nav-search .dgwt-wcas-style-pirx,
.nav-search .dgwt-wcas-layout-classic,
.nav-search .dgwt-wcas-search-form,
.nav-search form.dgwt-wcas-search-form {
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Contenedor del form: glass pill */
.nav-search .dgwt-wcas-sf-wrapp {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
  overflow: visible !important;
  transition: background .2s, border-color .2s;
}
.nav-search .dgwt-wcas-sf-wrapp:focus-within {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(176,138,59,.45) !important;
}

/* Input: transparente sobre el glass */
.nav-search input.dgwt-wcas-search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-family: inherit !important;
  height: 40px !important;
  border-radius: 0 !important;
}
.nav-search input.dgwt-wcas-search-input::placeholder {
  color: rgba(255,255,255,.55) !important;
}

/* Lupa = button.dgwt-wcas-search-submit — alineación vertical */
.nav-search .dgwt-wcas-search-submit {
  background: transparent !important;
  border: none !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  height: auto !important;
}
.nav-search .dgwt-wcas-ico-magnifier {
  display: block;
  fill: rgba(255,255,255,.75) !important;
}
.nav-search .dgwt-wcas-sf-wrapp {
  position: relative !important;
}

/* Panel de sugerencias: queda debajo, posición normal */
.nav-search .dgwt-wcas-suggestions-wrapp {
  border-radius: 12px !important;
  margin-top: 6px !important;
}

@media (max-width: 900px) {
  .nav-search .dgwt-wcas-search-wrapp,
  .nav-search .dgwt-wcas-sf-wrapp { width: 200px; }
}
@media (max-width: 600px) {
  .nav-search { display: none; }
}

/* ── Flechas hero — z-index extra alto para superar Astra ── */
.hero-arrow {
  z-index: 9999 !important;
}
.hero-media {
  position: relative;
  z-index: 1;
}

/* ── Carrito de Astra en el navbar — estilo blanco para el hero ── */
.hero-header .ast-site-header-cart a,
.hero-header .ast-header-cart-icon {
  color: #fff !important;
}
.hero-header .ast-header-cart-count {
  background: var(--gold) !important;
}

/* ── Flechas hero: forzar SVG visible contra cualquier regla de Astra ── */
button.hero-arrow svg,
button.hero-arrow svg *,
button.hero-arrow polyline,
button.hero-arrow path,
button.hero-arrow line {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2.2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: #ffffff !important;
}
button.hero-arrow:hover svg,
button.hero-arrow:hover svg *,
button.hero-arrow:hover polyline,
button.hero-arrow:hover path {
  stroke: var(--gold) !important;
}

/* ── Flechas hero — chevron CSS puro (sin SVG, sin stroke) ── */
.hero-arrow svg { display: none !important; }

.hero-arrow__chevron {
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  border-bottom: none;
  border-left: none;
  flex-shrink: 0;
}

.hero-arrow--prev .hero-arrow__chevron {
  transform: rotate(-135deg) translateX(2px);
}

.hero-arrow--next .hero-arrow__chevron {
  transform: rotate(45deg) translateX(-2px);
}

.hero-arrow:hover .hero-arrow__chevron {
  border-color: var(--gold);
}

/* ── FiboSearch pirx: pisar background-color con especificidad máxima ── */
.nav-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp,
.nav-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
.nav-search .dgwt-wcas-style-pirx input[type="search"].dgwt-wcas-search-input {
  background-color: transparent !important;
  background: transparent !important;
  border-radius: 999px !important;
}

.nav-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  overflow: hidden !important;
}









/* ── FAQ: corregir alineación título y eyebrow ── */
.gs-faq__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin-bottom: 32px;
}
.gs-faq__title {
  white-space: normal !important;
  word-break: break-word !important;
  word-spacing: 100vw !important;
}

/* ── FAQ: fuente correcta en el título ── */
.gs-faq__left .gs-faq__title,
.gs-faq .gs-faq__title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(32px, 3.8vw, 52px) !important;
  line-height: 1.1 !important;
  color: var(--text-sand-dark) !important;
}
.gs-faq__left .gs-faq__label-text,
.gs-faq .gs-faq__label-text {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* ── FAQ: título más fino ── */
.gs-faq__left .gs-faq__title,
.gs-faq .gs-faq__title,
#faq-title {
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── Eliminar fondo celeste entre secciones (fondo de Astra en home) ── */
body.home,
body.home #page,
body.home .site-content,
body.home .ast-container,
body.home .entry-content,
body.home .site-main,
body.home .gs-landing {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Flechas testimonios — chevron CSS puro ── */
.gs-testimonials__arrow {
  cursor: pointer;
}
.testi-arrow__chevron {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  flex-shrink: 0;
}
.testi-arrow__chevron--prev {
  transform: rotate(-135deg) translateX(2px);
}
.testi-arrow__chevron--next {
  transform: rotate(45deg) translateX(-2px);
}

/* ── Eliminar espacio extra debajo del footer ── */
body.home,
body.home #page,
body.home .ast-site-footer-wrap,
body.home .site-footer {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.home #page::after,
body.home .site::after {
  display: none !important;
  content: none !important;
}
/* ── Footer form: asegurar full width contra Astra ── */
.gs-footer__form-col form,
.gs-footer__form-col input[type="email"],
.gs-footer__form-col button[type="submit"] {
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: none !important;
}

/* ── Fix hover azul de Astra en SABER MÁS y carrito ── */
.hero-more,
.hero-more:hover,
.hero-more:focus,
.hero-more:active,
.hero-more:visited {
  color: #fff !important;
  text-decoration: none !important;
  outline: none !important;
}
.hero-more:hover {
  border-color: rgba(176,138,59,.85) !important;
  background: linear-gradient(135deg, rgba(176,138,59,.28), rgba(176,138,59,.12)) !important;
}

/* Carrito de Astra — quitar azul en hover */
.hero-header .ast-site-header-cart a,
.hero-header .ast-site-header-cart a:hover,
.hero-header .ast-site-header-cart a:focus,
.hero-header .woocommerce-cart-link,
.hero-header .woocommerce-cart-link:hover {
  color: #fff !important;
  text-decoration: none !important;
  outline: none !important;
}
.hero-header .ast-site-header-cart a:hover {
  color: var(--gold) !important;
}

/* ── Carrito Astra — quitar azul en hover ── */
.hero-header .ast-site-header-cart .ast-cart-menu-wrap,
.hero-header .ast-site-header-cart .ast-cart-menu-wrap:hover,
.hero-header .ast-site-header-cart .count,
.hero-header a.cart-container,
.hero-header a.cart-container:hover,
body.home .ast-header-cart a,
body.home .ast-header-cart a:hover,
body.home .ast-header-cart a:focus,
body.home .ast-header-cart .ast-cart-menu-wrap,
body.home .ast-header-cart .ast-cart-menu-wrap:hover {
  color: #fff !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}
body.home .ast-header-cart a:hover {
  color: var(--gold) !important;
}