/* =========================================================
   Proyectos 360 — Grupo Sierra (CSS unificado y sin conflictos)
   - Aside con sticky + scroll interno
   - Viewer principal (plano + 360)
   - Tira de miniaturas horizontal, responsiva, con scroll-snap
   - Scrollbars sutiles y consistentes (estilo imagen 2)
========================================================= */

:root{
  --brand:#1F2D54;
  --gold:#FCA503;
  --green:#3ABE6D;
  --text:#e7ecff;
  --stroke:rgba(255,255,255,.10);
  --bg:#0f1a37;
  /* ↓ este valor controla cuántos proyectos visibles quieres */
  --mini-item-h: 83px; 
  --items-visible: 5; /* antes 4 */
  --gap: 10px;
}

/* ===== Scroll global estable ===== */
html,body{height:auto;overflow-y:auto}
html{scrollbar-gutter:stable}

/* ===== Sección base ===== */
.gs-proy{
  background: transparent;
  color: var(--text);
  padding: clamp(12px,2vw,18px);
}

/* ===== Layout (aside + viewer) ===== */
.gs-proy__layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:16px;
  align-items:stretch;                /* ambos llenan el alto */
}
@media (max-width: 980px){
  .gs-proy__layout{ grid-template-columns:1fr; }
}

/* ===== Aside (mini proyectos) ===== */
.gs-proy__aside{
  background: rgba(255,255,255,.02);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:12px;
  position:sticky;
  top: calc(var(--header-offset, 80px) + 8px);
  backdrop-filter: blur(6px);

  /* Igualar alto al viewer en desktop */
  display:flex;
  flex-direction:column;
  height: 100%;
}
@media (max-width: 980px){
  .gs-proy__aside{
    top: 8px;
    height:auto;                      /* móvil libre */
  }
}
.gs-proy__aside-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;
}
.gs-proy__title{font-size:18px;margin:0}
.gs-proy__search input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}

/* ===== Lista: llena el alto disponible con su propio scroll ===== */
.gs-proy__list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:10px;

  /* antes: max-height con 5 items; ahora queremos ocupar todo el alto */
  max-height: none;
  overflow:auto;
  flex: 1;                  /* llena espacio vertical */
  min-height: 0;            /* evita overflow del contenedor flex */
}
.gs-proy__item{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:10px;
  min-height: var(--mini-item-h);
  padding:8px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  backdrop-filter: blur(4px);
}
.gs-proy__item:hover{ outline:2px solid rgba(252,165,3,.35) }
.gs-proy__item.is-active{
  outline:2px solid var(--gold);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.gs-proy__thumb{
  width:64px;height:64px;border-radius:10px;object-fit:cover;background:#101a38;
}
.gs-proy__name{font-weight:600;margin:0 0 4px;font-size:14px}
.gs-proy__chips{display:flex;flex-wrap:wrap;gap:6px}
.gs-chip{
  font-size:11px;padding:3px 8px;border-radius:999px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.04)
}
.gs-chip--ok{border-color:rgba(58,190,109,.28)}
.gs-chip--warn{border-color:rgba(252,165,3,.30)}

