/* ============================================================
   15Diez · sistema v2 · assets/css/sitio.css
   Tokens, base, encabezado, pie y los componentes del sistema.
   Lo cargan las 16 páginas; cada página añade solo lo suyo en
   assets/css/<página>.css y los procesos viven en procesos.css.
   Marcado de cada pieza y cuándo usarla: _notas/sistema.md.

   Reglas que este archivo hace cumplir (brief/RONDA-3.md):
   · «Una idea, una pantalla»: la imagen nunca decide el alto de una
     sección. Dos formatos de foto: 3:2 junto a un texto, con tope
     --img-tope (héroe, dupla), y 16:9 en mosaicos y fotos de compañía
     (.caminos, .articulos, .dupla--foto-baja, .partida__foto).
   · Las secciones se dividen con BANDAS de color, nunca con fotos:
     crema (sin clase), arena (.seccion--fondo), dorada
     (.seccion--dorada, una por página) y carbón (.seccion--carbon,
     como máximo una). Dentro de una banda cambian solos los tokens de
     contexto (--gris, --linea, --divisor, botones, foco); una
     superficie clara (.tarjeta, .superficie) los devuelve.
   · Dorado solo como acento, botón o banda. Sin gradientes, sin
     serif, sin sombras y sin iconos. UNA excepción (Julio,
     9-oct-2026: las tarjetas de razones «se ven muy planas»,
     «cuadros con puro texto»; extraña los «pequeños logos» que
     «hacen que te detengas»): las razones llevan un sello con un
     icono de línea y, con el cursor, ellas y las opciones del cierre
     suben sobre una sombra muy suave (.sello, .tarjetas--razones,
     .tarjetas--opciones). Fuera de esas dos piezas la regla sigue.
   · Todo se ve sin JavaScript y con «reducir movimiento».

   Índice: tokens · base · tipografía · retícula, secciones y
   cabeceras · bandas y superficies · botones y enlaces · encabezado y
   menú · pie · héroe · dupla · pilares · tarjetas · sello y tarjetas
   de razones y de opciones · pasos y listas
   plegables · caminos · artículos · campo de una línea · acordeón ·
   lista fina · formulario · sección partida y cierre con formulario ·
   marco pendiente · piezas pequeñas · comparador · interruptor de
   publicación · TELÉFONO (Ronda 4: todo lo que cambia bajo 48rem, en
   un solo bloque) · VENTANA BAJA (teléfono acostado de 768 px o más) ·
   movimiento · impresión.
   ============================================================ */

:root {
  /* color */
  --crema: #fafaf8;             /* fondo base de la página */
  --arena: #f1e8d8;             /* banda clara (.seccion--fondo): divide dos secciones crema · carbón 11.4:1, gris 4.9:1 */
  --blanco: #ffffff;            /* tarjetas, superficies y campos; nunca fondo de sección */
  --carbon: #2d2d2d;
  --dorado: #D4AD4B;            /* acento, botón principal o banda (.seccion--dorada) · carbón encima 6.5:1 */
  --dorado-oscuro: #c9a141;     /* solo hover del botón principal */
  --gris-base: #66645e;         /* texto secundario · 5.7:1 sobre crema, 5.9:1 sobre blanco, 4.9:1 sobre arena */
  --gris-claro: #b8b5ad;        /* texto secundario sobre carbón · 6.7:1 */
  --descripcion-base: #4d4b45;  /* la frase que describe un tile (caminos, tarjetas, artículos, pilares): un paso más oscura que el gris,
                                   para que se lea sin esfuerzo (Julio, 11-oct-2026) · 8.4:1 sobre crema, 8.7:1 sobre blanco, 7.2:1 sobre arena */
  --linea-base: #e4e1d9;        /* hairlines: reglas finas que acompañan (acordeón, lista fina, borde de tarjeta) */
  --divisor-base: #a89d86;      /* línea que DEBE verse a distancia de laptop (divisores de .pilares, credenciales y valores) · 2.6:1 sobre crema */
  --linea-arena: #d9cfbb;       /* las mismas tres líneas sobre la banda arena, un paso más oscuras */
  --divisor-arena: #9f927a;     /* 2.4:1 sobre arena */
  --borde-arena: #ddd3c0;       /* borde de una tarjeta blanca sobre arena */
  --campo-borde-claro: #8f8b82; /* borde de un campo blanco sobre una superficie blanca · 3.4:1 (WCAG 1.4.11) */
  --campo-borde-suelto: #87837a; /* borde del campo de una línea suelto en teléfono (Ronda 9): 3.8:1 contra su blanco, 3.6:1 sobre crema, 3.1:1 sobre arena */
  /* tokens de contexto: valen lo de arriba en la página y cambian dentro de una banda (ver «bandas») */
  --gris: var(--gris-base);
  --descripcion: var(--descripcion-base);   /* token de contexto, como --gris: sobre dorado es carbón; sobre carbón, el gris claro */
  --linea: var(--linea-base);
  --divisor: var(--divisor-base);

  /* tipografía */
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-logo: 'Montserrat', var(--fuente);
  --escala: 1;                  /* multiplicador de títulos; se aplica en las reglas h1/h2/h3 */
  --t-1: clamp(2rem, 1rem + 2.8vw, 3.5rem);        /* 32 px en móvil · 56 px en escritorio */
  --t-2: clamp(1.625rem, .9rem + 1.95vw, 2.5rem);  /* 26 px en móvil · 40 px en escritorio */
  --t-3: 1.375rem;
  --t-herramienta: clamp(1.625rem, .9rem + 1.6vw, 2.125rem);   /* título de una pantalla de herramienta (generador, Estimación, reporte): 26 → 34 px */
  --t-intermedio: clamp(1.5rem, 1rem + 1.4vw, 2rem);            /* título entre h2 y h3 (pregunta del Perfil, tarjeta ancha de Nosotros): 24 → 32 px */
  --t-cuerpo: 1.0625rem;
  --lh: 1.6;

  /* espacio y forma */
  --seccion: clamp(5rem, 10vw, 10rem);   /* separación entre secciones (cada una pone la mitad arriba y la mitad abajo) */
  --apertura: clamp(2rem, 4vw, 3.5rem);  /* aire sobre la primera pieza de una página (héroe, revista, artículo, resultado, PDF, Perfil) */
  --radio: 24px;                          /* imágenes y tarjetas */
  --img-alto: 26rem;                      /* tope de alto de toda imagen de contenido (416 px): la foto nunca decide el alto de una sección */
  --img-tope: clamp(18rem, 46vh, var(--img-alto));   /* tope de la foto que va JUNTO a un texto (héroe y dupla): sigue al alto de la ventana (377 px a 1440 × 820) */
  --radio-boton: 999px;
  --ancho: 80rem;
  --margen: clamp(1rem, 5vw, 4rem);
  --hueco: clamp(1rem, 2.5vw, 2rem);
  --enc-alto: 4.5rem;                     /* encabezado al inicio de la página (también reserva el espacio del body) */
  --enc-compacto: 3.5rem;                 /* encabezado al bajar */

  /* movimiento: cuatro duraciones para todo el sitio */
  --m-rapido: .15s;                       /* botones, enlaces, píldoras, flechas */
  --m-medio: .25s;                        /* encabezado, menú, pantallas de las herramientas */
  --m-imagen: .4s;                        /* hover de imágenes (escala 1.02) */
  --m-revelado: .5s;                      /* entrada de un bloque al hacer scroll (opacidad y 12 px) */
}
/* teléfono: los tokens que cambian bajo 48rem (encabezado, márgenes, aire, tope de imagen) están en el bloque TELÉFONO */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  padding-top: var(--enc-alto);
  background: var(--crema);
  color: var(--carbon);
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--foco, var(--carbon)); outline-offset: 3px; border-radius: 4px; }
/* títulos y bloques que reciben el foco por programa (cambio de pantalla, éxito de un formulario): sin contorno */
:is(h1, h2, h3, h4, p, legend, div, section)[tabindex="-1"]:focus { outline: none; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--carbon); color: var(--crema); border-radius: var(--radio-boton); text-decoration: none; }
.salto:focus { top: 1rem; }

