/*
  Calderón Fontanería — Sitio estático para Cloudflare Pages
  Estilo: azul marino, rojo, naranja y azul de la identidad corporativa.
*/

:root {
  --navy: #0d2137;
  --navy-deep: #060f1a;
  --red: #d32f2f;
  --red-dark: #a62323;
  --orange: #e65100;
  --blue: #1565c0;
  --green: #16a34a;
  --paper: #f6f8fa;
  --ink: #1d2731;
  --muted: #5d6874;
  --line: #e7ebef;
  --white: #ffffff;
  --shadow: 0 18px 48px rgba(13, 33, 55, .12);
  --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Open Sans", Arial, sans-serif;
  line-height: 1.55;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.eyebrow { margin: 0 0 .75rem; color: var(--red); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, h4 { margin: 0; color: var(--navy); font-family: Montserrat, Arial, sans-serif; line-height: 1.12; }
h1 { font-size: clamp(2.65rem, 6.3vw, 5.4rem); font-weight: 900; letter-spacing: -.055em; }
h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 900; letter-spacing: -.045em; }
h3 { font-size: 1.25rem; font-weight: 800; }
.section { padding: 6rem 0; }
.section-heading { max-width: 760px; margin: 0 auto 3.2rem; text-align: center; }
.section-heading p:last-child { margin: 1rem 0 0; color: var(--muted); }

.topbar { background: var(--red); color: var(--white); font-size: .87rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 36px; }
.topbar-group { display: flex; align-items: center; gap: 1.25rem; }
.topbar a { transition: opacity .2s ease; }
.topbar a:hover { opacity: .82; }

.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(13,33,55,.08); backdrop-filter: blur(14px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 75px; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; min-width: max-content; }
.brand img { width: 48px; height: 48px; object-fit: cover; border: 2px solid #eef1f3; border-radius: 50%; }
.brand-name { color: var(--navy); display: block; font: 900 1rem/1 Montserrat,Arial,sans-serif; letter-spacing: -.02em; }
.brand-sub { display: block; margin-top: .28rem; color: #66727e; font-size: .67rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 1.7rem; color: #35414d; font-size: .9rem; font-weight: 700; }
.nav-links a:hover { color: var(--red); }
.nav-phone { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .7rem 1rem; border-radius: 5px; background: var(--red); color: var(--white); font-size: .88rem; font-weight: 800; transition: background .2s, transform .2s; }
.nav-phone:hover { background: var(--red-dark); transform: translateY(-1px); }
.menu-button { display: none; padding: .4rem; border: 0; background: transparent; color: var(--navy); font-size: 1.6rem; }

.hero { position: relative; min-height: min(704px, calc(100vh - 110px)); display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: center/cover no-repeat var(--navy); }
.hero::after, .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,15,26,.93) 0%, rgba(13,33,55,.78) 45%, rgba(13,33,55,.28) 100%); }
.hero::before { background-image: url("../images/hero-plumber.jpg"); }
.hero-content { padding: 5rem 0; color: var(--white); }
.hero h1 { max-width: 760px; color: var(--white); }
.hero h1 span { color: var(--red); }
.hero-copy { max-width: 675px; margin: 1.25rem 0 1.8rem; color: #e5e9ed; font-size: clamp(1.03rem, 1.5vw, 1.22rem); }
.badge { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.2rem; padding: .5rem .9rem; border-radius: 100px; background: var(--red); color: var(--white); font-size: .84rem; font-weight: 800; }
.hero-points { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0 0 2rem; color: #e8ecf0; font-size: .87rem; }
.hero-points span::before { content: "✓"; display: inline-grid; width: 18px; height: 18px; margin-right: .45rem; place-items: center; border: 1px solid #2ed283; border-radius: 50%; color: #2ed283; font-weight: 900; }
.actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .9rem 1.15rem; border: 0; border-radius: 5px; font-weight: 800; transition: transform .2s, background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(0,0,0,.2); }
.button-red { background: var(--red); color: var(--white); }
.button-green { background: var(--green); color: var(--white); }
.button-orange { background: var(--orange); color: var(--white); }
.button-blue { background: var(--blue); color: var(--white); }
.button-outline-light { border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1); color: var(--white); }

.stats { position: relative; z-index: 2; margin-top: -50px; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.stat { padding: 1.4rem 1.6rem; border-right: 1px solid var(--line); text-align: center; }
.stat:last-child { border-right: 0; }
.stat strong { display: block; color: var(--navy); font: 900 1.8rem/1 Montserrat,Arial,sans-serif; }
.stat span { display: block; margin-top: .35rem; color: var(--muted); font-size: .78rem; font-weight: 700; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; }
.service-card { position: relative; display: flex; flex-direction: column; min-height: 330px; padding: 1.65rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 6px 18px rgba(13,33,55,.04); transition: transform .25s, box-shadow .25s; }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.service-icon { display: grid; width: 52px; height: 52px; margin-bottom: 1.3rem; place-items: center; border-radius: 9px; color: var(--white); font-size: 1.45rem; }
.service-card p { margin: .75rem 0 1rem; color: var(--muted); font-size: .92rem; }
.service-card ul { margin: 0; padding: 0; list-style: none; color: #44515e; font-size: .84rem; }
.service-card li { display: flex; gap: .45rem; margin: .35rem 0; }
.service-card li::before { content: "✓"; color: var(--accent, var(--blue)); font-weight: 900; }
.service-link { margin-top: auto; padding-top: 1rem; color: var(--accent, var(--blue)); font-size: .89rem; font-weight: 900; }

.specialties { background: var(--navy); color: var(--white); }
.specialties h2, .specialties h3 { color: var(--white); }
.specialties .section-heading p:last-child { color: #bcc6cf; }
.feature-large { display: grid; grid-template-columns: 1.05fr 1fr; margin-bottom: 1.4rem; overflow: hidden; border: 2px solid rgba(211,47,47,.45); border-radius: var(--radius); background: rgba(255,255,255,.045); }
.feature-image { min-height: 370px; background: center/cover no-repeat; }
.feature-body { padding: 2.6rem; }
.feature-body p { color: #c8d1d9; }
.feature-list { display: grid; grid-template-columns: repeat(2,1fr); gap: .55rem 1.1rem; margin: 1.35rem 0 1.8rem; padding: 0; list-style: none; color: #e3e8ec; font-size: .87rem; }
.feature-list li::before { content: "✓"; margin-right: .5rem; color: var(--red); font-weight: 900; }
.special-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; }
.special-card { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.045); }
.special-image { position: relative; min-height: 210px; background: center/cover no-repeat; }
.special-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,15,26,.9),transparent 65%); }
.special-title { position:absolute; z-index:1; bottom:1.35rem; left:1.35rem; right:1rem; }
.special-title h3 { margin-top:.3rem; }
.special-body { padding: 1.4rem; color:#c8d1d9; font-size: .9rem; }
.special-body p { margin-top:0; }

.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.15rem; }
.why-card { padding: 1.6rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); }
.why-icon { margin-bottom: .9rem; color: var(--red); font-size: 1.8rem; }
.why-card p { margin-bottom: 0; color: var(--muted); font-size: .88rem; }

