/* ============================================
   LUR COMUNICACIÓN — ESTILOS GENERALES (main.css)
   Una sola hoja para toda la web. Todo sale de variables.css.
   La única página con CSS propia es el portfolio (trabajos.css).

   Índice:
   1. BASE ............... reset, cuerpo, columna principal
   2. SISTEMA LUR ........ secciones, tipografía, fondos, split,
                           rejillas, retícula, tira, barra, fotos,
                           fichas, enlace con flecha
   3. COMPONENTES COMUNES  barra superior, ¿Hablamos?, lightbox
   4. HOME ............... hero, servicios en lista, mosaico
   5. SERVICIOS .......... índice, capítulos, subservicios
   6. CONTACTO ........... formulario, avisos, fichas de datos
   7. LEGAL (provisional)  piezas antiguas que puede usar legal.php
   ============================================ */

/* ============================================
   1. BASE
   ============================================ */

/* Reset base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  display: flex;
  min-height: 100vh;
}

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

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

/* --- COLUMNA PRINCIPAL (junto al menú lateral) --- */

#lur-main {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  transition: margin-left var(--sidebar-transition);
}

body.sidebar-collapsed #lur-main {
  margin-left: var(--sidebar-width-collapsed);
}

/* #lur-main es hijo de un body flex y por defecto no se encoge
   por debajo del ancho de su contenido: sin esto aparece scroll horizontal. */
#lur-main {
  min-width: 0;
}

@media (max-width: 768px) {
  body {
    flex-direction: column;
  }

  #lur-main {
    margin-left: 0;
    width: 100%;
    padding-top: 70px; /* altura del mobile-header */
  }
}

/* ============================================
   2. SISTEMA LUR — BASE
   Esto es la base de todo lo que se construya de aquí en
   adelante: secciones, columnas, fondos y tipografía comparten
   estas piezas en vez de que cada sección tenga su propio CSS.
   Cambiar un valor aquí cambia TODAS las secciones que lo usan.
   ============================================ */


/* --- SECCIÓN: aire vertical + margen lateral --- */
.lur-section {
  --pad-x: var(--spacing-xl);                 /* margen lateral (= hero) */
  --pad-y: clamp(72px, 7vw, 130px);           /* aire arriba y abajo por defecto */
  padding: var(--pad-y) var(--pad-x);
}

/* Variantes de aire vertical, con nombre (igual concepto que --sm/--lg
   de usnaka). Se añaden junto a .lur-section: class="lur-section lur-section--sm" */
.lur-section--sm { --pad-y: clamp(48px, 5vw, 80px); }
.lur-section--lg { --pad-y: clamp(96px, 9vw, 170px); }

.lur-section--narrow {
  max-width: 1100px;   /* ajustar aquí el "estrecho" para toda la web */
}

.lur-section--center {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .lur-section {
    --pad-x: 20px;
    --pad-y: 56px;
  }
}


/* ============================================
   SISTEMA LUR — TIPOGRAFÍA DE SECCIONES
   Antes cada sección tenía su propio -tag / -title / -text
   (services-tag, manifesto-tag, horizon-tag...) con el mismo
   CSS repetido seis veces. Ahora es una sola clase de cada tipo;
   si una sección necesita un ancho de párrafo distinto, se añade
   una clase pequeña solo para el max-width, combinada con esta.
   ============================================ */

.lur-text__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.lur-text__title {
  font-family: var(--font-secundaria);
  font-weight: var(--font-weight-semibold);
  /*font-size: clamp(34px, 3.2vw, 56px);*/
  font-size:clamp(48px, 4.2vw, 68px);
  line-height: 1.05;
  color: var(--color-text-primary);
  text-wrap: balance;
  margin-bottom: var(--spacing-md);
}

.lur-text__body {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);   /* por defecto asume que algo le sigue */
}

/* Si es el último hijo de su columna, no deja hueco de más al final */
.lur-text__body:last-child {
  margin-bottom: 0;
}

/* Para limitar la longitud de línea por legibilidad, SIN arriesgarse a que
   se quede corto en una columna estrecha: nunca pasa de 72ch, pero si la
   columna mide menos que eso, usa el 100% disponible en vez de recortarse. */
.lur-text__body--narrow {
  max-width: min(72ch, 100%);
}

/* Para cuando el hueco por defecto se queda corto (p. ej. antes de un
   enlace grande, como en "Somos LUR") */
.lur-text__body--mb-lg { margin-bottom: var(--spacing-lg); }


/* ============================================
   SISTEMA LUR — FONDOS
   Clases de fondo independientes de la estructura: se añaden a
   cualquier <section class="lur-section ..."> sin más ajustes.
   ============================================ */