/* ---------- tipografía ---------- */
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
h1 { font-size: calc(var(--t-1) * var(--escala)); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
h2, .titulo-2 { font-size: calc(var(--t-2) * var(--escala)); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
h3, .titulo-3 { font-size: calc(var(--t-3) * var(--escala)); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.antetitulo {
  display: flex; align-items: center; gap: .75rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
}
.antetitulo::before { content: ""; flex: none; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--raya, var(--dorado)); }
.apoyo { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--gris); max-width: 34rem; text-wrap: pretty; }
.dato { font-size: .8125rem; line-height: 1.5; color: var(--gris); text-wrap: pretty; }
.etiqueta { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
/* énfasis del sitio actual (las negritas de sus párrafos): Inter 600 en carbón dentro del texto gris; sin dorado como texto */
strong, b { font-weight: 600; }
.apoyo strong, .paso p strong, .camino__linea strong, .acordeon__cuerpo strong { color: var(--tinta, var(--carbon)); }

/* ---------- retícula y secciones ---------- */
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: calc(var(--seccion) / 2); }

/* ---------- cabecera de sección: antetítulo + título + apoyo ----------
   Cuatro formas, y ninguna más:
   .cabecera              a la izquierda, hasta 40rem; deja aire para lo que encabeza.
   .cabecera--centrada    sobre una fila que ocupa todo el contenedor (tarjetas, una herramienta) o sola en una banda:
                          el titular abre hasta 60rem y el apoyo hasta 44rem (un renglón largo antes que tres cortos).
   .cabecera--fila        en renglón: título a la izquierda (> div) y, a la derecha, un enlace o el párrafo de apoyo.
                          El apoyo como hijo directo mide lo que la tercera columna de la lista que encabeza y arranca
                          donde ella (--cabecera-hueco, si la lista no usa --hueco). Bajo 64rem vuelve bajo el título.
   .cabecera--junta       un paso más cerca de lo que encabeza, cuando cabecera y lista son una sola idea (un proceso,
                          los valores, las salidas del reporte). Se combina con las otras.
   Una cabecera que es lo último de su contenedor (sola en una banda) no deja aire debajo. */
.cabecera { display: grid; gap: 1rem; max-width: 40rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.cabecera--centrada { max-width: 60rem; margin-inline: auto; text-align: center; justify-items: center; }
.cabecera--centrada .apoyo { max-width: 44rem; margin-inline: auto; text-wrap: balance; }   /* centrado, en renglones parejos */
.cabecera--fila { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.cabecera--fila > div { display: grid; gap: 1rem; max-width: 40rem; }
/* la cabecera en renglón que va sobre un .recorrido usa las dos columnas del escenario (procesos.css): ahí no aplica */
@media (min-width: 64rem) {
  .cabecera--fila:not(:has(+ .recorrido)) > .apoyo { flex: none; width: calc((100% - 2 * var(--cabecera-hueco, var(--hueco))) / 3); max-width: none; }
}
.cabecera--junta { margin-bottom: clamp(1.75rem, 2.8vw, 2.5rem); }
.cabecera:last-child { margin-bottom: 0; }

/* ---------- bandas de color: los divisores del sitio ----------
   Una sección se separa de la anterior por su FONDO, de borde a borde de la ventana y con su propio aire (el de
   .seccion); nunca con una foto a todo lo ancho. Fondos: crema (sin clase), arena (.seccion--fondo), dorado
   (.seccion--dorada) y carbón (.seccion--carbon). Ritmo: dos secciones seguidas nunca comparten fondo; crema y arena
   se alternan; UNA banda dorada por página (su momento fuerte) y como máximo UNA de carbón. Sin gradientes ni fotos de fondo.
   Dentro de una banda cambian los tokens de contexto, y con ellos toda pieza que los use:
     --gris (texto secundario) · --linea y --divisor (líneas) · --tinta (negritas) · --raya (raya del antetítulo) ·
     --foco (contorno de foco) · --boton-fondo / --boton-tinta / --boton-fondo-hover (.boton--principal) ·
     --contorno / --contorno-tinta (.boton--contorno) · --borde-tarjeta (borde de .tarjeta y .superficie).
   Arena: el texto no cambia (gris 4.9:1); las líneas se oscurecen un paso para seguir viéndose sobre el beige.
   Dorada: TODO el texto en carbón (6.5:1), nunca gris; el botón principal pasa a carbón con texto crema.
   Carbón: texto crema (13:1) y secundario --gris-claro (6.7:1); el botón principal sigue dorado; el de contorno, crema. */
.seccion--fondo { background: var(--arena); --linea: var(--linea-arena); --divisor: var(--divisor-arena); --borde-tarjeta: var(--borde-arena); }
.seccion--dorada {
  background: var(--dorado); color: var(--carbon);
  --gris: var(--carbon); --descripcion: var(--carbon); --linea: rgba(45, 45, 45, .3); --divisor: rgba(45, 45, 45, .55); --raya: var(--carbon);
  --boton-fondo: var(--carbon); --boton-tinta: var(--crema); --boton-fondo-hover: #1a1a1a; --borde-tarjeta: transparent;
}
.seccion--carbon {
  background: var(--carbon); color: var(--crema);
  --gris: var(--gris-claro); --descripcion: var(--gris-claro); --linea: rgba(250, 250, 248, .22); --divisor: rgba(250, 250, 248, .45);
  --tinta: var(--crema); --foco: var(--crema); --contorno: var(--crema); --contorno-tinta: var(--carbon); --borde-tarjeta: transparent;
}

/* ---------- superficie clara: lo blanco que va dentro de una banda ----------
   .superficie es la caja blanca de una herramienta o de una compra (el generador, la tarjeta de Estimación, la compra
   del reporte): fondo blanco, borde fino y el radio del sitio; cada página le pone su relleno. .tarjeta (más abajo) es
   la misma superficie con relleno y tipografía de tarjeta. Dentro de cualquiera de las dos los tokens de contexto
   vuelven a los valores de página: el texto, las líneas, los botones y el foco se pintan como sobre crema. Sobre
   dorado o carbón un formulario va SIEMPRE dentro de una de ellas; lo único que va suelto es el campo de una línea.
   Un campo blanco sobre una superficie blanca solo se distingue por su borde: ahí el borde sube a 3.4:1 (--campo-borde). */
.superficie, .tarjeta { background: var(--blanco); color: var(--carbon); border: 1px solid var(--borde-tarjeta, var(--linea)); border-radius: var(--radio); }
:is(.tarjeta, .superficie) { --campo-borde: var(--campo-borde-claro); }
:is(.seccion--fondo, .seccion--dorada, .seccion--carbon) :is(.tarjeta, .superficie) {
  --gris: var(--gris-base); --descripcion: var(--descripcion-base); --linea: var(--linea-base); --divisor: var(--divisor-base);
  --tinta: initial; --raya: initial; --foco: initial;
  --boton-fondo: initial; --boton-tinta: initial; --boton-fondo-hover: initial; --contorno: initial; --contorno-tinta: initial;
  color: var(--carbon);
}
/* un campo suelto sobre la banda (campo de una línea): fondo blanco, así que texto en carbón y gris de página; su foco sigue el de la banda */
:is(.seccion--dorada, .seccion--carbon) :is(.campo-linea, input, select, textarea) { --gris: var(--gris-base); --linea: var(--linea-base); color: var(--carbon); }
/* la píldora del campo de una línea avisa el foco con un contorno por fuera (su borde, en carbón, no se vería sobre el carbón).
   Sobre carbón el botón vive DENTRO de la píldora blanca: su propio foco va en carbón (en crema no se veía, 1.05:1).
   Bajo 30rem el botón sale de la píldora, queda sobre la banda y conserva el foco crema. */
@media (min-width: 30rem) {
  :is(.seccion--dorada, .seccion--carbon) .campo-linea:focus-within { outline: 2px solid var(--foco, var(--carbon)); outline-offset: 3px; }
  .seccion--carbon .campo-linea .boton { --foco: var(--carbon); }
}

/* ---------- botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .75rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radio-boton);
  font-size: .9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; background: none;
  transition: background-color var(--m-rapido), color var(--m-rapido), border-color var(--m-rapido);
}
/* los colores salen de tokens de contexto: una banda dorada o carbón los cambia (ver «bandas de color») */
.boton--principal { background: var(--boton-fondo, var(--dorado)); border-color: var(--boton-fondo, var(--dorado)); color: var(--boton-tinta, var(--carbon)); }
.boton--contorno { border-color: var(--contorno, var(--carbon)); color: var(--contorno, var(--carbon)); }
/* el color de :hover solo donde hay cursor: al tacto se quedaba pegado después de tocar el botón */
@media (hover: hover) {
  .boton--principal:hover { background: var(--boton-fondo-hover, var(--dorado-oscuro)); border-color: var(--boton-fondo-hover, var(--dorado-oscuro)); }
  .boton--contorno:hover { background: var(--contorno, var(--carbon)); color: var(--contorno-tinta, var(--crema)); }
}
.boton[disabled] { opacity: .6; cursor: default; }
/* indicador de carga discreto: mientras un botón está ocupado (aria-busy, «Enviando…») lleva un aro fino que gira junto al texto */
.boton[aria-busy="true"] { cursor: progress; }
.boton[aria-busy="true"]::before {
  content: ""; flex: none; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
/* enlace con flecha. Un enlace corto no se parte (pasa entero al renglón siguiente); si es más largo que su renglón
   (teléfono), el texto parte dentro y la flecha sigue a la última palabra, no se va al borde derecho */
.enlace { display: inline-block; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.enlace::after { content: "\2192"; display: inline-block; margin-left: .35em; text-decoration: none; transition: transform var(--m-rapido); }
@media (hover: hover) { .enlace:hover::after { transform: translateX(3px); } }   /* como el color de los botones: solo donde hay cursor */
/* botón con aspecto de enlace de texto (acciones secundarias dentro de las herramientas) */
.enlace-texto {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; cursor: pointer;
}
@media (hover: hover) { .enlace-texto:hover { text-decoration-thickness: 2px; } }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.acciones--centradas { justify-content: center; }
/* par de acciones del héroe (decisión de Julio, 4-oct-2026): un botón principal y uno de contorno, como en el sitio actual.
   El grupo mide lo que miden sus dos botones: si caben en la columna van en un renglón, cada uno con su ancho; si no
   caben (teléfono, tableta), el grupo toma el ancho de la columna y se apilan, los dos igual de anchos y con aire. */
.acciones--par { width: fit-content; max-width: 100%; justify-self: start; gap: .75rem; }
.acciones--par > .boton { flex: 1 1 auto; }
/* barra del botón principal de una herramienta por pasos (.barra-paso): un envoltorio alrededor del botón principal de
   un paso (span o div). Desde 48rem NO pinta caja: el botón sigue siendo hijo, para la maqueta, de su renglón .acciones
   (el escritorio no sabe que existe). En teléfono es la barra que lleva el botón a todo el ancho, al pie de su marco,
   y que puede quedarse pegada al pie de la ventana: ver «barra del botón principal» en el bloque TELÉFONO. */
.barra-paso { display: contents; }

/* ---------- encabezado fijo (se compacta al bajar: html.compacto lo pone sitio.js) ---------- */
.encabezado {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--enc-alto);
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  transition: height var(--m-medio) ease;
}
.encabezado__in { height: 100%; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); }
.encabezado__logo { display: block; flex: none; width: 5.5rem; transition: width var(--m-medio) ease; }   /* 88 px */
.logo { position: relative; display: block; overflow: hidden; aspect-ratio: 1260 / 660; }
.logo img { position: absolute; max-width: none; width: 119%; height: auto; left: -9.5%; top: -63.6%; }
.nav { margin-left: auto; }
.nav__lista { display: flex; gap: clamp(.75rem, 1.4vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.nav__a { position: relative; display: inline-block; padding: .5rem 0; font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav__a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px; background: var(--carbon); transform: scaleX(0); transform-origin: left; transition: transform var(--m-rapido); }
.nav__a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav__a:hover::after { transform: scaleX(1); } }   /* como todo :hover del sistema: solo donde hay cursor (comprobar.py, punto 12) */
.encabezado__accion { flex: none; }
.boton.encabezado__accion { min-height: 2.75rem; padding: .6rem 1.25rem; }   /* 44 px de objetivo táctil */
.menu-boton {
  display: none; flex: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-right: -.5rem;
  border: 0; border-radius: 50%; background: none; text-decoration: none; cursor: pointer;
}
.menu-boton__rayas { position: relative; width: 1.25rem; height: 10px; }
.menu-boton__rayas i { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--carbon); transition: transform var(--m-medio), top var(--m-medio); }
.menu-boton__rayas i:first-child { top: 0; }
.menu-boton__rayas i:last-child { top: 100%; }
.menu-boton[aria-expanded="true"] .menu-boton__rayas i:first-child { top: 50%; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__rayas i:last-child { top: 50%; transform: rotate(-45deg); }
html.compacto .encabezado { height: var(--enc-compacto); }
html.compacto .encabezado__logo { width: 4.5rem; }   /* 72 px */
html.sin-transicion .encabezado, html.sin-transicion .encabezado__logo { transition: none; }   /* primer cuadro de una página que abre ya desplazada */

/* menú móvil: sitio.js quita [hidden], pinta y pone .es-abierto (apertura suave); al cerrar espera a que termine la transición */
.menu {
  position: fixed; inset: var(--enc-alto) 0 0 0; z-index: 49;
  overflow: auto; background: var(--crema);
  padding: 1.5rem var(--margen) 3rem;
}
html.compacto .menu { top: var(--enc-compacto); }
html.js .menu { opacity: 0; transform: translateY(-.5rem); transition: opacity var(--m-medio) ease, transform var(--m-medio) ease; }
html.js .menu.es-abierto { opacity: 1; transform: none; }
.menu__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.menu__lista a { display: block; padding: 1rem 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; border-bottom: 1px solid var(--linea); }
.menu__lista a[aria-current="page"] { color: var(--gris); }
.menu__contacto { display: grid; gap: 1rem; margin-top: 2rem; justify-items: start; }
.menu__contacto a { text-decoration: none; }
html.menu-abierto { overflow: hidden; }

/* el menú completo (seis entradas, con «Insights x 15Diez» entero) cabe con holgura a partir de 76rem; antes, botón de menú */
@media (max-width: 75.99rem) {
  .nav { display: none; }
  .menu-boton { display: inline-flex; }
  .encabezado__accion { margin-left: auto; }
  .pie { scroll-margin-top: var(--enc-alto); }   /* sin JavaScript el botón de menú lleva a #pie: su borde queda bajo el encabezado, no tapado por él */
}
@media (max-width: 29.99rem) {
  /* bajo 480 px «Contáctanos» (entero, como en el sitio actual) es un enlace de texto (subrayado fino, 44 px de alto): la píldora competía con el logo */
  .boton.encabezado__accion {
    padding: .6rem .25rem; border-color: transparent; background: none; color: var(--carbon);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  }
  @media (hover: hover) { .boton.encabezado__accion:hover { background: none; color: var(--carbon); text-decoration-thickness: 2px; } }
}

/* ---------- pie sobrio ---------- */
.pie { border-top: 1px solid var(--linea); padding-block: clamp(3rem, 6vw, 5rem) 2rem; font-size: .9375rem; }
.pie__arriba { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2.5rem; }
.pie__marca { grid-column: 1 / 6; display: grid; gap: 1rem; align-content: start; }
.pie__logo { width: 6.5rem; }
.pie__marca p { color: var(--gris); max-width: 22rem; }
.pie__columna { grid-column: span 2; display: grid; gap: .6rem; align-content: start; }
.pie__columna .etiqueta { margin-bottom: .4rem; }
/* el subrayado ya existe, transparente: al pasar el cursor solo cambia de color (transición de 150 ms) */
.pie__columna a, .pie__abajo a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; transition: text-decoration-color var(--m-rapido); }
@media (hover: hover) { .pie__columna a:hover, .pie__abajo a:hover { text-decoration-color: currentColor; } }
.pie__abajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--linea); color: var(--gris); font-size: .8125rem; }
@media (max-width: 63.99rem) {
  .pie__marca { grid-column: 1 / -1; }
  .pie__columna { grid-column: span 4; }
}
@media (max-width: 47.99rem) {
  .pie__columna { grid-column: span 6; }
  .pie__columna:last-child { grid-column: 1 / -1; }   /* Contacto a todo el ancho: el WhatsApp con su número cabe en un renglón */
}

/* ---------- héroe (titular + foto apaisada, 50/50): una acción principal y, si la página la tiene, una de contorno (.acciones--par) ----------
   Mide lo que mide su texto más un poco de aire y deja ver el arranque de la sección siguiente (a 1440 × 820, unas
   0.7 pantallas). La foto es 3:2 y su alto nunca pasa de --img-tope: en una ventana baja se recorta a lo ancho antes
   que empujar el texto. Va sobre crema. */
.heroe { padding-block: var(--apertura) calc(var(--seccion) / 2); }
.heroe__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2rem; align-items: center; }
.heroe__texto { grid-column: 1 / 7; display: grid; gap: 1.5rem; padding-right: clamp(0rem, 2vw, 1.5rem); }
.heroe__texto .acciones { margin-top: .5rem; }
.heroe__imagen { grid-column: 7 / 13; }
.heroe__imagen img {
  width: 100%; aspect-ratio: 3 / 2; max-height: var(--img-tope);
  object-fit: cover; border-radius: var(--radio);
}
/* el apoyo del héroe parte en renglones parejos: nunca deja dos palabras sueltas ni corta la negrita del lema */
.heroe__texto .apoyo { text-wrap: balance; }
/* teléfono: una columna; el texto va primero y la foto después, más baja (ver el bloque TELÉFONO) */
@media (max-width: 47.99rem) {
  .heroe__texto, .heroe__imagen { grid-column: 1 / -1; }
  .heroe__texto { padding-right: 0; }   /* botones, campos y foto comparten el borde derecho */
}
/* antetítulo del héroe en dos renglones (el alcance, en teléfono y tableta): la raya acompaña al primer renglón */
.heroe__texto > .antetitulo { align-items: flex-start; }
.heroe__texto > .antetitulo::before { margin-top: calc(.8em - 1px); }

/* ---------- dupla: imagen y texto lado a lado (alternable con .dupla--invertida) ----------
   La foto es siempre 3:2 con el tope del héroe (--img-tope: 377 px a 1440 × 820, nunca más de 26rem). La columna de
   texto no debe pasar de unos 520 px de alto en escritorio: si lleva una lista larga, la lista baja a todo el ancho
   (.pilares) o se convierte en .tarjetas.
   .dupla--texto-ancho   foto de 5 columnas y texto de 7: para un texto que pide renglón largo o un bloque corto.
   .dupla--foto-baja     la foto «de compañía» de un bloque corto (un titular, dos renglones y un botón) va en 16:9:
                         no mide más que su texto. */
.dupla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2rem; align-items: center; }
.dupla__imagen { grid-column: 1 / 7; }
/* minmax(0, 1fr): con el campo de una línea dentro, la columna no se ensancha y el texto no queda bajo la foto (tableta) */
.dupla__texto { grid-column: 8 / 13; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.dupla__texto .acciones, .dupla__texto .enlace { margin-top: .5rem; }
.dupla--invertida .dupla__imagen { grid-column: 7 / 13; order: 2; }
.dupla--invertida .dupla__texto { grid-column: 1 / 6; }
/* mismo tope que el héroe (--img-tope): con un texto corto al lado, la foto no es la que estira la sección */
.dupla__imagen img { width: 100%; aspect-ratio: 3 / 2; max-height: var(--img-tope); object-fit: cover; border-radius: var(--radio); }
.dupla--foto-baja .dupla__imagen img { aspect-ratio: 16 / 9; }
@media (max-width: 63.99rem) {
  .dupla__imagen { grid-column: 1 / 7; }
  .dupla__texto { grid-column: 7 / 13; }
  .dupla--invertida .dupla__texto { grid-column: 1 / 7; }
}
@media (max-width: 47.99rem) {
  .dupla__imagen, .dupla__texto, .dupla--invertida .dupla__imagen, .dupla--invertida .dupla__texto { grid-column: 1 / -1; }
  .dupla--invertida .dupla__imagen { order: 0; }
}
/* texto ancho: foto de 5 columnas (515 × 343 a 1440) y texto de 7 (¿Quiénes somos?, la promoción de la Estimación, el
   destacado de Insights, la cabecera de un artículo). Sigue en dos columnas en tableta (la foto nunca vuelve a ir a
   todo el ancho) y solo se apila en teléfono. El apoyo abre a 40rem, salvo sobre un campo de una línea: ahí conserva
   la medida del campo (34rem) para no quedar más largo que él. Una lista fina ocupa toda la columna. */
.dupla--texto-ancho .dupla__imagen { grid-column: 1 / 6; }
.dupla--texto-ancho .dupla__texto { grid-column: 6 / 13; padding-left: clamp(1rem, 3.5vw, 3rem); }
.dupla--texto-ancho.dupla--invertida .dupla__imagen { grid-column: 8 / 13; }
.dupla--texto-ancho.dupla--invertida .dupla__texto { grid-column: 1 / 8; padding-left: 0; padding-right: clamp(1rem, 3.5vw, 3rem); }
.dupla--texto-ancho .apoyo { max-width: 40rem; }
.dupla--texto-ancho .dupla__texto:has(.campo-linea) > .apoyo { max-width: 34rem; }
.dupla--texto-ancho .lista-fina { max-width: none; }
@media (max-width: 47.99rem) {
  .dupla--texto-ancho .dupla__imagen, .dupla--texto-ancho .dupla__texto,
  .dupla--texto-ancho.dupla--invertida .dupla__imagen, .dupla--texto-ancho.dupla--invertida .dupla__texto { grid-column: 1 / -1; padding-inline: 0; }
  .dupla--texto-ancho.dupla--invertida .dupla__imagen { order: 0; }
}

/* ---------- pilares: columnas con divisor a la vista ----------
   ul.pilares > li.pilar > h3 + p. De dos a cuatro ideas cortas que se leen como un conjunto («nuestros pilares
   diferenciadores»): cada una abre con la raya del antetítulo, título en 600 a 20 px y una frase a 16 px, y entre
   columna y columna va una línea vertical que se ve a distancia de laptop (--divisor, no --linea). Van A TODO EL ANCHO
   del contenedor, bajo la dupla o la cabecera de su sección: cada columna mide un tercio, el título cabe en un
   renglón y la frase, de hasta unas 25 palabras, en tres. Los títulos comparten fila (subgrid): las frases arrancan
   parejas aunque un título parta en dos.
   Bajo una .dupla los separa de ella una línea horizontal del mismo peso, y las verticales nacen de esa línea: tres
   celdas, sin tarjetas. Esa dupla lleva la foto de compañía (.dupla--foto-baja, 16:9): con la foto en 3:2 la sección
   no cabe con margen en una pantalla. En teléfono se apilan y la línea pasa a ser horizontal (sin raya: la línea basta).
   Sin iconos, sin tarjetas, sin números (si hay orden, es un proceso: procesos.css). */
.pilares {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
}
.pilar {
  grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: .5rem; align-content: start;
  padding: .25rem clamp(1.25rem, 2.4vw, 2rem); border-left: 1px solid var(--divisor);
}
.pilar:first-child { padding-left: 0; border-left: 0; }
.pilar:last-child { padding-right: 0; }
.pilar h3 { font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.3; text-wrap: balance; }
.pilar h3::before { content: ""; display: block; width: 1.5rem; height: 2px; margin-bottom: .875rem; border-radius: 2px; background: var(--raya, var(--dorado)); }
.pilar p { max-width: 24rem; font-size: 1rem; line-height: 1.5; color: var(--descripcion); text-wrap: pretty; }
@media (min-width: 48rem) {
  .dupla + .pilares { margin-top: clamp(2rem, 3.2vw, 2.5rem); border-top: 1px solid var(--divisor); }
  .dupla + .pilares .pilar { padding-top: clamp(1.5rem, 2.6vw, 2rem); padding-bottom: .75rem; }
}
/* pilares plegables en teléfono: ul.pilares.pasos--plegable > li.pilar > details.acordeon__item[open] > summary > h3,
   + p.acordeon__cuerpo (el marcado de toda lista plegable). Desde 48rem son los pilares de siempre: columnas con
   divisor, la raya y los títulos compartiendo fila (subgrid). Para eso el <details> no pinta caja (display: contents):
   el título (summary) y la frase vuelven a ser las dos filas del pilar. El aire entre título y frase (8 px) lo pone la
   frase, como en toda lista plegable (.pasos--plegable .acordeon__cuerpo), y no la retícula: donde un navegador no
   aplicara display: contents a un <details>, el pilar se pinta igual. La frase conserva su medida (24rem). Bajo 48rem
   son el acordeón del sistema: ver el bloque TELÉFONO. (Financiera, «Así se ve tu informe final».) */
@media (min-width: 48rem) {
  .pilares.pasos--plegable .pilar { row-gap: 0; }
  .pilares.pasos--plegable .acordeon__item { display: contents; }
  .pilares.pasos--plegable .acordeon__cuerpo { max-width: 24rem; }
}
/* tableta: columnas estrechas; título y frase bajan un paso, como en las tarjetas */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .pilar h3 { font-size: 1.125rem; }
  .pilar p { font-size: .9375rem; }
}
@media (max-width: 47.99rem) {
  .pilares { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--divisor); }
  .dupla + .pilares { margin-top: 2rem; }
  .pilar, .pilar:first-child, .pilar:last-child {
    grid-row: auto; grid-template-rows: none; row-gap: .25rem;
    padding: 1rem 0; border-left: 0; border-bottom: 1px solid var(--divisor);
  }
  .pilar h3 { font-size: 1.125rem; }
  .pilar h3::before { content: none; }
  .pilar p { max-width: none; }
}