.contact { background: linear-gradient(128deg,#edf2f6 0%,#f9fbfc 58%,#e5edf2 100%); }
.contact-grid { display:grid; grid-template-columns: .95fr 1.05fr; gap: 3.7rem; align-items:start; }
.contact-copy h2 { margin-bottom:1rem; }
.contact-copy > p { color:var(--muted); }
.contact-ways { display:grid; gap:.9rem; margin-top:1.7rem; }
.contact-way { display:flex; align-items:center; gap:.8rem; color:var(--navy); font-weight:800; }
.contact-way-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:50%; background:var(--white); color:var(--red); box-shadow:0 5px 18px rgba(13,33,55,.08); }
.form-card { padding: 2rem; border-radius: var(--radius); background:var(--white); box-shadow:var(--shadow); }
.form-card h3 { margin-bottom:1.3rem; font-size:1.6rem; }
.form-grid { display:grid; gap:1rem; }
label { display:grid; gap:.42rem; color:#40505e; font-size:.82rem; font-weight:800; }
input, textarea { width:100%; padding:.78rem .9rem; border:1px solid #dce3e8; border-radius:7px; background:#fff; color:var(--ink); outline:0; }
input:focus, textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,101,192,.12); }
textarea { min-height:110px; resize:vertical; }
.form-note { margin: 1rem 0 0; color:#6a7782; font-size:.77rem; text-align:center; }

.faq { background:var(--white); }
.faq-grid { max-width:880px; margin:0 auto; display:grid; gap:.65rem; }
.faq-item { overflow:hidden; border:1px solid var(--line); border-radius:8px; }
.faq-button { display:flex; width:100%; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; border:0; background:#fff; color:var(--navy); text-align:left; font-weight:800; }
.faq-button span:last-child { font-size:1.25rem; transition:transform .2s; }
.faq-item.open .faq-button span:last-child { transform:rotate(45deg); }
.faq-answer { display:none; padding:0 1.15rem 1.1rem; color:var(--muted); font-size:.92rem; }
.faq-item.open .faq-answer { display:block; }

.footer { padding:4rem 0 1.4rem; background:var(--navy-deep); color:#9faab4; }
.footer-grid { display:grid; grid-template-columns: 1.35fr 1fr 1.1fr; gap:3.4rem; }
.footer h4 { margin-bottom:1rem; color:var(--white); font-size:.83rem; letter-spacing:.1em; text-transform:uppercase; }
.footer p { max-width:370px; font-size:.87rem; }
.footer ul { margin:0; padding:0; list-style:none; font-size:.86rem; }
.footer li { margin:.58rem 0; }
.footer li a:hover, .footer-contact a:hover { color:var(--white); }
.footer-contact { display:grid; gap:.65rem; font-size:.86rem; }
.footer-bottom { margin-top:2.8rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.07); color:#73808a; font-size:.75rem; text-align:center; }
.footer .brand { margin-bottom:1rem; }
.footer .brand-name { color:var(--white); }

.floating-whatsapp { position:fixed; z-index:35; right:22px; bottom:22px; display:grid; width:57px; height:57px; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-size:1.6rem; box-shadow:0 10px 28px rgba(0,0,0,.24); transition:transform .2s; }
.floating-whatsapp:hover { transform:scale(1.08); }

/* Páginas individuales */
.page-hero { position:relative; min-height:470px; display:grid; align-items:center; overflow:hidden; isolation:isolate; background:center/cover no-repeat var(--navy); }
.page-hero::before { display:none; }
.page-hero-content { padding:4.2rem 0; color:var(--white); }
.back-link { display:inline-flex; gap:.5rem; margin-bottom:1.4rem; color:#d7e0e6; font-size:.85rem; font-weight:700; }
.back-link:hover { color:#fff; }
.page-hero h1 { max-width:760px; color:var(--white); font-size:clamp(2.25rem,4.4vw,4.25rem); }
.page-hero .hero-copy { max-width:700px; }
.page-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:2rem; align-items:start; }
.content-stack { display:grid; gap:1.4rem; }
.content-card { padding:2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); box-shadow:0 6px 18px rgba(13,33,55,.04); }
.content-card p { color:var(--muted); }
.content-card h2 { margin-bottom:1rem; font-size:1.7rem; }
.check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem 1.1rem; margin:0; padding:0; list-style:none; color:#44515e; font-size:.89rem; }
.check-grid li::before { content:"✓"; margin-right:.55rem; color:var(--accent,var(--blue)); font-weight:900; }
.reason-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.reason { padding:1.2rem; border:1px solid var(--line); border-radius:9px; background:var(--white); }
.reason p { margin-bottom:0; font-size:.88rem; }
.side-sticky { position:sticky; top:96px; }
.side-urgent { margin-top:1rem; padding:1.25rem; border-radius:var(--radius); background:var(--navy); color:#d5dce2; text-align:center; }
.side-urgent strong { display:block; margin-top:.35rem; color:#fff; font:900 1.45rem Montserrat,Arial,sans-serif; }
.other-services { padding:1.7rem; border-radius:var(--radius); background:var(--navy); }
.other-services h2 { color:#fff; font-size:1.45rem; }
.pill-links { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.1rem; }
.pill-links a { padding:.45rem .7rem; border-radius:5px; background:rgba(255,255,255,.1); color:#fff; font-size:.8rem; font-weight:700; }
.pill-links a:hover { background:rgba(255,255,255,.18); }

@media (max-width: 930px) {
  .nav-links { gap:1rem; }
  .cards, .special-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .page-layout { grid-template-columns:1fr; }
  .side-sticky { position:static; }
}

@media (max-width: 720px) {
  .container { width:min(100% - 28px, 1180px); }
  .topbar-inner, .topbar-group { justify-content:center; flex-wrap:wrap; }
  .topbar-inner { padding:.45rem 0; }
  .topbar-group:first-child { display:none; }
  .nav-inner { min-height:68px; }
  .nav-links { display:none; position:absolute; top:68px; right:0; left:0; flex-direction:column; align-items:stretch; gap:0; padding:.8rem 1rem 1rem; background:#fff; box-shadow:0 12px 24px rgba(13,33,55,.1); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:.85rem .25rem; border-bottom:1px solid var(--line); }
  .nav-links .nav-phone { margin-top:.7rem; }
  .menu-button { display:block; }
  .hero { min-height:620px; }
  .hero::after, .page-hero::after { background:linear-gradient(90deg, rgba(6,15,26,.95), rgba(13,33,55,.72)); }
  .hero-content, .page-hero-content { padding:4rem 0; }
  .stats { margin-top:0; background:#fff; }
  .stats .container { width:100%; }
  .stats-grid { border-radius:0; box-shadow:none; grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .section { padding:4rem 0; }
  .cards, .special-grid, .contact-grid, .footer-grid, .feature-large { grid-template-columns:1fr; }
  .feature-image { min-height:250px; order:1; }
  .feature-body { padding:1.7rem; order:2; }
  .feature-list, .check-grid, .reason-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .footer-grid { gap:2rem; }
  .page-hero { min-height:500px; }
  .content-card, .form-card { padding:1.35rem; }
}

@media (max-width: 390px) {
  .brand img { width:42px; height:42px; }
  .brand-name { font-size:.88rem; }
  .hero-points { gap:.6rem; }
  .button { width:100%; }
}