/* Cimientos Inmobiliaria · propuesta de rediseño Leomak.Soft
   Concepto: la obra que se levanta desde sus cimientos (corte de obra en capas). */

@font-face { font-family: "Saira Stencil One"; src: url("fonts/saira-stencil-one-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

@property --vuelo { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --fenolico: #2a201a;        /* fondos oscuros y texto: el encofrado fenólico */
  --yeso: #f3f2ee;            /* fondo */
  --yeso-sombra: #e6e4dc;     /* secciones alternas */
  --media-sombra: #1d6466;    /* acento: la media sombra verde que envuelve la obra (6,1:1 sobre yeso) */
  --media-sombra-clara: #7fd1c8; /* acento sobre fenólico (9:1) */
  --acero: #8a8f93;           /* metálico del rubro: hierro de construcción, solo decorativo */
  --tierra: #b59a7a;          /* estratos del suelo, solo decorativo */
  --texto-suave: #5a4e45;     /* 7,2:1 sobre yeso */

  --f-display: "Saira Stencil One", "Arial Narrow", sans-serif;
  --f-texto: "Manrope", system-ui, sans-serif;

  --ease-decel: cubic-bezier(.16, 1, .3, 1);
  --radio: 4px;
  --franja: 2.6rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--yeso); color: var(--fenolico);
  font: 400 1rem/1.6 var(--f-texto); overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 .6em; }
h2 { font: 400 clamp(1.9rem, 1.2rem + 3vw, 3.4rem)/1.05 var(--f-display); letter-spacing: .01em; max-width: 22ch; }
h3 { font-weight: 600; font-size: 1.15rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--media-sombra); outline-offset: 3px; }

