/*
  Premium v3 — landing minimalista (dirección de diseño alternativa).
  Aditivo: se carga después de design-system.css, reutiliza sus tokens
  de marca (--c-primary, --c-accent) y añade una capa más contenida,
  con más aire, menos color de relleno y menos elementos por pantalla.
*/

:root {
  --v3-paper: #fcfcfa;
  --v3-paper-alt: #f6f5f1;
  --v3-ink: #10141a;
  --v3-ink-2: #565f6b;
  --v3-ink-3: #8b93a0;
  --v3-line: #e7e5df;
  --v3-primary: var(--c-primary);
  --v3-accent: var(--c-accent);
  --v3-radius: 4px;
  --v3-ease: cubic-bezier(.16, 1, .3, 1);
}

.v3 { background: var(--v3-paper); color: var(--v3-ink); }

.v3 ::selection { background: var(--v3-primary); color: #fff; }

/* ---------------------------------------------------------------
   Reveal-on-scroll: oculto hasta que .is-visible se añade por JS.
   Sin JS, o con prefers-reduced-motion, el contenido es visible igual.
---------------------------------------------------------------- */
.v3-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--v3-ease), transform .8s var(--v3-ease);
}
.v3-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .v3-reveal { opacity: 1; transform: none; transition: none; }
}
.no-js .v3-reveal { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   Barra superior de contacto (teléfono, email, dirección, redes)
   Visible solo en tablet/escritorio para no robar espacio en móvil;
   forma parte del .site-header fijo, así que se mantiene al hacer scroll.
---------------------------------------------------------------- */
.topbar {
  display: none;
  background: var(--c-primary-900);
  color: rgba(255,255,255,.92);
}
@media (min-width: 992px) {
  .topbar { display: block; }
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .5rem 0;
  font-family: var(--font-body);
  font-size: .75rem;
}
.topbar__contact { display: flex; align-items: center; gap: 1.5rem; }
.topbar__contact a, .topbar__contact span {
  display: inline-flex; align-items: center; gap: .4rem;
  color: inherit; text-decoration: none; opacity: .92;
  transition: opacity .2s ease;
}
.topbar__contact a:hover { opacity: 1; text-decoration: underline; }
.topbar__contact i { font-size: .9rem; opacity: .85; }
.topbar__socials { display: flex; align-items: center; gap: .85rem; }
.topbar__socials a { color: inherit; opacity: .85; font-size: .95rem; transition: opacity .2s ease; }
.topbar__socials a:hover { opacity: 1; }

/* Banner de CTA suelto justo debajo del header fijo (páginas con hero-v3
   que no llevan .breadcrumb-trail) — necesita el mismo colchón que
   .breadcrumb-trail para no quedar tapado por el header fijo. */
.hero-cta-banner {
  text-align: center;
  padding: calc(64px + var(--sp-4)) var(--sp-5) 0;
  position: relative;
  z-index: 5;
}
@media (min-width: 992px) {
  .hero-cta-banner { padding-top: calc(64px + 34px + var(--sp-4)); }
}

/* Logotipo real en imagen (sustituye la marca de texto solo donde se aplique
   la clase .brand-mark--logo, p.ej. la portada) — mantiene proporción original. */
.brand-mark--logo { display: flex; align-items: center; }
.brand-mark__img {
  height: 52px;
  width: auto;
  display: block;
}
@media (min-width: 992px) {
  .brand-mark__img { height: 68px; }
}

/* ---------------------------------------------------------------
   Header — versión más contenida sobre el header existente
---------------------------------------------------------------- */
.v3 .site-header { padding: 1.6rem 0; }
.v3 .site-header.is-scrolled { padding: 1rem 0; }
.v3 .brand-mark__eyebrow { letter-spacing: .22em; font-size: .58rem; }
.v3 .site-nav__links a { font-size: .875rem; letter-spacing: .01em; }
.v3 .site-nav__whatsapp { font-weight: 600; }
.v3 .lang-select { display: none !important; }

/* ---------------------------------------------------------------
   Hero
---------------------------------------------------------------- */
.hero-v3 {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0b1520 center / cover no-repeat;
}
.hero-v3__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.hero-v3__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,14,24,.35) 0%, rgba(6,14,24,.12) 38%, rgba(6,14,24,.62) 100%);
}
.hero-v3__content {
  position: relative;
  width: 100%;
  padding: 0 0 5.5rem;
  color: #fff;
}
.hero-v3__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 1.6rem;
}
.hero-v3__eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--v3-accent);
}
.hero-v3__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.01em;
  max-width: 16ch;
  text-wrap: balance;
  margin: 0 0 1.5rem;
}
.hero-v3__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  max-width: 34ch;
  margin: 0 0 2.6rem;
}
.hero-v3__actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }

.btn-v3 {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  padding: .95rem 1.9rem;
  border-radius: var(--v3-radius);
  background: #fff;
  color: var(--v3-ink);
  text-decoration: none !important;
  transition: transform .35s var(--v3-ease), background-color .35s var(--v3-ease), color .35s var(--v3-ease);
}
.btn-v3:hover { background: var(--v3-accent); color: #fff; transform: translateY(-2px); }
.btn-v3:active { transform: translateY(0); }
.btn-v3 svg { width: 16px; height: 16px; transition: transform .35s var(--v3-ease); }
.btn-v3:hover svg { transform: translateX(3px); }

.link-v3 {
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,.4);
  transition: border-color .3s var(--v3-ease), opacity .3s var(--v3-ease);
}
.link-v3:hover { border-color: #fff; }

.hero-v3__scroll {
  position: absolute;
  right: 2.5rem; bottom: 2.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: rgba(255,255,255,.7);
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: .85;
}
.hero-v3__scroll::after {
  content: "";
  width: 1px; height: 42px;
  background: rgba(255,255,255,.5);
  animation: v3scroll 2.2s var(--v3-ease) infinite;
}
@keyframes v3scroll {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.001% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 767px) {
  .hero-v3__scroll { display: none; }
  .hero-v3__content { padding-bottom: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v3__scroll::after { animation: none; }
}

/* ---------------------------------------------------------------
   Franja de confianza minimal (texto plano, sin iconos en pills)
---------------------------------------------------------------- */
.trust-v3 {
  border-bottom: 1px solid var(--v3-line);
  padding: 1.6rem 0;
}
.trust-v3__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 3rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
}

/* ---------------------------------------------------------------
   Secciones generales: espaciado amplio, encabezados sobrios
---------------------------------------------------------------- */
.section-v3 { padding: clamp(4.5rem, 8vw, 8rem) 0; }
.section-v3--alt { background: var(--v3-paper-alt); }

.head-v3 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--v3-line);
}
.head-v3__eyebrow {
  grid-column: span 4;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v3-accent);
}
.head-v3__title {
  grid-column: span 8;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--v3-ink);
  margin: 0;
  text-wrap: balance;
}
.head-v3__note {
  grid-column: 5 / span 8;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--v3-ink-2);
  margin: .9rem 0 0;
  max-width: 46ch;
}
@media (max-width: 767px) {
  .head-v3__eyebrow, .head-v3__title, .head-v3__note { grid-column: 1 / -1; }
}
/* Variante apilada para contenedores estrechos (ej. cabeceras de formulario a max-width:760px),
   donde el layout eyebrow-izquierda/título-derecha a 12 columnas queda demasiado apretado. */
.head-v3--stack .head-v3__eyebrow,
.head-v3--stack .head-v3__title,
.head-v3--stack .head-v3__note { grid-column: 1 / -1; }
.head-v3--stack { text-align: center; }
.head-v3--stack .head-v3__note { margin-left: auto; margin-right: auto; }

