/*
 Theme Name: Reclamatufactura 2026
 Theme URI: https://reclamatufactura.com
 Description: Tema hijo del rediseño 2026. Dirección de arte «3 · Diagrama». Todo el color, la tipografía y el espaciado salen de los tokens generados desde design-system/tokens.json; aquí no hay ni un valor de diseño escrito a mano.
 Author: Costa del Sol Siglo XXI, S.L.
 Author URI: https://reclamatufactura.com
 Template: Divi
 Version: 1.0.0
 Requires PHP: 8.0
 Text Domain: reclamatufactura-2026
*/

/* ===========================================================================
   RECLAMATUFACTURA 2026

   La escena de uso gobierna cada regla de aquí abajo: persona de más de 45
   años, de noche, en el móvil, con una carta certificada en la mano que le
   reclama entre 3.000 y 180.000 €. El trabajo del diseño es bajar las
   pulsaciones, no subirlas.

   Reglas de la casa:

   · Ni un color, tamaño, espacio, radio o sombra escrito a mano. Todo sale de
     var(--rtf-*), que genera design-system/exportar.php desde tokens.json. Si
     hace falta un valor que no existe, se añade al token, no aquí.
   · La medida de lectura la llevan los PÁRRAFOS, no el contenedor: una tabla o
     una figura pueden y deben ser más anchas que la prosa.
   · 44 px de área táctil en todo lo que se pulsa. Sin excepciones.
   · El color nunca es el único indicador de estado.
   · Todo movimiento se apaga con prefers-reduced-motion.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   1 · BASE
   ------------------------------------------------------------------------ */

body {
  background: var(--rtf-superficie);
  color: var(--rtf-texto);
  font-family: var(--rtf-fuente-cuerpo), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--rtf-tipo-cuerpo);
  line-height: var(--rtf-interlineado-cuerpo);
  -webkit-font-smoothing: antialiased;
}

/* Divi mete un azul (#2ea3f2) que sobre blanco da 2,75:1 y no llega a AA.
   Se retira de raíz en enlaces, no solo donde se vio.

   El :where() no es cosmético: sin él la regla vale (1,0,1) por el id y le gana
   a CUALQUIER clase de componente. Con esa versión, los botones sobre acento y
   sobre superficie honda salían con el texto en rojo oscuro —1,35:1 y 1,98:1—
   porque este selector pisaba su color. Envuelto en :where() vale (0,0,1) y
   cede ante cualquier componente que declare el suyo, que es lo correcto para
   un color de enlace por defecto. */
