/* --- VARIABLES DEL SISTEMA DE DISEÑO --- */
:root {
  --color-bg-primary: #F4F6F9;       /* Fondo Claro Principal */
  --color-bg-secondary: #FFFFFF;     /* Tarjetas y Secciones */
  --color-bg-tertiary: #E9ECEF;      /* Footer y Header Claro */
  --color-accent: #1B4FBE;          /* Azul Real Oficial (Acento Principal) */
  --color-accent-rgb: 27, 79, 190;
  --color-accent-blue: #1B4FBE;
  --color-accent-blue-rgb: 27, 79, 190;
  --color-accent-yellow: #F5C518;   /* Amarillo Dorado Oficial (Acento Secundario) */
  /* El mismo acento, pero para TEXTO sobre fondo claro. El #F5C518 ahí da
     1,51:1 —ilegible— y sobre marino 9,4:1. Un color no puede ser las dos
     cosas, así que el acento tiene dos valores según el suelo que le toque. */
  --color-accent-gold-text: #7E6000;
  --color-accent-yellow-rgb: 245, 197, 24;
  --color-text-title: #0D0E12;       /* Títulos Oscuros */
  --color-text-body: #495057;        /* Texto Cuerpo */
  --color-border-subtle: rgba(0, 0, 0, 0.08);
  /* Los dos anillos de los círculos de «qué pasa cuando escribes»: azul de marca
     muy rebajado, no un gris neutro, para que el círculo se lea de la familia del
     icono que tiene dentro. */
  --color-paso-anillo: rgba(27, 79, 190, 0.20);
  --color-paso-icono: #1B4FBE;
  --color-card-overlay: rgba(255, 255, 255, 0.7);
  
  --font-title: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Le dice al navegador de qué color pintar lo que dibuja ÉL y no el CSS:
     campos de formulario, desplegables, barras de desplazamiento y el
     calendario. Sin esto, en tema oscuro los <input> y <select> salían claros
     dentro de tarjetas oscuras. El tema lo marca una clase en <body>, así que
     el valor oscuro va con esa clase. */
  color-scheme: light;
  
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius-lg: 16px;
  --border-radius-md: 10px;
  --border-radius-sm: 6px;
}

/* --- TEMA OSCURO --- */
body.dark-theme {
  color-scheme: dark;
  --color-bg-primary: #0D0E12;      /* Negro Obsidiana */
  --color-bg-secondary: #1A1C23;    /* Gris Grafito */
  --color-bg-tertiary: #07080B;     /* Negro Puro (para Footer/Header) */
  --color-text-title: #FFFFFF;      /* Blanco Puro */
  --color-text-body: #B3B8C2;       /* Gris Platino */
  --color-accent-gold-text: #F5C518;
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  /* En oscuro el azul de marca se apaga contra el fondo: el anillo pasa a blanco
     rebajado, que es lo que ya hace --color-border-subtle en este tema. */
  --color-paso-anillo: rgba(255, 255, 255, 0.14);
  /* Y el icono sube a un azul claro de la misma familia: el #1B4FBE sobre el disco
     oscuro daba 2,38:1 —casi invisible—, y así pasa de 6,9:1 sin perder la marca
     ni gastar el amarillo, que aquí ya lo llevan el número y las flechas. */
  --color-paso-icono: #7FA6F2;
  --color-card-overlay: rgba(26, 28, 35, 0.7);
}

/* --- RESET & ESTILOS BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- TIPOGRAFÍA --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-title);
  font-family: var(--font-title);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.2;
}

p {
  color: var(--color-text-body);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

/* --- LAYOUT & CONTENEDORES --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

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

.section-title-wrapper {
  text-align: center;
  margin-bottom: 60px;
}

.section-kicker {
  color: var(--color-accent-gold-text);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 15px;
  display: block;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 18px;
}

.section-subtitle {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .section {
    padding: 60px 0;
  }
  .section-title {
    font-size: 1.8rem;
  }
}

/* --- BOTONES PREMIUM --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.25;
  padding: 15px 30px;
  border-radius: var(--border-radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #FFFFFF;
  box-shadow: 0 4px 15px rgba(var(--color-accent-rgb), 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.6);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-title);
  border: 2px solid rgba(13, 14, 18, 0.25);
  padding: 13px 28px;
}

.btn-secondary:hover {
  background-color: var(--color-text-title);
  color: var(--color-bg-primary);
  border-color: var(--color-text-title);
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-cta-nav {
  padding: 10px 20px;
  font-size: 0.8rem;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-accent);
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(var(--color-accent-rgb), 0.15);
}

.btn-cta-nav:hover {
  box-shadow: 0 0 15px var(--color-accent);
}

/* --- HEADER & NAVIGATION --- */
/* Acotado al id: una regla «header» suelta afectaba a CUALQUIER <header> de
   la página. La portada de las páginas de servicio usa uno y se volvía
   position:fixed encima de la barra, tapándola y descolocando el resto. */
#mainHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #FFFFFF;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: var(--transition-smooth);
}

#mainHeader.scrolled {
  background-color: #FFFFFF;
  padding: 10px 0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  transition: var(--transition-smooth);
}

#mainHeader.scrolled .header-container {
  height: 70px;
}

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

.brand-logo {
  height: 64px;
  width: auto;
  display: block;
  transition: var(--transition-smooth);
}

#mainHeader.scrolled .brand-logo {
  height: 54px;
}

/* Enlaces navegación */
.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 32px;
}

.nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text-body);
  position: relative;
  padding: 8px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: var(--transition-smooth);
}

.nav-link:hover {
  color: var(--color-text-title);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Selector de idioma. Discreto a propósito: es una utilidad, no una llamada a
   la acción, y no debe competir con «Cotizar rótulo». */
.btn-idioma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 8px 11px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-title);
  font-family: var(--font-title);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.btn-idioma:hover,
.btn-idioma:focus-visible {
  border-color: var(--color-accent-yellow);
  background-color: rgba(var(--color-accent-yellow-rgb), 0.16);
}

body.dark-theme .btn-idioma {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.22);
}

.nav-idioma {
  display: block;
  text-align: center;
  padding: 12px 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-sm);
  font-weight: 600;
}

/* Menú Hamburguesa Móvil */
/* El área de toque va a 44x44 aunque el dibujo sean tres rayas de 25 px: es el
   control más importante en móvil y medía 25x29. Las medidas de referencia son
   44x44 (Apple) y 48x48 (Google); el mínimo exigible de WCAG 2.2 es 24x24. */
.hamburger {
  display: none;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 1010;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.hamburger-line {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: var(--color-text-title);
  transition: var(--transition-smooth);
}

@media (max-width: 992px) {
  .hamburger {
    display: flex;
  }

  .hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 350px;
    /* dvh y no vh: en iOS el 100vh incluye la franja de la barra del navegador,
       así que el cajón quedaba más alto que la pantalla y su parte de abajo no
       se podía alcanzar. El vh va primero como respaldo. */
    height: 100vh;
    height: 100dvh;
    background-color: var(--color-bg-secondary);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 100px 40px;
    gap: 30px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1005;
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-actions {
    display: none;
  }

  .mobile-cta-item {
    display: block;
    width: 100%;
    margin-top: 15px;
  }

  .btn-mobile-menu {
    display: block;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 15px rgba(var(--color-accent-rgb), 0.2);
  }

  /* Mobile theme toggle container inside menu drawer */
  .mobile-theme-toggle-item {
    display: block;
    width: 100%;
    margin-top: 15px;
  }

  .mobile-lang-item {
    display: block;
    width: 100%;
    margin-top: 15px;
  }

  .theme-toggle-mobile {
    background: none;
    border: none;
    color: var(--color-text-body);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 0;
    outline: none;
    transition: var(--transition-smooth);
    width: 100%;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  
  .theme-toggle-mobile:hover {
    color: var(--color-text-title);
  }
  
  .theme-toggle-mobile svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
  }
  
  .theme-toggle-mobile .sun-icon {
    display: none;
  }
  
  .theme-toggle-mobile .moon-icon {
    display: block;
  }
  
  body.dark-theme .theme-toggle-mobile .sun-icon {
    display: block;
  }
  
  body.dark-theme .theme-toggle-mobile .moon-icon {
    display: none;
  }
  
  .theme-toggle-mobile .theme-text-light {
    display: inline;
  }
  
  .theme-toggle-mobile .theme-text-dark {
    display: none;
  }
  
  body.dark-theme .theme-toggle-mobile .theme-text-light {
    display: none;
  }
  
  body.dark-theme .theme-toggle-mobile .theme-text-dark {
    display: inline;
  }
}

/* Hide mobile menu elements on desktop */
@media (min-width: 993px) {
  .mobile-cta-item,
  .mobile-theme-toggle-item,
  .mobile-lang-item {
    display: none;
  }
}

/* --- HERO SECTION --- */
.hero {
  /* Ver la nota de .nav-menu: en iOS, 100vh deja el hero más alto que la
     pantalla y empuja el resto por debajo del pliegue. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: 100px;
  position: relative;
  background-image: 
    radial-gradient(circle at center, rgba(30, 96, 214, 0.04) 0%, rgba(244, 246, 249, 0) 70%),
    linear-gradient(180deg, var(--color-bg-primary) 0%, #E9ECEF 100%);
}.hero-kicker {
  color: var(--color-accent-yellow);
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-block;
  border-left: 2px solid var(--color-accent-yellow);
  padding-left: 12px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 24px;
  line-height: 1.1;
  color: var(--color-text-title);
}

.hero-subtitle {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--color-text-body);
  margin-bottom: 40px;
  max-width: 650px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}@media (max-width: 992px) {
  .hero {
    padding-top: 120px;
    padding-bottom: 60px;
  }  .hero-kicker {
    margin-bottom: 15px;
  }
  .hero-title {
    font-size: 2.5rem;
  }
  .hero-subtitle {
    margin: 0 auto 30px auto;
  }
  .hero-buttons {
    justify-content: center;
  }}

/* --- SERVICIOS --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  padding: 0;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-accent-yellow);
  box-shadow: 0 14px 32px rgba(11, 35, 80, 0.12);
}

/* --- Franja amarilla: icono + título --- */
.service-card__banda {
  background-color: var(--color-accent-yellow);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.service-card__icono {
  display: flex;
  flex-shrink: 0;
  /* Marino fijo, no variable de tema: la franja es amarilla en ambos temas */
  color: #0B2350;
  transition: var(--transition-smooth);
}

.service-card:hover .service-card__icono {
  transform: rotate(-6deg) scale(1.1);
}

/* Destello que cruza la franja al pasar el cursor: el rótulo "se enciende" */
.service-card__banda::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.60) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.service-card:hover .service-card__banda::after {
  animation: destello 0.75s ease-out;
}

@keyframes destello {
  0%   { left: -60%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

.service-card__cuerpo {
  padding: 22px 26px 28px;
}

.service-card-title {
  /* Marino fijo: va sobre amarillo también en tema oscuro, donde h3 sería blanco */
  color: #0B2350;
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: 0.6px;
  line-height: 1.25;
}

.service-card-text {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Sin latido del destello para quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .service-card:hover .service-card__banda::after { animation: none; }
  .service-card:hover .service-card__icono { transform: none; }
}

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

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

/* --- SECCIÓN FORMULARIO INTERACTIVO (COTIZADOR) --- */
.quote-section {
  background-image: 
    radial-gradient(circle at bottom right, rgba(var(--color-accent-rgb), 0.05) 0%, rgba(244, 246, 249, 0) 60%);
}

.quote-container {
  max-width: 800px;
  margin: 0 auto;
}

.quote-box {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  padding: 48px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  position: relative;
}

@media (max-width: 768px) {
  .quote-box {
    padding: 30px 20px;
  }
}

/* Barra de progreso */
.progress-bar-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 40px;
  padding: 0 10px;
}

.progress-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-50%);
  z-index: 1;
}

.progress-line-fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  transform: translateY(-50%);
  z-index: 1;
  transition: var(--transition-smooth);
}

.progress-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-bg-primary);
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-text-body);
  z-index: 2;
  transition: var(--transition-smooth);
  position: relative;
}

.progress-step.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.3);
}

.progress-step.completed {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg-primary);
}

/* Pasos del Formulario */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: stepFadeIn 0.4s ease forwards;
}

@keyframes stepFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-title {
  font-size: 1.2rem;
  margin-bottom: 24px;
  letter-spacing: 1px;
  border-left: 3px solid var(--color-accent);
  padding-left: 12px;
}

/* Paso 1: Grid de Servicios en Formulario */
.form-grid-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}

@media (max-width: 576px) {
  .form-grid-services {
    grid-template-columns: 1fr;
  }
}

.form-select-card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-md);
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: var(--transition-smooth);
  user-select: none;
}

.form-select-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.4);
}

.form-select-card.active {
  border-color: var(--color-accent-blue);
  background-color: rgba(var(--color-accent-blue-rgb), 0.04);
}

.form-select-icon {
  color: var(--color-text-body);
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.form-select-card.active .form-select-icon {
  color: var(--color-accent-blue);
}

.form-select-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-body);
  transition: var(--transition-smooth);
}

.form-select-card.active .form-select-label {
  color: var(--color-text-title);
}

/* Inputs de medidas */
.measurements-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-body);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.input-style {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-sm);
  padding: 12px 16px;
  color: var(--color-text-title);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition-smooth);
  width: 100%;
}

.input-style:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.15);
}

/* Paso 2: Botones de instalación */
.form-options-row {
  display: flex;
  gap: 16px;
  margin-bottom: 30px;
}

@media (max-width: 576px) {
  .form-options-row {
    flex-direction: column;
  }
}

.form-option-button {
  flex: 1;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-md);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  user-select: none;
}

.form-option-button:hover {
  border-color: rgba(var(--color-accent-rgb), 0.4);
}

.form-option-button.active {
  border-color: var(--color-accent-blue);
  background-color: rgba(var(--color-accent-blue-rgb), 0.04);
}

.form-option-title {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-body);
  transition: var(--transition-smooth);
}

.form-option-button.active .form-option-title {
  color: var(--color-accent-blue);
}