/* Pilares (reemplaza el trust-bar tipo pill por texto + regla) */
.pillars-v3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
@media (max-width: 767px) { .pillars-v3 { grid-template-columns: 1fr; gap: 2.5rem; } }
.pillar-v3 { padding-top: 1.5rem; border-top: 1px solid var(--v3-line); }
.pillar-v3__index {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  color: var(--v3-ink-3);
  letter-spacing: .08em;
}
.pillar-v3 h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--v3-ink);
  margin: 1rem 0 .65rem;
}
.pillar-v3 p { font-family: var(--font-body); color: var(--v3-ink-2); line-height: 1.7; margin: 0; font-size: .9375rem; }

/* ---------------------------------------------------------------
   Servicios — grid de tarjetas minimal (sin sombra pesada)
---------------------------------------------------------------- */
.services-v3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5px;
  background: var(--v3-line);
  border: 1px solid var(--v3-line);
}
.services-v3--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .services-v3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .services-v3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Tabla de precios minimal (piscinasdeobra.html)
---------------------------------------------------------------- */
.pricing-v3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--v3-line);
  border-left: 1px solid var(--v3-line);
}
@media (max-width: 991px) { .pricing-v3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .pricing-v3 { grid-template-columns: 1fr; } }
.pricing-v3__card {
  padding: 2.2rem 1.8rem;
  border-right: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
  text-align: center;
  position: relative;
}
.pricing-v3__card--highlight { background: var(--v3-paper-alt); }
.pricing-v3__card--highlight::before {
  content: "Más elegida";
  position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body); font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--v3-accent);
}
.pricing-v3__size { font-family: var(--font-body); font-size: .8125rem; color: var(--v3-ink-3); text-transform: uppercase; letter-spacing: .06em; margin: 1.4rem 0 .3rem; }
.pricing-v3__amount { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 2.6vw, 2.2rem); color: var(--v3-ink); }
.pricing-v3__amount span { font-family: var(--font-body); font-size: .875rem; font-weight: 600; color: var(--v3-ink-3); }
.pricing-v3__vat { font-family: var(--font-body); font-size: .75rem; color: var(--v3-ink-3); margin: .2rem 0 1.4rem; }
.pricing-v3 .btn-v3 { width: 100%; justify-content: center; padding: .75rem 1rem; font-size: .8125rem; }

.service-v3 {
  background: var(--v3-paper);
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
  overflow: hidden;
}
.service-v3__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--v3-paper-alt); }
.service-v3__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--v3-ease), filter .8s var(--v3-ease);
  filter: saturate(.94);
}
.service-v3:hover .service-v3__media img { transform: scale(1.045); filter: saturate(1.05); }
.service-v3__body { padding: 1.6rem 1.5rem 1.8rem; }
.service-v3__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--v3-ink);
  margin: 0 0 .55rem;
}
.service-v3__body p { font-family: var(--font-body); font-size: .875rem; color: var(--v3-ink-2); line-height: 1.65; margin: 0 0 1rem; }
.service-v3__link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-body); font-size: .8125rem; font-weight: 700;
  letter-spacing: .02em; color: var(--v3-ink);
}
.service-v3__link svg { width: 13px; height: 13px; transition: transform .3s var(--v3-ease); }
.service-v3:hover .service-v3__link svg { transform: translateX(3px); }

/* ---------------------------------------------------------------
   Showcase de proyectos — foto real infinity + copy corto
---------------------------------------------------------------- */
.proof-v3 { position: relative; overflow: hidden; }
.proof-v3__media { position: relative; aspect-ratio: 21/10; }
.proof-v3__media img { width: 100%; height: 100%; object-fit: cover; }
.proof-v3__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,16,26,.72) 0%, rgba(8,16,26,.15) 62%); }
.proof-v3__content {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  color: #fff;
}
.proof-v3__content .container { max-width: 560px; }
.proof-v3__content h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.15; margin: 0 0 1rem; text-wrap: balance;
}
.proof-v3__content p { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.86); margin: 0 0 1.8rem; }
@media (max-width: 767px) {
  .proof-v3__media { aspect-ratio: 3/4; }
  .proof-v3__scrim { background: linear-gradient(180deg, rgba(8,16,26,.3) 20%, rgba(8,16,26,.82) 100%); }
  .proof-v3__content { align-items: flex-end; padding-bottom: 3rem; }
}

