/* ============================================================
   CreativePixeLamb — Bloques
   Los componentes que dibuja app/bloques.php a partir del texto
   del editor de /admin/proyectos.php.
   ------------------------------------------------------------
   Se carga DESPUÉS de design-system.css y empresa.css: reutiliza
   sus piezas (.card, .badge, .check-list, .cs-compare, .faq…) y
   solo añade lo que allí no existía.

   Ninguna regla de aquí escribe un color a mano: todo sale de
   var(--accent), que las clases .tono-* de más abajo reapuntan.
   Por eso una misma tarjeta se ve dorada, azul o morada según la
   clase que lleve encima, sin duplicar una sola declaración.
   ============================================================ */

/* ── Tonos ──────────────────────────────────────────────────
   Un tono no pinta nada por sí mismo: solo decide qué familia de
   color ocupa el hueco de --accent para todo lo que tenga dentro.
   Sirve en un <main> (acento de toda la página), en una sección,
   en una rejilla o en una sola tarjeta. */
.tono-oro {
  --accent: var(--gold);   --accent-light: var(--gold-light);
  --accent-deep: var(--gold-deep); --accent-soft: var(--gold-soft);
  --accent-dim: var(--gold-dim);   --accent-glow: var(--gold-glow);
}
.tono-turquesa {
  --accent: var(--teal);   --accent-light: var(--teal-light);
  --accent-deep: var(--teal-deep); --accent-soft: var(--teal-soft);
  --accent-dim: var(--teal-dim);   --accent-glow: var(--teal-glow);
}
.tono-azul {
  --accent: var(--blue);   --accent-light: var(--blue-light);
  --accent-deep: var(--blue-deep); --accent-soft: var(--blue-soft);
  --accent-dim: var(--blue-dim);   --accent-glow: var(--blue-glow);
}
.tono-morado {
  --accent: var(--purple); --accent-light: var(--purple-light);
  --accent-deep: var(--purple-deep); --accent-soft: var(--purple-soft);
  --accent-dim: var(--purple-dim);   --accent-glow: var(--purple-glow);
}
.tono-verde {
  --accent: var(--green);  --accent-light: var(--green-light);
  --accent-deep: var(--green-deep); --accent-soft: var(--green-soft);
  --accent-dim: var(--green-dim);   --accent-glow: var(--green-glow);
}
.tono-naranja {
  --accent: var(--orange); --accent-light: var(--orange-light);
  --accent-deep: var(--orange-deep); --accent-soft: var(--orange-soft);
  --accent-dim: var(--orange-dim);   --accent-glow: var(--orange-glow);
}
.tono-rosa {
  --accent: var(--pink);   --accent-light: var(--pink-light);
  --accent-deep: var(--pink-deep); --accent-soft: var(--pink-soft);
  --accent-dim: var(--pink-dim);   --accent-glow: var(--pink-glow);
}
.tono-rojo {
  --accent: var(--red);    --accent-light: var(--red-light);
  --accent-deep: var(--red-deep); --accent-soft: var(--red-soft);
  --accent-dim: var(--red-dim);   --accent-glow: var(--red-glow);
}

/* ── Secciones ──────────────────────────────────────────────── */
.bl-fondo-oscuro    { background: var(--bg); }
.bl-fondo-degradado {
  background: linear-gradient(160deg, var(--bg2), var(--bg));
  position: relative;
}
/* El halo del acento, muy tenue, para que el degradado no se lea plano. */
.bl-fondo-degradado::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, var(--accent-soft), transparent 70%);
}
.bl-fondo-degradado > .container { position: relative; }

.bl-espacio-estrecho { padding-block: clamp(1.75rem, 4vw, 3rem); }
.bl-espacio-amplio   { padding-block: clamp(4rem, 11vw, 8rem); }
.bl-espacio-pegado   { padding-block: 0; }

.bl-ancho-estrecho { max-width: 820px; }
.bl-ancho-amplio   { max-width: 1320px; }

/* Cabecera alineada a la izquierda en vez de centrada. */
.bl-head-izq { text-align: left; margin-inline: 0; max-width: 760px; }

/* ── Texto suelto dentro de un bloque ────────────────────────
   Fuera de la columna .prose el texto no tenía dueño: un párrafo
   dentro de una tarjeta heredaba el interlineado del body y las
   listas salían sin viñeta. Este es su sitio. */
.bl-texto > *:first-child { margin-top: 0; }
.bl-texto > *:last-child  { margin-bottom: 0; }
.bl-texto p { color: var(--text2); font-size: .95rem; margin-bottom: .75rem; }
.bl-texto p:last-child { margin-bottom: 0; }
.bl-texto h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin: 1.25rem 0 .5rem; }
.bl-texto h3 { margin: 0 0 .5rem; }
.bl-texto h4 {
  font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 700;
  color: var(--text); margin: 1rem 0 .35rem;
}
.bl-texto ul, .bl-texto ol { padding-left: 1.2rem; margin: .5rem 0 .75rem; }
.bl-texto ul { list-style: disc; }
.bl-texto ol { list-style: decimal; }
.bl-texto li { color: var(--text2); font-size: .95rem; margin-bottom: .3rem; }
.bl-texto li::marker { color: var(--accent); }
.bl-texto > .divider:first-child { display: none; }

/* Listas numeradas y marcas en la columna de lectura */
.prose ol { padding-left: 1.35rem; margin: .5rem 0 1rem; list-style: decimal; }
.prose ol li::marker, .prose ul li::marker { color: var(--accent); }
.prose h4 {
  font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--text); margin: 1.25rem 0 .4rem;
}

/* Resaltado y iconos en línea */
.bl-marca {
  background: var(--accent-dim); color: var(--accent-light);
  padding: .1em .35em; border-radius: 4px;
}
.bl-icono-linea { color: var(--accent); vertical-align: -.15em; margin: 0 .1em; }

/* ── Rejilla genérica ───────────────────────────────────────
   `auto-fit` con un mínimo, no un número fijo de columnas: en un
   móvil las tres columnas se convierten en una sin más reglas. */