/* Paso 3: Estado de diseño y dropzone */
.form-options-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.form-radio-card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-md);
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: var(--transition-smooth);
  user-select: none;
}

.form-radio-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.4);
}

.form-radio-card.active {
  border-color: var(--color-accent-blue);
  background-color: rgba(var(--color-accent-blue-rgb), 0.04);
}

.form-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.form-radio-card.active .form-radio-dot {
  border-color: var(--color-accent-blue);
}

.form-radio-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent-blue);
  transform: scale(0);
  transition: var(--transition-smooth);
}

.form-radio-card.active .form-radio-dot::after {
  transform: scale(1);
}

.form-radio-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-body);
}

.form-radio-card.active .form-radio-text {
  color: var(--color-text-title);
}

/* Dropzone de archivo */
.file-dropzone {
  border: 2px dashed var(--color-border-subtle);
  background-color: var(--color-bg-primary);
  border-radius: var(--border-radius-md);
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.file-dropzone:hover, .file-dropzone.dragover {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 12px rgba(var(--color-accent-blue-rgb), 0.15);
}

.dropzone-icon {
  color: var(--color-text-body);
  margin-bottom: 12px;
  transition: var(--transition-smooth);
}

.file-dropzone:hover .dropzone-icon {
  color: var(--color-accent-blue);
  transform: translateY(-3px);
}

.dropzone-text {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.dropzone-text span {
  color: var(--color-accent-blue);
  font-weight: 600;
}

.dropzone-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

.file-input {
  display: none;
}

.file-preview {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 15px;
  background-color: rgba(255, 255, 255, 0.03);
  padding: 10px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border-subtle);
}

.file-preview-name {
  font-size: 0.85rem;
  color: var(--color-text-title);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview-remove {
  background: none;
  border: none;
  color: #FF5A5A;
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
}

/* Paso 4: Inputs de contacto */
.form-grid-contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 576px) {
  .form-grid-contact {
    grid-template-columns: 1fr;
  }
}

.form-contact-full {
  grid-column: span 2;
}

@media (max-width: 576px) {
  .form-contact-full {
    grid-column: span 1;
  }
}

/* Botones de navegación de pasos */
.form-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
  gap: 15px;
}

.btn-form-prev {
  background-color: transparent;
  color: var(--color-text-body);
  border: 1px solid var(--color-border-subtle);
}

.btn-form-prev:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-text-title);
}

.btn-form-next {
  margin-left: auto;
}

/* Pantalla de Éxito / Feedback final */
.success-screen {
  text-align: center;
  padding: 30px 10px;
  animation: stepFadeIn 0.5s ease forwards;
  display: none;
}

.success-icon-wrapper {
  width: 72px;
  height: 72px;
  background-color: rgba(var(--color-accent-rgb), 0.1);
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  margin-bottom: 24px;
  box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.2);
}

.success-title {
  font-size: 1.6rem;
  margin-bottom: 16px;
  letter-spacing: 1px;
}

.success-text {
  font-size: 1rem;
  max-width: 500px;
  margin: 0 auto 30px auto;
  line-height: 1.6;
}

/* --- FOOTER --- */
footer {
  background-color: var(--color-bg-tertiary);
  border-top: 1px solid var(--color-border-subtle);
  /* El hueco para el botón flotante de WhatsApp NO va aquí: 104px abajo para
     todos dejaba un vacío enorme bajo el copyright. El flotante ocupa los
     últimos 90px de la ventana, y el contenido solo le llega por debajo de
     1340px de ancho (container de 1200 + 24 de aire); ahí se aparta el bloque
     de enlaces legales, y en móvil, donde la fila se apila, se da alto. */
  padding: 60px 0 36px 0;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  /* Cuatro columnas: con tres, «Contacto de ventas» caía a una segunda fila y
     quedaba colgando debajo del logo. La última va más ancha porque lleva
     teléfonos, correo y dirección. */
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 40px;
  margin-bottom: 40px;
}

/* Cuatro columnas no caben en tableta: dos filas de dos, en vez de apretarlas. */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .footer-info-col { grid-column: 1 / -1; }
}

.footer-info-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-logo {
  display: flex;
  align-items: center;
}

.footer-logo .brand-logo {
  height: 70px;
}

.footer-desc {
  max-width: 320px;
  line-height: 1.6;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-col-title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-title);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link:hover {
  color: var(--color-accent);
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.social-icon {
  width: 36px;
  height: 36px;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-body);
  transition: var(--transition-smooth);
}

.social-icon:hover {
  background-color: var(--color-accent);
  color: var(--color-bg-primary);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.4);
}

/* Por debajo de 1340px el flotante de WhatsApp queda encima de la esquina
   inferior derecha del contenido, que es justo donde viven Privacidad y
   Términos. Se apartan a la izquierda en vez de estirar todo el pie. */
@media (max-width: 1340px) {
  .footer-legal-links { padding-right: 76px; }
}

/* Estrecho, la fila se apila y los enlaces quedan a la izquierda: ahí el
   estorbo del flotante es por abajo, no por la derecha. */
@media (max-width: 620px) {
  footer { padding-bottom: 104px; }
  .footer-legal-links { padding-right: 0; }
}

.footer-bottom {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* Venía del mockup como blanco al 40 %, pensado para un pie oscuro. El pie de
   este sitio es gris claro en tema claro, así que el texto quedaba a 1.07:1 —
   invisible. La variable del tema da 6.9:1 en claro y 10:1 en oscuro. */
.footer-copyright {
  color: var(--color-text-body);
  font-size: 0.8rem;
}

/* Los enlaces legales van en la barra inferior, junto al copyright: es donde
   los busca la gente y es la convención del sector. El color venía del mockup
   como blanco translúcido, ilegible sobre este pie. */
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  list-style: none;
  font-size: 0.8rem;
  color: var(--color-text-body);
}

.footer-legal-links a {
  color: var(--color-text-body);
  text-decoration: underline;
  text-decoration-color: var(--color-border-subtle);
  text-underline-offset: 3px;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

body.dark-theme .footer-legal-links a:hover,
body.dark-theme .footer-legal-links a:focus-visible {
  color: var(--color-accent-yellow);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* --- TOGGLE DE TEMA --- */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 50%;
  transition: var(--transition-smooth);
  margin-right: 20px;
  border: 1px solid var(--color-border-subtle);
  outline: none;
}

.theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-text-title);
  border-color: var(--color-accent-blue);
}

body.dark-theme .theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--color-accent);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .sun-icon {
  display: none;
}

.theme-toggle .moon-icon {
  display: block;
}

body.dark-theme .theme-toggle .sun-icon {
  display: block;
}

body.dark-theme .theme-toggle .moon-icon {
  display: none;
}

/* --- ADAPTACIÓN DE TEMA OSCURO --- */
body.dark-theme #mainHeader {
  background-color: rgba(13, 14, 18, 0.85);
  border-bottom: 1px solid var(--color-border-subtle);
}

body.dark-theme #mainHeader.scrolled {
  background-color: var(--color-bg-primary);
}

body.dark-theme .hero {
  background-image: 
    radial-gradient(circle at center, rgba(var(--color-accent-rgb), 0.08) 0%, rgba(13, 14, 18, 0) 70%),
    linear-gradient(180deg, var(--color-bg-primary) 0%, #0d0e12 100%);
}

body.dark-theme .quote-section {
  background-image: 
    radial-gradient(circle at bottom right, rgba(var(--color-accent-rgb), 0.05) 0%, rgba(13, 14, 18, 0) 60%);
}

body.dark-theme .quote-box {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

body.dark-theme .btn-secondary {
  border-color: rgba(255, 255, 255, 0.4);
}

body.dark-theme .btn-secondary:hover {
  background-color: var(--color-text-title);
  color: var(--color-bg-primary);
  border-color: var(--color-text-title);
}

/* --- SECCIÓN PORTAFOLIO --- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.portfolio-card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.portfolio-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-accent-blue);
  box-shadow: 0 12px 30px rgba(30, 96, 214, 0.05);
}

.portfolio-img-wrapper {
  position: relative;
  width: 100%;
  padding-top: 80%; /* Rectángulo apaisado moderno */
  overflow: hidden;
  background-color: #050608;
}

.portfolio-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.portfolio-card:hover .portfolio-img {
  transform: scale(1.05);
}

.portfolio-info {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}.portfolio-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.portfolio-desc {
  font-size: 0.9rem;
  line-height: 1.5;
}

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

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

/* --- WHATSAPP FLOATING WIDGET --- */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: var(--transition-smooth);
  animation: whatsapp-pulse 2s infinite;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  background-color: #128C7E;
}

.whatsapp-icon {
  width: 32px;
  height: 32px;
}

/* Tooltip text hidden by default, visible on hover */
.whatsapp-tooltip {
  position: absolute;
  right: 75px;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-title);
  border: 1px solid var(--color-border-subtle);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-smooth);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

/* Arrow for tooltip */
.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border-subtle);
  border-top: 1px solid var(--color-border-subtle);
}

.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  right: 80px;
}

/* Pulsing Animation */
@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* On very small devices, adjust float button */
@media (max-width: 480px) {
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
  }
  .whatsapp-icon {
    width: 26px;
    height: 26px;
  }
  .whatsapp-tooltip {
    display: none;
  }
}

/* ==========================================================================
   AÑADIDOS: accesibilidad, validación inline y portafolio destacado
   ========================================================================== */

/* --- Utilidades de accesibilidad --- */

/* Enlace de salto: invisible hasta recibir foco por teclado */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 2000;
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: 12px 20px;
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* Visible solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Anillo de foco consistente para todo lo interactivo */
a:focus-visible,
button:focus-visible,
[role="radio"]:focus-visible,
.input-style:focus-visible,
.file-dropzone:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

body.dark-theme a:focus-visible,
body.dark-theme button:focus-visible,
body.dark-theme [role="radio"]:focus-visible,
body.dark-theme .input-style:focus-visible {
  outline-color: var(--color-accent-yellow);
}

/* Bloquea el scroll del fondo con el menú móvil abierto */
body.menu-abierto {
  overflow: hidden;
}

/* --- Honeypot antispam: fuera de vista sin usar display:none --- */
/* Algunos bots ignoran los campos con display:none, así que se saca del flujo. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Validación inline (sustituye a los alert()) --- */

.field-error {
  color: #D93025;
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 6px;
  min-height: 0;
}

.field-error:empty {
  margin-top: 0;
}

body.dark-theme .field-error {
  color: #FF8A80;
}

.input-invalid {
  border-color: #D93025 !important;
}

.input-invalid:focus {
  box-shadow: 0 0 8px rgba(217, 48, 37, 0.2);
}

.form-error-summary {
  display: none;
  background-color: rgba(217, 48, 37, 0.08);
  border: 1px solid rgba(217, 48, 37, 0.35);
  border-radius: var(--border-radius-sm);
  color: #D93025;
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 12px 16px;
  margin-top: 20px;
}

.form-error-summary.visible {
  display: block;
}

body.dark-theme .form-error-summary {
  color: #FF8A80;
  background-color: rgba(255, 138, 128, 0.08);
}

.label-optional {
  color: var(--color-text-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Botón en estado de envío */
.btn.is-loading {
  opacity: 0.7;
  cursor: progress;
}

.btn:disabled {
  cursor: not-allowed;
}

/* textarea comparte .input-style pero necesita ajustes propios */
textarea.input-style {
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}

/* --- Portafolio: tarjeta destacada panorámica --- */

.portfolio-card--wide {
  grid-column: span 2;
}

/* Relación 16:9 para la imagen panorámica (el estándar es 5:4) */
.portfolio-img-wrapper--wide {
  padding-top: 56.25%;
}

@media (max-width: 992px) {
  /* Con 2 columnas la destacada ocupa la fila completa */
  .portfolio-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  /* Con 1 columna no puede abarcar dos */
  .portfolio-card--wide {
    grid-column: span 1;
  }
}

/* --- Footer: contacto (antes con estilos en línea) --- */

.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact-list svg {
  flex-shrink: 0;
}

/* Los teléfonos van en rejilla de dos: cuatro en una fila desbordaban la
   columna, y uno por fila estiraba el pie sin necesidad. */
.footer-telefonos {
  align-items: start !important;
}

.footer-telefonos svg {
  margin-top: 3px;
}

.footer-telefonos__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
}

/* El primero es el que aparece en los datos estructurados. Se distingue por
   peso, no por opacidad: al 72 % los otros tres caían a 3,2:1 sobre el pie
   claro, y un número de teléfono no es texto decorativo. */
.footer-telefonos__rejilla .es-principal { font-weight: 600; }

.footer-address {
  display: block !important;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-body);
  margin-top: 5px;
}

/* --- Respeto por quien pide menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .portfolio-card:hover {
    transform: none;
  }

  .portfolio-card:hover .portfolio-img {
    transform: none;
  }
}

/* ==========================================================================
   HERO TIPO SLIDE — imagen a sangre completa con bombillas encendiéndose
   Reutiliza .hero-kicker / .hero-title / .hero-subtitle / .hero-buttons
   ========================================================================== */

.hero-slide {
  position: relative;
  /* Contiene el mix-blend-mode de la capa de brillo dentro del hero */
  isolation: isolate;
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Azul de marca oscurecido (#1B4FBE llevado a sombra) en vez de negro:
     el hero deja de leerse genérico y hace complementario con el dorado. */
  background-color: #091A40;
}

/* La imagen se ancla a la derecha y no ocupa todo el ancho.
   Motivo: el hero (2.18) es más ancho que la foto (1.80), así que con
   object-fit:cover el escalado manda por ancho y object-position en X
   no tendría ningún efecto. Anclándola se corre la flecha a la derecha
   y además se amplía menos (1.28x en vez de 1.6x), o sea más nítida.
   La costura izquierda queda tapada por el degradado. */
.hero-slide__media,
.hero-slide__brillo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 82%;
}

.hero-slide__media img,
.hero-slide__brillo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  display: block;
}

/* Capa de bloom: sólo contiene los altos de la foto (las bombillas).
   En modo screen suma luz sobre la base, y la opacidad animada hace
   que enciendan y bajen suavemente. */
