/* Iberotasa — sistema visual (rediseño institucional del 12/09/2026, a
   partir de una segunda referencia visual que aportó Arturo -- "ValoratIQ",
   maqueta con paleta azul marino + dorado y titulares en serif editorial).
   Sustituye la identidad rosa/negro/amarillo original en TODO el sitio (ya
   no queda una versión "tema-institucional" aparte: esta es ahora la única
   paleta). Autoridad institucional en azul marino profundo, acento
   interactivo en azul más claro, y un dorado reservado ÚNICAMENTE para lo
   certificado/auditado/oficial -- nunca como color decorativo masivo.
   Titulares en Merriweather (serif editorial, gravedad notarial), UI/cuerpo
   en Plus Jakarta Sans, cifras y datos tabulares en JetBrains Mono (para que
   las columnas numéricas se lean alineadas verticalmente). Sin formas de
   píldora: esquinas de 4px en botones/chips, 8px en tarjetas. */

:root {
  --pink: #1B3858;          /* azul institucional: interactivo, CTA, enlaces */
  --pink-dark: #12283F;     /* hover */
  --pink-light: #E7EEF5;    /* fondo tenue para estados activos/realzados */
  --black: #0A1B29;         /* navy profundo: cabecera, pie, bloques de autoridad */
  --yellow: #15803D;        /* verde: reservado para "certificado/auditado" */
  --dorado: #C59B27;        /* dorado: uso puntual y deliberado -- sellos, firmas, lo oficial */
  --dorado-suave: #FBF3DC;
  --texto: #0B1924;
  --texto-suave: #55708A;
  --fondo: #F8FAFC;
  --fondo-alt: #F1F5F9;
  --borde: #E2E8F0;
  --blanco: #FFFFFF;
  --ok-bg: #F0FDF4; --ok-texto: #15803D;
  --atencion-bg: #FEF3C7; --atencion-texto: #92400E;
  --error-bg: #FEF2F2; --error-texto: #B91C1C;
  --radio: 8px;
  --sombra: 0 4px 12px -2px rgba(11, 25, 36, 0.07), 0 2px 6px -1px rgba(11, 25, 36, 0.05);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.5;
}

a { color: inherit; }

/* Titulares editoriales (gravedad notarial) vs. cifras tabulares
   (alineación exacta en columnas numéricas) -- una sola regla global en vez
   de reescribir cada componente, igual que hacían las variables de color. */
h1, h2, h3 { font-family: "Merriweather", Georgia, serif; font-weight: 700; }
.valor, .resultado-destacado .rango, .resumen-valor, .cascada-valor,
.presupuesto-destacado, .dato-destacado,
table.detalle td, table.comparables th, table.comparables td {
  font-family: "JetBrains Mono", "Courier New", monospace;
}

/* Sin píldoras: esquinas técnicas de 4px en controles e indicadores */
button, .boton, .btn, .rama-pill, .etiqueta-tipo, .etiqueta-tipo-auditado,
.chip-fiabilidad, .chip-info, .chip-firma-ok, .chip-firma-pendiente,
.upsell .etiqueta-destacado, .filtro-municipios a {
  border-radius: 4px;
}

/* ---------- Barra superior (ampliación 26, 15/09/2026) ---------- */
/* Franja fina de contacto/credencial sobre la cabecera principal -- decisión
   explícita de Arturo (revierte la decisión de la ampliación 23 de omitirla).
   Solo datos reales: colegiado nº 12717, teléfono real, enlace real al
   backoffice -- nunca "Portal Clientes" inventado (no existe login de
   cliente, el seguimiento es por enlace con token). */