/* ---------- tarjetas: tres o más tarjetas blancas con borde fino, iguales de alto ----------
   ul.tarjetas > li.tarjeta > [.etiqueta | p.antetitulo] + h3 + p [+ p.tarjeta__accion > a.boton | a.enlace]. Para
   razones («¿Por qué elegir 15Diez?»), las opciones de un cierre (cada una con su botón) y valores. Van bajo una
   .cabecera--centrada y sobre una banda (arena, dorada o carbón); sobre crema solo cuando la sección queda entre dos
   bandas arena (el borde fino las sostiene). Tres columnas (también seis: 3 × 2); .tarjetas--dos y .tarjetas--cuatro
   cambian la cuenta. La acción queda siempre al pie de la tarjeta, alineada con las de sus vecinas. Sin iconos ni sombras,
   salvo las razones (.tarjetas--razones) y las opciones del cierre (.tarjetas--opciones): la pieza que sigue a esta,
   con su porqué (Julio, 9-oct-2026). Las demás tarjetas del sitio (formas de Rediseño, misión y visión) no cambian.
   Plegables en teléfono: con .pasos--plegable en la lista (el nombre que lee sitio.js) y, dentro de cada tarjeta,
   details.acordeon__item[open] > summary > h3 + p.acordeon__cuerpo: desde 48rem todo a la vista; bajo 48rem cada
   tarjeta se abre con un toque y solo la primera nace abierta. Solo para tarjetas sin acción.
   .tarjeta sola (sin lista) es la superficie blanca de un formulario sobre una banda (ver «cierre»). La caja (fondo,
   borde, radio) es la de .superficie. */
.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco); }
.tarjetas--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarjetas--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tarjeta { display: flex; flex-direction: column; gap: .625rem; min-width: 0; padding: clamp(1.5rem, 2.4vw, 2rem); }
/* solo los hijos directos (y el título y el cuerpo de la tarjeta plegable): lo que viva dentro de un formulario en tarjeta conserva su estilo */
.tarjeta > h3, .tarjeta > .acordeon__item > summary > h3 { font-size: 1.25rem; line-height: 1.3; text-wrap: balance; }
.tarjeta > p:not(.tarjeta__accion, .antetitulo), .tarjeta > .acordeon__item > .acordeon__cuerpo { font-size: 1rem; line-height: 1.5; color: var(--descripcion); text-wrap: pretty; }
.tarjeta > p strong { color: var(--carbon); }
.tarjeta > .etiqueta { margin-bottom: .125rem; }
.tarjeta__accion { margin-top: auto; padding-top: 1rem; container-type: inline-size; }
.tarjeta__accion .boton { width: 100%; white-space: normal; text-align: center; }
/* los botones de una fila de tarjetas miden lo mismo (el ancho que cuenta es el de la tarjeta, no el de la ventana):
   si la tarjeta se estrecha, letra y relleno bajan un paso para que un texto de hasta ~32 caracteres siga en un
   renglón; si aun así puede partir, todos toman el alto de dos renglones. Nunca uno de 62 px junto a dos de 48. */
@container (max-width: 17.5rem) {
  .tarjeta__accion .boton { padding-inline: .75rem; font-size: .875rem; }
}
@container (max-width: 14.75rem) {
  .tarjeta__accion .boton { min-height: 3.625rem; }
}
.tarjetas + .acciones { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
/* tarjetas plegables: desde 48rem el details no actúa (lo apaga la regla de .pasos--plegable); aquí solo su aire */
.tarjeta > .acordeon__item { border: 0; }
.tarjeta .acordeon__cuerpo { max-width: none; }
@media (min-width: 48rem) {
  .tarjetas.pasos--plegable .acordeon__cuerpo { padding-top: .625rem; }
}
@media (max-width: 63.99rem) {
  .tarjetas--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta { padding: 1.25rem; }
}
/* tableta: tres tarjetas en columnas estrechas; el texto baja un paso para no alargarlas */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .tarjetas:not(.tarjetas--dos) > .tarjeta > p:not(.tarjeta__accion, .antetitulo),
  .tarjetas:not(.tarjetas--dos) > .tarjeta > .acordeon__item > .acordeon__cuerpo { font-size: .9375rem; }
}
@media (max-width: 47.99rem) {
  .tarjetas, .tarjetas--dos, .tarjetas--cuatro { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .tarjeta { border-radius: 1.25rem; }
  .tarjeta > h3 { font-size: 1.125rem; }
  .tarjetas.pasos--plegable .tarjeta { padding-block: 0; }
  .tarjetas.pasos--plegable .acordeon__item summary { padding: 1rem 0; }
  .tarjetas.pasos--plegable .acordeon__cuerpo { padding-bottom: 1.25rem; }
}

/* ---------- sello: la marca de una tarjeta de razones ----------
   span.sello > svg (viewBox 24, sin relleno, trazo 1.5 con puntas redondas; el span y el svg llevan aria-hidden: es
   adorno, el título ya lo dice). Un círculo en dorado lleno con el icono de línea en carbón (sobre el dorado, siempre
   carbón: 6.5:1). Va sobre blanco, dentro de una .tarjeta; su lista (.tarjetas--razones) le da la medida con --sello
   y --sello-icono (sin ellas, 56 y 26 px) y lo invierte con el cursor.
   Un solo juego de iconos, con la misma caja y el mismo trazo: capas (Integración vertical) · escudo (Seguridad) ·
   destellos (Innovación) · reloj (Agilidad) · gráfica al alza (Optimización). Los trazos son de Lucide (lucide.dev:
   «layers», «shield-check», «sparkles», «clock», «trending-up»), la familia de iconos del sitio actual.
   Ronda 6 (12-oct-2026), en chico dentro de una lista con sello (.con-sello, más abajo): lupa, balanza y tabla con
   palomita (el informe de Asesoría Financiera: «search», «scale», «clipboard-check») y ojo, medalla, libro abierto,
   diana y palomita en círculo (los valores de Nosotros: «eye», «award», «book-open», «target», «circle-check»;
   Innovación repite los destellos). LICENCIA de
   los iconos (permite usarlos, copiarlos y modificarlos, también en un sitio comercial, conservando su aviso):
     Lucide · ISC License · Copyright (c) 2026 Lucide Icons and Contributors. «Permission to use, copy, modify, and/or
     distribute this software for any purpose with or without fee is hereby granted, provided that the above
     copyright notice and this permission notice appear in all copies.»
     «clock» deriva de Feather · MIT License · Copyright (c) 2013-present Cole Bemis.
   Aviso leído en github.com/lucide-icons/lucide (LICENSE) el 10-oct-2026; el texto completo de las dos licencias está
   en _notas/tarjetas-razones.md. Este comentario viaja con la hoja: no quitarlo al publicar (o llevar los dos textos
   a un archivo público). Un icono nuevo sale de la misma familia. */
.sello {
  flex: none; display: grid; place-items: center;
  width: var(--sello, 3.5rem); height: var(--sello, 3.5rem); border-radius: 50%;
  background: var(--dorado); color: var(--carbon);
  transition: background-color var(--m-medio) ease, color var(--m-medio) ease, box-shadow var(--m-medio) ease;
}
.sello svg { width: var(--sello-icono, 1.625rem); height: var(--sello-icono, 1.625rem); }

/* ---------- lista con sello (.con-sello) ----------
   ul.con-sello.pasos--plegable > li > details.acordeon__item[open] > summary > span.sello + h3, + p.acordeon__cuerpo
   El sello, en chico (40 px, icono de 22), abre cada idea de una lista SIN tarjetas: va junto a su título, en el mismo
   renglón, a cualquier ancho (encima del título la lista no cabría en una pantalla: los tres bloques de «Así se ve tu
   informe final.» tenían 7 px de sobra y los seis valores de Nosotros, 48). Julio, Ronda 6 (12-oct-2026): «agregar un
   pequeño elemento visual para que destaque un poco más» y «pequeños logos o elementos visuales en cada valor para que
   no se vea tan cargado de texto». En .pilares el sello ocupa el lugar de la raya dorada del título. Bajo 48rem la
   lista es su acordeón y el sello queda en el renglón que se toca, antes del título.
   Entrada (solo con movimiento): la lista no sube entera; sus ideas entran una tras otra (120 ms entre una y la
   siguiente, hasta seis) y cada sello crece hasta su tamaño. Sin JavaScript, con «reducir movimiento» o al imprimir,
   todo está a la vista desde el principio. */
.con-sello { --sello: 2.5rem; --sello-icono: 1.375rem; }
.con-sello .acordeon__item > summary > h3 { flex: 1 1 auto; min-width: 0; }
.con-sello .pilar h3::before { content: none; }
@media (min-width: 48rem) {
  .pasos--plegable.con-sello .acordeon__item > summary { display: flex; align-items: center; gap: .75rem; }
}
@media (max-width: 47.99rem) {
  .con-sello .acordeon__item > summary { justify-content: flex-start; gap: .875rem; padding-block: .75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html.revela .con-sello.revelar:not(.visible) { opacity: 1; transform: none; }
  html.revela .con-sello.revelar > li { transition: opacity var(--m-revelado) ease, transform var(--m-revelado) ease; transition-delay: calc(var(--turno, 0) * 120ms); }
  html.revela .con-sello.revelar > li .sello { transition: transform var(--m-revelado) cubic-bezier(.2, .9, .3, 1.2), background-color var(--m-medio) ease, color var(--m-medio) ease; transition-delay: calc(var(--turno, 0) * 120ms + 80ms), 0s, 0s; }
  html.revela .con-sello.revelar:not(.visible) > li { opacity: 0; transform: translateY(12px); }
  html.revela .con-sello.revelar:not(.visible) > li .sello { transform: scale(.6); }
  .con-sello > li:nth-child(2) { --turno: 1; }
  .con-sello > li:nth-child(3) { --turno: 2; }
  .con-sello > li:nth-child(4) { --turno: 3; }
  .con-sello > li:nth-child(5) { --turno: 4; }
  .con-sello > li:nth-child(6) { --turno: 5; }
}

/* ---------- tarjetas de razones (.tarjetas--razones) y opciones de un cierre (.tarjetas--opciones) ----------
   ul.tarjetas.tarjetas--razones.pasos--plegable > li.tarjeta > details.acordeon__item[open] >
     summary > span.sello + h3, + p.acordeon__cuerpo
   «¿Por qué elegir 15Diez?» (portada) y «¿Por qué elegirnos?» (Asesoría Inmobiliaria): la excepción al «sin iconos
   ni sombras» de .tarjetas (Julio, 9-oct-2026: «se ven muy planas», «cuadros con puro texto», los títulos «ni
   siquiera están centrados»). Son las dos únicas filas de tarjetas sin foto, número ni botón: sin una marca nada
   detenía la vista. Composición centrada con el sello arriba y el título un punto más grande; con el cursor el borde
   pasa a dorado, la tarjeta sube 3 px sobre una sombra muy suave y el sello se invierte (carbón con el icono en
   dorado) y gana un aro fino por fuera.
   ul.tarjetas.tarjetas--opciones (el cierre dorado de la portada, cada tarjeta con su botón): solo se centra y
   responde igual al cursor (y al foco de teclado de su botón); no lleva sello (su marca es el botón, y la banda no
   tiene alto de sobra).
   Alto: el sello y sus aires siguen al ancho de la ventana (48 px, 14 al título y 6 del título al texto hasta 1280;
   56, 18 y 8 desde 1440) para que la sección quepa también en la laptop chica: con tres razones de unas 30 palabras
   mide 0.77 pantallas a 1440 × 820 y 0.87 a 1280 × 720. Las opciones no crecen ni un píxel a ningún ancho de ventana
   (lo comprueba _notas/tarjetas-razones-pruebas/regresion.py, de 320 a 1920 px). En teléfono las razones siguen
   plegables, con el sello junto al título: ver el bloque TELÉFONO.
   El texto de una razón: el párrafo va centrado y en renglones parejos (balance), pero Chrome solo equilibra hasta
   seis renglones; en columnas estrechas (tableta, 1024 px) el párrafo pasa de seis y su última palabra quedaba sola.
   Por eso las dos últimas palabras de cada razón van unidas con &nbsp; en el HTML (la receta está en sistema.md). */
.tarjetas--razones {
  --sello: clamp(3rem, 5vw - 1rem, 3.5rem);                     /* 48 px hasta 1280 de ancho → 56 px desde 1440 */
  --sello-icono: clamp(1.5rem, 1.25vw + .5rem, 1.625rem);       /* 24 px (la caja del dibujo: trazo de 1.5 px exactos) → 26 px */
  --sello-aire: clamp(.875rem, 2.5vw - 1.125rem, 1.125rem);     /* del sello al título: 14 → 18 px */
}
:is(.tarjetas--razones, .tarjetas--opciones) > .tarjeta {
  position: relative;   /* para la franja que sostiene el :hover (más abajo) */
  transition: border-color var(--m-medio) ease, transform var(--m-medio) ease, box-shadow var(--m-medio) ease;
}
.tarjetas--opciones > .tarjeta { text-align: center; }
.tarjetas--opciones > .tarjeta > p:not(.tarjeta__accion) { text-wrap: balance; }
@media (min-width: 48rem) {
  .tarjetas--razones > .tarjeta { text-align: center; }
  .tarjetas--razones > .tarjeta > .acordeon__item > summary { display: flex; flex-direction: column; align-items: center; gap: var(--sello-aire); }
  /* del título al texto, 6 → 8 px: con el aire del sello suma lo mismo a cualquier ancho (20 → 26 px) y el título queda con su texto, no con el sello */
  .tarjetas--razones > .tarjeta > .acordeon__item > .acordeon__cuerpo { padding-top: clamp(.375rem, 1.25vw - .625rem, .5rem); text-wrap: balance; }
}
/* tableta: el título baja un paso, como ya hace el texto (.tarjetas, más arriba). A 20 px «Integración vertical»
   partía en dos renglones de 768 a 795 px de ancho y, con los tres sellos alineados, su párrafo arrancaba 26 px más
   abajo que los de sus vecinas */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .tarjetas--razones > .tarjeta > .acordeon__item > summary > h3 { font-size: 1.125rem; }
}
/* el título, un punto más grande (21 px) en el mismo renglón de 26 px que ya tenía: en rem, para que mida lo mismo al
   píxel. Solo desde 80rem: en columnas más estrechas se queda en 20 px (a 21, «Vende o renta tu propiedad» partía en
   dos renglones de 1100 a 1140 px de ancho y el cierre crecía 26 px; desde 1280 le sobran 32 px o más) */
@media (min-width: 80rem) {
  .tarjetas--opciones > .tarjeta > h3,
  .tarjetas--razones > .tarjeta > .acordeon__item > summary > h3 { font-size: 1.3125rem; line-height: 1.625rem; letter-spacing: -.015em; }
}
/* la respuesta al cursor, solo donde hay cursor. Las sombras son carbón al 38 % (sobre arena) y al 50 % (sobre el
   dorado), muy recogidas bajo la tarjeta; el aro del sello, un filo dorado a 4 px del círculo.
   Las razones responden solo desde 48rem: más abajo son plegables y ahí el borde dorado quiere decir «abierta» (con
   un ratón o un lápiz sobre una ventana estrecha, una razón cerrada se habría visto como abierta). */
@media (hover: hover) and (min-width: 48rem) {
  .tarjetas--razones > .tarjeta:hover {
    border-color: var(--dorado);
    box-shadow: 0 18px 32px -22px rgba(45, 45, 45, .38); box-shadow: 0 18px 32px -22px color-mix(in srgb, var(--carbon) 38%, transparent);
  }
  .tarjetas--razones > .tarjeta:hover .sello { background: var(--carbon); color: var(--dorado); box-shadow: 0 0 0 4px var(--blanco), 0 0 0 5px var(--dorado); }
}
@media (hover: hover) {
  .tarjetas--opciones > .tarjeta:hover {
    box-shadow: 0 18px 32px -20px rgba(45, 45, 45, .5); box-shadow: 0 18px 32px -20px color-mix(in srgb, var(--carbon) 50%, transparent);
  }
}
/* con teclado, la opción cuyo botón tiene el foco responde igual que con el cursor (el enlace es el botón, no la
   tarjeta). Va en regla aparte: donde :has() no existe solo se pierde esto */
.tarjetas--opciones > .tarjeta:has(:focus-visible) {
  box-shadow: 0 18px 32px -20px rgba(45, 45, 45, .5); box-shadow: 0 18px 32px -20px color-mix(in srgb, var(--carbon) 50%, transparent);
}
/* la tarjeta solo se desplaza si el visitante no pidió «reducir movimiento» (con él cambian el borde, la sombra y el
   sello, sin transición: regla general del sitio). La franja de 3 px bajo la tarjeta levantada mantiene el cursor
   «encima» cuando entra por el borde de abajo: sin ella la tarjeta sube, pierde el cursor, baja y tiembla */
@media (hover: hover) and (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .tarjetas--razones > .tarjeta:hover { transform: translateY(-3px); }
  .tarjetas--razones > .tarjeta:hover::after { content: ""; position: absolute; inset: 100% 0 auto; height: 3px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tarjetas--opciones > .tarjeta:hover { transform: translateY(-3px); }
  .tarjetas--opciones > .tarjeta:hover::after { content: ""; position: absolute; inset: 100% 0 auto; height: 3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tarjetas--opciones > .tarjeta:has(:focus-visible) { transform: translateY(-3px); }
}

/* ---------- pasos: lista en columnas bajo una cabecera ----------
   ul.pasos > li.paso > h3 + p. Una lista sin orden y sin tarjetas. Cuatro columnas (dos en tableta, una en teléfono);
   .pasos--seis, tres (seis elementos en 3 × 2; dos columnas en tableta) con el texto hasta 24rem. Para razones o
   valores con peso propio, .tarjetas o .pilares; para un orden, procesos.css. */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem var(--hueco); }
.paso { display: grid; gap: .5rem; align-content: start; max-width: 20rem; }
.paso p { color: var(--gris); text-wrap: pretty; }
.pasos--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pasos--seis .paso { max-width: 24rem; }
@media (max-width: 63.99rem) {
  .pasos, .pasos--seis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .pasos, .pasos--seis { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- listas plegables en móvil (.pasos--plegable) ----------
   Marcado: ul.pasos.pasos--plegable > li.paso > details.acordeon__item[open] > summary > h3, + p.acordeon__cuerpo.
   Desde 48rem es la lista de siempre: columnas, todo a la vista y el summary no actúa. Bajo 48rem es el acordeón del
   sistema, con el primero abierto (lo deja así sitio.js; sin JavaScript quedan todos abiertos y nada se oculta). */
@media (min-width: 48rem) {
  .pasos--plegable .acordeon__item { border: 0; }
  .pasos--plegable .acordeon__item summary { display: block; padding: 0; cursor: auto; pointer-events: none; }
  .pasos--plegable .acordeon__item summary::after, .pasos--plegable .acordeon__item[open] summary::after { content: none; }
  .pasos--plegable .acordeon__cuerpo { padding: .5rem 0 0; max-width: none; }
}
@media (max-width: 47.99rem) {
  .pasos.pasos--plegable { gap: 0; border-top: 1px solid var(--linea); }
  .pasos--plegable .paso { max-width: none; }
  .pasos--plegable .acordeon__item summary h3 { font-size: 1.0625rem; letter-spacing: 0; line-height: 1.4; }
  .pasos--plegable .acordeon__cuerpo { max-width: none; }
}

/* ---------- tres caminos (mosaicos de imagen) ----------
   Foto 16:9: los mosaicos van varios por fila y con su texto debajo, así que su foto es más baja que la de una dupla
   (405 × 228 a 1440). Cabecera, las tres fotos y su descripción caben en una pantalla con margen (0.88 a 1440 × 820)
   y también en una laptop de 1366 × 768. */
.caminos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco); }
.camino { display: grid; gap: 1rem; align-content: start; text-decoration: none; color: inherit; }
.camino__imagen { overflow: hidden; border-radius: var(--radio); aspect-ratio: 16 / 9; max-height: var(--img-alto); }
.camino__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-imagen) ease; }
@media (hover: hover) { .camino:hover .camino__imagen img { transform: scale(1.02); } }   /* sin cursor no hay :hover: al tacto se quedaba pegado al volver atrás */
.camino__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.camino__titulo::after { content: "\2192"; font-weight: 400; color: var(--gris); transition: transform var(--m-rapido); }
@media (hover: hover) { .camino:hover .camino__titulo::after { transform: translateX(3px); } }
.camino__linea { color: var(--descripcion); max-width: 24rem; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 47.99rem) {
  .caminos { grid-template-columns: 1fr; }   /* y cada camino pasa a fila compacta: ver el bloque TELÉFONO */
}