.hero-slide__brillo {
  mix-blend-mode: screen;
  opacity: 0.24;
  animation: bombillas 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bombillas {
  0%, 100% { opacity: 0.20; }
  50%      { opacity: 0.60; }
}

.hero-slide__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      #091A40 0%,
      rgba(9, 26, 64, 0.94) 18%,
      rgba(11, 32, 78, 0.86) 32%,
      rgba(13, 38, 92, 0.52) 56%,
      rgba(16, 45, 108, 0.18) 82%,
      rgba(16, 45, 108, 0.06) 100%),
    linear-gradient(180deg,
      rgba(9, 26, 64, 0.42) 0%,
      rgba(9, 26, 64, 0.02) 40%,
      rgba(9, 26, 64, 0.34) 100%);
}

.hero-slide > .container {
  position: relative;
  z-index: 2;
  padding-top: 90px;
}

.hero-slide__contenido {
  max-width: 640px;
}

/* El hero es oscuro: los textos del sistema necesitan invertirse */
.hero-slide .hero-title {
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.hero-slide .hero-subtitle {
  color: rgba(255, 255, 255, 0.86);
  max-width: 520px;
}

/* El CTA azul sobre el hero azul quedaba plano (2.6:1 contra el fondo).
   En el hero se usa el amarillo del logo: 8.5:1 contra el fondo y texto
   navy encima a 11.6:1. Sólo aquí; el resto del sitio sigue en azul. */
.hero-slide .btn-primary {
  background-color: var(--color-accent-yellow);
  color: #0D1B3E;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.30);
}

.hero-slide .btn-primary:hover {
  background-color: #FFD437;
  box-shadow: 0 0 22px rgba(var(--color-accent-yellow-rgb), 0.55);
}

.hero-slide .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.hero-slide .btn-secondary:hover {
  background-color: #fff;
  color: #0D0E12;
  border-color: #fff;
}

/* El header es blanco sólido: el logo se lee sobre su fondo natural y no
   necesita placa ni inversión de colores. En tema oscuro sigue oscuro
   (ver "ADAPTACIÓN DE TEMA OSCURO"). */

@media (max-width: 992px) {
  .hero-slide {
    min-height: 560px;
  }

  /* En móvil la foto ocupa todo el ancho y el degradado pasa a vertical */
  .hero-slide__media,
  .hero-slide__brillo {
    width: 100%;
  }

  /* Aquí sí manda la X: al ser el hueco más alto que ancho, cover escala por
     alto y sobra ancho, así que se puede encuadrar la punta de la flecha. */
  .hero-slide__media img,
  .hero-slide__brillo img {
    object-position: 62% 46%;
  }

  /* Más opaco que en escritorio: el titular cae sobre la zona brillante
     de la flecha y necesita contraste real, no sólo sombra de texto. */
  .hero-slide__velo {
    background:
      linear-gradient(180deg,
        rgba(9, 26, 64, 0.86) 0%,
        rgba(11, 32, 78, 0.76) 45%,
        rgba(9, 26, 64, 0.93) 100%);
  }

  /* El hero base centraba el texto en móvil; este va alineado a la izquierda */
  .hero-slide .hero-subtitle {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-slide .hero-buttons {
    justify-content: flex-start;
  }
}

/* Quien pide menos movimiento ve las bombillas encendidas fijas, sin latido */
@media (prefers-reduced-motion: reduce) {
  .hero-slide__brillo {
    animation: none;
    opacity: 0.42;
  }
}


/* ==========================================================================
   SECCIÓN CONTACTO — MAPA + FORMULARIO CORTO
   ========================================================================== */

/* .form-group fija display:flex, que le ganaría al atributo hidden del
   navegador y dejaría visibles los campos condicionales. Este reset lo evita. */
[hidden] {
  display: none !important;
}

/* --- Mapa: piezas comunes ------------------------------------------------- */

.mapa-imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El pin es un elemento del DOM, no parte de la imagen: así lleva los colores
   de la marca y el filtro del modo oscuro no lo toca. */
.mapa-pin {
  position: absolute;
  /* 36 % y no 50 %: en el centro el pin quedaba pegado al borde izquierdo de la
     tarjeta —16 px—. El mapa se generó con el taller a ese 36 % del ancho
     (centro corrido 190 m al este), así que el pin sigue cayendo en la calle. */
  left: 36%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -100%);
  /* Azul de marca, no el marino de las franjas: sobre el mapa claro pasa de 6:1
     y se lee como parte de la identidad, no como una sombra. */
  color: var(--color-accent-blue);
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.mapa-pin__cuerpo {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.1;
  paint-order: stroke;
}

.mapa-pin__ojo {
  fill: var(--color-accent-yellow);
  stroke: var(--color-accent-yellow);
}

/* El pulso nace en la punta del pin, que es el punto exacto de la dirección. */
.mapa-pin__pulso {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-bottom: -12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  animation: pin-pulso 2.6s ease-out infinite;
}

@keyframes pin-pulso {
  0%        { transform: scale(0.5); opacity: 0.8; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}

.mapa-abrir {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  padding: 12px 22px;
}

/* Atribución obligatoria de los datos de OpenStreetMap. Va abajo a la izquierda,
   que es la esquina donde el mapa se ve sin velo: arriba a la derecha caía sobre
   el marino sólido y atribuía una zona donde no hay mapa. */
.mapa-credito {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 3;
  margin: 0;
  padding: 2px 8px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.82);
  color: #33373F;
  font-size: 0.67rem;
  line-height: 1.5;
}

/* Con el mapa interactivo cargado, la fachada estática desaparece. El crédito
   de OpenStreetMap se va con ella: solo corresponde a la imagen estática, y
   dejarlo sobre el mapa de Google sería atribuir los datos a quien no es. */
.mapa-activo .mapa-imagen,
.mapa-activo .mapa-pin,
.ct-llegar.es-mapa-vivo .mapa-credito {
  display: none;
}

.mapa-marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Datos de contacto --------------------------------------------------- *//* --- Caja del formulario ------------------------------------------------ */

.contacto-caja {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  padding: 36px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

.contacto-caja__titulo {
  font-size: 1.12rem;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.contacto-caja__ayuda {
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 26px;
}

.contacto-caja__ayuda a,
.contacto-nota a {
  color: var(--color-accent);
  font-weight: 600;
}

.contacto-caja__ayuda a:hover {
  text-decoration: underline;
}

#leadForm .form-group {
  margin-bottom: 18px;
}

.contacto-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* La flecha del select se dibuja aparte: appearance:none quita la nativa. */
select.input-style {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.contacto-enviar {
  width: 100%;
  margin-top: 6px;
}

.contacto-nota {
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
  margin-top: 12px;
  color: #6B7280;
}

body.dark-theme .contacto-nota {
  color: #9AA3B2;
}

.contacto-exito {
  text-align: center;
  padding: 16px 0 8px;
}

.contacto-exito .success-text {
  margin-bottom: 24px;
}

/* --- Campo condicional del cotizador ------------------------------------ */

.quote-otro {
  margin-top: 22px;
}

.form-select-card--otro {
  border-style: dashed;
}

/* --- Tema oscuro -------------------------------------------------------- */

/* El mapa NO se invierte en modo oscuro. Se probó y quedaba ilegible: las
   teselas de OpenStreetMap son claras y al invertirlas las calles pasan a gris
   oscuro sobre gris oscuro. Aquí el mapa va claro dentro de la banda marina en
   los dos temas, y el contraste entre los dos es la gracia del diseño. El pin y
   el crédito tampoco cambian, porque el fondo que tienen debajo es el mismo. *//* El azul de marca baja a 2.4:1 sobre el fondo oscuro; el amarillo pasa de 12:1. */
body.dark-theme .contacto-caja__ayuda a,
body.dark-theme .contacto-nota a {
  color: var(--color-accent-yellow);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .contacto-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 560px) {
  .contacto-caja {
    padding: 26px 20px;
  }
  .contacto-fila {
    grid-template-columns: 1fr;
  }}

@media (prefers-reduced-motion: reduce) {
  .mapa-pin__pulso {
    animation: none;
    opacity: 0;
  }}

/* Sugerencia de corrección de correo: no es un error, así que no va en rojo. */
.field-error--sugerencia {
  color: var(--color-text-body);
}

.sugerencia {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.sugerencia:hover {
  color: var(--color-text-title);
}

body.dark-theme .sugerencia {
  color: var(--color-accent-yellow);
}


/* ==========================================================================
   PÁGINAS LEGALES
   ========================================================================== */

.legal-barra {
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.legal-barra__caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Fondo claro también en tema oscuro: el logotipo es azul con amarillo. */
.legal-barra__logo {
  display: block;
  width: 128px;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #FFFFFF;
}
.legal-barra__logo img { display: block; width: 100%; height: auto; }

.legal-barra__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-left: auto;
  font-size: 0.9rem;
}
.legal-barra__nav a { color: var(--color-text-body); font-weight: 500; }
.legal-barra__nav a:hover { color: var(--color-accent); }
body.dark-theme .legal-barra__nav a:hover { color: var(--color-accent-yellow); }

.legal-barra__volver {
  padding: 7px 15px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-sm);
  font-weight: 600;
}
.legal-barra__volver:hover {
  border-color: var(--color-accent-yellow);
  background-color: rgba(var(--color-accent-yellow-rgb), 0.14);
}

.legal { padding: 52px 0 76px; }

/* 68ch: el ancho en el que un párrafo largo se sigue leyendo sin perder la
   línea. Un texto legal a todo el ancho de la pantalla no se lee. */
.legal__caja { max-width: 68ch; }

.legal__titulo {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.legal__fecha { color: var(--color-text-body); font-size: 0.88rem; margin-bottom: 34px; }

.legal__indice {
  padding: 20px 24px;
  margin-bottom: 40px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-md);
  background-color: var(--color-bg-secondary);
}
.legal__indice-titulo {
  font-size: 0.76rem;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
}
.legal__indice ol { margin: 0; padding-left: 1.3em; display: grid; gap: 5px; }
.legal__indice li { color: var(--color-text-body); font-size: 0.9rem; }
.legal__indice a { color: var(--color-accent); }
.legal__indice a:hover { text-decoration: underline; }
body.dark-theme .legal__indice a { color: var(--color-accent-yellow); }

.legal__seccion { margin-bottom: 34px; scroll-margin-top: 20px; }

.legal__h2 {
  font-size: 1.05rem;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--color-accent-yellow);
}

.legal__seccion p { margin-bottom: 12px; line-height: 1.7; }

.legal__lista { margin: 0 0 12px; padding-left: 1.25em; display: grid; gap: 9px; }
.legal__lista li { color: var(--color-text-body); line-height: 1.65; }

.legal-pie {
  padding: 24px 0;
  border-top: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-body);
  font-size: 0.85rem;
  text-align: center;
}


/* ==========================================================================
   PÁGINA 404
   ========================================================================== */

.e404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px 0;
  text-align: center;
}

.e404__caja { max-width: 540px; }

/* Fondo claro para el logotipo, que es azul con amarillo. */
.e404__logo {
  display: block;
  width: 150px;
  margin: 0 auto 30px;
  padding: 6px 10px;
  border-radius: 10px;
  background-color: #FFFFFF;
}
.e404__logo img { display: block; width: 100%; height: auto; }

.e404__codigo {
  font-family: var(--font-title);
  font-size: clamp(3.2rem, 12vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--color-accent-yellow);
  margin-bottom: 6px;
}

.e404__titulo {
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.e404__texto {
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

.e404__rotulo {
  margin: 38px 0 12px;
  color: var(--color-text-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
}

.e404__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin-bottom: 26px;
}

.e404__enlaces a {
  display: block;
  padding: 9px 17px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-title);
  font-size: 0.9rem;
  font-weight: 600;
}

.e404__enlaces a:hover {
  border-color: var(--color-accent-yellow);
  background-color: rgba(var(--color-accent-yellow-rgb), 0.16);
}

.e404__tel { color: var(--color-text-body); font-size: 0.95rem; }
.e404__tel a { color: var(--color-accent); font-weight: 600; }
body.dark-theme .e404__tel a { color: var(--color-accent-yellow); }


/* ==========================================================================
   PREGUNTAS FRECUENTES
   ========================================================================== */

.faq-section {
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* 74ch: un ancho en el que una respuesta de tres líneas se sigue leyendo sin
   perder el renglón. Las preguntas a todo el ancho de la pantalla no se leen. */
.faq-container { max-width: 74ch; }

.faq-lista { display: grid; gap: 12px; }

.faq-item {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-md);
  background-color: var(--color-bg-primary);
  overflow: hidden;
}

.faq-item[open] { border-color: rgba(var(--color-accent-yellow-rgb), 0.55); }

.faq-item__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  color: var(--color-text-title);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.faq-item__pregunta::-webkit-details-marker { display: none; }
.faq-item__pregunta:hover { background-color: rgba(var(--color-accent-yellow-rgb), 0.07); }
.faq-item__pregunta:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }

/* El signo se dibuja con dos barras: una gira para formar la cruz o el menos,
   así no hace falta ni un icono ni una fuente extra. */
.faq-item__signo {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.faq-item__signo::before,
.faq-item__signo::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-accent-yellow);
  transition: var(--transition-smooth);
}
.faq-item__signo::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__signo::after { transform: rotate(0deg); }

.faq-item__respuesta {
  padding: 0 22px 20px;
  border-top: 1px solid var(--color-border-subtle);
}
.faq-item__respuesta p {
  margin-top: 16px;
  font-size: 0.97rem;
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__signo::before,
  .faq-item__signo::after { transition: none; }
}

@media (max-width: 560px) {
  .faq-item__pregunta { padding: 15px 16px; font-size: 0.95rem; }
  .faq-item__respuesta { padding: 0 16px 18px; }
}


/* ==========================================================================
   PÁGINAS DE SERVICIO
   ========================================================================== */

/* La barra del sitio es fija y mide 80 px (más 1 de borde). La portada no
   necesita hueco porque su hero va deliberadamente por debajo de la barra;
   estas páginas sí, o la barra les tapa el principio del contenido. */
main.svc { padding-top: 81px; }


/* --- Cabecera de la página --------------------------------------------- */

