/* Plomería VIA VOLKSWAGEN — estilos del sitio público.
   Paleta deducida de las fotos reales del negocio (tanque de presión rojo-ladrillo). */

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

:root{
  --tinta:#16302B;
  --tinta-2:#20463d;
  --rojo:#B5432A;
  --rojo-2:#9c3a24;
  --rojo-claro:#e19b81;
  --verde:#1F6E5C;
  --crema:#F6F1E6;
  --crema-2:#E9E1CE;
  --blanco:#FFFDF8;
  --texto:#20302b;
  --gris:#6b6255;
  --sombra: 0 10px 30px -12px rgba(22,48,43,.35);
  --radio: 16px;
  --font-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0; background:var(--crema); color:var(--texto);
  font-family:var(--font-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display); line-height:1.15; margin:0 0 .5em; color:var(--tinta);}
h1{font-size:clamp(1.9rem, 5vw, 3rem); font-weight:700;}
h2{font-size:clamp(1.5rem, 3.4vw, 2.1rem); font-weight:600;}
h3{font-size:1.15rem; font-weight:600;}
p{margin:0 0 1em;}
.contenedor{max-width:1120px; margin:0 auto; padding:0 1.25rem;}
.seccion{padding:4rem 0;}
.seccion-tit{max-width:640px; margin:0 auto 2.4rem;}
.seccion-tit.izq{margin-left:0;}
.eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; font-size:.78rem;
  color:var(--rojo); margin-bottom:.6rem;
}
.eyebrow-clara{color:var(--rojo-claro);}

/* ── Divisor "tubería" — elemento firma ─────────────────────────────── */
.tuberia{
  height:16px; margin:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cline x1='0' y1='8' x2='48' y2='8' stroke='%23B5432A' stroke-width='3'/%3E%3Ccircle cx='24' cy='8' r='5' fill='%23FFFDF8' stroke='%23B5432A' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:48px 16px; background-position:center;
}
.tuberia.oscura{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cline x1='0' y1='8' x2='48' y2='8' stroke='%23B5432A' stroke-width='3'/%3E%3Ccircle cx='24' cy='8' r='5' fill='%2316302B' stroke='%23B5432A' stroke-width='3'/%3E%3C/svg%3E");
}

/* ── Banner de sitio demo ─────────────────────────────────────────────── */
.demo-banner{
  background:#2b2620; color:#f2ece1; text-align:center; font-size:.85rem;
  line-height:1.4; padding:.4rem .9rem; letter-spacing:.01em;
}
@media (min-width:640px){.demo-banner{font-size:.92rem;}}

