/* ==========================================================================
   Pinturas Pizarro · Chipiona
   Marca: antracita #2D373D + naranja #FC9804
   ========================================================================== */

:root {
  --ink: #2D373D;
  --ink-deep: #1F272C;
  --ink-soft: #5A646B;
  --ink-mute: #636C72;
  --brand: #FC9804;
  --brand-dark: #E08500;
  --brand-tint: #FFF1DC;
  --sand: #F6F2EA;
  --line: #E6E1D8;
  --line-soft: #ECE6DC;
  --white: #fff;
  --wa: #25D366;
  --wa-ink: #0B3D1F;

  --display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1280px;
  --pad: clamp(20px, 5vw, 72px);
  --radius: 14px;
  --shadow-card: 0 34px 60px -28px rgba(31, 39, 44, .6);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.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;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--brand);
  color: var(--ink-deep); font-weight: 700; padding: 12px 18px; border-radius: 8px; transition: top .2s;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------- Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-weight: 800; font-size: 17px; line-height: 1;
  padding: 17px 26px; border-radius: 10px; border: 1.5px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn .arrow { transition: transform .3s ease; }
.btn:hover .arrow { transform: translateX(5px); }

.btn--primary { background: var(--brand); color: var(--ink-deep); box-shadow: 0 18px 34px -14px rgba(252, 152, 4, .7); }
.btn--primary:hover { background: #FFA51F; color: var(--ink-deep); box-shadow: 0 24px 42px -14px rgba(252, 152, 4, .85); }

.btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, .35); background: transparent; }
.btn--ghost-dark { color: var(--ink); border-color: var(--ink); background: transparent; }

/* WhatsApp: brillo que recorre + verde e icono que saluda al pasar */
.btn--wa::after {
  content: ""; position: absolute; inset-block: 0; left: -80%; width: 45%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .42) 50%, transparent 100%);
  transform: skewX(-20deg); animation: shine 4.2s ease-in-out 2s infinite; pointer-events: none;
}
.btn--wa:hover, .btn--wa:focus-visible {
  background: var(--wa); color: var(--wa-ink); border-color: var(--wa);
  box-shadow: 0 22px 40px -14px rgba(37, 211, 102, .7);
}
.btn--wa:hover .ico-wa { color: var(--wa-ink); animation: wiggle .55s ease; }
.ico-wa { color: var(--wa); transition: color .25s ease; }

@keyframes shine { 0% { left: -80%; } 45%, 100% { left: 130%; } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }

/* -------------------------------------------------------------- Cabecera */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(31, 39, 44, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: padding .3s ease;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
/* El logo tiene ancho FIJO: así no depende del hueco que le deje el menú y no
   puede encogerse. La imagen se escala dentro de ese ancho. */
.header__logo { flex: none; display: block; width: 200px; transition: width .3s ease; }
.header__logo img { width: 100%; height: auto; display: block; }
.header.is-stuck .header__logo { width: 168px; }

.nav { display: flex; gap: 30px; }
.nav a { color: rgba(255, 255, 255, .82); font-weight: 600; font-size: 15px; position: relative; padding-block: 6px; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--brand); transition: width .3s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--white); }
.nav a:hover::after, .nav a:focus-visible::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: 10px; }
.header .btn { font-size: 15px; padding: 12px 20px; }
.header__phone { border-radius: 999px; }

