/* Limpiezas del Sur — hoja de componentes del tema hijo.
   GENERADA por tools/desplegar_tema.py desde interfaz/web/mockups/componentes.css.
   No se edita a mano: se edita la de las maquetas y se vuelve a ejecutar el script. */

/* === TIPOGRAFIAS, SERVIDAS DESDE EL PROPIO SITIO ==========================
   Copiadas del tema hijo (interfaz/web/child-theme/style.css) con la ruta
   cambiada a relativa, para que la maqueta se vea igual abierta suelta.

   No es una preferencia tecnica: cargar las fuentes de fonts.googleapis.com
   manda la IP de cada visitante a Google en cada visita, y la politica de
   privacidad que hay escrita (wiki/web-legales.md) declara que eso no pasa.

   ⚠️ Estas reglas son de la MAQUETA. En produccion vienen del tema hijo, asi
   que NO hay que convertirlas ni meterlas en Bricks.
   12 caras: Archivo y Source Sans 3 son variables (un fichero cubre todo el
   eje de pesos); IBM Plex Mono va en estatico.
   ========================================================================= */















/* === CABECERA: EL DESPLEGABLE DE SERVICIOS ================================
   Sin JavaScript: se abre con :hover y con :focus-within, asi que tambien
   funciona con el teclado (los enlaces del submenu son focusables y al
   recibir el foco abren el grupo).

   🔴 AVISO PARA QUIEN CONVIERTA A BRICKS: la cabecera y el pie NO se
   convierten desde este HTML. Se montan como plantillas de Bricks con su
   elemento NATIVO de navegacion (nav-nested), que ya trae el desplegable
   hecho y editable desde el builder. Convertir esto dejaria un monton de
   divs que Miguel no podria tocar comodamente, que es justo lo que se
   quiere evitar. Este CSS existe solo para que la maqueta se pueda ver.
   ========================================================================= */

.lds-cabecera__grupo{position:relative}
.lds-cabecera__grupo-titulo{
  /* Es un <button> para que pueda recibir el foco y abrir el submenu con el teclado
     (con un <span> no era focusable y :focus-within no se disparaba nunca). Se le
     quitan los estilos de boton del navegador para que se vea como el resto del menu. */
  appearance:none; background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
}
.lds-cabecera__submenu{
  position:absolute; top:100%; left:calc(var(--space-3) * -1);
  margin:0; padding:var(--space-2) 0;
  list-style:none; min-width:15rem;
  background:var(--surface-card);
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-2);
  box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; transform:translateY(var(--space-1));
  transition:opacity .12s ease, transform .12s ease, visibility .12s;
  z-index:20;
}
.lds-cabecera__grupo:hover .lds-cabecera__submenu,
.lds-cabecera__grupo:focus-within .lds-cabecera__submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.lds-cabecera__subenlace{
  display:block; padding:var(--space-2) var(--space-4);
  font:var(--type-body-sm); color:var(--text-body); text-decoration:none;
}
.lds-cabecera__subenlace:hover,
.lds-cabecera__subenlace:focus-visible{background:var(--surface-brand-tint); color:var(--text-brand)}
.lds-cabecera__subenlace[aria-current="page"]{color:var(--text-brand); font-weight:var(--weight-semibold)}
.lds-cabecera__enlace[aria-current="page"],
.lds-cabecera__grupo-titulo[data-lds-activo="si"]{color:var(--text-brand); font-weight:var(--weight-semibold)}

/* Los servicios del pie pasaron de ser texto a ser enlaces. */
.lds-pie__lista a{color:inherit; text-decoration:none}
.lds-pie__lista a:hover,
.lds-pie__lista a:focus-visible{text-decoration:underline}

@media (max-width:767px){
  /* 03-09-2026: en movil el submenu NO se despliega en linea. Antes se quedaba
     SIEMPRE abierto y la cabecera era un muro de diez enlaces que empujaba el
     heroe fuera de pantalla (medido a 375 px). «Servicios» es un enlace a su
     propio hub, que lista los seis, y el pie los repite: no se pierde nada. */
  .lds-cabecera__submenu{display:none}
}

/* ============================================================================
   LIMPIEZAS DEL SUR — HOJA DE COMPONENTES DE LAS MAQUETAS
   ----------------------------------------------------------------------------
   Extraida de home.html el 02-09-2026 para que TODAS las paginas de
   interfaz/web/mockups/ compartan las mismas clases. Es importante que sea una
   sola hoja y no una copia por pagina: al convertir a Bricks, cada clase se
   crea UNA vez como clase global y las paginas siguientes la reutilizan por
   nombre. Si cada maqueta trajera su propia version de .lds-boton, acabariamos
   con .lds-boton, .lds-boton-2 y .lds-boton-3 en el builder.

   REGLA PARA QUIEN AÑADA UNA PAGINA NUEVA:
     1. Antes de escribir una clase, busca si ya existe aqui. Reutilizala.
     2. Si de verdad hace falta una clase nueva, declarala en el <style> de tu
        propia pagina bajo el comentario "CLASES NUEVAS DE ESTA PAGINA", para
        que se vea de un vistazo que hay que subirla a esta hoja despues.
     3. Ni un color, tamaño, espaciado o radio inventado: solo var(--token).
   ============================================================================ */




/* ==========================================================================
   HOJA DE COMPONENTES — clases .lds-*
   En producción va en la hoja de componentes del tema hijo, NO en los ajustes
   de Bricks. Motivo: aquí hay reglas con :checked, :has(), :focus-visible y
   ::before que Bricks no sabe representar en su panel; si viven en CSS propio
   se editan una vez y valen para toda la web.
   Base = escritorio (Bricks es desktop-first). Las media queries están todas
   al final, agrupadas en los tres breakpoints nativos de Bricks:
   991px (tablet_portrait) · 767px (mobile_landscape) · 478px (mobile_portrait).
   Una media query con otro valor SE PIERDE al convertir.
   ========================================================================== */

[hidden]{display:none !important}

.lds-visualmente-oculto{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* --- Ritmo vertical de sección ------------------------------------------ */
.lds-seccion{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.lds-seccion--compacta{padding-top:var(--section-y-compact);padding-bottom:var(--section-y-compact)}
.lds-seccion--papel{background:var(--surface-paper);border-top-width:var(--rule-hair);border-top-style:solid;border-top-color:var(--hueso-oscuro);border-bottom-width:var(--rule-hair);border-bottom-style:solid;border-bottom-color:var(--hueso-oscuro)}
.lds-seccion--marca{background:var(--surface-brand);color:var(--text-on-dark)}

/* Cabecera de sección: filete azul de 2px para abrir, como manda el sistema. */
.lds-seccion__cabecera{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  column-gap:var(--space-5);
  row-gap:var(--space-3);
  padding-bottom:var(--space-4);
  border-bottom-width:var(--border-width-strong);
  border-bottom-style:solid;
  border-bottom-color:var(--azul-pizarra);
  margin-bottom:var(--space-6);
}
.lds-seccion__apunte{margin:0;font:var(--type-body-sm);color:var(--text-body)}
/* Los h2 no llevan margen (lo quita el reset del sistema). Los que abren un
   bloque sin cabecera de seccion lo necesitan, o el titular se pega al texto. */
.lds-titulo-bloque{margin-bottom:var(--space-4)}

/* ⚠️ MEDIDO, NO SUPUESTO: --gris-cal sobre --hueso da 4,32:1, por debajo del
   4,5:1 que exige AA. Sobre blanco da 4,83:1 y sí pasa. Por eso, en las
   secciones de papel, el texto secundario y el rótulo en versalitas se pintan
   con tokens que sí llegan: --text-body (9,4:1) y --text-brand (10,1:1).
   Está anotado en el README como carencia del sistema, no como capricho.
   Ojo con el alcance: se apunta solo a los rótulos que están SOBRE papel. Un
   «.lds-config .lds-eyebrow» a secas se comería también el rótulo de la
   tarjeta de precio, que va sobre azul y es ámbar. */
.lds-seccion--papel .lds-eyebrow,
.lds-config__cabecera .lds-eyebrow{color:var(--text-brand)}

/* --- Botón --------------------------------------------------------------- */
/* 44px de alto mínimo: objetivo táctil que fija diseno/sistema/readme.md.
   No existe token para ese valor (anotado en el README de esta carpeta). */
.lds-boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  column-gap:var(--space-2);
  min-height:44px;
  padding-top:var(--space-3);
  padding-bottom:var(--space-3);
  padding-left:var(--space-5);
  padding-right:var(--space-5);
  font-family:var(--font-titulares);
  font-size:var(--size-h4);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-snug);
  text-align:center;
  text-decoration:none;
  border-width:var(--border-width);
  border-style:solid;
  border-color:transparent;
  border-radius:var(--radius-2);
  cursor:pointer;
  transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease),border-color var(--duration) var(--ease);
}
.lds-boton--primario{background:var(--azul-pizarra);color:var(--blanco);border-color:var(--azul-pizarra)}
.lds-boton--primario:hover{background:var(--azul-pizarra-900);border-color:var(--azul-pizarra-900);color:var(--blanco)}
/* El ÚNICO botón ámbar de la página: la acción de precio. */
.lds-boton--acento{background:var(--ambar);color:var(--azul-pizarra-900);border-color:var(--ambar)}
.lds-boton--acento:hover{background:var(--ambar-900);border-color:var(--ambar-900);color:var(--hueso)}
.lds-boton--secundario{background:transparent;color:var(--azul-pizarra);border-color:var(--azul-pizarra)}
.lds-boton--secundario:hover{background:var(--azul-pizarra-050);color:var(--azul-pizarra-900)}
/* Acción principal SOBRE FONDO AZUL. Un botón azul pizarra sobre el héroe
   azul pizarra es invisible: sobre oscuro, el sólido se hace en hueso. */
