/* =====================================================================
   GOES · Home · CSS según Figma (HOME PAGE · Desktop light, sección ACTUALIZADO)
   Requiere modelo-figma.css cargado antes (tokens, cabecera, pie, botones, formulario).
   Claude · 2026-10-08
   ===================================================================== */

.goes-home { --panel-orange: var(--orange); }
.goes-rule { padding-bottom: 14px; border-bottom: 1px solid #0B0B0B; }

/* ---------- hero ---------- */
.goes-hhero { background: var(--bg); padding: 0 clamp(16px, 2.8vw, 48px) clamp(24px, 2.4vw, 42px); }
.goes-hhero__wordmark img { width: 100%; height: auto; display: block; margin: clamp(6px, .8vw, 14px) 0 clamp(8px, 1vw, 18px); }
.goes-hhero__media {
  position: relative; aspect-ratio: 1632 / 780; overflow: hidden; background: #000;
  clip-path: polygon(var(--corner) 0, 100% 0, 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, 0 100%, 0 var(--corner));
}
.goes-hhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.goes-hhero__tags { position: absolute; left: 0; right: 0; bottom: clamp(18px, 2.4vw, 42px); display: flex; justify-content: space-between; padding: 0 clamp(20px, 3vw, 56px); color: #fff; font-size: clamp(12px, .9vw, 15px); font-weight: 500; z-index: 2; }
.goes-hhero__tags li { display: flex; align-items: center; gap: 10px; }
.goes-hhero__tags i { width: 10px; height: 10px; background: var(--orange); display: inline-block; }
.goes-hhero__scroll { position: absolute; left: 50%; bottom: clamp(60px, 7vw, 120px); transform: translateX(-50%); color: #fff; font-size: 10px; font-weight: 700; text-align: center; z-index: 2; }
.goes-hhero__scroll svg { width: 18px; height: 28px; display: block; margin: 4px auto 0; }

/* ---------- descubre nuestros modelos ---------- */
.goes-models { padding: clamp(24px, 2.4vw, 42px) 0; background: var(--bg); }
.goes-models__panel {
  position: relative; background: var(--orange); color: #0B0B0B;
  padding: clamp(28px, 3.2vw, 56px) clamp(20px, 3vw, 56px) clamp(28px, 3vw, 52px);
  clip-path: polygon(var(--corner) 0, 100% 0, 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, 0 100%, 0 var(--corner));
}
.goes-models__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.goes-models__head .goes-h1 { font-size: clamp(34px, 3.5vw, 60px); }
.goes-models__bigarr { width: clamp(56px, 6vw, 104px); height: clamp(56px, 6vw, 104px); flex: 0 0 auto; }
.goes-models__series { display: flex; justify-content: space-between; margin-top: clamp(24px, 2.8vw, 48px); border-bottom: 1px solid rgba(11,11,11,.35); }
.goes-models__series button { padding: 0 2px 10px; font-family: var(--font-head); font-weight: 700; font-size: clamp(14px, 1.05vw, 18px); letter-spacing: .04em; color: rgba(11,11,11,.45); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.goes-models__series button.is-active { color: #0B0B0B; border-bottom-color: #0B0B0B; }
.goes-models__stage { position: relative; height: clamp(260px, 26vw, 460px); margin-top: clamp(16px, 1.6vw, 28px); }
.goes-models__slide { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding-bottom: 56px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.goes-models__slide.is-active { opacity: 1; pointer-events: auto; }
.goes-models__num { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 900; font-size: clamp(120px, 17vw, 300px); line-height: 1; letter-spacing: -.02em; color: rgba(255,255,255,.28); pointer-events: none; }
.goes-models__slide img { position: relative; z-index: 1; width: min(60%, 560px); max-height: 100%; height: auto; object-fit: contain; }
.goes-models__link { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 2; font-size: 13px; font-weight: 500; color: #0B0B0B; }
.goes-models__bar { height: 3px; background: rgba(11,11,11,.3); width: min(100%, 480px); margin: 14px auto 0; }
.goes-models__bar i { display: block; height: 100%; background: #0B0B0B; transition: transform .3s, width .3s; }
.goes-models__tabs { display: flex; justify-content: center; gap: clamp(20px, 3vw, 56px); margin-top: 14px; }
.goes-models__tabs button { font-family: var(--font-head); font-weight: 700; font-size: clamp(13px, 1vw, 17px); color: rgba(11,11,11,.45); }
.goes-models__tabs button.is-active { color: #0B0B0B; }

/* ---------- banners TERROX INNOVA / NUESTRA VISIÓN ---------- */
.goes-innova, .goes-vision { padding: clamp(14px, 1.6vw, 28px) 0; background: var(--bg); }
.goes-innova__banner, .goes-vision__banner {
  position: relative; overflow: hidden; aspect-ratio: 1520 / 520; display: grid; align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, 0 100%);
}
.goes-innova__img, .goes-vision__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.goes-innova__banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,106,31,.75) 0%, rgba(255,106,31,.25) 30%, rgba(255,255,255,0) 60%); }
.goes-innova__txt { position: relative; z-index: 1; justify-self: end; text-align: right; width: min(100%, 440px); padding: 0 clamp(20px, 5vw, 110px) 0 20px; color: #0B0B0B; }
.goes-innova__txt p, .goes-vision__txt p { margin-top: 14px; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.35; }
.goes-innova__txt .goes-btn, .goes-vision__txt .goes-btn { margin-top: 20px; min-width: 220px; }
.goes-vision__banner { clip-path: polygon(var(--corner) 0, 100% 0, 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, 0 100%, 0 var(--corner)); background: var(--orange); }
.goes-vision__img { mix-blend-mode: multiply; opacity: .9; }
.goes-vision__txt { position: relative; z-index: 1; width: min(100%, 460px); padding: 0 20px 0 clamp(20px, 5vw, 110px); color: #fff; }
.goes-vision__txt .goes-h2 { color: #fff; }
.goes-btn--dark { background: var(--orange); color: #0B0B0B; }

/* ---------- concesionarios ---------- */
.goes-dealers { padding: clamp(40px, 4.6vw, 80px) 0 clamp(24px, 2.4vw, 42px); background: var(--bg); }
.goes-dealers__search { position: relative; display: block; width: min(100%, 360px); margin-top: clamp(20px, 2.4vw, 40px); }
.goes-dealers__search input { width: 100%; padding: 10px 40px 10px 14px; border: 0; border-radius: 4px; background: #DCDBE0; font: inherit; font-size: 13px; color: #0B0B0B; }
.goes-dealers__search svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #0B0B0B; }
.goes-dealers__grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(16px, 1.6vw, 28px); margin-top: clamp(18px, 2vw, 32px); align-items: stretch; }
.goes-dealers__list {
  background: #DCDBE0; padding: 16px 18px 16px 16px; max-height: 520px; overflow-y: auto; border-left: 3px solid #0B0B0B;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
  scrollbar-width: thin;
}
.goes-dealers__list li { position: relative; padding: 14px 0 14px 14px; border-bottom: 2px solid #0B0B0B; }
.goes-dealers__list li.is-active::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--orange); }
.goes-dealers__list li[hidden] { display: none; }
.goes-dealers__list h3 { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.goes-dealers__list p { margin-top: 4px; font-size: 11px; line-height: 1.35; color: #3A3A42; text-transform: uppercase; }
.goes-dealers__tel { text-transform: none !important; }
.goes-dealers__tel a { color: var(--orange); }
.goes-dealers__map { min-height: 520px; background: #DCDBE0; border: 1px solid var(--orange); }
.goes-dealers__map .leaflet-container { height: 100%; min-height: 520px; font: inherit; }
.goes-dealers__map .leaflet-tile-pane { filter: grayscale(1) contrast(.9) brightness(1.05); }
.goes-marker { width: 10px; height: 10px; background: var(--orange); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--orange); }
.goes-marker.is-active { transform: scale(1.6); }

/* ---------- contáctanos ---------- */
.goes-contact { position: relative; padding: clamp(40px, 4.6vw, 80px) 0 clamp(48px, 6vw, 110px); background: var(--bg); }
.goes-contact__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(24px, 4vw, 72px); margin-top: clamp(28px, 3.2vw, 56px); align-items: start; }
.goes-contact__claim { padding-top: clamp(8px, 1.4vw, 24px); font-family: var(--font-head); font-size: clamp(18px, 1.5vw, 26px); line-height: 1.15; font-weight: 500; }
.goes-contact__strong { font-weight: 900; font-size: clamp(22px, 1.9vw, 32px); }
.goes-form__panel--home { width: 100%; margin: 0; }
.goes-form__panel--home .goes-form__form { margin-top: 0; }
.goes-contact__sq { left: var(--gutter); bottom: clamp(24px, 2.6vw, 44px); }
.goes-contact .goes-wrap { position: relative; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .goes-dealers__grid, .goes-contact__grid { grid-template-columns: 1fr; }
  .goes-dealers__list { max-height: 320px; }
  .goes-innova__banner, .goes-vision__banner { aspect-ratio: auto; min-height: 380px; }
}
@media (max-width: 640px) {
  .goes-hhero__media { aspect-ratio: 3 / 4; }
  .goes-hhero__tags { flex-direction: column; gap: 8px; align-items: flex-start; }
  .goes-hhero__scroll { display: none; }
  .goes-models__head { flex-direction: column; }
  .goes-models__series { gap: 14px; overflow-x: auto; justify-content: flex-start; }
  .goes-models__slide img { width: 90%; }
  .goes-innova__txt, .goes-vision__txt { padding: 24px; width: 100%; text-align: left; }
  .goes-innova__banner::before { background: linear-gradient(180deg, rgba(255,106,31,.75), rgba(255,255,255,0)); }
  .goes-contact__sq { display: none; }
}

/* ---------- formulario dentro de .goes-contact (modelo-figma.css lo scopea a .goes-form) ---------- */
.goes-contact input:not([type=checkbox]), .goes-contact textarea {
  width: 100%; padding: 14px 0 12px; background: transparent; border: 0; border-bottom: 1px solid #9A9AA3;
  font: inherit; font-size: 15px; letter-spacing: .02em; color: #0B0B0B; outline: none; resize: vertical;
}
.goes-contact input::placeholder, .goes-contact textarea::placeholder { color: #0B0B0B; opacity: 1; text-transform: uppercase; }
.goes-contact input:focus, .goes-contact textarea:focus { border-bottom-color: var(--orange); }
.goes-contact textarea { min-height: 120px; }
.goes-contact .goes-check input { width: 15px; height: 15px; padding: 0; border: 0; }
.goes-contact .goes-btn--block { margin-top: 28px; min-height: 58px; }
.goes-dealers__map .leaflet-control-attribution { font-size: 9px; background: rgba(245,247,248,.8); color: #6B6B74; }