/*
Theme Name: Fontanería Valencia
Theme URI: https://fontaneriavalencia.com
Author:  Fontanería Valencia
Description:  Fontanería Valencia
Text Domain: fontaneria-valencia
*/

/* Tipografía Archivo AUTO-ALOJADA (fuente variable: un woff2 = pesos 400-800).
   Sin peticiones a Google Fonts: menos bloqueo de render y sin cadena externa. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/archivo-variable.woff2') format('woff2-variations'),
      url('fonts/archivo-variable.woff2') format('woff2');
}

:root{
  --azul:#0B3A5B;          /* primario */
  --azul-osc:#072840;      /* azul profundo (degradados) */
  --azul-noche:#04192a;    /* fondo más oscuro del degradado */
  --turquesa:#16B7C1;      /* secundario / acento */
  --turquesa-osc:#0f97a0;  /* hover botón */
  --turquesa-claro:#5FE0E6;/* acento sobre azul */
  --tinta:#0A1E2B;         /* casi negro */
  --gris:#5B7688;          /* texto secundario */
  --linea:#E1EAF0;         /* bordes */
  --fondo:#ffffff;
  --fondo2:#EDF3F7;

  /* Texto sobre superficies turquesa: blanco. Para que contraste, lo que se
     oscurece es la superficie (--g-turquesa-solido), no el texto. */
  --btn-texto:#ffffff;

  /* Degradados de marca */
  /* Claro: SOLO decorativo (filetes, acentos, texto en degradado). Nunca con texto encima. */
  --g-turquesa:linear-gradient(135deg,#16B7C1 0%,#5FE0E6 100%);
  /* Sólido: superficies que llevan texto o iconos blancos (4,8:1 a 3,9:1) */
  --g-turquesa-solido:linear-gradient(135deg,#097077 0%,#0E8F98 100%);
  --g-turquesa-vivo:linear-gradient(135deg,#0B7F87 0%,#12A9B2 100%); /* hover: se ilumina */
  --g-azul:linear-gradient(155deg,#0B3A5B 0%,#072840 55%,#04192a 100%);
  --g-claro:linear-gradient(180deg,#F3F8FB 0%,#E4EEF4 100%);
  --g-linea:linear-gradient(90deg,transparent,var(--turquesa),transparent);

  --radio:18px;
  --radio-lg:26px;
  --radio-btn:12px;

  /* Escala de elevación */
  --sombra-xs:0 1px 2px rgba(11,58,91,.06),0 2px 6px rgba(11,58,91,.05);
  --sombra:0 2px 6px rgba(11,58,91,.05),0 12px 30px rgba(11,58,91,.09);
  --sombra-lg:0 4px 10px rgba(11,58,91,.06),0 24px 60px rgba(11,58,91,.14);
  --glow:0 10px 30px rgba(22,183,193,.35);
  --glow-fuerte:0 14px 40px rgba(22,183,193,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* texto solo para lectores de pantalla (contexto en enlaces "Ver más", etc.) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{margin:0;font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--tinta);line-height:1.55;background:var(--fondo);font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:#0B7F87;text-decoration:none} /* turquesa accesible: 4,8:1 sobre blanco (el de marca da 2,45:1) */
a:hover{color:var(--azul)}
h1,h2,h3{line-height:1.13;color:var(--azul);margin:.2em 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(34px,4.6vw,52px);font-weight:800}
h2{font-size:clamp(26px,3vw,36px);font-weight:800;margin-top:0}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
p{margin:.6em 0}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:84px 0;position:relative}
.section.alt{background:var(--g-claro)}
.center{text-align:center}

/* ---------- Sección oscura (rompe la sucesión de bloques claros) ---------- */
.section.dark{background:var(--g-azul);color:rgba(255,255,255,.82);position:relative;overflow:hidden;isolation:isolate}
.section.dark:before{content:"";position:absolute;z-index:-1;width:700px;height:700px;top:-360px;left:50%;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(22,183,193,.3),transparent 65%)}
.section.dark:after{content:"";position:absolute;z-index:-1;inset:0;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 50% 45%,#000 25%,transparent 100%);
  mask-image:radial-gradient(ellipse 75% 85% at 50% 45%,#000 25%,transparent 100%)}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark .sec-head p{color:rgba(255,255,255,.72)}
.section.dark .eyebrow{color:var(--turquesa-claro)}
/* tarjetas de cristal sobre el fondo oscuro */
.section.dark .step{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);backdrop-filter:blur(8px);box-shadow:none}
.section.dark .step:hover{background:rgba(255,255,255,.09);border-color:rgba(22,183,193,.45);box-shadow:0 20px 50px rgba(4,25,42,.5)}
.section.dark .step p{color:rgba(255,255,255,.72)}
.section.dark .step:before{border-color:var(--azul-noche)}
.section.dark .steps:before{background:linear-gradient(90deg,transparent,rgba(95,224,230,.4),rgba(95,224,230,.4),transparent)}

/* Acento tipográfico: palabra en degradado turquesa */
.grad{background:var(--g-turquesa);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Encabezado de sección (eyebrow + título + entradilla) ---------- */
.sec-head{max-width:64ch;margin:0 auto 46px}
.sec-head.center{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#097077;margin-bottom:14px}
.eyebrow:before{content:"";width:26px;height:2px;border-radius:2px;background:var(--g-turquesa)}
.sec-head.center .eyebrow:after{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(270deg,var(--turquesa),transparent)}
.sec-head p{color:var(--gris);font-size:1.06rem;margin:.4em 0 0}

/* ---------- Top bar ----------
   Topbar + header forman un único bloque oscuro que enlaza con el hero. */
.topbar{background:var(--azul-noche);color:#fff;font-size:.88rem;position:relative;z-index:51}
/* Con hero: también flota sobre él, separada por un hairline. Toda la cabecera
   es una capa sobre el hero, no una banda con fondo propio. */
body:has(main > .hero:first-child) .topbar{background:transparent;border-bottom:1px solid rgba(255,255,255,.09)}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:9px;padding-bottom:9px;gap:12px}
.topbar a{color:#fff}
.topbar a:hover{color:var(--turquesa-claro)}
.topbar .tb-left{opacity:.7}
.topbar .tb-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap;opacity:.9}

/* ---------- Header / nav ----------
   La cabecera NO tiene banda propia: flota sobre el hero, que se extiende por
   detrás. Así no hay costura posible entre dos fondos distintos. Al hacer
   scroll se materializa como cristal oscuro sobre el contenido que pasa debajo.
   El fondo sólido solo se usa en páginas sin hero (ver :has más abajo). */
.site-header{position:sticky;top:0;z-index:50;background:var(--azul-noche);
  border-bottom:1px solid transparent;transition:background .35s ease,box-shadow .35s ease,border-color .35s ease}

/* Páginas CON hero: cabecera transparente y el hero sube por detrás de ella.
   IMPORTANTE: esta regla tiene más especificidad que `.site-header.scrolled`,
   así que el estado con scroll se re-declara aquí dentro o no se aplicaría. */
body:has(main > .hero:first-child) .site-header{background:transparent}
body:has(main > .hero:first-child) .site-header.scrolled{background:var(--azul-noche)}
main > .hero:first-child{margin-top:calc(-1 * (var(--h-top, 40px) + var(--h-header, 91px)));
  padding-top:calc(var(--h-top, 40px) + var(--h-header, 91px) + 72px)}

/* Al hacer scroll: fondo SÓLIDO azul noche (mismo color que en reposo en
   páginas sin hero). El cristal translúcido dejaba pasar los fondos claros
   y el menú blanco se perdía. */
.site-header.scrolled{background:var(--azul-noche);
  border-bottom-color:rgba(255,255,255,.09);box-shadow:0 10px 40px rgba(4,25,42,.4)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1120px;margin:0 auto}
.brand img{height:66px;width:auto;display:block;transition:.3s}
.site-header.scrolled .brand img{height:54px}
.menu{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.menu a{color:rgba(255,255,255,.88);font-weight:600;font-size:.98rem;position:relative;padding:6px 0}
.menu a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;background:var(--g-turquesa);transition:right .25s}
.menu a:hover{color:#fff}
.menu a:hover:after{right:0}
.menu li:last-child a:after{display:none}
/* Ojo: dentro del menú, `.menu a` (0,1,1) gana en especificidad a `.btn-tel`
   (0,1,0) y le anulaba el padding lateral. De ahí `.menu .btn-tel`. */
.btn-tel,.menu .btn-tel{background:var(--g-turquesa-solido);color:var(--btn-texto) !important;padding:13px 26px;
  border-radius:var(--radio-btn);font-weight:700;white-space:nowrap;box-shadow:var(--glow);transition:.22s;
  display:inline-flex;align-items:center;gap:8px;line-height:1}
.btn-tel:hover{color:var(--btn-texto) !important;background:var(--g-turquesa-vivo);transform:translateY(-2px);box-shadow:var(--glow-fuerte)}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:#fff;cursor:pointer}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 28px;border-radius:var(--radio-btn);
  font-weight:700;cursor:pointer;border:0;font-family:inherit;font-size:1rem;transition:.22s;position:relative;overflow:hidden}
/* Texto azul-noche sobre turquesa: el blanco se lavaba (contraste 2,3:1).
   Así sube a ~7:1 y el botón "canta" mucho más sobre el azul del hero. */
.btn-primary{background:var(--g-turquesa-solido);color:var(--btn-texto);box-shadow:var(--glow)}
.btn-primary:hover{background:var(--g-turquesa-vivo);color:var(--btn-texto);transform:translateY(-2px);box-shadow:var(--glow-fuerte)}
/* brillo que cruza el botón al pasar el ratón */
.btn-primary:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s}
.btn-primary:hover:before{transform:translateX(120%)}
.btn-ghost{background:#fff;color:var(--azul);border:2px solid var(--linea)}
.btn-ghost:hover{background:#fff;color:var(--azul);border-color:var(--turquesa);transform:translateY(-2px);box-shadow:var(--sombra)}
.btn-lg{font-size:1.08rem;padding:17px 32px}
/* botones sobre fondo azul (hero) */
.hero .btn-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.hero .btn-ghost:hover{background:#fff;color:var(--azul);border-color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--g-azul);color:#fff;padding:96px 0 130px;isolation:isolate}
/* halos de luz turquesa */
.hero:before{content:"";position:absolute;z-index:-2;width:820px;height:820px;top:-380px;right:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,183,193,.36) 0%,rgba(22,183,193,0) 62%)}
.hero:after{content:"";position:absolute;z-index:-2;width:640px;height:640px;bottom:-320px;left:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(95,224,230,.22) 0%,rgba(95,224,230,0) 65%);opacity:1;transform:none;top:auto;width:640px;height:640px}
/* retícula técnica muy sutil */
.hero .hero-grid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%)}
/* marca de agua del isotipo */
.hero .hero-watermark{position:absolute;right:-40px;bottom:-60px;width:420px;z-index:-1;opacity:.06;
  filter:brightness(0) invert(1);pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero h1{color:#fff;max-width:16ch}
.hero .lead{font-size:1.18rem;color:rgba(255,255,255,.82);max-width:52ch;margin:.5em 0 1.6em}
.hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;font-weight:500}
.hero .badges span{display:flex;align-items:center;gap:9px;font-size:.94rem;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:8px 16px}
.hero .tick{color:var(--turquesa-claro);font-weight:800}
.hero-phone{color:var(--azul);font-size:1.5rem;font-weight:800;display:inline-flex;align-items:center;gap:10px}

/* píldora superior del hero */
.hero-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#fff;border-radius:999px;padding:8px 18px 8px 10px;font-size:.86rem;font-weight:600;margin-bottom:22px;backdrop-filter:blur(8px)}
.hero-pill b{display:inline-flex;align-items:center;gap:6px;background:var(--g-turquesa-solido);color:#fff;
  border-radius:999px;padding:3px 11px;font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

/* divisor curvo hacia la sección siguiente */
.hero .hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:80px;display:block;z-index:0}
.hero .hero-wave path{fill:var(--fondo2)}

/* Listado del blog */
/* miniatura a sangre hasta los bordes de la tarjeta (compensa su padding 30/28) */
.blog-grid .card{overflow:hidden}
.card-thumb{display:block;margin:-30px -28px 20px;overflow:hidden}
.card-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .4s}
.blog-grid .card:hover .card-thumb img{transform:scale(1.05)}

/* Imagen destacada del artículo: solapa suavemente el hero oscuro */
.post-imagen{position:relative;z-index:2;margin-top:-30px}
.post-imagen .container{max-width:820px}
.post-imagen img{display:block;width:100%;height:auto;border-radius:var(--radio-lg);box-shadow:var(--sombra-lg)}
.post-imagen + .page-body{padding-top:44px}

.blog-grid .card h3 a{color:var(--azul)}
.blog-grid .card h3 a:hover{color:var(--turquesa-osc)}
.post-fecha{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#097077;margin-bottom:10px}
.pagination .nav-links{display:flex;gap:10px;justify-content:center}
.pagination a,.pagination span.current{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:9px 16px;font-weight:600;color:var(--azul)}
.pagination span.current{background:var(--g-turquesa-solido);color:#fff;border-color:transparent}

/* Miga de pan (artículos) */
.miga{font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:18px}
.miga a{color:rgba(255,255,255,.75)}
.miga a:hover{color:var(--turquesa-claro)}
.miga span{color:rgba(255,255,255,.55)}

/* Hero compacto para artículos del blog */
.hero--post{padding-bottom:64px}
.hero--post h1{max-width:24ch}
.hero--post .lead{max-width:62ch}

/* ---------- Trust strip ----------
   Sin solape negativo: se comía la curva del hero y quedaba todo apelotonado. */
.hero + .section{background:var(--fondo2);padding:60px 0 86px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center;position:relative;z-index:2}
.trust .t{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:32px 20px;box-shadow:var(--sombra);
  transition:.25s;position:relative;overflow:hidden}
.trust .t:before{content:"";position:absolute;top:0;left:15%;width:70%;height:3px;background:var(--g-turquesa);transform:scaleX(0);transition:transform .3s}
.trust .t:hover{transform:translateY(-5px);box-shadow:var(--sombra-lg)}
.trust .t:hover:before{transform:scaleX(1)}
.trust .t-ico{width:46px;height:46px;margin:0 auto 12px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(22,183,193,.14),rgba(95,224,230,.08));border:1px solid rgba(22,183,193,.18)}
.trust .t-ico svg{width:22px;height:22px;stroke:var(--turquesa-osc);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trust .t .n{font-size:1.12rem;font-weight:800;color:var(--azul);letter-spacing:-.01em}
.trust .t .l{color:var(--gris);font-size:.93rem;margin-top:2px}

/* ---------- Service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:30px 28px;box-shadow:var(--sombra-xs);
  transition:.28s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
/* línea de acento que se despliega en el borde superior */
.card:before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--g-turquesa);transform:scaleX(0);transform-origin:left;transition:transform .35s}
/* resplandor de fondo al pasar el ratón */
.card:after{content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,183,193,.12),transparent 70%);opacity:0;transition:opacity .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(22,183,193,.4);box-shadow:var(--sombra-lg)}
.card:hover:before{transform:scaleX(1)}
.card:hover:after{opacity:1}
.card>*{position:relative;z-index:1}
.card .ico{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  margin-bottom:16px;background:linear-gradient(145deg,rgba(22,183,193,.13),rgba(95,224,230,.06));
  border:1px solid rgba(22,183,193,.18);transition:.28s}
.card:hover .ico{background:var(--g-turquesa-solido);border-color:transparent;box-shadow:var(--glow);transform:scale(1.05) rotate(-3deg)}
.card:hover .ico svg{stroke:var(--btn-texto)}
/* Iconos emoji: el tile NO se rellena de turquesa (ensuciaría el emoji a color),
   solo se intensifica el tinte y crece. */
.ico.emoji{font-size:1.75rem;line-height:1}
.card:hover .ico.emoji{background:linear-gradient(145deg,rgba(22,183,193,.24),rgba(95,224,230,.12));
  border-color:rgba(22,183,193,.4);box-shadow:0 8px 22px rgba(22,183,193,.22)}
.card h3{margin:.2em 0 .4em;color:var(--azul)}
.card p{color:var(--gris);font-size:.98rem;margin:0 0 1em}
.card a.more{font-weight:700;color:#0B7F87;display:inline-flex;align-items:center;gap:6px}
.card a.more:hover{color:var(--azul)}
.card a.more span{transition:transform .25s;display:inline-block}
.card:hover a.more span{transform:translateX(5px)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s;position:relative}
/* línea que conecta los tres pasos */
.steps:before{content:"";position:absolute;top:52px;left:14%;right:14%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(22,183,193,.35),rgba(22,183,193,.35),transparent);z-index:0}
.step{background:#fff;border-radius:var(--radio);padding:34px 28px 28px;border:1px solid var(--linea);position:relative;z-index:1;
  box-shadow:var(--sombra-xs);transition:.28s}
.step:hover{transform:translateY(-5px);box-shadow:var(--sombra-lg);border-color:rgba(22,183,193,.35)}
.step:before{counter-increment:s;content:counter(s);position:absolute;top:-22px;left:28px;width:44px;height:44px;
  background:var(--g-turquesa-solido);color:var(--btn-texto);border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.15rem;box-shadow:var(--glow);border:3px solid #fff}
.step h3{margin-top:.4em}
.step p{color:var(--gris);margin-bottom:0}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:30px 28px;box-shadow:var(--sombra-xs);
  position:relative;overflow:hidden;transition:.28s}
.review:hover{transform:translateY(-5px);box-shadow:var(--sombra-lg);border-color:rgba(22,183,193,.35)}
/* comilla decorativa */
.review:before{content:"\201C";position:absolute;top:-18px;right:14px;font-size:8rem;line-height:1;font-weight:800;
  color:rgba(22,183,193,.09);pointer-events:none;font-family:Georgia,serif}
.review>*{position:relative;z-index:1}
.review p{color:var(--tinta);font-size:1rem}
.stars{color:#f5a623;font-size:1.05rem;letter-spacing:2px}
.review .who{font-weight:700;margin-top:14px;color:var(--azul)}
.review .zona{color:var(--gris);font-size:.9rem}
/* avatar con iniciales */
.review .rev-foot{display:flex;align-items:center;gap:13px;margin-top:18px;padding-top:16px;border-top:1px solid var(--linea)}
.review .avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--g-turquesa-solido);color:var(--btn-texto);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;box-shadow:var(--glow)}
.review .rev-foot .who{margin-top:0}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:2px 22px;margin-bottom:12px;
  box-shadow:var(--sombra-xs);transition:.25s}