.bl-rejilla { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.bl-cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.bl-cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.bl-cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bl-rejilla + .bl-rejilla,
.bl-rejilla + .cs-compare,
.prose + .bl-rejilla,
.section-head + .bl-rejilla { margin-top: 1.5rem; }

/* ── Tarjeta ────────────────────────────────────────────────── */
.bl-tarjeta { display: flex; flex-direction: column; gap: .1rem; }
.bl-tarjeta .service-icon { margin-bottom: .9rem; }
.bl-tarjeta .badge-block { align-self: flex-start; }
.bl-tarjeta .check-list { margin-top: .75rem; }

.bl-tarjeta-destacada {
  border-color: var(--accent);
  background: linear-gradient(145deg, var(--card), var(--accent-soft));
}

/* Tarjeta que es un enlace: hereda el color del texto para que el
   título no se ponga dorado, y el hover lo aporta ya .card. */
a.bl-tarjeta-enlace { color: inherit; }
a.bl-tarjeta-enlace:hover { color: inherit; }
a.bl-tarjeta-enlace h3 { transition: color var(--transition); }
a.bl-tarjeta-enlace:hover h3 { color: var(--accent); }

/* ── Columnas libres ────────────────────────────────────────── */
.bl-columnas { display: grid; gap: clamp(1.25rem, 4vw, 2.5rem); }
.bl-columnas.bl-cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.bl-columnas.bl-cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.bl-col-centro { align-items: center; }
.bl-col { min-width: 0; }

/* ── Separadores y aire ─────────────────────────────────────── */
.bl-separador { margin: 2rem auto; max-width: 760px; }
.bl-sep-linea     { height: 1px; background: var(--border); }
.bl-sep-degradado {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.bl-sep-puntos {
  height: 1.5rem; display: flex; align-items: center;
  justify-content: center; gap: .5rem;
}
.bl-sep-puntos::before, .bl-sep-puntos::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .5;
}
.bl-espacio-1 { height: .5rem; }
.bl-espacio-2 { height: 1.5rem; }
.bl-espacio-3 { height: 2.5rem; }
.bl-espacio-4 { height: 4rem; }

/* ── Índice de la página ────────────────────────────────────── */
.bl-indice {
  max-width: 760px; margin: 0 auto 2rem;
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
}
.bl-indice-titulo {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .75rem;
}
.bl-indice ol { list-style: none; counter-reset: idx; display: grid; gap: .4rem; }
.bl-indice li { counter-increment: idx; }
.bl-indice li::before {
  content: counter(idx, decimal-leading-zero);
  color: var(--text3); font-family: 'DM Mono', monospace;
  font-size: .8rem; margin-right: .6rem;
}
.bl-indice a { color: var(--text2); font-size: .93rem; }
.bl-indice a:hover { color: var(--accent); }

/* ── Pasos ──────────────────────────────────────────────────── */
.bl-pasos .step-num { color: var(--accent); }
.bl-pasos .bl-texto h3 { font-size: 1.1rem; margin-bottom: .35rem; }

/* ── Listas de comprobación ─────────────────────────────────── */
.bl-check-2col {
  display: grid; gap: .5rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* La variante «no»: cruz roja en vez de la palomita del acento. */
.bl-check-no li::before {
  background-color: var(--red);
  -webkit-mask-image: var(--ico-x); mask-image: var(--ico-x);
}

/* ── Notas / avisos ─────────────────────────────────────────── */
/* .good y .warn ya viven en empresa.css; faltaban estas dos. */
.service-callout.bad {
  background: var(--red-soft); border-left: 3px solid var(--red);
}
.service-callout.info {
  background: var(--blue-soft); border-left: 3px solid var(--blue);
}
.bl-nota { display: flex; flex-direction: column; gap: .5rem; }
.bl-nota .service-icon {
  width: 32px; height: 32px; margin: 0; border-radius: 8px;
}
.bl-nota .service-icon .icon { width: 18px; height: 18px; }
.bl-nota-titulo { color: var(--text); font-size: .95rem; }
.bl-nota .bl-texto p { font-size: .9rem; }

/* ── Cita destacada ─────────────────────────────────────────── */
.bl-cita {
  max-width: 760px; margin: 2rem auto; padding: 1.75rem 2rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-glow);
  border-radius: var(--radius-lg);
  position: relative;
}
/* La comilla de apertura, grande y muy tenue, como marca de agua. */
.bl-cita::before {
  content: '\201C';
  position: absolute; top: -.15em; left: .35rem;
  font-family: 'Playfair Display', serif; font-size: 5rem;
  color: var(--accent); opacity: .16; line-height: 1; pointer-events: none;
}
.bl-cita blockquote { position: relative; }
.bl-cita .bl-texto p {
  font-family: 'Playfair Display', serif; font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--text); line-height: 1.5;
}
.bl-cita figcaption {
  margin-top: 1rem; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .5rem; font-size: .88rem;
}
.bl-cita figcaption strong { color: var(--accent); }
.bl-cita figcaption span { color: var(--text3); }

/* ── Cifras ─────────────────────────────────────────────────
   Sin `grid-template-columns` propio: el reparto lo pone la clase
   .bl-cols-N que PHP añade siempre. Si se declarara aquí un 1fr por
   omisión le ganaría a .bl-cols-3 —misma especificidad y va después
   en el archivo— y las cifras saldrían apiladas en una columna. */
.bl-cifras { display: grid; gap: 1rem; }
.bl-cifra {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem 1.25rem;
  text-align: center;
  transition: border-color var(--transition), transform var(--transition);
}
.bl-cifra:hover { border-color: var(--accent); transform: translateY(-3px); }
.bl-cifra .service-icon { margin: 0 auto .75rem; }
.bl-cifra-valor {
  font-family: 'Playfair Display', serif; font-weight: 900; line-height: 1;
  font-size: clamp(2.1rem, 5.5vw, 3rem);
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bl-cifra-etiqueta {
  margin-top: .5rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text3);
}
.bl-cifra-nota { margin-top: .6rem; font-size: .85rem; color: var(--text2); }