.lur-fondo--white {
  background: var(--color-bg-page);
}

.lur-fondo--soft {
  background: var(--color-bg-soft, #f6f2ea);
}

/* Verde suave: mezcla del acento de marca con blanco */
.lur-fondo--accent-soft {
  background: color-mix(in srgb, var(--color-brand-accent) 65%, #fff);
}

.lur-fondo--tostado {
  background: var(--color-brand-tostadoclaro);
}

/* Arena/gris suave — usado en Branding (servicios.php) */
.lur-fondo--soft-2 {
  background: var(--color-bg-soft-2);
}

/* Verde acento sólido (sin mezclar con blanco) — usado en Gráfico */
.lur-fondo--accent {
  background: var(--color-brand-accent);
}

/* Gris muy suave de fondo general — usado en RRSS */
.lur-fondo--surface {
  background: var(--color-bg-surface);
}


/* ============================================
   SISTEMA LUR — SPLIT (2 columnas)
   Estructura de "columna principal + columna lateral", reutilizada
   en cualquier sección con este patrón. Para una proporción nueva,
   se añade el modificador aquí — no en la sección concreta.
   ============================================ */

.lur-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;   /* proporción por defecto: 58/42 */
  gap: var(--spacing-xl);
}

/* Proporciones con nombre — "primera columna–segunda columna" */
.lur-split--50-50 { grid-template-columns: 50fr 50fr; }
.lur-split--65-35 { grid-template-columns: 65fr 35fr; }
.lur-split--35-65 { grid-template-columns: 35fr 65fr; }
.lur-split--60-40 { grid-template-columns: 60fr 40fr; }
.lur-split--40-60 { grid-template-columns: 40fr 60fr; }

/* Alineación vertical de las columnas */
.lur-split--align-center { align-items: center; }
.lur-split--align-end    { align-items: end; }

/* En móvil, la 1ª columna pasa a ir debajo de la 2ª (foto antes que texto) */
@media (max-width: 1200px) {
  .lur-split--movil-col-inversa .lur-split__col:first-child { order: 2; }
  .lur-split--movil-col-inversa .lur-split__col:last-child  { order: 1; }
}

/* Columna con filete lateral (texto de apoyo junto a un titular) */
.lur-split__col--divider {
  border-left: 1px solid rgba(0, 0, 0, 0.35);
  padding-left: var(--spacing-lg);
}

@media (max-width: 1200px) {
  .lur-split__col--divider {
    border-left: none;
    border-top: none;
    padding-left: 0;
    padding-top: 0;
  }
}

/* Columna con foto: recorte 4/5, esquinas redondeadas, zoom suave al hover.
   Para una foto a sangre (sin margen ni esquinas), añadir --bleed. */
.lur-split__col--media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
}

.lur-split__col--media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.lur-split__col--media:hover img {
  transform: scale(1.04);
}

/* --bleed: la sección pierde su padding (--pad-y/--pad-x propios) y la
   foto llega a los 4 bordes de su columna; el texto recupera el padding
   por su cuenta. Usar junto con .lur-split__col--media en la columna foto. */
.lur-split--bleed {
  padding: 0;
}

.lur-split--bleed .lur-split__col--media {
  border-radius: 0;
  aspect-ratio: auto;
  min-height: 420px;
}

.lur-split--bleed .lur-split__col:not(.lur-split__col--media) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--pad-y) var(--pad-x);
}

