/* =========================================================
   CREATIVE — HOME.CSS
   Estilos exclusivos de la página de inicio. Depende de:
   - base.css        (tokens, tipografía, botones, header, footer)
   - images.css      (variables --img-* generadas desde negocio.json)
   Cárgalo siempre después de esos dos archivos.
   ========================================================= */

/* ============ 01 HERO ============ */
.hero{
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(180deg, rgba(33,30,31,.55) 0%, rgba(33,30,31,.12) 30%, rgba(33,30,31,.75) 100%),
    var(--img-hero) center 18% / cover no-repeat;
  color: var(--marfil);
  padding-top: 90px;
  padding-bottom: 56px;
}
.hero .wrap{ width:100%; }
.hero-sub{
  font-size: 15px;
  color: var(--arena);
  margin: 18px 0 26px;
  letter-spacing:.02em;
}
.hero h1{ font-size: 52px; }
.hero .scroll-hint{
  display:flex; justify-content:center;
  margin-top:34px; opacity:.6;
}
.hero .scroll-hint svg{ width:18px; height:18px; }

/* ============ 02 RESULTADOS ============ */
.resultados{ background: var(--marfil); padding: 88px 0; }
.resultados .intro{ margin-bottom: 40px; max-width: 480px; }
.resultados h2{ font-size: 34px; margin-bottom: 22px; }
.gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "tall1 stack"
    "tall1 stack"
    "tall2 tall2";
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.g-1{ grid-area: tall1; }
.g-stack{ grid-area: stack; }
.g-4{ grid-area: tall2; }
.gallery .g-stack{ display:grid; grid-template-rows: 1fr 1fr; gap:8px; min-width:0; }
.gallery .g-item{
  background-color: var(--arena);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4/3;
}
/* Estas dos reglas van DESPUÉS de ".gallery .g-item" a propósito:
   misma especificidad, así que el orden decide, y necesitamos que
   el aspect-ratio específico de cada foto gane sobre el genérico. */
.gallery .g-tall{ aspect-ratio: 3/4.6; min-width:0; }
.gallery .g-4{ aspect-ratio: 16/9; }
.g-1{ background-image: var(--img-g1); }
.g-2{ background-image: var(--img-g2); }
.g-3{ background-image: var(--img-g3); filter: sepia(.18) saturate(1.15) hue-rotate(-8deg); }
.g-4{ background-image: var(--img-g4); filter: contrast(1.05) saturate(1.2) hue-rotate(6deg); }