/* ===== Viewer ===== */
.gs-proy__viewer{
  background:rgba(255,255,255,.02);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:12px;
  backdrop-filter: blur(6px);
  height: 100%;
  overflow: hidden; /* nada se sale del borde redondeado */
}
@media (max-width:980px){
  .gs-proy__viewer{ margin-top: 12px; }
}
.gs-proy__info{display:grid;gap:4px;margin-bottom:10px}
.gs-proy__nombre{margin:0;font-size:20px}
.gs-proy__dir,.gs-proy__desc{margin:0;opacity:.9}
.gs-proy__actions{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.gs-btn{
  padding:8px 12px;border-radius:12px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);color:var(--text);
  text-decoration:none;cursor:pointer
}
.gs-btn--gold{background:var(--gold);color:#1b1505;border-color:#d27f03}

/* ===== Contenedor visual principal (plano/360) ===== */
.gs-pano{
  width:100%;
  height:min(55vh,600px);
  border-radius:12px;
  overflow:hidden;
  background:rgba(11,20,48,.55);
  position:relative;
}
@media (max-width:768px){
  .gs-pano{ height:45vh; }
}

/* Imagen estática (plano) */
.gs-pano__static{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#0b1430
}

/* ===== Thumbnails (tira horizontal responsiva + scroll-snap) ===== */
.gs-thumbs{
  margin-top:10px;
  display:flex;
  flex-wrap: nowrap;                 /* una sola fila */
  gap:8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x:auto;                   /* scroll horizontal */
  overflow-y:hidden;
  padding: 6px 8px;                  /* simétrico */
  -webkit-overflow-scrolling: touch; /* inercia iOS */
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;     /* encaje suave */
  scroll-padding-inline: 8px;

  /* Degradé sutil en bordes (se desactiva en móviles chicos) */
  --fade: linear-gradient(90deg, rgba(15,26,55,0) 0, rgba(15,26,55,.6) 14px, rgba(15,26,55,.6) calc(100% - 14px), rgba(15,26,55,0) 100%);
  -webkit-mask-image: var(--fade);
          mask-image: var(--fade);
}

/* Miniatura responsiva con snap */
.gs-thumb{
  flex: 0 0 auto;
  width: clamp(64px, 11vw, 112px);
  height: clamp(44px, 7.4vw, 74px);  /* aprox 16:9 */
  border-radius:10px;
  border:1px solid var(--stroke);
  background:rgba(13,23,54,.6);
  overflow:hidden;
  cursor:pointer;
  backdrop-filter: blur(3px);
  position:relative;
  scroll-snap-align: start;
}
.gs-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.gs-thumb.is-active{outline:2px solid var(--gold)}
.gs-thumb[data-type="plan"].is-active{outline:2px solid var(--green)}
.gs-thumb__tag{
  position:absolute;left:6px;top:6px;font-size:11px;padding:2px 6px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff
}

/* ===== Scrollbar sutil y consistente (lista + thumbs) ===== */
/* Lista lateral (vertical) */
.gs-proy__list::-webkit-scrollbar{ width: 10px; }
.gs-proy__list::-webkit-scrollbar-track{
  background: rgba(0,0,0,.25);
  border-radius: 999px;
}
.gs-proy__list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.35);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.15);
}
.gs-proy__list::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.55); }
.gs-proy__list{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) rgba(0,0,0,.25); }

/* Tira de miniaturas (horizontal) */
.gs-thumbs::-webkit-scrollbar{ height: 10px; }
.gs-thumbs::-webkit-scrollbar-track{ background: rgba(0,0,0,.25); border-radius:999px; }
.gs-thumbs::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.35);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.15);
}
.gs-thumbs::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.55); }
.gs-thumbs{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) rgba(0,0,0,.25); }

/* ===== Breakpoints estrictos (sin desbordes) ===== */
@media (max-width: 680px){
  .gs-thumbs{
    gap:6px;
    padding:4px 6px;
    -webkit-mask-image: none; /* liberamos ancho útil */
            mask-image: none;
  }
  .gs-thumb{
    width: clamp(58px, 22vw, 96px);
    height: clamp(40px, 14vw, 64px);
  }
}
@media (max-width: 420px){
  .gs-thumbs{ gap:4px; padding:4px; }
  .gs-thumb{
    width: clamp(52px, 26vw, 88px);
    height: clamp(36px, 16vw, 58px);
  }
}

/* ===== Overlay de plano (si lo usas en otra vista) ===== */
.gs-plano{
  position:relative;margin-top:10px;border:1px solid var(--stroke);
  border-radius:12px;overflow:hidden;background:rgba(13,23,54,.55);
  backdrop-filter: blur(4px)
}
.gs-plano img{width:100%;height:auto;display:block}
.gs-plano__close{
  position:absolute;right:8px;top:8px;border:0;background:rgba(0,0,0,.5);
  color:#fff;width:32px;height:32px;border-radius:999px;cursor:pointer
}

/* ===== Utilidades ===== */
.is-hidden{ display:none !important; }

/* === Override SOLO para el visor 360 (forzando el inline) === */
#visor360.gs-pano{ height: min(42vh, 480px) !important; }
@media (max-width: 980px){
  #visor360.gs-pano{ height: min(48vh, 480px) !important; }
}
@media (max-width: 768px){
  #visor360.gs-pano{ height: min(42vh, 420px) !important; }
}
@media (max-width: 560px){
  #visor360.gs-pano{ height: min(38vh, 360px) !important; }
}
@media (max-width: 420px){
  #visor360.gs-pano{ height: min(34vh, 320px) !important; }
}


