/* Reform Complet — sistema de diseño base (compartido entre páginas) */

:root {
  --color-brand: #2a5f91;
  --color-brand-dark: #1d4569;
  --color-brand-light: #5c87b3;
  --color-bg: #faf8f4;
  --color-bg-alt: #f0ece3;
  --color-text: #1c1c1c;
  --color-text-soft: #5a5a55;
  --color-white: #ffffff;
  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;
  --max-width: 1200px;
  --transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-brand);
  color: var(--color-white);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-alt);
}
::-webkit-scrollbar-thumb {
  background: var(--color-brand);
  border-radius: 10px;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Navegación ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 22px 0;
  transition: var(--transition);
  background: transparent;
}

.nav.is-scrolled {
  padding: 14px 0;
  background: rgba(250, 248, 244, 0.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
}

/* Páginas sin hero oscuro debajo (servicios, proyectos): el nav nace ya "scrolled" para que el texto blanco no se pierda sobre fondo claro */
.nav--solid {
  padding: 14px 0;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
}

.nav--solid .nav__logo img {
  filter: none;
}

.nav--solid .nav__links a {
  color: var(--color-text);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: center;
}

.nav__logo img {
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: var(--transition);
}

.nav.is-scrolled .nav__logo img {
  filter: none;
}

@media (max-width: 600px) {
  .nav__logo img {
    height: 18px;
  }
}

.nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav__links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-white);
  position: relative;
  transition: var(--transition);
}

.nav.is-scrolled .nav__links a {
  color: var(--color-text);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.nav__links a:hover::after {
  width: 100%;
}

.nav__cta {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-white) !important;
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
}

.nav__cta:hover {
  background: var(--color-brand-dark);
  transform: translateY(-1px);
}

.nav__toggle {
  display: none;
}

@media (max-width: 860px) {
  .nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    padding: 8px 24px 18px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s ease;
  }
  .nav--menu-open .nav__links {
    max-height: 70vh;
    visibility: visible;
  }
  .nav__links a {
    color: var(--color-text) !important;
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 1rem;
  }
  .nav.is-scrolled .nav__links a {
    color: var(--color-text);
  }
  .nav__toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 101;
    padding: 4px;
  }
  /* Siempre azul de marca: antes era blanco sobre el hero y oscuro con .is-scrolled,
     pero en páginas .nav--solid (sin hero oscuro) no había ninguna regla que lo pusiera
     oscuro al cargar, así que se veía blanco sobre fondo claro — invisible. Un solo color
     fijo evita el problema en cualquier estado del nav (transparente, scrolled o solid). */
  .nav__toggle span,
  .nav__toggle span::before,
  .nav__toggle span::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-brand);
    transition: var(--transition);
  }
  .nav--menu-open .nav__toggle span,
  .nav--menu-open.is-scrolled .nav__toggle span {
    background: transparent;
  }
  .nav--menu-open .nav__toggle span::before,
  .nav--menu-open .nav__toggle span::after {
    background: var(--color-brand);
  }
  .nav__toggle span::before {
    content: "";
    margin-bottom: 6px;
    transition: var(--transition);
  }
  .nav__toggle span::after {
    content: "";
    margin-top: 6px;
    transition: var(--transition);
  }
  .nav--menu-open .nav__toggle span::before {
    transform: translateY(8px) rotate(45deg);
  }
  .nav--menu-open .nav__toggle span::after {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@media (max-width: 600px) {
  .nav__cta {
    display: none;
  }
}

/* ---------- Nav submenú (acordeón V1) ---------- */

.nav__item--has-sub {
  position: relative;
}

/* Botón chevron: solo visible en móvil */
.nav__sub-btn {
  display: none;
}

/* Desktop: dropdown al hover */
.nav__submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--color-white);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.14);
  min-width: 210px;
  list-style: none;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 200;
}

.nav__item--has-sub:hover .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__submenu a {
  display: block;
  padding: 10px 18px;
  font-size: 0.875rem;
  color: var(--color-text);
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.nav__submenu a:hover {
  background: var(--color-bg-alt);
  color: var(--color-brand);
}

.nav__submenu a::after {
  display: none !important;
}

/* Móvil: acordeón */
@media (max-width: 860px) {
  .nav__submenu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: #f4f3f0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
    padding: 0;
    min-width: 0;
  }

  .nav__item--has-sub.is-open .nav__submenu {
    max-height: 500px;
  }

  .nav__item--has-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  /* Ancho de contenido (no flex:1) a propósito: el enlace navega, y el hueco de fila que
     queda a su derecha (antes ocupado por el propio link) es lo que permite pulsar "fuera
     del texto" para desplegar el acordeón sin navegar. Ver main.js, listener en
     .nav__item--has-sub. */
  .nav__item--has-sub > a {
    flex: 0 1 auto;
    border-bottom: none !important;
  }

  .nav__item--has-sub > a::after {
    display: none !important;
  }

  .nav__sub-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    height: 50px;
    width: 40px;
    flex-shrink: 0;
  }

  .nav__chev {
    display: block;
    font-size: 0.65rem;
    color: var(--color-text);
    transition: transform 0.22s;
  }

  .nav__item--has-sub.is-open .nav__chev {
    transform: rotate(180deg);
  }

  .nav__submenu {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .nav__submenu li a {
    padding: 11px 20px 11px 28px;
    font-size: 0.88rem;
    color: var(--color-text);
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.12s, color 0.12s;
  }

  .nav__submenu li a:hover {
    background: #ece9e4;
    color: var(--color-brand);
  }

  .nav__submenu li:last-child a {
    border-bottom: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.05);
  will-change: transform;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(20, 30, 40, 0.55) 0%,
    rgba(20, 30, 40, 0.45) 40%,
    rgba(15, 25, 38, 0.85) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 110px;
  color: var(--color-white);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.9;
  margin-bottom: 22px;
}

.hero__eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8b84b;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: 1.08;
  max-width: 820px;
  margin-bottom: 26px;
  text-wrap: balance;
}

.hero__subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 560px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 36px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 64px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  transition: var(--transition);
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--color-brand);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(42, 95, 145, 0.4);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-white);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
}

/* "Ver proyectos" del hero de la Home — mismo estilo elegido para "Enviar email" en
   Contacto (fondo blanco + borde azul de marca), solo para este botón. El resto de usos
   de .btn--ghost (16 páginas, casi todos CTA sobre foto oscura) no se tocan. */
.btn--ghost-accent {
  background: var(--color-white);
  color: var(--color-text);
  border-color: var(--color-brand);
}

.btn--ghost-accent:hover {
  background: rgba(42, 95, 145, 0.06);
  border-color: var(--color-brand);
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero__trust .stars {
  color: #e8b84b;
  font-size: 1rem;
  letter-spacing: 2px;
}

.hero__trust-text {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}

.hero__trust-text strong {
  color: var(--color-white);
}

.hero__scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: floaty 2.4s ease-in-out infinite;
}

.hero__scroll-cue::after {
  content: "";
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.5);
}

@keyframes floaty {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ---------- Utilidades de animación (reveal) ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: 0.06s; }
[data-reveal-delay="2"] { transition-delay: 0.12s; }
[data-reveal-delay="3"] { transition-delay: 0.18s; }
[data-reveal-delay="4"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__scroll-cue {
    animation: none;
  }
}

