/* Quintana Reformas. Colores del logotipo: granate, negro y gris, sobre fondo claro.
   Lector principal: móvil y personas mayores → letra grande, contraste alto, botones grandes. */

:root {
  --fondo: #FAFAF8;
  --blanco: #FFFFFF;
  --gris-fondo: #EFEEEB;
  --gris-linea: #D6D4CF;
  --gris: #8A8782;
  --texto: #151515;
  --texto-suave: #4A4845;
  --granate: #9B1C24;
  --granate-oscuro: #7A141B;
  --granate-tenue: #F7E9EA;
  --rojo: #C42A33;
  --negro: #0C0C0D;
  --oscuro: #151515;
  --oscuro-2: #232220;
  --oscuro-linea: #3A3835;
  --claro: #F3F2EF;
  --claro-suave: #C9C6C0;
  --rojo-claro: #F08A8F;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radio: 16px;
  --radio-boton: 10px;
  --franja: 0px;
  --ancho: 72rem;
  --sombra: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .08);
  --sombra-alta: 0 2px 4px rgb(0 0 0 / .06), 0 18px 40px rgb(0 0 0 / .14);
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.1875rem;
  line-height: 1.6;
  padding-bottom: 5rem; /* sitio para el botón flotante de WhatsApp en el móvil */
  overflow-x: clip; /* los halos y zooms animados nunca abren scroll lateral (clip no rompe el sticky) */
}
@media (min-width: 768px) { body { font-size: 1.25rem; padding-bottom: 0; } }

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0 0 .6em; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.5rem); }
p { margin: 0 0 1em; }

a { color: var(--granate); text-underline-offset: .18em; }
a:hover { color: var(--granate-oscuro); }
:focus-visible { outline: 3px solid var(--granate); outline-offset: 3px; }
.seccion--oscura :focus-visible, .pie :focus-visible { outline-color: var(--rojo-claro); }