@media (max-width: 1200px) {
  .lur-split--bleed .lur-split__col--media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

/* Ratios ⇒ en móvil todas las variantes se apilan a 1 columna.
   Va DESPUÉS de los modificadores de ratio para ganarles siempre. */
@media (max-width: 1200px) {
  .lur-split {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
}

/* Filete corto decorativo (título/texto → filete). Tamaño por defecto
   32px; --lg para el más largo (48px, usado en "Somos LUR"). */
.lur-rule {
  width: 32px;
  height: 1px;
  background: currentColor;
  color: var(--color-text-primary);
  margin: var(--spacing-md) 0 0;
}

.lur-rule--lg { width: 48px; }


/* ============================================
   SISTEMA LUR — AMPLIACIÓN
   Tipografía de titulares, fondo negro, rejillas, retícula,
   tira de fotos, barra de cabecera, fotos y fichas de color.
   ============================================ */

/* --- TIPOGRAFÍA --- */

/* Igual que .lur-text__body: si el titular es lo último de su columna,
   no deja hueco de más (necesario para alinear con --align-end). */
.lur-text__title:last-child {
  margin-bottom: 0;
}

/* Titular sin serifa (Inter Tight), apretado. Se añade junto a
   .lur-text__title:  class="lur-text__title lur-text__title--display" */
.lur-text__title--display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Titular más grande, para frases-manifiesto */
.lur-text__title--xl {
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 26ch;
  margin-bottom: var(--spacing-xl);
}

/* Titular de portada (h1 de cada página). Nunca más ancho que ~media página */
.lur-text__title--hero {
  font-size: clamp(48px, 5.6vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  max-width: 20ch;
}

/* Número grande decorativo (01, 02…) encima de un bloque de texto.
   En blanco: es decoración, el título que va debajo es lo que se lee. */
.lur-text__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(64px, 6vw, 96px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--color-on-brand);
  margin-bottom: var(--spacing-sm);
}

/* Nombre en una ficha de perfil (más pequeño que el titular de la sección) */
.lur-profile__name {
  margin-bottom: var(--spacing-xs);
}

/* Titular enorme, tipo cartel (nombre de un capítulo) */
.lur-text__title--mega {
  font-size: clamp(56px, 7vw, 120px);
  line-height: 0.88;
  letter-spacing: -0.055em;
}

/* Entradilla: frase de introducción, más grande que el párrafo */
.lur-text__lead {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

/* Subtítulo corto (encabeza una columna de texto) */
.lur-text__subtitle {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

/* Frase destacada dentro de un bloque de texto (más grande que el párrafo) */
.lur-text__quote {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin-top: var(--spacing-lg);
  max-width: 32ch;
  text-wrap: balance;
}

/* Frase-manifiesto suelta: grande, pero como mucho media página */
.lur-text__statement {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--color-text-primary);
  max-width: 24ch;
  text-wrap: balance;
}

/* Parte de un titular en gris claro:  <span class="lur-text__faint"> */
.lur-text__faint {
  color: var(--color-text-faint);
}


/* --- FONDOS --- */

/* Negro de marca, con el texto en blanco */
.lur-fondo--black {
  background: var(--color-brand-black);
  color: var(--color-on-brand);
}

/* Sobre arena o turquesa, el gris claro no se lee: pasa a gris oscuro */
.lur-fondo--tostado .lur-text__faint,
.lur-fondo--accent .lur-text__faint {
  color: var(--color-text-muted);
}

/* Sobre negro, las piezas de texto del sistema pasan a claro */
.lur-fondo--black .lur-text__title,
.lur-fondo--black .lur-text__subtitle,
.lur-fondo--black .lur-text__lead,
.lur-fondo--black .lur-text__quote,
.lur-fondo--black .lur-text__statement,
.lur-fondo--black .link-arrow,
.lur-fondo--black .works-mosaic__item {
  color: var(--color-on-brand);
}

.lur-fondo--black .lur-text__body  { color: var(--color-on-brand-soft); }
.lur-fondo--black .lur-text__label { color: var(--color-on-brand-muted); }
.lur-fondo--black .lur-grid--ruled { border-top-color: var(--color-border-sidebar); }


/* --- REJILLA (columnas iguales) ---
   Para varias columnas del mismo ancho. Para 2 columnas
   desiguales, sigue siendo .lur-split.
   class="lur-grid lur-grid--3" */
.lur-grid {
  display: grid;
  gap: var(--spacing-lg);
}

.lur-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lur-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lur-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Más separación entre columnas */
.lur-grid--gap-xl {
  gap: var(--spacing-xl);
}

/* Con filete negro arriba */
.lur-grid--ruled {
  border-top: 1px solid var(--color-brand-black);
  padding-top: var(--spacing-md);
}

/* Si después va un enlace con flecha, que respire */
.lur-grid + .link-arrow {
  margin-top: var(--spacing-lg);
}

@media (max-width: 1200px) {
  .lur-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .lur-grid--2,
  .lur-grid--3,
  .lur-grid--4 { grid-template-columns: minmax(0, 1fr); }
}


/* --- CABECERA DE SECCIÓN ---
   Envuelve etiqueta + titular cuando debajo va una pieza
   (retícula, lista...). El titular, al ser el último, no suma margen. */
.lur-head {
  margin-bottom: var(--spacing-lg);
}


/* Retícula justo debajo de un titular suelto */
.lur-text__title + .lur-reticula {
  margin-top: var(--spacing-lg);
}

/* Si una retícula o rejilla va justo después de una cabecera en split, que respire */
.lur-split + .lur-reticula,
.lur-split + .lur-grid,
.lur-split + .lur-split,
.lur-split + .works-mosaic {
  margin-top: var(--spacing-xl);
}


/* --- LISTA CON FILETES ---
   Lista corta de conceptos en grande (especialidades, etc.)
   <ul class="lur-list"><li>Branding</li>…</ul> */
.lur-list {
  list-style: none;
  border-top: 1px solid var(--color-brand-black);
}

.lur-list li {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border-neutral);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}


/* --- RETÍCULA (4 columnas con aire) ---
   Celdas de 1 columna por defecto; --wide ocupa 2.
   Alto mínimo: --tall (fila alta) o --short (fila baja).
   <div class="lur-reticula">
     <figure class="lur-media lur-reticula__cell--wide lur-reticula__cell--short">…</figure>
     <div class="lur-card lur-fondo--black lur-reticula__cell--short">…</div>
   </div> */
.lur-reticula {
  --reticula-row-tall: clamp(380px, 36vw, 560px);
  --reticula-row-short: clamp(280px, 24vw, 360px);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-gutter);
}

.lur-reticula__cell--wide  { grid-column: span 2; }
.lur-reticula__cell--tall  { min-height: var(--reticula-row-tall); }
.lur-reticula__cell--short { min-height: var(--reticula-row-short); }

/* Celda en la mitad derecha (columnas 3 y 4) */
.lur-reticula__cell--end   { grid-column: 3 / -1; }

/* Celda de texto suelto (sin caja): se separa un poco de la fila de arriba */
.lur-reticula__cell--text  { padding-top: var(--spacing-lg); }

@media (max-width: 1200px) {
  .lur-reticula { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lur-reticula__cell--end { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .lur-reticula { grid-template-columns: minmax(0, 1fr); }
  .lur-reticula > * { grid-column: auto; }
  .lur-reticula__cell--tall  { min-height: 320px; }
  .lur-reticula__cell--short { min-height: 240px; }
}


/* --- TIRA DE FOTOS CON RITMO ---
   Una fila de miniaturas a distinta altura y desnivel, como en la home.
   El ritmo va por posición (no por foto): si cambias o reordenas
   fotos, el dibujo de la fila se mantiene.
   Para ajustar: cambia --h (alto) y --drop (cuánto baja) de cada posición. */
.lur-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--spacing-gutter);
  align-items: start;
}

.lur-strip__item {
  --h: 280px;
  --drop: 0px;
  margin-top: var(--drop);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  color: var(--color-text-primary);
}

.lur-strip__item .lur-media { height: var(--h); }

/*  posición   alto    desnivel */
.lur-strip__item:nth-child(6n+1) { --h: 300px; --drop: 0px;  }
.lur-strip__item:nth-child(6n+2) { --h: 220px; --drop: 64px; }
.lur-strip__item:nth-child(6n+3) { --h: 260px; --drop: 0px;  }
.lur-strip__item:nth-child(6n+4) { --h: 300px; --drop: 96px; }
.lur-strip__item:nth-child(6n+5) { --h: 240px; --drop: 24px; }
.lur-strip__item:nth-child(6n+6) { --h: 320px; --drop: 0px;  }

.lur-strip__tag {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lur-strip__item:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 4px;
}

/* Una barra de cabecera debajo de una rejilla, que respire */
.lur-grid + .lur-bar {
  margin-top: var(--spacing-xl);
}

@media (max-width: 1200px) {
  .lur-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .lur-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lur-strip__item { --drop: 0px !important; }
  .lur-strip__item .lur-media { height: 200px; }
}


/* --- BARRA DE CABECERA ---
   Etiqueta a la izquierda, enlace a la derecha, filete debajo.
   <div class="lur-bar"><span class="lur-text__label">…</span><a class="link-arrow">…</a></div> */
.lur-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-brand-black);
}