.lds-boton--claro{background:var(--hueso);color:var(--azul-pizarra-900);border-color:var(--hueso)}
.lds-boton--claro:hover{background:var(--blanco);border-color:var(--blanco);color:var(--azul-pizarra-900)}
.lds-boton--inverso{background:transparent;color:var(--hueso);border-color:var(--border-on-dark)}
.lds-boton--inverso:hover{background:var(--hueso);color:var(--azul-pizarra-900);border-color:var(--hueso)}
.lds-boton--bloque{display:flex;width:100%}
.lds-boton__cifra{font-family:var(--font-cifras);font-variant-numeric:tabular-nums}

/* --- Icono dentro de un botón (03-09-2026) -------------------------------
   El glifo es el `phone` de Lucide, que es lo que pide el componente IconButton
   del sistema (diseno/sistema/components/core/IconButton.prompt.md), servido como
   MÁSCARA CSS y no como <img> ni como <svg> en línea, por dos razones medidas:
     · un <img> no se puede recolorear, y este icono va sobre botón claro, sobre
       botón oscuro y sobre el héroe azul: tiene que heredar `currentColor`;
     · el conversor de Bricks sustituye cualquier <svg> en línea por el logo
       (tools/maquetar_mcp.py), así que un icono en línea no sobreviviría al montaje.
   El fichero equivalente vive en diseno/sistema/assets/icono-telefono.svg. */
.lds-boton__icono{
  width:20px;
  height:20px;
  flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask:var(--icono-telefono) center/contain no-repeat;
  mask:var(--icono-telefono) center/contain no-repeat;
}
/* Botón de solo icono: cuadrado y sin texto. SIEMPRE con aria-label. */
.lds-boton--icono{
  padding-left:var(--space-3);
  padding-right:var(--space-3);
  min-width:44px;
  column-gap:0;
}

/* --- Tarjeta ------------------------------------------------------------- */
.lds-tarjeta{
  display:flex;
  flex-direction:column;
  background:var(--surface-card);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border);
  border-radius:var(--radius-2);
  box-shadow:var(--shadow-1);
  padding:var(--space-5);
}
.lds-tarjeta--papel{background:var(--surface-paper);border-color:var(--hueso-oscuro)}
.lds-tarjeta__titulo{font:var(--type-h3);margin-top:var(--space-3);margin-bottom:var(--space-2)}
.lds-tarjeta__texto{font:var(--type-body-sm);color:var(--text-muted);margin-bottom:var(--space-4)}
.lds-tarjeta__precio{
  font-family:var(--font-cifras);
  font-variant-numeric:tabular-nums;
  font-weight:var(--weight-semibold);
  font-size:var(--size-h4);
  color:var(--text-brand);
  margin-top:auto;
  margin-bottom:0;
  padding-top:var(--space-4);
  border-top-width:var(--rule-hair);
  border-top-style:solid;
  border-top-color:var(--border);
}

/* --- Aviso (nota destacada en línea) ------------------------------------- */
.lds-aviso{
  background:var(--aviso-tint);
  border-top-width:var(--border-width-strong);
  border-top-style:solid;
  border-top-color:var(--ambar);
  padding:var(--space-5);
}
.lds-aviso__titulo{font:var(--type-h3);color:var(--ambar-900);margin-bottom:var(--space-2)}
.lds-aviso__texto{font:var(--type-body-sm);margin-bottom:var(--space-4)}

/* ==========================================================================
   CABECERA DEL SITIO
   En Bricks va como PLANTILLA DE CABECERA, no dentro de la página.
   Ver cabecera-pie.html.
   ========================================================================== */
.lds-cabecera{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--surface-page);
  border-bottom-width:var(--rule-hair);
  border-bottom-style:solid;
  border-bottom-color:var(--border);
}
.lds-cabecera__interior{
  display:flex;
  align-items:center;
  column-gap:var(--space-6);
  row-gap:var(--space-3);
  /* 80px de alto: regla de layout de diseno/sistema/readme.md, sin token. */
  min-height:80px;
  padding-top:var(--space-2);
  padding-bottom:var(--space-2);
}
.lds-cabecera__logo{display:flex;flex:0 0 auto;color:var(--azul-pizarra)}
.lds-cabecera__logo svg{display:block;height:40px;width:auto}
/* El hueco entre entradas baja de --space-5 a --space-4 desde que el menu tiene las
   seis entradas definitivas (antes eran cuatro anclas de la portada). Medido a
   1280px: con 24px de hueco la cabecera necesita 1157px de los 1160 disponibles y
   se parte en dos lineas; con 16px necesita 1117 y queda holgada. */
/* Sin margin-left:auto a proposito. Un margen automatico se COME todo el espacio
   libre de la fila ANTES de que actue el flex-grow, asi que con el margen puesto la
   nav se quedaba en su ancho minimo y partia «Contacto» a una segunda linea aunque
   sobraran 48px en la cabecera. El hueco lo da ahora el flex:1 de abajo. */
.lds-cabecera__nav{display:flex;flex-wrap:wrap;column-gap:var(--space-4);row-gap:var(--space-2)}
.lds-cabecera__enlace{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--font-titulares);
  font-size:var(--size-h4);
  font-weight:var(--weight-semibold);
  color:var(--text-body);
  text-decoration:none;
  border-bottom-width:var(--border-width-strong);
  border-bottom-style:solid;
  border-bottom-color:transparent;
}
.lds-cabecera__enlace:hover{color:var(--azul-pizarra-900);border-bottom-color:var(--ambar)}
/* Reparto explicito del ancho de la cabecera. Sin esto los tres bloques se quedan en
   flex:0 1 auto y el navegador reparte por contenido: medido a 1280px, sobraban 48px
   en la fila y aun asi el menu se partia en dos lineas porque a nav le faltaban 5px y
   a las acciones 4. La nav se queda el espacio libre; las acciones no se encogen
   nunca, porque el telefono es la accion que trae clientes. */
.lds-cabecera__nav{flex:1 1 auto}
/* De 992px para arriba el menu NO se parte. Es un cinturon ademas del reparto de
   arriba: si algun dia alguien añade una entrada y deja de caber, se vera enseguida
   que la cabecera se desborda —que se arregla— en vez de partirse en dos lineas sin
   avisar, que es lo que estuvo pasando. Por debajo de 992px la cabecera ya envuelve
   a proposito (ver la media query de mas abajo). */
@media (min-width:992px){
  .lds-cabecera__nav{flex-wrap:nowrap}
}
.lds-cabecera__acciones{display:flex;flex:0 0 auto;align-items:center;column-gap:var(--space-4);row-gap:var(--space-2);flex-wrap:wrap}

/* Por debajo de ~1100px la cabecera no da para el logo, seis entradas y dos botones.
   Se cae el boton secundario («Calcular precio»), nunca el telefono: la llamada es la
   accion que trae clientes, y el calculador esta a un scroll de distancia en la portada. */
@media (max-width:1099px){
  .lds-cabecera__cta{display:none}
}

/* ==========================================================================
   HÉROE
   ========================================================================== */
.lds-heroe{position:relative;overflow:hidden;background:var(--surface-brand);color:var(--text-on-dark)}
/* Sello de franja de 96px en la esquina: uno de los dos usos permitidos. */
.lds-heroe__sello{
  position:absolute;
  top:0;
  right:0;
  width:var(--space-9);
  height:var(--space-9);
  background-image:var(--franja-ambar);
}
.lds-heroe__interior{position:relative;padding-top:var(--section-y);padding-bottom:var(--section-y)}
.lds-heroe__rotulo{color:var(--ambar-300);margin-bottom:var(--space-4)}
.lds-heroe__titulo{
  font:var(--type-display);
  letter-spacing:var(--track-display);
  color:var(--hueso);
  max-width:20ch;
  margin-bottom:var(--space-5);
}
.lds-heroe__entradilla{
  font:var(--weight-regular) var(--size-body-lg)/var(--leading-body) var(--font-texto);
  color:var(--text-on-dark-muted);
  max-width:var(--measure-narrow);
  margin-bottom:var(--space-6);
}
.lds-heroe__acciones{display:flex;flex-wrap:wrap;column-gap:var(--space-4);row-gap:var(--space-3)}
.lds-heroe__datos{
  display:flex;
  flex-wrap:wrap;
  column-gap:var(--space-7);
  row-gap:var(--space-5);
  list-style:none;
  margin-top:var(--space-7);
  margin-bottom:0;
  padding-top:var(--space-5);
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  border-top-width:var(--rule-hair);
  border-top-style:solid;
  border-top-color:var(--border-on-dark);
}
.lds-dato__rotulo{color:var(--ambar-300);margin-bottom:var(--space-1)}
.lds-dato__valor{
  font-family:var(--font-cifras);
  font-variant-numeric:tabular-nums;
  font-weight:var(--weight-semibold);
  font-size:var(--size-h2);
  line-height:var(--leading-heading);
  color:var(--hueso);
  margin-bottom:var(--space-1);
}
.lds-dato__nota{font:var(--type-caption);color:var(--text-on-dark-muted);margin-bottom:0}

/* ==========================================================================
   CONFIGURADOR DE PRECIO
   ========================================================================== */
.lds-config{background:var(--surface-paper);border-bottom-width:var(--rule-hair);border-bottom-style:solid;border-bottom-color:var(--hueso-oscuro)}
.lds-config__cabecera{margin-bottom:var(--space-7)}
.lds-config__titulo{font:var(--type-h1);margin-top:var(--space-3);margin-bottom:var(--space-4);max-width:24ch}
.lds-config__entradilla{font:var(--weight-regular) var(--size-body-lg)/var(--leading-body) var(--font-texto);color:var(--text-body);max-width:var(--measure)}
.lds-config__cuerpo{display:grid;grid-template-columns:1.35fr .85fr;grid-gap:var(--space-7);align-items:start}
.lds-config__pasos{display:grid;grid-gap:var(--space-5)}