/* ── Barra de progreso ──────────────────────────────────────── */
.bl-progreso { max-width: 760px; margin: 1.25rem auto; }
.bl-progreso-fila {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .5rem; font-size: .9rem; color: var(--text2);
}
.bl-progreso-valor {
  font-family: 'DM Mono', monospace; font-weight: 600; color: var(--accent);
}
.bl-progreso-pista {
  height: 8px; border-radius: 999px; background: var(--bg3);
  border: 1px solid var(--border); overflow: hidden;
}
.bl-progreso-barra {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
/* El ancho va por clase y no por style="width:73%": el sitio no lleva
   estilos en línea (lo pedía la auditoría) y así tampoco hace falta
   abrir la política de contenidos a 'unsafe-inline'. De cinco en cinco
   es de sobra: la diferencia entre 73 % y 75 % son dos píxeles.

   Cada clase da las dos formas del mismo dato: `width` para las barras y
   `--pct` para el ángulo del conic-gradient de los anillos. */
.bl-p-0{width:0%;--pct:0%} .bl-p-5{width:5%;--pct:5%} .bl-p-10{width:10%;--pct:10%} .bl-p-15{width:15%;--pct:15%}
.bl-p-20{width:20%;--pct:20%} .bl-p-25{width:25%;--pct:25%} .bl-p-30{width:30%;--pct:30%} .bl-p-35{width:35%;--pct:35%}
.bl-p-40{width:40%;--pct:40%} .bl-p-45{width:45%;--pct:45%} .bl-p-50{width:50%;--pct:50%} .bl-p-55{width:55%;--pct:55%}
.bl-p-60{width:60%;--pct:60%} .bl-p-65{width:65%;--pct:65%} .bl-p-70{width:70%;--pct:70%} .bl-p-75{width:75%;--pct:75%}
.bl-p-80{width:80%;--pct:80%} .bl-p-85{width:85%;--pct:85%} .bl-p-90{width:90%;--pct:90%} .bl-p-95{width:95%;--pct:95%}
.bl-p-100{width:100%;--pct:100%}

/* ── Línea de tiempo ────────────────────────────────────────── */
.bl-timeline .bl-texto h3 {
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: 1rem; color: var(--text); margin-bottom: .45rem;
}
.bl-timeline .bl-texto p { font-size: .87rem; }

/* ── Tabla ──────────────────────────────────────────────────── */
/* El contenedor con scroll propio evita que una tabla ancha empuje
   la página entera y aparezca la barra horizontal del navegador. */
.bl-tabla-scroll { overflow-x: auto; margin: 1.25rem 0; }
.bl-tabla {
  width: 100%; border-collapse: collapse; font-size: .92rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.bl-tabla th, .bl-tabla td {
  padding: .75rem 1rem; text-align: left;
  border-bottom: 1px solid var(--border);
}
.bl-tabla th {
  background: var(--bg3); color: var(--accent);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.bl-tabla td { color: var(--text2); }
.bl-tabla tbody tr:last-child td { border-bottom: none; }
.bl-tabla th.c, .bl-tabla td.c { text-align: center; }
.bl-tabla th.d, .bl-tabla td.d { text-align: right; }
.bl-tabla-zebra tbody tr:nth-child(even) { background: var(--bg3); }
.bl-tabla-compacta th, .bl-tabla-compacta td { padding: .45rem .7rem; font-size: .86rem; }
.bl-tabla code { color: var(--accent-light); }

/* ── Planes ─────────────────────────────────────────────────── */
.bl-planes .cs-model-card { display: flex; flex-direction: column; }
.bl-plan-btn { margin-top: auto; align-self: flex-start; }
.bl-planes .check-list { margin-bottom: 1.25rem; }

/* ── Pestañas ───────────────────────────────────────────────
   Sin JavaScript se ven todos los paneles seguidos, cada uno con su
   título: la información no se pierde nunca. El JS de empresa.js es
   el que esconde los paneles y muestra la barra de pestañas, y por
   eso las dos reglas cuelgan de .js. */
.bl-pestanas { margin: 1.5rem 0; }
.bl-pestanas-nav { display: none; }
.js .bl-pestanas-nav {
  display: flex; flex-wrap: wrap; gap: .3rem;
  border-bottom: 1px solid var(--border); margin-bottom: 1.5rem;
}
.bl-pestana-btn {
  background: none; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: .92rem; font-weight: 600;
  color: var(--text2); padding: .7rem 1.1rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.bl-pestana-btn:hover { color: var(--text); }
.bl-pestana-btn[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.js .bl-pestana-titulo { display: none; }
.bl-pestana-titulo {
  font-family: 'DM Sans', sans-serif; font-size: .95rem;
  color: var(--accent); margin-bottom: .75rem;
}
.bl-pestana + .bl-pestana { margin-top: 2rem; }
.js .bl-pestana + .bl-pestana { margin-top: 0; }
.bl-pestana[hidden] { display: none; }

/* ── Imagen suelta ──────────────────────────────────────────── */
.bl-imagen { margin: 1.75rem auto; display: flex; flex-direction: column; gap: .6rem; }
.bl-imagen img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg3);
}
.bl-imagen-limpia img { border: none; background: none; border-radius: 0; }
.bl-imagen-estrecho { max-width: 560px; }
.bl-imagen-normal   { max-width: 840px; }
.bl-imagen-completo { max-width: none; }
.bl-imagen figcaption {
  font-size: .85rem; color: var(--text3); line-height: 1.5; text-align: center;
}

/* ── Galería ────────────────────────────────────────────────
   El grueso lo pone .proy-galeria-pub (empresa.css), que ya reparte
   las capturas en dos columnas. Aquí solo van las otras dos anchuras
   y el margen, para que [galeria] respire igual que el resto. */
.bl-galeria   { margin-block: 1.5rem; }
.bl-galeria-2 { /* la de dos columnas es la de .proy-galeria-pub */ }
.bl-galeria-1 { grid-template-columns: 1fr; }
.bl-galeria-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* ── Vídeo ──────────────────────────────────────────────────── */
.bl-video { max-width: 900px; margin: 1.75rem auto; }
.bl-video iframe {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  border: 1px solid var(--border); border-radius: var(--radius); background: #000;
}

/* ── Código ─────────────────────────────────────────────────── */
.bl-codigo {
  max-width: 840px; margin: 1.5rem auto;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.bl-codigo-titulo {
  padding: .55rem 1rem; background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-family: 'DM Mono', monospace; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.bl-codigo pre { overflow-x: auto; padding: 1rem 1.15rem; }
.bl-codigo code {
  font-family: 'DM Mono', monospace; font-size: .84rem;
  line-height: 1.65; color: var(--text2); white-space: pre;
}

/* ── Botones ────────────────────────────────────────────────── */
.bl-botones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.bl-botones-centro    { justify-content: center; }
.bl-botones-izquierda { justify-content: flex-start; }
.bl-botones-derecha   { justify-content: flex-end; }

/* ── Remate ─────────────────────────────────────────────────── */
.bl-cta { margin-top: 0; }
.bl-cta .bl-texto { max-width: 560px; }
.bl-cta .bl-texto h2 { margin-top: 0; text-align: center; }
.bl-cta .bl-texto p { text-align: center; }

/* ── Stack y etiquetas ──────────────────────────────────────
   .tech-stack (empresa.css) ya monta la rejilla de grupos; .bl-stack
   solo separa el bloque de lo que tenga encima. */
.bl-stack { margin-block: 1.5rem; }
.bl-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.bl-etiquetas { margin: 1rem 0; }
.bl-etiquetas .bl-tags { justify-content: center; }

/* ── Ajustes de conjunto ────────────────────────────────────── */
/* Dos bloques seguidos necesitan aire entre ellos; el primero de una
   sección, no (ya lo pone el padding de .section). */
.bl-seccion > .container > * + * { margin-top: 1.5rem; }
.bl-seccion > .container > .section-head + * { margin-top: 0; }
.bl-seccion > .container > .prose + .prose { margin-top: 0; }

@media (max-width: 640px) {
  .bl-cita { padding: 1.35rem 1.25rem; }
  .bl-indice { padding: 1rem 1.15rem; }
  .bl-tabla th, .bl-tabla td { padding: .6rem .7rem; }
}

/* La animación de aparición no debe esconder el contenido al imprimir
   ni cuando se pide movimiento reducido; de eso ya se encarga
   design-system.css. Aquí solo se quitan los adornos que sobran. */
@media print {
  .bl-fondo-degradado::before,
  .bl-cita::before { display: none; }
  .bl-pestana[hidden] { display: block !important; }
  .js .bl-pestanas-nav { display: none; }
  .js .bl-pestana-titulo { display: block; }
}

/* ============================================================
   VARIANTES
   ------------------------------------------------------------
   Todo lo que sigue son clases que solo cambian el aspecto de un
   bloque que ya existe. El HTML es idéntico se elija la variante
   que se elija: cambiar una línea de tiempo de puntos a zigzag no
   cambia el marcado, solo qué reglas de aquí le aplican.
   ============================================================ */

/* ── Ajustes comunes a todos los bloques ────────────────────
   Seis atributos con el mismo nombre en los cuarenta bloques.
   Se aplican al elemento raíz de cada uno, así que valen igual en
   una tarjeta que en una tabla. */
.bl-t-s  { font-size: .9em; }
.bl-t-g  { font-size: 1.1em; }
.bl-borde-no      { border: none !important; }
.bl-borde-suave   { border: 1px solid var(--border) !important; }
.bl-borde-marcado { border: 2px solid var(--accent) !important; }
.bl-sombra-no       { box-shadow: none !important; }
.bl-sombra-suave    { box-shadow: var(--shadow) !important; }
.bl-sombra-flotante { box-shadow: 0 18px 40px -18px rgba(0,0,0,.8), var(--shadow-accent) !important; }
.bl-relleno-solido    { background: var(--card); }
.bl-relleno-degradado { background: linear-gradient(145deg, var(--card), var(--accent-soft)); }
/* `cristal`: translúcido y desenfocado. El color de reserva va primero
   para los navegadores sin backdrop-filter, que si no verían texto
   flotando sobre nada. */
.bl-relleno-cristal {
  background: rgba(30,35,54,.55);
  border: 1px solid var(--accent-glow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── Secciones: texturas y cortes ───────────────────────────
   Las tramas son degradados repetidos, no imágenes: no cuestan una
   petición y se tiñen solas con el acento de la página. */
.bl-fondo-rejilla, .bl-fondo-puntos, .bl-fondo-lineas, .bl-fondo-grano, .bl-fondo-foco {
  position: relative; isolation: isolate;
}
.bl-fondo-rejilla::before, .bl-fondo-puntos::before,
.bl-fondo-lineas::before, .bl-fondo-grano::before, .bl-fondo-foco::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.bl-fondo-rejilla::before {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .35;
  /* Se desvanece por los bordes para que la trama no acabe en seco. */
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent);
}
.bl-fondo-puntos::before {
  background-image: radial-gradient(var(--border) 1.2px, transparent 1.2px);
  background-size: 26px 26px; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent);
}
.bl-fondo-lineas::before {
  background-image: repeating-linear-gradient(45deg,
    var(--border) 0 1px, transparent 1px 14px);
  opacity: .3;
}
.bl-fondo-grano::before {
  background-image: radial-gradient(var(--text3) .5px, transparent .5px);
  background-size: 4px 4px; opacity: .07;
}
.bl-fondo-foco::before {
  background: radial-gradient(60% 70% at 50% 0%, var(--accent-dim), transparent 70%);
}
.bl-fondo-oscuro { background: var(--bg); }

/* Cortes entre secciones: el borde inferior deja de ser recto.
   Con clip-path, no con un SVG de fondo, así que hereda el color de la
   sección sin tener que repetirlo en ninguna parte. */
.bl-corte-diagonal { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); }
.bl-corte-curva {
  border-bottom-left-radius: 50% 3.5vw;
  border-bottom-right-radius: 50% 3.5vw;
}
.bl-corte-onda {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0 0h100v96c-12 6-22-4-34-4S44 100 32 100 12 92 0 96z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0 0h100v96c-12 6-22-4-34-4S44 100 32 100 12 92 0 96z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  padding-bottom: 5vw;
}
/* Un corte necesita que la sección tenga fondo propio; si no, no se ve
   nada porque está recortando aire. */
.bl-corte-diagonal:not(.section-alt):not([class*="bl-fondo-"]),
.bl-corte-curva:not(.section-alt):not([class*="bl-fondo-"]),
.bl-corte-onda:not(.section-alt):not([class*="bl-fondo-"]) { background: var(--bg2); }

/* ── Cabeceras ──────────────────────────────────────────────── */
.bl-head-linea h2::after {
  content: ''; display: block; width: 56px; height: 3px; border-radius: 2px;
  margin: .85rem auto 0; background: linear-gradient(90deg, var(--accent), transparent);
}
.bl-head-izq.bl-head-linea h2::after { margin-inline: 0; }
.bl-head-numero { position: relative; }
/* El número va centrado DETRÁS del título, no encima ni debajo: si asoma
   por un lado se lee como un error de maquetación en vez de como una
   marca de agua. */
.bl-head-num {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  font-family: 'Playfair Display', serif; font-weight: 900;
  font-size: clamp(5rem, 14vw, 9rem); line-height: 1;
  color: var(--accent); opacity: .08; z-index: 0; pointer-events: none;
  white-space: nowrap;
}
.bl-head-numero > *:not(.bl-head-num) { position: relative; z-index: 1; }
.bl-head-icono .service-icon { margin: 0 auto .9rem; }
.bl-head-izq .service-icon { margin-inline: 0; }

/* ── Tipografía con registro ────────────────────────────────── */
.bl-tipo { max-width: 760px; margin-inline: auto; }
.bl-tipo-entradilla p {
  font-size: clamp(1.1rem, 2.4vw, 1.35rem); line-height: 1.6; color: var(--text);
}
/* La capitular: primera letra grande y encajada en tres líneas. */
.bl-tipo-capital > p:first-of-type::first-letter {
  float: left; font-family: 'Playfair Display', serif; font-weight: 900;
  font-size: 3.6em; line-height: .82; padding: .04em .1em 0 0;
  color: var(--accent);
}
.bl-tipo-dos-columnas { max-width: 980px; }
@media (min-width: 760px) {
  .bl-tipo-dos-columnas { columns: 2; column-gap: 2.5rem; }
  .bl-tipo-dos-columnas p { break-inside: avoid; }
}

/* Nota al margen que flota junto al texto */
.bl-aparte {
  border-left: 2px solid var(--accent); padding-left: 1rem;
  margin: 1.25rem 0; max-width: 300px;
}
.bl-aparte .bl-texto p { font-size: .85rem; color: var(--text3); }
@media (min-width: 1100px) {
  .bl-aparte-derecha   { float: right; margin: .35rem -12rem 1rem 2rem; width: 260px; }
  .bl-aparte-izquierda {
    float: left; margin: .35rem 2rem 1rem -12rem; width: 260px;
    border-left: none; border-right: 2px solid var(--accent);
    padding-left: 0; padding-right: 1rem; text-align: right;
  }
}

/* ── Separadores ────────────────────────────────────────────── */
.bl-sep-zigzag {
  height: 12px;
  background: linear-gradient(135deg, var(--accent) 25%, transparent 25%) -8px 0,
              linear-gradient(225deg, var(--accent) 25%, transparent 25%) -8px 0;
  background-size: 16px 16px; opacity: .4;
}
.bl-sep-onda {
  height: 14px; opacity: .5;
  background: radial-gradient(circle at 50% 100%, transparent 8px, var(--accent) 8px, var(--accent) 9px, transparent 9px) 0 0/24px 14px repeat-x;
}
.bl-sep-icono {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  color: var(--accent); height: auto;
}
.bl-sep-icono::before, .bl-sep-icono::after {
  content: ''; height: 1px; flex: 1; max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--border));
}
.bl-sep-icono::after { background: linear-gradient(90deg, var(--border), transparent); }
.bl-sep-icono .icon { width: 1.15rem; height: 1.15rem; }

/* ── Índice: columnas y flotante ────────────────────────────── */
.bl-idx-columnas ol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* El flotante se pega al lateral en pantallas anchas y vuelve a ser una
   caja normal en cuanto no cabe. `top` deja hueco para el navbar fijo. */
@media (min-width: 1400px) {
  .bl-idx-flotante {
    position: fixed; top: 50%; left: 1.5rem; transform: translateY(-50%);
    width: 220px; margin: 0; z-index: 20; max-height: 70vh; overflow-y: auto;
    background: rgba(30,35,54,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .bl-idx-flotante a { font-size: .84rem; }
  .bl-idx-flotante li.activa a { color: var(--accent); font-weight: 600; }
  .bl-idx-flotante li.activa::before { color: var(--accent); }
}

/* ── Tarjetas: variantes ────────────────────────────────────── */
.bl-tar-contorno > .bl-tarjeta, .bl-tarjeta.bl-tar-contorno {
  background: transparent; border: 1px dashed var(--border); box-shadow: none;
}
.bl-tar-contorno > .bl-tarjeta:hover, .bl-tarjeta.bl-tar-contorno:hover {
  border-style: solid; border-color: var(--accent);
}
.bl-tar-plana > .bl-tarjeta, .bl-tarjeta.bl-tar-plana {
  background: transparent; border: none; box-shadow: none; padding: 0;
}
.bl-tar-plana > .bl-tarjeta:hover, .bl-tarjeta.bl-tar-plana:hover { transform: none; box-shadow: none; }
.bl-tar-elevada > .bl-tarjeta, .bl-tarjeta.bl-tar-elevada {
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8);
}
.bl-tar-cristal > .bl-tarjeta, .bl-tarjeta.bl-tar-cristal {
  background: rgba(30,35,54,.55); border-color: var(--accent-glow);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* El icono a la izquierda del texto en vez de encima. */
.bl-tar-icono-izq > .bl-tarjeta, .bl-tarjeta.bl-tar-icono-izq {
  display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start;
}
.bl-tar-icono-izq > .bl-tarjeta > .service-icon, .bl-tarjeta.bl-tar-icono-izq > .service-icon {
  grid-row: 1 / span 20; margin: 0;
}

/* Destacado dentro de una caja en vez de separado por una línea. */
.bl-dest-caja {
  border-top: none; margin-top: 1.5rem; padding: 1.75rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ── Perfiles ───────────────────────────────────────────────── */
.bl-perfiles { display: grid; gap: 1.25rem; }
.bl-perfil { text-align: center; display: flex; flex-direction: column; align-items: center; }
.bl-perfil-foto, .bl-perfil-ini {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent-glow); margin-bottom: .9rem;
}
.bl-perfil-ini {
  display: grid; place-items: center; background: var(--accent-dim); color: var(--accent);
  font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700;
}
.bl-perfil-nombre { font-size: 1.1rem; margin-bottom: .2rem; }
.bl-perfil-rol { font-size: .85rem; color: var(--accent); margin-bottom: .6rem; }

/* ── Pasos: variantes ───────────────────────────────────────── */
.bl-pasos-flechas .step { position: relative; }
/* La flecha entre pasos solo aparece cuando de verdad van en fila. */
@media (min-width: 780px) {
  .bl-pasos-flechas .step:not(:last-child)::after {
    content: ''; position: absolute; top: 18px; right: -1.1rem;
    width: .7rem; height: .7rem; border-top: 2px solid var(--accent);
    border-right: 2px solid var(--accent); transform: rotate(45deg); opacity: .5;
  }
}
.bl-pasos-tarjetas .step {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem;
}
.bl-pasos .bl-fase-icono, .bl-pasos .service-icon { margin-bottom: .7rem; }

/* ── Listas de comprobación: variantes ──────────────────────── */
.bl-chk-flecha li::before {
  -webkit-mask-image: var(--ico-flecha); mask-image: var(--ico-flecha);
  background-color: var(--accent);
}
.bl-chk-guion li::before {
  -webkit-mask-image: none; mask-image: none;
  content: '—'; background: none; color: var(--accent);
  width: auto; font-weight: 700;
}
ol.bl-chk-numerada { counter-reset: chk; }
ol.bl-chk-numerada li::before {
  -webkit-mask-image: none; mask-image: none; background: none;
  counter-increment: chk; content: counter(chk) '.';
  color: var(--accent); font-family: 'DM Mono', monospace;
  font-weight: 700; width: 1.4em;
}
/* `cols=2` son DOS columnas, no «las que quepan»: con auto-fit, en un
   contenedor ancho salían cuatro y la lista dejaba de leerse como una. */
.bl-chk-2col { display: grid; gap: .5rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .bl-chk-2col { grid-template-columns: 1fr 1fr; }
}
.bl-chk-no li::before {
  background-color: var(--red);
  -webkit-mask-image: var(--ico-x); mask-image: var(--ico-x);
}

/* ── Comparativa: variantes ─────────────────────────────────── */
.bl-cmp-filas { grid-template-columns: 1fr; }
.bl-cmp-filas .cs-compare-col { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 1rem; align-items: center; }
.bl-cmp-filas .cs-compare-col h4 { margin: 0; }
.bl-cmp-tabla { grid-template-columns: 1fr; gap: 0; border-radius: var(--radius); overflow: hidden; }
.bl-cmp-tabla .cs-compare-col { border-radius: 0; border: 1px solid var(--border); margin-bottom: -1px; }

/* ── Avisos: variantes ──────────────────────────────────────── */
.bl-nota-caja { border-left-width: 1px; border: 1px solid currentColor; border-radius: var(--radius); }
.bl-nota-caja.good { border-color: var(--green); }
.bl-nota-caja.warn { border-color: var(--gold); }
.bl-nota-caja.bad  { border-color: var(--red); }
.bl-nota-caja.info { border-color: var(--blue); }
.bl-nota-cinta { position: relative; border-left: none; padding-left: 1.6rem; }
.bl-nota-cinta::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .55rem;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%);
}
.bl-nota-bocadillo { position: relative; border-left: none; border-radius: var(--radius); }
.bl-nota-bocadillo::after {
  content: ''; position: absolute; left: 2rem; bottom: -9px;
  border: 9px solid transparent; border-bottom: 0;
  border-top-color: inherit; filter: brightness(1.6);
}
.bl-nota-icono-grande { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.bl-nota-icono-grande .service-icon { width: 44px; height: 44px; grid-row: 1 / span 3; }
.bl-nota-icono-grande .service-icon .icon { width: 24px; height: 24px; }

/* ── Citas: variantes ───────────────────────────────────────── */
.bl-cita figcaption { display: flex; align-items: center; gap: .75rem; }
.bl-cita-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bl-cita figcaption > span { display: flex; flex-direction: column; }
.bl-cita-comilla { background: none; border: none; padding-left: 3.5rem; }
.bl-cita-comilla::before { font-size: 7rem; opacity: .2; left: 0; }
.bl-cita-lateral {
  background: none; border: none; border-left: 3px solid var(--accent);
  border-radius: 0; padding: .35rem 0 .35rem 1.5rem;
}
.bl-cita-lateral::before { display: none; }
.bl-cita-destacada {
  max-width: none; text-align: center; padding: clamp(2rem, 6vw, 4rem) 1.5rem;
  border-radius: 0; border-inline: none;
}
.bl-cita-destacada::before { display: none; }
.bl-cita-destacada .bl-texto p { font-size: clamp(1.3rem, 3.5vw, 2rem); }
.bl-cita-destacada figcaption { justify-content: center; }

/* ── Cifras: variantes ──────────────────────────────────────── */
.bl-cif-limpia .bl-cifra { background: none; border: none; padding: .5rem; }
.bl-cif-limpia .bl-cifra:hover { transform: none; }
/* El anillo se dibuja con un conic-gradient cuyo ángulo sale de la clase
   .bl-p-N, la misma escala de cinco en cinco que usa la barra de progreso. */
.bl-cifra-anillo, .bl-prog-anillo {
  /* El porcentaje NO se declara aquí con un valor por omisión: lo trae la
     clase .bl-p-N, y como las dos reglas tienen la misma especificidad,
     un `--pct: 0%` escrito en esta ganaría por ir después en el archivo y
     todos los anillos saldrían vacíos. El respaldo va en el propio var(). */
  width: 116px; height: 116px; border-radius: 50%; margin: 0 auto .75rem;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--accent) var(--pct, 0%), var(--bg3) 0);
}
.bl-cifra-anillo::before, .bl-prog-anillo::before {
  content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--card);
}
.bl-cifra-anillo > *, .bl-prog-anillo > * { position: relative; }
.bl-cif-anillo .bl-cifra { background: none; border: none; }
.bl-cif-anillo .bl-cifra-valor { font-size: 1.6rem; }