.lur-bar .lur-text__label {
  margin-bottom: 0;
}


/* --- FOTO (recorte + zoom suave) ---
   La foto llena su caja. La altura la da quien la usa
   (una celda de rejilla, un min-height, un aspect-ratio...). */
.lur-media {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--color-bg-surface);
}

.lur-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.lur-media:hover img,
a:hover .lur-media img {
  transform: scale(1.04);
}


/* --- FICHA DE COLOR ---
   Texto arriba, enlace abajo. El color lo da un fondo del sistema:
   class="lur-card lur-fondo--accent"  /  "lur-card lur-fondo--black" */
.lur-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}

.lur-card .about-dots {
  margin-bottom: 0;
}

/* Ficha con el contenido arriba (en vez de repartido arriba/abajo) */
.lur-card--top {
  justify-content: flex-start;
}

/* Ficha "en hueco": sin color, con filete negro */
.lur-card--outline {
  border: 1px solid var(--color-brand-black);
  background: transparent;
}

.lur-card .lur-text__lead + .lur-card__link {
  margin-top: var(--spacing-lg);
}

.lur-card__text {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Cifra grande dentro de una ficha (+20, +12…) */
.lur-card__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(64px, 7vw, 110px);
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.lur-card__text--lg {
  font-weight: var(--font-weight-medium);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Enlace de ficha: filete arriba y flecha a la derecha */
.lur-card__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid currentColor;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

.lur-fondo--black .lur-card__link {
  border-top-color: var(--color-border-sidebar);
}

.lur-card__link span {
  transition: transform 0.25s ease;
}

.lur-card__link:hover span,
.lur-card__link:focus-visible span {
  transform: translateX(5px);
}

.lur-card__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


@media (prefers-reduced-motion: reduce) {
  .lur-media img,
  .lur-card__link span { transition: none; }

  .lur-media:hover img,
  a:hover .lur-media img,
  .lur-card__link:hover span { transform: none; }
}


/* ============================================
   SISTEMA LUR — ENLACE CON FLECHA
   ============================================ */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Si va justo debajo de un párrafo, un poco más de aire que el margen
   por defecto del párrafo (20px). Si va solo en la columna, no se activa. */
.lur-text__body + .link-arrow {
  margin-top: var(--spacing-sm);
}

.link-arrow__arrow {
  font-size: var(--font-size-md);
  line-height: 1;
  transition: transform 0.25s ease;
}

.link-arrow:hover .link-arrow__arrow,
.link-arrow:focus-visible .link-arrow__arrow {
  transform: translateX(5px);
}

.link-arrow:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .link-arrow__arrow {
    transition: none;
  }
}


/* --- PUNTOS DE COLOR (los tres de la marca) --- */

.about-dots {
  display: flex;
  gap: 8px;
  margin-bottom: var(--spacing-md);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

/* ============================================
   3. COMPONENTES COMUNES
   ============================================ */

/* --- BARRA SUPERIOR (includes/topbar.php) ---
   En móvil se oculta (ya está la cabecera móvil del menú): ver HOME › RESPONSIVE */

.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xl);
  border-bottom: 1px solid var(--color-brand-black);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.topbar__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  transition: color 0.2s;
}

