/* ===========================================================
   Canalones.Madrid — Sistema de diseño
   Compacto, industrial, colores reales del logo:
   Azul #003892 · Marino #1B222A · Acero claro #A5B9D1
   Deliberadamente distinto de reparaciondetejados.madrid:
   header oscuro de 2 franjas, hero en banda de color sin
   ilustración grande, servicios en lista tipo ficha técnica
   (no tarjetas flotantes), radios de esquina más cerrados,
   ritmo vertical mucho más denso.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --fondo:       #F4F6F9;   /* fondo general — gris azulado muy claro */
  --papel:       #FFFFFF;
  --marino:      #1B222A;   /* texto principal / secciones oscuras */
  --marino-70:   #1B222Ab3;
  --azul:        #003892;   /* acento primario — azul del logo */
  --azul-dark:   #00296E;
  --acero:       #A5B9D1;   /* acento secundario — gris acero claro del logo */
  --acero-bg:    #A5B9D129;
  --alerta:      #B5650B;
  --alerta-bg:   #B5650B1a;
  --linea:       #1B222A1f;

  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 3px;
  --maxw: 1100px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--fondo);
  color:var(--marino);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.1; margin:0 0 .35em; letter-spacing:-.01em; }
h1{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }
h2{ font-size:clamp(1.25rem, 1.9vw, 1.55rem); }
h3{ font-size:1rem; }
* + h2, * + h3{ margin-top:1.4rem; }
p{ margin:0 0 .85em; }
.lede{ font-size:1.02rem; color:var(--marino-70); max-width:56ch; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--azul);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:.7em;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--azul); display:inline-block; }