@media (max-width: 600px) {
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Hero — versión móvil (≤860px) ---------- */
/* Estructura distinta a la de escritorio (pantalla de carga, zoom inmersivo,
   titular compacto arriba), por eso van como dos secciones .hero separadas
   en el HTML en vez de reordenar con CSS — .hero--desktop y .hero--mobile
   se alternan por media query, nunca se muestran las dos a la vez. */

.hero--mobile { display: none; }

@media (max-width: 860px) {
  .hero--desktop { display: none; }

  .hero--mobile {
    display: flex;
    min-height: 100svh;
    height: 100svh;
    position: relative;
    align-items: stretch;
  }
  .hero--mobile .hero__content { width: 100%; height: 100%; align-self: stretch; }
  .hero--mobile .hero__overlay {
    background: linear-gradient(180deg, rgba(10,16,24,0.5) 0%, rgba(10,16,24,0.2) 40%, rgba(10,16,24,0.62) 100%);
  }
  .hero--mobile .hero__bg img {
    transform-origin: 50% 45%;
    object-position: 64% 30%;
    animation: heroMobileZoom 3.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes heroMobileZoom {
    0% { transform: scale(2.1); }
    100% { transform: scale(1.05); }
  }
  .hero--mobile h1 { text-align: center; font-size: 2.55rem; line-height: 1.12; margin: 0; }
  .hero--mobile .hero__eyebrow { justify-content: center; width: 100%; margin: 0; opacity: 0.85; }
  .hero--mobile .hero__subtitle { text-align: center; max-width: 300px; margin: 0 auto 22px; font-size: 0.9rem; opacity: 0.8; }
  .hero--mobile .hero__actions { justify-content: center; flex-direction: row; gap: 10px; width: 100%; margin: 0; padding: 0 18px; }
  .hero--mobile .btn { flex: 0 0 auto; width: auto; padding: 16px 26px; font-size: 0.95rem; gap: 8px; }
  .hero--mobile .hero__trust { justify-content: center; width: 100%; margin: 0; }

  .hero-m__reveal {
    opacity: 0; transform: translateY(14px);
    animation: heroMobileReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes heroMobileReveal { to { opacity: 1; transform: translateY(0); } }

  .hero-m__content { display: flex; flex-direction: column; padding: 60px 0 28px; }
  .hero-m__top { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .hero-m__top img {
    display: block !important; height: 18px !important; width: 225px !important;
    max-width: none !important; object-fit: contain; filter: brightness(0) invert(1);
  }
  .hero-m__top h1 {
    font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: #fff; opacity: 0.9;
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
  }
  .hero-m__top h1 .dot { width: 6px; height: 6px; border-radius: 50%; background: #e8b84b; flex-shrink: 0; }
  .hero-m__mid { flex: 1; display: flex; align-items: center; justify-content: center; }
  .hero-m__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .hero-m__foot { display: flex; justify-content: center; margin-top: 22px; }
}

/* ---------- Secciones genéricas ---------- */

.section {
  padding: 80px 0;
  position: relative;
}

.section--alt {
  background: var(--color-bg-alt);
  box-shadow: inset 0 1px 0 rgba(28, 28, 28, 0.05), inset 0 -1px 0 rgba(28, 28, 28, 0.05);
}

@media (max-width: 860px) {
  .section--alt {
    box-shadow: inset 0 1px 0 rgba(28, 28, 28, 0.08), inset 0 -1px 0 rgba(28, 28, 28, 0.08), 0 16px 28px -26px rgba(28, 28, 28, 0.3);
  }
}

#proyectos {
  padding-top: 48px;
}

#proyectos .section__heading {
  margin-bottom: 16px;
}

@media (max-width: 860px) {
  .section {
    padding: 40px 0;
  }
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 18px;
}

.section__eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand);
}

.section__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  max-width: 720px;
  margin-bottom: 24px;
  text-wrap: balance;
}

@media (max-width: 860px) {
  .ba-compare-heading {
    font-size: 1.5rem;
    white-space: nowrap;
  }
}

.section__lead {
  font-size: 1.1rem;
  color: var(--color-text-soft);
  max-width: 620px;
  margin-bottom: 0;
}

/* ---------- Sobre nosotros ---------- */

.about__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: stretch;
  margin-bottom: 56px;
}

.about__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about__photo {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 25px 50px -20px rgba(28, 28, 28, 0.3);
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) {
  .about__top {
    grid-template-columns: 1fr;
  }
  .about__photo {
    aspect-ratio: 4 / 3;
  }
}

.stats {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.stat__number {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 600;
  color: var(--color-brand);
  line-height: 1;
}

.stat__label {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin-top: 6px;
  max-width: 160px;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.pillar {
  padding: 32px 0 0;
  border-top: 1px solid rgba(28, 28, 28, 0.12);
  transition: var(--transition);
}

.pillar:hover {
  border-color: var(--color-brand);
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -25px rgba(28, 28, 28, 0.3);
}

.pillar__index {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-brand);
  margin-bottom: 18px;
  display: block;
}

.pillar h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.pillar p {
  font-size: 0.95rem;
  color: var(--color-text-soft);
}

@media (max-width: 900px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .pillars {
    grid-template-columns: 1fr;
  }
  .stats {
    gap: 36px;
  }
}

/* ---------- Sobre nosotros: Antes de contratarnos (objeciones resueltas) ---------- */

.obj-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  margin-top: 40px;
  align-items: stretch;
}

.obj-split__row {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
}

.obj-split__row:first-child {
  border-top: none;
}

.obj-split__num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-brand);
  flex-shrink: 0;
  width: 28px;
}

.obj-split__row h3 {
  font-size: 1.02rem;
  margin: 0 0 6px;
}

.obj-split__row p {
  color: var(--color-text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}

.obj-split__photo {
  border-radius: 16px;
  overflow: hidden;
  position: sticky;
  top: 100px;
  height: 100%;
}

.obj-split__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 40%;
}

@media (max-width: 860px) {
  .obj-split {
    grid-template-columns: 1fr;
  }
  .obj-split__photo {
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Sobre nosotros: Cómo trabajamos + Testimonios ---------- */

.proc-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.proc-card {
  position: relative;
  text-align: center;
  background: var(--color-white);
  border-radius: 14px;
  padding: 30px 16px 22px;
  box-shadow: 0 14px 28px -22px rgba(28, 28, 28, 0.22);
  margin-top: 20px;
}

.proc-card__badge {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  box-shadow: 0 8px 16px -6px rgba(42, 95, 145, 0.5);
}

.proc-card h3 {
  font-size: 0.95rem;
  margin: 0 0 6px;
}

.proc-card p {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 860px) {
  .proc-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .proc-card {
    margin-top: 0;
  }
  .proc-card__badge {
    position: static;
    transform: none;
    margin: 0 auto 14px;
  }
}

/* ---------- Sobre nosotros: Lo que dicen quienes ya confiaron ---------- */

.qr-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  margin-top: 32px;
  align-items: stretch;
}

.qr-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.qr-row {
  padding: 16px 0;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
}

.qr-row:first-child {
  border-top: none;
  padding-top: 0;
}

.qr-row h3 {
  font-size: 1rem;
  margin: 0 0 8px;
}

.qr-row blockquote {
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--color-brand);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-text);
}

.qr-row .autor {
  margin-top: 6px;
  padding-left: 16px;
  font-size: 0.78rem;
  color: var(--color-text-soft);
}

.qr-row .autor a {
  color: var(--color-brand);
  text-decoration: none;
  font-weight: 600;
}

.qr-row .autor a:hover {
  text-decoration: underline;
}

.qr-side-full {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 20px 40px -26px rgba(28, 28, 28, 0.28);
}

.qr-side-full .stars {
  font-size: 0.95rem;
  color: var(--color-brand);
  letter-spacing: 2px;
}

.qr-side-full h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 12px 0 8px;
}

.qr-side-full p {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 22px;
}

.qr-trust-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: auto;
  padding: 20px 0;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
}

.qr-trust-list div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--color-text);
}

.qr-trust-list svg {
  width: 18px;
  height: 18px;
  color: var(--color-brand);
  flex-shrink: 0;
  margin-top: 1px;
}

.qr-side-full .btn {
  width: 100%;
  text-align: center;
  margin-top: 22px;
  margin-bottom: 0;
}

.qr-side-full .note {
  font-size: 0.78rem;
  color: var(--color-text-soft);
  text-align: center;
  margin-top: 14px;
}

@media (max-width: 860px) {
  .qr-split {
    grid-template-columns: 1fr;
  }
  .qr-side-full {
    height: auto;
  }
}

.about-testi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-testi__grid .va-card {
  flex: none;
  margin-right: 0;
  width: 100%;
  cursor: default;
}

@media (max-width: 860px) {
  .about-testi__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Opiniones ---------- */

.op-featured__item {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 56px;
}

.op-featured__item:last-child {
  margin-bottom: 0;
}

.op-featured__item--reverse {
  grid-template-columns: 1.3fr 1fr;
}

.op-featured__item--reverse .op-featured__media {
  order: 2;
}

.op-featured__item--reverse .op-featured__text {
  order: 1;
}

.op-featured__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 30px 55px -25px rgba(28, 28, 28, 0.35);
}

.op-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-featured__text .stars {
  color: #e0a82e;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 12px;
}

.op-featured__text blockquote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0 0 16px;
}

.op-featured__text .autor {
  font-weight: 600;
  margin-bottom: 4px;
}

.op-featured__text .proyecto-link {
  font-size: 0.88rem;
  color: var(--color-brand);
  border-bottom: 1px solid var(--color-brand-light);
  text-decoration: none;
}

@media (max-width: 860px) {
  .op-featured__item,
  .op-featured__item--reverse {
    grid-template-columns: 1fr;
  }
  .op-featured__item--reverse .op-featured__media,
  .op-featured__item--reverse .op-featured__text {
    order: initial;
  }
}

/* ---------- Proyectos destacados ---------- */

.featured__item {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
}

.featured__item:last-of-type {
  margin-bottom: 56px;
}

.featured__item--reverse {
  grid-template-columns: 1fr 1.3fr;
}

.featured__item--reverse .featured__media {
  order: 2;
}

.featured__item--reverse .featured__text {
  order: 1;
}

.featured__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 30px 55px -25px rgba(28, 28, 28, 0.35);
}

