/* ==========================================================================
   ESTILOS
   Usa solo variables de tokens.css. Orden: base, utilidades, componentes,
   secciones de la portada, responsive.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--enlace); text-decoration: none; }
a:hover { color: var(--enlace-hover); }
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  line-height: 1.15;
  /* Palabras enteras en los títulos (bug v1-titulo-de-portada-corta-palabras-con-guion): sin guiones
     automáticos y con las líneas repartidas. Solo si una palabra no cabe ni en una línea entera (letra
     del navegador muy grande en un celular), se parte sin guion para que no saque la página de la
     pantalla; «anywhere» también deja que la caja del título se angoste dentro de filas y columnas. */
  overflow-wrap: anywhere;
  hyphens: manual;
  text-wrap: balance;
  margin: 0 0 var(--e-4);
  color: var(--texto);
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
p { margin: 0 0 var(--e-4); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
/* Sobre fondos oscuros (foto de portada, franjas, pie) el foco usa el dorado claro. */
.hero, .cifras, .cta, .pie { --foco: var(--acento-claro); }

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--primario); color: var(--sobre-primario);
  padding: var(--e-2) var(--e-4); z-index: 100;
}
.saltar:focus { left: var(--e-4); }

/* ---------- Utilidades ---------- */
.contenedor { width: min(100% - 2rem, var(--ancho-max)); margin-inline: auto; }
.seccion { padding-block: var(--e-24); }
.seccion--alterna { background: var(--fondo-alterno); }
.antetitulo {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--espaciado-mayus);
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--e-3);
}
.linea-dorada { width: 56px; height: 2px; background: var(--acento); border: 0; margin: 0 0 var(--e-6); }
/* Mensaje institucional de la portada (Rosa vía Manuel, 27 oct 2026). */
.mensaje-institucional { margin: var(--e-6) 0; padding-left: var(--e-4); border-left: 3px solid var(--acento); font-family: var(--fuente-titulos); font-size: clamp(var(--t-lg), 3vw, var(--t-xl)); font-weight: var(--peso-titulos); line-height: 1.4; color: var(--texto); min-width: 0; overflow-wrap: anywhere; hyphens: manual; text-wrap: pretty; }
.cabecera-seccion { display: flex; justify-content: space-between; align-items: end; gap: var(--e-6); margin-bottom: var(--e-8); flex-wrap: wrap; }
.cabecera-seccion h2 { margin: 0; }
.texto-suave { color: var(--texto-suave); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: 0.8rem 1.4rem;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  font-family: var(--fuente-botones);
  font-size: var(--t-sm);
  font-weight: var(--peso-botones);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion);
  white-space: nowrap;
}
.boton:hover { transform: translateY(-1px); }
/* Desactivado: más tenue y sin movimiento. */
.boton:disabled, .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.boton:disabled:hover, .boton[aria-disabled="true"]:hover { transform: none; }
.boton--primario { background: var(--primario); color: var(--sobre-primario); }
.boton--primario:hover { background: var(--primario-hover); color: var(--sobre-primario); }
.boton--secundario { background: transparent; color: var(--texto); border-color: var(--acento); }
.boton--secundario:hover { background: var(--acento); color: var(--negro); }
.boton--claro { background: var(--blanco); color: var(--marca-profunda); }
.boton--claro:hover { background: var(--acento-claro); color: var(--negro); }
.boton--whatsapp { background: var(--whatsapp); color: var(--blanco); }
.boton--whatsapp:hover { background: var(--whatsapp-hover); color: var(--blanco); }
.boton--bloque { width: 100%; }
.boton svg { width: 18px; height: 18px; }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.encabezado__fila { display: flex; align-items: center; gap: var(--e-6); min-height: 76px; }
.logo { flex-shrink: 0; }
.logo img { height: 40px; width: auto; }
.logo .logo--oscuro { display: none; }
/* Logo oficial de CDM (ADR 0021): el horizontal en pantallas anchas y el circular en el teléfono. */
.logo .logo__compacto { display: none; height: 48px; }
:root[data-tema="oscuro"] .logo .logo--claro { display: none; }
:root[data-tema="oscuro"] .logo .logo--oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo .logo--claro { display: none; }
  :root:not([data-tema="claro"]) .logo .logo--oscuro { display: block; }
}
.menu { display: flex; gap: var(--e-1); margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.menu a, .menu button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: var(--e-2) var(--e-3);
  font-family: var(--fuente-menu); font-size: var(--t-sm); font-weight: var(--peso-menu); color: var(--texto);
  background: none; border: 0; cursor: pointer; border-radius: var(--radio-sm);
}
.menu a:hover, .menu button:hover { color: var(--enlace); }
.menu .activo { color: var(--enlace); box-shadow: inset 0 -2px 0 var(--acento); border-radius: 0; }
.menu__item { position: relative; }
.submenu {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: var(--e-2); list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: all var(--transicion);
}
.menu__item:hover .submenu, .menu__item:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
/* Escape lo oculta hasta que el ratón o el foco salen (js/main.js). */
.menu__item.menu__item--cerrado .submenu { opacity: 0; visibility: hidden; }
.submenu a { display: block; padding: var(--e-2) var(--e-3); }
.submenu a:hover { background: var(--fondo-alterno); }
.herramientas { display: flex; align-items: center; gap: var(--e-2); }
.idioma { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; color: var(--texto-suave); }
.idioma strong { color: var(--texto); }
.idioma a { text-decoration: underline; text-underline-offset: 3px; }
.icono-boton {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--borde); background: transparent; color: var(--texto); cursor: pointer;
}
.icono-boton:hover { border-color: var(--acento); color: var(--acento); }
.icono-boton svg { width: 18px; height: 18px; }
.boton-menu { display: none; }

/* ---------- Franja de promoción (ADR 0040): logo, días que quedan, texto y botón ---------- */
.promocion {
  background: var(--franja); color: var(--sobre-franja);
  border-bottom: 3px solid var(--naranja);
  --foco: var(--acento-claro);
}
.promocion__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--e-4) var(--e-8); padding-block: var(--e-6);
}
.promocion__logo { display: block; width: clamp(200px, 22vw, 260px); height: auto; flex: none; }
.promocion__nombre { margin: 0; font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: var(--t-xl); color: var(--sobre-franja); }
.promocion__texto { flex: 1 1 300px; max-width: 560px; min-width: 0; }
.promocion__dias {
  display: inline-block; margin: 0 0 var(--e-2);
  padding: 0.2rem 0.6rem; border: 1px solid var(--acento-claro); border-radius: 999px;
  color: var(--acento-claro); font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
}
.promocion__bajada { margin: 0; font-size: var(--t-base); line-height: 1.5; }
.promocion .boton { font-size: var(--t-base); padding: 0.9rem 1.6rem; }
@media (max-width: 37.5em) {
  .promocion__fila { text-align: center; }
  .promocion__texto { flex-basis: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 88vh; display: grid; align-items: center;
  color: var(--blanco); overflow: hidden; isolation: isolate;
}
.hero .hero__imagen { position: absolute; inset: 0; z-index: -2; }

.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--velo-hero-1) 0%, var(--velo-hero-2) 50%, var(--velo-hero-3) 100%);
}
.hero__contenido { padding-block: var(--e-24) var(--e-16); max-width: 760px; container-type: inline-size; }
/* El título de la portada se achica con su columna para que su palabra más ancha («crecimiento»,
   unas 6,4 veces el tamaño de la letra) quepa entera también con la letra del navegador agrandada. */
.hero h1 { color: var(--blanco); font-weight: var(--peso-destacado); font-size: min(var(--t-hero), 14.5cqi); }
.hero__eslogan { font-size: var(--t-xs); letter-spacing: .3em; text-transform: uppercase; color: var(--acento-claro); font-weight: 600; margin-bottom: var(--e-6); display: flex; align-items: center; gap: var(--e-3); }
.hero__eslogan::before { content: ""; width: 40px; height: 1px; background: var(--acento-claro); }
.hero__bajada { font-size: var(--t-lg); color: var(--blanco-86); max-width: 560px; margin-bottom: var(--e-8); }

/* Campos con la etiqueta dentro de su caja */
.campo { display: flex; flex-direction: column; gap: 2px; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde-campo); border-radius: var(--radio-sm); background: var(--fondo); }
/* El campo de dentro no lleva contorno: lo muestra su caja. */
.campo:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.campo label { font-size: 0.68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.campo select, .campo input { border: 0; background: transparent; padding: 0; outline: none; font-size: var(--t-sm); width: 100%; }

/* Servicios de la portada (bajo el hero) */
.tipos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); margin-top: calc(var(--e-12) * -1); position: relative; z-index: 2; }
.tipo {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2); text-align: center;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e-6) var(--e-3); color: var(--texto); box-shadow: var(--sombra); transition: transform var(--transicion), border-color var(--transicion);
}
.tipo svg { width: 34px; height: 34px; color: var(--acento); }
.tipo strong { font-size: var(--t-sm); }
.tipo span { font-size: var(--t-xs); color: var(--texto-suave); }
/* Con enlace (servicios, ADR 0014): toda la tarjeta lleva a su página. */
.tipo:has(.tipo__enlace) { padding: 0; }
.tipo__enlace { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); width: 100%; height: 100%; padding: var(--e-6) var(--e-3); color: inherit; border-radius: var(--radio); }
.tipo__enlace:hover { color: inherit; }
.tipo:has(.tipo__enlace:hover) { border-color: var(--acento); transform: translateY(-2px); }
.tipo__enlace strong { color: var(--texto); }
/* En el listado de servicios no se montan sobre la portada. */
.tipos--listado { margin-top: var(--e-8); }

