@import url("assets/fuentes/fuentes.css");

/* ---------- Marca (lo único que se cambia por cliente) ---------- */
:root {
  --fondo: #f3efe8;
  --fondo-2: #e9e3d9;
  --tinta: #1a1814;
  --tinta-suave: #5d574d;
  --acento: #c8592c;
  --acento-tinta: #fff;
  --oscuro: #15130f;
  --linea: rgba(26, 24, 20, .12);
  --radio: 22px;
  --radio-chico: 12px;
  --letra-titulo: "Inter Tight", "Inter", system-ui, sans-serif;
  --letra: "Inter", system-ui, sans-serif;
  --ancho: 1240px;
  --suave: cubic-bezier(.22, 1, .36, 1);
  color-scheme: only light;
}
/* El modo oscuro del celular no cambia la web (regla de la casa) */
@media (prefers-color-scheme: dark) { :root { --fondo: #f3efe8; --tinta: #1a1814; } html, body { background: #f3efe8; color: #1a1814; } }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--suave); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 17px/1.6 var(--letra); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--letra-titulo); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 5.3rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); }
h3 { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0 0 1em; text-wrap: pretty; }
input, select, textarea, button { font: inherit; color: var(--tinta); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

.etiqueta { display: inline-block; font: 600 .78rem/1 var(--letra); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin: 0 0 18px; }
.nota { font-size: .9rem; color: var(--tinta-suave); }

/* Entrada sin flash: lo que entra con animación arranca escondido solo mientras carga */
.cargando [data-entrada], .cargando [data-titulo] { opacity: 0; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; gap: .55em; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--tinta); color: var(--fondo); font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .35s var(--suave), background .25s; will-change: transform; }
.boton svg { width: 1.15em; height: 1.15em; transition: transform .35s var(--suave); }
.boton:hover svg { transform: translateX(4px); }
.boton:hover { background: var(--acento); }
.boton-claro { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton-claro:hover { background: var(--tinta); color: var(--fondo); }
.boton-wa { background: #1f9d55; color: #fff; }
.boton-wa:hover { background: #17834a; }
.boton-chico { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.enlace { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--acento); }
.enlace svg { width: 1.1em; height: 1.1em; }

/* ---------- Aviso demo y barra ---------- */
.aviso-demo { background: var(--tinta); color: var(--fondo); font-size: .8rem; text-align: center; padding: 8px 16px; }
.barra { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 14px clamp(18px, 4vw, 48px); background: color-mix(in srgb, var(--fondo) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .3s, padding .3s; }
.barra.con-borde { border-color: var(--linea); }
.marca { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 700 1.3rem/1 var(--letra-titulo); letter-spacing: -.03em; text-decoration: none; }
.marca-icono { width: 26px; height: 26px; color: var(--acento); }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { text-decoration: none; font-weight: 500; color: var(--tinta-suave); transition: color .2s; }
.menu a:hover { color: var(--tinta); }
.tel { text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .menu, .tel { display: none; } .barra .boton { margin-left: auto; } }

/* ---------- Portada ---------- */
.portada { padding: clamp(28px, 4.2vw, 60px) clamp(18px, 4vw, 48px) 0; max-width: 1480px; margin: 0 auto; }
.portada-texto { max-width: 1100px; }
.portada h1 { margin-bottom: 20px; }
.bajada { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--tinta-suave); max-width: 640px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 20px; }
.sellos { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 0 0 34px; color: var(--tinta-suave); font-size: .95rem; }
.sellos li { display: flex; align-items: center; gap: 8px; }
.sellos svg { width: 18px; height: 18px; color: var(--acento); }
.portada-foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 16 / 8.2; transform-origin: 50% 0; }
.portada-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
@media (max-width: 700px) { .portada-foto { aspect-ratio: 4 / 4.4; } }

/* ---------- Números ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: var(--ancho); margin: clamp(56px, 8vw, 110px) auto 0; padding: 0 clamp(18px, 4vw, 48px); }
.numero { padding: 8px 22px; border-left: 1px solid var(--linea); }
.numero strong { display: block; font: 600 clamp(2.4rem, 5vw, 4rem)/1 var(--letra-titulo); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.numero > span { color: var(--tinta-suave); font-size: .95rem; }
@media (max-width: 700px) { .numeros { grid-template-columns: 1fr 1fr; row-gap: 28px; } }

/* ---------- Secciones ---------- */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: clamp(80px, 11vw, 150px) clamp(18px, 4vw, 48px) 0; }
.seccion-cabeza { max-width: 820px; margin-bottom: clamp(36px, 5vw, 60px); }
.seccion-oscura { max-width: none; background: var(--oscuro); color: #f3efe8; margin-top: clamp(80px, 11vw, 150px); padding-bottom: clamp(80px, 11vw, 140px); }
.seccion-oscura > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.seccion-oscura .etiqueta { color: #e9875c; }

/* Obras */
.obras { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.obra { text-decoration: none; display: block; }
.obra:nth-child(even) { margin-top: clamp(0px, 8vw, 110px); }
.obra-foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3.1; background: var(--fondo-2); }
.obra-foto { position: relative; }
.obra-foto img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; transition: transform 1.1s var(--suave); }
.obra:hover .obra-foto img { transform: scale(1.05); }
.obra-datos { padding: 20px 4px 0; }
.obra-datos h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: -6px 0 8px; }
.obra-datos p { color: var(--tinta-suave); margin-bottom: 12px; }
.obra-ver { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.obra-ver svg { width: 18px; height: 18px; transition: transform .35s var(--suave); }
.obra:hover .obra-ver svg { transform: translateX(5px); }
@media (max-width: 760px) { .obras { grid-template-columns: 1fr; } .obra:nth-child(even) { margin-top: 0; } }

/* Antes y después */
.ad { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3; max-height: 78vh; width: 100%; user-select: none; touch-action: pan-y; }
.ad > img, .ad-antes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ad input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ad-manija { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.ad-manija svg { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; padding: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: var(--tinta); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.ad-rotulo { position: absolute; top: 18px; padding: 6px 14px; border-radius: 999px; background: rgba(20,18,15,.6); color: #fff; font-size: .8rem; font-weight: 600; backdrop-filter: blur(8px); pointer-events: none; }
.ad-rotulo-antes { left: 18px; } .ad-rotulo-despues { right: 18px; }

/* Servicios */
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.servicio { background: #fbf9f5; border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--linea); transition: transform .5s var(--suave), box-shadow .5s; }
.servicio:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(26,24,20,.35); }
.servicio img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.servicio > div { padding: 22px 24px 26px; }
.servicio p { color: var(--tinta-suave); font-size: .98rem; }
@media (max-width: 980px) { .servicios { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .servicios { grid-template-columns: 1fr; } }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: p; }
.pasos li { padding: 26px 22px 8px; border-top: 2px solid var(--tinta); }
.paso-num { display: block; font: 600 .9rem/1 var(--letra-titulo); color: var(--acento); margin-bottom: 26px; }
.pasos h3 { margin-bottom: 10px; }
.pasos p { color: var(--tinta-suave); font-size: .98rem; }
@media (max-width: 900px) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }

/* Corte a mitad de página */
.corte { max-width: var(--ancho); margin: clamp(80px, 11vw, 150px) auto 0; padding: 0 clamp(18px, 4vw, 48px); }
.corte-caja { background: var(--oscuro); color: #f3efe8; border-radius: calc(var(--radio) + 8px); padding: clamp(36px, 6vw, 80px); text-align: center; background-image: radial-gradient(700px 300px at 50% 0%, color-mix(in srgb, var(--acento) 30%, transparent), transparent 70%); }
.corte-caja .etiqueta { color: #e9875c; }
.corte-caja h2 { margin: 0 auto 30px; max-width: 760px; }
.corte-caja .acciones { justify-content: center; margin: 0; }
.boton-acento { background: var(--acento); color: #fff; }
.boton-acento:hover { background: #fff; color: var(--tinta); }

/* Nosotros */
.nosotros { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.nosotros-foto { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 4.6; }
.nosotros-foto img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; }
.nosotros-texto h2 { margin-bottom: 24px; }
.nosotros-texto p:not(.etiqueta) { color: var(--tinta-suave); font-size: 1.08rem; }
@media (max-width: 860px) { .nosotros { grid-template-columns: 1fr; } }

/* Reseñas */
.resenas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.resena { margin: 0; padding: 30px; border-radius: var(--radio); background: var(--fondo-2); display: flex; flex-direction: column; justify-content: space-between; gap: 26px; }
.resena blockquote { margin: 0; font: 500 1.2rem/1.4 var(--letra-titulo); letter-spacing: -.015em; }
.resena figcaption { color: var(--tinta-suave); font-size: .92rem; }
@media (max-width: 900px) { .resenas { grid-template-columns: 1fr; } }

/* Zonas: cinta */
.cinta { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cinta > div { display: flex; gap: 14px; width: max-content; }
.cinta span { padding: 14px 24px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--linea); font-weight: 500; white-space: nowrap; }

/* Preguntas */
.preguntas { max-width: 880px; }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font: 600 clamp(1.1rem, 1.8vw, 1.35rem)/1.3 var(--letra-titulo); letter-spacing: -.015em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary span { font-size: 1.6rem; line-height: 1; transition: transform .35s var(--suave); color: var(--acento); }
.preguntas details[open] summary span { transform: rotate(45deg); }
.preguntas details p { color: var(--tinta-suave); padding-bottom: 22px; max-width: 700px; }

/* Presupuesto */
.presupuesto { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 6vw, 80px); align-items: start; padding-bottom: clamp(80px, 10vw, 140px); }
.presupuesto-texto h2 { margin-bottom: 20px; }
.presupuesto-texto p:not(.etiqueta) { color: var(--tinta-suave); font-size: 1.08rem; }
@media (max-width: 860px) { .presupuesto { grid-template-columns: 1fr; } }
.cotizador { position: relative; background: #fbf9f5; border-radius: var(--radio); padding: clamp(24px, 3.5vw, 40px); box-shadow: 0 30px 60px -40px rgba(26,24,20,.45), 0 0 0 1px var(--linea); overflow: hidden; }
.paso { display: none; }
.paso.activo { display: block; animation: aparecer .5s var(--suave); }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } }
.paso-n { font-size: .82rem; color: var(--tinta-suave); margin-bottom: 6px; }
.paso h3 { font-size: 1.6rem; margin-bottom: 22px; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion input { position: absolute; opacity: 0; }
.opcion span { display: block; padding: 15px 16px; border-radius: var(--radio-chico); box-shadow: inset 0 0 0 1.5px var(--linea); cursor: pointer; font-weight: 500; transition: box-shadow .2s, background .2s; }
.opcion input:checked + span { box-shadow: inset 0 0 0 2px var(--acento); background: color-mix(in srgb, var(--acento) 8%, transparent); }
.opcion input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }
.campo { display: block; margin-bottom: 16px; }
.campo span { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 14px 16px; border-radius: var(--radio-chico); border: 0; box-shadow: inset 0 0 0 1.5px var(--linea); background: #fff; color: #1a1814; font-size: 16px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acento); }
.campo .error { box-shadow: inset 0 0 0 2px #c62828; }
.cotizador-pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 26px; }
.barra-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--linea); }
.barra-progreso span { display: block; height: 100%; width: 33%; background: var(--acento); transition: width .5s var(--suave); }
@media (max-width: 480px) { .opciones { grid-template-columns: 1fr; } }

/* Pie */
.pie { background: var(--oscuro); color: #d9d3c8; padding: clamp(60px, 8vw, 100px) clamp(18px, 4vw, 48px) 110px; overflow: hidden; }
.pie-grande { font: 700 clamp(5rem, 22vw, 20rem)/.8 var(--letra-titulo); letter-spacing: -.06em; color: #f3efe8; margin: 0 0 60px -.04em; }
.pie-grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1480px; }
.pie-grilla strong { color: #fff; display: block; margin-bottom: 8px; }
.pie-grilla p { font-size: .95rem; }
.pie a { color: #fff; }
.pie-chico { margin-top: 40px; font-size: .82rem; color: #8f887c; }
@media (max-width: 800px) { .pie-grilla { grid-template-columns: 1fr 1fr; } }

/* Contacto rápido */
.wa-flotante { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: #1f9d55; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(31,157,85,.6); transition: transform .35s var(--suave); }
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 30px; height: 30px; }
.barra-cel { display: none; }
@media (max-width: 760px) {
  .wa-flotante { display: none; }
  .barra-cel { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; padding: 8px; border-radius: 18px; background: rgba(26,24,20,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateY(140%); transition: transform .5s var(--suave); }
  .barra-cel.visible { transform: none; }
  .barra-cel a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 12px; color: #fff; text-decoration: none; font-weight: 600; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); }
  .barra-cel .barra-cel-wa { background: #1f9d55; box-shadow: none; }
  .barra-cel svg { width: 20px; height: 20px; }
}
.prueba-caja { position: fixed; inset: auto 16px 90px; z-index: 80; max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.prueba-caja pre { white-space: pre-wrap; font: .9rem/1.5 var(--letra); background: var(--fondo); padding: 14px; border-radius: 10px; }

/* ---------- Página de obra ---------- */
.obra-portada { max-width: 1480px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 48px) 0; }
.volver { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; margin-bottom: 36px; color: var(--tinta-suave); }
.volver svg { width: 18px; height: 18px; transform: rotate(180deg); }
.obra-portada h1 { margin-bottom: 20px; }
.obra-portada-foto { margin-top: 40px; border-radius: var(--radio); overflow: hidden; aspect-ratio: 16 / 8.5; }
.obra-portada-foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .obra-portada-foto { aspect-ratio: 4 / 3.6; } }
.ficha { display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--ancho); margin: 40px auto 0; padding: 0 clamp(18px, 4vw, 48px); }
.ficha div { padding: 6px 20px; border-left: 1px solid var(--linea); }
.ficha span { display: block; font-size: .85rem; color: var(--tinta-suave); }
.ficha strong { font: 600 clamp(1.3rem, 2.6vw, 2rem)/1.2 var(--letra-titulo); letter-spacing: -.03em; }
@media (max-width: 700px) { .ficha { grid-template-columns: 1fr 1fr; row-gap: 20px; } }
.obra-relato { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); }
.relato { font: 500 clamp(1.3rem, 2.3vw, 1.85rem)/1.35 var(--letra-titulo); letter-spacing: -.02em; }
@media (max-width: 760px) { .obra-relato { grid-template-columns: 1fr; } }
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.galeria img { border-radius: var(--radio); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria img:only-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (max-width: 620px) { .galeria { grid-template-columns: 1fr; } }
.caracteristicas ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.caracteristicas li { padding: 18px 0 18px 34px; border-bottom: 1px solid var(--linea); position: relative; font-size: 1.08rem; }
.caracteristicas li::before { content: ""; position: absolute; left: 0; top: 24px; width: 16px; height: 9px; border-left: 2.4px solid var(--acento); border-bottom: 2.4px solid var(--acento); transform: rotate(-45deg); }
@media (max-width: 620px) { .caracteristicas ul { grid-template-columns: 1fr; } }
.siguiente-obra { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; max-width: var(--ancho); margin: 0 auto clamp(60px, 8vw, 110px); padding: 40px clamp(18px, 4vw, 48px); text-decoration: none; border-top: 1px solid var(--linea); }
.siguiente-obra .etiqueta { margin: 0; }
.siguiente-obra strong { font: 600 clamp(1.5rem, 3.4vw, 2.8rem)/1.1 var(--letra-titulo); letter-spacing: -.03em; }
.siguiente-obra svg { width: 40px; height: 40px; margin-left: auto; transition: transform .4s var(--suave); }
.siguiente-obra:hover svg { transform: translateX(8px); }

/* Movimiento reducido: solo si el cliente pidió respetarlo */
html[data-movimiento="respetar"] *, html[data-movimiento="respetar"] *::before { }
@media (prefers-reduced-motion: reduce) { html[data-movimiento="respetar"] * { animation: none !important; transition: none !important; } }