/* ============================================
   JG Reformas — Secciones (estructura Modus, look minimalista frío)
   ============================================ */

/* ---------- Hero editorial con imagen de fondo ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 6rem; padding-bottom: var(--sp-lg);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__inner { position: relative; z-index: 1; width: var(--max-w); margin-inline: auto; text-align: center; }

/* estados iniciales del CTA y las estrellas (los anima GSAP tras el loader) */
.js .hero__cta .btn, .js .hero__trust { opacity: 0; }

.hero h1 {
  font-size: var(--text-hero);
  font-weight: var(--w-bold);
  max-width: 16ch;
  margin-inline: auto;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero h1 em { font-style: normal; color: var(--gold-soft); }
.hero__sub {
  margin-top: var(--sp-md);
  max-width: 52ch;
  margin-inline: auto;
  font-size: var(--text-body-lg);
  font-weight: var(--w-light);
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
.hero__cta {
  margin-top: var(--sp-lg);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center;
  gap: var(--sp-md) clamp(3rem, 14vw, 12rem);
}
.hero__trust { display: flex; align-items: center; gap: 0.6rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); }
.hero__trust .stars { color: var(--gold-soft); }
.hero__trust-num { font-family: var(--font-display); font-weight: var(--w-bold); color: #fff; }
.hero__trust-txt { font-size: var(--text-small); color: rgba(255, 255, 255, 0.85); }

/* ---------- Cifras: experiencia y profesionalidad ---------- */
.stats { padding-block: var(--sp-lg) var(--sp-xl); overflow: hidden; }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg) clamp(1.5rem, 4vw, 4rem);
  margin-top: var(--sp-md);
}
.stat { border-top: 1px solid var(--border); padding-top: var(--sp-md); }
.stat__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: var(--sp-sm);
  color: var(--text-muted);
  font-weight: var(--w-light);
  max-width: 24ch;
}
@media (max-width: 900px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
}

/* ---------- Propuesta de valor ---------- */
.value { position: relative; overflow: hidden; }
/* bordes de ola: el color papel de las secciones vecinas muerde el fondo oscuro */
.ola {
  position: absolute; left: 0; right: 0;
  height: clamp(28px, 5vw, 60px);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.ola--top { top: -1px; }
.ola--bottom { bottom: -1px; transform: scaleY(-1); }
.ola svg {
  display: block;
  width: 200%; height: 100%;
  fill: var(--bg);
  will-change: transform;
}
/* variante: color de las secciones en gris papel-2 (contacto) */
.ola--alt svg { fill: var(--bg-alt); }
#resenas { position: relative; overflow: hidden; }

.value__inner { width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.value h2 { font-size: var(--text-lead); font-weight: var(--w-semi); line-height: 1.15; text-wrap: balance; }
.value h2 b { color: var(--gold-deep); font-weight: var(--w-semi); }
.section--dark.value h2 b { color: var(--gold-soft); }
.value__body p { color: var(--text-muted); font-weight: var(--w-light); font-size: var(--text-body-lg); }
.value__body p + p { margin-top: var(--sp-md); }

/* ---------- Filosofía: pasos con barra de progreso (adaptación de Progress Steps) ---------- */
.steps { display: flex; flex-direction: column; gap: clamp(3rem, 8vh, 5rem); }
.step {
  display: grid;
  /* columna del número con ancho fijo: las barras de todos los pasos quedan alineadas */
  grid-template-columns: clamp(3.6rem, 7vw, 6rem) 5px 1.1fr 1fr;
  gap: clamp(1.5rem, 5vw, 3.75rem);
  align-items: stretch;
  min-height: clamp(180px, 30vh, 330px);
}
.step__img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.step__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.step__bar {
  position: relative;
  width: 5px;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
}
.step__fill {
  position: absolute; inset: 0;
  background: var(--gold);
  border-radius: inherit;
}
.step__body { max-width: 52ch; }
.step__k {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--gold); line-height: 1;
}
.step__body h3 { margin-top: var(--sp-md); font-size: var(--text-h3); font-weight: var(--w-semi); }
.step__body p { margin-top: var(--sp-sm); color: var(--text-muted); font-weight: var(--w-light); }

/* cabecera de servicios centrada */
#servicios .section__head {
  max-width: 100%;
  text-align: center;
}
#servicios .section__sub { margin-inline: auto; }


/* ---------- Scroller de obras (adaptación vanilla de ImageScroller) ----------
   El scroll de la página (100vh por obra) cambia la imagen activa con fundido. */
