/* DANER SOLAR · calc-bombeo.css
   SOLO los estilos de la calculadora de bombeo (/calculadora-bombeo). La interfaz
   usa siempre tokens del sistema de diseño (daner.css); la única paleta propia es
   la del diagrama geológico, definida aquí para tema claro y oscuro.
   Va en archivo aparte a propósito: solo la descarga esta página. */

/* ═══════ Paleta del diagrama (corte geológico) ═══════ */
:root {
  --cb-cielo-1: #cfe6f7;  --cb-cielo-2: #eef6fd;
  --cb-sol: #ffc15e;
  --cb-suelo-1: #c9a87e;        /* capa vegetal    */
  --cb-suelo-2: #d9c9a4;        /* subsuelo        */
  --cb-suelo-3: #b3a184;        /* estrato profundo */
  --cb-grava: #8e7c62;
  --cb-terreno: #7e6a4c;
  --cb-agua-1: rgba(72, 154, 208, .60);
  --cb-agua-2: rgba(30, 94, 142, .72);
  --cb-agua-linea: #2f7fb8;
  --cb-metal-1: #7d8b99;  --cb-metal-2: #aab6c2;
  --cb-ademe: #6a7784;
  --cb-equipo: #16324a;
  --cb-est: #1f6fa8;
  --cb-din: #e07d06;
  --cb-chip-fondo: #ffffff;
  --cb-chip-borde: #c9d8e6;
  --cb-chip-texto: #0b2036;
  --cb-error: #c2451f;
  /* Altura del header fijo del sitio + respiro: lo que hay que dejar libre al
     desplazar la vista hacia un elemento o al fijar el panel lateral. */
  --cb-tope: calc(var(--nav-h, 76px) + var(--sp-3));
}
:root[data-theme="dark"] {
  --cb-cielo-1: #14324a;  --cb-cielo-2: #0f2536;
  --cb-suelo-1: #5a4b37;  --cb-suelo-2: #6b5c45;  --cb-suelo-3: #4c4234;
  --cb-grava: #8b7c63;    --cb-terreno: #93805f;
  --cb-agua-1: rgba(64, 140, 195, .52);
  --cb-agua-2: rgba(22, 74, 115, .68);
  --cb-agua-linea: #5fa9d8;
  --cb-metal-1: #5d6b78;  --cb-metal-2: #8d9aa6;
  --cb-ademe: #8593a1;
  --cb-equipo: #cfe0ee;
  --cb-est: #6fb2df;      --cb-din: #ffa53d;
  --cb-chip-fondo: #12314a; --cb-chip-borde: #2a4c68; --cb-chip-texto: #e8f1f9;
  --cb-error: #ff8a65;
}

.cb-oculto { display: none !important; }
/* Campo trampa para robots: fuera de la vista y del lector de pantalla. */
.cb-trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══════ Cabecera de la página ═══════ */
/* El molde del sitio limita la cabecera al ancho de lectura (~595 px), que en
   un monitor deja media pantalla vacía. Aquí se usa el ancho completo y el
   espacio de la derecha lo ocupa el personaje. Solo afecta a esta página. */
.pagina-head__inner.cb-hero { max-width: var(--contenido); }
/* Cabecera más compacta que en las demás páginas: el título y el botón de
   empezar deben verse en la primera pantalla. */
.pagina-head { padding-bottom: var(--sp-6); }
.cb-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-5); align-items: center; }
.cb-hero__texto { max-width: 44rem; }
.pagina-head .cb-hero__entrada { max-width: calc(60 * var(--ch)); }
.cb-hero__personaje { display: block; width: 100%; max-width: 400px; height: auto; justify-self: center; }
.cb-hero__cta { margin-top: var(--sp-4); }

.cb-ventajas { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: .4rem; }
.cb-ventajas li { position: relative; padding-left: 1.6rem; color: var(--tinta-suave); font-size: var(--t-sm); }
.cb-ventajas li::before { content: "✓"; position: absolute; left: 0; color: var(--aval); font-weight: 700; }
.cb-ventajas strong { color: var(--tinta); }