.topbar__wa-icon {
  width: 16px;
  height: 16px;
  fill: var(--color-brand-accent);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.topbar__wa:hover { color: var(--color-text-primary); }
.topbar__wa:hover .topbar__wa-icon { transform: scale(1.15); }

.topbar__wa:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 4px;
}


/* --- ¿HABLAMOS? --- */
/* Bloque común a varias páginas (includes/hablamos.php), en negro */
.section-hablamos {
  background: var(--color-brand-black);
  color: var(--color-on-brand);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--spacing-lg);
  row-gap: var(--spacing-xl);
  align-items: stretch;
}

.hablamos-main {
  grid-column: 1 / -1;
}

/* Titular enorme, tipo cartel */
.section-hablamos .lur-text__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(64px, 11vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--color-on-brand);
  margin-bottom: var(--spacing-lg);
}

.section-hablamos .lur-text__label { color: var(--color-on-brand-muted); }

.hablamos-text {
  max-width: 62ch;
  color: var(--color-on-brand-soft);
}

/* Datos de contacto en fila, con filete arriba */
.hablamos-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md) var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-sidebar);
}

.hablamos-item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--font-size-md);
  color: var(--color-on-brand);
}

.hablamos-item a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hablamos-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Botón */
.hablamos-action {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-sidebar);
}

.hablamos-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--color-brand-accent);
  border-radius: 999px;
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-brand-black);
  transition: background 0.2s, transform 0.1s;
}

.hablamos-cta:hover { background: var(--color-on-brand); }
.hablamos-cta:active { transform: scale(0.98); }

.hablamos-cta__arrow {
  font-size: var(--font-size-md);
  line-height: 1;
  transition: transform 0.25s ease;
}

.hablamos-cta:hover .hablamos-cta__arrow,
.hablamos-cta:focus-visible .hablamos-cta__arrow {
  transform: translateX(5px);
}

.hablamos-cta:focus-visible,
.hablamos-item a:focus-visible {
  outline: 2px solid var(--color-on-brand);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .section-hablamos { grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing-md); }
  .hablamos-list { flex-direction: column; }
  .hablamos-action { justify-content: flex-start; border-top: none; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hablamos-cta,
  .hablamos-cta__arrow { transition: none; }
}