/* ---------- Página de un servicio ---------- */
.servicio { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e-12); align-items: start; }
.servicio__plazo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-6); }
.servicio__dato { font-family: var(--fuente-titulos); font-size: var(--t-lg); margin: 0 0 var(--e-2); }
.servicio__dato + p { margin-bottom: var(--e-6); }
.servicio__nota { font-size: var(--t-sm); margin: 0; }
/* REPRESENTA™ (ADR 0016): foto en blanco y negro junto al formulario «Aplicar ahora». */
/* Columnas minmax(0, …): con la letra grande los campos no ensanchan la página (docs/bugs/v1-m5-formulario-representa-desborda.md). */
.presentacion.representa { align-items: start; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
@media (max-width: 56.25em) {
  .presentacion.representa { grid-template-columns: minmax(0, 1fr); }
}
.representa .nota-pagina a { display: inline-flex; align-items: center; gap: var(--e-2); }

/* ---------- Tarjetas ---------- */
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.tarjeta__imagen { position: relative; aspect-ratio: 4 / 3; }

.etiqueta { font-size: 0.68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; background: var(--blanco-94); color: var(--marca-profunda); }
.etiqueta--dorada { background: var(--acento-base); color: var(--negro); }
.etiqueta--ejemplo { background: var(--ejemplo-fondo); color: var(--ejemplo-texto); }

.tarjeta__cuerpo { padding: var(--e-4) var(--e-6) var(--e-6); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }

.tarjeta__titulo { font-family: var(--fuente-texto); font-size: var(--t-base); font-weight: 600; margin: 0; line-height: 1.35; }
.tarjeta__titulo a { color: inherit; }

.tarjeta__codigo { font-size: 0.7rem; letter-spacing: .08em; color: var(--texto-suave); }

/* ---------- Imágenes de ejemplo (se reemplazan por fotos reales) ---------- */
.foto {
  position: relative; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  display: grid; place-items: center; overflow: hidden;
}
.foto--a { background: var(--foto-a); }

.foto--c { background: var(--foto-c); }

.foto--hero { background: var(--foto-hero); }

/* ---------- Presentación (portada y Nosotros) ---------- */
.presentacion { display: grid; grid-template-columns: 5fr 7fr; gap: var(--e-16); align-items: center; }
.presentacion__foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; }
.presentacion__foto::before { content: ""; position: absolute; inset: var(--e-4) calc(var(--e-4) * -1) calc(var(--e-4) * -1) var(--e-4); border: 1px solid var(--acento); border-radius: var(--radio); z-index: -1; }
.presentacion__marco { position: relative; isolation: isolate; }
.presentacion__marco::before { content: ""; position: absolute; inset: 18px -14px -18px 18px; border: 1px solid var(--acento); border-radius: var(--radio); z-index: -1; }
.presentacion__pendiente { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--blanco-85); text-align: center; font-size: var(--t-sm); padding: var(--e-6); }
.presentacion__pendiente svg { width: 64px; height: 64px; margin: 0 auto var(--e-3); opacity: .7; }
.presentacion h2 em { font-style: italic; color: var(--acento-texto); }

.presentacion__valores { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3) var(--e-6); list-style: none; padding: 0; margin: var(--e-6) 0 var(--e-8); }
.presentacion__valores li { display: flex; gap: var(--e-2); align-items: center; font-size: var(--t-sm); font-weight: 500; }
.presentacion__valores svg { width: 18px; height: 18px; color: var(--acento); flex-shrink: 0; }
/* Valores con su frase: arriba alineados y con el texto en peso normal. */
.presentacion__valores--con-texto li { align-items: flex-start; font-weight: 400; }
.presentacion__valores--con-texto svg { margin-top: 3px; }
.presentacion__valores--con-texto strong { display: block; font-weight: 700; }
.acciones { display: flex; gap: var(--e-3); flex-wrap: wrap; }

/* ---------- Franja de cifras ---------- */
.cifras { background: var(--franja); color: var(--sobre-franja); padding-block: var(--e-16); }
.cifras__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-6); text-align: center; }
.cifra strong { display: block; font-family: var(--fuente-titulos); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: var(--peso-destacado); color: var(--acento-claro); line-height: 1; }
.cifra span { font-size: var(--t-xs); letter-spacing: var(--espaciado-mayus); text-transform: uppercase; }
.cifra + .cifra { border-left: 1px solid var(--blanco-12); }

/* ---------- Regiones ---------- */

/* ---------- Preconstrucción ---------- */

.planos__lista { list-style: none; padding: 0; margin: 0 0 var(--e-8); display: grid; gap: var(--e-3); }
.planos__lista li { display: flex; gap: var(--e-3); align-items: start; font-size: var(--t-sm); }
.planos__lista svg { width: 20px; height: 20px; color: var(--acento); flex-shrink: 0; margin-top: 2px; }

/* ---------- Testimonios ---------- */
/* Formato de tarjeta (Manuel, 25 oct 2026): autor arriba, cita entre comillas y estrellas abajo. Sin fotos por ahora. */
.testimonios { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
.testimonio { margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: calc(var(--radio) * 2); padding: var(--e-8); position: relative; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: var(--e-6); }
.testimonio blockquote { margin: 0; font-size: var(--t-lg); line-height: 1.7; color: var(--texto-suave); }
.testimonio blockquote p { margin: 0 0 var(--e-3); }
.testimonio__comilla { color: var(--acento-texto); font-weight: 700; }
/* Palabras largas (sobre todo en francés) con la letra grande: se cortan con guion antes de desbordar (docs/bugs/v1-testimonios-desbordan-en-frances.md). */
.testimonio { min-width: 0; }
.testimonio blockquote { overflow-wrap: anywhere; min-width: 0; }
:lang(fr) .testimonio blockquote { hyphens: auto; }
.testimonio blockquote p:last-child { margin-bottom: 0; }
/* Dos o cuatro testimonios: dos columnas, sin la tercera vacía ni uno suelto (en pantallas chicas manda la regla de abajo). */
.testimonios--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.testimonio__autor { display: flex; align-items: center; gap: var(--e-4); min-width: 0; }
.testimonio__nombre { display: block; font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: var(--t-xl); line-height: 1.2; color: var(--texto); }
.testimonio__cargo { display: block; margin-top: var(--e-1); color: var(--acento-texto); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--espaciado-mayus); text-transform: uppercase; line-height: 1.5; }
/* Un solo testimonio: a lo ancho, con una medida de lectura cómoda. */
.testimonio:only-child { grid-column: 1 / -1; max-width: 48rem; }
.testimonio__inicial { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--fondo-alterno); border: 3px solid var(--acento); display: grid; place-items: center; font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: var(--t-xl); color: var(--acento-texto); }
.testimonio__estrellas { margin: auto 0 0; color: var(--estrellas); font-size: var(--t-xl); letter-spacing: .2em; line-height: 1; }
.testimonio .etiqueta { position: absolute; top: var(--e-4); right: var(--e-4); }

/* ---------- Llamado a la acción ---------- */
.cta { background: var(--franja); color: var(--sobre-franja); border-radius: var(--radio); padding: var(--e-12); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--e-12); align-items: center; position: relative; overflow: hidden; }
.cta h2 { color: var(--blanco); }
.cta p { color: var(--crema-80); }

/* ---------- Pie ---------- */
.pie { background: var(--franja); color: var(--sobre-franja); padding-block: var(--e-16) var(--e-8); margin-top: var(--e-24); font-size: var(--t-sm); }
.pie a { color: var(--crema-80); }
.pie a:hover { color: var(--acento-claro); }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--e-8); }
.pie h4, .pie__titulo { font-family: var(--fuente-texto); font-size: var(--t-xs); letter-spacing: var(--espaciado-mayus); text-transform: uppercase; color: var(--acento-claro); margin-bottom: var(--e-4); }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.logo-pie img { width: 140px; height: auto; margin-bottom: var(--e-4); }
.pie__redes { display: flex; gap: var(--e-2); margin-top: var(--e-4); }
.pie__redes a { width: 36px; height: 36px; border: 1px solid var(--blanco-20); border-radius: 50%; display: grid; place-items: center; }
.pie__redes svg { width: 16px; height: 16px; }
.pie__legal { border-top: 1px solid var(--blanco-12); margin-top: var(--e-12); padding-top: var(--e-6); display: flex; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; color: var(--crema-75); font-size: var(--t-xs); }
.pie__legal nav { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; background: var(--whatsapp); color: var(--blanco);
  display: grid; place-items: center; box-shadow: var(--sombra-whatsapp);
}
.whatsapp-flotante:hover { color: var(--blanco); transform: scale(1.05); }
.whatsapp-flotante svg { width: 30px; height: 30px; }

/* Cuadro de mensaje (ADR 0031): en los idiomas sin WhatsApp, botón naranja en la misma esquina y
   panel con mensaje y correo. Con texto grande o pantalla baja, el panel tiene scroll propio. */