/* Tira de galería real, 4 fotos */
.gallery-v3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5px;
  background: var(--v3-line);
  margin-top: 1.5px;
}
@media (max-width: 767px) { .gallery-v3 { grid-template-columns: repeat(2, 1fr); } }
.gallery-v3 a { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--v3-ink); }
.gallery-v3 img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--v3-ease); }
.gallery-v3 a:hover img { transform: scale(1.06); }

/* ---------------------------------------------------------------
   CTA final + newsletter, minimal
---------------------------------------------------------------- */
.cta-v3 { padding: clamp(4.5rem, 9vw, 7.5rem) 0; text-align: center; }
.cta-v3 h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  color: var(--v3-ink); margin: 0 0 1rem; text-wrap: balance;
}
.cta-v3 p { font-family: var(--font-body); color: var(--v3-ink-2); font-size: 1.0625rem; max-width: 46ch; margin: 0 auto 2.2rem; }
.cta-v3__actions { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.btn-v3--dark { background: var(--v3-ink); color: #fff; }
.btn-v3--dark:hover { background: var(--v3-accent); }
.btn-v3--outline { background: transparent; color: var(--v3-ink); border: 1px solid var(--v3-line); }
.btn-v3--outline:hover { background: var(--v3-ink); color: #fff; border-color: var(--v3-ink); }

/* ---------------------------------------------------------------
   Footer minimal
---------------------------------------------------------------- */
.footer-v3 { border-top: 1px solid var(--v3-line); padding: 3rem 0 2.2rem; }
.footer-v3__row {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 2rem;
  font-family: var(--font-body);
}
.footer-v3__brand { font-family: var(--font-display); font-size: 1.05rem; color: var(--v3-ink); margin-bottom: .5rem; }
.footer-v3__col p { color: var(--v3-ink-2); font-size: .875rem; line-height: 1.8; margin: 0; }
.footer-v3__col a { color: var(--v3-ink-2); text-decoration: none; }
.footer-v3__col a:hover { color: var(--v3-ink); }
.footer-v3__col h3 {
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--v3-ink-3); margin: 0 0 .8rem;
}
.footer-v3__bottom {
  margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--v3-line);
  font-family: var(--font-body); font-size: .75rem; color: var(--v3-ink-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}

.newsletter-v3 { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 460px; margin: 0 auto; }
.newsletter-v3 > input[type="email"] {
  flex: 1; min-width: 0; border: 1px solid var(--v3-line); border-radius: var(--v3-radius);
  padding: .85rem 1rem; font-family: var(--font-body); font-size: .9375rem;
  background: var(--v3-paper);
}
.newsletter-v3 > input[type="email"]:focus { outline: 2px solid var(--v3-primary); outline-offset: 1px; }
.newsletter-v3 button {
  border: 0; border-radius: var(--v3-radius); padding: 0 1.4rem;
  background: var(--v3-ink); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .9375rem;
  cursor: pointer; transition: background-color .3s var(--v3-ease);
}
.newsletter-v3 button:hover { background: var(--v3-accent); }
.newsletter-v3__consent {
  flex: 0 0 100%; margin: .25rem 0 0; text-align: left;
}
.newsletter-v3__consent input { flex: none; min-width: auto; }
.newsletter-v3__consent label { color: var(--v3-ink-2); }
.newsletter-v3__consent a { color: var(--v3-primary); text-decoration: underline; }

/* ---------------------------------------------------------------
   Hero réplica (portada) — banner más corto (no 100vh), degradado
   claro a la izquierda para legibilidad del texto oscuro, ola
   decorativa inferior, insignias de confianza.
---------------------------------------------------------------- */
.hero-replica {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  background: #0b1520;
}
@media (max-width: 767px) { .hero-replica { min-height: 560px; } }
.hero-replica__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 38% 55%;
}
@media (max-width: 767px) {
  /* En pantallas estrechas, object-fit:cover recorta los laterales del
     encuadre panorámico; desplazamos el foco para que la piscina y el
     atardecer/mar sigan siendo visibles junto con parte de la vivienda. */
  .hero-replica__img { object-position: 32% 50%; }
}
.hero-replica__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 32%, rgba(255,255,255,.18) 58%, rgba(255,255,255,0) 75%);
}
@media (max-width: 767px) {
  .hero-replica__scrim { background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,.96) 100%); }
  /* .hero-replica--local: piscinas-torrevieja / piscinas-orihuela-costa /
     piscinas-pilar-de-la-horadada. El velo blanco de arriba (hasta 96% de
     opacidad) deja la foto de la piscina infinity casi invisible en móvil
     -- confirmado por revisión visual humana. Se aclara SOLO para estas 3
     páginas (clase marcador en su <section class="hero-replica">, no
     presente en index.html ni en reformas-integrales.html, que conservan
     el velo original sin cambios) para que la piscina se aprecie con
     claridad sin perder legibilidad del texto oscuro que va encima. */
  .hero-replica--local .hero-replica__scrim { background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.5) 55%, rgba(255,255,255,.68) 100%); }
  /* .hero-replica--pilar-scrim: SOLO piscinas-pilar-de-la-horadada.html.
     El velo general de --local (arriba) sigue dejando una mancha blanca
     dominante en la mitad izquierda de esta foto en concreto -- no es un
     fallo de la regla compartida (confirmado ocultando el scrim: la foto
     en crudo está bien expuesta), sino que la zona bajo el bloque de
     texto en ESTA fotografía es un muro de piedra claro/beige, que con la
     misma opacidad blanca que ya funciona bien sobre el agua azul turquesa
     de Torrevieja/Orihuela Costa se lava mucho más. Se aclara un poco más
     el degradado, pero SOLO para esta página (clase extra en su
     <section>, no tocar --local para no afectar a Torrevieja/Orihuela). */
  .hero-replica--pilar-scrim .hero-replica__scrim { background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.28) 55%, rgba(255,255,255,.46) 100%); }
}
.hero-replica__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 7rem 0 5rem;
}
.hero-replica__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: .8rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--v3-accent);
  margin-bottom: .9rem;
}
.hero-replica__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.01em;
  color: var(--v3-primary, var(--c-primary));
  max-width: 14ch; text-wrap: balance;
  margin: 0 0 1.1rem;
}
.hero-replica__rule { width: 74px; height: 4px; background: var(--v3-accent); border-radius: 2px; margin: 0 0 1.2rem; }
.hero-replica__subtitle {
  font-family: var(--font-body); font-size: 1.15rem; line-height: 1.6;
  color: var(--v3-ink-2); max-width: 40ch; margin: 0 0 2.2rem;
}
.hero-replica__subtitle strong { color: var(--v3-accent); font-weight: 800; }
.hero-replica__actions { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.btn-replica {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-size: .95rem; font-weight: 700;
  padding: 1rem 1.9rem; border-radius: 10px;
  background: var(--v3-accent); color: #fff; text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(193,39,45,.28);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn-replica:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(193,39,45,.36); background: var(--v3-accent-700, #96181d); }
.btn-replica--outline {
  background: #fff; color: var(--v3-primary, var(--c-primary));
  border: 1.5px solid var(--v3-line); box-shadow: 0 6px 16px rgba(11,21,32,.08);
}
.btn-replica--outline:hover { border-color: var(--v3-primary, var(--c-primary)); box-shadow: 0 10px 22px rgba(11,21,32,.12); }

@media (max-width: 767px) {
  /* .btn-replica no tenía ninguna regla móvil: el flex item se encogía
     por debajo de su ancho de contenido (min-width:auto por defecto en
     flexbox) antes de pasar a la siguiente línea de flex-wrap, forzando
     el texto "Solicitar presupuesto" a partirse en dos líneas dentro del
     padding pensado para una sola línea de escritorio -- de ahí el botón
     desproporcionadamente alto. Mismo patrón ya usado en .btn-cta/
     .hero-premium__actions para este mismo problema. */
  .hero-replica__actions { flex-direction: column; width: 100%; }
  .btn-replica { width: 100%; justify-content: center; }
  /* .btn-replica svg (la flecha) nunca ha tenido tamaño fijado en ningún
     breakpoint -- a diferencia de .btn-v3 svg (16x16) y el resto de iconos
     del sitio, aquí el SVG sin width/height explícitos toma un tamaño
     intrínseco grande (~65px en escritorio, más aún en el botón a ancho
     completo de móvil), inflando la altura del botón mucho más allá del
     texto. En escritorio el botón ya es así hoy (no se toca, referencia
     aprobada); esta regla corrige el tamaño SOLO en móvil, donde el botón
     a ancho completo hacía el problema mucho más visible y provocaba que
     el CTA invadiera la zona del botón fijo de WhatsApp. */
  .btn-replica svg { width: 16px; height: 16px; flex-shrink: 0; }
  /* .hero-replica--safe-cta: index.html, piscinas-torrevieja, piscinas-
     orihuela-costa, piscinas-pilar-de-la-horadada. El botón flotante de
     WhatsApp se "levanta" (.pp-lifted) para no tapar el aviso de cookies
     mientras éste sigue visible, y esa altura de aviso varía según cómo
     envuelve su texto en cada ancho móvil -- por eso la franja vertical
     que ocupa no es predecible ancho a ancho ni perseguible con un empuje
     fijo (comprobado: un desplazamiento que libera el hueco en un ancho
     concreto crea un solape nuevo en otro). El mismo patrón ya verificado
     en reformas-integrales.html evita el eje vertical por completo: en
     vez de perseguir el hueco, los botones dejan de ocupar todo el ancho
     (width:100% más arriba) y vuelven a su ancho de contenido, alineados
     a la izquierda, de forma que su borde derecho nunca llega a la
     esquina inferior derecha (WhatsApp es fixed, right:22px, width:58px)
     en ningún ancho ni altura. max-width dejamos un margen de seguridad
     adicional frente a variaciones de fuente. Solo afecta a las páginas
     con esta clase; el resto conserva el botón a ancho completo. */
  .hero-replica--safe-cta .hero-replica__actions { flex-direction: row; flex-wrap: wrap; width: auto; }
  .hero-replica--safe-cta .btn-replica { width: auto; max-width: calc(100% - 96px); }
}

.hero-replica__badges { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.hero-replica__badge { display: flex; align-items: center; gap: .7rem; max-width: 190px; }
.hero-replica__badge svg { width: 30px; height: 30px; color: var(--v3-primary, var(--c-primary)); flex-shrink: 0; }
.hero-replica__badge span {
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  color: var(--v3-ink); line-height: 1.3;
}

.hero-replica__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 3; }
.hero-replica__wave svg { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------
   Franja de servicios con iconos (6 columnas)
---------------------------------------------------------------- */
.services-icons { padding: clamp(3.5rem, 6vw, 5rem) 0; background: #fff; }
.services-icons__grid {
  /* minmax(0,1fr) en vez de 1fr a secas: sin el mínimo explícito en 0, un
     track de grid no se encoge por debajo del contenido intrínseco de su
     item -- con una traducción más larga que el español (p.ej. neerlandés
     "Uitgebreide hervormingen") eso empuja el grid entero fuera de la
     pantalla en móvil en vez de partir el texto en varias líneas. */
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.75rem;
}
@media (max-width: 991px) { .services-icons__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .services-icons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.services-icons__item { text-align: center; }
.services-icons__icon {
  width: 62px; height: 62px; margin: 0 auto .9rem;
  display: flex; align-items: center; justify-content: center;
}
.services-icons__icon svg { width: 40px; height: 40px; color: var(--v3-primary, var(--c-primary)); }
.services-icons__item h3 {
  font-family: var(--font-body); font-weight: 800; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--v3-ink);
  margin: 0 0 .55rem;
}
.services-icons__item p {
  font-family: var(--font-body); font-size: .8rem; color: var(--v3-ink-2);
  line-height: 1.55; margin: 0 0 .7rem; min-height: 3.3em;
}
.services-icons__link {
  font-family: var(--font-body); font-size: .75rem; font-weight: 800;
  color: var(--v3-accent); text-decoration: none; letter-spacing: .02em;
}
.services-icons__link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   Sobre nosotros — foto + barra de info bicolor
---------------------------------------------------------------- */
.about-v3 { padding: clamp(3.5rem, 6vw, 5.5rem) 0; background: var(--v3-paper-alt); }
.about-v3__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .about-v3__grid { grid-template-columns: 1fr; } }
.about-v3__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--v3-accent);
  margin-bottom: .8rem;
}
.about-v3__eyebrow::before { content:""; width: 24px; height: 3px; background: var(--v3-accent); border-radius: 2px; }
.about-v3 h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--v3-primary, var(--c-primary)); margin: 0 0 1.1rem; line-height: 1.18;
}
.about-v3 p { font-family: var(--font-body); color: var(--v3-ink-2); line-height: 1.75; margin: 0 0 1.1rem; }
.about-v3__pillars { display: flex; gap: 1.8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.about-v3__pillar { display: flex; align-items: flex-start; gap: .7rem; max-width: 200px; }
.about-v3__pillar svg { width: 28px; height: 28px; color: var(--v3-accent); flex-shrink: 0; margin-top: .1rem; }
.about-v3__pillar h3 { font-family: var(--font-body); font-size: .85rem; font-weight: 800; color: var(--v3-ink); margin: 0 0 .2rem; }
.about-v3__pillar p { font-family: var(--font-body); font-size: .78rem; color: var(--v3-ink-2); margin: 0; line-height: 1.5; }

.about-v3__media { border-radius: 14px; overflow: hidden; box-shadow: 0 20px 46px rgba(11,21,32,.16); }
.about-v3__photo { aspect-ratio: 4/3; overflow: hidden; }
.about-v3__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-v3__infobar { display: grid; grid-template-columns: 1fr 1fr; }
.about-v3__infobar-item {
  display: flex; align-items: center; gap: .65rem;
  padding: 1rem 1.2rem; font-family: var(--font-body); font-size: .8rem; font-weight: 700;
}
.about-v3__infobar-item--accent { background: var(--v3-accent); color: #fff; }
.about-v3__infobar-item--dark { background: var(--v3-ink); color: #fff; }
.about-v3__infobar-item svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .9; }

/* ---------------------------------------------------------------
   Banner CTA claro con icono
---------------------------------------------------------------- */
.cta-banner-v3 {
  background: var(--v3-paper); border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line);
  padding: 2rem 0;
}
.cta-banner-v3__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cta-banner-v3__left { display: flex; align-items: center; gap: 1.1rem; }
.cta-banner-v3__icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--v3-primary-100, #e8f1fb);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cta-banner-v3__icon svg { width: 26px; height: 26px; color: var(--v3-primary, var(--c-primary)); }
.cta-banner-v3__left h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--v3-ink); margin: 0 0 .2rem; }
.cta-banner-v3__left p { font-family: var(--font-body); font-size: .85rem; color: var(--v3-ink-2); margin: 0; }