/* --- TITULARES EN MÓVIL ---
   En móvil todos los titulares grandes (h1 de portada, titulares de sección,
   capítulos de servicios y ¿Hablamos?) van al mismo tamaño, el de los grandes.
   Fuera quedan los titulares de dentro de fichas y los nombres de perfil.
   Para cambiar el tamaño en toda la web, solo hay que tocar el font-size de abajo. */
@media (max-width: 768px) {
  .lur-text__title--display:not(.lur-profile__name),
  .section-hablamos .lur-text__title {
    font-size: clamp(44px, 13vw, 64px);
    line-height: 0.95;
    letter-spacing: -0.05em;
  }

  .lur-card .lur-text__title--display {
    font-size: clamp(36px, 3.6vw, 56px);
    line-height: 1;
    letter-spacing: -0.04em;
  }
}


/* --- LIGHTBOX --- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  pointer-events: all;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  cursor: pointer;
  font-family: var(--font-primary);
  transition: color 0.2s;
}

.lightbox__close:hover {
  color: #fff;
}

/* ============================================
   4. HOME
   ============================================ */

/* --- CABECERA DE SERVICIOS --- */
.services-head {
  margin-bottom: 65px;
}

@media (max-width: 768px) {
  .services-head { margin-bottom: 32px; }
}


/* --- HERO EN RETÍCULA ---
   Es una .lur-reticula (sistema) que además lleva .lur-section
   para heredar su margen lateral; aquí solo se cambia el aire
   vertical y se da forma al titular. */

.hero-grid {
  padding-top: var(--spacing-gutter);
  padding-bottom: 0;
}

.hero-grid__title {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg) 0;
}


/* --- SERVICIOS COMO LISTA ---
   Fila = número | nombre | descripción | miniatura | flecha */

.svc-list {
  border-top: 1px solid var(--color-brand-black);
}

.svc-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr) 120px 40px;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border-neutral);
  color: var(--color-text-primary);
}

.svc-row:last-child {
  border-bottom-color: var(--color-brand-black);
}

.svc-row__num {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.svc-row__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  transition: transform 0.3s ease;
}

.svc-row__desc {
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.svc-row__thumb {
  width: 120px;
  height: 72px;
}

.svc-row__arrow {
  font-size: var(--font-size-lg);
  text-align: right;
  transition: transform 0.25s ease;
}

.svc-row:hover .svc-row__name { transform: translateX(8px); }
.svc-row:hover .svc-row__arrow { transform: translateX(5px); }

.svc-row:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 4px;
}


/* --- PROYECTOS EN MOSAICO ---
   Rejilla de 12 columnas:
   --wide = 7 col · --side = 5 col (más baja) · --third = 4 col */

.works-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--spacing-lg) var(--spacing-md);
}

.works-mosaic__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  color: var(--color-text-primary);
}

.works-mosaic__item--wide  { grid-column: span 7; }
.works-mosaic__item--side  { grid-column: span 5; margin-top: calc(var(--spacing-xl) * 2); }
.works-mosaic__item--third { grid-column: span 4; }

.works-mosaic__item--wide  .lur-media { height: clamp(320px, 36vw, 520px); }
.works-mosaic__item--side  .lur-media { height: clamp(260px, 28vw, 400px); }
.works-mosaic__item--third .lur-media { height: clamp(300px, 30vw, 440px); }

/* Ficha dentro del mosaico: mismo alto que las fotos de --third */
.works-mosaic__card {
  grid-column: span 4;
  min-height: clamp(300px, 30vw, 440px);
}