.cuadro-mensaje__abrir {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primario); color: var(--sobre-primario);
  display: grid; place-items: center; box-shadow: var(--sombra-fuerte);
}
.cuadro-mensaje__abrir:hover { background: var(--primario-hover); }
.cuadro-mensaje__abrir svg { width: 30px; height: 30px; }
.cuadro-mensaje__abrir[hidden], .cuadro-mensaje__panel[hidden], .cuadro-mensaje__formulario[hidden] { display: none; }
.cuadro-mensaje__panel {
  position: fixed; right: 20px; bottom: 92px; z-index: 61;
  width: min(22rem, calc(100vw - 40px));
  max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); overflow-y: auto;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-fuerte);
}
.cuadro-mensaje__cabecera { position: relative; background: var(--franja); color: var(--sobre-franja); padding: var(--e-4) 3.5rem var(--e-4) var(--e-6); }
.cuadro-mensaje__cabecera h2 { font-size: var(--t-lg); margin: 0; color: inherit; overflow-wrap: anywhere; }
.cuadro-mensaje__cabecera p { margin: var(--e-1) 0 0; font-size: var(--t-sm); }
.cuadro-mensaje__cerrar {
  position: absolute; top: var(--e-2); right: var(--e-2); width: 44px; height: 44px;
  display: grid; place-items: center; background: none; border: 0; border-radius: var(--radio-sm); color: inherit; cursor: pointer;
}
.cuadro-mensaje__cerrar svg { width: 22px; height: 22px; }
.cuadro-mensaje__cerrar:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 0; }
.cuadro-mensaje__formulario { gap: var(--e-3); padding: var(--e-4) var(--e-6) var(--e-6); }
.cuadro-mensaje__formulario .formulario__nota { margin: 0; font-size: var(--t-xs); }
.cuadro-mensaje__estado { margin: 0; padding: var(--e-4) var(--e-6) var(--e-6); font-weight: 600; }
.cuadro-mensaje__formulario:not([hidden]) + .cuadro-mensaje__estado { padding-top: 0; }
.cuadro-mensaje__estado:empty { display: none; }

/* ==========================================================================
   FICHA DE PROPIEDAD
   ========================================================================== */
.migas { font-size: var(--t-xs); color: var(--texto-suave); padding-block: var(--e-6) var(--e-4); display: flex; gap: var(--e-2); flex-wrap: wrap; }
.migas a { color: var(--texto-suave); }

.dato { background: var(--fondo-alterno); border-radius: var(--radio-sm); padding: var(--e-4); }
.dato svg { width: 22px; height: 22px; color: var(--acento); margin-bottom: var(--e-2); }
.dato strong { display: block; font-size: var(--t-lg); }
.dato span { font-size: var(--t-xs); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .08em; }

.formulario { display: grid; gap: var(--e-2); }
.formulario input, .formulario textarea { width: 100%; padding: .7rem .9rem; border: 1px solid var(--borde-campo); border-radius: var(--radio-sm); background: var(--fondo); font-size: var(--t-sm); }
.formulario textarea { min-height: 90px; resize: vertical; }

/* Contacto: formulario y contacto directo */
.contacto { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--e-8); margin-top: var(--e-12); align-items: start; }
.contacto h2 { font-size: var(--t-2xl); margin-top: 0; }
.contacto__formulario { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-8); }
.contacto__directo { display: grid; gap: var(--e-4); }
.contacto__directo .medio h3 { font-family: var(--fuente-texto); font-size: var(--t-lg); font-weight: 600; margin: var(--e-2) 0 0; }
.formulario--contacto, .formulario--representa { gap: var(--e-4); }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.formulario__campo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.formulario__campo label { font-size: var(--t-sm); font-weight: 600; }
.formulario__opcional { font-weight: 400; color: var(--texto-suave); }
.formulario select { width: 100%; padding: .7rem .9rem; border: 1px solid var(--borde-campo); border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto); font-size: var(--t-sm); }
.formulario input, .formulario textarea { color: var(--texto); }
.formulario [aria-invalid="true"] { border-color: var(--error); }
.formulario__ayuda, .formulario__nota { margin: 0; font-size: var(--t-xs); color: var(--texto-suave); }
.formulario__nota a { text-decoration: underline; text-underline-offset: 2px; }
.formulario__error { margin: 0; font-size: var(--t-xs); font-weight: 600; color: var(--error); }
.formulario__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso-formulario { padding: var(--e-4) var(--e-6); border-left: 4px solid var(--primario); background: var(--fondo-alterno); border-radius: var(--radio-sm); margin: 0 0 var(--e-4); }
.aviso-formulario--error { border-left-color: var(--error); font-weight: 600; }
.aviso-formulario__titulo { font-weight: 600; margin: 0 0 var(--e-1); }
.aviso-formulario p:last-child { margin-bottom: 0; }

.preguntas { display: grid; gap: var(--e-3); }
.pregunta { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: var(--e-3) var(--e-4); background: var(--superficie); }
.pregunta summary { cursor: pointer; font-weight: 600; }
.pregunta[open] summary { margin-bottom: var(--e-2); }
.pregunta p { margin: 0; color: var(--texto-suave); }
.agenda__marco { display: block; width: 100%; height: 760px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); margin-top: var(--e-6); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 67.5em) {
  .menu, .herramientas .boton, .idioma { display: none; }
  .boton-menu { display: inline-grid; }
  .herramientas { margin-left: auto; }
  
  .tipos { grid-template-columns: repeat(3, 1fr); }
  .rejilla, .testimonios { grid-template-columns: repeat(2, 1fr); }
  
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 45em) {
  .seccion { padding-block: var(--e-16); }
  .hero { min-height: auto; }
  .hero__contenido { padding-block: var(--e-16) var(--e-16); }
  .tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--e-8); }
  /* El último ocupa toda la fila solo si quedó solo en ella (número impar de servicios). */
  .tipos .tipo:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* minmax(0, …): con la letra grande el contenido no ensancha la columna (docs/bugs/v1-desborde-320-con-letra-grande.md). */
  .rejilla, .testimonios, .presentacion, .cta { grid-template-columns: minmax(0, 1fr); }
  .testimonio { padding: var(--e-6); }
  .testimonio__inicial { width: 48px; height: 48px; font-size: var(--t-lg); }
  .testimonio__nombre { font-size: var(--t-lg); }
  
  .logo .logo__horizontal { display: none; }
  .logo .logo__compacto { display: block; }
  .presentacion { gap: var(--e-8); }
  .presentacion__marco::before { inset: 10px -8px -10px 10px; }
  .presentacion__valores { grid-template-columns: 1fr; }
  .cifras__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e-8); }
  .cifra + .cifra { border-left: 0; }
  
  .cta { padding: var(--e-8); }
  
  .pie__rejilla { grid-template-columns: 1fr; }
}

/* ---------- Menú móvil abierto (lo activa js/main.js) ---------- */
@media (max-width: 67.5em) {
  /* Alto máximo y scroll propio: en pantallas bajas se alcanzan todos los enlaces. */
  .menu.menu--abierto {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--superficie); border-bottom: 1px solid var(--borde); box-shadow: var(--sombra);
    padding: var(--e-4); gap: 0;
    max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain;
  }
  .menu--abierto .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 var(--e-4); }
}

/* ---------- Icono del botón de tema: luna en claro, sol en oscuro ---------- */
.icono-tema .sol { display: none; }
:root[data-tema="oscuro"] .icono-tema .sol { display: block; }
:root[data-tema="oscuro"] .icono-tema .luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .icono-tema .sol { display: block; }
  :root:not([data-tema="claro"]) .icono-tema .luna { display: none; }
}

/* ---------- Región a lo ancho (Internacional) ---------- */

/* ==========================================================================
   SITIO (M1): piezas nuevas respecto a la maqueta
   ========================================================================== */
.sprite { display: none; }
.encabezado nav { margin-left: auto; }
.encabezado .menu { margin-left: 0; }

.menu__extra { display: none; }

.etiqueta--borde { border: 1px solid var(--borde); }

/* Foto real en tarjetas (cuando existe) */
.tarjeta__foto { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__enlace-foto { display: block; height: 100%; }

/* Páginas "En preparación" y 404 */
.aviso-pagina__caja { max-width: 720px; }
.aviso-pagina h1 { font-size: var(--t-3xl); }

/* ---------- Guía de estilo ---------- */
.guia__intro { max-width: 720px; }
.guia__titulo { margin-top: var(--e-16); padding-top: var(--e-6); border-top: 1px solid var(--borde); }
.guia__bloque { margin-bottom: var(--e-6); }
.guia__colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--e-4); }
.muestra { display: grid; gap: var(--e-1); font-size: var(--t-xs); }
.muestra__color { height: 64px; border-radius: var(--radio-sm); border: 1px solid var(--borde); }
.muestra code { font-size: var(--t-xs); color: var(--texto); }
.guia__eslogan { color: var(--acento-texto); }
/* Las muestras de títulos cortan palabras como los títulos reales (docs/bugs/v1-desborde-320-con-letra-grande.md). */
.guia__h1, .guia__h2, .guia__h3 { overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
.guia__h1 { font-family: var(--fuente-titulos); font-size: var(--t-hero); line-height: 1.1; font-weight: var(--peso-titulos); }
.guia__h2 { font-family: var(--fuente-titulos); font-size: var(--t-3xl); line-height: 1.15; font-weight: var(--peso-titulos); }
.guia__h3 { font-family: var(--fuente-titulos); font-size: var(--t-xl); font-weight: var(--peso-titulos); }
.guia__franja { background: var(--franja); padding: var(--e-6); border-radius: var(--radio); }
.guia__etiquetas { display: flex; gap: var(--e-2); flex-wrap: wrap; }

.guia__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }

.guia__nota { margin-top: var(--e-3); font-size: var(--t-xs); }
.guia__iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--e-3); }
.guia__icono { display: grid; justify-items: center; gap: var(--e-2); padding: var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-sm); font-size: var(--t-xs); }
.guia__icono svg { width: 28px; height: 28px; color: var(--enlace); }

@media (max-width: 67.5em) {
  .menu--abierto .menu__cita, .menu--abierto .menu__idioma { display: block; }
  .menu--abierto .menu__cita { border-top: 1px solid var(--borde); margin-top: var(--e-2); padding-top: var(--e-2); }
}
@media (max-width: 45em) {
  .guia__fotos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SITIO (M2): portada completa, Sobre mí, Contacto y Colegas
   ========================================================================== */
.seccion--tras-tipos { padding-top: var(--e-16); }
.presentacion__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.presentacion--invertida { grid-template-columns: 7fr 5fr; }
.pagina__titulo { font-size: var(--t-3xl); }
.pagina__titulo em { display: block; }
.texto-largo p { max-width: 62ch; }
.datos { list-style: none; padding: 0; margin: var(--e-6) 0; display: grid; gap: var(--e-3); }
.datos li { display: flex; gap: var(--e-3); align-items: center; }
.datos svg { width: 22px; height: 22px; color: var(--enlace); flex-shrink: 0; }

/* Llamado final sin el bloque del boletín */
.cta--sola { grid-template-columns: 1fr; }
.cta--sola > div { position: relative; max-width: 720px; }
.antetitulo--sobre-franja { color: var(--acento-claro); }

/* Cabecera de página y medios de contacto */
.cabecera-pagina__intro { max-width: 640px; font-size: var(--t-lg); color: var(--texto-suave); }

.medio { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.medio h2 { font-family: var(--fuente-texto); font-size: var(--t-lg); font-weight: 600; margin: var(--e-2) 0 0; }
.medio p { margin: 0 0 var(--e-2); font-size: var(--t-sm); color: var(--texto-suave); }
.medio a:not(.boton) { font-weight: 600; overflow-wrap: anywhere; }
.medio__icono { width: 28px; height: 28px; color: var(--primario); }
.medio--destacado .medio__icono { color: var(--whatsapp-texto); }

/* Pasos de la cita virtual */
.pasos { list-style: none; padding: 0; margin: var(--e-8) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
.paso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-6); }
.paso h3 { font-size: var(--t-lg); margin: var(--e-3) 0 var(--e-2); }
.paso p { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }
.paso__numero { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primario); color: var(--sobre-primario); font-family: var(--fuente-titulos); font-weight: 700; font-size: var(--t-lg); }
.nota-pagina { margin-top: var(--e-6); font-size: var(--t-sm); color: var(--texto-suave); max-width: 640px; }

@media (max-width: 45em) {
  .presentacion--invertida, .pasos, .servicio { grid-template-columns: minmax(0, 1fr); }
  .contacto, .formulario__fila { grid-template-columns: 1fr; }
  .contacto__formulario { padding: var(--e-6) var(--e-4); }
  .presentacion--invertida .presentacion__marco { order: -1; }
}

/* ==========================================================================
   PÁGINAS LEGALES Y AVISO DE COOKIES (ADR 0009)
   ========================================================================== */
.legal__contenedor { max-width: 800px; }
.legal h2 { font-size: var(--t-xl); margin-top: var(--e-12); }
.legal ul { padding-left: var(--e-6); display: grid; gap: var(--e-2); }
/* Un correo largo (privacy@…) se corta en vez de ensanchar la página a 320 px con letra grande
   (bug v1-m9-resumen-legal-desborda). */
.legal p, .legal li, .legal td { overflow-wrap: anywhere; }
.legal li { min-width: 0; }
.legal__fecha { font-size: var(--t-sm); color: var(--texto-suave); }
.legal__intro { font-size: var(--t-lg); }
.legal__tabla { overflow-x: auto; margin: var(--e-4) 0; border: 1px solid var(--borde); border-radius: var(--radio-sm); }
.legal table, .guia table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.legal th, .legal td, .guia th, .guia td { text-align: left; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borde); vertical-align: top; }
.legal th, .guia th { background: var(--fondo-alterno); font-weight: 600; }
.legal tr:last-child td, .guia tr:last-child td { border-bottom: 0; }
.legal__nombre { font-family: var(--fuente-codigo); white-space: nowrap; }
.legal__contacto { margin-top: var(--e-12); padding-top: var(--e-6); border-top: 1px solid var(--borde); overflow-wrap: anywhere; }
.legal__otros { display: flex; gap: var(--e-2) var(--e-6); flex-wrap: wrap; font-size: var(--t-sm); }
.legal__otros span { color: var(--texto-suave); }

.aviso-cookies {
  position: fixed; left: var(--e-4); right: var(--e-4); bottom: var(--e-4); z-index: 120;
  max-width: 960px; margin-inline: auto;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-fuerte); padding: var(--e-6);
  display: flex; gap: var(--e-6); align-items: center;
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies__titulo { font-family: var(--fuente-texto); font-size: var(--t-base); font-weight: 600; margin: 0 0 var(--e-1); }
.aviso-cookies p { margin: 0; font-size: var(--t-sm); }
.aviso-cookies__botones { display: flex; gap: var(--e-3); flex-shrink: 0; }
.aviso-cookies__botones .boton { min-width: 120px; justify-content: center; }
/* Casillas por categoría (ADR 0024): aparecen con «Elegir». */
.aviso-cookies__categorias { border: 0; padding: 0; margin: var(--e-4) 0 0; display: grid; gap: var(--e-3); }
.aviso-cookies__categorias[hidden] { display: none; }
.aviso-cookies__casilla { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--t-sm); cursor: pointer; }
.aviso-cookies__casilla input { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; flex-shrink: 0; accent-color: var(--primario); }

@media (max-width: 45em) {
  .aviso-cookies { flex-direction: column; align-items: stretch; padding: var(--e-4); gap: var(--e-4); }
  .aviso-cookies__botones { flex-wrap: wrap; }
  .aviso-cookies__botones .boton { flex: 1 1 8rem; min-width: 0; }
  /* Tabla de cookies como fichas: cada celda con su encabezado */
  .legal thead, .guia thead { display: none; }
  .legal tr, .guia tr { display: block; padding: var(--e-3) 0; border-bottom: 1px solid var(--borde); }
  .legal td, .guia td { display: block; border: 0; padding: var(--e-1) var(--e-4); }
  .legal td::before, .guia td::before { content: attr(data-titulo) ": "; font-weight: 600; font-family: var(--fuente-texto); }
  .legal__nombre { white-space: normal; overflow-wrap: anywhere; }
}
.legal p a, .aviso-cookies p a { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   PANEL: marco de /admin
   ========================================================================== */
.panel__barra { background: var(--franja); color: var(--sobre-franja); }
.panel__barra-contenido { padding-block: var(--e-4); }
.panel__marca { font-family: var(--fuente-titulos); font-size: var(--t-lg); font-weight: 600; }
.panel__contenedor { max-width: 960px; }
.panel__contenedor h1 { font-size: var(--t-3xl); }
.panel__intro { color: var(--texto-suave); }
.panel__mensaje { padding: var(--e-4); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-sm); background: var(--superficie); }
.panel__mensaje--exito { border-left-color: var(--primario); }
.panel__mensaje--error { border-left-color: var(--error); }
.panel__tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: var(--e-4) 0 var(--e-8); }
.panel__tabla th, .panel__tabla td { text-align: left; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--borde); }
.panel__formulario { max-width: 420px; margin-top: var(--e-6); }
.panel__formulario label { font-weight: 600; font-size: var(--t-sm); }
.panel__formulario .boton { justify-self: start; }