.svc-cabeza {
  padding: 60px 0 56px;
  background-color: #0B2350;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(245, 197, 24, 0.14) 0%, rgba(245, 197, 24, 0) 45%),
    radial-gradient(circle at 85% 80%, rgba(27, 79, 190, 0.45) 0%, rgba(27, 79, 190, 0) 55%);
}

/* 62ch: el H1 de una página de servicio es largo y a todo el ancho se lee mal. */
.svc-cabeza__caja { max-width: 62ch; }

.svc-cabeza__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 12px;
  background-color: var(--color-accent-yellow);
  color: #0B2350;
}

.svc-cabeza__titulo {
  color: #FFFFFF;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.svc-cabeza__intro {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.06rem;
  line-height: 1.65;
  margin-bottom: 28px;
}

/* En la cabecera oscura el CTA va en amarillo: el azul de marca sobre marino
   se queda en 2:1 y no cumple el mínimo de contraste. */
.svc-cabeza .btn-primary {
  background-color: var(--color-accent-yellow);
  color: #0B2350;
  box-shadow: 0 4px 18px rgba(var(--color-accent-yellow-rgb), 0.28);
}
.svc-cabeza .btn-primary:hover { filter: brightness(1.06); }

/* --- Qué incluye ------------------------------------------------------- */

.svc-puntos__caja { max-width: 74ch; }

.svc-h2 {
  font-size: 1.12rem;
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding-left: 13px;
  border-left: 3px solid var(--color-accent-yellow);
}
.svc-h2--centrado {
  padding-left: 0;
  border-left: 0;
  text-align: center;
  margin-bottom: 26px;
}

.svc-lista { list-style: none; display: grid; gap: 14px; }

.svc-lista li {
  position: relative;
  padding-left: 30px;
  line-height: 1.65;
  color: var(--color-text-body);
}

/* Marca de verificación dibujada con dos bordes: sin icono ni fuente extra. */
.svc-lista li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--color-accent-yellow);
  border-bottom: 2.5px solid var(--color-accent-yellow);
  transform: rotate(-45deg);
}

.svc-trabajos { background-color: var(--color-bg-secondary); }

/* --- Llamada a la acción ---------------------------------------------- */

.svc-cta { background-color: var(--color-bg-secondary); border-top: 1px solid var(--color-border-subtle); }
.svc-cta__caja { max-width: 60ch; text-align: center; }
.svc-cta__titulo { font-size: 1.4rem; letter-spacing: 1px; margin-bottom: 12px; }
.svc-cta__texto { font-size: 1.02rem; line-height: 1.65; margin-bottom: 26px; }
.svc-cta__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* --- Otros servicios -------------------------------------------------- */

.svc-otros__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.svc-otro {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-title);
  font-weight: 600;
}

.svc-otro:hover {
  border-color: var(--color-accent-yellow);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(11, 35, 80, 0.10);
}

.svc-otro__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background-color: var(--color-accent-yellow);
  color: #0B2350;
}

.svc-otro__nombre { font-size: 0.95rem; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .svc-otro:hover { transform: none; }
}

@media (max-width: 560px) {
  .svc-cabeza { padding: 42px 0 40px; }
}

/* El título de la tarjeta de servicio es un enlace a su página; hereda el
   marino de la franja y solo se subraya al pasar por encima. */
.service-card-title a { color: inherit; text-decoration: none; }
.service-card-title a:hover,
.service-card:hover .service-card-title a { text-decoration: underline; }

.service-card__mas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--color-accent);
  font-size: 0.88rem;
  font-weight: 600;
}
.service-card__mas span { transition: var(--transition-smooth); }
.service-card:hover .service-card__mas span { transform: translateX(4px); }
body.dark-theme .service-card__mas { color: var(--color-accent-yellow); }

@media (prefers-reduced-motion: reduce) {
  .service-card:hover .service-card__mas span { transform: none; }
}

/* --- Bloques de reparto de la portada ----------------------------------- */

.seccion-mas { margin-top: 34px; text-align: center; }

.resumen-nosotros {
  background-color: #0B2350;
  text-align: center;
}
.resumen-nosotros__caja { max-width: 74ch; }
.resumen-nosotros .section-title { color: #FFFFFF; }
.resumen-nosotros .section-subtitle { color: rgba(255, 255, 255, 0.84); }
/* Sobre marino, el azul de marca no llega al contraste mínimo. */
.resumen-nosotros .btn-secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); }
.resumen-nosotros .btn-secondary:hover { background-color: #FFFFFF; color: #0B2350; border-color: #FFFFFF; }

/* Las preguntas frecuentes, justo encima, van en blanco; el cierre alterna al
   tono de página para que se lean como dos bloques y no como uno solo. */
.cierre {
  background-color: var(--color-bg-primary);
  border-top: 1px solid var(--color-border-subtle);
  text-align: center;
}
.cierre__caja { max-width: 62ch; }
.cierre__titulo { font-size: clamp(1.4rem, 4vw, 1.9rem); letter-spacing: 1px; margin-bottom: 14px; }
.cierre__texto { font-size: 1.05rem; line-height: 1.65; margin-bottom: 28px; }
.cierre__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Las páginas internas necesitan el mismo hueco que las de servicio: la barra
   del sitio es fija y mide 80 px más el borde. */
main.interna { padding-top: 81px; }

/* Enlace de texto bajo los botones del cierre: es una salida secundaria, no
   una tercera llamada a la acción compitiendo con las dos de arriba. */
.cierre__enlace { margin-top: 18px; font-size: 0.95rem; }
.cierre__enlace a {
  color: var(--color-text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cierre__enlace a:hover { color: var(--color-primary); }

/* El mismo botón de «ver más», cuando va suelto al final de una página y no
   dentro de una sección. */
.seccion-mas--suelta { margin: 0 auto 72px; text-align: center; }

/* --- Preguntas: la caja para preguntar lo que no está en la lista -------- */

.faq-duda {
  background-color: var(--color-bg-primary);
  border-top: 1px solid var(--color-border-subtle);
}
.faq-duda__caja { max-width: 74ch; }
/* Aquí la caja no compite con un mapa al lado, así que no necesita el marco. */
.faq-duda .contacto-caja {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.faq-duda .contacto-caja__titulo { font-size: clamp(1.35rem, 3.5vw, 1.75rem); }
.faq-duda .contacto-caja__ayuda { margin-bottom: 28px; }

/* --- Portafolio: el tipo de trabajo por delante del cliente -------------- */

/* El nombre del cliente ya se lee en la foto (está rotulado ahí); quien busca
   «rotulación de vehículos» no busca «Aerostar». Así que el titular de la
   tarjeta es el tipo de trabajo y el cliente va debajo, en pequeño. */
.portfolio-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
  letter-spacing: normal;
}

.portfolio-title__tipo {
  font-family: var(--font-title);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.3px;
  color: var(--color-text-title);
}

.portfolio-title__cliente {
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-body);
}

/* --- Filtro por categoría ----------------------------------------------- */

.pf-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 12px;
}

.pf-filtro__rotulo {
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-text-body);
}

.pf-filtro__grupo { display: flex; flex-wrap: wrap; gap: 8px; }

.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-body);
  font-family: var(--font-title);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.pf-chip:hover { border-color: var(--color-accent-blue); color: var(--color-accent-blue); }

.pf-chip.es-actual {
  background-color: #0B2350;
  border-color: #0B2350;
  color: #FFFFFF;
}

.pf-chip__n {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.pf-cuenta {
  margin: 0 0 22px;
  font-size: 0.88rem;
  color: var(--color-text-body);
}

.pf-vacio { margin: 30px 0 0; text-align: center; color: var(--color-text-body); }

/* Ocultar por filtro es distinto de no existir: la tarjeta sigue en el HTML
   para los buscadores, pero sale del orden de tabulación. */
.portfolio-card[hidden] { display: none; }

/* --- Mosaico de la portada: piezas iguales ------------------------------- */

.pf-mosaico {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pf-pieza {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--border-radius-md, 12px);
  background-color: #0B2350;
}

.pf-pieza__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pf-pieza:hover .pf-pieza__img,
.pf-pieza:focus-within .pf-pieza__img { transform: scale(1.055); }

/* Degradado propio y no una capa plana: sostiene el texto abajo sin apagar
   la mitad de arriba de la foto. */
.pf-pieza__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(11, 35, 80, 0.94) 0%,
    rgba(11, 35, 80, 0.60) 34%,
    rgba(11, 35, 80, 0.05) 66%,
    rgba(11, 35, 80, 0) 100%);
}

.pf-pieza__texto {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 17px;
}

.pf-pieza__tipo {
  font-family: var(--font-title);
  font-size: clamp(0.95rem, 1.5vw, 1.12rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.3px;
  color: #FFFFFF;
}

.pf-pieza__cliente {
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 720px) {
  .pf-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pf-pieza__texto { padding: 12px 13px 13px; }
  .pf-filtro { gap: 8px 12px; }
}

/* --- Contacto: los bloques que estaban en falta ------------------------- */

/* Rótulos opcionales por teléfono: cuál es ventas, cuál el taller. *//* Foto del taller: banda a lo ancho entre las dos columnas y los bloques. *//* --------------------------------------------------------------------------
   «Qué pasa cuando escribes» — línea de tiempo de tres pasos
   Círculo con el icono, número encima y flecha amarilla al siguiente. La
   numeración es la propia secuencia, y por eso el marcado es un <ol>: las
   flechas son decorativas y no llevan el orden.
   -------------------------------------------------------------------------- */

.pasos {
  /* Diámetro del círculo y largo de la flecha. Van juntos aquí porque la flecha
     se coloca a media altura del círculo y necesita su medida. */
  --paso-disco: clamp(104px, 12vw, 150px);
  --paso-flecha: clamp(52px, 7vw, 104px);
  margin: 54px 0 0;
}

.pasos__titulo {
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-title);
  margin: 0 0 clamp(36px, 4vw, 58px);
}

/* La barra amarilla del titular. */
.pasos__titulo::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin: 15px auto 0;
  border-radius: 2px;
  background-color: var(--color-accent-yellow);
}

.pasos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Sin hueco entre columnas: por ahí pasa la flecha. El de las filas sí, para el
     caso de que alguien añada un cuarto paso desde el panel. */
  column-gap: 0;
  row-gap: clamp(34px, 4vw, 52px);
}

.pasos__paso {
  position: relative;
  text-align: center;
  padding: 0 clamp(8px, 1.6vw, 22px);
}

/* La flecha: el palo y la punta, en dos pseudoelementos. Se centra en el borde
   izquierdo de la celda —que es la frontera entre dos pasos— y va a media altura
   del círculo. No la lleva el primer paso, de ahí el selector de hermano. */
.pasos__paso + .pasos__paso::before,
.pasos__paso + .pasos__paso::after {
  content: "";
  position: absolute;
  top: calc(var(--paso-disco) / 2);
  transform: translateY(-50%);
  pointer-events: none;
}

.pasos__paso + .pasos__paso::before {
  left: calc(-1 * var(--paso-flecha) / 2);
  width: calc(var(--paso-flecha) - 9px);
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-accent-yellow);
}

.pasos__paso + .pasos__paso::after {
  left: calc(var(--paso-flecha) / 2 - 9px);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid var(--color-accent-yellow);
}

/* En tres columnas, el paso que abre una fila nueva no lleva flecha: con un
   cuarto paso añadido desde el panel, le entraría una por la izquierda desde la
   nada. Apilados no hace falta la excepción, porque cada paso es su propia fila. */
@media (min-width: 901px) {
  .pasos__paso:nth-child(3n + 1)::before,
  .pasos__paso:nth-child(3n + 1)::after {
    content: none;
  }
}

.pasos__marca {
  position: relative;
  width: var(--paso-disco);
  height: var(--paso-disco);
  margin: 0 auto clamp(18px, 2vw, 26px);
}

/* El anillo de fuera, separado del disco: es lo que le da el aire del diseño. */
.pasos__marca::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid var(--color-paso-anillo);
}

.pasos__disco {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-paso-anillo);
  background-color: var(--color-bg-secondary);
  color: var(--color-paso-icono);
  box-shadow: 0 10px 26px rgba(11, 35, 80, 0.08);
}

/* El número monta sobre el borde del círculo, abajo a la izquierda. En amarillo
   de marca con la cifra en marino: 9,5:1, y pone el acento en los tres puntos
   donde la vista se para. */
.pasos__numero {
  position: absolute;
  left: 2%;
  bottom: 4%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(30px, 3.2vw, 40px);
  height: clamp(30px, 3.2vw, 40px);
  border-radius: 50%;
  background-color: var(--color-accent-yellow);
  color: #0B2350;
  font-family: var(--font-title);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 9px rgba(11, 35, 80, 0.24);
}

/* La regla global de h1..h6 pone mayúsculas y 2px de letra espaciada; aquí el
   rótulo va en caja normal, como en el diseño: en mayúsculas «Te enviamos la
   cotización» ocupaba dos líneas y competía con el titular de la sección. */
.pasos__rotulo {
  font-family: var(--font-title);
  font-size: clamp(0.98rem, 1.35vw, 1.15rem);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.2px;
  color: var(--color-text-title);
  margin: 0 0 9px;
}

.pasos__texto {
  margin: 0 auto;
  max-width: 30ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-body);
}