/* ===== Ajuste general de alturas (solo desktop) ===== */

/* Altura visible total del aside (4 ítems + cabecera + margen) */
@media (min-width: 1081px){
  .gs-proy__aside {
    height: calc(
      var(--mini-item-h) * var(--items-visible)
      + (var(--items-visible) - 1) * var(--gap)
      + 120px   /* espacio adicional para título y buscador */
    );
  }

  /* Hacemos que el viewer tenga la misma altura */
  .gs-proy__viewer {
    height: calc(
      var(--mini-item-h) * var(--items-visible)
      + (var(--items-visible) - 1) * var(--gap)
      + 120px
    );
  }
}

/* Mantiene comportamiento libre en móviles */
@media (max-width: 980px){
  .gs-proy__aside,
  .gs-proy__viewer {
    height: auto;
  }
}

/* Asegúrate de tener esta línea (ya la agregamos antes) */
.gs-proy__list{
  /* ... */
  max-height: calc(var(--mini-item-h) * var(--items-visible)
                 + (var(--items-visible) - 1) * var(--gap));
}

/* Responsive: solo 3 visibles en la lista */
@media (max-width: 980px){
  .gs-proy{ --items-visible: 4; }  /* ← solo cambia el conteo visible */
}


/* =========================================================
   🟥 Tema rojo → negro (override sin romper tu layout)
   - No cambia estructura ni JS
   - Aplica solo dentro de .gs-proy
========================================================= */
.gs-proy{
  /* Degradado principal */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(199,33,33,.35) 0%, rgba(199,33,33,0) 55%),
    linear-gradient(180deg, #bb0a0a 0%, #a10707 38%, #2c1212 100%) !important;
  color:#fff !important;

  /* Re-definimos variables locales (solo en esta sección) */
  --text:   #ffffff;
  --stroke: rgba(255,255,255,.18);
  --bg:     #000000;
}

/* Bordes y vidrios coherentes sobre rojo/negro */
.gs-proy__aside,
.gs-proy__viewer,
.gs-proy__item,
.gs-thumb{
  border-color: var(--stroke) !important;
  background: rgba(255,255,255,.04) !important;   /* glass suave */
  color:#fff !important;
  backdrop-filter: blur(6px);
}

/* Títulos y textos 100% blancos */
.gs-proy__title,
.gs-proy__nombre,
.gs-proy__dir,
.gs-proy__desc,
.gs-proy__name{
  color:#fff !important;
}

/* Buscador: vidrio claro + texto blanco */
.gs-proy__search input{
  background: rgba(255,255,255,.07) !important;
  border-color: var(--stroke) !important;
  color:#fff !important;
  caret-color:#fff;
}

/* Chips: bordes visibles sobre fondo rojo/negro */
.gs-chip{ 
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.gs-chip--ok{ border-color: rgba(58,190,109,.55) !important; }
.gs-chip--warn{ border-color: rgba(252,165,3,.55) !important; }

/* Hover/activo en la lista lateral */
.gs-proy__item:hover{ outline:2px solid rgba(227,59,59,.45) !important; }
.gs-proy__item.is-active{ outline:2px solid rgba(255,255,255,.85) !important; }

/* Botones */
.gs-btn{
  color:#fff !important;
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.08) !important;
}
.gs-btn:hover{ background: rgba(255,255,255,.12) !important; }

/* El botón dorado se mantiene (contraste OK) */
.gs-btn.gs-btn--gold{
  background: var(--gold) !important;
  color: #1b1505 !important;
  border-color: #d27f03 !important;
}

/* Visores (quitar azules) */
.gs-pano{
  background: rgba(0,0,0,.55) !important;
}
.gs-pano__static{ background:#000 !important; }

/* Miniaturas: fondo neutro oscuro (sin azul) */
.gs-thumb{
  background: rgba(0,0,0,.6) !important;
}
.gs-thumb__tag{
  background: rgba(0,0,0,.6) !important;
  color:#fff !important;
}

/* Degradé del carrusel de thumbs, adaptado a rojo/negro */
.gs-thumbs{
  --fade: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.6) 14px,
    rgba(0,0,0,.6) calc(100% - 14px),
    rgba(0,0,0,0) 100%
  ) !important;
  -webkit-mask-image: var(--fade) !important;
          mask-image: var(--fade) !important;
}