/* ── Progreso: variantes ────────────────────────────────────── */
.bl-prog-anillo { width: 128px; height: 128px; }
.bl-prog-anillo span {
  font-family: 'DM Mono', monospace; font-weight: 600;
  color: var(--accent); font-size: 1.05rem;
}
.bl-progreso-etiqueta { text-align: center; font-size: .88rem; margin-top: .6rem; }
.bl-prog-segs { display: flex; gap: 4px; }
.bl-prog-segs span {
  flex: 1; height: 10px; border-radius: 3px;
  background: var(--bg3); border: 1px solid var(--border);
  transition: background var(--transition);
}
.bl-prog-segs span.on { background: var(--accent); border-color: var(--accent); }

/* ── Línea de tiempo: variantes ─────────────────────────────
   El marcado de partida es una REJILLA de tarjetas, cada una con un
   distintivo numerado en la esquina que dibuja .cs-phase::before con un
   contador de CSS. Las variantes cambian ese distintivo o rehacen la
   disposición; ninguna cambia el HTML. */

/* Forma del distintivo */
.bl-tl-cuadrados .cs-phase::before { border-radius: 5px; }
.bl-tl-hitos .cs-phase::before {
  /* El rombo no puede llevar el número dentro: al girar la caja giraría
     también la cifra. Se cambia por una marca sin texto. */
  content: ''; width: 18px; height: 18px; border-radius: 3px;
  transform: rotate(45deg); top: -9px;
}
.bl-tl-numeros .cs-phase::before {
  background: transparent; border: 2px solid var(--accent);
  color: var(--accent); width: 32px; height: 32px; font-size: .95rem; top: -16px;
}