/* --- Un paso (fieldset) --------------------------------------------------- */
.lds-paso{
  background:var(--surface-card);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border);
  border-radius:var(--radius-2);
  box-shadow:var(--shadow-1);
  padding:var(--space-5);
  margin:0;
  min-width:0;
}
/* El <legend> es el título real del paso (lo lee el lector de pantalla al
   entrar en el grupo). El float + width:100% lo saca de su sitio por defecto
   —a caballo sobre el borde del fieldset— y lo mete dentro de la tarjeta.
   Los hermanos llevan clear para no meterse debajo del flotado. */
.lds-paso__titulo{
  float:left;
  width:100%;
  font:var(--type-h3);
  color:var(--text-strong);
  padding-left:0;
  padding-right:0;
  margin-bottom:var(--space-4);
}
.lds-paso__ayuda{clear:both;font:var(--type-body-sm);color:var(--text-muted);margin-top:calc(var(--space-2) * -1);margin-bottom:var(--space-4)}
.lds-opciones{clear:both}
.lds-paso__nota{font:var(--type-body-sm);color:var(--text-muted);margin-top:var(--space-4);margin-bottom:0}
.lds-paso__subtitulo{font:var(--weight-semibold) var(--size-body-sm)/var(--leading-snug) var(--font-titulares);color:var(--text-strong);margin-top:var(--space-5);margin-bottom:var(--space-2)}

/* --- Opciones (radios reales) -------------------------------------------- */
.lds-opciones{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-3)}
.lds-opciones--lista{grid-template-columns:1fr}

.lds-opcion{
  position:relative;
  display:flex;
  align-items:flex-start;
  column-gap:var(--space-3);
  min-height:44px;
  padding:var(--space-3);
  background:var(--blanco);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border);
  border-radius:var(--radius-2);
  cursor:pointer;
  transition:background-color var(--duration) var(--ease),border-color var(--duration) var(--ease);
}
.lds-opcion:hover{border-color:var(--azul-pizarra-400)}
.lds-opcion:has(.lds-opcion__control:checked){background:var(--azul-pizarra-050);border-color:var(--azul-pizarra)}
/* El control real existe y es el que recibe el foco del teclado; se oculta a
   la vista, nunca a la accesibilidad. */
.lds-opcion__control{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lds-opcion__marca{
  flex:0 0 20px;
  width:20px;
  height:20px;
  margin-top:2px;
  display:grid;
  place-items:center;
  background:var(--blanco);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border);
  border-radius:var(--radius-pill);
}
.lds-opcion__marca::before{content:"";width:10px;height:10px;border-radius:var(--radius-pill);background:transparent}
.lds-opcion__control:checked + .lds-opcion__marca{border-color:var(--azul-pizarra)}
.lds-opcion__control:checked + .lds-opcion__marca::before{background:var(--azul-pizarra)}
/* Foco visible sin ratón: el anillo ámbar del sistema, sobre la marca. */
.lds-opcion__control:focus-visible + .lds-opcion__marca{outline:2px solid var(--focus-ring);outline-offset:2px}
.lds-opcion__texto{display:block;min-width:0}
.lds-opcion__titulo{display:block;font:var(--weight-semibold) var(--size-body-sm)/var(--leading-snug) var(--font-titulares);color:var(--text-strong)}
.lds-opcion__nota{display:block;font:var(--type-caption);color:var(--text-muted);margin-top:var(--space-1)}
/* Al marcar la opcion el fondo pasa a azul 050 y el gris de la nota se queda
   en 4,25:1. Sobre ese fondo la nota se pinta con el texto de cuerpo. */
.lds-opcion:has(.lds-opcion__control:checked) .lds-opcion__nota{color:var(--text-body)}
.lds-opcion__importe{display:block;font-family:var(--font-cifras);font-variant-numeric:tabular-nums;font-size:var(--size-caption);color:var(--text-accent);margin-top:var(--space-1)}

/* Casilla cuadrada para los extras: mismo control, marca cuadrada. */
.lds-opcion__marca--casilla{border-radius:var(--radius-1)}
.lds-opcion__marca--casilla::before{border-radius:var(--radius-0)}

/* --- Días de la semana (L·M·X·J·V, y solo eso) ---------------------------- */
.lds-dias{display:flex;flex-wrap:wrap;column-gap:var(--space-2);row-gap:var(--space-2)}
.lds-dia{position:relative;display:block}
.lds-dia__control{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lds-dia__marca{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  font-family:var(--font-cifras);
  font-weight:var(--weight-semibold);
  font-size:var(--size-h4);
  color:var(--text-body);
  background:var(--blanco);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border);
  border-radius:var(--radius-2);
  cursor:pointer;
  transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease);
}
.lds-dia__control:checked + .lds-dia__marca{background:var(--azul-pizarra);border-color:var(--azul-pizarra);color:var(--hueso)}
.lds-dia__control:focus-visible + .lds-dia__marca{outline:2px solid var(--focus-ring);outline-offset:2px}

/* --- Tarjeta de resultado ------------------------------------------------ */
.lds-config__resultado{display:grid;grid-gap:var(--space-4);position:sticky;top:var(--space-9)}
.lds-precio{
  background:var(--surface-brand);
  color:var(--text-on-dark);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--azul-pizarra);
  border-radius:var(--radius-2);
  overflow:hidden;
}
.lds-precio__franja{height:var(--space-2);background-color:var(--azul-pizarra-900);background-image:var(--franja-sobre-oscuro)}
.lds-precio__cuerpo{padding:var(--space-5)}
.lds-precio__rotulo{color:var(--ambar-300);margin-bottom:var(--space-2)}
.lds-precio__resumen{font:var(--type-caption);color:var(--text-on-dark-muted);margin-bottom:var(--space-3);min-height:var(--space-4)}
.lds-precio__cifra{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);row-gap:var(--space-1)}
.lds-precio__numero{
  font:var(--type-precio);
  font-variant-numeric:tabular-nums;
  color:var(--hueso);
  margin-bottom:0;
}
.lds-precio__unidad{font:var(--type-body-sm);color:var(--text-on-dark-muted);margin-bottom:0}
.lds-precio__iva{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  column-gap:var(--space-3);
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top-width:var(--rule-hair);
  border-top-style:solid;
  border-top-color:var(--border-on-dark);
}
.lds-precio__iva-rotulo{font:var(--type-caption);color:var(--text-on-dark-muted);margin-bottom:0}
.lds-precio__iva-cifra{font-family:var(--font-cifras);font-variant-numeric:tabular-nums;font-size:var(--size-body-sm);color:var(--hueso);margin-bottom:0}
/* Contenedor sin filete propio: las dos filas que lleva dentro ya traen el
   suyo, y si se lo pone también el contenedor salen dos rayas seguidas con un
   hueco muerto entre ellas. */
.lds-precio__anadido{margin-top:0;padding-top:0}
.lds-precio__incluye{
  display:grid;
  grid-gap:var(--space-2);
  list-style:none;
  font:var(--type-body-sm);
  margin-top:var(--space-5);
  margin-bottom:var(--space-5);
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
}
.lds-precio__incluye li{display:flex;column-gap:var(--space-2)}
/* El guion largo como viñeta: excepción tipográfica que el sistema permite. */
.lds-precio__incluye li::before{content:"—";color:var(--ambar);font-weight:var(--weight-bold);flex:0 0 auto}
.lds-precio__nota{font:var(--type-caption);color:var(--text-on-dark-muted);margin-top:var(--space-3);margin-bottom:0}

/* Panel alternativo: cuando no se puede cerrar precio. */
.lds-config__resultado .lds-aviso{border-radius:var(--radius-2)}

.lds-config__apoyo{
  display:flex;
  column-gap:var(--space-3);
  background:var(--surface-card);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border);
  border-radius:var(--radius-2);
  padding:var(--space-5);
}
.lds-config__apoyo p{font:var(--type-body-sm);margin-bottom:0}

/* ==========================================================================
   CONFIANZA · SERVICIOS · PASOS
   ========================================================================== */
.lds-rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--space-5)}
.lds-rejilla-2{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-7);align-items:start}

.lds-confianza__titulo{font:var(--type-h3);margin-top:var(--space-3);margin-bottom:var(--space-2)}
.lds-confianza__texto{font:var(--type-body);color:var(--text-body);margin-bottom:0;max-width:var(--measure-narrow)}
.lds-confianza__item{
  padding-top:var(--space-4);
  border-top-width:var(--border-width-strong);
  border-top-style:solid;
  border-top-color:var(--azul-pizarra);
}

.lds-paso-num{
  font-family:var(--font-cifras);
  font-variant-numeric:tabular-nums;
  font-weight:var(--weight-semibold);
  font-size:var(--size-h2);
  line-height:var(--leading-heading);
  color:var(--ambar-700);
  margin-bottom:var(--space-2);
}

/* ==========================================================================
   SOBRE DANI
   ========================================================================== */
.lds-dani{display:grid;grid-template-columns:auto 1fr;grid-gap:var(--space-5);align-items:start}
/* Hueco de foto declarado: trama de marca mientras no haya retrato real. */
.lds-dani__hueco{width:var(--space-9);height:var(--space-9);background-color:var(--azul-pizarra-050);background-image:var(--franja)}
.lds-dani__texto{font:var(--type-body);max-width:var(--measure)}

/* ==========================================================================
   CIERRE
   ========================================================================== */
.lds-cierre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:var(--space-7);row-gap:var(--space-5)}
.lds-cierre__titulo{font:var(--type-h1);max-width:22ch;margin-bottom:var(--space-4)}
.lds-cierre__texto{font:var(--weight-regular) var(--size-body-lg)/var(--leading-body) var(--font-texto);color:var(--text-body);max-width:44ch;margin-bottom:0}
.lds-cierre__acciones{display:flex;flex-wrap:wrap;column-gap:var(--space-4);row-gap:var(--space-3)}

/* ==========================================================================
   PIE DEL SITIO
   En Bricks va como PLANTILLA DE PIE. Ver cabecera-pie.html.
   ========================================================================== */
