/* Web pública de Reformas Valladares (misma paleta que la aplicación de presupuestos) */
:root { --azul:#245c8f; --azul-osc:#173a5e; --azul-suave:#eef3f8; --naranja:#f2a01f; --tinta:#1f2937; --gris:#5b6b7e; --linea:#d9e1ea; color-scheme:light; }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--tinta); background:#fff; font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
h1, h2, h3, p, ol { margin:0; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--naranja); outline-offset:2px; }

.boton { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border-radius:10px; font-weight:700; text-decoration:none; white-space:nowrap; transition:transform .06s, filter .12s; }
.boton:hover { filter:brightness(1.07); }
.boton:active { transform:translateY(1px); }
.boton.grande { min-height:52px; padding:12px 24px; font-size:18px; }
.boton-acento { background:var(--naranja); color:#2e1b00; }
.boton-primario { background:var(--azul); color:#fff; }
.boton-claro { background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.55); }

/* Cabecera */
.cab { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:20px; padding:10px clamp(16px,4vw,48px); background:var(--azul-osc); color:#fff; box-shadow:0 2px 12px rgba(10,25,45,.25); }
.marca { display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.marca-logo { width:40px; height:40px; border-radius:10px; background:var(--naranja); color:#fff; display:grid; place-items:center; font:800 24px/1 Arial,sans-serif; }
.marca-texto { display:flex; flex-direction:column; line-height:1.1; }
.marca-texto strong { font-size:18px; letter-spacing:.04em; text-transform:uppercase; }
.marca-texto small { font-size:11px; letter-spacing:.32em; text-transform:uppercase; opacity:.75; }
.menu { display:flex; gap:22px; font-size:15px; font-weight:600; }
.menu a { text-decoration:none; opacity:.85; }
.menu a:hover { opacity:1; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--naranja); }

/* Portada */
.portada { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(40px,7vw,88px) clamp(16px,4vw,48px); background:linear-gradient(150deg, var(--azul-osc), var(--azul)); color:#fff; }
.sobretitulo { font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--naranja); margin-bottom:14px; }
.portada h1 { font-size:clamp(30px,4.6vw,52px); line-height:1.1; font-weight:800; text-wrap:balance; }
.portada h1 em { font-style:normal; color:var(--naranja); }
.entrada { margin-top:18px; max-width:56ch; font-size:clamp(17px,1.6vw,20px); color:rgba(255,255,255,.88); }
.acciones { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.acciones.centro { justify-content:center; }
.portada-foto img { width:100%; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.35); border:4px solid rgba(255,255,255,.9); }

/* Bloques */
.bloque { padding:clamp(44px,7vw,84px) clamp(16px,4vw,48px); max-width:1180px; margin:0 auto; }
.bloque-suave { max-width:none; background:var(--azul-suave); text-align:center; }
.bloque-suave .bloque-sub { margin-left:auto; margin-right:auto; }
.bloque h2 { font-size:clamp(26px,3.4vw,38px); line-height:1.15; font-weight:800; color:var(--azul-osc); }
.bloque h2::after { content:""; display:block; width:56px; height:5px; border-radius:3px; background:var(--naranja); margin-top:12px; }
.bloque-suave h2::after, .contacto h2::after { margin-left:auto; margin-right:auto; }
.bloque-sub { margin:16px 0 28px; max-width:62ch; color:var(--gris); }

.rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:16px; }
.tarjeta { padding:20px; border:1px solid var(--linea); border-top:4px solid var(--azul); border-radius:12px; background:#fff; }
.tarjeta h3 { font-size:19px; font-weight:800; color:var(--azul-osc); margin-bottom:6px; }
.tarjeta p { font-size:15.5px; color:var(--gris); }

.galeria { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; margin-bottom:28px; text-align:left; }
.galeria figure { margin:0; background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--linea); }
.galeria img { width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.galeria figcaption { padding:10px 14px; font-size:14.5px; font-weight:600; color:var(--azul-osc); }

.pasos { list-style:none; padding:0; margin-top:28px; counter-reset:paso; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; }
.pasos li { counter-increment:paso; position:relative; padding:54px 18px 18px; border-radius:12px; background:var(--azul-suave); font-size:15.5px; color:var(--gris); }
.pasos li::before { content:counter(paso); position:absolute; top:14px; left:18px; width:32px; height:32px; border-radius:50%; background:var(--azul); color:#fff; display:grid; place-items:center; font-weight:800; }
.pasos strong { display:block; color:var(--azul-osc); font-size:17px; margin-bottom:4px; }

.contacto { max-width:none; text-align:center; background:var(--azul-osc); color:#fff; }
.contacto h2 { color:#fff; }
.contacto .bloque-sub { margin-left:auto; margin-right:auto; color:rgba(255,255,255,.8); }
.firma { margin-top:28px; font-size:14.5px; color:rgba(255,255,255,.7); }

.pie { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px clamp(16px,4vw,48px); background:#0f2740; color:rgba(255,255,255,.7); font-size:14px; }

@media (max-width:860px) {
  .menu { display:none; }
  .portada { grid-template-columns:1fr; }
  .portada-foto { order:-1; max-width:460px; }
  .acciones .boton { flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .boton { transition:none; } }