/* Scrollbars blancos sutiles sobre fondo oscuro */
.gs-proy__list::-webkit-scrollbar-track,
.gs-thumbs::-webkit-scrollbar-track{ background: rgba(0,0,0,.35) !important; }
.gs-proy__list::-webkit-scrollbar-thumb,
.gs-thumbs::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.45) !important;
  border: 2px solid rgba(0,0,0,.25) !important;
}
.gs-proy__list{ scrollbar-color: rgba(255,255,255,.55) rgba(0,0,0,.35) !important; }
.gs-thumbs{ scrollbar-color: rgba(255,255,255,.55) rgba(0,0,0,.35) !important; }

/* Ajustes de alturas ya existentes (se respetan); solo color texto */
#visor360.gs-pano,
#visorPlano.gs-pano{ color:#fff !important; }

/* ➕ Una fila más de alto en desktop */
@media (min-width: 1081px){
  .gs-proy{
    --items-visible: 6; /* antes 5 */
  }
}

@media (min-width: 1081px){
  #visor360.gs-pano{ height: min(48vh, 520px) !important; }
}


/* =========================================================
   🧱 Tema final — Glass blancos sólidos + Botones rojos
   (sin dorado, sin transparencia)
========================================================= */

/* 🔹 Anula variables doradas */
:root,
.gs-proy {
  --gold: none !important;
  --gold-700: none !important;
}

/* 🔸 Fondo general (mantiene tu rojo→negro) */
.gs-proy {
  background:
    linear-gradient(180deg, #B81818 0%, #7a1010 40%, #550909 100%) !important;
  color: #fff !important;
}

/* ⚪ Glass blancos sólidos */
.gs-proy__aside,
.gs-proy__viewer,
.gs-proy__item,
.gs-thumb,
.gs-pano,
.gs-pano__static {
  background: #ffffff !important;          /* blanco puro */
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #000 !important;                  /* texto negro dentro */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  backdrop-filter: none !important;        /* sin transparencia */
}

/* Títulos y textos principales en blanco */
.gs-proy__title,
.gs-proy__nombre,
.gs-proy__dir,
.gs-proy__desc {
  color: #ffffff !important;
}

/* Textos dentro de los glass negros */
.gs-proy__item *,
.gs-thumb *,
.gs-chip {
  color: #000 !important;
}

/* Caja de búsqueda */
.gs-proy__search input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  color: #000 !important;
  caret-color: #000 !important;
}
.gs-proy__search input::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* Chips claros */
.gs-chip {
  background: #f2f2f2 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #000 !important;
}

/* Hover y activo */
.gs-proy__item:hover {
  outline: 2px solid rgba(0, 0, 0, 0.3) !important;
}
.gs-proy__item.is-active {
  outline: 2px solid #C41616 !important;
}

/* 🔴 Botones rojos sólidos (texto blanco) */
.gs-btn,
.gs-btn--gold {
  background: #C41616 !important;
  border: 1px solid #A01111 !important;
  color: #ffffff !important;
  font-weight: 600;
  transition: background 0.25s ease, transform 0.2s ease;
}
.gs-btn:hover,
.gs-btn--gold:hover {
  background: #E22E2E !important;
  transform: scale(1.03);
}

/* Scrollbars discretos */
.gs-proy__list::-webkit-scrollbar-thumb,
.gs-thumbs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.35) !important;
}
.gs-proy__list::-webkit-scrollbar-track,
.gs-thumbs::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.25) !important;
}


/* ====== BOTÓN "MOSTRAR PLANO" SIN DORADO (BORDE ROJO) ====== */

/* 1) Regla ultra específica para anular cualquier estilo previo */
.gs-proy .gs-proy__viewer .gs-proy__actions > button#btn-plan.gs-btn.gs-btn--gold {
  background: #ffffff !important;          /* normal: fondo blanco */
  color: #000 !important;                   /* texto negro */
  border: 2px solid #C41616 !important;     /* 🔴 borde ROJO, no dorado */
  border-top-color: #C41616 !important;
  border-right-color: #C41616 !important;
  border-bottom-color: #C41616 !important;
  border-left-color: #C41616 !important;

  /* Anula posibles “tintes” */
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  text-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;

  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}