.lds-pie{background:var(--surface-brand-deep);color:var(--text-on-dark)}
.lds-pie__franja{height:var(--space-5);background-image:var(--franja-sobre-oscuro)}
.lds-pie__cuerpo{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;grid-gap:var(--space-6);padding-top:var(--space-7);padding-bottom:var(--space-7)}
.lds-pie__logo{display:block;color:var(--hueso)}
.lds-pie__logo svg{display:block;height:40px;width:auto}
.lds-pie__texto{font:var(--type-body-sm);color:var(--text-on-dark-muted);max-width:34ch;margin-top:var(--space-4);margin-bottom:0}
.lds-pie__rotulo{color:var(--ambar-300);margin-bottom:var(--space-3)}
.lds-pie__lista{
  display:grid;
  grid-gap:var(--space-2);
  list-style:none;
  font:var(--type-body-sm);
  margin:0;
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  color:var(--text-on-dark-muted);
}
.lds-pie__lista a{color:var(--text-on-dark-muted)}
.lds-pie__lista a:hover{color:var(--hueso)}
.lds-pie__contacto{display:grid;grid-gap:var(--space-2);font:var(--type-body-sm);color:var(--text-on-dark-muted)}
.lds-pie__tel{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--font-cifras);
  font-variant-numeric:tabular-nums;
  font-weight:var(--weight-semibold);
  font-size:var(--size-h3);
  color:var(--hueso);
  text-decoration:none;
}
.lds-pie__tel:hover{color:var(--hueso);text-decoration:underline}
.lds-pie__correo{color:var(--hueso)}
.lds-pie__legal{border-top-width:var(--rule-hair);border-top-style:solid;border-top-color:var(--border-on-dark)}
.lds-pie__legal-interior a{color:var(--text-on-dark-muted)}
.lds-pie__legal-interior a:hover{color:var(--hueso)}
.lds-pie__legal-interior{
  display:flex;
  flex-wrap:wrap;
  column-gap:var(--space-5);
  row-gap:var(--space-2);
  padding-top:var(--space-4);
  padding-bottom:var(--space-4);
  font:var(--type-caption);
  color:var(--text-on-dark-muted);
}

/* ==========================================================================
   RESPONSIVE — breakpoints nativos de Bricks, de escritorio hacia abajo
   ========================================================================== */

/* --- tablet_portrait (≤991px) -------------------------------------------- */
@media (max-width:991px){
  .lds-cabecera__interior{flex-wrap:wrap;column-gap:var(--space-4)}
  .lds-cabecera__nav{column-gap:var(--space-4)}
  .lds-heroe__titulo{font:var(--type-h1);letter-spacing:var(--track-heading);max-width:24ch}
  .lds-config__cuerpo{grid-template-columns:1fr}
  .lds-config__resultado{position:static;top:auto}
  .lds-rejilla-3{grid-template-columns:1fr 1fr}
  .lds-rejilla-2{grid-template-columns:1fr;grid-gap:var(--space-6)}
  .lds-pie__cuerpo{grid-template-columns:1fr 1fr}
}

/* --- mobile_landscape (≤767px) ------------------------------------------- */
@media (max-width:767px){
  .lds-seccion{padding-top:var(--section-y-compact);padding-bottom:var(--section-y-compact)}
  .lds-cabecera__interior{padding-top:var(--space-3);padding-bottom:var(--space-3)}
  .lds-cabecera__logo{order:1}
  .lds-cabecera__acciones{order:2;margin-left:auto}
  /* La navegación NO se esconde: baja a una segunda fila y sigue accesible. */
  .lds-cabecera__nav{order:3;flex-basis:100%;margin-left:0;column-gap:var(--space-4)}
  .lds-cabecera__enlace{font-size:var(--size-body-sm);min-height:36px}
  /* En móvil la acción destacada de la cabecera es el teléfono. */
  .lds-cabecera__cta{display:none}
  .lds-heroe__interior{padding-top:var(--section-y-compact);padding-bottom:var(--section-y-compact)}
  .lds-heroe__datos{column-gap:var(--space-6)}
  .lds-opciones{grid-template-columns:1fr}
  .lds-rejilla-3{grid-template-columns:1fr}
  /* En una sola columna, el filete del primer item queda justo debajo del
     filete que abre la sección: dos rayas iguales con un hueco muerto en
     medio, que se lee como un error de maquetación. Se quita el del primero y
     los otros dos pasan a funcionar como separadores. */
  .lds-rejilla-3 > .lds-confianza__item:first-child{border-top-width:0;padding-top:0}
  .lds-cierre{flex-direction:column;align-items:flex-start}
  .lds-pie__cuerpo{grid-template-columns:1fr;grid-gap:var(--space-6)}
}

/* --- mobile_portrait (≤478px) -------------------------------------------- */
@media (max-width:478px){
  .lds-seccion{padding-top:var(--space-7);padding-bottom:var(--space-7)}
  .lds-heroe__interior{padding-top:var(--space-7);padding-bottom:var(--space-7)}
  .lds-heroe__sello{width:var(--space-8);height:var(--space-8)}
  .lds-heroe__titulo{font:var(--type-h2);letter-spacing:var(--track-heading)}
  .lds-config__titulo{font:var(--type-h2)}
  .lds-cierre__titulo{font:var(--type-h2)}
  /* Logo a 32px: el mínimo que el sistema permite en versión horizontal.
     Y el teléfono más compacto, para que quepan los dos en una línea. */
  .lds-cabecera__logo svg{height:32px}
  .lds-cabecera__acciones .lds-boton{padding-left:var(--space-3);padding-right:var(--space-3);font-size:var(--size-body-sm)}
  .lds-paso{padding:var(--space-4)}
  /* A un dedo de ancho los botones de una acción van a línea completa. La
     cabecera NO entra aquí: allí el teléfono se queda a su ancho, junto al
     logo, o la barra pegajosa se comería media pantalla. */
  .lds-heroe__acciones .lds-boton,.lds-cierre__acciones .lds-boton{flex-basis:100%;width:100%}
  .lds-dani{grid-template-columns:1fr}
}


/* === SUBIDO DESDE LAS PAGINAS INTERIORES (02-09-2026) ===
   Estas clases nacieron repetidas en las siete paginas interiores porque se
   maquetaron en paralelo. Se suben aqui de una vez: si cada pagina llega al
   conversor con su propia copia de .lds-tabla, Bricks crea .lds-tabla-2 y
   .lds-tabla-3 como clases globales distintas, y a partir de ahi cambiar el
   estilo de una tabla obliga a tocarlo en tres sitios del builder.
   ========================================================================= */

/* ==========================================================================
   CLASES NUEVAS DE ESTA PÁGINA
   --------------------------------------------------------------------------
   🔴 BLOQUE COMÚN A LAS CUATRO PÁGINAS INTERIORES. Está copiado carácter a
   carácter en precios.html, como-funciona.html, sobre-mi.html y contacto.html.
   Hay que subirlo UNA SOLA VEZ a componentes.css antes de convertir a Bricks:
   si cada página lleva su copia al builder, saldrán .lds-tabla-2 y .lds-tabla-3.

   Ni un color, tamaño, espaciado o radio inventado: todo var(--token). Los dos
   únicos números sueltos están marcados con «SIN TOKEN» y anotados en el README.
   Base = escritorio; las media queries van al final, en 991 / 767 / 478 px.
   ========================================================================== */

/* --- Cabecera de página interior ----------------------------------------- */
/* Es el mismo héroe de la portada, con el ritmo vertical compacto: una página
   interior no necesita el alto de una portada, y así el contenido entra antes. */
.lds-heroe--interior .lds-heroe__interior{padding-top:var(--section-y-compact);padding-bottom:var(--section-y-compact)}
/* La entradilla de una interior es prosa, no un reclamo de una línea: se le
   deja la medida larga del sistema en vez de la estrecha del héroe. */
.lds-heroe__entradilla--ancha{max-width:var(--measure)}
/* Hueco de retrato declarado (no hay foto de Dani todavía). Misma trama de
   marca que .lds-dani__hueco, en la versión que se ve sobre fondo oscuro. */
.lds-heroe__retrato{
  width:var(--space-10);
  height:var(--space-10);
  flex:0 0 auto;
  background-color:var(--azul-pizarra-800);
  background-image:var(--franja-sobre-oscuro);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border-on-dark);
}
.lds-heroe__con-retrato{display:flex;align-items:flex-start;column-gap:var(--space-7);row-gap:var(--space-5);flex-wrap:wrap}
.lds-heroe__texto{min-width:0;flex:1 1 var(--measure-narrow)}

/* --- Titulares y prosa sobre fondo de marca ------------------------------ */
/* El reset del sistema pinta h2/h3 con --text-strong (grafito). Sobre
   --surface-brand eso mide 1,4:1 y es ilegible; con --hueso da 11,7:1. */
.lds-seccion--marca h2,
.lds-seccion--marca h3{color:var(--hueso)}
.lds-seccion--marca .lds-eyebrow{color:var(--ambar-300)}
.lds-texto-claro{font:var(--type-body);color:var(--text-on-dark-muted);max-width:var(--measure)}

/* --- Rejilla de cuatro ---------------------------------------------------- */
/* La de tres ya existe (.lds-rejilla-3). Los cuatro datos de «Sobre mí» y las
   cuatro columnas de precios necesitan esta. */
.lds-rejilla-4{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:var(--space-5)}

/* --- Lista con guiones ---------------------------------------------------- */
/* El guion largo como viñeta es la excepción tipográfica que el sistema
   permite, y ya está en uso en .lds-precio__incluye. Aquí se generaliza. */
.lds-lista-guiones{
  display:grid;
  grid-gap:var(--space-3);
  list-style:none;
  font:var(--type-body);
  color:var(--text-body);
  max-width:var(--measure);
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
}
/* 🔴 El guion va con marcador ABSOLUTO, no con flex, y es una decision medida.
   Con `display:flex` el texto del item queda como «item anonimo» de flex: no se le puede
   aplicar CSS —no existe como elemento— y su min-width por defecto es `auto`, asi que se
   niega a encogerse. Resultado medido a 375px en el aviso legal: el guion (17px) mas el
   hueco (12px) empujaban la linea a 354px dentro de un hueco de 327 y la pagina se
   desplazaba en horizontal. Con sangria y marcador absoluto el texto es texto normal y
   parte donde tiene que partir. */