.faq details:hover{border-color:rgba(22,183,193,.4)}
.faq details[open]{box-shadow:var(--sombra);border-color:rgba(22,183,193,.45)}
.faq summary{cursor:pointer;font-weight:700;padding:18px 0;color:var(--azul);list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:rgba(22,183,193,.1);
  color:var(--turquesa-osc);font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center;
  transition:.25s;float:none}
.faq details[open] summary:after{content:"+";transform:rotate(45deg);background:var(--g-turquesa-solido);color:var(--btn-texto)}
.faq p{padding-bottom:18px;color:var(--gris);margin-top:0}

/* ---------- CTA band ---------- */
.ctaband{background:var(--g-azul);color:#fff;border-radius:var(--radio-lg);padding:64px 44px;text-align:center;
  position:relative;overflow:hidden;box-shadow:var(--sombra-lg);isolation:isolate}
.ctaband:before{content:"";position:absolute;z-index:-1;width:600px;height:600px;top:-340px;left:50%;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(22,183,193,.4) 0%,rgba(22,183,193,0) 65%)}
.ctaband:after{content:"";position:absolute;z-index:-1;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 50% 50%,#000 20%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 100% at 50% 50%,#000 20%,transparent 100%)}
.ctaband h2{color:#fff}
.ctaband p{color:rgba(255,255,255,.85);max-width:56ch;margin-left:auto;margin-right:auto}
.ctaband .cta-acciones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.ctaband .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35)}
.ctaband .btn-ghost:hover{background:#fff;color:var(--azul);border-color:#fff}
.ctaband .hero-phone{margin-top:8px;color:#fff}
.ctaband .hero-phone a{color:#fff}
.ctaband .hero-phone a:hover{color:var(--turquesa-claro)}

/* ---------- Zonas ---------- */
.zonas{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.zonas-titulo{text-align:center;font-weight:700;color:var(--azul);font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;margin:34px 0 16px}
.zonas-titulo:first-of-type{margin-top:8px}
.zonas a{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:10px 20px;color:var(--azul);
  font-weight:600;font-size:.95rem;box-shadow:var(--sombra-xs);transition:.22s}
.zonas a:hover{background:var(--g-turquesa-solido);color:var(--btn-texto);border-color:transparent;transform:translateY(-3px);box-shadow:var(--glow)}
/* mapa de zonas sobre panel */
.zonas-panel{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-lg);padding:44px;box-shadow:var(--sombra);
  position:relative;overflow:hidden}
.zonas-panel:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(22,183,193,.07),transparent 70%)}
.zonas-panel>*{position:relative;z-index:1}

/* ---------- Página de servicios: componentes propios ----------
   Diseño deliberadamente distinto del home para que no parezcan clones:
   filas alternadas en lugar de grid de tarjetas, listado con marcadores, etc. */

/* Fila de servicio: media-object grande alternando lado por fila */
.svc-lista{display:flex;flex-direction:column;gap:26px}
.svc-fila{display:grid;grid-template-columns:96px 1fr auto;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio-lg);padding:30px 34px;
  box-shadow:var(--sombra-xs);transition:.28s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
.svc-fila:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--g-turquesa);
  transform:scaleY(0);transform-origin:top;transition:transform .35s}