/* PANEL: menú, listas y formularios */
/* Menú lateral agrupado por etapa del negocio (M11, entrega 4B-5a, ADR 0046) */
.panel__barra-contenido { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding-inline: var(--e-4); }
.panel__boton-menu { display: none; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border: 1px solid var(--sobre-franja); border-radius: var(--radio-sm); background: none; color: var(--sobre-franja); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.panel__practica { padding: var(--e-2) var(--e-4); background: var(--primario); color: var(--sobre-primario); font-size: var(--t-sm); text-align: center; }
.panel__marco { display: flex; align-items: flex-start; }
.panel__principal { flex: 1 1 0; min-width: 0; }
.panel__lateral { flex: 0 0 15rem; width: 15rem; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; box-sizing: border-box; padding: var(--e-4); background: var(--franja); color: var(--sobre-franja); font-size: var(--t-sm); }
.panel__lateral :focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 2px; }
.panel__grupo { border-bottom: 1px solid color-mix(in srgb, var(--sobre-franja) 22%, transparent); }
.panel__grupo > summary { display: flex; align-items: center; justify-content: space-between; padding: var(--e-3) var(--e-2); font-weight: 700; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; }
.panel__grupo > summary::-webkit-details-marker { display: none; }
.panel__grupo > summary::after { content: "▸"; transition: transform .15s; }
.panel__grupo[open] > summary::after { transform: rotate(90deg); }
.panel__grupo ul { list-style: none; margin: 0 0 var(--e-2); padding: 0; }
.panel__lateral a, .panel__salir button { display: block; width: 100%; box-sizing: border-box; padding: var(--e-2) var(--e-3); border: 0; border-radius: var(--radio-sm); background: none; color: var(--sobre-franja); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.panel__lateral a:hover, .panel__salir button:hover { background: color-mix(in srgb, var(--sobre-franja) 14%, transparent); }
.panel__lateral a[aria-current="page"] { background: color-mix(in srgb, var(--sobre-franja) 22%, transparent); font-weight: 700; }
.panel__grupo--persona { border-top: 1px solid color-mix(in srgb, var(--sobre-franja) 22%, transparent); margin-top: var(--e-4); border-bottom: 0; }
.panel__grupo--persona > summary { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }
/* Inicio de la barra lateral y los números de pendientes (M11, entrega 4B-5b) */
.panel__lateral a.panel__inicio { margin-bottom: var(--e-2); font-weight: 700; }
.panel__lateral a:has(.panel__numero) { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.panel__numero { flex: none; min-width: 1.5em; padding: 0 var(--e-2); border-radius: 999px; background: var(--primario); color: var(--sobre-primario); font-size: var(--t-xs); font-weight: 700; line-height: 1.6; text-align: center; }
/* Página de Inicio: lo que necesita atención */
.inicio__grupo { margin: 0 0 var(--e-6); }
.inicio__grupo h3 { margin: 0 0 var(--e-2); font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.inicio__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.inicio__lista a { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-sm); text-decoration: none; }
.inicio__lista a:hover { border-color: var(--acento-texto); }
.inicio__atajos { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: var(--e-6) 0; }
@media (max-width: 56.25em) {
  .panel__marco { display: block; }
  .panel__lateral { position: static; width: auto; height: auto; }
  .panel--js .panel__boton-menu { display: inline-flex; }
  .panel--js .panel__lateral { display: none; }
  .panel--js .panel__lateral--abierto { display: block; }
}
.panel__nota { color: var(--texto-suave); font-size: var(--t-sm); }
/* Filtro y marca «Posible spam» en Panel › Mensajes (ADR 0039) */
.panel__filtros { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin: var(--e-4) 0; }
.panel__filtros a { font-weight: 600; }
.panel__filtros a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.panel__spam { margin: 0 0 var(--e-2); font-size: var(--t-sm); color: var(--texto-suave); }
.panel__mensaje a, .panel__intro a, .panel__ayuda a { text-decoration: underline; text-underline-offset: 3px; }
.panel__ayuda { color: var(--texto-suave); font-size: var(--t-sm); }
.panel__error { color: var(--error); font-size: var(--t-sm); font-weight: 600; }
.panel__formulario select, .panel__ficha input:not([type="checkbox"]), .panel__ficha select, .panel__ficha textarea {
  width: 100%; padding: .6rem .8rem; border: 1px solid var(--borde-campo); border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto); font-size: var(--t-sm);
}
.panel__formulario input[aria-invalid="true"], .panel__ficha [aria-invalid="true"] { border-color: var(--error); }
.panel__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-3); margin-bottom: var(--e-4); }

.panel__campo label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--e-1); }
/* position: relative: los textos ocultos (oculto-visual) de la tabla quedan dentro de la zona que se desliza. */
.panel__tabla-desliza { position: relative; overflow-x: auto; }
.panel__paginas { display: flex; gap: var(--e-4); align-items: center; justify-content: center; margin-block: var(--e-6); }
.panel__ficha { display: grid; gap: var(--e-6); }

.panel__ficha fieldset { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: var(--e-4); margin: 0; display: grid; gap: var(--e-4); }
.panel__ficha legend { font-family: var(--fuente-titulos); font-size: var(--t-lg); font-weight: 600; padding-inline: var(--e-2); }
.panel__ficha .boton { justify-self: start; }
.panel__campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-4); }
.panel__campo { display: grid; gap: var(--e-1); align-content: start; }

.panel__casilla { display: flex; gap: var(--e-2); align-items: center; font-size: var(--t-sm); }
.panel__casilla input { width: 1.1rem; height: 1.1rem; accent-color: var(--primario); }

.panel__seccion { margin-top: var(--e-12); }

.panel__peligro { border-top: 1px solid var(--borde); padding-top: var(--e-6); }
/* PANEL: comentarios */
.panel__acciones-fila { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-block: var(--e-4) var(--e-6); }
.panel__preguntas { display: grid; gap: var(--e-6); }
.panel__pregunta { padding: var(--e-6); background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: var(--radio); }
.panel__pregunta--pendiente { border-left-color: var(--acento); }
.panel__pregunta--aprobado { border-left-color: var(--primario); }
.panel__pregunta--sitio { background: var(--fondo-alterno); }
.panel__pregunta p { margin: 0 0 var(--e-2); overflow-wrap: anywhere; }
.panel__pregunta p a { text-decoration: underline; text-underline-offset: 2px; }
.panel__pregunta-texto { margin: var(--e-3) 0 var(--e-4); padding-left: var(--e-4); border-left: 3px solid var(--borde); overflow-wrap: anywhere; }
.panel__pregunta .panel__ficha { display: grid; gap: var(--e-2); }
.panel__pregunta .panel__acciones-fila { margin-block: var(--e-2) 0; }
.panel__eliminar { margin-top: var(--e-3); font-size: var(--t-sm); }
.panel__eliminar summary { cursor: pointer; color: var(--texto-suave); }

/* ==========================================================================
   LISTADOS Y PAGINACIÓN
   ========================================================================== */
.seccion--listado { padding-block: 0 var(--e-16); }
.seccion--listado .pagina__titulo { margin-bottom: var(--e-2); }

.campo select option, .campo select optgroup { color: var(--texto); background: var(--fondo); }

.aviso-listado { overflow-wrap: anywhere; padding: var(--e-4) var(--e-6); border-left: 4px solid var(--acento); background: var(--fondo-alterno); border-radius: var(--radio-sm); margin-block: var(--e-4); }
.aviso-listado--vacio { text-align: center; border-left: 0; padding: var(--e-12) var(--e-6); }
.aviso-listado--vacio .acciones { justify-content: center; }
.paginacion { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center; align-items: center; margin-top: var(--e-12); }
.paginacion a, .paginacion span { min-width: 44px; min-height: 44px; padding: 0 var(--e-3); display: inline-grid; place-items: center; border-radius: var(--radio-sm); border: 1px solid var(--borde); color: var(--texto); font-weight: 600; font-size: var(--t-sm); }
.paginacion a:hover { border-color: var(--primario); color: var(--primario); }
.paginacion [aria-current="page"] { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }

/* Visor de fotos (módulo encendible): <dialog> a pantalla completa, oscuro en los dos temas. */
html.visor-abierto { overflow: hidden; }
.visor { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--visor-fondo); color: var(--blanco); overflow: hidden; }
.visor[open] { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr; align-items: center; }
.visor::backdrop { background: transparent; }
.visor__contador { grid-column: 1 / -1; grid-row: 1; margin: 0; padding: var(--e-4) var(--e-16) var(--e-2); text-align: center; font-size: .9rem; letter-spacing: .04em; color: var(--blanco-85); }
.visor__figura { grid-column: 1 / -1; grid-row: 2; margin: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); padding: 0 var(--e-16) var(--e-6); touch-action: pan-y; }
.visor__imagen { max-width: 100%; max-height: calc(100% - 2.5rem); width: auto; height: auto; object-fit: contain; border-radius: var(--radio-sm); box-shadow: var(--sombra-fuerte); animation: visor-entrar 220ms ease both; user-select: none; -webkit-user-drag: none; }
.visor__imagen[data-direccion="siguiente"] { animation-name: visor-desde-derecha; }
.visor__imagen[data-direccion="anterior"] { animation-name: visor-desde-izquierda; }
.visor__pie { max-width: 60ch; margin: 0; text-align: center; font-size: .875rem; color: var(--blanco-85); }
.visor__boton { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid var(--blanco-20); border-radius: 50%; background: var(--blanco-12); color: var(--blanco); cursor: pointer; transition: background var(--transicion); z-index: 1; }
.visor__boton:hover { background: var(--blanco-20); }
.visor__boton:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; }
.visor__boton svg { width: 1.5rem; height: 1.5rem; }
.visor__cerrar { position: absolute; top: var(--e-3); right: var(--e-3); }
.visor__anterior, .visor__siguiente { position: absolute; top: 50%; transform: translateY(-50%); }
.visor__anterior { left: var(--e-3); }
.visor__siguiente { right: var(--e-3); }
.visor--una .visor__anterior, .visor--una .visor__siguiente, .visor--una .visor__contador { visibility: hidden; }
@keyframes visor-entrar { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes visor-desde-derecha { from { opacity: 0; transform: translateX(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes visor-desde-izquierda { from { opacity: 0; transform: translateX(-2.5rem); } to { opacity: 1; transform: none; } }
/* En el teléfono las flechas bajan y la foto usa todo el ancho; también se pasa deslizando el dedo. */
@media (max-width: 40em) {
  .visor__figura { padding: 0 var(--e-2) 5rem; }
  .visor__imagen { max-height: calc(100% - 2rem); border-radius: 0; }
  .visor__anterior, .visor__siguiente { top: auto; bottom: var(--e-4); transform: none; }
  .visor__anterior { left: calc(50% - 3.75rem); }
  .visor__siguiente { right: calc(50% - 3.75rem); }
}

/* ==========================================================================
   GUÍAS
   ========================================================================== */
.guia .cabecera-pagina__intro { max-width: 760px; }
.guia__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--e-12); align-items: start; margin-top: var(--e-12); }
.guia__indice { position: sticky; top: 100px; padding: var(--e-6); background: var(--fondo-alterno); border-radius: var(--radio-sm); }
.guia__indice h2 { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.guia__indice ol { margin: 0; padding-left: var(--e-4); display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.guia__indice a:hover, .guia__otra a, .guia__indice a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.guia__texto { max-width: 760px; }
.guia__seccion { scroll-margin-top: 100px; margin-bottom: var(--e-12); }
.guia__seccion h2 { font-size: var(--t-xl); margin-bottom: var(--e-4); }
.guia__seccion .planos__lista { margin-bottom: var(--e-4); }
.guia__seccion .planos__lista li { font-size: var(--t-base); }
.guia__pasos { padding-left: var(--e-6); display: grid; gap: var(--e-3); margin: 0 0 var(--e-4); }
.guia__pasos li::marker { color: var(--acento); font-weight: 600; }
.guia__concepto { font-weight: 600; }
.guia__nota { font-size: var(--t-sm); color: var(--texto-suave); }
.guia__otra { margin-top: var(--e-6); font-weight: 600; }
@media (max-width: 56.25em) {
  .guia__cuerpo { grid-template-columns: 1fr; gap: var(--e-8); }
  .guia__indice { position: static; }
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.tarjeta__resumen { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }
.tarjeta--articulo .tarjeta__titulo { font-family: var(--fuente-titulos); font-size: var(--t-xl); font-weight: var(--peso-titulos); }
.articulo__contenedor { max-width: 760px; }
.articulo__fecha { font-size: var(--t-sm); color: var(--texto-suave); margin-bottom: var(--e-8); }
.articulo__foto { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio); margin-bottom: var(--e-8); }
.articulo__cuerpo { font-size: var(--t-lg); }
.articulo__cuerpo h2 { font-size: var(--t-2xl); margin: var(--e-12) 0 var(--e-4); }
.articulo__cuerpo h3 { font-size: var(--t-xl); margin: var(--e-8) 0 var(--e-3); }
.articulo__cuerpo ul, .articulo__cuerpo ol { padding-left: var(--e-6); display: grid; gap: var(--e-2); margin: 0 0 var(--e-6); }
.articulo__cuerpo li::marker { color: var(--acento); }
.articulo__cuerpo a, .guia__articulos a { text-decoration: underline; text-underline-offset: 2px; }
.articulo__llamado { margin-top: var(--e-12); padding: var(--e-6); background: var(--fondo-alterno); border-radius: var(--radio); display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; justify-content: space-between; }
.articulo__llamado p { margin: 0; font-weight: 600; }
/* Me gusta y comentarios de los lectores. */
.me-gusta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-8); }
.me-gusta__boton { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: var(--e-2) var(--e-4); border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; }
.me-gusta__boton svg { width: 20px; height: 20px; }
.me-gusta__boton:hover { border-color: var(--primario); }
.me-gusta__boton[aria-pressed="true"] { color: var(--me-gusta-activo); border-color: var(--me-gusta-activo); }
.me-gusta__boton[aria-pressed="true"] svg { fill: currentColor; }
.me-gusta__total { font-size: var(--t-sm); color: var(--texto-suave); }
/* Comentarios en conversación. */
.articulo__datos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.articulo__datos .articulo__fecha { margin: 0; }
.articulo__datos .me-gusta { margin-top: 0; }
.comentarios { margin-top: var(--e-12); }
.comentarios h2 { font-size: var(--t-2xl); margin-bottom: var(--e-6); }
.comentarios__lista { list-style: none; padding: 0; margin: 0 0 var(--e-8); display: grid; gap: var(--e-4); }
.comentario { padding: var(--e-4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); scroll-margin-top: var(--e-24); }
.comentario--sitio { background: var(--fondo-alterno); border-left: 4px solid var(--primario); }
.comentario:target { outline: 2px solid var(--foco); outline-offset: 2px; }
.comentario__autor { margin: 0 0 var(--e-2); font-size: var(--t-sm); color: var(--texto-suave); }
.comentario__autor strong { color: var(--texto); }
.comentario__insignia { display: inline-block; padding: 0 var(--e-2); border: 1px solid var(--primario); border-radius: 999px; font-size: var(--t-xs); font-weight: 600; color: var(--texto); }
.comentario__cita { display: block; margin: 0 0 var(--e-2); padding-left: var(--e-3); border-left: 3px solid var(--borde); font-size: var(--t-sm); color: var(--texto-suave); text-decoration: none; overflow-wrap: anywhere; }
.comentario__cita:hover { color: var(--texto); }
.comentario__texto { margin: 0; overflow-wrap: anywhere; }
.comentario__responder { display: inline-block; margin-top: var(--e-2); padding-block: var(--e-2); font-size: var(--t-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.comentarios__vacio { color: var(--texto-suave); }
.comentarios__subtitulo { font-size: var(--t-xl); margin: 0 0 var(--e-2); }
.comentarios__respondiendo { margin: 0 0 var(--e-4); padding-left: var(--e-3); border-left: 3px solid var(--acento); font-size: var(--t-sm); color: var(--texto-suave); overflow-wrap: anywhere; }
.comentarios__respondiendo a, .comentarios__formulario .formulario__ayuda a { text-decoration: underline; text-underline-offset: 2px; }
.comentarios__formulario { max-width: none; scroll-margin-top: var(--e-24); }
.guia__articulos { margin-bottom: var(--e-12); }
.guia__articulos h2 { font-size: var(--t-xl); margin-bottom: var(--e-3); }
.guia__articulos ul { padding-left: var(--e-6); display: grid; gap: var(--e-2); }
.panel__vista-previa { border: 1px dashed var(--borde); border-radius: var(--radio); padding: var(--e-6); }
.panel__foto-blog { display: block; border-radius: var(--radio-sm); margin-bottom: var(--e-3); object-fit: cover; }

/* ---------- Boletín mensual ---------- */
.boletin__titulo { font-size: var(--t-xl); margin: 0 0 var(--e-2); }
.boletin__texto { margin: 0 0 var(--e-4); color: var(--texto-suave); }
.boletin__formulario { gap: var(--e-3); }
.boletin__fila { display: flex; gap: var(--e-2); }
.boletin__fila input { flex: 1; min-width: 0; }
.boletin__fila .boton { flex-shrink: 0; }
.boletin__acepto { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-xs); }
.boletin__acepto input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--primario); }
.boletin__acepto a { text-decoration: underline; text-underline-offset: 2px; }
.boletin--articulo { margin-top: var(--e-8); padding: var(--e-6); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
/* En el pie, sobre la franja oscura: título y texto a la izquierda, formulario a la derecha */
.boletin--pie { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: var(--e-8); align-items: start; border-top: 1px solid var(--blanco-12); margin-top: var(--e-12); padding-top: var(--e-8); }
.boletin--pie > :not(form) { grid-column: 1; }
.boletin--pie > form { grid-column: 2; grid-row: 1 / span 3; }
.boletin--pie .boletin__titulo { color: var(--blanco); font-size: var(--t-lg); }
.boletin--pie .boletin__texto { color: var(--crema-80); margin: 0; }
.boletin--pie .formulario__campo label { color: var(--sobre-franja); }
.boletin--pie .boletin__fila input { border-color: var(--blanco-20); background: var(--blanco-06); color: var(--blanco); }
.boletin--pie .boletin__acepto { color: var(--crema-80); }
.pie .boletin--pie .boletin__acepto a { color: var(--sobre-franja); }
.boletin--pie .formulario__error { color: var(--error-sobre-franja); }
.boletin--pie [aria-invalid="true"] { border-color: var(--error-sobre-franja); }
.boletin--pie + .pie__legal { margin-top: var(--e-8); }
/* Página /boletin */
.boletin-pagina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-12); align-items: start; }
.boletin-pagina__subtitulo { font-size: var(--t-xl); margin-top: var(--e-8); }
.boletin-pagina__caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-8); scroll-margin-top: var(--e-24); }
.lista-check { list-style: none; padding: 0; margin: 0 0 var(--e-6); display: grid; gap: var(--e-3); }
.lista-check li { display: flex; gap: var(--e-3); align-items: flex-start; }
.lista-check svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--acento-texto); }
@media (max-width: 56.25em) {
  .boletin-pagina { grid-template-columns: 1fr; gap: var(--e-6); }
  .boletin--pie { grid-template-columns: 1fr; }
  .boletin--pie > form { grid-column: 1; grid-row: auto; margin-top: var(--e-4); }
}
@media (max-width: 30em) {
  .boletin__fila { flex-direction: column; }
  .boletin-pagina__caja { padding: var(--e-6); }
}