/* ---------------------------------------------------------------
   Zonas de trabajo (contacto.html)
---------------------------------------------------------------- */
.zones-v3 { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.zones-v3__item {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: .875rem; font-weight: 600;
  color: var(--v3-ink); padding: .6rem 1.1rem;
  border: 1px solid var(--v3-line); border-radius: var(--v3-radius);
}
.zones-v3__item svg { width: 14px; height: 14px; color: var(--v3-accent); flex-shrink: 0; }

/* ---------------------------------------------------------------
   Galería de proyectos premium (piscinasdeobra.html#portfolio)
   Reskin del wrapper Isotope/Magnific Popup existente — no se tocan
   .projects-wrapper / #filter[data-filter] / .mfp-image (JS intocable).
---------------------------------------------------------------- */
.portfolio-v3 { padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); background: var(--v3-paper); }
.portfolio-v3__head { border-bottom: none; margin-bottom: clamp(2rem, 4vw, 3rem); }

.portfolio-v3__filter-row { display: flex; justify-content: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.portfolio-v3__filter {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem 2.2rem;
  list-style: none; margin: 0; padding: 0;
}
.portfolio-v3__filter a {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  cursor: pointer;
  padding-bottom: .4rem;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--v3-ease), border-color .3s var(--v3-ease);
}
.portfolio-v3__filter a:hover { color: var(--v3-ink); }
.portfolio-v3__filter a.active { color: var(--v3-ink); border-color: var(--v3-accent); }