.scroller { position: relative; height: 600vh; }
.scroller__sticky {
  position: sticky; top: 0; height: 100svh;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.scroller__frame {
  position: relative; width: 100%; height: 100%;
  border-radius: 12px; overflow: hidden;
  background: var(--paper-2);
}
.scroller__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.scroller__slide.is-active { opacity: 1; }
.scroller__slide .ph { position: absolute; inset: 0; border-radius: 0; }
.scroller__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scroller__slide::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, color-mix(in srgb, #000 62%, transparent), transparent 45%);
}
.scroller__cap {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex; flex-direction: column; gap: 6px;
  color: #fff;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease-in-out 0.2s, transform 0.6s ease-in-out 0.2s;
}
.scroller__slide.is-active .scroller__cap { opacity: 1; transform: none; }
.scroller__tag { font-size: var(--text-label); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--gold-soft); }
.scroller__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  letter-spacing: -0.04em; line-height: 1;
}
/* cuadro pequeño con la explicación del servicio (cristal esmerilado de la casa) */
.scroller__desc {
  margin-top: 0.9rem;
  max-width: 44ch;
  padding: 0.9rem 1.15rem;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink-2);
  font-size: var(--text-small);
  line-height: 1.55;
}
@media (max-width: 767px) {
  .scroller__desc { max-width: 100%; padding: 0.7rem 0.9rem; font-size: 0.8rem; }
}
.scroller__dock {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: flex; gap: 8px; padding: 8px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.scroller__thumb {
  width: 64px; height: 64px;
  padding: 0; overflow: hidden;
  border: 2px solid transparent; border-radius: 12px;
  background: linear-gradient(150deg, #E9E9E6, #D2D2CE);
  transition: border-color 0.3s var(--ease-out), opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  opacity: 0.7;
}
.scroller__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.scroller__thumb.is-active { border-color: var(--gold); opacity: 1; transform: scale(1.05); }
@media (hover: hover) { .scroller__thumb:not(.is-active):hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); } }

/* móvil: el pill nav vive abajo — subir dock y rótulo, y compactar miniaturas */
@media (max-width: 767px) {
  .scroller__cap { bottom: 8rem; padding: 1.25rem; }
  .scroller__dock {
    bottom: 4.4rem;
    gap: 5px; padding: 5px;
    border-radius: 13px;
    max-width: calc(100% - 1.5rem);
  }
  .scroller__thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; }
  .scroller__thumb img { border-radius: 8px; }
}