/* ---------- Mi cuenta ---------- */
.cuenta__columnas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e-12); align-items: start; margin-top: var(--e-6); }
.cuenta__caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-8); }
.cuenta__caja--angosta { max-width: 460px; margin-top: var(--e-6); }
.cuenta__google { justify-content: center; }
.cuenta__google svg { width: 20px; height: 20px; }
.cuenta__separador { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-6) 0; font-size: var(--t-xs); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .08em; }
.cuenta__separador::before, .cuenta__separador::after { content: ""; flex: 1; border-top: 1px solid var(--borde); }
.cuenta__nota { margin-top: var(--e-4); }
.cuenta__referencia { display: block; margin-top: var(--e-2); font-size: var(--t-xs); }
.cuenta__subtitulo { font-size: var(--t-lg); margin: var(--e-2) 0 0; }
.cuenta__codigo { font-size: var(--t-lg); letter-spacing: .3em; max-width: 12ch; }
.cuenta__acciones { display: grid; gap: var(--e-4); align-content: start; }
.cuenta__acciones p { margin: 0; }
.cuenta__acciones a { text-decoration: underline; text-underline-offset: 2px; }
.cuenta__borrar summary { cursor: pointer; font-weight: 600; color: var(--error); }
.cuenta__borrar[open] summary { margin-bottom: var(--e-2); }
@media (max-width: 56.25em) {
  .cuenta__columnas { grid-template-columns: 1fr; gap: var(--e-8); }
  .cuenta__caja { padding: var(--e-6) var(--e-4); }
}

/* ==========================================================================
   MÓVIL, TECLADO Y TEXTO AMPLIADO
   ========================================================================== */

/* Pantallas angostas: logo y botones más pequeños para que el encabezado quepa a 360 px. */
@media (max-width: 25em) {
  .encabezado__fila { gap: var(--e-2); }
  .logo .logo__compacto { height: 40px; }
  /* Con la letra grande dos columnas de servicios no caben (docs/bugs/v1-m3-servicios-desbordan-con-letra-grande.md). */
  .tipos { grid-template-columns: minmax(0, 1fr); }
  /* Con la letra grande dos cifras por fila no caben a 320 px (docs/bugs/v1-desborde-320-con-letra-grande.md). */
  .cifras__rejilla { grid-template-columns: minmax(0, 1fr); }
  .herramientas { gap: var(--e-1); }
  .herramientas .icono-boton { width: 36px; height: 36px; }
}
/* A 340 px o menos (o con la letra grande) el modo oscuro pasa al menú móvil. */
@media (max-width: 21.25em) {
  .herramientas .icono-tema { display: none; }
  .menu--abierto .menu__tema { display: block; }
}

/* Contacto en una columna hasta 900 px, para que no se salga a 768. */
@media (max-width: 56.25em) {
  .contacto { grid-template-columns: minmax(0, 1fr); }
}

/* Con la letra grande o en el teléfono, los botones pueden partir su texto. */
@media (max-width: 45em) {
  .boton { white-space: normal; text-align: center; }
}

/* Movimiento reducido: sin transiciones, desplazamientos ni scroll suave. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important; transition-delay: 0s !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .boton:hover, .tarjeta:hover, .whatsapp-flotante:hover { transform: none; }
}

/* Aviso de cookies: con zoom grande tiene scroll propio y no tapa toda la pantalla. */
.aviso-cookies { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }

/* Cuestionario de sitio web (ADR 0026, maqueta aprobada): un paso a la vez con JavaScript, todos
   seguidos sin él. Lista de pasos al lado en la computadora, encima en el teléfono. */
.cuestionario__cabecera { max-width: 46rem; margin-bottom: var(--e-8); }
.cuestionario__cabecera h1 { font-size: var(--t-3xl); margin: 0 0 var(--e-3); overflow-wrap: anywhere; }
.cuestionario__intro { font-size: var(--t-lg); color: var(--texto-suave); margin: 0 0 var(--e-2); }
.cuestionario__nota { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; }
.cuestionario__aviso { max-width: 46rem; }
.cuestionario__marco { display: flex; flex-wrap: wrap; gap: var(--e-8); align-items: flex-start; }
.cuestionario__pasos { flex: 1 1 15rem; max-width: 18rem; min-width: 0; }
.cuestionario__pasos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.cuestionario__paso-boton {
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3); border: 1.5px solid transparent; border-radius: var(--radio);
  background: transparent; color: var(--texto-suave); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.cuestionario__paso-boton:hover { color: var(--texto); }
.cuestionario__paso-boton[aria-current="step"] { border-color: var(--texto); background: var(--superficie); color: var(--texto); }
.cuestionario__paso-boton--hecho { color: var(--texto); }
.cuestionario__numero {
  flex: none; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--borde); color: var(--texto); font-family: var(--fuente-titulos); font-size: var(--t-sm); font-weight: 700;
}
.cuestionario__paso-boton[aria-current="step"] .cuestionario__numero { background: var(--primario); color: var(--sobre-primario); }
.cuestionario__paso-boton--hecho .cuestionario__numero { background: var(--franja); color: var(--sobre-franja); }
.cuestionario__tarjeta {
  flex: 999 1 32rem; min-width: 0; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: var(--e-8); box-shadow: var(--sombra);
}
.cuestionario__avance { margin-bottom: var(--e-6); }
.cuestionario__avance-texto { margin: 0 0 var(--e-2); font-size: var(--t-sm); font-weight: 600; color: var(--texto-suave); }
.cuestionario__barra { height: 6px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.cuestionario__barra-relleno { height: 100%; width: 0; border-radius: 999px; background: var(--primario); transition: width var(--transicion); }
.cuestionario__paso + .cuestionario__paso { margin-top: var(--e-12); padding-top: var(--e-8); border-top: 1px solid var(--borde); }
.cuestionario__formulario--pasos .cuestionario__paso + .cuestionario__paso { margin-top: 0; padding-top: 0; border-top: 0; }
.cuestionario__titulo-paso { font-size: var(--t-xl); margin: 0 0 var(--e-2); overflow-wrap: anywhere; }
.cuestionario__titulo-paso:focus { outline: none; }
.cuestionario__titulo-paso:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.cuestionario__titulo-numero { color: var(--acento-texto); }
.cuestionario__paso-intro { margin: 0 0 var(--e-6); color: var(--texto-suave); }
.cuestionario__campos { display: grid; gap: var(--e-6); }
.cuestionario__grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--e-2); }
.cuestionario__grupo legend { font-size: var(--t-sm); font-weight: 600; padding: 0; margin-bottom: var(--e-2); }
.cuestionario__opciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cuestionario__opcion {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: var(--e-2) var(--e-4);
  border: 1.5px solid var(--borde); border-radius: 999px; background: var(--fondo); font-size: var(--t-sm); cursor: pointer; max-width: 100%;
}
.cuestionario__opcion:has(input:checked) { border-color: var(--texto); background: var(--fondo-alterno); }
.cuestionario__opcion input, .cuestionario__casilla input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--marca); }
.cuestionario__grupo[aria-invalid="true"] .cuestionario__opcion { border-color: var(--error); }
.cuestionario__casilla { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--t-sm); cursor: pointer; }
.cuestionario__casilla input { margin-top: 2px; }
.cuestionario__formulario input[type="file"] { padding: var(--e-4); border-style: dashed; background: var(--fondo-alterno); }
.cuestionario__archivos { margin: 0; padding-left: var(--e-6); font-size: var(--t-sm); overflow-wrap: anywhere; }
.cuestionario__archivos:empty { display: none; }
.cuestionario__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: space-between; margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--borde); }
.cuestionario__botones [data-siguiente], .cuestionario__botones [data-enviar] { margin-left: auto; }
/* .boton pone display: inline-flex y le gana a [hidden] (bug v1-m5b-botones-ocultos-visibles). */
.cuestionario__botones [hidden] { display: none; }
.cuestionario__formulario textarea[data-crecer] { min-height: 9rem; max-height: 60vh; overflow-y: auto; }
.cuestionario__salir {
  width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: var(--e-6);
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-fuerte);
}
.cuestionario__salir::backdrop { background: var(--velo-hero-2); }
.cuestionario__salir-titulo { font-size: var(--t-xl); margin: 0 0 var(--e-2); overflow-wrap: anywhere; }
.cuestionario__salir p { margin: 0 0 var(--e-6); color: var(--texto-suave); }
.cuestionario__salir-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: flex-end; }
.cuestionario__borrador { margin: var(--e-3) 0 0; font-size: var(--t-xs); color: var(--texto-suave); text-align: right; }
@media (prefers-color-scheme: dark) {
  .cuestionario__opcion input, .cuestionario__casilla input { accent-color: var(--primario); }
}
@media (max-width: 45em) {
  .cuestionario__pasos { max-width: none; flex-basis: 100%; }
  .cuestionario__pasos ol { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1); }
  .cuestionario__pasos li { flex: 0 0 44px; }
  .cuestionario__paso-boton { justify-content: center; padding: var(--e-1); }
  .cuestionario__paso-boton span:not(.cuestionario__numero) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cuestionario__tarjeta { padding: var(--e-6) var(--e-4); }
}