/* Cuando la fase trae icono, sustituye al distintivo numerado. */
.bl-fase-icono {
  position: absolute; top: -15px; left: 1.25rem;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; z-index: 1;
  background: var(--bg3); border: 1px solid var(--accent); color: var(--accent);
}
.bl-fase-icono .icon { width: .95rem; height: .95rem; }
.cs-phase:has(.bl-fase-icono)::before { display: none; }

/* Estado de una fase: la pendiente se apaga, la activa lleva halo. */
.bl-fase-pendiente { opacity: .6; }
.bl-fase-pendiente::before { background: var(--text3); }
.bl-fase-activo::before { box-shadow: 0 0 0 5px var(--accent-dim); }
.bl-fase-hecho::before { background: var(--green); }

/* Horizontal: la misma rejilla, pero con la línea que une los distintivos
   y las tarjetas sin caja, para que se lea como una cronología y no como
   un conjunto de fichas sueltas. */
@media (min-width: 820px) {
  .bl-tl-horizontal { position: relative; padding-top: 1.25rem; }
  .bl-tl-horizontal::before {
    content: ''; position: absolute; top: 1.25rem; left: 2rem; right: 2rem;
    height: 2px; background: linear-gradient(90deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
  }
  .bl-tl-horizontal .cs-phase { background: none; border: none; padding-inline: 1.25rem; }
}

/* Zigzag: una sola columna con la línea en el centro y las tarjetas
   alternándose a un lado y a otro. */
@media (min-width: 800px) {
  .bl-tl-zigzag {
    display: block; position: relative; max-width: 900px;
    margin-inline: auto; padding-block: 1rem;
  }
  .bl-tl-zigzag::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; margin-left: -1px; background: var(--border);
  }
  .bl-tl-zigzag .cs-phase { width: calc(50% - 2.75rem); margin-top: 1.75rem; }
  .bl-tl-zigzag .cs-phase:nth-child(odd) { text-align: right; }
  .bl-tl-zigzag .cs-phase:nth-child(even) { margin-left: calc(50% + 2.75rem); }
  /* El distintivo salta al borde que da a la línea central. */
  .bl-tl-zigzag .cs-phase:nth-child(odd)::before,
  .bl-tl-zigzag .cs-phase:nth-child(odd) .bl-fase-icono { left: auto; right: -3.6rem; top: 1.1rem; }
  .bl-tl-zigzag .cs-phase:nth-child(even)::before,
  .bl-tl-zigzag .cs-phase:nth-child(even) .bl-fase-icono { left: -3.6rem; top: 1.1rem; }
  .bl-tl-zigzag .cs-phase:nth-child(odd) .phase-dur { float: right; }
}