.lds-lista-guiones li{position:relative;padding-left:calc(17px + var(--space-3))}
.lds-lista-guiones li::before{
  content:"—";
  position:absolute;
  left:0;
  top:0;
  color:var(--ambar-700);
  font-weight:var(--weight-bold);
}
.lds-lista-guiones--ancha{max-width:none}

/* Columna de lista con su título (Incluido / No incluido). */
.lds-columna-lista__titulo{
  font:var(--type-h3);
  padding-bottom:var(--space-3);
  margin-bottom:var(--space-4);
  border-bottom-width:var(--border-width-strong);
  border-bottom-style:solid;
  border-bottom-color:var(--azul-pizarra);
}

/* --- Tabla ---------------------------------------------------------------- */
/* <table> de verdad: cabeceras en <th scope>, nada de rejillas de <div>.
   El envoltorio es el que hace scroll en móvil, no el <body>: así la página
   nunca desborda a lo ancho y la tabla sigue siendo legible. */
.lds-tabla-envoltorio{
  overflow-x:auto;
  max-width:var(--container-narrow);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border);
  border-radius:var(--radius-2);
  background:var(--surface-card);
}
.lds-tabla-envoltorio--ancha{max-width:none}
.lds-tabla{
  width:100%;
  border-collapse:collapse;
  font:var(--type-body-sm);
  color:var(--text-body);
  /* SIN TOKEN · 520px: ancho mínimo por debajo del cual las columnas de una
     tarifa dejan de leerse y empiezan a partirse letra a letra. Es una
     decisión de layout, como las fracciones de rejilla del README. En
     mobile_portrait se levanta para las tablas de tres columnas, que sí caben,
     y se conserva para las de cuatro (.lds-tabla--multi), que no. */
  min-width:520px;
}
.lds-tabla th,
.lds-tabla td{
  text-align:left;
  vertical-align:top;
  padding-top:var(--space-3);
  padding-bottom:var(--space-3);
  padding-left:var(--space-4);
  padding-right:var(--space-4);
  border-bottom-width:var(--rule-hair);
  border-bottom-style:solid;
  border-bottom-color:var(--border);
}
.lds-tabla thead th{
  font:var(--type-eyebrow);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--text-brand);
  background:var(--surface-brand-tint);
  border-bottom-width:var(--border-width-strong);
  border-bottom-color:var(--azul-pizarra);
  white-space:nowrap;
}
.lds-tabla tbody th{
  font:var(--weight-semibold) var(--size-body-sm)/var(--leading-snug) var(--font-titulares);
  color:var(--text-strong);
}
.lds-tabla tbody tr:last-child th,
.lds-tabla tbody tr:last-child td{border-bottom-width:0}
/* Las cifras, en monoespaciada y en dos líneas hermanas: el precio sin IVA y
   el total con IVA. Son dos elementos de bloque, no un <span> dentro de un
   <p>, para que en Bricks salgan dos textos editables y no un «code» suelto. */
.lds-tabla__cifra{
  font-family:var(--font-cifras);
  font-variant-numeric:tabular-nums;
  font-weight:var(--weight-semibold);
  font-size:var(--size-body-sm);
  color:var(--text-strong);
  white-space:nowrap;
  margin-bottom:0;
}
.lds-tabla__cifra-iva{
  font-family:var(--font-cifras);
  font-variant-numeric:tabular-nums;
  font-size:var(--size-caption);
  color:var(--text-body);
  white-space:nowrap;
  margin-top:var(--space-1);
  margin-bottom:0;
}
.lds-tabla__cifra--libre{white-space:normal}
.lds-tabla__dato{
  font-family:var(--font-cifras);
  font-variant-numeric:tabular-nums;
  font-size:var(--size-body-sm);
  color:var(--text-body);
  white-space:nowrap;
  margin-bottom:0;
}
/* Marca de «sí» de la tabla de frecuencias. Es texto real, no un icono. */
.lds-tabla__si{
  font-family:var(--font-titulares);
  font-weight:var(--weight-semibold);
  color:var(--text-accent);
  margin-bottom:0;
}
.lds-nota-tabla{
  font:var(--type-body-sm);
  color:var(--text-body);
  max-width:var(--measure);
  margin-top:var(--space-4);
  margin-bottom:0;
}
/* Aviso de que la tabla se desliza a lo ancho. Solo se ve en móvil. */
.lds-tabla-pista{display:none;font:var(--type-caption);color:var(--text-body);margin-top:var(--space-2);margin-bottom:0}

/* --- Texto de entrada de una sección ------------------------------------- */
.lds-seccion__entrada{font:var(--type-body);color:var(--text-body);max-width:var(--measure);margin-bottom:var(--space-6)}

/* --- Acordeón de preguntas ------------------------------------------------ */
/* <details>/<summary> nativos: se abre y se cierra sin una línea de
   JavaScript, y toda la pregunta y toda la respuesta son texto del HTML. */
.lds-faq{display:grid;grid-gap:var(--space-3);max-width:var(--container-narrow)}
.lds-faq--ancha{max-width:none}
.lds-faq__item{
  background:var(--surface-card);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border);
  border-radius:var(--radius-2);
}
.lds-faq__item[open]{border-color:var(--azul-pizarra-200)}
.lds-faq__pregunta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  column-gap:var(--space-4);
  min-height:44px;
  padding-top:var(--space-4);
  padding-bottom:var(--space-4);
  padding-left:var(--space-5);
  padding-right:var(--space-5);
  font:var(--type-h3);
  font-size:var(--size-h4);
  color:var(--text-strong);
  cursor:pointer;
  list-style:none;
}
.lds-faq__pregunta::-webkit-details-marker{display:none}
/* El signo es decoración: la apertura ya la anuncia el propio <details>. */
.lds-faq__pregunta::after{
  content:"+";
  font-family:var(--font-cifras);
  font-weight:var(--weight-semibold);
  color:var(--ambar-700);
  flex:0 0 auto;
}
.lds-faq__item[open] .lds-faq__pregunta::after{content:"–"}
.lds-faq__pregunta:hover{color:var(--azul-pizarra-900)}
.lds-faq__respuesta{
  font:var(--type-body);
  color:var(--text-body);
  max-width:var(--measure);
  padding-left:var(--space-5);
  padding-right:var(--space-5);
  padding-bottom:var(--space-5);
  margin-bottom:0;
}

/* --- Dato en cifra sobre fondo claro -------------------------------------- */
/* En el héroe existe .lds-dato__valor, pero está pintado para fondo oscuro.
   Esta es la misma pieza para las secciones de papel y de página. */
.lds-cifra-dato{
  font-family:var(--font-cifras);
  font-variant-numeric:tabular-nums;
  font-weight:var(--weight-semibold);
  font-size:var(--size-h3);
  line-height:var(--leading-heading);
  color:var(--text-brand);
  margin-top:var(--space-3);
  margin-bottom:var(--space-2);
}

/* --- Enlace de acción al pie de una sección ------------------------------- */
.lds-seccion__acciones{display:flex;flex-wrap:wrap;column-gap:var(--space-4);row-gap:var(--space-3);margin-top:var(--space-6)}

/* --- Responsive: solo 991 / 767 / 478 px, los nativos de Bricks ----------- */
@media (max-width:991px){
  .lds-rejilla-4{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .lds-tabla-pista{display:block}
  .lds-heroe__con-retrato{column-gap:var(--space-5)}
}
@media (max-width:478px){
  /* A un dedo de ancho, una tabla de tres columnas cabe si se le aprieta el
     acolchado: así el precio se ve sin tener que deslizar. Las de cuatro
     columnas no caben de ninguna manera y siguen deslizándose. */
  .lds-tabla{min-width:0}
  .lds-tabla--multi{min-width:520px}
  .lds-tabla th,.lds-tabla td{padding-left:var(--space-2);padding-right:var(--space-2)}
  .lds-tabla thead th{white-space:normal}
  .lds-rejilla-4{grid-template-columns:1fr}
  .lds-heroe__retrato{width:var(--space-9);height:var(--space-9)}
  .lds-faq__pregunta{padding-left:var(--space-4);padding-right:var(--space-4)}
  .lds-faq__respuesta{padding-left:var(--space-4);padding-right:var(--space-4)}
  .lds-seccion__acciones .lds-boton{flex-basis:100%;width:100%}
}

/* ==========================================================================
   CLASES NUEVAS SOLO DE ESTA PÁGINA (contacto.html)
   --------------------------------------------------------------------------
   El formulario. No lo usa ninguna otra de las cuatro interiores, así que va
   aparte del bloque común: si al final el formulario se monta con Bricks Form
   o con un plugin, este bloque puede no llegar nunca a componentes.css.
   ========================================================================== */
/* El <form> lleva .lds-tarjeta para la caja y .lds-formulario para el contexto: es la
   clase que da nombre a todos sus hijos BEM. */
.lds-formulario{width:100%}
.lds-formulario__rejilla{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-5)}
/* min-width:0 para que un <select> largo no reviente su columna de la rejilla. */
.lds-campo{min-width:0}
.lds-campo--ancho{grid-column:1 / -1}
.lds-campo__etiqueta{
  display:block;
  font:var(--weight-semibold) var(--size-body-sm)/var(--leading-snug) var(--font-titulares);
  color:var(--text-strong);
  margin-top:0;
  margin-bottom:var(--space-2);
}
/* 44px de alto: el objetivo táctil que fija diseno/sistema/readme.md y que
   sigue sin tener token (carencia 1 del README de esta carpeta). */