/* ---------- tarjeta de artículo ----------
   a.articulo > .articulo__portada (16:9, como todo mosaico) + .etiqueta + título + [.articulo__linea] [+ .enlace].
   La foto va pegada a su título: cada imagen se lee ligada a su artículo. Tres por fila; .articulos--cuatro, cuatro
   (el índice de Insights: las cuatro piezas que siguen al destacado caben en una pantalla), con el título un paso menor. */
.articulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco); row-gap: 2.5rem; }
.articulo { display: grid; gap: .625rem; align-content: start; text-decoration: none; color: inherit; }
.articulo__portada { overflow: hidden; border-radius: var(--radio); aspect-ratio: 16 / 9; max-height: var(--img-alto); }
.articulo__portada img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-imagen) ease; }
@media (hover: hover) { .articulo:hover .articulo__portada img { transform: scale(1.02); } }
.articulo .etiqueta { margin-top: .25rem; }
.articulo__titulo { font-size: 1.25rem; line-height: 1.3; text-wrap: balance; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: transparent; transition: text-decoration-color var(--m-rapido); }
@media (hover: hover) { .articulo:hover .articulo__titulo { text-decoration-color: currentColor; } }
.articulo__linea { color: var(--descripcion); font-size: .9375rem; }
.articulos--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.articulos--cuatro .articulo__titulo { font-size: 1.125rem; text-wrap: pretty; }
/* cuatro por fila solo donde cada columna mide al menos 15rem (desde 72rem de ventana); antes, dos por fila */
@media (max-width: 71.99rem) {
  .articulos--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* en tableta las tres columnas son estrechas: el título baja un paso para no pasar de cuatro renglones */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .articulo__titulo { font-size: 1.125rem; }
}
@media (max-width: 47.99rem) {
  .articulos, .articulos--cuatro { grid-template-columns: 1fr; }   /* y cada tarjeta pasa a fila compacta: ver el bloque TELÉFONO */
}

/* ---------- campo de una línea con botón ----------
   La píldora (.campo-linea > input + button). Su nombre va encima, a la vista, con la pieza de todos los formularios:
   .formulario__campo > label + .campo-linea [+ .formulario__error] (más abajo, «formulario con estados»). El
   .formulario__campo puede ser el propio <form> (la entrada a la Estimación) o una caja dentro de él (el Monitor).
   Quedan con la forma anterior (etiqueta oculta y el nombre dentro del campo), porque la decisión no los nombra: el
   código de acceso del Perfil de Inversor y el código del cupón de la Estimación (anotado para Julio). */
.campo-linea {
  display: flex; gap: .5rem; max-width: 34rem; padding: .375rem .375rem .375rem 1.25rem;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-boton);
  transition: border-color var(--m-rapido);
}
.campo-linea:focus-within { border-color: var(--carbon); }
.campo-linea input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .5rem 0; }
.campo-linea input:focus { outline: none; }
.campo-linea input::placeholder { color: var(--gris); }
/* bajo 480 px el contenedor desaparece: el campo lleva su propia píldora (48 px) y el botón va debajo, a 12 px */
/* Ronda 9 (Julio, 13-oct-2026: el óvalo «es poco visible»): suelto, el campo blanco con la línea fina (1.2:1 sobre
   crema) casi no se distinguía de la página; su borde sube a --campo-borde-suelto, que pasa de 3:1 contra el blanco
   del campo y contra la banda, también arena (WCAG 1.4.11; con el de 3.4:1 sobre blanco quedaba en 2.8:1 sobre arena:
   auditoría de teléfono de la Ronda 9, R2). La píldora en renglón (de 480 a 767 px) toma el mismo borde: ver el bloque
   de teléfono. */
@media (max-width: 29.99rem) {
  .campo-linea { flex-direction: column; gap: .75rem; padding: 0; background: none; border: 0; border-radius: 0; }
  .campo-linea:focus-within { border-color: transparent; }
  .campo-linea input { min-height: 3rem; padding: .75rem 1.25rem; background: var(--blanco); border: 1px solid var(--campo-borde-suelto); border-radius: var(--radio-boton); }
  .campo-linea input:focus { outline: 2px solid var(--foco, var(--carbon)); outline-offset: 2px; border-color: var(--carbon); }
  .campo-linea .boton { width: 100%; }
}
/* lo mismo cuando la columna que lo contiene mide menos de 26rem (tableta, dentro de una dupla): antes el texto de
   ayuda se cortaba bajo el botón. La columna de texto de la dupla es el contenedor de la consulta. */
.dupla__texto:has(.campo-linea) { container-type: inline-size; }
@container (max-width: 26rem) {
  .campo-linea { flex-direction: column; gap: .75rem; padding: 0; background: none; border: 0; border-radius: 0; }
  .campo-linea:focus-within { border-color: transparent; }
  .campo-linea input { min-height: 3rem; padding: .75rem 1.25rem; background: var(--blanco); border: 1px solid var(--campo-borde-suelto); border-radius: var(--radio-boton); }
  .campo-linea input:focus { outline: 2px solid var(--foco, var(--carbon)); outline-offset: 2px; border-color: var(--carbon); }
  .campo-linea .boton { width: 100%; }
}

/* ---------- buscador de dirección (form[data-buscador]: portada y Asesoría Inmobiliaria; 16-oct-2026) ----------
   La píldora de siempre con la lista de sugerencias de Google (assets/js/buscador.js). Con la píldora en renglón, la
   lista cae bajo ella, encima de lo que sigue; cuando el campo y el botón van uno sobre otro (bajo 480 px, o en una
   columna angosta), la lista va entre los dos, en su lugar: queda sobre el teclado. */
.buscador .campo-linea { position: relative; }
.buscador__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 40;
  padding: .375rem 1.25rem .75rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: 1.25rem;
  box-shadow: 0 .75rem 2rem rgba(45, 45, 45, .12); text-align: left;
}
.buscador__lista { list-style: none; margin: 0; padding: 0; }
.buscador__lista li {
  display: grid; gap: .1rem; padding: .75rem; margin-inline: -.75rem;
  border-bottom: 1px solid var(--linea); cursor: pointer; line-height: 1.35;
}
.buscador__lista li b { font-weight: 600; }
.buscador__lista li span { font-size: .875rem; color: var(--gris); }
.buscador__lista li.es-activa { background: var(--crema); outline: 2px solid var(--carbon); outline-offset: -2px; border-radius: .75rem; border-bottom-color: transparent; }
@media (hover: hover) { .buscador__lista li:hover { background: var(--crema); } }
.buscador__pie { padding-top: .625rem; }
/* teléfono: el aviso («Selecciona una dirección…», «No encontramos…») va entre el nombre y el campo, sobre el teclado;
   bajo el botón quedaba tapado (Ronda 12, BU-M2) */
@media (max-width: 47.99rem), (max-height: 31.25rem) and (pointer: coarse) {   /* también con el teléfono acostado */
  .buscador > label { order: -2; }
  .buscador > :is(.formulario__error, [data-buscador-estado]) { order: -1; }
}
@media (max-width: 29.99rem) {
  .buscador__panel { position: static; padding: .25rem 1rem .625rem; box-shadow: none; border-color: var(--campo-borde-suelto); }
  .buscador__lista li { padding: .5rem .75rem; }
  .buscador__lista li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@container (max-width: 26rem) {
  .buscador__panel { position: static; padding: .25rem 1rem .625rem; box-shadow: none; border-color: var(--campo-borde-suelto); }
  .buscador__lista li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- acordeón sobrio ---------- */
.acordeon { border-top: 1px solid var(--linea); max-width: 44rem; }
.acordeon__item { border-bottom: 1px solid var(--linea); }
.acordeon__item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0; font-weight: 600;
}
.acordeon__item summary::-webkit-details-marker { display: none; }
/* el signo es «+» cerrado y «−» abierto (un «+» girado se leía como una «×» de cerrar o eliminar) */
.acordeon__item summary::after { content: "+"; flex: none; width: 1rem; text-align: center; font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--gris); }
.acordeon__item[open] summary::after { content: "\2212"; }
.acordeon__cuerpo { padding: 0 0 1.5rem; color: var(--gris); max-width: 40rem; }
/* acordeón exclusivo (details con el mismo name): al abrir uno se cierra el anterior; donde el navegador no lo conoce, cada uno abre por su cuenta */

/* ---------- lista fina: renglones con hairline (título + una línea), todo a la vista ----------
   ul.lista-fina > li > [.etiqueta | .rotulo] + h3 + p [+ .acciones]. Entregables y próximos servicios (Financiera), los
   dos modelos (Inmobiliaria). El título va con el peso y el tamaño del summary del acordeón; la descripción, en gris.
   La insignia (.etiqueta) va en renglón propio sobre el nombre; si parte en dos, los renglones quedan parejos. */
.lista-fina { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); max-width: 36rem; }
.lista-fina li { display: grid; gap: .25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linea); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.lista-fina h3 { font-size: 1.0625rem; letter-spacing: 0; line-height: 1.4; }
.lista-fina p { color: var(--gris); }
.lista-fina p strong { color: var(--tinta, var(--carbon)); }
.lista-fina .acciones { margin-top: .75rem; }
@media (max-width: 47.99rem) { .lista-fina .acciones .boton { width: 100%; } }   /* en teléfono, como los demás botones de la página */
.lista-fina .etiqueta { line-height: 1.5; text-wrap: balance; }
.lista-fina li:has(> .etiqueta) { gap: .3rem; }
.dupla__texto .lista-fina { margin-top: .25rem; }