.svc-fila:hover{transform:translateX(6px);box-shadow:var(--sombra-lg);border-color:rgba(22,183,193,.35)}
.svc-fila:hover:before{transform:scaleY(1)}
.svc-fila .svc-ico{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;background:linear-gradient(145deg,rgba(22,183,193,.12),rgba(95,224,230,.05));
  border:1px solid rgba(22,183,193,.16)}
.svc-fila h3{margin:0 0 .25em;font-size:1.3rem}
.svc-fila p{margin:0;color:var(--gris)}
.svc-fila .svc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.svc-fila .svc-tags span{font-size:.8rem;font-weight:600;color:#097077;
  background:rgba(22,183,193,.08);border:1px solid rgba(22,183,193,.18);border-radius:999px;padding:4px 12px}
.svc-fila .svc-cta{white-space:nowrap}
.svc-fila .svc-cta .btn{padding:12px 22px;font-size:.95rem}

/* Banda de estadísticas sobre fondo oscuro */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stats .st .num{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:var(--g-turquesa);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats .st .des{color:rgba(255,255,255,.75);margin-top:8px;font-size:.95rem}

/* Franja "también hacemos" — lista compacta a dos columnas */
.tambien{columns:2;column-gap:44px;max-width:820px;margin:0 auto}
.tambien li{break-inside:avoid;list-style:none;padding:11px 0 11px 34px;position:relative;
  border-bottom:1px dashed var(--linea);color:var(--tinta);font-weight:500}
.tambien li:before{content:"";position:absolute;left:0;top:14px;width:20px;height:20px;border-radius:6px;
  background:var(--g-turquesa-solido);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg>') center/16px no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg>') center/16px no-repeat}