/* Los municipios como pastillas: se leen de un barrido, que es como se busca
   «¿llegan hasta mi pueblo?». */@media (max-width: 900px) {
  /* En vertical los tres pasos se apilan y la flecha gira: el hueco de la
     rejilla pasa a ser vertical, así que la punta mira hacia abajo. */
  .pasos {
    --paso-disco: clamp(92px, 26vw, 118px);
    --paso-flecha: clamp(30px, 7vw, 44px);
  }
  .pasos__lista {
    grid-template-columns: 1fr;
    gap: calc(var(--paso-flecha) + clamp(16px, 4vw, 26px));
  }
  .pasos__paso { padding: 0; }
  /* Apilados, cada paso es su propia fila: la flecha la lleva cualquiera menos
     el primero, sin la excepción de nth-child que hace falta en tres columnas. */
  .pasos__paso + .pasos__paso::before,
  .pasos__paso + .pasos__paso::after {
    top: auto;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  .pasos__paso + .pasos__paso::before {
    width: 2px;
    height: calc(var(--paso-flecha) - 9px);
    margin-bottom: 9px;
  }
  .pasos__paso + .pasos__paso::after {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--color-accent-yellow);
    border-bottom: 0;
  }
  .pasos { margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   «¿Se te apagó un rótulo?» — reparación y mantenimiento
   Panel marino con la foto sangrando por la derecha y fundiéndose en el azul, y
   las cuatro averías con icono amarillo debajo del botón. Estaba en Contacto; el
   cliente lo pidió detrás de las dos tarjetas de cierre de /servicios.
   -------------------------------------------------------------------------- */

.sv-averia {
  padding: 0 0 clamp(56px, 6vw, 96px);
}

/* Dos filas: arriba texto y foto, abajo las averías cruzando el panel entero.
   Con áreas y no con span porque la fila de averías puede no existir —si el
   cliente vacía la lista, la segunda fila simplemente no se crea. */
.sv-averia__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas:
    "texto  foto"
    "fallos fallos";
  align-items: center;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background-color: #0B2350;
}

/* Sin foto, el texto se queda con el ancho entero y se le pone un tope de línea
   para que no salgan renglones de 120 caracteres. */
.sv-averia__panel--sinfoto {
  grid-template-columns: 1fr;
  grid-template-areas: "texto" "fallos";
}
.sv-averia__panel--sinfoto .sv-averia__parrafo { max-width: 62ch; }

.sv-averia__texto {
  grid-area: texto;
  position: relative;
  z-index: 2;
  padding: clamp(28px, 3.4vw, 52px) clamp(28px, 3.4vw, 52px) 0;
}

.sv-averia__titulo {
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  margin: 0;
}

/* La barra amarilla del titular, igual que en «qué pasa cuando escribes». */
.sv-averia__titulo::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin: 14px 0 0;
  border-radius: 2px;
  background-color: var(--color-accent-yellow);
}

.sv-averia__parrafo {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  max-width: 44ch;
  font-size: 0.97rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.9);
}

.sv-averia__accion { margin: clamp(20px, 2.2vw, 28px) 0 0; }

.sv-averia__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sv-averia__wa-ico { flex: 0 0 auto; }

/* Las cuatro averías. El separador va como borde del punto y no como elemento
   aparte, y el primero de cada fila no lo lleva: así no sobra una línea al
   principio. Mismo recurso que en «qué conviene tener a mano». */
.sv-averia__fallos {
  grid-area: fallos;
  position: relative;
  z-index: 2;
  list-style: none;
  /* El relleno lateral es el del texto, para que la primera avería quede a plomo
     con el titular. */
  margin: 0;
  padding: clamp(26px, 3vw, 40px) clamp(28px, 3.4vw, 52px) clamp(28px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sv-averia__fallo {
  padding: 0 clamp(8px, 1.1vw, 16px);
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.sv-averia__fallo:first-child { border-left: 0; }

.sv-averia__fallo-ico {
  display: block;
  color: var(--color-accent-yellow);
  margin-bottom: 10px;
}

.sv-averia__fallo-texto {
  display: block;
  font-family: var(--font-title);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  color: #FFFFFF;
}

.sv-averia__foto {
  grid-area: foto;
  position: relative;
  align-self: stretch;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

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

/* El velo funde la foto con el azul por la izquierda: sin recuadro ni filo, foto
   y panel se leen como una sola pieza. z-index para que pinte SOBRE la imagen —los
   pseudoelementos absolutos van en orden de documento y sin esto quedaría debajo. */
.sv-averia__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    #0B2350 0%,
    rgba(11, 35, 80, 0.88) 16%,
    rgba(11, 35, 80, 0.45) 40%,
    rgba(11, 35, 80, 0.10) 68%,
    rgba(11, 35, 80, 0) 100%);
}

@media (max-width: 900px) {
  .sv-averia__panel {
    grid-template-columns: 1fr;
    grid-template-areas: "foto" "texto" "fallos";
  }
  /* La foto arriba: apilada al final cerraba el bloque con una imagen muda. */
  .sv-averia__foto { order: -1; min-height: 190px; }
  /* En vertical el velo gira: funde hacia abajo, contra el texto. */
  .sv-averia__velo {
    background: linear-gradient(180deg,
      rgba(11, 35, 80, 0) 34%,
      rgba(11, 35, 80, 0.55) 72%,
      #0B2350 100%);
  }
  .sv-averia__fallos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 4vw, 28px) 0;
  }
  /* En dos columnas el separador lo llevan las de la derecha, no la primera de
     cada fila: :first-child solo acierta con una sola fila. */
  .sv-averia__fallo:nth-child(odd) { border-left: 0; }
  /* Hueco para el botón flotante de WhatsApp, que es fijo y se come los últimos
     90px de la esquina inferior derecha. */
  .sv-averia__fallos { padding-bottom: clamp(72px, 16vw, 96px); }
}

/* --- Nosotros: los bloques de fondo -------------------------------------- */

.ns-bloque { margin: 58px 0 0; }

@media (max-width: 900px) {
  .ns-bloque { margin-top: 44px; }
}


/* Sobre las secciones marinas el amarillo de marca da 9,4:1, así que ahí vuelve
   el vivo: el oro oscuro se apagaría contra ese fondo. */
.resumen-nosotros .section-kicker,
.svc-cabeza .section-kicker { color: var(--color-accent-yellow); }

/* --- Menú: cuál está seleccionado --------------------------------------- */

/* Reutiliza el subrayado que ya existía para el hover, dejándolo fijo: no hace
   falta inventar otro lenguaje visual para decir «estás aquí». */
.nav-link.es-actual {
  color: var(--color-text-title);
  font-weight: 600;
}

.nav-link.es-actual::after { width: 100%; }

/* El botón de cotizar ya es sólido, así que el subrayado no se vería: cuando la
   página actual es /cotizar se le pone un aro alrededor. */
.btn-cta-nav.es-actual {
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.28);
}

.btn-mobile-menu.es-actual {
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.28);
}

/* En el menú desplegado del móvil el subrayado queda raro porque los enlaces
   ocupan toda la fila: ahí se marca con una barra a la izquierda. */
@media (max-width: 992px) {
  .nav-link.es-actual::after { width: 0; }

  .nav-menu .nav-link.es-actual {
    border-left: 3px solid var(--color-accent);
    padding-left: 12px;
  }
}

/* El subrayado del menú es azul, y sobre la cabecera oscura da 2,67:1: es la
   señal de «estás aquí» y hay que verla. En oscuro pasa al amarillo, que ahí da
   11,8:1 — el mismo cambio de acento que ya hace el sitio en otros sitios.
   Cubre también el subrayado del hover, que tenía el mismo problema. */
body.dark-theme .nav-link::after { background-color: var(--color-accent-yellow); }

body.dark-theme .nav-menu .nav-link.es-actual { border-left-color: var(--color-accent-yellow); }

body.dark-theme .btn-cta-nav.es-actual,
body.dark-theme .btn-mobile-menu.es-actual {
  box-shadow: 0 0 0 3px rgba(var(--color-accent-yellow-rgb), 0.45);
}

/* La cabecera es fija y mide 80 px: sin esto, saltar a un ancla deja el título
   de la sección escondido debajo. Afecta al único ancla de navegación que
   queda —«Ver trabajos reales» del hero— y a cualquiera que se añada. */
section[id] { scroll-margin-top: 92px; }

/* --- Nosotros: la franja marina y el detalle ----------------------------- */

/* La sección marina es la presentación: titular y las tres tarjetas. El resto
   del contenido va en su propia sección, sobre el fondo normal. Con todo dentro
   del marino la página se leía como un muro azul de arriba abajo. */
.nosotros-detalle { padding-top: 0; }

/* --------------------------------------------------------------------------
   ÁREAS DE TOQUE EN MÓVIL
   Medido a 360 px: los enlaces del cajón del menú salían de 34 px de alto, los
   del pie de 18, los cuatro teléfonos del pie de 23 y los datos de contacto de
   21. WCAG 2.2 (criterio 2.5.8, nivel AA) pide 24x24 salvo en enlaces dentro de
   una frase, y la referencia de Apple y Google es 44x44. Los enlaces que van
   dentro de un párrafo se dejan como están: ahí la excepción aplica y agrandarlos
   rompería el renglón.

   Va todo dentro de la consulta de ancho para no tocar el diseño de escritorio,
   que ya está aprobado.
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  /* El cajón del menú: la fila entera es el objetivo, no solo las letras. */
  .nav-menu .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  /* Enlaces del pie y de la lista de contacto. El padding vertical es lo que
     crea el área; el interlineado visual no cambia porque el texto sigue
     centrado en su caja. */
  .footer-links-list .footer-link,
  .footer-telefonos__rejilla .footer-link,
  .footer-legal-links a,
  .ct-forma__wa a,
  .service-card-title a,
  .service-card__mas,
  .cierre__enlace a,
  .sv-cierre__lista a,
  .ct-lista__cuerpo a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  /* Los cuatro teléfonos van en rejilla; con más alto necesitan menos hueco
     entre ellos o el pie se estira sin motivo. */
  .footer-telefonos__rejilla {
    row-gap: 2px;
  }
}

/* --- Remites: enlaces contextuales al final de una sección ---------------
   Frase corta con uno o dos enlaces, para que /servicios, /portafolio y
   /nosotros reciban enlaces desde el TEXTO y no solo desde el menú. Se ven como
   texto, no como botón: un botón se lee como acción y esto es una lectura. */

.ns-remite,
.pf-remite,
.svc-remite {
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--color-text-body);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 10px;
}

.ns-remite a,
.pf-remite a,
.svc-remite a {
  color: var(--color-accent-blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ns-remite a:hover,
.pf-remite a:hover,
.svc-remite a:hover { text-decoration-thickness: 2px; }

body.dark-theme .ns-remite a,
body.dark-theme .pf-remite a,
body.dark-theme .svc-remite a { color: var(--color-accent-yellow); }

.pf-remite span { color: var(--color-border-subtle); }

/* --- Nosotros · «Lo que hacemos aquí dentro» -----------------------------
   Las seis tarjetas de servicio, según la referencia del cliente: icono en azul
   sin recuadro, título en mayúsculas con filete amarillo debajo y dos líneas de
   texto, todo centrado. Sustituyó a la lista de procesos el 2026-08-29. */

.ns-hacemos__titulo {
  font-family: var(--font-title);
  font-size: clamp(1rem, 2.2vw, 1.22rem);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-title);
  /* Sin margen propio: este titular abre la sección y la separación de la banda
     marina de arriba la pone .ns-bloque. Antes tenía uno porque venía debajo de
     la foto grande del taller, que ya no está. */
  margin: 0;
}

/* El filete amarillo del titular y el de cada tarjeta son el mismo recurso, así
   que comparten declaración: si se cambia el grosor, cambia en los dos sitios. */
.ns-hacemos__titulo::after,
.ns-hacemos__nombre::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background-color: var(--color-accent-yellow);
}

.ns-hacemos {
  list-style: none;
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.ns-hacemos__celda { display: flex; }

.ns-hacemos__tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: clamp(20px, 2.2vw, 28px) clamp(12px, 1.4vw, 18px);
  text-align: center;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-md, 12px);
  background-color: var(--color-bg-secondary);
  text-decoration: none;
  transition: var(--transition-smooth);
}

/* Solo las que llevan enlace reaccionan: en las otras el cursor y el
   levantamiento prometerían algo que no pasa al hacer clic. */
a.ns-hacemos__tarjeta:hover,
a.ns-hacemos__tarjeta:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--color-accent-blue-rgb), 0.35);
  box-shadow: 0 14px 30px rgba(9, 26, 64, 0.10);
}

.ns-hacemos__icono {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--color-accent-blue);
}

body.dark-theme .ns-hacemos__icono { color: var(--color-accent-yellow); }

.ns-hacemos__nombre {
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--color-text-title);
  margin: 0;
}

.ns-hacemos__texto {
  margin: 14px 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-body);
}

/* Seis columnas dejan de caber bastante antes de la tabla de cortes general:
   por debajo de 1180 px el título ya se parte en tres líneas. */
@media (max-width: 1180px) {
  .ns-hacemos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ns-hacemos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
  .ns-hacemos { grid-template-columns: 1fr; }
}

/* --- Nosotros · «Materiales que trabajamos» ------------------------------
   Foto en horizontal a la izquierda y la lista con palomitas a la derecha,
   según la referencia del cliente. Fondo de tarjeta —blanco en claro— para que
   se separe del marino del banner de arriba y del gris del cuerpo de abajo sin
   necesitar filetes ni bordes. */

.ns-materiales {
  background-color: var(--color-bg-secondary);
  padding: clamp(48px, 5vw, 84px) 0;
}

.ns-materiales__reja {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 66px);
  align-items: center;
}

.ns-materiales__foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--border-radius-md, 12px);
  /* La sombra es lo que separa la foto del blanco del fondo; sin ella se lee
     como un recorte pegado. Es la misma que llevan las tarjetas del sitio. */
  box-shadow: 0 18px 44px rgba(9, 26, 64, 0.16);
  background-color: #0B2350;
}

.ns-materiales__foto img {
  display: block;
  width: 100%;
  height: auto;
}

.ns-materiales__titulo {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-title);
  margin: 0 0 clamp(18px, 2vw, 28px);
}

.ns-marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(11px, 1.3vw, 16px);
}

.ns-marca {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* Decorativa: el texto de al lado es el que lleva el significado, así que aquí
   manda parecerse a la referencia y no el contraste del trazo. */
.ns-marca__visto {
  display: inline-flex;
  /* Un oro algo más cerrado que el amarillo de marca: el vivo sobre blanco se
     desvanece y la palomita dejaba de leerse. En tema oscuro vuelve el vivo. */
  color: #D8A200;
  /* Centra la palomita con la primera línea del texto en vez de con la caja
     entera: si una línea se parte en dos, la marca sigue arriba. */
  margin-top: 0.1em;
}

body.dark-theme .ns-marca__visto { color: var(--color-accent-yellow); }

.ns-marca__texto {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-body);
}