.featured__glow {
  position: relative;
  border-radius: 11px;
  padding: 3px;
  background: conic-gradient(from var(--angle), #0f2133, #2a5f91 25%, #bcdcf7 45%, #2a5f91 65%, #0f2133 100%);
  box-shadow: 0 35px 60px -25px rgba(15, 33, 51, 0.55), 0 0 40px -5px rgba(42, 95, 145, 0.35);
  animation: glow-rotate 7s linear infinite;
  transition: var(--transition);
}

.featured__glow:hover {
  transform: translateY(-4px);
  box-shadow: 0 45px 70px -25px rgba(15, 33, 51, 0.6), 0 0 55px -5px rgba(42, 95, 145, 0.5);
}

.featured__glow .featured__media {
  box-shadow: none;
}

.featured__badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--color-white);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.featured__badge--gold {
  background: linear-gradient(135deg, #f5c453, #d89a2e);
  color: #1c1208;
  border-color: rgba(255, 255, 255, 0.5);
  animation: badge-pulse 2.6s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(245, 196, 83, 0.45), 0 6px 18px -6px rgba(212, 160, 40, 0.6);
  }
  50% {
    transform: translateX(-50%) scale(1.035);
    box-shadow: 0 0 0 8px rgba(245, 196, 83, 0.12), 0 6px 18px -6px rgba(212, 160, 40, 0.6);
  }
}

.featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.featured__media:hover img {
  transform: scale(1.03);
}

.featured__index {
  font-family: var(--font-display);
  color: var(--color-brand);
  font-size: 1.3rem;
  display: block;
  margin-bottom: 14px;
}

.featured__text--destacado {
  border-left: 3px solid #d89a2e;
  padding-left: 22px;
}

.featured__text--destacado .featured__index {
  color: #c9941f;
}

.featured__text--destacado h3 {
  font-size: 1.75rem;
}

.featured__meta {
  display: block;
  color: var(--color-brand);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-bottom: 14px;
}

.featured__text h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.featured__text p {
  color: var(--color-text-soft);
  margin-bottom: 18px;
}

.featured__link {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-brand);
  padding-bottom: 2px;
}

.featured__more {
  text-align: center;
}

/* Slider antes/después */

.ba-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --pos: 50%;
}

.ba-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.ba-slider .img-before-wrap {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--pos);
  overflow: hidden;
}

.ba-slider .img-before-wrap img {
  width: var(--media-width, 100%);
  max-width: none;
}

.ba-slider .ba-tag {
  position: absolute;
  top: 14px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-white);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 3;
}

.ba-slider .tag-before {
  left: 14px;
}

.ba-slider .tag-after {
  right: 14px;
}

.ba-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 0;
  z-index: 2;
  pointer-events: none;
}

.ba-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--color-white);
}

.ba-handle::after {
  content: "↔︎";
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  background: var(--color-white);
  color: var(--color-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.ba-sweep-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-white);
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

.ba-sweep-hint.is-shown {
  animation: ba-hint-fade 3.5s ease forwards;
}

@keyframes ba-hint-fade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 860px) {
  .featured__item,
  .featured__item--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .featured__item--reverse .featured__media,
  .featured__item--reverse .featured__text {
    order: initial;
  }
}

/* ---------- Proyectos destacados — versión móvil (≤860px): carrusel a pantalla completa ---------- */
/* Misma lógica que el hero: estructura distinta a la de escritorio (carrusel
   horizontal con scroll-snap en vez de tarjetas apiladas), por eso van como
   dos bloques separados (.featured--desktop / .featured--mobile) alternados
   por media query en vez de reordenar con CSS. */

.featured--mobile { display: none; }
.banos-galeria--mobile { display: none; }
.mc-detalle--mobile { display: none; }

@media (max-width: 860px) {
  .featured--desktop { display: none; }
  .featured--mobile { display: block; }
  .banos-galeria--desktop { display: none; }
  .banos-galeria--mobile { display: block; }
  .mc-detalle--desktop { display: none; }
  .mc-detalle--mobile { display: block; }

  .ds-track {
    display: flex; gap: 0; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 0; margin-top: 20px;
  }
  .ds-track::-webkit-scrollbar { display: none; }
  .ds-card {
    background: var(--color-white); flex-shrink: 0;
    width: 100%; border-radius: 0; scroll-snap-align: center; box-shadow: none;
    position: relative;
  }
  /* ds-media es el frame: height:0 + padding-bottom da ratio garantizado sin depender de flex */
  .ds-media { position: relative; width: 100%; height: 0; padding-bottom: 133.33%; overflow: hidden; }
  .ds-media picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .ds-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .ds-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.78) 100%);
  }
  .ds-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: linear-gradient(135deg, #f5c453, #d89a2e); color: #1c1208;
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px;
  }
  .ds-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 18px 20px 20px; color: #fff;
  }
  .ds-overlay .ds-meta {
    display: block; color: #f5c453; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
  }
  .ds-overlay h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 6px; line-height: 1.25; color: #fff; }
  .ds-overlay p { font-size: 0.85rem; color: rgba(255,255,255,0.85); margin-bottom: 10px; line-height: 1.45; }
  .ds-overlay a { font-size: 0.85rem; font-weight: 600; color: #fff; border-bottom: 1px solid #fff; padding-bottom: 1px; }
  .ds-hint {
    text-align: center; font-size: 0.74rem; color: var(--color-text-soft);
    margin: 10px 20px 0; letter-spacing: 0.02em;
  }
  .ds-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
  .ds-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(28,28,28,0.2); }
  .ds-dots span.is-active { background: var(--color-brand); width: 18px; border-radius: 4px; }

  .featured--mobile .featured__more .btn { width: auto; padding: 13px 24px; }
}

/* ---------- Project gallery V4 carousel — SOLO ESCRITORIO (>860px) ----------
   Usada en "El resultado, en detalle" de las fichas de proyecto (arenal-den-castell, piso-mahon,
   sant-lluis, restaurante-puerto-mahon, apartamento-golf usan rejilla .pd-gallery-grid dentro de
   este wrapper; coves-noves es la única que sigue con este carrusel también en escritorio, a
   propósito, porque solo tiene 3 fotos). Ya NO se usa en servicios/microcemento.html (esa sección
   volvió a .bv-grid-b, ver más abajo).
   La regla `.proj-gallery { display:none }` de aquí abajo es la que oculta esta versión en móvil;
   la versión móvil real es `.galeria-m` (sección siguiente) — no la toques ni la borres. */

.proj-gallery .ds-track {
  display: flex; gap: 10px; overflow-x: auto; align-items: flex-start;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; margin-top: 28px; padding-bottom: 4px;
}
.proj-gallery .ds-track::-webkit-scrollbar { display: none; }

.proj-gallery .ds-card {
  flex: 0 0 calc(33.33% - 7px); scroll-snap-align: start;
  border-radius: 14px; overflow: hidden; position: relative;
  width: auto; box-shadow: none;
}
/* ds-media es el frame: ratio 1:1 garantizado */
.proj-gallery .ds-media {
  position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;
}
.proj-gallery .ds-media picture {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
}
.proj-gallery .ds-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.proj-gallery .ds-media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
  pointer-events: none;
}
.proj-gallery .ds-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px 12px 12px; color: #fff;
}
.proj-gallery .ds-meta {
  display: block; color: #f5c453; font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px;
}
.proj-gallery .ds-overlay a {
  font-size: 0.72rem; font-weight: 600; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 1px;
}

@media (min-width: 861px) {
  .proj-gallery .ds-dots,
  .proj-gallery .ds-hint { display: none; }
}

@media (max-width: 860px) {
  .proj-gallery { display: none; }
}

/* ---------- Galería de detalle en móvil (sustitución de proj-gallery) ----------
   Esta es la versión de MÓVIL ya validada de "El resultado, en detalle" — no tocar.
   Si el bloque de escritorio (.proj-gallery de arriba) se rompe alguna vez, la recuperación
   es solo en ese bloque; .galeria-m no debería cambiar. */

.galeria-m { display: none; }

@media (max-width: 860px) {
  .galeria-m { display: block; margin-top: 40px; }

  .galeria-m__wrap {
    overflow: hidden;
    margin-left: -24px;
    margin-right: -24px;
  }

  .galeria-m__track {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .galeria-m__track::-webkit-scrollbar { display: none; }

  .galeria-m__slide {
    flex: 0 0 100vw;
    scroll-snap-align: start;
    padding: 12px 24px 0;
  }

  .galeria-m__slide img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
  }

  .galeria-m__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }
  .galeria-m__dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #bbb;
    transition: background 0.2s;
  }
  .galeria-m__dots span.is-active { background: #1c2b3a; }

  .galeria-m__hint {
    text-align: center;
    font-size: 0.78rem;
    color: #888;
    margin-top: 8px;
  }
}

/* ---------- Galería de tarjetas con overlay completo (listado /proyectos/) ----------
   SOLO MÓVIL (≤860px). El carrusel de flechas de escritorio original (.carousel, más abajo
   en "Carrusel Home / catálogo — versión escritorio") es la versión de escritorio real; no
   la sustituyas por esta ni la elimines. Si en el futuro se vuelve a ver este carrusel en
   escritorio, revisa que la regla @media (min-width:861px) de aquí abajo siga existiendo. */

@media (min-width: 861px) {
  .proj-gallery-rich { display: none; }
}