.contenedor { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.seccion { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.etiqueta { font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--media-sombra); }
.nota-demo { font-size: .9rem; color: var(--texto-suave); border-left: 3px solid var(--acero); padding-left: .8rem; max-width: 60ch; }
.falta { color: var(--texto-suave); font-style: italic; }
.dos-col { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .dos-col { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Franja de propuesta */
.franja {
  position: fixed; inset: 0 0 auto; z-index: 100; margin: 0; min-height: var(--franja);
  display: grid; place-items: center; padding: .45rem 1rem; text-align: center;
  background: var(--fenolico); color: var(--yeso); font-size: .78rem; line-height: 1.3;
}

/* Cabecera */
.cabecera {
  position: sticky; top: var(--franja); z-index: 50; margin-top: var(--franja);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem clamp(1.25rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--yeso) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--yeso-sombra);
}
.marca { display: flex; align-items: center; gap: .5rem; text-decoration: none; font: 400 1.35rem var(--f-display); min-height: 44px; }
.marca-icono { width: 28px; fill: none; stroke: var(--media-sombra); stroke-width: 2; }
.menu { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.menu a { display: grid; place-items: center; min-height: 44px; padding-inline: .6rem; text-decoration: none; font-weight: 600; font-size: .9rem; }
.menu a:hover { color: var(--media-sombra); }
@media (max-width: 420px) { .menu li:first-child { display: none; } }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: .75rem 1.4rem; border-radius: var(--radio); border: 2px solid var(--media-sombra);
  font: 600 1rem var(--f-texto); text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s;
}
.boton-principal { background: var(--media-sombra); color: #fff; }
.boton-principal:hover { background: var(--fenolico); border-color: var(--fenolico); }
.boton-linea { background: transparent; color: var(--media-sombra); }
.boton-linea:hover { background: var(--media-sombra); color: #fff; }

/* Hero */
.hero {
  display: grid; gap: 2rem; align-items: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 6rem);
  min-height: calc(100svh - var(--franja) - 4rem);
}
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr 1fr; } }
.hero-antetitulo { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--media-sombra); }
.hero-titulo {
  font: 400 clamp(3.2rem, 1rem + 11vw, 8.5rem)/.9 var(--f-display);
  letter-spacing: -.01em; margin-bottom: .25em; perspective: 600px;
}
.hero-titulo .letra { display: inline-block; transform-origin: 50% 100%; }
.hero-bajada { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); max-width: 34ch; color: var(--texto-suave); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* La obra en capas */
.obra { position: relative; perspective: 1100px; }
.obra-escena {
  --mx: 0; --my: 0;
  position: relative; aspect-ratio: 4 / 4.4; width: min(100%, 520px); margin-inline: auto;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(14deg + var(--my) * -8deg + var(--vuelo) * 30deg))
    rotateY(calc(-16deg + var(--mx) * 12deg))
    translateY(calc(var(--vuelo) * 8%));
}
.capa { position: absolute; transform-style: preserve-3d; }
.capa-suelo { inset: 65% 0 0 0; width: 100%; height: 35%; transform: translateZ(-40px); }
.estrato-1 { fill: var(--tierra); opacity: .55; }
.estrato-2 { fill: var(--tierra); opacity: .38; }
.estrato-3 { fill: url(#rayado); }
.rayado-linea { stroke: var(--acero); stroke-width: 1.5; }
.trazo { fill: none; stroke: var(--fenolico); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trazo.fino { stroke-width: 1.5; stroke: var(--media-sombra); }

.capa-fundacion { inset: 0; transform: translateZ(-10px); }
.zapata {
  position: absolute; top: 72%; width: 12%; height: 9%;
  background: var(--acero);
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgb(255 255 255 / .25) 5px 7px);
  border: 2px solid var(--fenolico);
}
.zapata:nth-child(1) { left: 13%; } .zapata:nth-child(2) { left: 35%; }
.zapata:nth-child(3) { left: 57%; } .zapata:nth-child(4) { left: 79%; }

.capa-estructura { inset: 0; transform: translateZ(25px); }
.columna { position: absolute; top: 18%; width: 3%; height: 54%; background: var(--fenolico); transform-origin: 50% 100%; }
.columna:nth-child(1) { left: 17.5%; } .columna:nth-child(2) { left: 39.5%; }
.columna:nth-child(3) { left: 61.5%; } .columna:nth-child(4) { left: 83.5%; }
.losa { position: absolute; left: 13%; width: 78%; height: 2.2%; background: var(--fenolico); }
.losa-1 { top: 52%; } .losa-2 { top: 35%; } .losa-3 { top: 18%; }

.capa-fachada { left: 9%; top: 12%; width: 86%; height: 60%; transform: translateZ(60px); overflow: visible; }

.plomada { position: absolute; left: 96%; top: 4%; transform: translateZ(90px); transform-origin: 50% 0; }
.plomada-hilo { display: block; width: 1.5px; height: clamp(120px, 26vw, 200px); margin-inline: auto; background: var(--fenolico); }
.plomada-pesa { width: 18px; margin: -1px auto 0; fill: var(--media-sombra); }

.obra-cota { position: absolute; left: 0; top: calc(65% + 2%); font-size: .75rem; color: var(--texto-suave); margin: 0; }
.obra-cota span { font-weight: 600; color: var(--fenolico); }

/* Nosotros y cifras */
.nosotros { background: var(--yeso-sombra); }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin-top: 3rem; }
.cifra { border-top: 3px solid var(--fenolico); padding-top: .8rem; display: flex; flex-direction: column-reverse; }
.cifra dd { margin: 0; font: 400 clamp(2.8rem, 2rem + 3vw, 4.5rem)/1 var(--f-display); color: var(--media-sombra); }
.cifra dt { font-weight: 600; }

/* Buscador y fichas */
.buscador {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem 1rem;
  margin-block: 2rem; padding: 1.2rem; background: var(--fenolico); color: var(--yeso); border-radius: var(--radio);
}
.buscador label, .formulario label { display: grid; gap: .3rem; font-weight: 600; font-size: .85rem; }
select, input, textarea {
  width: 100%; min-height: 48px; padding: .6rem .7rem; border-radius: var(--radio);
  font: 400 1rem var(--f-texto); color: var(--fenolico); background: #fff; border: 2px solid var(--acero);
}
.buscador select { border-color: transparent; }
.buscador-resultado { margin: 0; align-self: end; font-size: 1.05rem; min-height: 48px; display: flex; align-items: center; gap: .4rem; }
.buscador-resultado strong { font: 400 2rem var(--f-display); color: var(--media-sombra-clara); }
.buscador-nota { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: #d9d3cb; }

.fichas { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.ficha {
  display: flex; flex-direction: column; padding: 1.2rem; background: #fff; border: 1px solid var(--yeso-sombra);
  border-radius: var(--radio); transform-style: preserve-3d; position: relative;
}
.ficha[hidden] { display: none; }
.ficha-dibujo { background: var(--yeso); border-radius: var(--radio); padding: 1rem 1.5rem; margin-bottom: 1rem; border-bottom: 3px solid var(--tierra); }
.ficha-dibujo .trazo { stroke-width: 2; }
.ficha-tipo { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--media-sombra); margin-bottom: .3rem; }
.ficha-dir { margin-bottom: .2rem; }
.ficha-barrio, .ficha-datos { color: var(--texto-suave); margin-bottom: .4rem; font-size: .95rem; }
.ficha-precio { font: 400 1.7rem var(--f-display); margin: .3rem 0 1rem; }
.boton-consulta { margin-top: auto; width: 100%; background: var(--media-sombra); color: #fff; }
.boton-consulta:hover { background: var(--fenolico); border-color: var(--fenolico); }
.profundo { transform: translateZ(0); }
.sin-resultados { font-weight: 600; }

/* Servicios */
.servicios { background: var(--fenolico); color: var(--yeso); }
.servicios .etiqueta { color: var(--media-sombra-clara); }
.servicios-lista, .dif-lista { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .servicios-lista, .dif-lista { grid-template-columns: repeat(3, 1fr); } }
.servicio { padding: 1.6rem; border: 1px solid rgb(243 242 238 / .2); border-radius: var(--radio); transform-style: preserve-3d; }
.servicio:nth-child(2) { border-top: 4px solid var(--media-sombra-clara); }
.servicio-num { display: block; font: 400 3rem/1 var(--f-display); color: var(--media-sombra-clara); margin-bottom: 1rem; }
.servicio p { color: #d9d3cb; }

/* Diferenciales */
.dif { padding-top: 1rem; border-top: 1px solid var(--acero); }
.dif-icono { width: 52px; margin-bottom: 1rem; }
.dif-icono .trazo { stroke: var(--media-sombra); stroke-width: 2.5; }

/* Tasación y contacto */
.tasacion { background: var(--yeso-sombra); }
.formulario { display: grid; gap: 1rem; padding: 1.5rem; background: #fff; border-radius: var(--radio); border: 1px solid var(--yeso-sombra); }
.demo-aviso { margin: 0; justify-self: start; padding: .2rem .6rem; font-size: .8rem; font-weight: 600; background: var(--fenolico); color: var(--yeso); border-radius: var(--radio); }
.datos { margin: 1.5rem 0; display: grid; gap: .8rem; }
.datos div { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; border-bottom: 1px solid var(--yeso-sombra); padding-bottom: .6rem; }
.datos dt { font-weight: 600; }
.datos dd { margin: 0; }

/* Pie */
.pie { background: var(--fenolico); color: var(--yeso); padding-block: 3rem; font-size: .95rem; }
.pie-grilla { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .pie-grilla { grid-template-columns: 2fr 1fr 1fr; } }
.pie .falta { color: #d9d3cb; }
.pie-marca { font: 400 1.6rem var(--f-display); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie a { display: inline-flex; min-height: 44px; align-items: center; }
.pie-firma { color: var(--media-sombra-clara); font-weight: 600; }

/* Scroll-driven: la obra se recuesta al bajar y el contenido sube al entrar */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .obra-escena { animation: vuelo linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes vuelo { to { --vuelo: 1; } }
    .revelar { animation: subir linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes subir { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  }
}

/* Cursor: una plomada que se balancea con la velocidad */
.cursor { display: none; }
html.cursor-activo, html.cursor-activo a, html.cursor-activo button, html.cursor-activo select { cursor: none; }
html.cursor-activo input, html.cursor-activo textarea { cursor: auto; }
html.cursor-activo .cursor { display: block; position: fixed; inset: 0 auto auto 0; pointer-events: none; z-index: 9999; }
.cursor-hilo { position: fixed; top: 0; left: 0; will-change: transform; }
.cursor-hilo span {
  display: block; width: 14px; height: 20px; margin: -2px 0 0 -7px; transform-origin: 50% 0;
  background: var(--media-sombra); clip-path: polygon(30% 0, 70% 0, 70% 20%, 100% 40%, 50% 100%, 0 40%, 30% 20%);
  rotate: var(--giro, 0deg); scale: var(--escala, 1);
  transition: scale .3s var(--ease-decel), clip-path .3s var(--ease-decel), border-radius .3s;
}
.cursor.hover .cursor-hilo span { --escala: 1.8; clip-path: circle(50% at 50% 50%); opacity: .55; margin-top: -10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .obra-escena { transform: none; }
  .capa { transform: none; }
  .plomada { transform: none; }
}