/* El lema del material promocional del cliente, en la caligráfica de la
   referencia (Satisfy).
 *
 * Es la ÚNICA regla del sitio que la usa, y por eso:
 *   - no se precarga: el lema está muy por debajo del pliegue y precargarla
 *     competiría con el banner, que sí es lo primero que se ve;
 *   - va con font-display: swap, así que hasta que llegue el archivo la línea se
 *     ve en la cursiva de Montserrat —el respaldo de la pila— y nunca en blanco.
 *
 * Va más grande que el texto normal porque la caligráfica tiene la altura de x
 * pequeña: al mismo tamaño nominal se lee bastante menor que el resto. */
.ns-materiales__lema {
  font-family: 'Satisfy', var(--font-title), cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.25;
  color: var(--color-text-title);
  margin: clamp(22px, 2.8vw, 34px) 0 0;
}

@media (max-width: 900px) {
  .ns-materiales__reja { grid-template-columns: 1fr; }
  /* Apilado, la foto va primero: es lo que abre el bloque en la referencia. */
  .ns-materiales__foto { order: -1; }
}

/* --- Nosotros · «Cómo llegamos hasta aquí» -------------------------------
   Banda a sangre con la línea de tiempo en horizontal: los años en grande, una
   línea con puntos, y hueco para una foto por hito. El acento es el amarillo de
   marca, que sobre este fondo da 9,4:1; el azul se quedaría en 2,4 y no se
   leería.

   Era negra (#0D0E12) hasta el 2026-08-29. Ahora lleva el mismo marino de las
   otras franjas del sitio (#0B2350): el negro se leía como una sección de otra
   web metida en medio. Si se toca este color hay que cambiarlo TAMBIÉN en el
   degradado de .ns-hito__foto::after y en el fondo de .ns-hito__foto, que lo
   repiten en rgba para poder difuminarlo. */

.ns-historia {
  background-color: #0B2350;
  /* El relleno de abajo es el «borde azul» con el que cierra la banda: antes las
     fotos llegaban al filo y la franja terminaba en un corte de imagen. La foto
     sí termina en un canto limpio; lo que cambia es que ese canto ya no cae en
     el borde de la sección. */
  padding: 74px 0 clamp(34px, 3.4vw, 56px);
  overflow: hidden;
}

.ns-historia__reja {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 2.6fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}

/* --- La columna de la izquierda --- */

.ns-historia__filete {
  display: block;
  width: 46px;
  height: 3px;
  background-color: var(--color-accent-yellow);
}

.ns-historia__filete--pie { margin-top: 26px; width: 88px; height: 2px; opacity: 0.5; }

/* El relleno de abajo lo pone ahora la banda; aquí sobraba y sumaba el doble. */
.ns-historia__intro { padding-bottom: 0; }

.ns-historia__kicker {
  display: block;
  margin: 18px 0 12px;
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-accent-yellow);
}

.ns-historia__titulo {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 18px;
  text-wrap: balance;
}

.ns-historia__texto {
  margin: 0;
  max-width: 34ch;
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
}

/* El destacado que se escribe entre *asteriscos* en el panel. */
.ns-historia__texto .es-acento { color: var(--color-accent-yellow); font-weight: 600; }

/* --- La línea de tiempo --- */

.ns-linea {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-self: stretch;
}

.ns-hito {
  padding: 0 clamp(14px, 1.6vw, 26px) 0;
  display: flex;
  flex-direction: column;
}

/* Separadores entre hitos, como en la referencia. */
.ns-hito + .ns-hito { border-left: 1px solid rgba(255, 255, 255, 0.22); }

.ns-hito__anio {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-yellow);
  margin-bottom: 18px;
}

/* La marca: el tramo de línea horizontal con su punto. Al ser un tramo por
   hito, los cuatro se unen en una línea continua. */
.ns-hito__marca {
  position: relative;
  display: block;
  height: 1px;
  margin: 0 clamp(-26px, -1.6vw, -14px) 20px;
  background-color: rgba(255, 255, 255, 0.36);
}

.ns-hito__marca::before {
  content: "";
  position: absolute;
  top: 50%;
  left: clamp(14px, 1.6vw, 26px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--color-accent-yellow);
  transform: translateY(-50%);
}

.ns-hito__texto {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
}

/* La foto de cada hito, cuando la haya. En gris y algo apagada para que los
   años sigan mandando y las cuatro convivan aunque vengan de días distintos. */
/* La foto no es una tarjeta: ocupa el ancho entero de la columna, llega al borde
   inferior de la banda y se desvanece por arriba. Así no se lee como una
   miniatura puesta encima del fondo, sino como el fondo mismo. */
.ns-hito__foto {
  position: relative;
  /* Cancela el relleno lateral del hito para tocar los separadores. */
  margin: 30px clamp(-26px, -1.6vw, -14px) 0;
  margin-top: auto;
  overflow: hidden;
  background-color: #0B2350;
}

.ns-hito__foto img {
  display: block;
  width: 100%;
  height: auto;
  /* Cuadrada, que es como vienen las fuentes (`sq`): así no se recorta nada y
     además da altura para que el degradado tenga sitio donde ser suave. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.86);
  transition: filter 0.45s ease;
}

/* El degradado que funde la foto con la banda, SOLO por arriba: paradas
 * repartidas de forma regular hasta el 51 %. Antes caía de 1 a 0,62 en el primer
 * 16 % y luego se aplanaba, y ese tramo corto y empinado es lo que se veía como
 * una raya en vez de como una transición.
 *
 * Abajo no hay degradado: la foto termina en un canto limpio y la franja azul
 * queda debajo, que es el relleno inferior de .ns-historia. Se probó apagándola
 * también por abajo y se leía como una sombra pegada al pie de cada foto. */
.ns-hito__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    #0B2350 0%,
    rgba(11, 35, 80, 0.93) 7%,
    rgba(11, 35, 80, 0.80) 15%,
    rgba(11, 35, 80, 0.64) 24%,
    rgba(11, 35, 80, 0.47) 32%,
    rgba(11, 35, 80, 0.31) 38%,
    rgba(11, 35, 80, 0.17) 44%,
    rgba(11, 35, 80, 0.06) 48%,
    rgba(11, 35, 80, 0) 51%,
    rgba(11, 35, 80, 0) 100%);
}

/* Al pasar el ratón solo aclaran: el color no vuelve. Devolverlo rompía el
   efecto de fondo y las convertía otra vez en cuatro fotos sueltas. */
.ns-hito:hover .ns-hito__foto img { filter: grayscale(1) contrast(1.06) brightness(1); }

@media (max-width: 1100px) {
  .ns-historia__reja { grid-template-columns: 1fr; gap: 38px; }
  .ns-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  /* A dos columnas, el separador de la tercera sobra: empieza fila nueva. */
  .ns-hito:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 1100px) {
  .ns-hito__foto {
    margin-bottom: 0;
  }
  /* Cuadrada solo en la fila de cuatro: a dos columnas cada foto pasaría de
     460 px de alto y la banda se convertiría en una galería. */
  .ns-hito__foto img {
    aspect-ratio: 5 / 4;
  }
}

@media (max-width: 620px) {
  .ns-historia { padding: 54px 0; }
  .ns-hito__foto { margin-left: 0; margin-right: 0; }
  .ns-hito__foto img { aspect-ratio: 16 / 10; }
  .ns-linea { grid-template-columns: 1fr; row-gap: 30px; }
  .ns-hito { border-left: 0 !important; padding: 0; }
  /* En una columna la línea horizontal no significa nada: se apaga y queda
     solo el punto, alineado con el año. */
  .ns-hito__marca { margin: 0 0 14px; background-color: transparent; }
  .ns-hito__marca::before { left: 0; }
}

/* --------------------------------------------------------------------------
   ENCABEZADO CON BANNER — compartido
   Lo usan /contacto y /nosotros a través de partes/cabeza-banner.php: texto a
   la izquierda sobre el marino del hero, foto a sangre por la derecha y el
   mismo velo azul difuminándola. El prefijo es «pg-» y no «ct-» justamente
   porque ya no es de una sola página: si mañana lo usa una tercera, no hay que
   duplicar nada.
   -------------------------------------------------------------------------- */

.pg-cabeza {
  /* --pg-solape: cuánto baja el banner por debajo del encabezado. Las dos
     tarjetas de abajo suben a montarse encima de ese sobrante, y a la derecha
     de ellas el banner sigue a la vista hasta el borde de la ventana. */
  --pg-solape: 0px;
  /* El reparto entre texto y foto es regulable porque no todas las páginas
     traen textos del mismo largo: los tres puntos de /nosotros son párrafos y
     los de /contacto son una línea, y con el mismo reparto los primeros caerían
     en columnas de 22 caracteres. Se cambia con el modificador de abajo, no
     tocando estas reglas. */
  --pg-texto: 1.02fr;
  --pg-banner: 53%;
  position: relative;
  /* El mismo azul del hero de la portada: las dos entradas al sitio se leen
     como la misma marca en vez de como dos plantillas distintas. */
  background-color: #091A40;
  display: grid;
  grid-template-columns: minmax(0, var(--pg-texto)) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(26px, 3.2vw, 54px);
  padding: clamp(46px, 5vw, 84px) 0 clamp(38px, 4vw, 62px);
}

/* El texto no va en .container porque el banner tiene que llegar al borde
   derecho de la ventana. Este relleno lo alinea con el resto de la página:
   es el margen del contenedor de 1200px calculado a mano. */
.pg-cabeza__texto {
  position: relative;
  z-index: 1;
  align-self: center;
  padding-left: max(24px, calc((100vw - 1200px) / 2 + 24px));
  padding-right: clamp(16px, 2vw, 34px);
}

.pg-cabeza .section-kicker {
  color: var(--color-accent-yellow);
}

.pg-cabeza__titulo {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.14;
  margin-bottom: 16px;
  color: #FFFFFF;
}

.pg-cabeza__sub {
  font-size: 1.08rem;
  max-width: 46ch;
  color: #D6DEEE;
}

/* Fuera del flujo: así puede pasar por debajo del encabezado y meterse un poco
   en la columna del texto, donde el degradado lo desvanece. */
.pg-cabeza__banner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(-1 * var(--pg-solape));
  width: var(--pg-banner);
}

/* Para encabezados cuyos puntos son párrafos y no rótulos. La foto pierde siete
   puntos de ancho; el velo la difumina igual, así que lo que se ve de ella no
   cambia tanto como el número sugiere. */
.pg-cabeza--textolargo {
  --pg-texto: 1.34fr;
  /* 40% y no 46%: el cliente pidió la foto más a la derecha, con aire entre el
     texto y la imagen (2026-09-23). Si cambia, cambia también $cb_sizes en
     partes/seccion-nosotros.php. */
  --pg-banner: 40%;
}

/* Titular en tres líneas: ROTULANDO / PUERTO RICO / DESDE 1999 (y SIGNING /
   PUERTO RICO / SINCE 1999). 9,5em cabe «PUERTO RICO» (7,9em) pero no
   «ROTULANDO PUERTO» (12,4em) ni «SIGNING PUERTO» (9,9em), medido con la
   Montserrat 900 del sitio. Si el cliente cambia el titular desde el panel,
   este ancho puede partirlo distinto: es un tope, no un salto de línea fijo. */
.pg-cabeza--textolargo .pg-cabeza__titulo {
  max-width: 9.5em;
}

/* Encuadre de la foto actual (Hero-NosotrosNew), para que el logo de la pared
   salga siempre entero. La caja cambia de forma con la ventana:
   - pantallas anchas (1920): más ancha que alta, recorta arriba y abajo. Arriba
     del todo: si no, se pierde «COMPU», la primera línea del logo;
   - pantallas medianas (1280): más alta que ancha, recorta por los lados. El
     logo ocupa del 53% al 89% del ancho; centrado se cortaba su final, y al
     70% queda dentro hasta en la caja más estrecha (0,75:1).
   Solo en escritorio: en el móvil la foto va en 16:9 y se ve entera. */
@media (min-width: 901px) {
  .pg-cabeza--textolargo .pg-cabeza__banner img {
    object-position: 70% top;
  }
}

.pg-cabeza__banner picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* El difuminado ya no es una máscara sobre el fondo claro: es el velo azul del
   hero puesto encima de la foto. Se hereda tal cual de .hero-slide__velo para
   que el degradado sea el mismo, no uno parecido. */
.pg-cabeza__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      #091A40 0%,
      rgba(9, 26, 64, 0.92) 11%,
      rgba(11, 32, 78, 0.74) 22%,
      rgba(13, 38, 92, 0.38) 40%,
      rgba(16, 45, 108, 0.12) 62%,
      rgba(16, 45, 108, 0.04) 80%,
      rgba(16, 45, 108, 0) 100%);
}

/* --- Banner ancho (solo si existe la versión 'ext'; hoy, /nosotros) -------
   Desde 901 px el banner ocupa TODO el ancho del encabezado, por debajo del
   texto. La foto va a su proporción, a todo lo alto y pegada a la derecha, y
   un solo velo del azul del encabezado (#091A40, el mismo del fondo) la funde:
   liso detrás del texto y, desde 60 px antes de donde acaba el texto (≈53,5% del
   ancho, medido a 1200, 1440 y 1920 px), transparente en 120 px siguiendo la
   curva smootherstep, que empieza y acaba con pendiente cero para que no se
   vea una línea. Esos 60 px finales del texto caen sobre la parte oscura de la
   impresora, así que el contraste se mantiene.

   --foto-desplaza corre la foto a la derecha. Con la foto actual
   (Hero-NosotrosNew, casi cuadrada, 1218×1292) va a 0: el logo llega hasta el
   89% del ancho y cualquier desplazamiento lo cortaría. Con una foto apaisada
   —la anterior, de 2,4:1— hizo falta clamp(0px, 940px − 46,5vw, 140px).
   El min-width asegura que la foto llegue 120 px por debajo del tramo liso del
   velo: si no, su borde izquierdo caería dentro del degradado y se vería el
   corte. Con esta foto casi cuadrada el min-width manda siempre, así que se
   ensancha y se recorta por abajo (object-position arriba: el rotulista y el
   logo no se pierden). */