/* ── Tablas: variantes ──────────────────────────────────────── */
.bl-tabla-lineas { background: none; border: none; border-radius: 0; }
.bl-tabla-lineas th { background: none; border-bottom: 2px solid var(--accent-glow); }
/* La columna destacada NO depende de estilo=destacada: `destacar=2` es un
   atributo aparte y tiene que funcionar con cualquier aspecto de tabla. */
.bl-tabla td.destacada, .bl-tabla th.destacada {
  background: var(--accent-soft); color: var(--text);
}
.bl-tabla th.destacada { color: var(--accent); }
/* estilo=destacada, además, remarca la columna con una línea a cada lado. */
.bl-tabla-destacada td.destacada, .bl-tabla-destacada th.destacada {
  box-shadow: inset 1px 0 var(--accent-glow), inset -1px 0 var(--accent-glow);
}
/* La primera columna se queda quieta al desplazar una tabla ancha. */
.bl-tabla-fija th:first-child, .bl-tabla-fija td:first-child {
  position: sticky; left: 0; background: var(--card); z-index: 1;
}
.bl-tabla-fija th:first-child { background: var(--bg3); }
/* En el móvil, cada fila se convierte en una ficha en vez de obligar a
   desplazar en horizontal. El encabezado de cada dato se copia con
   data-th desde el JS; sin él, se sigue viendo la tabla normal. */