/* 2) Hover: fondo rojo y texto blanco */
.gs-proy .gs-proy__viewer .gs-proy__actions > button#btn-plan.gs-btn.gs-btn--gold:hover {
  background: #C41616 !important;           /* 🔴 rojo sólido */
  color: #ffffff !important;                 /* texto blanco */
  border-color: #C41616 !important;
  transform: scale(1.03);
}

/* 3) Active/focus */
.gs-proy .gs-proy__viewer .gs-proy__actions > button#btn-plan.gs-btn.gs-btn--gold:active,
.gs-proy .gs-proy__viewer .gs-proy__actions > button#btn-plan.gs-btn.gs-btn--gold:focus {
  background: #A81212 !important;           /* rojo más oscuro */
  color: #ffffff !important;
  border-color: #A81212 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 4) Por si alguna regla global sigue asignando “dorado” via variable */
:root, .gs-proy {
  --gold: none !important;
  --gold-700: none !important;
}


#visor360.gs-pano {
  height: 55vh !important;   /* antes 60vh → ahora ocupa más pantalla */
}


#proy-nombre,
#proy-direccion,
#proy-descripcion {
  color: #000000 !important;    /* texto negro */
}

/* Si deseas mantener el título un poco más fuerte */
#proy-nombre {
  font-weight: 700 !important;
}

/* Dirección y descripción con tono gris oscuro opcional */
#proy-direccion,
#proy-descripcion {
  color: #222222 !important;
}

/* =========================================================
   🔁 CARRUSEL HORIZONTAL DE PROYECTOS + HERO
   (override sobre estilos anteriores)
========================================================= */