/* Panel › Cotizaciones. */
.panel__filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-4) 0; }
.panel__filtros a { padding: var(--e-1) var(--e-3); border: 1px solid var(--borde); border-radius: 999px; text-decoration: none; font-size: var(--t-sm); }
.panel__filtros a[aria-current="page"] { background: var(--franja); color: var(--sobre-franja); border-color: var(--franja); }
.panel__estado { display: inline-block; padding: 2px var(--e-2); border-radius: 999px; font-size: var(--t-xs); font-weight: 700; background: var(--fondo-alterno); border: 1px solid var(--borde); }
.panel__estado--nueva { background: var(--primario); color: var(--sobre-primario); border-color: var(--primario); }
.panel__tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--e-4); margin: var(--e-6) 0; }
.panel__tarjeta { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-4); background: var(--superficie); min-width: 0; }
.panel__tarjeta h2 { font-size: var(--t-sm); letter-spacing: var(--espaciado-mayus); text-transform: uppercase; color: var(--acento-texto); margin: 0 0 var(--e-3); }
.panel__datos { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--e-2) var(--e-3); font-size: var(--t-sm); }
.panel__datos dt { color: var(--texto-suave); }
.panel__datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.panel__galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--e-3); list-style: none; padding: 0; margin: 0; }
.panel__galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-sm); background: var(--fondo-alterno); display: block; }
.panel__galeria-tipo { aspect-ratio: 1; border-radius: var(--radio-sm); background: var(--fondo-alterno); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.panel__galeria li { font-size: var(--t-xs); overflow-wrap: anywhere; }
.panel__galeria a { text-decoration: underline; text-underline-offset: 2px; }
.panel__paquete { padding: var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); margin: var(--e-4) 0; }
.panel__paquete h2 { margin: 0 0 var(--e-2); font-size: var(--t-lg); }
.panel__paquete [data-paquete][aria-disabled="true"] { opacity: .6; pointer-events: none; }
.panel__paquete [data-paquete-estado]:empty { display: none; }
.panel__contexto summary { cursor: pointer; font-weight: 600; margin-top: var(--e-2); }
.panel__resumen { width: 100%; min-height: 14rem; font-family: var(--fuente-codigo); font-size: var(--t-xs); padding: var(--e-3); border: 1px solid var(--borde-campo); border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto); }
.panel__enlace-nuevo { padding: var(--e-4); border: 2px solid var(--primario); border-radius: var(--radio); background: var(--superficie); margin: var(--e-4) 0; }
.panel__enlace-nuevo input { width: 100%; font-family: var(--fuente-codigo); }
.panel__enlace-campo { width: 100%; min-width: 14rem; padding: var(--e-1) var(--e-2); border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto); font-family: var(--fuente-codigo); font-size: var(--t-xs); }
.panel__estimacion td:last-child, .panel__estimacion th:last-child { text-align: right; white-space: nowrap; }
.cuestionario__subtitulo { margin: 0 0 calc(-1 * var(--e-3)); font-size: var(--t-sm); font-weight: 700; }
.panel__colores { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.panel__color { display: inline-flex; align-items: center; gap: var(--e-1); font-family: var(--fuente-codigo); font-size: var(--t-xs); }
.panel__muestra { width: 20px; height: 20px; border-radius: var(--radio-sm); border: 1px solid var(--borde-campo); flex: none; }

/* Panel › Prospectos (M11, entrega 1A, doc 23). */
.panel__cifra { margin: 0; font-family: var(--fuente-titulos); font-size: var(--t-2xl); font-weight: 700; overflow-wrap: anywhere; }
.panel__alertas { padding: var(--e-4); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-sm); background: var(--superficie); margin: var(--e-6) 0; }
.panel__alertas h2 { margin: 0 0 var(--e-2); font-size: var(--t-lg); }
.panel__alertas ul, .panel__alertas-ficha { margin: 0; padding-left: var(--e-6); font-size: var(--t-sm); display: grid; gap: var(--e-1); }
.panel__alertas a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.panel__alertas-ficha { padding: var(--e-4) var(--e-4) var(--e-4) var(--e-8); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-sm); background: var(--superficie); margin: var(--e-4) 0; }
.panel__filtrar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--e-3) var(--e-4); align-items: end; margin: var(--e-4) 0; }
.panel__filtrar select, .panel__filtrar input[type="text"] { width: 100%; padding: .5rem .7rem; border: 1px solid var(--borde-campo); border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto); font-size: var(--t-sm); }
.panel__filtrar .panel__acciones-fila { margin: 0; align-items: center; }
.panel__filtrar .panel__acciones-fila a { text-decoration: underline; text-underline-offset: 3px; font-size: var(--t-sm); }
.panel__vencido { color: var(--error); font-size: var(--t-xs); }
.panel__estado--nuevo { background: var(--primario); color: var(--sobre-primario); border-color: var(--primario); }
.panel__estado--ganado { background: var(--franja); color: var(--sobre-franja); border-color: var(--franja); }
.panel__estado--no_contactar { border-color: var(--error); color: var(--error); }
.panel__subtitulo { margin: 0 0 var(--e-2); font-size: var(--t-lg); }
.panel__mensaje ul { margin: 0 0 var(--e-2); padding-left: var(--e-6); }
.panel__mensaje li a { text-decoration: underline; text-underline-offset: 3px; }
.panel__notas { list-style: none; padding: 0; margin: var(--e-4) 0 0; display: grid; gap: var(--e-3); }
.panel__notas li { padding: var(--e-3) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); overflow-wrap: anywhere; }
.panel__notas .panel__nota { margin: 0 0 var(--e-1); }
.panel__convertir { margin-top: var(--e-2); }
.panel__convertir .boton { font-size: var(--t-sm); padding: var(--e-1) var(--e-3); }

/* ---------- Pestaña «Sitios web» (ADR 0030, M5c) ---------- */
.web-diferencias { margin-bottom: 0; }
.web-diferencias li { font-size: var(--t-base); }
.web-paquetes, .web-portafolio { list-style: none; padding: 0; margin: var(--e-8) 0 0; }
.web-paquete:hover { box-shadow: none; transform: none; }
.web-paquete__nombre { font-size: var(--t-xl); margin: var(--e-2) 0 0; }
.web-paquete__alcance { margin: 0; font-weight: 600; }
.web-paquete__mas { margin: var(--e-2) 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--acento-texto); }
.web-paquete .lista-check { margin: var(--e-2) 0 0; font-size: var(--t-sm); }
.web-fundadores { max-width: 760px; }
.web-portafolio__enlace { margin: auto 0 0; padding-top: var(--e-2); }
.web-portafolio__enlace a { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Casos de éxito (M6, docs/architecture/11-casos-de-exito.md) ---------- */
.casos-tarjetas { list-style: none; padding: 0; margin: var(--e-8) 0 0; }
.casos-tarjetas__etiqueta { align-self: flex-start; }
.casos-tarjetas__sector { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }
.casos-tarjetas__periodo { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.caso__logo { display: block; width: auto; max-width: 100%; height: 64px; object-fit: contain; margin-bottom: var(--e-4); }
.caso__datos { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-8); margin: 0 0 var(--e-4); }
.caso__datos div { display: flex; gap: var(--e-2); }
.caso__datos dt { font-weight: 600; }
.caso__datos dd { margin: 0; }
.caso__texto { max-width: 760px; }

/* ---------- Dirección en Nosotros ---------- */
.direccion { list-style: none; padding: 0; margin: var(--e-6) 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.direccion__juntos { margin: var(--e-6) 0 0; max-width: 880px; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.direccion__juntos img { display: block; width: 100%; height: auto; }
.direccion__ficha:hover { box-shadow: none; transform: none; }
/* Ficha con página personal: toda la tarjeta es el enlace (el ::after del enlace la cubre). */
.direccion__ficha--enlace { position: relative; cursor: pointer; }
.direccion__ficha--enlace:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.direccion__ficha--enlace:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.direccion__enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.direccion__enlace:focus-visible { outline: none; }
.direccion__iniciales {
  display: inline-flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; font-size: var(--t-xl);
  border-radius: 50%; background: var(--primario); color: var(--sobre-primario);
  font-family: var(--fuente-titulos); font-weight: 700; letter-spacing: .04em; margin-bottom: var(--e-2);
}
.direccion__foto { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; object-position: top; margin-bottom: var(--e-2); }
.direccion__iniciales, .direccion__foto { flex: none; }
.direccion__web { margin: auto 0 0; }
.direccion__web a { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; }
.direccion__cargo { color: var(--acento-texto); font-weight: 600; margin: 0; }
@media (max-width: 45em) {
  .direccion { grid-template-columns: minmax(0, 1fr); }
}

/* Verificación en dos pasos y roles del panel (M11, entrega 1C). */
.panel__pasos { display: grid; gap: var(--e-3); padding-left: var(--e-6); margin: var(--e-4) 0; }
.panel__clave { margin: var(--e-2) 0; }
.panel__clave code, .panel__codigos code { display: inline-block; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); font-size: var(--t-lg); letter-spacing: .08em; overflow-wrap: anywhere; }
.panel__codigos { list-style: none; margin: var(--e-4) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--e-2); }
.panel__rol { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: end; }
.panel__rol select { padding: .5rem .7rem; border: 1px solid var(--borde-campo); border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto); font-size: var(--t-sm); }
.panel__nota a, .panel__pasos a, .panel__contenedor p a:not(.boton), .panel__contenedor li a:not(.boton) { text-decoration: underline; text-underline-offset: 3px; }

/* Impresión del resumen de una liquidación (M11, entrega 3B): sin la barra del panel, los avisos ni los botones. */
@media print {
  .saltar, .panel__barra, .panel__practica, .panel__lateral, .panel__mensaje, .no-imprimir, .boton { display: none !important; }
  body.panel .seccion { padding-block: 0; }
  .panel__tabla-desliza { overflow: visible; }
}