@media (max-width: 640px) {
  .bl-tabla-tarjetas thead { display: none; }
  .bl-tabla-tarjetas tr {
    display: block; margin-bottom: .75rem;
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .bl-tabla-tarjetas td { display: flex; justify-content: space-between; gap: 1rem; }
  .bl-tabla-tarjetas td::before {
    content: attr(data-th); font-weight: 600; color: var(--accent);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  }
}

/* ── Planes en tabla ────────────────────────────────────────── */
.bl-plan-tabla { grid-template-columns: 1fr; gap: 0; }
.bl-plan-tabla .cs-model-card { border-radius: 0; margin-bottom: -1px; }
.bl-plan-tabla .cs-model-card:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.bl-plan-tabla .cs-model-card:last-child  { border-radius: 0 0 var(--radius) var(--radius); }

/* ── FAQ: variantes ─────────────────────────────────────────── */
.bl-faq-tarjetas .faq-item { box-shadow: var(--shadow); }
.bl-faq-numerada { counter-reset: faq; }
.bl-faq-numerada .faq-item { counter-increment: faq; }
.bl-faq-numerada summary::before {
  content: counter(faq, decimal-leading-zero);
  color: var(--accent); font-family: 'DM Mono', monospace;
  font-size: .8rem; margin-right: .75rem; flex-shrink: 0;
}

/* ── Pestañas: variantes ────────────────────────────────────── */
.bl-pestana-btn .icon { margin-right: .4rem; vertical-align: -.15em; }
.js .bl-pes-pildoras .bl-pestanas-nav { border-bottom: none; gap: .4rem; }
.bl-pes-pildoras .bl-pestana-btn {
  border: 1px solid var(--border); border-radius: 999px;
  margin-bottom: 0; padding: .5rem 1.1rem;
}
.bl-pes-pildoras .bl-pestana-btn[aria-selected="true"] {
  background: var(--accent-dim); border-color: var(--accent);
}
@media (min-width: 820px) {
  .js .bl-pes-lateral { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 2rem; }
  .js .bl-pes-lateral .bl-pestanas-nav {
    flex-direction: column; border-bottom: none;
    border-right: 1px solid var(--border); margin: 0; align-items: stretch;
  }
  .bl-pes-lateral .bl-pestana-btn {
    text-align: left; border-bottom: none;
    border-right: 2px solid transparent; margin: 0 -1px 0 0;
  }
  .bl-pes-lateral .bl-pestana-btn[aria-selected="true"] { border-right-color: var(--accent); }
}

/* ── Imágenes: variantes ────────────────────────────────────── */
.bl-img-flotante img { box-shadow: 0 24px 60px -28px rgba(0,0,0,.9); border: none; }
.bl-img-marco img { border: 1px solid var(--border); }
/* Sin marco: la captura a pelo, para las que ya traen su propio fondo. */
.bl-img-limpia img { border: none; background: none; border-radius: 0; }
.bl-imagen .hero-window { margin: 0; }
.bl-imagen .hero-window img { border: none; border-radius: 0; }
/* Marco de teléfono: bordes redondeados y el «notch» de arriba. */
.bl-movil-marco {
  max-width: 300px; margin-inline: auto; padding: .6rem;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 2rem; position: relative;
}
.bl-movil-marco::before {
  content: ''; position: absolute; top: 1.05rem; left: 50%; transform: translateX(-50%);
  width: 34%; height: 5px; border-radius: 3px; background: var(--border); z-index: 1;
}
.bl-movil-marco img { border-radius: 1.5rem; border: none; }
.bl-img-movil { max-width: 340px; }
img[data-zoom] { cursor: zoom-in; }

/* ── Galería: variantes ─────────────────────────────────────── */
/* Mosaico: alturas distintas para que no parezca una cuadrícula de fichas. */
.bl-gal-mosaico { grid-auto-rows: 12rem; }
.bl-gal-mosaico figure { margin: 0; }
.bl-gal-mosaico figure:nth-child(3n+1) { grid-row: span 2; }
.bl-gal-mosaico figure img { height: 100%; object-fit: cover; }
.bl-gal-carrusel {
  display: flex !important; gap: 1rem; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: .5rem; scrollbar-width: thin;
}
.bl-gal-carrusel figure {
  flex: 0 0 min(85%, 520px); scroll-snap-align: center; margin: 0;
}

/* ── Comparador de dos capturas ─────────────────────────────── */
.bl-comparador { margin: 1.75rem auto; max-width: 900px; }
.bl-comp-marco { position: relative; line-height: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.bl-comp-marco img { width: 100%; display: block; }
/* La imagen de después va recortada por la izquierda; el tirador mueve
   ese recorte. Sin JavaScript se queda en el 50 % y se ven las dos. */
.bl-comp-tapa { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.bl-comp-tapa img { width: auto; max-width: none; height: 100%; }
.bl-comp-tirador {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; background: none; appearance: none; cursor: ew-resize; opacity: 0;
}
.bl-comp-marco::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: var(--accent); pointer-events: none;
  box-shadow: 0 0 12px var(--accent-glow);
}
.bl-comparador figcaption { font-size: .85rem; color: var(--text3); text-align: center; margin-top: .6rem; }

/* ── Descarga ───────────────────────────────────────────────── */
.bl-descarga {
  display: flex; align-items: center; gap: 1rem; max-width: 520px;
  margin: 1.25rem auto; padding: 1rem 1.25rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  transition: border-color var(--transition), transform var(--transition);
}
.bl-descarga:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); }
.bl-descarga-ico {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
}
.bl-descarga-ico .icon { width: 20px; height: 20px; }
.bl-descarga-tit { display: block; font-weight: 600; }
.bl-descarga-meta { display: block; font-size: .8rem; color: var(--text3); font-family: 'DM Mono', monospace; }