.portfolio-v3__container { padding: 0 clamp(.4rem, 1.6vw, 1.1rem); overflow-x: hidden; }
/* overflow-x:hidden solo recorta el margen negativo invisible de Bootstrap (.row),
   no el contenido: las imagenes y controles de la galeria quedan igual, solo se
   evita el scroll horizontal que ese margen provocaba en movil/tablet. No se toca
   .projects-wrapper (selector usado por Isotope/Magnific Popup, JS intocable). */

/* Gutter vía padding (técnica clásica de Isotope: el ancho que Isotope
   lee incluye el padding gracias a box-sizing:border-box, así que el
   masonry/fitRows sigue funcionando igual, solo que ahora con aire real
   entre fotos en vez de ir pegadas borde con borde). */
.portfolio-v3 .img-max-width {
  /* 24.9% en vez de 25%: evita que el redondeo de subpíxel de Isotope
     sume una fracción de más y fuerce un salto de línea prematuro a 3
     columnas en vez de 4. */
  width: 24.9%;
  padding: 10px;
  box-sizing: border-box;
}
@media (max-width: 991px) { .portfolio-v3 .img-max-width { width: 49.9%; } }
@media (max-width: 575px) { .portfolio-v3 .img-max-width { width: 100%; padding: 8px; } }

.portfolio-v3 .item-box {
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 1px 3px rgba(16,20,26,.09);
}
.portfolio-v3 .item-box a { display: block; width: 100%; height: 100%; }
.portfolio-v3 .item-container {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}
.portfolio-v3 .item-box:hover .item-container {
  transform: scale(1.06);
  transition: transform 1.1s var(--v3-ease);
}
.portfolio-v3 .item-mask {
  background: linear-gradient(180deg, rgba(10,16,26,0) 45%, rgba(10,16,26,.5) 100%);
}
.portfolio-v3 .item-mask::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: rgba(255,255,255,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310141a' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M14.5 14.5L20 20' stroke-linecap='round'/%3E%3C/svg%3E") center / 17px no-repeat;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s var(--v3-ease), transform .3s var(--v3-ease);
}
.portfolio-v3 .item-box:hover .item-mask::after { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .portfolio-v3 .item-box:hover .item-container { transform: none; }
}