@media (min-width: 901px) {
  .pg-cabeza__banner--ext {
    --foto-desplaza: 0px;
    left: 0;
    width: auto;
    overflow: hidden;
    /* Contexto propio por debajo del texto (z-index 1): sin él, el velo
       (también z-index 1, y después en el HTML) pintaría encima del texto. */
    z-index: 0;
  }
  .pg-cabeza__banner--ext img {
    position: absolute;
    top: 0;
    right: calc(-1 * var(--foto-desplaza));
    width: auto;
    min-width: calc(46.5vw + var(--foto-desplaza) + 120px);
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: right top;
  }
  .pg-cabeza__banner--ext .pg-cabeza__velo {
    background:
      linear-gradient(90deg,
        rgb(9, 26, 64) 0%,
        rgb(9, 26, 64) calc(53.5% - 60px),
        rgba(9, 26, 64, 0.991) calc(53.5% - 60px + 12px),
        rgba(9, 26, 64, 0.942) calc(53.5% - 60px + 24px),
        rgba(9, 26, 64, 0.837) calc(53.5% - 60px + 36px),
        rgba(9, 26, 64, 0.683) calc(53.5% - 60px + 48px),
        rgba(9, 26, 64, 0.500) calc(53.5% - 60px + 60px),
        rgba(9, 26, 64, 0.317) calc(53.5% - 60px + 72px),
        rgba(9, 26, 64, 0.163) calc(53.5% - 60px + 84px),
        rgba(9, 26, 64, 0.058) calc(53.5% - 60px + 96px),
        rgba(9, 26, 64, 0.009) calc(53.5% - 60px + 108px),
        rgba(9, 26, 64, 0.000) calc(53.5% - 60px + 120px));
  }
}

.pg-cabeza--velo-corto .pg-cabeza__velo {
  /* Solo /nosotros (2026-09-23): el cliente quería ver más foto que en
     Contacto. Arranca igual de opaco en el borde —así no hay línea contra el
     marino del fondo— pero se abre del todo en el primer 38% de la foto, con la
     curva smootherstep (pendiente cero en los dos extremos). El de serie tarda
     casi toda la foto en desaparecer. */
  background:
    linear-gradient(90deg,
      rgba(9, 26, 64, 1.000) 0.0%,
      rgba(9, 26, 64, 0.991) 3.8%,
      rgba(9, 26, 64, 0.942) 7.6%,
      rgba(9, 26, 64, 0.837) 11.4%,
      rgba(9, 26, 64, 0.683) 15.2%,
      rgba(9, 26, 64, 0.500) 19.0%,
      rgba(9, 26, 64, 0.317) 22.8%,
      rgba(9, 26, 64, 0.163) 26.6%,
      rgba(9, 26, 64, 0.058) 30.4%,
      rgba(9, 26, 64, 0.009) 34.2%,
      rgba(9, 26, 64, 0.000) 38.0%);
}

/* --- Las tres ventajas --- */
.pg-ventajas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: clamp(14px, 1.6vw, 26px);
  margin-top: 34px;
}

.pg-ventaja {
  display: grid;
  grid-row: span 3;
  align-content: start;
  row-gap: 6px;
}

@supports (grid-template-rows: subgrid) {
  .pg-ventaja { grid-template-rows: subgrid; }
}

/* Sobre el azul el icono va en amarillo: es el único acento que aguanta ahí
   sin competir con el titular. */
.pg-ventaja__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  border-radius: 50%;
  color: var(--color-accent-yellow);
  background-color: rgba(var(--color-accent-yellow-rgb), 0.14);
}

/* El margen a cero no es decorativo: en /contacto estos títulos son <span> y en
   /nosotros son <h3> —ahí sí son contenido—, y el margen propio del h3 se
   sumaría al row-gap de la rejilla descolocando una página respecto de la otra. */
.pg-ventaja__titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
  margin: 0;
  color: #FFFFFF;
}

.pg-ventaja__texto {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: #C3CEE4;
}

@media (max-width: 900px) {
  .pg-cabeza {
    --pg-solape: 0px;
    grid-template-columns: 1fr;
    padding-top: 0;
    padding-bottom: 46px;
  }
  /* En una columna el banner va primero: es lo que ancla la página. Vuelve al
     flujo —nada que montar encima— y el degradado se apaga: a lo ancho de la
     pantalla desvanecería justo la mitad de la foto. */
  .pg-cabeza__banner {
    position: static;
    width: auto;
    order: -1;
  }
  .pg-cabeza__banner img {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .pg-cabeza__velo {
    display: none;
  }
  .pg-cabeza__texto {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 620px) {
  .pg-ventajas {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 18px;
  }
  /* A una columna el icono encima gasta demasiado alto: pasa al lado. */
  .pg-ventaja {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-row: auto;
    column-gap: 14px;
    row-gap: 2px;
  }
  .pg-ventaja__icono {
    grid-row: span 2;
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   CONTACTO
   Tarjeta de datos + formulario, «así llegas» y los cuatro bloques de apoyo.
   El encabezado con banner es el bloque compartido .pg-cabeza, más arriba.
   -------------------------------------------------------------------------- */

/* --- Datos + formulario --- */
.ct-medio__reja {
  display: grid;
  grid-template-columns: minmax(264px, 0.44fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(24px, 2.6vw, 40px);
  align-items: stretch;
}

.ct-medio__reja > .ct-datos {
  grid-area: 1 / 1;
}

.ct-medio__reja > .ct-forma {
  grid-area: 1 / 2;
  display: flex;
}

.ct-medio__reja > .ct-forma__wa {
  grid-area: 2 / 2;
}

/* La tarjeta viene del parcial compartido, así que se estira desde aquí. */
.ct-forma > .contacto-caja {
  flex: 1;
  padding: clamp(26px, 2.4vw, 34px);
}

/* Igual que la tarjeta del formulario: mismo blanco, mismo borde y la misma
   sombra discreta. Se distinguen por el contenido, no por el color. */
.ct-datos {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  padding: clamp(26px, 2.4vw, 34px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

/* Mismo tamaño y espaciado que el titular del formulario, para que los dos
   arranquen a la misma altura y se lean como un par. */
.ct-datos__titulo {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-text-title);
  margin-bottom: 14px;
}

/* Sin margin-top:auto: repartir el sobrante abría un hueco enorme entre el
   botón y este bloque. Ahora el contenido va seguido y el alto se iguala
   recortando las dos tarjetas. */
.ct-datos__titulo--sep {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border-subtle);
}

/* El icono es decorativo: no se encoge, y el texto no se le mete debajo. */
.ct-datos__icono {
  flex: 0 0 18px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  color: var(--color-accent);
}

.ct-datos__boton {
  margin-top: auto;
  padding-top: 24px;
  margin-bottom: 31px;
}

.ct-lista {
  list-style: none;
  display: grid;
  gap: 15px;
}

.ct-lista li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ct-lista__cuerpo {
  /* Un solo tamaño y un solo color para todos los datos de la tarjeta: los
     enlaces se distinguen por el subrayado, no por el color. */
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-title);
}

/* Cada tramo del horario: días en un renglón, horas en el siguiente. */
.ct-lista__tramo {
  display: block;
}

.ct-lista__tramo + .ct-lista__tramo {
  margin-top: 6px;
}

.ct-lista__rotulo {
  display: block;
  font-family: var(--font-title);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-accent-gold-text);
}

.ct-lista a {
  color: var(--color-text-title);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
}

.ct-lista a:hover,
.ct-lista a:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Para qué sirve cada número. Se atenúa con tamaño y color, nunca con
   opacity: sobre el azul dejaría el texto por debajo del mínimo legible. */
.ct-lista__para {
  font-size: 0.84rem;
  color: var(--color-text-body);
}

.ct-forma__wa {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--color-text-body);
}

.ct-forma__wa a {
  display: inline-flex;
  color: #128C7E;
}

body.dark-theme .ct-forma__wa a {
  color: #25D366;
}

/* --------------------------------------------------------------------------
   «Así llegas a nuestro taller» — mapa a sangre con la tarjeta encima
   El mapa ocupa el ancho de la ventana y se disuelve hacia la derecha en el
   marino del sitio; la tarjeta flota encima. Las tres piezas —mapa, banda y
   foto— se funden entre sí, y eso es lo que las hace leerse como una sola.
   -------------------------------------------------------------------------- */

.ct-llegar {
  position: relative;
  isolation: isolate;
  min-height: clamp(360px, 30vw, 440px);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* El mismo marino de las otras franjas del sitio —el banner, la historia,
     «qué conviene tener a mano»—, así que Contacto deja de ser la única página
     sin una banda oscura. */
  /* El mismo marino que «qué conviene tener a mano», la franja de justo encima:
     sin hueco entre las dos, el mapa queda al filo de una banda azul continua. */
  background-color: #0B2350;
}

/* La capa del mapa NO es la sección: es una caja con la proporción exacta de la
   imagen (2400×700), tan alta como la sección y centrada.

   Esto existe por el pin. El pin marca el taller, así que su posición tiene que
   caer sobre el mismo punto de la imagen SIEMPRE. Con la imagen a `object-fit:
   cover` sobre la sección, el recorte horizontal cambia con la ventana: a 901 px
   de ancho el mapa se recorta 354 px y un pin al 36 % de la sección se iba 49 px
   de la calle. Sobre esta caja no hay recorte horizontal —o la caja tiene la
   proporción de la imagen, o `min-width` la ensancha y entonces el recorte es
   vertical—, así que un porcentaje sobre ella es un porcentaje sobre la imagen.
   Antes el pin estaba al 50 %, el único valor que aguanta cualquier recorte
   porque el centro siempre cae en el centro. */
.ct-llegar__mapa {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
}

@supports (aspect-ratio: 24 / 7) {
  .ct-llegar__mapa {
    width: auto;
    aspect-ratio: 2400 / 700;
    min-width: 100%;
  }
}

.ct-llegar .mapa-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* El mapa se queda CLARO dentro de la banda marina. Se probó invertirlo para
     tenerlo oscuro y quedaba una masa ilegible: las teselas de OpenStreetMap son
     claras y al invertirlas las calles pasan a gris oscuro sobre gris oscuro. El
     contraste entre mapa claro y azul es la gracia de esta versión. */
  filter: saturate(0.82) contrast(1.02);
}

.ct-llegar__reja {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
}

/* El titular va sobre el MAPA, que aquí sigue claro, así que en blanco no se
   leería: marino con halo. El marino de la franja lo pone la banda, no la letra. */
.ct-llegar__titulo {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0B2350;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
  margin: 0;
  align-self: start;
  padding-top: clamp(18px, 3vw, 34px);
}

.ct-llegar__sub {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  max-width: 30ch;
  color: #2E3A52;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ct-llegar__tarjeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-secondary);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.40);
}

/* Sin foto del local la tarjeta va a una columna. NO se pone una de relleno:
   bajo «así llegas a nuestro taller», cualquier edificio se lee como el suyo. */
.ct-llegar__tarjeta--sinfoto { grid-template-columns: 1fr; }

.ct-llegar__datos {
  padding: clamp(20px, 2.4vw, 30px);
  display: grid;
  align-content: center;
  gap: 11px;
  justify-items: start;
}

.ct-llegar__rotulo {
  font-family: var(--font-title);
  font-size: clamp(0.98rem, 1.8vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-title);
  margin: 0;
}

.ct-llegar__dir,
.ct-llegar__horario {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--color-text-body);
}

.ct-llegar__horario { color: var(--color-text-title); font-weight: 500; }

.ct-llegar .mapa-abrir { margin-top: 3px; }

.ct-llegar__apps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 0.86rem;
}

.ct-llegar__apps-rotulo { color: var(--color-text-body); }

.ct-llegar__apps a {
  color: var(--color-accent-blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.dark-theme .ct-llegar__apps a { color: var(--color-accent-yellow); }

.ct-llegar__foto { position: relative; min-height: 205px; margin: 0; overflow: hidden; }

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

/* La foto sangra al borde derecho y se disuelve hacia el texto: sin recuadro ni
   filo, foto y tarjeta son una pieza. */
.ct-llegar__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--color-bg-secondary) 0%,
    rgba(255, 255, 255, 0.55) 26%,
    rgba(255, 255, 255, 0) 62%);
}

body.dark-theme .ct-llegar__foto::after {
  background: linear-gradient(90deg,
    var(--color-bg-secondary) 0%,
    rgba(26, 28, 35, 0.55) 26%,
    rgba(26, 28, 35, 0) 62%);
}

/* Con el mapa interactivo cargado, la tarjeta y el velo se quitan de encima: si
   se quedaran taparían media franja y no se podría arrastrar el mapa por ahí. */
.ct-llegar.es-mapa-vivo .ct-llegar__reja { display: none; }

/* Con el mapa vivo la capa recupera el tamaño de la sección. Su geometría especial
   —más ancha, con la proporción de la imagen— solo existe para colocar el pin
   sobre el punto exacto del mapa estático; el iframe hereda ese ancho y se le
   recortaban 17 px por cada lado, con los controles de Google dentro. */
.ct-llegar.es-mapa-vivo .ct-llegar__mapa {
  left: 0;
  transform: none;
  width: 100%;
  min-width: 0;
  aspect-ratio: auto;
}