.lds-campo__control{
  display:block;
  width:100%;
  min-height:44px;
  font:var(--type-body);
  color:var(--text-strong);
  background:var(--blanco);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border);
  border-radius:var(--radius-2);
  padding-top:var(--space-2);
  padding-bottom:var(--space-2);
  padding-left:var(--space-3);
  padding-right:var(--space-3);
}
.lds-campo__control:hover{border-color:var(--azul-pizarra-400)}
/* El anillo de foco lo pone el :focus-visible de la capa base. Aquí solo se
   refuerza el borde, sin tocar el outline. */
.lds-campo__control:focus{border-color:var(--azul-pizarra)}
.lds-campo__control--area{min-height:var(--space-10);resize:vertical}
.lds-campo__ayuda{font:var(--type-caption);color:var(--text-body);max-width:var(--measure);margin-top:var(--space-2);margin-bottom:0}
.lds-campo__error{
  font:var(--type-body-sm);
  color:var(--error);
  background:var(--error-tint);
  border-left-width:var(--border-width-strong);
  border-left-style:solid;
  border-left-color:var(--error);
  padding-top:var(--space-2);
  padding-bottom:var(--space-2);
  padding-left:var(--space-3);
  padding-right:var(--space-3);
  margin-top:var(--space-2);
  margin-bottom:0;
}
.lds-consentimiento{
  display:flex;
  align-items:flex-start;
  column-gap:var(--space-3);
  margin-top:var(--space-5);
  padding-top:var(--space-5);
  border-top-width:var(--rule-hair);
  border-top-style:solid;
  border-top-color:var(--border);
}
.lds-consentimiento__control{flex:0 0 20px;width:20px;height:20px;margin:0;accent-color:var(--azul-pizarra)}
.lds-consentimiento__texto{font:var(--type-body-sm);color:var(--text-body);cursor:pointer}
.lds-formulario__pie{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-4);row-gap:var(--space-3);margin-top:var(--space-5)}
.lds-formulario__mensajes{display:grid;grid-gap:var(--space-4);margin-top:var(--space-6)}
.lds-formulario__mensajes .lds-aviso{border-radius:var(--radius-2)}

@media (max-width:767px){
  .lds-formulario__rejilla{grid-template-columns:1fr}
}

/* ==========================================================================
   EXTRAS DE LAS TRES PÁGINAS DE SERVICIO
   --------------------------------------------------------------------------
   🔴 Todo lo de ARRIBA es el bloque común de las páginas interiores, copiado
      carácter a carácter de precios.html / como-funciona.html / sobre-mi.html /
      contacto.html. No se ha reescrito ni una regla: si las siete páginas
      llevaran su propia versión de .lds-tabla, el conversor crearía
      .lds-tabla-2 y .lds-tabla-3 en el builder, que es justo lo que la hoja
      compartida evita.
      Lo de AQUÍ ABAJO es lo único que las tres páginas de servicio necesitan y
      que aquel bloque no traía. Va con él a componentes.css, de una sola vez,
      antes de convertir a Bricks.
   ========================================================================== */

/* --- Línea de datos del héroe de servicio -------------------------------- */
/* El héroe de un servicio cierra con la línea de datos que da el contenido
   («Desde 120 € + IVA al mes · Sin permanencia · Limpio yo»). El punto medio
   es un separador tipográfico, no un icono: es una de las dos excepciones que
   el sistema permite. */
.lds-heroe__marcas{
  display:flex;
  flex-wrap:wrap;
  column-gap:var(--space-5);
  row-gap:var(--space-2);
  list-style:none;
  margin-top:var(--space-7);
  margin-bottom:0;
  padding-top:var(--space-5);
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  border-top-width:var(--rule-hair);
  border-top-style:solid;
  border-top-color:var(--border-on-dark);
}
.lds-heroe__marca{font:var(--type-body-sm);color:var(--text-on-dark)}
.lds-heroe__marca + .lds-heroe__marca::before{content:"·";color:var(--ambar-300);font-weight:var(--weight-bold);margin-right:var(--space-3)}

/* --- Dos tarjetas en rejilla --------------------------------------------- */
/* .lds-rejilla-2 lleva align-items:start, que es lo que quiere un bloque de
   texto y lo que NO quiere un par de tarjetas: dejarlas a distinta altura es
   uno de los antipatrones del playbook. */
.lds-rejilla-2--tarjetas{align-items:stretch;grid-gap:var(--space-5)}
/* Coletilla bajo el precio de una tarjeta («El precio se cierra tras verlo»).
   Va como elemento de bloque hermano, no como <span> dentro del precio. */
.lds-tarjeta__apunte{font:var(--type-caption);color:var(--text-muted);margin-top:var(--space-2);margin-bottom:0}

/* --- Lista de pasos numerados (el fin de obra) --------------------------- */
/* Es un <ol> de verdad. El rótulo «Paso 1» va escrito en el HTML y no lo pinta
   el ::marker del navegador: así en Bricks es un elemento de texto editable. */
.lds-lista-pasos{
  display:grid;
  grid-gap:var(--space-5);
  list-style:none;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
}
.lds-lista-pasos > li{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-5);row-gap:var(--space-1);align-items:baseline}
.lds-lista-pasos__num{
  font-family:var(--font-cifras);
  font-variant-numeric:tabular-nums;
  font-weight:var(--weight-semibold);
  font-size:var(--size-body-sm);
  color:var(--ambar-700);
  margin-bottom:0;
}
.lds-lista-pasos__texto{font:var(--type-body);color:var(--text-body);max-width:var(--measure);margin-bottom:0}

/* --- Banda de oferta de apertura ----------------------------------------- */
/* Copiada tal cual del bloque comentado de home.html, para que el nombre de
   clase sea el mismo y en Bricks se cree una sola vez. */
.lds-promo{background:var(--surface-accent-tint);border-top-width:var(--border-width-strong);border-top-style:solid;border-top-color:var(--ambar)}
.lds-promo__interior{padding-top:var(--space-4);padding-bottom:var(--space-4)}
.lds-promo__rotulo{color:var(--ambar-900);margin-bottom:var(--space-1)}
.lds-promo__texto{font:var(--type-body);color:var(--text-strong);margin-bottom:0;max-width:var(--measure)}

/* --- Responsive de los extras, en los breakpoints nativos de Bricks ------- */
@media (max-width:767px){
  .lds-lista-pasos > li{grid-template-columns:1fr;column-gap:0}
}
@media (max-width:478px){
  /* A un dedo de ancho la línea de datos se apila: un «·» al principio de una
     línea se lee como una viñeta rota, no como un separador. */
  .lds-heroe__marcas{display:grid;grid-gap:var(--space-2)}
  .lds-heroe__marca + .lds-heroe__marca::before{content:none}
}


/* === SUBIDO DESDE LAS PAGINAS LEGALES (02-09-2026) ===
   Mismo motivo que el bloque de las interiores: una clase por nombre, una sola vez, para
   que el conversor no cree .lds-tabla--ficha-2 y -3 en el builder.
   ========================================================================= */

/* ==========================================================================
   CLASES NUEVAS DE ESTA PÁGINA
   --------------------------------------------------------------------------
   🔴 BLOQUE COMÚN A LAS TRES PÁGINAS LEGALES. Está copiado carácter a carácter
   en aviso-legal.html, privacidad.html y cookies.html. Hay que subirlo UNA SOLA
   VEZ a componentes.css antes de convertir a Bricks: si cada página llega al
   conversor con su copia, Bricks crea .lds-legal-2 y .lds-legal-3 como clases
   globales distintas y a partir de ahí cambiar el texto legal obliga a tocarlo
   en tres sitios del builder. Es la misma regla que ya se aplicó a .lds-tabla.

   Ni un color, tamaño, espaciado o radio inventado: todo var(--token). Cero
   valores «SIN TOKEN» en este bloque.
   Base = escritorio; las media queries van al final, en 991 / 767 / 478 px.
   ========================================================================== */

/* --- Columna de texto legal ----------------------------------------------- */
/* La medida de línea es LA regla de estas tres páginas: un texto legal a 1112px
   de ancho no lo lee nadie. Los párrafos se cortan en --measure (64ch) y las
   listas ya lo hacen solas (.lds-lista-guiones). Los titulares y las tablas SÍ
   van a todo el ancho: el filete azul de cada H2 marca la estructura del
   documento de lado a lado y la prosa vive dentro, que es como se compone un
   texto largo en papel. */
.lds-legal > p{max-width:var(--measure)}
.lds-legal__titulo{
  font:var(--type-h2);
  letter-spacing:var(--track-heading);
  margin-top:var(--space-8);
  margin-bottom:var(--space-5);
  padding-bottom:var(--space-4);
  border-bottom-width:var(--border-width-strong);
  border-bottom-style:solid;
  border-bottom-color:var(--azul-pizarra);
  /* La cabecera es `position:sticky`, así que un ancla del índice dejaría el
     titular justo debajo de ella. 96px es el token que la despeja: en
     escritorio la cabecera mide los 80px que fija el sistema de diseño.
     ⚠️ En móvil NO basta, y a propósito: ahí la cabecera compartida mide 281px
     porque el submenú de «Servicios» se pinta en el flujo. Es un fallo de la
     cabecera —el mismo en las otras ocho páginas— y se arregla en
     cabecera-pie.html, no atando este valor a un número roto. Anotado en el
     README como carencia. */
  scroll-margin-top:var(--space-9);
}
/* El primer titular de una sección ya tiene el aire de la propia sección. */
.lds-legal > .lds-legal__titulo:first-child{margin-top:0}
.lds-legal__subtitulo{
  font:var(--type-h3);
  margin-top:var(--space-7);
  margin-bottom:var(--space-4);
}
/* «Última actualización», al pie del documento y separada por un filete. */
.lds-legal__fecha{
  font:var(--type-body-sm);
  color:var(--text-body);
  max-width:var(--measure);
  margin-top:var(--space-7);
  margin-bottom:0;
  padding-top:var(--space-4);
  border-top-width:var(--rule-hair);
  border-top-style:solid;
  border-top-color:var(--border);
}