/* ── Header ───────────────────────────────────────────────────────────── */
header.sitio{position:sticky; top:0; z-index:50; background:var(--blanco); box-shadow:0 1px 0 var(--crema-2);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1.25rem; max-width:1120px; margin:0 auto;}
.marca{font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--tinta); text-decoration:none; line-height:1.2;}
.marca small{display:block; font-family:var(--font-body); font-weight:500; font-size:.68rem; color:var(--rojo); letter-spacing:.04em; text-transform:uppercase;}
.nav-links{display:flex; gap:1.6rem; list-style:none; margin:0; padding:0;}
.nav-links a{text-decoration:none; font-weight:500; font-size:.94rem; color:var(--texto);}
.nav-links a:hover{color:var(--rojo);}
.nav-cta{display:flex; align-items:center; gap:.6rem;}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--font-body); font-weight:600; font-size:.94rem;
  padding:.7rem 1.2rem; border-radius:999px; text-decoration:none; border:2px solid transparent;
  cursor:pointer; line-height:1.1;
}
.btn-rojo{background:var(--rojo); color:#fff;}
.btn-rojo:hover{background:var(--rojo-2);}
.btn-linea{background:transparent; border-color:var(--tinta); color:var(--tinta);}
.btn-linea:hover{background:var(--tinta); color:#fff;}
.btn-linea-clara{background:transparent; border-color:rgba(246,241,230,.55); color:var(--blanco);}
.btn-linea-clara:hover{background:rgba(246,241,230,.12);}
.btn-sm{padding:.5rem .9rem; font-size:.85rem;}
.btn svg{width:1.1em; height:1.1em; flex:none;}

.menu-toggle{display:none; background:none; border:0; padding:.4rem; cursor:pointer;}
.menu-toggle svg{width:26px; height:26px; color:var(--tinta);}
#nav-check{display:none;}

@media (max-width: 860px){
  .nav{position:relative;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; max-height:0; overflow:hidden;
    background:var(--blanco); flex-direction:column; padding:0 1.6rem; gap:0;
    transition:max-height .25s ease, padding .25s ease; box-shadow:0 12px 20px rgba(0,0,0,.1);
  }
  .nav-links a{font-size:1.05rem; display:block; padding:.8rem 0; border-top:1px solid var(--crema-2);}
  #nav-check:checked ~ .nav .nav-links{max-height:70vh; padding:.4rem 1.6rem 1.4rem; overflow-y:auto;}
  .menu-toggle{display:inline-flex;}
  .nav-cta .btn-texto{display:none;}
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{background:var(--tinta); color:var(--blanco); overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; padding:3.6rem 0;}
.hero h1{color:var(--blanco);}
.hero .sub{font-size:1.08rem; color:#d8e6df; max-width:46ch; margin-bottom:1.6rem;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.6rem;}
.hero-rating{display:flex; align-items:center; gap:.5rem; font-size:.92rem; color:#cfe0d8;}
.hero-rating .estrellas{color:#f0b429; letter-spacing:1px;}
.hero-foto{position:relative; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); border:6px solid rgba(246,241,230,.08);}
.hero-foto img{width:100%; height:auto; object-fit:cover; aspect-ratio:4/3;}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; padding:2.6rem 0; gap:1.8rem;}
  .hero-foto{order:-1; max-width:420px; margin:0 auto;}
}

/* ── Sobre nosotros ───────────────────────────────────────────────────── */
.sobre-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:2.6rem; align-items:start;}
.sobre-grid p{white-space:pre-line;}
.stat-card{background:var(--blanco); border:1px solid var(--crema-2); border-radius:var(--radio); padding:1.6rem; text-align:center; box-shadow:var(--sombra);}
.stat-num{font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--rojo); line-height:1;}
.stat-lbl{font-size:.92rem; color:var(--gris); margin-top:.4rem;}
@media (max-width:760px){.sobre-grid{grid-template-columns:1fr;}}

/* ── Galería ──────────────────────────────────────────────────────────── */
.galeria-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;}
.galeria-item{border-radius:12px; overflow:hidden; position:relative; background:var(--crema-2); box-shadow:var(--sombra);}
.galeria-item img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover;}
.galeria-item span{
  position:absolute; left:0; right:0; bottom:0; padding:.6rem .7rem .5rem;
  background:linear-gradient(0deg, rgba(22,48,43,.82), rgba(22,48,43,0));
  color:#fff; font-size:.78rem; font-weight:500;
}
@media (max-width:760px){.galeria-grid{grid-template-columns:repeat(2,1fr);}}

/* ── Servicios ────────────────────────────────────────────────────────── */
.servicios-cat{margin-bottom:2.2rem;}
.servicios-cat h3{color:var(--rojo); font-family:var(--font-body); text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; font-weight:700; margin-bottom:1rem;}
.servicios-list{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem;}
.servicio-card{background:var(--blanco); border:1px solid var(--crema-2); border-radius:14px; padding:1.3rem 1.4rem;}
.servicio-card h4{margin:0 0 .35rem; font-family:var(--font-body); font-size:1.02rem; font-weight:700; color:var(--tinta);}
.servicio-card p{margin:0; font-size:.92rem; color:var(--gris);}
@media (max-width:760px){.servicios-list{grid-template-columns:1fr;}}