/* Bloque de compromiso: cita grande con filete */
.compromiso{max-width:760px;margin:0 auto;text-align:center;padding:10px 20px}
.compromiso blockquote{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;color:var(--azul);
  line-height:1.35;letter-spacing:-.01em;margin:0}
.compromiso blockquote strong{background:var(--g-turquesa);-webkit-background-clip:text;background-clip:text;color:transparent}
.compromiso .firma{margin-top:18px;color:var(--gris);font-size:.95rem}
.compromiso:before{content:"";display:block;width:54px;height:3px;border-radius:3px;background:var(--g-turquesa);margin:0 auto 26px}

@media(max-width:900px){
  .svc-fila{grid-template-columns:72px 1fr;padding:24px}
  .svc-fila .svc-ico{width:72px;height:72px;font-size:2rem;border-radius:18px}
  .svc-fila .svc-cta{grid-column:2}
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .tambien{columns:1}
  .svc-fila:hover{transform:none}
}

/* ---------- Content pages ---------- */
.page-body{padding:64px 0}
/* bloque "servicios relacionados" al pie de cada página de servicio */
.svc-relacionados{margin-top:44px;padding-top:34px;border-top:1px solid var(--linea)}
.svc-relacionados h2{margin-top:0}
.svc-relacionados .zonas{justify-content:flex-start;margin:18px 0}
.svc-relacionados p{color:var(--gris)}
.page-body .container{max-width:820px}
.page-body h2{margin-top:1.5em}
.page-body ul{padding-left:20px}
.page-body li{margin:.4em 0}
.price-table{width:100%;border-collapse:separate;border-spacing:0;margin:22px 0;border:1px solid var(--linea);
  border-radius:14px;overflow:hidden;box-shadow:var(--sombra-xs)}