.icono { width: 1.35em; height: 1.35em; flex: none; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .contenedor { padding-inline: 2rem; } }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--oscuro); color: #fff; padding: .75rem 1rem; border-radius: var(--radio-boton); }
.saltar:focus { top: 1rem; color: #fff; }

/* Tamaños mínimos para personas mayores: letra de 18 px (1.125rem) y zonas de pulsación de 48 px (3rem) */
.franja { background: #FFE9A8; color: #3A2E00; text-align: center; font-size: 1.125rem; font-weight: 700; padding: .35rem 1rem; }

/* ---------- Botones ---------- */

.botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
/* Píldoras con brillo: degradado, reflejo arriba (inset) y halo del propio color */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .55rem 1.3rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: 1.125rem; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.boton .icono { width: 1.15em; height: 1.15em; }
.boton--principal {
  background: linear-gradient(180deg, #C42A33 0%, var(--granate) 55%, #8A1820 100%);
  border-color: #8A1820; color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 1px 2px rgb(122 20 27 / .3), 0 8px 20px -6px rgb(155 28 36 / .6);
}
.boton--principal:hover {
  background: linear-gradient(180deg, #CF343D 0%, #A61F27 55%, #8E1A22 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 1px 2px rgb(122 20 27 / .3), 0 12px 28px -6px rgb(155 28 36 / .7);
}
.boton--secundario {
  background: rgb(255 255 255 / .8); color: var(--texto); border-color: var(--gris-linea);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(0 0 0 / .05), 0 6px 16px -8px rgb(0 0 0 / .25);
}
.boton--secundario:hover { background: #fff; color: var(--granate); border-color: var(--granate); }
.boton--claro {
  background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
}
.boton--claro:hover { background: #fff; color: var(--texto); border-color: #fff; }
@media (max-width: 479px) {
  .botones .boton { width: 100%; padding-inline: .9rem; }
  /* Los botones de la portada quedan a la altura del WhatsApp flotante: se les deja su hueco */
  .portada .botones { padding-right: 4.5rem; }
}

.enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; min-height: 3rem; font-weight: 700; }
.enlace-flecha .icono { width: 1.1em; height: 1.1em; transition: transform .2s; }
.enlace-flecha:hover .icono { transform: translateX(3px); }
.mas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }

/* ---------- Barra superior y cabecera ---------- */

/* Selector de idioma: interruptor pequeño ES | EN dentro de la cabecera blanca */
.idioma { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--gris-linea); border-radius: 999px; background: var(--gris-fondo); }
.idioma a {
  display: grid; place-items: center; min-width: 3rem; min-height: 3rem; padding: 0 .5rem; border-radius: 999px;
  color: var(--texto-suave); font-size: 1.125rem; font-weight: 800; letter-spacing: .04em; text-decoration: none;
  transition: background .2s, color .2s;
}
.idioma a:hover { color: var(--granate); }
.idioma a[aria-current] { background: var(--oscuro); color: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.idioma--movil { margin-left: auto; }
@media (max-width: 1359px) { .idioma--escritorio { display: none; } }
@media (min-width: 1360px) { .idioma--movil { display: none; } }

.cabecera { position: sticky; top: 0; z-index: 100; background: var(--blanco); border-bottom: 1px solid var(--gris-linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.75rem; padding-block: .5rem; }
/* La cabecera es algo más ancha que el contenido: el menú completo y el selector de idioma caben en una línea */
.cabecera > .contenedor { max-width: 84rem; }

/* Logotipo del cliente (fondo blanco, igual que la cabecera) */
.marca { display: block; flex: none; border-radius: 6px; }
.marca img { height: 3.25rem; width: auto; }
@media (min-width: 768px) { .marca img { height: 4.25rem; } }

.menu-boton {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .5rem 1rem;
  border: 2px solid var(--texto); border-radius: var(--radio-boton); background: none; color: var(--texto);
  font: inherit; font-weight: 700; cursor: pointer;
}
/* Móviles estrechos: logo, ES | EN y «Menú» tienen que caber en una fila */
@media (max-width: 400px) {
  .cabecera__fila { gap: .5rem; }
  .cabecera > .contenedor { padding-inline: 1rem; }
  .menu-boton { padding: .5rem .7rem; }
}
/* Por debajo de 350 px la palabra «Menú» se oculta a la vista (los lectores de pantalla la siguen leyendo) */
@media (max-width: 349px) {
  .marca img { height: 2.75rem; }
  .menu-boton__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.navegacion ul { list-style: none; margin: 0; padding: 0; }
.navegacion a, .navegacion summary { color: var(--texto); text-decoration: none; font-weight: 600; cursor: pointer; }
.navegacion .navegacion__cta { color: #fff; }
.navegacion a[aria-current="page"] { color: var(--granate); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .35em; }
.navegacion summary { list-style: none; display: flex; align-items: center; gap: .4rem; }
.navegacion summary::-webkit-details-marker { display: none; }
.navegacion summary::after { content: ""; width: .5em; height: .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.15em) rotate(45deg); transition: transform .2s; }
.navegacion details[open] summary::after { transform: translateY(.1em) rotate(-135deg); }
.navegacion details[data-actual] summary { color: var(--granate); }

/* Móvil: menú desplegable a pantalla completa debajo de la cabecera */
@media (max-width: 1359px) {
  .js .navegacion { display: none; }
  .js .cabecera.menu-abierto .navegacion { display: block; }
  .navegacion {
    position: absolute; inset: 100% 0 auto; max-height: calc(100vh - 7rem); overflow-y: auto;
    background: var(--blanco); border-bottom: 1px solid var(--gris-linea); box-shadow: var(--sombra);
    padding: .5rem 1.25rem 1.5rem;
  }
  .navegacion > ul > li { border-bottom: 1px solid var(--gris-linea); }
  .navegacion > ul > li > a, .navegacion summary { display: flex; padding: 1rem 0; font-size: 1.2rem; }
  .navegacion details ul { padding: 0 0 .75rem 1rem; }
  .navegacion details a { display: flex; align-items: center; min-height: 3rem; padding: .4rem 0; }
  .navegacion__cta { width: 100%; margin-top: 1.25rem; }
  html:not(.js) .menu-boton { display: none; }
  html:not(.js) .navegacion { position: static; box-shadow: none; }
}

@media (min-width: 1360px) {
  .menu-boton { display: none; }
  .navegacion { display: flex; align-items: center; gap: 1.1rem; }
  .navegacion > ul { display: flex; align-items: center; gap: 1rem; font-size: 1rem; white-space: nowrap; }
  .navegacion > ul > li > a, .navegacion summary { display: flex; align-items: center; min-height: 3rem; }
  .otros-menu { position: relative; }
  .otros-menu details ul {
    position: absolute; top: calc(100% + .9rem); left: -1rem; min-width: 17rem;
    background: var(--blanco); border: 1px solid var(--gris-linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: .5rem;
  }
  .otros-menu details a { display: flex; align-items: center; min-height: 3rem; padding: .4rem .9rem; border-radius: 8px; }
  .otros-menu details a:hover { background: var(--gris-fondo); }
  .navegacion__cta { min-height: 3rem; padding: .45rem 1.1rem; font-size: 1rem; white-space: nowrap; }
}

/* ---------- Secciones ---------- */

.seccion { padding-block: 4rem; }
@media (min-width: 768px) { .seccion { padding-block: 5.5rem; } }
.seccion--gris { background: var(--gris-fondo); }
.seccion--oscura { background: var(--oscuro); color: var(--claro); }
.seccion--oscura a:not(.boton) { color: var(--rojo-claro); }

.cabecera-seccion { max-width: 46rem; margin-bottom: 2.25rem; }
.antetitulo { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; color: var(--granate); font-size: 1.125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.antetitulo::before { content: ""; flex: none; width: 2rem; height: 3px; border-radius: 2px; background: currentColor; }
.seccion--oscura .antetitulo { color: var(--rojo-claro); }
.entradilla { font-size: 1.15em; color: var(--texto-suave); }
.seccion--oscura .entradilla { color: var(--claro-suave); }
.ayuda { color: var(--texto-suave); font-size: 1.125rem; }

/* ---------- Portada (cabecera de cada página): oscura, con fotos de fondo ---------- */

.portada {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: 3rem 3.5rem; background: var(--negro); color: #fff;
}
.portada > .contenedor { position: relative; z-index: 2; }
/* Filo rojo abajo: separa la portada oscura del contenido claro */
.portada::after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--granate) 0%, var(--rojo) 40%, transparent 100%);
}
.portada--fotos { min-height: 26rem; display: grid; align-items: center; }
@media (min-width: 900px) {
  .portada { padding-block: 5rem 5.5rem; }
  .portada--fotos { min-height: 32rem; }
  .portada--grande { min-height: calc(100svh - 4.75rem); }
}
.portada__texto { max-width: 46rem; }
.portada--grande .portada__texto { max-width: 42rem; }
.portada--grande h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem); }
.portada h1 { color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.portada .entradilla { color: rgb(255 255 255 / .88); }
.portada .antetitulo { color: var(--rojo-claro); }
.portada .migas, .portada .migas a { color: rgb(255 255 255 / .75); }
.portada .lista-check li { color: #fff; }
.portada .lista-check .icono { color: var(--rojo-claro); }
.portada :focus-visible { outline-color: var(--rojo-claro); }
.portada__texto p a { color: var(--rojo-claro); }

/* Cifras bajo la portada */
.cifras { background: var(--negro); color: var(--claro); }
.cifras__lista { list-style: none; margin: 0 auto; display: grid; gap: 1.5rem; padding-block: 2.25rem; }
@media (min-width: 640px) { .cifras__lista { grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1.25rem; } }
@media (min-width: 900px) { .cifras__lista { padding-block: 2.75rem; } }
.cifras li { display: grid; align-content: start; gap: .2rem; border-left: 3px solid var(--granate); padding-left: 1rem; }
.cifras strong { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); font-weight: 900; line-height: 1.05; color: #fff; }
.cifras span { color: var(--claro-suave); font-size: 1.125rem; line-height: 1.35; }

.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; margin-bottom: .75rem; font-size: 1.125rem; color: var(--texto-suave); }
.migas a { display: inline-flex; align-items: center; min-height: 3rem; min-width: 3rem; color: var(--texto-suave); }

.lista-check { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.lista-check li { display: flex; gap: .65rem; align-items: flex-start; font-weight: 600; }
.lista-check .icono { color: var(--granate); margin-top: .15em; }
.lista-check--grande li { font-weight: 500; }

/* Servicios: «Cuándo conviene» en dos columnas y bloque de zona */
.cuando { margin-top: 1.5rem; gap: .9rem 2.5rem; }
@media (min-width: 900px) { .cuando { grid-template-columns: 1fr 1fr; } }
.cuando a, .zona a, .dos-columnas--texto a, .paso a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: var(--granate); }
.seccion--oscura .paso a { text-decoration-color: var(--rojo-claro); }
.zona { max-width: 48rem; margin-bottom: 3rem; padding-left: 1.5rem; border-left: 5px solid var(--granate); }
.zona h2 { margin-top: 0; }
.zona .entradilla { margin-bottom: 0; }

/* ---------- Tarjetas y rejillas ---------- */

.rejilla { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
.tarjeta { background: var(--blanco); border: 1px solid var(--gris-linea); border-radius: var(--radio); overflow: hidden; }
.tarjeta__foto { overflow: hidden; }
.tarjeta img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tarjeta__cuerpo { padding: 1.25rem 1.5rem 1.5rem; }
.tarjeta__cuerpo p { margin: 0; color: var(--texto-suave); }

.dos-columnas { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.dos-columnas--texto { gap: 0 2.5rem; margin-bottom: 2rem; }
@media (min-width: 900px) { .dos-columnas--texto { grid-template-columns: 1fr 1fr; } }

.nota { background: var(--granate-tenue); border-left: 5px solid var(--granate); border-radius: var(--radio); padding: 1.5rem 1.75rem; }
.nota ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.nota-equipo { margin-top: 1.75rem; padding: 1rem 1.25rem; background: var(--gris-fondo); border-radius: var(--radio); font-weight: 600; }

/* Servicios */
.servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .servicios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .servicios { grid-template-columns: repeat(3, 1fr); } }
.servicios li { display: flex; }
.servicio {
  display: flex; flex-direction: column; width: 100%; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--gris-linea); border-radius: var(--radio);
  color: var(--texto); text-decoration: none;
}
.servicio:hover { color: var(--texto); border-color: var(--gris); }
.servicio__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gris-fondo); }
.servicio__foto img { width: 100%; height: 100%; object-fit: cover; }
.servicio__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.5rem 1.5rem; }
.servicio h3 { margin-bottom: .4rem; }
.servicio p { color: var(--texto-suave); flex: 1; }
.servicio .enlace-flecha { color: var(--granate); }
.servicio--destacado { background: var(--granate); border-color: var(--granate); color: #fff; }
.servicio--destacado:hover { color: #fff; border-color: var(--granate-oscuro); }
.servicio--destacado p, .servicio--destacado .enlace-flecha { color: #fff; }
@media (min-width: 1000px) {
  .servicios li:first-child { grid-column: 1 / -1; }
  .servicio--destacado { flex-direction: row; }
  .servicio--destacado .servicio__foto { aspect-ratio: auto; flex: 1.3; }
  .servicio--destacado .servicio__cuerpo { flex: 1; justify-content: center; padding: 2rem; }
  .servicio--destacado h3 { font-size: 1.9rem; }
}

/* Pasos: una línea con un punto por paso, sin números (el orden ya lo da la lista) */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; }
.paso { position: relative; padding: 0 0 2rem 2.5rem; }
.paso::before { content: ""; position: absolute; left: .55rem; top: 1.6rem; bottom: .25rem; width: 2px; margin-left: -1px; background: linear-gradient(var(--granate), var(--oscuro-linea)); }
.paso:last-child::before { display: none; }
.paso__punto {
  position: absolute; left: 0; top: .45rem; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--granate);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--granate) 25%, transparent);
}
.paso p { margin: 0; color: var(--claro-suave); }
@media (min-width: 1100px) {
  .pasos { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .paso { padding: 2.5rem 0 0; }
  .paso::before { left: 1.6rem; right: -2rem; top: .55rem; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; background: linear-gradient(90deg, var(--granate), var(--oscuro-linea)); }
  .paso__punto { top: 0; }
}

/* Por qué: filas de texto separadas por una línea, sin tarjetas ni iconos */
.razones { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--gris-linea); }
.razon { display: grid; gap: .35rem; padding-block: 1.35rem; border-bottom: 1px solid var(--gris-linea); }
.razon h3 { margin: 0; }
.razon p { margin: 0; color: var(--texto-suave); }
@media (min-width: 768px) { .razon { grid-template-columns: minmax(12rem, 1fr) 2fr; gap: 2rem; align-items: baseline; } }