.burger {
  display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25);
  background: transparent; cursor: pointer; padding: 0; align-items: center; justify-content: center;
}
.burger span { display: block; width: 20px; height: 2px; background: #fff; position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; transition: transform .3s ease;
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.menu-movil {
  position: fixed; inset: 0; z-index: 99; background: var(--ink-deep);
  padding: 96px var(--pad) 40px; display: flex; flex-direction: column; gap: 8px;
  transform: translateY(-100%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); overflow-y: auto;
}
.menu-movil.is-open { transform: none; }
.menu-movil a {
  color: #fff; font-family: var(--display); font-size: 26px; font-weight: 700;
  padding-block: 14px; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.menu-movil .btn { margin-top: 20px; }

/* ------------------------------------------------------------------ Hero */
.hero { position: relative; background: var(--ink-deep); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
/* Carrusel: las fotos se superponen y van fundiéndose una en otra */
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero__slide.is-activa { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero__slide img { transform: scale(1.005); transition: transform 9s ease-out; }
  .hero__slide.is-activa img { transform: scale(1.07); }
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(31, 39, 44, .5) 0%, rgba(31, 39, 44, 0) 30%, rgba(31, 39, 44, 0) 62%, rgba(31, 39, 44, .8) 100%),
    linear-gradient(90deg, rgba(31, 39, 44, .98) 0%, rgba(31, 39, 44, .94) 32%, rgba(31, 39, 44, .55) 56%, rgba(31, 39, 44, .05) 100%);
}
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding-block: clamp(56px, 9vw, 104px) clamp(80px, 12vw, 140px); }
.hero__inner > * { max-width: 760px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  color: var(--brand); font-weight: 700; font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: .12em; text-transform: uppercase;
}
.hero__eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 5px rgba(252, 152, 4, .2); flex: none;
}
.hero h1 { font-size: clamp(42px, 7.2vw, 92px); color: #fff; letter-spacing: -.03em; }
.hero h1 .acento { color: var(--brand); display: block; }
.hero__lead { font-size: clamp(16px, 2vw, 20px); color: rgba(255, 255, 255, .8); max-width: 620px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* Sello circular giratorio */
.sello { position: absolute; right: clamp(20px, 5vw, 96px); bottom: clamp(80px, 10vw, 96px); width: clamp(120px, 15vw, 200px); aspect-ratio: 1; animation: flotar 5s ease-in-out 1.2s infinite; }
.sello__anillo { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 18s linear infinite; transform-origin: 50% 50%; }
.sello__centro {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--ink);
  border: 3px solid var(--brand); display: flex; flex-direction: column;
  align-items: center; justify-content: center; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7);
}
.sello__num { font-family: var(--display); font-size: clamp(24px, 3.2vw, 44px); font-weight: 800; line-height: 1; color: #fff; letter-spacing: -.04em; }
.sello__txt { font-size: clamp(8px, 1vw, 10px); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-top: 2px; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* -------------------------------------------------------- Cinta corrida */
.cinta { background: var(--brand); color: var(--ink-deep); overflow: hidden; padding-block: 14px; }
.cinta__track { display: flex; width: max-content; animation: correr 32s linear infinite; }
.cinta:hover .cinta__track, .cinta:focus-within .cinta__track { animation-play-state: paused; }
.cinta__grupo { display: flex; align-items: center; gap: 26px; padding-right: 26px; font-weight: 700; font-size: clamp(12px, 1.6vw, 15px); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cinta__grupo span:not(.punto) { flex: none; }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-deep); flex: none; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------ Franja confianza */
.confianza { background: #fff; border-bottom: 1px solid var(--line); }
.confianza ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; padding-block: 26px; }
.confianza li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.confianza .tick {
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}

/* -------------------------------------------------------------- Secciones */
.seccion { padding-block: clamp(56px, 8vw, 92px); }
.seccion--oscura { background: var(--ink-deep); color: #fff; position: relative; overflow: hidden; }
.seccion--blanca { background: #fff; border-top: 1px solid var(--line); }

.eyebrow { color: var(--brand-dark); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.seccion--oscura .eyebrow { color: var(--brand); }
.seccion h2 { font-size: clamp(30px, 4.4vw, 50px); }
.seccion--oscura h2 { color: #fff; }

.cabecera-seccion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; align-items: end; margin-bottom: 40px; }
.cabecera-seccion > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.cabecera-seccion p { font-size: 17px; color: var(--ink-soft); max-width: 520px; justify-self: end; }
.seccion--oscura .cabecera-seccion p { color: rgba(255, 255, 255, .7); }
.cabecera-seccion--centro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.cabecera-seccion--centro p { justify-self: center; }

/* ------------------------------------------------------------- Servicios */
.servicios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.servicio {
  position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 30px 26px 34px; display: flex; flex-direction: column; gap: 14px;
  min-height: 380px; transition: transform .35s ease, box-shadow .35s ease;
}
.servicio:hover, .servicio:focus-within { transform: translateY(-8px); box-shadow: var(--shadow-card); }
.servicio__foto { position: absolute; inset: 0; opacity: 0; transform: scale(1.1); transition: opacity .45s ease, transform .9s ease; }
.servicio__foto img { width: 100%; height: 100%; object-fit: cover; }
.servicio__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 39, 44, .55) 0%, rgba(31, 39, 44, .93) 100%); }
.servicio:hover .servicio__foto, .servicio:focus-within .servicio__foto { opacity: 1; transform: scale(1); }
.servicio > *:not(.servicio__foto):not(.servicio__barra) { position: relative; z-index: 1; }
.servicio__ico {
  width: 56px; height: 56px; border-radius: var(--radius); background: var(--brand-tint);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .6s ease, background-color .3s ease;
}
.servicio:hover .servicio__ico, .servicio:focus-within .servicio__ico { transform: rotateY(360deg); background: var(--brand); }
.servicio__ico svg { stroke: var(--brand-dark); transition: stroke .3s ease; }
.servicio:hover .servicio__ico svg, .servicio:focus-within .servicio__ico svg { stroke: var(--ink-deep); }
.servicio h3 { font-size: 21px; font-weight: 700; transition: color .3s ease; }
.servicio p { font-size: 15px; color: var(--ink-soft); transition: color .3s ease; }
.servicio__lista { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); transition: color .3s ease; }
.servicio__lista li { display: flex; gap: 8px; align-items: flex-start; }
.servicio__lista li::before { content: "—"; color: var(--brand); flex: none; }
.servicio__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); margin-top: auto; transition: color .3s ease; }
.servicio__link svg { stroke: var(--brand); }
.servicio:hover h3, .servicio:focus-within h3,
.servicio:hover .servicio__link, .servicio:focus-within .servicio__link { color: #fff; }
.servicio:hover p, .servicio:focus-within p,
.servicio:hover .servicio__lista, .servicio:focus-within .servicio__lista { color: rgba(255, 255, 255, .84); }
.servicio__barra { position: absolute; left: 0; bottom: 0; height: 4px; width: 42px; background: var(--brand); transition: width .4s ease; z-index: 1; }
.servicio:hover .servicio__barra, .servicio:focus-within .servicio__barra { width: 100%; }

/* --------------------------------------------------------- Por qué / USP */
.seccion--oscura .deco {
  position: absolute; right: -160px; top: -160px; width: 520px; height: 520px;
  border-radius: 50%; border: 1px dashed rgba(252, 152, 4, .3); pointer-events: none;
}
.usps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.usp {
  border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .3s ease, background-color .3s ease;
}
.usp:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .08); }
.usp__ico {
  width: 52px; height: 52px; border-radius: 12px; background: rgba(252, 152, 4, .15);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .3s ease, transform .55s ease;
}
.usp:hover .usp__ico { background: var(--brand); transform: rotateY(360deg); }
.usp__ico svg { stroke: var(--brand); transition: stroke .3s ease; }
.usp:hover .usp__ico svg { stroke: var(--ink-deep); }
.usp h3 { font-size: 20px; font-weight: 700; color: #fff; }
.usp p { font-size: 15px; color: rgba(255, 255, 255, .68); }

.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 44px; padding-top: 40px; }
.cifra__num { font-family: var(--display); font-size: clamp(40px, 5.6vw, 64px); font-weight: 800; line-height: 1; color: var(--brand); letter-spacing: -.04em; display: block; }
.cifra__txt { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .75); }