/* --- Índice de anclas ------------------------------------------------------ */
/* Solo lo usa privacidad.html, que es la larga. Es un <nav> de verdad, con su
   aria-label, no una lista decorativa. */
.lds-indice{
  background:var(--surface-card);
  border-width:var(--border-width);
  border-style:solid;
  border-color:var(--border);
  border-radius:var(--radius-2);
  padding:var(--space-5);
}
.lds-indice__lista{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--space-6);
  row-gap:var(--space-1);
  list-style:none;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
}
/* 44px de objetivo táctil, el mínimo del sistema. Un índice es navegación: si
   los enlaces se pisan unos a otros en un móvil, el índice estorba. */
.lds-indice__enlace{
  display:flex;
  align-items:center;
  min-height:44px;
  font:var(--type-body-sm);
  color:var(--text-link);
}

/* --- Tabla de ficha de tratamiento ---------------------------------------- */
/* Las tablas del RGPD son de dos columnas: etiqueta fija (Datos, Para qué, Base
   legal, Conservación) y prosa. La columna de etiqueta se ajusta a su contenido
   con nowrap, así no hace falta inventar un porcentaje de ancho. El resto lo
   hereda de .lds-tabla, incluido el min-width:520px que se levanta en ≤478px. */
.lds-tabla--ficha tbody th{white-space:nowrap}

/* Un bloque que no es un párrafo —lista, tabla, tarjeta— no trae margen inferior
   propio, así que el párrafo que va detrás se le pega. Se resuelve con el
   selector de hermano adyacente, que la hoja ya usa en .lds-heroe__marca. El
   valor sale de la regla de espaciado del sistema: 24-48px entre bloques. */
.lds-legal > .lds-lista-guiones + p,
.lds-legal > .lds-tarjeta + p{margin-top:var(--space-5)}
.lds-legal > .lds-tabla-envoltorio + p,
.lds-legal > .lds-tabla-pista + p{margin-top:var(--space-6)}

/* --- Marca de dato que falta ---------------------------------------------- */
/* Un [[PENDIENTE]] es un dato real que NO existe todavía. Se pinta en
   monoespaciada y con filete ámbar para que se lea como lo que es —una casilla
   vacía del expediente— y no como parte del texto legal. Cada uno va en su
   propio <li>: nunca un <span> con estilo dentro de un párrafo. */
.lds-pendientes{
  display:grid;
  grid-gap:var(--space-3);
  list-style:none;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
}
.lds-pendiente{
  font-family:var(--font-cifras);
  font-size:var(--size-body-sm);
  line-height:var(--leading-body);
  color:var(--ambar-900);
  background:var(--surface-card);
  border-left-width:var(--border-width-strong);
  border-left-style:solid;
  border-left-color:var(--ambar);
  padding-top:var(--space-3);
  padding-bottom:var(--space-3);
  padding-left:var(--space-4);
  padding-right:var(--space-4);
}

/* --- Responsive: solo 991 / 767 / 478 px, los nativos de Bricks ------------ */
@media (max-width:991px){
  .lds-indice__lista{grid-template-columns:1fr 1fr}
}
@media (max-width:478px){
  .lds-indice__lista{grid-template-columns:1fr}
  .lds-legal__titulo{font:var(--type-h3);letter-spacing:var(--track-heading);margin-top:var(--space-7)}
}


/* === ARREGLOS QUE TIENEN QUE IR AL FINAL DEL FICHERO =======================
   Aqui abajo va lo que anula reglas declaradas mas arriba. A igual
   especificidad gana la ultima, asi que el orden ES la regla: si esto se sube
   al principio del fichero, deja de aplicar sin dar ningun error.
   (Se aprendio con la cabecera movil: la regla estaba puesta arriba y la
   sobrescribia el .lds-cabecera{position:sticky} de la seccion de cabecera.)
   ========================================================================= */

/* 🔴 Los items de una rejilla NO se encogen por debajo de su contenido: su min-width
   por defecto es «auto», no cero. Con texto normal da igual, pero una URL larga sin
   espacios —«support.google.com/chrome/answer/95647», en la politica de cookies— tiene un
   min-content enorme y estira la columna: medido a 375px, la rejilla salia a 440px y la
   pagina entera se desplazaba en horizontal. Pasaba en las tres legales, que son las unicas
   con URLs dentro de listas.
   Se arregla en los dos frentes: dejar que el item se encoja, y permitir que la URL parta.
   `anywhere` y no `break-word` porque break-word no parte una palabra que ya esta sola en
   su linea, que es justo este caso. */
.lds-lista-guiones > li,
.lds-legal li,
.lds-indice__lista > li{min-width:0}
.lds-legal a,
.lds-lista-guiones a{overflow-wrap:anywhere}

@media (max-width:767px){
  /* 🔴 En movil la cabecera DEJA DE SER PEGAJOSA, y no por gusto: medido a 375px, con el
     menu completo desplegado en linea ocupa 281px de alto —un tercio de la pantalla— y una
     barra pegajosa que se come un tercio de la pantalla en cada scroll es peor que no tener
     barra. El telefono sigue arriba del todo y repetido en el pie, que son los dos sitios
     donde se busca.
     ⚠️ Esto es una solucion de MAQUETA. En produccion la cabecera se monta con el elemento
     nativo de navegacion de Bricks, que trae su propio menu de hamburguesa: ahi el patron
     movil correcto es ese, no este. Ver el README, seccion «Lo que NO se convierte». */
  .lds-cabecera{position:static}
}


/* === AÑADIDO 03-09-2026: locales, fin de obra y hub de servicios === */
/* Solo se AÑADE. No se ha tocado ni una regla de las de arriba.
   Las tres maquetas nuevas —servicios-limpieza-de-locales.html,
   servicios-limpieza-fin-de-obra.html y servicios.html— reutilizan las clases
   que ya existían. Lo único que faltaba de verdad es lo de abajo. */

/* --- El titulo del desplegable pasa de <button> a <a> ---------------------- */
/* «Servicios» ya tiene pagina propia (el hub /servicios/), asi que el titulo del
   grupo dejo de ser un <button> y es un <a href="/servicios/"> que sigue abriendo
   el submenu con :hover y con :focus-within.
   COMPROBADO: ni .lds-cabecera__grupo-titulo ni ninguna de las reglas del
   desplegable dependian del selector de tipo `button`, asi que NO ha hecho falta
   ampliar ningun selector. Se deja escrito aqui para que quien lo lea no vuelva a
   comprobarlo:
     .lds-cabecera__grupo-titulo{...}                    -> por clase
     .lds-cabecera__grupo-titulo[data-lds-activo="si"]   -> por clase + atributo
     .lds-cabecera__grupo:hover .lds-cabecera__submenu   -> por clase
     .lds-cabecera__grupo:focus-within .lds-cabecera__submenu -> por clase
   El unico efecto del cambio es que el `border:0` del reset de boton ya no aplica
   al filete inferior: lo declara despues .lds-cabecera__enlace, que va mas abajo en
   la hoja y por tanto gana a igual especificidad. Verificado leyendo el orden. */

/* --- Enlace al pie de una tarjeta de servicio ----------------------------- */
/* La rejilla de seis tarjetas del hub /servicios/ necesita que cada tarjeta lleve
   a su pagina. wiki/web-contenido.md ya pedia ese enlace en las tarjetas de la
   portada («Enlace: Ver la limpieza de oficinas») y nunca se habia maquetado.
   Es un enlace de texto, no un boton: seis botones de contorno en una rejilla
   compiten con la accion principal de la pagina, que es una sola.
   Va DESPUES de .lds-tarjeta__precio, que tiene margin-top:auto y ya empuja el
   bloque de precio al fondo de la tarjeta.
   El filete inferior en :hover es el mismo patron de .lds-cabecera__enlace, para
   que un enlace de la casa se comporte siempre igual. Todo con var(--token). */
.lds-tarjeta__enlace{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  min-height:44px;
  margin-top:var(--space-3);
  font-family:var(--font-titulares);
  font-size:var(--size-body-sm);
  font-weight:var(--weight-semibold);
  color:var(--text-brand);
  text-decoration:none;
  border-bottom-width:var(--border-width-strong);
  border-bottom-style:solid;
  border-bottom-color:transparent;
}
.lds-tarjeta__enlace:hover{border-bottom-color:var(--ambar)}

/* === AÑADIDO 03-09-2026: el logo en producción es una <img>, no un <svg> en línea ========
   Bricks convierte el <svg> de la maqueta en nada útil; en producción la cabecera y el pie
   llevan <img src="/wp-content/uploads/marca/logo-b-firma-horizontal-sin-rotulo*.svg">.
   Mismas medidas que las reglas del svg de más arriba (40px, 32px en móvil). */
.lds-cabecera__logo img,.lds-pie__logo img{display:block;height:40px;width:auto;max-width:none}
@media (max-width:767px){.lds-cabecera__logo img{height:32px}}

/* === MOVIMIENTO, añadido el 03-09-2026 ====================================================
   Decisión de Miguel: la web era demasiado sobria. Lo aprendido del tema de referencia y lo
   que se descartó está en wiki/sistema-diseno.md («Capa de movimiento»). Reglas de esta capa:
   · Aparición: 16 px hacia arriba + fundido, --duration-reveal (420 ms), curva del sistema.
   · Escalonado: los hijos de una rejilla entran de uno en uno, 70 ms entre cada uno.
   · Titular del héroe: cada línea sube dentro de su caja (no se desplaza por la página).
   · Cinta: una banda de texto que se desplaza despacio (60 s por vuelta) y se para al pasar
     el ratón. Es el único movimiento continuo de toda la web.
   · Hover de tarjeta: sube 2 px y el filete se pinta de azul. Sin escalado, sin opacidad.
   · Todo se apaga con prefers-reduced-motion.
   Las clases las pone animaciones.js; el CSS no depende de él para verse: sin script no hay
   IntersectionObserver que ponga .lds-visto, así que animaciones.js las pone todas al cargar
   si no puede observar. Sin JS del todo, el bloque de @media al final lo deja todo visible.
   ---------------------------------------------------------------------------------------- */