.works-mosaic__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.works-mosaic__meta strong {
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

.works-mosaic__meta span {
  color: var(--color-text-muted);
}

.lur-fondo--black .works-mosaic__meta span {
  color: var(--color-on-brand-muted);
}

/* Lo que va debajo de un mosaico (frase, split...) respira */
.works-mosaic + .lur-text__statement,
.works-mosaic + .lur-split {
  margin-top: var(--spacing-xl);
}

/* Mosaico desplazado: 30% vacío a la izquierda · foto 40% · foto 30% más baja */
.works-mosaic--offset {
  grid-template-columns: 3fr 4fr 3fr;
}

.works-mosaic--offset .works-mosaic__item--wide { grid-column: 2; }
.works-mosaic--offset .works-mosaic__item--side { grid-column: 3; }


/* --- RESPONSIVE (home) --- */

@media (max-width: 1200px) {
  /* Hero a 2 columnas (lo hace .lur-reticula): el titular deja de tener alto fijo */
  .hero-grid__title { min-height: 0; padding: var(--spacing-xl) 0 var(--spacing-md); }

  .svc-row { grid-template-columns: 48px minmax(0, 1fr) 120px 32px; }
  .svc-row__desc { display: none; }

  .works-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-mosaic__item--wide { grid-column: span 2; }
  .works-mosaic__item--side,
  .works-mosaic__item--third,
  .works-mosaic__card { grid-column: span 1; }
  .works-mosaic__item--side { margin-top: 0; }
  .works-mosaic__item--side .lur-media { height: clamp(300px, 30vw, 440px); }
}

@media (max-width: 768px) {
  /* En móvil no hay barra superior (ya está el header móvil del sidebar) */
  .topbar { display: none; }

  .hero-grid__title { min-height: 0; padding: var(--spacing-lg) 0 var(--spacing-md); }

  /* Más aire arriba al entrar: el mismo que el resto de secciones en móvil */
  .hero-grid { padding-top: var(--pad-y); }

  .svc-row { grid-template-columns: 36px minmax(0, 1fr) 24px; gap: var(--spacing-md); }
  .svc-row__thumb { display: none; }

  .works-mosaic { grid-template-columns: minmax(0, 1fr); }
  .works-mosaic > * { grid-column: auto; }
  .works-mosaic__item .lur-media { height: auto; aspect-ratio: 4 / 3; }
  .works-mosaic__card { min-height: 260px; }

  .lur-text__title--xl { margin-bottom: var(--spacing-lg); }

}

@media (prefers-reduced-motion: reduce) {
  .topbar__wa-icon,
  .svc-row__name,
  .svc-row__arrow { transition: none; }

  .topbar__wa:hover .topbar__wa-icon,
  .svc-row:hover .svc-row__name,
  .svc-row:hover .svc-row__arrow { transform: none; }
}


/* --- Mosaico desplazado en pantallas medianas y móvil --- */
@media (max-width: 1200px) {
  .works-mosaic--offset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-mosaic--offset .works-mosaic__item--wide { grid-column: 1; }
  .works-mosaic--offset .works-mosaic__item--side { grid-column: 2; margin-top: var(--spacing-xl); }
}

@media (max-width: 768px) {
  .works-mosaic--offset { grid-template-columns: minmax(0, 1fr); }
  .works-mosaic--offset .works-mosaic__item--wide,
  .works-mosaic--offset .works-mosaic__item--side { grid-column: auto; margin-top: 0; }
}

/* ============================================
   5. SERVICIOS
   ============================================ */

/* --- ÍNDICE: 4 fichas de color que llevan a cada servicio ---
   Son .lur-card dentro de una .lur-reticula; aquí solo su forma. */
/* 5 fichas en fila en escritorio */
.srv-index {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Con 5 fichas cada una es más estrecha: algo menos de relleno y de letra */
.srv-index .srv-index__card {
  padding: var(--spacing-md);
}

.srv-index .srv-index__name {
  flex-wrap: wrap;   /* si la palabra no cabe, la flecha baja en vez de salirse */
  font-size: clamp(20px, 1.6vw, 28px);
}

.srv-index__card {
  min-height: 180px;
}

/* En tablet (2 columnas), la última ficha suelta ocupa toda la fila */
@media (max-width: 1200px) {
  .srv-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srv-index > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .srv-index { grid-template-columns: minmax(0, 1fr); }
}

.srv-index__num {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-caps);
}

.srv-index__name {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-sm);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.srv-index__name span {
  font-size: var(--font-size-lg);
  transition: transform 0.25s ease;
}

.srv-index__card:hover .srv-index__name span {
  transform: translateY(4px);
}

.srv-index__card:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 4px;
}


/* --- CAPÍTULO: cada servicio ---
   Filete negro arriba; dentro: cabecera (lur-split), fila de
   retícula (fotos + ficha con la cita) y la lista de subservicios. */
.srv-chapter {
  border-top: 1px solid var(--color-brand-black);
  scroll-margin-top: var(--spacing-md);
}



/* --- SUBSERVICIOS: lista a la vista en 2 columnas --- */
.srv-subs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  border-top: 1px solid var(--color-brand-black);
}

.srv-sub {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--spacing-md);
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--color-border-neutral);
}

.srv-sub__num {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding-top: 6px;
}

.srv-sub__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: var(--spacing-xs);
}

@media (max-width: 768px) {
  .srv-subs { grid-template-columns: minmax(0, 1fr); }
  .srv-sub { grid-template-columns: 32px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .srv-index__name span { transition: none; }
  .srv-index__card:hover .srv-index__name span { transform: none; }
}

/* ============================================
   6. CONTACTO
   ============================================ */

/* --- FORMULARIO DE LÍNEAS ---
   Campos sin caja: solo una línea fina debajo que se oscurece al escribir. */
.contacto-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-lg);
}