@media (max-width: 900px) {
  .ct-llegar {
    min-height: 0;
    display: block;
    padding-bottom: 24px;
  }
  .ct-llegar__mapa { position: relative; height: 220px; }
  /* El crédito cuelga de la sección, y en vertical el fondo de la sección está
     debajo de la tarjeta: ahí la atribución quedaba lejos del mapa. Se ancla a la
     altura del mapa, que aquí son 220 px exactos. */
  .mapa-credito { top: 192px; bottom: auto; }
  .ct-llegar.es-mapa-vivo .mapa-credito { display: none; }
  /* Con el mapa vivo la tarjeta se va, así que la franja se queda en la altura
     del mapa: 220px se arrastran mal con el dedo. */
  .ct-llegar.es-mapa-vivo .ct-llegar__mapa { height: 340px; }
  .ct-llegar__reja { grid-template-columns: 1fr; padding: 0 20px; gap: 14px; }
  /* En vertical el titular NO va sobre el mapa claro sino sobre la banda marina
     —el velo ya está opaco donde monta—, así que se invierte: letra clara sin
     halo blanco. Con el halo y el marino de escritorio quedaba marino sobre
     marino, ilegible. */
  .ct-llegar__titulo {
    padding-top: 0;
    /* Sin solape sobre el mapa: a 360px el titular ocupa dos líneas y una de
       ellas caía justo en la costura, que se lee como un descuido. El velo ya
       funde el mapa con la banda; el solape no añadía nada. */
    margin-top: 4px;
    position: relative;
    z-index: 4;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
  .ct-llegar__sub {
    max-width: none;
    color: #C9D3E8;
    text-shadow: none;
  }
  .ct-llegar__tarjeta { grid-template-columns: 1fr; }
  .ct-llegar__foto { min-height: 165px; order: -1; }
  .ct-llegar__foto::after {
    background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,0.5) 82%, var(--color-bg-secondary) 100%);
  }
  body.dark-theme .ct-llegar__foto::after {
    background: linear-gradient(180deg, rgba(26,28,35,0) 55%, rgba(26,28,35,0.5) 82%, var(--color-bg-secondary) 100%);
  }
}

/* Estos bloques vienen detrás del mapa. Los 100px de .section abrían un hueco de
   200px entre las dos secciones, pero puesto a 0 el titular arrancaba justo en la
   costura del mapa, pegado. Se le da el mismo aire que usa «qué conviene tener a
   mano», que es la franja del otro lado del mapa: así las dos costuras respiran
   igual. Va aquí y no en .pasos porque .ct-apoyo .pasos anula su margen. */
.ct-apoyo {
  padding-top: clamp(44px, 4.6vw, 68px);
}

/* z-index para pasar por encima del sobrante del banner; el relleno superior es
   lo único que las separa del encabezado, así que es lo que gobierna cuánto se
   montan sobre la foto. */
/* Las tarjetas suben sobre el borde de la banda: nada azul queda por debajo de
   ellas, y siguen leyéndose como una capa por encima del encabezado. */
.ct-medio {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(16px, 2vw, 28px));
  padding-top: 0;
  padding-bottom: clamp(34px, 3.6vw, 54px);
}

.ct-apoyo .pasos {
  margin-top: 0;
}

@media (max-width: 900px) {
  .ct-medio__reja {
    grid-template-columns: 1fr;
  }
  .ct-medio__reja {
    grid-template-rows: none;
  }
  .ct-medio__reja > .ct-datos,
  .ct-medio__reja > .ct-forma,
  .ct-medio__reja > .ct-forma__wa {
    grid-area: auto;
  }
}

/* Sin foto del local,
este hueco no se rellena con una foto cualquiera: al lado
   del mapa y bajo «así llegas» {
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: var(--border-radius-lg);
  background-color: #0B2350;
  box-shadow: 0 14px 34px rgba(11, 35, 80, 0.18);
}

/* --------------------------------------------------------------------------
   «Qué conviene tener a mano» — franja de cuatro columnas.
   Sigue el diseño de referencia del cliente: icono arriba, rótulo, texto corto,
   y un separador fino entre columnas.
   -------------------------------------------------------------------------- */

.ct-preparar {
  background-color: #0B2350;
  padding: clamp(44px, 4.6vw, 68px) 0;
}

.ct-preparar__titulo {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: clamp(30px, 3vw, 46px);
}

.ct-preparar__reja {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* El separador va como borde del punto y no como elemento aparte, y el primero
   no lo lleva: así no sobra una línea al principio de cada fila. */
.ct-preparar__punto {
  padding: 0 clamp(16px, 1.8vw, 28px);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.ct-preparar__punto:first-child {
  border-left: 0;
}

.ct-preparar__icono {
  display: block;
  margin-bottom: 16px;
  color: var(--color-accent-yellow);
}

.ct-preparar__rotulo {
  display: block;
  font-family: var(--font-title);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.ct-preparar__texto {
  display: block;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #C3CEE4;
}

@media (max-width: 900px) {
  .ct-preparar__reja {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(26px, 3vw, 38px);
  }
  /* A dos columnas, la tercera empieza fila nueva: su separador sobra. */
  .ct-preparar__punto:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .ct-preparar__reja {
    grid-template-columns: 1fr;
  }
  .ct-preparar__punto {
    border-left: 0;
    padding: 0;
  }
}

/* Ajuste fino solo en /contacto: el formulario y la tarjeta amarilla comparten
   fila y tienen que acabar a la misma altura. Recortar el formulario es mejor
   que repartir el sobrante dentro de la amarilla, que era lo que abría un hueco
   entre el botón del mapa y los teléfonos. */
.ct-forma .contacto-caja__ayuda {
  margin-bottom: 18px;
}

.ct-forma #leadForm .form-group {
  margin-bottom: 13px;
}

.ct-forma #leadForm textarea.input-style {
  min-height: 74px;
}

/* Los municipios donde se instala: una línea en el pie, en todas las páginas.
   Antes vivían solo en /contacto; son los nombres que la gente escribe en el
   buscador, así que valen más estando en todo el sitio que en una sola página. */
.footer-zonas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding-top: 26px;
  margin-top: 8px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.84rem;
  line-height: 1.6;
}

.footer-zonas__rotulo {
  font-family: var(--font-title);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-accent-gold-text);
}

.footer-zonas__lista {
  color: var(--color-text-body);
}

/* ==========================================================================
   PÁGINA DE SERVICIOS — diseño propio, distinto del bloque de la portada.
   Encabezado en banda azul, tarjetas con foto e insignia, y franja final.
   ========================================================================== */

.sv-cabeza {
  --sv-monta: clamp(24px, 3.4vw, 54px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 3.2vw, 54px);
  padding: clamp(46px, 5vw, 84px) 0 calc(var(--sv-monta) + clamp(30px, 3.4vw, 52px));
  background-color: #091A40;
}

/* El texto no va en .container porque el banner tiene que llegar al borde de la
   ventana. Este relleno lo alinea con el resto de la página. */
.sv-cabeza__texto {
  position: relative;
  z-index: 1;
  padding-left: max(24px, calc((100vw - 1200px) / 2 + 24px));
  padding-right: clamp(16px, 2vw, 34px);
}

.sv-cabeza__titulo {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.14;
  margin-bottom: 16px;
  color: #FFFFFF;
}

.sv-cabeza .section-kicker {
  color: var(--color-accent-yellow);
}

.sv-cabeza__sub {
  font-size: 1.08rem;
  max-width: 46ch;
  color: #D6DEEE;
}

/* La raya corta del diseño: marca dónde acaba el texto sin usar un separador
   a todo lo ancho. */
.sv-cabeza__raya {
  display: block;
  width: 88px;
  height: 3px;
  margin-top: 26px;
  border-radius: 2px;
  background-color: var(--color-accent-yellow);
}

.sv-cabeza__banner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 53%;
}

.sv-cabeza__banner picture,
.sv-cabeza__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El mismo velo del hero y de contacto, con las paradas movidas a la izquierda
   para que se vean las personas de la foto. */
.sv-cabeza__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      #091A40 0%,
      rgba(9, 26, 64, 0.92) 11%,
      rgba(11, 32, 78, 0.74) 22%,
      rgba(13, 38, 92, 0.38) 40%,
      rgba(16, 45, 108, 0.12) 62%,
      rgba(16, 45, 108, 0.04) 80%,
      rgba(16, 45, 108, 0) 100%);
}

/* --- Las tarjetas, montadas sobre la banda --- */
.sv-tarjetas {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(24px, 3.4vw, 54px));
  padding-bottom: clamp(46px, 5vw, 78px);
}

/* La insignia sobresale por arriba, así que hace falta sitio para ella. */
.services-grid--foto {
  gap: clamp(26px, 2.6vw, 38px) clamp(20px, 2.2vw, 30px);
  padding-top: 26px;
}

.services-grid--foto .service-card {
  overflow: visible;
  box-shadow: 0 18px 44px rgba(9, 26, 64, 0.10);
}

.service-card__foto {
  position: relative;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  overflow: hidden;
  background-color: #0B2350;
}

.service-card__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Sin foto, el hueco no se deja en blanco: queda un panel azul de la misma
   altura, y la insignia encima. Pasa en «banners y mesh», que no tiene foto
   suya de resolución suficiente todavía. */
.service-card__foto--vacia {
  aspect-ratio: 16 / 9;
  background-image: linear-gradient(135deg, #0B2350 0%, #123166 100%);
}

.service-card__insignia {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-accent-yellow);
  color: #091A40;
  border: 4px solid var(--color-bg-primary);
  box-shadow: 0 6px 16px rgba(9, 26, 64, 0.22);
}

.services-grid--foto .service-card__cuerpo {
  padding: 22px clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 26px);
}

.services-grid--foto .service-card-title {
  font-size: 1.02rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* --- «También hacemos»: franja azul de seis columnas --- */
.sv-otros {
  background-color: #0B2350;
  padding: clamp(44px, 4.6vw, 68px) 0;
}

.sv-otros__titulo {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.sv-otros__texto {
  max-width: 66ch;
  margin: 0 auto clamp(30px, 3vw, 44px);
  text-align: center;
  color: #C3CEE4;
}

/* Flex y no grid, a propósito: con 7 elementos (no múltiplo de 6, 3 ni 2, las
   tres columnas que usa esta lista según el ancho), siempre sobra uno suelto
   en la última fila. En grid ese sobrante queda pegado a la izquierda, solo;
   con flex-wrap + justify-content:center, la fila incompleta se centra en vez
   de quedar huérfana. Cada elemento mide un ancho fijo (100% ÷ columnas), así
   que sigue alineando en columnas igual que antes. */
.sv-otros__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: clamp(26px, 3vw, 38px);
}

/* El separador va como borde del elemento: el primero de cada fila no lo lleva
   para que no sobre una línea al principio. nth-child(6n+1) cubre el primero
   de CADA fila, no solo el primero de la lista —con 6 columnas y más de 6
   elementos, el 7.º también empieza fila y también tiene que perder el borde—. */
.sv-otro {
  flex: 0 0 calc(100% / 6);
  max-width: calc(100% / 6);
  padding: 0 clamp(12px, 1.2vw, 20px);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.sv-otro:nth-child(6n + 1) {
  border-left: 0;
}

.sv-otro__icono {
  display: block;
  margin-bottom: 12px;
  color: var(--color-accent-yellow);
}

.sv-otro__nombre {
  display: block;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.8px;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.sv-otro__desc {
  display: block;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #C3CEE4;
}

@media (max-width: 1100px) {
  .services-grid--foto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sv-otros__lista {
    row-gap: clamp(26px, 3vw, 38px);
  }
  .sv-otro {
    flex-basis: calc(100% / 3);
    max-width: calc(100% / 3);
    border-left: 1px solid rgba(255, 255, 255, 0.22);
  }
  .sv-otro:nth-child(3n + 1) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  .sv-cabeza {
    grid-template-columns: 1fr;
    padding-top: 0;
    padding-bottom: calc(var(--sv-monta) + 34px);
  }
  /* En una columna la foto va primero, a todo el ancho y sin velo: el texto va
     sobre el azul sólido, así que el velo solo la oscurecería. */
  .sv-cabeza__banner {
    position: static;
    width: auto;
    order: -1;
  }
  .sv-cabeza__banner img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .sv-cabeza__velo {
    display: none;
  }
  .sv-cabeza__texto {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 720px) {
  .services-grid--foto {
    grid-template-columns: 1fr;
  }
  .sv-otro {
    flex-basis: 50%;
    max-width: 50%;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
  }
  .sv-otro:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .sv-otro {
    flex-basis: 100%;
    max-width: 100%;
    border-left: 0;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   Cierre de /servicios: dos tarjetas, preguntas y cotizador.
   Fondo gris claro para que se separe de la franja azul de arriba, tarjetas
   blancas.

   El gris es el claro de la página (--color-bg-primary), NO el del footer
   (--color-bg-tertiary), que es lo que tenía hasta el 2026-08-29. Con el del
   footer las dos zonas quedaban pegadas y del mismo tono —esta franja va justo
   encima— y se leían como un único bloque gris de media pantalla. Ahora la
   secuencia baja en tres escalones: marino, gris claro, gris del footer.

   Si algún día hay que volver a separarla del fondo, el camino NO es subir a
   --color-bg-tertiary: es darle un borde superior o más relleno. Igualarla al
   footer es justo el problema que se arregló aquí.
   -------------------------------------------------------------------------- */

.sv-cierre {
  background-color: var(--color-bg-primary);
  padding: clamp(44px, 4.6vw, 72px) 0;
}

.sv-cierre__reja {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
  align-items: stretch;
}

.sv-cierre__tarjeta {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  padding: clamp(26px, 2.4vw, 36px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.05);
}

.sv-cierre__titulo {
  font-size: clamp(1.2rem, 1.7vw, 1.42rem);
  font-weight: 900;
  margin-bottom: 12px;
}

.sv-cierre__texto {
  color: var(--color-text-body);
  line-height: 1.65;
}

.sv-cierre__lista {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

/* La comilla angular hace de viñeta: marca que son enlaces sin gastar una
   columna de sangría. */
.sv-cierre__lista a {
  display: block;
  padding-left: 18px;
  position: relative;
  color: var(--color-text-title);
  text-decoration: none;
  font-size: 0.96rem;
  line-height: 1.5;
}

.sv-cierre__lista a::before {
  content: '›';
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--color-accent);
  font-weight: 700;
}

.sv-cierre__lista a:hover,
.sv-cierre__lista a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Los dos botones al pie: con las tarjetas estiradas a la misma altura, esto
   los deja al mismo nivel aunque una tarjeta tenga más texto que la otra. */
.sv-cierre__accion {
  margin-top: auto;
  padding-top: 26px;
}

.sv-cierre__texto a {
  color: var(--color-accent);
  font-weight: 600;
}

body.dark-theme .sv-cierre__texto a {
  color: var(--color-accent-yellow);
}

@media (max-width: 760px) {
  .sv-cierre__reja {
    grid-template-columns: 1fr;
  }
}