.price-table th,.price-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--linea)}
.price-table th{background:var(--g-azul);color:#fff;font-weight:600;border-bottom:0}
.price-table tr:last-child td{border-bottom:0}
.price-table td:last-child{font-weight:800;color:var(--azul)}
.price-table tr:hover td{background:var(--fondo2)}
.notice{border-left:4px solid var(--turquesa);background:linear-gradient(135deg,rgba(22,183,193,.09),rgba(95,224,230,.04));
  padding:18px 22px;border-radius:0 14px 14px 0;margin:20px 0}

/* ---------- Form ---------- */
.leadform{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-lg);padding:30px;box-shadow:var(--sombra-lg);color:var(--tinta)}
.leadform label{display:block;font-weight:600;margin:12px 0 5px;font-size:.92rem;color:var(--azul)}
.leadform input,.leadform textarea,.leadform select{width:100%;padding:13px 14px;border:1.5px solid var(--linea);border-radius:11px;
  font-size:1rem;font-family:inherit;background:var(--fondo2);transition:.2s;color:var(--tinta)}
.leadform input:focus,.leadform textarea:focus,.leadform select:focus{outline:0;background:#fff;border-color:var(--turquesa);
  box-shadow:0 0 0 4px rgba(22,183,193,.15)}
.leadform .btn{width:100%;margin-top:18px}
.leadform small{color:var(--gris);font-size:.82rem;display:block;margin-top:10px;text-align:center}
.leadform .form-titulo{font-size:1.24rem;color:var(--azul);display:block;font-weight:800;letter-spacing:-.01em}
.leadform .form-sub{color:var(--gris);font-size:.92rem;margin:.2em 0 .6em}