/* ---------- Reseñas ---------- */
.resenas__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.resenas__head h2 { font-size: var(--text-h2); font-weight: var(--w-bold); }
.resenas__badge { display: inline-flex; align-items: center; gap: 0.6rem; }
.resenas__badge b { font-family: var(--font-display); font-size: 1.5rem; }
.resenas__badge span { font-size: var(--text-small); color: var(--text-muted); }
.resenas__badge span.stars { color: var(--gold); }
/* Carrusel escalonado de reseñas (adaptación vanilla de stagger-testimonials) */
.stagger { position: relative; height: 600px; overflow: hidden; }
.stg-card {
  position: absolute; left: 50%; top: 50%;
  padding: 2rem;
  background: linear-gradient(165deg, #FFFFFF 0%, #EDEDEA 62%, #DFDFDB 100%);
  color: var(--ink);
  border: 2px solid #DDDDD9;
  border-radius: 20px;
  cursor: pointer;
  transition: all 500ms var(--ease-inout);
}
/* capa oscura con fundido de opacidad: los degradados no se interpolan, la opacidad sí */
.stg-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: linear-gradient(165deg, #2A2C30 0%, #17181A 58%, #0C0D0E 100%);
  opacity: 0;
  transition: opacity 500ms var(--ease-inout);
  pointer-events: none;
}
.stg-card > * { position: relative; z-index: 1; }
.stg-card.is-center {
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 8px 0 4px #DDDDD9;
}
.stg-card.is-center::before { opacity: 1; }
@media (hover: hover) { .stg-card:not(.is-center):hover { border-color: color-mix(in srgb, var(--gold) 50%, #DDDDD9); } }
.stg-card__av {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  margin-bottom: 0.9rem;
  background: color-mix(in srgb, var(--gold) 20%, var(--paper-2));
  color: var(--gold-deep);
  font-family: var(--font-display); font-weight: 800;
}
.stg-card.is-center .stg-card__av { background: color-mix(in srgb, var(--gold) 45%, var(--ink)); color: var(--gold-soft); }
.stg-card .stars { margin-bottom: 0.7rem; color: var(--gold); }
.stg-card.is-center .stars { color: var(--gold-soft); }
.stg-card__quote {
  font-size: 0.95rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.stg-card__by {
  position: absolute; bottom: 1.6rem; left: 2rem; right: 2rem;
  font-size: var(--text-small); font-style: italic;
  color: var(--text-muted);
}
.stagger__nav {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.5rem; z-index: 20;
}
.stagger__btn {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--card); border: 2px solid #DDDDD9;
  border-radius: 999px;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.stagger__btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
@media (hover: hover) { .stagger__btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; } }

/* fondo oscuro con claridad blanca subiendo desde abajo */
#servicios.section--dark {
  background:
    linear-gradient(to top,
      color-mix(in srgb, #fff 30%, transparent) 0%,
      color-mix(in srgb, #fff 10%, transparent) 26%,
      transparent 55%),
    var(--bg-dark);
}

/* fondo oscuro con claridad blanca cayendo desde arriba */
#resenas.section--dark {
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, #fff 30%, transparent) 0%,
      color-mix(in srgb, #fff 10%, transparent) 26%,
      transparent 55%),
    var(--bg-dark);
  /* solapa 1px con servicios: elimina la línea de costura entre ambas */
  margin-top: -1px;
}

/* Variante invertida (sección oscura): tarjetas oscuras, la central clara */
.section--dark .stg-card {
  background: linear-gradient(165deg, #2A2C30 0%, #17181A 58%, #0C0D0E 100%);
  color: var(--paper);
  border-color: #2E3033;
}
.section--dark .stg-card::before {
  background: linear-gradient(165deg, #FFFFFF 0%, #EDEDEA 62%, #DFDFDB 100%);
}
.section--dark .stg-card.is-center {
  color: var(--ink);
  border-color: #fff;
  box-shadow: 0 8px 0 4px #2E3033;
}
.section--dark .stg-card__av { background: color-mix(in srgb, var(--gold) 45%, var(--ink)); color: var(--gold-soft); }
.section--dark .stg-card.is-center .stg-card__av { background: color-mix(in srgb, var(--gold) 20%, var(--paper-2)); color: var(--gold-deep); }
.section--dark .stg-card .stars { color: var(--gold-soft); }
.section--dark .stg-card.is-center .stars { color: var(--gold); }
.section--dark .stagger__btn {
  background: #1F2124;
  border-color: #2E3033;
  color: var(--paper);
}
@media (hover: hover) { .section--dark .stagger__btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; } }

/* ---------- Contacto ---------- */
.contacto-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--sp-xl); align-items: start; }
.contacto-intro { position: sticky; top: 6rem; }
.contacto-intro h2 { font-size: var(--text-h2); text-wrap: balance; font-weight: var(--w-bold); }
.contacto-wapp {
  margin-top: var(--sp-lg); display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.4rem; border-radius: 999px; background: #1FA855; color: #fff; font-weight: var(--w-semi);
}
.contacto-wapp svg { width: 20px; height: 20px; fill: #fff; }
.contacto-datos { margin-top: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); color: var(--text-muted); }
.contacto-datos b { color: var(--ink); font-weight: var(--w-semi); }

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--sp-md); }
.field label { font-size: var(--text-label); font-weight: var(--w-semi); letter-spacing: var(--tracking); text-transform: uppercase; }
.field__line { position: relative; }
.field__line::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.field__line:focus-within::after { transform: scaleX(1); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.75rem 0;
  font-family: var(--font-body); font-size: var(--text-body-lg); font-weight: var(--w-light);
  color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
}
.field ::placeholder { color: color-mix(in srgb, currentColor 42%, transparent); }
.field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B08A3C' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.25rem center;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field__error { font-size: var(--text-small); color: #b3402f; display: none; }
.field.has-error .field__error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: #b3402f; }
.field--hp { position: absolute; left: -9999px; }

/* panel de cristal esmerilado: mismo lenguaje que los CTA y el pill nav */
.form-wrap {
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border: 1px solid var(--border);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 12%, transparent);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.form__submit { display: flex; width: fit-content; margin-top: var(--sp-md); margin-inline: auto; }
.form__micro { margin-top: var(--sp-sm); font-size: var(--text-small); color: var(--text-muted); }
.form__ok { display: none; font-family: var(--font-display); font-size: var(--text-h3); padding-block: var(--sp-lg); }
.form-wrap.sent form { display: none; }
.form-wrap.sent .form__ok { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { padding-top: 7.5rem; }
  .value__inner { grid-template-columns: 1fr; gap: var(--sp-md); }
  .step { grid-template-columns: auto 5px 1fr; gap: 1.25rem; min-height: 0; padding-block: 1rem; }
  .step__img { grid-column: 3; margin-top: 1rem; aspect-ratio: 16 / 10; height: auto; }
  .projects-grid { grid-template-columns: 1fr; }
  .project--a, .project--b, .project--c { grid-column: auto; aspect-ratio: 3 / 2; }
  .stagger { height: 520px; }
  .stg-card { padding: 1.5rem; }
  .stg-card__quote { font-size: 0.88rem; -webkit-line-clamp: 6; }
  .stg-card__by { left: 1.5rem; right: 1.5rem; }
  .contacto-grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .contacto-intro { position: static; }
}