.contacto-field input,
.contacto-field textarea {
  width: 100%;
  padding: var(--spacing-md) 0 var(--spacing-sm);
  border: none;
  border-bottom: 1px solid var(--color-border-neutral);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contacto-field textarea {
  min-height: 160px;
  resize: vertical;
  line-height: var(--line-height-base);
}

.contacto-field input::placeholder,
.contacto-field textarea::placeholder {
  color: var(--color-text-muted);
}

.contacto-field input:focus,
.contacto-field textarea:focus {
  border-bottom-color: var(--color-brand-black);
  box-shadow: 0 1px 0 0 var(--color-brand-black);
}

/* Privacidad */
.contacto-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-primary);
}

.contacto-checkbox input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-brand-black);
  cursor: pointer;
}

.contacto-checkbox label { cursor: pointer; }

.contacto-checkbox a,
.contacto-rgpd a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contacto-rgpd {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Botón: el mismo negro redondeado de la web */
.contacto-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--spacing-lg);
  padding: 16px 28px;
  border: none;
  border-radius: 999px;
  background: var(--color-brand-black);
  color: var(--color-on-brand);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}

.contacto-submit:hover {
  background: var(--color-brand-accent);
  color: var(--color-brand-black);
}

.contacto-submit:active { transform: scale(0.98); }

.contacto-submit:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
}

.contacto-submit__arrow { transition: transform 0.25s ease; }
.contacto-submit:hover .contacto-submit__arrow { transform: translateX(5px); }


/* --- AVISOS (enviado / error) --- */
.contacto-aviso {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-md);
  line-height: 1.5;
}

.contacto-aviso p + p { margin-top: var(--spacing-xs); }

.contacto-aviso--ok {
  background: var(--color-brand-accent);
  color: var(--color-brand-black);
}

.contacto-aviso--error {
  border: 1px solid var(--color-brand-black);
  border-left-width: 4px;
  color: var(--color-text-primary);
}


/* --- COLUMNA DERECHA: fichas apiladas --- */
.contacto-fichas {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gutter);
}

.contacto-datos {
  list-style: none;
  border-top: 1px solid var(--color-brand-black);
}

.contacto-datos li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-neutral);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.contacto-datos a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contacto-datos__extra {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

.contacto-datos a:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
}


/* --- BOTÓN DE WHATSAPP (ficha negra) ---
   Pastilla blanca con el logo de WhatsApp y flecha. */
.contacto-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--spacing-sm);
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--color-on-brand);
  color: var(--color-brand-black);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  transition: background 0.2s, transform 0.1s;
}

.contacto-wa__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}

.contacto-wa__arrow { transition: transform 0.25s ease; }

.contacto-wa:hover { background: var(--color-brand-accent); }
.contacto-wa:hover .contacto-wa__arrow { transform: translateX(5px); }
.contacto-wa:active { transform: scale(0.98); }

.contacto-wa:focus-visible {
  outline: 2px solid var(--color-on-brand);
  outline-offset: 3px;
}


/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .contacto-form-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .contacto-field input,
  .contacto-field textarea,
  .contacto-submit,
  .contacto-submit__arrow,
  .contacto-wa,
  .contacto-wa__arrow { transition: none; }
  .contacto-submit:hover .contacto-submit__arrow,
  .contacto-wa:hover .contacto-wa__arrow { transform: none; }
}

/* ============================================
   7. LEGAL (provisional)
   Piezas del diseño antiguo que puede estar usando legal.php.
   Cuando legal.php pase al diseño nuevo, se borra este bloque entero.
   ============================================ */

/* Efecto subrayado */
.highlight {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    var(--highlight-color, var(--color-brand-accent)) 50%
  );
  background-repeat: no-repeat;
  padding-bottom: 2px;
}

.section-content {
  padding: var(--spacing-xl);
  max-width: 100%;
  width: 100%;
}

/* Bloque de texto */
.text-block {
  margin-bottom: var(--spacing-xl);
}

.text-block h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.text-block h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.text-block p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

.page-section-hero {
  position: relative;
  height: 35vh;
  height: 20vh;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.page-section-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay, rgba(0, 0, 0, 1));
  /*mix-blend-mode: multiply;*/
}

.page-hero-body {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--spacing-lg);
}

.page-hero-tag {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--spacing-xs);
}

.page-hero-title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: #fff;
  line-height: 1.15;
}

.page-hero-subtitle {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.8);
  margin-top: var(--spacing-xs);
}

@media (max-width: 768px) {
  .section-content {
    padding: var(--spacing-md);
  }
  .section-content h2 {
    font-size: 32px;
    line-height: 42px;
  }
}