/* halo turquesa detrás del formulario del hero */
.hero-form{position:relative}
.hero-form:before{content:"";position:absolute;inset:-24px -18px;border-radius:38px;
  background:radial-gradient(ellipse at 50% 40%,rgba(22,183,193,.35),transparent 68%);filter:blur(18px);pointer-events:none}
.hero-form .leadform{position:relative}

/* ---------- Footer ---------- */
.site-footer{background:var(--g-azul);color:#a9c2d3;padding:64px 0 90px;font-size:.95rem;position:relative;overflow:hidden}
.site-footer:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--g-linea)}
.site-footer:after{content:"";position:absolute;width:600px;height:600px;bottom:-400px;right:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,183,193,.16),transparent 65%);pointer-events:none}
.site-footer .container{position:relative;z-index:1}
/* width:auto obligatorio: el atributo width del <img> deformaba el logo */
.site-footer .foot-logo{height:46px;width:auto;margin-bottom:16px}
.site-footer h4{color:#fff;margin:0 0 14px;font-weight:700;font-size:1rem;letter-spacing:.01em}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
.site-footer a{color:#a9c2d3}
.site-footer a:hover{color:var(--turquesa-claro)}
.site-footer p{line-height:1.9}
.foot-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:36px;padding-top:20px;font-size:.85rem;opacity:.75;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- Formulario: avisos y honeypot ---------- */
.form-aviso{border-radius:12px;padding:14px 18px;margin-bottom:14px;font-size:.95rem}
.form-aviso.ok{background:linear-gradient(135deg,rgba(22,183,193,.14),rgba(95,224,230,.07));border:1px solid rgba(22,183,193,.4);color:var(--azul)}
.form-aviso.error{background:#fdf0ef;border:1px solid #e8b4ae;color:#8a2f24}
.fv-hp{position:absolute !important;left:-9999px !important;top:-9999px !important;height:1px;width:1px;overflow:hidden}

/* ---------- Banner de cookies ---------- */
/* [hidden] debe ganar al display:flex de abajo, si no el banner nunca se oculta */
.cookie-banner[hidden]{display:none !important}
.cookie-banner{position:fixed;z-index:70;left:16px;right:16px;bottom:16px;max-width:680px;margin:0 auto;
  background:rgba(4,25,42,.98);color:rgba(255,255,255,.85);
  border:1px solid rgba(22,183,193,.3);border-radius:var(--radio);padding:20px 22px;
  box-shadow:0 20px 60px rgba(4,25,42,.5);display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cookie-banner p{margin:0;flex:1 1 320px;font-size:.92rem;line-height:1.5}
.cookie-banner a{color:var(--turquesa-claro)}
.cookie-banner .cookie-acciones{display:flex;gap:10px}
.cookie-banner .btn{padding:11px 20px;font-size:.92rem}
.cookie-banner .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.cookie-banner .btn-ghost:hover{background:#fff;color:var(--azul)}
@media(max-width:720px){
  .cookie-banner{bottom:64px} /* por encima de la barra de llamada móvil */
}

/* ---------- Sticky mobile call bar ---------- */
.callbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:none;grid-template-columns:1fr 1fr;
  box-shadow:0 -6px 24px rgba(11,58,91,.18)}
.callbar a{padding:16px;text-align:center;font-weight:700;color:#fff}
.callbar .c-tel{background:var(--g-turquesa-solido);color:var(--btn-texto)}
.callbar .c-wa{background:linear-gradient(135deg,#1f9d63,#25c47c)}

/* ---------- Hero split con formulario ---------- */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero-copy .lead{margin-bottom:1.1em}
.hero-copy .badges{margin-top:26px}
.hero-form .leadform{margin:0}

/* ---------- Iconos SVG de servicios ---------- */
.card .ico svg{width:30px;height:30px;fill:none;stroke:var(--turquesa-osc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .28s}

/* ---------- Panel "por qué elegirnos" ---------- */
.why-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
.why-panel{background:var(--g-azul);border-radius:var(--radio-lg);padding:52px;position:relative;overflow:hidden;
  min-height:380px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra-lg);isolation:isolate}
.why-panel:before{content:"";position:absolute;z-index:-1;width:460px;height:460px;top:-140px;left:-120px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,183,193,.4),transparent 65%)}
.why-panel:after{content:"";position:absolute;z-index:-1;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 100%)}
/* anillos concéntricos tras el isotipo */
/* Variante con FOTO (elegible en Ajustes → Fontanería Valencia → Fotos):
   la imagen llena el panel y un velo azul abajo garantiza la lectura de las chips */
.why-panel--foto{padding:0}
.why-panel--foto .why-foto{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.why-panel--foto:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,25,42,.05) 40%,rgba(4,25,42,.55) 100%);
  width:auto;height:auto;top:0;left:0;border-radius:0}
.why-panel--foto:after{display:none}
.why-panel .aro{position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%;pointer-events:none}
.why-panel .aro.a1{width:230px;height:230px}
.why-panel .aro.a2{width:320px;height:320px}
.why-panel .aro.a3{width:410px;height:410px;border-color:rgba(255,255,255,.06)}
/* Isotipo a color (turquesa + ojo azul). Antes iba con brightness(0) invert(1),
   que lo aplanaba a una gota blanca maciza y perdía el ojo. */
.why-panel .iso{width:190px;position:relative;z-index:1;filter:drop-shadow(0 12px 34px rgba(4,25,42,.55))}
.why-panel .chip{position:absolute;z-index:2;background:rgba(255,255,255,.97);border-radius:14px;padding:10px 16px;font-weight:700;
  color:var(--azul);font-size:.85rem;box-shadow:var(--sombra-lg);display:flex;gap:9px;align-items:center;
  backdrop-filter:blur(6px);animation:flota 6s ease-in-out infinite}
.why-panel .chip.c1{top:38px;left:30px}
.why-panel .chip.c2{bottom:46px;right:28px;animation-delay:-2s}
.why-panel .chip.c3{bottom:70px;left:34px;animation-delay:-4s}
.why-panel .chip svg{width:18px;height:18px;stroke:var(--turquesa);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.why-list .why-item{display:flex;gap:18px;margin-bottom:26px}
.why-list .why-item:last-child{margin-bottom:0}
.why-list .why-ico{flex:0 0 52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(22,183,193,.14),rgba(95,224,230,.06));border:1px solid rgba(22,183,193,.2);transition:.25s}
.why-list .why-item:hover .why-ico{background:var(--g-turquesa-solido);border-color:transparent;box-shadow:var(--glow)}
.why-list .why-item:hover .why-ico svg{stroke:var(--btn-texto)}
.why-list .why-ico svg{width:24px;height:24px;stroke:var(--turquesa-osc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.why-list h3{margin:.1em 0 .25em;font-size:1.15rem}
.why-list p{margin:0;color:var(--gris)}

/* ---------- Aparición al hacer scroll ----------
   Solo se oculta si el JS ha marcado <html class="js-reveal">. Sin JS, todo
   el contenido se ve igualmente: nunca dejamos la web en blanco. */
.js-reveal [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .section{padding:64px 0}
  /* Las secciones CTA-con-formulario del contenido (BD) llevan la rejilla
     "1fr 1fr" como estilo INLINE, que ninguna media query normal puede
     vencer: de ahí el !important. A una columna en pantallas estrechas. */
  .container[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:28px !important}
  .cards,.steps,.reviews,.trust,.foot-grid{grid-template-columns:1fr 1fr}
  .steps:before{display:none}
  .hero-grid,.why-grid{grid-template-columns:1fr;gap:36px}
  .hero{padding:72px 0 110px}
  main > .hero:first-child{padding-top:calc(var(--h-header, 78px) + 44px)}
  .why-panel{min-height:320px;padding:40px}
}
@media(max-width:720px){
  body{font-size:16px}
  .section{padding:52px 0}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(4,25,42,.97);backdrop-filter:blur(14px);
    flex-direction:column;padding:16px 20px;gap:16px;box-shadow:var(--sombra-lg);border-top:1px solid rgba(22,183,193,.25)}
  .menu.open{display:flex}
  .menu a:after{display:none}
  .nav-toggle{display:block}
  .cards,.steps,.reviews,.trust,.foot-grid{grid-template-columns:1fr}
  .trust{gap:18px}
  .callbar{display:grid}
  .topbar .tb-left{display:none}
  .nav .btn-tel{display:none}
  .brand img,.site-header.scrolled .brand img{height:54px}
  .hero .hero-watermark{display:none}
  .hero .badges span{font-size:.88rem;padding:7px 13px}
  .ctaband{padding:44px 24px}
  .zonas-panel{padding:28px 20px}
  .why-panel .chip.c1{top:20px;left:16px}
  .why-panel .chip.c2{bottom:24px;right:14px}
  .why-panel .chip.c3{display:none}
  .site-footer{padding-bottom:96px}
}

/* ---------- Carrusel de reseñas ---------- */
.reviews-carousel{position:relative;padding:0 6px}
.rc-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.rc-viewport::-webkit-scrollbar{display:none}
.rc-track{display:flex;gap:24px;padding:8px 2px}
.rc-track .review{flex:0 0 calc((100% - 48px)/3);margin:0;scroll-snap-align:start}
.rc-nav{position:absolute;top:calc(50% - 10px);transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--linea);background:#fff;color:var(--azul);font-size:1.7rem;line-height:1;cursor:pointer;
  box-shadow:var(--sombra);display:flex;align-items:center;justify-content:center;transition:.15s}
.rc-nav:hover{background:var(--azul);color:#fff;border-color:transparent;box-shadow:var(--sombra-lg)}
.rc-nav:disabled{opacity:.3;cursor:default;box-shadow:none}
.rc-prev{left:-12px}
.rc-next{right:-12px}
.rc-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
/* zona táctil ≥24px (accesibilidad); el punto visual va en el ::before */
.rc-dots button{width:24px;height:24px;border:0;padding:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.rc-dots button:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--linea);transition:.25s}
.rc-dots button.is-active:before{background:var(--turquesa);width:24px;border-radius:9px}
@media(max-width:900px){.rc-track .review{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:720px){.rc-track .review{flex-basis:calc(100% - 6px)}.rc-prev{left:-6px}.rc-next{right:-6px}.rc-nav{width:42px;height:42px}}

/* Respeta la preferencia de menos movimiento */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js-reveal [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .rc-viewport{scroll-behavior:auto}
}