.barra-superior {
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 7px 24px;
  font-size: 0.72rem;
  color: #C9C9CD;
}
.barra-superior-interior {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.barra-superior a {
  color: var(--blanco);
  text-decoration: none;
  font-weight: 600;
}
.barra-superior a:hover { text-decoration: underline; }
.barra-superior .acciones-barra { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.barra-superior .credencial-mini { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Stepper del flujo de tasación (ampliación 26) ---------- */
/* Ancho por defecto = el de la tarjeta de formulario de index.html (640px),
   para que sus márgenes izq/dcha queden alineados con el contenido de
   debajo. `.ancho` lo amplía a 1040px cuando el contenido que sigue ocupa
   el contenedor completo (caracteristicas.html, con su layout a dos
   columnas) -- ver comentario en _stepper_tasacion.html. */
.stepper-tasacion {
  display: flex; align-items: center; justify-content: center;
  max-width: 640px; margin: 0 auto 24px; padding: 14px 20px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px;
}
.stepper-tasacion.ancho { max-width: 1040px; }
.paso-stepper { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.paso-stepper .num-paso {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 700; font-family: "JetBrains Mono", monospace;
  background: var(--fondo-alt); color: var(--texto-suave); border: 1px solid var(--borde);
  flex: 0 0 auto;
}
.paso-stepper .texto-paso { font-size: 0.78rem; font-weight: 700; color: var(--texto-suave); white-space: nowrap; }
.paso-stepper.activo .num-paso {
  background: var(--black); color: var(--blanco); border-color: var(--dorado);
  box-shadow: 0 0 0 3px var(--dorado-suave);
}
.paso-stepper.activo .texto-paso { color: var(--black); }
.paso-stepper.completado .num-paso { background: var(--pink); color: var(--blanco); border-color: var(--pink); }
.paso-stepper.completado .texto-paso { color: var(--texto); }
.linea-stepper { flex: 1 1 50px; height: 2px; background: var(--borde); margin: 0 12px; max-width: 70px; }
.linea-stepper.completada { background: var(--pink); }

/* ---------- Resumen lateral (caracteristicas.html, ampliación 26) ---------- */
.fila-resumen-lateral {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 0.8rem;
}
.fila-resumen-lateral:last-child { border-bottom: none; }
.fila-resumen-lateral span { color: var(--texto-suave); }
.fila-resumen-lateral strong { text-align: right; }

/* ---------- Cabecera ---------- */
.cabecera {
  background: var(--black);
  padding: 0 24px;
}
.cabecera-interior {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.logo {
  color: white;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo::before {
  content: "I";
  width: 30px; height: 30px; border-radius: 4px;
  background: var(--dorado); color: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem; font-family: "Plus Jakarta Sans", sans-serif;
}
.logo .punto { color: var(--dorado); }
.nav-cabecera {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-cabecera a {
  color: #C9C9CD;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.nav-cabecera a:hover { color: white; }
.nav-cabecera .cta {
  background: var(--pink);
  color: white;
  padding: 11px 18px;
  border-radius: 4px;
}
.nav-cabecera .cta:hover { background: var(--pink-dark); color: white; }

/* ---------- Layout general ---------- */
.contenedor {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px 90px;
}
.contenedor-ancho {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

h1 { font-size: 1.9rem; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 1.3rem; margin: 32px 0 12px; letter-spacing: -0.01em; }
.subtitulo { color: var(--texto-suave); margin: 0 0 24px; }

/* ---------- Hero (portada) ---------- */
.hero {
  background: var(--blanco);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
}
.hero-texto { padding: 56px 44px 48px; }
.eyebrow {
  display: inline-block; background: var(--black); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
  padding: 7px 13px; border-radius: 4px; text-transform: uppercase; margin-bottom: 20px;
}
.hero h1 { font-size: 2.3rem; line-height: 1.12; color: var(--black); }
.hero .subtitulo { font-size: 1rem; max-width: 480px; color: #3C3C3E; margin-bottom: 22px; }

/* Fila de credenciales bajo el subtítulo del hero -- mismo patrón que la
   franja de confianza de la referencia visual (icono + título + subtítulo
   en una caja), con contenido real de Iberotasa y sin solapar las cifras de
   la franja de "Cinco pasos" más abajo (aquí van credenciales, allí van
   cifras de proceso). */
.hero-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 22px; }
.hero-badge {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: 8px;
}
.hero-badge .icono {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 6px;
  background: var(--pink-light); color: var(--pink);
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.hero-badge .texto { display: flex; flex-direction: column; line-height: 1.25; }
.hero-badge .titulo { font-size: 0.72rem; font-weight: 800; color: var(--black); }
.hero-badge .sub { font-size: 0.68rem; color: var(--texto-suave); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  padding: 14px 22px; font-weight: 700; font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid transparent; text-decoration: none; cursor: pointer;
}
.btn.primario { background: var(--pink); color: white; }
.btn.primario:hover { background: var(--pink-dark); }
.btn.fantasma { border-color: var(--black); color: var(--black); background: transparent; }

/* Panel derecho del hero: en vez de un bloque decorativo vacío, una
   vista previa (de ejemplo, nunca datos reales de un cliente) de cómo se ve
   el resultado -- mismo papel estructural que la "tarjeta de expediente"
   de la referencia visual, pero con etiquetas honestas ("Ejemplo") y sin
   ningún sello de certificación que Iberotasa no emite de verdad. */
.hero-visual {
  position: relative; background: var(--black);
  min-height: 320px; display: flex; align-items: center; padding: 32px 24px;
}
.tarjeta-ejemplo {
  background: var(--blanco); color: var(--texto); border-radius: 12px;
  padding: 22px 22px 20px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.35);
  width: 100%;
}
.tarjeta-ejemplo .cinta-superior {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--borde); font-size: 0.72rem;
}
.tarjeta-ejemplo .cinta-superior .estado { display: flex; align-items: center; gap: 8px; }
.tarjeta-ejemplo .punto-estado { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex: 0 0 auto; }
.tarjeta-ejemplo .cinta-superior .etiqueta-vista-previa {
  padding: 3px 10px; border-radius: 4px; background: var(--fondo-alt); color: var(--texto-suave);
  font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--borde);
}
.tarjeta-ejemplo .cabecera-ejemplo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tarjeta-ejemplo .cabecera-ejemplo .eyebrow-mini { display: block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pink); margin-bottom: 3px; }
.tarjeta-ejemplo .cabecera-ejemplo h3 { margin: 0 0 2px; font-size: 1.05rem; }
.tarjeta-ejemplo .cabecera-ejemplo .direccion-ejemplo { font-size: 0.78rem; color: var(--texto-suave); margin: 0; }
.tarjeta-ejemplo .icono-cabecera {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px;
  background: var(--fondo-alt); color: var(--black); display: flex; align-items: center; justify-content: center;
}
.bloque-valor-ejemplo { background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.bloque-valor-ejemplo .fila-superior { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; color: var(--texto-suave); margin-bottom: 4px; }
.bloque-valor-ejemplo .fiabilidad { color: var(--ok-texto); font-weight: 700; }
.bloque-valor-ejemplo .valor-grande { font-size: 1.6rem; font-weight: 800; color: var(--black); font-family: "JetBrains Mono", monospace; }
.bloque-valor-ejemplo .fila-inferior { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; color: var(--texto-suave); margin-top: 8px; }
.grid-meta-ejemplo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.grid-meta-ejemplo .celda { background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: 8px; padding: 9px 11px; }
.grid-meta-ejemplo .celda .etiqueta { display: block; font-size: 0.62rem; text-transform: uppercase; font-weight: 700; color: var(--texto-suave); margin-bottom: 2px; }
.grid-meta-ejemplo .celda .dato { font-size: 0.82rem; font-weight: 700; }
.aviso-ejemplo {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  background: var(--pink-light); border: 1px solid #C7D9E8; border-radius: 8px;
  font-size: 0.74rem; color: var(--pink-dark); line-height: 1.4;
}

/* ---------- Cómo funciona: línea de tiempo ---------- */
.seccion-datos { max-width: 1040px; margin: 0 auto; padding: 56px 20px 0; }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 auto 14px; padding: 6px 14px;
  background: var(--pink-light); border: 1px solid #C7D9E8; color: var(--pink-dark);
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 4px;
}
.seccion-datos .titulo-seccion { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.seccion-datos .titulo-seccion h2 { margin: 0 0 8px; font-size: 1.5rem; }
.seccion-datos .titulo-seccion p { color: var(--texto-suave); margin: 0; }

.timeline {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative;
}
.timeline::before {
  content: ""; position: absolute; top: 26px; left: 0; right: 0; height: 2px; background: var(--borde);
}
.t-item { position: relative; text-align: center; }
.t-icon {
  width: 52px; height: 52px; border-radius: 10px; background: var(--blanco);
  border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin: 0 auto 14px; position: relative; z-index: 1;
}
.t-item.activo .t-icon { background: var(--pink); border-color: var(--pink); }
.t-num { font-size: 0.68rem; font-weight: 800; color: var(--pink); margin-bottom: 6px; letter-spacing: 0.05em; text-transform: uppercase; }
.t-title { font-size: 0.85rem; font-weight: 800; margin-bottom: 6px; }
.t-desc { font-size: 0.78rem; color: var(--texto-suave); line-height: 1.45; }

/* ---------- Estadísticas ---------- */
.grid-estadisticas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.stat-circulo { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px 16px; text-align: center; }
.stat-circulo .aro {
  width: 68px; height: 68px; border-radius: 50%; border: 3px solid var(--pink);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
  font-weight: 800; color: var(--pink-dark); font-size: 0.95rem;
}
.stat-circulo h4 { margin: 0 0 4px; font-size: 0.9rem; font-weight: 800; }
.stat-circulo p { margin: 0; color: var(--texto-suave); font-size: 0.78rem; }

.seccion-metodologia {
  background: var(--black); color: white; border-radius: var(--radio); padding: 30px;
  margin-top: 48px; display: flex; gap: 20px; align-items: flex-start;
}
.seccion-metodologia .icono {
  width: 44px; height: 44px; border-radius: 4px; background: var(--dorado); color: var(--black);
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; font-size: 1.1rem;
  font-family: "Merriweather", Georgia, serif;
}
.seccion-metodologia h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; }
.seccion-metodologia p { margin: 0; color: #C9C9CD; font-size: 0.9rem; }

/* ---------- Freemium: esquema de decisión ---------- */
.decision-wrap { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 32px; margin-top: 48px; }
.decision-pregunta {
  background: var(--black); color: white; padding: 20px 26px; border-radius: 8px;
  font-size: 0.95rem; font-weight: 700; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px;
}
.decision-pregunta .rayo {
  width: 30px; height: 30px; flex: 0 0 30px; background: var(--pink); color: white;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.decision-flecha { text-align: center; color: var(--texto-suave); font-size: 1.3rem; margin: 6px 0; }
.decision-ramas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; align-items: stretch; }
.rama { border-radius: var(--radio); padding: 24px 26px; display: flex; flex-direction: column; }
.rama.rosa { background: var(--pink-light); border: 1px solid #C7D9E8; }
.rama.negra { background: var(--black); color: white; }
.rama-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rama-pill {
  display: inline-block; padding: 5px 14px; border-radius: 4px; font-size: 0.68rem;
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.rama.rosa .rama-pill { background: var(--pink); color: white; }
.rama.negra .rama-pill { background: var(--dorado); color: var(--black); }
.rama-cabecera .icono-rama { font-size: 1.3rem; }
.rama h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
.rama .subtexto { font-size: 0.78rem; color: var(--texto-suave); margin-bottom: 14px; }
.rama.negra .subtexto { color: #B9B9BD; }
/* Caja de precio -- mismo papel que el bloque de precio de la referencia
   visual: etiqueta pequeña, cifra grande, nota de contexto debajo. */
.rama .precio-box {
  border-radius: 8px; padding: 12px 14px; text-align: center; margin-bottom: 16px;
  background: rgba(255,255,255,0.6); border: 1px solid #C7D9E8;
}
.rama.negra .precio-box { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
.rama .precio-box .etiqueta-precio { display: block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); }
.rama.negra .precio-box .etiqueta-precio { color: #B9B9BD; }
.rama .precio-box .cifra-precio { display: block; font-size: 1.5rem; font-weight: 800; font-family: "JetBrains Mono", monospace; margin: 3px 0; }
.rama .precio-box .nota-precio { display: block; font-size: 0.7rem; color: var(--texto-suave); }
.rama.negra .precio-box .nota-precio { color: #B9B9BD; }
.rama ul { margin: 0 0 18px; padding: 0; list-style: none; flex-grow: 1; }
.rama li { display: flex; gap: 10px; font-size: 0.85rem; margin-bottom: 11px; line-height: 1.4; }
.rama li::before { content: "✔"; color: var(--pink); font-weight: 800; flex: 0 0 auto; }
.rama.negra li::before { color: var(--dorado); }
.rama li.limite::before { content: "–"; color: var(--texto-suave); }
.rama.negra li.limite::before { color: #8A8A90; }
.rama li.limite { color: var(--texto-suave); }
.rama.negra li.limite { color: #B9B9BD; }
.rama .btn-rama {
  display: block; width: 100%; text-align: center; padding: 13px 16px; border-radius: 4px;
  font-weight: 800; font-size: 0.85rem; text-decoration: none; margin-top: auto;
}
.rama.rosa .btn-rama { background: var(--pink); color: white; }
.rama.rosa .btn-rama:hover { background: var(--pink-dark); }
.rama.negra .btn-rama { background: var(--dorado); color: var(--black); }
.rama.negra .btn-rama:hover { background: #B08A22; }

/* ---------- Tabla comparativa ---------- */
.tabla-comparativa { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: var(--blanco); border-radius: 8px; overflow: hidden; margin-top: 48px; }
.tabla-comparativa thead th {
  padding: 15px 18px; text-align: left; font-size: 0.72rem; letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 800;
}
.tabla-comparativa thead th:first-child { background: var(--black); color: white; }
.tabla-comparativa thead th:nth-child(2) { background: var(--pink); color: white; }
.tabla-comparativa thead th:nth-child(3) { background: var(--dorado); color: var(--black); }
.tabla-comparativa tbody td { padding: 14px 18px; border-bottom: 1px solid var(--borde); vertical-align: top; line-height: 1.5; }
.tabla-comparativa tbody td:first-child { font-weight: 800; background: var(--fondo-alt); width: 26%; }
.tabla-comparativa tbody tr:last-child td { border-bottom: none; }

/* ---------- Tarjetas de plan (cards) ---------- */
.grid-planes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.plan-card { border-radius: var(--radio); padding: 26px 28px; }
.plan-card.rosa { background: var(--pink-light); border: 1px solid #C7D9E8; }
.plan-card.amarilla { background: var(--dorado-suave); border: 1px solid #E8D699; }
.plan-card h4 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; }
.plan-card .precio-plan { font-size: 0.72rem; color: var(--texto-suave); font-family: "JetBrains Mono", monospace; margin-bottom: 16px; }
.plan-card ul { margin: 0 0 16px; padding: 0; list-style: none; }
.plan-card li { display: flex; gap: 10px; font-size: 0.85rem; margin-bottom: 9px; line-height: 1.5; }
.plan-card li .punto { color: var(--pink); font-weight: 800; }
.plan-card.amarilla li .punto { color: #8A6B14; }

/* ---------- Matriz de finalidades legales (ampliación 12/09/2026) ----------
   Sustituye la genérica "gratis vs. de pago" por las 6 finalidades reales que
   admite el formulario (ver FINALIDAD_OPCIONES en tasaciones_db.py), con el
   precio "desde" real de PRESUPUESTO_POR_FINALIDAD -- nunca una cifra inventada. */
.grid-finalidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.tarjeta-finalidad {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tarjeta-finalidad:hover, .tarjeta-finalidad:focus-visible {
  border-color: var(--pink); box-shadow: 0 4px 16px -8px rgba(27, 56, 88, 0.35); outline: none;
}
.tarjeta-finalidad:hover .flecha-finalidad, .tarjeta-finalidad:focus-visible .flecha-finalidad {
  color: var(--pink);
}
/* Icono + título + descripción, y una fila de pie separada por un borde
   -- mismo esqueleto que las tarjetas de "ámbitos" de la referencia visual
   (icono arriba, etiqueta + flecha abajo), con el precio real de Iberotasa
   en vez de una etiqueta genérica de "uso". */
.tarjeta-finalidad .icono-finalidad {
  width: 44px; height: 44px; border-radius: 8px; background: var(--pink-light); color: var(--pink);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.tarjeta-finalidad .icono-finalidad svg { width: 22px; height: 22px; }
.tarjeta-finalidad h4 { margin: 0; font-size: 1rem; font-weight: 800; }
.tarjeta-finalidad p { margin: 0; font-size: 0.85rem; color: var(--texto-suave); line-height: 1.5; flex-grow: 1; }
.tarjeta-finalidad .pie-finalidad {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--borde);
}
.tarjeta-finalidad .tag-finalidad {
  font-family: "JetBrains Mono", "Courier New", monospace; font-weight: 700; font-size: 0.78rem;
  padding: 5px 10px; border-radius: 4px;
}
.tarjeta-finalidad .tag-finalidad.gratis { background: var(--ok-bg); color: var(--ok-texto); }
.tarjeta-finalidad .tag-finalidad.pago { background: var(--pink-light); color: var(--pink-dark); }
.tarjeta-finalidad .flecha-finalidad { color: var(--texto-suave); font-weight: 800; flex: 0 0 auto; }

/* ---------- Formularios ---------- */
/* Antes se usaba un solapamiento fijo (margin-top negativo) para que la
   tarjeta del formulario "flotara" ligeramente sobre el final de la
   cabecera -- pero como las dos columnas del hero (texto vs. tarjeta de
   ejemplo) pueden tener alturas muy distintas según el contenido, un
   desplazamiento fijo en píxeles solapaba de forma inconsistente (a veces
   cortando la propia tarjeta de ejemplo). Se sustituye por un margen
   superior siempre positivo, que no depende de la altura del hero. */
.tarjeta-formulario {
  background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 28px 24px; max-width: 640px; margin: 40px auto 0; position: relative; z-index: 2;
}
.tarjeta-formulario h2 { margin-top: 0; font-size: 1.1rem; }
.formulario { display: flex; flex-direction: column; gap: 16px; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; font-weight: 800; color: var(--texto); }
.formulario label[hidden] { display: none; }
.formulario input, .formulario select {
  padding: 12px 14px; border: 1px solid var(--borde); border-radius: 8px;
  font-size: 1rem; font-family: inherit; background: var(--blanco); color: var(--texto);
}
.formulario input:focus, .formulario select:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-light); }
.fila-formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin: 0; }
fieldset legend { font-weight: 800; font-size: 0.8rem; padding: 0 6px; }
.grid-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.chip-check {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--borde); border-radius: 8px;
  padding: 10px 12px; font-size: 0.88rem; font-weight: 700; cursor: pointer; background: var(--blanco);
}
.chip-check:has(input:checked) { border-color: var(--pink); background: var(--pink-light); color: var(--pink-dark); }
.chip-check input { accent-color: var(--pink); width: 16px; height: 16px; }

button, .boton {
  background: var(--pink); color: white; border: none; border-radius: 8px;
  padding: 13px 18px; font-size: 0.95rem; font-weight: 800; cursor: pointer; font-family: inherit;
  letter-spacing: 0.01em;
}
button:hover, .boton:hover { background: var(--pink-dark); }

.aviso { padding: 13px 16px; border-radius: 8px; font-size: 0.86rem; }
.aviso-ok { background: var(--ok-bg); color: var(--ok-texto); }
.aviso-atencion { background: var(--atencion-bg); color: var(--atencion-texto); }
.aviso-error { background: var(--error-bg); color: var(--error-texto); }

/* ---------- Entrada de campos "detallada" (ampliación 14/09/2026) ----------
   Componentes reutilizables para dar más cuerpo visual a los formularios de
   entrada de datos (caracteristicas.html, tasacion_presencial.html) siguiendo
   el mismo lenguaje ya establecido (tarjetas de borde fino, azul marino,
   dorado solo para lo oficial) -- SIN inventar campos que no alimenten nada
   real: cada componente de aquí sigue mapeando 1:1 a un campo que el backend
   ya lee o guarda. */
.seccion-campo { border: none; padding: 0; margin: 0 0 26px; }
.seccion-campo:last-child { margin-bottom: 0; }
.seccion-campo-cabecera {
  display: flex; align-items: center; gap: 10px; padding-bottom: 10px;
  margin-bottom: 16px; border-bottom: 1px solid var(--borde);
}
.seccion-campo-cabecera .num {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 6px;
  background: var(--black); color: white; font-size: 0.74rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-family: "Merriweather", Georgia, serif;
}
.seccion-campo-cabecera legend, .seccion-campo-cabecera .titulo-seccion-campo {
  font-weight: 800; font-size: 0.92rem; padding: 0; color: var(--black);
}
.seccion-campo-cabecera .badge-estado-campo {
  margin-left: auto; font-size: 0.66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 3px 9px; border-radius: 4px;
  background: var(--ok-bg); color: var(--ok-texto); border: 1px solid #BBF7D0;
  white-space: nowrap;
}

/* Escala de 5 niveles (conservación/acabados/equipamiento): fila de pastillas
   en vez de un <select> plano -- mismo <select> por debajo para no tocar el
   backend, solo se oculta visualmente y se controla por JS. */
.escala-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.escala-card {
  border: 1px solid var(--borde); border-radius: 8px; padding: 9px 4px;
  text-align: center; font-size: 0.68rem; font-weight: 700; cursor: pointer;
  background: var(--blanco); color: var(--texto-suave); line-height: 1.25;
}
.escala-card:hover { border-color: var(--pink); }
.escala-card.activa { border-color: var(--pink); background: var(--pink-light); color: var(--pink-dark); }

/* Contador +/- (habitaciones, baños): mismo patrón que el <select> al que
   sustituye visualmente -- un <input type="number"> real por debajo. */
.contador {
  display: flex; align-items: center; gap: 0; border: 1px solid var(--borde);
  border-radius: 8px; overflow: hidden; background: var(--fondo-alt);
}
.contador button {
  background: var(--blanco); color: var(--black); border: none; border-radius: 0;
  width: 40px; height: 40px; font-size: 1.1rem; font-weight: 800; padding: 0; flex: 0 0 auto;
}
.contador button:hover { background: var(--pink-light); color: var(--pink-dark); }
.contador .valor-contador {
  flex: 1; text-align: center; font-weight: 800; font-size: 0.92rem;
  font-family: "JetBrains Mono", monospace;
}

/* Tarjetas de opción seleccionable con radio real por debajo (finalidad
   legal en tasacion_presencial.html) -- mismo patrón visual que
   .tarjeta-finalidad de la matriz de la portada, pero clicable como grupo de
   radio en vez de enlace. */
.opciones-radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opcion-radio-card {
  display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borde);
  border-radius: 8px; padding: 14px 16px; cursor: pointer; background: var(--blanco);
}
.opcion-radio-card:hover { border-color: var(--pink); }
.opcion-radio-card:has(input:checked) { border-color: var(--pink); background: var(--pink-light); }
.opcion-radio-card input { margin-top: 3px; accent-color: var(--pink); flex: 0 0 auto; }
.opcion-radio-card .texto-opcion { display: flex; flex-direction: column; gap: 2px; }
.opcion-radio-card .texto-opcion strong { font-size: 0.88rem; }
.opcion-radio-card .texto-opcion span { font-size: 0.76rem; color: var(--texto-suave); }

/* Panel lateral "resumen del expediente" (tasacion_presencial.html) --
   reaprovecha el mismo bloque oscuro de precio que .rama.negra .precio-box,
   ahora como tarjeta autónoma en vez de dentro de la comparativa freemium. */
.panel-resumen-presencial {
  background: var(--black); color: white; border-radius: var(--radio);
  padding: 22px; position: sticky; top: 20px;
}
.panel-resumen-presencial h3 { color: white; margin: 0 0 14px; font-size: 0.95rem; }
.panel-resumen-presencial .linea-resumen {
  display: flex; justify-content: space-between; font-size: 0.82rem;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.12); color: #C9C9CD;
}
.panel-resumen-presencial .linea-resumen strong { color: white; font-family: "JetBrains Mono", monospace; }
.panel-resumen-presencial .linea-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.2);
}
.panel-resumen-presencial .linea-total .etiqueta { font-size: 0.78rem; color: #C9C9CD; }
.panel-resumen-presencial .linea-total .cifra { font-size: 1.6rem; font-weight: 800; color: var(--dorado); font-family: "JetBrains Mono", monospace; }
.panel-resumen-presencial .nota-resumen { font-size: 0.72rem; color: #9A9AA0; margin-top: 12px; line-height: 1.5; }

.grid-presencial { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }

@media (max-width: 780px) {
  .opciones-radio-cards { grid-template-columns: 1fr; }
  .grid-presencial { grid-template-columns: 1fr; }
  .panel-resumen-presencial { position: static; margin-top: 0; }
  .barra-superior .credencial-mini { display: none; }
  .barra-superior-interior { justify-content: center; }
  .stepper-tasacion { padding: 12px 10px; }
  .paso-stepper .texto-paso { display: none; }
  .paso-stepper.activo .texto-paso { display: inline; font-size: 0.7rem; }
  .linea-stepper { margin: 0 6px; flex: 1 1 20px; }
}

.nota-opcional {
  display: inline-block; font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--texto-suave); background: var(--fondo-alt);
  padding: 2px 8px; border-radius: 4px; margin-left: 8px; vertical-align: middle;
}

@media (max-width: 640px) {
  .escala-cards { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .escala-card { font-size: 0.6rem; padding: 8px 2px; }
}

/* ---------- Resultado ---------- */
.resultado-cabecera { margin-bottom: 24px; }
.resultado-cabecera .etiqueta-tipo {
  display: inline-block; background: var(--fondo-alt); color: var(--texto-suave); border: 1px solid var(--borde);
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 11px; border-radius: 4px; margin-bottom: 10px;
}
.resultado-destacado {
  background: var(--black); color: white; border-radius: 14px; padding: 30px 24px; text-align: center; margin: 0 0 24px;
}
.resultado-destacado .etiqueta { display: block; font-size: 0.82rem; color: #B9B9BD; margin-bottom: 6px; }
.resultado-destacado .valor { display: block; font-size: 2.6rem; font-weight: 800; color: white; letter-spacing: -0.02em; }
.resultado-destacado .rango { font-size: 0.82rem; color: #B9B9BD; margin-top: 6px; }

/* ---------- Ficha simplificada freemium (ampliación del 01/09/2026) ---------- */
.chip-fiabilidad {
  display: inline-block; font-size: 0.72rem; font-weight: 800; padding: 4px 12px;
  border-radius: 4px; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.03em;
}
.chip-fiabilidad-baja { background: var(--error-bg); color: var(--error-texto); }
.chip-fiabilidad-media { background: var(--atencion-bg); color: var(--atencion-texto); }
.chip-fiabilidad-alta { background: var(--ok-bg); color: var(--ok-texto); }

.dato-destacado { font-size: 1.3rem; font-weight: 800; margin: 4px 0 6px; }

.banda-valores { margin-top: 14px; }
.banda-valores .barra {
  position: relative; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #2E8B57, #E8C547, #C0392B);
}
.banda-valores .marcador {
  position: absolute; top: -5px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--black);
}
.banda-valores .etiquetas { display: flex; justify-content: space-between; font-size: 0.82rem; margin-top: 8px; }

.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; margin-bottom: 20px; }
.tarjeta h3 { margin: 0 0 14px; font-size: 1rem; font-weight: 800; }

table.detalle { width: 100%; border-collapse: collapse; }
table.detalle th, table.detalle td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 0.9rem; }
table.detalle th { color: var(--texto-suave); font-weight: 600; width: 55%; }

#grafico-comparativa { max-width: 100%; }
#mapa-comparables { width: 100%; height: 260px; border-radius: 8px; overflow: hidden; border: 1px solid var(--borde); background: var(--fondo-alt); }

table.comparables { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
table.comparables th, table.comparables td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borde); }
table.comparables th { color: var(--texto-suave); font-weight: 800; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
table.comparables tr:last-child td { border-bottom: none; }

.nota { font-size: 0.83rem; color: var(--texto-suave); }
.formulario-lead { margin-top: 12px; }

/* ---------- Autocompletado de calle (espejo del callejero del Catastro) ---------- */
.campo-autocompletar { position: relative; }
.sugerencias-calle {
  list-style: none; margin: 4px 0 0; padding: 4px 0; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px; box-shadow: var(--sombra);
  max-height: 220px; overflow-y: auto; z-index: 20;
}
.sugerencias-calle[hidden] { display: none; }
.sugerencias-calle li {
  padding: 10px 14px; font-size: 0.92rem; font-weight: 600; color: var(--texto); cursor: pointer;
}
.sugerencias-calle li:hover, .sugerencias-calle li.activa { background: var(--pink-light); color: var(--pink-dark); }

/* ---------- Elegir unidad (piso/puerta) entre varias del Catastro ---------- */
.lista-unidades { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.lista-unidades .chip-check { justify-content: flex-start; }
.boton-secundario {
  background: transparent; color: var(--texto-suave); border: 1px solid var(--borde);
  margin-top: 10px; font-weight: 700;
}
.boton-secundario:hover { background: var(--gris-claro, #f4f4f4); color: var(--texto); }

/* ---------- Panel de mercado ---------- */
.filtro-municipios { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 28px; }
.filtro-municipios a {
  text-decoration: none; font-size: 0.82rem; font-weight: 800; padding: 7px 14px;
  border-radius: 4px; border: 1px solid var(--borde); color: var(--texto-suave); background: var(--blanco);
}
.filtro-municipios a.activo { background: var(--black); border-color: var(--black); color: white; }

.leyenda-calor { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.76rem; color: var(--texto-suave); }
.leyenda-calor .barra { flex: 1; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #2E8B57, #E8C547, #C0392B); }

.fila-ranking { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 0.88rem; }
.fila-ranking:last-child { border-bottom: none; }
.fila-ranking .zona { flex: 1; font-weight: 800; }
.fila-ranking .zona small { display: block; font-weight: 500; color: var(--texto-suave); font-size: 0.74rem; }
.fila-ranking .precio { font-weight: 800; color: var(--pink-dark); }

.aviso-vacio { text-align: center; padding: 36px 20px; color: var(--texto-suave); font-size: 0.9rem; }

.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- Backoffice: coeficientes por letra ---------- */
.grid-coeficientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.casilla-coeficiente {
  display: flex; flex-direction: column; gap: 5px; font-size: 0.72rem; font-weight: 700;
  color: var(--texto-suave); line-height: 1.25;
}
.casilla-coeficiente input { padding: 9px 10px; font-size: 0.9rem; }
.casilla-coeficiente-otros span { color: var(--pink-dark); }
.casilla-coeficiente-otros input { border-color: var(--pink); }

/* ---------- Backoffice: datos econométricos por testigo (progresivos) ---------- */
.fila-econometrica td { border-bottom: 1px solid var(--borde); background: var(--fondo-alt); }
.fila-econometrica details { padding: 8px 4px; }
.fila-econometrica summary {
  cursor: pointer; font-size: 0.76rem; font-weight: 700; color: var(--texto-suave);
  list-style: revert;
}
.fila-econometrica summary:hover { color: var(--pink-dark); }

/* ---------- Backoffice: ajuste de valor de mercado (excepcional, en rojo) ---------- */
.tarjeta-ajuste-mercado { border: 1px solid var(--error-texto); }
.tarjeta-ajuste-mercado h3 { color: var(--error-texto); }
.tarjeta-ajuste-mercado input { border-color: var(--error-texto); }
.tarjeta-ajuste-mercado input:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15); border-color: var(--error-texto); }
.presupuesto-destacado { font-size: 1.4rem; font-weight: 800; color: var(--dorado); margin: 12px 0 4px; }

/* ---------- Pie ---------- */
.pie { background: var(--black); color: #9A9AA0; margin-top: 64px; padding: 32px 20px; font-size: 0.8rem; }
.pie-interior { max-width: 1040px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pie a { color: #C9C9CD; }

.footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--black); color: white; padding: 34px 44px; flex-wrap: wrap; border-radius: var(--radio); margin-top: 48px;
}
.footer-cta .fc-izq { display: flex; align-items: center; gap: 18px; }
.footer-cta .fc-icono {
  width: 50px; height: 50px; background: var(--dorado); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 50px;
}
.footer-cta h3 { margin: 0 0 2px; font-size: 1.05rem; font-weight: 800; }
.footer-cta p { margin: 0; font-size: 0.8rem; color: #C9C9CD; }

/* ---------- Firma de tasadores ---------- */
.chip-firma-ok, .chip-firma-pendiente {
  display: inline-block; font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: 4px;
}
.chip-firma-ok { background: var(--ok-bg); color: var(--ok-texto); }
.chip-firma-pendiente { background: var(--atencion-bg); color: var(--atencion-texto); }

.tarjeta-firma .firma-bloque { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tarjeta-firma .firma-imagen { max-height: 90px; max-width: 260px; object-fit: contain; }
.tarjeta-firma .firma-sello {
  display: flex; align-items: center; gap: 10px; border: 2px solid var(--black); border-radius: 6px;
  padding: 10px 16px; font-weight: 800; font-size: 0.9rem;
}
.tarjeta-firma .firma-sello-icono { font-size: 1.4rem; }
.tarjeta-firma .firma-datos { font-size: 0.88rem; line-height: 1.5; margin: 0; }
/* Gravedad notarial puntual: serif editorial en cursiva solo para el nombre
   del tasador y el título del bloque de firma -- nunca en el resto del texto. */
.tarjeta-firma h3 { font-style: italic; font-weight: 600; }
.tarjeta-firma .firma-datos strong { font-family: "Merriweather", Georgia, serif; font-style: italic; font-size: 1.05em; }

/* ---------- Upsells de pago (ampliación del 31/08/2026) ---------- */
.grid-upsells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.upsell {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.upsell h4 { margin: 0; font-size: 0.92rem; font-weight: 800; }
.upsell p { margin: 0; font-size: 0.82rem; color: #55555c; flex-grow: 1; }
.upsell form { margin-top: auto; }
.upsell button { width: 100%; }
@media (max-width: 900px) {
  .grid-upsells { grid-template-columns: 1fr; }
}

/* ---------- Estrategia comercial: badge, ahorro y order bump (01/09/2026) ---------- */
.upsell.destacado { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }
.upsell .etiqueta-destacado {
  align-self: flex-start; background: var(--pink); color: var(--blanco);
  font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.upsell .nota-ahorro {
  background: var(--ok-bg); color: var(--ok-texto); font-size: 0.8rem;
  padding: 6px 10px; border-radius: 8px; margin: 0;
}
.oferta-siguiente { border-color: var(--pink); }

/* ---------- Informe auditado por arquitecto: resumen, esquema de
   metodología y ficha técnica (ampliación 10/09/2026) ---------- */
.grid-resumen-valoracion { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; margin-top: 2px; }
.resumen-item { text-align: center; }
.resumen-item .resumen-etiqueta {
  display: block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--texto-suave); margin-bottom: 4px;
}
.resumen-item .resumen-valor { display: block; font-size: 0.98rem; font-weight: 800; color: var(--texto); }

.etiqueta-tipo-auditado {
  display: inline-block; background: var(--ok-bg); color: var(--ok-texto); border: 1px solid #A7F3D0;
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 11px; border-radius: 4px; margin-bottom: 10px; margin-left: 8px;
}

.cascada-metodologia { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; margin-top: 12px; }
.cascada-paso {
  background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px 16px; flex: 1 1 150px; min-width: 140px; text-align: center;
}
.cascada-paso .cascada-titulo {
  display: block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--texto-suave); margin-bottom: 5px;
}
.cascada-paso .cascada-valor { display: block; font-size: 0.92rem; font-weight: 800; color: var(--texto); line-height: 1.3; }
.cascada-paso .cascada-sub { display: block; font-size: 0.72rem; color: var(--texto-suave); margin-top: 3px; }
.cascada-paso.cascada-final { background: var(--black); border-color: var(--black); }
.cascada-paso.cascada-final .cascada-titulo { color: #B9B9BD; }
.cascada-paso.cascada-final .cascada-valor { color: var(--dorado); font-size: 1.05rem; }
.cascada-flecha {
  flex: 0 0 auto; align-self: center; padding: 0 10px; color: var(--texto-suave);
  font-size: 1.3rem; font-weight: 800;
}

.grid-caracteristicas { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.chip-info {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 8px;
  padding: 8px 11px; font-size: 0.82rem; font-weight: 700; background: var(--fondo-alt); color: var(--texto-suave);
}
.chip-info.chip-info-si { border-color: #A7F3D0; background: var(--ok-bg); color: var(--ok-texto); }
.chip-info .chip-info-punto { font-weight: 800; }

/* ---------- Directorio público de tasaciones (ampliación 11/09/2026) ---------- */
.grid-directorio { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tarjeta-directorio {
  display: block; text-decoration: none; color: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tarjeta-directorio:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.tarjeta-directorio h3 { margin: 10px 0 0; font-size: 1rem; }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.paginacion a { font-weight: 700; text-decoration: none; color: var(--texto); }
.paginacion a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .nav-cabecera a:not(.cta) { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 220px; }
  .hero-badges { grid-template-columns: 1fr; }
  .grid-meta-ejemplo { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .timeline::before { display: none; }
  .grid-estadisticas { grid-template-columns: 1fr 1fr; }
  .fila-formulario { grid-template-columns: 1fr; }
  .grid-chips { grid-template-columns: 1fr; }
  .seccion-metodologia { flex-direction: column; }
  .decision-ramas, .grid-planes { grid-template-columns: 1fr; }
  .grid-finalidades { grid-template-columns: 1fr; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .cascada-metodologia { flex-direction: column; }
  .cascada-flecha { transform: rotate(90deg); padding: 4px 0; }
  /* .grid-2col (Instalaciones/Acabados del informe y del backoffice) se
     quedaba con dos columnas fijas de 1fr en cualquier ancho -- en un
     móvil (~390px) cada columna quedaba tan estrecha que el texto de la
     tabla ("Correcto", "No existe"...) se cortaba. Ver conversación del
     12/09/2026: bug detectado por Arturo ("no es responsive de toda la
     web"), confirmado con una captura antes/después. */
  .grid-2col { grid-template-columns: 1fr; }
}