:where(:is(#main-content,#page-container-bfb), .et_pb_text, .entry-content) a {
  color: var(--rtf-acento-fuerte);
  text-underline-offset: .18em;
}
:where(:is(#main-content,#page-container-bfb)) a:hover {
  color: var(--rtf-acento);
}

/* El sitio original hacía outline:none. Quien navega con teclado se quedaba
   sin saber dónde estaba. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rtf-acento-fuerte);
  outline-offset: 2px;
  border-radius: var(--rtf-radio-s);
}

img, svg { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   2 · TIPOGRAFÍA
   Space Grotesk en titulares, Inter en cuerpo, IBM Plex Mono SOLO en cifras,
   fechas y referencias legales. Nunca como disfraz de «técnico».
   ------------------------------------------------------------------------ */

/* El :where() por la misma razón que en los enlaces: con el id delante, esta
   regla vale (1,0,1) y le gana a cualquier clase de componente. Con ella, un
   titular dentro de una banda oscura salía en tinta sobre tinta: 1,23:1. */
:where(:is(#main-content,#page-container-bfb)) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--rtf-fuente-display), -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: var(--rtf-tracking-titular);
  line-height: var(--rtf-interlineado-titular);
  color: var(--rtf-texto);
  text-wrap: balance;
}
:is(#main-content,#page-container-bfb) h1 { font-size: var(--rtf-tipo-h1); }
:is(#main-content,#page-container-bfb) h2 { font-size: var(--rtf-tipo-h2); line-height: 1.15; }
:is(#main-content,#page-container-bfb) h3 { font-size: var(--rtf-tipo-h3); line-height: 1.25; letter-spacing: -.02em; }
:is(#main-content,#page-container-bfb) h4 { font-size: var(--rtf-tipo-h4); line-height: 1.3; letter-spacing: -.015em; }
:is(#main-content,#page-container-bfb) h5 { font-size: var(--rtf-tipo-h5); line-height: 1.4; letter-spacing: 0; }
:is(#main-content,#page-container-bfb) h6 { font-size: var(--rtf-tipo-h6); line-height: 1.4; letter-spacing: 0; }

/* Divi fija el tamaño y el interlineado del cuerpo MÓDULO A MÓDULO, y esas
   reglas ganan a body{}. Hay que declararlo donde él lo declara.

   Pero envuelto en :where(), o esta regla vale (1,1,1) y le gana a los
   componentes propios: la pregunta del selector salía a 18 px en gris en vez
   de como subtitular. Es la regla de la casa — lo genérico cede, lo
   específico manda— y aquí se aplica también a mis propias reglas. */
:where(:is(#main-content,#page-container-bfb) .et_pb_text, :is(#main-content,#page-container-bfb) .et_pb_text_inner),
:where(:is(#main-content,#page-container-bfb) .et_pb_text_inner) :is(p, li) {
  font-family: var(--rtf-fuente-cuerpo), -apple-system, sans-serif;
  font-size: var(--rtf-tipo-cuerpo);
  line-height: var(--rtf-interlineado-cuerpo);
}

/* Las listas de prosa. Divi les quita la sangría y el marcador queda colgando
   fuera de la columna de texto o directamente no se ve. */
:is(#main-content,#page-container-bfb) :is(.et_pb_text_inner, .et_pb_blurb_description, .et_pb_toggle_content) :is(ul, ol):not([class*="rtf-"]) {
  padding-left: 1.5em;
  margin: 0 0 var(--rtf-espacio-s);
  max-width: var(--rtf-medida);
}
:is(#main-content,#page-container-bfb) :is(.et_pb_text_inner, .et_pb_blurb_description, .et_pb_toggle_content) ul:not([class*="rtf-"]) { list-style: disc; }
:is(#main-content,#page-container-bfb) :is(.et_pb_text_inner, .et_pb_blurb_description, .et_pb_toggle_content) ol:not([class*="rtf-"]) { list-style: decimal; }
:is(#main-content,#page-container-bfb) :is(.et_pb_text_inner, .et_pb_blurb_description, .et_pb_toggle_content) :is(ul, ol):not([class*="rtf-"]) li {
  display: list-item;
  margin-bottom: var(--rtf-espacio-2xs);
}
:is(#main-content,#page-container-bfb) :is(.et_pb_text_inner, .et_pb_blurb_description, .et_pb_toggle_content) :is(ul, ol):not([class*="rtf-"]) li::marker {
  color: var(--rtf-acento);
}

/* Y las listas de los componentes propios NO son listas de prosa: no llevan
   marcador ni sangría, porque su presentación la define el componente. */
:is(#main-content,#page-container-bfb) [class*="rtf-"] :is(ul, ol),
:is(#main-content,#page-container-bfb) :is(ul, ol)[class*="rtf-"] {
  list-style: none;
  padding-left: 0;
}

/* La medida de lectura va en los párrafos y las listas. El :not() evita pisar
   los componentes propios, que llevan su propia caja. */
/* Solo la MEDIDA. El color no pinta nada aquí: con el id delante esta regla
   valía (1,0,1) y le ganaba a cualquier banda oscura, dejando el texto en
   tinta sobre pizarra. Tercera vez que me muerde lo mismo en esta fase, así
   que la norma queda escrita: una regla de maquetación no toca el color. */
/* Las listas de componente quedan fuera, igual que los párrafos: la medida de
   lectura es para prosa. Sin la exención, la rejilla de tres tarjetas de
   /contacto/ se quedaba en 660 px dentro de una fila de 1.200. */
:is(#main-content,#page-container-bfb) p:not([class*="rtf-"]),
:is(#main-content,#page-container-bfb) .et_pb_text_inner > ul:not([class*="rtf-"]),
:is(#main-content,#page-container-bfb) .et_pb_text_inner > ol:not([class*="rtf-"]) {
  max-width: var(--rtf-medida);
}

:is(#main-content,#page-container-bfb) .et_pb_text_inner > ul li,
:is(#main-content,#page-container-bfb) .et_pb_text_inner > ol li {
  margin-bottom: var(--rtf-espacio-2xs);
  line-height: var(--rtf-interlineado-cuerpo);
}

/* La entradilla: la frase que desactiva el miedo. Va más grande que el cuerpo
   y más corta que la medida de lectura, porque tiene que leerse de un vistazo
   y no como un párrafo más. */
:is(#main-content,#page-container-bfb) .rtf-entradilla {
  font-size: var(--rtf-tipo-h4);
  line-height: 1.45;
  color: var(--rtf-texto-suave);
  max-width: 52ch;
  margin-bottom: var(--rtf-espacio-l);
}

/* Fecha de última revisión. En un sitio YMYL no es un adorno: dice si lo que
   estás leyendo sigue valiendo. */
:is(#main-content,#page-container-bfb) .rtf-fecha,
:is(#main-content,#page-container-bfb) .fecha {
  font-family: var(--rtf-fuente-datos), monospace;
  font-size: var(--rtf-tipo-pie);
  color: var(--rtf-texto-suave);
  letter-spacing: .02em;
}

/* Referencias legales. La monoespaciada aquí sí significa algo: es una cita
   exacta de una norma, y conviene que se distinga de la prosa. */
:is(#main-content,#page-container-bfb) .ref,
:is(#main-content,#page-container-bfb) .rtf-ref {
  font-family: var(--rtf-fuente-datos), ui-monospace, monospace;
  font-size: .92em;
  font-weight: 500;
  background: var(--rtf-acento-suave);
  color: var(--rtf-acento-fuerte);
  padding: .06em .34em;
  border-radius: var(--rtf-radio-s);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   3 · CONTENEDORES
   Divi impone 1.600 px con !important desde una regla de más especificidad que
   la de la fila. Hay que ganarle, y por eso este bloque es feo.
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .et_pb_row {
  width: 100%;
  max-width: var(--rtf-contenedor) !important;
  margin-inline: auto;
}
:is(#main-content,#page-container-bfb) .et_pb_section {
  padding-block: var(--rtf-espacio-xl) var(--rtf-espacio-3xl);
}
@media (max-width: 600px) {
  :is(#main-content,#page-container-bfb) .et_pb_section { padding-block: var(--rtf-espacio-l) var(--rtf-espacio-2xl); }
  /* Márgenes laterales en móvil: sin esto el texto toca el borde del teléfono. */
  :is(#main-content,#page-container-bfb) .et_pb_row { padding-inline: var(--rtf-espacio-s); }
}

/* ---------------------------------------------------------------------------
   4 · TABLAS
   El desbordamiento va DENTRO de la tabla, nunca en el body: si scrollea la
   página entera, en móvil se pierde el sitio al leer.
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rtf-tipo-menor);
  background: var(--rtf-superficie-alta);
  border: 1px solid var(--rtf-borde);
  border-radius: var(--rtf-radio-m);
  overflow: hidden;
}
:is(#main-content,#page-container-bfb) .et_pb_text_inner > table,
:is(#main-content,#page-container-bfb) figure > table { display: table; }
:is(#main-content,#page-container-bfb) th {
  text-align: left;
  padding: var(--rtf-espacio-xs) var(--rtf-espacio-s);
  font-family: var(--rtf-fuente-datos), monospace;
  font-weight: 500;
  font-size: var(--rtf-tipo-pie);
  color: var(--rtf-texto-suave);
  border-bottom: 1px solid var(--rtf-borde-fuerte);
  background: var(--rtf-superficie);
}
:is(#main-content,#page-container-bfb) td {
  padding: var(--rtf-espacio-s);
  border-bottom: 1px solid var(--rtf-borde);
  vertical-align: top;
}
:is(#main-content,#page-container-bfb) tbody tr:last-child td { border-bottom: 0; }
:is(#main-content,#page-container-bfb) caption {
  caption-side: top;
  text-align: left;
  font-family: var(--rtf-fuente-datos), monospace;
  font-size: var(--rtf-tipo-pie);
  color: var(--rtf-texto-suave);
  padding: var(--rtf-espacio-xs) var(--rtf-espacio-s);
}

/* ---------------------------------------------------------------------------
   5 · BOTONES
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .et_pb_button,
.rtf-cta__principal,
.rtf-enviar .wpcf7-submit,
.rtf-enviar input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rtf-espacio-2xs);
  min-height: var(--rtf-toque);
  padding: var(--rtf-espacio-xs) var(--rtf-espacio-l);
  font-family: var(--rtf-fuente-cuerpo), sans-serif;
  font-size: var(--rtf-tipo-cuerpo);
  font-weight: 600;
  line-height: 1.2;
  /* 1 px, no 1,5: no existe medio píxel en el sistema y a 1,5 el navegador
     redondea distinto según el zoom. */
  border: 1px solid var(--rtf-acento);
  border-radius: var(--rtf-radio-m);
  background: var(--rtf-acento);
  color: var(--rtf-superficie-alta);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rtf-duracion-rapida) var(--rtf-curva),
              border-color var(--rtf-duracion-rapida) var(--rtf-curva);
}
:is(#main-content,#page-container-bfb) .et_pb_button:hover,
.rtf-cta__principal:hover,
.rtf-enviar .wpcf7-submit:hover,
.rtf-enviar input[type="submit"]:hover {
  background: var(--rtf-acento-fuerte);
  border-color: var(--rtf-acento-fuerte);
  color: var(--rtf-superficie-alta);
}
/* Divi añade una flecha con ::after que empuja el texto al pasar el ratón. */
:is(#main-content,#page-container-bfb) .et_pb_button::after { display: none !important; }
:is(#main-content,#page-container-bfb) .et_pb_button { padding-right: var(--rtf-espacio-l) !important; }

/* ---------------------------------------------------------------------------
   6 · FORMULARIO
   Reconstruido en la fase anterior: de 1.557 a 1.050 px de alto en escritorio,
   y enviable sin JavaScript. Aquí solo se reviste con los tokens.
   ------------------------------------------------------------------------ */

.rtf-form {
  background: var(--rtf-superficie-alta);
  border: 1px solid var(--rtf-borde);
  border-radius: var(--rtf-radio-l);
  padding: var(--rtf-espacio-l);
  box-shadow: var(--rtf-sombra-1);
  max-width: 640px;
}
@media (max-width: 600px) { .rtf-form { padding: var(--rtf-espacio-m) var(--rtf-espacio-s); } }

/* A 390 px la tarjeta medía 288 dentro de una columna de 240 y se salía por la
   derecha. La causa es el min-width:auto que traen de serie los elementos de
   rejilla y de caja flexible: se niegan a encogerse por debajo de su contenido
   mínimo, y basta con que un rótulo o la zona de subida no quepan para que
   empujen toda la tarjeta fuera de su columna.
   Se les da permiso explícito para encoger. */
.wpcf7, .wpcf7-form, .rtf-form { max-width: 100%; min-width: 0; }
.rtf-form-seccion, .rtf-campo, .rtf-campo-par, .rtf-campo-par > *,
.rtf-consentimiento, .rtf-enviar, .rtf-campo--adjunto { min-width: 0; }
/* La zona de subida es de un plugin y trae sus propios anchos mínimos. */
.rtf-campo--adjunto .codedropz-upload-handler,
.rtf-campo--adjunto .codedropz-upload-container { min-width: 0; max-width: 100%; }

.rtf-form-titulo {
  font-family: var(--rtf-fuente-display), sans-serif;
  font-size: var(--rtf-tipo-h3);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 var(--rtf-espacio-2xs);
}
.rtf-form-entrada { color: var(--rtf-texto-suave); font-size: var(--rtf-tipo-menor); margin: 0 0 var(--rtf-espacio-m); }
.rtf-form-seccion { margin-bottom: var(--rtf-espacio-m); }
.rtf-campo { margin-bottom: var(--rtf-espacio-m); }
/* La pareja correo/teléfono se partía en dos columnas según el ANCHO DE
   VENTANA, pero el formulario vive en una columna de Divi que puede medir
   380 px con la ventana a 1440. Resultado: dos campos de 183 px, y el correo
   —el dato más largo del formulario— con el campo más corto.
   La consulta va contra el contenedor, que es lo que de verdad manda. */
.rtf-form { container-type: inline-size; container-name: formulario; }
.rtf-campo-par { display: grid; gap: 0 var(--rtf-espacio-s); }

/* 400 y no 440: con el héroe a ancho completo la tarjeta da 416 px de
   contenido, y con dos columnas la tarjeta se acorta una fila entera. */
@container formulario (min-width: 400px) {
  /* Al correo se le da más sitio: caben 30 caracteres frente a los 20 de antes.
     Un teléfono son nueve dígitos y le sobra con lo demás. */
  .rtf-campo-par { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; }
  /* Un rótulo ocupa dos líneas y el otro una, así que los campos quedaban a
     29 px de desnivel. Lo intenté con subgrid y no agarró —el marcado de CF7
     mete un envoltorio entre medias y el rótulo deja de ser hijo directo—,
     así que se resuelve con lo de siempre: las etiquetas se estiran a la
     altura de la fila y empujan su campo al fondo. Ahí coinciden. */
  /* Y el hijo directo de la rejilla NO es la etiqueta: Contact Form 7 mete un
     <p class="rtf-campo"> por medio. Mirado en el inspector, no supuesto:
     esos <p> ya miden lo mismo (114 px), las que no coincidían eran las
     etiquetas de dentro, 77 y 106. */
  .rtf-campo-par { align-items: stretch; }
  .rtf-campo-par > .rtf-campo { display: flex; flex-direction: column; }
  .rtf-campo-par .rtf-label {
    display: flex;
    flex-direction: column;
    /* flex-start, no space-between. Con space-between el sobrante de la
       etiqueta más alta se metía ENTRE el rótulo y el campo y volvía a
       desplazarlo 18 px. Reservada la altura del rótulo con 2lh, los dos
       campos empiezan justo debajo y coinciden. */
    justify-content: flex-start;
    flex: 1;
  }
  /* Y lo que de verdad lo cuadra: el rótulo reserva dos líneas SIEMPRE.
     Estirar las etiquetas dejaba 18 px de desnivel porque el espacio
     sobrante se repartía distinto en cada una. Reservando la altura, el
     campo empieza en el mismo sitio en las dos y no hay nada que repartir.
     Es menos elegante que subgrid y es el que funciona. */
  .rtf-campo-par .rtf-label__texto { display: block; min-block-size: 2lh; }
}

.rtf-label { display: block; margin-bottom: var(--rtf-espacio-2xs); }
.rtf-label__texto { font-size: var(--rtf-tipo-menor); font-weight: 600; color: var(--rtf-texto); }
.rtf-opcional { font-weight: 400; color: var(--rtf-texto-suave); }
.rtf-ayuda { display: block; font-size: var(--rtf-tipo-menor); color: var(--rtf-texto-suave); margin-top: var(--rtf-espacio-3xs); }

.rtf-form input[type="text"],
.rtf-form input[type="email"],
.rtf-form input[type="tel"],
.rtf-form textarea,
.rtf-form select {
  width: 100%;
  font-family: inherit;
  font-size: var(--rtf-tipo-cuerpo);
  color: var(--rtf-texto);
  /* Los campos eran blancos sobre tarjeta blanca: solo los separaba un borde
     de 1,5 px. Sobre la superficie suave se leen como campos sin necesidad de
     que el borde haga todo el trabajo, y coinciden con la zona de subida y con
     la fila del consentimiento: una sola superficie de control en todo el
     formulario en vez de tres. */
  background: var(--rtf-superficie);
  border: 1.5px solid var(--rtf-borde-fuerte);
  border-radius: var(--rtf-radio-m);
  padding: var(--rtf-espacio-xs) var(--rtf-espacio-s);
  min-height: var(--rtf-toque);
  transition: border-color var(--rtf-duracion-rapida) var(--rtf-curva);
}
.rtf-form textarea { min-height: 120px; resize: vertical; }
.rtf-form input:focus, .rtf-form textarea:focus, .rtf-form select:focus {
  outline: 0;
  border-color: var(--rtf-acento-fuerte);
  box-shadow: 0 0 0 3px var(--rtf-acento-suave);
}

.rtf-consentimiento {
  display: flex;
  gap: var(--rtf-espacio-xs);
  align-items: flex-start;
  font-size: var(--rtf-tipo-menor);
  background: var(--rtf-superficie);
  border-radius: var(--rtf-radio-m);
  padding: var(--rtf-espacio-xs) var(--rtf-espacio-s);
  margin-bottom: var(--rtf-espacio-m);
  min-height: var(--rtf-toque);
}
.rtf-consentimiento input[type="checkbox"] {
  /* 20×20 se quedaba corto para el dedo. El control crece y la fila entera
     sigue siendo pulsable porque es un <label>. */
  inline-size: 24px; block-size: 24px; margin-top: 2px;
  accent-color: var(--rtf-acento); flex: none;
}
/* El envoltorio no es el botón: solo lo estira a todo el ancho. El estilo va
   arriba, en el grupo de botones, apuntando al input de verdad. */
.rtf-enviar { display: block; width: 100%; margin: 0; }
.rtf-enviar .wpcf7-submit,
.rtf-enviar input[type="submit"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  font-weight: 600;
}
.rtf-microcopy { font-size: var(--rtf-tipo-menor); color: var(--rtf-texto-suave); margin: var(--rtf-espacio-xs) 0 0; text-align: center; }

.rtf-campo--adjunto .codedropz-upload-handler,
.rtf-campo--adjunto .codedropz-upload-container {
  border: 1.5px dashed var(--rtf-borde-fuerte);
  border-radius: var(--rtf-radio-m);
  background: var(--rtf-superficie);
}

/* Mensajes de Contact Form 7: el estado nunca se marca solo con color. */
.wpcf7 form .wpcf7-response-output {
  border-width: 0 0 0 3px;
  border-radius: 0 var(--rtf-radio-m) var(--rtf-radio-m) 0;
  padding: var(--rtf-espacio-s) var(--rtf-espacio-m);
  margin: var(--rtf-espacio-m) 0 0;
  font-size: var(--rtf-tipo-menor);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--rtf-ok); background: #eef5f1; color: #123f2c; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--rtf-alerta); background: #fdf7ec; color: #6b4100; }
.wpcf7-not-valid-tip { color: #8a1c13; font-size: var(--rtf-tipo-menor); margin-top: var(--rtf-espacio-3xs); }

/* ---------------------------------------------------------------------------
   7 · SELECTOR «¿Qué dice tu carta?»
   La pieza que más trabaja del sitio: reparte tráfico frío hacia la pilar
   correcta usando las palabras de la carta, no las nuestras.
   ------------------------------------------------------------------------ */

.rtf-selector { margin-block: var(--rtf-espacio-l); }
.rtf-selector__pregunta {
  font-family: var(--rtf-fuente-display), sans-serif;
  font-size: var(--rtf-tipo-h3);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--rtf-texto);
  margin: 0 0 var(--rtf-espacio-s);
}
.rtf-selector__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rtf-espacio-s); }
@media (min-width: 640px) { .rtf-selector__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .rtf-selector__lista { grid-template-columns: repeat(4, 1fr); } }

.rtf-selector__enlace {
  display: flex; flex-direction: column; gap: var(--rtf-espacio-3xs);
  height: 100%; min-height: var(--rtf-toque);
  background: var(--rtf-superficie-alta);
  border: 1px solid var(--rtf-borde);
  border-radius: var(--rtf-radio-m);
  padding: var(--rtf-espacio-s);
  text-decoration: none;
  color: var(--rtf-texto);
  transition: border-color var(--rtf-duracion-rapida) var(--rtf-curva),
              box-shadow var(--rtf-duracion-rapida) var(--rtf-curva);
}
.rtf-selector__enlace:hover {
  border-color: var(--rtf-borde-fuerte);
  box-shadow: var(--rtf-sombra-1);
  color: var(--rtf-texto);
}
.rtf-selector__cita { font-weight: 600; font-size: var(--rtf-tipo-menor); line-height: 1.35; }
.rtf-selector__consecuencia {
  font-family: var(--rtf-fuente-datos), monospace;
  font-size: var(--rtf-tipo-pie);
  color: var(--rtf-texto-suave);
  line-height: 1.45;
}
.rtf-selector__salida { font-size: var(--rtf-tipo-menor); color: var(--rtf-texto-suave); margin-top: var(--rtf-espacio-s); }

/* ---------------------------------------------------------------------------
   8 · LLAMADA A LA ACCIÓN — [rtf_cta]
   ------------------------------------------------------------------------ */

.rtf-cta {
  background: var(--rtf-superficie-honda);
  border-radius: var(--rtf-radio-l);
  padding: var(--rtf-espacio-xl);
  margin-block: var(--rtf-espacio-l);
}
@media (max-width: 600px) { .rtf-cta { padding: var(--rtf-espacio-m) var(--rtf-espacio-s); border-radius: var(--rtf-radio-m); } }

.rtf-cta__titulo {
  font-family: var(--rtf-fuente-display), sans-serif;
  font-size: var(--rtf-tipo-h2);
  font-weight: 600;
  letter-spacing: var(--rtf-tracking-titular);
  line-height: var(--rtf-interlineado-titular);
  color: var(--rtf-superficie-alta);
  margin: 0 0 var(--rtf-espacio-s);
  max-width: 22ch;
}
.rtf-cta__texto {
  color: var(--rtf-texto-claro);
  font-size: var(--rtf-tipo-cuerpo);
  margin: 0 0 var(--rtf-espacio-m);
  max-width: 54ch;
}
.rtf-cta__acciones { display: flex; flex-wrap: wrap; gap: var(--rtf-espacio-s); }
@media (max-width: 520px) { .rtf-cta__acciones { flex-direction: column; align-items: stretch; } }

.rtf-cta__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rtf-espacio-2xs);
  min-height: var(--rtf-toque);
  padding: var(--rtf-espacio-xs) var(--rtf-espacio-l);
  font-weight: 600;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: var(--rtf-radio-m);
  background: transparent;
  color: var(--rtf-superficie-alta);
  text-decoration: none;
  transition: background-color var(--rtf-duracion-rapida) var(--rtf-curva),
              border-color var(--rtf-duracion-rapida) var(--rtf-curva);
}
.rtf-cta__wa:hover { background: rgba(255,255,255,.1); border-color: var(--rtf-superficie-alta); color: var(--rtf-superficie-alta); }
.rtf-cta__wa svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   9 · ACORDEÓN DE PREGUNTAS
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .et_pb_toggle,
:is(#main-content,#page-container-bfb) .et_pb_accordion_item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rtf-borde);
  border-radius: 0;
  padding: 0;
  margin: 0;
}
:is(#main-content,#page-container-bfb) .et_pb_toggle_title {
  font-family: var(--rtf-fuente-cuerpo), sans-serif !important;
  font-size: var(--rtf-tipo-cuerpo) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--rtf-texto) !important;
  padding: var(--rtf-espacio-s) var(--rtf-espacio-xl) var(--rtf-espacio-s) 0 !important;
  min-height: var(--rtf-toque);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 120ms var(--rtf-curva);
}
:is(#main-content,#page-container-bfb) .et_pb_toggle_content {
  padding: 0 0 var(--rtf-espacio-s);
  font-size: var(--rtf-tipo-cuerpo);
  line-height: var(--rtf-interlineado-cuerpo);
  color: var(--rtf-texto);
}
:is(#main-content,#page-container-bfb) .et_pb_toggle_title::before {
  color: var(--rtf-acento);
  right: 0;
  font-size: 20px;
}

/* ---------------------------------------------------------------------------
   10 · PIE
   ------------------------------------------------------------------------ */

/* El mapa del sitio del pie está sobre PAPEL, no sobre fondo oscuro. Di por
   hecho que el pie entero era oscuro y puse los enlaces en claro: 70 enlaces a
   1,57:1 en todas las páginas. El único trozo oscuro del pie es la sección del
   formulario, y esa tiene sus propias reglas más abajo. */
.rtf-pie-grupo a,
#main-footer a {
  color: var(--rtf-texto);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--rtf-toque);
}
.rtf-pie-grupo a:hover,
#main-footer a:hover { color: var(--rtf-acento-fuerte); text-decoration: underline; }

.rtf-lo-que-somos p {
  color: var(--rtf-texto-claro);
  font-size: var(--rtf-tipo-pie);
  max-width: 68ch;
  opacity: .85;
}

/* Cualquier bloque sobre la superficie honda lleva texto claro. En CSS no hay
   forma de preguntar «¿qué fondo tiene mi contenedor?», así que las secciones,
   filas y columnas que usan ese token llevan la clase puesta desde el
   contenido. Es la misma solución que ya usaba `rtf-cierre`. */
/* Aquí vivía también el preset fd903cf2, que pintaba sus columnas de pizarra
   desde el propio preset. Ya no: el cliente pidió quitar ese azul, se le quitó
   el fondo y la sombra en el preset y ahora es una caja clara. Las reglas que
   le daban texto claro están en el bloque 41. */
.rtf-banda-honda,
.rtf-banda-honda p,
.rtf-banda-honda li,
.rtf-banda-honda .et_pb_text_inner,
.rtf-banda-honda .et_pb_text_inner p,
.rtf-banda-honda .et_pb_icon_list_text,
.rtf-banda-honda .et_pb_blurb_description { color: var(--rtf-texto-claro); }
.rtf-banda-honda h1, .rtf-banda-honda h2, .rtf-banda-honda h3,
.rtf-banda-honda h4, .rtf-banda-honda .et_pb_module_header { color: var(--rtf-superficie-alta); }
.rtf-banda-honda a:not(.et_pb_button) { color: var(--rtf-superficie-alta); text-decoration: underline; }

/* Pero el formulario que vive DENTRO de la banda sigue sobre papel: un campo
   de texto sobre fondo oscuro se lee peor y rompe la expectativa de «esto es
   un impreso». Sin este reseteo, el texto del formulario salía claro sobre
   blanco: 1,5:1. */
.rtf-banda-honda .rtf-form,
.rtf-banda-honda .rtf-form p,
.rtf-banda-honda .rtf-form li,
.rtf-banda-honda .rtf-form label,
.rtf-banda-honda .rtf-form .rtf-label__texto,
.rtf-banda-honda .rtf-form .et_pb_text_inner,
.rtf-banda-honda .rtf-form .et_pb_text_inner p { color: var(--rtf-texto); }
.rtf-banda-honda .rtf-form h1, .rtf-banda-honda .rtf-form h2,
.rtf-banda-honda .rtf-form h3, .rtf-banda-honda .rtf-form h4 { color: var(--rtf-texto); }
.rtf-banda-honda .rtf-form .rtf-ayuda,
.rtf-banda-honda .rtf-form .rtf-microcopy,
.rtf-banda-honda .rtf-form .rtf-opcional,
.rtf-banda-honda .rtf-form .codedropz-upload-inner,
.rtf-banda-honda .rtf-form .codedropz-upload-inner span { color: var(--rtf-texto-suave); }
.rtf-banda-honda .rtf-form a:not(.et_pb_button):not(.rtf-enviar) { color: var(--rtf-acento-fuerte); }

/* La sección del formulario del pie va sobre superficie honda. El texto tiene
   que ir claro: con el color de cuerpo se quedaba en 1,45:1 y 2,47:1, y como
   el pie es global, ese fallo salía en TODAS las páginas del sitio. */
#formulario,
#formulario p,
#formulario li,
#formulario .et_pb_text,
#formulario .et_pb_text_inner,
#formulario .et_pb_text_inner p { color: var(--rtf-texto-claro); }
#formulario h1, #formulario h2, #formulario h3, #formulario h4 { color: var(--rtf-superficie-alta); }
#formulario .rtf-label__texto { color: var(--rtf-superficie-alta); }
#formulario .rtf-ayuda,
#formulario .rtf-microcopy,
#formulario .rtf-opcional { color: var(--rtf-texto-claro); }
/* El formulario en sí se queda sobre papel: un campo de texto sobre fondo
   oscuro se lee peor y además rompe la expectativa de «esto es un impreso». */
#formulario .rtf-form { background: var(--rtf-superficie-alta); }
#formulario .rtf-form,
#formulario .rtf-form p,
#formulario .rtf-form label,
#formulario .rtf-form .rtf-label__texto { color: var(--rtf-texto); }
#formulario .rtf-form .rtf-ayuda,
#formulario .rtf-form .rtf-microcopy,
#formulario .rtf-form .rtf-opcional { color: var(--rtf-texto-suave); }

/* ---------------------------------------------------------------------------
   11 · BARRA FIJA DE MÓVIL
   Dos acciones, no tres. WhatsApp primero: es el canal preferente y el de
   menos fricción a las once de la noche.
   ------------------------------------------------------------------------ */

.rtf-barra-movil {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rtf-borde);
  border-top: 1px solid var(--rtf-borde);
  transform: translateY(100%);
  transition: transform var(--rtf-duracion-media) var(--rtf-curva);
}
.rtf-barra-movil.is-visible { transform: translateY(0); }
.rtf-barra-movil a {
  display: flex; align-items: center; justify-content: center; gap: var(--rtf-espacio-2xs);
  min-height: 56px;
  background: var(--rtf-superficie-alta);
  color: var(--rtf-texto);
  font-weight: 600;
  font-size: var(--rtf-tipo-menor);
  text-decoration: none;
}
.rtf-barra-movil .rtf-wa { background: var(--rtf-acento); color: var(--rtf-superficie-alta); }
.rtf-barra-movil svg { width: 19px; height: 19px; }

@media (max-width: 980px) {
  .rtf-barra-movil { display: grid; }
  /* Sitio para que la barra no tape el final del contenido. */
  body.rtf-con-barra :is(#main-content,#page-container-bfb) { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .rtf-barra-movil { transition: none; }
}

/* ---------------------------------------------------------------------------
   12 · MOVIMIENTO

   Divi anima cada sección al hacer scroll, lo que en un texto largo produce un
   parpadeo constante y en esta dirección de arte sobra del todo. Se apaga y se
   pone en su lugar UNA sola cosa: la primera aparición de cada sección, 20 px
   y opacidad.

   No son los 40 px de zig.ai ni su 1,2 s. Aquí manda la calma institucional
   (D-003): el movimiento acompaña, no llama.

   Y se apaga entero con prefers-reduced-motion. No «se reduce»: se apaga.
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .et_pb_section,
:is(#main-content,#page-container-bfb) .et_pb_row,
:is(#main-content,#page-container-bfb) .et_pb_module {
  animation: none !important;
}

.rtf-revela {
  opacity: 0;
  transform: translateY(20px);
}
.rtf-revela.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--rtf-duracion-media) var(--rtf-curva),
              transform var(--rtf-duracion-media) var(--rtf-curva);
}

@media (prefers-reduced-motion: reduce) {
  .rtf-revela,
  .rtf-revela.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   13 · IMPRESIÓN
   Alguien va a imprimir esto para llevárselo al abogado colaborador o para
   leerlo con calma. Que salga legible cuesta quince líneas.
   ------------------------------------------------------------------------ */

@media print {
  .rtf-barra-movil,
  .rtf-cabecera,
  #main-footer,
  .joinchat,
  .rtf-cta { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  :is(#main-content,#page-container-bfb) p { max-width: none; }
  :is(#main-content,#page-container-bfb) a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  :is(#main-content,#page-container-bfb) .et_pb_toggle_content { display: block !important; }
}

/* ---------------------------------------------------------------------------
   14 · FASES DE UN PROCESO
   Nueve pasos numerados seguidos no son un proceso: son un manual. Se agrupan
   en fases, y la fase tiene que LEERSE como fase: un filete arriba y la
   etiqueta en monoespaciada, para que se distinga de un titular de sección
   cualquiera.
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .rtf-fase {
  margin-top: var(--rtf-espacio-2xl);
  padding-top: var(--rtf-espacio-s);
  border-top: 2px solid var(--rtf-texto);
}
:is(#main-content,#page-container-bfb) .rtf-fase__entrada {
  color: var(--rtf-texto-suave);
  font-size: var(--rtf-tipo-menor);
  max-width: var(--rtf-medida);
  margin-bottom: var(--rtf-espacio-l);
}
/* El número del paso, en monoespaciada, como el resto de cifras del sistema. */
:is(#main-content,#page-container-bfb) h3:has(+ p) { margin-top: var(--rtf-espacio-l); }

/* ---------------------------------------------------------------------------
   15 · ÍNDICE DE PÁGINA
   Una pilar de diez mil píxeles en un móvil, de noche, con una carta en la
   mano, necesita decir de qué va antes de que haya que recorrerla. No es un
   adorno de blog: es lo que evita el rebote.

   No se fija en pantalla a propósito: en móvil robaría altura y competiría con
   la barra de contacto de abajo, que es la que de verdad convierte.
   ------------------------------------------------------------------------ */

.rtf-indice {
  border: 1px solid var(--rtf-borde);
  border-left: 3px solid var(--rtf-acento);
  border-radius: 0 var(--rtf-radio-m) var(--rtf-radio-m) 0;
  background: var(--rtf-superficie-alta);
  padding: var(--rtf-espacio-m);
  max-width: var(--rtf-medida);
  margin-block: var(--rtf-espacio-m);
}
.rtf-indice[hidden] { display: none; }

.rtf-indice__t {
  font-family: var(--rtf-fuente-datos), monospace;
  font-size: var(--rtf-tipo-pie);
  color: var(--rtf-texto-suave);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 var(--rtf-espacio-xs);
}
:is(#main-content,#page-container-bfb) .rtf-indice__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: idx;
  display: grid;
  gap: 2px;
}
:is(#main-content,#page-container-bfb) .rtf-indice__lista li { counter-increment: idx; margin: 0; }
:is(#main-content,#page-container-bfb) .rtf-indice__lista a {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: var(--rtf-espacio-2xs);
  align-items: baseline;
  min-height: var(--rtf-toque);
  padding: var(--rtf-espacio-2xs) 0;
  font-size: var(--rtf-tipo-menor);
  line-height: 1.4;
  color: var(--rtf-texto);
  text-decoration: none;
}
:is(#main-content,#page-container-bfb) .rtf-indice__lista a::before {
  content: counter(idx, decimal-leading-zero);
  font-family: var(--rtf-fuente-datos), monospace;
  font-size: var(--rtf-tipo-pie);
  color: var(--rtf-acento);
}
:is(#main-content,#page-container-bfb) .rtf-indice__lista a:hover {
  color: var(--rtf-acento-fuerte);
  text-decoration: underline;
}

/* El salto al ancla deja el titular pegado al borde superior, y con la
   cabecera fija encima quedaría tapado. */
:is(#main-content,#page-container-bfb) :is(h2, h3)[id] { scroll-margin-top: calc(69px + var(--rtf-espacio-m)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------------------------------------------------------------------------
   16 · DESCARGO DE LOS TESTIMONIOS
   No es letra pequeña. Va al mismo tamaño que el cuerpo menor y con el filete
   de aviso, porque decir «cada caso es distinto» en gris de seis puntos es no
   decirlo. En un sitio YMYL esa línea es tan contenido como la cita.
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .rtf-descargo {
  border-left: 3px solid var(--rtf-borde-fuerte);
  padding: var(--rtf-espacio-xs) var(--rtf-espacio-m);
  margin: var(--rtf-espacio-m) auto 0;
  max-width: var(--rtf-medida);
  font-size: var(--rtf-tipo-menor);
  color: var(--rtf-texto-suave);
  line-height: 1.55;
}
:is(#main-content,#page-container-bfb) .rtf-descargo strong { color: var(--rtf-texto); }

/* ---------------------------------------------------------------------------
   14 · FIGURA CON RÓTULOS  ·  patrón 02
   Y la retícula técnica del héroe, que es el fondo de la dirección aprobada.
   ------------------------------------------------------------------------ */

/* La retícula. Va en la sección del héroe, que ya traía la clase .first-view,
   así que no hace falta tocar el bloque de Divi para ponerla. Dos degradados
   repetidos: no es una imagen, no pesa nada y escala a cualquier pantalla.

   Acotada a la PORTADA a propósito. .first-view también está en /contacto/, y
   allí hay un panel gris encima: la retícula se le transparentaba y quedaban
   dos capas peleándose. El héroe de contacto es otro patrón y se decide
   aparte. */
.home :is(.et-l--post,#page-container-bfb .et-l) .first-view {
  background-color: var(--rtf-superficie-alta);
  background-image:
    linear-gradient(to right, var(--rtf-borde) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rtf-borde) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}
/* La retícula es decoración: si alguien ha pedido menos movimiento y más
   sobriedad, o imprime, sobra. */
@media print { .home :is(.et-l--post,#page-container-bfb .et-l) .first-view { background-image: none; } }

.rtf-figura {
  margin: 0;
  background: var(--rtf-superficie-alta);
  border: 1px solid var(--rtf-borde);
  border-radius: var(--rtf-radio-l);
  padding: var(--rtf-espacio-l);
  box-shadow: var(--rtf-sombra-1);
  container-type: inline-size;
  container-name: figura;
}
.rtf-figura__cuerpo { display: grid; gap: var(--rtf-espacio-m); align-items: center; }

.rtf-figura__dibujo {
  inline-size: 100%;
  max-inline-size: 200px;
  block-size: auto;
  color: var(--rtf-texto);
  justify-self: center;
  /* Las guías se dibujan FUERA del viewBox, a la derecha de la hoja. */
  overflow: visible;
}

.rtf-figura__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rtf-espacio-s);
}
.rtf-figura__punto { display: flex; gap: var(--rtf-espacio-xs); align-items: flex-start; }
.rtf-figura__num {
  flex: none;
  inline-size: 26px; block-size: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--rtf-acento);
  color: var(--rtf-superficie-alta);
  font-family: var(--rtf-fuente-datos), ui-monospace, monospace;
  font-size: var(--rtf-tipo-pie);
  font-weight: 600;
  margin-top: 2px;
}
.rtf-figura__txt { display: grid; gap: 2px; }
.rtf-figura__rotulo { font-weight: 600; color: var(--rtf-texto); }
.rtf-figura__detalle { font-size: var(--rtf-tipo-menor); color: var(--rtf-texto-suave); }
.rtf-figura__fuente {
  font-family: var(--rtf-fuente-datos), ui-monospace, monospace;
  font-size: var(--rtf-tipo-pie);
  color: var(--rtf-texto-suave);
}
.rtf-figura__pie {
  font-family: var(--rtf-fuente-datos), ui-monospace, monospace;
  font-size: var(--rtf-tipo-pie);
  color: var(--rtf-texto-suave);
  border-top: 1px solid var(--rtf-borde);
  margin-top: var(--rtf-espacio-m);
  padding-top: var(--rtf-espacio-s);
}

/* Consulta de contenedor, no de ventana: la figura puede ir en una columna
   estrecha con la pantalla ancha, y ahí las guías tienen que desaparecer
   igual que en un móvil. */
@container figura (min-width: 620px) {
  /* 280 px de carril para una hoja de 200: los 80 restantes son el sitio
     por donde salen las guías hasta los números. */
  .rtf-figura__cuerpo { grid-template-columns: 280px 1fr; gap: var(--rtf-espacio-l); }
  .rtf-figura__dibujo { justify-self: start; }
}
/* Las guías van de la hoja al número. En cuanto la lista pasa debajo del
   dibujo dejan de apuntar a nada, así que se apagan. */
@container figura (max-width: 619px) {
  .rtf-figura__guia { display: none; }
  .rtf-figura__dibujo { max-inline-size: 170px; }
}

/* ---------------------------------------------------------------------------
   15 · MÁRGENES ANIDADOS EN MÓVIL
   Divi apila sección › fila › columna › tarjeta y cada una pone su propio
   margen lateral. En un teléfono de 390 px eso son 68 px por lado: el 35 % de
   la pantalla gastada en aire, y el texto reducido a 208 px de ancho.
   La fila ya separa del borde. La columna no tiene que repetirlo.
   ------------------------------------------------------------------------ */
@media (max-width: 600px) {
  :is(#main-content,#page-container-bfb) .et_pb_column { padding-inline: 0; }
}

/* El titular de la figura sale del shortcode, así que no lleva las clases de
   Divi y hay que darle el mismo tamaño que a cualquier otro h2 del sitio. */
:is(#main-content,#page-container-bfb) .rtf-figura__titular {
  font-family: var(--rtf-fuente-display), sans-serif;
  font-size: var(--rtf-tipo-h2);
  /* 400, como el resto de los titulares del sitio: el peso no es lo que
     distingue a esta pieza, la distingue el dibujo que lleva al lado. */
  font-weight: 400;
  letter-spacing: -.02em;
  text-transform: none;
  margin: 0 0 var(--rtf-espacio-m);
}

/* ---------------------------------------------------------------------------
   16 · EL PIE
   Se rompió al cambiar de tema: la retícula de tres columnas y el centrado del
   bloque inferior vivían en el CSS del tema anterior y no los porté. El
   marcado del pie siempre estuvo bien —un <nav> con tres grupos—; lo que
   faltaba era quien lo colocara.
   ------------------------------------------------------------------------ */

.rtf-pie-mapa {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rtf-espacio-m);
  margin: 0 0 var(--rtf-espacio-l);
  text-align: left;
}
@media (min-width: 700px) {
  .rtf-pie-mapa { grid-template-columns: repeat(3, 1fr); gap: var(--rtf-espacio-s); }
}

.et-db #et-boc .et-l .rtf-pie-titulo,
.rtf-pie-titulo {
  font-family: var(--rtf-fuente-cuerpo), sans-serif;
  font-size: var(--rtf-tipo-pie);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rtf-texto-suave);
  margin: 0 0 var(--rtf-espacio-xs);
}

.rtf-pie-lista,
.rtf-pie-lista li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.rtf-pie-lista li::before { content: none !important; }
.rtf-pie-lista a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--rtf-tipo-menor);
  color: var(--rtf-texto);
  text-decoration: none;
}
.rtf-pie-lista a:hover,
.rtf-pie-lista a:focus-visible { color: var(--rtf-acento-fuerte); text-decoration: underline; }

/* El bloque inferior estaba declarado a 80vw pero sin centrar: pegado al borde
   izquierdo y con 288 px de aire muerto a la derecha. Es la banda blanca que
   se veía a la derecha del pie. */
.et-l--footer .et_pb_section_1_tb_footer {
  inline-size: 100% !important;
  padding-inline: var(--rtf-espacio-m);
}
.et-l--footer .et_pb_section_1_tb_footer .et_pb_row {
  max-inline-size: 1080px !important;
  margin-inline: auto;
}
/* Los módulos de Divi son contenedores flex: un .et_pb_text_inner sin ancho
   declarado se encoge al contenido en vez de ocupar la fila. */
.et-l--footer .et_pb_section_1_tb_footer .et_pb_text_inner {
  text-align: left;
  inline-size: 100%;
  max-inline-size: 1080px;
  margin-inline: auto;
}
.et-l--footer .et_pb_section_1_tb_footer .et_pb_text_inner p {
  max-width: none;
  font-size: var(--rtf-tipo-menor);
  color: var(--rtf-texto-suave);
}

/* ---------------------------------------------------------------------------
   17 · EL HÉROE DE LA PORTADA A ANCHO COMPLETO
   Con la fila a 1.200 px la columna del formulario se quedaba en 380 y los
   campos salían finos y largos: una columna estrecha de cajas apiladas que
   nadie tiene ganas de rellenar. Ocupando el ancho de la pantalla el
   formulario respira y la retícula se lee como plano, no como fondo.
   ------------------------------------------------------------------------ */

@media (min-width: 981px) {
  /* La fila era display:block con las columnas flotadas a la anchura que les
     puso Divi (36 % la del formulario). Poner max-width no servía de nada: la
     anchura de Divi ya era menor. Hay que convertir la fila en contenedor flex
     y repartir a partes iguales. */
  body.home.et-db #et-boc :is(.et-l--post,#page-container-bfb .et-l) .first-view > .et_pb_row {
    display: flex !important;
    align-items: stretch;
    /* La SECCIÓN es flex en columna y Divi le pone align-items:center: la fila
       no se estiraba, se centraba en 1.200 px dentro de una sección de 1.440.
       Por eso quedaba la franja de retícula a los lados. */
    align-self: stretch !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* No al 50/50: el formulario necesita más sitio que el titular para poder
     ponerse en dos columnas. Con 58 % la tarjeta da 660 px de contenido y
     la consulta de contenedor dispara; con 50 % se quedaba en 416 y seguía
     siendo una tira vertical, que es justo lo que había que arreglar. */
  body.home.et-db #et-boc :is(.et-l--post,#page-container-bfb .et-l) .first-view > .et_pb_row > .et_pb_column {
    max-width: none !important;
    margin: 0 !important;
  }
  body.home.et-db #et-boc :is(.et-l--post,#page-container-bfb .et-l) .first-view > .et_pb_row > .et_pb_column:first-child {
    /* 0 0 y no 0 1: con flex-shrink a 1 el titular, que es largo, empujaba
       y le robaba ancho a la columna del formulario. min-width:0 para que
       el contenido no imponga un mínimo por su cuenta. */
    flex: 0 0 42%;
    width: 42% !important;
    min-width: 0;
  }
  body.home.et-db #et-boc :is(.et-l--post,#page-container-bfb .et-l) .first-view > .et_pb_row > .et_pb_column:last-child {
    flex: 0 0 58%;
    width: 58% !important;
    min-width: 0;
  }
  /* El aire lo pone cada columna por dentro, no la fila: así el panel oscuro
     del formulario sangra hasta el borde de la pantalla en vez de quedarse a
     73 px con una franja de retícula suelta a su derecha. */
  body.home.et-db #et-boc :is(.et-l--post,#page-container-bfb .et-l) .first-view > .et_pb_row > .et_pb_column:first-child {
    padding: clamp(32px, 5vw, 88px) clamp(24px, 4vw, 72px);
  }
  body.home.et-db #et-boc :is(.et-l--post,#page-container-bfb .et-l) .first-view > .et_pb_row > .et_pb_column:last-child {
    padding: clamp(32px, 4vw, 64px) clamp(20px, 2vw, 32px);
  }
  /* Con media pantalla, el formulario deja de ser una tira. */
  .home :is(.et-l--post,#page-container-bfb .et-l) .first-view .rtf-form { max-width: none; }
  /* Y el titular necesita medida propia: a ancho completo una línea cruzaría
     media pantalla y se pierde el renglón al volver. */
  .home :is(.et-l--post,#page-container-bfb .et-l) .first-view h1 { max-width: 15ch; }
}

/* Los guiones de la lista del héroe se descolocaban cuando el texto pasaba a
   dos líneas: el guion se centraba con el bloque entero en vez de alinearse
   con la primera línea. */
.home :is(.et-l--post,#page-container-bfb .et-l) .first-view .et_pb_icon_list_item,
.home :is(.et-l--post,#page-container-bfb .et-l) .first-view li { align-items: flex-start; }
/* ---------------------------------------------------------------------------
   18 · LOS TEXTOS LEGALES DEL FORMULARIO
   El consentimiento, la nota de «sin compromiso» y la información básica de
   protección de datos cumplen la ley estando; no tienen que competir por la
   atención con los campos. A 12 px siguen siendo legibles y dejan de ocupar
   un tercio de la tarjeta.
   ------------------------------------------------------------------------ */

.rtf-consentimiento,
.rtf-microcopy,
.rtf-info-basica,
.rtf-campo--adjunto .rtf-ayuda {
  font-size: 12px;
  line-height: 1.45;
}
.rtf-consentimiento a,
.rtf-info-basica a { font-size: inherit; }
/* El área táctil no baja con la letra: la fila entera sigue siendo pulsable. */
.rtf-consentimiento { min-height: var(--rtf-toque); align-items: center; }

/* ---------------------------------------------------------------------------
   19 · BOTÓN ANCLA DE LA BANDA DE CIERRE
   ------------------------------------------------------------------------ */

.rtf-cierre-accion { margin: var(--rtf-espacio-m) 0 0; text-align: center; }
.rtf-cierre-accion .rtf-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--rtf-espacio-xs);
  min-height: var(--rtf-toque);
  padding: var(--rtf-espacio-xs) var(--rtf-espacio-l);
  font-family: var(--rtf-fuente-cuerpo), sans-serif;
  font-size: var(--rtf-tipo-cuerpo);
  font-weight: 600;
  /* 1 px, no 1,5: no existe medio píxel en el sistema y a 1,5 el navegador
     redondea distinto según el zoom. */
  border: 1px solid var(--rtf-acento);
  border-radius: var(--rtf-radio-m);
  background: var(--rtf-acento);
  color: #fff;
  text-decoration: none;
  transition: background-color var(--rtf-duracion-rapida) var(--rtf-curva);
}
.rtf-cierre-accion .rtf-boton:hover,
.rtf-cierre-accion .rtf-boton:focus-visible {
  background: var(--rtf-acento-fuerte);
  border-color: var(--rtf-acento-fuerte);
  color: #fff;
}
.rtf-cierre-accion .rtf-boton .rtf-flecha { font-size: .85em; }

/* ---------------------------------------------------------------------------
   20 · ¿POR QUÉ NOSOTROS? — los cuatro motivos
   Llevaban iconos negros de Font Awesome: un trofeo, una medalla y un señor de
   traje. Imaginería de «ganador» en un sitio cuyo tono entero es que no
   prometemos resultados, y un estilo de dibujo que no tiene nada que ver con el
   de la figura de la carta.
   Se sustituyen por marcas dibujadas en la misma línea: trazo fino, acento y el
   mismo vocabulario visual. Van como fondo, así que el contenido no se toca — y
   el día que se retiren las fuentes de iconos, esto ya no depende de ellas.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_blurb {
  background: var(--rtf-superficie-alta);
  border: 1px solid var(--rtf-borde);
  border-radius: var(--rtf-radio-l);
  padding: var(--rtf-espacio-m);
  block-size: 100%;
}

/* El glifo se apaga y en su sitio va el dibujo. font-size:0 se lleva el
   carácter de la fuente de iconos sin tener que tocar el marcado. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et-pb-icon {
  display: block;
  inline-size: 46px;
  block-size: 46px;
  font-size: 0 !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  background-color: var(--rtf-superficie);
  border: 1px solid var(--rtf-borde);
  border-radius: 50%;
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_main_blurb_image { margin-bottom: var(--rtf-espacio-s); }

/* 1 · Sin provisión de fondos — un billete tachado. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_column:nth-child(1) .et-pb-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c1382f' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='9' width='26' height='15' rx='2'/%3E%3Ccircle cx='16' cy='16.5' r='3.5'/%3E%3Cpath d='M5 28 L27 5'/%3E%3C/svg%3E");
}
/* 2 · Revisión técnica — la lupa sobre el expediente. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_column:nth-child(2) .et-pb-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c1382f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h12l5 5v6'/%3E%3Cpath d='M19 3v5h5'/%3E%3Cpath d='M7 3v26h7'/%3E%3Ccircle cx='21' cy='22' r='6'/%3E%3Cpath d='M25.5 26.5 L30 31'/%3E%3C/svg%3E");
}
/* 3 · Multas anuladas — el expediente con la marca de conforme. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_column:nth-child(3) .et-pb-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c1382f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h12l5 5v21H7z'/%3E%3Cpath d='M19 3v5h5'/%3E%3Cpath d='M11.5 17.5l3.5 3.5L21 15'/%3E%3C/svg%3E");
}
/* 4 · Años en el sector — un calendario. Ni medallas ni trofeos. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_column:nth-child(4) .et-pb-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c1382f' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='6' width='24' height='23' rx='2'/%3E%3Cpath d='M4 13h24M11 3v6M21 3v6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   21 · SOLUCIONES — particulares y empresas
   Dos columnas de texto corrido del mismo tamaño de principio a fin: sin
   jerarquía, la entradilla no se distinguía del cuerpo, y los botones quedaban
   a distinta altura porque las columnas miden distinto.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_column {
  display: flex;
  flex-direction: column;
  background: var(--rtf-superficie-alta);
  border: 1px solid var(--rtf-borde);
  border-radius: var(--rtf-radio-l);
  padding: var(--rtf-espacio-l);
}
/* La entradilla es la primera frase y tiene que leerse antes que el cuerpo. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_text_inner > p:first-child {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--rtf-texto);
  margin-bottom: var(--rtf-espacio-s);
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_text_inner > p + p { font-size: var(--rtf-tipo-menor); }
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_text_inner > p:last-child { margin-bottom: 0; }
/* Aquí había una regla que bajaba TODO h2 de esta sección al tamaño de un h3.
   Se escribió cuando los rótulos de las dos tarjetas eran h2. Ya no lo son
   —son h3 desde que se arregló el esquema de encabezados— y lo único que
   quedaba dentro de su puntería era el rótulo «Soluciones», al que encogía.
   Se quita: lo que hay que vestir son los titulares de tarjeta, y eso lo hace
   la regla de h3 de más abajo.  (28/08/2026) */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_column:has(.et_pb_button_module_wrapper) > .et_pb_heading .et_pb_module_header {
  font-size: var(--rtf-tipo-h3);
  margin-bottom: var(--rtf-espacio-s);
}
/* El botón se va al fondo de la columna: los dos quedan a la misma altura
   aunque un texto sea más largo que el otro. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_button_module_wrapper {
  margin-top: auto;
  padding-top: var(--rtf-espacio-m);
}

/* ---------------------------------------------------------------------------
   22 · NUESTROS CLIENTES
   Una cita flotando en 972 px de blanco. Se le da el mismo trato que a la
   figura de la carta: tarjeta, filete y la atribución en monoespaciada, que es
   como este sitio marca los datos comprobables.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_description {
  position: relative;
  background: var(--rtf-superficie-alta);
  border: 1px solid var(--rtf-borde);
  border-radius: var(--rtf-radio-l);
  box-shadow: var(--rtf-sombra-1);
  padding: var(--rtf-espacio-l);
  max-inline-size: 860px;
  margin-inline: auto;
  text-align: left;
}
/* La comilla dibujada, como marca de agua. Decorativa. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_description::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -.06em;
  inset-inline-start: .18em;
  font-family: var(--rtf-fuente-display), serif;
  font-size: 6rem;
  line-height: 1;
  color: var(--rtf-acento-suave);
  pointer-events: none;
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_title {
  position: relative;
  font-size: var(--rtf-tipo-h3);
  line-height: 1.28;
  margin-bottom: var(--rtf-espacio-s);
}
/* Las estrellas, en acento y espaciadas. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_content > p:first-child {
  color: var(--rtf-acento);
  letter-spacing: .2em;
  margin: 0;
}
/* La atribución: filete arriba y monoespaciada, igual que el pie de la figura. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_content > p:last-child {
  font-family: var(--rtf-fuente-datos), ui-monospace, monospace;
  font-size: var(--rtf-tipo-pie);
  color: var(--rtf-texto-suave);
  border-top: 1px solid var(--rtf-borde);
  padding-top: var(--rtf-espacio-s);
  margin-top: var(--rtf-espacio-s);
}
/* El carrusel reservaba 571 px de alto para una cita de cuatro líneas. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slider .et_pb_container {
  min-height: 0 !important;
  height: auto !important;
}

/* ---------------------------------------------------------------------------
   23 · ESTUDIO GRATUITO
   Media sección vacía a la derecha y un botón negro que no es de este sistema.
   El dibujo es el mismo expediente de la figura, aquí con la lupa encima.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 {
  background-repeat: no-repeat;
  background-position: right clamp(16px, 6vw, 96px) center;
  background-size: min(28%, 280px) auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 175' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 10h76l30 30v122H30z' stroke='%2314181c' stroke-width='2'/%3E%3Cpath d='M106 10v30h30' stroke='%2314181c' stroke-width='2'/%3E%3Cpath d='M50 62h58M50 80h42M50 98h50' stroke='%23c3ccd3' stroke-width='6'/%3E%3Ccircle cx='130' cy='120' r='32' fill='%23ffffff' fill-opacity='.94' stroke='%23c1382f' stroke-width='2.4'/%3E%3Cpath d='M153 143l16 16' stroke='%23c1382f' stroke-width='2.8'/%3E%3Cpath d='M118 120h24M130 108v24' stroke='%23c1382f' stroke-width='2.4'/%3E%3C/svg%3E");
}
@media (max-width: 980px) {
  body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 { background-image: none; }
}

/* El botón negro pasa al sistema: es el mismo control que «Enviar mi caso». */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_button {
  background: var(--rtf-acento) !important;
  border-color: var(--rtf-acento) !important;
  color: #fff !important;
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_button:hover {
  background: var(--rtf-acento-fuerte) !important;
  border-color: var(--rtf-acento-fuerte) !important;
}

/* ---------------------------------------------------------------------------
   24 · AJUSTES DE LAS SECCIONES REDISEÑADAS
   ------------------------------------------------------------------------ */

/* Las cuatro tarjetas de «¿Por qué nosotros?» medían cada una lo que medía su
   texto: cuatro alturas distintas en fila. Las columnas de Divi no se estiran
   solas. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_row { align-items: stretch; }
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_column { display: flex; }
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_blurb { flex: 1; }

/* El icono estaba a la izquierda del rótulo y le robaba el ancho: los títulos
   salían partidos en tres líneas. Encima, el rótulo respira. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_blurb_content { display: block; }
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_main_blurb_image {
  display: block;
  margin: 0 0 var(--rtf-espacio-s);
}

/* En «Soluciones» la tarjeta se la llevó también la columna del rótulo de
   sección, que no tiene contenido que encuadrar.

   Aquí ponía `:not(:has(h2))`, y esa condición se estropeó sola: cuando el
   rótulo «Soluciones» subió de h4 a h2 —que era lo correcto— su columna pasó a
   cumplirla y se llevó la tarjeta, el relleno de 32 px y hasta el iconito de
   la casa. El rótulo acabó metido en una caja que ninguno de los otros cuatro
   titulares tiene.

   La condición buena no es «lleva un h2»: es «lleva un botón». Las dos
   tarjetas de verdad —Particulares y Empresa— terminan en un botón; la columna
   del rótulo no. Eso no cambia si mañana se sube o se baja un nivel de
   encabezado.  (28/08/2026) */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_column:not(:has(.et_pb_button_module_wrapper)) {
  display: block;
  background: none;
  border: 0;
  padding: 0;
}

/* Encima del rótulo cuelga un divisor de la maqueta vieja: un módulo de 200 px
   puesto en modo «espacio», o sea invisible, que solo aporta 23 px de hueco.
   Los otros cuatro titulares no lo tienen, así que «Soluciones» empezaba más
   abajo que sus hermanos. La marca de sección es el filete de acento del
   bloque 47, la misma para los cinco; este sobra. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_column:not(:has(.et_pb_button_module_wrapper)) > .et_pb_divider {
  display: none;
}

/* La cita quedaba descentrada: el carril del carrusel es más ancho que la
   tarjeta y la tarjeta se apoyaba a la izquierda. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slider_container_inner,
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_description { margin-inline: auto; }

/* Los puntos del carrusel estaban dentro de la tarjeta, encima de la línea de
   la atribución. Se bajan debajo, que es donde se buscan. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et-pb-controllers {
  position: static;
  margin-top: var(--rtf-espacio-m);
}

/* ---------------------------------------------------------------------------
   25 · SEGUNDA PASADA
   ------------------------------------------------------------------------ */

/* Las columnas de Divi traen su propio align-items y ganaban: las cuatro
   tarjetas seguían midiendo cada una lo que medía su texto. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_row { align-items: stretch !important; }
body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_column {
  align-self: stretch !important;
  display: flex !important;
}

/* Al poner margin-inline:auto en el carril del carrusel, el carril se encogió
   al contenido y se llevó la tarjeta a la izquierda. El carril tiene que
   ocupar todo el ancho; quien se centra es la tarjeta. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slider_container_inner {
  inline-size: 100%;
  margin-inline: 0;
  padding-bottom: var(--rtf-espacio-l);
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_description {
  margin-inline: auto;
  inline-size: 100%;
}
/* Los puntos vuelven a su posición absoluta de Divi, pero ahora tienen sitio
   debajo de la tarjeta gracias al padding de arriba. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et-pb-controllers {
  position: absolute;
  inset-block-end: 0;
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   26 · TERCERA PASADA
   Las tarjetas seguían midiendo distinto por un motivo tonto y comprobado con
   el inspector: la FILA es display:block. Las columnas eran flex y decían
   align-self:stretch, pero estirarse dentro de un contenedor de bloque no
   significa nada. Se convierte la fila en contenedor flex y entonces sí.
   Solo la fila que lleva las tarjetas, no la del rótulo.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_3 .et_pb_row:has(.et_pb_blurb) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch !important;
}

/* La fila de la cita no estaba centrada dentro de su sección. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_row { margin-inline: auto; }

/* En móvil la columna perdió su margen lateral (bloque 15) y la tarjeta del
   formulario quedó pegada al borde del panel oscuro, sin marco. Al panel del
   héroe se le devuelve, que ahí el aire oscuro alrededor es el encuadre. */
@media (max-width: 600px) {
  /* Con #main-content delante: la regla del bloque 15 que pone el margen a
     cero lleva ese id y ganaba a esta, que era de solo clases. */
  :is(#main-content,#page-container-bfb) .home :is(.et-l--post,#page-container-bfb .et-l) .first-view .et_pb_column:last-child,
  :is(#main-content,#page-container-bfb) .first-view .et_pb_column:last-child {
    padding-inline: var(--rtf-espacio-s);
    padding-bottom: var(--rtf-espacio-s);
  }
}

/* ---------------------------------------------------------------------------
   27 · EL HÉROE OCUPA EL ANCHO DE LA PANTALLA

   El héroe tiene que llegar a los dos bordes, y vive dentro de la fila del
   Theme Builder, que se ciñe a 1.200 px. Aquí se sacaba con `100vw` y márgenes
   negativos, y eso estaba mal por una razón concreta: **100vw no es el ancho
   visible, cuenta también la barra de desplazamiento**. El héroe salía 15 px
   más ancho que la pantalla, centrado, comiéndose 7,5 px por cada lado. A
   1024 px se veía: el panel azul del formulario quedaba recortado por la
   derecha y su margen interior no cuadraba con el izquierdo.

   Se intentó descontar la barra con `calc(100vw - 100%)` guardado en una
   variable registrada con @property. **No funciona, y conviene dejarlo escrito
   para no volver a intentarlo:** una propiedad declarada como `<length>` no
   admite porcentajes, así que la declaración es inválida y cae al valor
   inicial. Medido: la variable valía 0 px.

   La solución buena no necesita ni `vw` ni márgenes negativos: se le quita el
   tope a la fila del Theme Builder y el héroe ocupa su 100 %. Las demás
   secciones no se mueven ni un píxel, porque cada una ya se ciñe sola a
   1.200 px con su propia fila. Un cálculo menos y un `overflow` menos del que
   depender.
   ------------------------------------------------------------------------ */

html {
  /* Se queda como red de seguridad, no como parche: si algún día una tabla o
     una imagen se pasa de ancho, que no aparezca una barra horizontal.
     clip y no hidden: hidden crearía un contenedor de scroll y se llevaría por
     delante la cabecera fija. */
  overflow-x: clip;
}

@media (min-width: 981px) {
  /* La fila y la columna del Theme Builder, sin tope. El envoltorio no tiene
     por qué encuadrar nada: encuadran las filas de cada sección. */
  body.home :is(#main-content,#page-container-bfb) .et_pb_row[class*="_tb_body"] {
    max-width: none !important;
    width: 100% !important;
  }
  .home :is(.et-l--post,#page-container-bfb .et-l) .first-view {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

/* ---------------------------------------------------------------------------
   28 · EL FORMULARIO EN DOS COLUMNAS
   El orden lo pone el marcado: primero la carta, después los datos. Aquí solo
   se colocan en paralelo cuando hay sitio.
   ------------------------------------------------------------------------ */

.rtf-form-cuerpo { display: grid; gap: var(--rtf-espacio-m); }
.rtf-form-col { display: flex; flex-direction: column; min-width: 0; }

/* 560 y no 620: con el héroe repartido 42/58 la tarjeta da 590 px de
   contenido. Medido, no estimado. */
@container formulario (min-width: 520px) {
  .rtf-form-cuerpo {
    grid-template-columns: 1fr 1fr;
    gap: var(--rtf-espacio-l);
  }
}

/* La zona de subida es lo valioso del formulario y ahora que está arriba puede
   ocupar lo que le corresponde: crece hasta llenar su columna. */
.rtf-form-col--carta .rtf-campo--adjunto { display: flex; flex-direction: column; }
.rtf-form-col--carta .codedropz-upload-handler,
.rtf-form-col--carta .codedropz-upload-container { min-block-size: 116px; display: grid; place-content: center; }

/* ---------------------------------------------------------------------------
   29 · ALGUNAS RECOMENDACIONES (antes «Nuestros clientes»)
   Eran dos citas dentro de un carrusel: una animación de desplazamiento que
   nadie pidió, dos puntitos y una cita escondida. Con DOS testimonios el
   carrusel no aporta nada — aporta espera.
   Se despliegan las dos, en paralelo. Sin transición que arreglar y sin
   puntitos que quitar: dejan de existir.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slides { display: grid; gap: var(--rtf-espacio-m); }
@media (min-width: 981px) {
  body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slides { grid-template-columns: 1fr 1fr; }
}
/* Lo que hay que arrancarle a Divi para que las dos citas convivan es el
   apilado: posición, capa y su animación de diapositiva.
   Aquí había además `opacity`, `transform` y `transition` clavados con
   `!important`, y eso dejaba las dos citas fuera del escalonado del bloque 50:
   eran lo ÚNICO de la portada que no podía moverse. Se sueltan las tres. La
   opacidad de las citas ya no la toca nadie más: la animación de Divi que la
   ponía a cero está apagada dos reglas más abajo.  (28/08/2026) */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide {
  position: relative !important;
  display: block !important;
  z-index: auto !important;
  animation: none !important;
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slider .et_pb_container,
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slider_container_inner {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 0;
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_description {
  max-inline-size: none;
  block-size: 100%;
}
/* Los controles del carrusel ya no gobiernan nada. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et-pb-controllers,
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et-pb-slider-arrows { display: none !important; }

/* ---------------------------------------------------------------------------
   30 · SOLUCIONES — texto de entrada y una marca por tipología
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .rtf-entrada-seccion {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--rtf-texto-suave);
  max-width: var(--rtf-medida);
  margin: 0 0 var(--rtf-espacio-m);
}

/* Cada caja lleva su marca dibujada: una casa y una nave. Van sobre el titular,
   con el mismo trato que los cuatro motivos de arriba.
   La condición es «la columna lleva botón» y no «lleva h2»: con la segunda, la
   columna del rótulo de sección se llevaba también la casita. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_column:has(.et_pb_button_module_wrapper) > .et_pb_module:first-child::before {
  content: "";
  display: block;
  inline-size: 46px;
  block-size: 46px;
  margin-bottom: var(--rtf-espacio-s);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  background-color: var(--rtf-superficie);
  border: 1px solid var(--rtf-borde);
  border-radius: 50%;
}
/* Particulares: una casa. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_column:has(.et_pb_button_module_wrapper):nth-of-type(1) > .et_pb_module:first-child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c1382f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14 16 4l12 10'/%3E%3Cpath d='M7 16v12h18V16'/%3E%3Cpath d='M13 28v-7h6v7'/%3E%3C/svg%3E");
}
/* Empresas: una nave con su chimenea. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_column:has(.et_pb_button_module_wrapper):nth-of-type(2) > .et_pb_module:first-child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c1382f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 28V13l8 5V13l8 5V8h8v20z'/%3E%3Cpath d='M24 4v4'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   31 · ESTUDIO GRATUITO
   El fondo eran dos bloques grises solapados con los bordes descuadrados. Se
   unifica en una sola superficie y el dibujo crece: era una marca de agua del
   28 % y el cliente tenía razón, así no dice nada.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_6,
body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_row,
body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_column {
  background-color: transparent !important;
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 {
  background-color: var(--rtf-superficie) !important;
  border-radius: var(--rtf-radio-l);
  background-size: min(40%, 400px) auto;
  background-position: right clamp(16px, 5vw, 72px) center;
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_row { max-width: 56%; margin-inline: 0; }
@media (max-width: 980px) {
  body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_row { max-width: none; }
}

/* ---------------------------------------------------------------------------
   32 · AJUSTES DEL FORMULARIO EN DOS COLUMNAS
   ------------------------------------------------------------------------ */

/* Cada columna del formulario es a su vez un contenedor. Sin esto, la pareja
   correo/teléfono seguía preguntándole su ancho a la TARJETA —572 px— y se
   partía en dos dentro de una columna de 270, con los rótulos a dos líneas y
   los campos a 130 px. Ahora pregunta a su columna y se apila, que es lo que
   toca ahí. */
.rtf-form-col { container-type: inline-size; container-name: formulario; }

/* La columna del formulario ocupa lo que sobre, sin dejar una franja de
   retícula suelta a su derecha: con un porcentaje fijo, los redondeos del
   100vw dejaban 45 px al aire. */
@media (min-width: 981px) {
  /* flex: 1 1 58%, no 1 1 auto. Con auto la columna se encogía al contenido,
     la tarjeta bajaba de los 520 px del umbral y el formulario volvía a una
     sola columna. Con base al 58 % y permiso para crecer: mide lo que tiene
     que medir Y se come el resto de la fila. */
  body.home.et-db #et-boc :is(.et-l--post,#page-container-bfb .et-l) .first-view > .et_pb_row > .et_pb_column:last-child {
    flex: 1 1 58%;
  }
}

/* ---------------------------------------------------------------------------
   33 · LAS DOS RECOMENDACIONES, IGUALADAS
   Las dos citas están escritas con marcado distinto —la primera con <p>, la
   segunda con <div><span>— porque se metieron en momentos distintos. Mis
   reglas apuntaban solo a <p> y la segunda se quedó sin estilo.
   Se apunta al primer y último hijo, sea lo que sea.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide { display: flex !important; }
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_container,
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slider_container_inner { display: flex; flex: 1; }
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_description { flex: 1; }

/* Las estrellas. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_content > :first-child {
  color: var(--rtf-acento);
  letter-spacing: .2em;
  margin: 0;
}
/* La atribución: filete arriba y monoespaciada, igual que el pie de la figura.
   Va empujada al fondo para que las dos tarjetas la tengan a la misma altura
   aunque una cita sea más larga que la otra. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_content > :last-child {
  font-family: var(--rtf-fuente-datos), ui-monospace, monospace;
  font-size: var(--rtf-tipo-pie);
  line-height: 1.5;
  color: var(--rtf-texto-suave);
  border-top: 1px solid var(--rtf-borde);
  padding-top: var(--rtf-espacio-s);
  margin: var(--rtf-espacio-s) 0 0;
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_description {
  display: flex;
  flex-direction: column;
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_content { margin-top: auto; }

/* ---------------------------------------------------------------------------
   34 · ESTUDIO GRATUITO
   Se le da el mismo trato de tarjeta que al resto de la página y el dibujo
   pasa de marca de agua a pieza: la carta con la lupa, del tamaño de la figura
   del principio, en la mitad que estaba vacía.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 {
  background-image: none !important;
  background-color: transparent !important;
  padding-block: var(--rtf-espacio-xl);
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_row {
  max-width: 1200px !important;
  margin-inline: auto !important;
  background: var(--rtf-superficie);
  border: 1px solid var(--rtf-borde);
  border-radius: var(--rtf-radio-l);
  padding: clamp(28px, 4vw, 56px) !important;
  position: relative;
}
@media (min-width: 981px) {
  /* El dibujo va como FONDO de la tarjeta, no en un ::after.
     Lo intenté con ::after y salía con altura cero: Divi usa ese mismo
     pseudoelemento para su clearfix y le pone height:0 con un selector que
     lleva id. Es la tercera vez en esta ronda que pierdo contra un id de
     Divi. Como fondo no hay pelea que perder. */
  body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_row {
    padding-right: 44% !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 210' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M64 26h74l26 26v132H64z' stroke='%2314181c' stroke-width='2.2'/%3E%3Cpath d='M138 26v26h26' stroke='%2314181c' stroke-width='2.2'/%3E%3Cpath d='M82 74h58M82 92h44M82 110h52' stroke='%23c3ccd3' stroke-width='6'/%3E%3Crect x='78' y='128' width='72' height='22' rx='3' fill='%23f7e4e2' stroke='%23c1382f' stroke-width='1.6'/%3E%3Ccircle cx='166' cy='140' r='40' fill='%23ffffff' fill-opacity='.95' stroke='%23c1382f' stroke-width='2.6'/%3E%3Cpath d='M195 169l22 22' stroke='%23c1382f' stroke-width='3.2'/%3E%3Cpath d='M150 140h32M166 124v32' stroke='%23c1382f' stroke-width='2.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right clamp(32px, 5vw, 72px) center;
    background-size: auto min(74%, 300px);
  }
}

/* ---------------------------------------------------------------------------
   35 · LOS FILETES QUE SE SALÍAN
   Los divisores rojos que hacen de subrayado de rótulo arrancaban a la
   izquierda de su columna —hasta 85 px fuera de la tarjeta— porque arrastran
   un margen negativo de la maqueta antigua. Se les quita: un filete que no
   empieza donde empieza el texto que subraya no subraya, estorba.
   ------------------------------------------------------------------------ */
:is(#main-content,#page-container-bfb) .et_pb_divider {
  max-width: 100%;
  margin-inline: 0 !important;
}

/* ---------------------------------------------------------------------------
   36 · SOLUCIONES, MÁS FÁCIL DE LEER
   Tenía tres tamaños de letra en la misma caja —entradilla, cuerpo y cierre—
   y a esos anchos las diferencias no leían como jerarquía: leían como
   descuido. Un solo tamaño, y la jerarquía la marca el color y el peso.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_text_inner > p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--rtf-texto-suave);
  margin: 0 0 1em;
  max-width: 46ch;
}
/* La primera frase es la que resume: mismo tamaño, más peso y más contraste. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_text_inner > p:first-child {
  font-size: 1rem;
  font-weight: 500;
  color: var(--rtf-texto);
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_text_inner > p:last-child { margin-bottom: 0; }
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_text_inner > p strong { color: var(--rtf-texto); }

/* El rótulo de sección estaba metido hacia dentro y parecía suelto: se alinea
   con el texto y con las cajas, que es de donde cuelga. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_heading,
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_heading_container,
body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_divider {
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
  text-align: left;
}
/* El margen del rótulo lo pone ya la regla común de los cinco titulares de
   sección (bloque 47). Aquí había una excepción que lo dejaba más pegado a lo
   que viene debajo que sus cuatro hermanos. Fuera.  (28/08/2026) */

/* ---------------------------------------------------------------------------
   37 · ESTUDIO GRATUITO — caja, no bandeja
   Fondo fuera: queda el filete. Y el módulo de carrusel de esta página solo
   tiene sentido donde hay más de una cosa que pasar; aquí no hay ninguna.
   ------------------------------------------------------------------------ */

body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_row {
  /* background-color y NO el atajo background: el atajo resetea también
     background-image y se llevaba por delante el dibujo de la carta. */
  background-color: transparent !important;
  border: 1px solid var(--rtf-borde);
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_column { background: transparent !important; }
body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_heading,
body.home :is(#main-content,#page-container-bfb) .et_pb_section_6 .et_pb_divider {
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
}

/* ---------------------------------------------------------------------------
   38 · EL FORMULARIO, CON EL ORDEN NUEVO
   Izquierda: nombre y «¿qué te reclaman?». Derecha: correo, teléfono y la
   carta. La columna de la izquierda lleva el campo largo, así que el textarea
   crece para que las dos columnas acaben a la misma altura.
   ------------------------------------------------------------------------ */

.rtf-form-col--quien .rtf-campo:last-child { display: flex; flex-direction: column; flex: 1; }
.rtf-form-col--quien .rtf-campo:last-child .rtf-label { flex: 1; }
.rtf-form-col--quien textarea { flex: 1; min-height: 120px; }

/* La zona de subida ocupa lo que le sobre a su columna. */
.rtf-form-col--contacto .rtf-campo--adjunto { display: flex; flex-direction: column; flex: 1; }
.rtf-form-col--contacto .codedropz-upload-handler,
.rtf-form-col--contacto .codedropz-upload-container {
  flex: 1;
  display: grid;
  place-content: center;
  min-block-size: 104px;
}
/* Dentro de una columna estrecha, correo y teléfono se apilan. Lo decide la
   consulta de contenedor de la propia columna, no el ancho de la ventana. */

/* Aquí vivían TRES reglas con `!important` para devolverle al rótulo
   «Soluciones» el ancho de su sección: una para la fila, dos para la columna.
   Se han retirado el 28/08/2026 porque atacaban el síntoma.

   La causa estaba en el dato: esa fila —y solo esa de toda la portada—
   declaraba `width: 80 %`, herencia de la maqueta antigua. Al medir el 80 % y
   quedar centrada, empujaba el rótulo unos 120 px a la derecha del carril de
   los otros cuatro titulares.

   Y el CSS no llegaba a todas partes: funcionaba en el front, pero dentro del
   constructor el rótulo seguía saliendo desplazado, o sea que el editor no
   enseñaba lo que se publica. Quitado el 80 % del bloque
   (`optimizacion/scripts/soluciones-ancho-fila.php`), la fila ocupa lo que le
   toca de forma nativa y cae en su sitio en los dos sitios, sin una sola regla.
   Regla 5 de CLAUDE.md: Divi nativo antes que CSS. */

/* ---------------------------------------------------------------------------
   39 · LA CABECERA DE PÁGINA, UNA SOLA PARA TODAS
   Había cuatro maneras de empezar una página: el titular caía a 113, 137, 153
   o 173 px del borde según qué plantilla arrastrara cada una, y cinco páginas
   lo metían dentro de una caja gris con la foto de un juzgado detrás.

   El script cabeceras-igualar.php quitó las fotos, las cajas y los filetes del
   contenido; lo que queda aquí es lo que el contenido no puede arreglar: las
   sangrías las imponen los presets de Divi, no los bloques, y un preset gana a
   lo que declare la página.

   Hacen falta dos identificadores en la cadena porque Divi escribe sus reglas
   como «.et-db #et-boc #et-main-area …». Contra dos id no gana ninguna cadena
   de clases, por muchos !important que lleve: el empate en !important lo
   rompe la especificidad.
   ------------------------------------------------------------------------ */

body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo,
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo > .et_pb_row,
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo > .et_pb_row > .et_pb_column:first-child {
  padding-inline: 0 !important;
}

/* La fila también traía relleno arriba: 40 px en las de rejilla y 80 px en las
   de bloque, puesto por el preset de fila. De ahí que el titular arrancara 40
   u 80 px más abajo en unas páginas que en otras. El aire de la cabecera lo
   pone la sección, una sola vez. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo > .et_pb_row {
  padding-block: 0 !important;
}

/* La fila de la cabecera mide lo mismo que el contenido de debajo y va
   centrada por el mismo canalón. Sin esto cada plantilla traía su ancho. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo > .et_pb_row {
  inline-size: 100% !important;
  max-inline-size: var(--rtf-contenedor) !important;
  margin-inline: auto !important;
}

/* Un solo ritmo vertical: el mismo aire arriba en las quince páginas, y menos
   hueco muerto hasta lo que viene después. */
:is(#main-content,#page-container-bfb) .rtf-hero-articulo {
  padding-block: var(--rtf-espacio-xl) var(--rtf-espacio-2xl) !important;
}

/* Titular y entradilla como una sola unidad: pegados, y separados de lo que
   siga. Da igual que la página los tenga en un módulo o en dos. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo h1 {
  margin-block: 0 var(--rtf-espacio-s) !important;
}
/* Los módulos de la cabecera no ponen aire entre ellos: el hueco entre titular
   y entradilla tiene que ser el mismo tanto si van juntos en un módulo como si
   la página los tiene separados en dos.
   Y cuando van separados, la columna es flexible y mete su propio hueco de
   30 px — el margen del titular no lo tapa, porque en flex el margen y el gap
   se suman. Por eso el gap se declara aquí y no se deja al azar. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo .et_pb_module {
  margin-block: 0 !important;
}
/* El hueco lo lleva el módulo, no la columna: unas cabeceras usan columna
   flexible —donde el gap manda— y otras columna de bloque —donde el gap no
   existe—. Con el margen en el módulo sale el mismo hueco en las dos. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo > .et_pb_row > .et_pb_column {
  gap: 0 !important;
}
/* Las filas de rejilla dejaban 46 px muertos a la derecha de su única columna,
   y en un teléfono eso son 46 px de titular menos. La columna ocupa la fila. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo > .et_pb_row.et_grid_row > .et_pb_column {
  grid-column: 1 / -1;
  inline-size: 100% !important;
  max-inline-size: none !important;
}
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo .et_pb_module + .et_pb_module {
  margin-block-start: var(--rtf-espacio-s) !important;
}
/* Si el titular es lo último de su módulo, el hueco ya lo pone el margen del
   módulo siguiente: su propio margen sobraría y daría el doble de aire. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo h1:last-child {
  margin-block-end: 0 !important;
}

/* La entradilla: una talla por encima del cuerpo, en gris, y con la medida
   corta para que no cruce la página entera. Vale tanto si va en el mismo
   módulo que el titular como si va en el suyo. */
:is(#main-content,#page-container-bfb) .rtf-hero-articulo .et_pb_text_inner > p:first-of-type {
  font-size: var(--rtf-tipo-entradilla, 1.15rem);
  line-height: 1.55;
  color: var(--rtf-texto-suave);
  /* 75 y no 62: a 62 la entradilla dejaba media página vacía a su derecha y el
     cliente lo pidió más ancho. Sigue por debajo del ancho de la columna, así
     que la línea no llega a cansar. Vale para todas las páginas internas. */
  max-inline-size: 75ch;
  margin-block: 0 var(--rtf-espacio-xs);
}
:is(#main-content,#page-container-bfb) .rtf-hero-articulo .et_pb_text_inner > p:last-child {
  margin-block-end: 0;
}
/* En la entradilla la negrita marca la frase que resume, no un grito: mismo
   tamaño, un punto más de contraste. */
:is(#main-content,#page-container-bfb) .rtf-hero-articulo .et_pb_text_inner > p strong {
  color: var(--rtf-texto);
  font-weight: 500;
}

/* En Contacto el titular comparte fila con el formulario. La columna del
   titular pierde su caja para caer en el canalón; la del formulario conserva
   la suya, porque es un panel y no una cabecera.
   El gris de detrás del titular no estaba en la página sino en el preset de
   la fila —una capa negra al 20 % con un degradado blanco encima—, así que
   borrarlo del bloque no bastaba. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo.first-view > .et_pb_row {
  background-color: transparent !important;
  background-image: none !important;
}
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo.first-view > .et_pb_row > .et_pb_column:first-child {
  padding-block: 0 !important;
}
@media (min-width: 981px) {
  body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo.first-view > .et_pb_row > .et_pb_column:first-child {
    padding-inline-end: var(--rtf-espacio-2xl) !important;
  }
}

/* ---------------------------------------------------------------------------
   40 · EL VELO GRIS DE LA CABECERA
   Al quitar la foto del juzgado quedó puesto el degradado que la tapaba:
   rgba(243,241,242,.8) de arriba abajo, que sobre blanco se lee como una banda
   gris justo detrás del titular. No estaba en la página —se borró de ahí ayer—
   sino en el preset de fila, y un preset gana a la página.
   ------------------------------------------------------------------------ */

/* SOLO la fila. Escribí también «> .et_pb_row > .et_pb_column» y con eso borré
   el panel azul del formulario de Contacto, que es una columna de la cabecera y
   sí tiene que llevar fondo. Es el mismo error que cometí ayer con la sangría:
   escribir «la columna» pensando en las páginas que tienen una sola. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo > .et_pb_row {
  background-image: none !important;
  background-color: transparent !important;
}
/* El envoltorio del parallax se queda vacío pero sigue ocupando: fuera. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo .et-pb-parallax-wrapper,
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo .et_parallax_gradient {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   41 · EL PANEL DESTACADO, EN CLARO
   Era una columna azul con una sombra sólida de 20vw hacia la izquierda —el
   «bloque azul» que sangraba hasta el borde de la ventana—. Se le quitaron el
   fondo y la sombra en el preset, que es donde estaban.
   Lo que queda es la caja: se ancla a la CLASE DEL PRESET, que Divi escribe en
   el elemento y no depende de la posición de la sección dentro de la página.
   Anclarla a un número fue el error que dejó titulares blancos sobre blanco.
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .preset--module--divi-column--fd903cf2-c7e4-4e57-919d-a1c887feabb1 {
  background: var(--rtf-superficie-alta);
  border: 1px solid var(--rtf-borde);
  border-radius: var(--rtf-radio-l);
}
/* El texto vuelve al color de lectura: la columna venía preparada para fondo
   oscuro y arrastraba el gris claro. */
:is(#main-content,#page-container-bfb) .preset--module--divi-column--fd903cf2-c7e4-4e57-919d-a1c887feabb1,
:is(#main-content,#page-container-bfb) .preset--module--divi-column--fd903cf2-c7e4-4e57-919d-a1c887feabb1 p,
:is(#main-content,#page-container-bfb) .preset--module--divi-column--fd903cf2-c7e4-4e57-919d-a1c887feabb1 li,
:is(#main-content,#page-container-bfb) .preset--module--divi-column--fd903cf2-c7e4-4e57-919d-a1c887feabb1 strong {
  color: var(--rtf-texto);
}

/* ---------------------------------------------------------------------------
   42 · CONTACTO
   El formulario era el mismo que el de la portada —mismas clases, mismo
   marcado— pero salía en una sola columna. No es que estuviera configurado de
   otra forma: es que su consulta de contenedor mide el ANCHO DEL PANEL, y aquí
   el panel ocupaba media página (447 px frente a los 698 de la portada), por
   debajo de los 620 que hacen falta para partirlo en dos.

   Así que no hay que tocar el formulario: hay que darle sitio. Titular arriba,
   panel abajo a todo lo ancho, y el formulario se pone en dos columnas solo.
   ------------------------------------------------------------------------ */

@media (min-width: 981px) {
  body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo.first-view > .et_pb_row {
    display: block !important;
  }
  body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo.first-view > .et_pb_row > .et_pb_column {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }
  /* La columna del titular ya no comparte fila con nada: se le quita el
     apartado que la separaba del panel y se le pone aire debajo. */
  body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo.first-view > .et_pb_row > .et_pb_column:first-child {
    padding-inline-end: 0 !important;
    margin-block-end: var(--rtf-espacio-xl) !important;
  }
}

/* El panel del formulario, como caja del sistema y no como banda a sangre. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .rtf-hero-articulo.first-view > .et_pb_row > .et_pb_column:last-child {
  border-radius: var(--rtf-radio-l);
  padding: clamp(24px, 4vw, 56px) !important;
}

/* El filete del panel iba con un margen izquierdo del -16 %, que lo sacaba de
   la caja. Dentro, y a la medida del titular que encabeza. */
:is(#main-content,#page-container-bfb) .rtf-hero-articulo.first-view .et_pb_divider {
  margin-left: 0 !important;
  max-width: 96px !important;
}

/* ---------------------------------------------------------------------------
   43 · LAS TRES VÍAS DE CONTACTO
   Debajo del formulario, para quien no quiere rellenar un impreso. Mismo
   tratamiento de tarjeta que «¿Por qué nosotros?» de la portada: el dibujo en
   una moneda, el rótulo pequeño en monoespaciada y el dato grande y pulsable.
   ------------------------------------------------------------------------ */

.rtf-vias {
  inline-size: 100%;
  list-style: none;
  display: grid;
  gap: var(--rtf-espacio-m);
  margin: 0;
  padding: 0;
}
@media (min-width: 700px) {
  .rtf-vias { grid-template-columns: repeat(3, 1fr); }
}

.rtf-via {
  display: flex;
  flex-direction: column;
  gap: var(--rtf-espacio-2xs);
  padding: var(--rtf-espacio-l);
  background: var(--rtf-superficie-alta);
  border: 1px solid var(--rtf-borde);
  border-radius: var(--rtf-radio-l);
}
.rtf-via__marca {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  margin-bottom: var(--rtf-espacio-xs);
  color: var(--rtf-acento);
  background: var(--rtf-superficie);
  border: 1px solid var(--rtf-borde);
  border-radius: 50%;
}
.rtf-via__marca svg { inline-size: 26px; block-size: 26px; }

.rtf-via__que {
  font-family: var(--rtf-fuente-datos), ui-monospace, monospace;
  font-size: var(--rtf-tipo-pie);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rtf-texto-suave);
}
.rtf-via__dato {
  font-size: var(--rtf-tipo-h4);
  font-weight: 500;
  line-height: 1.3;
  color: var(--rtf-texto);
  overflow-wrap: anywhere;
}
a.rtf-via__dato { color: var(--rtf-acento-fuerte); }
.rtf-via__nota {
  font-size: var(--rtf-tipo-menor);
  line-height: 1.5;
  color: var(--rtf-texto-suave);
  margin-top: var(--rtf-espacio-2xs);
}

/* La entrada: las tres tarjetas aparecen escalonadas, una detrás de otra.
   Es el único movimiento de la página y dura menos de medio segundo.
   Con prefers-reduced-motion no hay animación: aparecen y ya está. */
@media (prefers-reduced-motion: no-preference) {
  .rtf-revela .rtf-via {
    opacity: 0;
    transform: translateY(14px);
  }
  .rtf-revela.is-visible .rtf-via {
    opacity: 1;
    transform: none;
    transition: opacity var(--rtf-duracion-media) var(--rtf-curva),
                transform var(--rtf-duracion-media) var(--rtf-curva);
  }
  .rtf-revela.is-visible .rtf-via:nth-child(2) { transition-delay: 90ms; }
  .rtf-revela.is-visible .rtf-via:nth-child(3) { transition-delay: 180ms; }
}

/* La zona de subida ocupaba su columna con dos franjas muertas a los lados
   porque el contenido iba centrado en una rejilla. Que llene lo suyo. */
.rtf-form .codedropz-upload-handler,
.rtf-form .codedropz-upload-container,
.rtf-form .codedropz-upload-inner {
  inline-size: 100%;
  max-inline-size: none;
}

/* Un `.et_pb_text_inner` sin ancho declarado se encoge al contenido en vez de
   ocupar su fila —está anotado en el CLAUDE.md del proyecto y lo he vuelto a
   pisar—. Las tres tarjetas salían apretadas en la mitad izquierda. */
:is(#main-content,#page-container-bfb) .rtf-seccion-vias .et_pb_text,
:is(#main-content,#page-container-bfb) .rtf-seccion-vias .et_pb_text_inner,
:is(#main-content,#page-container-bfb) .rtf-seccion-vias .et_pb_column,
:is(#main-content,#page-container-bfb) .rtf-seccion-vias .et_pb_row {
  inline-size: 100%;
  max-inline-size: var(--rtf-contenedor);
}
:is(#main-content,#page-container-bfb) .rtf-seccion-vias .et_pb_row { margin-inline: auto; }
:is(#main-content,#page-container-bfb) .rtf-seccion-vias { padding-block: 0 var(--rtf-espacio-xl) !important; }

/* ---------------------------------------------------------------------------
   44 · LIMPIEZA DE BORDES, SOMBRAS Y ESTADOS  (revisión del 27/08/2026)

   La tarjeta del sistema es una sola y estaba definida desde la fase 5:

       fondo    var(--rtf-superficie-alta)
       filete   1px solid var(--rtf-borde)
       radio    var(--rtf-radio-l)          10px
       sangría  var(--rtf-espacio-l)        32px
       sombra   var(--rtf-sombra-1)

   Las dos tarjetas que añadí ayer —el panel destacado y las vías de contacto—
   copiaban las cuatro primeras y se dejaban la sombra, así que convivían dos
   tratamientos de tarjeta. Se igualan.
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .preset--module--divi-column--fd903cf2-c7e4-4e57-919d-a1c887feabb1,
.rtf-via {
  box-shadow: var(--rtf-sombra-1);
}

/* La tarjeta mide su contenido y no la altura de su vecina. Sin esto, la de
   «¿Es legal…» salía de 742 px con unos 300 de texto: 440 px de caja vacía
   con filete alrededor. */
:is(#main-content,#page-container-bfb) .preset--module--divi-column--fd903cf2-c7e4-4e57-919d-a1c887feabb1 {
  align-self: start;
}

/* --- Sombra 2: el estado elevado -----------------------------------------
   Estaba declarada en los tokens y no se usaba en ninguna parte. Ahora tiene
   trabajo: es el reposo→hover de lo que se puede pulsar. Una escala de dos
   alturas, que es lo que hay declarado. */
.rtf-selector__enlace:hover {
  box-shadow: var(--rtf-sombra-2);
}

/* --- Los botones, un solo grosor -----------------------------------------
   Divi emite `body #page-container .et_pb_section .et_pb_button_N{border-width:2px}`
   —un id— y le ganaba a mi regla de un id. Con dos gana la mía. Sin esto, el
   mismo botón salía a 1 px en una página y a 2 px en otra. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .et_pb_button {
  border-width: 1px;
  border-style: solid;
}

/* --- La zona de subida tenía DOS punteados anidados ----------------------
   `.codedropz-upload-handler` y `.codedropz-upload-container` traen los dos un
   `1px dashed`, y se veían como dos rectángulos con 10 px de separación. Se
   queda el de fuera, que es el que marca la zona donde se puede soltar. */
.rtf-form .codedropz-upload-container {
  border: 0;
}
/* Y el enlace para elegir archivo medía 19 px de alto. */
.rtf-form .cd-upload-btn {
  display: inline-block;
  padding: var(--rtf-espacio-2xs) var(--rtf-espacio-3xs);
}

/* --- Los datos de contacto son enlaces y tienen que comportarse como tales
   No cambiaban de color al pasar el ratón: la regla global de hover va
   envuelta en :where() —especificidad cero, a propósito, para que cualquier
   componente le gane— y el color de la tarjeta le ganaba. Lo que faltaba no
   era el color: era el estado. */
:is(#main-content,#page-container-bfb) a.rtf-via__dato:hover,
:is(#main-content,#page-container-bfb) a.rtf-via__dato:focus-visible {
  color: var(--rtf-acento);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* El color del filete también lo escribía Divi por módulo, y salía un
   #f3f1f2 —un gris que no es de la paleta— invisible sobre blanco. El botón
   relleno lleva el filete de su propio color; así el borde existe para el modo
   de alto contraste sin dibujar una línea de más. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .et_pb_button {
  border-color: var(--rtf-acento);
}
body.et-db #et-boc :is(#main-content,#page-container-bfb) .et_pb_button:hover {
  border-color: var(--rtf-acento-fuerte);
}

/* ---------------------------------------------------------------------------
   45 · DOS DIBUJOS PARA EL AIRE QUE SOBRABA

   Medido en las páginas internas: el índice dejaba 542 px vacíos a su derecha
   y la banda de cierre 526, en TODAS ellas. No era un problema de una página:
   eran dos componentes compartidos que ocupaban media caja.

   Los dos dibujos dicen lo que hay al lado —la hoja con sus apartados, el
   sobre con la carta— así que no son relleno: son la misma idea en imagen. Y
   son SVG trazado, como el resto: no añaden un byte de descarga frente a las
   fuentes de iconos que el sitio ya arrastra.
   ------------------------------------------------------------------------ */

/* --- El índice ----------------------------------------------------------- */

.rtf-indice-caja { margin-block: var(--rtf-espacio-m); }

@media (min-width: 981px) {
  .rtf-indice-caja {
    display: grid;
    grid-template-columns: minmax(0, var(--rtf-medida)) 1fr;
    /* Arriba y no centrado: en /faqs/ el índice tiene 27 entradas y un dibujo
       centrado en una columna de 1.400 px se queda huérfano a media altura.
       Alineado arriba funciona con índices de 4 y de 27. */
    align-items: start;
    gap: var(--rtf-espacio-2xl);
  }
}
:is(#main-content,#page-container-bfb) .rtf-indice-caja .rtf-indice {
  margin-block: 0;
  max-width: none;
}

.rtf-indice__dibujo {
  display: none;
  color: var(--rtf-borde-fuerte);
  inline-size: 100%;
  max-inline-size: 240px;
  block-size: auto;
  justify-self: center;
}
@media (min-width: 981px) {
  .rtf-indice__dibujo { display: block; }
}

/* --- La banda de cierre --------------------------------------------------- */

@media (min-width: 981px) {
  .rtf-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    align-items: center;
    gap: var(--rtf-espacio-2xl);
  }
}

.rtf-cta__dibujo {
  display: none;
  color: var(--rtf-texto-claro);
  inline-size: 100%;
  block-size: auto;
}
@media (min-width: 981px) {
  .rtf-cta__dibujo { display: block; }
}

/* --- La entrada ----------------------------------------------------------
   Los dibujos NO tienen animación propia: entran con la sección, que ya la
   tiene, y llegan 80 ms después del texto. Ese desfase tiene un motivo —el
   texto es lo que la persona ha venido a leer y el dibujo lo acompaña, no lo
   precede— y no llega a leerse como efecto.
   Se hereda la curva y la duración del sistema: `--rtf-curva` es
   cubic-bezier(0.16, 1, 0.3, 1), un ease-out fuerte, que es lo que pide una
   entrada. Nada de ease-in.
   Con prefers-reduced-motion no hay desfase ni desplazamiento: aparecen. */
@media (prefers-reduced-motion: no-preference) {
  .rtf-revela .rtf-cta__dibujo,
  .rtf-revela .rtf-indice__dibujo {
    opacity: 0;
    transform: translateY(10px);
  }
  .rtf-revela.is-visible .rtf-cta__dibujo,
  .rtf-revela.is-visible .rtf-indice__dibujo {
    opacity: 1;
    transform: none;
    transition: opacity var(--rtf-duracion-media) var(--rtf-curva) 80ms,
                transform var(--rtf-duracion-media) var(--rtf-curva) 80ms;
  }
}

/* ---------------------------------------------------------------------------
   46 · EL ACORDEÓN RESPONDÍA AL CLIC Y NO AL RATÓN
   Medido: `.et_pb_toggle_title` no cambiaba absolutamente nada al pasar por
   encima. Es un control que se pulsa y no daba ninguna señal de serlo.
   120 ms, que es el tramo de «respuesta a una pulsación»: por debajo de eso no
   se percibe y por encima se nota el retardo. Solo color y la marca; nada de
   mover el texto, que es lo que se está leyendo.
   ------------------------------------------------------------------------ */

/* El color de reposo lo fija el bloque 9 con `!important` —hace falta para
   ganarle a Divi—, y `!important` gana a cualquier especificidad. Así que el
   hover tiene que llevarlo también: sin él la regla CASA pero no se aplica, que
   es exactamente lo que me pasó y lo que me costó media hora encontrar.
   La transición vive en esa misma regla de reposo, no aquí: una sola
   declaración por propiedad. */
@media (hover: hover) and (pointer: fine) {
  body.et-db #et-boc :is(#main-content,#page-container-bfb) .et_pb_toggle_title:hover {
    color: var(--rtf-acento-fuerte) !important;
  }
}
:is(#main-content,#page-container-bfb) .et_pb_toggle_title:focus-visible {
  outline: 3px solid var(--rtf-acento-fuerte);
  outline-offset: 4px;
  border-radius: var(--rtf-radio-s);
}

/* ---------------------------------------------------------------------------
   47 · LOS TITULARES DE SECCIÓN DE LA PORTADA

   Los cinco que sostienen la página —«Cómo leer tu carta», «¿Qué pone en tu
   carta?», «¿Por qué nosotros?», «Soluciones», «Algunas recomendaciones»— no
   compartían nada. Medido antes de tocar: dos de los cinco ni siquiera eran H2
   —uno era un párrafo y otro un H4—, y salían a 36,8, 23,2 y 20 px.

   Ahora son cinco H2 con el mismo tratamiento y una marca común: un filete
   corto de acento encima. No es un adorno nuevo: es el mismo trazo rojo que ya
   encabeza el héroe y que el índice lleva en su costado.
   ------------------------------------------------------------------------ */

/* Divi pone las clases propias en el ENVOLTORIO del módulo, no en el h2, así
   que hay que bajar hasta él. Los dos componentes propios sí la llevan puesta
   en el propio titular. */
:is(#main-content,#page-container-bfb) .rtf-titular-seccion,
:is(#main-content,#page-container-bfb) .rtf-titular-seccion .et_pb_module_header,
:is(#main-content,#page-container-bfb) .rtf-figura__titular {
  font-family: var(--rtf-fuente-display), sans-serif;
  font-size: var(--rtf-tipo-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--rtf-texto);
  margin: 0 0 var(--rtf-espacio-m);
}

:is(#main-content,#page-container-bfb) .rtf-titular-seccion:not(:has(.et_pb_module_header))::before,
:is(#main-content,#page-container-bfb) .rtf-titular-seccion .et_pb_module_header::before,
:is(#main-content,#page-container-bfb) .rtf-figura__titular::before {
  content: "";
  display: block;
  inline-size: 48px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--rtf-acento);
  margin-bottom: var(--rtf-espacio-s);
}

/* El filete crece un poco cuando su sección entra en pantalla. Es el único
   movimiento que se le añade y dura menos que un parpadeo: marca la llegada
   de un apartado nuevo, no pide atención. */
@media (prefers-reduced-motion: no-preference) {
  .rtf-revela :is(.rtf-titular-seccion:not(:has(.et_pb_module_header)), .rtf-titular-seccion .et_pb_module_header, .rtf-figura__titular)::before {
    transform: scaleX(.35);
    transform-origin: left center;
  }
  .rtf-revela.is-visible :is(.rtf-titular-seccion:not(:has(.et_pb_module_header)), .rtf-titular-seccion .et_pb_module_header, .rtf-figura__titular)::before {
    transform: none;
    transition: transform var(--rtf-duracion-media) var(--rtf-curva) 60ms;
  }
}

/* ---------------------------------------------------------------------------
   48 · LA RETÍCULA DEL HÉROE SE DESVANECE POR ARRIBA Y POR ABAJO
   Terminaba en seco: la primera línea horizontal caía justo bajo la cabecera y
   dibujaba una raya de lado a lado. Se pasa la retícula a un pseudoelemento
   —no se puede enmascarar el fondo de la sección sin enmascarar también su
   contenido— y se le pone una máscara que la disuelve en los dos extremos.
   ------------------------------------------------------------------------ */

.home :is(.et-l--post,#page-container-bfb .et-l) .first-view {
  position: relative;
  isolation: isolate;
  background-image: none;
}
.home :is(.et-l--post,#page-container-bfb .et-l) .first-view::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rtf-borde) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rtf-borde) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%);
}
@media print {
  .home :is(.et-l--post,#page-container-bfb .et-l) .first-view::before { display: none; }
}

/* Aquí había un parche que le devolvía a «Soluciones» el tamaño y el margen de
   un titular de sección, porque dos reglas de las tarjetas se lo quitaban. Ya
   no hace falta: esas dos reglas apuntan ahora a las tarjetas de verdad —las
   que llevan botón— y el rótulo no vuelve a caer en su puntería. Un parche
   menos que mantener.  (28/08/2026) */

/* ---------------------------------------------------------------------------
   49 · LA CARTA SE DIBUJA SOLA
   Es lo que había en la maqueta preview/direccion-3.html y lo que el cliente
   echaba de menos. Aquí sí cabe: la figura de la portada se ve UNA VEZ, en la
   primera visita, y es el momento en que se explica de qué va todo esto. Ese
   es exactamente el tramo donde un poco de deleite está justificado —y por eso
   mismo NO se hace en las páginas internas, que se visitan a menudo.

   Los trazos llevan `pathLength="1"`, así que el recorrido de cada uno vale 1
   pase lo que pase con su geometría: no hay que medir longitudes a mano ni
   volver a medirlas si mañana cambia el dibujo.

   Orden: primero la hoja, luego sus renglones, después el importe y al final
   las guías con sus números. Es el orden en que se lee una carta.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {

  .rtf-revela .rtf-figura__dibujo .rtf-traza {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .rtf-revela.is-visible .rtf-figura__dibujo .rtf-traza {
    animation: rtf-trazar 900ms var(--rtf-curva) forwards;
  }
  .rtf-revela.is-visible .rtf-figura__dibujo .rtf-traza--2 { animation-delay: 140ms; }
  .rtf-revela.is-visible .rtf-figura__dibujo .rtf-traza--3 { animation-delay: 260ms; }
  .rtf-revela.is-visible .rtf-figura__dibujo .rtf-traza--4 { animation-delay: 360ms; }

  @keyframes rtf-trazar { to { stroke-dashoffset: 0; } }

  /* El importe y las guías no se trazan: aparecen, que es lo que hace un dato
     cuando lo señalas. */
  .rtf-revela .rtf-figura__dibujo rect,
  .rtf-revela .rtf-figura__guia,
  .rtf-revela .rtf-figura__punto {
    opacity: 0;
  }
  .rtf-revela.is-visible .rtf-figura__dibujo rect {
    animation: rtf-aparece 420ms var(--rtf-curva) 520ms forwards;
  }
  .rtf-revela.is-visible .rtf-figura__guia {
    animation: rtf-aparece 420ms var(--rtf-curva) forwards;
  }
  .rtf-revela.is-visible .rtf-figura__guia:nth-of-type(1) { animation-delay: 620ms; }
  .rtf-revela.is-visible .rtf-figura__guia:nth-of-type(2) { animation-delay: 700ms; }
  .rtf-revela.is-visible .rtf-figura__guia:nth-of-type(3) { animation-delay: 780ms; }
  .rtf-revela.is-visible .rtf-figura__guia:nth-of-type(4) { animation-delay: 860ms; }

  /* Los cuatro puntos del texto, escalonados detrás de sus guías. */
  .rtf-revela.is-visible .rtf-figura__punto {
    animation: rtf-aparece 420ms var(--rtf-curva) forwards;
  }
  .rtf-revela.is-visible .rtf-figura__punto:nth-child(1) { animation-delay: 660ms; }
  .rtf-revela.is-visible .rtf-figura__punto:nth-child(2) { animation-delay: 740ms; }
  .rtf-revela.is-visible .rtf-figura__punto:nth-child(3) { animation-delay: 820ms; }
  .rtf-revela.is-visible .rtf-figura__punto:nth-child(4) { animation-delay: 900ms; }

  @keyframes rtf-aparece { to { opacity: 1; } }
}

/* ---------------------------------------------------------------------------
   50 · EL MOVIMIENTO POR DENTRO DE LAS SECCIONES

   Hasta aquí, cada sección entraba de una pieza: veinte píxeles y opacidad,
   todo a la vez. El cliente lo describió como «muy estático» y tenía razón,
   aunque la palabra exacta sea otra: no es que se mueva poco, es que se mueve
   TODO junto, y un bloque que aparece entero no se percibe como movimiento
   sino como un salto de la página.

   Lo que se añade es el escalonado: dentro de una sección, lo que viene en
   grupo llega uno detrás de otro. Cuatro motivos, dos tarjetas, dos citas,
   cuatro frases del selector. La vista los recorre en el orden en que hay que
   leerlos.

   Los números salen del sistema: 12 px de recorrido (menos que los 20 de la
   sección, porque son un movimiento dentro de otro), 70 ms de escalón y la
   curva y la duración que ya están en los tokens. Solo se anima `transform` y
   `opacity`. Con `prefers-reduced-motion` no se reduce: no existe.
   ------------------------------------------------------------------------ */

/* --- 50.1 · Fuera la animación torcida del carrusel de citas --------------
   Divi tiene su propia animación de diapositiva y aquí quedaba ridícula: como
   las dos citas se muestran a la vez —esto ya no es un carrusel, es una
   rejilla de dos— Divi marcaba solo la primera como «activa», la escondía con
   `opacity:0` y la traía con un `fadeBottom` de casi cuatro segundos. Es decir:
   la cita de la izquierda salía EN BLANCO durante dos segundos mientras la de
   la derecha estaba ya dibujada. Eso es lo que el cliente vio.

   La regla general de esta hoja apaga las animaciones de Divi en secciones,
   filas y módulos; `.et_pb_slide_description` no es ninguna de las tres y se
   escapaba por ahí. */
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 :is(.et_pb_slide, .et_pb_slide_description, .et_pb_slide_image) {
  animation: none !important;
}
body.home :is(#main-content,#page-container-bfb) .et_pb_section_5 .et_pb_slide_description {
  /* Divi la deja a cero esperando a su animación, que ya no llega. */
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {

  /* --- 50.2 · El escalonado -----------------------------------------------
     La clase `rtf-escalona` la pone movimiento.js sobre el CONTENEDOR, no
     sobre cada hijo: el escalón lo decide `:nth-child`, así que añadir una
     tarjeta más mañana no obliga a tocar ni el script ni esta hoja. */
  /* El escalón viaja en una VARIABLE, no en `transition-delay`.
     Primer intento: poner el retardo directamente. No funcionó en las tarjetas
     de «Soluciones» y el motivo es de manual: esas tarjetas tienen su propia
     declaración `transition` para el hover, más específica y más abajo, y una
     declaración abreviada reescribe el retardo a cero aunque no lo nombre. Con
     una variable no hay pelea: la abreviada la LEE, y cada quien pone el suyo. */
  .rtf-escalona { --rtf-escalon: 0ms; }

  .rtf-revela .rtf-escalona > * {
    opacity: 0;
    transform: translateY(12px);
  }
  .rtf-revela.is-visible .rtf-escalona > * {
    opacity: 1;
    transform: none;
    transition: opacity var(--rtf-duracion-media) var(--rtf-curva) var(--rtf-escalon, 0ms),
                transform var(--rtf-duracion-media) var(--rtf-curva) var(--rtf-escalon, 0ms);
  }
  .rtf-escalona > *:nth-child(2)   { --rtf-escalon:  70ms; }
  .rtf-escalona > *:nth-child(3)   { --rtf-escalon: 140ms; }
  .rtf-escalona > *:nth-child(4)   { --rtf-escalon: 210ms; }
  /* Del quinto en adelante no se sigue sumando: media pantalla esperando a que
     entre el último no es ritmo, es lentitud. */
  .rtf-escalona > *:nth-child(n+5) { --rtf-escalon: 260ms; }

  /* --- 50.3 · El filete de sección se dibuja --------------------------------
     Ya crecía, pero de 0,35 a 1: un empujón que no se veía. Ahora arranca
     hecho un punto y se estira hasta los 48 px. Es el gesto que dice «empieza
     un apartado» y es el mismo en los cinco titulares de la portada. */
  .rtf-revela :is(.rtf-titular-seccion:not(:has(.et_pb_module_header)), .rtf-titular-seccion .et_pb_module_header, .rtf-figura__titular)::before {
    transform: scaleX(.08);
  }
}

/* --- 50.4 · Lo que se puede pulsar responde al ratón ----------------------
   No había ni un solo estado de reposo→hover en las tarjetas. Se añade donde
   hay algo que pulsar y en ningún otro sitio: una tarjeta que se levanta sin
   ser pulsable es una promesa falsa.

   Va detrás de `hover: hover` para que no se dispare al tocar en el móvil,
   donde el estado se queda pegado después del toque. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  /* Las dos tarjetas de «Soluciones»: las dos terminan en un botón.
     La lista de propiedades incluye `opacity` y `transform` aunque el hover no
     use la primera: esta misma tarjeta es también uno de los hijos que entran
     escalonados, y una declaración `transition` que no las mencione les quita
     la transición de entrada. Un solo sitio donde se decide cómo se mueve esta
     tarjeta, haga lo que haga. */
  body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_column:has(.et_pb_button_module_wrapper) {
    transition: opacity var(--rtf-duracion-media) var(--rtf-curva) var(--rtf-escalon, 0ms),
                transform var(--rtf-duracion-rapida) var(--rtf-curva) var(--rtf-escalon, 0ms),
                box-shadow var(--rtf-duracion-rapida) var(--rtf-curva),
                border-color var(--rtf-duracion-rapida) var(--rtf-curva);
  }
  body.home :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_column:has(.et_pb_button_module_wrapper):hover {
    transform: translateY(-2px);
    box-shadow: var(--rtf-sombra-2);
    border-color: var(--rtf-borde-fuerte);
  }

  /* Los botones ya cambiaban de color; ahora también se levantan un píxel.
     Uno, no tres: es un acuse de recibo, no un salto. */
  :is(#main-content,#page-container-bfb) .et_pb_button,
  .rtf-cta__principal,
  .rtf-enviar .wpcf7-submit,
  .rtf-enviar input[type="submit"] {
    transition: background-color var(--rtf-duracion-rapida) var(--rtf-curva),
                border-color var(--rtf-duracion-rapida) var(--rtf-curva),
                transform var(--rtf-duracion-rapida) var(--rtf-curva);
  }
  :is(#main-content,#page-container-bfb) .et_pb_button:hover,
  .rtf-cta__principal:hover,
  .rtf-enviar .wpcf7-submit:hover,
  .rtf-enviar input[type="submit"]:hover {
    transform: translateY(-1px);
  }
  /* Al pulsar vuelve a su sitio: el botón acusa el clic. */
  :is(#main-content,#page-container-bfb) .et_pb_button:active,
  .rtf-cta__principal:active,
  .rtf-enviar .wpcf7-submit:active,
  .rtf-enviar input[type="submit"]:active {
    transform: none;
  }

  /* Las fichas del selector de carta ya tenían sombra al pasar por encima.
     Se les añade el mismo píxel para que el sitio entero responda igual. */
  .rtf-selector__enlace {
    transition: transform var(--rtf-duracion-rapida) var(--rtf-curva),
                box-shadow var(--rtf-duracion-rapida) var(--rtf-curva),
                border-color var(--rtf-duracion-rapida) var(--rtf-curva);
  }
  .rtf-selector__enlace:hover { transform: translateY(-2px); }
}

/* ---------------------------------------------------------------------------
   51 · UN SOLO CARRIL EN EL MÓVIL

   Medido a 390 px, el contenido de la portada empezaba en SIETE sitios
   distintos: 16, 32, 34, 55, 57, 68 y 82 px del borde. En el escritorio no se
   nota, porque las filas van centradas dentro de 1.200 px y todas acaban
   cayendo en el mismo sitio; en el móvil, que es donde de verdad se lee este
   sitio, cada apartado arrancaba con una sangría diferente.

   Vienen de tres sitios y ninguno es del contenido:
     · Divi da a las secciones «de bloque» un relleno lateral en PORCENTAJE,
       que a 390 px sale 21,47 px en una y 17,89 px en otra;
     · dos filas arrastran un `width: 80 %` de la maqueta antigua, que a este
       ancho se come 66 px;
     · y una regla mía de «Soluciones» les quitaba el relleno a las filas de esa
       sección, dejándola pegada al borde.

   Se impone un carril único: relleno lateral cero en la sección y 16 px en la
   fila, que sumados a los 16 px del contenedor dan los 32 px en los que ya
   estaba la mayoría. Solo por debajo de 980 px: en el escritorio no hay nada
   que arreglar.
   ------------------------------------------------------------------------ */

@media (max-width: 980px) {
  body.home :is(#main-content,#page-container-bfb) .et_pb_section {
    padding-inline: 0 !important;
  }
  body.home :is(#main-content,#page-container-bfb) .et_pb_section > .et_pb_row {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   52 · LAS PÁGINAS INTERIORES, CON EL MISMO SISTEMA QUE LA PORTADA

   Revisadas una a una con el navegador. Lo que se encontró y lo que se hace:

     · Ningún titular de sección de las interiores llevaba la marca de la
       portada. Dieciocho páginas con el mismo tipo y el mismo cuerpo, pero sin
       el filete que dice «aquí empieza un apartado».
     · El cuerpo de TODA tarjeta del sitio —las respuestas de las FAQs
       incluidas— salía a 14 px. En las FAQs eso es la sustancia de la página, y
       la pregunta iba a 36,8: dos veces y media más grande que su respuesta.
     · En /reclamar-refacturacion-electrica/, ONCE listas se veían como párrafos
       sueltos: sin viñeta y sin sangría. Son listas de verdad en el marcado; lo
       que fallaba era el alcance de la regla.

   Nada de esto es un rediseño: es el sistema que ya existe en la portada,
   llegando adonde no llegaba.
   ------------------------------------------------------------------------ */

/* --- 52.1 · La marca de sección, también aquí -----------------------------
   Se apunta a los H2 que son titulares de apartado: los que cuelgan
   directamente del cuerpo de un módulo de texto o de un módulo de encabezado.
   Quedan fuera por construcción los que viven dentro de una tarjeta
   —`.et_pb_blurb_container`, que es donde están las 27 preguntas de las FAQs—
   y, por el `:not`, los componentes propios, que ya reciben este mismo trato
   en el bloque 47 y no deben recibirlo dos veces. */
:is(#main-content,#page-container-bfb) :is(.et_pb_text_inner, .et_pb_heading_container) > h2:not([class*="rtf-"]) {
  font-family: var(--rtf-fuente-display), sans-serif;
  font-size: var(--rtf-tipo-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--rtf-texto);
  margin: 0 0 var(--rtf-espacio-m);
}
:is(#main-content,#page-container-bfb) :is(.et_pb_text_inner, .et_pb_heading_container) > h2:not([class*="rtf-"])::before {
  content: "";
  display: block;
  inline-size: 48px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--rtf-acento);
  margin-bottom: var(--rtf-espacio-s);
}

/* Cuando dos apartados se suceden dentro del mismo módulo de texto, el segundo
   necesita aire por arriba o el filete parece pegado al párrafo anterior. */
:is(#main-content,#page-container-bfb) .et_pb_text_inner > * + h2:not([class*="rtf-"]) {
  margin-top: var(--rtf-espacio-2xl);
}

/* Y el filete se dibuja al entrar la sección, igual que en la portada. */
@media (prefers-reduced-motion: no-preference) {
  .rtf-revela :is(.et_pb_text_inner, .et_pb_heading_container) > h2:not([class*="rtf-"])::before {
    transform: scaleX(.08);
    transform-origin: left center;
  }
  .rtf-revela.is-visible :is(.et_pb_text_inner, .et_pb_heading_container) > h2:not([class*="rtf-"])::before {
    transform: none;
    transition: transform var(--rtf-duracion-media) var(--rtf-curva) 60ms;
  }
}

/* --- 52.2 · El cuerpo de las tarjetas, a tamaño de lectura ----------------
   14 px es un pie de foto, no un cuerpo de texto. Y el cuerpo de estas
   tarjetas es, en varias páginas, TODO lo que la persona ha venido a leer.
   La escena de uso que manda aquí es alguien de más de 45 años leyendo de
   noche en el móvil: 14 px no es una elección tipográfica, es una barrera. */
:is(#main-content,#page-container-bfb) .et_pb_blurb_description {
  font-size: 1rem;
  line-height: var(--rtf-interlineado-cuerpo);
  color: var(--rtf-texto-suave);
}
:is(#main-content,#page-container-bfb) .et_pb_blurb_description > p {
  margin: 0 0 var(--rtf-espacio-s);
}
:is(#main-content,#page-container-bfb) .et_pb_blurb_description > p:last-child { margin-bottom: 0; }

/* --- 52.3 · Las listas de dentro de las tarjetas --------------------------
   Aquí había una copia de las reglas de listas del bloque 3. Se ha retirado:
   lo que se ha hecho es AMPLIAR allí el alcance a las tres cajas donde vive la
   prosa en este sitio —`.et_pb_text_inner`, `.et_pb_blurb_description` y
   `.et_pb_toggle_content`—, en vez de mantener el mismo trato escrito dos
   veces en dos sitios que mañana se separan. */

/* --- 52.4 · Las FAQs: la pregunta y la respuesta, en proporción -----------
   27 preguntas a 36,8 px con su respuesta a 14. La pregunta es la etiqueta;
   la respuesta es lo que resuelve la duda. Se invierte el peso: la pregunta al
   escalón de un h3 —sigue siendo un H2 en el marcado, que es lo que le importa
   a un buscador— y la respuesta al cuerpo del sitio.

   Y un filete entre pares: veintisiete preguntas seguidas sin separación son
   una pared. */
:is(#main-content,#page-container-bfb) .et_pb_blurb h2.et_pb_module_header {
  font-size: var(--rtf-tipo-h3);
  line-height: 1.25;
  margin-bottom: var(--rtf-espacio-xs);
}
:is(#main-content,#page-container-bfb) .et_pb_column > .et_pb_blurb:has(h2.et_pb_module_header) {
  padding-bottom: var(--rtf-espacio-m);
  border-bottom: 1px solid var(--rtf-borde);
  margin-bottom: var(--rtf-espacio-m);
}
:is(#main-content,#page-container-bfb) .et_pb_column > .et_pb_blurb:has(h2.et_pb_module_header):last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

/* --- 52.5 · El icono de la tarjeta, arriba y no al costado ----------------
   En las interiores el glifo se quedaba en un carril de 32 px a la izquierda,
   a la altura de la primera línea de un texto de 400 px de alto: leído desde
   fuera parece una raya suelta, no un icono. Se pone encima del rótulo, que es
   como están las cuatro tarjetas de la portada. Un solo vocabulario. */
:is(#main-content,#page-container-bfb) .et_pb_blurb:not(.et_pb_blurb_position_top) .et_pb_blurb_content {
  display: block;
}
:is(#main-content,#page-container-bfb) .et_pb_blurb .et_pb_main_blurb_image {
  display: block;
  inline-size: auto;
  margin: 0 0 var(--rtf-espacio-s);
}
:is(#main-content,#page-container-bfb) .et_pb_blurb .et_pb_main_blurb_image .et-pb-icon {
  display: grid;
  place-content: center;
  inline-size: 40px;
  block-size: 40px;
  font-size: 20px;
  color: var(--rtf-acento);
  background: var(--rtf-superficie);
  border: 1px solid var(--rtf-borde);
  border-radius: 50%;
}

/* --- 52.6 · El apartado que se partía en dos columnas ---------------------
   En /reclamar-refacturacion-electrica/ hay dos apartados montados como
   «titular e introducción en una columna estrecha, tarjetas en la otra».
   Los otros tres de la misma página ponen el titular a todo lo ancho y las
   tarjetas debajo. Resultado de la mezcla: 500 px y 193 px de blanco muerto
   bajo la columna corta, medidos.

   Se unifican con los otros tres: el titular arriba, a todo lo ancho, y las
   tarjetas debajo repartidas. No es un diseño nuevo — es el que ya usa esa
   misma página tres veces. */
@media (min-width: 981px) {
  :is(#main-content,#page-container-bfb) .et_pb_row:has(> .et_pb_column:first-child > .et_pb_heading):has(> .et_pb_column:nth-child(2) > .et_pb_blurb):not(:has(> .et_pb_column:nth-child(3))) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--rtf-espacio-xl);
  }
  :is(#main-content,#page-container-bfb) .et_pb_row:has(> .et_pb_column:first-child > .et_pb_heading):has(> .et_pb_column:nth-child(2) > .et_pb_blurb):not(:has(> .et_pb_column:nth-child(3))) > .et_pb_column {
    inline-size: 100% !important;
    max-inline-size: none !important;
    margin: 0 !important;
  }
  /* Las tarjetas, en dos carriles: a todo lo ancho la línea se iría a 1.200 px
     y eso no se lee. */
  :is(#main-content,#page-container-bfb) .et_pb_row:has(> .et_pb_column:first-child > .et_pb_heading):has(> .et_pb_column:nth-child(2) > .et_pb_blurb):not(:has(> .et_pb_column:nth-child(3))) > .et_pb_column:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rtf-espacio-xl);
    align-items: start;
  }
}

/* --- 52.7 · La marca de la tarjeta: un número, no una raya ----------------
   En las interiores, las doce tarjetas de una página llevaban EL MISMO glifo
   —un guion dentro de un círculo— repetido doce veces. Un icono que se repite
   idéntico no informa de nada: ocupa el sitio del que sí informaría.

   En su lugar va el número de la tarjeta dentro de su grupo, en la misma
   monoespaciada y el mismo acento con que el índice numera sus apartados y la
   figura de la portada numera sus llamadas. Aquí el número sí dice algo:
   cuántas cosas hay y por cuál vas.

   La portada queda fuera: allí cada tarjeta lleva su propio dibujo, que sí
   distingue una de otra. */
body:not(.home) :is(#main-content,#page-container-bfb) .et_pb_row { counter-reset: rtf-tarjeta; }
body:not(.home) :is(#main-content,#page-container-bfb) .et_pb_blurb .et-pb-icon {
  counter-increment: rtf-tarjeta;
  font-size: 0 !important;
}
body:not(.home) :is(#main-content,#page-container-bfb) .et_pb_blurb .et-pb-icon::after {
  content: counter(rtf-tarjeta, decimal-leading-zero);
  font-family: var(--rtf-fuente-datos), monospace;
  font-size: var(--rtf-tipo-pie);
  font-weight: 500;
  color: var(--rtf-acento);
}

/* --- 52.8 · Aire entre el apartado y sus tarjetas -------------------------
   El titular y su párrafo de entrada van en una fila, y las tarjetas en la
   siguiente. Entre las dos había el margen que Divi da por defecto, y el
   párrafo acababa pegado a la primera tarjeta: se leían como una sola cosa.
   La entrada presenta las tarjetas, no forma parte de ellas. */
:is(#main-content,#page-container-bfb) .et_pb_section > .et_pb_row + .et_pb_row {
  margin-top: var(--rtf-espacio-xl);
}

/* --- 52.9 · El botón de las FAQs ya se quedaba pegado ---------------------
   Aquí escribí una regla `position: sticky` para que el botón de la columna
   izquierda acompañara la lectura de las 27 preguntas. Sobraba, y además
   estorbaba: **ese módulo ya tiene la fijación configurada en el propio Divi**,
   que en cuanto se hace scroll le escribe `position: fixed !important` en línea.
   Con las dos cosas puestas, en reposo mandaba la mía y al desplazarse la suya:
   dos sistemas peleando por el mismo elemento.

   Comprobado a 2.648 px de scroll: Divi lo deja en `fixed; left: 112,5px;
   top: 84px`. Funciona solo. Regla retirada. */

/* ---------------------------------------------------------------------------
   53 · UN SOLO BOTÓN

   Inventariados los botones de ocho páginas: CINCO variantes distintas para la
   misma acción.

     · fantasma (fondo transparente, filete de acento), radio 0, relleno 16/32
     · relleno de acento, radio 0, relleno 16/32
     · **fondo negro** con filete de acento, radio 0        ← /faqs/
     · acento, radio 6, relleno 12/32, letra #f3f1f2
     · acento, radio 6, relleno 12/32, letra #ffffff

   Dos radios, dos rellenos, tres fondos y dos blancos casi iguales para el
   único botón que le importa a este sitio. Vienen de presets de Divi y de
   ajustes escritos módulo a módulo, y le ganaban a la regla del bloque 5 por
   especificidad: Divi emite `body #page-container .et_pb_section .preset--…`,
   que son un id, dos clases y un elemento.

   Se fija una sola escala. El selector lleva DOS ids —el de Divi y el del
   ancla de página— porque es lo que hace falta para ganarle; con uno no basta,
   y esto ya está comprobado en el bloque 47 con el grosor del filete.

   Se conserva a propósito UNA variante secundaria: los dos «Más info» de
   «Soluciones» en la portada. Están uno al lado del otro dentro de sus
   tarjetas y no son la acción principal de esa pantalla —lo es el formulario
   del héroe—: dos botones rojos ahí compiten con él. Misma geometría, distinto
   peso.
   ------------------------------------------------------------------------ */

body.et-db #et-boc :is(#main-content,#page-container-bfb) .et_pb_button,
.rtf-cta__principal,
.rtf-enviar .wpcf7-submit,
.rtf-enviar input[type="submit"] {
  border-radius: var(--rtf-radio-m);
  /* El relleno vertical NO se toca desde aquí: Divi lo emite con !important y
     esta declaración no llegaría a aplicarse. Comprobado. Da igual, porque ya
     es el mismo en todos: 16/32. */
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* El primario: relleno de acento.
   Nota de lo que NO se puede arreglar desde la hoja: el color de LETRA de tres
   botones lo escribe Divi con `!important` desde un ajuste guardado módulo a
   módulo (#f3f1f2 en vez de #ffffff). Contra `!important` no gana ninguna
   especificidad. La diferencia es invisible sobre rojo —los dos pasan AA de
   sobra— así que no se entra en una guerra de `!important` por eso: se anota y
   se arregla el día que se limpien esos ajustes en el dato. El fondo negro de
   /faqs/, que sí se veía, no llevaba `!important` y ya está corregido. */
body.et-db #et-boc :is(#main-content,#page-container-bfb) .et_pb_button {
  background-color: var(--rtf-acento);
  border-color: var(--rtf-acento);
  color: var(--rtf-superficie-alta);
}
body.et-db #et-boc :is(#main-content,#page-container-bfb) .et_pb_button:hover {
  background-color: var(--rtf-acento-fuerte);
  border-color: var(--rtf-acento-fuerte);
  color: var(--rtf-superficie-alta);
}

/* El secundario: los dos de «Soluciones». */
body.et-db.home #et-boc :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_button {
  background-color: transparent;
  border-color: var(--rtf-acento);
  color: var(--rtf-texto);
}
body.et-db.home #et-boc :is(#main-content,#page-container-bfb) .et_pb_section_4 .et_pb_button:hover {
  background-color: var(--rtf-acento);
  border-color: var(--rtf-acento);
  color: var(--rtf-superficie-alta);
}

/* ---------------------------------------------------------------------------
   54 · EL CARRIL, TAMBIÉN EN ESCRITORIO

   El bloque 51 puso un carril único por debajo de 980 px. Faltaba arriba: las
   páginas «de artículo» —cómo reclamamos, cuánto cuesta, fraude eléctrico,
   multa por enganche, cortes de luz— llevan 24 px de relleno lateral en sus
   secciones, y las demás no. Resultado: el mismo titular de apartado empieza
   en x = 113 en unas páginas y en x = 137 en otras. Dentro de cada página se
   ve bien; al navegar de una a otra, todo el texto da un salto de 24 px.

   El carril horizontal lo pone la FILA, que es la que se ciñe a 1.200 px y va
   centrada. La sección no tiene que opinar. Comprobado antes de tocar: ninguna
   sección con relleno lateral tiene fondo propio, así que no hay ninguna banda
   que dependa de él.
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .et_pb_section { padding-inline: 0 !important; }

/* ---------------------------------------------------------------------------
   55 · LAS FASES DE «CÓMO RECLAMAMOS» ENTRAN EN LA FAMILIA

   Esa página divide el proceso en tres fases —Revisar, Reclamar, Escalar— y
   cada una agrupa varios pasos. O sea: hay DOS niveles de división, y eso está
   bien; lo que no estaba bien es que cada nivel hablara un idioma distinto.
   La fase se marcaba con un filete oscuro a todo lo ancho, sin relación
   ninguna con el filete rojo de 48 px que marca un apartado en el resto del
   sitio.

   Se le pone el mismo distintivo rojo y se le deja además su línea a todo lo
   ancho. Así se lee lo que es: «empieza una parte» —el rojo, igual que en
   todas partes— «y esta es de las grandes» —la línea—.
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .rtf-fase::before {
  content: "";
  display: block;
  inline-size: 48px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--rtf-acento);
  /* ENCIMA del título, no debajo. Debajo se lee como un separador entre el
     título y su entradilla; encima se lee como lo que es y como está en el
     resto del sitio: la señal de que empieza algo. */
  margin-block: var(--rtf-espacio-xs) var(--rtf-espacio-s);
}
@media (prefers-reduced-motion: no-preference) {
  .rtf-revela :is(#main-content,#page-container-bfb) .rtf-fase::before,
  .rtf-revela .rtf-fase::before {
    transform: scaleX(.08);
    transform-origin: left center;
  }
  .rtf-revela.is-visible :is(#main-content,#page-container-bfb) .rtf-fase::before,
  .rtf-revela.is-visible .rtf-fase::before {
    transform: none;
    transition: transform var(--rtf-duracion-media) var(--rtf-curva) 60ms;
  }
}

/* ---------------------------------------------------------------------------
   56 · LA ENTRADILLA DEL HÉROE

   El titular del héroe pasa a llevar debajo una entradilla que hace dos
   trabajos: nombra los cuatro papeles con los que llega la gente —
   refacturación, carta de anomalía, expediente de fraude, multa por enganche—
   y dice por qué muchas de esas reclamaciones no se sostienen.

   La clase `.rtf-entradilla` ya existe y trae el tamaño y el color; lo único
   que le falta aquí es aire por arriba, porque en el héroe cuelga directamente
   de un H1 que no tiene margen inferior. Sin esto quedaba pegada a la última
   línea del titular.
   ------------------------------------------------------------------------ */

:is(#main-content,#page-container-bfb) .first-view h1 + .rtf-entradilla,
:is(#main-content,#page-container-bfb) .rtf-hero-articulo h1 + .rtf-entradilla {
  margin-top: var(--rtf-espacio-m);
  /* Más corta que la medida de lectura general: en el héroe compite con el
     formulario y tiene que leerse de una sola pasada. */
  max-width: 46ch;
}