.proj-gallery-rich .ds-track {
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; margin-top: 28px; padding-bottom: 6px;
}
.proj-gallery-rich .ds-track::-webkit-scrollbar { display: none; }
.proj-gallery-rich .ds-card {
  flex: 0 0 calc(33.33% - 12px); scroll-snap-align: start;
  border-radius: 16px; overflow: hidden; position: relative;
  box-shadow: 0 24px 45px -28px rgba(28, 28, 28, 0.35); width: auto;
}
.proj-gallery-rich .ds-media { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 4; }
.proj-gallery-rich .ds-media picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.proj-gallery-rich .ds-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.proj-gallery-rich .ds-card:hover .ds-media img { transform: scale(1.05); }
.proj-gallery-rich .ds-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 24, 34, 0) 40%, rgba(15, 24, 34, 0.82));
}
.proj-gallery-rich .ds-card .tag-pill { position: absolute; top: 16px; left: 16px; z-index: 2; }
.proj-gallery-rich .ds-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px 20px; color: #fff; }
.proj-gallery-rich .ds-meta { display: block; font-size: 0.74rem; opacity: 0.85; margin-bottom: 4px; }
.proj-gallery-rich .ds-overlay h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.25; color: #fff; margin-bottom: 0; }
.proj-gallery-rich .ds-overlay p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); margin-top: 8px; line-height: 1.45; }

@media (min-width: 861px) {
  .proj-gallery-rich .ds-dots,
  .proj-gallery-rich .ds-hint { display: none; }
}

@media (max-width: 860px) {
  .proj-gallery-rich .ds-track { margin-left: -24px; margin-right: -24px; gap: 0; }
  .proj-gallery-rich .ds-card { flex: 0 0 100vw; padding: 0 24px; overflow: visible; border-radius: 0; box-shadow: none; background: transparent; }
  .proj-gallery-rich .ds-media { aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; }
  .proj-gallery-rich .ds-overlay { left: 24px; right: 24px; }
  .proj-gallery-rich .ds-overlay h3 { font-size: 1.25rem; }
}

/* ---------- Quiénes somos — versión móvil (≤860px): foto con datos en pastilla de cristal ---------- */

.about--mobile { display: none; }

@media (max-width: 860px) {
  .about--desktop { display: none; }
  .about--mobile { display: block; }

  .about--mobile .section__lead { font-size: 0.92rem; }

  .about-m__card {
    position: relative; border-radius: 18px; overflow: hidden;
    box-shadow: 0 20px 40px -22px rgba(28,28,28,0.35); margin: 24px 0;
  }
  .about-m__photo { aspect-ratio: 4 / 3.2; }
  .about-m__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .about-m__pill {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    background: rgba(20,20,20,0.55); backdrop-filter: blur(12px) saturate(150%);
    border-radius: 14px; padding: 14px 6px;
  }
  .about-m__pill .stat { text-align: center; }
  .about-m__pill .stat__number { font-size: 1.5rem; color: #fff; margin: 0 0 4px; }
  .about-m__pill .stat__label { font-size: 0.66rem; color: rgba(255,255,255,0.78); margin: 0; max-width: none; }

  .about-m__cta { display: flex; justify-content: center; margin-top: 22px; }
  .about-m__cta .btn { width: auto; flex: 0 0 auto; padding: 13px 24px; font-size: 0.92rem; }
}

/* ---------- Servicios — versión móvil (≤860px): rejilla 2×3, todo en una pantalla ---------- */

.svc--mobile { display: none; }

@media (max-width: 860px) {
  .svc--desktop { display: none; }
  .svc--mobile { display: block; padding: 24px 0 56px; }
  .page-header + .svc--mobile { padding-top: 0; }

  .svc-m__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
  .svc-m__card {
    position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; display: block;
    box-shadow: 0 14px 28px -18px rgba(28,28,28,0.32);
  }
  .svc-m__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .svc-m__card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.68) 100%);
  }
  .svc-m__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px; color: #fff; }
  .svc-m__text h3 {
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; margin: 0;
  }

  .svc--mobile .featured__more .btn { width: auto; padding: 13px 24px; }
}

/* ---------- Opiniones — versión móvil (≤860px): carrusel deslizable con puntos ---------- */

.opiniones--mobile { display: none; }

@media (max-width: 860px) {
  .opiniones--desktop { display: none; }
  .opiniones--mobile { display: block; }

  .op-cta { display: flex; justify-content: center; margin-top: 22px; }

  .op-m__track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 20px calc((100% - 78%) / 2) 4px; margin-top: 4px;
  }
  .op-m__track::-webkit-scrollbar { display: none; }
  .op-m__card {
    flex: 0 0 78%; scroll-snap-align: center; display: block; text-decoration: none; color: inherit;
    background: var(--color-white); border-radius: 14px; padding: 20px;
    box-shadow: 0 14px 28px -18px rgba(28,28,28,0.25);
  }
  .op-m__card .stars { color: #e0a82e; font-size: 0.85rem; letter-spacing: 1px; }
  .op-m__card blockquote { font-family: var(--font-display); font-size: 0.9rem; line-height: 1.45; margin: 10px 0 12px; }
  .op-m__card .name { font-weight: 600; font-size: 0.84rem; }
  .op-m__card .meta { font-size: 0.74rem; color: var(--color-text-soft); margin-top: 2px; }

  .op-m__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .op-m__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(28,28,28,0.2); }
  .op-m__dots span.is-active { background: var(--color-brand); width: 18px; border-radius: 4px; }
}

/* ---------- Servicios ---------- */

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.svc-glow {
  position: relative;
  border-radius: 23px;
  padding: 3px;
  margin-bottom: 24px;
  background: transparent;
  box-shadow: 0 20px 40px -25px rgba(28, 28, 28, 0.3);
  transition: var(--transition);
}

.svc-glow:hover {
  transform: translateY(-4px);
  background: conic-gradient(from var(--angle), #0f2133, #2a5f91 25%, #bcdcf7 45%, #2a5f91 65%, #0f2133 100%);
  box-shadow: 0 45px 70px -25px rgba(15, 33, 51, 0.6), 0 0 55px -5px rgba(42, 95, 145, 0.5);
  animation: glow-rotate 7s linear infinite;
}

@keyframes glow-rotate {
  to {
    --angle: 360deg;
  }
}

.svc-row {
  position: relative;
  display: block;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.svc-row img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 33, 51, 0.1) 0%, rgba(15, 33, 51, 0.15) 55%, rgba(15, 33, 51, 0.75) 100%);
}

.svc-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: var(--color-white);
  background: rgba(42, 95, 145, 0.32);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid rgba(167, 199, 225, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px 14px 28px;
}

.svc-content .small-num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 18px;
}

.svc-content h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  display: inline;
}

.svc-cta {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-decoration: none;
  font-size: 1rem;
  transition: var(--transition);
}

.svc-row:hover .svc-cta {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-brand);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  margin-bottom: 64px;
}

.svc-grid .svc-glow {
  margin-bottom: 0;
}

.svc-grid .svc-row {
  height: auto;
  aspect-ratio: 1 / 1;
}

.svc-row .pd-room__pending {
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .svc-row {
    height: 300px;
  }
}

/* ---------- Opiniones ---------- */

.op-stars {
  color: #e0a82e;
  letter-spacing: 2px;
  font-size: 0.9rem;
}

.marquee {
  overflow: hidden;
  padding: 30px 0 24px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-left 32s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.va-card {
  position: relative;
  flex: 0 0 320px;
  margin-right: 24px;
  background: var(--color-white);
  border: 1px solid rgba(28, 28, 28, 0.1);
  border-radius: 14px;
  padding: 26px;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.45s ease, background 0.45s ease;
}

.va-card::after {
  content: "”";
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--color-brand);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.va-card:hover {
  transform: translateY(-10px) scale(1.045);
  border-color: var(--color-brand);
  background: rgba(42, 95, 145, 0.05);
  box-shadow: 0 35px 55px -20px rgba(15, 33, 51, 0.35), 0 0 0 1px rgba(42, 95, 145, 0.2);
  z-index: 2;
}

.va-card:hover::after {
  opacity: 0.12;
}

.va-card:hover .op-stars {
  filter: brightness(1.15) saturate(1.2);
}

.va-card blockquote {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 12px 0 16px;
  transition: color 0.45s ease;
}

.va-card:hover blockquote {
  color: #000;
}

.va-card .name {
  font-weight: 600;
  font-size: 0.88rem;
  transition: color 0.45s ease;
}

.va-card:hover .name {
  color: var(--color-brand);
}

.va-card .meta {
  font-size: 0.76rem;
  color: var(--color-text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}

.va-card .meta .go-icon {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.va-card:hover .meta .go-icon {
  opacity: 1;
  transform: translateX(0);
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}


/* ---------- Contacto + Footer ---------- */

.cta {
  background: var(--color-brand);
  color: var(--color-white);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 25%, rgba(255, 255, 255, 0.14), transparent 55%);
}

.cta .container {
  position: relative;
  z-index: 1;
}

.cta__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.cta--center .cta__text {
  text-align: center;
}

.cta--center .cta__trust,
.cta--center .cta__actions {
  justify-content: center;
  display: flex;
}

.cta--center .cta__lead {
  max-width: 480px;
  margin: 0 auto 32px;
}

.cta__text {
  color: var(--color-white);
}

.cta__trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 18px;
}

.cta__trust .stars {
  color: #ffd166;
  letter-spacing: 1px;
}

.cta__heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  margin-bottom: 16px;
}