/* ---------- utility bar (oscura, franja superior) ---------- */
.topbar{ background:var(--marino); color:#ffffffb3; font-size:.76rem; }
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:6px 24px; max-width:var(--maxw); margin:0 auto;
}
.topbar-info{ display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; }
.topbar-info strong{ color:#fff; }
.topbar a{ color:#ffffffb3; text-decoration:none; }
.topbar a:hover{ color:#fff; }
@media (max-width:760px){
  .topbar-inner{ padding:6px 20px; }
  .topbar-info{ font-size:.72rem; gap:3px 12px; }
}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:var(--papel);
  border-bottom:2px solid var(--marino);
}
header.site .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 24px; max-width:var(--maxw); margin:0 auto; gap:20px;
}
.logo{ text-decoration:none; display:flex; align-items:center; }
.logo-img{ height:68px; width:auto; display:block; }
nav.main{ display:flex; gap:20px; font-size:.9rem; font-weight:500; }
nav.main a{ text-decoration:none; color:var(--marino); position:relative; padding:4px 0; }
nav.main a:hover{ color:var(--azul); }
.header-cta{
  display:flex; align-items:center; gap:8px;
  background:var(--azul); color:#fff;
  padding:9px 16px; border-radius:var(--radius);
  text-decoration:none; font-weight:600; font-size:.9rem; white-space:nowrap;
}
.header-cta:hover{ background:var(--azul-dark); }
.header-cta-icon{ font-size:1rem; }
.header-cta small{ display:block; font-family:var(--font-mono); font-weight:400; font-size:.62rem; letter-spacing:.02em; color:#ffffffcc; margin-top:1px; }
@media (max-width:640px){
  .header-cta{ display:none; }
  .hero-actions .btn-primary{ display:none; }
}

/* ---------- hero: banda de color compacta, sin ilustración grande ---------- */
.hero{
  padding:34px 0 30px;
  background:linear-gradient(120deg, var(--marino) 0%, var(--azul-dark) 100%);
  color:#fff;
}
.hero .eyebrow{ color:var(--acero); }
.hero .eyebrow::before{ background:var(--acero); }
.hero h1{ color:#fff; max-width:22ch; }
.hero .lede{ color:#ffffffcc; max-width:52ch; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:1.1em; }
.hero-badges{
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:1.2em;
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em;
  color:#ffffffa0;
}
.hero-2col{ display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; }
.hero-2col .hero-diagram{
  background:var(--papel); border-radius:6px; padding:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
@media (max-width:860px){
  .hero-2col{ grid-template-columns:1fr; }
  .hero-2col .hero-diagram{ max-width:420px; margin:0 auto; }
}
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:11px 20px; border-radius:var(--radius);
  font-weight:600; font-size:.9rem; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--azul); color:#fff; }
.btn-primary:hover{ background:var(--azul-dark); }
.hero .btn-primary{ background:#fff; color:var(--azul-dark); }
.hero .btn-primary:hover{ background:#e8edf5; }
.btn-ghost{ background:transparent; color:var(--marino); border-color:var(--marino-70); }
.btn-ghost:hover{ border-color:var(--marino); }
.hero .btn-ghost{ color:#fff; border-color:#ffffff60; }
.hero .btn-ghost:hover{ border-color:#fff; }
.btn-large{ padding:14px 26px; font-size:.98rem; }

.diagram-box{
  background:var(--papel); border:1px solid var(--linea); border-radius:4px;
  padding:14px;
}
.diagram-caption{
  font-family:var(--font-mono); font-size:.68rem; color:var(--marino-70);
  text-align:center; margin-top:8px; letter-spacing:.02em;
}
@media (max-width:640px){
  .hero{ padding:26px 0 24px; }
  .hero h1{ font-size:1.5rem; max-width:none; }
  .hero .lede{ font-size:.95rem; }
}

/* ---------- sections ---------- */
section{ padding:36px 0; }
section.alt{ background:var(--acero-bg); }
.section-head{ max-width:640px; margin-bottom:1.4em; }

/* servicios: lista compacta tipo ficha técnica, no tarjetas flotantes */
.servicios-list{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--linea); border:1px solid var(--linea); border-radius:4px; overflow:hidden;
}
.servicio-row{
  background:var(--papel); padding:18px 20px; text-decoration:none; color:var(--marino);
  display:flex; gap:14px; align-items:flex-start;
}
.servicio-row:hover{ background:var(--fondo); }
.servicio-row .num{
  width:32px; height:32px; flex-shrink:0; border-radius:3px;
  background:var(--azul); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:.82rem;
}
.servicio-row.winter .num{ background:var(--alerta); }
.servicio-row h3{ margin:0 0 .25em; }
.servicio-row p{ font-size:.87rem; color:var(--marino-70); margin:0; }
.pill{
  display:inline-block; margin-top:.6em; font-family:var(--font-mono); font-size:.64rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--alerta);
  background:var(--alerta-bg); padding:2px 8px; border-radius:20px; width:fit-content;
}
@media (max-width:700px){
  .servicios-list{ grid-template-columns:1fr; }
}

/* diferenciadores — franja compacta con acento lateral */
.grid-dif{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dif-item{ padding-left:14px; border-left:2px solid var(--azul); }
.dif-item h3{ margin-bottom:.3em; font-size:.98rem; }
.dif-item p{ color:var(--marino-70); font-size:.87rem; margin:0; }

/* tabla precios */
table.precios{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.precios th{
  font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
  text-align:left; padding:8px 12px; border-bottom:2px solid var(--marino); color:var(--marino-70);
}
table.precios td{ padding:11px 12px; border-bottom:1px solid var(--linea); }
table.precios tr:hover td{ background:var(--papel); }
.precio-cell{ font-family:var(--font-mono); font-weight:600; color:var(--azul); white-space:nowrap; }

/* zonas / localidades */
.zonas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 28px; margin-top:.6em; }
.zona-col h4{
  font-family:var(--font-mono); text-transform:uppercase; font-size:.7rem; letter-spacing:.05em;
  color:var(--azul); border-bottom:1px solid var(--linea); padding-bottom:8px; margin-bottom:10px;
}
.zona-col ul{ list-style:none; margin:0; padding:0; }
.zona-col li{ margin-bottom:5px; }
.zona-col a{ text-decoration:none; font-size:.88rem; }
.zona-col a:hover{ color:var(--azul); }

.zonas-lista{ list-style:none; margin:1em 0; padding:0; }
.zonas-lista li{ padding:9px 0 9px 18px; border-bottom:1px solid var(--linea); position:relative; font-size:.9rem; }
.zonas-lista li::before{ content:"–"; position:absolute; left:0; color:var(--azul); }
.zonas-lista strong{ color:var(--marino); }

/* fotos / diagramas de contenido */
.content-photo{ margin:1.6em 0; border-radius:4px; overflow:hidden; border:1px solid var(--linea); background:var(--papel); }
.content-photo img{ width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover; }
.content-photo figcaption{
  padding:8px 14px; font-size:.74rem; color:var(--marino-70);
  font-family:var(--font-mono); letter-spacing:.01em;
}
.photo-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:1.6em 0; }
.photo-row .content-photo{ margin:0; }
@media (max-width:640px){
  .photo-row{ grid-template-columns:1fr; }
}

.chip-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:1em; align-content:flex-start; }
.chip{
  font-family:var(--font-mono); font-size:.7rem; padding:5px 10px;
  border:1px solid var(--linea); border-radius:3px; text-decoration:none; color:var(--marino-70);
  background:var(--papel);
}
.chip:hover{ border-color:var(--azul); color:var(--azul); }

/* faq — compacto */
.faq-item{ border-bottom:1px solid var(--linea); padding:14px 0; }
.faq-item h3{ font-size:.94rem; margin-bottom:.35em; font-weight:700; }
.faq-item p{ color:var(--marino-70); margin:0; font-size:.88rem; }

/* breadcrumbs */
.breadcrumbs{ font-family:var(--font-mono); font-size:.7rem; color:var(--marino-70); padding:12px 0 0; }
.breadcrumbs a{ text-decoration:none; color:var(--marino-70); }
.breadcrumbs a:hover{ color:var(--azul); }

/* cta final — banda plana, esquinas cerradas */
.cta-final{
  background:var(--marino); color:var(--papel); border-radius:4px;
  padding:38px 32px; text-align:center;
}
.cta-final h2{ color:#fff; max-width:32ch; margin-left:auto; margin-right:auto; }
.cta-final p{ color:#ffffffa8; max-width:48ch; margin-left:auto; margin-right:auto; font-size:.92rem; }
.cta-final .btn-primary{ background:var(--azul); margin-top:.3em; }
.cta-final .btn-primary:hover{ background:var(--azul-dark); }
.cta-badges{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px 16px;
  margin-bottom:1em; font-family:var(--font-mono); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.03em; color:var(--acero);
}
.cta-phone-btn{
  white-space:nowrap; font-size:1.15rem; padding:16px 32px; gap:.6em;
}

/* variante del cta final con el diagrama a la derecha */
.cta-final.with-diagram{
  display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center;
  text-align:left; padding:32px;
}
.cta-final.with-diagram h2,
.cta-final.with-diagram p{ margin-left:0; margin-right:0; max-width:none; }
.cta-final.with-diagram .cta-badges{ justify-content:flex-start; }
.cta-final-diagram img{ width:100%; display:block; border-radius:6px; }
@media (max-width:760px){
  .cta-final.with-diagram{ grid-template-columns:1fr; text-align:center; }
  .cta-final.with-diagram .cta-badges{ justify-content:center; }
  .cta-final-diagram{ max-width:280px; margin:0 auto; }
}

/* cta mid-page — franja plana con acento lateral */
.cta-mid{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:var(--papel); border:1px solid var(--linea); border-left:3px solid var(--azul);
  border-radius:0 4px 4px 0; padding:16px 22px; margin:1.8em 0; flex-wrap:wrap;
}
.cta-mid div{ display:flex; flex-direction:column; gap:2px; }
.cta-mid strong{ font-size:.96rem; }
.cta-mid span{ color:var(--marino-70); font-size:.85rem; }
.cta-mid .btn{ flex-shrink:0; }

/* sticky mobile call bar */
.sticky-call-bar{ display:none; }
@media (max-width:640px){
  .sticky-call-bar{
    display:flex; align-items:center; justify-content:center; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--azul); color:#fff; text-decoration:none;
    font-weight:700; font-size:.92rem; padding:13px 16px;
    box-shadow:0 -2px 10px rgba(0,0,0,.2);
    padding-bottom:max(13px, env(safe-area-inset-bottom));
  }
  body{ padding-bottom:58px; }
}

/* contact form */
.contact-2col{ display:grid; grid-template-columns:.8fr 1.2fr; gap:32px; align-items:center; max-width:900px; }
.contact-photo{ width:100%; height:100%; max-height:520px; object-fit:cover; border-radius:6px; }
@media (max-width:760px){
  .contact-2col{ grid-template-columns:1fr; }
  .contact-photo{ max-height:340px; }
}
.contact-form{ margin-top:.6em; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field{ margin-bottom:14px; display:flex; flex-direction:column; }
.form-field label{ font-size:.82rem; font-weight:600; margin-bottom:.3em; }
.form-field label .opt{ font-weight:400; color:var(--marino-70); }
.form-field input, .form-field textarea{
  font-family:var(--font-body); font-size:.94rem; color:var(--marino);
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radius);
  padding:10px 12px; resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--azul); outline-offset:1px; border-color:var(--azul); }
.form-extra{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; display:none; }
.form-note{ font-size:.78rem; color:var(--marino-70); margin-top:.8em; }
.form-note a{ color:var(--marino); text-decoration:underline; }
.form-status{ margin-top:.8em; font-size:.9rem; font-weight:600; min-height:1.3em; }
.form-status.ok{ color:#1C8F4A; }
.form-status.error{ color:#C0362C; }
#cf-submit[disabled]{ opacity:.6; cursor:not-allowed; }
@media (max-width:640px){
  .form-row{ grid-template-columns:1fr; }
}

/* footer — condensado, 3 columnas */
footer.site{ background:var(--marino); color:#ffffffb0; padding:36px 0 18px; margin-top:0; }
footer.site a{ color:#ffffffcc; text-decoration:none; }
footer.site a:hover{ color:#fff; }
.footer-logo-img{ height:78px; width:auto; display:block; margin-bottom:12px; filter:brightness(0) invert(1); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:26px; }
.footer-grid h4{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#ffffff70; margin-bottom:10px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:6px; font-size:.85rem; }
.footer-bottom{ border-top:1px solid #ffffff22; margin-top:26px; padding-top:14px; display:flex; justify-content:space-between; font-size:.76rem; color:#ffffff70; flex-wrap:wrap; gap:8px; }

/* local intro box */
.local-note{
  background:var(--papel); border-left:3px solid var(--acero);
  padding:16px 20px; border-radius:0 4px 4px 0; margin:1.3em 0;
  font-size:.9rem;
}
.local-note.winter{ border-left-color:var(--alerta); }

/* responsive */
@media (max-width:1060px){
  nav.main{ display:none; }
}
@media (max-width:920px){
  .grid-dif{ grid-template-columns:1fr; }
  .zonas-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  section{ padding:28px 0; }
  .cta-final{ padding:30px 20px; }
}

/* accessibility */
a:focus-visible, button:focus-visible{ outline:2px solid var(--azul); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}