@media (max-width: 1000px) {
  /* Tableta: el personaje se queda a la derecha, pero pequeño. */
  .cb-hero { grid-template-columns: minmax(0, 1fr) 190px; gap: var(--sp-4); }
  .cb-hero__texto { max-width: none; }
}
@media (max-width: 640px) {
  /* Teléfono: una columna; el personaje arriba y chico, para que el título y
     el botón de empezar queden en la primera pantalla. */
  .pagina-head { padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
  .cb-hero { grid-template-columns: 1fr; gap: var(--sp-2); }
  .cb-hero__personaje { order: -1; max-width: 132px; justify-self: start; }
  .cb-hero__cta { width: 100%; }
}

/* ═══════ Sección de la calculadora ═══════ */
/* El .seccion del sitio deja 104 px arriba y abajo; aquí la herramienta va
   pegada a la cabecera y el contenido manda. */
.seccion.cb-seccion { padding-block: var(--sp-5) var(--sp-6); }
#calculadora, .cb-layout, #cb-resultado { scroll-margin-top: var(--cb-tope); }

/* ═══════ Barra de pasos ═══════ */
.cb-pasos { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-1); padding: 0; margin: 0 0 var(--sp-3); }
.cb-pasos li {
  display: flex; align-items: center; gap: .5rem; cursor: pointer; min-width: 0;
  padding: .5rem .8rem; border-radius: var(--r-pill);
  border: 1px solid var(--cielo-200); background: var(--blanco);
  font-size: var(--t-sm); font-weight: 500; color: var(--tinta-tenue);
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.cb-pasos li:hover { border-color: var(--cielo-300); color: var(--tinta-suave); }
.cb-pasos__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-pasos__n {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem;
  border-radius: var(--r-pill); background: var(--cielo-100);
  color: var(--tinta-suave); font-weight: 700; font-size: var(--t-cap); flex: none;
}
.cb-pasos--activo { border-color: var(--sol) !important; color: var(--tinta) !important; box-shadow: 0 0 0 3px var(--sol-100); }
.cb-pasos--activo .cb-pasos__n { background: var(--sol); color: #fff; }
.cb-pasos--ok { color: var(--tinta-suave); }
.cb-pasos--ok .cb-pasos__n { background: var(--aval); color: #fff; font-size: 0; }
.cb-pasos--ok .cb-pasos__n::after { content: "✓"; font-size: .8rem; }

/* ═══════ Layout: asistente + panel lateral ═══════ */
/* El asistente y las preguntas frecuentes van juntos en `.cb-col` (una sola
   celda del grid): así las preguntas quedan pegadas al asistente. El panel
   lateral es UNA tarjeta compacta (diagrama + datos) para que su altura quede
   a la par de los pasos cortos y no abra huecos. */
.cb-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.cb-col { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
@media (max-width: 900px) {
  /* En una sola columna conviene ver el dibujo del pozo antes que las
     preguntas, que son de consulta. */
  .cb-layout { grid-template-columns: 1fr; gap: var(--sp-3); }
  .cb-col { display: contents; }
  .cb-form { order: 0; }
  .cb-aside { order: 1; }
  .cb-faq { order: 2; margin-top: var(--sp-2); }
}

/* ═══════ Asistente ═══════ */
.cb-form { padding: var(--sp-5); }
.cb-step__kicker { color: var(--sol-600); font-weight: 700; font-size: var(--t-cap); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .35rem; }
.cb-step__titulo { font-family: var(--f-display); font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); line-height: 1.15; margin: 0 0 var(--sp-2); }
.cb-step__intro { color: var(--tinta-suave); margin: 0 0 var(--sp-4); max-width: calc(62 * var(--ch)); }

.cb-conceptos { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--sp-3); }
.cb-concepto { background: var(--cielo-50); border: 1px solid var(--cielo-200); border-radius: var(--r-md); padding: var(--sp-3); }
.cb-concepto p { margin: .5rem 0 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.cb-concepto__tag { display: inline-block; font-size: var(--t-cap); font-weight: 700; padding: .18rem .65rem; border-radius: var(--r-pill); color: #fff; }
.cb-concepto__tag--estatico { background: var(--cb-est); }
.cb-concepto__tag--dinamico { background: var(--cb-din); }
[data-theme="dark"] .cb-concepto__tag { color: #06182b; }

.cb-destacado { background: var(--sol-100); border-left: 3px solid var(--sol); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--t-sm); margin: 0 0 var(--sp-4); }

.cb-campo { margin-bottom: var(--sp-4); min-width: 0; }
.cb-campo label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: var(--t-sm); color: var(--tinta); }
.cb-unidad { color: var(--tinta-tenue); font-weight: 500; }
.cb-campo input, .cb-campo select {
  width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1px solid var(--cielo-300); border-radius: var(--r-md);
  background: var(--blanco); color: var(--tinta); font-family: var(--f-cuerpo); font-size: var(--t-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cb-campo input::placeholder { color: var(--tinta-tenue); opacity: .75; }
.cb-campo input[type="number"] { font-family: var(--f-mono); }
.cb-campo input:hover, .cb-campo select:hover { border-color: var(--cielo-400, var(--cielo-300)); }
.cb-campo input:focus-visible, .cb-campo select:focus-visible { outline: none; border-color: var(--sol); box-shadow: 0 0 0 3px var(--sol-100); }
.cb-invalido { border-color: var(--cb-error) !important; background: rgba(194, 69, 31, .05) !important; }
.cb-inline { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-2); }
/* Pares de campos lado a lado en pantallas anchas: acorta el paso sin
   esconder nada. Se apilan en teléfono. */
.cb-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }
.cb-pista { margin: .4rem 0 0; font-size: var(--t-cap); line-height: 1.5; color: var(--tinta-tenue); }
.cb-pista--bloque { margin: 0 0 var(--sp-3); }
.cb-pista strong { color: var(--tinta-suave); }
.cb-nota { font-size: var(--t-cap); color: var(--tinta-tenue); font-style: italic; }
.cb-error { margin: .35rem 0 0; font-size: var(--t-cap); font-weight: 500; color: var(--cb-error); }
.cb-error:empty { display: none; }

.cb-ayuda { border: 1px solid var(--cielo-200); background: var(--cielo-50); border-radius: var(--r-md); padding: .15rem var(--sp-3); margin-bottom: var(--sp-2); }
.cb-ayuda summary {
  cursor: pointer; font-weight: 600; font-size: var(--t-sm); color: var(--sol-600);
  list-style: none; position: relative; padding: .6rem 1.6rem .6rem 0;
  /* holgura táctil: el desplegable debe ser cómodo de tocar en teléfono */
  min-height: 44px; display: flex; align-items: center;
}
.cb-ayuda summary::-webkit-details-marker { display: none; }
.cb-ayuda summary::after {
  content: ""; position: absolute; right: .2rem; top: 50%; width: .5rem; height: .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.cb-ayuda[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cb-ayuda[open] { padding-bottom: var(--sp-2); }
.cb-ayuda p, .cb-ayuda li { font-size: var(--t-sm); color: var(--tinta-suave); }
.cb-ayuda p { margin: 0 0 .5rem; }
.cb-ayuda ul { padding-left: 1.1rem; margin: 0 0 .5rem; }
.cb-ayuda li { margin-bottom: .35rem; }
[data-theme="dark"] .cb-ayuda summary { color: var(--sol); }

.cb-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--cielo-200); }
.cb-nav .btn--sol { margin-left: auto; min-width: 11rem; }
.cb-nav .btn { min-height: 46px; }
.cb-estado { margin: var(--sp-2) 0 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.cb-estado:empty { display: none; }

/* ═══════ Panel lateral ═══════ */
.cb-aside { position: sticky; top: var(--cb-tope); min-width: 0; }
@media (max-width: 900px) { .cb-aside { position: static; } }
.cb-panel { padding: var(--sp-4); }
.cb-panel__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.cb-panel__titulo { font-family: var(--f-display); font-size: var(--t-h3); margin: 0; }
.cb-panel__nota { font-size: var(--t-cap); color: var(--tinta-tenue); }
.cb-panel__sub { font-family: var(--f-display); font-size: 1rem; margin: var(--sp-4) 0 var(--sp-1); }

/* ═══════ Diagrama ═══════ */
.cb-svg-wrap { max-width: 290px; margin: 0 auto; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--cielo-200); }
.cb-svg-wrap svg { display: block; width: 100%; height: auto; }

.cb-g-cielo1 { stop-color: var(--cb-cielo-1); }
.cb-g-cielo2 { stop-color: var(--cb-cielo-2); }
.cb-g-agua1 { stop-color: var(--cb-agua-1); }
.cb-g-agua2 { stop-color: var(--cb-agua-2); }
.cb-g-col1 { stop-color: var(--cb-metal-1); }
.cb-g-col2 { stop-color: var(--cb-metal-2); }

.cb-sol circle { fill: var(--cb-sol); }
.cb-sol line { stroke: var(--cb-sol); stroke-width: 2; stroke-linecap: round; }

.cb-suelo1 { fill: var(--cb-suelo-1); }
.cb-suelo2 { fill: var(--cb-suelo-2); }
.cb-suelo3 { fill: var(--cb-suelo-3); }
.cb-grava { fill: var(--cb-grava); opacity: .55; }
.cb-terreno { stroke: var(--cb-terreno); stroke-width: 2.5; }
.cb-agua-linea { stroke: var(--cb-agua-linea); stroke-width: 2; }

.cb-ademe-pared { fill: var(--cb-ademe); }
.cb-rejilla { stroke: var(--cb-cielo-2); stroke-width: 1.6; opacity: .85; }
.cb-brocal { fill: var(--cb-ademe); }

.cb-panel-fv path { fill: var(--cb-equipo); opacity: .9; }
.cb-panel-fv line { stroke: var(--cb-cielo-2); stroke-width: 1; }
.cb-panel-fv .cb-poste { stroke: var(--cb-metal-1); stroke-width: 2.5; }
.cb-variador rect { fill: var(--cb-metal-1); }
.cb-variador line { stroke: var(--cb-cielo-2); stroke-width: 1.5; }
.cb-cable-fv { stroke: var(--cb-equipo); stroke-width: 1.5; stroke-dasharray: 3 2; }

.cb-tanque rect { fill: none; stroke: var(--cb-metal-1); stroke-width: 2; }
.cb-tanque .cb-tanque-agua { fill: var(--cb-agua-linea); stroke: none; opacity: .5; }
.cb-tanque .cb-pata { stroke: var(--cb-metal-1); stroke-width: 2; }
.cb-tubo-desc { stroke: var(--cb-metal-1); stroke-width: 3; stroke-linejoin: round; }
.cb-flecha { fill: var(--cb-agua-linea); }

.cb-equipo-pozo line { stroke: var(--cb-cielo-2); stroke-width: 1; opacity: .6; }
.cb-bomba-cuerpo { fill: var(--cb-metal-2); }
.cb-malla { fill: var(--cb-equipo); opacity: .75; }
.cb-motor-cuerpo { fill: var(--cb-equipo); }

.cb-regla { stroke: var(--cb-terreno); stroke-width: 1; opacity: .55; }
.cb-regla-txt {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  fill: var(--cb-terreno);
  /* contorno para que el número se lea sobre cualquier estrato o sobre el agua */
  paint-order: stroke; stroke: var(--cb-cielo-2); stroke-width: 2.6px; stroke-linejoin: round;
}

.cb-guia { stroke-width: 1.5; }
.cb-guia--est { stroke: var(--cb-est); }
.cb-guia--din { stroke: var(--cb-din); stroke-dasharray: 5 3; }
.cb-cota { stroke: var(--cb-din); stroke-width: 1.2; }
/* Cotas horizontales (distancia al variador y a donde va el agua). Neutras a
   propósito: miden distancias, no niveles de agua. */
.cb-cotah line { stroke: var(--cb-equipo); stroke-width: 1.1; opacity: .75; }
.cb-cotah-txt { font-family: var(--f-cuerpo); font-size: 11px; font-weight: 600; fill: var(--cb-equipo);
  text-anchor: middle; paint-order: stroke; stroke: var(--cb-cielo-1); stroke-width: 3px; stroke-linejoin: round; }

.cb-chip rect { fill: var(--cb-chip-fondo); stroke: var(--cb-chip-borde); stroke-width: 1; }
.cb-chip text { font-family: var(--f-cuerpo); font-size: 11.5px; font-weight: 600; fill: var(--cb-chip-texto); }
.cb-chip--est rect { fill: var(--cb-est); stroke: var(--cb-est); }
.cb-chip--est text { fill: #fff; }
.cb-chip--din rect { fill: var(--cb-din); stroke: var(--cb-din); }
.cb-chip--din text { fill: #fff; }
.cb-chip--pendiente rect { fill: var(--cb-chip-fondo); stroke: var(--cb-din); stroke-dasharray: 3 2; }
.cb-chip--pendiente text { fill: var(--cb-din); }
[data-theme="dark"] .cb-chip--est text, [data-theme="dark"] .cb-chip--din text { fill: #06182b; }

/* ═══════ Datos capturados (dentro del panel) ═══════ */
/* Dos columnas: seis datos en tres renglones, en vez de una lista larga. */
.cb-checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }
.cb-checklist li { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid var(--cielo-200); font-size: var(--t-cap); line-height: 1.35; min-width: 0; }
.cb-chk__i { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: var(--r-pill); font-size: .68rem; font-weight: 700; flex: none; margin-top: .05rem; }
.cb-chk--ok .cb-chk__i { background: var(--aval); color: #fff; }
.cb-chk--falta .cb-chk__i { background: var(--cielo-100); color: var(--tinta-tenue); }
.cb-chk--aviso .cb-chk__i { background: var(--sol); color: #fff; }
.cb-chk__t { color: var(--tinta-tenue); min-width: 0; }
.cb-chk--ok .cb-chk__t, .cb-chk--aviso .cb-chk__t { color: var(--tinta); font-weight: 500; }
.cb-chk__t em { display: block; font-style: normal; font-weight: 500; font-family: var(--f-mono); font-size: .72rem; color: var(--tinta-suave); overflow-wrap: anywhere; }

/* ═══════ Preguntas frecuentes ═══════ */
.cb-faq__titulo { font-family: var(--f-display); font-size: var(--t-h3); margin: 0 0 var(--sp-3); }
/* Enlace a la guía del blog (el artículo enlaza de vuelta a la calculadora) */
.cb-faq__guia { margin: var(--sp-3) 0 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.cb-faq__guia a { color: var(--sol-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .cb-faq__guia a { color: var(--sol); }

/* ═══════ Resultado ═══════ */
.cb-res { margin-top: var(--sp-5); padding: var(--sp-5); border-color: var(--cielo-300); box-shadow: var(--sombra-md); }
.cb-res__cab { margin-bottom: var(--sp-4); }
/* Resultado que ya no corresponde a los datos capturados (se cambió algo). */
.cb-res__viejo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--sol-100); border: 1px solid var(--sol); font-size: var(--t-sm); }
.cb-res__viejo p { margin: 0; }
.cb-res--viejo .cb-res__cab, .cb-res--viejo .cb-cifras, .cb-res--viejo .cb-res__grid { opacity: .5; transition: opacity .2s ease; }
.cb-res__titulo { font-family: var(--f-display); font-size: var(--t-h2); line-height: 1.15; margin: var(--sp-1) 0 var(--sp-2); }
.cb-res__resumen { color: var(--tinta-suave); margin: 0; max-width: calc(70 * var(--ch)); }
.cb-res__resumen strong { color: var(--tinta); }
.cb-res__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; margin-top: var(--sp-2); }
.cb-res__bloque > .cb-sub:first-child { margin-top: var(--sp-3); }
.cb-sub { font-family: var(--f-display); font-size: 1.2rem; margin: var(--sp-4) 0 var(--sp-2); }
.cb-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cb-cifra { background: var(--cielo-50); border: 1px solid var(--cielo-200); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-2); text-align: center; }
.cb-cifra__v { display: block; font-family: var(--f-mono); font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); font-weight: 600; line-height: 1.2; color: var(--sol-600); }
.cb-cifra__t { display: block; font-size: var(--t-cap); color: var(--tinta-tenue); margin-top: .3rem; }
[data-theme="dark"] .cb-cifra__v { color: var(--sol); }
.cb-equipo { list-style: none; padding: 0; margin: 0; }
.cb-equipo li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--sp-2); padding: .65rem 0; border-bottom: 1px solid var(--cielo-200); font-size: var(--t-sm); align-items: baseline; }
.cb-equipo li:last-child { border-bottom: 0; }
.cb-equipo li span { color: var(--tinta-tenue); }
.cb-equipo li strong { font-family: var(--f-mono); font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.cb-nd { font-size: var(--t-sm); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border-left: 3px solid var(--cielo-300); background: var(--cielo-50); margin: 0 0 var(--sp-2); }
.cb-nd--alta, .cb-nd--mediaalta { border-left-color: var(--aval); }
.cb-nd--media { border-left-color: var(--cb-din); }
.cb-nd--baja { border-left-color: var(--sol); }
/* Lista corta dentro de un aviso: compacta, sin el margen suelto de una <ul>. */
.cb-lista-compacta { margin: var(--sp-1) 0 0; padding-left: 1.1rem; }
.cb-lista-compacta li { margin-bottom: .25rem; }
.cb-lista-compacta li:last-child { margin-bottom: 0; }
.cb-avisos { margin: 0; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--tinta-suave); }
.cb-avisos li { margin-bottom: .4rem; }
.cb-aviso-inline { font-size: var(--t-sm); background: var(--sol-100); border-left: 3px solid var(--sol); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); margin: 0 0 var(--sp-2); }
.cb-aviso { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); margin: var(--sp-3) 0; }
.cb-aviso--alto { border: 1px solid var(--sol); background: var(--sol-100); }
.cb-aviso h2, .cb-aviso h3 { font-family: var(--f-display); margin-top: 0; }
.cb-aviso p { margin-bottom: var(--sp-3); }

/* Envío: la llamada a la acción principal del resultado, en su propio bloque. */
.cb-envio { margin-top: var(--sp-5); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--sol-100); border: 1px solid rgba(254, 146, 22, .35); }
.cb-envio > .cb-sub:first-child { margin-top: 0; }
.cb-envio__texto { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0 0 var(--sp-3); max-width: calc(70 * var(--ch)); }
.cb-envio__pie { font-size: var(--t-cap); color: var(--tinta-suave); margin: var(--sp-3) 0 0; }
.cb-envio__pie a, .cb-res a:not(.btn) { color: var(--sol-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .cb-envio__pie a, [data-theme="dark"] .cb-res a:not(.btn) { color: var(--sol); }
.cb-envio__ok { background: var(--blanco); border-left: 3px solid var(--aval); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--t-sm); margin: 0; }
.cb-cta { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cb-cta .btn { min-height: 46px; }
.cb-correo { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-2); background: var(--blanco); border-radius: var(--r-md); border: 1px solid var(--cielo-200); position: relative; }
.cb-correo .cb-campo { margin-bottom: var(--sp-3); }
.cb-correo .cb-nota { margin: var(--sp-2) 0 0; }
.cb-res__notas { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--cielo-200); }
.cb-supuestos, .cb-disclaimer { font-size: var(--t-cap); color: var(--tinta-tenue); margin: 0 0 .4rem; }