.cta__lead {
  font-size: 1.02rem;
  max-width: 460px;
  opacity: 0.92;
  margin-bottom: 32px;
}

.cta__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cta__media-wrap {
  position: relative;
}

.cta__media {
  position: relative;
  height: 360px;
  border-radius: 20px;
  overflow: hidden;
}

.cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__review {
  position: absolute;
  left: -16px;
  bottom: -38px;
  max-width: 215px;
  background: var(--color-white);
  color: var(--color-text);
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 25px 50px -15px rgba(15, 33, 51, 0.45);
}

.cta__review .stars {
  color: #ffd166;
  display: block;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.cta__review p {
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0 0 6px;
}

.cta__review .name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

@media (max-width: 860px) {
  .cta__grid {
    grid-template-columns: 1fr;
  }
  .cta__text {
    text-align: center;
  }
  .cta__trust,
  .cta__actions {
    justify-content: center;
  }
  .cta__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .cta__review {
    left: 16px;
    right: 16px;
    max-width: none;
    bottom: -20px;
  }
  .cta__media-wrap { display: none; }
}

.cta__btn-white {
  background: var(--color-white);
  color: var(--color-brand);
  padding: 16px 32px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.cta__btn-white:hover {
  background: #14202b;
  color: var(--color-white);
}

.cta__btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 16px 32px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
  color: var(--color-white);
}

.cta__btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 700px) {
  .cta {
    padding: 64px 0;
  }
  .cta__heading {
    font-size: 2rem;
  }
}

/* ---------- CTA final — versión móvil (≤860px): tarjeta sin foto, tinte sutil de marca ---------- */

.cta--mobile { display: none; }

@media (max-width: 860px) {
  .cta--desktop { display: none; }
  .cta--mobile { display: block; background: var(--color-bg-alt); padding: 40px 0; }
  .cta--mobile::after { display: none; }

  .cta-m__card {
    padding: 26px 20px; border-radius: 16px;
    background: rgba(42,95,145,0.06); border: 1px solid rgba(42,95,145,0.15);
    text-align: center;
  }
  .cta-m__trust {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 0.72rem; font-weight: 600; color: var(--color-text-soft); margin-bottom: 12px;
    white-space: nowrap;
  }
  .cta-m__trust .stars { color: #e0a82e; letter-spacing: 1px; }
  .cta-m__heading { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.2; margin-bottom: 10px; color: var(--color-text); }
  .cta-m__lead { font-size: 0.9rem; color: var(--color-text-soft); margin-bottom: 20px; line-height: 1.5; }
  .cta-m__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .cta-m__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; max-width: 280px; padding: 13px 20px; border-radius: 100px;
    font-weight: 600; font-size: 0.9rem; text-decoration: none;
    background: var(--color-brand); color: #fff;
  }
  .cta-m__btn--ghost { background: transparent; color: var(--color-brand); border: 1px solid var(--color-brand); }
}

.footer {
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  padding: 60px 0 24px;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer__logo {
  display: block;
  margin-bottom: 22px;
}

.footer__logo img {
  height: 18px;
  width: auto;
  display: block;
}

.footer__tag {
  font-size: 0.85rem;
  max-width: 260px;
}

.footer__heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  color: var(--color-text);
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem;
}

.footer__bottom {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__legal-links {
  display: flex;
  gap: 20px;
  color: var(--color-text-soft);
}
.footer__legal-links a {
  color: var(--color-text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__legal-links a:hover { color: var(--color-text); }

.contact-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  cursor: pointer;
  line-height: 1.5;
}
.contact-checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand);
  cursor: pointer;
}
.contact-checkbox a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 820px) {
  .footer__cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Footer — versión móvil (≤860px): pestañas Navegación/Contacto/Horario ---------- */

.footer--mobile { display: none; }

@media (max-width: 860px) {
  .footer--desktop { display: none; }
  .footer--mobile {
    display: block;
    background: var(--color-bg);
    padding: 40px 0 24px;
    text-align: center;
  }
  .footer--mobile .footer__logo { margin: 0 auto 10px; }
  .footer--mobile .footer__logo img { margin: 0 auto; }
  .footer-m__tag { margin: 0 auto; max-width: none; font-size: 0.72rem; white-space: nowrap; }

  /* acordeón del footer en móvil */
  .footer-m__accordion {
    margin-top: 20px;
    border: 1px solid rgba(28,28,28,0.1);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
  }
  .footer-m__item {
    border-bottom: 1px solid rgba(28,28,28,0.1);
  }
  .footer-m__item:last-child { border-bottom: none; }
  .footer-m__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    background: var(--color-white);
    user-select: none;
  }
  .footer-m__item.is-open .footer-m__head { background: var(--color-bg-alt); }
  .footer-m__chev {
    font-size: 0.6rem;
    color: var(--color-text-soft);
    transition: transform 0.22s;
    flex-shrink: 0;
  }
  .footer-m__item.is-open .footer-m__chev { transform: rotate(180deg); }
  .footer-m__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
  }
  .footer-m__item.is-open .footer-m__panel { max-height: 300px; }
  .footer-m__panel .footer__list { align-items: flex-start; padding: 10px 18px 14px; }

  .footer--mobile .footer__bottom { flex-direction: column; text-align: center; justify-content: center; }
  .footer--mobile .footer__legal-links { justify-content: center; }

  /* 3 columnas desplegables (validación home → luego resto) */
  .footer-m__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 20px;
    text-align: left;
  }
  .footer-m__col {
    display: flex;
    flex-direction: column;
  }
  .footer-m__tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 11px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-soft);
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    user-select: none;
    font-family: var(--font-body);
  }
  .footer-m__col.is-open .footer-m__tab-btn { color: var(--color-text); }
  .footer-m__col.is-open .footer-m__chev { transform: rotate(180deg); }
  .footer-m__col .footer-m__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
  }
  .footer-m__col.is-open .footer-m__panel { max-height: 300px; }
  .footer-m__col .footer-m__panel .footer__list {
    align-items: flex-start;
    padding: 6px 10px 12px;
    font-size: 0.75rem;
  }
}

/* ---------- Cabecera de página interna (reutilizable en /servicios, /sobre-nosotros...) ---------- */

.page-header {
  /* padding-bottom: 24px en escritorio (recuperado — se había colado un cambio a 8px
     sin media query durante la adaptación móvil, sin querer afectar aquí). */
  padding: 132px 0 24px;
}

@media (max-width: 700px) {
  .page-header {
    padding: 88px 0 4px;
  }
}

.page-header .section__heading {
  margin-bottom: 0;
}

.page-header .section__lead {
  margin-top: 12px;
}

/* ---------- Hub de Servicios (acordeón) ---------- */

.page-header + .section {
  padding-top: 16px;
}

@media (max-width: 700px) {
  .page-header + .section {
    padding-top: 8px;
  }
}

.btn--sm {
  padding: 10px 20px;
  font-size: 0.9rem;
}

/* ---------- Catálogo de Proyectos (carrusel) ---------- */

.tag-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: 999px;
  width: fit-content;
}

/* ---------- Carrusel de flechas del catálogo de proyectos — SOLO ESCRITORIO (>860px) ----------
   La versión móvil de este mismo catálogo es .proj-gallery-rich (más arriba en este archivo,
   sección "Galería de tarjetas con overlay completo"), ya construida y probada — no la toques.
   Esta clase (.proj-carousel--desktop) es la que oculta el carrusel de flechas en móvil; si
   algún día no se ve el carrusel de flechas en escritorio, revisa que esta regla siga existiendo. */
@media (max-width: 860px) {
  .proj-carousel--desktop { display: none; }
}

.carousel {
  position: relative;
}

/* Scroll horizontal con snap nativo: el navegador hace el desplazamiento (con inercia),
   tarjetas todas del mismo tamaño. Probado primero en pruebas/galeria-proyectos.html
   (opción 1) — sustituye al carrusel "1 grande + 4 pequeñas", que se sentía raro al
   cambiar de rol cada tarjeta (ver sección 9 de GUIA-ESTILO.md). */
.carousel__stage {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* padding generoso a propósito: poner overflow-x:auto fuerza a overflow-y a "auto"
     también (aunque no se declare), así que sin este margen la sombra de las tarjetas
     se corta en una línea recta por arriba/abajo en vez de difuminarse */
  padding: 28px 16px 44px;
  scrollbar-width: none;
}

.carousel__stage::-webkit-scrollbar {
  display: none;
}

.carousel__item {
  position: relative;
  flex: 0 0 300px;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  scroll-snap-align: start;
}

.carousel__card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  color: var(--color-white);
  /* sombra discreta a propósito: en la fila de scroll las tarjetas quedan muy
     juntas (gap de 20px), una sombra grande como la de otras secciones se nota
     como una mancha en el hueco entre tarjetas, sobre todo en la última visible */
  box-shadow: 0 10px 22px -14px rgba(28, 28, 28, 0.3);
}

.carousel__card picture,
.carousel__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.carousel__card:hover img {
  transform: scale(1.06);
}