.nota-precios{
  margin-top:2.2rem; background:var(--tinta); color:var(--crema); border-radius:var(--radio);
  padding:1.6rem 1.7rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.nota-precios p{margin:0; max-width:56ch; color:#e3ede8;}

/* ── Reseñas ──────────────────────────────────────────────────────────── */
.resenas-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem;}
.resena-card{background:var(--blanco); border:1px solid var(--crema-2); border-radius:14px; padding:1.5rem;}
.resena-card .estrellas{color:#f0b429; letter-spacing:2px; font-size:.95rem; margin-bottom:.6rem; display:block;}
.resena-card p{margin:0; font-style:italic; color:var(--texto);}
.resenas-liga{margin-top:1.6rem; text-align:center; font-size:.92rem; color:var(--gris);}
.resenas-liga a{color:var(--verde); font-weight:600; text-decoration:none;}
@media (max-width:760px){.resenas-grid{grid-template-columns:1fr;}}

/* ── Contacto ─────────────────────────────────────────────────────────── */
.contacto-grid{display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; align-items:start;}
.contacto-info{display:flex; flex-direction:column; gap:1.2rem;}
.contacto-item{display:flex; gap:.8rem; align-items:flex-start;}
.contacto-item svg{width:22px; height:22px; flex:none; color:var(--rojo); margin-top:.15rem;}
.contacto-item strong{display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gris); margin-bottom:.15rem;}
.contacto-item a{color:var(--tinta); text-decoration:none; font-weight:600;}
.contacto-item a:hover{color:var(--rojo);}
.horario-tabla{width:100%; border-collapse:collapse; font-size:.92rem;}
.horario-tabla td{padding:.3rem 0; border-bottom:1px dashed var(--crema-2);}
.horario-tabla td:last-child{text-align:right; color:var(--gris);}
.mapa-wrap{border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); border:1px solid var(--crema-2);}
.mapa-wrap iframe{width:100%; height:100%; min-height:340px; border:0; display:block;}
.contacto-ctas{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.4rem;}
@media (max-width:860px){.contacto-grid{grid-template-columns:1fr;}}

/* ── Redes sociales (footer + sección) ───────────────────────────────── */
.redes-fila{display:flex; gap:.6rem; flex-wrap:wrap;}
.redes-fila a{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:999px; background:var(--tinta); color:#fff; text-decoration:none;
}
.redes-fila a svg{width:19px; height:19px; fill:currentColor;}
.redes-fila a:hover{background:var(--rojo);}
footer .redes-fila a{background:rgba(246,241,230,.14);}
footer .redes-fila a:hover{background:var(--rojo);}

/* ── Botón flotante de WhatsApp ───────────────────────────────────────── */
.wa-flotante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:60;
  width:58px; height:58px; border-radius:999px; background:var(--verde); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.28);
  text-decoration:none;
}
.wa-flotante svg{width:28px; height:28px; fill:currentColor;}
.wa-flotante:hover{background:#195c4d;}

/* ── Footer ───────────────────────────────────────────────────────────── */
footer{background:var(--tinta); color:#cfe0d8; padding:2.6rem 0 1.6rem; font-size:.9rem;}
footer .footer-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.6rem; margin-bottom:1.8rem;}
footer .marca{color:var(--blanco);}
footer .marca small{color:#e19b81;}
footer .creditos{border-top:1px solid rgba(246,241,230,.14); padding-top:1.2rem; text-align:center; color:#a9beb5;}
footer .creditos a{color:#dcece5; text-decoration:underline;}

/* ── Avisos genéricos (admin/CMS reutiliza) ─────────────────────────── */
.aviso{padding:.9rem 1.1rem; border-radius:10px; margin:0 0 1.2rem; font-size:.92rem;}
.aviso-ok{background:#e7f3ea; border:1px solid #bfe0c8; color:#245c34;}
.aviso-error{background:#fbe9e7; border:1px solid #f0bdb6; color:#8a2f22;}

/* ── Utilidades responsive ───────────────────────────────────────────── */
.overflow-x{overflow-x:auto;}
@media (max-width:600px){
  .seccion{padding:2.8rem 0;}
  .nota-precios{flex-direction:column; align-items:flex-start;}
}