/* ═══════ Equipos que instalamos ═══════ */
.seccion.cb-marcas { padding-block: var(--sp-4) var(--sp-7); }
.cb-marcas__panel {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--sp-6); align-items: center;
  background: var(--blanco); border: var(--borde); border-radius: var(--r-xl); padding: var(--sp-6); box-shadow: var(--sombra-sm);
}
.cb-marcas__foto { margin: 0; padding: var(--sp-4) var(--sp-3) var(--sp-3); border-radius: var(--r-lg);
  background: radial-gradient(80% 70% at 50% 40%, var(--blanco) 0%, var(--cielo-100) 100%); }
.cb-marcas__foto img { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.cb-marcas__foto figcaption { font-size: var(--t-cap); color: var(--tinta-tenue); margin-top: var(--sp-2); text-align: center; }
[data-theme="dark"] .cb-marcas__foto { background: radial-gradient(80% 70% at 50% 40%, #e8f3fb 0%, #c9dcea 100%); }
[data-theme="dark"] .cb-marcas__foto figcaption { color: #52657a; }
.cb-marcas__titulo { font-family: var(--f-display); font-size: var(--t-h2); line-height: 1.15; margin: .4rem 0 var(--sp-2); }
.cb-marcas__intro { color: var(--tinta-suave); max-width: calc(68 * var(--ch)); margin: 0 0 var(--sp-4); }
.cb-marcas__puntos { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.cb-marcas__puntos li { position: relative; padding-left: 1.6rem; color: var(--tinta-suave); font-size: var(--t-sm); }
.cb-marcas__puntos li::before { content: ""; position: absolute; left: .15rem; top: .5em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--sol); box-shadow: 0 0 0 3px var(--sol-100); }
.cb-marcas__puntos strong { color: var(--tinta); }
.cb-marcas__pie { display: flex; align-items: center; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; padding-top: var(--sp-3); border-top: 1px solid var(--cielo-200); }
.cb-marcas__etq { font-size: var(--t-cap); color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .06em; }
.cb-marcas__logos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
/* Los logos son WebP con transparencia y tinta oscura: en modo noche se
   invierten para no quedar ilegibles sobre el fondo. */
.cb-marcas__logos img { display: block; height: 34px; width: auto; opacity: .9; transition: opacity var(--trans); }
.cb-marcas__logos img:hover { opacity: 1; }
[data-theme="dark"] .cb-marcas__logos img { filter: brightness(0) invert(1); opacity: .8; }
[data-theme="dark"] .cb-marcas__logos img:hover { opacity: 1; }

/* ═══════ Pantallas medianas ═══════ */
@media (max-width: 900px) {
  .cb-res__grid { grid-template-columns: 1fr; gap: 0; }
  .cb-marcas__panel { grid-template-columns: 1fr; padding: var(--sp-5); gap: var(--sp-4); }
  .cb-marcas__foto { max-width: 300px; width: 100%; margin: 0 auto; }
}
@media (max-width: 760px) {
  .cb-pasos { grid-template-columns: repeat(5, auto); justify-content: space-between; }
  .cb-pasos li { padding: .35rem; gap: 0; }
  .cb-pasos__t { display: none; }
  .cb-pasos--activo .cb-pasos__t { display: inline; margin: 0 .35rem 0 .4rem; }
}

/* ═══════ Teléfono ═══════ */
@media (max-width: 640px) {
  .seccion.cb-seccion { padding-block: var(--sp-4) var(--sp-5); }
  .cb-form, .cb-res { padding: var(--sp-4) var(--sp-3); }
  .cb-panel { padding: var(--sp-3); }
  .cb-duo { grid-template-columns: 1fr; }
  .cb-inline { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .cb-nav .btn { flex: 1 1 0; min-width: 0; }
  .cb-nav .btn--sol { margin-left: 0; }
  .cb-svg-wrap { max-width: 300px; }
  .cb-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-equipo li { grid-template-columns: 1fr; gap: .15rem; }
  .cb-envio { padding: var(--sp-3); }
  .cb-cta .btn { flex: 1 1 100%; }
  .seccion.cb-marcas { padding-block: var(--sp-3) var(--sp-6); }
  .cb-marcas__panel { padding: var(--sp-4) var(--sp-3); border-radius: var(--r-lg); }
  .cb-marcas__logos { gap: var(--sp-4); }
  .cb-marcas__logos img { height: 28px; }
}
@media (max-width: 380px) {
  .cb-checklist { grid-template-columns: 1fr; }
}