/* --- Aparición al hacer scroll --------------------------------------------------------- */
[data-lds-revelar]{
  opacity:0;
  transform:translateY(var(--space-4));
  transition:opacity var(--duration-reveal) var(--ease),transform var(--duration-reveal) var(--ease);
}
[data-lds-revelar].lds-visto{opacity:1;transform:none}

/* Escalonado: la rejilla lleva el atributo y son los hijos los que entran uno a uno. */
[data-lds-escalonado]>*{
  opacity:0;
  transform:translateY(var(--space-4));
  transition:opacity var(--duration-reveal) var(--ease),transform var(--duration-reveal) var(--ease);
}
[data-lds-escalonado].lds-visto>*{opacity:1;transform:none}
[data-lds-escalonado].lds-visto>:nth-child(2){transition-delay:70ms}
[data-lds-escalonado].lds-visto>:nth-child(3){transition-delay:140ms}
[data-lds-escalonado].lds-visto>:nth-child(4){transition-delay:210ms}
[data-lds-escalonado].lds-visto>:nth-child(5){transition-delay:280ms}
[data-lds-escalonado].lds-visto>:nth-child(6){transition-delay:350ms}

/* --- Titular del héroe: las líneas suben dentro de su caja ----------------------------- */
.lds-linea{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lds-linea>span{display:block;transform:translateY(110%);transition:transform var(--duration-reveal) var(--ease)}
.lds-visto .lds-linea:nth-child(2)>span{transition-delay:90ms}
.lds-visto .lds-linea:nth-child(3)>span{transition-delay:180ms}
.lds-visto .lds-linea>span{transform:none}
.lds-heroe__titulo .lds-linea>span{color:inherit}
.lds-heroe__titulo .lds-linea--ambar>span{color:var(--ambar-300)}

/* --- Cifras del héroe que cuentan ------------------------------------------------------ */
.lds-dato__valor{display:flex;align-items:baseline;column-gap:var(--space-1)}
.lds-dato__unidad{font-family:var(--font-titulares);font-size:var(--size-h4);font-weight:var(--weight-semibold);color:var(--ambar-300)}

/* --- La cinta ------------------------------------------------------------------------- */
.lds-cinta{
  overflow:hidden;
  background:var(--surface-paper);
  border-bottom-width:var(--rule-hair);
  border-bottom-style:solid;
  border-bottom-color:var(--hueso-oscuro);
  padding-top:var(--space-3);
  padding-bottom:var(--space-3);
}
.lds-cinta__pista{
  display:flex;
  width:max-content;
  column-gap:var(--space-6);
  margin:0;
  padding:0;
  list-style:none;
  animation:lds-cinta 60s linear infinite;
}
.lds-cinta:hover .lds-cinta__pista{animation-play-state:paused}
.lds-cinta__item{
  display:inline-flex;
  align-items:center;
  column-gap:var(--space-6);
  white-space:nowrap;
  font-family:var(--font-titulares);
  font-size:var(--size-h4);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--text-brand);
}
.lds-cinta__item::after{content:"";width:var(--space-2);height:var(--space-2);border-radius:50%;background:var(--ambar)}
@keyframes lds-cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Tarjetas y enlaces con respuesta al ratón ---------------------------------------- */
.lds-tarjeta{transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.lds-tarjeta:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--azul-pizarra)}
.lds-tarjeta__enlace::after{content:"→";margin-left:var(--space-2);transition:transform var(--duration) var(--ease)}
.lds-tarjeta__enlace:hover::after{transform:translateX(4px)}
.lds-confianza__item{transition:border-color var(--duration) var(--ease)}
.lds-confianza__item:hover{border-top-color:var(--ambar)}

/* Los pasos: el número lleva un filete ámbar que se dibuja al aparecer. */
.lds-paso-num{position:relative;display:inline-block;padding-bottom:var(--space-1)}
.lds-paso-num::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:var(--border-width-strong);
  background:var(--ambar);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--duration-reveal) var(--ease) 200ms;
}
.lds-visto .lds-paso-num::after{transform:scaleX(1)}

/* --- Cabecera compacta al hacer scroll ------------------------------------------------- */
.lds-cabecera{transition:box-shadow var(--duration) var(--ease)}
.lds-cabecera__interior{transition:min-height var(--duration) var(--ease)}
.lds-cabecera--compacta{box-shadow:var(--shadow-2)}
.lds-cabecera--compacta .lds-cabecera__interior{min-height:64px}

/* --- El precio cambia: un tic ---------------------------------------------------------- */
.lds-precio__numero.lds-tic{animation:lds-tic 320ms var(--ease)}
@keyframes lds-tic{from{opacity:.2;transform:translateY(var(--space-2))}to{opacity:1;transform:none}}

/* --- Botón primario: la flecha se mueve, el botón no ----------------------------------- */
.lds-boton--acento,.lds-boton--claro{transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease),border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}
.lds-boton--acento:hover,.lds-boton--claro:hover{box-shadow:var(--shadow-2)}

/* --- Todo apagado si la persona pide menos movimiento ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  [data-lds-revelar],[data-lds-escalonado]>*,.lds-linea>span{opacity:1;transform:none;transition:none}
  .lds-cinta__pista{animation:none}
  .lds-paso-num::after{transform:scaleX(1);transition:none}
  .lds-precio__numero.lds-tic{animation:none}
  .lds-tarjeta:hover{transform:none}
}

/* === IMÁGENES, añadido el 03-09-2026 ======================================================
   Antes no había ni una. Cada hueco tiene su fichero definitivo en uploads/web/ (ver
   wiki/imagenes-web.md); hasta que exista la foto, ahí hay un marcador con la trama de la
   franja, que es lo que manda el sistema para un hueco declarado. Tres piezas:
   · .lds-figura: la imagen con su marco (radio 4, filete, sombra 1), recorte por object-fit.
   · .lds-heroe--con-figura: héroe a dos columnas, texto y foto. En móvil la foto va debajo.
   · .lds-tarjeta__figura: la foto de una tarjeta de servicio, a sangre por arriba.
   ---------------------------------------------------------------------------------------- */
.lds-figura{margin:0;overflow:hidden;border-radius:var(--radius-2);border-width:var(--border-width);border-style:solid;border-color:var(--border);box-shadow:var(--shadow-1);background:var(--azul-pizarra-050)}
.lds-figura img{display:block;width:100%;height:100%;object-fit:cover}
.lds-figura--4x3{aspect-ratio:4/3}
.lds-figura--4x5{aspect-ratio:4/5}
.lds-figura--16x9{aspect-ratio:16/9}
.lds-figura__pie{font:var(--type-caption);color:var(--text-muted);padding-top:var(--space-2);padding-left:var(--space-3);padding-right:var(--space-3);padding-bottom:var(--space-3);margin:0}

/* Héroe con figura: dos columnas alineadas por arriba; la foto sobre el azul no lleva filete. */
.lds-heroe--con-figura .lds-heroe__interior{display:grid;grid-template-columns:1.1fr .9fr;grid-gap:var(--space-7);align-items:center}
.lds-heroe--con-figura .lds-heroe__figura{margin:0;overflow:hidden;border-radius:var(--radius-2);box-shadow:var(--shadow-2);aspect-ratio:4/3;background:var(--azul-pizarra-800)}
.lds-heroe--con-figura .lds-heroe__figura img{display:block;width:100%;height:100%;object-fit:cover}
.lds-heroe--con-figura .lds-heroe__datos{grid-column:1 / -1}

/* Tarjeta de servicio con foto arriba: la foto va a sangre y el resto conserva su padding. */
.lds-tarjeta--con-figura{padding:0}
.lds-tarjeta--con-figura .lds-tarjeta__figura{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--azul-pizarra-050);border-bottom-width:var(--border-width);border-bottom-style:solid;border-bottom-color:var(--border)}
.lds-tarjeta--con-figura .lds-tarjeta__figura img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease)}
.lds-tarjeta--con-figura:hover .lds-tarjeta__figura img{transform:scale(1.03)}
.lds-tarjeta--con-figura .lds-tarjeta__cuerpo{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--space-5)}

/* El retrato de «quién viene»: sustituye al hueco de trama del mismo tamaño. */
.lds-dani__figura{width:var(--space-10);aspect-ratio:4/5;margin:0;overflow:hidden;border-radius:var(--radius-2);background:var(--azul-pizarra-050)}
.lds-dani__figura img{display:block;width:100%;height:100%;object-fit:cover}

@media (max-width:991px){
  .lds-heroe--con-figura .lds-heroe__interior{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .lds-tarjeta--con-figura:hover .lds-tarjeta__figura img{transform:none}
}
/* Figura sobre fondo azul (bloques destacados): sin filete, con la sombra de elevar. */
.lds-figura--sobre-azul{border-color:transparent;box-shadow:var(--shadow-2);margin-bottom:var(--space-6)}
/* El retrato del héroe de «quiénes somos» como figura real (antes era un hueco de trama). */
.lds-heroe__retrato.lds-figura{border-color:transparent;box-shadow:var(--shadow-2)}
/* El marcador de foto pendiente no ocupa sitio para el público (el shortcode devuelve vacío). */
.lds-foto-pendiente:empty{display:none}
/* El bloque de texto del héroe a dos columnas: sin ancho mínimo para que la rejilla no se rompa. */
.lds-heroe__texto{min-width:0}
/* El retrato del héroe de «quiénes somos», ya como figura: ocupa su columna entera en 4:5
   (antes era un cuadrado de trama de tamaño fijo). Especificidad alta a propósito: pisa la regla vieja. */
.lds-heroe .lds-heroe__con-retrato .lds-heroe__retrato.lds-figura{width:100%;max-width:360px;height:auto;aspect-ratio:4/5;background-image:none}
.lds-heroe .lds-heroe__con-retrato .lds-heroe__retrato.lds-figura img{width:100%;height:100%;object-fit:cover}