/* ── Mapa ───────────────────────────────────────────────────── */
.bl-mapa {
  max-width: 620px; margin: 1.5rem auto; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.bl-mapa-img { width: 100%; height: 200px; object-fit: cover; }
.bl-mapa-ficha { display: flex; gap: .9rem; padding: 1.1rem 1.25rem; align-items: flex-start; }
.bl-mapa-ficha > .icon { color: var(--accent); width: 22px; height: 22px; flex-shrink: 0; }
.bl-mapa-dir { color: var(--text); font-weight: 600; margin: 0; }
.bl-mapa-ciudad { font-size: .88rem; margin: .15rem 0 .5rem; }

/* ── Botones: variantes ─────────────────────────────────────── */
.btn-outline {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-outline:hover { background: var(--accent-dim); color: var(--accent-light); }
.btn-link {
  background: none; padding-inline: 0; color: var(--accent); font-weight: 600;
}
.btn-link:hover { color: var(--accent-light); }
/* La flecha se desplaza al pasar el ratón: el gesto sugiere «sigue». */
.btn .icon { transition: transform var(--transition); }
.btn:hover .icon { transform: translateX(3px); }
.bl-btns-apilado { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.bl-btn-apilado {
  flex-direction: column; gap: .5rem; padding: 1.25rem 1rem; height: 100%;
}
.bl-btn-apilado .icon { width: 22px; height: 22px; }
.bl-btn-apilado:hover .icon { transform: translateY(-2px); }
@media (max-width: 560px) {
  .bl-btn-ancho { width: 100%; }
}

/* ── Remate: variantes ──────────────────────────────────────── */
.bl-cta-banda {
  background: linear-gradient(135deg, var(--accent-dim), transparent);
  border: 1px solid var(--accent-glow); border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 820px) {
  .bl-cta-partido {
    display: grid; grid-template-columns: 1fr auto; gap: 2rem;
    align-items: center; text-align: left;
  }
  .bl-cta-partido .bl-texto { max-width: none; }
  .bl-cta-partido .bl-texto h2, .bl-cta-partido .bl-texto p { text-align: left; }
}

/* ── Etiquetas y logos: variantes ───────────────────────────── */
.bl-tags-lista .bl-tags { flex-direction: column; align-items: flex-start; gap: .3rem; }
.bl-tags-lista .badge { background: none; padding-inline: 0; color: var(--text2); }
.bl-tags-lista .badge::before { content: '▸'; color: var(--accent); margin-right: .5rem; }
/* Nube: los primeros pesan más que los últimos, como en una nube de tags. */
.bl-tags-nube .bl-tags { align-items: baseline; gap: .5rem .75rem; }
.bl-tags-nube .badge:nth-child(-n+3) { font-size: 1rem; padding: .4rem 1rem; }
.bl-tags-nube .badge:nth-child(n+4):nth-child(-n+8) { font-size: .85rem; }
.bl-tags-nube .badge:nth-child(n+9) { font-size: .72rem; opacity: .8; }
.bl-tags-rejilla .bl-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.bl-tags-rejilla .badge { justify-content: center; padding-block: .5rem; }
.tech-group h3 .icon { margin-right: .4rem; vertical-align: -.15em; }

.bl-logos { margin: 1.5rem 0; text-align: center; }
.bl-logos-titulo {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 1rem;
}
.bl-logos-tira { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; }
.bl-logos-rejilla .bl-logos-tira { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.bl-logos-tira img { max-height: 38px; width: auto; object-fit: contain; }
.bl-logos-tira span {
  font-family: 'Playfair Display', serif; font-size: 1.15rem;
  font-weight: 700; color: var(--text3);
}
.bl-logos-gris img, .bl-logos-gris span {
  filter: grayscale(1); opacity: .6; transition: filter var(--transition), opacity var(--transition);
}
.bl-logos-gris img:hover, .bl-logos-gris span:hover { filter: none; opacity: 1; }

/* ── Nubes de ayuda ─────────────────────────────────────────
   Es un <button>, no un <span> con :hover, para que la explicación se
   abra también con el teclado y con un toque en el móvil. El texto vive
   en data-nube y lo saca el JS a un panel; sin JavaScript, el atributo
   title del propio botón sigue enseñándolo. */
.bl-nube {
  background: none; border: none; padding: 0; cursor: help;
  font: inherit; color: inherit;
  border-bottom: 1px dashed var(--accent);
}
.bl-nube:hover, .bl-nube[aria-expanded="true"] { color: var(--accent); }
.bl-nube-panel {
  position: absolute; z-index: 60; max-width: min(300px, 80vw);
  background: var(--bg3); border: 1px solid var(--accent-glow);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .7rem .9rem; font-size: .85rem; line-height: 1.5; color: var(--text2);
}

/* ── Código: coloreado y adornos ────────────────────────────── */
.bl-codigo-titulo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bl-cod-copiar {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text3); cursor: pointer; font-family: 'DM Sans', sans-serif;
  font-size: .72rem; padding: .2rem .6rem; text-transform: none; letter-spacing: 0;
  transition: color var(--transition), border-color var(--transition);
}
.bl-cod-copiar:hover { color: var(--accent); border-color: var(--accent); }
.bl-codigo .cod-l { display: block; }
.bl-cod-num .cod-l { padding-left: 3rem; text-indent: -3rem; }
.cod-n {
  display: inline-block; width: 2.2rem; margin-right: .8rem; text-indent: 0;
  text-align: right; color: var(--text3); opacity: .55; user-select: none;
}
.cod-l.marcada { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.cod-l.mas   { background: rgba(74,222,128,.09); }
.cod-l.menos { background: rgba(239,107,107,.09); }
.cod-key { color: var(--purple); font-weight: 600; }
.cod-str { color: var(--green); }
.cod-num { color: var(--orange); }
.cod-com { color: var(--text3); font-style: italic; }
.cod-var { color: var(--blue); }

/* ── Barra de progreso de lectura ───────────────────────────── */
.bl-lectura {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  width: 0; transition: width .1s linear; pointer-events: none;
}

/* ── Enlace de ancla en los títulos ─────────────────────────── */
.bl-ancla {
  position: absolute; left: -1.4em; width: 1.4em;
  opacity: 0; text-align: center; color: var(--accent);
  text-decoration: none; font-weight: 400;
  transition: opacity var(--transition);
}
h2[id], h3[id], .bl-seccion[id] > .container > .section-head h2 { position: relative; }
h2:hover > .bl-ancla, h3:hover > .bl-ancla, .bl-ancla:focus-visible { opacity: 1; }
@media (max-width: 900px) { .bl-ancla { display: none; } }

/* ── Capturas a pantalla completa ───────────────────────────── */
.bl-visor {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(6,8,12,.92); padding: clamp(1rem, 4vw, 3rem);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bl-visor[hidden] { display: none; }
.bl-visor img {
  max-width: 100%; max-height: 82vh; width: auto; border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: 0 30px 80px -30px #000;
}
.bl-visor-pie {
  margin-top: 1rem; text-align: center; color: var(--text2);
  font-size: .9rem; max-width: 60ch;
}
.bl-visor button {
  position: absolute; background: rgba(30,35,54,.8); border: 1px solid var(--border);
  color: var(--text); border-radius: 50%; width: 44px; height: 44px;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.bl-visor button:hover { border-color: var(--accent); color: var(--accent); }
.bl-visor .visor-x    { top: 1rem; right: 1rem; }
.bl-visor .visor-ant  { left: 1rem; }
.bl-visor .visor-sig  { right: 1rem; }
.bl-visor-cuenta {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  font-family: 'DM Mono', monospace; font-size: .8rem; color: var(--text3);
}

/* ── Movimiento reducido ────────────────────────────────────
   Lo global ya está en design-system.css; aquí solo se apagan los
   adornos propios de los bloques que se mueven por su cuenta. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover .icon { transform: none; }
  .bl-lectura { transition: none; }
  .bl-gal-carrusel { scroll-behavior: auto; }
}

/* ── Carrusel: mandos ───────────────────────────────────────
   La tira se desplaza sola con el dedo y con scroll-snap; estos mandos
   los añade bloques.js y solo existen si hay JavaScript, que es cuando
   pueden funcionar. */
.bl-carrusel { position: relative; }
.bl-carrusel-mandos {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: .9rem;
}
.bl-car-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  transition: border-color var(--transition), color var(--transition), opacity var(--transition);
}
.bl-car-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bl-car-btn:disabled { opacity: .3; cursor: default; }
.bl-carrusel-puntos { display: flex; gap: .45rem; }
.bl-car-punto {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--border); border: none;
  transition: background var(--transition), width var(--transition);
}
.bl-car-punto.activo { background: var(--accent); width: 22px; border-radius: 4px; }

/* ── Crecer al llegar con el scroll ─────────────────────────
   La barra crece con scaleX y no con width: la anchura la fija la clase
   .bl-p-N y no se puede sobrescribir sin duplicar las veintiuna reglas.
   Con la escala, el ancho final sigue siendo el suyo y la animación es
   independiente. Sin JavaScript, la clase nunca llega y la barra se
   dibuja de una vez, que es el resultado correcto. */
.js .bl-progreso-barra { transform: scaleX(0); transform-origin: left center; }
.js .bl-progreso-barra.crecida { transform: scaleX(1); transition: transform .9s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .js .bl-progreso-barra { transform: none; }
}

/* El corte del comparador lo mueve el JS con la variable --corte. */
.bl-comp-marco::after { left: var(--corte, 50%); }