.carousel__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 24, 34, 0) 40%, rgba(15, 24, 34, 0.82));
}

.carousel__info {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

.carousel__card .tag-pill {
  margin-bottom: 10px;
}

.carousel__card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
}

.carousel__loc {
  font-size: 0.74rem;
  opacity: 0.85;
  margin-top: 4px;
  display: block;
}

.carousel__desc {
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 8px;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--color-white);
  color: var(--color-text);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(28, 28, 28, 0.4);
  transition: var(--transition);
}

.carousel__arrow:hover {
  background: var(--color-brand);
  color: var(--color-white);
}

.carousel__arrow--prev {
  left: -23px;
}

.carousel__arrow--next {
  right: -23px;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: -16px 0 64px;
}

.carousel__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(28, 28, 28, 0.18);
  transition: var(--transition);
  cursor: pointer;
}

.carousel__dots span.is-active {
  background: var(--color-brand);
  width: 18px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .carousel__item {
    flex: 0 0 260px;
  }
}

@media (max-width: 680px) {
  .carousel__item {
    flex: 0 0 78vw;
  }
  .carousel__arrow--prev {
    left: 4px;
  }
  .carousel__arrow--next {
    right: 4px;
  }
}

/* Lightbox de galerías (proyecto-detalle) */
.pd-gallery-grid img,
.pd-room__grid img,
.bv-grid-b img {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 12, 12, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: 88vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.6);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.18);
}

.lightbox__close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1.8rem;
}

.lightbox__prev {
  left: 20px;
}

.lightbox__next {
  right: 20px;
}

@media (max-width: 640px) {
  .lightbox__close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }
  .lightbox__nav {
    width: 42px;
    height: 42px;
  }
  .lightbox__prev {
    left: 8px;
  }
  .lightbox__next {
    right: 8px;
  }
}

/* ---------- Página de proyecto individual (plantilla, /proyectos/[slug]/) ---------- */

.heroB { padding: 148px 0 24px; }
.pd-gallery-section { padding-top: 24px; }
.heroB-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }

@media (max-width: 700px) {
  .heroB { padding-top: 120px; }
}
.heroB-text .tag-pill-dark { display: inline-flex; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand); background: rgba(42, 95, 145, 0.08); padding: 5px 14px; border-radius: 999px; margin-bottom: 16px; }
.heroB-text h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 14px; line-height: 1.1; }
.heroB-text p.loc { color: var(--color-text-soft); font-size: 1.02rem; margin-bottom: 22px; }
.heroB-photo { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 35px 60px -30px rgba(28, 28, 28, 0.4); }
.heroB-photo img { width: 100%; height: 100%; object-fit: cover; }

.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
/* Ancho automático (recuperado — se había forzado a 2 por fila con flex:50% sin media query
   durante la adaptación móvil, sin querer afectar al escritorio). */
.pd-chip { font-size: 0.82rem; background: var(--color-bg-alt); color: var(--color-text-soft); padding: 6px 14px; border-radius: 100px; box-shadow: 0 2px 6px -2px rgba(28, 28, 28, 0.12); }

.pd-slider-glow { position: relative; border-radius: 9px; }
.pd-slider-glow::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  z-index: -1;
  opacity: 0;
  background: conic-gradient(from var(--angle), #0f2133, #2a5f91 25%, #bcdcf7 45%, #2a5f91 65%, #0f2133 100%);
  box-shadow: 0 35px 60px -25px rgba(15, 33, 51, 0.55), 0 0 40px -5px rgba(42, 95, 145, 0.35);
  animation: glow-rotate 7s linear infinite;
  transition: opacity 0.4s ease;
}
.pd-slider-glow:hover::before { opacity: 1; }

.pd-gallery { margin-top: 16px; }
.pd-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.pd-gallery-grid > div { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 20px 40px -28px rgba(28, 28, 28, 0.3); transform: translateZ(0); }
.pd-gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pd-gallery-grid > div:hover img { transform: scale(1.05); }

.pd-testimonio { background: var(--color-bg-alt); border-radius: 18px; padding: 40px 44px; margin-top: 8px; position: relative; }
.pd-testimonio::before { content: "\201C"; font-family: var(--font-display); font-size: 4rem; color: var(--color-brand); opacity: 0.25; position: absolute; top: 8px; left: 24px; }
@media (max-width: 860px) {
  .pd-testimonio { padding: 32px 24px; }
  .pd-testimonio .stars { padding-left: 40px; }
}
.pd-testimonio blockquote { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; max-width: 760px; position: relative; z-index: 1; }
.pd-testimonio .stars { color: #e0a82e; letter-spacing: 2px; margin-bottom: 14px; display: block; }
.pd-testimonio .autor { margin-top: 16px; font-weight: 600; }
.pd-testimonio .nota { font-size: 0.8rem; color: var(--color-text-soft); margin-top: 4px; }

/* "Más proyectos": foto 4:3 con sombra suave + enlace de texto en azul debajo (mismo
   estilo de enlace que el resto del sitio). Tantas tarjetas como quepan en la fila
   (recuperado — se había forzado a 2 por fila con max-width:50% sin media query
   durante la adaptación móvil, sin querer afectar al escritorio). */
.pd-otros { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 32px; justify-content: center; }
.pd-otros__item { flex: 1 1 200px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; text-decoration: none; }
.pd-otros__photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 30px -20px rgba(28, 28, 28, 0.35); }
.pd-otros__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.pd-otros__item:hover .pd-otros__photo img { transform: scale(1.04); }
.pd-otros__link { font-size: 0.92rem; color: var(--color-brand); border-bottom: 1px solid var(--color-brand-light); text-decoration: none; }
.pd-otros__more { display: inline-block; margin-top: 28px; font-size: 0.95rem; color: var(--color-brand); border-bottom: 1px solid var(--color-brand-light); text-decoration: none; }

@media (max-width: 700px) {
  .pd-otros__item { flex: 1 1 45%; max-width: 45%; }
}

.pd-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; margin-top: 28px; justify-content: center; }
.pd-rooms--3col { grid-template-columns: 1fr 1fr 1fr; }
.pd-room { max-width: 560px; width: 100%; }
.pd-room__label { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; margin-bottom: 12px; text-align: center; }
.pd-room__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-room__grid figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; box-shadow: 0 20px 40px -28px rgba(28, 28, 28, 0.3); }
.pd-room__grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-room__grid figcaption { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.92); color: var(--color-text); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; box-shadow: 0 4px 10px -2px rgba(28, 28, 28, 0.2); }

.pd-room-feature { max-width: 1040px; margin: 0 auto; }
.pd-room-feature .pd-room__label { font-size: 1.02rem; }
.pd-room__grid--feature figure { aspect-ratio: 4 / 3; }

/* Servicios — Baños ya entregados: galería simple sin pares antes/después */
.bv-grid-b { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bv-grid-b figure { margin: 0; }
.bv-grid-b__media { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px -28px rgba(28, 28, 28, 0.3); }
.bv-grid-b__media img { width: 100%; height: 100%; object-fit: cover; }
.bv-grid-b__link { display: inline-block; margin-top: 10px; font-size: 0.85rem; color: var(--color-brand); border-bottom: 1px solid var(--color-brand-light); text-decoration: none; }
.bv-grid-b__tag { position: absolute; top: 10px; left: 10px; z-index: 2; }
@media (max-width: 900px) { .bv-grid-b { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bv-grid-b { grid-template-columns: 1fr; } }

/* Modificador solo para "Proyectos relacionados" en microcemento.html: 2 columnas también
   en móvil estrecho (≤560px), en vez de 1 sola. No afecta a .bv-grid-b base ni a otras
   páginas que la usan (ej. reformas-banos.html), solo a las instancias con esta clase. */
@media (max-width: 560px) {
  .bv-grid-b.bv-grid-b--movil-2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.pd-scope__intro { max-width: 700px; margin-top: 14px; margin-bottom: 32px; }
.pd-scope__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pd-scope__item-inner { background: var(--color-bg); border-radius: 14px; padding: 22px 24px; box-shadow: 0 20px 40px -26px rgba(28, 28, 28, 0.28); display: flex; flex-direction: column; min-height: 210px; box-sizing: border-box; }
.pd-scope__icon { display: block; font-size: 1.4rem; margin-bottom: 10px; }
.pd-scope__item h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: 10px; color: var(--color-brand-dark); }
.pd-scope__item ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pd-scope__item li { font-size: 0.86rem; color: var(--color-text-soft); line-height: 1.4; padding-left: 14px; position: relative; }
.pd-scope__item li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-brand); }

@media (max-width: 900px) {
  .pd-scope__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .heroB { padding-top: 96px; }
  .heroB-grid { grid-template-columns: 1fr; gap: 22px; }
  .heroB-photo { order: -1; }
  .heroB--svc .btn { width: 100%; justify-content: center; }
}