/* Reseñas de clientes: texto literal y solo el nombre debajo, sin estrellas */
.resenas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.resenas > li { display: flex; }
@media (min-width: 768px) { .resenas { grid-template-columns: 1fr 1fr; } }
.resena { margin: 0; flex: 1; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.75rem 1.5rem 1.5rem; border: 1px solid var(--gris-linea); border-top: 4px solid var(--granate); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); }
.resena blockquote { margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--texto); }
.resena blockquote p { margin: 0; }
.resena figcaption { margin-top: auto; display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--granate); }
.resena figcaption::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; }
.resenas__nota { margin: -.5rem 0 1.25rem; color: var(--texto-suave); font-style: italic; }

.pendiente-caja { padding: 2rem; border: 2px dashed var(--gris); border-radius: var(--radio); background: var(--blanco); text-align: center; }
.pendiente-caja__titulo { font-size: 1.25em; font-weight: 800; }
.pendiente-caja p:last-child { margin: 0; color: var(--texto-suave); }
.botones--centro { justify-content: center; }
.pendiente { color: var(--granate); font-weight: 700; }

/* Fotos de cada servicio */
.fotos-servicio { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.fotos-servicio li { overflow: hidden; border-radius: var(--radio); }
.fotos-servicio img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Servicios relacionados */
.otros { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 768px) { .otros { grid-template-columns: repeat(3, 1fr); } }
.otro { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4rem; padding: 1rem 1.25rem; border: 2px solid var(--gris-linea); border-radius: var(--radio); background: var(--blanco); color: var(--texto); font-weight: 700; text-decoration: none; }
.otro:hover { border-color: var(--granate); color: var(--granate); }

/* CTA final */
.seccion--cta { position: relative; isolation: isolate; overflow: hidden; }
.seccion--cta > .contenedor { position: relative; z-index: 2; }
@media (min-width: 768px) { .seccion--cta { padding-block: 7rem; } }
.cta { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 900px) { .cta { grid-template-columns: 1fr auto; } }
.cta p { color: var(--claro-suave); margin: 0; }
.cta .botones { margin-top: 0; }

/* ---------- Antes / después ---------- */

.ba-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ba { margin: 0; }
.ba figcaption { margin-top: .75rem; }
.ba-stage { --pos: 50%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio); background: var(--gris-fondo); user-select: none; }
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px rgb(0 0 0 / .5); pointer-events: none; }
.ba-handle::after {
  content: "\2194"; position: absolute; top: 50%; left: 50%; width: 3rem; height: 3rem; transform: translate(-50%, -50%);
  display: grid; place-items: center; background: #fff; color: var(--texto); border-radius: 50%; box-shadow: 0 2px 8px rgb(0 0 0 / .4); font-size: 1.3rem;
}
.ba-stage input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba-stage:focus-within .ba-handle::after { outline: 3px solid var(--granate); }
.ba-tag { position: absolute; top: .6rem; padding: .25rem .65rem; font-size: 1.125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgb(0 0 0 / .65); border-radius: 6px; pointer-events: none; }
.ba-tag-before { left: .6rem; }
.ba-tag-after { right: .6rem; }
.obra__datos { margin: .75rem 0 0; display: grid; gap: .35rem; font-size: 1.125rem; }
.obra__datos div { display: flex; flex-wrap: wrap; gap: .4rem; }
.obra__datos dt { font-weight: 700; }
.obra__datos dt::after { content: ":"; }
.obra__datos dd { margin: 0; }