/* ============ 03 MÉTODO ============ */
.metodo{ background: var(--negro); color: var(--marfil); padding: 88px 0; }
.metodo .top{ display:flex; flex-direction:column; gap:14px; margin-bottom:56px; }
.metodo h2{ font-size: 32px; max-width: 420px; }
.metodo h2 em{ font-style: italic; color: var(--arena); }
.pasos{ display:grid; grid-template-columns: 1fr; gap: 34px; }
.paso{ border-top: 1px solid rgba(245,241,234,.18); padding-top:20px; }
.paso .fila-top{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.paso .icono{ width:20px; height:20px; opacity:.85; }
.paso .num{ font-family: var(--serif); font-size: 20px; color: var(--arena); }
.paso h3{ font-family: var(--sans); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.paso p{ font-size: 14px; line-height:1.6; color: rgba(245,241,234,.75); max-width: 280px; }

/* ============ 04 SERVICIOS ============
   Las filas se generan desde negocio.json → servicios[].
   Ver build/build.js. No añadir servicios directamente aquí. */
.servicios{ background: var(--marfil); padding: 88px 0; }
.servicios .eyebrow{ margin-bottom: 46px; }
.familias{ display:grid; grid-template-columns: 1fr; gap: 48px; min-width:0; }
.familia h3{
  font-family: var(--sans); font-weight:700; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom: 22px;
}
.servicio-fila{
  display:flex; align-items:center; gap:16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(33,30,31,.14);
}
.familia .servicio-fila:first-of-type{ border-top: 1px solid rgba(33,30,31,.14); }
.servicio-fila .thumb{
  width: 56px; height: 56px; flex-shrink:0;
  background-color: var(--arena);
  background-size: cover; background-position: center;
}
.servicio-fila .texto{ flex:1; min-width:0; }
.servicio-fila .texto .titulo{ font-size:16px; font-weight:600; }
.servicio-fila .texto .desc{ font-size: 12.5px; opacity:.6; margin-top:2px; }
.servicio-fila svg{ width:16px; height:16px; flex-shrink:0; opacity:.7; transition: transform .2s ease; }
.servicio-fila:hover svg{ transform: translateX(3px); }

/* .thumb-color / .thumb-cortes / .thumb-trat / .thumb-fallback-*
   se movieron a css/base.css: Servicios (página nueva) también
   los necesita, y son sobre datos de imagen, no de layout de la Home. */

/* ============ 05 TRANSFORMACIÓN ============ */
.transformacion{ background: var(--negro); color: var(--marfil); padding: 88px 0; }
.transformacion .intro{ margin-bottom: 34px; max-width: 420px; }
.transformacion h2{ font-size: 32px; margin-bottom: 18px; }
.before-after{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
  background: #000;
}
.before-after .pane{ position:absolute; inset:0; background-size: cover; background-position: center; }
.before-after .after{ background-image: var(--img-transformacion); }
.before-after .before{
  background-image: var(--img-transformacion);
  filter: grayscale(1) brightness(.75) contrast(.9);
  clip-path: inset(0 50% 0 0);
}
.before-after .tag{
  position:absolute; top:16px; font-size:11px; letter-spacing:.12em;
  color: var(--marfil); font-weight:700; text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.before-after .tag.antes{ left:16px; }
.before-after .tag.despues{ right:16px; }
.before-after .divider{ position:absolute; top:0; bottom:0; left:50%; width:1px; background: var(--marfil); }
.before-after .handle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%;
  background: var(--marfil); color:var(--negro);
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
}
/* Estático por ahora — sin JS en esta fase. El HTML/CSS ya deja
   el marcado listo para que un futuro slider arrastrable solo
   tenga que animar --before-clip en vez de reestructurar nada. */

/* ============ 06 EL SALÓN ============ */
.salon{ display:grid; grid-template-columns: 1fr; }
.salon .foto{ aspect-ratio: 4/3; background: var(--img-salon) center/cover no-repeat; }
.salon .texto{ background: var(--marfil); padding: 48px var(--gutter); }
.salon h2{ font-size: 26px; margin-bottom: 6px; }
.salon .lugar{ color: var(--nude); font-size:15px; margin-bottom:14px; font-family: var(--serif); font-style:italic; }

/* ============ 07 UBICACIÓN ============ */
.ubicacion{ background: var(--marfil); padding: 70px 0 0; }
.ubicacion .eyebrow{ margin-bottom: 18px; }
.direccion{ font-size: 15px; line-height:1.6; margin-bottom: 10px; }
.acceso{ font-size: 13px; opacity:.6; margin-bottom: 22px; }
.ubi-media{ display:grid; grid-template-columns: 1.1fr 1fr; gap:8px; margin-top: 26px; }
.ubi-media .foto-fachada{
  aspect-ratio: 4/5;
  background: var(--img-ubicacion-fachada) center/cover no-repeat;
  filter: brightness(.85);
}
.mapa{
  aspect-ratio: 4/5;
  background: var(--negro);
  color: var(--marfil);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding: 20px; text-align:center;
  background-image:
    linear-gradient(rgba(33,30,31,.9), rgba(33,30,31,.9)),
    repeating-linear-gradient(0deg, rgba(245,241,234,.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(245,241,234,.06) 0 1px, transparent 1px 34px);
}
.mapa svg{ width:22px; height:22px; }
.mapa .m-nombre{ font-family: var(--serif); font-size:16px; }
.mapa .m-sub{ font-size:11px; opacity:.65; }

/* ============ 08 CTA FINAL ============ */
/* .cta-final / .contactos / .contacto-item se movieron a css/base.css:
   partials/cta-final.php es compartido entre páginas, así que su CSS
   tiene que estarlo también. */

/* ============ DESKTOP ============ */
@media (min-width: 900px){
  .hero{ padding-bottom: 90px; }
  .hero h1{ font-size: 84px; }
  .hero-sub{ font-size:17px; }

  .resultados{ padding:130px 0; }
  .resultados .wrap{ display:grid; grid-template-columns: 340px 1fr; gap:60px; align-items:end; }
  .resultados .intro{ margin-bottom:0; }
  .resultados h2{ font-size: 44px; }
  .gallery{
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-template-areas: "tall1 stack tall2";
    gap:14px;
  }
  .gallery .g-tall{ aspect-ratio: 3/4.3; }
  .gallery .g-4{ aspect-ratio: 3/4.3; }
  .gallery .g-stack{ gap:14px; }

  .metodo{ padding:130px 0; }
  .metodo .top{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
  .metodo h2{ font-size: 42px; }
  .pasos{ grid-template-columns: repeat(3,1fr); gap: 40px; }

  .servicios{ padding:130px 0; }
  .familias{ grid-template-columns: 1fr 1fr; gap: 70px; }

  .transformacion{ padding: 130px 0; }
  .transformacion .wrap{ display:grid; grid-template-columns: 340px 1fr; gap:60px; align-items:center; }
  .transformacion h2{ font-size:42px; }
  .before-after{ aspect-ratio: 16/9; }

  .salon{ grid-template-columns: 1.2fr 1fr; }
  .salon .foto{ aspect-ratio:auto; height:100%; min-height:520px; }
  .salon .texto{ display:flex; flex-direction:column; justify-content:center; padding: 70px; }
  .salon h2{ font-size: 36px; }

  .ubicacion{ padding: 130px 0 0; }
  .ubicacion .wrap{ display:grid; grid-template-columns: 380px 1fr; gap:60px; align-items:start; }
  .ubi-media{ margin-top:0; }

  /* .cta-final desktop se movió a css/base.css */
}