@media (max-width: 800px) {
  .pd-gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pd-gallery-grid > div { aspect-ratio: 1 / 1; }
  .pd-gallery-grid > div:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

  /* Con 6 fotos, el primer hueco a ancho completo deja 5 en la rejilla de 2 columnas:
     la última queda sola en su fila. Solo en móvil, y solo en las galerías marcadas con
     este modificador (Arenal "Proceso", Parquet/Pladur "Así se hace"), se oculta la última
     para que la rejilla cierre en pares. En escritorio (3 columnas, 6 fotos) no hace falta
     y no se toca. */
  .pd-gallery-grid--par-movil > div:last-child { display: none; }
}

/* ---------- Testimonio colapsable en móvil ---------- */

.pd-testimonio__leer-mas { display: none; }

@media (max-width: 860px) {
  .pd-testimonio blockquote {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1rem;
  }
  .pd-testimonio blockquote.is-expanded {
    display: block;
    overflow: visible;
  }
  .pd-testimonio__leer-mas {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media (max-width: 900px) {
  .pd-rooms--3col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .pd-rooms { grid-template-columns: 1fr; justify-items: center; }
}

@media (max-width: 640px) {
  .pd-room__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .pd-scope__grid { grid-template-columns: 1fr; }
}

/* ---------- Baño a baño en móvil: pares lado a lado apilados verticalmente ---------- */
@media (max-width: 860px) {
  .pd-room-feature { max-width: 100%; }
  .pd-rooms { grid-template-columns: 1fr; justify-items: stretch; gap: 16px; margin-top: 16px; }
  .pd-room { max-width: 100%; width: 100%; }
  .pd-room__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pd-room__grid--feature figure { aspect-ratio: 1 / 1; }
  .pd-room__grid figcaption { font-size: 0.55rem; padding: 3px 7px; letter-spacing: 0.04em; }
}

/* ---------- Página de servicio individual (plantilla, /servicios/[slug].html) ---------- */
/* Reutiliza .heroB / .heroB-grid / .heroB-text / .tag-pill-dark / .pd-gallery / .pd-gallery-grid /
   .pd-scope__grid / .pd-room / .pd-otros de las páginas de proyecto (ver arriba). Lo de aquí es
   solo lo que de verdad es nuevo o necesita un ajuste para este tipo de página. */

.heroB--svc {
  padding-top: 148px;
}

@media (max-width: 860px) {
  .heroB--svc {
    padding-top: 88px;
  }
}

/* Separación entre secciones con una línea fina en vez de alternar color de fondo */
.heroB + .section,
.svc-page .section + .section {
  border-top: 1px solid rgba(28, 28, 28, 0.08);
}

/* "Qué incluye" — versión móvil (≤860px): rejilla 3×2 compacta con icono circular
   y resumen de 1 línea (en vez de las 3 viñetas completas, para que quepa todo
   en poco espacio). Misma lógica de .svc--desktop/.svc--mobile usada en el resto del sitio. */

.pd-scope--mobile { display: none; }

@media (max-width: 860px) {
  .pd-scope--desktop { display: none; }
  .pd-scope--mobile { display: block; }

  .pd-scope-m__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; margin-top: 22px; }
  .pd-scope-m__item { text-align: center; }
  .pd-scope-m__icon {
    width: 52px; height: 52px; border-radius: 50%; background: rgba(42,95,145,0.08);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    margin: 0 auto 8px;
  }
  .pd-scope-m__item h3 { font-size: 0.7rem; font-weight: 600; line-height: 1.25; }
}

/* "Por qué con nosotros" — versión móvil (≤860px): acordeón vertical */

.pillars--mobile { display: none; }

@media (max-width: 860px) {
  .pillars--desktop { display: none; }
  .pillars--mobile { display: block; }

  .pillars-m__list { margin-top: 18px; border-top: 1px solid rgba(28,28,28,0.1); }
  .pillars-m__item { border-bottom: 1px solid rgba(28,28,28,0.1); }
  .pillars-m__head { display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; }
  .pillars-m__num { font-family: var(--font-display); font-size: 1rem; color: var(--color-brand); width: 24px; flex-shrink: 0; }
  .pillars-m__head h3 { font-size: 0.88rem; font-weight: 600; flex: 1; margin: 0; }
  .pillars-m__chev { color: var(--color-brand); transition: transform 0.25s; }
  .pillars-m__item.is-open .pillars-m__chev { transform: rotate(180deg); }
  .pillars-m__panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .pillars-m__item.is-open .pillars-m__panel { max-height: 120px; }
  .pillars-m__panel p { font-size: 0.82rem; color: var(--color-text-soft); padding: 0 0 14px 36px; line-height: 1.5; margin: 0; }
}

/* "Proyectos relacionados" — versión móvil (≤860px): carrusel con título arriba
   y tarjeta con tinte de marca (variante E). Las fotos abren el lightbox ya
   existente reutilizando la clase .pd-room__grid, sin tocar el JS del lightbox. */

.pd-rooms--mobile { display: none; }

@media (max-width: 860px) {
  .pd-rooms--desktop { display: none; }
  .pd-rooms--mobile { display: block; }

  .pd-rooms-m__track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 18px -20px 0; padding: 4px 20px;
  }
  .pd-rooms-m__track::-webkit-scrollbar { display: none; }
  .pd-rooms-m__card {
    flex: 0 0 100%; scroll-snap-align: center;
    background: rgba(42,95,145,0.06); border-radius: 16px; padding: 16px;
  }
  .pd-rooms-m__card h3 { font-size: 0.96rem; font-weight: 600; margin-bottom: 12px; text-align: center; }
  .pd-rooms-m__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pd-rooms-m__pair figure {
    position: relative; margin: 0; border-radius: 12px; overflow: hidden;
    aspect-ratio: 1/1; cursor: pointer;
  }
  .pd-rooms-m__pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pd-rooms-m__pair figcaption {
    position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,0.92);
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; padding: 3px 9px; border-radius: 100px;
  }
  .pd-rooms-m__link {
    display: block; text-align: center; margin-top: 12px;
    font-size: 0.82rem; font-weight: 600; color: var(--color-text);
    text-decoration: none; border-bottom: 1px solid var(--color-brand);
    padding-bottom: 2px; width: fit-content; margin-left: auto; margin-right: auto;
  }
  .pd-rooms-m__hint {
    text-align: center; font-size: 0.74rem; color: var(--color-text-soft);
    margin: 12px 0 0; letter-spacing: 0.02em;
  }
  .pd-rooms-m__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
  .pd-rooms-m__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(28,28,28,0.2); }
  .pd-rooms-m__dots span.is-active { background: var(--color-brand); width: 18px; border-radius: 4px; }
}

/* Variante de 2 columnas para "Qué incluye" con 4 puntos (el original de 3 columnas es para
   las 6 cards de las páginas de proyecto). */
.pd-scope__grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* El original usa background:var(--color-bg) porque va sobre section--alt (beige) en las
   páginas de proyecto. En las páginas de servicio "Qué incluye" no es section--alt, así que
   sin esto las tarjetas se confunden con el fondo de la sección — fondo blanco + sombra algo
   más marcada para que destaquen, en las 5 páginas (3 o 4 columnas por igual). */
.svc-page .pd-scope__item-inner {
  background: var(--color-white);
  box-shadow: 0 24px 45px -28px rgba(28, 28, 28, 0.35);
}

/* El hover de .pillar (lift + box-shadow) está pensado para la Home, junto a una foto.
   En una página de servicio, sin tarjeta con cuerpo propio, la sombra se ve como una mancha. */
.pillars--flat .pillar:hover {
  transform: none;
  box-shadow: none;
}

/* Hueco "antes" pendiente dentro de un .pd-room__grid o .pd-gallery-grid, cuando no existe foto real */
.pd-room__pending {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-bg-alt);
  border: 1.5px dashed rgba(28, 28, 28, 0.25);
  color: var(--color-text-soft);
  font-size: 0.8rem;
  padding: 12px;
}

.pd-gallery-grid > .pd-room__pending,
.pd-room__grid > .pd-room__pending {
  box-shadow: none;
}

/* Link "ver proyecto completo" bajo cada antes/después relacionado */
.pd-room__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--color-brand);
  border-bottom: 1px solid var(--color-brand-light);
  text-decoration: none;
}

/* FAQ — acordeón simple */
.svc-faq {
  max-width: 760px;
  margin: 32px 0 0;
}

.svc-faq__item {
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
}

.svc-faq__item:first-child {
  border-top: 1px solid rgba(28, 28, 28, 0.12);
}

.svc-faq__head {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
}

.svc-faq__plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(28, 28, 28, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.svc-faq__item.is-open .svc-faq__plus {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
  transform: rotate(45deg);
}

.svc-faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-faq__item.is-open .svc-faq__panel {
  max-height: 200px;
}

.svc-faq__panel p {
  color: var(--color-text-soft);
  padding: 0 0 20px;
  margin: 0;
  font-size: 0.95rem;
}

/* FAQ en móvil — mismo tamaño/espaciado que el acordeón de "Por qué con nosotros" (.pillars-m__) */
@media (max-width: 860px) {
  .svc-faq { margin-top: 18px; }
  .svc-faq__head { padding: 14px 0; font-size: 0.88rem; gap: 12px; }
  .svc-faq__plus { width: 22px; height: 22px; font-size: 0.85rem; }
  .svc-faq__item.is-open .svc-faq__panel { max-height: 160px; }
  .svc-faq__panel p { font-size: 0.82rem; padding: 0 0 14px; line-height: 1.5; }
}

/* ---------- Página de Contacto ---------- */

.contact-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.contact-field label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.contact-field input,
.contact-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid rgba(28, 28, 28, 0.15);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-text);
  transition: var(--transition);
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(42, 95, 145, 0.15);
}
.contact-field textarea { min-height: 110px; resize: vertical; font-family: var(--font-body); }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--color-text-soft); opacity: 0.85; }