/* ---------- Galería y visor ---------- */

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.filtros button { min-height: 3rem; padding: .5rem 1.1rem; border: 2px solid var(--gris-linea); border-radius: 999px; background: var(--blanco); color: var(--texto); font: inherit; font-size: 1.125rem; font-weight: 600; cursor: pointer; }
.filtros button:hover { border-color: var(--granate); }
.filtros button[aria-pressed="true"] { background: var(--granate); border-color: var(--granate); color: #fff; }
.galeria { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); }
.galeria li[hidden] { display: none; }
.g-item { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radio); overflow: hidden; background: var(--gris-linea); cursor: zoom-in; aspect-ratio: 1; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.g-item:hover img, .g-item:focus-visible img { transform: scale(1.05); }

#lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / .94); }
#lightbox[open] { display: grid; place-items: center; }
#lightbox::backdrop { background: rgb(0 0 0 / .94); }
#lb-img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.lb-close, .lb-nav { position: absolute; border: 0; background: rgb(255 255 255 / .2); color: #fff; font-size: 2.2rem; line-height: 1; width: 3.25rem; height: 3.25rem; border-radius: 50%; cursor: pointer; }
.lb-close:hover, .lb-nav:hover { background: rgb(255 255 255 / .35); }
.lb-close { top: 1rem; right: 1rem; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: .75rem; }
.lb-next { right: .75rem; }