/* Layout general: una sola columna (top + viewer) */
.gs-proy__layout{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Cabecera superior (título + buscador) */
.gs-proy__top{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gs-proy__top-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Buscador, mantenemos tu estilo base */
.gs-proy__search{
  min-width: 220px;
}

/* ░░░ Carrusel tipo "conteo horizontal" ░░░ */
.gs-strip{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botones flecha */
.gs-strip__arrow{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.gs-strip__arrow:hover{
  transform: translateY(-1px);
}

/* Lista como carrusel horizontal */
.gs-strip__list{
  list-style: none;
  margin: 0;
  padding: 4px 4px 10px;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Ocultamos propiedades de lista vertical anteriores */
.gs-strip__list.gs-proy__list{
  max-height: none;
}

/* Tarjeta de proyecto (estilo imagen 1) */
.gs-proy__item{
  scroll-snap-align: start;
  flex: 0 0 260px;           /* ancho aproximado de tarjeta */
  max-width: 280px;
  min-height: auto;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #ffffff;
  color: #111;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Imagen superior de la tarjeta */
.gs-proy__thumb{
  width: 100%;
  height: 160px;
  border-radius: 0;
  object-fit: cover;
  display: block;
}

/* Contenido inferior */
.gs-proy__item > div{
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gs-proy__name{
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: #111;
}

.gs-proy__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gs-chip{
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
}

/* Estado activo (tarjeta seleccionada) */
.gs-proy__item.is-active{
  outline: 2px solid #C41616;
  box-shadow: 0 0 0 1px rgba(196,22,22,0.25), 0 12px 24px rgba(0,0,0,0.18);
}

/* En móviles, tarjetas un poco más pequeñas */
@media (max-width: 700px){
  .gs-proy__item{
    flex: 0 0 220px;
  }
  .gs-proy__thumb{
    height: 140px;
  }
}


/* ░░░ Bloque principal: viewer con fondo blanco ░░░ */
.gs-proy__viewer{
  background: #ffffff !important;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.12);
  color: #000;
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);

  /* 🧊 Aire lateral y abajo */
  padding: 18px 100px 90px !important;  /* más aire en la parte baja */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Info textual */
.gs-proy__info{
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.gs-proy__nombre{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #111 !important;
}

.gs-proy__dir,
.gs-proy__desc{
  margin: 0;
  color: #222 !important;
}

/* ░░░ Imagen HERO del proyecto ░░░ */
.gs-hero{
  margin: 0 0 96px !important;       /* ← ANTES 64px → AHORA TRIPLE */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.15);
  position: relative;
}

.gs-hero__img{
  width: 100%;
  display: block;
  height: min(75vh, 760px) !important;
  object-fit: cover;
}

/* ░░░ PLANO (debajo de la imagen) ░░░ */
.gs-plan{
  margin: 0 0 120px !important;       /* ← ANTES 80px → AHORA TRIPLE */
  text-align: center;
}

.gs-plan__img{
  width: 70%;
  max-width: 780px;
  border-radius: 14px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}

#visorPlano img{
  width: 70%;
  max-width: 780px;
  border-radius: 14px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}

/* ░░░ VISOR 360 ░░░ */
#visor360.gs-pano{
  background: #000 !important;
  width: 100%;
  height: min(70vh, 720px) !important;
  border-radius: 16px;
  margin: 0 0 72px !important;      /* ← ANTES 44px → AHORA TRIPLE */
}

/* Miniaturas más separadas del visor 360 */
.gs-thumbs{
  margin-top: 72px !important;      /* ← ANTES 44px → AHORA TRIPLE */
}

/* ░░░ Responsive: aire y alturas ░░░ */
@media (max-width: 1400px){
  .gs-proy__viewer{
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

@media (max-width: 1100px){
  .gs-proy__viewer{
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

@media (max-width: 900px){
  .gs-proy__viewer{
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .gs-hero__img{
    height: min(60vh, 620px) !important;
  }
  #visor360.gs-pano{
    height: min(60vh, 600px) !important;
  }
}

@media (max-width: 600px){
  .gs-proy__viewer{
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 40px !important;
  }

  .gs-hero__img,
  #visor360.gs-pano{
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 3;
    max-height: 380px;
    border-radius: 14px;
  }

  #visorPlano img,
  .gs-plan__img{
    width: 90%;
    max-width: 520px;
  }
}

@media (max-width: 420px){
  .gs-proy__viewer{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .gs-hero__img,
  #visor360.gs-pano{
    max-height: 340px;
  }
}


/* =========================================================
   SLIDER AMENIDADES — ROJO / NEGRO (MEJORADO)
========================================================= */

.gs-amenities{
  position: relative;
  margin: 0 auto 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 1400px;             /* ✔ centrado real */
}

/* Zona visible */
.gs-amenities__viewport{
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* Pista deslizable */
.gs-amenities__track{
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  padding: 25px 0;
  transition: transform .45s ease;
}

/* ------ SLIDE (tarjeta) ------ */
.gs-amenity{
  position: relative;
  flex: 0 0 62%;
  max-width: 1000px;
  aspect-ratio: 16 / 6;
  border-radius: 26px;

  background: #000;
  overflow: visible;               /* ✔ el badge flota perfecto */

  transform: scale(.80);
  opacity: .40;

  box-shadow: 0 12px 34px rgba(0,0,0,.30);
  transition: 
    transform .45s ease,
    opacity .45s ease,
    box-shadow .45s ease;
}

/* Slide activo */
.gs-amenity.is-active{
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.gs-amenity__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* ------ BADGE ROJO (cinta) ------ */
.gs-amenity__badge{
  position: absolute;
  top: -36px;                      /* ✔ más alto y visible */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

.gs-amenity__badge span{
  display: inline-block;
  padding: 12px 34px;
  border-radius: 22px;
  background: #C41616;
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(0,0,0,.40);
}

/* ------ Flechas ------ */
.gs-amenities__arrow{
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 0;

  background: #000;
  color: #fff;
  font-size: 30px;

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

  box-shadow: 0 8px 18px rgba(0,0,0,.45);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.gs-amenities__arrow:hover{
  background: #C41616;
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}

.gs-amenities__arrow:active{
  transform: translateY(1px) scale(.96);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px){
  .gs-amenity{ flex: 0 0 70%; }
}

@media (max-width: 1024px){
  .gs-amenity{
    flex: 0 0 80%;
    aspect-ratio: 16 / 7;
  }
}

@media (max-width: 768px){
  .gs-amenities{ gap: 10px; }
  .gs-amenities__arrow{
    width: 42px; height: 42px; font-size: 22px;
  }
  .gs-amenity{ flex: 0 0 90%; }
}

@media (max-width: 520px){
  .gs-amenity{
    flex: 0 0 95%;
    aspect-ratio: 16 / 9;
  }
  .gs-amenity__badge{ top: -26px; }
  .gs-amenity__badge span{
    font-size: 13px;
    padding: 8px 18px;
  }
}