/* ----------------------------------------------------------------- Pasos */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.pasos::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 34px; height: 2px;
  background: repeating-linear-gradient(90deg, #D9D3C8 0 8px, transparent 8px 16px);
}
.paso { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; position: relative; }
.paso__num {
  width: 68px; height: 68px; border-radius: 50%; background: var(--ink); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22px; font-weight: 800;
  border: 4px solid var(--sand); transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.paso:hover .paso__num { background: var(--brand); color: var(--ink-deep); transform: scale(1.08); }
.paso h3 { font-size: 21px; font-weight: 700; }
.paso p { font-size: 15px; color: var(--ink-soft); }

/* --------------------------------------------------------------- Galería */
/* Fila flexible en vez de rejilla: todas las tarjetas miden igual y, si la
   última fila queda incompleta, se centra en lugar de dejar un hueco. */
.galeria { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.galeria .trabajo { flex: 0 0 calc((100% - 39px) / 3); margin: 0; }
@media (max-width: 1100px) { .galeria .trabajo { flex-basis: calc((100% - 21px) / 2); } }
.trabajo { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3.4; }
.trabajo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.trabajo:hover img { transform: scale(1.07); }

/* -------------------------------------------------------------- Reseñas */
.resenas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.resena { background: var(--sand); border-radius: var(--radius); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line-soft); }
.estrellas { color: var(--brand); letter-spacing: 2px; font-size: 16px; }
.resena p { font-size: 15px; color: var(--ink-soft); }
.resena__autor { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.resena__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.resena__nombre { font-weight: 700; font-size: 14px; }
.resena__fecha { font-size: 12px; color: var(--ink-mute); }
.nota-google { display: flex; align-items: center; gap: 14px; background: var(--sand); border-radius: 12px; padding: 14px 18px; border: 1px solid var(--line); justify-self: end; }
.nota-google__num { font-family: var(--display); font-size: 30px; font-weight: 800; }

/* ------------------------------------------------------------------- FAQ */
/* align-items: start es lo que evita que, al abrir una pregunta, su compañera
   de fila se estire y deje un hueco vacío debajo del titular. */
.faqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; align-content: start; align-items: start; }
.faq { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; transition: background-color .3s ease, box-shadow .3s ease; }
.faq[open] { box-shadow: 0 18px 34px -24px rgba(31, 39, 44, .5); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 22px; font-family: var(--display); font-size: 17px; font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D373D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 14px; background-repeat: no-repeat; background-position: center;
  transition: transform .3s ease, background-color .3s ease;
}
.faq[open] summary::after { transform: rotate(180deg); background-color: var(--brand); }
.faq__cuerpo { padding: 0 22px 22px; font-size: 15px; color: var(--ink-soft); }

/* -------------------------------------------------------------- Contacto */
.contacto { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }
.contacto__col { display: flex; flex-direction: column; gap: 20px; }
.contacto__lead { font-size: 17px; color: var(--ink-soft); max-width: 480px; }
.canal { display: flex; align-items: center; gap: 14px; background: var(--sand); border-radius: 12px; padding: 16px 18px; color: var(--ink); border: 1.5px solid transparent; transition: transform .25s ease, border-color .25s ease, background-color .25s ease; position: relative; overflow: hidden; }
.canal:hover { transform: translateY(-3px); color: var(--ink); }
.canal__ico { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.canal__ico--tel { background: var(--brand); }
.canal__ico--wa { background: var(--wa); }
.canal__ico--sitio { background: var(--ink); }
.canal__label { font-size: 12px; color: var(--ink-mute); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; display: block; }
.canal__valor { font-family: var(--display); font-size: 21px; font-weight: 800; }
.canal--wa:hover { background: rgba(37, 211, 102, .12); border-color: var(--wa); }
.canal--info { background: transparent; }

.mapa { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #E9EEF1; }
.mapa iframe { display: block; width: 100%; height: 240px; border: 0; }

/* ---------------------------------------------------------- Formulario */
.form-card { background: var(--sand); border-radius: 18px; padding: clamp(22px, 3vw, 34px); border-top: 6px solid var(--brand); box-shadow: 0 40px 70px -40px rgba(45, 55, 61, .4); }
.form-card h3 { font-size: 24px; margin-bottom: 6px; }
.form-card > p { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: 13px; font-weight: 700; color: var(--ink); }
.campo input, .campo select, .campo textarea {
  font-family: var(--body); font-size: 16px; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 15px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #C9C2B6; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(252, 152, 4, .15);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #C0392B; }
.campo__error { font-size: 12.5px; color: #C0392B; font-weight: 600; min-height: 0; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-soft); line-height: 1.45; grid-column: 1 / -1; margin-top: 4px; }
.consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--brand); }
/* Es la acción principal del formulario: ancho completo y más cuerpo */
.form-card .btn { width: 100%; margin-top: 18px; grid-column: 1 / -1; font-size: 18px; padding: 21px 26px; }
.form-nota { text-align: center; font-size: 13px; color: var(--ink-mute); margin-top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-aviso { border-radius: 10px; padding: 14px 16px; font-size: 14px; font-weight: 600; margin-top: 14px; }
.form-aviso--error { background: #FDECEA; color: #A32C1F; border: 1px solid #F5C6C0; }

/* ----------------------------------------------------------- Banda + pie */
.banda-cta { background: var(--brand); padding-block: clamp(40px, 6vw, 60px); }
.banda-cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.banda-cta h2 { font-size: clamp(26px, 3.6vw, 40px); color: var(--ink-deep); }
.banda-cta p { color: rgba(31, 39, 44, .8); font-size: 17px; margin-top: 6px; }
.banda-cta .btn { background: var(--ink-deep); color: #fff; border-color: var(--ink-deep); }

.footer { background: var(--ink-deep); color: rgba(255, 255, 255, .68); padding-block: 52px 26px; }
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer__logo { height: 54px; width: auto; margin-bottom: 14px; }
.footer p { font-size: 15px; max-width: 420px; }
.footer h2 { font-size: 12px; font-family: var(--body); color: var(--brand); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.footer li { margin-bottom: 10px; }
.footer a { color: rgba(255, 255, 255, .8); font-size: 15px; }
.footer a:hover { color: var(--brand); }
.footer__tel { font-family: var(--display); font-size: 20px; font-weight: 800; color: #fff !important; }
.footer__legal {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 34px; padding-top: 20px; font-size: 13px; color: rgba(255, 255, 255, .5);
}
.footer__legal nav { display: flex; gap: 20px; }
.footer__legal a { font-size: 13px; color: rgba(255, 255, 255, .6); }

/* --------------------------------------------------- Contacto persistente */
/* Dos botones de contacto siempre a mano: llamar y WhatsApp */
.flotantes {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.flotante { display: flex; align-items: center; gap: 12px; }
.flotante__lbl {
  background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; padding: 10px 14px;
  border-radius: 10px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); white-space: nowrap;
  opacity: 0; transform: translateX(10px); transition: opacity .3s ease, transform .3s ease;
}
.flotante:hover .flotante__lbl, .flotante:focus-visible .flotante__lbl { opacity: 1; transform: none; }
.flotante__dot {
  position: relative; width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: transform .3s ease;
}
.flotante:hover .flotante__dot { transform: scale(1.08) rotate(-6deg); }
.flotante--wa .flotante__dot { background: var(--wa); color: var(--wa-ink); box-shadow: 0 16px 36px -10px rgba(37, 211, 102, .7), 0 0 0 3px rgba(255, 255, 255, .9); }
.flotante--tel .flotante__dot { background: var(--brand); box-shadow: 0 16px 36px -10px rgba(252, 152, 4, .7), 0 0 0 3px rgba(255, 255, 255, .9); }
.flotante--wa .flotante__dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--wa);
  animation: latido 2.2s ease-out infinite;
}
/* El de teléfono es algo menor: la llamada es la vía secundaria */
.flotante--tel .flotante__dot { width: 54px; height: 54px; }
@keyframes latido { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

.barra-movil { display: none; }

/* ------------------------------------------------------------ Animaciones */
.js .anim { opacity: 0; transform: translateY(28px); }
.js .anim.is-in { opacity: 1; transform: none; transition: opacity .45s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1); }
.js .anim.is-in { transition-delay: var(--d, 0s); }
.js .titulo-linea { display: block; overflow: hidden; }
.js .titulo-linea > span { display: block; transform: translateY(105%); }
.js .titulo-linea.is-in > span { transform: none; transition: transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos::before { display: none; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resenas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto { grid-template-columns: 1fr; }
  .confianza ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__logo, .header.is-stuck .header__logo { width: 150px; }
  .header__phone span { display: none; }
  .header__phone { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .header .btn--primary { display: none; }
  .header__phone { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
  .header__phone svg { width: 22px; height: 22px; flex: none; }
  .btn svg { flex: none; }
  .hero { padding-bottom: 0; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(31, 39, 44, .92) 0%, rgba(31, 39, 44, .8) 38%, rgba(31, 39, 44, .55) 66%, rgba(31, 39, 44, .88) 100%);
  }
  .hero__inner { max-width: none; }
  .hero__cta .btn { flex: 1 1 100%; }
  .sello { position: relative; right: auto; bottom: auto; margin-top: 4px; align-self: flex-start; width: 132px; animation: none; }
  .cabecera-seccion { grid-template-columns: 1fr; }
  .cabecera-seccion p { justify-self: start; }
  .faqs { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .footer__cols { grid-template-columns: 1fr; gap: 28px; }

  /* En móvil: barra fija abajo con Llamar + WhatsApp; se retira el flotante */
  .flotantes { display: none; }
  body { padding-bottom: 78px; }
  .barra-movil {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 95; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(31, 39, 44, .96); backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .barra-movil .btn { width: 100%; font-size: 15px; padding: 15px 12px; }
  .barra-movil .btn--wa { background: var(--wa); color: var(--wa-ink); border-color: var(--wa); animation: pulso 2.6s ease-out infinite; }
  .barra-movil .btn--wa .ico-wa { color: var(--wa-ink); }
}

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
  70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 620px) {
  .servicios { grid-template-columns: 1fr; }
  .usps { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .resenas { grid-template-columns: 1fr; }
  .confianza ul { grid-template-columns: 1fr; gap: 12px; }
  .servicio { min-height: 0; }
  .nota-google { justify-self: start; }
  .banda-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .anim, .js .titulo-linea > span { opacity: 1; transform: none; }
}

/* Títulos de columna del pie (no son encabezados de contenido) */
.footer__tit { font-size: 12px; color: var(--brand); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }

/* Dato aún no facilitado por el cliente: se ve que es un hueco, no un dato real */
[data-pendiente] { opacity: 1; color: #B98A3D; }
.aviso-preview {
  position: fixed; left: 50%; bottom: 12px; translate: -50% 0; z-index: 120;
  background: #2D373D; color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); max-width: calc(100% - 32px); text-align: center;
}
@media (max-width: 900px) { .aviso-preview { bottom: 90px; } }

/* Páginas legales / gracias */
.pagina-simple { background: var(--sand); min-height: 100vh; }
.pagina-simple .contenido { max-width: 820px; margin: 0 auto; padding: clamp(40px, 8vw, 90px) var(--pad); }
.pagina-simple h1 { font-size: clamp(30px, 5vw, 46px); margin-bottom: 20px; }
.pagina-simple h2 { font-size: 22px; margin: 32px 0 10px; }
.pagina-simple p, .pagina-simple li { color: var(--ink-soft); margin-bottom: 12px; }
.pagina-simple ul { list-style: disc; padding-left: 22px; }
.pendiente-legal { background: #FFF4E0; border: 1px dashed var(--brand); border-radius: 10px; padding: 14px 16px; color: var(--ink); font-weight: 600; }

/* Mapa bajo demanda: no se carga Google (ni sus cookies) hasta que se pide */
.mapa--espera { display: grid; place-items: center; min-height: 200px;
  background: repeating-linear-gradient(45deg, #EDF1F3 0 12px, #E6ECEF 12px 24px); }
.mapa__cargar { display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 12px; padding: 16px 20px; cursor: pointer; font-family: var(--body); font-size: 14px;
  color: var(--ink); text-align: left; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.mapa__cargar:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 14px 30px -16px rgba(45,55,61,.5); }
.mapa__cargar small { color: var(--ink-mute); }

/* ---------------------------------------------- Dispositivos táctiles
   En móvil no hay ratón: los efectos de "pasar por encima" se quedarían
   pegados tras el primer toque, así que se desactivan. */
@media (hover: none) {
  .servicio__foto { display: none; }
  .servicio:hover, .servicio:focus-within,
  .usp:hover, .paso:hover .paso__num, .btn:hover { transform: none; }
  .servicio:hover, .servicio:focus-within { box-shadow: none; }
  .servicio:hover .servicio__ico, .servicio:focus-within .servicio__ico,
  .usp:hover .usp__ico { transform: none; background: var(--brand-tint); }
  .usp:hover .usp__ico { background: rgba(252, 152, 4, .15); }
  .usp:hover .usp__ico svg { stroke: var(--brand); }
  .servicio:hover .servicio__ico svg, .servicio:focus-within .servicio__ico svg { stroke: var(--brand-dark); }
  .servicio:hover h3, .servicio:focus-within h3 { color: var(--ink); }
  .servicio:hover p, .servicio:focus-within p,
  .servicio:hover .servicio__lista, .servicio:focus-within .servicio__lista { color: var(--ink-soft); }
  .servicio:hover .servicio__link, .servicio:focus-within .servicio__link { color: var(--ink); }
  .servicio:hover .servicio__barra, .servicio:focus-within .servicio__barra { width: 42px; }
  .flotante__lbl { display: none; }
}

@media (max-width: 900px) {
  .seccion--oscura .deco { display: none; }
}

/* ------------------------------------------- Galería: carrusel en móvil
   En pantallas pequeñas la rejilla deja las fotos demasiado chicas, así que
   se convierte en un carrusel a pantalla casi completa que va rotando. */
@media (max-width: 900px) {
  .galeria {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); padding-bottom: 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .galeria::-webkit-scrollbar { display: none; }
  .trabajo { flex: 0 0 84%; scroll-snap-align: center; aspect-ratio: 4 / 3.1; }

  /* El botón mide 30px (área táctil accesible) aunque el punto se vea pequeño */
  .galeria-puntos { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
  .galeria-puntos button {
    width: 30px; height: 30px; padding: 0; border: 0; background: none;
    display: grid; place-items: center; cursor: pointer;
  }
  .galeria-puntos button::before {
    content: ""; width: 8px; height: 8px; border-radius: 99px; background: #D9D3C8;
    transition: width .3s ease, background-color .3s ease;
  }
  .galeria-puntos button[aria-current="true"]::before { width: 24px; background: var(--brand); }
}
@media (min-width: 901px) { .galeria-puntos { display: none; } }

/* ------------------------------------ Cabecera en pantallas intermedias
   Entre el escritorio ancho y la vista móvil la barra se apretaba y partía
   los textos en dos líneas; aquí se compacta de forma progresiva. */
.nav a, .header .btn { white-space: nowrap; }

@media (max-width: 1400px) {
  .header__logo { width: 176px; }
  .header.is-stuck .header__logo { width: 152px; }
  .nav { gap: 22px; }
  .nav a { font-size: 14px; }
  .header .btn { font-size: 14px; padding: 11px 16px; }
  .header__inner { gap: 16px; }
}
@media (max-width: 1240px) {
  .header .btn--primary { display: none; }   /* basta con el botón de WhatsApp */
  .nav { gap: 16px; }
}

/* ============================================================== Ampliación
   Al pulsar una foto de la galería se abre a pantalla completa.
   Se cierra pulsando en cualquier sitio, con la X o con Escape. */
.visor {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 4vmin;
  background: rgba(20, 26, 30, .94); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s ease;
}
.visor.is-open { display: flex; }
.visor.is-visible { opacity: 1; }
.visor__figura { margin: 0; position: relative; max-width: min(1100px, 92vw); max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px; }
.visor__figura img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: 10px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); background: #1F272C;
  transform: scale(.94); opacity: 0; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.visor.is-visible .visor__figura img { transform: none; opacity: 1; }
.visor__pie { color: #fff; font-weight: 600; font-size: 15px; text-align: center; }
.visor__pie small { display: block; color: rgba(255, 255, 255, .55); font-weight: 500; margin-top: 4px; }

.visor__cerrar, .visor__nav {
  position: absolute; z-index: 2; display: grid; place-items: center; cursor: pointer;
  width: 52px; height: 52px; border: 0; border-radius: 50%; padding: 0;
  background: rgba(255, 255, 255, .12); color: #fff;
  transition: background-color .25s ease, transform .25s ease;
}
.visor__cerrar:hover, .visor__nav:hover { background: var(--brand); color: var(--ink-deep); transform: scale(1.08); }
.visor__cerrar { top: 3vmin; right: 3vmin; position: fixed; }
.visor__nav { top: 50%; translate: 0 -50%; position: fixed; }
.visor__nav--prev { left: 3vmin; }
.visor__nav--next { right: 3vmin; }

/* La foto ampliada no debe cerrarse al pulsarla, solo el fondo */
.visor__figura { cursor: default; }
.trabajo { cursor: zoom-in; }
.trabajo__lupa {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(31, 39, 44, .6); display: grid; place-items: center; pointer-events: none;
  opacity: 0; transform: scale(.85); transition: opacity .3s ease, transform .3s ease;
}
.trabajo:hover .trabajo__lupa, .trabajo:focus-within .trabajo__lupa { opacity: 1; transform: none; }
body.visor-abierto { overflow: hidden; }

@media (max-width: 900px) {
  .visor__cerrar, .visor__nav { width: 46px; height: 46px; }
  .visor__nav { top: auto; bottom: 4vmin; translate: none; }
  .visor__nav--prev { left: 22%; } .visor__nav--next { right: 22%; }
  .visor__figura img { max-height: 68vh; }
  .trabajo__lupa { opacity: 1; transform: none; }   /* en táctil, siempre visible */
}

/* ------------------------------------------------------- Contraste de texto
   El naranja de marca (#FC9804) es perfecto sobre fondo oscuro y como relleno
   de botones, pero como TEXTO PEQUEÑO sobre el fondo claro se queda en 2,5:1,
   por debajo del mínimo legible (4,5:1). Para esos casos se usa una versión
   tostada del mismo tono, que llega a 4,9:1 y sigue leyéndose como el naranja
   de la marca. */
:root { --brand-texto: #9C5800; }

.eyebrow,
.servicio__lista li::before,
a:not(.btn):not(.canal):not(.nav a):not(.footer a):not(.trabajo):not(.menu-movil a):not(.zona) { color: var(--brand-texto); }
a:not(.btn):not(.canal):hover { color: #7E4700; }

/* Sobre fondo oscuro el naranja vivo tiene contraste de sobra: se mantiene */
.seccion--oscura .eyebrow, .footer a:hover { color: var(--brand); }

/* Un enlace dentro de un texto no puede distinguirse solo por el color */
.consent a, .pagina-simple a, .form-nota a { text-decoration: underline; text-underline-offset: 2px; }

/* La foto del hero es apaisada 16:9: se le da al bloque una altura acorde
   para que se recorte lo mínimo y se vea a su resolución real. */
@media (min-width: 901px) {
  .hero__inner { padding-block: clamp(64px, 8vw, 96px) clamp(72px, 9vw, 110px); }
  .hero__media img { object-position: 55% 42%; }
}

/* Aviso sobre los testimonios de ejemplo (se retira al poner los reales) */
.resenas__aviso {
  background: #FFF4E0; border: 1px dashed var(--brand); border-radius: 10px;
  padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 18px; text-align: center;
}

/* Canal de correo en la sección de contacto */
.canal__ico--mail { background: var(--ink); }

/* ------------------------------------------- Bloques de servicio con foto */


/* ============================== Bloques de servicio (pintura / impermeabilización)
   Patrón: el titular ocupa todo el ancho y, debajo, el texto a un lado y la
   foto al otro. El segundo bloque invierte el lado de la foto. */
.detalles .wrap { display: flex; flex-direction: column; gap: clamp(52px, 7vw, 96px); }
.detalle { scroll-margin-top: 100px; }
.detalle .eyebrow { display: block; margin-bottom: 10px; }
.detalle__titulo { font-size: clamp(28px, 3.8vw, 44px); margin-bottom: clamp(22px, 3vw, 34px); max-width: 20ch; }
.detalle__cuerpo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); align-items: center; }
.detalle__foto { order: -1; }   /* la foto va siempre a la izquierda; el texto, a la derecha */
.detalle__texto { display: flex; flex-direction: column; gap: 18px; }
.detalle__texto > p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.detalle__lista { display: flex; flex-direction: column; gap: 12px; }
.detalle__lista li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.detalle__lista li strong { color: var(--ink); }
.detalle__lista li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E08500' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.detalle__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.detalle__cta .btn { font-size: 16px; padding: 15px 22px; }
.detalle__foto { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 34px 60px -34px rgba(31, 39, 44, .55); }
.detalle__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .8s ease; }
.detalle__foto:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .detalle__cuerpo { grid-template-columns: 1fr; }
  /* En vertical la foto sube justo debajo del titular: rompe el bloque de
     texto y se ve antes de empezar a leer. */
  .detalle__foto { order: -1; }
  .detalle__titulo { max-width: none; }
  .detalle__cta .btn { flex: 1 1 100%; }
}

/* ==================================================== Banner de CookieYes
   CookieYes pinta el banner con estilos incrustados, así que hay que forzar
   los nuestros con !important. Se convierte la caja en una BARRA a todo el
   ancho, con los colores de la marca. */
.cky-consent-container {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; max-width: none !important; margin: 0 !important; z-index: 2147483000 !important;
}
.cky-consent-bar {
  background: var(--ink-deep) !important; color: #fff !important;
  border: 0 !important; border-top: 3px solid var(--brand) !important; border-radius: 0 !important;
  box-shadow: 0 -18px 40px -22px rgba(0, 0, 0, .6) !important;
  padding: 18px clamp(20px, 5vw, 72px) !important;
  font-family: var(--body) !important;
}
.cky-notice-content-wrapper { max-width: var(--wrap); margin: 0 auto; }
.cky-notice { display: flex !important; align-items: center !important; gap: 22px !important; flex-wrap: wrap; }
.cky-title {
  font-family: var(--display) !important; font-size: 16px !important; font-weight: 700 !important;
  color: #fff !important; margin: 0 !important; flex: none; white-space: nowrap;
}
.cky-notice-group { display: flex !important; flex: 1 1 520px; align-items: center !important; gap: 22px !important; justify-content: space-between; }
.cky-notice-des { flex: 1 1 320px; margin: 0 !important; }
.cky-notice-des, .cky-notice-des p { color: rgba(255, 255, 255, .78) !important; font-size: 13.5px !important; line-height: 1.5 !important; }
.cky-notice-des a, .cky-consent-bar a { color: var(--brand) !important; }
.cky-notice-btn-wrapper { flex: none; display: flex !important; gap: 10px !important; flex-wrap: wrap; margin: 0 !important; }

.cky-btn {
  font-family: var(--body) !important; font-weight: 700 !important; font-size: 14px !important;
  border-radius: 8px !important; padding: 12px 18px !important; margin: 0 !important; line-height: 1 !important;
  transition: transform .2s ease, background-color .2s ease !important;
}
.cky-btn:hover { transform: translateY(-2px); }
.cky-btn-accept { background: var(--brand) !important; color: var(--ink-deep) !important; border: 1.5px solid var(--brand) !important; }
.cky-btn-accept:hover { background: #FFA51F !important; }
/* Los tres botones iguales: en un banner de cookies rechazar no debe
   verse menos que aceptar */
.cky-btn-reject, .cky-btn-customize {
  background: var(--brand) !important; color: var(--ink-deep) !important;
  border: 1.5px solid var(--brand) !important;
}
.cky-btn-reject:hover, .cky-btn-customize:hover { background: #FFA51F !important; border-color: #FFA51F !important; }

/* "Powered by CookieYes" (plan gratuito): discreto, no se puede ocultar */
.cky-consent-bar > div:not(.cky-notice-content-wrapper) { font-size: 11px; opacity: .6; text-align: right; margin-top: 6px; }
.cky-consent-bar > div:not(.cky-notice-content-wrapper) a { color: #fff !important; }

/* Icono flotante para volver a abrir las preferencias */
.cky-btn-revisit-wrapper { background: var(--ink) !important; border: 2px solid var(--brand) !important; }

/* Ventana de preferencias ("Personalizar") */
.cky-preference-center, .cky-modal .cky-preference { font-family: var(--body) !important; border-radius: 16px !important; }
.cky-preference-title, .cky-preference-header .cky-preference-title { font-family: var(--display) !important; color: var(--ink) !important; }
.cky-modal .cky-btn-accept { background: var(--brand) !important; color: var(--ink-deep) !important; border-color: var(--brand) !important; }
.cky-modal .cky-btn-reject, .cky-modal .cky-btn-preferences { background: var(--brand) !important; color: var(--ink-deep) !important; border-color: var(--brand) !important; }
.cky-switch input:checked + .cky-dummy-label, .cky-switch input:checked ~ span { background: var(--brand) !important; }

@media (max-width: 900px) {
  /* En móvil la barra se coloca encima de los botones fijos de Llamar / WhatsApp */
  .cky-consent-container { bottom: 78px !important; }
  .cky-consent-bar { padding: 14px 16px !important; }
  .cky-notice, .cky-notice-group { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  .cky-title { white-space: normal; }
  .cky-notice-btn-wrapper { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cky-btn { padding: 12px 8px !important; font-size: 13px !important; text-align: center; }
}

/* Barra de cookies, ajuste fino: título sobre el texto a la izquierda y los
   botones a la derecha, en una sola franja baja. */
.cky-notice {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo botones" "texto botones";
  column-gap: 32px !important; row-gap: 4px !important; align-items: center !important;
}
.cky-notice-group { display: contents !important; }
.cky-title { grid-area: titulo; }
.cky-notice-des { grid-area: texto; flex: none !important; max-width: 760px; }
.cky-notice-des, .cky-notice-des p { font-size: 13px !important; line-height: 1.45 !important; }
.cky-notice-btn-wrapper { grid-area: botones; align-self: center; }
.cky-consent-bar { padding: 14px clamp(20px, 5vw, 72px) 10px !important; }
.cky-consent-bar > div:not(.cky-notice-content-wrapper) { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; opacity: .5; }
.cky-consent-bar > div:not(.cky-notice-content-wrapper) img,
.cky-consent-bar > div:not(.cky-notice-content-wrapper) svg { max-height: 12px !important; width: auto !important; }
.cky-consent-bar > div:not(.cky-notice-content-wrapper) * { font-size: 11px !important; }

@media (max-width: 900px) {
  .cky-notice { grid-template-columns: 1fr; grid-template-areas: "titulo" "texto" "botones"; row-gap: 8px !important; }
}

/* Barra de cookies: quitar los rellenos internos de CookieYes y meter el
   "powered by" en la esquina, para que la franja quede baja */
.cky-consent-bar { position: relative !important; padding: 16px clamp(20px, 5vw, 72px) 18px !important; }
.cky-notice, .cky-notice-content-wrapper, .cky-title, .cky-notice-des, .cky-notice-btn-wrapper { padding: 0 !important; }
.cky-consent-bar > div[style*="padding-bottom"] { position: absolute; right: 12px; bottom: 2px; padding: 0 !important; margin: 0 !important; opacity: .45; }
[data-cky-tag="powered-by"] { background: transparent !important; padding: 0 !important; }
[data-cky-tag="powered-by"] svg, [data-cky-tag="powered-by"] img { max-height: 10px !important; }
@media (max-width: 900px) { .cky-consent-bar > div[style*="padding-bottom"] { position: static; justify-content: flex-end; margin-top: 6px !important; } }

/* Ventana de preferencias: los restos azules de CookieYes pasan a la marca */
.cky-show-desc-btn, .cky-show-more-btn { color: var(--brand-texto) !important; }
.cky-preference-center .cky-btn-close, .cky-preference-center .cky-btn-close img, .cky-preference-center .cky-btn-close svg { border-color: var(--ink) !important; }
.cky-preference-center .cky-btn-close { border: 1.5px solid var(--ink) !important; border-radius: 8px !important; }
.cky-always-active { color: #1E8A4C !important; }

/* ============================================== Ajustes de la pasada responsive
   Revisado a 360, 390, 768, 1024, 1150, 1300 y 1440 px. */

/* Tablets: las 3 reseñas y las 3 columnas del pie se mantienen en 3 columnas
   hasta los 900 px (a 2 columnas quedaba una tarjeta huérfana) */
@media (min-width: 701px) and (max-width: 1100px) {
  .resenas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .resena { padding: 22px 18px; }
  .resena p { font-size: 14px; }
}
@media (max-width: 700px) {
  .resenas { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .footer__cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
}

/* Texto mínimo legible en móvil */
@media (max-width: 900px) {
  .hero__eyebrow { font-size: 12px; }
}

/* Ventana de preferencias de cookies: nunca más ancha que la pantalla */
.cky-preference-center { max-width: calc(100vw - 24px) !important; }



/* ------------------------------------------------- Dónde trabajamos (zonas)
   Bloque de enlaces entre la portada y las páginas por municipio: le dice al
   visitante que también vamos a su pueblo y le da a Google el camino para
   encontrar esas páginas. */
.zonas__intro { max-width: 64ch; margin: 0 auto 24px; text-align: center; color: var(--ink-soft); }
.zonas__lista { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.zona {
  display: inline-block; padding: 11px 21px; border-radius: 999px; font-weight: 600; font-size: 15px;
  background: var(--sand); border: 1.5px solid rgba(45, 55, 61, .12); color: var(--ink) !important;
  text-decoration: none; transition: border-color .25s ease, transform .25s ease, background-color .25s ease;
}
a.zona:hover, a.zona:focus-visible { border-color: var(--brand); transform: translateY(-2px); }
.zona--actual { background: var(--ink-deep); border-color: var(--ink-deep); color: #fff !important; }

/* El pie gana una cuarta columna con esas mismas zonas */
.footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { .footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .footer__cols { grid-template-columns: 1fr; } }
.footer__cols nav[aria-labelledby="pie-zonas"] span[aria-current] { color: rgba(255, 255, 255, .55); font-size: 15px; }

/* En móvil la galería vuelve a ser carrusel: una foto por pantalla y a deslizar.
   Estas dos reglas deshacen las de arriba (fila flexible que se reparte en tres
   columnas y se envuelve), que tienen más peso por llevar .galeria delante. */
@media (max-width: 900px) {
  .galeria { flex-wrap: nowrap; justify-content: flex-start; }
  .galeria .trabajo { flex: 0 0 84%; }
}

/* Preguntas frecuentes: que las tarjetas cerradas midan igual aunque el
   enunciado ocupe una línea o dos, para que la rejilla no se descuadre. */
.faq summary { min-height: 94px; align-items: center; }
@media (max-width: 900px) { .faq summary { min-height: 86px; } }
@media (max-width: 620px) { .faq summary { min-height: 0; } }

/* ------------------------------------------- Contacto: sin desborde en móvil
   El correo "info@pinturaspizarro.com" es una sola palabra que no se parte, y
   como los hijos de una rejilla nacen con min-width:auto, la columna crecía
   hasta 386 px en una pantalla de 390 y la página entera pasaba a 406: barra
   inferior y formulario cortados por la derecha en cualquier móvil. Se deja
   que la columna encoja y que el correo pueda partirse si no cabe. */
.contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
@media (max-width: 1100px) { .contacto { grid-template-columns: minmax(0, 1fr); } }
.contacto > * { min-width: 0; }
.canal > span:last-child { min-width: 0; }
.canal__valor { overflow-wrap: anywhere; }
@media (max-width: 520px) { .canal__valor { font-size: clamp(13px, 4.4vw, 21px); } }

/* ------------------------------------------ Flotantes también en móvil
   En vez de la barra fija de abajo (que tapaba 78 px de pantalla en todas las
   páginas), en móvil se usan los mismos dos botones redondos de escritorio,
   abajo a la derecha. Si la barra de cookies está a la vista, main.js deja su
   altura en --banner-alto y los botones suben por encima de ella. */
.flotantes { bottom: calc(26px + var(--banner-alto, 0px)); transition: bottom .3s ease; }
@media (max-width: 900px) {
  .barra-movil { display: none; }
  body { padding-bottom: 0; }
  .flotantes { display: flex; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom) + var(--banner-alto, 0px)); gap: 12px; }
  .flotante__dot { width: 58px; height: 58px; }
  .flotante--tel .flotante__dot { width: 50px; height: 50px; }
  .flotante__lbl { display: none; }
  .cky-consent-container { bottom: 0 !important; }
}

/* ------------------------------------------- Antes y después (comparativa)
   Dos fotos del mismo tipo de trabajo, una al lado de la otra y con su
   etiqueta encima. En móvil se apilan. */
.comparativa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.comparativa__item { position: relative; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 34px 60px -34px rgba(31, 39, 44, .55); }
.comparativa__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.comparativa__etiqueta {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: var(--ink-deep); color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px;
}
.comparativa__item--final .comparativa__etiqueta { background: var(--brand); color: var(--ink-deep); }
.comparativa__pie { max-width: 70ch; margin: 22px auto 0; text-align: center; color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; }
@media (max-width: 700px) { .comparativa { grid-template-columns: 1fr; gap: 16px; } }

/* --------------------------------- Bloque largo con la foto a la misma altura
   En la landing de impermeabilizaciones el texto es más largo que en el resto
   (lista de puntos + llamada a la acción) y la foto, con su proporción fija,
   dejaba un hueco debajo. Con esto la foto acompaña la altura del texto.
   Solo en escritorio: en móvil el bloque es de una columna. */
@media (min-width: 901px) {
  .detalle--alto .detalle__cuerpo { align-items: stretch; }
  .detalle--alto .detalle__foto img { height: 100%; aspect-ratio: auto; min-height: 100%; }
}
/* Las superficies van a lo ancho, debajo del bloque, no dentro de la columna */
.superficies__intro { max-width: 64ch; margin: 34px auto 16px; text-align: center; color: var(--ink-soft); font-size: 16px; }

/* Titular de portada con una palabra muy larga ("Impermeabilización"): el
   contenedor de la animación recorta lo que sobresale, así que aquí el texto
   tiene que caber sí o sí. Tamaño algo menor que el de las demás páginas. */
.hero--titulo-largo h1 { font-size: clamp(32px, 5.4vw, 70px); }