/* ---------- Contacto y formulario ---------- */

.contacto { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .contacto { grid-template-columns: 1.5fr 1fr; } }
.contacto__panel { padding: 1.75rem; border-radius: var(--radio); background: var(--oscuro); color: var(--claro); }
.contacto__panel .botones { margin-top: 0; flex-direction: column; }
.contacto__panel .boton { width: 100%; }
.contacto__datos { margin: 1.75rem 0 0; display: grid; gap: 1rem; }
.contacto__datos dt { color: var(--claro-suave); font-size: 1.125rem; }
.contacto__datos dd { margin: 0; font-weight: 700; font-size: 1.15em; }
.contacto__datos a, .legal-datos a { display: inline-flex; align-items: center; min-height: 3rem; }
.contacto__datos a { color: #fff; }

.formulario { display: grid; gap: 1.25rem; padding: 1.5rem; background: var(--blanco); border: 1px solid var(--gris-linea); border-radius: var(--radio); }
@media (min-width: 640px) { .formulario { grid-template-columns: 1fr 1fr; padding: 2rem; } }
.campo { display: grid; align-content: start; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label, .campo legend { font-weight: 700; }
.campo legend { padding: 0; margin-bottom: .4rem; }
.campo .ayuda { margin: 0; }
.obligatorio { color: var(--granate); }
.formulario input:not([type="file"]):not([type="checkbox"]), .formulario select, .formulario textarea {
  width: 100%; min-height: 3.25rem; padding: .7rem .9rem; border: 2px solid var(--gris); border-radius: var(--radio-boton);
  background: var(--blanco); color: var(--texto); font: inherit;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 3px solid var(--granate); outline-offset: 1px; border-color: var(--granate); }
/* Errores: borde granate y el mensaje escrito debajo del campo */
.formulario [aria-invalid="true"] { border-color: var(--granate); background: var(--granate-tenue); }
.campo__error { margin: 0; padding-left: .75rem; border-left: 4px solid var(--granate); color: var(--granate); font-weight: 700; }
.campo__error[hidden] { display: none; }
.subida__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.subida { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1.25rem; border: 2px dashed var(--gris); border-radius: var(--radio); cursor: pointer; }
.subida:hover, .subida__input:focus-visible + .subida { border-color: var(--granate); background: var(--granate-tenue); }
.subida .icono { width: 2rem; height: 2rem; color: var(--granate); }
.subida__boton { font-weight: 700; color: var(--granate); }
.fotos-contador { margin: .5rem 0 0; font-weight: 600; }
.fotos-contador:empty { display: none; }
.fotos-vista { display: flex; flex-wrap: wrap; gap: .5rem; }
.fotos-vista img { width: 5rem; height: 5rem; object-fit: cover; border-radius: 8px; }
.aviso-envio { margin-top: 1rem; padding: 1rem 1.25rem; border-radius: var(--radio); background: #FFF4D1; border-left: 5px solid #C99A00; }
.aviso-envio p { margin: 0; }
.aviso-envio__titulo { font-weight: 800; }

/* ---------- Pie ---------- */

.pie { background: #0E0E0E; color: var(--claro-suave); padding-block: 3.5rem 2rem; font-size: 1.125rem; }
.pie a { display: inline-flex; align-items: center; min-height: 3rem; min-width: 3rem; color: var(--claro); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pie__rejilla { display: grid; gap: 2rem; }
@media (min-width: 768px) { .pie__rejilla { grid-template-columns: 1.3fr 1fr 1fr; } }
.pie__marca { color: #fff; font-weight: 900; font-size: 1.8rem; letter-spacing: .02em; }
.pie__titulo { color: #fff; font-weight: 800; }
.pie__final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--oscuro-linea); font-size: 1.125rem; }
.pie__final p { margin: 0; }

/* ---------- Botón flotante de WhatsApp (solo el icono, en todas las páginas) ---------- */

.flotante-wa {
  position: fixed; z-index: 90; right: 1rem; bottom: 1rem;
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border: 1px solid #17602A; border-radius: 50%; color: #fff;
  background: linear-gradient(180deg, #2DBE5C 0%, #1E9447 55%, #17702F 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 10px 26px -6px rgb(30 148 71 / .7);
  transition: transform .2s, box-shadow .2s;
}
.flotante-wa .icono { width: 1.75rem; height: 1.75rem; }
.flotante-wa:hover { color: #fff; transform: translateY(-2px) scale(1.04); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 14px 32px -6px rgb(30 148 71 / .8); }
/* Onda suave que sale del botón para llamar la atención sin molestar */
.flotante-wa::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  border: 2px solid #1E9447; animation: onda-wa 2.8s ease-out infinite;
}
@keyframes onda-wa {
  0%        { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
@media (min-width: 768px) { .flotante-wa { right: 1.5rem; bottom: 1.5rem; width: 3.75rem; height: 3.75rem; } }
@media (prefers-reduced-motion: reduce) { .flotante-wa::before { animation: none; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Fondo de fotos (portadas, «Cómo trabajo» y franja final) ---------- */

.foto-fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--negro); }
.foto-fondo__slide { position: absolute; inset: 0; opacity: 0; }
.foto-fondo__slide:first-child { opacity: 1; }
.foto-fondo__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Velo oscuro para que el texto blanco se lea siempre, con un resplandor granate */
.foto-fondo__velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 0% 100%, rgb(155 28 36 / .45), transparent 70%),
    linear-gradient(to bottom, rgb(12 12 13 / .62) 0%, rgb(12 12 13 / .8) 55%, rgb(12 12 13 / .92) 100%);
}
/* Escritorio: oscuro a la izquierda (texto) y la foto se abre hacia la derecha */
@media (min-width: 900px) {
  .portada .foto-fondo__velo {
    background:
      radial-gradient(55% 90% at 0% 100%, rgb(155 28 36 / .45), transparent 70%),
      linear-gradient(90deg, rgb(12 12 13 / .93) 0%, rgb(12 12 13 / .85) 40%, rgb(12 12 13 / .5) 70%, rgb(12 12 13 / .18) 100%);
  }
}
.seccion--foto { position: relative; isolation: isolate; overflow: hidden; background: var(--negro); }
.seccion--foto > .contenedor { position: relative; z-index: 2; }
.seccion--foto .foto-fondo__velo {
  background: radial-gradient(60% 90% at 100% 0%, rgb(155 28 36 / .4), transparent 70%), rgb(12 12 13 / .85);
}

/* ---------- Páginas legales y aviso de privacidad del formulario ---------- */

.legal { max-width: 48rem; }
.legal h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.65rem); margin-top: 2.25rem; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 1.25rem; display: grid; gap: .5rem; margin: 0 0 1em; }
.legal-datos { display: grid; gap: .6rem; margin: 0 0 1.25rem; padding: 1.25rem 1.5rem; background: var(--blanco); border: 1px solid var(--gris-linea); border-radius: var(--radio); }
.legal-datos div { display: grid; gap: .1rem; }
@media (min-width: 640px) { .legal-datos div { grid-template-columns: 12rem 1fr; gap: 1rem; } }
.legal-datos dt { font-weight: 700; }
.legal-datos dd { margin: 0; }
.legal-fecha { color: var(--texto-suave); font-size: 1.125rem; }

.pie__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.pie__legal a { color: var(--claro-suave); }

.acepto { display: flex; align-items: flex-start; gap: .75rem; }
.acepto input { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .2rem; accent-color: var(--granate); }
.acepto label { font-weight: 600; }
.info-privacidad { font-size: 1.125rem; line-height: 1.5; }

/* Miniaturas de las fotos elegidas en el formulario, cada una con su botón «Quitar» */
.fotos-vista { gap: .75rem; }
.foto-elegida { margin: 0; display: grid; gap: .4rem; width: 6.5rem; }
.foto-elegida img { width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--gris-linea); }
.foto-elegida__quitar {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 3rem;
  padding: .3rem .5rem; border: 2px solid var(--gris-linea); border-radius: var(--radio-boton);
  background: var(--blanco); color: var(--granate); font: inherit; font-size: 1.125rem; font-weight: 700; cursor: pointer;
}
.foto-elegida__quitar span { font-size: 1.3rem; line-height: 1; }
.foto-elegida__quitar:hover { border-color: var(--granate); background: var(--granate-tenue); }

/* ---------- Aviso de cookies (solo si hay Google Analytics) ---------- */

.pie__cookies { background: none; border: 0; padding: 0; font: inherit; color: var(--claro-suave); text-decoration: underline; cursor: pointer; min-height: 3rem; }
.cookies-aviso { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; gap: 1rem; padding: 1.25rem 5.5rem calc(1.25rem + env(safe-area-inset-bottom)) 1.25rem; background: var(--negro); color: #fff; border-top: 3px solid var(--granate); box-shadow: 0 -8px 32px rgb(0 0 0 / .35); }
.cookies-aviso p { margin: 0; font-size: 1.125rem; line-height: 1.5; }
.cookies-aviso a { color: var(--rojo-claro); }
.cookies-aviso__botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.cookies-aviso__botones .boton { flex: 1 1 10rem; min-height: 3rem; }
@media (min-width: 900px) {
  .cookies-aviso { grid-template-columns: 1fr auto; align-items: center; padding-inline: max(1.5rem, calc((100vw - 72rem) / 2)) max(6rem, calc((100vw - 72rem) / 2)); }
  .cookies-aviso__botones .boton { flex: 0 0 auto; }
}