/* ---------- formulario con estados ----------
   .formulario__campos (campos con aire entre sí) · .formulario__fila (dos por renglón) · .formulario__campo
   (label + control + .formulario__error[hidden]) · .formulario__pie · .formulario__fallo[hidden] (error de envío:
   aparece en su lugar y lo escrito se conserva) · .formulario__exito[hidden] (sustituye a campos y pie, sin marco
   propio: vive donde vivían los campos; p.titulo-3 + una frase en gris [+ .acciones con una salida]).
   El borde de un campo es --campo-borde: fino sobre la página y 3.4:1 dentro de una superficie blanca.
   En teléfono el botón de envío ocupa el ancho de los campos, como los demás botones de la página. */
.formulario { display: grid; gap: 1.25rem; max-width: 36rem; }
.formulario__campos { display: grid; gap: 1.25rem; }
.formulario__fila { display: grid; gap: 1.25rem; }
/* align-content: si en una fila un aviso ocupa dos renglones y el otro uno, los campos no se estiran para igualarse */
.formulario__campo { display: grid; gap: .5rem; align-content: start; }
/* el nombre del campo va ENCIMA y siempre a la vista (decisión de Julio, 7-oct-2026): nunca solo dentro del campo,
   donde desaparece al escribir (dentro, si acaso, un ejemplo). Una sola regla para la etiqueta: la de un .formulario y
   la de todo .formulario__campo que viva fuera de uno (el campo de una línea de la entrada a la Estimación y los dos
   del Monitor: .formulario__campo > label + .campo-linea). Sobre una banda toma el color del texto de la banda. */
.formulario label, .formulario__campo > label { font-size: .9375rem; font-weight: 500; }
.formulario :is(input, select, textarea) {
  width: 100%; min-height: 3rem; padding: .75rem 1.25rem;
  background: var(--blanco); border: 1px solid var(--campo-borde, var(--linea)); border-radius: var(--radio-boton);
}
.formulario textarea { min-height: 8rem; border-radius: 1rem; resize: vertical; }
/* Listas (16-oct-2026, la asesoría directa de Rediseño): la misma píldora que un campo, con su flecha. Mientras no se
   elige nada («Elige una opción»: vacía, deshabilitada y obligatoria) el texto va en gris. */
.formulario select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%232d2d2d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;
}
.formulario select:invalid { color: var(--gris); }
/* teléfono: 16 px (con menos, el iPhone acerca la página al tocar) y la flecha más cerca del borde: así caben
   «Remodelación completa» y «Solo estoy explorando» a 320 px (Ronda 12, AD-M1) */
@media (max-width: 29.99rem) { .formulario select { font-size: 1rem; padding-left: 1rem; padding-right: 2.25rem; background-position: right .875rem center; } }
.formulario select option { color: var(--carbon); }
.formulario :is(input, select, textarea):focus { outline: 2px solid var(--foco, var(--carbon)); outline-offset: 2px; border-color: var(--carbon); }
/* campo inválido: el borde es del CAMPO. Un grupo de opciones (role="radiogroup") es un contenedor y lo dice con
   .opciones.es-invalido (el borde de cada píldora) y su línea de error, no con un recuadro alrededor (11-oct-2026).
   El :where() deja la especificidad de la regla como estaba. */
.formulario [aria-invalid="true"]:where(:not([role="radiogroup"])) { border: 2px solid var(--carbon); }
.formulario__error { font-size: .875rem; font-weight: 500; }
.formulario__opcional { font-weight: 400; color: var(--gris); }
.formulario__pie { display: grid; gap: 1rem; }
/* el borde del aviso de error sigue al color del texto: carbón en la página o en una tarjeta, crema suelto sobre la banda de carbón */
.formulario__fallo { padding: 1.25rem 1.5rem; border: 1px solid currentColor; border-radius: 1rem; font-size: .9375rem; }
.formulario__exito { display: grid; gap: .5rem; }
.formulario__exito .titulo-3 ~ p { color: var(--gris); text-wrap: pretty; }
.formulario__exito .acciones { margin-top: .75rem; }
.formulario__exito:focus, .formulario__fallo:focus { outline: none; }
.formulario[data-estado="enviado"] .formulario__campos, .formulario[data-estado="enviado"] .formulario__pie { display: none; }
@media (min-width: 30rem) { .formulario__fila { grid-template-columns: 1fr 1fr; } }
/* Dos preguntas lado a lado con etiquetas de distinto largo (la asesoría directa de Rediseño, 16-oct-2026): las
   etiquetas comparten su renglón, los controles quedan parejos y cada aviso va debajo del suyo */