.contact-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.contact-phone-group { display: flex; gap: 8px; }
.contact-phone-group select {
  flex: 0 0 100px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 8px;
  border: 1px solid rgba(28, 28, 28, 0.15);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-text);
}
.contact-phone-group select:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(42, 95, 145, 0.15); }
.contact-phone-group input { flex: 1; min-width: 0; }

.contact-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.contact-btn { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 14px 24px; border-radius: 999px; transition: var(--transition); }
.contact-btn--solid { background: var(--color-brand); color: var(--color-white); }
.contact-btn--solid:hover { background: var(--color-brand-dark); transform: translateY(-1px); }
.contact-btn--ghost { background: var(--color-white); color: var(--color-text); border: 1.5px solid var(--color-brand); box-shadow: 0 14px 28px -20px rgba(28, 28, 28, 0.25); }
.contact-btn--ghost:hover { background: rgba(42, 95, 145, 0.06); transform: translateY(-1px); }
.contact-btn svg { width: 18px; height: 18px; }

.contact-split { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; margin-top: 32px; }
.contact-form-card { background: var(--color-white); border-radius: 18px; padding: 36px; box-shadow: 0 24px 48px -28px rgba(28, 28, 28, 0.28); }
.contact-form-card h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 6px; }
.contact-form-card > p.lead { color: var(--color-text-soft); font-size: 0.9rem; margin: 0 0 22px; }
.contact-form-hint { color: var(--color-text-soft); font-size: 0.82rem; text-align: center; margin-top: 12px; }

.contact-sidebar { background: var(--color-bg-alt); border-radius: 18px; padding: 30px; }
.contact-sidebar h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-soft); margin: 0 0 18px; }
.contact-sidebar-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.contact-sidebar-item:last-child { margin-bottom: 0; }
.contact-sidebar-item svg { width: 18px; height: 18px; color: var(--color-brand); flex-shrink: 0; margin-top: 2px; }
.contact-sidebar-item strong { display: block; font-size: 0.78rem; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.contact-sidebar-item a,
.contact-sidebar-item span { font-size: 0.92rem; color: var(--color-text); }
.contact-sidebar-item a:hover { color: var(--color-brand); }

@media (max-width: 860px) {
  .contact-split { grid-template-columns: 1fr; }
  .contact-form-row2 { grid-template-columns: 1fr; }
  /* Bug de desbordamiento horizontal: sin esto, el campo Teléfono (select + input dentro
     de un grid de 1 columna) no puede encogerse por debajo de su ancho mínimo automático,
     y eso fuerza a toda la tarjeta del formulario ~17px más ancha que la pantalla (el
     formulario se veía "cortado" por la derecha en móvil). min-width:0 en el grid item
     permite que se encoja con normalidad; no afecta al layout de escritorio (2 columnas). */
  .contact-field { min-width: 0; }

  /* "Llamar ahora" / "Enviar email" uno al lado del otro en móvil (antes se apilaban).
     Solo afecta a ≤860px — en escritorio los botones siguen exactamente igual. Al ser
     más compactos, el formulario ocupa menos alto y entra más completo en pantalla. */
  .contact-form-card { padding: 20px; }
  .contact-btns { flex-wrap: nowrap; gap: 8px; }
  .contact-btn { flex: 1 1 0; justify-content: center; padding: 10px 8px; font-size: 0.75rem; white-space: nowrap; gap: 5px; }
  .contact-btn svg { width: 14px; height: 14px; }
}

/* ===== Opiniones — adaptaciones móvil (V1) ===== */
.op-featured__leer-mas { display: none; }

@media (max-width: 860px) {
  /* cita truncada a 3 líneas */
  .op-featured__text blockquote {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 0.95rem;
    margin-bottom: 6px;
  }
  .op-featured__text blockquote.is-expanded {
    display: block;
  }
  .op-featured__leer-mas {
    display: block;
    background: none;
    border: none;
    color: var(--color-brand);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 10px;
    font-family: var(--font-body);
  }
  /* 6 reseñas: 2 columnas en móvil */
  .about-testi__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .about-testi__grid .va-card {
    padding: 12px;
  }
  .about-testi__grid .va-card blockquote {
    font-size: 0.73rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
  }
  .about-testi__grid .va-card .name { font-size: 0.72rem; }
  .about-testi__grid .va-card .meta { font-size: 0.65rem; }
}

/* ===== Sobre nosotros — adaptaciones móvil ===== */
@media (max-width: 860px) {

  /* obj-split: foto encima, preguntas como acordeón */
  .obj-split {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 24px;
  }
  .obj-split__photo {
    order: -1;
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: 8px;
  }
  .obj-split__row {
    border-top: none;
    border-bottom: 1px solid rgba(28,28,28,0.1);
    padding: 0;
    align-items: flex-start;
  }
  .obj-split__row:first-child { border-top: none; }
  .obj-split__num { padding-top: 14px; font-size: 0.9rem; }
  .obj-split__row > div { flex: 1; }
  .obj-split__row h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 0.875rem;
    margin: 0;
    gap: 8px;
    cursor: pointer;
  }
  .obj-split__row h3::after {
    content: "▾";
    font-size: 0.6rem;
    color: var(--color-text-soft);
    flex-shrink: 0;
    transition: transform 0.22s;
  }
  .obj-split__row.is-open h3::after { transform: rotate(180deg); }
  .obj-split__row p {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
    font-size: 0.82rem;
    margin: 0;
  }
  .obj-split__row.is-open p {
    max-height: 200px;
    padding-bottom: 14px;
  }

  /* proc-cards: timeline vertical */
  .proc-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: unset;
    margin-top: 28px;
    position: relative;
    padding-left: 52px;
  }
  .proc-cards::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 19px;
    bottom: 19px;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-brand), rgba(42,95,145,0.1));
    z-index: 0;
  }
  .proc-card {
    position: relative;
    text-align: left;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 22px 0;
    margin-top: 0;
  }
  .proc-card:last-child { padding-bottom: 0; }
  .proc-card__badge {
    position: absolute;
    left: -52px;
    top: 0;
    transform: none;
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
    margin: 0;
    box-shadow: 0 0 0 4px var(--color-bg);
    z-index: 1;
  }
  .proc-card h3 {
    font-size: 0.9rem;
    margin: 8px 0 4px;
    text-align: left;
    line-height: 1.3;
  }
  .proc-card p {
    font-size: 0.8rem;
    text-align: left;
  }

  /* qr-rows: acordeón */
  .qr-row {
    border-top: 1px solid rgba(28,28,28,0.1);
    padding: 0;
  }
  .qr-row:first-child {
    border-top: none;
    padding-top: 0;
  }
  .qr-row h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 0.875rem;
    margin: 0;
    gap: 8px;
    cursor: pointer;
  }
  .qr-row h3::after {
    content: "▾";
    font-size: 0.6rem;
    color: var(--color-text-soft);
    flex-shrink: 0;
    transition: transform 0.22s;
  }
  .qr-row.is-open h3::after { transform: rotate(180deg); }
  .qr-row blockquote,
  .qr-row .autor {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
    margin-top: 0;
    padding-bottom: 0;
  }
  .qr-row.is-open blockquote {
    max-height: 200px;
    padding-bottom: 4px;
  }
  .qr-row.is-open .autor {
    max-height: 60px;
    padding-bottom: 14px;
  }
  .qr-side-full { margin-top: 8px; }
}

/* ---------- Botón flotante WhatsApp ---------- */

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: var(--transition);
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 860px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }
}

/* ---------- Modal de cookies ---------- */

.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(15, 25, 35, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cookie-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.cookie-modal {
  background: var(--color-white);
  border-radius: 20px;
  max-width: 420px;
  width: 100%;
  padding: 32px 28px 28px;
  box-shadow: 0 40px 80px -20px rgba(15, 25, 35, 0.5);
  transform: translateY(12px);
  transition: transform 0.25s ease;
}

.cookie-modal-overlay.is-open .cookie-modal {
  transform: translateY(0);
}

.cookie-modal h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 12px;
  color: var(--color-text);
}

.cookie-modal p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-soft);
  margin: 0 0 20px;
}

.cookie-modal p a {
  color: var(--color-brand);
  border-bottom: 1px solid var(--color-brand-light);
  text-decoration: none;
}

.cookie-modal__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-modal__actions .btn {
  padding: 13px 24px;
  font-size: 0.9rem;
  flex: 1 1 auto;
  justify-content: center;
}

@media (max-width: 480px) {
  .cookie-modal { padding: 26px 22px 22px; }
  .cookie-modal__actions { flex-direction: column; }
}

.cookie-settings-link {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
}