@media (min-width: 48rem) {
  .formulario__fila--pareja { grid-template-rows: auto auto auto; row-gap: .5rem; }
  .formulario__fila--pareja > .formulario__campo { grid-row: span 3; grid-template-rows: subgrid; }
}
/* bajo 768 px, una pregunta por renglón: en dos columnas el texto de una lista no cabía («Elige una opción» a 480 px) */
@media (max-width: 47.99rem) { .formulario__fila--pareja { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 47.99rem) { .formulario__pie .boton { width: 100%; } }

/* opciones de un toque: radio o casilla como píldora (label.opcion > input + span), dos por renglón.
   Viven dentro de un .formulario; cada página ajusta solo la talla y el fondo de la píldora. */
.formulario .opciones { display: grid; gap: .75rem; }
.formulario .opciones legend { padding: 0; margin-bottom: .25rem; font-size: .9375rem; font-weight: 500; }
.formulario .opciones__lista { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.formulario .opcion { position: relative; display: block; }
.formulario .opcion--ancha { grid-column: 1 / -1; }
.formulario .opcion input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; opacity: 0; pointer-events: none; }
.formulario .opcion span {
  display: grid; align-content: center; gap: .1rem; min-height: 3rem; padding: .75rem 1rem;
  border: 1px solid var(--campo-borde, var(--linea)); border-radius: 1rem; background: var(--crema);
  font-size: .9375rem; font-weight: 500; line-height: 1.35; cursor: pointer;
  transition: background-color var(--m-rapido), color var(--m-rapido), border-color var(--m-rapido);
}
@media (hover: hover) { .formulario .opcion:hover span { border-color: var(--carbon); } }
.formulario .opcion small { font-size: .8125rem; font-weight: 400; color: var(--gris); }
.formulario .opcion input:checked + span { background: var(--carbon); border-color: var(--carbon); color: var(--crema); }
.formulario .opcion input:checked + span small { color: var(--gris-claro); }
.formulario .opcion input:focus-visible + span { outline: 2px solid var(--foco, var(--carbon)); outline-offset: 3px; }
.formulario .opciones.es-invalido .opcion span { border-color: var(--carbon); }   /* grupo sin respuesta */
@media (max-width: 29.99rem) {
  .formulario .opciones__lista { grid-template-columns: 1fr; }
  .formulario .opcion--ancha { grid-column: auto; }
}
/* casilla con su texto (consentimientos) */
.casilla { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; color: var(--gris); cursor: pointer; max-width: 32rem; }
.casilla input { flex: none; width: 1.25rem; height: 1.25rem; min-height: 0; margin: .15rem 0 0; padding: 0; accent-color: var(--carbon); }

/* ---------- sección partida (.partida) y cierre con formulario (.cierre) ----------
   Dos columnas sobre la retícula: el texto en las columnas 1 a 5 y, tras una de aire, el lado en las 7 a 12. Bajo
   64rem se apilan: texto y, debajo, el lado. Sin foto alta al lado.
   .partida   div.contenedor.partida > .partida__texto (antetítulo, h2, .apoyo [+ .partida__foto]) + .partida__lado.
              Para una sección sin foto cuyo contenido es una lista o un acordeón («¿Qué incluye el informe?»,
              «Preguntas frecuentes», «¿Cómo se calcula?»). El lado puede ser la propia lista (ul.lista-fina.partida__lado,
              div.acordeon.partida__lado) o una caja que la contiene; en los dos casos ocupa toda su columna.
              Se alinea arriba y el texto acompaña al bajar si el lado crece (varias respuestas abiertas).
              .partida__foto: UNA foto de compañía bajo el texto, en 16:9; solo donde hay dos columnas.
   .cierre    div.contenedor.cierre > .cierre__texto (antetítulo, h2, .apoyo, [p.cierre__nota], plazo) + .cierre__lado.
              El cierre de una landing, sobre LA banda dorada: .cierre__lado.tarjeta lleva solo campos, avisos y botón;
              todo lo que se dice del formulario va en .cierre__texto (p.cierre__nota: la frase que habla de los
              campos; se retira al enviar). Sobre carbón, el Monitor: .cierre__lado sin tarjeta, con los campos sueltos.
              Las dos columnas se centran en vertical. Sin foto. La sección es de mensaje: cabe en una pantalla. */
.partida, .cierre { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2rem; align-items: start; }
.partida__texto, .cierre__texto { grid-column: 1 / 6; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-content: start; }
.partida__lado, .cierre__lado { grid-column: 7 / 13; grid-row: 1; min-width: 0; }
.partida__texto { position: sticky; top: calc(var(--enc-alto) + 2rem); }
.partida__lado, .partida__lado > :is(.acordeon, .lista-fina) { max-width: none; }
.partida__foto { margin-top: .75rem; }
.partida__foto img { width: 100%; aspect-ratio: 16 / 9; max-height: var(--img-tope); object-fit: cover; border-radius: var(--radio); }
.cierre { align-items: center; }
.cierre__nota { max-width: 34rem; color: var(--gris); text-wrap: pretty; }
.cierre:has(.formulario[data-estado="enviado"]) .cierre__nota { display: none; }
.cierre__lado.tarjeta { padding: clamp(1.5rem, 3vw, 2.5rem); }
.cierre__lado .formulario { max-width: none; }
.cierre__lado .formulario__fallo { padding-block: .875rem; }   /* el aviso de error de envío, compacto: con él a la vista el cierre sigue cabiendo en una pantalla */
/* con texto y formulario lado a lado, el campo de mensaje no decide el alto de la banda (alto y mínimo: un textarea
   de tres renglones mide más por sí solo). Apilado vuelve al del formulario (8rem) y sigue pudiendo estirarse. */
@media (min-width: 64rem) {
  .cierre__lado textarea { height: 6rem; min-height: 6rem; }
}
/* de 64rem a 72rem (iPad horizontal) la tarjeta de seis columnas dejaba campos de 182 px y cortaba el ejemplo del
   correo: toma siete y el texto sigue en cinco */
@media (min-width: 64rem) and (max-width: 71.99rem) {
  .cierre__lado.tarjeta { grid-column: 6 / 13; }
}
@media (max-width: 63.99rem) {
  .partida__texto, .cierre__texto, .partida__lado, .cierre__lado { grid-column: 1 / -1; grid-row: auto; }
  .partida__texto { position: static; }
  .partida__foto { display: none; }
}
@media (max-width: 47.99rem) {
  .cierre__nota { font-size: 1rem; }   /* como el texto de una tarjeta: el primer campo asoma antes */
}

/* ---------- marco para imagen pendiente (la única pieza visual de su sección; nunca junto a otra foto) ---------- */
.imagen-pendiente {
  display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; max-height: var(--img-alto); padding: 1.5rem; text-align: center;
  border-radius: var(--radio); background: var(--blanco); color: var(--gris); font-size: .875rem; text-wrap: pretty;
}
.seccion--fondo .imagen-pendiente { background: var(--crema); }
.imagen-pendiente p { max-width: 22rem; }

/* ---------- piezas pequeñas ---------- */
/* rótulo: píldora pequeña para «Ejemplo», «Prototipo» o un estado, junto a un texto */
.rotulo {
  display: inline-block; margin-right: .75rem; padding: .2rem .6rem;
  border: 1px solid var(--linea); border-radius: var(--radio-boton);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
}
/* ficha: lista de datos «etiqueta · valor» sin reglas (dl.ficha > div > dt + dd); la columna de la etiqueta se ajusta con --ficha-col */
dl.ficha { display: grid; gap: .75rem; margin: .5rem 0 0; }
dl.ficha > div { display: grid; grid-template-columns: var(--ficha-col, 7.5rem) minmax(0, 1fr); column-gap: 1rem; align-items: baseline; }
dl.ficha dt { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
dl.ficha dd { margin: 0; }
/* barra de avance fina (--avance de 0 a 1): esperas con progreso conocido dentro de las herramientas */
.barra { width: 100%; max-width: 20rem; height: 4px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.barra i { display: block; height: 100%; width: calc(var(--avance, 0) * 100%); background: var(--dorado); transition: width var(--carga-dur, var(--m-medio)) var(--carga-curva, linear); }

/* ---------- carga viva: la espera de una herramienta que trabaja (Ronda 10, 14-oct-2026) ----------
   La Estimación mientras calcula y el generador de Rediseño mientras genera. Julio: «la animación es muy plana; me
   gusta más la que tenemos en el sitio actual; más dinámica, más cambiante y da la sensación de que se están haciendo
   varias cosas para que el usuario no salga». Es la del sitio actual (EstimationLoadingOverlay y DesignLoadingOverlay,
   con sus cuatro pasos y sus mismas palabras) hecha con las piezas de aquí: un emblema dorado que respira con dos
   puntos en órbita, los pasos que se cumplen uno tras otro (el que corre late y lleva puntos suspensivos que se
   escriben; el cumplido pasa a palomita sobre dorado) y la barra del sistema, que no se detiene. Sin degradados (regla
   del sistema). Con «reducir movimiento» nada gira ni late: los pasos y la barra cambian de estado, sin animarse.
   Marcado: .carga-viva > .carga-viva__emblema (dos .carga-viva__orbita > i y .carga-viva__nucleo > svg) · el título de
   la pantalla · ol.carga-viva__pasos > li.carga-viva__paso[data-carga-paso][data-estado] > .carga-viva__icono (svg del
   paso + svg.carga-viva__palomita) + .carga-viva__texto · .barra[data-carga-barra] > i. La mueve CargaViva (sitio.js). */
.carga-viva { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.carga-viva .antetitulo { justify-content: center; }
.carga-viva__emblema { position: relative; width: 5.5rem; height: 5.5rem; margin-bottom: .25rem; }
.carga-viva__nucleo {
  position: absolute; inset: .875rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--dorado); color: var(--carbon); box-shadow: 0 .5rem 1.25rem rgba(45, 45, 45, .12);
}
.carga-viva__nucleo svg { width: 1.75rem; height: 1.75rem; }
.carga-viva__orbita { position: absolute; inset: 0; }
.carga-viva__orbita i { position: absolute; left: 50%; top: 0; width: .625rem; height: .625rem; margin-left: -.3125rem; border-radius: 50%; background: var(--dorado); }
.carga-viva__orbita--lenta i { top: auto; bottom: 0; width: .5rem; height: .5rem; margin-left: -.25rem; background: var(--carbon); opacity: .45; }
.carga-viva__lugar {
  max-width: 26rem; margin-top: -.25rem; color: var(--gris); font-size: .9375rem; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;   /* una dirección larga, en dos renglones como mucho */
}
.carga-viva__lugar svg { display: inline-block; width: 1rem; height: 1rem; margin-right: .3em; vertical-align: -.15em; }   /* el alfiler va pegado a la primera palabra */
.carga-viva__pasos { list-style: none; margin: .25rem 0 0; padding: 0; width: 100%; max-width: 26rem; display: grid; gap: .375rem; text-align: left; }
.carga-viva__paso { display: flex; align-items: center; gap: .875rem; min-height: 3rem; padding: .5rem 1.25rem .5rem .75rem; border-radius: .875rem; color: var(--gris); font-size: .9375rem; line-height: 1.4; }   /* a la derecha, lugar para los puntos que cuelgan (Ronda 10, B1) */
.carga-viva__paso[data-estado="espera"] .carga-viva__icono { opacity: .5; }   /* el texto se queda en gris de página, 5.9:1 (con el renglón atenuado medía 2.1:1: auditoría Ronda 10, M2) */
.carga-viva__paso[data-estado="curso"] { background: var(--arena); color: var(--carbon); }
.carga-viva__paso[data-estado="listo"] { color: var(--carbon); }
.carga-viva__icono { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--linea-base); color: var(--gris); }
.carga-viva__icono svg { width: 1.125rem; height: 1.125rem; }
.carga-viva__paso[data-estado="curso"] .carga-viva__icono { background: var(--blanco); color: var(--carbon); box-shadow: 0 0 0 2px var(--dorado); }
.carga-viva__paso[data-estado="listo"] .carga-viva__icono { background: var(--dorado); color: var(--carbon); }
.carga-viva__palomita, .carga-viva__paso[data-estado="listo"] .carga-viva__icono svg:not(.carga-viva__palomita) { display: none; }
.carga-viva__paso[data-estado="listo"] .carga-viva__palomita { display: block; }
.carga-viva__texto { font-weight: 500; }
/* los puntos suspensivos del paso que corre cuelgan tras la última palabra sin ocupar ancho (margen negativo de su
   mismo tamaño): nunca bajan solos a otro renglón y, al empezar a correr un paso, nada se mueve */
.carga-viva__texto::after { content: "\2026"; display: inline-block; width: 1.1em; margin-right: -1.1em; text-align: left; visibility: hidden; }
.carga-viva__paso[data-estado="curso"] .carga-viva__texto::after { visibility: visible; }
.carga-viva .barra { max-width: 26rem; height: 6px; margin-top: .375rem; background: var(--linea-base); }
@media (prefers-reduced-motion: no-preference) {
  .carga-viva__nucleo { animation: carga-respira 2.4s ease-in-out infinite; }
  .carga-viva__orbita { animation: gira 3s linear infinite; }
  .carga-viva__orbita--lenta { animation-duration: 4.5s; animation-direction: reverse; }
  .carga-viva__paso { transition: background-color .4s, color .4s, opacity .4s; }
  .carga-viva__paso[data-estado="curso"] .carga-viva__icono svg { animation: carga-late 1.2s ease-in-out infinite; }
  /* los puntos suspensivos del paso que corre se escriben solos: el «…» se descubre de a un punto */
  .carga-viva__paso[data-estado="curso"] .carga-viva__texto::after { animation: carga-puntos 1.4s steps(4, end) infinite; }
  .carga-viva__paso[data-estado="listo"] .carga-viva__palomita { animation: carga-aparece .35s ease-out; }
}
@media (prefers-reduced-motion: reduce) { .carga-viva .barra i { transition: none; } }
/* teléfono en una ventana baja (iPhone SE con las barras de Safari, 375 × 548; 320 × 568; 360 × 640): emblema más chico,
   menos aire y la dirección en un renglón, para que el último paso, la barra y la línea de paciencia («No cierres esta
   página») entren en la primera vista (auditoría Ronda 10, M1; medido: a 375 × 548 sobran 13 px) */
@media (max-width: 47.99rem) and (max-height: 40rem) {
  .carga-viva { gap: .625rem; }
  .carga-viva__emblema { width: 4rem; height: 4rem; margin-bottom: 0; }
  .carga-viva__nucleo { inset: .625rem; }
  .carga-viva__nucleo svg { width: 1.375rem; height: 1.375rem; }
  .carga-viva__lugar { -webkit-line-clamp: 1; }
  .carga-viva__pasos { gap: .25rem; margin-top: 0; }
  .carga-viva__paso { min-height: 2.5rem; padding-block: .25rem; line-height: 1.3; }
}
@keyframes carga-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes carga-late { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.85); opacity: .55; } }
@keyframes carga-puntos { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes carga-aparece { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- comparador antes / después (dos capas, un corte que se arrastra o se mueve con el teclado) ----------
   Marcado: .comparador[data-comparador] > .comparador__capa (antes) + .comparador__capa--despues + .comparador__marca
   + .comparador__linea > i + input.comparador__rango; debajo, .comparador__pie («Antes · Después»). El corte es --corte. */
.comparador {
  position: relative; overflow: hidden; border-radius: var(--radio); aspect-ratio: 4 / 3; background: var(--crema);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; --corte: 50%;
}
.comparador__capa { position: absolute; inset: 0; }
.comparador__capa img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comparador__capa--despues { clip-path: inset(0 0 0 var(--corte)); }
/* marca de agua: texto pequeño sobre crema sólida (sin capas translúcidas) */
.comparador__marca {
  position: absolute; right: .75rem; bottom: .75rem; padding: .2rem .55rem; border-radius: var(--radio-boton);
  background: var(--crema); border: 1px solid var(--linea); color: var(--carbon);
  font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; pointer-events: none;
}
.comparador__linea { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; margin-left: -1px; background: var(--blanco); pointer-events: none; }
.comparador__linea i {
  position: absolute; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: var(--blanco); border: 1px solid var(--linea);
}
.comparador__linea svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--carbon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.comparador__rango { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparador:focus-within { outline: 2px solid var(--carbon); outline-offset: 3px; }
.comparador__pie { display: flex; justify-content: space-between; gap: 1rem; padding-inline: .25rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
/* con el dedo (teléfono, o cualquier pantalla cuyo puntero es un dedo) el control nativo que cubre el comparador no
   recibe el toque: en Chrome de Android llevaba el corte bajo el dedo en cuanto se apoyaba, también al empezar a bajar
   por la página. El gesto lo atiende el JavaScript de la herramienta en el propio comparador (solo mueve el corte si
   el gesto es horizontal); el control sigue ahí para el teclado y el lector de pantalla. El pellizco para ampliar
   vuelve a estar permitido sobre la imagen. */
@media (max-width: 47.99rem), (pointer: coarse) {
  .comparador__rango { pointer-events: none; }
  .comparador { touch-action: pan-y pinch-zoom; }
}

/* ---------- interruptor de publicación ----------
   Todo rótulo, franja o frase que solo existe en el prototipo («Ejemplo», «Prototipo: …», [DATO: …], simuladores)
   lleva data-prototipo. Al publicar basta poner class="publicado" en <html> (lo hace `propagar.py --publicar` en las
   16 páginas; `--prototipo` la quita): nada de eso se pinta. data-prototipo="dato" marca además lo que espera un dato
   de Julio. comprobar.py (punto 10) falla si queda un [DATO], un [IMAGEN] o un «Prototipo» a la vista sin la marca. */
html.publicado [data-prototipo] { display: none !important; }

/* anclas internas (#caminos, #proceso, #sesion): el encabezado fijo no tapa el título */
main [id] { scroll-margin-top: calc(var(--enc-alto) + 1.5rem); }
/* si el ancla es la sección entera, su borde queda justo bajo el encabezado compacto: la banda llena la pantalla y el aire lo pone la sección */
main .seccion[id] { scroll-margin-top: var(--enc-compacto); }

/* ============================================================
   TELÉFONO · Ronda 4 (brief/RONDA-4-MOVIL.md) · todo bajo 48rem
   Aquí está, junto, lo que el teléfono resuelve distinto que el
   escritorio. Nada de este bloque se aplica desde 48rem: el
   escritorio y la tableta no cambian. Lo que cada pieza ya hacía en
   teléfono (una columna, plegables, campo de una línea apilado)
   sigue junto a su pieza, más arriba.
   Se mide con `medir.py --movil` a 390 × 664 (T1: iPhone con las
   barras de Safari a la vista) y 390 × 844 (T2).
   Dos tramos:
   · bajo 30rem (480 px), EL TELÉFONO: las fotos junto a un texto van
     en franja y con tope de 240 px (subloque «solo teléfono»);
   · de 30rem a 48rem (teléfono acostado, tableta chica): la misma
     forma de una columna, con las fotos en 3:2 y el tope de 320 px
     que tenían antes de la Ronda 4.
   Reglas:
   · La primera pantalla vende: en el héroe el texto va primero y la
     foto después, con el 32 % del alto como máximo (svh). Título,
     apoyo y botón principal caben en T1 sin scroll.
   · Una idea, una pantalla: los mosaicos (.caminos, .articulos) son
     FILAS COMPACTAS: miniatura a la izquierda (96 px; 80 bajo 400 px
     de ancho) y etiqueta, título y línea a la derecha; toda la fila
     es el enlace.
   · Tacto: objetivos de 44 px y 8 px entre ellos; los botones
     principales, a todo el ancho y al pie de su bloque; lo que se
     toca responde al dedo (:active), y ningún :hover se queda pegado.
   · Lectura: cuerpo de 16 a 17 px, h1 32, h2 26, márgenes de 20 px,
     48 px de aire arriba y abajo de cada banda.
   · Encabezado de 56 px, siempre (no cambia de alto al bajar).
   · Alturas en svh, nunca vh; lo fijo respeta env(safe-area-inset-*).
   Qué hace cada pieza en teléfono y las recetas para lo propio de
   cada página: _notas/sistema.md, «Teléfono (Ronda 4)».
   ============================================================ */
@media (max-width: 47.99rem) {

  /* ---------- piezas de un solo tamaño (Ronda 9, Julio, 13-oct-2026) ----------
     .sin-telefono no se pinta aquí (la sección «¿Quiénes somos?» de la portada: «en esta versión mobile quitemos la
     sección»; el llamado del informe de Financiera, que en teléfono baja tras sus tres bloques). .solo-telefono es su
     pareja: solo se pinta aquí (ver el final de esta hoja). Si al quitar una sección quedan juntas dos bandas del mismo
     color, las que siguen cambian de banda solo en teléfono para que crema y arena se sigan alternando:
     .seccion--fondo-telefono (arena) y .seccion--crema-telefono (crema, con las líneas de la página). */
  .sin-telefono { display: none !important; }
  .seccion--fondo-telefono { background: var(--arena); --linea: var(--linea-arena); --divisor: var(--divisor-arena); --borde-tarjeta: var(--borde-arena); }
  .seccion--crema-telefono { background: var(--crema); --linea: var(--linea-base); --divisor: var(--divisor-base); --borde-tarjeta: initial; }
  /* el párrafo de apoyo que en teléfono queda pegado al primer paso de un proceso y se confundía con su descripción
     (Financiera, «Los 4 pilares del estudio»: «hazlo un poco más negrito para que se vea distinto») */
  .apoyo--fuerte { font-weight: 500; color: var(--tinta, var(--carbon)); text-wrap: balance; }   /* balance: con «pretty» dejaba «la pena.» sola a 320 y a 412 px (auditoría Ronda 9, R3) */
  .campo-linea { border-color: var(--campo-borde-suelto); }   /* la píldora en renglón, de 480 a 767 px (bajo 480 px no pinta borde: lo lleva el campo) */
  /* el llamado que en teléfono va después de una lista plegable (Financiera, «Así se ve tu informe final») */
  .acciones--tras-pilares { margin-top: 1.5rem; }

  /* ---------- tokens ---------- */
  :root {
    --enc-alto: 3.5rem;                        /* 56 px: el mismo alto al abrir y al bajar (en rem: lo leen los JavaScript de las herramientas) */
    --margen: clamp(1.25rem, 5vw, 2.5rem);     /* 20 px a cada lado hasta 400 px de ancho; después crece con la ventana */
    --seccion: 6rem;                           /* 48 px arriba y 48 abajo de cada banda */
    --apertura: 1.5rem;                        /* aire sobre la primera pieza de la página */
    --img-alto: 20rem;                         /* tope de alto de toda imagen de contenido de 480 a 767 px: 320 px, el de antes de la Ronda 4 (bajo 480 px, 240: ver «solo teléfono») */
    --img-tope: var(--img-alto);               /* la foto junto a un texto ya no sigue al alto de la ventana (el 46vh era de escritorio) */
    --fila-foto: 6rem;                         /* miniatura de una fila compacta: 96 px (80 bajo 400 px de ancho y 72 bajo 375: ver «filas compactas») */
    --toque: 2.75rem;                          /* 44 px: alto mínimo de todo lo que se toca */
  }
  h3, .titulo-3 { text-wrap: balance; }        /* ningún renglón viudo en títulos (h1 y h2 ya lo llevan) */
  /* un antetítulo que parte en dos renglones («Menos ruido. Mejores decisiones / inmobiliarias.», en el Monitor): la
     raya acompaña al primer renglón, como en el héroe, y no flota entre los dos. En un renglón queda donde estaba
     (medio renglón menos la mitad de la raya; donde el navegador no conoce «lh», la medida del antetítulo de serie).
     Solo el antetítulo de puro texto que abre una pieza del sistema (cabecera, dupla, partida, cierre): el que lleva
     un rótulo dentro («Ejemplo») sigue centrando la raya y el texto contra él, y los de una herramienta (resultado y
     reporte de la Estimación) los acomoda su hoja. */
  :is(.cabecera, .cabecera--fila > div, .dupla__texto, .partida__texto, .cierre__texto) > .antetitulo:not(:has(*))::before { align-self: flex-start; margin-top: calc(.8em - 1px); margin-top: calc(.5lh - 1px); }

  /* ---------- llegada por ancla a una sección ----------
     En teléfono una sección aterriza 32 px más arriba que en escritorio: bajo el encabezado quedan 16 px de su banda y
     no los 48 de su aire (el 8 % de la primera pantalla, vacío). Con eso entran a la primera el botón o el primer campo
     de lo que se fue a buscar («Conoce nuestro proceso», «Comenzar ahora», el formulario de «Enviar consulta», los recorridos). */
  main .seccion[id] { scroll-margin-top: calc(var(--enc-alto) - 2rem); }

  /* ---------- doble toque ----------
     Dos toques seguidos sobre lo que se toca varias veces («+» y «−» de un contador, una opción y «Continuar») no
     amplían la página en Safari de iOS. Solo sobre los controles: el pellizco sigue ampliando en todas partes. */
  :is(button, .boton, .enlace, .enlace-texto, summary, label.opcion, label.ficha, .casilla) { touch-action: manipulation; }

  /* ---------- encuadre propio del teléfono ----------
     El encuadre de una foto va en su <img> (style="object-position: …") y es el del 3:2 de escritorio. Si la franja
     del teléfono pide otro, el mismo style lo dice con --encuadre-movil y solo se lee aquí, bajo 48rem:
       <img … style="object-position: 50% 66%; --encuadre-movil: 50% 72%">
     (el !important es para ganarle al estilo en línea; la regla solo toca las fotos que declaran la variable) */
  img[style*="--encuadre-movil"] { object-position: var(--encuadre-movil) !important; }

  /* ---------- un marco de herramienta sube bajo el encabezado con 8 px de aire ----------
     marco.scrollIntoView() deja el borde de la .superficie (o de lo marcado con data-medir="paso") a 8 px del
     encabezado, tenga id o no: es la posición contra la que medir.py revisa PASO (pantalla útil de T1 menos 8 px). */
  main :is(.superficie, [data-medir~="paso"]) { scroll-margin-top: calc(var(--enc-alto) + .5rem); }

  /* ---------- encabezado: 56 px, logo de 76 px en un objetivo de 44 de alto ---------- */
  .encabezado__logo, html.compacto .encabezado__logo { display: flex; align-items: center; width: 4.75rem; height: var(--toque); }
  .encabezado__logo .logo { width: 100%; }

  /* ---------- menú: las seis entradas arriba y el contacto abajo, al alcance del pulgar ----------
     Cabe entero en T1 (390 × 664) y en un Android chico (360 × 640): seis renglones de 56 px, el botón de WhatsApp a
     todo el ancho y el correo, cada uno con su objetivo de 44 px o más. */
  .menu {
    display: flex; flex-direction: column;
    padding: .5rem var(--margen) calc(1.25rem + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
  .menu__lista a { display: flex; align-items: center; min-height: 3.5rem; padding: .5rem 0; }
  /* la página actual: en carbón, como las demás, y con el acento (un punto dorado). En gris, entre cinco entradas en
     carbón, se leía como opción deshabilitada y no como «estás aquí» */
  .menu__lista a[aria-current="page"] { color: inherit; }
  .menu__lista a[aria-current="page"]::before { content: ""; flex: none; width: .5rem; height: .5rem; margin-right: .625rem; border-radius: 50%; background: var(--dorado); }
  .menu__contacto { margin-top: auto; padding-top: 1.5rem; gap: .5rem; justify-items: stretch; }
  .menu__contacto .boton { width: 100%; }
  .menu__contacto a:not(.boton) { display: flex; align-items: center; justify-content: center; min-height: var(--toque); }

  /* ---------- pie: cada enlace es un renglón de 44 px ---------- */
  .pie { padding-block: 3rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .pie__arriba { row-gap: 2rem; }
  .pie__columna { gap: 0; }
  .pie__columna .etiqueta { margin-bottom: .25rem; }
  .pie__columna a, .pie__abajo a { display: flex; align-items: center; min-height: var(--toque); }
  .pie__marca p { text-wrap: balance; }        /* la descripción, en renglones parejos: «profesional.» no queda sola en el último */
  /* Contacto: WhatsApp y el correo, cada uno en su renglón; las dos redes (los dos últimos enlaces), lado a lado y
     alineadas con las dos columnas de arriba. El pie mide un renglón menos */
  .pie__columna:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); }
  .pie__columna:last-child > * { grid-column: 1 / -1; }
  .pie__columna:last-child > a:nth-last-child(-n+2) { grid-column: auto; }
  .pie__abajo { align-items: center; gap: 0 2rem; margin-top: 2rem; padding-top: .75rem; }

  /* ---------- enlaces sueltos y acciones: 44 px de alto sin cambiar su aspecto ---------- */
  /* el relleno completa los 44 px sea cual sea la letra del enlace (1lh = su renglón: 27 px a 17 px de letra, 24 a 15);
     donde el navegador no conoce «lh» queda el relleno fijo. El enlace sigue partiendo dentro y la flecha sigue a la última palabra */
  a.enlace { padding-block: .55rem; padding-block: max(.25rem, calc((var(--toque) - 1lh) / 2)); }
  .acciones > .enlace-texto { min-height: var(--toque); }
  .acciones { gap: .75rem 1.5rem; }
  .acciones--par { gap: .75rem; }
  /* un enlace DENTRO de una frase (una nota, un dato de una ficha, un aviso de formulario): 44 px de alto para el dedo
     sin mover el renglón. Es una caja en línea: su relleno vertical agranda lo que se toca y no cambia el alto del
     renglón ni la posición de nada («Aviso de Privacidad» medía 121 × 16 px). La caja en línea mide lo que su letra
     (unos 1.2em con Inter), no lo que su renglón: el relleno completa los 44 px con cualquier talla (12 px a 17 px de
     letra, 14 a 13). */
  :where(.dato, dl.ficha, .formulario__error) a:not(.boton, .enlace) { padding-block: calc((var(--toque) - 1.2em) / 2); }   /* :where: no pesa; un enlace que una hoja pinte como caja (inline-flex de 44 px) lo anula con padding-block: 0 */

  /* ---------- cabecera de sección ---------- */
  .cabecera { gap: .75rem; margin-bottom: 1.5rem; }
  .cabecera--fila { gap: .25rem 2rem; }
  .cabecera--fila > div { gap: .75rem; }
  .cabecera--fila > .apoyo { margin-top: .5rem; }   /* los 4 px son la medida de un a.enlace (trae su relleno de 44 px); el párrafo de apoyo va a 12, como en toda cabecera */
  .cabecera--junta, .cabecera--centrada { margin-bottom: 1.25rem; }      /* la cabecera que cierra su contenedor sigue sin aire debajo (regla de arriba) */

  /* ---------- héroe: el texto primero; la foto después y más baja ----------
     En T1 (664 px de alto, 608 bajo el encabezado) se ven sin scroll el título, el apoyo y los dos botones; la foto
     va debajo. De 480 a 767 px sigue en 3:2 y a todo el ancho: su tope es el 46 % del alto de la ventana (el mismo
     factor del escritorio) y nunca más de 26rem, así una tableta chica en vertical la enseña entera (670 × 416 a
     744 × 1133) y un teléfono acostado no la deja ocupar la pantalla (piso de 144 px: tampoco queda en una tira).
     Bajo 480 px es una franja: ver «solo teléfono». Los botones ocupan todo el ancho, uno bajo otro (lado a lado
     desde 480 px). */
  .heroe__in { row-gap: 1.75rem; }
  .heroe__texto { gap: 1rem; }
  .heroe__texto .acciones { width: 100%; margin-top: .75rem; }
  .heroe__texto .acciones > .boton { flex: 1 1 100%; }
  @media (min-width: 30rem) { .heroe__texto .acciones--par > .boton { flex: 1 1 calc(50% - .375rem); } }   /* teléfono ancho: los dos, lado a lado */
  .heroe__imagen img { max-height: max(9rem, min(46vh, 26rem)); max-height: max(9rem, min(46svh, 26rem)); }
  /* Ronda 9 (Julio, 13-oct-2026): «La imagen debe ir después del título y antes de la descripción». En las portadas que
     lo llevan (.heroe--foto-tras-titulo: portada, Inmobiliaria, Financiera, Rediseño, Estimación y Nosotros) el bloque
     de texto deja de pintar caja (display: contents) y sus piezas se acomodan en la retícula del héroe: antetítulo y
     título, la foto, y después la descripción, los botones y la nota. El marcado no cambia: el lector de pantalla y el
     teclado siguen el orden de siempre. Un solo hueco para todas: el que había dentro del bloque de texto (con más
     aire alrededor de la foto, el botón principal de Rediseño bajaba 8 px de la primera pantalla a 390 × 664). */
  /* Solo en vertical: con el teléfono acostado (667 × 375, 640 × 360) la foto entre el título y la descripción sacaba de
     la pantalla el botón principal en las seis páginas, de 49 a 172 px (auditoría Ronda 9, R1); ahí sigue el orden de
     antes, texto y botones primero. */
  @media (orientation: portrait) {
    .heroe--foto-tras-titulo .heroe__in { row-gap: 1rem; }
    .heroe--foto-tras-titulo .heroe__texto { display: contents; }
    .heroe--foto-tras-titulo .heroe__texto > * { grid-column: 1 / -1; order: 2; }
    .heroe--foto-tras-titulo .heroe__texto > :is(.antetitulo, h1) { order: 0; }
    .heroe--foto-tras-titulo .heroe__imagen { order: 1; }
  }
  /* si el segundo botón del héroe no cabe en la primera pantalla, baja de rango: .acciones--cede en el grupo lo pinta
     como enlace de texto (mismo objetivo de 44 px; no desaparece). Hoy ninguna página lo necesita: los dos caben. */
  .acciones--cede > .boton--contorno {
    flex: 0 1 auto; align-self: center; min-height: var(--toque); margin-inline: auto; padding: .5rem .25rem; border-color: transparent; background: none; color: inherit;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  }

  /* ---------- dupla: la foto arriba (o abajo, si el texto va primero en el HTML), con el tope de imagen ----------
     Bajo 480 px la foto de compañía y la que va sobre un campo de una línea son franjas 2:1: ver «solo teléfono». */
  .dupla { row-gap: 1.5rem; }
  .dupla__texto { gap: 1rem; }
  .dupla__texto > .acciones, .dupla__texto > .enlace { margin-top: 0; }   /* la hija directa de la columna, que ya trae 16 px de hueco; la .acciones de un renglón de .lista-fina conserva su margen */
  .dupla__texto .acciones > .boton { flex: 1 1 100%; }

  /* ---------- pilares: apilados, con su línea ---------- */
  .dupla + .pilares { margin-top: 1.25rem; }
  .pilar, .pilar:first-child, .pilar:last-child { padding: .75rem 0; }
  /* pilares plegables: el acordeón del sistema, con el primero abierto (lo deja así sitio.js; sin JavaScript, todos
     abiertos). Líneas finas, como todo acordeón: el <li> ya no pone ni su aire ni su línea (los pone el renglón) */
  .pilares.pasos--plegable { border-top-color: var(--linea); }
  .pilares.pasos--plegable .pilar { padding: 0; border-bottom: 0; }

  /* ---------- tarjetas ---------- */
  .tarjetas, .tarjetas--dos, .tarjetas--cuatro { gap: .625rem; }
  .tarjeta { gap: .375rem; padding: 1rem 1.25rem; }
  .tarjeta__accion { padding-top: .5rem; }
  .tarjeta__accion .boton { min-height: var(--toque); }
  .tarjetas + .acciones { margin-top: 1.25rem; }
  .tarjetas + .acciones > .boton { flex: 1 1 auto; }           /* la salida bajo las tarjetas: el botón crece y el renglón queda a paño con ellas; si el enlace no cabe a su lado (360 px), el botón toma todo el ancho y el enlace baja, centrado */
  /* tarjetas de razones (.tarjetas--razones): siguen plegables, con la primera abierta. El sello baja a 40 px (icono
     de 22) y va junto al título, en su renglón (56 px de alto, lo que medía sin sello); título y texto, a la
     izquierda. Se toca la tarjeta cerrada entera: el renglón responde hasta el borde (::before lo extiende sobre los
     16 px de relleno de cada lado, sin mover nada). La respuesta al cursor no aplica aquí (ver la pieza): todos los
     sellos van en dorado lleno y la que está abierta se distingue por su borde dorado (sin JavaScript, todas
     abiertas: todas con él). Las opciones del cierre solo se centran. */
  .tarjetas--razones { --sello: 2.5rem; --sello-icono: 1.375rem; }
  .tarjetas--razones > .tarjeta { padding-inline: 1rem; }
  .tarjetas--razones > .tarjeta > .acordeon__item > summary { position: relative; justify-content: flex-start; gap: .875rem; min-height: 3.5rem; padding: .5rem 0; }
  .tarjetas--razones > .tarjeta > .acordeon__item > summary::before { content: ""; position: absolute; inset: 0 -1rem; }
  .tarjetas--razones > .tarjeta > .acordeon__item > summary > h3 { flex: 1 1 auto; min-width: 0; }
  .tarjetas--razones > .tarjeta > .acordeon__item > .acordeon__cuerpo { padding: .25rem 0 1rem; }
  .tarjetas--razones > .tarjeta:has(> .acordeon__item[open]) { border-color: var(--dorado); }
  /* strong.razon__unida: una frase resaltada que se lee entera («hasta 20% más rápido», Asesoría Inmobiliaria: la
     cifra que Julio pidió recuperar). En teléfono el texto va a la izquierda y a lo ancho, y de 320 a 350 y de 425 a
     440 px la frase se partía tras «hasta» o tras «20%»: aquí no se parte (mide 173 px; a 320 hay 246). Solo en
     teléfono: unida con &nbsp; en el HTML valía también para tableta, y en sus tres tarjetas angostas (768 px) la
     frase tomaba un renglón entero (el párrafo mide 176 px) y dejaba «propiedad» sola en el renglón de antes y
     «que el» en el de después. Desde 48rem parte como cualquier texto (11-oct-2026, tras la verificación de la
     auditoría móvil). */
  .tarjetas--razones > .tarjeta > .acordeon__item > .acordeon__cuerpo > .razon__unida { white-space: nowrap; }

  /* ---------- filas compactas: caminos y tarjetas de artículo ----------
     Miniatura cuadrada de 96 px a la izquierda; a la derecha, etiqueta, título y línea. Toda la fila es el enlace.
     La miniatura va fuera del flujo (así la fila admite uno o cinco renglones de texto, y cualquier hoja de página
     que acomode el texto a su modo): si el texto es más corto que la miniatura queda centrado contra ella; si es más
     largo, arranca a su altura. Entre fila y fila, una línea fina; tres filas caben en una pantalla. */
  .caminos, .articulos, .articulos--cuatro { gap: 0; border-top: 1px solid var(--linea); }
  .camino, .articulo {
    position: relative; gap: .25rem; align-content: center;
    min-height: calc(var(--fila-foto) + 2rem); padding: 1rem 0 1rem calc(var(--fila-foto) + 1rem);
    border-bottom: 1px solid var(--linea);
  }
  .camino__imagen, .articulo__portada {
    position: absolute; left: 0; top: 1rem; width: var(--fila-foto); height: var(--fila-foto);
    aspect-ratio: auto; max-height: none; border-radius: 1rem;
  }
  .camino > :not(.camino__imagen), .articulo > :not(.articulo__portada) { min-width: 0; }
  .camino__titulo { font-size: 1.125rem; line-height: 1.3; gap: .75rem; }
  /* el título de un artículo es una frase, no un nombre: a 17 px (16 en un teléfono de 360). Con la miniatura de 80 px
     «Tu render con IA se ve increíble. ¿Tu remodelación? Probablemente no quede así.» cabe en tres renglones, no en
     cinco cortos. Renglones parejos (balance): con «pretty» el último renglón se quedaba en dos palabras («en CDMX»,
     «no quede así.») y el título ocupaba los mismos renglones */
  a.articulo .articulo__titulo { font-size: clamp(1rem, 4.36vw, 1.0625rem); line-height: 1.3; text-wrap: balance; }
  .camino__linea { max-width: none; }
  /* Julio, 16-oct-2026: las descripciones de los servicios crecieron (dos o tres frases). En la columna de 245 px junto a
     la miniatura se iban a nueve o diez renglones y la sección pasaba de 1.25 pantallas; ahora, como el índice de
     Insights (fila con extracto): la miniatura flota a la izquierda con la etiqueta y el título a su lado, y la
     descripción la rodea: empieza junto a ella y sigue debajo, a todo el ancho de la fila. */
  .caminos > .camino { display: flow-root; min-height: 0; padding-left: 0; }
  .caminos > .camino > .camino__imagen { position: static; float: left; margin: 0 1rem .75rem 0; }
  .caminos > .camino > .etiqueta { display: block; padding-top: .125rem; }
  .caminos > .camino > .camino__titulo { margin: .25rem 0 .375rem; }   /* sigue siendo flex (la flecha a su distancia): no se mete bajo la miniatura */
  .caminos > .camino > .camino__linea { display: block; }   /* empieza junto a la miniatura y sigue debajo, a todo el ancho */
  @media (max-width: 22.49rem) { .caminos > .camino > .camino__linea { clear: left; } }   /* bajo 360 px, debajo: junto a la miniatura quedaba un renglón corto y sangrado (Ronda 12, SE-B1) */
  .articulo .etiqueta { margin-top: 0; }
  /* la miniatura sigue al ancho del teléfono: 80 px bajo 400 px de ancho y 72 bajo 375 (la columna de texto gana un renglón) */
  @media (max-width: 24.99rem) { :root { --fila-foto: 5rem; } }
  @media (max-width: 23.43rem) { :root { --fila-foto: 4.5rem; } }
  /* fila con extracto: el a.articulo que lleva .articulo__linea (el índice de Insights). Arriba, la miniatura con la
     etiqueta y el título a su lado; debajo, a todo el ancho de la fila, el extracto y lo que le siga («Leer más»):
     el extracto se lee en renglones de página y no en una columna de 238 px. El marcado no cambia: la miniatura flota
     a la izquierda, el título es una caja a su lado (no baja bajo la foto aunque mida más que ella) y lo que sigue al
     título despeja la foto. (El selector pesa más que el de una hoja de página que acomode la tarjeta a su modo.) */
  .articulos > .articulo:has(> .articulo__linea) { display: flow-root; padding-left: 0; }
  .articulos > .articulo:has(> .articulo__linea) > .articulo__portada { position: static; float: left; margin: 0 1rem .625rem 0; }
  .articulos > .articulo:has(> .articulo__linea) > .articulo__titulo { display: flow-root; margin: .25rem 0 .625rem; }
  .articulos > .articulo:has(> .articulo__linea) > .articulo__titulo + * { clear: left; }
  .articulos > .articulo:has(> .articulo__linea) > .articulo__linea { display: block; margin-top: .25rem; }

  /* ---------- formularios: botón al pie y a todo el ancho; el enlace del aviso, con su objetivo ---------- */
  .formulario { gap: 1rem; }
  .formulario__campos, .formulario__fila { gap: 1rem; }
  .formulario textarea { min-height: 6.5rem; }
  /* nombre y apellido, lado a lado también en teléfono (dos campos cortos): el formulario de un cierre, del primer
     campo al botón de envío, cabe así en una pantalla de T1 */
  .formulario__fila:has([autocomplete="given-name"]):has([autocomplete="family-name"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .75rem; }
  /* …y el aviso de cualquiera de los dos ocupa el ancho de la fila (en una columna de 150 px «El nombre debe tener al
     menos 2 caracteres.» partía en tres renglones). Los dos campos no pintan caja: sus etiquetas van en el primer
     renglón de la fila, sus controles en el segundo y cada aviso, debajo, de lado a lado. Sin avisos mide lo mismo. */
  .formulario__fila:has([autocomplete="given-name"]):has([autocomplete="family-name"]) { row-gap: .5rem; }
  .formulario__fila:has([autocomplete="given-name"]):has([autocomplete="family-name"]) > .formulario__campo { display: contents; }
  .formulario__fila:has([autocomplete="given-name"]):has([autocomplete="family-name"]) > .formulario__campo > label { grid-row: 1; align-self: end; }
  .formulario__fila:has([autocomplete="given-name"]):has([autocomplete="family-name"]) > .formulario__campo > :is(input, select, textarea) { grid-row: 2; }
  .formulario__fila:has([autocomplete="given-name"]):has([autocomplete="family-name"]) > .formulario__campo:first-child > :not(.formulario__error) { grid-column: 1; }
  .formulario__fila:has([autocomplete="given-name"]):has([autocomplete="family-name"]) > .formulario__campo:last-child > :not(.formulario__error) { grid-column: 2; }
  .formulario__fila:has([autocomplete="given-name"]):has([autocomplete="family-name"]) > .formulario__campo > .formulario__error { grid-column: 1 / -1; }
  .formulario__pie { gap: .5rem; }
  .formulario__pie .acciones > .boton, .formulario__exito .acciones > .boton { flex: 1 1 100%; }
  /* el enlace suelto al Aviso de Privacidad en la tarjeta de un cierre (un .dato que solo lleva el enlace): objetivo de 44 px.
     Aquí el enlace sí es una caja (ocupa su renglón): no lleva el relleno del enlace dentro de una frase */
  .cierre__lado .formulario__pie > .dato > a:only-child { display: inline-flex; align-items: center; min-height: var(--toque); padding-block: 0; }
  /* …y queda a la misma distancia de lo que tiene encima que del botón: el enlace ya trae 13 px de aire por dentro,
     arriba y abajo de sus letras; con los 16 px del formulario quedaba a 29 px de los campos y a 21 del botón */
  .cierre__lado .formulario { gap: .5rem; }
  .casilla { min-height: var(--toque); }
  /* campo de una línea que lleva a la Estimación (form[data-destino]): al enfocarlo sube bajo el encabezado (lo pide
     sitio.js, bloque 4b) y queda a 12 px de él, con su botón debajo: el alto que deja el teclado es para las
     sugerencias. Desde el 7-oct-2026 lo que sube es la caja entera, con el nombre del campo encima (el formulario es
     su .formulario__campo): el nombre sigue a la vista mientras se escribe; el campo queda 32 px más abajo.
     Sin la flecha que el navegador le pinta a un campo con sugerencias (parecía una lista desplegable y
     es de texto libre): cada navegador la llama a su modo y una regla que no conoce no debe anular la otra */
  form[data-destino], form[data-destino] input { scroll-margin-top: calc(var(--enc-alto) + .75rem); }
  form[data-destino] input::-webkit-calendar-picker-indicator { display: none !important; }
  form[data-destino] input::-webkit-list-button { display: none !important; }

  /* ---------- barra del botón principal de una herramienta por pasos (.barra-paso) ----------
     Marcado: <span class="barra-paso [barra-paso--pegada]"><button class="boton boton--principal">…</button></span>
     (un div si lleva además un aviso). Desde 48rem no pinta caja (arriba, junto a .acciones). Aquí es un renglón al
     pie de su marco con el botón a todo el ancho, fondo de superficie (--barra-fondo si va sobre otro fondo) y 12 px
     de aire arriba y abajo, más la zona de gestos del teléfono.
     Tres casos, una sola regla: LA BARRA SE PEGA AL PIE DE LA VENTANA CUANDO SU PANTALLA NO CABE EN ELLA.
       1. En su sitio: el paso cabe en la pantalla (600 px del borde del marco al botón) y la barra es su último renglón.
       2. Pegada (.barra-paso--pegada): la pantalla es larga por lo que enseña (una revisión, un formulario con su
          ficha, una lista que se lee). position: sticky (bottom: 0 ya lo trae la pieza), con una línea fina arriba que
          la separa de lo que pasa por debajo. Solo con JavaScript: sin él las pantallas se leen de corrido y la barra
          es un renglón más.
       3. Pegada según el estado o el alto de la ventana: lo dice la hoja de la herramienta con esas mismas dos
          declaraciones (position: sticky; border-top: 1px solid var(--linea)) en su propio selector. Estimación la
          pega en el resumen y, bajo 40rem de alto, en todos sus pasos; el generador solo la pega con 30rem de alto o
          más (acostado taparía la tercera parte de una imagen).
     Para pegarse, la barra debe ser hija directa de la pantalla larga (un sticky no sale de la caja de su padre): lo
     que la envuelva (.acciones, el formulario, su pie) deja de pintar caja con display: contents en la hoja de la
     herramienta. Lo que se enfoca con Tab, o se trae a la vista, no queda detrás de la barra: la página reserva su
     alto (scroll-padding-bottom) donde hay una. medir.py la reconoce (PASO «con el botón pegado») y avisa lo que
     queda detrás de ella al llegar (TAPADO). Quién la usa: .est__barra y .oferta__barra (Estimación), .perfil__barra
     (Perfil de Inversor); cada hoja pone solo su margen y su fondo. El generador de Rediseño dejó de usarla el 11-oct-2026
     (.puente__barra: cada propuesta lleva ahora su propio botón «Hazlo realidad»). */
  .barra-paso { display: block; bottom: 0; z-index: 2; padding-block: .75rem calc(.75rem + env(safe-area-inset-bottom, 0px)); background: var(--barra-fondo, var(--blanco)); }
  .barra-paso > .boton { width: 100%; }
  html.js .barra-paso--pegada { position: sticky; border-top: 1px solid var(--linea); }
  html:has(.barra-paso) { scroll-padding-bottom: 5.5rem; }       /* el alto de la barra (73 px) más 15 de aire */

  /* ---------- sección partida y cierre con formulario: apiladas y más juntas ---------- */
  .partida, .cierre { row-gap: 1.5rem; }
  .partida__texto, .cierre__texto { gap: 1rem; }
  .cierre__lado.tarjeta { padding: 1.25rem; }

  /* ---------- respuesta al toque ----------
     Lo que se toca responde mientras el dedo está encima (:active), con lo mínimo: el botón se hunde un punto y el
     dorado toma su tono oscuro; una fila, un enlace o un renglón de acordeón se atenúan. El destello gris del
     navegador se quita solo donde hay esta respuesta y solo con JavaScript (html.js): en iOS, :active necesita que la
     página escuche el toque, y eso lo hace sitio.js. Ningún :hover del sistema se aplica sin cursor (ver cada pieza). */
  html.js :is(.boton, .enlace, .enlace-texto, .camino, .articulo, .menu__lista a, .menu__contacto a, .pie a, .acordeon__item summary, .opcion, .menu-boton, .encabezado__logo) { -webkit-tap-highlight-color: transparent; }
  .boton:active { transform: scale(.98); }
  .boton--principal:active { background: var(--boton-fondo-hover, var(--dorado-oscuro)); border-color: var(--boton-fondo-hover, var(--dorado-oscuro)); }
  .boton--contorno:active { background: var(--contorno, var(--carbon)); color: var(--contorno-tinta, var(--crema)); }
  :is(.camino, .articulo, .enlace, .enlace-texto, .menu__lista a, .menu__contacto a:not(.boton), .pie a, .acordeon__item summary, .menu-boton, .encabezado__logo):active { opacity: .6; }
  .acciones--cede > .boton--contorno:active { background: none; color: inherit; opacity: .6; transform: none; }
  .formulario .opcion:active span { border-color: var(--carbon); }

  /* ============ solo teléfono: bajo 30rem (480 px) ============
     Lo que sigue es del teléfono en vertical y nada más: las franjas de foto y su tope de 240 px. De 480 a 767 px
     (teléfono acostado, iPad mini, plegables) una franja a todo el ancho medía 2.8:1 y dejaba la casa sin techo y a
     las personas sin hombros: ahí las fotos siguen en 3:2 con el tope de 320 px de antes de esta ronda. */
  @media (max-width: 29.99rem) {
    :root { --img-alto: 15rem; }               /* tope de alto de toda imagen de contenido: 240 px (medir.py marca desde 250) */

    /* héroe: la foto es una franja a todo el ancho con el 32 % del alto de la ventana (svh: no brinca cuando Safari
       recoge sus barras; 212 px en un iPhone de 390 × 664), nunca más que el tope ni menos de 144 px. Tampoco baja
       del 52 % del ancho de la ventana: la franja nunca es más apaisada que 1.73:1 (en una ventana baja, como la de
       un iPhone SE con sus barras, 375 × 548, el 32 % del alto daba 335 × 175 y la casa de la portada perdía la punta
       del techo; con el piso mide 335 × 195 y cabe entera). Para que la banda siguiente siga asomando en la primera
       pantalla, la foto va un paso más cerca de los botones y el héroe deja 28 px bajo ella (la banda trae su propio aire). */
    .heroe { padding-bottom: 1.75rem; }
    .heroe__in { row-gap: 1.5rem; }
    .heroe__imagen img { aspect-ratio: auto; height: max(9rem, 52vw, min(32vh, var(--img-alto))); height: max(9rem, 52vw, min(32svh, var(--img-alto))); max-height: none; }

    /* dupla: en franja 2:1 la foto de compañía (.dupla--foto-baja) y la que acompaña a un campo de una línea (la
       entrada a la Estimación: con la foto en 3:2 el botón quedaba a 8 px del borde y la nota del costo, debajo) */
    .dupla--foto-baja .dupla__imagen img, .dupla:has(.campo-linea) .dupla__imagen img { aspect-ratio: 2 / 1; }
    /* …y la de cualquier dupla que la pida SOLO para el teléfono, sin tocar su 3:2 de escritorio: .dupla--franja-movil
       (una dupla de texto largo o con una lista: «Servicio integral» de Inmobiliaria, la historia de Nosotros). Su encuadre lo dice la
       foto (--encuadre-movil). */
    .dupla--franja-movil .dupla__imagen img { aspect-ratio: 2 / 1; }
    /* la foto de la dupla que ABRE una página (el destacado de Insights, la portada de un artículo) va en 16:9, el
       formato de mosaico: 350 × 197 a 390 px, el 30 % de la primera pantalla (RONDA-4 §2.1) y no 350 × 233. Así se ven
       sin scroll el título, la foto y el arranque de lo que sigue: .dupla--portada-movil */
    .dupla--portada-movil .dupla__imagen img { aspect-ratio: 16 / 9; }

    /* «Contáctanos» del encabezado es aquí un enlace de texto: al tocarlo se atenúa, no se rellena */
    .boton.encabezado__accion:active { background: none; color: var(--carbon); opacity: .6; transform: none; }
  }
}

/* ============================================================
   VENTANA BAJA · teléfono acostado de 768 px o más de ancho
   (844 × 390 y parecidos: un iPhone 12 a 15 acostado, los Android
   grandes). Por ancho usa la forma de tableta; por alto le quedan
   390 px. Sin este tramo el botón principal de la apertura quedaba
   bajo el borde en ocho páginas. No alcanza a 1440 × 820, 1280 × 720
   ni a una tableta (768 px de alto o más): el escritorio no cambia.
   Qué cambia: el encabezado mide 56 px desde el inicio (como en
   teléfono) y el héroe se compacta (título a 32 px, el texto en
   siete columnas y la foto en cinco, menos aire) para que título,
   apoyo y botón principal quepan en la primera pantalla.
   Las herramientas (Estimación, generador, Perfil) conservan ahí su
   forma de escritorio: ver _notas/sistema.md, «Ventana baja».
   Se mide con `medir.py --movil` (T6, 844 × 390: PRIMERA).
   ============================================================ */
@media (min-width: 48rem) and (max-height: 31.25rem) {
  :root { --enc-alto: 3.5rem; --apertura: 1rem; }
  .encabezado__logo { width: 4.5rem; }
  h1 { font-size: 2rem; }
  .heroe__in { row-gap: 1rem; }
  .heroe__texto { grid-column: 1 / 8; gap: .75rem; }
  .heroe__imagen { grid-column: 8 / 13; }
  .heroe__texto .apoyo { font-size: 1rem; line-height: 1.5; max-width: none; }
  .heroe__texto .acciones { margin-top: .25rem; }
}

/* ============================================================
   MOVIMIENTO · una sola definición para todo el sitio
   Todo es mejora progresiva: sin JavaScript no hay nada oculto, y con
   «reducir movimiento» nada se mueve (ver el final del archivo).
   ============================================================ */

/* ---------- revelado al entrar en pantalla ----------
   .revelar en el bloque (nunca en el héroe). sitio.js pone html.revela solo cuando puede observar el scroll y deja
   .visible, antes, en lo que ya está a la vista al cargar: nada parpadea. Opacidad y 12 px, 500 ms, una sola vez. */
@media (prefers-reduced-motion: no-preference) {
  html.revela .revelar:not(.visible) { opacity: 0; transform: translateY(12px); }
  html.revela .revelar.visible { transition: opacity var(--m-revelado) ease, transform var(--m-revelado) ease; }
}

/* ---------- transición breve entre pantallas de las herramientas y estados que aparecen ----------
   Generador (.gen__pantalla, .gen__paso), Estimación (.est__paso, .est__pantalla y las vistas de resultado, reporte y
   PDF), Perfil de Inversor (.pregunta, .revision, .reanudar, confirmación), baja del Monitor (.baja__estado) y los
   avisos de éxito y de error de los formularios. La pieza que pasa de oculta a visible entra con opacidad y 8 px en
   250 ms (@starting-style: sin JavaScript propio; donde el navegador no lo conoce, el cambio es inmediato).
   html.listo lo pone sitio.js con la página ya cargada: lo que se ve al abrir no se anima. */
@media (prefers-reduced-motion: no-preference) {
  html.listo :is(.gen__pantalla, .gen__paso, .est__paso, .est__pantalla, [data-vista-de]:not(.est), .pregunta, .revision, .reanudar, .pantalla[data-pantalla="confirmacion"], .baja__estado[data-estado], .formulario__exito, .formulario__fallo) {
    transition: opacity var(--m-medio) ease, transform var(--m-medio) ease;
  }
  @starting-style {
    html.listo :is(.gen__pantalla, .gen__paso, .est__paso, .est__pantalla, [data-vista-de]:not(.est), .pregunta, .revision, .reanudar, .pantalla[data-pantalla="confirmacion"], .baja__estado[data-estado], .formulario__exito, .formulario__fallo) {
      opacity: 0; transform: translateY(8px);
    }
  }
}

/* ---------- sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .boton[aria-busy="true"]::before { display: none; }   /* el texto «Enviando…» basta */
}

/* ---------- impresión ---------- */
@media print {
  .revelar { opacity: 1 !important; transform: none !important; }
  .encabezado { position: static; }   /* fijo, se repetía en cada hoja y tapaba lo que cayera al inicio de la página */
  body { padding-top: 0; }
}

/* la pareja de .sin-telefono (Ronda 9): una pieza que solo existe en teléfono (el llamado del informe de Financiera, que
   ahí va después de sus tres bloques). Ver «piezas de un solo tamaño», al principio del bloque de teléfono. */
@media (min-width: 48rem) { .solo-telefono { display: none !important; } }