/* CFBC Design System v1 — B1E. Tokens PROVISIONALES (~) hasta P-09/P-17: el gate solo cambia estas variables. */
/* 🔴 [FRONTEND-UI-02 · V3] TODA LA ESCALA PÚBLICA EN px. NO QUEDA UN SOLO font-size EN rem.
   `rem` se resuelve contra `html` —no contra `body`, no contra `.cfbc-scope`—, y este tema tiene la
   raíz en 10px. Con eso la hoja entera se encogía: controles a 10px, leyendas a 8,125px, el h3 a
   11,25px. La V2 arregló cinco controles y dejó el resto; el defecto no era de esos cinco, era de
   la UNIDAD, y por tanto de la hoja completa.
   `.cfbc-scope{font-size:16px}` fija la base del ámbito para todo lo que hereda (párrafos, celdas,
   opciones, textos sin regla propia), y los tamaños explícitos se convierten a px sobre base 16
   conservando la escala pretendida: .8125rem→13, .875rem→14, .9375rem→15, 1rem→16, 1.0625rem→17,
   1.125rem→18, 1.375rem→22, y los clamp de h1/h2 a 28–40 y 22–28.
   Fijar la base del ámbito NO habría bastado por sí solo: cada `rem` explícito habría seguido
   mirando a `html`. Hacían falta las dos cosas, y ese fue el error de razonamiento de la V2. */
/* 🔴 [0.4.0-mb1.8] LOS COLORES YA NO SE DECLARAN AQUÍ. Vienen de `cfbc-tokens.css`, que es el
 * único archivo del sistema que declara un color de marca.
 *
 * Estaban acotados a `.cfbc-scope`, que es buen diseño —no contaminan el resto del sitio— pero
 * también significaba que este archivo tenía su PROPIA copia de la paleta: siete ficheros la
 * declaraban y ya habían empezado a separarse. Aquí `--csl-verde` valía `#0E3B2E` y en el Portal
 * el mismo verde de marca valía `#14452F`. Al quitar la declaración local, el scope hereda los
 * alias de `:root` y los dos pasan a ser el mismo `--cafati-verde`, que es el de la lámina.
 *
 * El scope se conserva vacío a propósito: existe para acotar el resto de reglas de este archivo,
 * y borrarlo sería un cambio de estructura escondido dentro de un cambio de color. */
.cfbc-scope{
box-sizing:border-box;max-width:1080px;margin:0 auto;padding:0 20px;color:var(--csl-tinta);font-size:16px;line-height:1.55}
.cfbc-scope *,.cfbc-scope *:before,.cfbc-scope *:after{box-sizing:inherit}
/* 🔴 [0.4.0-mb1.9 · H-12] SANEADO ACOTADO, igual que en el Portal y por lo mismo.
   La página «Estado de tu reserva» pasó a la plantilla «Landing Page» del tema, así que ya no lleva
   cabecera comercial — y con eso quedó a la vista que esta hoja tampoco estilaba los ELEMENTOS,
   solo sus clases. Listas con viñetas y tablas con los bordes del tema dentro de una pantalla que
   quiere ser aplicación. Acotado a `.cfbc-scope`: un reset global desde un plugin le rompería el
   sitio al tema, que es peor daño que unas bolitas. */
.cfbc-scope ul,.cfbc-scope ol{list-style:none;margin:0;padding:0}
.cfbc-scope li{margin:0;padding:0}
.cfbc-scope li::marker{content:""}
.cfbc-scope table{width:100%;border-collapse:collapse;margin:0 0 12px;background:#fff}
.cfbc-scope th,.cfbc-scope td{padding:8px 10px;border:1px solid var(--csl-gris-2);text-align:left;vertical-align:top;font-variant-numeric:tabular-nums lining-nums}
.cfbc-scope th{background:var(--csl-crema);font-weight:650;font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--csl-gris-1)}
.cfbc-scope hr{border:0;border-top:1px solid var(--csl-gris-2);margin:16px 0}
.cfbc-scope img{max-width:100%;height:auto}

/* ══ FORMATO · EL MARGEN PREDEFINIDO DE TODA CAJA [mb1.917] ══
   Dirección: «tienes que agregar un margen predefinido en el formato». Toda caja con marco lleva
   la clase `cfbc-caja` y hereda ESTE relleno; la regla de la página solo pone la piel (fondo,
   borde, sombra). (0,2,0) a propósito: `.cfbc-scope li{padding:0}` de arriba es (0,1,1) y se comía
   el relleno de las tarjetas hechas con <li> —los textos pegados al borde que vio Dirección—.
   Regla del formato: TODA regla sobre un <li>, <ul>, <ol> o <img> lleva `.cfbc-scope` delante. */
.cfbc-scope .cfbc-caja{padding:var(--cafati-e-3) var(--cafati-e-4)}
.cfbc-scope .cfbc-caja--amplia{padding:var(--cafati-e-4)}
.cfbc-scope p{max-width:68ch}
/* 🔴 [mb1.441] LA MEDIDA DE LECTURA ES PARA PROSA. Estos tres `<p>` envuelven CONTROLES, no
   texto: la regla de arriba les recortaba el ancho a 586,5px y quedaban 17px mas cortos que
   el resto de su columna — mas cuanto mas ancha fuera, porque el tope es absoluto. Se nombra
   cada uno: una exencion generica (`p:not([class])`) le quitaria la medida a la prosa que SI
   lleva clase, que es la mitad del pie. ⏳ Lo correcto de verdad es que no sean `<p>`. */
/* [mb1.763] La barra dejo de ser un <p> —no podia contener los <p> de los campos— asi que el
   selector se ata a su CLASE. Los otros dos siguen siendo parrafos y conservan el suyo. */
.cfbc-scope p.cfbc-rv__campo,
.cfbc-scope .cfbc-rv__seguir,
.cfbc-scope p.cfbc-pie__botones{max-width:none}
.csl-sec{padding:48px 0}
.csl-sec h1{font-size:clamp(28px,5vw,40px);line-height:1.15;font-weight:700;margin:0 0 12px}
/* [0.4.0-mb1.12] Misma regla que en el Portal: el ambito publico tambien vive dentro del tema,
   y sus titulares tambien los pintaba el tema. Se cubren h1..h4, no solo el h2 que hoy se usa:
   el defecto no es de este titular, es de todos los que el tema alcance. */
.cfbc-scope h1,.cfbc-scope h2,.cfbc-scope h3,.cfbc-scope h4{font-family:var(--cafati-fuente)}
.csl-sec h2,.cfbc-scope h2{font-size:clamp(22px,4vw,28px);line-height:1.2;font-weight:700;margin:0 0 16px}
.cfbc-scope h3{font-size:18px;line-height:1.3;font-weight:600;margin:0}
.cfbc-scope .csl-caption{font-size:13px;color:var(--csl-gris-1)}
.cfbc-scope a{color:var(--csl-verde)}
.cfbc-scope :focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--csl-verde);border-radius:12px}
.cfbc-scope .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Botones */
.csl-btn,.csl-cta-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 24px;border-radius:12px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:16px}
.csl-btn,.csl-cta-wa{background:var(--csl-verde);color:#fff}
.csl-btn:hover,.csl-cta-wa:hover{background:var(--csl-verde-2)}
.csl-btn:active,.csl-cta-wa:active{transform:scale(.98)}
.csl-btn-sec{background:var(--csl-blanco);color:var(--csl-verde);border:1.5px solid var(--csl-verde)}
/* 🔴 [FRONTEND-UI-01 · runtime RC3.2] CTA LEGIBLE: EL PROBLEMA ERA ESPECIFICIDAD, NO CONTRASTE.
   El par de la marca ya cumple de sobra: #0E3B2E sobre #FFFFFF da 12,4:1, muy por encima del 4,5:1
   de WCAG AA. Lo que ocurría es que `.csl-cta-wa{color:#fff}` es UN selector de clase (0,1,0) y
   cualquier tema con una regla como `.entry-content a{color:#0E3B2E}` (0,1,1) la gana: el enlace
   tomaba el verde del tema y quedaba verde sobre verde — literalmente invisible, que es lo que vio
   el agente. Bajar el contraste no habría arreglado nada porque el contraste nunca fue el problema.
   Se sube la especificidad DENTRO del ámbito del plugin (`.cfbc-scope a.csl-cta-wa` = 0,2,1) en vez
   de usar `!important`: esta hoja tiene UNO solo —el `transition:none` de `prefers-reduced-motion`—
   y RC3.3 no añade ninguno. El banco lo compara contra el recuento de RC3.2, no contra un número
   cableado. Y no se toca ninguna regla global del tema. */
.cfbc-scope a.csl-cta-wa,.cfbc-scope a.csl-cta-wa:link,.cfbc-scope a.csl-cta-wa:visited,
.cfbc-scope button.csl-btn,.cfbc-scope a.csl-btn,.cfbc-scope a.csl-btn:link,.cfbc-scope a.csl-btn:visited{color:#fff;text-decoration:none}
.cfbc-scope a.csl-cta-wa:hover,.cfbc-scope a.csl-cta-wa:focus,.cfbc-scope a.csl-cta-wa:active,
.cfbc-scope a.csl-btn:hover,.cfbc-scope a.csl-btn:focus,.cfbc-scope a.csl-btn:active,
.cfbc-scope button.csl-btn:hover,.cfbc-scope button.csl-btn:focus{color:#fff;text-decoration:none}
/* 🔴 [0.4.0-mb1.34] LOS COMPONENTES-ENLACE DEL CICLO 0.4.0, QUE NACIERON SIN ESTA PROTECCIÓN.
 *
 * Los tres de abajo son `<a>` con fondo propio, escritos meses después del comentario de arriba y
 * sin seguirlo. `.cfbc-c__cta` ya estaba INVISIBLE en producción; los otros dos son la misma bomba
 * sin detonar: `.cfbc-t__chip` hoy se pinta como `<span>` porque las horas aún no llevan enlace, y
 * el día que sean pulsables desaparecen. `.cfbc-s__cta` solo aparece cuando la ficha de servicio
 * recibe destino.
 *
 * Se arreglan aquí y no junto a cada componente A PROPÓSITO: es una sola convención, y tenerla en
 * un sitio hace evidente qué se está protegiendo. Cada línea nueva de esta lista es un botón que
 * alguien podría haber dejado invisible.
 *
 * ⚠️ [mb1.562] `.cfbc-t__perfil` SALIÓ DE ESTA LISTA. Estaba aquí porque `.cfbc-scope a` le torcía
 * el color; desde mb1.562 no es un enlace de texto sino un riel con su propio ámbito y su propia
 * regla de color, así que mantenerla aquí sería una segunda opinión sobre el mismo píxel. */
.cfbc-scope a.cfbc-s__cta,.cfbc-scope a.cfbc-s__cta:link,.cfbc-scope a.cfbc-s__cta:visited,
.cfbc-scope a.cfbc-t__chip,.cfbc-scope a.cfbc-t__chip:link,
.cfbc-scope a.cfbc-t__chip:visited{color:var(--cafati-papel);text-decoration:none}

/* 🔴 [0.4.0-mb1.9] QUEDA UNA EXCEPCIÓN DE LAS DOS, Y LA OTRA SE FUE CON SU FONDO.
 *
 * Decía «el botón secundario y el del buscador van sobre fondo claro y su texto es oscuro». Era
 * cierto: los dos usaban `--csl-coral` de fondo. Al unificar la paleta mapeé coral a
 * `--cafati-problema` porque los dos eran rojizos — y convertí el botón «Ver estado» del tutor en
 * un botón ROJO de alarma. Coral nunca significó error: era el acento del CTA.
 *
 * La lámina lo zanja en su fila de botones: **«Primario» es verde relleno**. Así que el buscador y
 * el héroe pasan a verde, y su texto tiene que pasar a blanco EN LA MISMA EDICIÓN — si no, esta
 * regla (0,3,0) le clava texto oscuro sobre verde oscuro y reaparece el defecto de invisibilidad
 * que este archivo ya documenta cuatro comentarios más abajo. Es literalmente la lección de
 * FRONTEND-UI-01B: una excepción de color vive pegada a su fondo, o se separa de él.
 *
 * El botón secundario sí conserva la suya: sigue teniendo fondo blanco. */
.cfbc-scope .csl-btn-sec,.cfbc-scope a.csl-btn-sec:link,.cfbc-scope a.csl-btn-sec:visited,
.cfbc-scope a.csl-btn-sec:hover,.cfbc-scope a.csl-btn-sec:focus{color:var(--csl-verde)}
.cfbc-scope .csl-search .csl-btn,.cfbc-scope .csl-search .csl-btn:hover,
.cfbc-scope .csl-search .csl-btn:focus{color:var(--cafati-verde)}
/* 🔴 [FRONTEND-UI-01B · runtime RC3.3] LAS VARIANTES SIN FONDO PROPIO, DESPUÉS DE LA REGLA GENÉRICA.
   Regresión introducida por la corrección de RC3.3, y conviene decirlo así de claro. Aquella subió el
   color del CTA a `.cfbc-scope a.csl-cta-wa` (0,2,1) para ganarle al tema. Pero `.csl-hold-alt` —el
   enlace secundario «o coordina directo por WhatsApp» del holdbox— es un CTA **sin fondo propio**:
   `background:transparent` sobre el crema de la caja, con texto verde a propósito. Su regla tenía
   especificidad 0,1,0, así que la mía la aplastó y le puso `color:#fff`.

   Blanco sobre `--csl-crema` (#FAF6EF) da **1,08:1**. El enlace existía, ocupaba su sitio y era
   invisible. Con verde sobre el mismo crema da **11,58:1**.

   La lección, que es la del ciclo entero: **una regla genérica que sube especificidad tiene que
   enumerar sus excepciones en el mismo sitio**, o se las lleva por delante. Aquí se declaran DESPUÉS
   y con una clase más (0,3,1), incluyendo `:link` y `:visited`, que es donde los temas pisan.

   `.csl-btn-sec` recibe el mismo trato aunque hoy no se use en el marcado: su regla de la línea 38 es
   0,2,0 y perdería contra la genérica de botones (0,2,1) en cuanto alguien la ponga en un `<a>`. Un
   defecto latente idéntico cuesta menos cerrarlo ahora que descubrirlo en el siguiente runtime. */
/* 🔴 [mb1.550] Estas reglas lo dejaban como texto subrayado junto a un botón de 48px: dos
 * piezas del mismo rango con formas que no se corresponden. Se RETIRAN —no se compite con
 * ellas— y la forma nueva vive junto al botón principal, más abajo. */
/* 🔴 [mb1.550] EL COLOR VA CON ÁMBITO O SE PIERDE. Al retirar el subrayado me llevé también el
 * color, y `.cfbc-scope a.csl-cta-wa` (0,2,1) volvió a imponer BLANCO: blanco sobre el papel
 * de la propia pieza da contraste 1,00 — un botón invisible, el defecto que este proyecto ya
 * pagó dos veces. Lo cazó el banco antes de llegar a producción. */
.cfbc-scope a.csl-cta-wa.csl-hold-alt,.cfbc-scope a.csl-cta-wa.csl-hold-alt:link,
.cfbc-scope a.csl-cta-wa.csl-hold-alt:visited,.cfbc-scope a.csl-cta-wa.csl-hold-alt:hover,
.cfbc-scope a.csl-cta-wa.csl-hold-alt:focus{color:var(--cafati-verde);text-decoration:none}
.cfbc-scope a.csl-btn.csl-btn-sec,.cfbc-scope a.csl-btn.csl-btn-sec:link,
.cfbc-scope a.csl-btn.csl-btn-sec:visited,.cfbc-scope a.csl-btn.csl-btn-sec:hover,
.cfbc-scope a.csl-btn.csl-btn-sec:focus,.cfbc-scope button.csl-btn.csl-btn-sec{
	background:var(--csl-blanco);color:var(--csl-verde)}
/* Foco visible en los dos, y con separación para que se vea sobre el propio fondo verde. */
.cfbc-scope a.csl-cta-wa:focus-visible,.cfbc-scope .csl-btn:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
/* Deshabilitado y cargando: el texto SIGUE siendo legible. Un CTA atenuado hasta desaparecer es el
   mismo defecto con otro nombre, así que se baja la opacidad del conjunto y no el color del texto. */
.cfbc-scope .csl-btn:disabled,.cfbc-scope .csl-btn[aria-disabled="true"],
.cfbc-scope a.csl-cta-wa[aria-disabled="true"]{opacity:.72;cursor:not-allowed;transform:none}
.cfbc-scope .csl-btn[data-loading="1"],.cfbc-scope a.csl-cta-wa[data-loading="1"]{opacity:.85;cursor:progress}
/* 320–480 px: el CTA no se sale ni parte la etiqueta a la mitad. */
@media(max-width:480px){.cfbc-scope .csl-btn,.cfbc-scope a.csl-cta-wa{width:100%;padding:14px 16px;font-size:15px;overflow-wrap:anywhere}}
/* Buscador sticky */
.csl-search{position:sticky;top:0;z-index:20;background:var(--csl-verde);border-radius:16px;padding:16px;display:grid;gap:10px;grid-template-columns:1fr;margin:8px 0 16px}
.csl-search label{color:#fff;font-size:14px;font-weight:600;display:block;margin:0 0 4px}
.csl-search select{width:100%;min-height:48px;padding:10px 12px;border-radius:12px;border:1px solid var(--csl-gris-2);font-size:16px;background:#fff;color:var(--csl-tinta)}
/* 🔴 [0.4.0-mb1.10] EL BOTÓN VA SOBRE UN PANEL VERDE, ASÍ QUE SE INVIERTE.
   `.csl-search` tiene fondo `--csl-verde`. Poner el botón también verde lo hizo DESAPARECER:
   mismo color que su contenedor, así que parecía texto suelto. Medido en producción, no deducido.
   Y corrige mi lectura anterior: el coral no era «el acento del CTA» en abstracto — era el acento
   SOBRE ESTE PANEL. Su papel era contrastar con el verde, y eso yo no lo vi al mapearlo.
   Blanco con texto verde: los mismos 12,09 de contraste, invertidos, y sin inventar un color. */
.csl-search .csl-btn{width:100%;background:var(--cafati-papel);color:var(--cafati-verde);font-weight:700}
.csl-search .csl-btn:hover{background:var(--cafati-menta)}
@media(min-width:768px){.csl-search{grid-template-columns:1fr 1fr auto;align-items:end}}
/* Alerta clínica */
.csl-alerta{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--csl-gris-2);border-left:4px solid var(--csl-alerta);border-radius:12px;padding:14px 16px;margin:0 0 20px}
.csl-alerta p{margin:0;font-size:15px}
.csl-alerta .csl-cta-wa{min-height:44px;padding:10px 16px;background:var(--csl-alerta)}
/* Cards vet */
.csl-cards{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:1024px){.csl-cards{grid-template-columns:1fr 1fr}}
.csl-card-vet{background:var(--csl-blanco);border:1px solid var(--csl-gris-2);border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(0,26,18,.06),0 8px 24px rgba(0,26,18,.08)}
.csl-card-vet:hover{box-shadow:0 1px 2px rgba(0,26,18,.06),0 12px 32px rgba(0,26,18,.10)}
.csl-vet-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.csl-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 56px;background:var(--csl-crema)}
.csl-badges{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.csl-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px}
.csl-badge-valid{background:#fff;border:1.5px solid var(--csl-verde);color:var(--csl-verde)}
.csl-badge-anios{background:var(--csl-crema);border:1px solid var(--csl-gris-2);color:var(--csl-tinta)}
.csl-badge-resp{background:var(--csl-verde);color:#fff}
.csl-precio{font-weight:700;font-variant-numeric:tabular-nums;margin:10px 0 6px}
/* Grilla de horas: filas por día con scroll-snap */
.csl-day{margin:10px 0}
.csl-day-label{font-size:14px;font-weight:600;color:var(--csl-gris-1);margin:0 0 6px}
.csl-day-row{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;scrollbar-width:thin}
.csl-slot{scroll-snap-align:start;flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--csl-verde);color:var(--csl-verde);background:#fff;font-size:15px;font-weight:600;text-decoration:none}
.csl-slot:hover{background:var(--csl-verde);color:#fff}
.csl-legal{font-size:14px;color:var(--csl-gris-1);margin-top:16px}
/* Empty states */
.csl-empty{background:var(--csl-crema);border:1px solid var(--csl-gris-2);border-radius:16px;padding:24px;text-align:center}
.csl-empty svg{display:block;margin:0 auto 8px}
/* ===== Bloques estáticos ===== */
.csl-hero{background:var(--csl-verde);color:#fff;border-radius:24px;max-height:70vh;padding-top:56px;padding-bottom:56px}
.csl-hero h1,.csl-hero p{color:#fff}
.csl-hero .csl-hero-sub{font-size:17px;opacity:.95;margin:0 0 24px}
.csl-hero .csl-btn{background:var(--cafati-verde);color:#fff}
.csl-hero .csl-hero-wa{background:transparent;padding:0;min-height:0;margin-left:16px;color:#fff;text-decoration:underline;font-weight:600}
.csl-hero .csl-hero-wa:hover{background:transparent;opacity:.9}
.csl-trustbar ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(min-width:768px){.csl-trustbar ul{grid-template-columns:repeat(6,1fr)}}
.csl-trustbar li{background:#fff;border:1px solid var(--csl-gris-2);border-radius:12px;padding:12px;text-align:center;font-size:14px;font-weight:600}
.csl-pasos ol{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:12px}
@media(min-width:768px){.csl-pasos ol{grid-template-columns:1fr 1fr 1fr}}
.csl-pasos li{counter-increment:p;background:#fff;border:1px solid var(--csl-gris-2);border-radius:16px;padding:16px 16px 16px 56px;position:relative;min-height:64px}
.csl-pasos li:before{content:counter(p);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--csl-verde);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.csl-faq details{background:#fff;border:1px solid var(--csl-gris-2);border-radius:12px;padding:0;margin:0 0 10px}
.csl-faq summary{cursor:pointer;padding:14px 16px;font-weight:600;min-height:48px;display:flex;align-items:center}
.csl-faq details[open] summary{border-bottom:1px solid var(--csl-gris-2)}
.csl-faq .csl-faq-a{padding:12px 16px}
.csl-footer-cta{background:var(--csl-verde);color:#fff;border-radius:24px;text-align:center}
.csl-footer-cta h2,.csl-footer-cta p{color:#fff}
.csl-footer-cta .csl-tel{display:inline-block;margin-left:12px;color:#fff;font-weight:600;text-decoration:underline}
@media(min-width:768px){.csl-sec{padding:64px 0}.cfbc-scope{padding-left:32px;padding-right:32px}}
@media(prefers-reduced-motion:reduce){.cfbc-scope *{transition:none!important}}
/* ===== v0.1.2 · Flujo de reserva (T1) y estado por código (T4). Scoped a .cfbc-scope: no depende del theme. ===== */
/* ══ [mb1.49] EL ENLACE DE CONSULTA ═══════════════════════════════════════════════════════════
   🔴 SE DESBORDABA DE LA TARJETA. El token son 64 caracteres hexadecimales sin un solo espacio ni
   guion, así que el navegador no encuentra dónde partir la línea y la empuja fuera del contenedor.
   `overflow-wrap:anywhere` le da permiso para cortar donde sea — es lo correcto aquí: un enlace
   ilegible por salirse es peor que uno partido en tres líneas.
   Y es un ENLACE, no un texto decorativo: se abre pulsándolo. El botón de copiar va al lado porque
   pedirle a alguien que seleccione 130 caracteres en un móvil no es darle su enlace, es perdérselo. */
.csl-enlace-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 0}
/* En px y no en rem: el tema de este sitio fija `html{font-size:10px}`, así que un `rem` aquí mide
   lo que el tema decida y no lo que nosotros creemos. El banco §9 lo vigila. */
.csl-enlace{flex:1 1 200px;min-width:0;overflow-wrap:anywhere;word-break:break-word;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5}
.csl-ico{flex:none;vertical-align:-2px}

/* ══ [mb1.48] LO QUE QUEDA POR PAGAR ══════════════════════════════════════════════════════════
   El desglose se lee como una boleta: concepto a la izquierda, monto a la derecha, alineados por
   el borde. Los montos van en cifras tabulares para que las columnas cuadren a la vista — si no
   cuadran, el tutor duda del total aunque la suma esté bien.
   «Pendiente» es la única línea con peso: es lo único que él tiene que hacer. */
.csl-cobro{margin:14px 0 0;padding:14px;border:1px solid var(--csl-gris-2);border-radius:14px;background:#fff}
.csl-cobro-t{margin:0 0 8px;font-size:15px}
.csl-cobro-lista{list-style:none;margin:0;padding:0}
.csl-cobro-lista li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14px}
.csl-cobro-lista b{font-variant-numeric:tabular-nums;white-space:nowrap}
/* 🔴 SIN `!important`, Y ESTO LO CORRIGIÓ EL BANCO. La primera versión lo usaba para ganarle a
   `.csl-cobro-lista li` (0,1,1), que fija `padding` y `font-size`. `!important` gana la pelea y deja
   la deuda: la siguiente regla que quiera ajustar estas líneas tendrá que usar otro `!important`, y
   así crece la bola. La forma correcta es SUBIR LA ESPECIFICIDAD con el selector que ya existe —
   `li.csl-cobro-tot` es (0,2,1)—, que gana por la vía normal y no hipoteca a nadie. */
.csl-cobro-lista li.csl-cobro-tot{border-top:1px solid var(--csl-gris-2);margin-top:4px;
	padding:8px 0 4px;font-weight:600}
.csl-cobro-lista li.csl-cobro-saldo{border-top:2px solid var(--csl-verde);margin-top:4px;
	padding:8px 0 4px;font-size:16px;font-weight:700;color:var(--csl-verde)}
/* [mb1.72] El abono. Va sobre menta y no sobre el rojo del saldo: es lo que DESBLOQUEA la visita,
 * no una deuda que reprocharle. La segunda línea explica que se descuenta del total — sin eso, dos
 * cifras seguidas se leen como dos cobros. */
.csl-abono-aviso{margin:12px 0 0;padding:12px 14px;border-radius:12px;
	background:var(--cafati-menta);border:1px solid var(--cafati-verde-accion)}
.csl-abono-aviso b{display:block;font-size:16px;color:var(--cafati-verde);margin-bottom:4px}
.csl-abono-aviso span{display:block;font-size:13.5px;line-height:1.5;color:var(--cafati-grafito)}
.csl-cobro-datos{margin-top:12px;padding-top:12px;border-top:1px dashed var(--csl-gris-2)}
.csl-cobro-comok{margin:0 0 6px;font-weight:700;font-size:14px}
.csl-cobro-datos dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14px}
.csl-cobro-datos dt{color:var(--csl-gris-1)}
.csl-cobro-datos dd{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.csl-copiable{font-variant-numeric:tabular-nums;word-break:break-all}
/* El botón de copiar respeta el objetivo táctil de la guía: en móvil se pulsa con el pulgar. */
/* 15px y no 13: la §12 de la guía fija el mínimo legible y el banco de conducta lo mide. Un botón
   que solo aparece cuando hay dinero de por medio es el último sitio donde ahorrar tamaño. */
.csl-copiar{display:inline-flex;align-items:center;gap:6px;flex:none;
	min-height:var(--cfbc-tap,44px);padding:0 12px;border:1px solid var(--csl-gris-2);
	border-radius:10px;background:var(--csl-crema);color:var(--csl-verde-2);font-size:15px;cursor:pointer}
.csl-copiar:hover{border-color:var(--csl-verde);color:var(--csl-verde)}
.csl-copiar.is-copiado{background:var(--csl-verde);border-color:var(--csl-verde);color:#fff}
.csl-cobro-link{display:inline-block;margin-top:10px}

/* ══════════════ [mb1.79] LA CARTILLA DE RESERVA, REDISEÑADA ══════════════
 *
 * 🔴 Indicación de la Dirección, 15-ago-2026: *«esa franja verde al costado izquierdo no me
 * convence, creo que podría quedar algo más profesional y lindo»*.
 *
 * FUERA EL `border-left:4px`. Un filo de color a un lado es el recurso de las cajas de aviso —de
 * hecho es el mismo que usa `.csl-c__clinica`— y aquí decía lo que no toca: esto **no es un aviso,
 * es el momento en que una visita se convierte en reserva**. Marcarlo como advertencia le resta
 * exactamente la importancia que tiene.
 *
 * En su lugar, la jerarquía se construye con las tres cosas que la guía visual sí reconoce:
 *   · **fondo papel** en vez de crema — la cartilla se separa de la tarjeta que la contiene por ser
 *     más clara, no por llevar una marca al costado;
 *   · **radio grande** (`--cafati-r-lg`), que es el de las superficies principales del sistema;
 *   · **sombra suave y elevación**, que es como se dice «esto está por encima» sin gritar.
 *
 * Y una franja SUPERIOR de 3px en el verde de acción, a todo el ancho: conserva el acento de marca
 * que el borde lateral aportaba, pero leído como cabecera de una tarjeta y no como margen de una
 * advertencia. Es la misma diferencia entre subrayar un título y tacharlo por el lado. */
.csl-holdbox{position:relative;overflow:hidden;
	background:var(--cafati-papel);border:1px solid var(--cafati-linea);
	border-radius:var(--cafati-r-lg);padding:var(--cafati-e-4);margin:var(--cafati-e-3) 0;
	box-shadow:0 6px 20px rgba(2,62,50,.10)}
.csl-holdbox::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
	background:var(--cafati-verde-accion)}
/* El título de la cartilla pasa a ser un título de verdad: hasta ahora era un párrafo de 15px y
   competía en peso con las etiquetas de los campos. Quien abre esto necesita leer PRIMERO qué hora
   está a punto de reservar y con quién. */
.csl-holdbox .csl-hold-t{font-size:16px;font-weight:600;line-height:1.35}
.csl-holdbox .csl-hold-t strong{font-variant-numeric:tabular-nums}
/* El pie explicativo se separa del bloque de acción: pegado al botón parecía parte de él. */
.csl-holdbox .csl-hold-nota{margin:var(--cafati-e-3) 0 0;padding-top:var(--cafati-e-3);
	border-top:1px solid var(--cafati-linea);font-size:13px;color:var(--cafati-texto-tenue)}
/* [mb1.45] La «X» de cerrar. Objetivo táctil de 44px por la §12 de la guía visual —el botón se ve
   pequeño, pero el área que responde al dedo no lo es—, y el título se aparta de ella para que no
   se solapen en móvil. El color es el texto tenue: tiene que estar disponible sin competir con el
   botón de reservar, que es la acción principal. */
.csl-holdbox .csl-hold-x{position:absolute;top:6px;right:6px;display:flex;align-items:center;justify-content:center;
	width:var(--cfbc-tap,44px);height:var(--cfbc-tap,44px);padding:0;border:0;border-radius:12px;
	background:transparent;color:var(--csl-gris-1);font-size:24px;line-height:1;cursor:pointer}
.csl-holdbox .csl-hold-x:hover{background:#fff;color:var(--csl-tinta)}
.csl-holdbox .csl-hold-x:focus-visible{outline:3px solid var(--cafati-verde-accion);outline-offset:2px}
.csl-holdbox .csl-hold-t{margin:0 0 10px;padding-right:44px;font-size:15px}
.csl-holdbox label{display:block;font-size:14px;font-weight:600;margin:0 0 10px}
/* 🔴 [mb1.44] LOS CAMPOS DEL HOLDBOX SE VISTEN POR CONJUNTO, NO UNO A UNO.
   Al añadir el correo obligatorio, `.csl-mail` nació a 14px porque las cinco reglas de este archivo
   nombraban `.csl-tel` y solo a él. Lo cazó el banco de conducta, y no es cosmético: **bajo 16px,
   Safari en iPhone hace zoom al enfocar el campo**, y el móvil es donde el tutor reserva.
   Repetir `.csl-mail` en las cinco habría dejado el mismo agujero para el sexto campo que se añada.
   Se nombran los dos aquí y en cada regla del holdbox, para que la lista viva en un sitio reconocible
   y no en la memoria de quien edite.

   🔴 [mb1.69] Y EL SEXTO CAMPO LLEGÓ — el selector de comuna— y cayó en el agujero que este mismo
   comentario anunciaba: nació sin regla, a 14px, y el banco de conducta lo cazó otra vez. La
   advertencia estaba escrita y aun así se repitió, así que se deja de mantener una LISTA DE
   NOMBRES: la regla pasa a nombrar el TIPO de elemento. Un campo nuevo dentro del holdbox nace
   vestido, sin que nadie tenga que acordarse de venir aquí. `.csl-tel` y `.csl-mail` se conservan
   por si alguna vez un campo vive fuera de un `label`.

   Se nombran los TIPOS QUE SE PINTAN, no los que se excluyen. La primera versión decía
   `input:not([type=checkbox]):not([type=radio])` y el gate visual la marcó en rojo con razón
   aparente —«pinta el fondo y nada declara :checked»—: una lista de exclusión obliga a leer al
   revés para saber qué cae dentro, y el día que aparezca un tipo nuevo caerá dentro sin que nadie
   lo decida. Es el mismo criterio que el proyecto ya aplica al serializar el cobro: nombrar lo que
   SALE en vez de excluir lo que no. */
.csl-holdbox .csl-tel,.csl-holdbox .csl-mail,
.csl-holdbox input[type="tel"],.csl-holdbox input[type="email"],.csl-holdbox input[type="text"],
.csl-holdbox select{display:block;width:100%;max-width:320px;min-height:48px;margin-top:4px;padding:10px 12px;
	border-radius:10px;border:1px solid var(--cafati-linea);font-size:16px;
	background:color-mix(in srgb, var(--cafati-purpura) 4%, var(--cafati-papel));color:var(--cafati-grafito);
	box-shadow:inset 0 1px 2px color-mix(in srgb, var(--cafati-grafito) 8%, transparent)}
/* [mb1.513] El foco es PÚRPURA: el hilo del tutor empieza donde escribe, aquí igual que en el
 * agendador. Borde al 62% —el mínimo medido que aún contrasta— y el anillo del token. */
.csl-holdbox .csl-tel:focus,.csl-holdbox .csl-mail:focus,.csl-holdbox select:focus{outline:none;
	border-color:color-mix(in srgb, var(--cafati-purpura) 62%, var(--cafati-papel));
	box-shadow:var(--cafati-anillo-foco), inset 0 1px 2px color-mix(in srgb, var(--cafati-grafito) 6%, transparent)}
/* [mb1.69 · RT-12] El aviso de comuna que no corresponde, y su enlace de salida. */
.csl-holdbox .csl-com-aviso:empty{display:none}
.csl-holdbox .csl-com-aviso{margin:0 0 10px}
.csl-hold-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0}
/* [mb1.550] LA ALTERNATIVA ES UNA ACCIÓN, no una nota al margen: misma métrica que el botón
 * principal —altura, radio, cuerpo— y perfilada en vez de rellena, que es como se distingue
 * un rol secundario sin bajarlo de categoría. */
.csl-hold-alt{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
	padding:0 16px;border-radius:var(--cafati-r-md,12px);box-sizing:border-box;
	background:var(--cafati-papel);border:1px solid var(--cafati-verde);
	color:var(--cafati-verde);text-decoration:none;font-size:15px;font-weight:700}
.csl-hold-alt:hover{background:var(--cafati-menta-tenue)}
.csl-hold-alt:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.csl-hold-out{margin-top:10px;font-size:15px}
.csl-hold-ok{background:color-mix(in srgb, var(--cafati-verde) 6%, var(--cafati-papel));
	border:1px solid var(--cafati-verde);border-radius:14px;padding:16px 18px;
	box-shadow:0 2px 6px color-mix(in srgb, var(--cafati-grafito) 8%, transparent),
	           0 12px 28px color-mix(in srgb, var(--cafati-verde) 14%, transparent)}
/* [mb1.262] EL PACIENTE ES EL TITULAR; el código pasa a ser su referencia.
   Dirección, mirando su propia página de seguimiento: «falta Nala». La tarjeta abría con el código
   y seguía con pago, fecha y profesional — el animal por el que reservó no aparecía en la única
   pantalla que ese tutor va a mirar. El código IDENTIFICA (sirve para citarlo por teléfono); la
   mascota es con lo que la visita se RECONOCE.
   En px como el resto de este archivo, nunca en rem: la raíz de una página pública es del tema. */
.csl-paciente{font-size:26px;font-weight:700;line-height:1.15;color:var(--csl-verde);margin:0 0 2px}
/* Cuando acompaña al paciente el código se repliega: sigue estando —hay que poder leerlo y
   copiarlo— pero deja de competir por ser el titular. `user-select:all` se conserva en los dos
   casos: seleccionarlo de un toque es justo para lo que existe. */
.csl-paciente + .csl-codigo{font-size:15px;font-weight:600;color:var(--csl-gris-2);margin:0 0 8px}
.csl-codigo{font-size:22px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--csl-verde);margin:6px 0;user-select:all}
.csl-err{color:var(--cafati-atencion-texto);font-weight:600;margin:6px 0}
.csl-next{font-size:15px;color:var(--csl-gris-1)}
.csl-status-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:8px 0}
.csl-status-form label{display:block;font-size:14px;font-weight:600}
.csl-status-form input{display:block;min-height:48px;margin-top:4px;padding:10px 12px;border-radius:12px;border:1px solid var(--csl-gris-2);font-size:16px;background:#fff;color:var(--csl-tinta)}
/* 🔴 [0.4.0-mb1.10] LAS MAYÚSCULAS FORZADAS IBAN EN EL SITIO EQUIVOCADO, y se vio al mirarlo.
 *
 * `text-transform:uppercase` estaba en TODOS los campos del formulario. Tiene sentido en el código
 * —`CS-XXXXXX` se escribe en mayúsculas— y no lo tiene en la clave, que es hexadecimal y da igual
 * cómo se teclee. Pero lo peor no era eso: la regla también transforma el TEXTO DE AYUDA, así que
 * «se completa sola desde tu enlace» salía como un cartel a gritos y, al no caber, cortado a media
 * palabra. El tutor leía «SE COMPLETA SOLA DES». */
.csl-status-form input#csl-cs{text-transform:uppercase}
.csl-status-form input::placeholder{text-transform:none;font-variant:normal}
.csl-status-out{margin-top:12px}
.csl-status-card{background:#fff;border:1px solid var(--csl-gris-2);border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(0,26,18,.06),0 8px 24px rgba(0,26,18,.08)}
.csl-status-card p{margin:6px 0}
/* 🔴 [mb1.69 · RT-07] SITIO PARA EL BOTÓN FLOTANTE DE WHATSAPP.
   Medido en un Android real (Dirección, 14-ago-2026): el botón fijo del tema se monta encima de la
   última fila de los datos bancarios y del «Correo» solo se lee «com». Es justo el dato que el
   tutor viene a copiar. No se toca el botón —es del tema, no nuestro— sino que la tarjeta reserva
   el hueco por debajo, que es la corrección que no depende de un plugin ajeno ni de una guerra de
   z-index. 96px cubre el botón (≈56) más su margen y aire. */
.csl-status-card{padding-bottom:96px}
@media(min-width:768px){.csl-status-card{padding-bottom:20px}}
/* 🔴 [mb1.69 · RT-09] LOS DATOS BANCARIOS SE APILAN EN PANTALLA ANGOSTA.
   En 360px la rejilla `auto 1fr` dejaba a la etiqueta comerse el ancho y el valor partía palabras
   por la mitad: «Cuenta Corrient / e», «CLÍNICA VETER / INARIA MÓVIL». Un número de cuenta partido
   se copia mal, y copiarlo bien es el único propósito de este bloque. Una columna abajo del rótulo
   —el patrón normal de ficha en móvil— y las dos columnas vuelven cuando hay sitio de verdad. */
.csl-cobro-datos dl{grid-template-columns:1fr;gap:2px 0}
.csl-cobro-datos dt{margin-top:6px;font-size:13px}
.csl-cobro-datos dd{overflow-wrap:anywhere}
@media(min-width:480px){.csl-cobro-datos dl{grid-template-columns:auto 1fr;gap:4px 12px}
	.csl-cobro-datos dt{margin-top:0;font-size:14px}}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.20] TARJETA DE PROFESIONAL · `CSL_Tarjeta` · MÓVIL PRIMERO
 *
 * La consumen cuatro pantallas del contrato: comuna (P03), servicio (P05), resultados (P08) y el
 * directorio. Un solo original.
 *
 * 🔴 MÓVIL PRIMERO NO ES «QUE QUEPA»: es que el caso BASE —sin ninguna consulta de medios— sea el
 * teléfono, y que el escritorio se consiga AÑADIENDO. Escrito al revés, el móvil hereda decisiones
 * de una pantalla de 1600 px y se arregla a golpe de excepciones. Aquí no hay una sola regla de
 * escritorio antes del primer `@media`.
 *
 * Todo en px y con tokens: el tema de este sitio pone `html{font-size:10px}` —medido en producción—
 * así que un `rem` sale a un tercio; y `cfbc-tokens.css` es el único archivo del proyecto que
 * declara un color, con un banco que se pone rojo si aparece un hex fuera de él.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-t{background:var(--cafati-papel);border:1px solid var(--cafati-linea);border-radius:16px;
	padding:14px;margin:0 0 12px;box-shadow:0 1px 2px rgba(0,26,18,.05)}
/* La identidad en fila desde el móvil: el avatar es pequeño y el nombre necesita el ancho. */
.cfbc-t__id{display:flex;gap:12px;align-items:flex-start}
.cfbc-t__avatar{flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden;
	background:var(--cafati-menta);display:flex;align-items:center;justify-content:center}
.cfbc-scope .cfbc-t__foto{width:100%;height:100%;object-fit:cover;display:block}
/* Las iniciales con el MISMO peso visual que una foto: una doctora sin retrato no puede parecer
 * una ficha a medio llenar. Verde de superficie sobre menta, no gris de hueco. */
.cfbc-t__iniciales{font-size:20px;font-weight:700;letter-spacing:.5px;color:var(--cafati-verde);
	font-family:inherit}
.cfbc-t__quien{min-width:0}
.cfbc-t__nombre{font-size:18px;line-height:1.25;margin:0 0 4px;color:var(--cafati-grafito)}
.cfbc-t__sellos{margin:0 0 4px;display:flex;flex-wrap:wrap;gap:4px}
/* 🔴 13px, NO 12. Lo escribí en 12 y el banco de frontend lo paró: el proyecto tiene la regla de
 * que «ningún texto público baja de 13px ni con viewport de 320». Un sello de 12px se lee mal en el
 * teléfono de alguien que ya entrecierra los ojos, y «Validado por Cafati» es precisamente la frase
 * que sostiene la confianza — el sitio equivocado para ahorrar un píxel. */
.cfbc-t__sello{font-size:13px;line-height:1.4;padding:3px 8px;border-radius:999px;
	background:var(--cafati-marfil);color:var(--cafati-texto-tenue);border:1px solid var(--cafati-linea)}
/* 🔴 [mb1.419] «Validado por Cafati» AL PURPURA SOLIDO. Es la promesa central del modelo boutique
 * —la red es selectiva— y estaba vestida igual que un chip informativo cualquiera. El purpura es
 * el color de la acreditacion en este sistema; usarlo aqui es su definicion, no una licencia. */
.cfbc-t__sello--val{background:var(--cafati-purpura);color:var(--cafati-papel);
	border-color:var(--cafati-purpura);font-weight:600;
	box-shadow:0 1px 3px color-mix(in srgb, var(--cafati-purpura) 30%, transparent)}
/* «Nueva en la red» usa el PÚRPURA, que es el acento identitario del sistema. Deliberadamente NO el
 * ámbar: el sistema de diseño reserva el ámbar para «pendiente · requiere atención», y ser nueva no
 * es un problema pendiente. */
.cfbc-t__sello--nueva{background:var(--cafati-purpura-suave);color:var(--cafati-purpura);
	border-color:var(--cafati-purpura-suave);font-weight:600}
/* [mb1.54] La ESPECIALIDAD es el filtro —«¿atiende gatos?»— y va con algo de peso; la BIO es la
   lectura de confianza y va debajo, más tenue. Dos jerarquías distintas porque cumplen dos funciones
   distintas: si pesaran igual, el ojo no sabría por dónde entrar. */
.cfbc-t__esp{font-size:14px;line-height:1.4;margin:0;font-weight:600;color:var(--cafati-grafito)}
.cfbc-t__bio{font-size:14px;line-height:1.45;margin:4px 0 0;color:var(--cafati-texto-tenue)}
.cfbc-t__rep{margin:10px 0 0;font-size:14px;display:flex;align-items:baseline;gap:6px}
.cfbc-t__nota{font-size:18px;font-weight:700;color:var(--cafati-grafito)}
/* [mb1.90] LAS CINCO ESTRELLAS.
 *
 * La media se dibuja SUPERPONIENDO una estrella llena recortada al 50 % sobre una vacía — el mismo
 * glifo en las dos capas, así que no hay diferencia de ancho entre tipografías y la fila no baila
 * entre tarjetas.
 *
 * 🔴 LA PRIMERA VERSIÓN USABA UN DEGRADADO con `background-clip:text`, y el gate visual del
 * generador la rechazó en el acto: la Guía Visual v2 §13 prohíbe degradados, y está CONGELADA. El
 * gate hizo exactamente su trabajo —yo había roto el contrato de diseño sin darme cuenta— y el
 * recorte da el mismo resultado sin saltárselo. Cuando el guardián y yo discrepamos, gana el
 * guardián: para eso se puso. */
.cfbc-t__estrellas{display:inline-flex;gap:1px;line-height:1}
.cfbc-t__estrella{font-style:normal;font-size:15px;color:var(--cafati-atencion-texto)}
.cfbc-t__estrella--vacia{color:var(--cafati-linea)}
.cfbc-t__estrella--media{position:relative;color:var(--cafati-linea)}
.cfbc-t__estrella--media:before{content:'\2605';position:absolute;left:0;top:0;
 width:50%;overflow:hidden;color:var(--cafati-atencion-texto)}
.cfbc-t__n{color:var(--cafati-texto-tenue)}
.cfbc-t__rep--sin{color:var(--cafati-texto-tenue);font-size:13px;display:block}
/* [mb1.92] EL SERVICIO, ENCIMA DEL PRECIO. Va pegado a la cifra —sin margen inferior— para que se
 * lean como un bloque y no como dos datos sueltos: el nombre explica el número que viene debajo.
 * Lo que incluye va en su PROPIA línea, tenue y más pequeño: son tres renglones que se leen en
 * cascada —qué es, qué trae, cuánto vale— y ponerlo al costado del nombre lo partía en dos en
 * cuanto la frase pasaba de cuatro palabras. */
.cfbc-t__svc{margin:10px 0 0}
.cfbc-t__svc-n{display:block;font-size:14px;font-weight:600;color:var(--cafati-grafito)}
.cfbc-t__svc-d{display:block;margin-top:1px;font-size:13px;line-height:1.35;
 color:var(--cafati-texto-tenue)}
.cfbc-t__precio{margin:2px 0 0;font-size:15px}
.cfbc-t__precio-etq{color:var(--cafati-texto-tenue)}
.cfbc-t__precio-val{font-size:20px;font-weight:700;color:var(--cafati-grafito)}
.cfbc-t__horas{margin:12px 0 0}
.cfbc-t__horas-etq{display:block;font-size:13px;color:var(--cafati-texto-tenue);margin-bottom:6px}
.cfbc-t__chips{display:flex;flex-wrap:wrap;gap:8px}
/* [mb1.72] El día al que pertenecen los chips de abajo. Pesa más que la etiqueta «Próximas horas»
 * porque es el dato que decide: sin él, tres chips seguidos de dos días distintos se leen como una
 * sola mañana. El primero no lleva margen superior — ya lo pone la etiqueta. */
.cfbc-t__horas-dia{display:block;font-size:13.5px;font-weight:700;color:var(--cafati-grafito);
	margin:12px 0 6px;text-transform:none;letter-spacing:.01em}
.cfbc-t__horas-etq + .cfbc-t__horas-dia{margin-top:0}
/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.76] AGENDA DE LA PROFESIONAL · el artefacto dentro de la tarjeta
 * ══════════════════════════════════════════════════════════════════════════════════════════════
 * Encargo de la Dirección: «estilo agenda independiente dentro de la cartilla, que se vea
 * profesional y tecnológico». Tira de días arriba, panel de horas debajo.
 *
 * 🔴 SIN UNA LÍNEA DE JAVASCRIPT: radios ocultos y el combinador `~`. Marcar un día muestra su
 * panel. Se gana el teclado (flechas entre días), el lector de pantalla y que siga funcionando si
 * el JS falla — y en esta página el JS ya tiene un trabajo crítico, que es conducir la reserva.
 *
 * El recuadro propio —fondo, borde y radio— es lo que lo convierte en ARTEFACTO y no en una lista
 * más dentro de la tarjeta: se lee como un instrumento aparte, que es exactamente lo pedido. */
.cfbc-ag{border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-md);
	background:var(--cafati-menta-tenue);padding:12px;margin-top:14px}
.cfbc-ag__cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.cfbc-ag__etq{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
	color:var(--cafati-verde)}
.cfbc-ag__tot{font-size:13px;color:var(--cafati-texto-tenue);font-variant-numeric:tabular-nums}

/* Los radios existen y son alcanzables por teclado: se sacan de la vista, NO se ocultan con
 * `display:none` — eso los quita del orden de foco y mata la navegación con flechas. */
.cfbc-ag__r{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;
	clip:rect(0 0 0 0);white-space:nowrap}

/* La tira de días. Se desplaza en horizontal cuando no caben: en un teléfono con seis días, la
 * alternativa es que se apilen y el artefacto pierda su forma de agenda. */
.cfbc-ag__dias{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;
	-webkit-overflow-scrolling:touch}
.cfbc-ag__dia{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;
	min-width:62px;min-height:52px;justify-content:center;cursor:pointer;
	padding:6px 10px;border-radius:var(--cafati-r-sm);border:1px solid var(--cafati-linea);
	background:var(--cafati-papel);color:var(--cafati-grafito);
	font-size:13px;font-weight:600;line-height:1.15;transition:background .12s ease,border-color .12s ease}
.cfbc-ag__dia:hover{border-color:var(--cafati-verde-accion)}
.cfbc-ag__dia-n{font-size:13px;font-weight:500;color:var(--cafati-texto-tenue);
	font-variant-numeric:tabular-nums}

/* El día marcado. `:has()` no hace falta: cada radio precede a la tira, así que `~` alcanza su
 * etiqueta por posición — el mismo mecanismo, con soporte universal. */
.cfbc-ag__r:nth-of-type(1):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(1),
.cfbc-ag__r:nth-of-type(2):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(2),
.cfbc-ag__r:nth-of-type(3):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(3),
.cfbc-ag__r:nth-of-type(4):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(4),
.cfbc-ag__r:nth-of-type(5):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(5),
.cfbc-ag__r:nth-of-type(6):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(6),
.cfbc-ag__r:nth-of-type(7):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(7),
.cfbc-ag__r:nth-of-type(8):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(8),
.cfbc-ag__r:nth-of-type(9):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(9),
.cfbc-ag__r:nth-of-type(10):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(10),
.cfbc-ag__r:nth-of-type(11):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(11),
.cfbc-ag__r:nth-of-type(12):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(12),
.cfbc-ag__r:nth-of-type(13):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(13),
.cfbc-ag__r:nth-of-type(14):checked ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(14){
	background:var(--cafati-verde);border-color:var(--cafati-verde);color:var(--cafati-papel)}
.cfbc-ag__r:checked ~ .cfbc-ag__dias .cfbc-ag__dia .cfbc-ag__dia-n{color:inherit;opacity:.75}

/* 🔴 EL FOCO SE VE. Sin esto, quien navega con teclado mueve la selección a ciegas: el radio está
 * fuera de la vista y su etiqueta no tendría ninguna marca. */
.cfbc-ag__r:focus-visible ~ .cfbc-ag__dias .cfbc-ag__dia{outline:none}
.cfbc-ag__r:nth-of-type(1):focus-visible ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(1),
.cfbc-ag__r:nth-of-type(2):focus-visible ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(2),
.cfbc-ag__r:nth-of-type(3):focus-visible ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(3),
.cfbc-ag__r:nth-of-type(4):focus-visible ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(4),
.cfbc-ag__r:nth-of-type(5):focus-visible ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(5),
.cfbc-ag__r:nth-of-type(6):focus-visible ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(6),
.cfbc-ag__r:nth-of-type(7):focus-visible ~ .cfbc-ag__dias .cfbc-ag__dia:nth-of-type(7){
	outline:2px solid var(--cafati-verde-accion);outline-offset:2px}

/* Los paneles: todos en el DOM, uno visible. Los cupos ocultos siguen siendo nodos reales, que es
 * lo que permite que `cfbc.js` los enganche UNA vez al cargar. */
.cfbc-ag__panel{display:none;margin-top:10px}
.cfbc-ag__panel-t{display:block;font-size:13.5px;font-weight:700;color:var(--cafati-grafito);
	margin-bottom:8px}
.cfbc-ag__r:nth-of-type(1):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--1,
.cfbc-ag__r:nth-of-type(2):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--2,
.cfbc-ag__r:nth-of-type(3):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--3,
.cfbc-ag__r:nth-of-type(4):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--4,
.cfbc-ag__r:nth-of-type(5):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--5,
.cfbc-ag__r:nth-of-type(6):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--6,
.cfbc-ag__r:nth-of-type(7):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--7,
.cfbc-ag__r:nth-of-type(8):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--8,
.cfbc-ag__r:nth-of-type(9):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--9,
.cfbc-ag__r:nth-of-type(10):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--10,
.cfbc-ag__r:nth-of-type(11):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--11,
.cfbc-ag__r:nth-of-type(12):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--12,
.cfbc-ag__r:nth-of-type(13):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--13,
.cfbc-ag__r:nth-of-type(14):checked ~ .cfbc-ag__paneles .cfbc-ag__panel--14{display:block}
@media (prefers-reduced-motion:reduce){ .cfbc-ag__dia{transition:none} }
/* 🔴 44 px de alto MÍNIMO. No es estética: es el objetivo táctil que un pulgar acierta sin
 * ampliar. Una ficha de hora de 28 px se ve bien en la captura y se falla en la calle, y esta es
 * LA acción que convierte la visita en reserva. */
.cfbc-t__chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
	min-width:72px;padding:0 14px;border-radius:12px;font-size:16px;font-weight:600;
	text-decoration:none;background:var(--cafati-verde);color:var(--cafati-papel);
	border:1px solid var(--cafati-verde)}
.cfbc-t__chip:hover,.cfbc-t__chip:focus{background:var(--cafati-verde-suave);
	border-color:var(--cafati-verde-suave);color:var(--cafati-papel)}
/* Sin destino, la hora informa y no promete: se ve como dato, no como botón. */
.cfbc-t__chip--info{background:var(--cafati-marfil);color:var(--cafati-grafito);
	border-color:var(--cafati-linea);font-weight:600}
.cfbc-t__horas--sin{margin:12px 0 0;font-size:14px;color:var(--cafati-texto-tenue)}

/* ── [mb1.553] EL SELECTOR PLEGADO DE LA CARTILLA ─────────────────────────────────────────────
 * Continuación de la ficha que ya estaba, no un recinto nuevo: el resumen ES el servicio y su
 * precio de siempre, y solo se añade la pista de que hay más. */
.cfbc-t__svcs{margin:0}
.cfbc-scope .cfbc-t__svcs-r{list-style:none;cursor:pointer;border-radius:var(--cafati-r-md,12px)}
.cfbc-scope .cfbc-t__svcs-r::-webkit-details-marker{display:none}
.cfbc-scope .cfbc-t__svcs-r:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}
/* La pista va en púrpura —el hilo del tutor— y con el signo que dice que se abre. El texto la
 * garantiza: el color adelanta, la palabra promete. */
.cfbc-t__svcs-mas{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:700;
	color:var(--cafati-purpura)}
.cfbc-t__svcs-mas::after{content:' \203A';display:inline-block;transition:transform .15s ease}
.cfbc-t__svcs[open] .cfbc-t__svcs-mas::after{transform:rotate(90deg)}
.cfbc-t__svcs-l{margin:8px 0 0;border-top:1px solid var(--cafati-linea);padding-top:8px}
/* [mb1.558] El rótulo de familia ORDENA la lectura: sin él, veintiún servicios son un muro. Va en
 * versalita tenue —es un separador, no una oferta— para que lo que se lea siga siendo el servicio. */
/* ⚠️ 13px, no 11,5: «nada bajo 13px» no admite excepción por ser un separador, y el banco lo mide
 * a 320 de ancho. La versalita y el espaciado ya lo distinguen de una oferta sin encogerlo. */
.cfbc-t__svcs-f{margin:12px 0 4px;font-size:13px;font-weight:700;letter-spacing:.06em;
	text-transform:uppercase;color:var(--cafati-texto-tenue)}
.cfbc-t__svcs-l > .cfbc-t__svcs-f:first-child{margin-top:0}
.cfbc-t__svcs-u{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
/* [mb1.560] El pliegue de una familia larga. Se lee como una acción tenue —no compite con los
 * servicios, que son lo que se elige— y su flecha dice que hay algo debajo. */
.cfbc-scope .cfbc-t__svcs-xr{list-style:none;cursor:pointer;padding:6px 8px;font-size:13.5px;
	font-weight:600;color:var(--cafati-purpura);border-radius:var(--cafati-r-md,12px)}
.cfbc-scope .cfbc-t__svcs-xr::-webkit-details-marker{display:none}
.cfbc-scope .cfbc-t__svcs-xr::after{content:' \203A';display:inline-block;transition:transform .15s ease}
.cfbc-scope .cfbc-t__svcs-x[open] .cfbc-t__svcs-xr::after{transform:rotate(90deg)}
.cfbc-scope .cfbc-t__svcs-xr:hover{background:var(--cafati-purpura-tenue)}
.cfbc-scope .cfbc-t__svcs-xr:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-scope a.cfbc-t__op,.cfbc-scope a.cfbc-t__op:link,.cfbc-scope a.cfbc-t__op:visited{
	display:flex;align-items:baseline;justify-content:space-between;gap:10px;
	min-height:40px;padding:6px 8px;border-radius:var(--cafati-r-md,12px);
	text-decoration:none;color:var(--cafati-grafito)}
.cfbc-scope a.cfbc-t__op:hover,.cfbc-scope a.cfbc-t__op:focus{background:var(--cafati-purpura-tenue)}
.cfbc-t__op-n{font-size:13.5px;font-weight:600;color:var(--cafati-grafito)}
.cfbc-t__op-p{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
	white-space:nowrap;color:var(--cafati-verde)}

/* ── [mb1.553] EL RESCATE · aquí no hay horas, pero hay salida ────────────────────────────────
 * Naturaleza distinta ⇒ forma distinta: bandeja propia y filo púrpura. Sin esto se leería como
 * una línea más y el tutor no vería que le están ofreciendo un camino. */
.cfbc-t__alt{margin:12px 0 0;padding:12px 14px;border-radius:var(--cafati-r-lg,16px);
	background:var(--cafati-marfil);border-left:3px solid var(--cafati-purpura)}
.cfbc-t__alt-t{margin:0;font-size:13.5px;color:var(--cafati-texto-tenue)}
.cfbc-t__alt-d{margin:4px 0 0;font-size:15px;line-height:1.35;color:var(--cafati-grafito)}
.cfbc-t__alt-a{margin:10px 0 0}
/* ⚠️ Perfilado, no relleno: el relleno es de «reservar», y esto lleva a CONOCER a alguien.
 * Misma métrica que el resto de acciones, distinto rol. */
.cfbc-scope a.cfbc-t__alt-b,.cfbc-scope a.cfbc-t__alt-b:link,.cfbc-scope a.cfbc-t__alt-b:visited{
	display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;
	border-radius:var(--cafati-r-md,12px);box-sizing:border-box;background:var(--cafati-papel);
	border:1px solid var(--cafati-purpura);color:var(--cafati-purpura);
	font-size:15px;font-weight:700;text-decoration:none}
.cfbc-scope a.cfbc-t__alt-b:hover{background:var(--cafati-purpura-tenue)}
.cfbc-scope a.cfbc-t__alt-b:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
/* ── [mb1.562] EL RIEL DEL PERFIL ─────────────────────────────────────────────────────────────
 * Era un enlace subrayado de 15px cerrando una cartilla de componentes diseñados: «se ve muy
 * simple», y lo era. No pasa a botón porque un botón compite con las horas, que son LA acción de
 * la cartilla; pasa a RIEL —fila entera, línea arriba, flecha a la derecha— que es la forma de
 * decir «hay más por aquí» sin subir de rango. En púrpura, el hilo del tutor. */
.cfbc-t__pie{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--cafati-linea)}
/* 🔴 [mb1.563] NI REJILLA NI CAJA FLEXIBLE: FLUJO NORMAL. Esto era `display:grid` con dos columnas
 * dando por hecho que el nombre y la bajada se apilarían en la primera. En una rejilla CADA HIJO
 * ES UN ITEM: los dos `<span>` se repartieron las columnas —el nombre estrujado en la angosta,
 * partido en tres líneas— y la flecha se cayó a una fila nueva. El `display:block` de los span no
 * lo evita: gobierna su contenido, no dónde los coloca su padre.
 * Dos bloques en flujo se apilan sin que nadie los coloque, y la flecha va posicionada fuera del
 * flujo: así no hay items que repartir ni celdas que adivinar, tampoco el día que se añada una
 * tercera línea. El relleno derecho le reserva su sitio para que nunca pise el texto. */
.cfbc-scope a.cfbc-t__perfil,.cfbc-scope a.cfbc-t__perfil:link,
.cfbc-scope a.cfbc-t__perfil:visited{
	display:block;position:relative;min-height:56px;padding:10px 34px 10px 12px;
	box-sizing:border-box;border-radius:var(--cafati-r-md,12px);
	text-decoration:none;color:var(--cafati-purpura)}
.cfbc-scope a.cfbc-t__perfil:hover{background:var(--cafati-purpura-tenue)}
.cfbc-scope a.cfbc-t__perfil:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
/* La flecha vive en el enlace, no en un nodo aparte: es decoración y no debe leerse en voz alta.
 * Y va POSICIONADA, fuera del flujo, para que el texto disponga del ancho entero. */
.cfbc-scope a.cfbc-t__perfil::after{content:'\203A';position:absolute;right:12px;top:50%;
	transform:translateY(-50%);font-size:22px;line-height:1;color:var(--cafati-purpura)}
/* `text-wrap:balance` reparte el nombre si aun así no cupiera en una línea —«Dra. María José de
 * la Fuente» existe— en vez de dejar una palabra huérfana colgando. */
.cfbc-t__perfil-n{display:block;font-size:15px;font-weight:700;line-height:1.25;
	text-wrap:balance;color:var(--cafati-purpura)}
/* La bajada dice QUÉ HAY DENTRO, así que se lee como dato: tenue, y nunca por debajo de 13px. */
.cfbc-t__perfil-d{display:block;margin-top:2px;font-size:13px;line-height:1.35;
	color:var(--cafati-texto-tenue)}

/* ── [mb1.567] LA PRESENTACIÓN DEL ACUSE ──────────────────────────────────────────────────────
 * El acuse era código, vencimiento y abono: trámite puro en el segundo en que el tutor se pregunta
 * quién va a entrar a su casa. La ficha va sobre papel propio dentro de la bandeja verde para que
 * se lea como una PERSONA y no como otro dato de la reserva. */
.csl-hold-vet{display:flex;align-items:flex-start;gap:14px;margin:14px 0 0;padding:14px;
	background:var(--cafati-papel);border:1px solid var(--cafati-linea);
	border-radius:var(--cafati-r-lg,16px)}
.csl-hold-vet__f{flex:0 0 auto;width:72px;height:72px;border-radius:50%;object-fit:cover;
	background:var(--cafati-menta-tenue)}
.csl-hold-vet__d{min-width:0}
/* El rótulo contesta la pregunta antes de que se lea el nombre. */
.csl-hold-vet__r0{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;
	text-transform:uppercase;color:var(--cafati-texto-tenue)}
.csl-hold-vet__n{margin:2px 0 0;font-size:18px;font-weight:700;line-height:1.25;
	text-wrap:balance;color:var(--cafati-grafito)}
.csl-hold-vet__e{margin:3px 0 0;font-size:14px;line-height:1.35;color:var(--cafati-texto-tenue)}
.csl-hold-vet__r{margin:4px 0 0;font-size:14px;color:var(--cafati-grafito)}
.csl-hold-vet__r b{font-variant-numeric:tabular-nums;color:var(--cafati-grafito)}
.cfbc-scope a.csl-hold-vet__a,.cfbc-scope a.csl-hold-vet__a:link,
.cfbc-scope a.csl-hold-vet__a:visited{display:inline-flex;align-items:center;min-height:44px;
	margin-top:4px;font-size:15px;font-weight:700;text-decoration:none;color:var(--cafati-purpura)}
.cfbc-scope a.csl-hold-vet__a::after{content:' \203A';margin-left:4px;font-size:20px;line-height:1}
.cfbc-scope a.csl-hold-vet__a:hover{text-decoration:underline}
.cfbc-scope a.csl-hold-vet__a:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}

/* ── [mb1.567] LA PUERTA LARGA ────────────────────────────────────────────────────────────────
 * 🔴 `.cfbc-sel__larga` no tenía NI UNA regla: la clase existía y nadie la pintó nunca, así que
 * salía como el enlace subrayado del navegador colgando entre las horas y el panel. Es la misma
 * pieza que «Prefiero por WhatsApp» —la otra puerta— y lleva su misma forma: acción perfilada, en
 * púrpura porque es el hilo del tutor, y no rellena porque no compite con reservar. */
.cfbc-sel__larga{margin:14px 0 0}
.cfbc-scope a.cfbc-sel__larga-a,.cfbc-scope a.cfbc-sel__larga-a:link,
.cfbc-scope a.cfbc-sel__larga-a:visited{display:inline-flex;align-items:center;justify-content:center;
	min-height:48px;padding:0 18px;box-sizing:border-box;border-radius:var(--cafati-r-md,12px);
	background:var(--cafati-papel);border:1px solid var(--cafati-purpura);
	color:var(--cafati-purpura);font-size:15px;font-weight:700;text-decoration:none}
.cfbc-scope a.cfbc-sel__larga-a:hover{background:var(--cafati-purpura-tenue)}
.cfbc-scope a.cfbc-sel__larga-a:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}

/* ── ESCRITORIO · desde aquí se AÑADE, nunca se corrige ──────────────────────────────────── */
@media(min-width:768px){
	.cfbc-t{padding:18px 20px}
	.cfbc-t__avatar{width:72px;height:72px}
	.cfbc-t__iniciales{font-size:26px}
	.cfbc-t__nombre{font-size:20px}
	/* En escritorio hay ancho para poner el precio a la derecha de la identidad, que es la
	 * jerarquía del mockup. En móvil eso mismo apretaría el nombre a dos líneas. */
	.cfbc-t__precio{display:flex;align-items:baseline;gap:8px;justify-content:flex-start}
}
/* [mb1.17] EL AVISO DE ATRASO. Tiene que leerse distinto del resto de la tarjeta o no es un aviso:
   es la única línea que cambia lo que el tutor va a hacer con su próxima media hora.
   Franja lateral en ámbar —el token de «requiere atención», que NO es color de marca— sobre el
   fondo suave, y el texto en el gris del cuerpo para que se lea largo sin cansar. Se declaran
   `font-size` y `line-height` en px porque el tema del sitio pone `html{font-size:10px}` y cualquier
   `rem` aquí saldría a un tercio de su tamaño. */
.csl-status-aviso{border-left:4px solid var(--cafati-atencion);background:var(--cafati-marfil);
	padding:10px 12px;border-radius:0 10px 10px 0;font-size:15px;line-height:1.45;
	color:var(--cafati-grafito)}
.csl-status-aviso strong{color:var(--cafati-grafito)}
@media(min-width:768px){.csl-holdbox{padding:20px}.csl-status-card{padding:20px 22px}}
/* 🔴 [FRONTEND-UI-02 · runtime RC3.3 · CORREGIDO TRAS EL RECHAZO DE LA V2] BLINDAJE DE LOS CONTROLES.
   La escala completa ya está en px arriba: aquí NO se corrige una unidad, se protege una jerarquía.
   Las reglas base de los controles son de una sola clase (`.csl-btn` = 0,1,0) y cualquier tema con
   `.entry-content select{font-size:…}` (0,1,1) las gana. Estas van al FINAL, con dos clases o más,
   y por eso resisten: es el mismo razonamiento que cerró UI-01, aplicado al tamaño.
   Cubre TODOS los controles interactivos del marcado público —button, select, input, a.csl-slot,
   a.csl-cta-wa—, no los cinco que enumeré a mano en la V2: allí se me escaparon `.csl-search select`
   y `.csl-status-form input`, que seguían en 1rem, o sea 10px reales. El banco ya no acepta una lista
   escrita a mano: los DERIVA de `class-csl-shortcode.php`.
   Los `input` y `select` se quedan en 16px TAMBIÉN en móvil: por debajo de 16px iOS hace zoom al
   enfocar un campo y descoloca la página entera. Botones, CTA y slots bajan a 15px, que es el mínimo
   del producto. Scoped en .cfbc-scope, sin !important, sin tocar html/body/tema/admin. */
.cfbc-scope .csl-btn,.cfbc-scope a.csl-btn,.cfbc-scope button.csl-btn,
.cfbc-scope a.csl-cta-wa,.cfbc-scope a.csl-cta-wa.csl-hold-alt{font-size:16px}
.cfbc-scope a.csl-slot{font-size:15px}
.cfbc-scope .csl-holdbox .csl-tel,.cfbc-scope .csl-holdbox .csl-mail,.cfbc-scope .csl-search select,
.cfbc-scope .csl-status-form input{font-size:16px}
/* [mb1.48] El botón «Copiar» entra en esta familia y no en una regla suelta: dentro de `.cfbc-scope`
   el tamaño de los controles se fija con el ámbito delante, y una regla sin él se queda en 14px sin
   avisar. Lo midió el banco de conducta a tres anchos. */
.cfbc-scope .csl-copiar{font-size:15px}
@media(max-width:480px){
.cfbc-scope .csl-btn,.cfbc-scope a.csl-btn,.cfbc-scope button.csl-btn,
.cfbc-scope a.csl-cta-wa,.cfbc-scope a.csl-cta-wa.csl-hold-alt{font-size:15px}
.cfbc-scope a.csl-slot{font-size:15px}
.cfbc-scope .csl-holdbox .csl-tel,.cfbc-scope .csl-holdbox .csl-mail,.cfbc-scope .csl-search select,
.cfbc-scope .csl-status-form input{font-size:16px}
/* [mb1.48] El botón «Copiar» entra en esta familia y no en una regla suelta: dentro de `.cfbc-scope`
   el tamaño de los controles se fija con el ámbito delante, y una regla sin él se queda en 14px sin
   avisar. Lo midió el banco de conducta a tres anchos. */
.cfbc-scope .csl-copiar{font-size:15px}
}
/* 🔴 [FRONTEND-UI-03 · runtime RC3.3] EL SLOT SELECCIONADO QUEDA MARCADO, Y SE VE.
   No existía ningún estado de selección: el tutor elegía una hora y nada en la pantalla lo
   recordaba. La marca la pone el JS (`is-selected` + aria-current="time", una por tarjeta) y aquí
   se pinta: fondo verde de marca con texto blanco (12,47:1, AA de sobra), cubriendo :link/:visited/
   :hover/:focus/:active para que ni el tema ni un estado la degraden. Sin !important.
   El foco visible del slot se declara aparte y con el coral de siempre: la selección es un estado
   del DATO (qué hora quedó elegida) y el foco es un estado del TECLADO; pintarlos igual haría
   indistinguible «estoy parado aquí» de «elegí esto». */
.cfbc-scope a.csl-slot.is-selected,.cfbc-scope a.csl-slot.is-selected:link,
.cfbc-scope a.csl-slot.is-selected:visited,.cfbc-scope a.csl-slot.is-selected:hover,
.cfbc-scope a.csl-slot.is-selected:focus,.cfbc-scope a.csl-slot.is-selected:active{
background:var(--csl-verde);color:#fff}
.cfbc-scope a.csl-slot:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.23] FICHA DE SERVICIO · `CSL_Servicio_Tarjeta`
 * ══════════════════════════════════════════════════════════════════════════════════════════════
 * MÓVIL PRIMERO, y aquí se mide: TODAS las reglas de layout de `.cfbc-s` viven fuera de cualquier
 * `@media`. La consulta de escritorio de abajo solo AÑADE. Si el layout base viviera dentro de
 * ella, en un teléfono —la prioridad declarada del proyecto— la ficha se vería sin vestir.
 *
 * LA FOTO RESERVA SU SITIO. `aspect-ratio` más `width`/`height` en el `<img>`: el navegador sabe
 * cuánto alto ocupará antes de descargarla, así que el texto no salta. Sin eso, en una red lenta
 * el visitante toca donde había un botón hace 200 ms.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-s{display:block;background:var(--cafati-papel);border:1px solid var(--cafati-linea);
	border-radius:16px;overflow:hidden}
.cfbc-s--destacado{border-color:var(--cafati-verde);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.cfbc-s__foto{margin:0;background:var(--cafati-marfil)}
.cfbc-s__foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* [mb1.518] La gráfica de marca se ve ENTERA (`contain`), más baja que una foto y con aire: es un
 * dibujo con forma propia, no un fondo que se recorta. Sobre menta tenue, que es el neutro cálido
 * de la casa — en la tarjeta de una despedida, sobriedad sin vacío. */
.cfbc-s__foto--marca{background:var(--cafati-menta-tenue);
	border-bottom:1px solid var(--cafati-linea)}
.cfbc-s__foto--marca img{aspect-ratio:16/7;object-fit:contain;padding:18px 0;box-sizing:border-box}
.cfbc-s__cuerpo{padding:14px 16px 16px}
/* Serif en el nombre: es la voz de la marca en el sistema de diseño, y distingue el catálogo de
 * un panel técnico — que es exactamente lo que el tutor NO debe percibir. */
.cfbc-s__nombre{font-family:var(--cafati-fuente-ed);font-size:19px;line-height:1.25;margin:0;
	color:var(--cafati-grafito);font-weight:600}
.cfbc-s__meta{margin:6px 0 0;font-size:14px;color:var(--cafati-texto-tenue)}
.cfbc-s__precio{margin:10px 0 0;font-size:15px}
.cfbc-s__precio-etq{color:var(--cafati-texto-tenue)}
.cfbc-s__precio-val{font-size:22px;font-weight:700;color:var(--cafati-grafito)}
.cfbc-s__precio--consultar{font-size:15px;color:var(--cafati-texto-tenue)}
.cfbc-s__desc{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--cafati-grafito)}
/* 🔴 44 px, misma razón que la ficha de hora: es la acción, y se toca con el pulgar en la calle.
 * Ancho completo en móvil porque en una columna de 375 px un botón centrado y estrecho obliga a
 * apuntar; ocupando el ancho no hay dónde fallar. */
.cfbc-s__cta{display:flex;align-items:center;justify-content:center;min-height:44px;
	margin:14px 0 0;padding:0 16px;border-radius:12px;font-size:16px;font-weight:600;
	text-decoration:none;background:var(--cafati-verde);color:var(--cafati-papel);
	border:1px solid var(--cafati-verde)}
.cfbc-s__cta:hover,.cfbc-s__cta:focus{background:var(--cafati-verde-suave);
	border-color:var(--cafati-verde-suave);color:var(--cafati-papel)}
.cfbc-s__cta:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}

/* ── ESCRITORIO · desde aquí se AÑADE, nunca se corrige ──────────────────────────────────── */
@media(min-width:768px){
	.cfbc-s__cuerpo{padding:16px 20px 20px}
	.cfbc-s__nombre{font-size:21px}
	/* Con ancho, el botón deja de ocupar la fila entera: al lado del precio la ficha respira y
	 * la rejilla de servicios no parece una pila de botones. */
	.cfbc-s__cta{display:inline-flex;align-self:flex-start}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.29] P03 · PÁGINA DE COMUNA · `/veterinario-a-domicilio/{comuna}/`
 * ══════════════════════════════════════════════════════════════════════════════════════════════
 * MÓVIL PRIMERO Y MEDIDO: todo el layout vive fuera de `@media`. La consulta de escritorio solo
 * convierte las pilas en rejilla. Si la rejilla fuera la base, en un teléfono —la prioridad
 * declarada del proyecto— las tarjetas se aplastarían en columnas de 100 px.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 LA TIPOGRAFÍA DEL CUERPO SE DECLARA AQUÍ, y su ausencia fue un defecto medido.
 *
 * Esta página emite su propio documento, así que **no hay tema debajo que ponga una fuente**.
 * `.cfbc-scope` solo la fija para encabezados, de modo que el cuerpo caía en el serif por defecto
 * del navegador: `font-family: "Times New Roman"`, medido en producción el 14-ago-2026. Dentro del
 * tema nunca se vio, porque el tema la ponía por nosotros.
 *
 * Es la misma clase de defecto que el marco propio del Portal destapó: **nuestras superficies
 * públicas se apoyaban en el CSS del tema sin saberlo.** Cada documento propio tiene que declarar
 * su propia base. */
/* 🔴 [mb1.35] `margin:0` MATABA EL CENTRADO DE TODA LA PÁGINA, en producción, hoy.
 * `.cfbc-scope` centra con `margin:0 auto` y esta regla —misma especificidad (0,1,0), pero más
 * abajo en la hoja— lo pisaba con `margin:0`. Efecto: en cualquier pantalla de más de 1080px la
 * vitrina entera quedaba pegada al borde izquierdo con medio metro de marfil a la derecha.
 *
 * Tercera variante de la misma familia en un día: la primera fue especificidad (`.cfbc-scope a`
 * contra un botón), la segunda un atajo que se comía un `padding`, y esta es ORDEN DE FUENTE
 * entre dos reglas empatadas. Se arregla anulando solo lo que hay que anular —el margen
 * vertical— y dejando el horizontal en `auto`, que es de quien era. */
.cfbc-c{background:var(--cafati-marfil);margin:0 auto;font-family:var(--cafati-fuente);
	color:var(--cafati-grafito);line-height:1.5;-webkit-font-smoothing:antialiased}
/* Y los titulares recuperan la serif editorial: `.cfbc-scope h1` pesa (0,1,1) y le ganaba a
 * `.cfbc-c__h1` (0,1,0), así que el H1 salía en Inter. Se iguala con dos clases —(0,2,0)— en vez
 * de apilar `!important`, que es como se llega a un CSS que nadie puede tocar. SEGUNDA vez que
 * este mismo choque de especificidad muerde: la primera dejó invisible la pestaña del Portal. */
.cfbc-c .cfbc-c__h1,.cfbc-c .cfbc-c__h2{font-family:var(--cafati-fuente-ed)}
.cfbc-c__main{max-width:1080px;margin:0 auto;padding:16px}
.cfbc-c__h1{font-family:var(--cafati-fuente-ed);font-size:26px;line-height:1.2;margin:16px 0 0;
	color:var(--cafati-grafito);font-weight:600}
.cfbc-c__h2{font-family:var(--cafati-fuente-ed);font-size:20px;line-height:1.25;margin:0 0 12px;
	color:var(--cafati-grafito);font-weight:600}
/* [mb1.94] Bajada de sección. Nace para decir que las fichas de servicio se PUEDEN PULSAR: un
 * bloque que antes era informativo pasó a ser navegable y nada en la pantalla lo anunciaba. Va
 * pegada al h2 —margen negativo arriba no, simplemente el h2 pierde su margen cuando la precede—
 * porque titular y bajada son una sola unidad de lectura. */
.cfbc-c__h2 + .cfbc-c__sub{margin:-8px 0 14px}
.cfbc-c__sub{margin:0 0 14px;font-size:15px;line-height:1.45;color:var(--cafati-texto-tenue)}
/* La advertencia clínica NO es decoración: usa el ámbar, que el sistema reserva para «requiere
 * atención», y va antes de cualquier oferta. Se lee primero que el precio a propósito. */
/* El fondo sale del PAPEL y el ámbar queda en el borde: `--cafati-atencion-suave` NO EXISTE en
 * los tokens —solo hay variantes «suave» de verde y púrpura— y usarla habría dejado una variable
 * huérfana, que el navegador no reporta: simplemente no pinta el fondo. Es el mismo defecto que
 * costó `--cfbc-sombra` y que el banco de tokens vigila desde entonces. */
.cfbc-c__clinica{margin:14px 0 0;padding:12px 14px;border-radius:12px;font-size:14px;
	line-height:1.45;background:var(--cafati-papel);color:var(--cafati-grafito);
	border:1px solid var(--cafati-atencion);border-left-width:4px}
.cfbc-c__sec{margin:28px 0 0}
.cfbc-c__grid{display:flex;flex-direction:column;gap:14px}
.cfbc-c__aviso{background:var(--cafati-papel);border:1px solid var(--cafati-linea);
	border-radius:16px;padding:16px}
.cfbc-c__aviso p{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--cafati-grafito)}
/* Las tres salidas del contrato, apiladas y táctiles: cuando no hay hora que ofrecer, estas SON
 * la pantalla, no un pie de página. */
.cfbc-c__salidas{display:flex;flex-direction:column;gap:8px;margin:0}
.cfbc-c__salidas a{display:flex;align-items:center;min-height:44px;padding:0 14px;
	border-radius:12px;background:var(--cafati-marfil);border:1px solid var(--cafati-linea);
	color:var(--cafati-verde);text-decoration:none;font-size:15px;font-weight:600}
.cfbc-c__cta-final{margin:28px 0 32px}
.cfbc-c__cta{display:flex;align-items:center;justify-content:center;min-height:52px;
	border-radius:14px;background:var(--cafati-verde);color:var(--cafati-papel);
	text-decoration:none;font-size:17px;font-weight:700;padding:0 18px}
/* 🔴 [0.4.0-mb1.34] FRONTEND-UI-01, OTRA VEZ — y esta vez lo escribí yo, 380 líneas debajo del
 * comentario que ya explicaba cómo evitarlo.
 *
 * Encontrado MIRANDO PRODUCCIÓN, no en la suite: el botón «Buscar horas en La Reina» —el único que
 * la página existe para que alguien pulse— era un rectángulo verde SIN TEXTO. `.cfbc-c__cta` es un
 * selector de clase (0,1,0) y `.cfbc-scope a{color:var(--csl-verde)}` es (0,1,1): gana el genérico,
 * el enlace toma el verde y queda verde sobre verde. Contraste 1.00.
 *
 * Ningún banco podía verlo: **la suite mide hojas por separado y esto solo existe cuando la cascada
 * resuelve las dos reglas juntas en una página real.** Es una clase de defecto que solo el navegador
 * observa, y por eso ahora el gate del generador la busca de forma estática (ver `$colisiones`).
 *
 * Se arregla como manda la convención de la línea 60: subir la especificidad DENTRO del ámbito
 * (`.cfbc-scope a.cfbc-c__cta` = 0,2,1), sin `!important` y sin tocar ninguna regla global. */
.cfbc-scope a.cfbc-c__cta,.cfbc-scope a.cfbc-c__cta:link,
.cfbc-scope a.cfbc-c__cta:visited{color:var(--cafati-papel);text-decoration:none}
.cfbc-c__cta:hover,.cfbc-c__cta:focus{background:var(--cafati-verde-suave);color:var(--cafati-papel)}
.cfbc-scope a.cfbc-c__cta:hover,.cfbc-scope a.cfbc-c__cta:focus{color:var(--cafati-papel)}
.cfbc-c__cta:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
/* [mb1.512] El CTA final pasa a DOS acciones apiladas: reservar (se toma: sólida) y buscar horas
 * en la página (alternativa: perfilada). Misma métrica, rol distinto — §8.12 «armónico no es
 * idéntico». El color del enlace se fija con ámbito (.cfbc-scope a…) por la MISMA colisión que
 * dejó invisible al CTA original: el genérico `.cfbc-scope a` es (0,1,1) y una clase sola pierde. */
.cfbc-c__cta-final{display:grid;gap:10px;max-width:420px}
.cfbc-c__cta-alt{display:flex;align-items:center;justify-content:center;min-height:48px;
	border-radius:14px;background:var(--cafati-marfil);border:1px solid var(--cafati-linea);
	font-size:15px;font-weight:700;padding:0 18px}
.cfbc-scope a.cfbc-c__cta-alt,.cfbc-scope a.cfbc-c__cta-alt:link,
.cfbc-scope a.cfbc-c__cta-alt:visited{color:var(--cafati-verde);text-decoration:none}
.cfbc-c__cta-alt:hover,.cfbc-c__cta-alt:focus{border-color:var(--cafati-verde)}
.cfbc-c__cta-alt:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
/* [mb1.513] La familia plegada: el resumen es una ACCIÓN perfilada (misma métrica que los chips,
 * otro rol) y las variantes son FILAS con el precio en columna. El «Ver horas» de cada fila va
 * en púrpura: es la elección del tutor, el mismo hilo del agendador. */
/* [mb1.515] Las fichas de una fila comparten altura y su acción queda ABAJO, alineada: una
 * columna con botones a distintas alturas se lee como desorden. `margin-top:auto` empuja el
 * bloque de acción al pie sin fijar alturas a mano. */
.cfbc-c__grid .cfbc-s{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.cfbc-c__grid .cfbc-s__cuerpo{display:flex;flex-direction:column;flex:1 1 auto}
.cfbc-c__grid .cfbc-s__cta{margin-top:auto}
/* 🔴 [mb1.566] Y CON SU AIRE, QUE `auto` SE COMÍA. La regla base del botón declara `margin:14px 0
 * 0`; esta línea de arriba lo sustituye, y `auto` no significa «al menos» sino «todo el sobrante»:
 * con una descripción larga que llena la tarjeta no sobra nada, resuelve a CERO y el botón queda
 * pegado al texto. Medido en La Reina: 0px en dos fichas de cuatro.
 *
 * El suelo va en el elemento que PRECEDE al botón porque entre hermanos de una caja flexible los
 * márgenes no se colapsan: se suma a lo que `auto` reparta, así que hay aire sobre espacio y sin
 * él. Se conservan las dos intenciones —alinear los botones y separarlos del texto— en vez de
 * sacrificar una.
 *
 * La primera regla cubre el caso general (`:has` elige justo al vecino de arriba); la segunda deja
 * cubierta la descripción aunque `:has` no estuviera disponible, que es el caso de casi todas. */
.cfbc-c__grid .cfbc-s__cuerpo > *:has(+ .cfbc-s__cta){margin-bottom:var(--cafati-e-3)}
.cfbc-c__grid .cfbc-s__desc{margin-bottom:var(--cafati-e-3)}
/* [mb1.564] Y LA CARTILLA DE PROFESIONAL, IGUAL. La rejilla estira las dos a la altura de la más
 * alta, así que la que tiene menos horas acababa con 76px de blanco bajo su riel —medido en La
 * Reina— contra los 19 de relleno natural de su vecina. Un hueco así no se lee como aire, se lee
 * como que falta algo. Con el riel anclado abajo el sobrante queda DENTRO de la tarjeta, donde sí
 * es respiro, y los dos rieles quedan alineados: es lo que hace que parezcan hermanas.
 * ⚠️ En el móvil la rejilla es una columna y no estira a nadie, así que esto no mueve nada. */
.cfbc-c__grid > .cfbc-t{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.cfbc-c__grid > .cfbc-t .cfbc-t__pie{margin-top:auto}
.cfbc-s__mas{margin-top:10px}
/* [mb1.532] El desplegable es una ACCIÓN del tutor: púrpura sobre lila, no verde sobre marfil. */
.cfbc-s__mas summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;
	padding:0 14px;border:1px solid color-mix(in srgb, var(--cafati-purpura) 18%, var(--cafati-linea));
	border-radius:10px;background:var(--cafati-purpura-tenue);
	font-size:14px;font-weight:700;color:var(--cafati-purpura);cursor:pointer;list-style:none}
.cfbc-s__mas summary::-webkit-details-marker{display:none}
.cfbc-s__mas summary::after{content:"▾";font-size:13px}
.cfbc-s__mas[open] summary::after{content:"▴"}
.cfbc-s__mas summary:hover{border-color:var(--cafati-verde)}
.cfbc-s__mas summary:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.526] DOS COLUMNAS EN ESCRITORIO. El selector manda; las razones acompañan.
 * En móvil hay UNA columna y las razones quedan plegadas: quien viene a reservar no debe pagar
 * una pantalla de scroll por una objeción que todavía no tiene.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-c__cols{display:block}
/* 🔴 [mb1.528] `cfbc-razones`, no `cfbc-conf`: ese prefijo pertenece a la tira de compromisos y
 * estas reglas se la comieron —cuatro cajas mudas en producción—. Un prefijo es un dueño. */
.cfbc-razones{margin:16px 0 8px;border:1px solid var(--cafati-linea);border-radius:14px;
	background:var(--cafati-papel);box-sizing:border-box}
.cfbc-razones__t{display:flex;align-items:center;justify-content:space-between;gap:10px;
	min-height:52px;padding:0 16px;font-size:15px;font-weight:700;color:var(--cafati-verde);
	cursor:pointer;list-style:none}
.cfbc-razones__t::-webkit-details-marker{display:none}
.cfbc-razones__t::after{content:"▾";font-size:13px}
.cfbc-razones[open] .cfbc-razones__t::after{content:"▴"}
.cfbc-razones__t:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-razones__in{padding:0 12px 12px}
@media (min-width:1000px){
	/* El selector se queda con el ancho útil; las razones ocupan una columna que hoy se
	 * desperdiciaba, y se pegan al hacer scroll para seguir acompañando la elección. */
	.cfbc-c__cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
	.cfbc-c__col-s{position:sticky;top:20px}
	/* En escritorio no hay nada que plegar: el resumen se retira y el contenido se revela. Se
	 * fuerza el `display` porque un `<details>` cerrado oculta a sus hijos por comportamiento del
	 * navegador, no por una regla de esta hoja. */
	.cfbc-razones__t{display:none}
	.cfbc-razones .cfbc-razones__in{padding:0}
	.cfbc-razones{border:0;background:transparent;margin:24px 0 0}
	/* La tira de compromisos pasa a pila vertical: en 300px, cuatro columnas no caben. */
	.cfbc-razones .cfbc-conf{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.523] «ELIGE Y MIRA» — el selector que sustituye al buscador de tres campos.
 * Lenguaje del agendador: púrpura para lo que el tutor ELIGE, material en la dirección del gesto
 * (se toma ⇒ se eleva), misma métrica entre piezas del mismo rango y estado visible sin ratón.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
/* [mb1.532] Sobre LILA TENUE, no sobre papel: la herramienta se despega del marfil de la página y
 * se lee como una pieza propia. El canto superior en púrpura la firma sin gritar. */
.cfbc-sel{position:relative;overflow:hidden;margin:24px 0 8px;padding:20px;border-radius:18px;
	background:var(--cafati-purpura-tenue);
	border:1px solid color-mix(in srgb, var(--cafati-purpura) 14%, var(--cafati-linea));
	box-sizing:border-box;
	box-shadow:0 2px 6px color-mix(in srgb, var(--cafati-grafito) 8%, transparent),
	           0 16px 36px color-mix(in srgb, var(--cafati-grafito) 10%, transparent)}
.cfbc-sel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
	background:var(--cafati-purpura)}
.cfbc-sel__t{margin:0 0 4px;font-size:23px;line-height:1.2;font-weight:800;color:var(--cafati-verde)}
.cfbc-sel__sub{margin:0 0 16px;font-size:15px;color:var(--cafati-texto-tenue)}
.cfbc-sel__svcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
/* La ficha se TOMA: se eleva. El elegido lleva varias señales a la vez —borde, anillo y disco—
 * porque en un teléfono no hay `:hover` que ayude a distinguirlo. */
.cfbc-scope a.cfbc-sel__svc,.cfbc-scope a.cfbc-sel__svc:link,.cfbc-scope a.cfbc-sel__svc:visited{
	display:flex;flex-direction:column;gap:2px;padding:0 0 10px;overflow:hidden;
	border:1px solid var(--cafati-linea);border-radius:14px;background:var(--cafati-papel);
	color:var(--cafati-grafito);text-decoration:none;box-sizing:border-box;
	box-shadow:0 1px 2px color-mix(in srgb, var(--cafati-grafito) 8%, transparent)}
.cfbc-sel__svc-f{display:block;background:var(--cafati-marfil)}
.cfbc-sel__svc-f img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cfbc-sel__svc-n{padding:8px 12px 0;font-size:14px;font-weight:700;line-height:1.25}
/* [mb1.524] El precio se ancla al PIE: los nombres tienen largos muy distintos y las cifras
 * quedaban a distinta altura, obligando a leerlas de una en una en vez de compararlas de un
 * barrido. `margin-top:auto` las alinea sin fijar alturas a mano. */
.cfbc-sel__svc-p{padding:6px 12px 0;margin-top:auto;font-size:14px;font-weight:800;
	color:var(--cafati-verde);font-variant-numeric:tabular-nums}
.cfbc-sel__svc:hover{border-color:var(--cafati-purpura);
	box-shadow:0 4px 10px color-mix(in srgb, var(--cafati-grafito) 12%, transparent)}
.cfbc-sel__svc:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-scope a.cfbc-sel__svc.is-on{border-color:var(--cafati-purpura);
	box-shadow:var(--cafati-anillo-foco),0 6px 16px color-mix(in srgb, var(--cafati-purpura) 18%, transparent)}
/* El glifo dice «esto está elegido» — un color solo diría «este es distinto». */
.cfbc-sel__svc.is-on .cfbc-sel__svc-n::after{content:" ✓";color:var(--cafati-purpura);font-weight:800}
/* 🔴 [mb1.535] EL MARCO DE SENSIBILIDAD de la despedida. Dirección: «las eutanasias siempre tienen
 * que tener un marco especial». No es decoración: es lo que permite que quien busca vacunas pase
 * de largo sin tropezar con la palabra, y que quien viene por esto reconozca su sitio sin leer.
 * Púrpura suave y un filo lateral —el mismo recurso que la familia de despedida en el paso 2 del
 * agendador—: sobrio, sin alegría fingida y sin esconderse. */
.cfbc-scope a.cfbc-sel__svc--sensible,.cfbc-scope a.cfbc-sel__svc--sensible:link,
.cfbc-scope a.cfbc-sel__svc--sensible:visited{background:var(--cafati-purpura-suave);
	border-color:color-mix(in srgb, var(--cafati-purpura) 26%, var(--cafati-papel));
	box-shadow:inset 3px 0 0 var(--cafati-purpura)}
.cfbc-sel__svc--sensible .cfbc-sel__svc-f{background:var(--cafati-purpura-suave)}
.cfbc-sel__svc--sensible .cfbc-sel__svc-p{color:var(--cafati-purpura)}
/* [mb1.565] El MISMO marco en la ficha grande. Vivía solo en los chips, y una norma que cumple una
 * de las dos superficies que muestran el mismo servicio no es una norma. Fondo púrpura suave y el
 * precio en púrpura: la ficha se distingue de sus vecinas ANTES de que se lea el nombre, que es
 * justo lo que se busca — nadie debería tropezar con esto sin aviso. */
.cfbc-s--sensible{background:var(--cafati-purpura-suave)}
.cfbc-s--sensible .cfbc-s__foto{background:var(--cafati-purpura-suave)}
.cfbc-s--sensible .cfbc-s__precio-val{color:var(--cafati-purpura)}
/* [mb1.536] LA SEÑAL DE ESPERA, con el mismo anillo del agendador (§8.12): la espera ES el
 * mensaje, y sin movimiento no se distingue de una pantalla colgada. Mientras uno trabaja los
 * demás se apagan — si el tutor puede pulsar otra cosa, va a hacerlo. */
.cfbc-sel.is-esperando .cfbc-sel__svc:not(.is-cargando),
.cfbc-sel.is-esperando .cfbc-sel__dia:not(.is-cargando),
.cfbc-sel.is-esperando .cfbc-sel__hora{opacity:.45;pointer-events:none}
.cfbc-sel__svc.is-cargando,.cfbc-sel__dia.is-cargando,.cfbc-sel__hora.is-cargando{position:relative}
.cfbc-sel__svc.is-cargando::after,.cfbc-sel__dia.is-cargando::after,
.cfbc-sel__hora.is-cargando::after{content:"";position:absolute;top:8px;right:8px;
	width:16px;height:16px;border-radius:50%;
	border:2px solid color-mix(in srgb, var(--cafati-purpura) 30%, transparent);
	border-top-color:var(--cafati-purpura);animation:cfbc-gira .7s linear infinite}
/* En los chips oscuros el anillo va en papel, o no se vería sobre su propio color. */
.cfbc-sel__dia.is-on.is-cargando::after,.cfbc-sel__hora.is-cargando::after{
	border-color:color-mix(in srgb, var(--cafati-papel) 45%, transparent);
	border-top-color:var(--cafati-papel)}
@media (prefers-reduced-motion: reduce){
	/* Quien pidió menos movimiento conserva la señal: el anillo no gira, pero el resto sigue
	 * apagado y el pulsado sigue marcado. */
	.cfbc-sel__svc.is-cargando::after,.cfbc-sel__dia.is-cargando::after,
	.cfbc-sel__hora.is-cargando::after{animation:none}
}
/* [mb1.545] El servicio ya elegido, en una línea: rótulo, nombre y la salida para cambiarlo. Se
 * lee como un HECHO —placa rellena— con su acción al lado, no como un botón más. */
.cfbc-sel__elegido{margin:0}
.cfbc-sel__elegido summary{display:flex;align-items:center;gap:10px;min-height:52px;
	padding:0 14px;border-radius:12px;cursor:pointer;list-style:none;box-sizing:border-box;
	background:var(--cafati-purpura-suave);
	border:1px solid color-mix(in srgb, var(--cafati-purpura) 22%, var(--cafati-papel))}
.cfbc-sel__elegido summary::-webkit-details-marker{display:none}
.cfbc-sel__elegido summary:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-sel__elegido__r{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
	color:var(--cafati-texto-tenue)}
.cfbc-sel__elegido__n{flex:1 1 auto;min-width:0;font-size:15px;font-weight:800;
	color:var(--cafati-purpura);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfbc-sel__elegido__c{flex:0 0 auto;font-size:13.5px;font-weight:800;color:var(--cafati-purpura);
	text-decoration:underline}
.cfbc-sel__elegido[open] .cfbc-sel__elegido__c::after{content:" ▴"}
.cfbc-sel__elegido:not([open]) .cfbc-sel__elegido__c::after{content:" ▾"}
.cfbc-sel__elegido__in{margin-top:12px}
.cfbc-sel__mas{margin-top:10px}
.cfbc-sel__mas summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;
	font-size:14px;font-weight:700;color:var(--cafati-purpura);cursor:pointer;list-style:none}
.cfbc-sel__mas summary::-webkit-details-marker{display:none}
.cfbc-sel__mas summary::after{content:"▾";font-size:13px}
.cfbc-sel__mas[open] summary::after{content:"▴"}
.cfbc-sel__mas summary:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-sel__mas .cfbc-sel__svcs{margin-top:8px}
/* El día: misma métrica entre chips y campo, distinto rol. */
.cfbc-sel__dias{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;
	padding-top:16px;border-top:1px solid var(--cafati-linea)}
.cfbc-scope a.cfbc-sel__dia,.cfbc-scope a.cfbc-sel__dia:link,.cfbc-scope a.cfbc-sel__dia:visited{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
	min-width:74px;min-height:52px;padding:0 12px;border-radius:12px;box-sizing:border-box;
	border:1px solid var(--cafati-linea);background:var(--cafati-marfil);
	color:var(--cafati-grafito);text-decoration:none}
.cfbc-sel__dia b{font-size:14px;font-weight:700;line-height:1}
.cfbc-sel__dia small{font-size:13px;color:var(--cafati-texto-tenue);font-variant-numeric:tabular-nums}
/* ══ [mb1.702] «FALTA UN PASO» · los datos que el tutor adelanta ══════════════════════════════
 *
 * 🔴 NO ES UNA ALARMA. Su reserva está hecha y el bloque lo dice en su primera frase; en rojo
 * convertiría una buena noticia en un susto justo cuando alguien acaba de confiarnos una visita.
 * Se distingue por FORMA —caja propia, borde morado, fondo claro— y no por color de aviso.
 *
 * El morado es el color de la marca en el embudo: dice «esto es de Cafati y es el siguiente paso»,
 * no «esto va mal». */
/* [mb1.710] El borde sube a 2px y el bloque gana aire: es la pieza que manda en esta pantalla, y
   una caja de 1px al lado de un codigo con borde de 2 se leia como lo secundario. */
.cfbc-rv__datos{margin:var(--cafati-e-4) 0 0;padding:var(--cafati-e-4);border-radius:16px;
	background:var(--cafati-purpura-tenue);border:2px solid var(--cafati-purpura);
	text-align:left}
/* 🔴 [mb1.710] Y EL TITULO DE LOS DATOS PASA A PESAR MAS QUE EL CODIGO (21 vs 24 del codigo, pero
   con 800 de peso y a ancho completo: manda el bloque, no el numero). Antes pesaba menos que un
   dato que solo hay que guardar. */
.cfbc-rv__datos-t{margin:0;font-size:21px;font-weight:800;color:var(--cafati-purpura);
	line-height:1.22;letter-spacing:-.01em}
.cfbc-rv__datos-h{margin:6px 0 var(--cafati-e-3);font-size:15px;line-height:1.55;
	color:var(--cafati-grafito)}
.cfbc-rv__datos-err{margin:0 0 var(--cafati-e-3);padding:10px 12px;border-radius:10px;
	background:var(--cafati-papel);border:1px solid var(--cafati-problema);
	color:var(--cafati-problema-texto);font-size:14px;line-height:1.5}
/* Los campos: etiqueta encima —nunca dentro— y 44px de alto. Un `placeholder` que hace de etiqueta
   desaparece al escribir y deja al tutor sin saber qué estaba rellenando. */
.cfbc-rv__campo{display:block;margin:0 0 var(--cafati-e-3)}
.cfbc-rv__campo > span{display:block;margin-bottom:5px;font-size:14.5px;font-weight:600;
	color:var(--cafati-grafito)}
.cfbc-rv__campo > span > i{font-style:normal;color:var(--cafati-purpura);font-weight:700}
.cfbc-rv__campo input,.cfbc-rv__campo textarea{width:100%;min-height:48px;padding:11px 13px;
	border:1px solid var(--cafati-linea);border-radius:10px;background:var(--cafati-papel);
	font-family:inherit;font-size:16px;line-height:1.4;color:var(--cafati-grafito)}
/* 16px en el input NO es capricho: por debajo de eso Safari en iPhone hace zoom al enfocar y
   descoloca la pantalla entera. */
.cfbc-rv__campo textarea{min-height:84px;resize:vertical}
.cfbc-rv__campo input:focus-visible,.cfbc-rv__campo textarea:focus-visible{
	outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-rv__datos-mas{margin:0 0 var(--cafati-e-3)}
.cfbc-rv__datos-mas > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
	font-size:14.5px;font-weight:600;color:var(--cafati-purpura)}
.cfbc-rv__datos-go{width:100%;justify-content:center}
.cfbc-rv__datos-pie{margin:var(--cafati-e-2) 0 0;font-size:13.5px;line-height:1.5;
	color:var(--cafati-texto-tenue);text-align:center}
/* Ya los dio: verde de HECHO, apagado. No compite con nada porque no pide nada. */
.cfbc-rv__datos--ok{background:var(--cafati-menta-tenue);border-color:var(--cafati-exito)}
.cfbc-rv__datos--ok .cfbc-rv__datos-t{color:var(--cafati-exito);font-size:17px}

/* ══ [mb1.697] EL SELECTOR DE SERVICIOS DEL PERFIL ════════════════════════════════════════════
 *
 * La despedida va en su propio recuadro, con marco y una frase que la acompaña. NO es decoración:
 * la doctrina del proyecto dice que la eutanasia nunca se presenta como una familia más ni como una
 * lista de precios, y una pastilla suelta entre las vacunas es exactamente eso.
 *
 * Sin color de alarma —esto no es un problema— y sin la trama del resto: el borde y el aire bastan
 * para decir que es otra cosa. */
.cfbc-p9__svcmas{margin-top:10px}
.cfbc-p9__svcmas > summary{cursor:pointer;font-size:14.5px;font-weight:600;
	color:var(--cafati-verde);padding:8px 0;min-height:44px;display:flex;align-items:center}
.cfbc-p9__desp{margin-top:16px;padding:14px 16px;border-radius:12px;
	border:1px solid var(--cafati-linea);background:var(--cafati-papel)}
.cfbc-p9__desp-t{margin:0;font-size:15px;font-weight:700;color:var(--cafati-verde)}
.cfbc-p9__desp-h{margin:4px 0 10px;font-size:13.5px;line-height:1.5;color:var(--cafati-texto-tenue)}

/* [mb1.695] El chip de UNA línea —del tercer día en adelante, cuando la etiqueta ya ES la fecha— se
 * centra en vez de dejar el hueco del renglón que ya no se pinta. */
.cfbc-sel__dia--solo{justify-content:center}
.cfbc-sel__dia--solo b{font-size:14.5px}
.cfbc-sel__dia:hover{border-color:var(--cafati-purpura)}
.cfbc-sel__dia:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-scope a.cfbc-sel__dia.is-on{background:var(--cafati-purpura);border-color:var(--cafati-purpura);
	color:var(--cafati-papel)}
.cfbc-scope a.cfbc-sel__dia.is-on small{color:color-mix(in srgb, var(--cafati-papel) 82%, transparent)}
.cfbc-sel__otro{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.cfbc-sel__otro label{font-size:13px;font-weight:700;color:var(--cafati-texto-tenue)}
/* El campo se LLENA: se hunde. Foco púrpura, igual que en el agendador. */
.cfbc-sel__otro input[type="date"]{min-height:44px;padding:0 12px;border-radius:10px;
	border:1px solid var(--cafati-linea);font-size:16px;box-sizing:border-box;
	background:color-mix(in srgb, var(--cafati-purpura) 4%, var(--cafati-papel));
	color:var(--cafati-grafito);
	box-shadow:inset 0 1px 2px color-mix(in srgb, var(--cafati-grafito) 8%, transparent)}
.cfbc-sel__otro input[type="date"]:focus{outline:none;
	border-color:color-mix(in srgb, var(--cafati-purpura) 62%, var(--cafati-papel));
	box-shadow:var(--cafati-anillo-foco)}
.cfbc-sel__b{min-height:44px;padding:0 18px;border:0;border-radius:12px;cursor:pointer;
	background:var(--cafati-verde);color:var(--cafati-papel);font-size:15px;font-weight:700;
	font-family:inherit;
	box-shadow:inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 26%, transparent),
	           inset 0 -2px 0 color-mix(in srgb, var(--cafati-grafito) 16%, transparent)}
.cfbc-sel__b:hover{background:var(--cafati-verde-accion)}
.cfbc-sel__b:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
/* [mb1.525] Las horas del día, dentro del propio selector. El chip de hora usa la MÉTRICA del
 * agendador (48px, radio 12, cifras tabulares) porque es la misma decisión en otra pantalla, y
 * el verde dice «esto es una hora vigente» — el púrpura queda para lo que el tutor ELIGE. */
.cfbc-sel__horas{margin-top:22px;padding-top:20px;border-top:1px solid var(--cafati-linea);
	/* [mb1.528] 150px: al aterrizar aquí siguen viéndose los chips de día y el canto del
	 * selector, así que el tutor ve que la herramienta le respondió, no que la página se
	 * fue a otra parte. Con 90px el bloque quedaba pegado al borde superior. */
	scroll-margin-top:150px}
.cfbc-sel__horas-t{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--cafati-verde)}
.cfbc-sel__chips{display:flex;flex-wrap:wrap;gap:8px}
/* 🔴 [mb1.532] PÚRPURA, y la regla lo decía con estas palabras: «púrpura → foco de campos, CHIPS
 * DE HORA, adicional elegido, botón que cierra». Los pinté verdes y rompí el hilo del recorrido:
 * el verde es lo que la empresa declara; la hora es lo que el tutor toma. */
.cfbc-scope a.cfbc-sel__hora,.cfbc-scope a.cfbc-sel__hora:link,.cfbc-scope a.cfbc-sel__hora:visited{
	display:inline-flex;align-items:center;justify-content:center;min-width:72px;min-height:48px;
	padding:0 14px;border-radius:12px;box-sizing:border-box;background:var(--cafati-purpura);
	color:var(--cafati-papel);text-decoration:none;font-size:16px;font-weight:700;
	font-variant-numeric:tabular-nums;
	box-shadow:inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 22%, transparent),
	           inset 0 -2px 0 color-mix(in srgb, var(--cafati-grafito) 18%, transparent),
	           0 4px 10px color-mix(in srgb, var(--cafati-purpura) 24%, transparent)}
.cfbc-sel__hora:hover{background:color-mix(in srgb, var(--cafati-purpura) 88%, var(--cafati-grafito))}
.cfbc-sel__hora:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
/* [mb1.533] La hora que TODAVÍA no se puede reservar: se ve —la disponibilidad es cierta— pero se
 * lee como pendiente, perfilada y en lila, no sólida. La forma dice lo que el texto explica. */
.cfbc-scope a.cfbc-sel__hora--espera,.cfbc-scope a.cfbc-sel__hora--espera:link,
.cfbc-scope a.cfbc-sel__hora--espera:visited{background:var(--cafati-purpura-tenue);
	color:var(--cafati-purpura);
	border:1px dashed color-mix(in srgb, var(--cafati-purpura) 42%, var(--cafati-papel));
	box-shadow:none}
.cfbc-sel__hora--espera:hover{background:var(--cafati-purpura-suave)}
.cfbc-sel__aviso{margin:10px 0 0;padding:10px 12px;border-radius:10px;
	background:var(--cafati-purpura-suave);font-size:14px;color:var(--cafati-grafito)}
.cfbc-scope .cfbc-sel__aviso a{font-weight:800;color:var(--cafati-purpura)}
/* El servicio, dentro del panel de reserva: un rótulo y el nombre, sin competir con la hora. */
/* 🔴 [mb1.542] EL SUELO DE TIPOGRAFÍA VIAJA CON EL CONTROL, no con su ancestro. Bajo 16px iOS
 * hace zoom al enfocar y descoloca una reserva a medias; y una regla `.padre .hijo` deja de
 * proteger en cuanto el control cambia de sitio. Por eso se declara plana, sobre su clase. */
/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.540] EL PANEL RECOGE LO CLÍNICO, Y CADA COSA EN SU RECINTO.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .csl-holdbox .csl-hold-pac{margin:10px 0 12px;padding:14px;border-radius:14px;box-sizing:border-box;
	background:var(--cafati-purpura-tenue);
	border:1px solid color-mix(in srgb, var(--cafati-purpura) 16%, var(--cafati-linea));
	box-shadow:inset 3px 0 0 var(--cafati-purpura)}
.cfbc-scope .csl-holdbox .csl-hold-pac__r{display:block;margin-bottom:8px;font-size:13px;font-weight:700;
	letter-spacing:.04em;text-transform:uppercase;color:var(--cafati-purpura)}
/* Dos botones que se TOMAN: se elevan, y lo elegido lleva borde, anillo y disco a la vez. */
.cfbc-scope .csl-holdbox .csl-hold-esp{display:flex;gap:8px;margin-bottom:10px}
.cfbc-scope .csl-holdbox .csl-hold-esp__o{position:relative;flex:1 1 0;display:flex;align-items:center;
	justify-content:center;min-height:46px;border-radius:12px;cursor:pointer;box-sizing:border-box;
	background:var(--cafati-papel);border:1px solid var(--cafati-linea);
	font-size:15px;font-weight:700;color:var(--cafati-grafito);
	box-shadow:0 1px 2px color-mix(in srgb, var(--cafati-grafito) 8%, transparent)}
/* [mb1.541] 16px también en los controles sin texto visible: el banco mide TODO campo de
 * entrada, y por debajo de 16 iOS hace zoom al enfocar y descoloca la reserva a medias. */
.cfbc-scope .csl-holdbox .csl-hold-esp__o input{position:absolute;opacity:0;width:0;height:0;font-size:16px}
.cfbc-scope .csl-holdbox .csl-hold-esp__o:hover{border-color:var(--cafati-purpura)}
.cfbc-scope .csl-holdbox .csl-hold-esp__o:has(input:checked){border-color:var(--cafati-purpura);
	background:var(--cafati-purpura-suave);color:var(--cafati-purpura);
	box-shadow:var(--cafati-anillo-foco)}
.cfbc-scope .csl-holdbox .csl-hold-esp__o:has(input:checked) span::after{content:" ✓";font-weight:800}
.cfbc-scope .csl-holdbox .csl-hold-esp__o:has(input:focus-visible){outline:3px solid var(--cafati-purpura);
	outline-offset:2px}
/* Los campos se LLENAN: se hunden. Rótulo arriba, nunca un texto suelto sobre el fondo. */
.cfbc-scope .csl-holdbox .csl-hold-c{display:block;font-size:14px;font-weight:700;color:var(--cafati-grafito);
	margin:0 0 10px}
.cfbc-scope .csl-holdbox input.csl-pet{font-size:16px}
.cfbc-scope .csl-holdbox textarea.csl-motivo{display:block;width:100%;margin-top:4px;padding:10px 12px;
	border-radius:10px;border:1px solid var(--cafati-linea);font-size:16px;font-family:inherit;
	box-sizing:border-box;resize:vertical;
	background:color-mix(in srgb, var(--cafati-purpura) 4%, var(--cafati-papel));
	color:var(--cafati-grafito);
	box-shadow:inset 0 1px 2px color-mix(in srgb, var(--cafati-grafito) 8%, transparent)}
.cfbc-scope .csl-holdbox textarea.csl-motivo:focus{outline:none;
	border-color:color-mix(in srgb, var(--cafati-purpura) 62%, var(--cafati-papel));
	box-shadow:var(--cafati-anillo-foco)}
.cfbc-scope .csl-holdbox .csl-hold-why{margin:2px 0 0}
/* Los extras, plegados y sin precio: son una pregunta para coordinación. */
.cfbc-scope .csl-holdbox .csl-hold-adds{margin:0 0 12px;border:1px solid var(--cafati-linea);border-radius:12px;
	background:var(--cafati-papel);box-sizing:border-box}
.cfbc-scope .csl-holdbox .csl-hold-adds summary{display:flex;align-items:center;justify-content:space-between;
	gap:10px;min-height:48px;padding:0 14px;cursor:pointer;list-style:none;
	font-size:14.5px;font-weight:700;color:var(--cafati-verde)}
.cfbc-scope .csl-holdbox .csl-hold-adds summary::-webkit-details-marker{display:none}
.cfbc-scope .csl-holdbox .csl-hold-adds summary b{font-weight:800;color:var(--cafati-purpura);font-size:13.5px}
.cfbc-scope .csl-holdbox .csl-hold-adds summary::after{content:"▾";font-size:13px;color:var(--cafati-texto-tenue)}
.cfbc-scope .csl-holdbox .csl-hold-adds[open] summary::after{content:"▴"}
.cfbc-scope .csl-holdbox .csl-hold-adds summary:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-scope .csl-holdbox .csl-hold-adds__in{padding:0 14px 12px}
.cfbc-scope .csl-holdbox .csl-hold-add{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:start;
	padding:10px 0;border-top:1px solid var(--cafati-linea);cursor:pointer}
.cfbc-scope .csl-holdbox .csl-hold-add input{grid-row:1 / span 2;align-self:center;width:20px;height:20px;
	font-size:16px;accent-color:var(--cafati-purpura)}
.cfbc-scope .csl-holdbox .csl-hold-add__n{font-size:14.5px;font-weight:700;color:var(--cafati-grafito)}
.cfbc-scope .csl-holdbox .csl-hold-add__d{grid-column:2 / -1;font-size:13px;color:var(--cafati-texto-tenue)}
/* [mb1.549] El detalle del valor: las cifras a la derecha, en columna y tabulares, para que se
 * comparen de un barrido. El total se separa con una regla —es de otro rango— y va en verde: es
 * un hecho de la casa, no una elección del tutor. */
.cfbc-scope .csl-holdbox .csl-hold-val{margin:0 0 12px;padding:12px 14px;border-radius:12px;
	box-sizing:border-box;background:var(--cafati-marfil);border:1px solid var(--cafati-linea)}
.cfbc-scope .csl-holdbox .csl-hold-val__l{display:flex;align-items:baseline;justify-content:space-between;
	gap:12px;padding:4px 0;font-size:14.5px;color:var(--cafati-grafito)}
.cfbc-scope .csl-holdbox .csl-hold-val__l b{font-weight:700;font-variant-numeric:tabular-nums}
.cfbc-scope .csl-holdbox .csl-hold-val__l--x span{color:var(--cafati-texto-tenue)}
.cfbc-scope .csl-holdbox .csl-hold-val__t{display:flex;align-items:baseline;justify-content:space-between;
	gap:12px;margin-top:8px;padding-top:8px;border-top:1px solid var(--cafati-linea);
	font-size:15px;font-weight:700;color:var(--cafati-verde)}
.cfbc-scope .csl-holdbox .csl-hold-val__n{font-size:20px;font-weight:800;
	font-variant-numeric:tabular-nums;color:var(--cafati-verde)}
.cfbc-scope .csl-holdbox .csl-hold-add__p{font-weight:800;font-variant-numeric:tabular-nums;
	color:var(--cafati-verde);text-align:right}
.csl-hold-svc{margin:2px 0 10px;font-size:14.5px;font-weight:700;color:var(--cafati-grafito)}
/* [mb1.537] El par «rótulo · dato» del paso 4, en dos nodos y no en una cadena: con una cadena
 * el lector de pantalla lo lee de corrido y el ojo no distingue qué es la etiqueta. */
.csl-hold-luego{display:flex;flex-direction:column;gap:1px;margin:10px 0 0}
.csl-hold-luego__r{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
	color:var(--cafati-texto-tenue)}
.csl-hold-luego__d{font-size:14.5px;font-weight:700;color:var(--cafati-verde)}
.csl-hold-svc span{font-weight:400;color:var(--cafati-texto-tenue)}
.cfbc-sel__horas-mas,.cfbc-sel__vacio{margin:10px 0 0;font-size:14px;color:var(--cafati-texto-tenue)}
/* [mb1.547] El salto al próximo día con agenda: es la salida real de un día vacío, así que se
 * presenta como acción y no como una línea más de texto. */
.cfbc-sel__salto{margin:10px 0 0}
.cfbc-scope a.cfbc-sel__b,.cfbc-scope a.cfbc-sel__b:link,.cfbc-scope a.cfbc-sel__b:visited{
	display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
	color:var(--cafati-papel)}
.cfbc-sel__larga{margin:12px 0 0}
.cfbc-scope a.cfbc-sel__larga a,.cfbc-sel__larga a{font-size:14px;font-weight:700;
	color:var(--cafati-purpura);text-decoration:underline;
	display:inline-flex;align-items:center;min-height:44px}

@media (max-width:560px){
	/* [mb1.548] En el teléfono el contenido manda sobre el marco: tres rellenos anidados
	 * —selector, panel y bloque de paciente— se comían más de 80px de línea útil. Se ciñen los
	 * tres; los recintos siguen leyéndose, que es para lo que están. */
	.cfbc-sel{padding:12px}
	.cfbc-scope .csl-holdbox{padding-left:12px;padding-right:12px}
	.cfbc-scope .csl-holdbox .csl-hold-pac{padding:12px 10px}
	.cfbc-scope .csl-holdbox .csl-hold-adds__in{padding-left:10px;padding-right:10px}
	.cfbc-scope .csl-holdbox .csl-hold-adds summary{padding:0 10px}
	/* Y los campos ocupan la línea entera: un campo a medio ancho en 360px es sitio tirado. */
	.cfbc-scope .csl-holdbox .csl-tel,.cfbc-scope .csl-holdbox .csl-mail,
	.cfbc-scope .csl-holdbox .csl-pet,.cfbc-scope .csl-holdbox select{max-width:none}
	.cfbc-sel__svcs{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
	.cfbc-sel__otro{margin-left:0;width:100%}
	.cfbc-sel__otro input[type="date"]{flex:1 1 140px}
}

/* [mb1.521] El rótulo de subgrupo dentro de las opciones: separa dos preguntas distintas
 * —cuántas mascotas y qué plan— que antes venían aplanadas en una columna de doce filas. */
.cfbc-s__sub{margin:14px 0 2px;font-size:13px;font-weight:700;letter-spacing:.04em;
	text-transform:uppercase;color:var(--cafati-texto-tenue)}
.cfbc-s__mas .cfbc-s__sub:first-of-type{margin-top:10px}
.cfbc-s__lista{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.cfbc-s__lista li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
	min-height:44px;padding:6px 12px;border:1px solid var(--cafati-linea);border-radius:10px;
	background:var(--cafati-papel)}
.cfbc-s__op-n{font-size:13.5px;font-weight:600;color:var(--cafati-grafito)}
.cfbc-s__op-p{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--cafati-verde)}
.cfbc-scope a.cfbc-s__op-a,.cfbc-scope a.cfbc-s__op-a:link,.cfbc-scope a.cfbc-s__op-a:visited{
	font-size:13.5px;font-weight:700;color:var(--cafati-purpura);text-decoration:underline;
	min-height:44px;display:inline-flex;align-items:center}
/* El rótulo regional del árbol de cobertura: hoy no se pinta (una región); existe para el día
 * que el panel abra la segunda. */
.cfbc-cob__region{margin:28px 0 4px;font-size:22px;font-weight:800;color:var(--cafati-verde)}

/* ── ESCRITORIO · desde aquí se AÑADE, nunca se corrige ──────────────────────────────────── */
@media(min-width:768px){
	.cfbc-c__main{padding:24px}
	.cfbc-c__h1{font-size:34px}
	.cfbc-c__h2{font-size:23px}
	.cfbc-c__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
	/* 🔴 [mb1.551] LA QUE RESERVA OCUPA LA FILA. Con el panel dentro, la tarjeta pasa de ~600px a
	 * 1.755px y en una rejilla de dos columnas la vecina se estira a la misma altura: queda un
	 * rectángulo blanco vacío al lado de la reserva. Ocupando la fila no hay vecina que deformar,
	 * y de paso el panel dobla su ancho — que es lo que uno quiere dar a lo que está en curso. */
	.cfbc-c__grid > .cfbc-t--reservando{grid-column:1/-1}
	.cfbc-c__salidas{flex-direction:row;flex-wrap:wrap}
	.cfbc-c__cta{display:inline-flex}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [0.4.0-mb1.35] LOS CUATRO TRANSVERSALES · §15 de la Guía Visual v2
 *
 * Cabecera con navegación · héroe · barra de confianza · pie. Se repiten en las 22 rutas públicas,
 * así que su CSS vive junto —no disperso por pantalla— y usa SOLO tokens: el día que cambie la
 * paleta, cambian las veintidós a la vez y ninguna se queda atrás.
 *
 * 🔴 TODO ENLACE CON FONDO LLEVA SU REGLA (0,2,1) DESDE EL PRIMER DÍA. `.cfbc-scope a` es (0,1,1) y
 * gana a cualquier clase suelta: es el defecto que hoy dejó el botón «Buscar horas» invisible en
 * producción durante semanas. Aquí no se escribe un botón sin su acompañante, y el gate lo verifica.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · CABECERA ─────────────────────────────────────────────────────────────────────────── */
/* ══════════════ [mb1.80 · P09] EL PERFIL PÚBLICO DE LA PROFESIONAL ══════════════
 *
 * 🔴 Esta pantalla se COMPARTE por WhatsApp con los contactos de la propia veterinaria —es el
 * encargo literal de la Dirección—, así que se abre casi siempre en un teléfono y casi siempre
 * ante alguien que no sabe qué es Cafati. Dos consecuencias de diseño:
 *
 *   · La cabecera se apila en móvil y se pone en fila desde 560px. Una foto de 120px al lado de un
 *     nombre largo en 375px deja el nombre en cuatro líneas de dos palabras.
 *   · El nombre es `clamp`: tiene que leerse como el título que es sin desbordar en pantallas
 *     estrechas, y sin depender de la raíz del tema —que en este sitio vale 10px—.
 *
 * La foto es un círculo con borde menta en vez de un cuadro: distingue a la persona del resto de
 * superficies rectangulares de la marca, y es la forma que un perfil pide en cualquier sitio donde
 * el visitante ya haya estado. */
.cfbc-p9__cab{display:flex;flex-direction:column;gap:var(--cafati-e-3);
	align-items:flex-start;margin:var(--cafati-e-5) 0 var(--cafati-e-4)}
.cfbc-p9__foto{width:120px;height:120px;border-radius:50%;object-fit:cover;
	border:3px solid var(--cafati-menta);background:var(--cafati-menta-tenue);flex:0 0 auto}
.cfbc-p9__h1{font-family:var(--cafati-fuente-ed);font-size:clamp(26px,5vw,38px);line-height:1.15;
	margin:0;color:var(--cafati-verde)}
.cfbc-p9__sellos{display:flex;flex-wrap:wrap;gap:var(--cafati-e-2);margin:var(--cafati-e-2) 0 0}
.cfbc-p9__esp{margin:var(--cafati-e-2) 0 0;font-size:15px;color:var(--cafati-texto-tenue)}
.cfbc-p9__bio{margin:0;font-size:16px;line-height:1.6;max-width:62ch}

/* ══════════════════════════════════════════════════════════════════════════════════════
 * [mb1.97] LAS RESEÑAS · `#resenas`
 *
 * Dirección: *«se ven las estrellas pero en ninguna parte se puede acceder a ver los
 * comentarios»*. Y el fondo del asunto: una nota convence menos que una frase. «5,0» lo puede
 * afirmar cualquiera; «llegó puntual y explicó todo con calma» es una persona hablando.
 *
 * 🔴 SIN GRADIENTES NI CRISTALES — la Guía Visual v2 §13 los prohíbe, y el gate de empaquetado
 * los rechaza. Las barras del reparto son BLOQUES PLANOS de color de marca sobre línea.
 * ══════════════════════════════════════════════════════════════════════════════════════ */
/* ── EL RESUMEN ──────────────────────────────────────────────────────────────────────────
 * Reparto en columna con la nota a la izquierda, como en Google y en Play Store: el número manda
 * y las barras explican de qué está hecho. `align-items:center` porque el bloque de barras es más
 * alto que la nota y alinearlos arriba deja el número flotando. */
.cfbc-p9__rsum{display:flex;flex-wrap:wrap;gap:var(--cafati-e-4) 32px;align-items:center;
	margin:0 0 var(--cafati-e-4);padding:0 0 var(--cafati-e-4);
	border-bottom:1px solid var(--cafati-linea)}
.cfbc-p9__rnota{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0}
/**
 * 🔴 LA NOTA GRANDE VA EN LA SANS, NO EN LA SERIF EDITORIAL.
 *
 * Estaba en `--cafati-fuente-ed` (Fraunces) y Dirección lo señaló: *«la tipografía debería ser como
 * las de Google»*. Y es correcto por función, no por gusto: una cifra es un DATO, y la serif de la
 * casa está reservada para titulares —donde aporta carácter—. En un número grande produce lo
 * contrario: lo vuelve decorativo justo cuando tiene que leerse de un golpe. Google, Play Store y
 * TripAdvisor usan la sans en la nota por lo mismo.
 *
 * Peso 400 y no 700: a 44 px el grosor sobra, y el fino es lo que hace que se lea como una medida
 * y no como un anuncio.
 */
.cfbc-p9__rnum{font-family:var(--cafati-fuente);font-size:44px;line-height:1.05;
	font-weight:400;color:var(--cafati-grafito);letter-spacing:-.02em}
.cfbc-p9__rn{font-size:13px;color:var(--cafati-texto-tenue)}

/* El reparto. `min-width` en la etiqueta y en el recuento mantiene las barras alineadas entre
 * filas: sin él, «10» y «1» desplazan la barra y el bloque se lee torcido. Barras de 10 px y bien
 * redondeadas, que es la proporción de Google: se leen como una medida, no como un gráfico. */
.cfbc-p9__rdist{list-style:none;margin:0;padding:0;min-width:200px;flex:1 1 260px;max-width:420px}
.cfbc-scope .cfbc-p9__rfila{display:flex;align-items:center;gap:10px;margin:0 0 5px}
.cfbc-p9__rlab{min-width:32px;font-size:13px;color:var(--cafati-texto-tenue)}
.cfbc-p9__rcnt{min-width:22px;font-size:13px;text-align:right;color:var(--cafati-texto-tenue)}
.cfbc-p9__rbar{flex:1;height:10px;border-radius:999px;background:var(--cafati-linea);overflow:hidden}
.cfbc-p9__rfill{display:block;height:100%;border-radius:999px;background:var(--cafati-verde)}

/* ── LOS COMENTARIOS ────────────────────────────────────────────────────────────────────
 * 🔴 SIN CAJAS, Y ESE ES EL CAMBIO DE FONDO. Cada reseña iba en una tarjeta con borde, y Dirección
 * lo describió como *«muy pegadas al borde»*: el problema no era el relleno sino el marco. Un borde
 * a cada lado de un texto que ya está dentro del ancho de la página añade dos líneas por reseña y
 * seis reseñas se convierten en una reja.
 *
 * Google no encaja las reseñas: las separa con aire y una línea fina. El texto respira y la lista
 * se recorre en vertical sin que la vista tropiece con esquinas. Es más barato y se lee mejor.
 *
 * `max-width` en ch, no en px: lo que hace legible un párrafo es cuántos CARACTERES caben por
 * línea —entre 60 y 75—, y eso no depende de la pantalla. */
.cfbc-p9__rlista{list-style:none;margin:0;padding:0}
.cfbc-scope .cfbc-p9__rit{padding:var(--cafati-e-4) 0;border-bottom:1px solid var(--cafati-linea)}
.cfbc-p9__rit:last-child{border-bottom:0}
/* Estrellas y fecha en la MISMA línea: «qué tan buena» y «cuándo» son la pareja que decide si
 * seguir leyendo, y separarlas en dos renglones obliga a recorrer la reseña para saber de cuándo es. */
/* [mb1.100] QUIÉN LO DIJO · inicial en círculo y nombre, como en Google.
 *
 * El círculo con la inicial hace el trabajo de una foto que no tenemos y nunca tendremos: da cara
 * al testimonio sin pedirle nada al tutor. Va en verde de marca y no en un color aleatorio por
 * nombre —lo que hace Google— porque aquí son pocas reseñas por página y el arcoíris distrae.
 *
 * `aria-hidden` en la inicial: para un lector de pantalla es ruido, el nombre viene justo al lado. */
.cfbc-p9__raut{display:flex;align-items:center;gap:10px;margin:0 0 10px}
/* El texto de la inicial sale de `--cafati-papel` y no de un blanco literal: el gate de color exige
 * que TODO color venga de los tokens, y lo cazó al primer intento. No es purismo — un literal aquí
 * sobrevive a cualquier cambio de paleta, y de ahí salen los contrastes de 1.00 que ya se pagaron.
 *
 * 🔴 Y ESTA EXPLICACIÓN VIVE FUERA DE LA REGLA. La primera versión la puso DENTRO de las llaves, y
 * el banco —que lee el bloque crudo— encontró el literal mencionado en la propia frase que decía no
 * usarlo. Es la lección de la prosa dentro de lo que se mide, y hoy ya se cobró cuatro veces. */
.cfbc-p9__rini{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
	width:36px;height:36px;border-radius:50%;background:var(--cafati-verde);
	color:var(--cafati-papel);font-size:15px;font-weight:600;line-height:1}
.cfbc-p9__rquien{display:flex;flex-direction:column;font-size:15px;font-weight:600;
	color:var(--cafati-grafito);line-height:1.3}
/* La mascota en tenue y normal: acompaña al nombre, no compite con él. Y es el dato que hace
 * concreto el testimonio —«con Pancho» dice que hubo un animal y una visita—. */
.cfbc-p9__rpet{font-size:13px;font-weight:400;color:var(--cafati-texto-tenue)}
.cfbc-p9__rcab{display:flex;align-items:center;gap:10px;margin:0 0 8px;flex-wrap:wrap}
.cfbc-p9__rfec{font-size:13px;color:var(--cafati-texto-tenue)}
/* `blockquote` sin las comillas del navegador: unas comillas tipográficas encima del texto real de
 * un tutor lo vuelven decorativo, y esto es testimonio, no cita literaria. */
.cfbc-p9__rtxt{margin:0;font-size:16px;line-height:1.6;color:var(--cafati-grafito);
	max-width:68ch;quotes:none}
.cfbc-p9__rpie{margin:8px 0 0;font-size:13px;color:var(--cafati-texto-tenue)}
.cfbc-p9__rnota-p{margin:var(--cafati-e-3) 0 0;font-size:13px;line-height:1.5;
	color:var(--cafati-texto-tenue);max-width:70ch}

/* La calificación de la tarjeta, ahora pulsable.
 *
 * 🔴 SE ESCRIBE `.cfbc-scope a.cfbc-t__rep-a`, Y EL GATE VISUAL ME OBLIGÓ DOS VECES.
 *
 * Primer intento: `color:inherit`, para que la nota no pareciera un enlace. Rechazado —«ningún
 * enlace pierde su color contra la regla genérica de su ámbito»—. Segundo intento: `color` explícito
 * en `.cfbc-t__rep-a`, que es (0,1,0) y **pierde contra `.cfbc-scope a`, que es (0,1,1)**. O sea que
 * el color que escribí no se aplicaba nunca: un arreglo cosmético que el gate volvió a cazar.
 *
 * Es EXACTAMENTE el defecto de `mb1.34` —el botón «Buscar horas» que salía verde sobre verde, sin
 * texto, en la única acción de la página—. La convención que lo evita es subir la especificidad
 * DENTRO del ámbito: `.cfbc-scope a.clase` = (0,2,1) gana. La misma que ya usan `.csl-cta-wa` y
 * `.cfbc-s__cta` unas líneas más arriba.
 *
 * Y el resultado es mejor que la intención original: en verde de marca el bloque entero se VE
 * pulsable, que es lo que se pidió. Las estrellas y el recuento conservan su color porque lo
 * declaran ellos. */
.cfbc-scope a.cfbc-t__rep-a,.cfbc-scope a.cfbc-t__rep-a:link,
.cfbc-scope a.cfbc-t__rep-a:visited{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
	color:var(--cafati-verde);text-decoration:none}
.cfbc-t__rep-a:hover .cfbc-t__rep-ver,
.cfbc-t__rep-a:focus-visible .cfbc-t__rep-ver{text-decoration:underline}
.cfbc-t__rep-ver{font-size:13px;color:var(--cafati-verde-accion);text-decoration:underline}
.cfbc-p9__resumen{margin:0 0 var(--cafati-e-3);font-size:15px;color:var(--cafati-texto-tenue)}

/* ══════════════════════════════════════════════════════════════════════════════════════
 * [mb1.102] EL SELECTOR DE COMUNA DE LA AGENDA
 *
 * Antes se pintaba un bloque de agenda POR COMUNA y salían las mismas once horas tres veces —un
 * cupo es de la profesional, no de un territorio—. Ahora hay UNA agenda y encima estas pastillas.
 *
 * No es un filtro decorativo: el precio cambia por recargo de comuna y reservar exige comuna, así
 * que es la primera pregunta del circuito. Por eso se ve como una decisión —pastillas grandes,
 * pulsables— y no como un desplegable escondido.
 *
 * 🔴 44 px de alto mínimo: son objetivos táctiles y el móvil es la prioridad declarada.
 * ══════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-p9__comlab{margin:0 0 2px;font-size:14px;font-weight:600;color:var(--cafati-grafito)}
/* Qué cambia al elegir comuna. Sin esta línea el selector parece un trámite y el tutor no entiende
 * por qué se le pregunta antes de ver una hora. */
.cfbc-p9__comhelp{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--cafati-texto-tenue);
	max-width:64ch}
.cfbc-p9__coms{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--cafati-e-3)}
.cfbc-p9__compill{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
	border-radius:999px;border:1px solid var(--cafati-linea);background:var(--cafati-papel);
	font-size:15px;font-weight:600;text-decoration:none}
/* La activa se marca con RELLENO, no solo con borde: entre dos pastillas de contorno parecido, el
 * borde no basta para saber cuál manda de un vistazo. */
.cfbc-p9__compill--on{background:var(--cafati-verde);border-color:var(--cafati-verde)}
.cfbc-p9__unicom{margin:0 0 var(--cafati-e-3);font-size:15px;color:var(--cafati-texto-tenue)}

/* 🔴 EL COLOR SE ESCRIBE CON LA ESPECIFICIDAD DEL ÁMBITO, como `.cfbc-t__rep-a`. Una clase suelta
 * es (0,1,0) y pierde contra `.cfbc-scope a`, que es (0,1,1): el color no se aplicaría y la
 * pastilla activa quedaría con texto verde sobre verde. Es el defecto de `mb1.34`, que el gate
 * visual ya cazó dos veces en esta misma sesión. */
.cfbc-scope a.cfbc-p9__compill,.cfbc-scope a.cfbc-p9__compill:link,
.cfbc-scope a.cfbc-p9__compill:visited{color:var(--cafati-grafito)}
.cfbc-scope a.cfbc-p9__compill--on,.cfbc-scope a.cfbc-p9__compill--on:link,
.cfbc-scope a.cfbc-p9__compill--on:visited{color:var(--cafati-papel)}
.cfbc-p9__com{margin:0 0 var(--cafati-e-4)}
.cfbc-p9__comh{font-family:var(--cafati-fuente-ed);font-size:18px;line-height:1.25;
	margin:0 0 var(--cafati-e-2);color:var(--cafati-verde)}
.cfbc-p9__vercom{margin:var(--cafati-e-2) 0 0;font-size:14px}
@media(min-width:560px){
	.cfbc-p9__cab{flex-direction:row;align-items:center;gap:var(--cafati-e-4)}
	/* [mb1.661] Con ancho de sobra, la ficha se parte en carril y contenido. El carril va
	 * PEGADO al hacer scroll: quien lea el bloque nueve sigue viendo con quién trata y cómo
	 * reservar. `align-self:start` es lo que permite que `sticky` funcione dentro de una
	 * rejilla — sin eso el elemento se estira a la altura de la fila y no hay nada que fijar. */
	.cfbc-p9__wrap{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--cafati-e-6);
		align-items:start}
	/* La TARJETA del carril. Aquí no se fija nada: solo es la ficha de ella con su marco. */
	.cfbc-p9__rail{align-self:start;
		padding:var(--cafati-e-4);border-radius:var(--cafati-r-lg);
		background:var(--cafati-papel);border:1px solid var(--cafati-linea);
		box-shadow:var(--cafati-sombra-sm)}
	/* Dentro del carril la cabecera se apila: en 300 px la foto al lado del nombre deja el
	 * nombre en tres renglones. */
	.cfbc-p9__rail .cfbc-p9__cab{flex-direction:column;align-items:flex-start}
}

/* 🔴 [mb1.722] EL CARRIL SE PEGA POR EL BORDE QUE LE CONVIENE.
 *
 * Tres intentos sobre esta regla, y los dos primeros los causé yo tratando el síntoma en vez de la
 * pregunta de fondo, que es **a qué borde se pega**:
 *
 *   mb1.717 · con `top`, un carril más alto que la ventana deja lo de abajo fuera de alcance —no
 *             se mueve con la página—, y lo de abajo era el único botón de la columna.
 *   mb1.718 · le puse techo y desplazamiento propio… puestos SIEMPRE, y en una ventana más baja
 *             apareció una barra dentro de la tarjeta. La até a la altura de la pantalla.
 *   mb1.722 · y entonces, en esa misma ventana, el carril dejó de seguir el scroll. Dirección:
 *             *«era mucho mejor que siguiera la información moviéndose hacia abajo».*
 *
 * `bottom` lo resuelve sin ninguna de las dos penitencias: el carril baja con la página hasta que
 * su FINAL toca el borde inferior y ahí se queda. Lo último del carril es el botón, así que con
 * `bottom` el botón siempre acaba a la vista. Sin techo, sin barra y sin nada atrapado; y hacia
 * arriba se despega solo, así que su cabecera tampoco se pierde.
 *
 * Los dos bordes conviven y la altura de la ventana elige: donde el carril cabe entero, `top`,
 * que es lo natural —se ve completo desde el primer golpe de vista—; donde no cabe, `bottom`. */
@media(min-width:560px){
	.cfbc-p9__rail{position:sticky;top:var(--cafati-e-4)}
}
/* 🔴 [mb1.724] EL TECHO, SOLO DONDE NINGUNA COLUMNA CABE.
 *
 * Con el carril adelgazado a ~560 px, en cualquier escritorio cabe entero y `top` basta: se pega y
 * acompaña la lectura, que es lo que Dirección pidió. Por debajo de 620 px de ventana no cabe
 * NADA, y ahí sí es mejor una barra dentro de la tarjeta que un botón fuera de alcance. Es la red,
 * no el estado normal — y esa distinción es justamente la que me faltó en mb1.718. */
@media(min-width:560px) and (max-height:620px){
	.cfbc-p9__rail{max-height:calc(100vh - var(--cafati-e-4) * 2);
		max-height:calc(100dvh - var(--cafati-e-4) * 2);
		overflow-y:auto;overscroll-behavior:contain;
		scrollbar-width:thin;scrollbar-color:var(--cafati-linea) transparent}
}

/* ══════════════ [mb1.79 · P02] EL ÍNDICE DE COBERTURA ══════════════
 *
 * Rejilla de comunas que se adapta sola con `auto-fill`: sin consultas de medios y sin un número
 * de columnas escrito a mano. Con dos comunas no deja huecos y con cuarenta tampoco se apelmaza —
 * y hoy hay pocas, así que un diseño pensado solo para «muchas» se vería roto desde el primer día.
 *
 * 🔴 EL OBJETIVO TÁCTIL ES LA FICHA ENTERA, no el texto: `min-height:64px` y el enlace en bloque.
 * Es la acción que lleva de «dónde atienden» a «qué horas hay», y en un teléfono se pulsa con el
 * pulgar. La guía visual fija 44 px como mínimo; aquí sobra margen a propósito.
 *
 * `is-pronto` NO usa el ámbar: la guía v2 dice que el ámbar **no es acción**, y una comuna que
 * todavía no tiene red sigue siendo un enlace legítimo —lleva a su página, que explica el estado—.
 * Se distingue bajando el peso visual, no cambiando el significado del color. */
/* ══════════════ [mb1.598] LA FICHA DE COMUNA · dice algo distinto de su vecina ══════════════
 *
 * La versión anterior era un enlace envolvente con dos líneas, y las cinco decían «Con agenda
 * abierta». Ahora la ficha lleva red y hora, y a veces un WhatsApp: dos destinos, así que es un
 * `<div>` con enlaces dentro y no un `<a>` gigante —anidar enlaces es HTML inválido—.
 *
 * Las clases del diseño anterior (`__a`, `__estado`, `is-pronto`) se retiran con él. Una regla que
 * sobrevive a su HTML compite y gana por `:link`: ya nos costó una vez. */
.cfbc-cob__grid{display:grid;gap:var(--cafati-e-3);
	grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cfbc-cob__zona{margin-top:var(--cafati-e-5)}
.cfbc-cob__z{margin:0 0 var(--cafati-e-3);font-size:17px;font-weight:800;letter-spacing:.02em;
	text-transform:uppercase;color:var(--cafati-texto-tenue)}
.cfbc-cob__f{display:flex;flex-direction:column;gap:var(--cafati-e-2);
	padding:var(--cafati-e-4) var(--cafati-e-3) var(--cafati-e-3);
	border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-md);
	background:var(--cafati-papel);box-shadow:var(--cafati-sombra-sm)}
/* Sin horas NO es una alerta: es otra vía. Por eso morado tenue y no ámbar — el ámbar significa
 * «atención pendiente» y esto no lo es. */
.cfbc-cob__f.is-sinhora{background:var(--cafati-purpura-tenue);
	border-color:var(--cafati-purpura-suave)}
.cfbc-cob__nombre{margin:0;font-weight:800;font-size:19px;line-height:1.2}
/* 🔴 El nombre es el destino principal de la ficha y en un teléfono se pulsa con el pulgar. La
 * ficha vieja era un `<a>` entero de 64 px y cumplía sin pensarlo; la nueva tiene el enlace dentro,
 * así que los 44 px hay que dárselos. Se los da el propio enlace —no la caja— porque es el enlace
 * lo que el dedo tiene que acertar. */
.cfbc-scope .cfbc-cob__nombre a,.cfbc-scope .cfbc-cob__nombre a:link,
.cfbc-scope .cfbc-cob__nombre a:visited{display:inline-flex;align-items:center;min-height:44px;
	color:var(--cafati-verde);text-decoration:none}
.cfbc-scope .cfbc-cob__nombre a:hover{text-decoration:underline}
.cfbc-cob__red{margin:0;font-size:13.5px;color:var(--cafati-texto-tenue)}
/* La hora en columna propia y con cifras tabulares: una rejilla de fichas se lee de un barrido
 * vertical, y para eso los dígitos tienen que caer en la misma posición. */
.cfbc-cob__hora{display:flex;flex-direction:column;gap:2px;margin:var(--cafati-e-1) 0 0;
	padding-top:var(--cafati-e-2);border-top:1px solid var(--cafati-linea)}
.cfbc-cob__rot{font-size:13px;color:var(--cafati-texto-tenue)}
.cfbc-cob__hora strong{font-size:17px;font-weight:800;color:var(--cafati-verde);
	font-variant-numeric:tabular-nums;font-feature-settings:var(--cafati-tabular)}
.cfbc-cob__f.is-sinhora .cfbc-cob__hora strong{color:var(--cafati-purpura)}
.cfbc-scope a.cfbc-cob__ver,.cfbc-scope a.cfbc-cob__ver:link,
.cfbc-scope a.cfbc-cob__ver:visited{display:inline-flex;align-items:center;min-height:44px;
	font-size:14.5px;font-weight:700;color:var(--cafati-verde-accion);text-decoration:underline}
.cfbc-scope a.cfbc-cob__wa,.cfbc-scope a.cfbc-cob__wa:link,
.cfbc-scope a.cfbc-cob__wa:visited{display:inline-flex;align-items:center;justify-content:center;
	min-height:44px;padding:0 var(--cafati-e-3);border:1.5px solid var(--cafati-purpura);
	border-radius:var(--cafati-r-sm);font-size:14.5px;font-weight:700;
	color:var(--cafati-purpura);text-decoration:none;background:var(--cafati-papel)}
.cfbc-scope a.cfbc-cob__wa:hover{background:var(--cafati-purpura-suave)}
.cfbc-cob__ver:focus-visible,.cfbc-cob__wa:focus-visible,
.cfbc-cob__nombre a:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}

/* ══════════════ [mb1.77] DOCUMENTO PROPIO · LAS BANDAS VAN A SANGRE ══════════════
 *
 * 🔴 Encontrado MIRANDO la vitrina en producción, no leyendo el código: en una pantalla de 1536 px
 * la página entera —cabecera verde incluida— quedaba encajonada en una columna de 1080 con dos
 * franjas blancas a los lados. Parecía un documento pegado sobre el sitio, no un portal.
 *
 * La causa: `.cfbc-scope` lleva `max-width:1080px` y en estas pantallas `.cfbc-scope` **es el
 * `<body>`**, así que limitaba el ancho de TODO, fondos incluidos. Lo premium es al revés: la banda
 * cruza la pantalla y lo que se centra es el CONTENIDO.
 *
 * Se acota a `body.cfbc-scope` a propósito. El mismo `.cfbc-scope` se usa como envoltorio del
 * shortcode DENTRO de una página del tema, y ahí el ancho máximo sí es lo correcto: quitarlo a
 * secas habría estropeado esa otra superficie para arreglar esta.
 *
 * `calc((100% - 1080px)/2)` como relleno lateral centra el contenido dejando el fondo entero; el
 * `max()` conserva el margen mínimo en móvil, donde `100% - 1080px` es negativo.
 *
 * `.cfbc-c__main` NO se toca: ya tiene su propio `max-width:1080px; margin:0 auto`. Era el del
 * `body` el que sobraba. */
body.cfbc-scope{max-width:none;padding:0}
/* [mb1.544] La cabecera NO comparte el carril de lectura: 1.080px es el ancho cómodo para leer
 * un párrafo, y una barra de navegación no se lee, se recorre. Con 1.080 el contenido medía
 * 1.406 y las acciones caían siempre a una segunda fila. */
body.cfbc-scope .cfbc-nav{padding-inline:max(var(--cafati-e-4),calc((100% - 1320px)/2))}
body.cfbc-scope .cfbc-pie{padding-inline:max(0px,calc((100% - 1080px)/2))}

.cfbc-nav{display:flex;align-items:center;gap:var(--cafati-e-3);flex-wrap:wrap;
	min-height:60px;padding:var(--cafati-e-2) var(--cafati-e-4);
	background:var(--cafati-verde);color:var(--cafati-papel)}
/* [mb1.534] LAS ACCIONES SE VAN A LA DERECHA. Sin esto todo se amontonaba desde la izquierda y en
 * escritorio los dos botones caían a una segunda fila con media pantalla vacía al lado.
 *
 * 🔴 `margin-left:auto` es espacio ELÁSTICO: cuando no cabe vale cero. Un margen FIJO aquí fue lo
 * que en mb1.475 sumó 383px en una pantalla de 375 y partió la cabecera en dos filas. No es lo
 * mismo empujar con aire que empujar con un tabique. */
@media (min-width:820px){
	.cfbc-nav > .cfbc-nav__salidas{margin-left:auto}
	/* Y el menú se pega a las acciones: los enlaces y los botones son el mismo bloque de
	 * navegación, no dos islas separadas por todo el ancho. */
	.cfbc-nav > .cfbc-nav__menu{margin-left:auto}
	.cfbc-nav > .cfbc-nav__menu + .cfbc-nav__salidas{margin-left:0}
}
/* [mb1.626] 44 px de alto: la marca es un enlace al inicio y se pulsa con el pulgar como los demás.
 * Medía 38 —lo que mide su logo—, que es alto de icono, no de objetivo táctil. */
.cfbc-nav__marca{display:flex;align-items:center;gap:var(--cafati-e-2);text-decoration:none;
	flex:0 0 auto;min-height:44px}
/* [mb1.771] EN EL CIERRE LA MARCA SE VE Y NO LLEVA. En «Revisa y confirma» el tutor ya invirtio
   cuatro pantallas y cada salida cuesta la reserva entera, asi que el logo deja de ser enlace —pero
   NO desaparece: una barra descabezada deja al tutor sin saber en que sitio esta escribiendo su
   telefono. Solo cambia el cursor, para que nadie lo intente. */
.cfbc-nav__marca--fija{cursor:default}
/* 🔴 EL LOGO DEL SITIO ES UN LOCKUP EN COLOR PARA FONDO CLARO (`logo-color.png`, 887×434), y la
 * cabecera es verde profundo: encima se lee mal. Hasta que exista su versión clara, se le da su
 * propio fondo de papel — una placa, no un parche: queda intencional y el logo conserva su color.
 *
 * Y el nombre de al lado se OCULTA A LA VISTA cuando hay imagen, porque el lockup ya dice
 * «VETERINARIA DR. CAFATI» y repetirlo es ruido. Se conserva en el DOM y accesible: el `<img>`
 * lleva `alt=""` a propósito, así que si se borrara el texto el enlace de la marca se quedaría sin
 * nombre para un lector de pantalla. */
.cfbc-nav__marca .cfbc-nav__logo--img{background:var(--cafati-papel);border-radius:10px;
	padding:5px 9px;box-sizing:content-box}
/* 🔴 [mb1.37] Y LA PLACA SE RETIRA EN CUANTO HAY LOGO CLARO. La Dirección subió el lockup en
 * marfil sobre transparente, que es lo que la cabecera verde pedía: sobre ella el logo va DESNUDO
 * —sin fondo, sin relleno y un poco más alto, porque ya no compite con una placa—. La regla de
 * arriba sigue existiendo para el caso en que el ajuste esté vacío: entonces se pinta el logo de
 * color y su placa lo hace legible. Feo antes que ilegible, nunca al revés. */
.cfbc-nav__marca .cfbc-nav__logo--claro{background:none;border-radius:0;padding:0;height:38px;
	width:auto}
.cfbc-nav__marca:has(.cfbc-nav__logo--img) .cfbc-nav__nombre{position:absolute;width:1px;height:1px;
	padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.cfbc-nav__marca .cfbc-nav__nombre{font-weight:700;font-size:18px;letter-spacing:-.01em}
/* 🔴 [mb1.695] `flex-grow:0` EN MÓVIL. Con `1 1 auto` el menú CRECÍA hasta llenar su línea —aunque
 * su único enlace midiera 140 px— y empujaba los botones a una tercera fila: en 390 px la franja
 * verde ocupaba el triple de alto. Lo vio Dirección en su teléfono.
 *
 * En escritorio sigue creciendo, que es donde el `margin-left:auto` de las salidas necesita que
 * alguien ocupe el centro. */
.cfbc-nav__menu{display:flex;align-items:center;gap:var(--cafati-e-3);flex:0 1 auto;flex-wrap:wrap}
@media (min-width:820px){ .cfbc-nav__menu{flex:1 1 auto} }
/* [mb1.626] Los enlaces del menú iban a 38 px: 14,5 de texto más 8+8 de relleno. Se declara el
 * alto y se centra, en vez de subir el relleno, para que el subrayado de «estás aquí» siga
 * pegado al texto y no se despegue al crecer la caja. */
.cfbc-nav__a{font-size:14.5px;font-weight:500;padding:var(--cafati-e-2) 0;position:relative;
	display:inline-flex;align-items:center;min-height:44px}
.cfbc-nav__a.is-activo::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
	background:var(--cafati-papel);border-radius:2px}
.cfbc-nav__salidas{display:flex;align-items:center;gap:var(--cafati-e-2);flex:0 0 auto;flex-wrap:wrap}
/* [mb1.695] En móvil el botón dice «WhatsApp» a secas: el icono ya dice cuál es, y «Escríbenos por
 * WhatsApp» son ~180 px que impedían que el menú y los dos botones compartieran fila. El texto
 * largo vuelve en cuanto hay sitio, y sigue en el DOM para quien lo lee con voz. */
@media (max-width:819px){
	.cfbc-nav__wa .cfbc-nav__wa-largo{position:absolute;width:1px;height:1px;overflow:hidden;
		clip:rect(0 0 0 0);white-space:nowrap}
	.cfbc-nav__wa{padding-inline:var(--cafati-e-2)}
	.cfbc-nav__a{font-size:14px}
	/* 🔴 MEDIDO EN 390 px: con relleno 24 y separación 16 el ancho útil son 327 px y la primera
	 * fila necesita 342 (marca 78 + 4,9 115 + menú 117 + dos separaciones). **Faltaban 15 px** y
	 * por eso el menú se iba solo a una fila entera. Con relleno 14 y separación 10 la fila mide
	 * 330 sobre 347 disponibles: marca, nota y «Dónde atendemos» caben juntos y la franja pasa de
	 * TRES filas a dos. Los botones no caben en la misma ni acortándolo todo —231 px— y esa es la
	 * segunda fila, que es donde tienen que estar. */
	body.cfbc-scope .cfbc-nav{padding-inline:14px}
	.cfbc-nav{gap:10px;padding-block:8px}
}
@media (min-width:820px){ .cfbc-nav__wa .cfbc-nav__wa-corto{display:none} }
/* [mb1.626] 40 → 44. Cuatro píxeles que solo se notan con el pulgar. */
.cfbc-nav__wa{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--cafati-e-3);
	border-radius:999px;border:1px solid rgba(255,255,255,.42);font-size:14px;font-weight:600}
/* [mb1.626] 40 → 44. Es el botón que vende y estaba por debajo del mínimo en cada página. */
.cfbc-nav__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--cafati-e-3);
	border-radius:999px;background:var(--cafati-papel);font-size:14px;font-weight:700}
/* La cabecera es verde: sus enlaces van en papel, y el CTA invierte a verde sobre papel. */
.cfbc-scope .cfbc-nav__marca,.cfbc-scope a.cfbc-nav__a,.cfbc-scope a.cfbc-nav__a:link,
.cfbc-scope a.cfbc-nav__a:visited,.cfbc-scope a.cfbc-nav__wa,.cfbc-scope a.cfbc-nav__wa:link,
.cfbc-scope a.cfbc-nav__wa:visited{color:var(--cafati-papel);text-decoration:none}
.cfbc-scope a.cfbc-nav__cta,.cfbc-scope a.cfbc-nav__cta:link,
.cfbc-scope a.cfbc-nav__cta:visited{color:var(--cafati-verde);text-decoration:none}
.cfbc-scope a.cfbc-nav__a:hover,.cfbc-scope a.cfbc-nav__wa:hover{color:var(--cafati-menta)}
.cfbc-scope a.cfbc-nav__cta:hover{background:var(--cafati-menta);color:var(--cafati-verde)}
.cfbc-nav__a:focus-visible,.cfbc-nav__wa:focus-visible,.cfbc-nav__cta:focus-visible,
.cfbc-nav__marca:focus-visible{outline:3px solid var(--cafati-menta);outline-offset:3px}

/* ── 2 · HÉROE ────────────────────────────────────────────────────────────────────────────── */
/* [mb1.527] El hero deja de desperdiciar la primera pantalla: el titular a la izquierda y los
 * datos que el tutor viene a buscar a la derecha. Y menos aire arriba, para que el selector —lo
 * que la página existe para que alguien use— entre sin hacer scroll. */
/* [mb1.534] Menos aire arriba: ese colchón no separaba dos cosas distintas, solo empujaba hacia
 * abajo lo que la página existe para que alguien use. */
.cfbc-hero{padding:var(--cafati-e-3) var(--cafati-e-4) var(--cafati-e-4)}
.cfbc-hero__miga{margin-bottom:var(--cafati-e-2)}
.cfbc-hero__txt{min-width:0}
/* [mb1.532] El acento del titular, en púrpura: 8,87 sobre marfil, el mismo recurso que el `h1`
 * del agendador. Con ámbito (0,2,0) porque `.cfbc-c .cfbc-c__h1` ya juega en ese terreno. */
.cfbc-scope .cfbc-hero__ac{color:var(--cafati-purpura)}
/* [mb1.534] La tira de reseñas es un ACCESORIO de la barra, no su titular: se ciñe para que la
 * cabecera quepa en una fila y el logo siga mandando. Su contenido no cambia. */
@media (min-width:820px){
	.cfbc-scope .cfbc-nav .cfbc-ps{padding-block:6px;font-size:14px}
}
/* [mb1.544] Cuando el sitio escasea, la tira cede lo PRESCINDIBLE: los años son el dato menos
 * decisivo de los tres —la nota y el número de reseñas son los que deciden— y su hueco es
 * justo lo que falta para que la barra quepa en una fila. Por debajo de 1.100 la tira ya
 * tiene sus propias reglas y el menú se apila: aquí no se toca nada. */
@media (min-width:1100px) and (max-width:1400px){
	.cfbc-scope .cfbc-nav .cfbc-ps__d--w{display:none}
	.cfbc-scope .cfbc-nav .cfbc-ps__d--w + .cfbc-ps__p,
	.cfbc-scope .cfbc-nav .cfbc-ps__p:last-of-type{display:none}
}
.cfbc-hero__aparte{margin-top:var(--cafati-e-4)}
@media (min-width:1000px){
	.cfbc-hero--2col{display:grid;grid-template-columns:minmax(0,1fr) 300px;
		gap:var(--cafati-e-6);align-items:start}
	/* La miga cruza las dos columnas: es la ruta de la página, no del titular. */
	.cfbc-hero--2col .cfbc-hero__miga{grid-column:1 / -1}
	/* Con la columna al lado, el titular ya no necesita cortarse a 22ch: la rejilla le da su
	 * ancho y el texto respira sin dejar medio lienzo vacío. */
	.cfbc-hero--2col .cfbc-hero__h1{max-width:none}
}
/* 🔴 [mb1.528] LA PRÓXIMA HORA ES EL TITULAR. Con los tres datos al mismo peso ninguno se veía;
 * el menta tenue los dejaba a todos en susurro. Ahora la tarjeta habla en verde institucional
 * —«esto es una hora vigente, de la casa»— y la hora se lee de un golpe desde el otro lado de la
 * habitación. El botón la convierte en acción: un dato que no se puede tomar es solo información. */
/* [mb1.532] PÚRPURA: esta tarjeta ofrece una hora que el tutor va a TOMAR, no un dato que la
 * empresa declara —y el púrpura es el hilo de lo que el tutor elige—. El filo superior en
 * distinción es el dorado del reconocimiento: SIEMPRE un hilo, nunca un relleno. */
.cfbc-vivo{position:relative;overflow:hidden;margin:0;padding:20px;border-radius:18px;
	background:var(--cafati-purpura);color:var(--cafati-papel);box-sizing:border-box;
	box-shadow:0 2px 6px color-mix(in srgb, var(--cafati-grafito) 14%, transparent),
	           0 18px 40px color-mix(in srgb, var(--cafati-purpura) 30%, transparent)}
.cfbc-vivo::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
	background:var(--cafati-distincion)}
.cfbc-vivo__r{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
	color:color-mix(in srgb, var(--cafati-papel) 78%, transparent)}
/* [mb1.531] Tipografía de INTERFAZ, no editorial: una serif de titular con cifras grandes se
 * lee como la esfera de un reloj. Una sola línea —«28 ago · 09:00» se partía en dos y separaba
 * el día de la hora— y la fuerza la da el PESO, no el tamaño. */
.cfbc-vivo__h{margin:4px 0 0;font-size:clamp(23px,2.4vw,28px);line-height:1.15;font-weight:800;
	letter-spacing:-.01em;color:var(--cafati-papel);font-variant-numeric:tabular-nums;
	white-space:nowrap}
/* El día en peso normal y la hora en negrita: dos datos, dos rangos, una línea. */
.cfbc-vivo__h b{font-weight:600;color:color-mix(in srgb, var(--cafati-papel) 88%, transparent)}
.cfbc-vivo__h b{font-weight:700}
.cfbc-scope a.cfbc-vivo__b,.cfbc-scope a.cfbc-vivo__b:link,.cfbc-scope a.cfbc-vivo__b:visited{
	display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:14px;
	padding:0 18px;border-radius:12px;background:var(--cafati-papel);color:var(--cafati-purpura);
	text-decoration:none;font-size:15px;font-weight:800;box-sizing:border-box;
	box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--cafati-grafito) 12%, transparent)}
.cfbc-vivo__b:hover{background:var(--cafati-marfil)}
.cfbc-vivo__b:focus-visible{outline:3px solid var(--cafati-papel);outline-offset:3px}
.cfbc-vivo__pie{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;padding-top:12px;
	border-top:1px solid color-mix(in srgb, var(--cafati-papel) 22%, transparent)}
.cfbc-vivo__d{font-size:14px;font-weight:700;color:var(--cafati-papel);
	font-variant-numeric:tabular-nums}
/* [mb1.546] SIN HORAS la tarjeta baja el tono: marfil con filo, no purpura solido. No hay nada
 * que ofrecer, asi que no se viste de oferta — el color tambien dice la verdad. */
.cfbc-vivo--sin{background:var(--cafati-marfil);color:var(--cafati-grafito);
	border:1px solid var(--cafati-linea);
	box-shadow:0 1px 3px color-mix(in srgb, var(--cafati-grafito) 8%, transparent)}
.cfbc-vivo--sin::before{background:var(--cafati-linea)}
.cfbc-vivo--sin .cfbc-vivo__r{color:var(--cafati-texto-tenue)}
.cfbc-vivo__h--sin{font-size:19px;line-height:1.25;font-weight:800;color:var(--cafati-verde);
	white-space:normal}
.cfbc-vivo--sin .cfbc-vivo__pie{border-top-color:var(--cafati-linea)}
.cfbc-vivo--sin .cfbc-vivo__d{color:var(--cafati-grafito)}
.cfbc-scope .cfbc-vivo--sin a.cfbc-vivo__b{background:var(--cafati-verde);color:var(--cafati-papel)}
.cfbc-vivo__d i{font-style:normal;font-weight:400;
	color:color-mix(in srgb, var(--cafati-papel) 72%, transparent)}
.cfbc-hero__miga{font-size:13px;text-transform:uppercase;letter-spacing:.06em;
	color:var(--cafati-texto-tenue);margin:0 0 var(--cafati-e-3);
	display:flex;gap:var(--cafati-e-2);flex-wrap:wrap;align-items:center}
.cfbc-hero__sep{color:var(--cafati-neutro-texto)}
.cfbc-hero__h1{font-family:var(--cafati-fuente-ed);font-size:clamp(32px,5.5vw,52px);line-height:1.08;
	font-weight:700;letter-spacing:-.02em;color:var(--cafati-verde);margin:0;max-width:22ch}
.cfbc-hero__bajada{font-size:clamp(16px,2vw,19px);line-height:1.55;color:var(--cafati-grafito);
	margin:var(--cafati-e-3) 0 0;max-width:52ch}
.cfbc-hero__respaldo{display:inline-block;margin:var(--cafati-e-4) 0 0;
	padding:var(--cafati-e-3) var(--cafati-e-4);border-radius:var(--cafati-r-md);
	background:var(--cafati-menta-tenue);border:1px solid var(--cafati-menta);
	font-size:14.5px;line-height:1.5;color:var(--cafati-grafito);max-width:46ch}

/* ── RUTA CAFATI · la firma gráfica propietaria (sistema visual VFINAL §3.2) ──────────────────
 * Línea fina, nodos, secuencia, continuidad. Hereda el color del contexto por `currentColor`, así
 * que la misma pieza sirve sobre marfil y sobre verde sin duplicarse.
 *
 * 🔴 SUTIL POR CONTRATO. La guía la quiere en headers y estados vacíos, no como ilustración
 * protagonista: opacidad baja y trazo de 1.25. Si compitiera con el H1 dejaría de ser una firma
 * para ser un adorno, que es justo lo que el sistema visual prohíbe.
 *
 * `pointer-events:none` porque no es interactiva y no debe robar el cursor a nada de debajo. */
.cfbc-ruta{display:block;width:100%;max-width:240px;height:auto;
	color:var(--cafati-verde);opacity:.28;pointer-events:none}
.cfbc-ruta--hero{margin:var(--cafati-e-5) 0 0}
/* Quien prefiere menos movimiento no gana nada aquí —la firma es estática— pero sí conviene bajar
 * su presencia cuando el sistema pide alto contraste: un trazo tenue sobre fondo claro es lo
 * primero que desaparece, y en ese modo vale más que se vea o que no esté. */
@media (prefers-contrast:more){ .cfbc-ruta{opacity:.55} }

/* ── 3 · BARRA DE CONFIANZA ───────────────────────────────────────────────────────────────── */
.cfbc-conf{display:grid;grid-template-columns:1fr;gap:var(--cafati-e-3);
	margin:0 var(--cafati-e-4) var(--cafati-e-5);
	background:var(--cafati-papel);border:1px solid var(--cafati-linea);
	border-radius:var(--cafati-r-lg);list-style:none}
/* 🔴 (0,2,0) A PROPÓSITO · CUARTA VEZ EN EL DÍA. `.cfbc-scope ul{padding:0}` es (0,1,1) y se comía
 * el relleno de la tarjeta: la línea verde del primer bloque quedaba a 1px del borde y se cruzaba
 * con la curva de 22px, que es exactamente lo que se veía mal. El relleno vertical es MAYOR que el
 * horizontal para que ninguna línea llegue a la zona curva de las esquinas. */
.cfbc-scope .cfbc-conf{padding:var(--cafati-e-5) var(--cafati-e-4)}
.cfbc-conf__i{display:flex;flex-direction:column;gap:2px}
/* 🔴 (0,2,0) A PROPÓSITO: `.cfbc-scope li{padding:0}` es (0,1,1) y se comía este sangrado, dejando
 * el texto pegado a la línea verde. Mismo mecanismo que el botón invisible, otra propiedad. */
/* 🔴 [mb1.419] CUATRO TARJETAS CON IDENTIDAD, no cuatro rayas iguales. Cada compromiso se viste
 * segun lo que SIGNIFICA (ver `confianza()`), y con eso el purpura entra por fin en la vitrina:
 * hasta hoy solo habia verde, crema y blanco —tres de los diecisiete hex canonicos— y la pantalla
 * lucia apagada. El purpura va donde la guia lo permite: acreditacion y conocimiento. */
.cfbc-scope .cfbc-conf__i{padding:var(--cafati-e-3);
	border-left:3px solid var(--cafati-verde-accion);
	border-radius:var(--cafati-r-md);
	background:var(--cafati-menta-tenue)}
.cfbc-conf__t{font-weight:700;font-size:15.5px;color:var(--cafati-verde);line-height:1.25}
.cfbc-conf__d{font-size:13.5px;line-height:1.45;color:var(--cafati-texto-tenue)}

/* Valor: el verde de accion, que es el de «lo que cuesta y lo que avanza». */
.cfbc-scope .cfbc-conf__i--valor{background:color-mix(in srgb, var(--cafati-verde-accion) 8%, var(--cafati-papel));
	border-left-color:var(--cafati-verde-accion)}
/* Acreditacion: PURPURA. La red selectiva es la promesa central del modelo boutique. */
.cfbc-scope .cfbc-conf__i--acreditacion{background:var(--cafati-purpura-suave);
	border-left-color:var(--cafati-purpura)}
.cfbc-conf__i--acreditacion .cfbc-conf__t{color:var(--cafati-purpura)}
/* Humano: menta. Calma, cercania — y nunca un segundo CTA. */
.cfbc-scope .cfbc-conf__i--humano{background:var(--cafati-menta);
	border-left-color:var(--cafati-verde-suave)}
/* Clinico: purpura muy suave. Conocimiento y respaldo. */
.cfbc-scope .cfbc-conf__i--clinico{background:color-mix(in srgb, var(--cafati-purpura) 6%, var(--cafati-papel));
	border-left-color:var(--cafati-purpura)}
.cfbc-conf__i--clinico .cfbc-conf__t{color:var(--cafati-purpura)}

/* ── 4 · PIE ──────────────────────────────────────────────────────────────────────────────── */
.cfbc-pie{margin-top:var(--cafati-e-6)}
.cfbc-pie__cta{background:var(--cafati-verde);color:var(--cafati-papel);
	padding:var(--cafati-e-6) var(--cafati-e-4);border-radius:var(--cafati-r-lg);
	margin:0 var(--cafati-e-4)}
.cfbc-pie__tit{font-family:var(--cafati-fuente-ed);font-size:clamp(22px,3.4vw,30px);line-height:1.2;
	font-weight:700;margin:0}
.cfbc-pie__sub{font-size:15.5px;line-height:1.5;margin:var(--cafati-e-2) 0 0;opacity:.92;max-width:52ch}
.cfbc-pie__botones{display:flex;gap:var(--cafati-e-2);flex-wrap:wrap;margin:var(--cafati-e-4) 0 0}
.cfbc-pie__b1,.cfbc-pie__b2{display:inline-flex;align-items:center;justify-content:center;
	min-height:48px;padding:0 var(--cafati-e-4);border-radius:var(--cafati-r-md);
	font-size:16px;font-weight:700}
.cfbc-pie__b1{background:var(--cafati-papel)}
.cfbc-pie__b2{background:transparent;border:1.5px solid rgba(255,255,255,.5)}
.cfbc-scope a.cfbc-pie__b1,.cfbc-scope a.cfbc-pie__b1:link,
.cfbc-scope a.cfbc-pie__b1:visited{color:var(--cafati-verde);text-decoration:none}
.cfbc-scope a.cfbc-pie__b2,.cfbc-scope a.cfbc-pie__b2:link,
.cfbc-scope a.cfbc-pie__b2:visited{color:var(--cafati-papel);text-decoration:none}
.cfbc-scope a.cfbc-pie__b1:hover{background:var(--cafati-menta)}
.cfbc-scope a.cfbc-pie__b2:hover{background:rgba(255,255,255,.12)}
.cfbc-pie__b1:focus-visible,.cfbc-pie__b2:focus-visible{outline:3px solid var(--cafati-menta);
	outline-offset:3px}
.cfbc-pie__nav{display:flex;gap:var(--cafati-e-3);flex-wrap:wrap;
	padding:var(--cafati-e-4);margin:0 var(--cafati-e-4)}
.cfbc-pie__a{font-size:14px}
/* 🔴 [mb1.485] AQUI VIVIA `color:var(--cafati-verde)` PARA ESTOS ENLACES, del pie viejo que se
   pintaba sobre papel. Con el pie nuevo —una losa verde— eso es verde sobre verde: contraste 1,0,
   doce enlaces invisibles con su sitio reservado. Y no bastaba escribir la regla nueva: esta
   llevaba `:link`, o sea (0,3,1) contra (0,2,1), y GANABA. Una regla huerfana de un diseno
   anterior no queda inerte: sigue compitiendo. El color vive ahora al final de la hoja, con el
   resto del pie, y cubre `:link` y `:visited` para que nadie le gane por ahi. */
/* [mb1.485] El color de esta linea vivia aqui, del pie claro. Sobre la losa verde lo pone la
   regla del final de la hoja; dejar el viejo era otra huerfana esperando a ganar por
   especificidad, como le paso a `__a`. Se queda solo la geometria. */
.cfbc-pie__legal{font-size:13px;
	padding:0 var(--cafati-e-4) var(--cafati-e-5);margin:0}

@media (min-width:768px){
	.cfbc-conf{grid-template-columns:repeat(2,1fr);gap:var(--cafati-e-4)}
	/* 🔴 [mb1.548] ESTA REGLA ERA LA QUE MANDABA. En mb1.534 bajé el relleno del héroe en la regla
	 * base y el hueco siguió ahí: esta consulta de escritorio lo devolvía a `e-7`. Cambiar una
	 * pieza obliga a mirar quién más la toca — la lección de las reglas huérfanas, otra vez. */
	.cfbc-hero{padding:var(--cafati-e-3) var(--cafati-e-5) var(--cafati-e-5)}
	.cfbc-conf,.cfbc-pie__cta,.cfbc-pie__nav{margin-left:var(--cafati-e-5);margin-right:var(--cafati-e-5)}
	.cfbc-pie__legal{padding-left:var(--cafati-e-5);padding-right:var(--cafati-e-5)}
}
@media (min-width:1080px){
	.cfbc-conf{grid-template-columns:repeat(4,1fr)}
}

/* ══ BUSCADOR DE LA VITRINA · el que conecta la pantalla con el motor ═══════════════════════════
 * Panel verde bajo el héroe, como en el mockup. Se envía a la propia pantalla por GET y sus tres
 * filtros llegan hasta `slots_libres()`: no hay página intermedia ni parámetro que nadie lea.
 * Los rótulos van en menta sobre el verde y los campos en papel — el contraste de cada par está
 * calculado, no elegido. */
.cfbc-busca{display:grid;grid-template-columns:1fr;gap:var(--cafati-e-3);
	margin:0 var(--cafati-e-4) var(--cafati-e-5);padding:var(--cafati-e-4);
	background:var(--cafati-verde);border-radius:var(--cafati-r-lg);scroll-margin-top:var(--cafati-e-4)}
.cfbc-busca__campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.cfbc-busca__campo label{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--cafati-menta)}
/* 🔴 [mb1.51] 16px Y NO 15, por la misma razón de siempre: **bajo 16px, Safari en iPhone hace zoom
   al enfocar el campo** y descoloca la página entera. Ya se corrigió en el cuadro de reserva; aquí
   seguía a 15px, y este buscador es lo PRIMERO que toca el tutor en un móvil. */
.cfbc-busca__campo select,.cfbc-busca__campo input{width:100%;min-height:var(--cfbc-tap,44px);
	padding:0 12px;border-radius:var(--cafati-r-sm);border:1px solid var(--cafati-linea);
	background:var(--cafati-papel);color:var(--cafati-grafito);font-size:16px;font-family:inherit}
/* 🔴 [mb1.51] iOS PINTA `input[type=date]` A SU MANERA: centra el valor y usa sus propias métricas,
   así que al lado del `select` —alineado a la izquierda— la fila se ve descuadrada. Es exactamente
   lo que se ve en un iPhone y no en un escritorio, y por eso ninguna medición de escritorio lo
   delata: hay que mirarlo en el teléfono.
   Se le quita la apariencia nativa SOLO a las fechas. Al `select` NO: ahí la apariencia nativa es
   lo que dibuja la flecha, y quitarla lo dejaría sin ninguna señal de que se despliega. */
.cfbc-busca__campo input[type=date]{-webkit-appearance:none;appearance:none;text-align:left}
.cfbc-busca__campo select:focus-visible,.cfbc-busca__campo input:focus-visible,
.cfbc-busca__b:focus-visible{outline:3px solid var(--cafati-menta);outline-offset:2px}
.cfbc-busca__b{min-height:var(--cfbc-tap,44px);padding:0 var(--cafati-e-4);border:0;
	border-radius:var(--cafati-r-sm);background:var(--cafati-papel);color:var(--cafati-verde);
	font-size:15.5px;font-weight:700;font-family:inherit;cursor:pointer;align-self:end}
.cfbc-busca__b:hover{background:var(--cafati-menta)}


/* 🔴 [mb1.51] «Desde» y «Hasta» EN PAREJA desde 400px. Hasta ahora el buscador era una sola columna
   por debajo de 768px: en un iPhone eso son CUATRO filas a ancho completo —servicio, desde, hasta,
   botón— y el bloque verde se come la pantalla antes de que se vea una sola hora disponible. Las dos
   fechas son campos cortos y del mismo par; ponerlas lado a lado quita una fila entera sin apretar
   nada, porque cada una conserva su objetivo táctil de 44px. */
@media (min-width:400px) and (max-width:767px){
	.cfbc-busca{grid-template-columns:1fr 1fr}
	.cfbc-busca__campo:first-child,.cfbc-busca__b{grid-column:1/-1}
}
@media (min-width:768px){
	.cfbc-busca{grid-template-columns:2fr 1fr 1fr auto;align-items:end;
		margin-left:var(--cafati-e-5);margin-right:var(--cafati-e-5)}
}

/* ══ EL CUADRO DE RESERVA DENTRO DE LA TARJETA · §15 ════════════════════════════════════════════
 * `cfbc.js` inyecta `.csl-holdbox` después de las horas, y hasta ahora heredaba estilos pensados
 * para el shortcode: dentro de la tarjeta de la vitrina quedaba plano y sin jerarquía. Aquí se le
 * da forma en el ámbito de la tarjeta, sin tocar el guion ni el shortcode.
 *
 * MÓVIL PRIMERO, de verdad: en 375 px el campo y el botón ocupan el ancho completo y se apilan —
 * el pulgar no acierta en un botón de media línea—; desde 560 px el botón se pone al lado del
 * campo, que es donde hay sitio. El objetivo táctil es el de la guía, no un número suelto. */
/* 🔴 [mb1.79] ESTA ES LA REGLA QUE DE VERDAD SE VE, y por eso el rediseño va aquí.
 *
 * La cartilla dentro de la tarjeta de una profesional la viste `.cfbc-t .csl-holdbox` —(0,2,0)—,
 * que gana a `.csl-holdbox` —(0,1,0)—. Al retirar la franja lateral de la regla base, la pantalla
 * **no cambió**: seguía saliendo de aquí. Lo cazó el banco.
 *
 * Es el tercer caso de especificidad en dos días, y siempre el mismo: se corrige la regla que uno
 * recuerda en vez de la que gana. La comprobación barata es mirar el elemento, no el archivo.
 *
 * El diseño nuevo, con el criterio de la indicación de la Dirección —«más profesional y lindo»—:
 * fondo PAPEL en vez de menta, para que la cartilla se lea como una superficie que se abre ENCIMA
 * de la tarjeta y no como un aviso pintado dentro de ella; radio grande; y elevación real. El
 * acento de marca lo pone la franja superior de `::before`, que hereda de la regla base. */
.cfbc-t .csl-holdbox{margin:var(--cafati-e-3) 0 0;padding:var(--cafati-e-4);
	background:var(--cafati-papel);border:1px solid var(--cafati-linea);
	border-radius:var(--cafati-r-lg);
	box-shadow:0 6px 20px rgba(2,62,50,.10);
	display:flex;flex-direction:column;gap:var(--cafati-e-3)}
/* [mb1.45] La «X» en el ámbito de la tarjeta: mismos tokens que el resto de la vitrina. La posición
   la hereda de la regla base —`position:absolute` la saca del flujo, así que el `flex` de la caja no
   la afecta—; aquí solo se ajusta el color para que no cante sobre la menta. */
.cfbc-t .csl-holdbox .csl-hold-x{color:var(--cafati-texto-tenue)}
.cfbc-t .csl-holdbox .csl-hold-x:hover{background:var(--cafati-papel);color:var(--cafati-verde)}
.cfbc-t .csl-hold-t{margin:0;font-size:15.5px;line-height:1.45;color:var(--cafati-grafito)}
.cfbc-t .csl-hold-t strong{color:var(--cafati-verde);white-space:nowrap}
.cfbc-t .csl-holdbox label{display:flex;flex-direction:column;gap:6px;
	font-size:13.5px;font-weight:700;color:var(--cafati-verde)}
.cfbc-t .csl-holdbox .csl-tel,.cfbc-t .csl-holdbox .csl-mail{width:100%;min-height:var(--cfbc-tap,44px);padding:0 12px;
	border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-sm);
	background:var(--cafati-papel);color:var(--cafati-grafito);
	font-size:16px;font-family:inherit}   /* 16px: por debajo, iOS hace zoom al enfocar */
/* [mb1.513] El foco verde de estos campos se RETIRÓ al homologar: el foco del tutor es púrpura
 * (regla junto a los campos). Dejarlo habría puesto anillo púrpura Y contorno verde a la vez. */
/* [mb1.513] El panel de reserva se TOMA: se eleva con contacto corto + ambiente largo, el
 * mismo material de las tarjetas del agendador. */
.cfbc-t .csl-holdbox{background:var(--cafati-papel);border:1px solid var(--cafati-linea);border-radius:14px;
	box-shadow:0 2px 6px color-mix(in srgb, var(--cafati-grafito) 10%, transparent),
	           0 14px 34px color-mix(in srgb, var(--cafati-grafito) 12%, transparent)}
.cfbc-t .csl-hold-actions{display:flex;flex-direction:column;gap:var(--cafati-e-2);align-items:stretch}
.cfbc-t .csl-hold-actions .csl-btn{min-height:48px;padding:0 var(--cafati-e-4);border:0;
	border-radius:var(--cafati-r-md);background:var(--cafati-verde);
	font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;
	box-shadow:inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 26%, transparent),
	           inset 0 -2px 0 color-mix(in srgb, var(--cafati-grafito) 16%, transparent),
	           0 6px 14px color-mix(in srgb, var(--cafati-verde) 22%, transparent)}
.cfbc-t .csl-hold-actions .csl-btn:hover{background:var(--cafati-verde-accion)}
/* [mb1.513] EL BOTÓN CONTESTA AL TOQUE — el mismo patrón del agendador (§8.12): al enviar se
 * apaga y gira. Aquí NO lleva name/value (dispara un fetch), así que puede callar su texto
 * mientras gira; con movimiento reducido el texto vuelve y la señal es la quietud del botón. */
.cfbc-t .csl-hold-actions .csl-btn.is-cargando{position:relative;color:transparent}
.cfbc-t .csl-hold-actions .csl-btn.is-cargando::after{content:"";position:absolute;inset:0;margin:auto;
	width:18px;height:18px;border-radius:50%;
	border:2px solid color-mix(in srgb, var(--cafati-papel) 45%, transparent);
	border-top-color:var(--cafati-papel);animation:cfbc-gira .7s linear infinite}
@media (prefers-reduced-motion: reduce){
	.cfbc-t .csl-hold-actions .csl-btn.is-cargando{color:var(--cafati-papel)}
	.cfbc-t .csl-hold-actions .csl-btn.is-cargando::after{content:none}
}
/* [mb1.550] En el panel comparte fila con el botón y crece con él: dos acciones a la misma
 * altura se leen como dos caminos, no como un botón y una nota. */
.cfbc-scope .csl-holdbox .csl-hold-alt{flex:1 1 auto;font-size:15px}
/* (0,3,1): la regla genérica del ámbito es (0,1,1) y aquí conviven texto claro y oscuro. */
.cfbc-scope .cfbc-t .csl-hold-actions a.csl-btn,
.cfbc-scope .cfbc-t .csl-hold-actions button.csl-btn{color:var(--cafati-papel);text-decoration:none}
.cfbc-scope .cfbc-t a.csl-hold-alt,.cfbc-scope .cfbc-t a.csl-hold-alt:link,
.cfbc-scope .cfbc-t a.csl-hold-alt:visited{color:var(--cafati-verde)}
/* 🔴 [mb1.72] EL COLOR LO DECIDE EL MENSAJE, NO EL CONTENEDOR.
 * `.csl-hold-out` es la región viva donde caen LAS DOS cosas: el error y el acuse de la reserva
 * hecha. Pintarla entera de `--cafati-problema-texto` teñía de rojo el mejor momento del recorrido
 * —«¡Hora retenida!» y el código de reserva—, y en producción se veía como una alarma.
 * Se vio recorriendo, no en el banco: el banco lee clases, y la clase `.csl-hold-ok` estaba puesta;
 * lo que faltaba era que ganara el color. Regla: el contenedor es neutro y cada mensaje se pinta. */
 * No se toca `.csl-err`: sigue con su propio color de atención, que ya ganaba por ser regla
 * directa sobre el elemento. Cambiarlo aquí habría sido un efecto colateral, no el arreglo. */
.cfbc-t .csl-hold-out{font-size:14.5px;line-height:1.5;font-weight:600;color:var(--cafati-grafito)}
.cfbc-t .csl-hold-out:empty{display:none}
.cfbc-t .csl-legal{margin:0;font-size:13px;line-height:1.45;color:var(--cafati-texto-tenue)}

@media (min-width:560px){
	.cfbc-t .csl-hold-actions{flex-direction:row;align-items:center;flex-wrap:wrap}
	.cfbc-t .csl-hold-actions .csl-btn{flex:0 0 auto}
	.cfbc-scope .csl-holdbox .csl-hold-alt{flex:0 1 auto}
}

/* [mb1.66] EL SALDO PENDIENTE, ARRIBA Y SIN AMBIGÜEDAD.
 * Un tutor que abre esto en el teléfono ve «Visita realizada» y un visto verde junto al abono; el
 * saldo quedaba más abajo, fuera de la primera pantalla. El color de problema y el peso lo sacan
 * de ahí. Usa `--cafati-problema-texto`, que es la variante que alcanza contraste AA sobre claro. */
.csl-saldo-aviso{display:flex;align-items:center;justify-content:space-between;gap:12px;
	margin:10px 0 12px;padding:12px 14px;border-radius:12px;
	background:var(--cafati-marfil);border:2px solid var(--cafati-problema-texto)}
.csl-saldo-aviso__t{font-weight:700;color:var(--cafati-problema-texto);letter-spacing:.01em}
.csl-saldo-aviso b{font-size:20px;font-weight:700;color:var(--cafati-problema-texto);
	font-variant-numeric:tabular-nums;white-space:nowrap}
/* [mb1.66] Un solo botón para todo el bloque bancario: los bancos reconocen el texto pegado y
 * rellenan la cuenta nueva solos. Ocupa el ancho porque es la acción de esa tarjeta. */
.csl-cobro-copiar{margin:12px 0 4px}
.csl-cobro-copiar .csl-copiar{width:100%;justify-content:center;font-weight:600}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.203] EL AGENDADOR · `/reservar/` — la pasada premium
 * ══════════════════════════════════════════════════════════════════════════════════════════════
 * Tres reglas gobiernan este bloque y las tres vienen de defectos pagados:
 *
 * · NI UN COLOR LITERAL. El único dueño del color es `cfbc-tokens.css`; los tonos derivados
 *   (halos de foco, sombras de marca) se mezclan con `color-mix()` DESDE el token, así que si la
 *   guía visual cambia el verde, cambia entero. Los guardianes de la vitrina lo vigilan.
 * · MÓVIL PRIMERO Y CON UNA MANO: nada tocable bajo 44px, campos a 16px (menos hace zoom en iOS),
 *   y la densidad crece hacia arriba, no hacia los lados.
 * · EL MOVIMIENTO ES CORTESÍA, NO ESPECTÁCULO: 160ms, solo transform/sombra, y respetando
 *   `prefers-reduced-motion` — a quien se marea, la pantalla se queda quieta.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

.cfbc-rv { max-width: 640px; margin: 0 auto; padding: 40px 18px 64px; }

/* ── El progreso: cuatro estaciones unidas por una vía ─────────────────────────────────────── */
.cfbc-rv__pasos { display: flex; gap: 8px; list-style: none; margin: 0 0 26px; padding: 0; }
/* 13px mínimo: lo fijó el guardián de texto público con pantalla de 320. */
.cfbc-rv__paso { flex: 1; font-size: 13px; line-height: 1.25; font-weight: 500;
	color: var(--cfbc-tenue); border-top: 3px solid var(--cfbc-linea); padding-top: 8px;
	transition: border-color .16s ease; }
/* 🔴 [mb1.422] LA MARCA DEL PASO ES UN DISCO, NO UN NÚMERO SUELTO.
   Dirección: «la barra de progreso son cuatro rayas finas sin identidad». La vía se queda —es la
   metáfora que ya tenía y funciona—, pero cada estación pasa a ser un disco que dice en qué
   estado está: RELLENO con un visto lo ya hecho, ANILLO lleno el paso vigente, contorno tenue lo
   que falta. Tres formas distinguibles sin depender del color, que es la regla de la casa.
   Regla más específica que `.cfbc-rv__paso span` para poder ganarle sin tocar aquélla. */
.cfbc-rv__paso .cfbc-rv__paso-n { display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; margin-bottom: 5px; border-radius: 999px;
	border: 2px solid var(--cfbc-linea); background: var(--cfbc-papel);
	color: var(--cfbc-tenue); font-weight: 700; font-size: 13px; line-height: 1;
	letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* HECHO: relleno, con el visto en blanco. «Esto ya pasó» se lee de un golpe. */
.cfbc-rv__paso.is-hecho .cfbc-rv__paso-n { background: var(--cfbc-verde);
	border-color: var(--cfbc-verde); color: var(--cfbc-papel); }
/* AQUÍ: anillo verde con halo. Se destaca con peso y halo, nunca con movimiento — quien está
   reservando una visita no necesita nada parpadeando. */
.cfbc-rv__paso.is-aqui .cfbc-rv__paso-n { border-color: var(--cfbc-verde);
	color: var(--cfbc-verde); background: var(--cfbc-papel);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfbc-verde) 18%, transparent); }
.cfbc-rv__paso span { display: block; font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.cfbc-rv__paso.is-aqui  { color: var(--cfbc-verde); border-top-color: var(--cfbc-verde); }
.cfbc-rv__paso.is-hecho { border-top-color: var(--cfbc-verde); }
.cfbc-rv__paso.is-hecho a { color: var(--cfbc-verde); text-decoration: none; }
.cfbc-rv__paso.is-hecho a:hover { text-decoration: underline; }

/* 🔴 [mb1.441] FRAUNCES, como manda el sistema de diseno. El titular iba en Inter 700 y era
   lo que mas separaba la pantalla real de su mockup: sin serif editorial, un embudo correcto
   se lee administrativo. La familia YA cargaba —medido comparando metricas contra Georgia,
   no leyendo el CSS— asi que esto es cablearla, no traerla. */
/* 🔴 [mb1.441b] `.cfbc-scope .cfbc-rv__t` y no `.cfbc-rv__t` a secas: la regla generica de
   titulares es `.cfbc-scope h2` —clase + elemento, (0,1,1)— y le ganaba a una clase sola
   (0,1,0). La declaracion estaba escrita y perdia en silencio: en la pantalla seguia Inter.
   Se midio preguntando al navegador que reglas casan, no leyendo la hoja. */
.cfbc-scope .cfbc-rv__t { font-family: var(--cafati-fuente-ed); font-weight: 600; letter-spacing: -.01em;
	font-size: clamp(28px, 4.2vw, 38px); line-height: 1.08; margin: 0 0 20px; color: var(--cfbc-verde);
	letter-spacing: -.3px; }
/* 🔴 [mb1.424] LOS TÍTULOS DE FAMILIA, CON AIRE Y CON IDENTIDAD.
   Dirección: «esos títulos no se ven nada bien, están como apretados y poco premium».

   Y tenía razón medida: 13px tenues, a 26px del bloque anterior y a 10px de sus propias tarjetas
   —casi la misma distancia arriba que abajo—, así que el rótulo flotaba entre dos rejillas sin
   pertenecer a ninguna. Un encabezado que no se pega a lo que encabeza no organiza nada.

   Tres cambios y ninguno es adorno:
     · MÁS AIRE ARRIBA QUE ABAJO (40 vs 14). Es lo que convierte una etiqueta en el comienzo de
       una sección: la separación dice dónde termina lo anterior.
     · SE ANCLA CON UNA MARCA. Una barra verde corta a la izquierda y una línea fina que corre
       hasta el borde: el ojo encuentra dónde empieza cada familia sin leerlas todas.
     · SE LEE. Sube a 14px y al color de texto — en tenue competía por abajo con la descripción
       de las tarjetas, que es la que NO debe destacar. */
/* 🔴 [mb1.431] EL RÓTULO DE FAMILIA DEJA DE SER TITULAR DE PERIÓDICO. Las mayúsculas con letra
   espaciada eran la mitad del «diario de papel antiguo»: ahora es un nombre en caja normal con
   su medallón delante, y la línea que corre a la derecha solo marca dónde empieza la sección. */
.cfbc-rv__grupo { font-size: 17px; margin: 0 0 14px; color: var(--cfbc-texto);
	font-weight: 750; letter-spacing: -.1px;
	display: flex; align-items: center; gap: 12px; }
.cfbc-rv__grupo::after { content: ''; flex: 1 1 auto; height: 1px;
	background: color-mix(in srgb, var(--cfbc-linea) 70%, transparent); }
/* El medallón: la pieza de la biblioteca sobre un disco de papel. Si la imagen no está, el
   encabezado queda como siempre — el dibujo adelanta, el texto garantiza. */
.cfbc-rv__grupo-i { flex: 0 0 auto; width: 40px; height: 40px; padding: 6px; border-radius: 999px;
	background: var(--cfbc-papel); box-shadow: var(--cfbc-sombra); object-fit: contain; }

/* [mb1.424] Lo que el tutor ya nos contó, devuelto con sus palabras. Va ANTES de la indicación y
   en voz baja: es contexto, no una instrucción. La cita entre comillas la pone `<q>` sola. */
.cfbc-rv__eco { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--cfbc-tenue); }
.cfbc-rv__eco q { color: var(--cfbc-texto); font-style: normal; }

/* El error se lee como error: el borde lo adelanta, el texto lo garantiza. */
.cfbc-rv__error { background: var(--cfbc-marfil); border-left: 4px solid var(--cfbc-riesgo);
	color: var(--cafati-atencion-texto); padding: 12px 14px; border-radius: 10px; margin: 0 0 18px;
	font-weight: 600; }
.cfbc-rv__aviso { background: var(--cfbc-marfil); border-left: 4px solid var(--cfbc-verde);
	padding: 12px 14px; border-radius: 10px; margin: 16px 0; }

/* ── Paso 1 · perro o gato, la decisión de un toque ────────────────────────────────────────── */
/* [mb1.664] AQUÍ VIVÍA UN SEGUNDO JUEGO DE REGLAS PARA `.cfbc-rv__op`, y ese era el problema:
 * dos bloques vistiendo el mismo elemento, ganando el de abajo por prefijo y por orden. Reescribí
 * este creyendo que era el vivo y no cambió nada en pantalla.
 *
 * 🔴 **Dos bloques para el mismo elemento significa que uno no se está leyendo**, y desde fuera no
 * se distingue cuál. Se deja UNO —el de `.cfbc-scope`, más abajo— y aquí solo lo estructural que
 * nadie más declara. */
.cfbc-rv__especie { border: 0; padding: 0; margin: 0 0 20px; }
.cfbc-rv__especie legend { font-weight: 600; margin-bottom: 10px; }
/* El radio no se pinta: la caja entera ES el control. Sigue existiendo para teclado y lector. */
.cfbc-rv__op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfbc-rv__icono { display: block; }

/* ── Campos ────────────────────────────────────────────────────────────────────────────────── */
.cfbc-rv__campo { margin: 0 0 18px; }
.cfbc-rv__campo label { display: block; font-weight: 650; margin-bottom: 6px; }
.cfbc-rv__campo input, .cfbc-rv__campo select, .cfbc-rv__campo textarea {
	width: 100%; box-sizing: border-box; min-height: 50px; padding: 13px 14px;
	font-size: 16px; font-family: inherit; color: var(--cfbc-texto);
	border: 1.5px solid var(--cfbc-linea); border-radius: 12px; background: var(--cfbc-papel);
	transition: border-color .16s ease, box-shadow .16s ease; }
/* [mb1.491] Aqui el foco se pintaba en VERDE PROFUNDO. Lo sustituye el purpura de marca, en la
   regla con ambito del final de la hoja. Se deja solo `outline:none` —lo unico que esta regla
   sigue aportando— porque una regla huerfana con el color viejo es lo que en mb1.485 volvio
   invisibles doce enlaces: no queda inerte, espera a ganar por especificidad. */
.cfbc-rv__campo input:focus-visible, .cfbc-rv__campo select:focus-visible,
.cfbc-rv__campo textarea:focus-visible { outline: none; }
.cfbc-rv__campo textarea { min-height: 92px; }
.cfbc-rv__campo small { display: block; margin-top: 6px; color: var(--cfbc-tenue); font-size: 13px; }
.cfbc-rv__ayuda { color: var(--cfbc-tenue); font-size: 14px; margin: 10px 0 16px; }

/* ── Paso 2 · las tarjetas de servicio ─────────────────────────────────────────────────────── */
/* 🔴 [mb1.443] `auto-fit` y no `1fr 1fr`: con la rejilla fija, una tarjeta sola ocupaba media
   fila y dejaba la otra mitad en blanco —le pasaba a «Vacunación anual», que va sola en su
   familia—. Con `auto-fit` una tarjeta llena su fila y dos se reparten. */
.cfbc-rv__rejilla { display: grid; gap: 10px; }
/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.462] «A DOMICILIO», DICHO DONDE SE VE Y DONDE SE CREE
 * 13px es el suelo publico del proyecto y el antetitulo se apoya justo en el: mas pequeño no se
 * lee, y este renglon EXISTE para leerse.
 * Especificidad dentro del ambito: `.cfbc-scope p` y `.cfbc-scope b` son (0,1,1) y se comen una
 * clase suelta — ya paso tres veces en esta misma hoja.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__ojo{
	margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--cafati-verde-accion); line-height: 1.2;
}
/* El acento del titular del paso 1. Purpura de marca: 8,87 sobre marfil. */
.cfbc-scope .cfbc-rv__t-ac{ color: var(--cafati-purpura); }
/* La linea de la visita: mismo renglon que las demas, pero su valor es una PALABRA y no una
   cifra, asi que no se alinea con la columna de montos ni finge serlo. */
.cfbc-scope .cfbc-rv__linea--dom b{
	font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
	color: var(--cafati-verde-accion); font-variant-numeric: normal;
}
/* [mb1.460] El rotulo que divide la familia de vacunas: «Para una mascota» sobre el par de
   tarjetas, y el plegable de abajo ya dice «¿Vacunas para 2 o mas mascotas?». Dos preguntas
   distintas —cuantas mascotas, cuantas vacunas— y cada una con su sitio dicho.
   Especificidad dentro del ambito: `.cfbc-scope p` es (0,1,1) y se come una clase suelta. */
.cfbc-scope .cfbc-rv__sub-r{
	margin: 2px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--cfbc-tenue);
}
/* [mb1.431] La tarjeta gana su icono sin perder nada: en rejilla de una columna, el icono ocupa
   la primera columna y el texto fluye a su lado; sin icono, la tarjeta es la de siempre. */
.cfbc-rv__svc { display: grid; grid-template-columns: 1fr; gap: 4px; width: 100%; text-align: left;
	min-height: 64px; padding: 15px 16px; cursor: pointer; font: inherit; color: var(--cfbc-texto);
	border: 1.5px solid var(--cfbc-linea); border-radius: 18px; background: var(--cfbc-papel);
	box-shadow: var(--cfbc-sombra); transition: transform .16s ease, border-color .16s ease; }
.cfbc-rv__svc:has(.cfbc-rv__svc-i) { grid-template-columns: auto 1fr; column-gap: 14px; }
.cfbc-rv__svc-i { grid-row: 1 / span 3; align-self: center; width: 52px; height: 52px;
	padding: 6px; border-radius: 14px; background: var(--cfbc-marfil); object-fit: contain; }
/* La especie va DIBUJADA (el SVG monolínea del paso 1), no como pieza de biblioteca: hereda el
   verde del texto y pesa cero bytes de red. */
.cfbc-rv__svc-i--esp { display: grid; place-items: center; color: var(--cfbc-verde);
	background: color-mix(in srgb, var(--cafati-menta) 55%, var(--cfbc-papel)); }
.cfbc-rv__svc:hover, .cfbc-rv__svc:focus-visible { border-color: var(--cfbc-verde); transform: translateY(-1px); }
.cfbc-rv__svc.is-sel { border-color: var(--cfbc-verde); border-width: 2px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--cfbc-verde) 12%, transparent); }
.cfbc-rv__svc-n { font-weight: 700; font-size: 16px; color: var(--cfbc-verde); }
.cfbc-rv__svc-d { font-size: 13.5px; color: var(--cfbc-tenue); line-height: 1.35; }
.cfbc-rv__svc-p { font-weight: 750; font-size: 19px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.cfbc-rv__svc-p i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--cfbc-tenue); }
/* La grande, sola y arriba: nueve de cada diez visitas son ésta. */
.cfbc-rv__destacado { margin-bottom: 14px; }
.cfbc-rv__svc--grande { border-width: 2px; border-color: var(--cfbc-verde);
	background: var(--cfbc-marfil); min-height: 96px; border-radius: 22px; }
.cfbc-rv__svc--grande .cfbc-rv__svc-i { background: var(--cfbc-papel); }
.cfbc-rv__svc--grande .cfbc-rv__svc-n { font-size: 19px; }
.cfbc-rv__svc--grande .cfbc-rv__svc-p { font-size: 23px; }

/* ══ [mb1.431] LA CAPA DE CADA FAMILIA — «la calidez viene de la luz, no del ruido» ══════════
   Cada familia es un lugar: un panel con su tono, separado por aire y no por rayas. El de
   DESPEDIDA lleva el púrpura suave —dignidad y cuidado, el registro que el concepto le da al
   púrpura— y es la única familia que lo lleva: un acento, no un baño. */
.cfbc-rv__fam { margin: 0 0 18px; padding: 16px 14px 14px; border-radius: 22px;
	background: color-mix(in srgb, var(--cafati-menta) 28%, var(--cfbc-papel)); }
/* 🔴 [mb1.445] SIN TINTE. Iba en púrpura y, con la tarjeta también tintada, Dirección lo vio
   como «un cartel de funeral». Una sección de eutanasia no necesita que el color se lo
   recuerde a quien llega: ya lo sabe. Caja neutra como las demás — no dramatizar es la
   forma de respetar. El púrpura se muda a los momentos de marca, que es su sitio. */
.cfbc-rv__fam--despedida { background: var(--cfbc-papel); }
.cfbc-rv__fam--otros { background: var(--cfbc-marfil); }

/* ── Los pliegues: packs de vacunas y pesos de la despedida ────────────────────────────────
   La misma gramática que los días del paso 3: un desplegable que DICE qué guarda, con la
   flecha de la casa. Dentro, filas-botón —rótulo a la izquierda, precio tabular a la derecha—
   que se leen de un barrido. */
.cfbc-rv__packs { margin-top: 10px; border: 1.5px dashed color-mix(in srgb, var(--cfbc-verde) 35%, var(--cfbc-linea));
	border-radius: 18px; padding: 0 14px; background: var(--cfbc-papel); }
.cfbc-rv__packs > summary { list-style: none; cursor: pointer; min-height: 60px;
	display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.cfbc-rv__packs > summary::-webkit-details-marker { display: none; }
.cfbc-rv__packs > summary::after { content: ''; width: 8px; height: 8px; flex-shrink: 0;
	margin-left: auto; border-right: 2px solid var(--cfbc-tenue); border-bottom: 2px solid var(--cfbc-tenue);
	transform: rotate(45deg); transition: transform .16s ease; }
.cfbc-rv__packs[open] > summary::after { transform: rotate(225deg); }
.cfbc-rv__packs-i { flex: 0 0 auto; width: 40px; height: 40px; padding: 5px; border-radius: 12px;
	background: color-mix(in srgb, var(--cafati-menta) 55%, var(--cfbc-papel)); object-fit: contain; }
.cfbc-rv__packs-tt { display: flex; flex-direction: column; gap: 2px; }
.cfbc-rv__packs-tt b { font-size: 15.5px; color: var(--cfbc-verde); }
.cfbc-rv__packs-tt small { font-size: 13px; color: var(--cfbc-tenue); font-weight: 600; }
/* [mb1.455] Aqui vivia `.cfbc-rv__packs-t`, el rotulo de grupo en gris de 13px. Ahora cada
   plan es la cabecera de su propio `<details class="cfbc-rv__plan">`. */

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.455] LOS DOS PLANES DE VACUNA
 * Dirección: «que se vea si es para UNA vacuna o para las anuales, con bloques morados». El
 * bloque de color hace el trabajo que hacía un rótulo de 13px en gris, y lo hace antes de leer.
 * Especificidad dentro del ámbito desde el primer día: `.cfbc-scope p/b/small` es (0,1,1) y ya
 * se ha comido tres veces reglas de componente escritas con una sola clase.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__plan{
	margin: 10px 0 0; border: 1.5px solid var(--cafati-purpura-tenue); border-radius: 14px;
	background: var(--cfbc-papel); overflow: hidden;
}
.cfbc-scope .cfbc-rv__plan + .cfbc-rv__plan{ margin-top: 8px; }
.cfbc-scope .cfbc-rv__plan > summary{
	list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center;
	gap: 12px; padding: 10px 14px; background: var(--cafati-purpura-tenue);
}
.cfbc-scope .cfbc-rv__plan > summary::-webkit-details-marker{ display: none; }
/* El bloque: una barra con el peso de un marcador, no un punto decorativo. */
.cfbc-scope .cfbc-rv__plan-b{
	flex: 0 0 auto; width: 6px; align-self: stretch; min-height: 34px; border-radius: 99px;
	background: var(--cafati-purpura);
}
.cfbc-scope .cfbc-rv__plan-tt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cfbc-scope .cfbc-rv__plan-tt b{ font-size: 15.5px; font-weight: 700; color: var(--cafati-purpura); }
.cfbc-scope .cfbc-rv__plan-tt small{ font-size: 13px; font-weight: 600; color: var(--cfbc-tenue); }
/* La flecha, igual que la del plegable padre: una sola gramática para «esto se abre». */
.cfbc-scope .cfbc-rv__plan > summary::after{
	content: ''; flex-shrink: 0; width: 8px; height: 8px; margin-left: auto;
	border-right: 2px solid var(--cafati-purpura); border-bottom: 2px solid var(--cafati-purpura);
	transform: rotate(45deg); transform-origin: center; transition: transform .18s ease;
}
.cfbc-scope .cfbc-rv__plan[open] > summary::after{ transform: rotate(225deg); }
.cfbc-scope .cfbc-rv__plan-l{ display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
@media (prefers-reduced-motion: reduce){
	.cfbc-scope .cfbc-rv__plan > summary::after{ transition: none; }
}
.cfbc-rv__packs > p:first-of-type { margin-top: 2px; }

.cfbc-rv__pesos { margin-top: 8px; border-top: 1px dashed var(--cfbc-linea); }
.cfbc-rv__pesos > summary { list-style: none; cursor: pointer; min-height: 48px;
	display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--cfbc-verde);
	font-size: 14.5px; }
.cfbc-rv__pesos > summary::-webkit-details-marker { display: none; }
.cfbc-rv__pesos > summary::after { content: ''; width: 8px; height: 8px; flex-shrink: 0;
	margin-left: auto; border-right: 2px solid var(--cfbc-tenue); border-bottom: 2px solid var(--cfbc-tenue);
	transform: rotate(45deg); transition: transform .16s ease; }
.cfbc-rv__pesos[open] > summary::after { transform: rotate(225deg); }

.cfbc-rv__opcion { display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; min-height: 50px; padding: 10px 14px; margin: 0 0 8px; cursor: pointer;
	font: inherit; text-align: left; color: var(--cfbc-texto);
	border: 1.5px solid var(--cfbc-linea); border-radius: 14px; background: var(--cfbc-papel);
	transition: border-color .16s ease, background .16s ease; }
.cfbc-rv__opcion:hover, .cfbc-rv__opcion:focus-visible { border-color: var(--cfbc-verde); }
.cfbc-rv__opcion.is-sel { border-color: var(--cfbc-verde); border-width: 2px;
	background: var(--cfbc-marfil); }
/* La tarjeta COMPUESTA es un contenedor, no un botón: su interactivo es el desplegable de
   dentro. Heredar el cursor y el salto del hover sería un cursor que miente. */
/* [mb1.443] `--multi` se retira: la despedida dejo de disfrazarse de boton de servicio y tiene
   su propia caja (`.cfbc-rv__desp`). Dejar la regla seria CSS que no pinta nada — y el censo del
   banco lo caza, que es exactamente para lo que existe. */
.cfbc-rv__opcion-t { font-weight: 650; font-size: 15px; }
.cfbc-rv__opcion-p { font-variant-numeric: tabular-nums; font-size: 15.5px; font-weight: 750; }

/* 🔴 [mb1.431] LOS ADICIONALES, «EXPRESADOS VISUALMENTE DE MANERA PRECIOSA» (Dirección).
   Mini-tarjetas con su icono y una marca de selección propia. La casilla nativa sigue ahí,
   oculta pero enfocable —teclado y lector la usan tal cual—; la marca visible va PEGADA a ella
   (`input:checked + marca`) y el realce de la tarjeta usa `:has`, el patrón del paso 1. El
   estado seleccionado vive en REPOSO: borde, fondo y visto — jamás solo en el hover. */
.cfbc-rv__extras { margin: 24px 0; border: 1.5px solid var(--cfbc-linea); border-radius: 18px;
	padding: 0 16px; background: color-mix(in srgb, var(--cafati-menta) 22%, var(--cfbc-papel)); }
.cfbc-rv__extras summary { min-height: 56px; display: flex; align-items: center; font-weight: 650;
	cursor: pointer; color: var(--cfbc-verde); }
.cfbc-rv__extras-g { display: grid; gap: 10px; padding: 2px 0 6px; }
@media (min-width: 640px) { .cfbc-rv__extras-g { grid-template-columns: 1fr 1fr; } }
.cfbc-rv__extra { position: relative; display: grid; grid-template-columns: auto auto 1fr auto;
	align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px; cursor: pointer;
	border: 1.5px solid var(--cfbc-linea); border-radius: 16px; background: var(--cfbc-papel);
	box-shadow: var(--cfbc-sombra); transition: border-color .16s ease, background .16s ease; }
/* La casilla real: invisible pero VIVA. Nada de display:none — perdería el foco del teclado. */
.cfbc-rv__extra input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cfbc-rv__extra-marca { width: 24px; height: 24px; border-radius: 8px;
	border: 2px solid var(--cfbc-linea); background: var(--cfbc-papel);
	display: grid; place-items: center; transition: background .16s ease, border-color .16s ease; }
.cfbc-rv__extra input:checked + .cfbc-rv__extra-marca { background: var(--cfbc-verde);
	border-color: var(--cfbc-verde); }
.cfbc-rv__extra input:checked + .cfbc-rv__extra-marca::after { content: '\2713';
	color: var(--cfbc-papel); font-size: 15px; font-weight: 800; line-height: 1; }
.cfbc-rv__extra:has(input:checked) { border-color: var(--cfbc-verde);
	background: var(--cfbc-marfil);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfbc-verde) 12%, transparent); }
.cfbc-rv__extra:has(input:focus-visible) { outline: 3px solid var(--cafati-purpura);
	outline-offset: 2px; }
.cfbc-rv__extra:hover { border-color: var(--cfbc-verde); }
.cfbc-rv__extra-i { width: 44px; height: 44px; padding: 4px; border-radius: 12px;
	background: color-mix(in srgb, var(--cafati-menta) 45%, var(--cfbc-papel)); object-fit: contain; }
.cfbc-rv__extra-n { font-weight: 650; font-size: 14.5px; line-height: 1.3; }
.cfbc-rv__extra-n small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500;
	color: var(--cfbc-tenue); line-height: 1.35; }
.cfbc-rv__extra-p { font-variant-numeric: tabular-nums; font-size: 15.5px; font-weight: 750; }

/* ── Paso 3 · dónde y cuándo ───────────────────────────────────────────────────────────────── */
/* El botón secundario: presente para el mundo sin JavaScript; el guion lo esconde al sobrar. */
.cfbc-rv__ver-fila { margin: 0 0 18px; }
.cfbc-rv__btn2 { display: inline-flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 10px 18px; cursor: pointer; font: inherit; font-size: 15px;
	font-weight: 650; color: var(--cfbc-verde); border: 1.5px solid var(--cfbc-verde);
	border-radius: 12px; background: var(--cfbc-papel); }
.cfbc-rv__btn2:hover { background: var(--cfbc-marfil); }
.cfbc-rv__ver--js { display: none; }

/* «Lo antes posible»: la respuesta antes que el catálogo. */
.cfbc-rv__pronto { display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; min-height: 68px; padding: 14px 20px; margin: 6px 0 4px; cursor: pointer;
	font: inherit; border: 0; border-radius: 16px; background: var(--cfbc-verde);
	color: var(--cfbc-papel); box-shadow: var(--cfbc-sombra);
	transition: transform .16s ease, box-shadow .16s ease; }
.cfbc-rv__pronto:hover { transform: translateY(-2px);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--cfbc-verde) 30%, transparent); }
.cfbc-rv__pronto-r { font-size: 15px; opacity: .92; }
.cfbc-rv__pronto-h { font-size: 22px; letter-spacing: -.2px; }

/* La agenda: UNA pieza. El primer día abierto; los siguientes, plegados y anunciando cuánto traen. */
.cfbc-rv__agenda { border: 1.5px solid var(--cfbc-linea); border-radius: 16px;
	background: var(--cfbc-papel); overflow: hidden; }
.cfbc-rv__dia { padding: 14px 16px 16px; }
.cfbc-rv__dia-t { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
	font-size: 15px; font-weight: 700; color: var(--cfbc-texto); }
.cfbc-rv__dia-n { font-size: 13px; font-weight: 500; color: var(--cfbc-tenue); }
.cfbc-rv__dia-pleg { border-top: 1px solid var(--cfbc-linea); }
.cfbc-rv__dia-pleg summary { list-style: none; cursor: pointer; padding: 0 16px; min-height: 52px;
	display: flex; align-items: center; }
.cfbc-rv__dia-pleg summary::-webkit-details-marker { display: none; }
.cfbc-rv__dia-pleg summary .cfbc-rv__dia-t { margin: 0; flex: 1; }
/* La flecha del plegable, dibujada con el borde: gira al abrir. */
.cfbc-rv__dia-pleg summary::after { content: ''; width: 9px; height: 9px; flex-shrink: 0;
	border-right: 2px solid var(--cfbc-tenue); border-bottom: 2px solid var(--cfbc-tenue);
	transform: rotate(45deg); transition: transform .16s ease; margin-left: 10px; }
.cfbc-rv__dia-pleg[open] summary::after { transform: rotate(225deg); }
.cfbc-rv__dia-pleg > .cfbc-rv__horas { padding: 0 16px 16px; }
/* Las horas: píldoras en rejilla que envuelve. Dos cifras grandes, que es lo único a comparar. */
.cfbc-rv__horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.cfbc-rv__hora { min-height: 50px; padding: 10px 6px; cursor: pointer; font: inherit;
	font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums;
	color: var(--cfbc-verde); border: 1.5px solid var(--cfbc-linea); border-radius: 12px;
	background: var(--cfbc-papel); transition: transform .16s ease, border-color .16s ease,
	background .16s ease; }
.cfbc-rv__hora:hover, .cfbc-rv__hora:focus-visible { border-color: var(--cfbc-verde);
	background: var(--cfbc-marfil); transform: translateY(-1px); }
.cfbc-rv__mas { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; }

/* ── Paso 4 · la revisión ──────────────────────────────────────────────────────────────────── */
.cfbc-rv__rev { border: 1.5px solid var(--cfbc-linea); border-radius: 16px;
	background: var(--cfbc-papel); padding: 4px 16px; margin: 0 0 14px; box-shadow: var(--cfbc-sombra); }
.cfbc-rv__rev-f { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; }
.cfbc-rv__rev-f + .cfbc-rv__rev-f { border-top: 1px solid var(--cfbc-linea); }
.cfbc-rv__rev-et { width: 78px; flex-shrink: 0; font-size: 13px; text-transform: uppercase;
	letter-spacing: .06em; color: var(--cfbc-tenue); font-weight: 700; }
.cfbc-rv__rev-v { flex: 1; font-weight: 650; }
.cfbc-rv__rev-v small { font-weight: 400; color: var(--cfbc-tenue); }
.cfbc-scope a.cfbc-rv__rev-cambiar { font-size: 13.5px; font-weight: 600; color: var(--cfbc-verde);
	text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.cfbc-scope a.cfbc-rv__rev-cambiar:hover { text-decoration: underline; }

/* La cuenta, como un recibo: líneas finas, total con peso. Ni un número se calcula aquí. */
.cfbc-rv__cuenta { border: 1.5px solid var(--cfbc-linea); border-radius: 16px; padding: 14px 18px;
	margin: 0 0 20px; background: var(--cfbc-papel); box-shadow: var(--cfbc-sombra); }
.cfbc-rv__linea, .cfbc-rv__total { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.cfbc-rv__linea { font-size: 14.5px; }
.cfbc-rv__linea + .cfbc-rv__linea { border-top: 1px dashed var(--cfbc-linea); }
.cfbc-rv__total { border-top: 2px solid var(--cfbc-linea); margin-top: 6px; padding-top: 12px;
	font-size: 19px; font-weight: 750; color: var(--cfbc-verde); }
.cfbc-rv__cuenta b { font-variant-numeric: tabular-nums; }

/* ── El paso adelante ──────────────────────────────────────────────────────────────────────── */
.cfbc-rv__seguir { margin: 26px 0 0; }
.cfbc-rv__cta { display: inline-flex; align-items: center; justify-content: center; width: 100%;
	min-height: 58px; padding: 15px 22px; cursor: pointer; font: inherit; font-size: 17px;
	font-weight: 700; border: 0; border-radius: 14px; background: var(--cfbc-verde);
	color: var(--cfbc-papel); text-decoration: none; box-shadow: var(--cfbc-sombra);
	transition: transform .16s ease, box-shadow .16s ease; }
/* 🔴 [mb1.205 · H12] EL CTA QUE ES ENLACE. `.cfbc-c a` pesa (0,1,1) y le ganaba el color a la
 * clase (0,1,0): «Seguir mi visita» salió VERDE SOBRE VERDE en producción — texto invisible
 * en el botón más importante de la confirmación. Es la lección de mb1.25 del portal repetida
 * en la vitrina; esta regla pesa (0,2,1) y no hay tercera vez. */
.cfbc-rv a.cfbc-rv__cta { color: var(--cfbc-papel); }
.cfbc-rv__cta:hover { transform: translateY(-2px);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--cfbc-verde) 30%, transparent); }
/* La espera tras el toque: el guion la enciende; sin guion no hace falta —la página ya navega—. */
.cfbc-rv__cta.is-espera { opacity: .75; pointer-events: none; }
.cfbc-rv__cta.is-espera::after { content: '…'; margin-left: 6px; }

/* ── La confirmación: donde se gana la confianza ───────────────────────────────────────────── */
.cfbc-rv__hecho { text-align: center; padding: 26px 0; }
/* 🔴 [mb1.772] EL ANTETITULO NO ESTABA CENTRADO, Y NO ERA COSA DEL TRACKING.
 *
 * Direccion: «no cuadran ni se centran el simbolo del ticket con veterinaria a domicilio y la
 * confirmacion». MEDIDO: la tinta del antetitulo caia 45,77px a la izquierda del centro mientras el
 * `<h1>` daba 0,01. Cuarenta y seis pixeles no son medio espacio de letra: son otra cosa.
 *
 * La causa: el antetitulo es un `<p>` y hereda la MEDIDA DE LECTURA del ambito (`max-width` de
 * 508px). Con `margin:0` esa caja se queda pegada a la izquierda del contenedor de 600, asi que su
 * texto se centra dentro de 508 y no de 600 — (600-508)/2 = 46px, el numero exacto. El `<h1>` se
 * salva porque lleva `max-width:none`.
 *
 * ⚠️ SE CENTRA LA CAJA, NO SE QUITA LA MEDIDA. Poner `max-width:none` centraria igual y de paso
 * dejaria el subtitulo corriendo a lo ancho de la pantalla en escritorio, que es justo lo que la
 * medida de lectura existe para impedir. `margin-inline:auto` arregla la posicion y conserva la
 * regla — y alcanza a los tres parrafos de un golpe, incluido el pie del codigo. */
.cfbc-scope .cfbc-rv__hecho > p { margin-inline: auto; }
.cfbc-rv__ok { color: var(--cfbc-ok); margin-bottom: 4px; }
.cfbc-rv__hecho-sub { color: var(--cfbc-tenue); margin: -8px 0 18px; }
/* 🔴 [mb1.710] EL CODIGO CEDE PESO, y no es un retoque: la pantalla se lo daba casi todo a lo
   unico que NO pide ninguna accion. Se guarda y se consulta despues; lo que el tutor puede hacer
   AHORA es el formulario de abajo, y empezaba justo en el pliegue.
   No se esconde ni se mueve: sigue primero, con su caja y su color de marca, porque es la buena
   noticia y es lo que da confianza para rellenar lo siguiente. Lo que baja es el TAMANO. */
.cfbc-rv__codigo-caja { display: inline-flex; flex-direction: column; gap: 1px; padding: 10px 22px;
	margin: 2px 0 8px; border: 2px dashed var(--cfbc-verde); border-radius: 14px;
	background: var(--cfbc-marfil); }
.cfbc-rv__codigo-caja > span { font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
	color: var(--cfbc-tenue); font-weight: 700; }
.cfbc-rv__codigo-caja small { color: var(--cfbc-tenue); font-size: 13px; }
/* 24px y no 32: sigue leyendose de un vistazo y se copia igual, pero deja de ser el heroe de la
   pantalla. Con `tabular-nums` los seis caracteres quedan a la misma anchura y se dictan mejor
   por telefono, que es para lo que de verdad se usa. */
.cfbc-rv__codigo { font-size: 23px; font-weight: 800; letter-spacing: .05em; color: var(--cfbc-verde);
	font-variant-numeric: tabular-nums; }
/* Los tres pasos que vienen: la promesa de la coordinación, numerada por CSS. */
.cfbc-rv__despues { list-style: none; counter-reset: paso; margin: 22px auto 0; padding: 0;
	max-width: 460px; text-align: left; }
.cfbc-rv__despues li { counter-increment: paso; position: relative; padding: 10px 0 10px 44px;
	font-size: 14.5px; line-height: 1.45; }
.cfbc-rv__despues li::before { content: counter(paso); position: absolute; left: 0; top: 10px;
	width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--cfbc-verde); color: var(--cfbc-papel);
	font-weight: 700; font-size: 14px; }
.cfbc-rv__despues li + li { border-top: 1px solid var(--cfbc-linea); }

/* La trampa del robot: fuera de la vista sin display:none, que algunos bots detectan. */
.cfbc-rv__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 560px) {
	.cfbc-rv__rejilla { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
	.cfbc-rv__cta { width: auto; min-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
	.cfbc-rv__op, .cfbc-rv__svc, .cfbc-rv__hora, .cfbc-rv__cta, .cfbc-rv__pronto,
	.cfbc-rv__opcion, .cfbc-rv__extra, .cfbc-rv__extra-marca,
	.cfbc-rv__packs > summary::after, .cfbc-rv__pesos > summary::after,
	.cfbc-rv__dia-pleg summary::after { transition: none; }
	.cfbc-rv__op:hover, .cfbc-rv__svc:hover, .cfbc-rv__hora:hover, .cfbc-rv__cta:hover,
	.cfbc-rv__pronto:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.211] EL RESCATE · lo que pasa cuando no hay hora publicada
 * ══════════════════════════════════════════════════════════════════════════════════════════════
 * Antes esto era `.cfbc-rv__aviso`: el mismo párrafo gris que usamos para «estamos actualizando
 * los servicios». O sea, la ventaja competitiva del negocio —tenemos una persona que consigue la
 * hora, la competencia manda a esperar cinco días— vestida de nota al pie.
 *
 * Ahora es la pieza más marcada del paso: fondo propio, borde verde de 2px y el CTA a ancho
 * completo. 🔴 El fondo NO es verde saturado a propósito: si lo fuera, el botón —que también es
 * verde— dejaría de ser lo más brillante de la pantalla, y el botón es lo que hay que pulsar.
 * El bloque llama la atención; el botón se la queda.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

.cfbc-rv__rescate { margin: 20px 0 0; padding: 20px 18px 18px;
	background: color-mix(in srgb, var(--cfbc-verde) 6%, var(--cfbc-papel));
	border: 2px solid color-mix(in srgb, var(--cfbc-verde) 42%, transparent);
	border-radius: 18px; box-shadow: var(--cfbc-sombra); }

/* La negativa: se dice —callarla sería evasivo— pero apagada y pequeña. No es el titular. */
.cfbc-rv__rescate-of { margin: 0 0 6px; font-size: 13px; font-weight: 700; line-height: 1.35;
	text-transform: uppercase; letter-spacing: .05em; color: var(--cfbc-tenue); }

/* El titular es la SOLUCIÓN. */
.cfbc-rv__rescate-t { margin: 0 0 10px; font-size: 24px; line-height: 1.2; font-weight: 750;
	letter-spacing: -.4px; color: var(--cfbc-verde); }

.cfbc-rv__rescate-p { margin: 0 0 4px; font-size: 15.5px; line-height: 1.5;
	color: var(--cfbc-texto); }

/* El CTA hereda `.cfbc-rv__cta` entero; aquí solo se le da aire por arriba. */
.cfbc-rv__rescate .cfbc-rv__seguir { margin-top: 16px; }

/* «Ya nos contaste …» — quita el miedo a empezar de cero al cambiar de canal. */
.cfbc-rv__rescate-ya { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45;
	color: var(--cfbc-texto); }
.cfbc-rv__rescate-ya b { font-weight: 700; }

/* El límite de la promesa, escrito por nosotros: una promesa sin límite no se cree. */
.cfbc-rv__rescate-nota { margin: 8px 0 0; font-size: 13px; line-height: 1.45;
	color: var(--cfbc-tenue); }

/* ── [mb1.211 · C] El rótulo de la tarjeta destacada ───────────────────────────────────────── */
/* La tarjeta era más grande y estaba arriba, y eso el ojo lo lee como publicidad. Esta línea le
 * dice al tutor que es la respuesta a SU pregunta. */
.cfbc-rv__destacado-r { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.35;
	color: var(--cfbc-texto); }

/* ── [mb1.211 · D] Los adicionales: el plegable dice qué guarda ────────────────────────────── */
/* Misma especificidad que `.cfbc-rv__extras summary` de arriba (0,1,1): gana por venir después,
 * que es el orden en que se cargan. No se sube el peso a propósito — subirlo obligaría a subirlo
 * otra vez la próxima. */
.cfbc-rv__extras > summary { flex-wrap: wrap; gap: 2px 10px; padding: 8px 0; }
.cfbc-rv__extras-t { font-weight: 700; }
.cfbc-rv__extras-n { font-size: 13px; color: var(--cfbc-tenue); font-weight: 600; }
/* La descripción de cada extra, bajo su nombre: un adicional que solo dice nombre y precio se
 * compra por precio. El importe sigue alineado a la derecha porque el `<b>` no está dentro. */
/* 🔴 [mb1.497] AQUI VIVIA `padding: 10px 0` — del diseno anterior, cuando esto era una LISTA de
   casillas y no una rejilla de tarjetas. Misma especificidad que el `padding: 10px 14px` de la
   tarjeta y mas abajo en la hoja, asi que GANABA: el relleno horizontal era cero y la casilla
   tocaba el borde. Direccion lo vio de inmediato.

   Tercera vez en la misma jornada que una huerfana de un diseno anterior gana por orden o por
   especificidad —los enlaces del pie (mb1.485), el foco verde del campo (mb1.491) y esta—. Una
   regla que sobrevive a su diseno NO queda inerte: compite. */
.cfbc-rv__extra-n { display: block; }
.cfbc-rv__extra-n small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4;
	color: var(--cfbc-tenue); }

@media (min-width: 560px) {
	.cfbc-rv__rescate { padding: 26px 24px 22px; }
	.cfbc-rv__rescate-t { font-size: 27px; }
}

/* ══ [mb1.351] LAS FRANJAS DEL DÍA ════════════════════════════════════════════════════════════
   Dirección: «un tutor podría estar pensando en tomar una hora al salir de su trabajo a las 16».
   El día se parte en mañana / tarde / después de las 17, y cada franja dice cuántas guarda. La
   primera con horas llega abierta; las demás a un clic. Nada se oculta.

   Se apoya en lo que ya existe —`cfbc-rv__horas` pinta la rejilla, `cfbc-rv__dia-n` la cuenta—
   para que una franja y un día se lean igual: son el mismo gesto a dos niveles. */
.cfbc-rv__franja + .cfbc-rv__franja { border-top: 1px dashed var(--cfbc-linea); }
.cfbc-rv__franja summary { list-style: none; cursor: pointer; min-height: 44px;
	display: flex; align-items: center; gap: 10px; }
.cfbc-rv__franja summary::-webkit-details-marker { display: none; }
.cfbc-rv__franja-t { font-size: 14px; font-weight: 650; color: var(--cfbc-texto); flex: 1; }
/* 🔴 [mb1.422] SOL, SOL BAJO Y LUNA. Dirección: las franjas se agrupaban «sin señal visual».
   El dibujo ADELANTA —se distingue de un vistazo cuál es la tarde sin leer— y el rótulo
   GARANTIZA: sigue escrito al lado y el SVG va `aria-hidden`, así que nadie tiene que
   interpretar un icono para elegir su hora. Hereda el color del rótulo (`currentColor` en el
   SVG): ni un color nuevo, ni un literal colado por la puerta de atrás.
   `flex-shrink:0` porque el rótulo de al lado sí puede encogerse y el dibujo no. */
.cfbc-rv__franja-i { flex-shrink: 0; color: var(--cfbc-tenue); }
.cfbc-rv__franja[open] .cfbc-rv__franja-i { color: var(--cfbc-verde); }
/* El rótulo toma el espacio libre para que la cuenta y la flecha queden a la derecha, alineadas
   entre franjas: tres cuentas en la misma columna se comparan de un barrido vertical. */
.cfbc-rv__franja-n { flex: 1; }
/* La misma flecha del plegable de día: un solo lenguaje para «esto se abre». */
.cfbc-rv__franja summary::after { content: ''; width: 8px; height: 8px; flex-shrink: 0;
	border-right: 2px solid var(--cfbc-tenue); border-bottom: 2px solid var(--cfbc-tenue);
	transform: rotate(45deg); transition: transform .16s ease; }
.cfbc-rv__franja[open] summary::after { transform: rotate(225deg); }
.cfbc-rv__franja > .cfbc-rv__horas { padding-bottom: 12px; }

/* 🔴 [mb1.352] EL BLOQUE DE FRANJAS, FUERA DE LA REJILLA DE PÍLDORAS.
   Las franjas se apilan; las HORAS de dentro son las que van en rejilla. Cuando los `<details>`
   colgaban del grid del día se pintaban en dos columnas, con los rótulos pisándose (lo vio
   Dirección en pantalla). Este contenedor existe para que cada cosa esté en su caja. */
.cfbc-rv__franjas { display: block; }
.cfbc-rv__franja { display: block; }
/* ══ [mb1.355] «REVISA Y CONFIRMA»: DOS COLUMNAS DE VERDAD ════════════════════════════════════
   El formulario tiene ahora DOS hijos: la columna con todo el hilo de la decisión —resumen,
   precio, contacto y botón— y la cartilla de quien atenderá.

   🔴 La versión anterior repartía los hijos sueltos desde el CSS (`> * { grid-column: 1 }` y la
   cartilla con `grid-row: 1 / span 99`). Ese `span 99` reserva noventa y nueve filas y el
   colocador automático mandó todo el contenido debajo de ellas: la izquierda no estaba vacía,
   estaba a varias pantallas de distancia. Lo vio Dirección en pantalla.

   Con dos hijos no hacen falta trucos: el móvil los apila en el orden del DOM —decidir, cerrar,
   y después quién atenderá— y el escritorio los pone en dos columnas. */
.cfbc-rv__col { min-width: 0; }
.cfbc-rv__vet { margin-top: 26px; }
.cfbc-rv__vet-t { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--cfbc-tenue); margin: 0 0 10px; }

@media (min-width: 900px) {
	.cfbc-rv--ancho { max-width: 980px; }
	.cfbc-rv--ancho .cfbc-rv__form { display: grid; align-items: start;
		grid-template-columns: minmax(0, 1fr) 320px; column-gap: 28px; }
	/* La cartilla acompaña el scroll: en un formulario largo, saber con quién es sigue a mano.

	   [mb1.356] Y arranca a la altura de la PRIMERA TARJETA del resumen, no del título: pegada
	   arriba competía con «Revisa y confirma» por la misma línea de lectura, y el título es de la
	   pantalla entera, no de la columna derecha. Los 52px son el alto del título más su margen. */
	.cfbc-rv--ancho .cfbc-rv__vet { margin-top: 52px; position: sticky; top: 18px; }

	/* 🔴 [mb1.765] TRES HIJOS: hay que decir donde va cada uno.
	 *
	 * La barra del ultimo paso salio de la columna —su `sticky` tenia que alcanzar a la cartilla,
	 * que es el «segundo modulo»— y con eso el formulario paso de dos hijos a tres. La colocacion
	 * automatica corrio todo una celda: la barra cayo en la columna de 320px, donde su boton de 280
	 * ya no cabia, y la cartilla se fue a la fila de abajo.
	 *
	 * ⚠️ CELDAS UNICAS, NUNCA TRAMOS. mb1.355 se pago con un `span 99` que reservo noventa y nueve
	 * filas y mando la pantalla entera debajo. Aqui cada una nombra su celda y ninguna reserva
	 * nada; la columna del resumen ni se menciona —la automatica la deja en (1,1), que es donde
	 * estaba— y por eso este arreglo no puede repetir aquel defecto. */
	.cfbc-rv--ancho .cfbc-rv__form > .cfbc-rv__vet { grid-column: 2; grid-row: 1; }
	.cfbc-rv--ancho .cfbc-rv__form > .cfbc-rv__seguir--cierre { grid-column: 1; grid-row: 2; }
}
/* ══ [mb1.388·389] EL CAMINO DE TU VISITA ═══════════════════════════════════════════════════
 * La única pantalla del tutor, y la que abre el día de la visita — con un animal enfermo al
 * lado. Por eso manda un TITULAR: la respuesta a «¿dónde va mi visita?» sin leer una lista.
 * La línea de abajo es el detalle, con la hora en su propia columna para leerla de un barrido.
 *
 * Regla del auto: el color adelanta, el TEXTO garantiza — cada paso lleva su palabra y su hora.
 * Sin animación (quien espera no necesita algo parpadeando) y 🔴 sin un solo color literal:
 * todo sale de los tokens congelados, que es lo que el centinela de la casa exige. */
.cfbc-scope .csl-camino{margin:14px 0 4px;padding:16px;border:1px solid var(--cfbc-linea);
  border-radius:14px;background:var(--cfbc-marfil)}
/* EL TITULAR: lo primero que se ve y, casi siempre, lo único que hace falta leer. */
.cfbc-scope .csl-camino__ahora{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--cfbc-linea)}
.cfbc-scope .csl-camino__ahora-e{font-size:19px;font-weight:800;line-height:1.2;
  color:var(--cfbc-verde)}
.cfbc-scope .csl-camino__ahora-h{font-size:15px;font-weight:700;color:var(--cfbc-tenue)}
.cfbc-scope .csl-camino__l{list-style:none;margin:0;padding:0}
/* Rejilla de tres columnas: marca · texto · hora. La hora alineada a la derecha se lee en
 * vertical de un barrido; pegada al texto obliga a rastrear dónde acaba cada cosa. */
.cfbc-scope .csl-camino__p{display:grid;grid-template-columns:22px 1fr auto;align-items:center;
  gap:0 10px;position:relative;padding:0 0 12px;font-size:14.5px;line-height:1.35}
.cfbc-scope .csl-camino__p:last-child{padding-bottom:0}
/* El hilo que une los pasos, detrás de las marcas; se corta en el último. */
.cfbc-scope .csl-camino__p::before{content:'';position:absolute;left:10px;top:20px;bottom:-2px;
  width:2px;background:var(--cfbc-linea)}
.cfbc-scope .csl-camino__p:last-child::before{display:none}
.cfbc-scope .csl-camino__d{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--cfbc-linea);background:var(--cfbc-papel);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  line-height:1}
.cfbc-scope .csl-camino__h{font-variant-numeric:tabular-nums;font-size:13.5px;
  color:var(--cfbc-tenue)}
/* HECHO · el ✓ dice «esto ya pasó», que es más de lo que dice un punto de color. */
.cfbc-scope .csl-camino__p--hecho .csl-camino__d{background:var(--cfbc-verde);
  border-color:var(--cfbc-verde);color:var(--cfbc-papel)}
.cfbc-scope .csl-camino__p--hecho::before{background:var(--cfbc-verde)}
.cfbc-scope .csl-camino__p--hecho .csl-camino__t{color:var(--cfbc-texto)}
/* AHORA · destaca por peso y halo estático, nunca por movimiento. */
.cfbc-scope .csl-camino__p--ahora .csl-camino__d{background:var(--cfbc-verde);
  border-color:var(--cfbc-verde);box-shadow:0 0 0 4px var(--cfbc-verde-claro)}
.cfbc-scope .csl-camino__p--ahora .csl-camino__t{font-weight:800;color:var(--cfbc-verde);
  font-size:15.5px}
.cfbc-scope .csl-camino__p--ahora .csl-camino__h{color:var(--cfbc-verde);font-weight:700}
/* PENDIENTE · presente pero apagado: sitúa lo que falta sin competir por la atención. */
.cfbc-scope .csl-camino__p--pendiente .csl-camino__t{color:var(--cfbc-tenue)}

/* ══ [mb1.423] EL CIERRE DE LA PANTALLA DE ÉXITO ══════════════════════════════════════════════
   Dirección: «esa sección debería tener un cierre o algo para volver o salir de la página».
   El embudo terminaba en un callejón: código en la mano y nada que pulsar.

   La jerarquía es deliberada y asimétrica. WhatsApp es un BOTÓN —es lo único que el tutor puede
   necesitar de verdad ahí: que algo cambió, que se le olvidó un síntoma, que es urgente—; volver
   al inicio es un ENLACE en voz baja, porque quien ya reservó no tiene que reservar otra vez y
   dos llamadas fuertes compitiendo consiguen que no se pulse ninguna.

   Separado por una línea, no por una caja: es el final de la página, no una sección nueva. */
.cfbc-scope .cfbc-rv__cierre { margin-top: 28px; padding-top: 22px;
	border-top: 1px solid var(--cfbc-linea); text-align: center; }
.cfbc-scope .cfbc-rv__cierre .cfbc-rv__cta { display: inline-block; }
/* [mb1.474] Aquí vivía `.cfbc-rv__volver`, el enlace «Volver al inicio». Lo sustituyó el
   banner de respaldo, así que su regla se va con él: una clase sin uso es deuda igual que una
   regla sin clase, y el censo vigila las dos direcciones. */

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.442] EL EMBUDO, CON RITMO Y PROFUNDIDAD
 *
 * 🔴 TODO VA PREFIJADO CON `.cfbc-scope`. Las clases del embudo valen (0,1,0) y los resets del
 * armazon (`.cfbc-scope ol`, `.cfbc-scope li`) valen (0,1,1): sin el prefijo, dos reglas ya
 * estaban perdiendo en silencio —el margen de la barra de pasos y el relleno de cada paso— y
 * la pantalla salia apretada sin que nadie viera por que. Se midio declarado contra computado.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── El aire de arriba ────────────────────────────────────────────────────────────────── */
/* 40px bajo una cabecera de 68 es lo que se leia como «apretado». En movil se mantiene corto:
   ahi el aire cuesta scroll, y el contrato dice que el primer campo se vea sin bajar. */
/* [mb1.478] LOS PASOS SUBEN HASTA LA FRANJA. Direccion: «las lineas de los numeros superiores de
   las etapas tambien las puedes acercar mas a la franja inicial». Y arregla una relacion que
   estaba mal contada: la franja dice QUIENES SOMOS, la barra dice DONDE VAS. Con 34px de aire en
   medio parecian dos piezas sin parentesco; pegadas se leen como una sola cabecera y el aire que
   sobraba arriba se lo queda el paso, que es quien lo necesita. */
.cfbc-scope .cfbc-rv{ padding-top:18px }
@media (min-width:721px){ .cfbc-scope .cfbc-rv{ padding-top:28px } }

/* ── La barra de pasos: separada del titular y con presencia ──────────────────────────── */
.cfbc-scope .cfbc-rv__pasos{ margin:0 0 30px; gap:10px }
.cfbc-scope .cfbc-rv__paso{ padding-top:10px }
/* El paso ACTUAL pesa: numero en verde solido y rotulo en tinta. Los demas se retiran. */
/* 🔴 La clase del paso actual es `is-aqui`, no `--on`. Escribi la que me parecio y la regla
   no aplicaba a nada: se leyo del DOM en produccion, que es la unica forma de saberlo. */
.cfbc-scope .cfbc-rv__paso.is-aqui .cfbc-rv__paso-n{
	background:var(--cfbc-verde); border-color:var(--cfbc-verde); color:var(--cfbc-papel);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--cfbc-verde) 14%, transparent);
}

/* ── Profundidad: la pantalla no tenia NI UNA sombra ──────────────────────────────────── */
/* Reposo con la sombra pequena del sistema; al pasar por encima sube 1px. Nunca al reves:
   fiar el contraste al `:hover` deja la pantalla muerta para quien no tiene raton. */
.cfbc-scope .cfbc-rv__op,
.cfbc-scope .cfbc-rv__svc,
.cfbc-scope .cfbc-rv__extra{
	box-shadow:var(--cafati-sombra-sm);
	transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
@media (hover:hover){
	.cfbc-scope .cfbc-rv__op:hover,
	.cfbc-scope .cfbc-rv__svc:hover,
	.cfbc-scope .cfbc-rv__extra:hover{
		box-shadow:var(--cafati-sombra-md); transform:translateY(-1px);
		border-color:var(--cfbc-verde);
	}
}
@media (prefers-reduced-motion:reduce){
	.cfbc-scope .cfbc-rv__op,
	.cfbc-scope .cfbc-rv__svc,
	.cfbc-scope .cfbc-rv__extra{ transition:none }
	.cfbc-scope .cfbc-rv__op:hover,
	.cfbc-scope .cfbc-rv__svc:hover,
	.cfbc-scope .cfbc-rv__extra:hover{ transform:none }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.463 · rehecho en mb1.479] LAS TARJETAS DE ESPECIE · material, no relleno
 *
 * Direccion: «planos sin vida (…) al ser mucha superficie se siente chabacano (…) la primicia es
 * dar calidad, oro, premium pero con nuestra paleta ajustada».
 *
 * DOS CAUSAS DISTINTAS, y conviene no mezclarlas:
 *   · PLANO      — blanco liso con borde de 2px. Blanco liso no es un material y un borde grueso
 *                  dibuja el contorno de un HUECO, no el filo de un objeto.
 *   · CHABACANO  — lo elegido inundaba la tarjeta de menta. Color plano sobre una superficie
 *                  grande es lo que abarata cualquier interfaz: hay cantidad, no jerarquia.
 *
 * LA REGLA DE LA DISTINCION AQUI: SIEMPRE FILO, NUNCA RELLENO. Tres toques y ninguno es una superficie —
 * un hilo en el canto, el anillo del disco, y un ✓ del tamano de una lenteja.
 *
 * ⚠️ El estado ELEGIDO se sigue viendo sin leer y sin raton: borde verde + anillo interior + el ✓
 * + el disco. Cuatro senales; en un telefono no hay `:hover` y esa leccion ya se pago.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
/* [mb1.664] Apiladas en el teléfono y lado a lado en escritorio, que es lo que Dirección
 * pidió. La tarjeta no cambia entre los dos: solo deja de apilarse. */
.cfbc-scope .cfbc-rv__especie{ display:grid; grid-template-columns:1fr; gap:14px; max-width:620px }
@media (min-width:600px){
	.cfbc-scope .cfbc-rv__especie{ grid-template-columns:1fr 1fr }
	.cfbc-scope .cfbc-rv__op{ min-height:116px }
	.cfbc-scope .cfbc-rv__op .cfbc-rv__op-foto{ flex-basis:116px }
}
/* 🔴 [mb1.664] DE VERTICAL CON DIBUJO A HORIZONTAL CON FOTO. Dirección: *«quedó demasiado
 * infantil»*. Lo infantil era el dibujo en su círculo, no el material: la sombra en dos capas, el
 * hilo de oro y el velo de menta se quedan, porque son lo que hace que la pieza se vea cara.
 *
 * ⚠️ Y esta es la regla que MANDA: hay otro bloque más arriba para el mismo elemento, y este gana
 * por prefijo y por orden. Editar el otro no cambia nada — me costó una pasada descubrirlo. */
.cfbc-scope .cfbc-rv__op{
	position:relative; overflow:hidden;
	flex:1 1 0; display:flex; flex-direction:row; align-items:stretch; justify-content:flex-start;
	/* 🔴 [mb1.509] `border-box` Y SIN SUELO ARBITRARIO. Con `content-box`, `min-height:126px` mas
	   `padding:16px` pintaba **158px**: la tarjeta se veia mas alta de lo que ninguna regla pedia.
	   Y el suelo de 126 estaba calculado para TRES elementos; con dos, sobraba aire abajo.
	   Ahora la altura la fija su contenido —disco, palabra y su aire— y las dos quedan iguales
	   porque tienen la misma estructura, no porque se les imponga un numero. */
	box-sizing:border-box;
	/* Sin `padding` en la tarjeta: la foto va a sangre por su lado y el aire lo pone el texto. */
	gap:0; min-height:104px; padding:0; border-radius:var(--cafati-r-lg);
	/* Material: el degradado le da un arriba y un abajo. Blanco liso no tiene ninguno. */
	background:linear-gradient(180deg, var(--cafati-papel) 0%, var(--cafati-marfil) 100%);
	/* 1px, no 2. El grueso dibujaba un hueco; el fino es el filo de una pieza. */
	border:1px solid color-mix(in srgb, var(--cafati-verde) 10%, transparent);
	/* Canto iluminado por dentro + sombra en DOS capas: contacto corta y ambiente larga. Una
	   sombra sola aplasta; dos separan la pieza del papel sin gritar. */
	box-shadow:
		inset 0 1px 0 var(--cafati-papel),
		0 1px 2px rgba(2,62,50,.05),
		0 12px 26px -18px rgba(2,62,50,.30);
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* ORO 1 · el hilo del canto. En reposo no esta; aparece al acercarse y se queda al elegir. */
.cfbc-scope .cfbc-rv__op::before{
	content:""; position:absolute; left:0; right:0; top:0; height:2px; opacity:0;
	background:linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--cafati-distincion) 75%, transparent) 30%,
		color-mix(in srgb, var(--cafati-distincion) 75%, transparent) 70%,
		transparent);
	transition:opacity .18s ease;
}
@media (hover:hover){
	/* 🔴 [mb1.664] EL ROLLOVER EN MORADO. El verde en este sistema significa ELEGIDO, y usarlo para
	 * «estás encima» hacía que pasar el ratón pareciera haber elegido — con el agravante de que la
	 * elegida de verdad usa el mismo color dos tonos más fuerte. */
	.cfbc-scope .cfbc-rv__op:hover{
		transform:translateY(-3px);
		border-color:color-mix(in srgb, var(--cafati-purpura) 55%, transparent);
		box-shadow:
			inset 0 1px 0 var(--cafati-papel),
			0 2px 5px rgba(2,62,50,.07),
			0 20px 36px -20px rgba(2,62,50,.36);
	}
	.cfbc-scope .cfbc-rv__op:hover::before{ opacity:1 }
	.cfbc-scope .cfbc-rv__op:hover .cfbc-rv__op-mk{
		border-color:color-mix(in srgb, var(--cafati-purpura) 55%, transparent) }
}
/* [mb1.664] LA FOTO, A SANGRE POR SU LADO. Es lo primero que se mira y lo que hace que esto
 * parezca una clínica. `cover` porque el original es cuadrado y la caja rectangular: recortar por
 * los lados conserva la cara, que es lo único que aquí importa. Sin zoom al pasar por encima —es
 * un paciente, no una miniatura de catálogo. */
.cfbc-scope .cfbc-rv__op .cfbc-rv__op-foto{
	flex:0 0 104px; align-self:stretch; background:var(--cafati-menta-tenue);
	border-right:1px solid color-mix(in srgb, var(--cafati-verde) 10%, transparent);
}
.cfbc-scope .cfbc-rv__op .cfbc-rv__op-foto img{
	display:block; width:100%; height:100%; object-fit:cover;
}
/* 🔴 [mb1.463 · conservado] EL DIBUJO RECIBE SUELO — pero ahora solo cuando entra como RED, si el
   adjunto no estuviera. La ilustracion es trazo palido y sobre blanco casi no existe. */
.cfbc-scope .cfbc-rv__op .cfbc-rv__op-foto--dib{
	display:flex; align-items:center; justify-content:center; padding:10px;
	background:radial-gradient(circle at 50% 28%,
		var(--cafati-papel) 0%, var(--cafati-menta-tenue) 100%);
}
.cfbc-scope .cfbc-rv__op .cfbc-rv__icono{ width:52px; height:52px; }

/* El texto: nombre y estado, centrados en vertical y con el aire a su cargo. */
.cfbc-scope .cfbc-rv__op .cfbc-rv__op-txt{
	flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
	justify-content:center; align-items:flex-start; gap:3px; padding:12px 14px;
}
/* 🔴 EL ESTADO EN PALABRAS, no solo en color: con sol de frente, o para quien no distingue el
 * verde, un borde de color no comunica nada. Y evita la duda de «¿lo elegí?» justo antes de
 * escribir el nombre de la mascota. */
.cfbc-scope .cfbc-rv__op .cfbc-rv__op-e{ font-size:13.5px; line-height:1.3; color:var(--cfbc-tenue) }
.cfbc-scope .cfbc-rv__op .cfbc-rv__op-e--b{ display:none; font-weight:700; color:var(--cfbc-verde) }
.cfbc-scope .cfbc-rv__op:has(input:checked) .cfbc-rv__op-e--a{ display:none }
.cfbc-scope .cfbc-rv__op:has(input:checked) .cfbc-rv__op-e--b{ display:block }

/* La marca: anillo vacío en reposo, disco verde con su palomita al elegir. Dibujada, no un glifo
 * del sistema, para que se vea igual en los tres navegadores. */
.cfbc-scope .cfbc-rv__op .cfbc-rv__op-mk{
	flex:0 0 auto; align-self:center; margin-right:14px; width:28px; height:28px;
	border-radius:999px; border:2px solid color-mix(in srgb, var(--cafati-verde) 22%, transparent);
	background:transparent; transition:border-color .18s ease, background .18s ease;
}
.cfbc-scope .cfbc-rv__op:has(input:checked) .cfbc-rv__op-mk{
	border-color:var(--cfbc-verde);
	background:var(--cfbc-verde) no-repeat center/13px 10px;
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M1 5l4 4 7-8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ══ ELEGIDA ══════════════════════════════════════════════════════════════════════════════
   La menta que a Direccion le gusta SE QUEDA, pero como velo al pie —el degradado muere en
   menta-tenue— en vez de banar la tarjeta entera. Poca superficie, mucha precision. */
.cfbc-scope .cfbc-rv__op:has(input:checked){
	background:linear-gradient(180deg,
		var(--cafati-papel) 0%,
		var(--cafati-menta-tenue) 62%,
		var(--cafati-menta) 100%);
	border-color:var(--cfbc-verde);
	box-shadow:
		inset 0 0 0 1px var(--cfbc-verde),
		inset 0 1px 0 var(--cafati-papel),
		0 2px 6px rgba(2,62,50,.08),
		0 18px 32px -20px rgba(2,62,50,.32);
}
.cfbc-scope .cfbc-rv__op:has(input:checked)::before{ opacity:1 }
/* [mb1.664] AQUÍ VIVÍAN «ORO 2» —el anillo dorado del disco— y «ORO 3» —la insignia de la
 * esquina—. Las dos se van con el dibujo al que vestían.
 *
 * 🔴 La insignia se retira además por una razón propia: con la marca de selección a la derecha,
 * **dos señales del mismo hecho en la misma tarjeta compiten en vez de sumar**. La distinción se queda
 * donde sí distingue, que es el hilo del canto. */
/* [mb1.480] TRES ELEMENTOS CON JERARQUIA, no dos sueltos: dibujo · nombre · razon. El hueco
   entre nombre y razon es corto (3px) porque son UNA unidad; el que los separa del dibujo es
   el `gap` de la tarjeta. Asi el conjunto se lee de un golpe en vez de por partes. */
/* [mb1.509] El `gap:8px` era para tres elementos; con dos vive en la regla de arriba. */
/* El peso lo dan tamano y color: Fraunces esta prohibida en formularios por la guia. */
/* [mb1.664] Sube de 17 a 19: en una tarjeta horizontal el nombre ya no comparte protagonismo con
 * un dibujo grande, y a 17 se leía tímido al lado de una foto de 104 px. */
.cfbc-scope .cfbc-rv__op-n{ font-size:19px; font-weight:750; color:var(--cfbc-verde);
	letter-spacing:.01em; line-height:1.15 }
/* [mb1.509] Aqui vivia `.cfbc-rv__op-s`, la segunda linea de la tarjeta de especie. Direccion la
   retiro —«estan de mas»— y su regla se va con ella: una regla sin clase es deuda igual que una
   clase sin regla, y hoy mismo cuatro defectos visibles salieron de huerfanas que competian. */
.cfbc-scope .cfbc-rv__op:has(input:focus-visible){ box-shadow:var(--cafati-anillo-foco) }
@media (prefers-reduced-motion: reduce){
	.cfbc-scope .cfbc-rv__op{ transition:none }
	.cfbc-scope .cfbc-rv__op:hover{ transform:none }
	.cfbc-scope .cfbc-rv__op::before{ transition:none }
}
/* ── Campos: el foco se ve, y se ve igual en los tres ─────────────────────────────────── */
.cfbc-scope .cfbc-rv__campo input:focus-visible,
.cfbc-scope .cfbc-rv__campo select:focus-visible,
.cfbc-scope .cfbc-rv__campo textarea:focus-visible{
	outline:none; border-color:var(--cfbc-verde); box-shadow:var(--cafati-anillo-foco);
}
.cfbc-scope .cfbc-rv__campo label{ font-size:15px; margin-bottom:8px }

/* ── El CTA: dejaba 320px de columna vacia a su derecha ───────────────────────────────── */
/* Ancho completo en movil —es el unico blanco de toque que importa— y un ancho generoso en
   escritorio, alineado con la columna en vez de colgando de su borde izquierdo. */
.cfbc-scope .cfbc-rv__seguir{ margin-top:30px }
.cfbc-scope .cfbc-rv__cta{
	width:100%; min-height:54px; border-radius:var(--cafati-r-md);
	box-shadow:var(--cafati-sombra-sm); transition:box-shadow .16s ease, transform .16s ease;
}
@media (min-width:560px){ .cfbc-scope .cfbc-rv__cta{ width:auto; min-width:280px; padding-inline:34px } }
@media (hover:hover){ .cfbc-scope .cfbc-rv__cta:hover{ box-shadow:var(--cafati-sombra-md); transform:translateY(-1px) } }
.cfbc-scope .cfbc-rv__cta:focus-visible{ outline:none; box-shadow:var(--cafati-anillo-foco) }


/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.443] LA TARJETA DE DESPEDIDA · su propia forma
 *
 * No es un boton de servicio: es un GRUPO con un selector de peso dentro. Con la clase del
 * boton, el `<details>` entraba en la rejilla de «icono + texto» y le robaba la columna — 72px
 * para el texto y 521px de alto. Aqui manda el flujo normal: bloque, no rejilla.
 *
 * Y es la pieza mas delicada del embudo: quien llega aqui esta despidiendo a su animal. Nada
 * de acentos alegres — purpura tenue, que en esta casa es el color del respaldo y la calma.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__desp{
	display:block; width:100%; padding:16px 18px; text-align:left;
	border:1.5px solid var(--cfbc-linea); border-radius:var(--cafati-r-lg);
	background:var(--cfbc-papel); box-shadow:var(--cafati-sombra-sm);
}
.cfbc-scope .cfbc-rv__desp.is-sel{ border-color:var(--cafati-purpura); background:var(--cafati-purpura-tenue) }
/* El icono vuelve a su sitio: al lado del nombre, no ocupando una columna de 164px. */
.cfbc-scope .cfbc-rv__desp .cfbc-rv__svc-i{
	float:left; width:44px; height:44px; margin:2px 14px 6px 0; padding:7px;
	border-radius:999px; background:var(--cafati-purpura-tenue); box-shadow:var(--cfbc-sombra);
}
.cfbc-scope .cfbc-rv__desp .cfbc-rv__svc-n{ display:block; font-size:16px; font-weight:650; color:var(--cfbc-verde) }
.cfbc-scope .cfbc-rv__desp .cfbc-rv__svc-d{ display:block; font-size:14px; color:var(--cfbc-tenue); margin-top:2px }
.cfbc-scope .cfbc-rv__desp .cfbc-rv__svc-p{ display:block; font-size:15px; font-weight:650; margin-top:8px;
	font-variant-numeric:tabular-nums }
/* El selector de peso, debajo y en su ancho completo: es lo que de verdad se elige aqui. */
.cfbc-scope .cfbc-rv__desp .cfbc-rv__pesos{ clear:both; width:100%; margin-top:12px }


/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.444] LA MARCA DE AGUA DEL LIENZO
 *
 * La pieza se genero como marca de agua —«si se notan, estan mal»— asi que va tal cual sobre
 * marfil, sin bajarle opacidad por encima. `--cfbc-textura` la inyecta el documento propio; sin
 * la pieza en la biblioteca vale `none` y el fondo queda liso.
 *
 * 🔴 SOLO EL LIENZO. Detras de un campo le quita contraste al texto, y este embudo se lee a
 * pulso en un movil. Y en la familia de despedida no entra: huellitas alegres detras de un
 * formulario de eutanasia serian grotescas.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 [mb1.446b] LA TEXTURA, EN UNA CAPA PROPIA Y AL 30%. Puesta como `background-image` del
   body salia a plena intensidad: se leia como un papel estampado, no como una marca de agua
   —«si se notan, estan mal»—. En un pseudo-elemento se le puede bajar la opacidad sin tocar
   el contenido, y la huella pasa a 420px para que respire mas. */
body.cfbc-c{ background-color:var(--cfbc-marfil); position:relative }
body.cfbc-c::before{
	content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
	background-image:var(--cfbc-textura, none);
	/* 🔴 [mb1.483] EL TAMANO Y LA REPETICION LOS DECIDE LA PIEZA, no esta regla. Las huellas
	   teselaban y se repetian a 420px; las rutas NO teselan —costura medida 1702 contra 422— y
	   van como una sola composicion a `cover`. Cablear aqui `repeat` obligaria a que toda pieza
	   futura tesele, y eso no es una propiedad del lienzo: es del dibujo. */
	/* 🔴 [mb1.487] LA VARIABLE LLEVA LA PROPIEDAD ENTERA, y no es estilo: `var(--x) auto`
	   funciona mientras `--x` sea una longitud y MUERE EN SILENCIO en cuanto vale `cover`,
	   porque `cover auto` no es una pareja valida y el navegador descarta la declaracion
	   completa. Cayo a `auto auto` con `no-repeat`: un cuadrado de 1200px y el resto del
	   lienzo desnudo. Sin error, sin aviso, y con pinta de decision de diseno. */
	background-size:var(--cfbc-textura-tam, 420px auto);
	background-repeat:var(--cfbc-textura-rep, repeat);
	background-position:center;
	/* [mb1.456] La presencia vive en el ALFA del archivo, no aqui. La pieza original era
	 * papel opaco casi blanco: subir esta cifra lavaba el marfil antes de que las huellas
	 * asomaran. Regenerada con alfa y tinta de marca, la capa va entera. */
	opacity:1;
}
/* El contenido va POR ENCIMA de la capa: sin esto la textura taparia la pagina entera. */
body.cfbc-c > *{ position:relative; z-index:1 }
/* La tarjeta del embudo se apoya SOBRE la textura, opaca: el fondo es ambiente, no papel. */
.cfbc-scope .cfbc-rv__form,
.cfbc-scope .cfbc-rv__fam,
.cfbc-scope .cfbc-rv__hecho{ position:relative }

/* ── [mb1.444] La ilustracion de especie ──────────────────────────────────────────────── */
/* La foto no lleva `stroke`: es un PNG, no un trazo. Y se pinta a 76px porque es lo unico que
   se mira antes de leer en la primera pantalla del embudo. */
.cfbc-scope .cfbc-rv__icono--foto{ width:76px; height:76px; object-fit:contain }
.cfbc-scope .cfbc-rv__op .cfbc-rv__icono--foto{ width:76px; height:76px }
/* En la tarjeta de despedida se queda pequena: ahi el protagonista es el texto. */
.cfbc-scope .cfbc-rv__svc-i .cfbc-rv__icono--foto{ width:100%; height:100% }


/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.445] EL COLOR, REPARTIDO
 *
 * El purpura salia en DOS sitios del embudo —el sello y la eutanasia—, asi que el color calido
 * de la marca significaba «despedida». Y el verde claro del logo (#679540) estaba declarado y
 * sin usar en ninguna parte. Se reparten los dos.
 *
 * ⚠️ NUNCA en botones de accion —el verde bosque es «esto avanza»— ni cerca del ambar y el rojo,
 * que son semanticos. Y el verde del logo NO va en chips de estado: `--cafati-exito` ya dice
 * «bien», y dos verdes diciendo lo mismo es como se pierde el significado de un color.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── La despedida, tambien sin tinte en su tarjeta ────────────────────────────────────── */
.cfbc-scope .cfbc-rv__desp{ background:var(--cfbc-papel) }
/* Elegida SI se marca, pero en verde de accion como cualquier otra eleccion del embudo: lo que
   distingue a esta familia es su contenido, no un color aparte. */
.cfbc-scope .cfbc-rv__desp.is-sel{ border-color:var(--cfbc-verde); background:var(--cafati-menta-tenue) }
.cfbc-scope .cfbc-rv__desp .cfbc-rv__svc-i{ background:var(--cafati-menta-tenue) }

/* ── PURPURA · el codigo de reserva, que es el objeto que el tutor guarda ─────────────── */
/* 🔴 La CAJA es `-caja` y el valor es `cfbc-rv__codigo` a secas. Se leyo del marcado: escribir
   `-v` de memoria —que fue mi primer intento— habria dejado una regla que no aplica a nada. */
.cfbc-scope .cfbc-rv__codigo-caja{
	background:var(--cafati-purpura-tenue); border-color:var(--cafati-purpura);
}
.cfbc-scope .cfbc-rv__codigo{ color:var(--cafati-purpura) }

/* ── PURPURA · «¿Algo mas?»: el gusto, no la obligacion ───────────────────────────────── */
.cfbc-scope .cfbc-rv__extras{
	background:var(--cafati-purpura-tenue);
	border-color:color-mix(in srgb, var(--cafati-purpura) 26%, transparent);
}
.cfbc-scope .cfbc-rv__extras > summary{ color:var(--cafati-purpura) }
.cfbc-scope .cfbc-rv__extra:has(input:checked){
	border-color:var(--cafati-purpura); background:var(--cafati-purpura-tenue);
}
.cfbc-scope .cfbc-rv__extra input:checked + .cfbc-rv__extra-marca{
	background:var(--cafati-purpura); border-color:var(--cafati-purpura);
}

/* ── PURPURA · los packs: una oferta es una buena noticia ─────────────────────────────── */
.cfbc-scope .cfbc-rv__packs > summary .cfbc-rv__packs-tt{ color:var(--cafati-purpura) }
.cfbc-scope .cfbc-rv__packs-i{ background:var(--cafati-purpura-tenue) }

/* ── VERDE DEL LOGO · la vida, en la decoracion ───────────────────────────────────────── */
/* El circulo del icono de familia: un verde de hoja detras del dibujo. Es lo que hace que la
   pagina se vea viva sin que ningun color diga nada que no sea verdad. */
.cfbc-scope .cfbc-rv__grupo-i{
	background:color-mix(in srgb, var(--cafati-logo-verde) 16%, var(--cfbc-papel));
}
/* Y los pasos ya cumplidos: el visto verde del logo dice «esto quedo» sin gritarlo. */
.cfbc-scope .cfbc-rv__paso.is-hecho .cfbc-rv__paso-n{
	/* [mb1.453] FONDO hondo, BORDE del logo: el blanco del visto llega a AA (4,60) y por fuera
	 * se sigue leyendo el verde de la marca. */
	background:var(--cafati-logo-verde-hondo); border-color:var(--cafati-logo-verde); color:var(--cfbc-papel);
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.446] EL PASO 1, COMPUESTO
 *
 * En 1536px el embudo ocupaba 604 y dejaba 900 muertos a los lados. Una columna estrecha
 * centrada en un escritorio es una app movil estirada, no un diseno de escritorio.
 *
 * ⚠️ EN MOVIL LA COLUMNA NO SE PINTA. El contrato manda que el primer campo se vea sin bajar, y
 * una escena de 340px encima empuja «¿A quien vamos a ver?» fuera de pantalla. La pieza mas
 * bonita del mundo no vale un abandono.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.464] LA BANDEJA · idea de Direccion
 * Una capa entre la textura y el contenido de cada paso. La barra de pasos queda FUERA, encima
 * de la textura desnuda: se lee como navegacion por encima de la bandeja, no como parte de ella.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__form{
	background:var(--cafati-bandeja);
	border:1px solid color-mix(in srgb, var(--cafati-purpura) 12%, transparent);
	border-radius:var(--cafati-r-lg);
	padding:20px 16px 24px;
	/* [mb1.465] LOS CANTOS RECIBEN LUZ. Un objeto real recoge luz en el filo que mira arriba y
	   se apoya en sombra por el de abajo. Eso da grosor sin desenfocar nada y sin un solo
	   degradado — que es lo que §13 prohibe y el gate mide. */
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 72%, transparent),
		inset 0 -1px 0 color-mix(in srgb, var(--cafati-purpura) 8%, transparent),
		0 1px 2px rgba(2,62,50,.04),
		0 16px 38px -22px rgba(100,44,135,.34);
}
@media (min-width:700px){
	.cfbc-scope .cfbc-rv__form{ padding:28px 26px 32px }
}
/* 🔴 [mb1.464] EL TEXTO QUE SE APOYA EN LA BANDEJA NO PUEDE IR EN GRIS TENUE.
   Medido: ese gris sobre una patita densa da 3,83 — y eso ya pasaba HOY, sin bandeja: la textura
   corre por debajo del texto del embudo desde que se cableo. El verde de accion da 5,45 con
   bandeja y 4,86 sin ella, esta en la guia, y en una linea de ayuda lee como nota de marca.
   Solo alcanza a lo que se apoya DIRECTAMENTE en la bandeja: dentro de una tarjeta opaca el gris
   tenue sigue siendo el correcto y no se toca. */
.cfbc-scope .cfbc-rv__form > small,
.cfbc-scope .cfbc-rv__form > .cfbc-rv__campo > small,
.cfbc-scope .cfbc-rv__form > .cfbc-rv__ayuda{ color:var(--cafati-verde-accion) }
.cfbc-scope .cfbc-rv__bv{ display:none }

@media (min-width:961px){
	.cfbc-scope .cfbc-rv--bienvenida{ max-width:1040px }
	/* 🔴 [mb1.447] FUERA DEL FLUJO, NO EN REJILLA. Con `grid` el aside ocupaba `grid-row:1/-1` y
	   estiraba TODAS las filas a su altura: el formulario emite cada campo como hijo suelto, asi
	   que cada uno era una fila y la columna izquierda quedaba con 600px de vacio entre el
	   titular y «Es un...». Se vio en produccion, no leyendo el CSS.

	   Posicionado, el aside no participa del flujo y el formulario fluye normal en el ancho que
	   le deja el `padding-right`. Menos elegante que una rejilla, pero es lo que esta estructura
	   admite sin reescribir como se emiten los campos. */
	/* [mb1.464] El hueco del aside crece con el relleno de la bandeja: un absoluto se coloca
	   contra la caja de RELLENO, no contra el borde, asi que hay que insetarlo a mano. */
	.cfbc-scope .cfbc-rv--bienvenida .cfbc-rv__form{ position:relative; padding-right:394px }
	/* [mb1.458] LA COLUMNA ES UN OBJETO, no dos cosas apiladas. Antes eran una escena flotando
	   y debajo un bloque de texto suelto; ninguna de las dos parecia terminada. */
	.cfbc-scope .cfbc-rv__bv{
		display:block; position:absolute; top:28px; right:26px; width:340px;
		background:var(--cafati-papel); border:1px solid var(--cafati-linea);
		border-radius:var(--cafati-r-lg); overflow:hidden;
		box-shadow:0 1px 2px rgba(2,62,50,.05), 0 12px 28px -14px rgba(2,62,50,.22);
	}
	/* Zona 1 · la escena sobre menta: la ilustracion trae fondo transparente y ese verde hace
	   eco de su propio sofa y sus plantas, asi que se apoya en vez de flotar. */
	.cfbc-scope .cfbc-rv__bv-escena{
		background:var(--cafati-menta-tenue); padding:14px 14px 0;
		border-bottom:1px solid var(--cafati-linea);
	}
	/* [mb1.459] `height:auto` con las medidas REALES en el atributo: el navegador reserva el
	   hueco correcto antes de que la imagen llegue y no hay salto de maquetacion. */
	.cfbc-scope .cfbc-rv__bv-img{ width:100%; height:auto; display:block; margin:0 }
	/* Zona 2 · las promesas, sobre papel. Sin linea vertical: ahora las agrupa la tarjeta. */
	.cfbc-scope .cfbc-rv__bv-l{
		list-style:none; margin:0; padding:6px 18px 4px;
		display:flex; flex-direction:column;
	}
	.cfbc-scope .cfbc-rv__bv-i{
		display:flex; align-items:flex-start; gap:13px; padding:15px 0;
	}
	/* Pelo de linea ENTRE promesas, no alrededor: separa sin encajonar. */
	.cfbc-scope .cfbc-rv__bv-i + .cfbc-rv__bv-i{ border-top:1px solid var(--cafati-linea) }
	.cfbc-scope .cfbc-rv__bv-m{
		flex:0 0 auto; width:38px; height:38px; border-radius:999px;
		display:flex; align-items:center; justify-content:center;
		background:var(--cafati-menta-tenue);
		box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cafati-logo-verde) 26%, transparent);
	}
	.cfbc-scope .cfbc-rv__bv-ico{ width:22px; height:22px; display:block }
	.cfbc-scope .cfbc-rv__bv-t{ display:block; min-width:0 }
	/* 🔴 LA VOZ DEL TITULAR, NO LA DE UNA ETIQUETA. En Inter negrita estas promesas pesaban lo
	   mismo que «¿Como se llama?». La guia le asigna a Fraunces los MENSAJES DE MARCA, que es exactamente esto:
	   darsela aqui las saca del registro de formulario sin inventar una tipografia nueva. */
	.cfbc-scope .cfbc-rv__bv-i b{
		display:block; font-family:var(--cafati-fuente-ed);
		font-size:16.5px; font-weight:600; line-height:1.25; letter-spacing:-.005em;
		color:var(--cfbc-verde); margin-bottom:4px;
	}
	.cfbc-scope .cfbc-rv__bv-t span{
		display:block; font-size:14px; line-height:1.55; color:var(--cfbc-tenue);
	}
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.447] LA BARRA DE PASOS, AJUSTADA
 *
 * Direccion: «los titulos al lado de los numeros pueden quedar mejor ajustados». Y era literal:
 * el disco y el rotulo iban PEGADOS —se leia «1Tu mascota»— porque el disco es `inline-flex`
 * con `margin-bottom` y ningun espacio lateral. Un numero pegado a una palabra no se lee como
 * numeracion: se lee como una errata.
 *
 * Se pasa a flex con `gap`, que es lo que separa dos cosas que van en linea sin depender de
 * espacios en el HTML. Y el disco crece a 26px: a 22 el numero quedaba apretado contra su borde.
 *
 * 🔴 EL COLOR DICE EN QUE ESTADO ESTA, y sigue la semantica de la casa: verde bosque el paso
 * VIGENTE —es el que pide accion—, verde de hoja del logo los ya CUMPLIDOS —cerrados, vivos, sin
 * pedir nada— y contorno tenue lo que falta. Purpura NO: aqui no hay marca ni gusto, hay
 * progreso, y el purpura ya tiene su sitio en el codigo de reserva y en los adicionales.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__paso{
	display:flex; align-items:center; gap:9px;
	padding-top:12px; font-size:13.5px; line-height:1.2;
}
.cfbc-scope .cfbc-rv__paso .cfbc-rv__paso-n{
	width:26px; height:26px; margin:0; flex:none; font-size:13.5px;
	transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
/* El paso vigente pesa: disco verde solido, rotulo en tinta y su tramo de via encendido. */
.cfbc-scope .cfbc-rv__paso.is-aqui{ color:var(--cfbc-texto); font-weight:650; border-top-color:var(--cfbc-verde) }
.cfbc-scope .cfbc-rv__paso.is-aqui .cfbc-rv__paso-n{
	background:var(--cfbc-verde); border-color:var(--cfbc-verde); color:var(--cfbc-papel);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--cfbc-verde) 14%, transparent);
}
/* Lo ya cumplido, en el verde de hoja del logo: dice «esto quedo» sin competir con el vigente. */
.cfbc-scope .cfbc-rv__paso.is-hecho{ color:var(--cfbc-texto); border-top-color:var(--cafati-logo-verde) }
.cfbc-scope .cfbc-rv__paso.is-hecho .cfbc-rv__paso-n{
	/* [mb1.453] FONDO hondo, BORDE del logo: el blanco del visto llega a AA (4,60) y por fuera
	 * se sigue leyendo el verde de la marca. */
	background:var(--cafati-logo-verde-hondo); border-color:var(--cafati-logo-verde); color:var(--cfbc-papel);
}
/* 🔴 EL CORTE ESTA MEDIDO, NO ELEGIDO. Cada columna necesita disco 26 + hueco 9 + rotulo ~110
   = 145px. Con cuatro pasos y sus separaciones, los rotulos solo caben a partir de ~700px.
   Lo puse en 560 y a 596 —el ancho real del movil de Direccion— «Donde y cuando» se partia
   en dos lineas y descuadraba la barra entera. Se vio en su pantalla, no en la mia.

   Debajo se queda el disco: ya dice en que paso estas, y el titular de abajo dice que se pide. */
@media (max-width:700px){
	.cfbc-scope .cfbc-rv__paso{ gap:0; justify-content:center }
	/* `display:none` de verdad, no `font-size:0`: el guardian de «nada bajo 13px» caza el
	   truco, y tiene razon — un tamano cero es un tamano, y los guardianes no distinguen
	   intenciones. Por eso el rotulo lleva su propio `<span>` desde mb1.447. */
	.cfbc-scope .cfbc-rv__paso-r{ display:none }
}

/* [mb1.447] La cabecera minima del embudo: una fila, el logo y nada mas.
   🔴 El logo se alinea con la COLUMNA de contenido, no con el borde de la ventana: pegado al
   canto izquierdo parecia una barra vacia. Mismo eje que el titular de abajo. */
/* 🔴 [mb1.456] SIN `max-width` AQUI. Este elemento PINTA el verde, asi que un ancho maximo
   le recorta el FONDO y lo centra: blanco a los dos lados en cualquier ventana ancha.
   El contenido se coloca en la columna con el `padding-inline` de la regla base
   `body.cfbc-scope .cfbc-nav` (0,2,1), que gana a esta (0,2,0) — que es justo por lo que
   la alineacion seguia bien mientras el fondo se encogia y nadie lo relacionaba. */
/* [mb1.946] Aquí vivían las clases nav--min y nav__salidas--min: la cabecera mínima del embudo se retiró en
   mb1.945 (el embudo lleva la cabecera completa) y sus reglas se fueron con ella. */
/* [mb1.478] AQUI VIVIAN `--a--min`, `--wa--icono`, `--wa-i` y `--wa-t`: cuatro clases para dos
   salidas que compartían un molde con la credencial de al lado (retirado en mb1.946). Se van
   con ellas — una regla sin clase es deuda igual que una clase sin regla, y el censo mira las dos
   direcciones. La regla nueva vive al final de la hoja, con el resto de la familia. */


/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.451] EL PASO 2 SE ELIGE, Y LO ELEGIDO SE RECOGE
 *
 * Direccion, en su movil: «al entrar al paso 2 aparece solo el recuadro de la consulta con
 * inyectables en toda la pantalla y no se sabe si hay algo mas». Dos causas: la tarjeta era un
 * boton que ENVIABA al tocarla, y su descripcion son 300 caracteres que llenan un telefono.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */

/* El radio se esconde pero SIGUE SIENDO el control: el foco del teclado se pinta sobre la
   tarjeta, no se pierde. `appearance:none` y no `display:none` — un control oculto del todo
   deja de recibir foco y la pantalla se vuelve inaccesible sin raton. */
.cfbc-scope .cfbc-rv__svc input[type=radio],
.cfbc-scope .cfbc-rv__opcion input[type=radio]{
	position:absolute; opacity:0; width:0; height:0; margin:0;
}
.cfbc-scope .cfbc-rv__svc{ position:relative; cursor:pointer }
.cfbc-scope .cfbc-rv__opcion{ position:relative; cursor:pointer }
.cfbc-scope .cfbc-rv__svc:has(input:focus-visible),
.cfbc-scope .cfbc-rv__opcion:has(input:focus-visible){
	outline:none; box-shadow:var(--cafati-anillo-foco); border-color:var(--cfbc-verde);
}

/* ── La marca de elegido: un visto, no solo un borde ──────────────────────────────────── */
/* Un borde a 2px no se distingue de «el raton esta encima». El visto dice «esto ya esta». */
.cfbc-scope .cfbc-rv__svc-marca{
	position:absolute; top:12px; right:12px; width:24px; height:24px; border-radius:999px;
	border:2px solid var(--cfbc-linea); background:var(--cfbc-papel);
	display:inline-flex; align-items:center; justify-content:center;
	transition:background-color .16s ease, border-color .16s ease;
}
.cfbc-scope .cfbc-rv__svc:has(input:checked) .cfbc-rv__svc-marca{
	background:var(--cfbc-verde); border-color:var(--cfbc-verde);
}
.cfbc-scope .cfbc-rv__svc:has(input:checked) .cfbc-rv__svc-marca::after{
	content:"\2713"; color:var(--cfbc-papel); font-size:14px; font-weight:700; line-height:1;
}
.cfbc-scope .cfbc-rv__svc:has(input:checked){
	border-color:var(--cfbc-verde); background:var(--cafati-menta-tenue);
}

/* ── 🔴 LO ELEGIDO SE RECOGE ──────────────────────────────────────────────────────────── */
/* Esta es la pieza que contesta la queja: al elegir, la tarjeta pierde su descripcion y baja de
   altura, asi que las familias de abajo entran en el encuadre sin tener que adivinar que estan.
   No se oculta el precio ni el nombre: recoger no es esconder lo que se compro. */
.cfbc-scope .cfbc-rv__svc:has(input:checked) .cfbc-rv__svc-d{ display:none }
.cfbc-scope .cfbc-rv__svc--grande:has(input:checked){ min-height:0; padding-block:16px }

/* ── El destacado deja de llenar la pantalla ──────────────────────────────────────────── */
/* Son 300 caracteres. En un telefono ocupaban el alto entero y nadie sabia que debajo habia
   vacunas. Tres lineas bastan para saber si es lo tuyo; el resto se lee al elegirlo. */
@media (max-width:700px){
	.cfbc-scope .cfbc-rv__svc--grande .cfbc-rv__svc-d{
		display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
	}
}

/* ── Las filas de opcion (packs y pesos), tambien radios ──────────────────────────────── */
.cfbc-scope .cfbc-rv__opcion:has(input:checked){
	border-color:var(--cfbc-verde); background:var(--cafati-menta-tenue); font-weight:650;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.469] LA BARRA QUE VIAJA CON EL PULGAR · idea de Direccion
 * Sticky y no fixed: CSS puro (la doctrina «sin JS todo funciona» queda intacta), y al llegar
 * al final SE POSA en su sitio natural — nunca tapa el pie ni necesita rellenos fantasma.
 * Papel SOLIDO a proposito: sobre la bandeja translucida y la textura, un fondo con alfa
 * obligaria a medir contraste contra el peor pixel otra vez; el opaco garantiza AA sin calculo.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__seguir--fijo{
	position:sticky; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); z-index:30;
	display:flex; flex-direction:column; gap:7px; align-items:stretch;
	margin:30px 0 0; padding:10px 12px;
	background:var(--cafati-papel); border:1px solid var(--cafati-linea);
	border-radius:var(--cafati-r-md);
	/* Sombra hacia ARRIBA: lo que flota sobre el contenido proyecta hacia el. */
	box-shadow:0 -6px 22px -12px rgba(2,62,50,.28), 0 10px 26px -14px rgba(2,62,50,.25);
}
/* En la barra el CTA es mas compacto: el peso lo pone la barra entera, no el boton. */
.cfbc-scope .cfbc-rv__seguir--fijo .cfbc-rv__cta{ min-height:48px }
/* 🔴 [mb1.489] DOS RENGLONES CON JERARQUIA, no una linea de texto al lado de un boton.
   Direccion: «me gusta la idea, pero lo encuentro muy puesto encima, sin pensar en diseno y
   formato». Lo que le faltaba: (1) jerarquia —una sola linea con dos informaciones obliga a
   leerla entera para sacar cualquiera—; (2) contraste de FORMA, versalitas espaciadas arriba
   y texto normal abajo, para que el ojo las separe sin esfuerzo; (3) separacion del boton. */
.cfbc-scope .cfbc-rv__seguir-eco{
	display:flex; flex-direction:column; gap:2px;
	text-align:center; line-height:1.3; min-width:0;
}
.cfbc-scope .cfbc-rv__seguir-eco:empty{ display:none }
/* El rotulo: versalitas espaciadas. Dice QUE es el dato de abajo. */
.cfbc-scope .cfbc-rv__seguir-r{
	font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
	color:var(--cafati-verde-accion); line-height:1.2;
}
.cfbc-scope .cfbc-rv__seguir-r:empty{ display:none }
/* El dato: texto normal, un punto mas grande. */
.cfbc-scope .cfbc-rv__seguir-d{
	font-size:14px; font-weight:500; color:var(--cfbc-tenue); line-height:1.3;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cfbc-scope .cfbc-rv__seguir-d:empty{ display:none }
/* 🔴 Y AL ELEGIR CAMBIA DE VOZ SIN CAMBIAR DE FORMA: el rotulo pasa a ser el servicio y el
   dato, su precio en cifras tabulares. Un renglon de recibo al lado del boton que confirma.
   La forma se conserva a proposito: el ojo ya sabe donde mirar. */
.cfbc-scope .cfbc-rv__seguir-eco.is-eleccion .cfbc-rv__seguir-r{
	letter-spacing:.02em; text-transform:none; font-size:13.5px; color:var(--cfbc-tenue);
	font-weight:600;
}
.cfbc-scope .cfbc-rv__seguir-eco.is-eleccion .cfbc-rv__seguir-d{
	font-size:17px; font-weight:800; color:var(--cfbc-verde);
	font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
/* 🔴 Al elegir servicio la barra recibe PESO Y HALO — la regla escrita: destacar sin animar.
   Quien acaba de tocar una tarjeta ve encenderse el sitio por donde se sigue. */
.cfbc-scope .cfbc-rv__form:has(input[name="service_id"]:checked) .cfbc-rv__seguir--fijo{
	border-color:color-mix(in srgb, var(--cafati-verde-accion) 45%, var(--cafati-linea));
	box-shadow:0 0 0 4px color-mix(in srgb, var(--cafati-verde-accion) 14%, transparent),
		0 -6px 22px -12px rgba(2,62,50,.28), 0 12px 30px -14px rgba(2,62,50,.30);
}
@media (min-width:700px){
	/* Escritorio: fila — la eleccion a la izquierda, el boton a la derecha, como un pie de
	   caja. La misma pieza, no otra. */
	.cfbc-scope .cfbc-rv__seguir--fijo{
		flex-direction:row; align-items:center; gap:16px;
		padding:10px 12px 10px 18px; bottom:14px;
		/* 🔴 [mb1.483] EL CASO DEGENERADO, BIEN RESUELTO. Quien empujaba el boton a la derecha era
		   el `margin-right:auto` DEL ECO; con el eco vacio, `:empty` lo ocultaba y el empujon
		   desaparecia con el — el boton caia a la izquierda y media barra quedaba en blanco.
		   Ahora la leyenda no va vacia nunca (la pone el servidor), pero si algun dia faltara, el
		   boton se CENTRA en vez de quedarse a un lado. Direccion propuso las dos y resuelven
		   cosas distintas: una llena el hueco con algo util, la otra impide que se abra. */
		justify-content:center;
	}
	/* En escritorio la leyenda se alinea a la izquierda y un FILO VERTICAL la separa del boton:
	   la barra deja de ser «texto y boton en la misma caja» y pasa a leerse como dos zonas,
	   igual que el pie de una caja registradora. */
	.cfbc-scope .cfbc-rv__seguir-eco{ text-align:left; margin-right:auto; align-items:flex-start;
		max-width:44ch; padding-right:18px; position:relative }
	.cfbc-scope .cfbc-rv__seguir-eco::after{
		content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
		width:1px; height:30px; background:var(--cafati-linea);
	}
	.cfbc-scope .cfbc-rv__seguir--fijo .cfbc-rv__cta{ width:auto; min-width:280px }
}
@media (prefers-reduced-motion: reduce){
	.cfbc-scope .cfbc-rv__seguir--fijo{ transition:none }
}
/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.474] EL RESPALDO · el banner que cierra la reserva
 * Purpura de marca: es un momento de MARCA, no de accion, y es la unica pantalla del embudo
 * donde eso toca. Cantos iluminados como la bandeja (mb1.465): mismo lenguaje, no otro.
 * Fondo `purpura-tenue` (#FAF6FC, 1.02 sobre papel): tan palido que ningun texto cambia su
 * contraste — el color lo ponen el canto y el titular, no el relleno.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__resp{
	margin:26px 0 0; padding:24px 20px 22px; text-align:center;
	background:var(--cafati-purpura-tenue);
	border:1px solid color-mix(in srgb, var(--cafati-purpura) 20%, transparent);
	border-radius:var(--cafati-r-lg);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 80%, transparent),
		0 1px 2px rgba(2,62,50,.04),
		0 14px 34px -22px rgba(100,44,135,.38);
}
.cfbc-scope .cfbc-rv__resp-logo{
	height:38px; width:auto; display:block; margin:0 auto 14px;
}
.cfbc-scope .cfbc-rv__resp-o{
	margin:0 0 4px; font-size:13px; font-weight:700; letter-spacing:.12em;
	text-transform:uppercase; color:var(--cafati-purpura); line-height:1.2;
}
/* Fraunces: la guia le asigna los MENSAJES DE MARCA, y esto es exactamente eso. */
.cfbc-scope .cfbc-rv__resp-t{
	margin:0 0 8px; font-family:var(--cafati-fuente-ed);
	font-size:22px; font-weight:600; line-height:1.2; color:var(--cfbc-verde);
	text-wrap:balance;
}
.cfbc-scope .cfbc-rv__resp-d{
	margin:0 auto 18px; max-width:44ch; font-size:14.5px; line-height:1.55;
	color:var(--cfbc-texto);
}
/* Boton de marca, no de accion: purpura y no el verde del CTA — quien acaba de reservar no
   debe confundir esto con otra reserva. */
.cfbc-scope .cfbc-rv__resp-b{
	display:inline-flex; align-items:center; justify-content:center; gap:2px;
	min-height:46px; padding:0 22px; border-radius:var(--cafati-r-md);
	background:var(--cafati-purpura); color:var(--cafati-papel);
	font-size:15px; font-weight:700; text-decoration:none;
	box-shadow:0 6px 18px -10px rgba(100,44,135,.7);
	transition:transform .16s ease, box-shadow .16s ease;
}
.cfbc-scope a.cfbc-rv__resp-b{ color:var(--cafati-papel) }
.cfbc-scope .cfbc-rv__resp-b:hover,
.cfbc-scope .cfbc-rv__resp-b:focus-visible{
	transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(100,44,135,.75);
}
.cfbc-scope .cfbc-rv__resp-x{ font-size:14px }
@media (prefers-reduced-motion: reduce){
	.cfbc-scope .cfbc-rv__resp-b{ transition:none }
	.cfbc-scope .cfbc-rv__resp-b:hover{ transform:none }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.475 · rehecho en mb1.478] LA FILA VERDE — UNA FAMILIA CON DOS ROLES
 *
 * Direccion: «todo debe quedar muy armonico y estructurado, junto con los otros 2 links».
 * Tenia razon: habia TRES tratamientos para tres cosas del mismo rango.
 *
 * ARMONICO NO ES IDENTICO (guia §8.0·4). Lo COMPARTIDO es la metrica —38px de alto, mismo
 * radio, mismo cuerpo, mismo hueco—; lo DISTINTO es el rol:
 *   · la credencial es un HECHO que se lee  → placa RELLENA, sin perfil
 *   · cobertura y WhatsApp se PULSAN        → PERFILADAS, que es lo que invita a pulsar
 *
 * [mb1.626] La metrica compartida sube de 38 a 44 px. Se sube AQUI, en la metrica comun, y no en
 * una de las dos piezas: lo que mb1.478 dejo dicho es que lo compartido es precisamente esto, y
 * tocar solo una las separaria en el sitio donde acordamos que van juntas.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-ps{
	display:inline-flex; align-items:center; flex:0 0 auto;
	min-height:44px; padding:0 14px; border-radius:999px;
	font-size:14px; font-weight:600; line-height:1;
	white-space:nowrap; text-decoration:none;
	color:var(--cafati-papel);
}
.cfbc-scope a.cfbc-ps{ color:var(--cafati-papel) }
.cfbc-scope .cfbc-ps{ gap:9px }

/* ── EL HECHO · placa llena, sin perfil ──────────────────────────────────────────────────── */
.cfbc-scope .cfbc-ps{
	background:color-mix(in srgb, var(--cafati-papel) 13%, transparent);
	border:1px solid color-mix(in srgb, var(--cafati-papel) 16%, transparent);
	transition:background .16s ease, border-color .16s ease;
}
.cfbc-scope a.cfbc-ps:hover,
.cfbc-scope a.cfbc-ps:focus-visible{
	background:color-mix(in srgb, var(--cafati-papel) 20%, transparent);
	border-color:color-mix(in srgb, var(--cafati-papel) 34%, transparent);
}
/* ── LAS ACCIONES · perfiladas ───────────────────────────────────────────────────────────── */
/* [mb1.946] Las acciones perfiladas del embudo (clase nav__sal) se retiraron con la cabecera mínima; la
   salida de WhatsApp de la cabecera común es `.cfbc-nav__wa`. */

/* ── LA NOTA Y SUS CINCO ESTRELLAS ───────────────────────────────────────────────────────── */
.cfbc-scope .cfbc-ps__cal{ display:inline-flex; align-items:center; gap:6px }
/* La nota manda sobre las estrellas: es el dato, ellas son la escala en que se lee. */
.cfbc-scope .cfbc-ps__n{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums }
/* Dos capas exactas: la base marca las CINCO —la escala— y la de oro se recorta al porcentaje
   que llega en linea. El `overflow` necesita una caja, y `position:absolute` se la da. */
.cfbc-scope .cfbc-ps__es{ position:relative; display:inline-block; line-height:1; font-size:13px;
	letter-spacing:1.5px }
.cfbc-scope .cfbc-ps__es-b{ display:block;
	color:color-mix(in srgb, var(--cafati-papel) 32%, transparent) }
.cfbc-scope .cfbc-ps__es-o{ position:absolute; left:0; top:0; bottom:0; overflow:hidden;
	color:var(--cafati-estrella) }
/* La separacion entre datos: un punto tenue, no una linea. */
.cfbc-scope .cfbc-ps__p{ opacity:.45 }
.cfbc-scope .cfbc-ps__d{ font-weight:500 }
/* El envoltorio de la rama SIN enlace deja de ser caja (mb1.476) para no comerse el hueco. */
.cfbc-scope .cfbc-ps__v{ display:inline-flex; align-items:center; gap:9px; display:contents }

/* ══ LOS ESCALONES · medidos, no supuestos ══════════════════════════════════════════════════
 * La cabecera del EMBUDO solo lleva marca + credencial + dos salidas, asi que aguanta el tercer
 * dato mucho antes que la publica, que ademas carga menu y CTA. Por eso los cortes son distintos:
 * un umbral unico obligaria a esconder en el embudo algo que ahi cabia de sobra. */
@media (max-width:1250px){
	.cfbc-scope .cfbc-ps .cfbc-ps__d--w,
	.cfbc-scope .cfbc-ps .cfbc-ps__p:has(+ .cfbc-ps__d--w){ display:none }
}
@media (max-width:900px){
	.cfbc-scope .cfbc-ps__d--w,
	.cfbc-scope .cfbc-ps__p:has(+ .cfbc-ps__d--w){ display:none }
}
/* Por debajo de 700px queda la NOTA con su escala y nada mas: es lo que cabe y lo que mas dice.
   Y las dos salidas se quedan en icono —el patron de WhatsApp desde mb1.447— porque con las cinco
   estrellas la fila pedia 418px de 375; asi baja a 352 y entra de una sola fila. */
@media (max-width:700px){
	.cfbc-scope .cfbc-ps__d,
	.cfbc-scope .cfbc-ps__p{ display:none }
	.cfbc-scope .cfbc-ps{ padding:0 12px }
}
/* 🔴 Y bajo 360px la credencial se retira. No cabe de ninguna forma, asi que hay que elegir, y se
   cede lo que no impide seguir: cobertura contesta «llegan a mi comuna?» y WhatsApp resuelve
   dudas — los dos son FUNCION. La credencial es apoyo, y un apoyo que rompe la fila no apoya. */
/* [mb1.946] El corte bajo 360px era de la cabecera mínima (clase ps--min); en la cabecera común la credencial
   de la barra cede las estrellas bajo 400px y se queda con la nota (regla en NAVEGACIÓN MÓVIL). */
@media (prefers-reduced-motion: reduce){
	.cfbc-scope .cfbc-ps{ transition:none }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.482] EL PIE DEL PROYECTO · una losa, cuatro bandas
 *
 * Direccion: «un footer para todo el proyecto (…) que se sienta que no somos un carrito de compras
 * de veterinarios, sino un equipo humano comprometido en todas las etapas (…) precioso, adaptado a
 * movil y desktop».
 *
 * Contrastes MEDIDOS sobre `#023E32`: papel 100% = 12,09 · 78% = 7,99 · 62% = 5,64 · menta = 10,10
 * · distincion = 7,19. Los cuatro pasan AA, asi que la jerarquia se hace con TONO y no con tamano.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-pie{
	margin-top:var(--cafati-e-7);
	background:var(--cafati-verde); color:var(--cafati-papel);
}
/* La columna del contenido, igual que la cabecera, para que el pie no se descuelgue del eje. */
body.cfbc-scope .cfbc-pie{
	padding-inline:max(var(--cafati-e-4), calc((100% - 1080px)/2));
}
.cfbc-scope .cfbc-pie a{ color:var(--cafati-papel) }

/* ── BANDA 1 · la llamada ────────────────────────────────────────────────────────────────── */
/* 🔴 [mb1.485] EN ESCRITORIO DEJABA MEDIA BANDA VACIA — el mismo defecto que Direccion senalo en
   la barra del embudo, aqui otra vez. Se reparte en dos columnas y el hueco lo ocupa la
   credencial, que es exactamente lo que corresponde al lado de una llamada a la accion: quien
   duda antes de pulsar necesita una razon, no aire. */
.cfbc-scope .cfbc-pie__cta{
	background:none; padding:44px 0 40px; border-radius:0;
	display:grid; gap:24px; grid-template-columns:1fr; align-items:center;
}
@media (min-width:860px){
	.cfbc-scope .cfbc-pie__cta{ grid-template-columns:minmax(0,1.05fr) auto; column-gap:40px }
	.cfbc-scope .cfbc-pie__aval{ justify-self:end; text-align:right }
}
.cfbc-scope .cfbc-pie__aval{ display:flex; flex-direction:column; align-items:flex-start; gap:10px }
@media (min-width:860px){ .cfbc-scope .cfbc-pie__aval{ align-items:flex-end } }
.cfbc-scope .cfbc-pie__aval-t{
	margin:0; max-width:26ch; font-size:14px; line-height:1.5;
	color:color-mix(in srgb, var(--cafati-papel) 70%, transparent);
}
.cfbc-scope .cfbc-pie__tit{
	font-family:var(--cafati-fuente-ed); font-size:clamp(24px,3.6vw,34px); line-height:1.15;
	font-weight:600; margin:0; text-wrap:balance; max-width:18ch;
}
.cfbc-scope .cfbc-pie__sub{
	margin:12px 0 0; max-width:52ch; font-size:16px; line-height:1.55;
	color:color-mix(in srgb, var(--cafati-papel) 78%, transparent);
}
.cfbc-scope .cfbc-pie__botones{ margin:26px 0 0; gap:12px }
.cfbc-scope .cfbc-pie__b1,
.cfbc-scope .cfbc-pie__b2{ min-height:50px; padding:0 26px; border-radius:var(--cafati-r-md);
	font-size:15.5px; font-weight:700 }
.cfbc-scope .cfbc-pie__b1{ box-shadow:0 10px 26px -14px rgba(0,0,0,.55) }
.cfbc-scope a.cfbc-pie__b1{ color:var(--cafati-verde) }

/* ── BANDA 2 · el compromiso ─────────────────────────────────────────────────────────────── */
/* La linea que separa bandas es un filo de luz, no un borde gris: sobre oscuro, un gris se lee
   sucio y un blanco al 12% se lee como un canto. */
.cfbc-scope .cfbc-pie__comp{
	padding:40px 0 8px;
	border-top:1px solid color-mix(in srgb, var(--cafati-papel) 12%, transparent);
}
.cfbc-scope .cfbc-pie__ojo{
	margin:0 0 8px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	color:var(--cafati-menta);
}
.cfbc-scope .cfbc-pie__h2{
	margin:0; font-family:var(--cafati-fuente-ed); font-size:clamp(22px,3.2vw,30px);
	font-weight:600; line-height:1.2; text-wrap:balance;
}
.cfbc-scope .cfbc-pie__lead{
	margin:14px 0 0; max-width:62ch; font-size:16px; line-height:1.6;
	color:color-mix(in srgb, var(--cafati-papel) 78%, transparent);
}
/* Las tres etapas. Rejilla que se pliega: en escritorio tres columnas, en movil tres filas, y las
   dos veces con su regla superior — el mismo objeto, no una version reducida. */
.cfbc-scope .cfbc-pie__etapas{
	list-style:none; margin:32px 0 0; padding:0;
	display:grid; gap:26px; grid-template-columns:1fr;
}
@media (min-width:760px){
	.cfbc-scope .cfbc-pie__etapas{ grid-template-columns:repeat(3, 1fr); gap:30px }
}
.cfbc-scope .cfbc-pie__etapa{ padding-top:16px; position:relative }
/* 🔴 LA DISTINCIÓN, OTRA VEZ COMO FILO. Una regla corta arriba de cada etapa: marca el comienzo de un
   tramo sin pintar una superficie. Misma doctrina que las tarjetas de especie (mb1.479). */
.cfbc-scope .cfbc-pie__etapa::before{
	content:""; position:absolute; top:0; left:0; width:34px; height:2px; border-radius:2px;
	background:var(--cafati-distincion);
}
.cfbc-scope .cfbc-pie__etapa-c{
	margin:0 0 6px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
	color:var(--cafati-distincion);
}
.cfbc-scope .cfbc-pie__etapa-t{ margin:0 0 6px; font-size:17px; font-weight:700; line-height:1.25 }
.cfbc-scope .cfbc-pie__etapa-d{
	margin:0; font-size:14.5px; line-height:1.6;
	color:color-mix(in srgb, var(--cafati-papel) 74%, transparent);
}

/* ── BANDA 3 · el mapa ───────────────────────────────────────────────────────────────────── */
.cfbc-scope .cfbc-pie__mapa{
	display:grid; gap:28px; grid-template-columns:1fr; padding:38px 0;
	margin-top:34px;
	border-top:1px solid color-mix(in srgb, var(--cafati-papel) 12%, transparent);
}
@media (min-width:760px){
	/* La columna de comunas pesa el doble porque lleva el doble de enlaces. */
	.cfbc-scope .cfbc-pie__mapa{ grid-template-columns:2fr 1fr 1fr; gap:34px }
}
.cfbc-scope .cfbc-pie__col-t{
	margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
	color:var(--cafati-menta);
}
/* [mb1.639] El hueco baja de 9 a 0 porque el alto del enlace sube a 44: **lo que no puede crecer
 * es el PASO**, o doce comunas convierten el pie en una escalera. Con 44 de alto y 0 de hueco cada
 * enlace tiene su zona entera sin pisar a nadie, y el texto sigue viéndose igual de junto. */
.cfbc-scope .cfbc-pie__lista{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
/* Las comunas en dos columnas: doce nombres en una sola tira son una escalera. */
@media (min-width:520px){
	.cfbc-scope .cfbc-pie__lista--2{ grid-template-columns:1fr 1fr; column-gap:20px }
}
/* 🔴 Los tres estados, juntos y explicitos. Escribir solo `a.cfbc-pie__a` dejaba la puerta
   abierta a que cualquier regla con `:link` —como la que habia— ganara por especificidad. */
.cfbc-scope a.cfbc-pie__a,
.cfbc-scope a.cfbc-pie__a:link,
.cfbc-scope a.cfbc-pie__a:visited{
	display:flex; align-items:center; min-height:44px;
	font-size:14.5px; line-height:1.35; text-decoration:none;
	color:color-mix(in srgb, var(--cafati-papel) 80%, transparent);
	transition:color .14s ease;
}
.cfbc-scope a.cfbc-pie__a:hover,
.cfbc-scope a.cfbc-pie__a:focus-visible{ color:var(--cafati-papel); text-decoration:underline;
	text-underline-offset:3px }
.cfbc-scope a.cfbc-pie__mas{
	display:inline-flex; align-items:center; min-height:44px;
	margin-top:8px; font-size:14.5px; font-weight:700;
	color:var(--cafati-menta); text-decoration:none;
}
.cfbc-scope a.cfbc-pie__mas:hover,
.cfbc-scope a.cfbc-pie__mas:focus-visible{ text-decoration:underline; text-underline-offset:3px }

/* ── BANDA 4 · el cierre ─────────────────────────────────────────────────────────────────── */
.cfbc-scope .cfbc-pie__cierre{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
	padding:20px 0 30px;
	border-top:1px solid color-mix(in srgb, var(--cafati-papel) 12%, transparent);
}
.cfbc-scope .cfbc-pie__legal{
	margin:0; font-size:13.5px; line-height:1.5;
	color:color-mix(in srgb, var(--cafati-papel) 62%, transparent);
}
.cfbc-scope a.cfbc-pie__resp{
	display:inline-flex; align-items:center; min-height:44px;
	font-size:13.5px; font-weight:600; text-decoration:none;
	color:color-mix(in srgb, var(--cafati-papel) 78%, transparent);
}
.cfbc-scope a.cfbc-pie__resp:hover,
.cfbc-scope a.cfbc-pie__resp:focus-visible{ color:var(--cafati-papel);
	text-decoration:underline; text-underline-offset:3px }

/* La fila plana de enlaces del pie viejo ya no la emite nadie: su regla se va con ella. */

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.490] LOS CAMPOS DEL PASO 1 · material, estado y sugerencias
 *
 * Direccion: «siento que algo le falta para que quede espectacular (…) quizas el texto del ejemplo
 * podria ser mejor formateado, o el mismo campo que tenga dinamismo».
 *
 * 🔴 EL MATERIAL VA AL REVES QUE EN LAS TARJETAS, y eso es el punto: una tarjeta se TOMA, asi que
 * se eleva —sombra hacia fuera—; un campo se LLENA, asi que se hunde —sombra hacia dentro—. Mismo
 * lenguaje, gramatica opuesta. Un campo con sombra de tarjeta parece un boton y nadie escribe en el.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 [mb1.491] EL BORDE EN REPOSO PASA A PURPURA. Direccion: «el borde del campo deberia ser
   mas sutil». Lo pesado no era el grosor: era el VERDE PROFUNDO. Al 30% de purpura da 1,70
   contra el papel —mejor que el 1,29 del verde al 14% que habia— y se lee mas suave, porque
   el tono lila se aparta menos del marfil que un verde oscuro aguado.

   ⚠️ SIGUE SIN LLEGAR AL 3:1 que WCAG 1.4.11 pide para el contorno de un control. No es de
   hoy —`--cfbc-linea` daba 1,25— y llegar exigiria un borde bastante mas marcado del que se
   acaba de pedir mas sutil. Queda anotado; la senal FUERTE la lleva el foco, que si pasa. */
.cfbc-scope .cfbc-rv__campo input,
.cfbc-scope .cfbc-rv__campo select,
.cfbc-scope .cfbc-rv__campo textarea{
	background:linear-gradient(180deg, var(--cafati-marfil) 0%, var(--cafati-papel) 100%);
	/* [mb1.493] Del 30% al 22%: da 1,46 contra el papel, todavia por encima del 1,29 que daba
	   el verde de antes. Mas tenue, y aun asi mejor que lo que habia. */
	border:1px solid color-mix(in srgb, var(--cafati-purpura) 22%, transparent);
	box-shadow:inset 0 2px 3px -1px rgba(2,62,50,.07);
	transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cfbc-scope .cfbc-rv__campo input:hover,
.cfbc-scope .cfbc-rv__campo textarea:hover{
	border-color:color-mix(in srgb, var(--cafati-purpura) 36%, transparent);
}
/* 🔴 [mb1.491] ENFOCADO: EL LILA DE LA MARCA. Direccion: «el color de relleno yo lo usaria
   como un morado tenue para seguir la linea de la marca» · «mas femenino».

   Los tres numeros que lo sostienen, medidos:
     · texto sobre el lila `#F1EAF5` .............. 13,37  (AA de sobra)
     · borde purpura al 70% contra el relleno ....  3,90  (indicador de foco ✓)
     · …y contra el papel de la pagina ...........  4,36  (por el otro lado tambien ✓)
   Al 55% cae a 2,76 y deja de valer como indicador: 70 es el mas ligero que aguanta. */
.cfbc-scope .cfbc-rv__campo input:focus-visible,
.cfbc-scope .cfbc-rv__campo select:focus-visible,
.cfbc-scope .cfbc-rv__campo textarea:focus-visible{
	/* 🔴 [mb1.493] EL RELLENO, LO MAS TENUE QUE TODAVIA SE VE. `purpura-tenue` a secas se separa
	   solo 1,016 del papel: a esa distancia el relleno deja de leerse y el foco pierde una de
	   sus tres senales. Este da 1,058, que es el suelo medido.

	   Y se MEZCLAN los dos tokens que ya existen en vez de escribir el hex: asi la relacion
	   queda dicha en la regla y este tono sigue solo a los otros dos si alguno cambia. */
	background:color-mix(in srgb, var(--cafati-purpura-suave) 40%, var(--cafati-purpura-tenue));
	/* Del 70% al 62%: 3,38 contra el relleno y 3,43 contra el papel. Al 56% cae a 2,94 y deja
	   de valer como indicador de foco — el 62 es el suelo, no una preferencia. */
	border-color:color-mix(in srgb, var(--cafati-purpura) 62%, transparent);
	box-shadow:var(--cafati-anillo-foco), inset 0 1px 2px -1px rgba(100,44,135,.06);
}
/* 🔴 LLENO SE VE SIN LEER: un ✓ junto al rotulo. Glifo con significado —«esto ya esta»—, no un
   punto de color. Y no depende del `:hover`: en un telefono no hay raton. */
.cfbc-scope .cfbc-rv__campo label{ position:relative }
.cfbc-scope .cfbc-rv__campo label::after{
	content:"\2713"; margin-left:7px; font-size:13px; font-weight:800;
	color:var(--cafati-verde-accion); opacity:0; transition:opacity .16s ease;
}
.cfbc-scope .cfbc-rv__campo:has(input:not(:placeholder-shown)) label::after,
.cfbc-scope .cfbc-rv__campo:has(textarea:not(:placeholder-shown)) label::after{ opacity:1 }
/* El nombre que el formulario aprendio, dentro del rotulo. Sin guion va vacio y no ocupa nada. */
.cfbc-scope .cfbc-rv__aquien{ color:var(--cfbc-verde) }

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * ↓ [mb1.770] EL AVISO DE LO QUE FALTA, EN LA CABECERA
 *
 * Direccion: «aca deberia haber algo que diga que mas abajo deben completar datos claramente».
 * Hasta aqui la pantalla daba cuatro senales seguidas de «esto termino» —el ✓, el titular, el
 * subtitulo y el codigo— y ninguna de «falta algo».
 *
 * 🔴 ES UN BOTON, NO UN RENGLON DE TEXTO. Un aviso que solo informa deja al tutor buscando donde
 * hacerlo; este LLEVA. Y por eso tiene altura de objetivo tactil y no de parrafo.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 [mb1.772] AQUI VIVIA MI AVISO DE CABECERA, Y SE FUE CON SU PIEZA.
 *
 * Resolvia el defecto —la pantalla daba un final antes de pedir lo que falta— ANADIENDO una tercera
 * caja morada. Direccion lo resolvio QUITANDO una: con el codigo dentro del bloque de lo que falta,
 * no se puede tener el codigo sin ver el formulario. Su version elimina la causa; la mia la
 * compensaba, y encima gastaba la pantalla que el formulario necesitaba.
 *
 * Las reglas se van con la clase: una regla sin clase es deuda igual que una clase sin regla, y el
 * censo vigila las dos direcciones (mb1.495). */

/* 🔴 [mb1.770] Y EL BOTON DE ESA TARJETA, MORADO COMO ELLA.
 *
 * La tarjeta es morada entera —marco, titular, asteriscos, el plegable— y su boton salia en verde
 * oscuro: la pieza se leia partida en dos. Es exactamente lo que mb1.484 ya decidio para la barra
 * del ultimo paso —«si el boton es morado y su barra sigue verde, la pieza se lee partida»— y esta
 * pantalla es la continuacion de aquella, no otra distinta.
 *
 * ⚠️ Se hereda el vestido completo de aquel boton (luz arriba, peso abajo, aureola propia) en vez
 * de repintar solo el fondo: medio vestido es como se acaba con dos botones morados distintos. */
.cfbc-scope .cfbc-rv__datos .cfbc-rv__datos-go{
	background:var(--cafati-purpura); color:var(--cafati-papel);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 26%, transparent),
		inset 0 -2px 0 color-mix(in srgb, var(--cafati-logo-tinta) 16%, transparent),
		0 2px 4px rgba(100,44,135,.20),
		0 12px 28px -12px rgba(100,44,135,.55);
}
@media (hover:hover){
	.cfbc-scope .cfbc-rv__datos .cfbc-rv__datos-go:hover{
		box-shadow:
			inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 32%, transparent),
			inset 0 -2px 0 color-mix(in srgb, var(--cafati-logo-tinta) 18%, transparent),
			0 3px 6px rgba(100,44,135,.24),
			0 18px 36px -12px rgba(100,44,135,.62);
	}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * ↓ [mb1.768] «FALTA ALGO POR LLENAR», DICHO SIN LEER
 *
 * Direccion: «que mirando se entienda que hay algo mas que llenar; quizas una flecha que apunte
 * hacia abajo, entre medio del texto, bien acomodada».
 *
 * El problema de fondo no era que faltara una flecha: es que una CASILLA VACIA NO SE LEE COMO
 * PENDIENTE — se lee como mobiliario del formulario. Justo arriba vive el signo POSITIVO (el ✓
 * que aparece en el rotulo al llenar) y nunca tuvo su espejo. Por eso van las dos cosas: la
 * flecha apunta, y el destino se ve esperando. Una flecha que senala algo que no parece necesitar
 * nada solo mueve la duda un renglon mas abajo.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */

/* 🔴 SE APAGA SOLA. Existe mientras falte algo y desaparece en cuanto no falta: una flecha
   permanente deja de significar «falta esto» y pasa a ser un adorno — y un adorno que dice
   «falta» miente la mitad del tiempo. `:required:invalid` es la pregunta exacta y la contesta el
   navegador, sin una linea de guion. */
.cfbc-scope .cfbc-rv__falta{ display:none }
.cfbc-scope .cfbc-rv__seguir--cierre:has(input:required:invalid) .cfbc-rv__falta,
.cfbc-scope .cfbc-rv__datos:has(input:required:invalid) .cfbc-rv__falta{ display:revert }

/* EN EL ROTULO · cuesta cero pixeles de alto, que es lo que puede pagar una barra bajo el pulgar.
   Mas grande que el rotulo y sin las versalitas: es un signo, no una palabra. Va la ULTIMA del
   renglon —sobre la esquina de las casillas— y el filo la lleva hasta ahi. */
/* [mb1.772] En el titular del bloque de datos, el mismo signo con el mismo peso: las dos pantallas
   dicen «falta algo» con la misma forma. */
.cfbc-scope .cfbc-rv__datos-t .cfbc-rv__falta{
	margin-left:8px; font-size:17px; font-weight:800; line-height:1;
}
.cfbc-scope .cfbc-rv__cierre-o .cfbc-rv__falta{
	order:2; flex:0 0 auto;
	font-size:17px; line-height:1; letter-spacing:0;
	color:var(--cafati-purpura); font-weight:800;
}
/* EL FILO que conduce hasta ella. Aparece y desaparece CON la flecha: un filo permanente seria una
   regla decorativa partiendo en dos una barra que ya tiene marco para decir donde empieza. */
.cfbc-scope .cfbc-rv__seguir--cierre:has(input:required:invalid) .cfbc-rv__cierre-o::after{
	content:""; order:1; flex:1 1 auto; height:1px;
	background:color-mix(in srgb, var(--cafati-purpura) 26%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * 🎫 [mb1.772] EL CODIGO DE RESERVA, EN EL SITIO DE LA BISAGRA
 *
 * Direccion: «el codigo lo pegaria donde pusiste la linea larga con la flecha al centro, bajo el
 * texto de falta un paso» · «quizas poner el codigo dentro del bloque que falta un paso, y ahi
 * quedaria mucho mas coherente».
 *
 * El filo ya separaba lo que se LEE de lo que se ESCRIBE. El codigo es exactamente lo ultimo que se
 * lee antes de empezar a escribir, asi que la bisagra pasa a ser el — y la pantalla se ahorra una
 * caja entera, que es el sitio que el formulario necesitaba.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__codigo-fila{
	display:flex; align-items:center; gap:12px;
	margin:20px 0 6px;
}
.cfbc-scope .cfbc-rv__codigo-fila::before,
.cfbc-scope .cfbc-rv__codigo-fila::after{
	content:""; flex:1 1 auto; height:1px;
	background:color-mix(in srgb, var(--cafati-purpura) 26%, transparent);
}
/* El rotulo y el valor, en columna y apretados: es UNA cosa —«tu codigo es este»— y separarlos en
   dos renglones sueltos los convertiria en dos. */
.cfbc-scope .cfbc-rv__codigo-fila > .cfbc-rv__codigo-et{
	flex:0 0 auto; font-size:13px; font-weight:700; letter-spacing:.12em;
	text-transform:uppercase; color:var(--cafati-purpura); line-height:1;
}
/* ⚠️ El valor conserva su vestido de siempre (`cfbc-rv__codigo`): 23px, tabular, morado. Cambiarlo
   aqui daria dos codigos distintos en el mismo sitio segun por donde se entre. */
.cfbc-scope .cfbc-rv__codigo-fila > .cfbc-rv__codigo{ flex:0 0 auto; line-height:1 }
.cfbc-scope .cfbc-rv__codigo-pie{
	margin:0 0 18px; font-size:13px; line-height:1.4;
	color:var(--cafati-texto-tenue); text-align:center;
}
/* En pantalla estrecha el rotulo y el codigo no caben con los dos filos: el rotulo se va arriba y
   el filo queda partido solo por el codigo, que es lo que hay que ver. */
@media (max-width:430px){
	.cfbc-scope .cfbc-rv__codigo-fila{ flex-wrap:wrap; justify-content:center; gap:4px 10px }
	.cfbc-scope .cfbc-rv__codigo-fila > .cfbc-rv__codigo-et{ order:-1; flex:1 0 100%; text-align:center }
}

/* [mb1.772] Y AQUI EL FILO CON LA FLECHA SUELTA. Su sitio lo ocupa ahora el codigo —era la bisagra
   entre lo que se lee y lo que se escribe, y el codigo es lo ultimo que se lee—, asi que su vestido
   se muda arriba, a `.cfbc-rv__codigo-fila`. La flecha no se pierde: se fue al titular del bloque,
   que es donde Direccion ya la aprobo en la barra del paso anterior. */

/* 🔴 EL ESPEJO DEL ✓ · lo que falta se ve esperando, en el mismo sitio y con el mismo mecanismo.
 *
 * ⚠️ MORADO, NUNCA AMBAR NI ROJO. Falta ≠ error: el ambar es atencion pendiente y el rojo es
 * problema (§8.0b). Pintar de ambar un campo que el tutor todavia no ha tenido tiempo de escribir
 * lo convierte en una advertencia por existir — y esta pantalla tiene seis. */
.cfbc-scope .cfbc-rv__cierre-campos .cfbc-rv__campo:has(input:required:invalid) input,
.cfbc-scope .cfbc-rv__datos .cfbc-rv__campo:has(input:required:invalid) input{
	/* [mb1.769] Subido de 38/26 tras mirarlo instalado: al 26% el velo no se distinguia del papel
	   y la casilla seguia leyendose como mobiliario, que era el problema de origen. Sigue MUY por
	   debajo de un estado de alerta — es un velo, no un relleno. */
	border-color:color-mix(in srgb, var(--cafati-purpura) 48%, var(--cafati-linea));
	background:color-mix(in srgb, var(--cafati-purpura-suave) 46%, var(--cafati-papel));
}
/* Y en cuanto el tutor esta escribiendo, el anillo se aparta: el foco manda sobre el estado. */
.cfbc-scope .cfbc-rv__campo input:focus-visible{ background:var(--cafati-papel) }

/* [mb1.495] Aqui vivia el vestido de las SUGERENCIAS. Se fueron con ellas: una regla sin
   clase es deuda igual que una clase sin regla, y el censo vigila las dos direcciones.
   [mb1.722] Y con ellas se quedo una llave de cierre huerfana, que el navegador descarta
   pero deja la hoja sin poder comprobarse: con una llave suelta no hay forma de saber si un
   bloque nuevo cayo dentro o fuera de su consulta de medios. */

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.492] EL ROTULO DE LA PISTA · por que esta familia encabeza la pagina
 *
 * No es un titulo de seccion: es una NOTA SOBRE EL ORDEN, y por eso va fuera de la familia y con
 * otra forma —cursiva, sin mayusculas, sin medallon—. Un titulo mas encima de un titulo seria un
 * nivel de jerarquia inventado.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__pista{
	display:flex; align-items:center; gap:8px;
	margin:0 0 10px; font-size:14px; font-style:italic;
	color:var(--cafati-purpura);
}
.cfbc-scope .cfbc-rv__pista::before{
	content:""; width:22px; height:2px; border-radius:2px; flex:0 0 auto;
	background:color-mix(in srgb, var(--cafati-purpura) 55%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.497] LAS TARJETAS DE ADICIONAL · verticales, y con el precio alineado
 *
 * Direccion: «cuadra mejor los frames (…) mas elegantes y formales, que el cuadrito de seleccion
 * no toque el borde».
 *
 * La fila `[casilla][icono][nombre][precio]` dejaba al nombre unos 100px de una tarjeta de 310, y
 * «Consulta a otro paciente en la misma visita» caia en CINCO renglones con alturas dispares. Eso
 * no es poco elegante: es ilegible.
 *
 * Vertical: icono arriba, casilla en su esquina CON AIRE, nombre a todo el ancho y el precio al
 * fondo con `margin-top:auto` — asi los precios de una misma fila quedan alineados entre si, que
 * es exactamente lo que se lee como formal.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__extras-g{ align-items:stretch }
.cfbc-scope .cfbc-rv__extra{
	/* 🔴 [mb1.504] `border-box`, y sin el la tarjeta SE SOLAPA con la de abajo. Medido: la fila de
	   la rejilla daba 241px y la tarjeta pintaba 275 — 34 de mas, que son su relleno (16+16) mas su
	   borde (1+1). Con `content-box`, `height:100%` fija la altura del CONTENIDO a la de la fila y
	   el acolchado se suma encima: la tarjeta desborda su celda por exactamente lo que mide su
	   propio relleno. Con hueco de 10 entre filas, el solape era de 24px.

	   ⚠️ MISMA TRAMPA QUE mb1.499 —los chips de hora, 46 declarados y 66 pintados— cinco entregas
	   atras. Dos veces en una jornada no es descuido: es que esta hoja no declara `border-box` en
	   ninguna parte. Hay un caso que ahora lo vigila. */
	box-sizing:border-box;
	display:flex; flex-direction:column; align-items:flex-start; gap:9px;
	padding:16px; min-height:0; height:100%;
	border-radius:var(--cafati-r-md);
	background:linear-gradient(180deg, var(--cafati-papel) 0%, var(--cafati-marfil) 100%);
	border:1px solid color-mix(in srgb, var(--cafati-purpura) 16%, transparent);
	box-shadow:
		inset 0 1px 0 var(--cafati-papel),
		0 1px 2px rgba(2,62,50,.04),
		0 8px 18px -14px rgba(2,62,50,.24);
}
/* 🔴 LA CASILLA, EN SU ESQUINA Y SIN TOCAR NADA: 14px de los dos bordes. Sale del flujo para no
   robarle ancho al nombre, que era la otra mitad del problema. */
.cfbc-scope .cfbc-rv__extra-marca{
	position:absolute; top:14px; right:14px;
	width:22px; height:22px; border-radius:7px;
	border:1.5px solid color-mix(in srgb, var(--cafati-purpura) 34%, transparent);
	background:var(--cafati-papel);
}
.cfbc-scope .cfbc-rv__extra input:checked + .cfbc-rv__extra-marca{
	background:var(--cafati-purpura); border-color:var(--cafati-purpura);
}
.cfbc-scope .cfbc-rv__extra input:checked + .cfbc-rv__extra-marca::after{ font-size:13px }
/* El icono deja sitio a la casilla: nunca se meten el uno debajo del otro. */
.cfbc-scope .cfbc-rv__extra-i{ width:38px; height:38px; border-radius:11px; margin-bottom:1px }
/* El nombre ya tiene la tarjeta entera. Un pelo de aire a la derecha por si un nombre larguisimo
   llegara a la altura de la casilla. */
.cfbc-scope .cfbc-rv__extra-n{ font-size:15px; font-weight:700; line-height:1.3; padding-right:30px }
.cfbc-scope .cfbc-rv__extra-n small{ margin-top:4px; font-weight:500; line-height:1.45 }
/* Al fondo, siempre: asi los precios de una fila se alinean entre si. */
.cfbc-scope .cfbc-rv__extra-p{ margin-top:auto; font-size:16px; color:var(--cfbc-verde) }
/* Elegida: el purpura de marca como FILO, nunca como bano — misma doctrina que mb1.479. */
.cfbc-scope .cfbc-rv__extra:has(input:checked){
	border-color:color-mix(in srgb, var(--cafati-purpura) 62%, transparent);
	background:linear-gradient(180deg,
		var(--cafati-papel) 0%, var(--cafati-purpura-tenue) 100%);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--cafati-purpura) 34%, transparent),
		inset 0 1px 0 var(--cafati-papel),
		0 10px 22px -14px rgba(100,44,135,.34);
}
@media (hover:hover){
	.cfbc-scope .cfbc-rv__extra:hover{
		border-color:color-mix(in srgb, var(--cafati-purpura) 40%, transparent);
	}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.497] «O ELIGE TU LA HORA» · una bifurcacion, no un encabezado mas
 *
 * Direccion: «el titulo de esta seccion esta muy pegado con el boton arriba».
 *
 * Y lo que le faltaba no era margen a secas: es que ese rotulo dice «O» — separa DOS CAMINOS, el
 * boton verde de arriba y la agenda de abajo. Un separador necesita aire ARRIBA, que es de donde
 * se separa; ponerselo abajo solo lo aleja de lo que introduce.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.500] «O ELIGE TU LA HORA» ES UNA JUNTA, NO UN TITULAR
 *
 * Direccion: «el titulo tambien siento que esta como tirado ahi». Y era exacto: flotaba entre dos
 * bloques solidos sin pertenecer a ninguno, con una raya que salia por la derecha y se perdia. Una
 * raya que solo va a un lado no separa — se escapa.
 *
 * Ese rotulo empieza por «O»: dice que hay DOS CAMINOS y que el de arriba no es el unico. Su forma
 * canonica es el «o» centrado entre dos reglas: el ojo lee «alternativa» antes de leer la frase.
 * Y baja de 17px/750 a 14px/600 en tono tenue, porque no es un encabezado de seccion — es una
 * junta entre dos ofertas, y con peso de titular sonaba a error de maquetacion.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__pronto + .cfbc-rv__grupo{
	margin:30px 0 16px; justify-content:center; gap:14px;
	font-size:14px; font-weight:600; letter-spacing:.02em;
	color:var(--cafati-texto-tenue);
}
/* La regla del OTRO lado: sin ella la raya se escapa por la derecha en vez de cerrar. */
.cfbc-scope .cfbc-rv__pronto + .cfbc-rv__grupo::before{
	content:""; flex:1 1 auto; height:1px;
	background:color-mix(in srgb, var(--cafati-purpura) 22%, transparent);
}
.cfbc-scope .cfbc-rv__pronto + .cfbc-rv__grupo::after{
	background:color-mix(in srgb, var(--cafati-purpura) 22%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.500] HOY ES LA OFERTA · LOS DEMAS SON UN INDICE
 *
 * Las cuatro filas se pintaban identicas y solo las distinguia que la primera estuviera abierta.
 * Pero no son cuatro cosas del mismo rango: HOY es la respuesta a lo que el tutor acaba de pedir;
 * los demas son alternativas. Naturaleza distinta ⇒ FORMA distinta (guia §8.0·4).
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
/* Hoy conserva la placa y gana un filo verde arriba: en este portal el verde dice «esto es lo
   vigente», y aqui eso es literalmente cierto. */
.cfbc-scope .cfbc-rv__agenda{
	border-color:color-mix(in srgb, var(--cafati-verde) 16%, transparent);
	border-top:3px solid var(--cafati-verde-accion);
	box-shadow:0 1px 2px rgba(2,62,50,.04), 0 10px 24px -18px rgba(2,62,50,.28);
}
.cfbc-scope .cfbc-rv__agenda .cfbc-rv__dia-t{ color:var(--cfbc-verde) }

/* Los otros dias SALEN de la placa: sin fondo, en lista, con hairlines. Un indice no se presenta
   como una oferta — se presenta como un indice. */
.cfbc-scope .cfbc-rv__otros{ margin-top:18px }
.cfbc-scope .cfbc-rv__otros-t{
	margin:0 0 4px; font-size:13px; font-weight:700; letter-spacing:.1em;
	text-transform:uppercase; color:var(--cafati-texto-tenue);
}
.cfbc-scope .cfbc-rv__otros .cfbc-rv__dia-pleg{
	border-top:1px solid color-mix(in srgb, var(--cafati-verde) 12%, transparent);
	background:none;
}
.cfbc-scope .cfbc-rv__otros .cfbc-rv__dia-pleg summary{ padding:0 4px; min-height:48px }
/* Peso normal y tono tenue: son opciones, no titulares. */
.cfbc-scope .cfbc-rv__otros .cfbc-rv__dia-t{
	font-size:15px; font-weight:600; color:var(--cafati-texto-tenue);
}
/* Al abrir uno, ESE dia se vuelve vigente: recupera el verde y su peso. Asi el plegado no es solo
   un cambio de altura — es un cambio de estado, y se ve. */
.cfbc-scope .cfbc-rv__otros .cfbc-rv__dia-pleg[open] .cfbc-rv__dia-t{
	color:var(--cfbc-verde); font-weight:700;
}
.cfbc-scope .cfbc-rv__otros .cfbc-rv__dia-pleg > .cfbc-rv__horas{ padding:0 4px 16px }
@media (hover:hover){
	.cfbc-scope .cfbc-rv__otros .cfbc-rv__dia-pleg summary:hover .cfbc-rv__dia-t{
		color:var(--cfbc-verde);
	}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.497] LAS HORAS, EN CHIP MORADO
 *
 * Direccion: «verifica el formato y colores para los bloques de horario, seria bueno utilizar el
 * chip morado aca o variaciones».
 *
 * Eran cuadrados blancos de 76x50 con borde gris: leen como CASILLAS VACIAS, no como algo que se
 * pulsa. Y una hora sola dentro de una caja grande parece un error de datos.
 *
 * ⚠️ MEDIDO, Y MI PRIMERA CIFRA ESTABA MAL. Escribi aqui «el borde al 45% da 3,04» y al
 * comprobarlo daba **2,31**: no llegaba al 3:1 que WCAG 1.4.11 pide para el contorno de un
 * control. Un numero afirmado en un comentario y nunca medido es justo la clase de invariante
 * que este proyecto ya pago cara, asi que el borde sube al 62%, que es donde de verdad pasa:
 *   · cifra purpura sobre el chip ....... 8,51  (AA de sobra)
 *   · borde contra el papel ............. 3,41  (contorno ✓; el gris de antes daba 1,23)
 *   · …y contra su propio relleno ....... 3,27  (por el otro lado tambien ✓)
 *   · blanco sobre purpura al pulsar .... 9,33
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 [mb1.499] FILA QUE FLUYE, NO REJILLA. La rejilla `minmax(84px,1fr)` ESTIRABA cada hora a
   repartirse el ancho: una hora sola ocupaba 96px porque le tocaba el hueco entero, no porque lo
   necesitara. En flex ocupa lo que mide y se agrupan juntas, que ademas es como mejor se leen —
   una tira de horas, no un tablero de celdas. */
.cfbc-scope .cfbc-rv__horas{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start }
/* ⚠️ Este vivia de `grid-column: 1 / -1` para tener su propia fila; en un flex eso no existe y el
   enlace «ver mas horas» se colocaria en medio de la tira como si fuera otra hora. */
.cfbc-scope .cfbc-rv__mas{ flex:0 0 100%; margin-top:2px }
.cfbc-scope .cfbc-rv__hora{
	/* 🔴 [mb1.497b] `box-sizing:border-box`, y no es rutina: sin el, `min-height` mide solo el
	   CONTENIDO y el relleno mas el borde se suman encima — 46 declarados salian 66 pintados, y
	   con radio 999px eso deja de ser una pildora y pasa a ser un ovalo. */
	box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
	/* 🔴 38px REALES. Antes decia 46 y pintaba 66: `min-height` con `content-box` mide solo el
	   contenido y el relleno mas el borde se suman encima. */
	min-height:38px; height:38px; padding:0 13px; min-width:70px;
	/* Un radio suave, no completo: una hora es un DATO, y un dato en capsula redonda se lee
	   blando. Esquinas suaves se leen tabulares — que es lo que «formal» quiere decir aqui. */
	border-radius:10px;
	font-size:15px; font-weight:650; letter-spacing:.01em;
	color:var(--cafati-purpura);
	background:color-mix(in srgb, var(--cafati-purpura-suave) 55%, var(--cafati-papel));
	border:1.5px solid color-mix(in srgb, var(--cafati-purpura) 62%, transparent);
	box-shadow:0 1px 2px rgba(100,44,135,.06);
}
@media (hover:hover){
	.cfbc-scope .cfbc-rv__hora:hover{
		background:var(--cafati-purpura); color:var(--cafati-papel);
		border-color:var(--cafati-purpura);
		box-shadow:0 6px 16px -8px rgba(100,44,135,.55);
	}
}
.cfbc-scope .cfbc-rv__hora:focus-visible{
	background:var(--cafati-purpura); color:var(--cafati-papel);
	border-color:var(--cafati-purpura);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.501] EL RECINTO DEL ÚLTIMO PASO · y su botón
 *
 * Direccion pidio «naranjo llamativo, pero minimalista» y luego «o quizas en morado, pero con una
 * textura mejorada». El morado gana, y no por gusto:
 *   · un naranja llamativo (#E8622A) da **3,38** con blanco encima — no llega al 4,5 de un boton;
 *     oscurecerlo hasta que pase (#C94A16) deja de ser llamativo y pasa a ser ladrillo.
 *   · y el ambar/naranja esta RESERVADO para «pendiente · requiere atencion» (§3 de los tokens).
 *     El del ejemplo esta a 17° del ambar de las alertas: el boton que confirma y una advertencia
 *     quedarian casi del mismo color.
 * El purpura de marca da **9,33** y ademas cierra el hilo de la jornada — foco, chips de hora y
 * adicionales elegidos ya son morados. El paso 4 es el final de ese camino, no un color nuevo.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 [mb1.763] AQUI VIVIA EL RECINTO, Y AHORA VIVE DENTRO DE LA BARRA.
 *
 * Direccion: «que el telefono y el email sean parte del bloque donde esta el boton, que se vaya y
 * acompane a la pagina». El recinto morado quedaba treinta pixeles por debajo de una barra
 * `sticky`: el boton se veia desde el primer scroll y sus dos requisitos no.
 *
 * Sus reglas NO se quedan huerfanas esperando: una regla sin clase es deuda igual que una clase
 * sin regla, y el censo vigila las dos direcciones (mb1.495). Lo que sobrevive —el canto morado y
 * el rotulo en versalitas— se muda al modificador de la barra, aqui debajo. */
/* [mb1.769] EL ROTULO ES UN RENGLON, no una palabra: texto, filo y flecha. El filo es lo que
   convierte la flecha en una senal —una flecha suelta detras de una palabra se lee como puntuacion—
   y no cuesta alto porque vive en el renglon que ya estaba. */
.cfbc-scope .cfbc-rv__cierre-o{
	margin:0; font-size:13px; font-weight:700; letter-spacing:.12em;
	text-transform:uppercase; color:var(--cafati-purpura);
	display:flex; align-items:center; gap:10px;
}
/* 🔴 [mb1.767] AQUI ESTABA EL CANTO DE 3px, Y EL MARCO LO SUSTITUYE.
 *
 * El canto venia de mb1.501 con su porque escrito: «un recinto necesita una PARED, y una pared que
 * solo toca un lado no encierra — pero tampoco hace falta encerrar del todo para senalar». Eso
 * valia cuando la pieza estaba QUIETA entre dos bloques y solo habia que senalarla.
 *
 * Ahora flota por encima del resumen y hay que ENCERRARLA —Direccion: «un marco morado para que no
 * se confunda con el texto de atras»—. Un marco completo hace las dos cosas, asi que el canto pasa
 * a ser la misma frase dicha dos veces con dos formas. El marco vive abajo, con el resto del
 * vestido morado de esta barra. */
/* LAS DOS CASILLAS · en fila desde que caben, apiladas cuando no.
 *
 * 🔴 EL ANCHO DE CORTE ES 380px Y NO 480: la barra vive bajo el pulgar y cada renglon que suma le
 * roba pantalla al resumen que el tutor esta leyendo. Apiladas son ~144px; en dos columnas, ~72.
 * Por debajo de 380 no caben dos casillas legibles y se apilan sin discusion. */
/* 🔴 EL CORTE ESTA EN 360px, NO EN 380. Con las casillas apiladas la barra medía 307px en un
   iPhone de 375 —el 38% de la pantalla— y tapaba el resumen que el tutor está leyendo, que es la
   mitad de lo que vino a hacer aquí. En dos columnas baja a ~230px. El 380 dejaba fuera por CINCO
   pixeles justo al telefono mas vendido: un corte se elige por los aparatos que existen, no por
   redondear la cifra. Por debajo de 360 no caben dos casillas legibles y se apilan. */
.cfbc-scope .cfbc-rv__cierre-campos{ display:grid; gap:8px 10px; grid-template-columns:1fr }
@media (min-width:360px){
	.cfbc-scope .cfbc-rv__cierre-campos{ grid-template-columns:1fr 1fr }
}
/* Dentro de la barra los campos van mas apretados que en el cuerpo de la pagina —el aire de
   `--cafati-e-3` lo pone la barra con su `gap`— y sobre papel limpio. */
.cfbc-scope .cfbc-rv__cierre-campos .cfbc-rv__campo{ margin:0 }
.cfbc-scope .cfbc-rv__cierre-campos .cfbc-rv__campo label{ font-size:14px; margin-bottom:5px }
.cfbc-scope .cfbc-rv__cierre-campos .cfbc-rv__campo input{ background:var(--cafati-papel) }
/* ⚠️ EL ESCAPE · y SOLO para la barra del ultimo paso.
 *
 * Con rotulo, dos casillas, eco y boton esta barra mide 230px en dos columnas y 313px apilada. En
 * una pantalla corta —o estrecha, que es donde se apila— eso tapa el resumen que el tutor esta
 * intentando revisar, que es la mitad de lo que vino a hacer aqui. Ahi deja de flotar y se queda al
 * final del flujo: sigue siendo lo ultimo que se ve, sin robar sitio.
 *
 * 🔴 DOS UMBRALES, PORQUE HAY DOS ALTURAS. Por debajo de 360px las casillas se apilan y la barra
 * crece a 313; por encima van en fila y se queda en 230. Un solo umbral de alto dejaba flotando una
 * barra del 49% en un telefono de 320.
 *
 * ⚠️ Y NO se les quita a los pasos 1 y 2: sus barras no llevan casillas —eco y boton, ~100px— y
 * caben en cualquier telefono. Apagarles el flotado era cobrarles a ellas el problema de esta. */
@media (max-width:359px), (max-height:639px){
	.cfbc-scope .cfbc-rv__seguir--cierre{ position:static }
}
/* 🔴 [mb1.764] ESCRITORIO · ESTA BARRA NECESITA SU PROPIA MAQUETA.
 *
 * Desde mb1.483 la barra se vuelve una FILA a partir de 700px —«la eleccion a la izquierda, el
 * boton a la derecha, como un pie de caja»—. Esa forma es buena y se conserva para los pasos 1 y
 * 2, que tienen dos hijos. Esta tiene CUATRO, y en una fila salian las cinco piezas peleandose un
 * renglon: el boton encima del eco y las casillas encogidas a sesenta pixeles.
 *
 * Tres renglones: el rotulo, las casillas a lo ancho —que es lo que necesitan para leerse— y
 * abajo el pie de caja de siempre. La forma validada no se pierde: deja de ser la unica.
 *
 * ⚠️ `display:grid` gana a `flex-direction` sin tener que anularlo: en una rejilla esa propiedad
 * no significa nada. Se declara la maqueta nueva, no se pelea con la vieja. */
@media (min-width:700px){
	.cfbc-scope .cfbc-rv__seguir--cierre{
		display:grid; gap:10px 16px; align-items:center;
		grid-template-columns:minmax(0,1fr) auto;
		grid-template-areas:"rot rot" "campos campos" "eco cta";
		/* [mb1.767] Relleno parejo: el extra de la izquierda era el sitio del canto, y el canto
		   se fue con el marco. Un acolchado asimetrico sin nada que acolchar descentra la pieza. */
		padding:12px 16px 14px;
	}
	.cfbc-scope .cfbc-rv__seguir--cierre .cfbc-rv__cierre-o{ grid-area:rot }
	.cfbc-scope .cfbc-rv__seguir--cierre .cfbc-rv__cierre-campos{ grid-area:campos }
	.cfbc-scope .cfbc-rv__seguir--cierre .cfbc-rv__seguir-eco{ grid-area:eco }
	.cfbc-scope .cfbc-rv__seguir--cierre .cfbc-rv__cta{ grid-area:cta }
	/* Con sitio de sobra las casillas respiran: el corte de 360 era para el pulgar. */
	.cfbc-scope .cfbc-rv__seguir--cierre .cfbc-rv__cierre-campos{ gap:0 16px }
}

/* ══ EL BOTON DEL ULTIMO PASO ══════════════════════════════════════════════════════════════
 * 🔴 LA «TEXTURA MEJORADA» NO ES UN DEGRADADO, Y ES A PROPOSITO. El reflejo era una rampa de
 * purpura claro a oscuro; pero mb1.484 dejo escrito que un degradado solo vale si el salto entre
 * sus paradas es ≤ 1,25 —material, no decorativo— y una rampa de boton lo pasa de largo. Aflojar
 * esa regla tres dias despues de entregarla es justo lo que la doctrina prohibe.
 *
 * La profundidad viene de donde viene de verdad: LUZ ARRIBA, PESO ABAJO. Canto superior iluminado
 * por dentro, sombra interior en el pie, y una aureola del propio color por fuera. Eso es volumen,
 * no una rampa pintada — y encima no depende de que el navegador interpole bien dos paradas.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
/* [mb1.763] El gancho pasa del recinto —que ya no existe— al modificador de la barra. La regla es
   la misma de mb1.484 y sigue diciendo lo mismo: en el ULTIMO paso el boton es morado. */
.cfbc-scope .cfbc-rv__form:has(.cfbc-rv__seguir--cierre) .cfbc-rv__cta{
	background:var(--cafati-purpura); color:var(--cafati-papel);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 26%, transparent),
		inset 0 -2px 0 color-mix(in srgb, var(--cafati-logo-tinta) 16%, transparent),
		0 2px 4px rgba(100,44,135,.20),
		0 12px 28px -12px rgba(100,44,135,.55);
}
@media (hover:hover){
	.cfbc-scope .cfbc-rv__form:has(.cfbc-rv__seguir--cierre) .cfbc-rv__cta:hover{
		box-shadow:
			inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 32%, transparent),
			inset 0 -2px 0 color-mix(in srgb, var(--cafati-logo-tinta) 18%, transparent),
			0 3px 6px rgba(100,44,135,.24),
			0 18px 36px -12px rgba(100,44,135,.62);
	}
}
/* 🖼️ [mb1.767] EL MARCO MORADO · «que se vea bien enmarcado y profesional» (Direccion).
 *
 * Y la barra se tine del color de su boton: si el boton es morado y su barra sigue verde, la pieza
 * se lee partida en dos.
 *
 * 🔴 DOS PIXELES, NO CUATRO. «Poca superficie y mucha precision» (mb1.479): un marco grueso de
 * color de marca deja de leerse como encuadre y empieza a leerse como ALERTA — y aqui quien avisa
 * es el ambar y el rojo, nunca el morado (§8.0b).
 *
 * 🔴 Y LA AUREOLA ES LA MITAD DEL TRABAJO. El marco dice donde ACABA la pieza; la sombra dice que
 * esta POR ENCIMA. Sin ella un rectangulo con borde sobre un texto se lee como un recuadro
 * dibujado en la pagina, no como algo que flota — que es justo la confusion que Direccion vio.
 * Morada y no verde: la pieza entera es morada desde mb1.484.
 *
 * ⚠️ Se declara DESPUES de `--fijo` y con la misma especificidad, que es como se sustituye una
 * sombra entera: mezclar la verde de abajo con una morada nueva daria un halo sucio. */
.cfbc-scope .cfbc-rv__seguir--cierre{
	border-width:2px;
	border-color:color-mix(in srgb, var(--cafati-purpura) 46%, transparent);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 80%, transparent),
		0 -8px 26px -14px rgba(100,44,135,.26),
		0 16px 38px -16px rgba(100,44,135,.42);
}
.cfbc-scope .cfbc-rv__seguir--cierre .cfbc-rv__seguir-r{
	color:var(--cafati-purpura);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.504] LOS DISCOS DE ICONO MIDEN LO QUE DICEN
 *
 * Los seis siguen el mismo patron —cuadrado con relleno para encajar el dibujo— y con
 * `content-box` pintaban width + 2*relleno: un disco de 44 con 4 de acolchado salia de 52. No
 * rompia nada, pero la regla decia una cosa y la pantalla otra, y esa distancia es de donde
 * salieron los chips de 66px (mb1.499) y las tarjetas solapadas (mb1.504).
 *
 * Van juntos y al final a proposito: son un PATRON, no seis decisiones, y repartir la
 * declaracion por sus seis bloques seria seis sitios donde olvidarla la proxima vez.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__grupo-i,
.cfbc-scope .cfbc-rv__svc-i,
.cfbc-scope .cfbc-rv__packs-i,
.cfbc-scope .cfbc-rv__extra-i,
.cfbc-scope .cfbc-rv__op .cfbc-rv__icono,
.cfbc-scope .cfbc-rv__desp .cfbc-rv__svc-i{ box-sizing:border-box }


/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.505] EL CALENDARIO · ir a un dia concreto
 *
 * Direccion: «bien bonito, para que los tutores solo seleccionen del calendario una fecha y le
 * muestre solo esa disponibilidad».
 *
 * Va ARRIBA de la agenda y no debajo: es una PUERTA a los 21 dias del horizonte, y una puerta
 * detras de la lista se encuentra cuando ya te rendiste. En purpura, que en el embudo es el
 * color de lo que el tutor elige.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope .cfbc-rv__cal{
	/* 🔴 [mb1.507] EL MARGEN DE ATERRIZAJE. Al volver por el ancla, el navegador deja este bloque
	   pegado al borde de arriba — y ahi vive la cabecera del embudo, que lo taparia a medias y
	   pareceria otro fallo. 96px lo dejan justo debajo de ella, con aire. */
	scroll-margin-top:96px;
	box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
	margin:0 0 14px; padding:14px 16px; border-radius:var(--cafati-r-md);
	background:color-mix(in srgb, var(--cafati-purpura-suave) 30%, var(--cafati-papel));
	border:1px solid color-mix(in srgb, var(--cafati-purpura) 20%, transparent);
}
.cfbc-scope .cfbc-rv__cal-l{ font-size:14.5px; font-weight:700; color:var(--cfbc-verde) }
/* El campo y su boton van PEGADOS: son un gesto, no dos. */
.cfbc-scope .cfbc-rv__cal-c{ display:flex; align-items:center; gap:8px; margin-left:auto }
/* El nativo del sistema: trae el calendario del telefono, ya sabe el idioma y no pesa nada. */
.cfbc-scope .cfbc-rv__cal-i{
	box-sizing:border-box; height:40px; padding:0 10px; border-radius:10px;
	font:inherit; font-size:15px; color:var(--cfbc-texto);
	background:var(--cafati-papel);
	border:1px solid color-mix(in srgb, var(--cafati-purpura) 34%, transparent);
}
.cfbc-scope .cfbc-rv__cal-i:focus-visible{
	outline:none; box-shadow:var(--cafati-anillo-foco);
	border-color:color-mix(in srgb, var(--cafati-purpura) 62%, transparent);
}
.cfbc-scope .cfbc-rv__cal-b{
	box-sizing:border-box; height:40px; padding:0 16px; border-radius:10px; border:0;
	font:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
	background:var(--cafati-purpura); color:var(--cafati-papel);
	box-shadow:inset 0 1px 0 color-mix(in srgb, var(--cafati-papel) 22%, transparent),
		0 4px 12px -6px rgba(100,44,135,.55);
}
.cfbc-scope .cfbc-rv__cal-b:focus-visible{ outline:none; box-shadow:var(--cafati-anillo-foco) }
/* 🔴 Un dia sin horas SE DICE, y ocupa la fila entera para que no se lea como parte del campo.
   Dejar la pantalla en blanco seria la vitrina negando horas que existen — ya lo pagamos. */
.cfbc-scope .cfbc-rv__cal-no{
	flex:0 0 100%; margin:2px 0 0; font-size:13.5px; line-height:1.45;
	color:var(--cafati-atencion-texto);
}
@media (max-width:520px){
	.cfbc-scope .cfbc-rv__cal-c{ margin-left:0; width:100% }
	.cfbc-scope .cfbc-rv__cal-i{ flex:1 1 auto; min-width:0 }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.511] EL BOTÓN QUE ESTÁ TRABAJANDO
 *
 * Direccion: «que se vea que esta cargando (…) muchos tienen internet lento y se ponen a
 * reapretar y reapretar». El anillo gira; el boton no se apaga a gris, porque un boton gris se
 * lee como «no disponible» y aqui lo que pasa es lo contrario: esta ocupado CON LO SUYO.
 *
 * ⚠️ ES LA UNICA ANIMACION DEL EMBUDO, y esta permitida por lo mismo que las otras estan
 * prohibidas (§8.0): la regla es no animar donde alguien ESPERA algo importante. Aqui la espera
 * ES el mensaje — sin movimiento, «un momento» no se distingue de una pantalla colgada.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-scope button.is-cargando{
	position:relative; cursor:progress;
	/* Ni gris ni translucido: sigue siendo el mismo boton, ocupado. */
	opacity:1;
}
.cfbc-scope button.is-cargando::after{
	content:""; display:inline-block; vertical-align:-2px; margin-left:9px;
	width:15px; height:15px; border-radius:50%;
	border:2px solid color-mix(in srgb, currentColor 28%, transparent);
	border-top-color:currentColor;
	animation:cfbc-gira .7s linear infinite;
}
/* El boton de la HORA lleva el anillo SOLO, sin texto de espera: su texto es la hora elegida y
   sustituirla borraria de la pantalla justo lo que el tutor acaba de tocar. */
.cfbc-scope .cfbc-rv__hora.is-cargando::after{ margin-left:7px; width:13px; height:13px }
@keyframes cfbc-gira{ to{ transform:rotate(360deg) } }
/* Mientras uno trabaja, los demas se apagan: si el tutor puede pulsar otra cosa, va a hacerlo. */
.cfbc-scope .cfbc-rv__form.is-enviando button:not(.is-cargando){ opacity:.45; pointer-events:none }
/* [mb1.704] …y lo mismo en CUALQUIER formulario del sitio, no solo en el del embudo. La regla de
   arriba nombraba una clase concreta, así que un formulario nuevo nacía sin ella. */
.cfbc-scope form.is-enviando button:not(.is-cargando),
.cfbc-r form.is-enviando button:not(.is-cargando){ opacity:.45; pointer-events:none }

/* ══ [mb1.704] EL ENLACE QUE NAVEGA TAMBIEN CONTESTA AL TOQUE ═══════════════════════════════
 *
 * Direccion: «revisa los botones de las paginas que ya hemos creado, como las de cobertura,
 * inicio, disponibilidad y comunas». En esas paginas casi todo lo que se pulsa es un ENLACE, y un
 * enlace no se puede apagar: una navegacion no se cancela, y deshabilitarlo romperia el «atras».
 * Su unica senal posible es el anillo.
 *
 * `vertical-align` y no `position:absolute`: en el pie los enlaces son texto corrido, y un anillo
 * posicionado se saldria de su renglon. Asi acompana a la linea sin descolocarla. */
.cfbc-scope a.is-cargando,
.cfbc-r a.is-cargando{ cursor:progress }
.cfbc-scope a.is-cargando::after,
.cfbc-r a.is-cargando::after{
	content:""; display:inline-block; vertical-align:-2px; margin-left:8px;
	/* 🔴 `flex:0 0 auto` NO SOBRA. Casi todos estos botones son `display:flex`, y ahi el `::after`
	   es un ITEM: trae `flex-shrink:1` de fabrica y el navegador le quita ancho a lo unico que
	   puede ceder. Medido en produccion antes de esta linea: 10.09 x 14 px — un ovalo. `width` no
	   es un ancho en un flex, es una base que se encoge. En los contenedores que no son flex la
	   declaracion es inerte, asi que una sola regla sirve para los dos casos. */
	flex:0 0 auto;
	width:14px; height:14px; border-radius:50%;
	border:2px solid color-mix(in srgb, currentColor 28%, transparent);
	border-top-color:currentColor;
	animation:cfbc-gira .7s linear infinite;
}
/* La pagina de resena vive fuera de `.cfbc-scope` y sus botones se quedaban sin vestido. */
.cfbc-r button.is-cargando{ position:relative; cursor:progress; opacity:1 }
.cfbc-r button.is-cargando::after{
	content:""; display:inline-block; vertical-align:-2px; margin-left:9px;
	flex:0 0 auto;   /* item de flex: sin esto se aplasta, ver arriba */
	width:15px; height:15px; border-radius:50%;
	border:2px solid color-mix(in srgb, currentColor 28%, transparent);
	border-top-color:currentColor;
	animation:cfbc-gira .7s linear infinite;
}
@media (prefers-reduced-motion: reduce){
	.cfbc-scope a.is-cargando::after,
	.cfbc-r a.is-cargando::after,
	.cfbc-r button.is-cargando::after{ animation:none; border-top-color:transparent }
	.cfbc-scope a.is-cargando,
	.cfbc-r a.is-cargando,
	.cfbc-r button.is-cargando{ font-weight:800 }
}
/* ⚠️ Quien pidio menos movimiento no recibe un anillo girando — pero SI recibe la senal: el
   boton cambia de cursor y de peso, que es lo que hace falta para no volver a pulsar. */
@media (prefers-reduced-motion: reduce){
	.cfbc-scope button.is-cargando::after{ animation:none; border-top-color:transparent }
	.cfbc-scope button.is-cargando{ font-weight:800 }
}

/* 🔴 [mb1.542] EL SUELO DE TIPOGRAFÍA DE LOS CONTROLES DEL PANEL, AL FINAL DE LA HOJA.
 * Bajo 16px iOS hace zoom al enfocar y descoloca una reserva a medias. Va aquí —y no junto a
 * su bloque— porque estos controles nacen DENTRO de contenedores que ya declaran 14px para
 * sus rótulos, y en una cascada por orden la última palabra tiene que ser la del control.
 * Es la excepción, no la costumbre: el resto del vestido vive junto a su pieza. */
/* ⚠️ El teléfono y el correo entran aquí desde mb1.543: al ponerles su rótulo con clase propia,
 * esa regla quedó DESPUÉS con la misma especificidad y les bajaba el cuerpo a 14px. Con el
 * elemento nombrado (0,3,1) el suelo del control vuelve a mandar sobre el de su rótulo. */
.cfbc-scope .csl-holdbox input.csl-esp,.cfbc-scope .csl-holdbox input.csl-add,
.cfbc-scope .csl-holdbox input.csl-pet,.cfbc-scope .csl-holdbox textarea.csl-motivo,
.cfbc-scope .csl-holdbox input.csl-tel,.cfbc-scope .csl-holdbox input.csl-mail{font-size:16px}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.598] LA PÁGINA DE COBERTURA COMO LANDING · `cfbc-lp__*`
 *
 * Dirección: *«muchas veces llegan directamente desde el buscador y entran en una página donde
 * aparecen una serie de comunas y no entienden qué es»* · *«que sea una landing de llegada para
 * campañas»* · *«incluir el color morado más femenino»*.
 *
 * El reparto de color, que es lo que sostiene todo lo demás:
 *   VERDE   — la marca y la acción principal. Reservar es verde, como en todo el sitio.
 *   MORADO  — el acento humano: los pasos, el mapa, la vía alternativa (WhatsApp), el equipo.
 *             No compite con el verde porque nunca es la acción primaria; lo acompaña.
 *   ÁMBAR / ROJO — NO aparecen. Siguen siendo semánticos y una landing no tiene nada urgente.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Portada ─────────────────────────────────────────────────────────────────────────────── */
.cfbc-lp__cta{display:flex;flex-wrap:wrap;gap:var(--cafati-e-3);margin:var(--cafati-e-5) 0 0}
.cfbc-scope a.cfbc-lp__b1,.cfbc-scope a.cfbc-lp__b1:link,.cfbc-scope a.cfbc-lp__b1:visited{
	display:inline-flex;align-items:center;justify-content:center;min-height:52px;
	padding:0 var(--cafati-e-5);border-radius:var(--cafati-r-lg);
	background:var(--cafati-verde);color:var(--cafati-papel);
	font-size:17px;font-weight:800;text-decoration:none;box-shadow:var(--cafati-sombra-md)}
.cfbc-scope a.cfbc-lp__b1:hover{background:var(--cafati-verde-accion)}
.cfbc-scope a.cfbc-lp__b2,.cfbc-scope a.cfbc-lp__b2:link,.cfbc-scope a.cfbc-lp__b2:visited{
	display:inline-flex;align-items:center;justify-content:center;min-height:52px;
	padding:0 var(--cafati-e-4);border-radius:var(--cafati-r-lg);
	border:1.5px solid var(--cafati-purpura);background:var(--cafati-papel);
	color:var(--cafati-purpura);font-size:16px;font-weight:700;text-decoration:none}
.cfbc-scope a.cfbc-lp__b2:hover{background:var(--cafati-purpura-suave)}
/* 🔴 [mb1.949] La variante CLARA (borde y texto en papel) SOLO sobre la banda oscura de la TPLO. Sobre fondo claro
 * —el cierre de todas las páginas, «Dónde» de Servicios, el equipo de Nosotros— era blanco sobre marfil: invisible,
 * visto en la revisión de Chrome. Fuera de la banda, el botón es el contorno púrpura de siempre. */
.cfbc-scope .cfbc-tr__tplo a.cfbc-lp__b2--claro,.cfbc-scope .cfbc-tr__tplo a.cfbc-lp__b2--claro:link,
.cfbc-scope .cfbc-tr__tplo a.cfbc-lp__b2--claro:visited{border-color:var(--cafati-papel);
	background:transparent;color:var(--cafati-papel)}
.cfbc-scope .cfbc-tr__tplo a.cfbc-lp__b2--claro:hover{background:rgba(255,255,255,.12)}
.cfbc-lp__b1:focus-visible,.cfbc-lp__b2:focus-visible{
	outline:3px solid var(--cafati-purpura);outline-offset:3px}

/* Tres datos, no tres adjetivos. Cifra grande arriba, qué es debajo. */
/* ── [mb1.636] LAS CIFRAS DEL ALCANCE, EN UNA FILA ─────────────────────────────────────────────
 *
 * Dirección: *«en estas dos cartillas perdemos mucho espacio»*. Eran cuatro cajas en la columna
 * estrecha del mensaje: 2×2, con una de 104 px al lado de otra de 191 y 87 px de vacío que no
 * decía nada. 🔴 **Una caja vacía pesa lo mismo que una llena.**
 *
 * Tres cifras cortas no necesitan tres cajas: necesitan una línea. Y su sitio es este bloque, que
 * es de lo que hablan y tiene el ancho entero. Sin recuadros, separadas por una línea fina: la
 * cifra grande manda y el rótulo la nombra al lado. */
/* [mb1.666] Más aire debajo: las cifras contestan «cuánto» y los chips «dónde». Con el mismo
 * hueco entre las tres cosas se leían como una lista; separadas, como tres respuestas. */
.cfbc-lp__cifras{display:flex;flex-wrap:wrap;gap:var(--cafati-e-3) var(--cafati-e-5);
	margin:0 0 var(--cafati-e-5);padding:0 0 var(--cafati-e-4);list-style:none;
	border-bottom:1px solid var(--cafati-linea)}
.cfbc-lp__cifras li{display:flex;align-items:baseline;gap:var(--cafati-e-2);min-width:0}
.cfbc-lp__cifras strong{font-size:26px;font-weight:800;line-height:1;color:var(--cafati-verde);
	font-variant-numeric:tabular-nums;font-feature-settings:var(--cafati-tabular)}
.cfbc-lp__cifras span{font-size:14px;line-height:1.35;color:var(--cafati-texto-tenue)}
/* ── [mb1.643] «BUSCAR CERCA MÍO» ──────────────────────────────────────────────────────────────
 *
 * El botón lo pinta el guion; aquí solo se le da forma. Va PERFILADO y no relleno: es una ayuda
 * para encontrar, no la acción que cierra —esa es «Agendar ahora» y no puede tener competencia
 * del mismo peso en la misma pantalla. */
.cfbc-cerca{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cafati-e-3);
	margin:0 0 var(--cafati-e-4)}
.cfbc-scope .cfbc-cerca__b{display:inline-flex;align-items:center;gap:var(--cafati-e-2);
	min-height:44px;padding:0 var(--cafati-e-4);border-radius:999px;
	background:var(--cafati-purpura-tenue);color:var(--cafati-purpura);
	border:1.5px solid color-mix(in srgb, var(--cafati-purpura) 42%, var(--cafati-papel));
	font-size:14.5px;font-weight:800;cursor:pointer;
	transition:background .16s ease,color .16s ease,border-color .16s ease}
.cfbc-scope .cfbc-cerca__b:hover,.cfbc-scope .cfbc-cerca__b:focus-visible{
	background:var(--cafati-purpura);color:var(--cafati-papel);border-color:var(--cafati-purpura)}
.cfbc-scope .cfbc-cerca__b:disabled{opacity:.6;cursor:progress}
.cfbc-cerca__b:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-cerca__i{font-size:16px;line-height:1}
.cfbc-cerca__r{margin:0;font-size:14.5px;line-height:1.5;color:var(--cafati-texto-tenue)}
.cfbc-cerca__r.is-ok{color:var(--cafati-grafito)}
.cfbc-cerca__r b{color:var(--cafati-purpura)}
.cfbc-scope .cfbc-cerca__r a{color:var(--cafati-purpura);font-weight:800}
/* «Dijiste que no» no es un error, así que no se pinta como uno: mismo tono que el resto. */
.cfbc-cerca__r.is-no{color:var(--cafati-texto-tenue)}

/* La comuna encontrada se SEÑALA en la lista, que es donde la persona mira después. Halo y peso,
 * sin animación: destacar con movimiento en una lista que alguien está leyendo la vuelve inquieta. */
.cfbc-mapa__ley li.is-cerca .cfbc-mapa__c{
	border-color:var(--cafati-purpura);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--cafati-purpura) 22%, transparent)}
/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.646–647] EL HOME · `/inicio/`
 *
 * Casi todo lo hereda de la cobertura: los bloques son los mismos y ya tienen su hoja. Lo propio
 * es el ARRANQUE DEL EMBUDO, que es la pieza que decide si esta portada convierte.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* 🔴 LA BANDEJA DEL ARRANQUE. Lo primero que se ve y lo primero que se toca, así que tiene relieve
 * propio y ocupa el ancho entero. Dentro no hay nada más que las dos preguntas y el botón: **una
 * caja donde solo se puede hacer una cosa no necesita explicar cuál.** */
.cfbc-arr{margin:var(--cafati-e-5) 0 0;padding:var(--cafati-e-5);
	border-radius:var(--cafati-r-lg);background:var(--cafati-papel);
	border:1px solid var(--cafati-purpura-suave);box-shadow:var(--cafati-sombra-md)}
.cfbc-arr__t{margin:0 0 var(--cafati-e-4);font-size:13px;font-weight:800;letter-spacing:.08em;
	text-transform:uppercase;color:var(--cafati-purpura)}
.cfbc-arr__campos{display:grid;gap:var(--cafati-e-3)}
.cfbc-arr__c{display:flex;flex-direction:column;gap:var(--cafati-e-2);min-width:0}
.cfbc-arr__c > span{font-size:14px;font-weight:700;color:var(--cafati-grafito)}
/* El selector, con la misma altura que un botón: es un control y se toca como uno. La flecha va
 * dibujada aquí y no por el sistema, para que en los tres navegadores se vea igual. */
.cfbc-scope .cfbc-arr__c select{-webkit-appearance:none;appearance:none;
	width:100%;min-height:52px;padding:0 44px 0 var(--cafati-e-3);
	border-radius:var(--cafati-r-md);border:1.5px solid var(--cafati-linea);
	background-color:var(--cafati-papel);color:var(--cafati-grafito);
	font-size:16px;font-weight:600;line-height:1.3;cursor:pointer;
	background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
		linear-gradient(135deg,currentColor 50%,transparent 50%);
	background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;
	background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.cfbc-scope .cfbc-arr__c select:focus-visible{outline:3px solid var(--cafati-purpura);
	outline-offset:2px;border-color:var(--cafati-purpura)}
/* ⚠️ 16px en el selector NO es una preferencia de tamaño: por debajo de 16 los navegadores de
 * iPhone hacen zoom al enfocarlo y descolocan la página entera en mitad del primer paso. */
.cfbc-scope .cfbc-arr__b{display:inline-flex;align-items:center;justify-content:center;
	min-height:52px;padding:0 var(--cafati-e-5);border:0;border-radius:999px;
	background:var(--cafati-verde);color:var(--cafati-papel);
	font-size:16px;font-weight:800;cursor:pointer;
	transition:background .16s ease,transform .16s ease}
.cfbc-scope .cfbc-arr__b:hover{background:var(--cafati-verde-accion,var(--cafati-purpura));
	transform:translateY(-1px)}
.cfbc-arr__b:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}
.cfbc-arr__n{margin:var(--cafati-e-3) 0 0;max-width:62ch;font-size:14px;line-height:1.6;
	color:var(--cafati-texto-tenue)}

/* Las razones para reservar van DESPUÉS del acto de reservar: precio y hora en una fila, sin caja,
 * porque la caja de esta pantalla ya es la del arranque y dos cajas compiten. */
.cfbc-home__cintas{display:flex;flex-wrap:wrap;align-items:center;
	gap:var(--cafati-e-3) var(--cafati-e-5);margin:var(--cafati-e-4) 0 0}
.cfbc-home__cintas .cfbc-lp__precio{margin:0}
.cfbc-home__cintas .cfbc-lp__vivo{margin:0}
.cfbc-home__conf{margin:var(--cafati-e-4) 0 0}

/* La cobertura del home es un RESUMEN con salida: el detalle vive en su página y duplicarlo
 * partiría en dos la autoridad de esa consulta. */
.cfbc-home__chips{margin:var(--cafati-e-4) 0 0}
.cfbc-home__mas{margin:var(--cafati-e-4) 0 0}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   LA PORTADA · `/portada/` [mb1.903]
   Lo que añade sobre la cobertura. Reusa cfbc-arr, cfbc-lp__h1/eyebrow/bajada/pulso/chip/alcb,
   cfbc-conf y cfbc-ps: una sola pastilla de precio, un solo chip de comuna, una sola franja.
   Tokens siempre; nada bajo 13px; 44px táctiles; móvil primero.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-pt__hero{position:relative;padding:var(--cafati-e-5) var(--cafati-e-4) var(--cafati-e-4);margin:0 calc(-1 * var(--cafati-e-4));border-radius:0 0 var(--cafati-r-lg) var(--cafati-r-lg);background:linear-gradient(180deg,var(--cafati-purpura-tenue) 0%,var(--cafati-purpura-suave) 55%,transparent 100%)}
.cfbc-pt__hero-in{display:grid;gap:var(--cafati-e-5);align-items:start}
.cfbc-pt__hero-txt{min-width:0}
.cfbc-pt__h1{margin-top:var(--cafati-e-2)}
.cfbc-pt__hechos{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--cafati-e-2) var(--cafati-e-4)}
.cfbc-pt__hechos li{font-size:14px;line-height:1.45;color:var(--cafati-texto-tenue);padding-left:18px;position:relative}
.cfbc-pt__hechos li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--cafati-purpura)}
.cfbc-pt__hechos b{display:block;font-size:15px;color:var(--cafati-grafito)}
.cfbc-pt__arr{margin-top:var(--cafati-e-5)}
.cfbc-pt__hero-vis{position:relative;min-width:0}
.cfbc-pt__foto{position:relative;margin:0 0 var(--cafati-e-6);border-radius:var(--cafati-r-lg);box-shadow:var(--cafati-sombra-lg);background:var(--cafati-purpura-suave)}
.cfbc-pt__img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:var(--cafati-r-lg)}
.cfbc-pt__vivo{position:absolute;left:var(--cafati-e-3);right:var(--cafati-e-3);bottom:calc(-1 * var(--cafati-e-5));margin:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:var(--cafati-e-2);align-items:center;padding:var(--cafati-e-3) var(--cafati-e-4);border-radius:var(--cafati-r-md);background:var(--cafati-papel);box-shadow:var(--cafati-sombra-md);border-left:4px solid var(--cafati-purpura)}
.cfbc-pt__vivo .cfbc-lp__pulso{grid-row:1/3;align-self:center}
.cfbc-pt__vivo-t{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cafati-purpura)}
.cfbc-pt__vivo strong{font-family:var(--cafati-fuente-ed);font-size:22px;line-height:1.1;color:var(--cafati-grafito);font-variant-numeric:var(--cafati-tabular)}
.cfbc-pt__vivo-d{grid-column:2;font-size:14px;color:var(--cafati-texto-tenue)}
.cfbc-pt__ps{margin-top:var(--cafati-e-3);display:flex;justify-content:center}
/* [mb1.906] La prueba social nació para la franja verde (texto papel). Sobre el hero lila era
   invisible: aquí habla en tinta y la escala de estrellas en línea; el oro se queda. */
.cfbc-scope .cfbc-pt__ps .cfbc-ps,.cfbc-scope .cfbc-pt__ps a.cfbc-ps{color:var(--cafati-grafito);text-decoration:none}
.cfbc-scope .cfbc-pt__ps .cfbc-ps__d{color:var(--cafati-texto-tenue)}
.cfbc-scope .cfbc-pt__ps .cfbc-ps__es-b{color:var(--cafati-linea)}
.cfbc-scope .cfbc-pt__ps a.cfbc-ps:hover .cfbc-ps__d,.cfbc-scope .cfbc-pt__ps a.cfbc-ps:focus-visible .cfbc-ps__d{color:var(--cafati-purpura)}
.cfbc-pt__conf{margin-top:var(--cafati-e-5)}
.cfbc-pt__cuando{padding:var(--cafati-e-5) var(--cafati-e-4);margin-left:calc(-1 * var(--cafati-e-4));margin-right:calc(-1 * var(--cafati-e-4));border-radius:var(--cafati-r-lg);background:var(--cafati-purpura-tenue)}
.cfbc-pt__cuando .cfbc-lp__intro{max-width:70ch}
.cfbc-pt__casos{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-4)}
.cfbc-pt__caso{background:var(--cafati-papel);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-lg);overflow:hidden;box-shadow:var(--cafati-sombra-sm)}
.cfbc-pt__caso-f{margin:0;background:var(--cafati-menta-tenue)}
/* [mb1.917] La proporción y el recorte van en la IMG y con prefijo: `.cfbc-scope img{height:auto}`
   le ganaba al `height:100%` de antes y cada foto salía con su alto natural (desalineadas). */
.cfbc-scope .cfbc-pt__caso-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center}
.cfbc-pt__caso-txt{min-width:0}
.cfbc-pt__caso{border-color:var(--cafati-purpura-linea)}
.cfbc-pt__caso-t{margin:0;font-family:var(--cafati-fuente-ed);font-size:20px;line-height:1.2;color:var(--cafati-purpura-hondo)}
.cfbc-pt__caso-p{margin:var(--cafati-e-2) 0 0;font-size:15px;line-height:1.55;color:var(--cafati-texto-tenue)}
.cfbc-pt__nota{margin:var(--cafati-e-4) 0 0;padding:var(--cafati-e-3) var(--cafati-e-4);border-left:3px solid var(--cafati-distincion);background:var(--cafati-papel);border-radius:0 var(--cafati-r-sm) var(--cafati-r-sm) 0;font-size:14px;line-height:1.55;color:var(--cafati-texto-tenue)}
.cfbc-pt__nota a{color:var(--cafati-purpura);font-weight:600}
.cfbc-pt__chip small{display:block;font-size:13px;font-weight:500;color:var(--cafati-texto-tenue);font-variant-numeric:var(--cafati-tabular)}
.cfbc-pt__cob .cfbc-lp__intro{max-width:70ch}

/* ══ EL FLOTANTE DE WHATSAPP [mb1.908] · una pieza para las siete superficies ══
   Móvil: círculo de 48px sin texto, y se OCULTA donde ya hay barra fija (que lleva WhatsApp).
   Escritorio (≥760, donde la barra desaparece): pastilla con ícono y palabra. */
.cfbc-scope .cfbc-wa{position:fixed;right:var(--cafati-e-3);bottom:calc(var(--cafati-e-3) + env(safe-area-inset-bottom,0px));z-index:41;display:inline-flex;align-items:center;justify-content:center;gap:var(--cafati-e-2);width:48px;height:48px;border-radius:999px;background:var(--cafati-verde-accion);color:var(--cafati-papel);box-shadow:var(--cafati-sombra-verde);text-decoration:none;font-weight:700;font-size:15px;line-height:1;transition:background .16s ease,transform .16s ease}
.cfbc-scope .cfbc-wa:hover,.cfbc-scope .cfbc-wa:focus-visible{background:var(--cafati-verde);transform:translateY(-1px)}
.cfbc-scope .cfbc-wa:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}
.cfbc-scope .cfbc-wa__i{width:24px;height:24px;fill:currentColor;flex:none}
.cfbc-scope .cfbc-wa__t{display:none}
.cfbc-scope:has(.cfbc-lp__barra) .cfbc-wa{display:none}
@media (min-width:760px){
  .cfbc-scope .cfbc-wa{width:auto;height:56px;padding:0 var(--cafati-e-4) 0 var(--cafati-e-3);right:var(--cafati-e-4);bottom:var(--cafati-e-4)}
  .cfbc-scope .cfbc-wa__i{width:26px;height:26px}
  .cfbc-scope .cfbc-wa__t{display:inline}
  .cfbc-scope:has(.cfbc-lp__barra) .cfbc-wa{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){.cfbc-scope .cfbc-wa{transition:none}}

/* ══ TRABAJA CON CAFATI · `/trabaja-con-cafati/` [mb1.909] · élite, femenino, púrpura ══
   El hero abre en lila y baja a papel; la distinción (dorado) solo en el sello de la foto. Los rasgos
   son cuatro tarjetas iguales (no son una secuencia: sin números); los pasos sí llevan número. */
.cfbc-tj__hero{background:linear-gradient(180deg,var(--cafati-purpura-tenue) 0%,var(--cafati-papel) 100%);padding:var(--cafati-e-5) 0 var(--cafati-e-6);border-bottom:1px solid var(--cafati-purpura-linea)}
.cfbc-tj__hero-in{display:grid;gap:var(--cafati-e-5);align-items:center}
.cfbc-tj__hero-txt{min-width:0}
.cfbc-tj__eyebrow{color:var(--cafati-purpura);letter-spacing:.08em}
.cfbc-tj__h1{font-family:var(--cafati-fuente-ed);font-weight:600;font-size:clamp(30px,6vw,52px);line-height:1.08;color:var(--cafati-verde);margin:var(--cafati-e-2) 0 var(--cafati-e-3);text-wrap:balance}
.cfbc-tj__h1 em{font-style:normal;color:var(--cafati-purpura)}
.cfbc-tj__bajada{font-size:17px;line-height:1.65;color:var(--cafati-grafito);max-width:62ch;margin:0 0 var(--cafati-e-4)}
.cfbc-tj__hechos{list-style:none;margin:0 0 var(--cafati-e-4);padding:0;display:grid;gap:var(--cafati-e-2)}
.cfbc-tj__hechos li{position:relative;padding-left:var(--cafati-e-4);font-size:15px;line-height:1.5}
.cfbc-tj__hechos li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:999px;background:var(--cafati-purpura)}
.cfbc-tj__hechos strong{display:block;color:var(--cafati-verde);font-weight:700}
.cfbc-tj__hechos span{color:var(--cafati-texto-tenue)}
.cfbc-tj__cta{display:flex;flex-wrap:wrap;gap:var(--cafati-e-2)}
.cfbc-scope .cfbc-tj__b1,.cfbc-scope .cfbc-tj__b2{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
/* [mb1.911] La sombra y el fondo van en la FIGURA; la imagen solo lleva su proporción y su radio.
   Con la sombra sobre la propia <img> el marco salía vacío y la captura congelaba el renderizador. */
.cfbc-tj__hero-vis{margin:0;position:relative;border-radius:var(--cafati-r-lg);box-shadow:var(--cafati-sombra-lg);background:var(--cafati-purpura-suave)}
.cfbc-tj__foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:var(--cafati-r-lg)}
.cfbc-tj__sello{position:absolute;left:var(--cafati-e-3);right:var(--cafati-e-3);bottom:var(--cafati-e-3);background:var(--cafati-papel);border-radius:var(--cafati-r-md);padding:var(--cafati-e-2) var(--cafati-e-3);box-shadow:var(--cafati-sombra-md);border-left:4px solid var(--cafati-distincion)}
.cfbc-tj__sello-k{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cafati-purpura);font-weight:700}
.cfbc-tj__sello-t{display:block;font-family:var(--cafati-fuente-ed);font-size:17px;color:var(--cafati-verde);line-height:1.3}
.cfbc-tj__rasgos{background:var(--cafati-papel)}
.cfbc-tj__rgrid{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-tj__rasgo{background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-top:4px solid var(--cafati-purpura);border-radius:var(--cafati-r-md)}
.cfbc-tj__rasgo h3{font-family:var(--cafati-fuente-ed);font-size:21px;color:var(--cafati-purpura-hondo);margin:0 0 var(--cafati-e-2)}
.cfbc-tj__rasgo p{margin:0;font-size:15px;line-height:1.65;color:var(--cafati-grafito)}
.cfbc-tj__como{background:var(--cafati-purpura-tenue)}
.cfbc-tj__pasos{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-tj__paso{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--cafati-e-3);align-items:start;background:var(--cafati-papel);border-radius:var(--cafati-r-md);box-shadow:var(--cafati-sombra-sm)}
.cfbc-tj__paso h3{font-size:18px;margin:0 0 6px;color:var(--cafati-verde)}
.cfbc-tj__paso p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-tj__num{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--cafati-purpura);color:var(--cafati-papel);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.cfbc-tj__listas{background:var(--cafati-papel)}
.cfbc-tj__dos{display:grid;gap:var(--cafati-e-3);margin-top:var(--cafati-e-4)}
.cfbc-tj__lista{border-radius:var(--cafati-r-md);padding:var(--cafati-e-4);border:1px solid var(--cafati-linea)}
.cfbc-tj__lista h3{font-family:var(--cafati-fuente-ed);font-size:22px;margin:0 0 var(--cafati-e-3)}
.cfbc-tj__lista ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--cafati-e-2)}
.cfbc-tj__lista li{position:relative;padding-left:var(--cafati-e-4);font-size:15px;line-height:1.55;color:var(--cafati-grafito)}
.cfbc-tj__lista li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:3px}
.cfbc-tj__lista--pide{background:var(--cafati-marfil)}
.cfbc-tj__lista--pide h3{color:var(--cafati-verde)}
.cfbc-tj__lista--pide li::before{background:var(--cafati-verde-suave)}
.cfbc-tj__lista--da{background:var(--cafati-purpura-suave)}
.cfbc-tj__lista--da h3{color:var(--cafati-purpura-hondo)}
.cfbc-tj__lista--da li::before{background:var(--cafati-purpura)}
.cfbc-tj__hist{background:var(--cafati-menta-tenue)}
.cfbc-tj__hist-in{display:grid;gap:var(--cafati-e-4);align-items:center}
.cfbc-tj__hist-txt p{font-size:16px;line-height:1.7;color:var(--cafati-grafito);max-width:62ch}
.cfbc-tj__enlace{display:inline-flex;align-items:center;min-height:44px;color:var(--cafati-verde-accion);font-weight:700;text-decoration:none;border-bottom:2px solid var(--cafati-verde-accion)}
.cfbc-tj__enlace:hover,.cfbc-tj__enlace:focus-visible{color:var(--cafati-verde)}
.cfbc-tj__hist-vis{margin:0;border-radius:var(--cafati-r-lg);box-shadow:var(--cafati-sombra-md);background:var(--cafati-purpura-suave)}
.cfbc-tj__hist-foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:var(--cafati-r-lg)}
.cfbc-tj__post{background:var(--cafati-papel)}
.cfbc-tj__post-in{display:grid;gap:var(--cafati-e-4)}
.cfbc-tj__post-txt{min-width:0}
.cfbc-tj__post-pasos{list-style:none;margin:var(--cafati-e-3) 0 0;padding:0;display:grid;gap:var(--cafati-e-2);counter-reset:tj}
.cfbc-tj__post-pasos li{counter-increment:tj;position:relative;padding-left:var(--cafati-e-5);font-size:15px;line-height:1.5;color:var(--cafati-grafito)}
.cfbc-tj__post-pasos li::before{content:counter(tj);position:absolute;left:0;top:-2px;width:26px;height:26px;border-radius:999px;background:var(--cafati-purpura-suave);color:var(--cafati-purpura-hondo);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.cfbc-tj__form{background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-lg);padding:var(--cafati-e-4);box-shadow:var(--cafati-sombra-sm)}
.cfbc-tj__aviso{background:var(--cafati-purpura-suave);border-left:4px solid var(--cafati-purpura);border-radius:var(--cafati-r-sm);padding:var(--cafati-e-2) var(--cafati-e-3);margin:0 0 var(--cafati-e-3)}
.cfbc-tj__aviso p{margin:0;font-size:15px;color:var(--cafati-purpura-hondo);font-weight:600}
.cfbc-tj__trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cfbc-tj__fila{display:grid;gap:0 var(--cafati-e-3)}
.cfbc-tj__campo{min-width:0}
.cfbc-tj__campo.is-falta input,.cfbc-tj__campo.is-falta textarea{border-color:var(--cafati-purpura);box-shadow:0 0 0 3px var(--cafati-purpura-suave)}
.cfbc-tj__falta{display:block;margin-top:5px;font-size:13.5px;color:var(--cafati-purpura-hondo);font-weight:600}
.cfbc-tj__ayuda{display:block;margin-top:5px;font-size:13.5px;color:var(--cafati-texto-tenue)}
.cfbc-tj__acepta{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--cafati-e-2);align-items:start;margin:var(--cafati-e-2) 0 var(--cafati-e-3);font-size:14.5px;line-height:1.5;color:var(--cafati-grafito)}
.cfbc-tj__acepta input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--cafati-purpura)}
.cfbc-tj__acepta .cfbc-tj__falta{grid-column:2}
.cfbc-tj__acepta.is-falta span{color:var(--cafati-purpura-hondo)}
/* [mb1.918] El campo del currículum: una caja punteada y un botón-pastilla, del mismo idioma del formulario. */
.cfbc-tj__campo--archivo input[type=file]{display:block;width:100%;min-height:48px;padding:10px 12px;background:var(--cafati-papel);border:1px dashed var(--cafati-purpura-linea);border-radius:var(--cafati-r-sm);font-size:14.5px;color:var(--cafati-grafito)}
.cfbc-tj__campo--archivo input[type=file]::file-selector-button{margin-right:var(--cafati-e-2);padding:8px 14px;border:0;border-radius:999px;background:var(--cafati-purpura-suave);color:var(--cafati-purpura-hondo);font-weight:700;font-size:14px;cursor:pointer}
.cfbc-tj__campo--archivo input[type=file]:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-scope .cfbc-tj__enviar{min-height:52px;width:100%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:0;cursor:pointer}
.cfbc-tj__pie{margin:var(--cafati-e-2) 0 0;font-size:13px;color:var(--cafati-texto-tenue);text-align:center}
.cfbc-tj__gracias{background:var(--cafati-purpura-tenue);border:1px solid var(--cafati-purpura-linea);border-radius:var(--cafati-r-lg);padding:var(--cafati-e-5) var(--cafati-e-4);text-align:center;max-width:64ch;margin:0 auto}
.cfbc-tj__gracias p{font-size:16px;line-height:1.65;color:var(--cafati-grafito)}
.cfbc-tj__faq{background:var(--cafati-papel)}
@media (min-width:720px){
  .cfbc-tj__fila--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cfbc-tj__rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-tj__dos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .cfbc-tj__hero{padding-top:var(--cafati-e-6)}
  .cfbc-tj__hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--cafati-e-7)}
  .cfbc-tj__rgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cfbc-tj__pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-tj__hist-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--cafati-e-6)}
  .cfbc-tj__post-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--cafati-e-6);align-items:start}
  .cfbc-scope .cfbc-tj__enviar{width:auto;min-width:260px}
}
/* ══ FIN TRABAJA ══ */

/* ══ EUTANASIA A DOMICILIO · `/eutanasia-a-domicilio/` [mb1.909] · el marco de sensibilidad ══
   Púrpura tenue de fondo, sin ámbar ni rojo, sin verde de acción, sin animación: la página se
   distingue de las demás ANTES de leerse. Nada empuja; las dos puertas están y no gritan. */
.cfbc-eu__hero{background:var(--cafati-purpura-tenue);padding:var(--cafati-e-5) 0 var(--cafati-e-6);border-bottom:1px solid var(--cafati-purpura-linea)}
.cfbc-eu__hero-in{display:grid;gap:var(--cafati-e-5);align-items:start}
.cfbc-eu__hero-txt{min-width:0}
.cfbc-eu__eyebrow{color:var(--cafati-purpura)}
.cfbc-eu__h1{font-family:var(--cafati-fuente-ed);font-weight:500;font-size:clamp(28px,5.2vw,44px);line-height:1.15;color:var(--cafati-purpura-hondo);margin:var(--cafati-e-2) 0 var(--cafati-e-3);text-wrap:balance}
.cfbc-eu__bajada{font-size:17px;line-height:1.7;color:var(--cafati-grafito);max-width:62ch;margin:0 0 var(--cafati-e-4)}
.cfbc-eu__hechos{list-style:none;margin:0;padding:0;display:grid;gap:var(--cafati-e-2)}
.cfbc-eu__hechos li{position:relative;padding-left:var(--cafati-e-4);font-size:15px;line-height:1.5}
.cfbc-eu__hechos li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:999px;background:var(--cafati-purpura-media)}
.cfbc-eu__hechos strong{display:block;color:var(--cafati-purpura-hondo)}
.cfbc-eu__hechos span{color:var(--cafati-texto-tenue)}
.cfbc-eu__puertas{background:var(--cafati-papel);border:1px solid var(--cafati-purpura-linea);border-radius:var(--cafati-r-lg);padding:var(--cafati-e-4);box-shadow:var(--cafati-sombra-morada);display:grid;gap:var(--cafati-e-2)}
.cfbc-eu__puertas-t{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cafati-purpura);font-weight:700}
.cfbc-eu__puertas-d{margin:0 0 var(--cafati-e-2);font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-eu__puertas-n{margin:var(--cafati-e-2) 0 0;font-size:13.5px;line-height:1.5;color:var(--cafati-texto-tenue)}
.cfbc-scope .cfbc-eu__b1,.cfbc-scope .cfbc-eu__b2,.cfbc-scope .cfbc-eu__b3{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 var(--cafati-e-4);border-radius:999px;font-weight:700;font-size:15.5px;text-decoration:none;transition:background .16s ease,color .16s ease}
.cfbc-scope .cfbc-eu__b1{background:var(--cafati-purpura);color:var(--cafati-papel)}
.cfbc-scope .cfbc-eu__b1:hover,.cfbc-scope .cfbc-eu__b1:focus-visible{background:var(--cafati-purpura-hondo);color:var(--cafati-papel)}
.cfbc-scope .cfbc-eu__b2{background:var(--cafati-papel);color:var(--cafati-purpura-hondo);border:1.5px solid var(--cafati-purpura)}
.cfbc-scope .cfbc-eu__b2:hover,.cfbc-scope .cfbc-eu__b2:focus-visible{background:var(--cafati-purpura-suave);color:var(--cafati-purpura-hondo)}
.cfbc-scope .cfbc-eu__b3{background:transparent;color:var(--cafati-purpura-hondo);text-decoration:underline;text-underline-offset:3px;padding:0 var(--cafati-e-2)}
.cfbc-scope .cfbc-eu__b1:focus-visible,.cfbc-scope .cfbc-eu__b2:focus-visible,.cfbc-scope .cfbc-eu__b3:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}
.cfbc-eu__sec{background:var(--cafati-papel)}
.cfbc-eu__texto p{font-size:16.5px;line-height:1.75;color:var(--cafati-grafito);max-width:66ch}
.cfbc-eu__texto p strong{color:var(--cafati-purpura-hondo)}
.cfbc-eu__cuando{background:var(--cafati-marfil)}
.cfbc-eu__senales{list-style:none;margin:var(--cafati-e-4) 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-eu__senal{background:var(--cafati-papel);border:1px solid var(--cafati-linea);border-left:4px solid var(--cafati-purpura-media);border-radius:var(--cafati-r-md)}
.cfbc-eu__senal h3{font-size:17px;margin:0 0 6px;color:var(--cafati-purpura-hondo)}
.cfbc-eu__senal p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-eu__nota{background:var(--cafati-purpura-suave);border-radius:var(--cafati-r-md);padding:var(--cafati-e-3) var(--cafati-e-4);max-width:72ch}
.cfbc-eu__nota p{margin:0;font-size:15.5px;line-height:1.7;color:var(--cafati-grafito)}
.cfbc-eu__nota strong{color:var(--cafati-purpura-hondo)}
.cfbc-eu__nota a{color:var(--cafati-purpura-hondo);font-weight:700}
.cfbc-eu__pasos{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-eu__paso{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--cafati-e-3);align-items:start}
.cfbc-eu__paso h3{font-size:18px;margin:0 0 6px;color:var(--cafati-purpura-hondo)}
.cfbc-eu__paso p{margin:0;font-size:15.5px;line-height:1.65;color:var(--cafati-grafito)}
.cfbc-eu__num{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--cafati-purpura-suave);color:var(--cafati-purpura-hondo);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.cfbc-eu__precios{background:var(--cafati-purpura-tenue)}
.cfbc-eu__cards{display:grid;gap:var(--cafati-e-4);margin-top:var(--cafati-e-4)}
.cfbc-eu__card{background:var(--cafati-papel);border:1px solid var(--cafati-purpura-linea);border-radius:var(--cafati-r-lg);overflow:hidden;box-shadow:var(--cafati-sombra-sm);display:flex;flex-direction:column}
.cfbc-eu__card-vis{margin:0}
.cfbc-eu__card-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.cfbc-eu__card-txt{padding:var(--cafati-e-4);display:grid;gap:var(--cafati-e-2)}
.cfbc-eu__card-txt h3{font-family:var(--cafati-fuente-ed);font-size:24px;margin:0;color:var(--cafati-purpura-hondo)}
.cfbc-eu__precio{margin:0;font-size:26px;font-weight:700;color:var(--cafati-purpura);font-variant-numeric:tabular-nums}
.cfbc-eu__inc{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-eu__tramos{list-style:none;margin:0;padding:0;border-top:1px solid var(--cafati-linea)}
.cfbc-eu__tramos li{display:flex;justify-content:space-between;gap:var(--cafati-e-3);padding:9px 0;border-bottom:1px solid var(--cafati-linea);font-size:15px;color:var(--cafati-grafito)}
.cfbc-eu__tramos strong{font-variant-numeric:tabular-nums;color:var(--cafati-purpura-hondo)}
.cfbc-eu__card-cta{display:flex;flex-wrap:wrap;gap:var(--cafati-e-2);align-items:center;margin-top:var(--cafati-e-2)}
.cfbc-eu__despues{background:var(--cafati-papel)}
.cfbc-eu__ninos{background:var(--cafati-marfil);border-radius:var(--cafati-r-md);padding:var(--cafati-e-3) var(--cafati-e-4)}
.cfbc-eu__faq{background:var(--cafati-marfil)}
.cfbc-eu__cierre{background:var(--cafati-purpura-hondo);color:var(--cafati-papel);padding:var(--cafati-e-6) 0;text-align:center}
.cfbc-eu__cierre h2{font-family:var(--cafati-fuente-ed);font-weight:500;font-size:clamp(26px,4.5vw,38px);margin:0 0 var(--cafati-e-2);color:var(--cafati-papel)}
.cfbc-eu__cierre p{margin:0 auto var(--cafati-e-4);font-size:17px;line-height:1.6;max-width:52ch;color:var(--cafati-purpura-suave)}
.cfbc-eu__cierre-cta{display:flex;flex-wrap:wrap;gap:var(--cafati-e-2);justify-content:center}
.cfbc-scope .cfbc-eu__cierre .cfbc-eu__b1{background:var(--cafati-papel);color:var(--cafati-purpura-hondo)}
.cfbc-scope .cfbc-eu__cierre .cfbc-eu__b1:hover,.cfbc-scope .cfbc-eu__cierre .cfbc-eu__b1:focus-visible{background:var(--cafati-purpura-suave)}
.cfbc-scope .cfbc-eu__cierre .cfbc-eu__b2{background:transparent;color:var(--cafati-papel);border-color:var(--cafati-purpura-suave)}
.cfbc-scope .cfbc-eu__cierre .cfbc-eu__b2:hover,.cfbc-scope .cfbc-eu__cierre .cfbc-eu__b2:focus-visible{background:var(--cafati-purpura);color:var(--cafati-papel)}
@media (min-width:720px){
  .cfbc-eu__senales{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-eu__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-eu__pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .cfbc-eu__hero{padding-top:var(--cafati-e-6)}
  .cfbc-eu__hero-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--cafati-e-7);align-items:center}
  .cfbc-eu__senales{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.cfbc-scope .cfbc-eu__b1,.cfbc-scope .cfbc-eu__b2,.cfbc-scope .cfbc-eu__b3{transition:none}}
/* ══ FIN EUTANASIA ══ */

/* ══ SERVICIOS · índice y fichas [mb1.919] ══
   Lila arriba, papel/marfil alternados en las bandas; púrpura para el precio (lo que el tutor elige),
   verde para lo institucional. Reglas de <li> e <img> con prefijo; cajas con `cfbc-caja`. */
.cfbc-sv__hero{background:linear-gradient(180deg,var(--cafati-purpura-tenue) 0%,var(--cafati-papel) 100%);padding:var(--cafati-e-5) 0 var(--cafati-e-6);border-bottom:1px solid var(--cafati-purpura-linea)}
.cfbc-sv__hero--ficha{background:var(--cafati-purpura-tenue)}
.cfbc-sv__hero-in{display:grid;gap:var(--cafati-e-5);align-items:center}
.cfbc-sv__hero-txt{min-width:0}
.cfbc-sv__eyebrow{color:var(--cafati-purpura)}
.cfbc-sv__h1{font-family:var(--cafati-fuente-ed);font-weight:600;font-size:clamp(28px,5.5vw,46px);line-height:1.1;color:var(--cafati-verde);margin:var(--cafati-e-2) 0 var(--cafati-e-3);text-wrap:balance}
.cfbc-sv__h1 em{font-style:normal;color:var(--cafati-purpura)}
.cfbc-sv__bajada{font-size:17px;line-height:1.65;color:var(--cafati-grafito);max-width:62ch;margin:0 0 var(--cafati-e-4)}
.cfbc-sv__hechos{list-style:none;margin:0 0 var(--cafati-e-4);padding:0;display:grid;gap:var(--cafati-e-2)}
.cfbc-scope .cfbc-sv__hechos li{position:relative;padding-left:var(--cafati-e-4);font-size:15px;line-height:1.5}
.cfbc-sv__hechos li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:999px;background:var(--cafati-purpura)}
.cfbc-sv__hechos strong{display:block;color:var(--cafati-verde);font-weight:700}
.cfbc-sv__hechos span{color:var(--cafati-texto-tenue)}
.cfbc-sv__cta{display:flex;flex-wrap:wrap;gap:var(--cafati-e-2)}
.cfbc-sv__cta .cfbc-lp__b1,.cfbc-sv__cta .cfbc-lp__b2{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.cfbc-sv__familias{background:var(--cafati-papel)}
.cfbc-sv__fam{margin-top:var(--cafati-e-5)}
.cfbc-sv__fam-t{font-family:var(--cafati-fuente-ed);font-size:24px;color:var(--cafati-purpura-hondo);margin:0 0 4px}
.cfbc-sv__fam-g{margin:0 0 var(--cafati-e-3);font-size:15px;color:var(--cafati-texto-tenue)}
.cfbc-sv__packs,.cfbc-sv__ad{background:var(--cafati-marfil)}
.cfbc-sv__lista{list-style:none;margin:var(--cafati-e-4) 0 0;background:var(--cafati-papel);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-md)}
.cfbc-scope .cfbc-sv__lista li{display:flex;justify-content:space-between;gap:var(--cafati-e-3);align-items:center;padding:12px 0;border-bottom:1px solid var(--cafati-linea);font-size:15.5px;min-height:44px}
.cfbc-scope .cfbc-sv__lista li:last-child{border-bottom:0}
.cfbc-sv__lista a{color:var(--cafati-verde);font-weight:600;text-decoration:none}
.cfbc-sv__lista a:hover,.cfbc-sv__lista a:focus-visible{text-decoration:underline}
.cfbc-sv__lista strong{display:block;color:var(--cafati-verde)}
.cfbc-sv__lista em{display:block;font-style:normal;font-size:14px;color:var(--cafati-texto-tenue)}
.cfbc-sv__lista--ad{margin-top:var(--cafati-e-4)}
.cfbc-sv__precio{font-weight:700;color:var(--cafati-purpura);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:17px}
.cfbc-sv__precio small{font-weight:500;font-size:13px;color:var(--cafati-texto-tenue)}
.cfbc-sv__precio--consultar{color:var(--cafati-texto-tenue);font-weight:600;font-size:14px}
.cfbc-sv__desp{background:var(--cafati-papel)}
.cfbc-sv__desp-caja{background:var(--cafati-purpura-tenue);border:1px solid var(--cafati-purpura-linea);border-radius:var(--cafati-r-lg);max-width:72ch}
.cfbc-sv__desp-caja p{font-size:16px;line-height:1.65;color:var(--cafati-grafito)}
.cfbc-sv__cobro{background:var(--cafati-menta-tenue)}
.cfbc-sv__cobro-l{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-sv__cobro-i{background:var(--cafati-papel);border-radius:var(--cafati-r-md);border-left:4px solid var(--cafati-verde-accion)}
.cfbc-sv__cobro-i h3{font-size:17px;margin:0 0 6px;color:var(--cafati-verde)}
.cfbc-sv__cobro-i p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-sv__como{background:var(--cafati-papel)}
.cfbc-sv__pasos{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-sv__paso{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--cafati-e-3);align-items:start;background:var(--cafati-marfil);border-radius:var(--cafati-r-md);border:1px solid var(--cafati-linea)}
.cfbc-sv__paso h3{font-size:17px;margin:0 0 6px;color:var(--cafati-verde)}
.cfbc-sv__paso p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-sv__num{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--cafati-purpura);color:var(--cafati-papel);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.cfbc-sv__donde{background:var(--cafati-marfil)}
.cfbc-sv__comunas{list-style:none;margin:var(--cafati-e-3) 0 var(--cafati-e-4);padding:0;display:flex;flex-wrap:wrap;gap:var(--cafati-e-2)}
.cfbc-scope .cfbc-sv__comunas li{margin:0}
.cfbc-sv__comunas a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--cafati-e-3);border-radius:999px;background:var(--cafati-papel);border:1px solid var(--cafati-linea);color:var(--cafati-verde);font-weight:600;font-size:14.5px;text-decoration:none}
.cfbc-sv__comunas a:hover,.cfbc-sv__comunas a:focus-visible{border-color:var(--cafati-purpura);color:var(--cafati-purpura-hondo)}
.cfbc-sv__donde-cta{display:flex;flex-wrap:wrap;gap:var(--cafati-e-2)}
.cfbc-sv__faq{background:var(--cafati-papel)}
.cfbc-sv__cierre{margin-top:0}
/* [mb1.946] La ficha usa la ruta común (`.cfbc-doc__miga`); su miga propia se retiró. */
.cfbc-sv__ficha-datos{display:grid;gap:var(--cafati-e-3);margin:0 0 var(--cafati-e-4)}
.cfbc-sv__dato{display:grid;gap:2px}
.cfbc-sv__dato-k{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cafati-purpura);font-weight:700}
.cfbc-sv__dato-v{font-size:18px;font-weight:700;color:var(--cafati-verde)}
.cfbc-sv__dato .cfbc-sv__precio{font-size:26px}
.cfbc-sv__dato-n{font-size:13.5px;color:var(--cafati-texto-tenue)}
.cfbc-sv__hero-vis{margin:0;border-radius:var(--cafati-r-lg);box-shadow:var(--cafati-sombra-lg);background:var(--cafati-purpura-suave)}
.cfbc-scope .cfbc-sv__foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:var(--cafati-r-lg)}
.cfbc-sv__sec{background:var(--cafati-papel)}
.cfbc-sv__dos{display:grid;gap:var(--cafati-e-3)}
.cfbc-sv__bloque{background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-top:4px solid var(--cafati-verde-accion);border-radius:var(--cafati-r-md)}
.cfbc-sv__bloque--quien{border-top-color:var(--cafati-purpura)}
.cfbc-sv__bloque .cfbc-c__h2{font-size:22px;margin:0 0 var(--cafati-e-3)}
.cfbc-sv__check{list-style:none;margin:0;padding:0;display:grid;gap:var(--cafati-e-2)}
.cfbc-scope .cfbc-sv__check li{position:relative;padding-left:var(--cafati-e-4);font-size:15.5px;line-height:1.55;color:var(--cafati-grafito)}
.cfbc-sv__check li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--cafati-verde-accion);font-weight:700}
.cfbc-sv__hermanos{background:var(--cafati-marfil)}
.cfbc-sv__todos{margin:var(--cafati-e-3) 0 0;font-weight:600}
.cfbc-sv__todos a{color:var(--cafati-verde)}
@media (min-width:720px){
  .cfbc-sv__cobro-l{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cfbc-sv__pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-sv__ficha-datos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cfbc-sv__dos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .cfbc-sv__hero{padding-top:var(--cafati-e-6)}
  .cfbc-sv__hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--cafati-e-7)}
  .cfbc-sv__pasos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ══ FIN SERVICIOS ══ */

/* ══ PÁGINAS DE SECCIÓN · CSL_Doc y Cómo funciona [mb1.920] ══
   El hero editorial común (lila → papel), las migas, los hechos; y los pasos de «cómo funciona» con
   las gráficas propias de los hitos. Reglas de <li> e <img> con prefijo; cajas con `cfbc-caja`. */
.cfbc-doc__miga{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--cafati-texto-tenue);margin-bottom:var(--cafati-e-3)}
.cfbc-doc__miga a{color:var(--cafati-verde);text-decoration:none;font-weight:600}
.cfbc-doc__miga a:hover,.cfbc-doc__miga a:focus-visible{text-decoration:underline}
.cfbc-doc__hero{background:linear-gradient(180deg,var(--cafati-purpura-tenue) 0%,var(--cafati-papel) 100%);padding:var(--cafati-e-5) 0 var(--cafati-e-6);border-bottom:1px solid var(--cafati-purpura-linea)}
.cfbc-doc__hero--foto .cfbc-doc__hero-txt{padding-right:0}
.cfbc-doc__hero-in{display:grid;gap:var(--cafati-e-5)}
.cfbc-doc__hero-txt{min-width:0}
.cfbc-doc__eyebrow{color:var(--cafati-purpura)}
.cfbc-doc__h1{font-family:var(--cafati-fuente-ed);font-weight:600;font-size:clamp(28px,5.5vw,46px);line-height:1.1;color:var(--cafati-verde);margin:var(--cafati-e-2) 0 var(--cafati-e-3);text-wrap:balance}
.cfbc-doc__h1 em{font-style:normal;color:var(--cafati-purpura)}
.cfbc-doc__bajada{font-size:17px;line-height:1.65;color:var(--cafati-grafito);max-width:62ch;margin:0 0 var(--cafati-e-4)}
.cfbc-doc__hechos{list-style:none;margin:0 0 var(--cafati-e-4);padding:0;display:grid;gap:var(--cafati-e-2)}
.cfbc-scope .cfbc-doc__hechos li{position:relative;padding-left:var(--cafati-e-4);font-size:15px;line-height:1.5}
.cfbc-doc__hechos li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:999px;background:var(--cafati-purpura)}
.cfbc-doc__hechos strong{display:block;color:var(--cafati-verde);font-weight:700}
.cfbc-doc__hechos span{color:var(--cafati-texto-tenue)}
.cfbc-doc__cta{display:flex;flex-wrap:wrap;gap:var(--cafati-e-2)}
.cfbc-doc__cta .cfbc-lp__b1,.cfbc-doc__cta .cfbc-lp__b2{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.cfbc-doc__hero-vis{margin:0;border-radius:var(--cafati-r-lg);box-shadow:var(--cafati-sombra-lg);background:var(--cafati-purpura-suave)}
.cfbc-scope .cfbc-doc__foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:var(--cafati-r-lg)}
.cfbc-cf__mom{background:var(--cafati-papel)}
.cfbc-cf__mom:nth-of-type(odd){background:var(--cafati-marfil)}
.cfbc-cf__pasos{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-cf__paso{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--cafati-e-3);align-items:start;background:var(--cafati-papel);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-md)}
.cfbc-cf__paso h3{font-size:18px;margin:0 0 6px;color:var(--cafati-verde)}
.cfbc-cf__paso p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-cf__ico{width:72px;height:72px;border-radius:var(--cafati-r-md);background:var(--cafati-purpura-tenue);display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.cfbc-scope .cfbc-cf__ico-img{width:72px;height:72px;object-fit:contain;display:block}
.cfbc-cf__ico--n{font-family:var(--cafati-fuente-ed);font-size:28px;color:var(--cafati-purpura-hondo);font-weight:700}
.cfbc-cf__cambios{background:var(--cafati-menta-tenue)}
.cfbc-cf__cambios-l{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-cf__cambio{background:var(--cafati-papel);border-radius:var(--cafati-r-md);border-left:4px solid var(--cafati-purpura)}
.cfbc-cf__cambio h3{font-size:17px;margin:0 0 6px;color:var(--cafati-purpura-hondo)}
.cfbc-cf__cambio p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-cf__faq{background:var(--cafati-papel)}
@media (min-width:720px){
  .cfbc-cf__pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-cf__cambios-l{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .cfbc-doc__hero{padding-top:var(--cafati-e-6)}
  .cfbc-doc__hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--cafati-e-7);align-items:center}
  .cfbc-cf__cambios-l{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ══ FIN PÁGINAS DE SECCIÓN ══ */

/* ══ NOSOTROS Y VETERINARIOS [mb1.921] ══ */
.cfbc-ns__hist{background:var(--cafati-papel)}
.cfbc-ns__hist-in{display:grid;gap:var(--cafati-e-4);align-items:center}
.cfbc-ns__hist-txt p{font-size:16px;line-height:1.7;color:var(--cafati-grafito);max-width:62ch}
.cfbc-ns__hist-txt strong{color:var(--cafati-purpura-hondo)}
.cfbc-ns__hist-vis{margin:0;border-radius:var(--cafati-r-lg);box-shadow:var(--cafati-sombra-md);background:var(--cafati-purpura-suave)}
.cfbc-scope .cfbc-ns__hist-foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:var(--cafati-r-lg)}
.cfbc-ns__valores{background:var(--cafati-purpura-tenue)}
.cfbc-ns__valores-l{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-ns__valor{background:var(--cafati-papel);border:1px solid var(--cafati-purpura-linea);border-top:4px solid var(--cafati-purpura);border-radius:var(--cafati-r-md)}
.cfbc-ns__valor h3{font-family:var(--cafati-fuente-ed);font-size:21px;margin:0 0 6px;color:var(--cafati-purpura-hondo)}
.cfbc-ns__valor p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-ns__equipo{background:var(--cafati-papel)}
.cfbc-ns__grupos{display:grid;gap:var(--cafati-e-4);margin:var(--cafati-e-4) 0}
.cfbc-ns__grupo{min-width:0}
.cfbc-ns__grupo-t{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cafati-purpura);font-weight:700;margin:0 0 var(--cafati-e-2)}
.cfbc-ns__personas{list-style:none;margin:0;padding:0;display:grid;gap:var(--cafati-e-2)}
.cfbc-scope .cfbc-ns__persona{background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-md);display:grid;gap:2px}
.cfbc-ns__persona strong{color:var(--cafati-verde);font-size:16px}
.cfbc-ns__persona span{font-size:14px;color:var(--cafati-texto-tenue)}
.cfbc-ns__centro{background:var(--cafati-menta-tenue)}
.cfbc-ns__centro-caja{background:var(--cafati-papel);border-radius:var(--cafati-r-lg);border-left:4px solid var(--cafati-verde-accion);max-width:76ch}
.cfbc-ns__centro-caja p{font-size:16px;line-height:1.7;color:var(--cafati-grafito)}
.cfbc-ns__faq{background:var(--cafati-papel)}
.cfbc-vt__lista{background:var(--cafati-papel)}
.cfbc-vt__grid{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-vt__card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--cafati-e-3);align-items:start;background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-lg)}
.cfbc-scope .cfbc-vt__foto{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;background:var(--cafati-purpura-suave)}
.cfbc-vt__foto--sin{display:inline-flex;align-items:center;justify-content:center;font-family:var(--cafati-fuente-ed);font-size:34px;color:var(--cafati-purpura-hondo)}
.cfbc-vt__txt{min-width:0;display:grid;gap:6px}
.cfbc-scope .cfbc-vt__nom{margin:0;font-size:19px;font-weight:800;line-height:1.25;display:flex;align-items:center;min-height:44px}
.cfbc-vt__nom a{color:var(--cafati-verde);text-decoration:none}
.cfbc-vt__nom a:hover,.cfbc-vt__nom a:focus-visible{text-decoration:underline}
.cfbc-vt__nota{margin:0;font-size:15px;color:var(--cafati-grafito)}
.cfbc-vt__nota b{color:var(--cafati-verde);font-variant-numeric:tabular-nums}
.cfbc-vt__nota--nueva{color:var(--cafati-purpura-hondo);font-weight:600}
.cfbc-vt__meta{margin:0;font-size:14.5px;color:var(--cafati-texto-tenue)}
.cfbc-vt__bio{margin:0;font-size:15px;line-height:1.55;color:var(--cafati-grafito)}
.cfbc-vt__ver{display:inline-flex;align-items:center;min-height:44px;color:var(--cafati-purpura-hondo);font-weight:700;text-decoration:none}
.cfbc-vt__ver:hover,.cfbc-vt__ver:focus-visible{text-decoration:underline}
.cfbc-vt__valida{background:var(--cafati-purpura-tenue)}
.cfbc-vt__pasos{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-vt__paso{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--cafati-e-3);align-items:start;background:var(--cafati-papel);border-radius:var(--cafati-r-md);border:1px solid var(--cafati-purpura-linea)}
.cfbc-vt__paso h3{font-size:17px;margin:0 0 6px;color:var(--cafati-purpura-hondo)}
.cfbc-vt__paso p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-vt__num{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--cafati-purpura);color:var(--cafati-papel);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.cfbc-vt__postule{margin:var(--cafati-e-4) 0 0;font-size:15.5px;color:var(--cafati-grafito)}
.cfbc-vt__postule a{color:var(--cafati-purpura-hondo);font-weight:700}
.cfbc-vt__respaldo{background:var(--cafati-papel)}
.cfbc-vt__respaldo-caja{background:var(--cafati-menta-tenue);border-radius:var(--cafati-r-lg);border-left:4px solid var(--cafati-verde-accion);max-width:76ch}
.cfbc-vt__respaldo-caja p{font-size:16px;line-height:1.7;color:var(--cafati-grafito)}
.cfbc-vt__faq{background:var(--cafati-marfil)}
@media (min-width:720px){
  .cfbc-ns__valores-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-ns__grupos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cfbc-vt__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-vt__pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .cfbc-ns__hist-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--cafati-e-6)}
  .cfbc-ns__valores-l{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cfbc-vt__pasos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ══ FIN NOSOTROS Y VETERINARIOS ══ */

/* ══ PÁGINAS DE APOYO [mb1.922] · preguntas, contacto, legal, 404 ══ */
.cfbc-scope .cfbc-pie__legal-l{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.cfbc-pie__legal-a{color:var(--cafati-papel);opacity:.85;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:32px}
.cfbc-pie__legal-a:hover,.cfbc-pie__legal-a:focus-visible{opacity:1}
/* [mb1.934] El credito del sistema, bajo la linea legal: misma voz apagada que la legal, un punto mas discreta. */
.cfbc-scope .cfbc-pie__credito{flex:0 0 100%;margin:0;font-size:13px;line-height:1.5;color:color-mix(in srgb, var(--cafati-papel) 50%, transparent)}
/* Preguntas frecuentes */
.cfbc-fq__temas{background:var(--cafati-papel);padding-top:var(--cafati-e-4);padding-bottom:0}
.cfbc-fq__nav{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cfbc-scope .cfbc-fq__grupos{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:8px;flex-wrap:nowrap}
.cfbc-fq__chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--cafati-purpura-linea);background:var(--cafati-purpura-tenue);color:var(--cafati-purpura-hondo);font-weight:700;font-size:14.5px;white-space:nowrap;text-decoration:none}
.cfbc-fq__chip span{font-size:13px;font-weight:600;background:var(--cafati-papel);border-radius:999px;padding:2px 8px;color:var(--cafati-purpura);font-variant-numeric:tabular-nums}
.cfbc-fq__chip:hover,.cfbc-fq__chip:focus-visible{background:var(--cafati-purpura-suave)}
.cfbc-fq__ancla{scroll-margin-top:96px}
.cfbc-fq__ancla:nth-child(even) .cfbc-fq__grupo{background:var(--cafati-marfil)}
.cfbc-fq__grupo{background:var(--cafati-papel)}
/* Contacto */
.cfbc-ct__vias-sec{background:var(--cafati-papel)}
.cfbc-scope .cfbc-ct__vias{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-ct__via{display:grid;gap:6px;align-content:start;background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-lg)}
.cfbc-scope .cfbc-ct__via--wa{background:var(--cafati-menta-tenue);border-color:var(--cafati-verde-suave)}
.cfbc-ct__via-t{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--cafati-purpura)}
.cfbc-ct__via-v{margin:0;font-family:var(--cafati-fuente-ed);font-size:24px;line-height:1.2;color:var(--cafati-verde);overflow-wrap:anywhere}
.cfbc-ct__via--wa .cfbc-ct__via-v{font-variant-numeric:tabular-nums;font-family:var(--cafati-fuente);font-weight:800}
.cfbc-ct__via-p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-ct__via-b{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;margin-top:6px;border-radius:999px;background:var(--cafati-verde-accion);color:var(--cafati-papel);font-weight:700;text-decoration:none;justify-self:start}
.cfbc-ct__via-b:hover,.cfbc-ct__via-b:focus-visible{background:var(--cafati-verde);color:var(--cafati-papel)}
.cfbc-ct__cuando{background:var(--cafati-purpura-tenue)}
.cfbc-ct__cuando-caja{background:var(--cafati-papel);border-radius:var(--cafati-r-lg);border-left:4px solid var(--cafati-purpura);max-width:76ch;margin-top:var(--cafati-e-4)}
.cfbc-ct__dato{margin:0 0 10px;font-size:15.5px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-ct__dato strong{color:var(--cafati-purpura-hondo)}
.cfbc-ct__centro{background:var(--cafati-papel)}
.cfbc-ct__centro-in{display:grid;gap:var(--cafati-e-4);align-items:center}
.cfbc-ct__centro-txt p{font-size:16px;line-height:1.7;color:var(--cafati-grafito);max-width:62ch}
.cfbc-ct__centro-vis{margin:0;border-radius:var(--cafati-r-lg);box-shadow:var(--cafati-sombra-md);background:var(--cafati-purpura-suave)}
.cfbc-scope .cfbc-ct__centro-foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--cafati-r-lg)}
.cfbc-ct__ext{color:var(--cafati-purpura-hondo);font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.cfbc-ct__faq{background:var(--cafati-marfil)}
/* Legal (términos y privacidad) */
.cfbc-lg__hero{background:var(--cafati-purpura-tenue);padding:var(--cafati-e-4) 0 var(--cafati-e-5)}
.cfbc-lg__hero-in{display:grid;gap:10px}
.cfbc-lg__h1{font-family:var(--cafati-fuente-ed);font-size:clamp(30px,4.5vw,44px);line-height:1.1;margin:0;color:var(--cafati-purpura-hondo);text-wrap:balance}
.cfbc-lg__intro{margin:0;font-size:17px;line-height:1.6;color:var(--cafati-grafito);max-width:62ch}
.cfbc-lg__meta{margin:0;font-size:14px;color:var(--cafati-texto-tenue)}
.cfbc-lg__corto-sec{background:var(--cafati-papel);padding-bottom:0}
.cfbc-lg__corto{background:var(--cafati-menta-tenue);border-radius:var(--cafati-r-lg);border-left:4px solid var(--cafati-verde-accion);max-width:76ch}
.cfbc-lg__corto-t{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--cafati-verde)}
.cfbc-scope .cfbc-lg__corto-l{margin:0;padding:0 0 0 20px;display:grid;gap:6px}
.cfbc-scope .cfbc-lg__corto-l li{font-size:15.5px;line-height:1.55;color:var(--cafati-grafito)}
.cfbc-lg__cuerpo-sec{background:var(--cafati-papel)}
.cfbc-lg__cuerpo{display:grid;gap:var(--cafati-e-4)}
.cfbc-lg__indice{background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-md);padding:16px 18px;align-self:start}
.cfbc-lg__indice-t{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--cafati-purpura)}
.cfbc-scope .cfbc-lg__indice-l{margin:0;padding:0 0 0 20px;display:grid;gap:4px}
.cfbc-scope .cfbc-lg__indice-l li{font-size:14.5px;line-height:1.5}
.cfbc-lg__indice-l a{color:var(--cafati-purpura-hondo);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.cfbc-lg__indice-l a:hover,.cfbc-lg__indice-l a:focus-visible{text-decoration:underline}
.cfbc-lg__secs{display:grid;gap:var(--cafati-e-4);max-width:72ch;min-width:0}
.cfbc-lg__sec{scroll-margin-top:96px}
.cfbc-lg__sec-t{font-family:var(--cafati-fuente-ed);font-size:23px;line-height:1.25;margin:0 0 10px;color:var(--cafati-purpura-hondo)}
.cfbc-lg__n{color:var(--cafati-purpura);font-variant-numeric:tabular-nums}
.cfbc-lg__txt p{margin:0 0 12px;font-size:16px;line-height:1.7;color:var(--cafati-grafito)}
/* 404 */
.cfbc-404__hero{background:var(--cafati-purpura-tenue);padding:var(--cafati-e-6) 0}
.cfbc-404__in{display:grid;gap:12px;justify-items:start}
.cfbc-404__cod{margin:0;font-family:var(--cafati-fuente-ed);font-size:clamp(56px,12vw,120px);line-height:.9;color:var(--cafati-purpura-suave);letter-spacing:-.02em}
.cfbc-404__h1{font-family:var(--cafati-fuente-ed);font-size:clamp(28px,4.5vw,44px);line-height:1.12;margin:0;color:var(--cafati-verde);text-wrap:balance}
.cfbc-404__h1 em{font-style:normal;color:var(--cafati-purpura)}
.cfbc-404__p{margin:0;font-size:17px;line-height:1.6;color:var(--cafati-grafito);max-width:58ch}
.cfbc-404__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.cfbc-404__puertas-sec{background:var(--cafati-papel)}
.cfbc-scope .cfbc-404__puertas{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-404__puerta{background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-lg);padding:0}
.cfbc-404__puerta-a{display:grid;gap:4px;padding:var(--cafati-e-3);text-decoration:none;color:inherit;min-height:44px}
.cfbc-404__puerta-a strong{color:var(--cafati-verde);font-size:17px}
.cfbc-404__puerta-a span{font-size:14.5px;line-height:1.5;color:var(--cafati-grafito)}
.cfbc-404__puerta-a:hover strong,.cfbc-404__puerta-a:focus-visible strong{text-decoration:underline}
@media (min-width:720px){
  .cfbc-scope .cfbc-ct__vias{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-scope .cfbc-404__puertas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-scope .cfbc-fq__grupos{flex-wrap:wrap}
}
@media (min-width:960px){
  .cfbc-ct__centro-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--cafati-e-6)}
  .cfbc-lg__cuerpo{grid-template-columns:260px minmax(0,1fr);gap:var(--cafati-e-6);align-items:start}
  .cfbc-lg__indice{position:sticky;top:96px}
  .cfbc-scope .cfbc-404__puertas{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ══ FIN PÁGINAS DE APOYO ══ */

/* ══ NAVEGACIÓN MÓVIL [mb1.923] · una fila y las «3 rayitas» bajo 1000px ══ */
.cfbc-nav__ham{display:none}
.cfbc-nav__menu-pie{display:none}
.cfbc-scope .cfbc-nav__a--movil{display:none}
.cfbc-nav__ham-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1099px){
  .cfbc-scope .cfbc-nav{position:relative;flex-wrap:nowrap;gap:8px;z-index:60}
  .cfbc-nav__ham{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:12px;border:1px solid var(--cafati-verde-suave);background:transparent;color:var(--cafati-papel);cursor:pointer}
  .cfbc-nav__ham:focus-visible{outline:3px solid var(--cafati-menta);outline-offset:3px}
  .cfbc-nav__ham-i{width:20px;height:14px;display:flex;flex-direction:column;justify-content:space-between}
  .cfbc-nav__ham-i i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
  .cfbc-nav.is-abierto .cfbc-nav__ham-i i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .cfbc-nav.is-abierto .cfbc-nav__ham-i i:nth-child(2){opacity:0}
  .cfbc-nav.is-abierto .cfbc-nav__ham-i i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .cfbc-nav.js-nav .cfbc-nav__menu{display:none}
  .cfbc-nav.js-nav.is-abierto .cfbc-nav__menu{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--cafati-verde);padding:6px 14px 18px;border-top:1px solid var(--cafati-verde-suave);box-shadow:var(--cafati-sombra-lg);max-height:calc(100vh - 64px);overflow:auto;z-index:60}
  .cfbc-nav.js-nav .cfbc-nav__menu .cfbc-nav__a{font-size:17px;font-weight:600;min-height:52px;padding:0 4px;border-bottom:1px solid var(--cafati-verde-suave);display:flex}
  .cfbc-nav.js-nav .cfbc-nav__menu .cfbc-nav__a.is-activo::after{left:4px;right:auto;width:28px;bottom:8px}
  .cfbc-scope .cfbc-nav__a--movil{display:flex}
  .cfbc-nav__menu-pie{display:flex;flex-wrap:wrap;gap:10px;padding-top:16px}
  .cfbc-nav > .cfbc-nav__salidas{margin-left:auto;flex-wrap:nowrap}
  .cfbc-nav > .cfbc-nav__salidas .cfbc-nav__wa{display:none}
  .cfbc-nav__cta{padding:0 14px;white-space:nowrap}
  .cfbc-nav__wa--menu{padding:0 var(--cafati-e-3)}
  .cfbc-nav__wa--menu .cfbc-nav__wa-corto{display:none}
  .cfbc-nav__wa--menu .cfbc-nav__wa-largo{position:static;width:auto;height:auto;clip:auto;overflow:visible}
}
@media (max-width:399px){ .cfbc-scope .cfbc-nav .cfbc-ps__es{display:none} }
@media (prefers-reduced-motion:reduce){ .cfbc-nav__ham-i i{transition:none} }
/* ══ FIN NAVEGACIÓN MÓVIL ══ */

/* ══ LA TIRA DE CONFIANZA [mb1.925] · la credencial sale de la barra en escritorio ══ */
.cfbc-tira{display:none}
@media (min-width:1100px){
  .cfbc-tira{display:block;background:var(--cafati-menta-tenue);border-bottom:1px solid var(--cafati-verde-suave);color:var(--cafati-verde)}
  .cfbc-tira__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding-inline:max(var(--cafati-e-4),calc((100% - 1320px)/2))}
  .cfbc-scope .cfbc-tira .cfbc-ps{background:none;border:0;padding:0;min-height:44px;color:var(--cafati-verde);font-size:13.5px}
  .cfbc-scope .cfbc-tira a.cfbc-ps{color:var(--cafati-verde)}
  .cfbc-scope .cfbc-tira a.cfbc-ps:hover,.cfbc-scope .cfbc-tira a.cfbc-ps:focus-visible{background:none;border:0;text-decoration:underline;text-underline-offset:3px}
  .cfbc-scope .cfbc-tira .cfbc-ps .cfbc-ps__es-b{color:var(--cafati-linea)}
  .cfbc-scope .cfbc-tira .cfbc-ps .cfbc-ps__d,.cfbc-scope .cfbc-tira .cfbc-ps .cfbc-ps__d--w,.cfbc-scope .cfbc-tira .cfbc-ps .cfbc-ps__p,.cfbc-scope .cfbc-tira .cfbc-ps .cfbc-ps__p:has(+ .cfbc-ps__d--w){display:inline}
  .cfbc-tira__hechos{margin:0;display:flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--cafati-verde);white-space:nowrap}
  .cfbc-tira__hechos span+span::before{content:"·";opacity:.45;margin:0 12px}
  .cfbc-scope .cfbc-nav .cfbc-ps{display:none}
  .cfbc-nav{min-height:64px}
  .cfbc-nav__menu{gap:22px}
  .cfbc-nav__a{font-size:15px}
}
@media (min-width:1100px) and (max-width:1365px){
  .cfbc-scope .cfbc-nav__a--amplio{display:none}
  .cfbc-nav > .cfbc-nav__salidas .cfbc-nav__wa .cfbc-nav__wa-corto{display:inline}
  .cfbc-nav > .cfbc-nav__salidas .cfbc-nav__wa .cfbc-nav__wa-largo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* ══ FIN LA TIRA DE CONFIANZA ══ */
/* [mb1.936] Entre 1100 y 1365px la tira no cabe entera: la frase "Veterinaria a domicilio en Santiago y regiones" se salia por la derecha (visto a 1280 en la pagina de traumatologia, la barra ya lo dice). Se queda el horario; la frase vuelve desde 1366. */
@media (min-width:1100px) and (max-width:1365px){
  .cfbc-tira__hechos span+span{display:none}
}

/* ══ REGIONES [mb1.927] · Chile entero, región por región ══ */
.cfbc-rg__red-sec{background:var(--cafati-papel)}
.cfbc-scope .cfbc-rg__red{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-rg__com{display:grid;gap:6px;align-content:start;background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-top:4px solid var(--cafati-verde-accion);border-radius:var(--cafati-r-lg)}
.cfbc-rg__com-n{margin:0;font-size:19px;color:var(--cafati-verde)}
.cfbc-rg__com-v{margin:0;font-size:14.5px;color:var(--cafati-texto-tenue)}
.cfbc-rg__com-a{display:inline-flex;align-items:center;min-height:44px;color:var(--cafati-purpura-hondo);font-weight:700;text-decoration:none}
.cfbc-rg__com-a:hover,.cfbc-rg__com-a:focus-visible{text-decoration:underline}
.cfbc-rg__sin-sec{background:var(--cafati-papel)}
.cfbc-rg__sin{background:var(--cafati-purpura-tenue);border-radius:var(--cafati-r-lg);border-left:4px solid var(--cafati-purpura);max-width:76ch;margin-top:var(--cafati-e-4);display:grid;gap:12px;justify-items:start}
.cfbc-rg__sin p{margin:0;font-size:16px;line-height:1.7;color:var(--cafati-grafito)}
.cfbc-rg__vets a{color:var(--cafati-purpura-hondo);font-weight:700}
.cfbc-rg__todas-sec{background:var(--cafati-marfil)}
.cfbc-scope .cfbc-rg__todas{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:6px 18px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.cfbc-scope .cfbc-rg__una{font-size:15.5px;line-height:1.5;color:var(--cafati-grafito);display:flex;align-items:center;gap:6px;min-height:32px}
.cfbc-rg__una a{color:var(--cafati-purpura-hondo);font-weight:700;text-decoration:none}
.cfbc-rg__una a:hover,.cfbc-rg__una a:focus-visible{text-decoration:underline}
.cfbc-rg__una-m{color:var(--cafati-verde-accion);font-size:13px}
.cfbc-scope .cfbc-rg__una--red{font-weight:600}
.cfbc-rg__regiones{margin:0}
.cfbc-rg__nocomuna{margin-top:var(--cafati-e-4);display:grid;gap:10px;justify-items:start}
.cfbc-rg__nocomuna p{margin:0;font-size:15.5px;color:var(--cafati-grafito)}
.cfbc-rg__como{background:var(--cafati-purpura-tenue)}
.cfbc-scope .cfbc-rg__pasos{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-rg__paso{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--cafati-e-3);align-items:start;background:var(--cafati-papel);border:1px solid var(--cafati-purpura-linea);border-radius:var(--cafati-r-md)}
.cfbc-rg__paso h3{font-size:17px;margin:0 0 6px;color:var(--cafati-purpura-hondo)}
.cfbc-rg__paso p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-rg__num{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--cafati-purpura);color:var(--cafati-papel);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.cfbc-rg__faq{background:var(--cafati-papel)}
.cfbc-rg__regiones-sec{background:var(--cafati-menta-tenue)}
.cfbc-scope .cfbc-rg__regiones-l{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cfbc-rg__chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--cafati-verde-suave);background:var(--cafati-papel);color:var(--cafati-verde);font-weight:700;font-size:14.5px;text-decoration:none}
.cfbc-rg__chip:hover,.cfbc-rg__chip:focus-visible{background:var(--cafati-verde);color:var(--cafati-papel)}
.cfbc-rg__chip.is-actual{background:var(--cafati-verde);color:var(--cafati-papel)}
@media (min-width:720px){
  .cfbc-scope .cfbc-rg__red{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-scope .cfbc-rg__pasos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:960px){
  .cfbc-scope .cfbc-rg__red{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ══ FIN REGIONES ══ */
.cfbc-pt__chips{margin-top:var(--cafati-e-4)}
.cfbc-pt__mas{margin:var(--cafati-e-4) 0 0}
.cfbc-pt__resp{background:var(--cafati-menta-tenue);border-radius:var(--cafati-r-lg);padding:var(--cafati-e-5) var(--cafati-e-4)}
.cfbc-pt__resp-in{display:grid;gap:var(--cafati-e-4);align-items:center}
.cfbc-pt__resp-f{margin:0;max-width:360px;justify-self:center}
.cfbc-pt__resp-img{display:block;width:100%;height:auto}
.cfbc-pt__resp-txt p{font-size:16px;line-height:1.6;max-width:62ch}
.cfbc-pt__resp-l{list-style:none;margin:var(--cafati-e-3) 0 0;padding:0;display:grid;gap:var(--cafati-e-2)}
.cfbc-pt__resp-l li{padding-left:22px;position:relative;font-size:15px;line-height:1.5;color:var(--cafati-texto-tenue)}
.cfbc-pt__resp-l li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--cafati-verde);box-shadow:0 0 0 3px var(--cafati-menta)}
.cfbc-pt__resp-l b{color:var(--cafati-grafito)}
.cfbc-pt__resp-desde{margin-top:var(--cafati-e-4);font-size:14px;color:var(--cafati-texto-tenue)}
.cfbc-pt__resp-desde a{color:var(--cafati-purpura);font-weight:600}
@media (min-width:720px){
  .cfbc-pt__casos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-pt__resp-in{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--cafati-e-6)}
  .cfbc-pt__resp{padding:var(--cafati-e-6)}
}
@media (min-width:960px){
  .cfbc-pt__hero{padding-top:var(--cafati-e-6)}
  .cfbc-pt__hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--cafati-e-7)}
  /* [mb1.907] En la columna del hero el arranque no cabe en «1fr 1fr auto»: dos desplegables a
     mitad y el botón debajo, a todo el ancho. Primero contesta, después actúa. */
  .cfbc-pt__arr .cfbc-arr__campos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cafati-e-3) var(--cafati-e-4)}
  .cfbc-pt__arr .cfbc-arr__campos .cfbc-arr__b{grid-column:1/-1;width:100%}
  .cfbc-pt__arr .cfbc-arr__c select{width:100%}
  .cfbc-pt__hero-vis{position:sticky;top:var(--cafati-e-4)}
  .cfbc-pt__casos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.cfbc-scope .cfbc-lp__chip--fijo{background:var(--cafati-menta-tenue);
	color:var(--cafati-texto-tenue);border-color:var(--cafati-linea);cursor:default}
/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.648–650] EL PERFIL DE LA VETERINARIA · lo que le faltaba
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* [mb1.946] La miga propia del perfil se retiró: la ruta común va dentro del carril (mb1.943). */

/* 🔴 LA HORA, EN LA CABECERA. Es lo único que la competencia no puede copiar, así que se ve: fondo
 * de menta, punto vivo y la acción al lado. Sin animación — quien espera a una veterinaria no
 * necesita nada parpadeando. */
/* 🔴 [mb1.717] DOS RENGLONES Y NINGÚN ENLACE SUELTO.
 *
 * Llevaba dentro un «elegir hora» en morado que era la tercera puerta a lo mismo —él, el botón
 * de debajo y el bloque de la agenda— y encima le añadía 44 px de alto a un carril que ya no
 * cabía. El recuadro informa; el botón que hay justo debajo es el que actúa.
 *
 * La rejilla es de dos columnas —punto y texto— con la fecha ocupando la segunda entera: así el
 * mes largo parte donde tiene que partir y no arrastra el punto a su propio renglón. */
.cfbc-p9__prox{display:grid;grid-template-columns:auto minmax(0,1fr);
	align-items:baseline;gap:2px var(--cafati-e-2);
	margin:var(--cafati-e-3) 0 0;padding:var(--cafati-e-3);
	border-radius:var(--cafati-r-md);background:var(--cafati-menta-tenue);
	border:1px solid var(--cafati-linea);font-size:14.5px;color:var(--cafati-texto-tenue)}
.cfbc-p9__prox .cfbc-lp__pulso{grid-row:1;align-self:center}
.cfbc-p9__prox-r{grid-column:2;line-height:1.3}
.cfbc-p9__prox strong{grid-column:2;color:var(--cafati-verde);font-weight:800;
	font-size:15.5px;line-height:1.35;text-wrap:balance}

/* Los plegados de contenido reusan el molde de «ver todo lo que incluye»: un solo modo de abrir
 * cosas en este sitio. Lo propio es el interior, que aquí es prosa y no una lista de datos. */
.cfbc-p9__mas > .cfbc-lp__mas{margin-bottom:var(--cafati-e-3)}
.cfbc-p9__masin{padding:0 var(--cafati-e-4) var(--cafati-e-4);
	border-top:1px solid var(--cafati-linea)}
.cfbc-p9__masin p{margin:var(--cafati-e-3) 0 0;max-width:68ch;font-size:15px;line-height:1.7;
	color:var(--cafati-texto-tenue)}
.cfbc-p9__masin strong{color:var(--cafati-grafito);font-weight:800}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.661] LA FICHA, REDISTRIBUIDA · carril + contenido
 *
 * Dirección: *«distribuye todo el contenido de una manera óptima para Móvil y Desktop»*.
 *
 * Era una columna de nueve bloques apilados: bien en un teléfono —no hay otra— y un desperdicio en
 * escritorio, donde además obliga a subir para recordar de quién es la ficha.
 *
 * 🔴 **En móvil el orden NO cambia** —quién es, su agenda, la prueba—: el carril es simplemente el
 * primer bloque. La rejilla y la fijación aparecen solo cuando hay ancho para las dos columnas, y
 * lo decide el CSS: un segundo marcado para móvil sería otra cosa que mantener y otra que se
 * desincroniza.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-p9__wrap{display:grid;gap:var(--cafati-e-5)}
.cfbc-p9__col{min-width:0}
/* 🔴 [mb1.665] EL BOTÓN DEL CARRIL, SOBRIO. Dirección: *«más pequeño, minimalista, formal»*.
 *
 * Formal aquí no es «apagado»: sigue siendo la acción de la ficha y sigue siendo verde sólido —
 * quitarle el relleno lo habría convertido en un enlace más entre otros—. Lo que cambia es el
 * VOLUMEN: 44 px en vez de la altura de portada, cuerpo de 15, radio de pieza en vez de cápsula,
 * y el ancho justo de su texto en vez de todo el carril.
 *
 * ⚠️ Los 44 px no bajan. Es lo mínimo del proyecto y «minimalista» no es una excepción a eso. */
/* [mb1.717] A ANCHO COMPLETO. Con el enlace suelto fuera, este es EL botón de la columna y tiene
 * que leerse como tal: en 300 px uno corto pegado a la izquierda parece un enlace más. */
.cfbc-p9__railcta{margin:var(--cafati-e-4) 0 0}
.cfbc-scope a.cfbc-p9__cta,.cfbc-scope a.cfbc-p9__cta:link,
.cfbc-scope a.cfbc-p9__cta:visited{display:flex;width:100%;align-items:center;justify-content:center;
	min-height:44px;padding:0 var(--cafati-e-4);border-radius:var(--cafati-r-md);
	background:var(--cafati-verde);color:var(--cafati-papel);
	font-size:15px;font-weight:700;letter-spacing:.01em;line-height:1.2;text-decoration:none;
	transition:background .16s ease,transform .16s ease}
.cfbc-scope a.cfbc-p9__cta:hover{background:var(--cafati-purpura);transform:translateY(-1px)}
.cfbc-p9__cta:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}

/* 🔴 EL ESTADO VACÍO, CON SALIDA. Decía «vuelve a mirar» y ahí se acababa la página para quien
 * venía a reservar. Se puede ofrecer otra doctora sin faltar a la verdad porque **la hora es de la
 * COMUNA**, no de la persona — es la política del proyecto, no un apaño de esta pantalla. */
.cfbc-p9__vacia{margin:0 0 var(--cafati-e-3);max-width:62ch;font-size:15.5px;line-height:1.65;
	color:var(--cafati-texto-tenue)}
.cfbc-p9__vacia-t{margin:var(--cafati-e-4) 0 var(--cafati-e-2);font-size:15px;font-weight:700;
	color:var(--cafati-grafito)}
.cfbc-p9__vacia-wa{margin:var(--cafati-e-4) 0 0}
/* ── [mb1.660] LAS RESEÑAS, TODAS PLEGADAS Y SOBRE EL FONDO DE LA PÁGINA ───────────────────────
 *
 * Dirección: *«no me gusta la transición, las escondería todas plegadas con un botón más
 * minimalista, y que salieran sobre el fondo principal»*.
 *
 * Las tres cosas venían del mismo error: mb1.659 reusó el molde de «ver todo lo que incluye», que
 * es una caja con fondo, borde y sombra. Allí sirve —envuelve párrafos que necesitan superficie—;
 * aquí sobraba, porque las tarjetas ya traen la suya. 🔴 **Reusar un molde no es gratis: se hereda
 * también lo que ese molde resolvía en otro sitio.**
 *
 * Este no lleva caja. Nada. El control es texto con una punta de flecha, y lo que se abre cae
 * directamente sobre el papel de la página. */
.cfbc-p9__rver{margin:var(--cafati-e-3) 0 0;background:none;border:0;padding:0}

/* El control: mínimo de verdad —sin fondo, sin borde, sin sombra— pero con el alto de un pulgar,
 * que no es negociable ni en lo mínimo. */
.cfbc-scope .cfbc-p9__rver > summary{display:inline-flex;align-items:center;
	gap:var(--cafati-e-2);min-height:44px;padding:0;cursor:pointer;list-style:none;
	font-size:14.5px;font-weight:700;color:var(--cafati-purpura)}
.cfbc-scope .cfbc-p9__rver > summary::-webkit-details-marker{display:none}
.cfbc-scope .cfbc-p9__rver > summary:hover{text-decoration:underline;text-underline-offset:4px}
.cfbc-scope .cfbc-p9__rver > summary:focus-visible{outline:3px solid var(--cafati-purpura);
	outline-offset:3px;border-radius:var(--cafati-r-md)}
/* La flecha DICE el estado: apunta abajo cerrado, arriba abierto. Es información, no adorno. */
.cfbc-scope .cfbc-p9__rver > summary::after{content:'\203A';font-size:19px;line-height:1;
	transform:rotate(90deg);transition:transform .18s ease}
.cfbc-scope .cfbc-p9__rver[open] > summary::after{transform:rotate(-90deg)}

/* 🔴 Y DICE QUÉ HARÁ AL PULSARLO OTRA VEZ. «Ver las 6 reseñas» ⇄ «Ocultar las reseñas», alternadas
 * por `[open]` con CSS puro: **un control que no lo dice obliga a probar.** */
.cfbc-p9__rver-b{display:none}
.cfbc-p9__rver[open] .cfbc-p9__rver-a{display:none}
.cfbc-p9__rver[open] .cfbc-p9__rver-b{display:inline}

/* Lo que se abre cae sobre el fondo de la página: ni superficie, ni sangría, ni línea de más. Las
 * tarjetas ya traen su relleno y su separador. */
.cfbc-p9__rver .cfbc-p9__rlista{margin:var(--cafati-e-2) 0 0;padding:0;background:none;border:0}

/* Las salidas: tarjetas con rótulo y explicación. El texto del enlace DICE a dónde va —«ver la
 * cobertura completa» posiciona; «haz clic aquí» no posiciona nada— y por eso el nombre va en
 * negrita y la explicación debajo, no al revés. */
.cfbc-p9__salgrid{display:grid;gap:var(--cafati-e-3);margin:0;padding:0;list-style:none;
	grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.cfbc-scope .cfbc-p9__salgrid a,.cfbc-scope .cfbc-p9__salgrid a:link,
.cfbc-scope .cfbc-p9__salgrid a:visited{display:flex;flex-direction:column;gap:4px;
	min-height:76px;justify-content:center;padding:var(--cafati-e-3) var(--cafati-e-4);
	border-radius:var(--cafati-r-md);background:var(--cafati-papel);
	border:1px solid var(--cafati-linea);text-decoration:none;
	transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.cfbc-scope .cfbc-p9__salgrid a:hover,.cfbc-scope .cfbc-p9__salgrid a:focus-visible{
	border-color:var(--cafati-purpura);box-shadow:var(--cafati-sombra-sm);transform:translateY(-1px)}
.cfbc-p9__salgrid a:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-p9__salgrid strong{font-size:15.5px;font-weight:800;line-height:1.3;color:var(--cafati-purpura)}
.cfbc-p9__salgrid span{font-size:13.5px;line-height:1.5;color:var(--cafati-texto-tenue)}
.cfbc-lp__intro{margin:0 0 var(--cafati-e-5);max-width:62ch;font-size:16px;line-height:1.65;
	color:var(--cafati-texto-tenue)}

/* ── [mb1.628] EL CONCEPTO, EL DETALLE PLEGADO Y EL SELECTOR ───────────────────────────────────
 *
 * La frase de arranque es la que contesta «¿qué es esto y qué me cuesta de verdad?», así que se
 * escribe más grande que un párrafo normal y las dos ideas que la definen van en negrita. No es
 * un titular —el titular ya está— sino la bajada que lo hace concreto. */
.cfbc-lp__lead{margin:0 0 var(--cafati-e-5);max-width:58ch;font-size:18px;line-height:1.6;
	color:var(--cafati-grafito)}
.cfbc-lp__lead strong{font-weight:800;color:var(--cafati-verde)}

/* El plegado. `<details>` nativo: sin JavaScript, con teclado y legible por el buscador. El
 * resumen se viste de control —no de texto subrayado— porque lo es: se pulsa y pasa algo. */
.cfbc-lp__mas{margin:0 0 var(--cafati-e-6);border-radius:var(--cafati-r-md);
	background:var(--cafati-papel);border:1px solid var(--cafati-linea)}
.cfbc-scope .cfbc-lp__mas > summary{display:flex;align-items:center;gap:var(--cafati-e-2);
	min-height:52px;padding:0 var(--cafati-e-4);cursor:pointer;list-style:none;
	font-size:15.5px;font-weight:800;color:var(--cafati-purpura)}
.cfbc-scope .cfbc-lp__mas > summary::-webkit-details-marker{display:none}
/* La flecha DICE el estado —cerrado apunta a la derecha, abierto hacia abajo—: es información,
 * no adorno, y por eso gira en vez de cambiar de color. */
.cfbc-scope .cfbc-lp__mas > summary::before{content:'\203A';font-size:22px;line-height:1;
	transition:transform .18s ease;transform:translateY(-1px)}
.cfbc-scope .cfbc-lp__mas[open] > summary::before{transform:rotate(90deg)}
.cfbc-scope .cfbc-lp__mas > summary:hover{background:var(--cafati-purpura-tenue);
	border-radius:var(--cafati-r-md)}
.cfbc-scope .cfbc-lp__mas > summary:focus-visible{outline:3px solid var(--cafati-purpura);
	outline-offset:-3px;border-radius:var(--cafati-r-md)}
.cfbc-lp__masl{margin:0;padding:0 var(--cafati-e-4) var(--cafati-e-4);
	border-top:1px solid var(--cafati-linea)}
.cfbc-lp__masl dt{margin:var(--cafati-e-4) 0 var(--cafati-e-1);font-size:15px;font-weight:800;
	color:var(--cafati-verde)}
.cfbc-lp__masl dd{margin:0;max-width:64ch;font-size:14.5px;line-height:1.65;
	color:var(--cafati-texto-tenue)}

/* El selector. Va en su propia bandeja porque cambia de registro: arriba se EXPLICA la visita,
 * aquí se ELIGE. Dos cosas distintas en la misma sección necesitan una frontera visible. */
.cfbc-lp__sel{margin:0;padding:var(--cafati-e-5);border-radius:var(--cafati-r-lg);
	background:var(--cafati-menta-tenue);border:1px solid var(--cafati-linea)}
.cfbc-lp__selt{margin:0;font-size:20px;font-weight:800;color:var(--cafati-verde);
	line-height:1.25;text-wrap:balance}
.cfbc-lp__seld{margin:var(--cafati-e-2) 0 var(--cafati-e-4);max-width:56ch;font-size:15px;
	line-height:1.6;color:var(--cafati-texto-tenue)}
.cfbc-lp__fam{margin:0 0 var(--cafati-e-4)}
.cfbc-lp__fam:last-child{margin-bottom:0}
/* [mb1.633] El rótulo de familia con su línea: separa un grupo del siguiente sin añadir color ni
 * cajas. Es lo mínimo que hace falta para que se vea que son grupos y no una lista continua. */
.cfbc-lp__famt{display:flex;align-items:center;gap:var(--cafati-e-3);
	margin:0 0 var(--cafati-e-3);font-size:13px;font-weight:800;letter-spacing:.08em;
	text-transform:uppercase;color:var(--cafati-texto-tenue)}
.cfbc-lp__famt::after{content:'';flex:1 1 auto;height:1px;background:var(--cafati-linea)}
.cfbc-lp__famd{margin:0 0 var(--cafati-e-2);max-width:56ch;font-size:14px;line-height:1.6;
	color:var(--cafati-texto-tenue)}
/* Los adicionales se separan con una línea: no son alternativas a la visita, se le suman, y esa
 * diferencia tiene que verse antes de leer la frase que la explica. */
.cfbc-lp__fam--add{padding-top:var(--cafati-e-4);border-top:1px solid var(--cafati-linea)}
/* 🔴 [mb1.633] REJILLA, NO PÍLDORAS SUELTAS. Dirección: «las categorías las veo muy desordenadas,
 * podrían ser más minimalistas y mejor formateadas».
 *
 * El desorden no era de los nombres: era de la FORMA. Píldoras que se ajustan a su texto y se
 * envuelven solas dan filas ragged —«Curación simple» junto a «Plan anual · 2 vacunas +
 * antiparasitario»— y ninguna columna coincide con la de abajo. **Una lista donde nada se alinea
 * se lee como un montón, aunque cada pieza esté bien hecha.**
 *
 * Columnas de ancho igual, que sí coinciden. Es la misma rejilla que ya usa la vitrina de
 * servicios de esta página: un solo modo de ordenar cosas por pantalla. */
.cfbc-lp__chips{display:grid;gap:var(--cafati-e-2);margin:0;padding:0;list-style:none;
	grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr))}

/* 🔴 EL CHIP HABLA EL IDIOMA DE LAS HORAS: lila en reposo, morado sólido al pasar por encima.
 * Dirección lo pidió expresamente para las horas —«usa el mismo formato siempre»— y aquí dice
 * lo mismo: esto se pulsa y te lleva a reservarlo. No se aprende un lenguaje nuevo por pantalla. */
/* [mb1.633] De píldora a FILA. El radio de 999px es de etiqueta y estos son elementos de una
 * lista que se elige: radio de tarjeta, texto a la izquierda como se lee cualquier lista, y una
 * punta de flecha a la derecha que dice que lleva a alguna parte. Se conserva el color —lila en
 * reposo, morado al pasar— porque esa gramática es la de las horas y no se toca. */
.cfbc-scope a.cfbc-lp__chip,.cfbc-scope a.cfbc-lp__chip:link,
.cfbc-scope a.cfbc-lp__chip:visited{display:flex;align-items:center;gap:var(--cafati-e-2);
	justify-content:space-between;min-height:48px;
	padding:var(--cafati-e-2) var(--cafati-e-3);border-radius:var(--cafati-r-md);
	background:var(--cafati-purpura-tenue);color:var(--cafati-purpura);
	border:1px solid color-mix(in srgb, var(--cafati-purpura) 30%, var(--cafati-papel));
	font-size:14.5px;font-weight:700;line-height:1.3;text-decoration:none;
	transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.cfbc-scope a.cfbc-lp__chip::after{content:'\203A';flex:0 0 auto;font-size:18px;line-height:1;
	opacity:.6}
.cfbc-scope a.cfbc-lp__chip:hover,.cfbc-scope a.cfbc-lp__chip:focus-visible{
	background:var(--cafati-purpura);color:var(--cafati-papel);
	border-color:var(--cafati-purpura);transform:translateY(-1px)}
.cfbc-scope a.cfbc-lp__chip:focus-visible{outline:3px solid var(--cafati-purpura);
	outline-offset:2px}

/* [mb1.630] LA VISITA, DESTACADA. Abría el selector un certificado de viaje y la visita era el
 * tercer chip de la segunda familia — el defecto de mb1.554 otra vez. Ahora va primera y sola, y
 * se ve que lo es: morado sólido desde el reposo, que en esta página significa «esto es lo que vas
 * a tomar». Los demás chips siguen en lila hasta que se les pasa por encima. */
.cfbc-lp__fam--base{padding-bottom:var(--cafati-e-4);
	border-bottom:1px solid var(--cafati-linea)}
.cfbc-lp__fam--base .cfbc-lp__chips{grid-template-columns:1fr}
.cfbc-scope a.cfbc-lp__chip--base,.cfbc-scope a.cfbc-lp__chip--base:link,
.cfbc-scope a.cfbc-lp__chip--base:visited{min-height:56px;padding:0 var(--cafati-e-4);
	background:var(--cafati-purpura);color:var(--cafati-papel);
	border-color:var(--cafati-purpura);font-size:15.5px;font-weight:800;
	box-shadow:var(--cafati-sombra-sm)}
.cfbc-scope a.cfbc-lp__chip--base:hover,.cfbc-scope a.cfbc-lp__chip--base:focus-visible{
	background:var(--cafati-verde);border-color:var(--cafati-verde);color:var(--cafati-papel)}

/* El plegado DENTRO de una familia se viste más callado que el de «ver todo lo que incluye»: es un
 * control secundario dentro de un bloque, no la acción de una sección. Sin caja y sin fondo. */
.cfbc-lp__mas--chips{margin:var(--cafati-e-2) 0 0;background:none;border:0}
.cfbc-scope .cfbc-lp__mas--chips > summary{min-height:44px;padding:0;font-size:14px}
.cfbc-scope .cfbc-lp__mas--chips > summary:hover{background:none;text-decoration:underline}
.cfbc-lp__mas--chips .cfbc-lp__chips{margin-top:var(--cafati-e-2)}

/* ── Cómo funciona · la numeración ES información: es una secuencia real ─────────────────── */
.cfbc-lp__ol{display:grid;gap:var(--cafati-e-4);margin:0;padding:0;list-style:none;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cfbc-lp__ol li{position:relative;padding:var(--cafati-e-3);
	border-radius:var(--cafati-r-md);background:var(--cafati-papel);
	border:1px solid var(--cafati-linea);box-shadow:var(--cafati-sombra-sm)}
/* [mb1.627] El globo entra en la tarjeta. Colgaba fuera con `position:absolute` y 24 px por
 * encima del borde: se montaba sobre el titular de la sección, y en el teléfono —donde las
 * tarjetas se apilan con ese mismo hueco de 24— aterrizaba sobre la tarjeta anterior.
 * Un adorno que vive fuera de su caja depende de que el vecino no se acerque. */
.cfbc-lp__pcab{display:flex;align-items:center;gap:var(--cafati-e-3);
	margin:0 0 var(--cafati-e-2)}
.cfbc-lp__n{display:inline-flex;align-items:center;justify-content:center;
	flex:0 0 auto;width:40px;height:40px;
	border-radius:50%;background:var(--cafati-purpura);color:var(--cafati-papel);
	font-size:18px;font-weight:800;box-shadow:var(--cafati-sombra-sm)}
.cfbc-lp__ol h3{margin:0;font-size:18px;font-weight:800;color:var(--cafati-verde);
	line-height:1.25;text-wrap:balance}
.cfbc-lp__ol p{margin:0;font-size:15px;line-height:1.65;color:var(--cafati-texto-tenue)}

/* ── LOS CHIPS DE COMUNA ──────────────────────────────────────────────────────────────────────
 *
 * Aquí vivía el mapa de Google por región. Se fue con mb1.611: con el país dibujado arriba, aquel
 * embebido repetía «dónde queda esto» a quien vive ahí y traía el peso de Google a media página.
 * Sus reglas se van con él — una regla que sobrevive a su HTML compite y gana por `:link`.
 *
 * Los chips se quedan: son la cobertura en texto, y cada uno un atajo a su agenda. */
.cfbc-mapa__ley{display:flex;flex-wrap:wrap;gap:var(--cafati-e-2);margin:0;padding:0;list-style:none}
.cfbc-mapa__c{display:inline-flex;align-items:center;gap:var(--cafati-e-2);min-height:44px;
	padding:var(--cafati-e-2) var(--cafati-e-3);border-radius:var(--cafati-r-lg);
	background:var(--cafati-purpura-tenue);border:1px solid var(--cafati-purpura-suave);
	text-decoration:none}
.cfbc-scope a.cfbc-mapa__c,.cfbc-scope a.cfbc-mapa__c:link,
.cfbc-scope a.cfbc-mapa__c:visited{color:var(--cafati-verde)}
.cfbc-scope a.cfbc-mapa__c:hover{background:var(--cafati-purpura-suave);
	border-color:var(--cafati-purpura)}
.cfbc-mapa__c:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-mapa__punto{width:10px;height:10px;border-radius:50%;background:var(--cafati-purpura);
	flex:0 0 auto}
.cfbc-mapa__c strong{font-size:14.5px;font-weight:800;color:var(--cafati-verde)}
.cfbc-mapa__cn{font-size:13.5px;color:var(--cafati-texto-tenue)}
.cfbc-mapa__c--fija{border-style:dashed;background:var(--cafati-marfil)}
.cfbc-mapa__c--fija strong{color:var(--cafati-texto-tenue)}
.cfbc-mapa__c--fija .cfbc-mapa__punto{background:var(--cafati-neutro)}

/* ── EL ALCANCE NACIONAL · Chile en tres paneles ───────────────────────────────────────────────
 *
 * Dirección: *«no se identifica bien el mapa, se ve demasiado pequeño»*. El problema era
 * geográfico: 4.300 km de largo por 180 de ancho, dibujado a un alto que quepa en una página, deja
 * cada región en cuatro píxeles. Se parte en Norte · Centro · Sur, cada uno con su encuadre.
 *
 * MÓVIL PRIMERO, y aquí es literal: tres columnas no caben en 375 px —cada una quedaría en 110 y
 * volveríamos al problema—, así que en el teléfono se APILAN y cada zona usa el ancho entero. Se
 * lee incluso mejor que en escritorio.
 *
 * ⚠️ Nada de scroll horizontal. Es la tentación obvia con un país así y es una trampa: dentro de
 * una página que ya hace scroll vertical, un carrusel se pelea con el dedo y media pantalla de
 * contenido no se descubre nunca. */
.cfbc-cl{margin:0 0 var(--cafati-e-6);padding:var(--cafati-e-5);
	border-radius:var(--cafati-r-lg);background:var(--cafati-menta-tenue);
	border:1px solid var(--cafati-linea)}
.cfbc-cl__txt{min-width:0;max-width:56ch}
.cfbc-cl__n{margin:0;font-size:17px;font-weight:600;color:var(--cafati-texto-tenue);line-height:1.2}
.cfbc-cl__n strong{font-size:40px;font-weight:800;color:var(--cafati-verde);line-height:1;
	font-variant-numeric:tabular-nums;font-feature-settings:var(--cafati-tabular);
	margin-right:var(--cafati-e-1)}
.cfbc-cl__s{margin:var(--cafati-e-2) 0 0;font-size:14.5px;line-height:1.6;
	color:var(--cafati-texto-tenue)}
.cfbc-cl__chips{display:flex;flex-wrap:wrap;gap:var(--cafati-e-2);
	margin:var(--cafati-e-3) 0 0;padding:0;list-style:none}
.cfbc-cl__chips li{font-size:13px;font-weight:800;color:var(--cafati-purpura);
	background:var(--cafati-purpura-tenue);border:1px solid var(--cafati-purpura-suave);
	border-radius:var(--cafati-r-lg);padding:0 var(--cafati-e-3)}


/* Los tres paneles. Apilados en el teléfono; en columnas cuando hay ancho de sobra. */
.cfbc-cl__mapas{display:grid;gap:var(--cafati-e-4);margin:var(--cafati-e-5) 0 0}
.cfbc-cl__z{padding:var(--cafati-e-4);border-radius:var(--cafati-r-md);
	background:var(--cafati-papel);border:1px solid var(--cafati-linea)}
/* La zona donde SÍ llegamos se distingue del resto por su borde, no por un color de fondo: el
 * fondo ya lo usa la tarjeta y dos rellenos compitiendo se leen como dos niveles distintos. */
.cfbc-cl__z.is-on{border-color:var(--cafati-purpura-suave);box-shadow:var(--cafati-sombra-sm)}
.cfbc-cl__zt{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cafati-e-2);
	margin:0 0 var(--cafati-e-3);font-size:15px;font-weight:800;letter-spacing:.04em;
	text-transform:uppercase;color:var(--cafati-verde)}
.cfbc-cl__zt span{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
	color:var(--cafati-texto-tenue)}
.cfbc-cl__z.is-on .cfbc-cl__zt span{color:var(--cafati-purpura);font-weight:800}

/* El lienzo: el mapa a la izquierda y los nombres colgando a su altura, como en un atlas. */
/* [mb1.639] El alto lo decide el PHP: un panel más corto que `nº de regiones × 44` no puede darle
 * a cada etiqueta su sitio sin que pise a la vecina. La variable llega por atributo. */
.cfbc-cl__lienzo{position:relative;display:grid;grid-template-columns:74px 1fr;
	gap:var(--cafati-e-3);min-height:var(--cl-alto,220px)}
.cfbc-cl__svg{width:100%;height:100%;display:block;overflow:visible}
/* 🔴 [mb1.621] EL CONTORNO ES LO QUE HACE QUE HAYA REGIONES Y NO UNA MANCHA. Un relleno sin
 * borde no tiene límite: tiene final, que no es lo mismo. Del color del papel, para que la
 * línea SEPARE en vez de añadir un trazo más al dibujo. */
.cfbc-cl__svg path{stroke:var(--cafati-papel);stroke-width:.9;stroke-linejoin:round;
	vector-effect:non-scaling-stroke}
/* Y tonos alternados: en una cadena norte→sur, dos bastan para que ninguna vecina repita. */
.cfbc-cl__off.is-a{fill:var(--cafati-linea)}
.cfbc-cl__off.is-b{fill:color-mix(in srgb, var(--cafati-linea) 62%, var(--cafati-papel))}
.cfbc-scope .cfbc-cl__on.is-a path{fill:var(--cafati-purpura)}
/* La vecina encendida va un punto más clara: Valparaíso y Metropolitana se tocan, y con el
 * mismo morado se leían como una sola región. */
.cfbc-scope .cfbc-cl__on.is-b path{
	fill:color-mix(in srgb, var(--cafati-purpura) 62%, var(--cafati-papel))}
.cfbc-scope .cfbc-cl__on:hover path,.cfbc-scope .cfbc-cl__on:focus path{
	fill:var(--cafati-verde);stroke:var(--cafati-papel);stroke-width:1.4}
.cfbc-cl__on{cursor:pointer}
.cfbc-cl__on:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}

/* Las etiquetas: cada una a la altura de su región, en HTML para que midan lo que dicen medir. */
.cfbc-cl__etq{position:relative;margin:0;padding:0;list-style:none}
.cfbc-cl__etq li{position:absolute;left:0;transform:translateY(-50%);
	font-size:13px;line-height:1.2;white-space:nowrap}
.cfbc-cl__etq span{color:var(--cafati-texto-tenue)}
/* [mb1.639] 44 px, ahora que las etiquetas van separadas y no se pisan entre sí. */
.cfbc-scope .cfbc-cl__etq a,.cfbc-scope .cfbc-cl__etq a:link,
.cfbc-scope .cfbc-cl__etq a:visited{display:inline-flex;align-items:center;min-height:44px;
	font-weight:800;color:var(--cafati-purpura);text-decoration:none}
.cfbc-scope .cfbc-cl__etq a:hover{text-decoration:underline}
.cfbc-cl__etq a:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
@media (min-width:760px){
	.cfbc-lp__cierre{padding:var(--cafati-e-7) var(--cafati-e-6)}
	.cfbc-lp__cierre h2{font-size:32px}
}
/* El ritmo entre secciones de la landing. Son ganchos de sección, no adornos: cada bloque de la
 * página necesita respirar distinto según lo que pide al visitante —los pasos se leen seguidos,
 * la cobertura se explora—. Sin regla propia una clase no rompe: simplemente no pinta, y esa es
 * la avería silenciosa que este proyecto ya cazó media docena de veces. */
.cfbc-lp__pasos{margin-top:var(--cafati-e-7)}
.cfbc-lp__cob{margin-top:var(--cafati-e-7);scroll-margin-top:var(--cafati-e-6)}
.cfbc-lp__svc{margin-top:var(--cafati-e-7)}
.cfbc-lp__eq{margin-top:var(--cafati-e-7)}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.599] LA LANDING, COMPLETA · portada con foto, precio, comparativa, preguntas y barra fija
 *
 * Dirección: *«le faltan muchos detalles»* · *«saca ideas del mercado y que sea perfecta»*.
 *
 * El reparto de color no cambia y es lo que mantiene la página cosida:
 *   VERDE  — marca y acción principal.
 *   MORADO — el acento humano: pasos, mapa, vía alternativa, equipo, el «✓» de lo incluido y la
 *            columna «en tu casa» de la comparativa. Nunca es la acción primaria.
 *   ÁMBAR / ROJO — no aparecen. Son semánticos y aquí no hay nada urgente que decir.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── PORTADA ─────────────────────────────────────────────────────────────────────────────────
 * Móvil: una columna, y el TITULAR va antes que la foto. Una imagen grande arriba empuja el
 * mensaje y el precio fuera de la primera pantalla, que es justo lo que hay que proteger. */
/* [mb1.632] DOS PISOS: el mensaje con su foto arriba, el ALCANCE debajo. La rejilla de dos
 * columnas baja al primer piso; la sección pasa a ser una pila. */
.cfbc-lp__portada{padding:var(--cafati-e-5) 0}
.cfbc-lp__ptop{display:grid;gap:var(--cafati-e-5);align-items:start}

/* [mb1.638] LA FRANJA COMERCIAL, de borde a borde. El precio, los dos botones y la hora más
 * próxima vivían dentro de la columna del mensaje, y con la foto midiendo 263 px frente a
 * los 553 de esa columna quedaban 322 px de nada a su derecha. 🔴 **Dos columnas solo
 * funcionan mientras las dos tengan algo que decir**: en cuanto una se vacía deja de ser una
 * columna y pasa a ser un margen.
 *
 * Aquí cruzan el ancho entero, así que no queda mitad vacía — y el precio, que es la duda
 * número uno de quien llega, deja de leerse estrujado en media página. */
.cfbc-lp__pbajo{display:flex;flex-direction:column;gap:var(--cafati-e-4);
	margin:var(--cafati-e-5) 0 0}
.cfbc-lp__pbajo .cfbc-lp__precio{margin:0}
.cfbc-lp__pbajo .cfbc-lp__cta{margin:0}
.cfbc-lp__pbajo .cfbc-lp__vivo{margin:0}

/* El alcance, dentro de la portada y con su propia frontera: es otro asunto —dónde llegamos— y
 * necesita verse como un bloque aparte sin salirse de la primera pantalla. */
.cfbc-lp__alcance{margin:var(--cafati-e-5) 0 0;padding:var(--cafati-e-5);
	border-radius:var(--cafati-r-lg);background:var(--cafati-papel);
	border:1px solid var(--cafati-linea);box-shadow:var(--cafati-sombra-sm)}
.cfbc-lp__alct{display:flex;flex-wrap:wrap;align-items:flex-end;
	justify-content:space-between;gap:var(--cafati-e-3);margin:0 0 var(--cafati-e-4)}
.cfbc-lp__alch{margin:0;font-family:var(--cafati-fuente);font-size:26px;font-weight:800;
	line-height:1.2;letter-spacing:-.02em;color:var(--cafati-verde);text-wrap:balance}
/* El botón que baja a la lista: el mapa dice DÓNDE y la lista dice CUÁNDO, y quien busca su
 * comuna quiere la segunda. Va perfilado y no relleno para no competir con «Agendar ahora». */
.cfbc-scope a.cfbc-lp__alcb,.cfbc-scope a.cfbc-lp__alcb:link,
.cfbc-scope a.cfbc-lp__alcb:visited{display:inline-flex;align-items:center;min-height:44px;
	padding:0 var(--cafati-e-4);border-radius:999px;background:var(--cafati-purpura-tenue);
	border:1.5px solid color-mix(in srgb, var(--cafati-purpura) 42%, var(--cafati-papel));
	color:var(--cafati-purpura);font-size:14.5px;font-weight:800;text-decoration:none;
	transition:background .16s ease,color .16s ease,border-color .16s ease}
.cfbc-scope a.cfbc-lp__alcb:hover,.cfbc-scope a.cfbc-lp__alcb:focus-visible{
	background:var(--cafati-purpura);color:var(--cafati-papel);border-color:var(--cafati-purpura)}
.cfbc-lp__alcb:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
/* Embebido en la portada, el mapa no trae su propia caja: ya está dentro de una. */
.cfbc-cl--embebido{margin:0;padding:0;background:none;border:0}
/* [mb1.666] Y los chips se despegan del mapa: son la respuesta en PALABRAS y el mapa la misma
 * en dibujo. Pegados parecían el pie de foto de algo que aún no había aparecido. */
.cfbc-cl__chips--solo{margin:0 0 var(--cafati-e-5)}
.cfbc-lp__eyebrow{margin:0 0 var(--cafati-e-2);font-size:13.5px;font-weight:800;
	letter-spacing:.09em;text-transform:uppercase;color:var(--cafati-purpura)}
/* 🔴 EL MISMO TITULAR QUE LA PÁGINA DE COMUNA. Aquella usa `Inter 700, tracking −0,02em, verde`
 * (`.cfbc-hero__h1`); esta llevaba familia editorial propia y una cursiva que la hacía parecer otra
 * fuente. **Dos páginas del mismo sitio con dos titulares distintos se leen como dos sitios.**
 * Lo único que cambia es el TAMAÑO, porque esto es una portada y aquello un encabezado. */
.cfbc-lp__h1{margin:0 0 var(--cafati-e-4);font-family:var(--cafati-fuente);
	font-size:38px;line-height:1.1;font-weight:700;color:var(--cafati-verde);
	letter-spacing:-.02em;text-wrap:balance}
/* El énfasis lo hace el COLOR, no una segunda tipografía: «a tu casa» es lo que distingue al
 * servicio, y el morado lo dice sin cambiar de voz. */
.cfbc-lp__h1 em{font-style:normal;color:var(--cafati-purpura)}
.cfbc-lp__bajada{margin:0 0 var(--cafati-e-5);max-width:56ch;font-size:17px;line-height:1.65;
	color:var(--cafati-texto-tenue)}

/* El precio: la segunda pregunta de todo el mundo, resuelta en la primera pantalla. */
.cfbc-lp__precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cafati-e-2);
	margin:0 0 var(--cafati-e-4);padding:var(--cafati-e-3) var(--cafati-e-4);
	border-radius:var(--cafati-r-md);background:var(--cafati-menta-tenue);
	border:1px solid var(--cafati-linea)}
.cfbc-lp__pdesde{font-size:14px;color:var(--cafati-texto-tenue)}
.cfbc-lp__precio strong{font-size:30px;font-weight:800;color:var(--cafati-verde);
	font-variant-numeric:tabular-nums;font-feature-settings:var(--cafati-tabular);line-height:1}
.cfbc-lp__pnota{font-size:13.5px;color:var(--cafati-texto-tenue);flex-basis:100%}

/* 🔴 LA PRUEBA DE VIDA. El punto NO parpadea: la guía prohíbe animar donde alguien decide algo
 * importante, y además un pulso sobre un dato real lo convierte en publicidad. Es un punto
 * sólido con halo — presencia, no movimiento. */
.cfbc-lp__vivo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cafati-e-2);
	margin:var(--cafati-e-4) 0 0;font-size:14.5px;color:var(--cafati-texto-tenue)}
.cfbc-lp__pulso{width:10px;height:10px;border-radius:50%;background:var(--cafati-exito);
	box-shadow:0 0 0 4px color-mix(in srgb, var(--cafati-exito) 22%, transparent);flex:0 0 auto}
.cfbc-lp__vivo strong{color:var(--cafati-verde);font-weight:800;
	font-variant-numeric:tabular-nums;font-feature-settings:var(--cafati-tabular)}
.cfbc-scope .cfbc-lp__vivo a,.cfbc-scope .cfbc-lp__vivo a:link,
.cfbc-scope .cfbc-lp__vivo a:visited{display:inline-flex;align-items:center;min-height:44px;
	color:var(--cafati-verde-accion);font-weight:700;text-decoration:underline}

/* La foto de la visita real: marco redondeado y relieve, como el resto de las piezas. */
.cfbc-lp__pfoto{margin:0;border-radius:var(--cafati-r-lg);overflow:hidden;
	box-shadow:var(--cafati-sombra-lg);background:var(--cafati-menta-tenue)}
/* [mb1.637] 16:9, que es como fue tomada. El 4:3 con `cover` recortaba por los lados y se
 * comía a la doctora y a la tutora, que son las que hacen que la foto cuente algo. */
.cfbc-lp__pfoto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ── QUÉ INCLUYE ─────────────────────────────────────────────────────────────────────────── */
.cfbc-lp__inc{margin-top:var(--cafati-e-6)}
.cfbc-lp__inclista{display:grid;gap:var(--cafati-e-3);margin:0;padding:0;list-style:none;
	grid-template-columns:1fr}
.cfbc-lp__inclista li{display:grid;gap:2px var(--cafati-e-3);
	grid-template-columns:28px 1fr;align-items:start;
	padding:var(--cafati-e-3);border-radius:var(--cafati-r-md);
	background:var(--cafati-papel);border:1px solid var(--cafati-linea)}
.cfbc-lp__tick{grid-row:1 / span 2;display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;border-radius:50%;background:var(--cafati-purpura-suave);
	color:var(--cafati-purpura);font-size:15px;font-weight:800}
.cfbc-lp__inclista strong{font-size:16px;font-weight:800;color:var(--cafati-verde)}
.cfbc-lp__inclista li>span:last-child{font-size:14.5px;line-height:1.65;
	color:var(--cafati-texto-tenue)}

/* ── POR QUÉ EN CASA · la comparación ────────────────────────────────────────────────────────
 * Móvil: una columna y cada celda dice de cuál lado habla (`__vsonly`). En escritorio la rejilla
 * pasa a tres columnas, aparecen los dos encabezados y esos prefijos se ocultan: la posición ya
 * lo dice. Nunca se ocultan los DOS a la vez — sin encabezado y sin prefijo, la tabla mentiría. */
.cfbc-lp__vsgrid{display:grid;gap:var(--cafati-e-2);grid-template-columns:1fr}
.cfbc-lp__vsh{display:none}
.cfbc-lp__vsrot{margin-top:var(--cafati-e-3);font-size:13px;font-weight:800;letter-spacing:.06em;
	text-transform:uppercase;color:var(--cafati-texto-tenue)}
.cfbc-lp__vsa,.cfbc-lp__vsb{padding:var(--cafati-e-3);border-radius:var(--cafati-r-md);
	font-size:14.5px;line-height:1.65}
.cfbc-lp__vsa{background:var(--cafati-marfil);border:1px solid var(--cafati-linea);
	color:var(--cafati-texto-tenue)}
.cfbc-lp__vsb{background:var(--cafati-purpura-tenue);border:1px solid var(--cafati-purpura-suave);
	color:var(--cafati-grafito)}
.cfbc-lp__vsonly{font-weight:800;color:var(--cafati-verde)}
.cfbc-lp__vsnota{margin:var(--cafati-e-5) 0 0;max-width:64ch;font-size:14px;line-height:1.7;
	color:var(--cafati-texto-tenue);padding-left:var(--cafati-e-3);
	border-left:3px solid var(--cafati-linea)}

/* ── PREGUNTAS · `<details>` nativo, sin una línea de JS ─────────────────────────────────── */
.cfbc-lp__faqlista{display:grid;gap:var(--cafati-e-2)}
.cfbc-lp__q{border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-md);
	background:var(--cafati-papel);overflow:hidden}
.cfbc-lp__q summary{display:flex;align-items:center;justify-content:space-between;
	gap:var(--cafati-e-3);min-height:56px;padding:var(--cafati-e-3) var(--cafati-e-4);
	font-size:16px;font-weight:800;color:var(--cafati-verde);cursor:pointer;list-style:none}
.cfbc-lp__q summary::-webkit-details-marker{display:none}
/* El signo dice en qué estado está, no solo que hay algo que pulsar. */
.cfbc-lp__q summary::after{content:"+";font-size:22px;font-weight:800;line-height:1;
	color:var(--cafati-purpura);flex:0 0 auto}
.cfbc-lp__q[open] summary::after{content:"–"}
.cfbc-lp__q[open] summary{background:var(--cafati-purpura-tenue)}
.cfbc-lp__q p{margin:0;padding:0 var(--cafati-e-4) var(--cafati-e-4);max-width:66ch;
	font-size:15px;line-height:1.7;color:var(--cafati-texto-tenue)}
.cfbc-lp__q summary:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:-3px}

/* ── BARRA FIJA DEL TELÉFONO ─────────────────────────────────────────────────────────────────
 * Solo donde hace falta: en escritorio la portada y el cierre están a un golpe de scroll y esto
 * solo robaría alto. `env(safe-area-inset-bottom)` para no quedar bajo la barra del iPhone. */
.cfbc-lp__barra{position:fixed;left:0;right:0;z-index:40;display:flex;gap:var(--cafati-e-2);
	padding:var(--cafati-e-2) var(--cafati-e-3);
	bottom:0;padding-bottom:calc(var(--cafati-e-2) + env(safe-area-inset-bottom, 0px));
	background:color-mix(in srgb, var(--cafati-papel) 94%, transparent);
	border-top:1px solid var(--cafati-linea);box-shadow:var(--cafati-sombra-lg);
	backdrop-filter:saturate(140%) blur(8px)}
.cfbc-scope a.cfbc-lp__bb1,.cfbc-scope a.cfbc-lp__bb1:link,.cfbc-scope a.cfbc-lp__bb1:visited{
	flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;min-height:50px;
	border-radius:var(--cafati-r-lg);background:var(--cafati-verde);color:var(--cafati-papel);
	font-size:16.5px;font-weight:800;text-decoration:none}
.cfbc-scope a.cfbc-lp__bb2,.cfbc-scope a.cfbc-lp__bb2:link,.cfbc-scope a.cfbc-lp__bb2:visited{
	flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:50px;
	padding:0 var(--cafati-e-4);border-radius:var(--cafati-r-lg);
	border:1.5px solid var(--cafati-purpura);color:var(--cafati-purpura);
	font-size:15px;font-weight:700;text-decoration:none;background:var(--cafati-papel)}
/* Y el pie de la página necesita sitio, o la barra se le sienta encima. */
.cfbc-c .cfbc-pie{padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))}

@media (min-width:760px){
	/* Con ancho de sobra, las tres zonas se ponen en columnas: el país entero de un vistazo. */
	.cfbc-cl__mapas{grid-template-columns:repeat(3,1fr);gap:var(--cafati-e-4)}
	/* [mb1.639] En escritorio se pide MÁS, pero sin bajar de lo que el PHP calculó: `max()` deja
	 * mandar al que sabe cuántas etiquetas hay. Escribir 300 a secas lo habría pisado. */
	.cfbc-cl__lienzo{min-height:max(300px,var(--cl-alto,300px))}
	/* La foto pasa al lado del mensaje; en el DOM sigue debajo, que es lo correcto en móvil. */
	/* [mb1.637] Sin relleno vertical propio: la sección que lo contiene ya lo pone, y sumados
	 * dejaban una banda muerta entre el mensaje y el alcance. */
	.cfbc-lp__ptop{grid-template-columns:1.05fr .95fr;gap:var(--cafati-e-6)}
	/* [mb1.647] El arranque, en UNA fila. Comuna, servicio y botón son un solo acto y en tres
	 * renglones se leen como tres decisiones. En el teléfono se apilan, que ahí no cabe otra. */
	.cfbc-arr__campos{grid-template-columns:1fr 1fr auto;gap:var(--cafati-e-4);align-items:end}
	.cfbc-arr__campos .cfbc-arr__b{align-self:end}
	/* [mb1.638] Con ancho de sobra, precio y botones van en una fila: «cuánto» y, al lado,
	 * «vale, vamos». La hora más próxima se queda debajo, que es un dato y no una acción. */
	.cfbc-lp__pbajo{display:grid;grid-template-columns:auto 1fr;
		gap:var(--cafati-e-4) var(--cafati-e-5);align-items:center}
	.cfbc-lp__pbajo .cfbc-lp__vivo{grid-column:1 / -1}
	.cfbc-lp__h1{font-size:52px}
	.cfbc-lp__inclista{grid-template-columns:1fr 1fr;gap:var(--cafati-e-4)}
	/* La comparativa se vuelve tabla: rótulo · antes · con nosotros. */
	.cfbc-lp__vsgrid{grid-template-columns:150px 1fr 1fr;gap:var(--cafati-e-3);align-items:stretch}
	.cfbc-lp__vsh{display:block;margin:0;padding:0 var(--cafati-e-3);
		font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
	.cfbc-lp__vsh--a{grid-column:2;color:var(--cafati-texto-tenue)}
	.cfbc-lp__vsh--b{grid-column:3;color:var(--cafati-purpura)}
	.cfbc-lp__vsrot{display:flex;align-items:center;margin:0;grid-column:1}
	.cfbc-lp__vsonly{display:none}
	/* En el teléfono la acción viaja con el pulgar; aquí no hace falta. */
	.cfbc-lp__barra{display:none}
	.cfbc-c .cfbc-pie{padding-bottom:0}
}
/* Los tres ganchos de sección que faltaban. `__pcol` es la columna de texto de la portada —existe
 * para que la rejilla tenga dos hijos y no cinco—; `__vs` y `__faq` dan el ritmo de su bloque. Sin
 * regla propia una clase no rompe: simplemente no pinta, que es la avería silenciosa de siempre. */
.cfbc-lp__pcol{display:flex;flex-direction:column;min-width:0}
.cfbc-lp__vs{margin-top:var(--cafati-e-7)}
.cfbc-lp__faq{margin-top:var(--cafati-e-7)}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.604] EL COLOR DE LA MARCA, REPARTIDO · Dirección: *«dale un toque más vivo»*
 *
 * La página era marfil de arriba abajo con texto verde. Una página plana no es sobria: es monótona,
 * y en cuatro pantallas de scroll el ojo deja de distinguir dónde empieza una idea y acaba otra.
 *
 * No se añade paleta: se USA la que hay. Tres movimientos, y ninguno es decorativo:
 *   · el ANTETÍTULO morado orienta antes de leer y reparte el morado por toda la página;
 *   · el FILETE cose antetítulo y título en una unidad;
 *   · las BANDAS marcan capítulos — el fondo pasa de sábana a estructura.
 *
 * ⚠️ El ámbar y el rojo siguen sin aparecer: son semánticos —atención y problema— y usarlos de
 * adorno convertiría cada sección en una advertencia.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-lp__eyebrow--sec{margin:0 0 var(--cafati-e-2)}
/* El filete: corto y sólido, cosiendo el antetítulo con el título. No es un subrayado —no cruza
 * todo el ancho— sino una marca de comienzo. */
.cfbc-lp__eyebrow--sec::after{content:"";display:block;width:34px;height:3px;border-radius:2px;
	background:var(--cafati-purpura);margin-top:var(--cafati-e-2)}
.cfbc-c__sec .cfbc-c__h2,.cfbc-lp__cob .cfbc-c__h2{margin-top:var(--cafati-e-2)}

/* Las bandas. Se aplican a la SECCIÓN, así que el aire de dentro es el mismo de siempre y solo
 * cambia el suelo: alternando menta y morado tenue, la página se lee por capítulos. */
.cfbc-lp__inc,.cfbc-lp__eq{background:var(--cafati-menta-tenue)}
.cfbc-lp__vs,.cfbc-lp__faq{background:var(--cafati-purpura-tenue)}
.cfbc-lp__inc,.cfbc-lp__eq,.cfbc-lp__vs,.cfbc-lp__faq{
	padding:var(--cafati-e-6) var(--cafati-e-4);border-radius:var(--cafati-r-lg);
	border:1px solid var(--cafati-linea)}
.cfbc-lp__vs,.cfbc-lp__faq{border-color:var(--cafati-purpura-suave)}
/* Dentro de una banda las tarjetas siguen siendo papel: si tomaran el tono del suelo desaparecerían.
 * El contraste tarjeta/banda es lo que hace que la banda se lea como fondo y no como caja. */
.cfbc-lp__inc .cfbc-lp__inclista li,.cfbc-lp__eq .cfbc-lp__vet{background:var(--cafati-papel)}

@media (min-width:760px){
	.cfbc-lp__inc,.cfbc-lp__eq,.cfbc-lp__vs,.cfbc-lp__faq{
		padding:var(--cafati-e-7) var(--cafati-e-6)}
	.cfbc-lp__h1{font-size:52px}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.606] EL ÁRBOL REGIÓN → ZONA → COMUNA
 *
 * Dirección: *«cuando abramos otras zonas se deben agrupar por regiones y zonas… deben visualizarse
 * acá automáticamente sin tener que editar la página por cada comuna que se agrega»*.
 *
 * Hoy hay una sola región y el rótulo regional no se emite —un rótulo que agrupa el 100% no agrupa
 * nada—, así que estas reglas se ven poco. Existen para el día que se active Concepción: ese día el
 * árbol aparece solo, y tiene que aparecer BIEN. Un estilo que se escribe cuando ya hace falta llega
 * tarde y con prisa.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-region + .cfbc-region{margin-top:var(--cafati-e-7);padding-top:var(--cafati-e-6);
	border-top:1px solid var(--cafati-linea)}
/* La región es el rótulo mayor del bloque: pesa más que la zona y lleva el verde de marca. */
.cfbc-cob__region{margin:0 0 var(--cafati-e-4);font-size:24px;font-weight:800;
	letter-spacing:-.01em;color:var(--cafati-verde)}

/* Las zonas del vistazo: rótulo tenue, cuenta al lado, y sus chips debajo. */
.cfbc-zonas{display:flex;flex-direction:column;gap:var(--cafati-e-4);
	margin:0 0 var(--cafati-e-5)}
.cfbc-zona__t{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cafati-e-2);
	margin:0 0 var(--cafati-e-3);font-size:14px;font-weight:800;letter-spacing:.06em;
	text-transform:uppercase;color:var(--cafati-verde)}
/* La cuenta acompaña sin competir: dice el tamaño del grupo, no es un título. */
.cfbc-zona__n{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
	color:var(--cafati-texto-tenue)}
/* Con una sola zona el rótulo sobra —repite lo que ya dice la sección—, pero se conserva para
 * lectores de pantalla: la estructura del documento no depende de cuántas zonas haya hoy. */
.cfbc-zonas:has(> .cfbc-zona:only-child) .cfbc-zona__t{
	font-size:13px;color:var(--cafati-texto-tenue)}

/* Y el detalle de abajo repite la misma jerarquía, para que la página se lea igual dos veces. */
.cfbc-cob__z{margin:0 0 var(--cafati-e-3);font-size:17px;font-weight:800;letter-spacing:.02em;
	text-transform:uppercase;color:var(--cafati-texto-tenue)}

@media (min-width:760px){
	.cfbc-cob__region{font-size:28px}
}
/* [mb1.612] El salto desde el mapa deja aire arriba: sin esto el título de la región queda pegado
 * al borde y no se ve que se ha llegado a alguna parte. */
.cfbc-region{scroll-margin-top:var(--cafati-e-6)}
/* Los chips del país son enlaces: la versión en TEXTO del mapa, y lo que un buscador puede leer. */
.cfbc-scope .cfbc-cl__chips a,.cfbc-scope .cfbc-cl__chips a:link,
.cfbc-scope .cfbc-cl__chips a:visited{display:inline-flex;align-items:center;gap:var(--cafati-e-2);
	min-height:44px;color:var(--cafati-purpura);text-decoration:none}
.cfbc-scope .cfbc-cl__chips a:hover{text-decoration:underline}
.cfbc-cl__chips a span{font-size:13px;font-weight:600;color:var(--cafati-texto-tenue)}
.cfbc-cl__chips a:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.617] REPUESTAS: mi corte de mb1.616 se llevó por delante estas reglas.
 *
 * 🔴 Al sustituir el bloque del mapa busqué el `@media` de cierre con `strpos` y me quedé con el
 * PRIMERO del archivo; al corregirlo con desplazamiento, el nuevo fin cayó tres bloques más abajo y
 * el corte se comió «¿no está tu comuna?», los servicios y el equipo. **Un corte por anclas se mide
 * por lo que BORRA, no solo por lo que inserta** — lo cazó el censo de clases sin regla, que para
 * eso está.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── La salida para quien no está cubierto ───────────────────────────────────────────────── */
.cfbc-lp__nocomuna{margin-top:var(--cafati-e-6);padding:var(--cafati-e-4);
	border-radius:var(--cafati-r-lg);background:var(--cafati-purpura-tenue);
	border:1px solid var(--cafati-purpura-suave)}
.cfbc-lp__nocomuna h3{margin:0 0 var(--cafati-e-2);font-size:19px;font-weight:800;
	color:var(--cafati-verde)}
.cfbc-lp__nocomuna p{margin:0 0 var(--cafati-e-4);max-width:60ch;font-size:15px;line-height:1.7;
	color:var(--cafati-texto-tenue)}

/* ── Servicios ───────────────────────────────────────────────────────────────────────────── */
.cfbc-lp__svcgrid{display:grid;gap:var(--cafati-e-4);
	grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* La despedida no entra en la rejilla —instrucción permanente— y su renglón no compite: sin caja,
 * sin botón, en el tono más bajo de la página. */
.cfbc-lp__despedida{margin:var(--cafati-e-5) 0 0;padding-left:var(--cafati-e-4);
	border-left:3px solid var(--cafati-purpura-suave);max-width:62ch;
	font-size:15px;line-height:1.75;color:var(--cafati-texto-tenue)}

/* ── El equipo ───────────────────────────────────────────────────────────────────────────── */
.cfbc-lp__eqgrid{display:grid;gap:var(--cafati-e-4);
	grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.cfbc-lp__vfoto{width:88px;height:88px;border-radius:50%;object-fit:cover;
	border:3px solid var(--cafati-purpura-suave);background:var(--cafati-purpura-tenue)}
.cfbc-lp__vfoto--sin{display:inline-flex;align-items:center;justify-content:center;
	font-size:32px;font-weight:800;color:var(--cafati-purpura)}
.cfbc-scope .cfbc-lp__vnom{margin:0;font-size:16px;font-weight:800;line-height:1.25;display:flex;align-items:center;min-height:44px}
/* [mb1.639] El nombre es el enlace a su ficha y medía 24 px. Va en `inline-flex` para que el alto
 * cuente —un `inline` ignora `min-height`— y con margen negativo para no separar el nombre de su
 * especialidad, que se lee como una sola unidad. */
.cfbc-scope .cfbc-lp__vnom a,.cfbc-scope .cfbc-lp__vnom a:link,
.cfbc-scope .cfbc-lp__vnom a:visited{display:inline-flex;align-items:center;min-height:44px;
	margin:-10px 0;color:var(--cafati-verde);text-decoration:none}
.cfbc-scope .cfbc-lp__vnom a:hover{text-decoration:underline}
.cfbc-lp__vmeta{margin:0;font-size:13.5px;font-weight:700;color:var(--cafati-purpura)}
.cfbc-lp__vesp{margin:0;font-size:13px;line-height:1.6;color:var(--cafati-texto-tenue)}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.618] LA HORA COMO BLOQUE RESERVABLE · y los enlaces con forma de acción
 *
 * Dirección: *«mantener el formato con los bloques de hora como calendario, así como se muestra en
 * las otras páginas, para que se entienda que es un bloque seleccionable y no un texto puesto solo
 * informativo»* · *«los links con solo subrayado y texto simple no me gustan»*.
 *
 * 🔴 **La forma tiene que decir lo que el dato es.** La misma hora era un bloque morado sólido de
 * 48 px en el selector de la comuna y una línea en negrita aquí: en una pantalla una oferta, en la
 * otra una nota al pie. Se reusa el lenguaje que ya existe (`.cfbc-sel__hora`) —relieve, cifras
 * tabulares, morado sólido— porque la gente no tiene que aprenderlo dos veces.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-cob__hora{display:flex;flex-direction:column;align-items:flex-start;gap:var(--cafati-e-1);
	margin:var(--cafati-e-2) 0 0;padding-top:var(--cafati-e-3);
	border-top:1px solid var(--cafati-linea)}
.cfbc-cob__rot{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
	color:var(--cafati-texto-tenue)}
.cfbc-cob__dia{font-size:14px;color:var(--cafati-texto-tenue);line-height:1.4}

/* 🔴 [mb1.624] LILA EN REPOSO, MORADO AL PASAR POR ENCIMA — el bloque del agendador, tal cual.
 *
 * Dirección lo enseñó con dos capturas: en reposo la pastilla es lila con borde y cifra morada; al
 * pasar el cursor se rellena de morado y la cifra se pone blanca. Yo lo había deducido de la hoja
 * de estilos —«papel con cifra verde»— y estaba equivocado: **la hoja dice lo que una regla
 * declara; la pantalla dice cuál gana.**
 *
 * Lo que esto fija no es un color, es una gramática: **una hora disponible se dibuja igual en toda
 * la casa.** Lila = «está libre». Morado sólido = «esto es lo que vas a tomar». La misma pareja en
 * el agendador, en la comuna y aquí; si cada pantalla la vistiera a su manera, el tutor tendría que
 * aprender de nuevo qué es reservable cada vez que llega a una. */
.cfbc-scope a.cfbc-cob__bloque,.cfbc-scope a.cfbc-cob__bloque:link,
.cfbc-scope a.cfbc-cob__bloque:visited{display:inline-flex;flex-direction:column;
	align-items:center;justify-content:center;gap:1px;
	min-width:86px;min-height:50px;margin-top:var(--cafati-e-1);
	padding:8px var(--cafati-e-3);border-radius:12px;box-sizing:border-box;
	background:var(--cafati-purpura-tenue);color:var(--cafati-purpura);
	border:1.5px solid color-mix(in srgb, var(--cafati-purpura) 42%, var(--cafati-papel));
	text-decoration:none;
	transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease}
/* El relleno morado es el estado «esto es lo que vas a tomar»: se reserva para el cursor y el
 * foco, igual que en el agendador. En reposo, un bloque sólido gritaría más que el botón de
 * reservar de la portada. */
.cfbc-scope a.cfbc-cob__bloque:hover,.cfbc-scope a.cfbc-cob__bloque:focus-visible{
	background:var(--cafati-purpura);color:var(--cafati-papel);
	border-color:var(--cafati-purpura);transform:translateY(-1px)}
.cfbc-cob__bloque:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}
.cfbc-cob__hh{font-size:17px;font-weight:700;line-height:1.1;color:inherit;
	font-variant-numeric:tabular-nums;font-feature-settings:var(--cafati-tabular)}
/* «libre» es lo único que se añade al lenguaje del agendador, y por un motivo: allí ya sabes que
 * estás eligiendo hora; aquí, en una landing, la palabra es lo que convierte un dato en una oferta.
 * Hereda el color del bloque para que acompañe al cambio de estado sin pelearse con él. */
.cfbc-cob__lib{font-size:13px;font-weight:700;letter-spacing:.04em;color:inherit;opacity:.78}
/* 🔴 Y LA ACCIÓN PRINCIPAL DEJA DE SER TEXTO SUBRAYADO. Estaba al lado de un botón de WhatsApp que
 * sí lo era: la acción principal se veía menos que la secundaria. */
.cfbc-scope a.cfbc-cob__ver,.cfbc-scope a.cfbc-cob__ver:link,
.cfbc-scope a.cfbc-cob__ver:visited{display:inline-flex;align-items:center;justify-content:center;
	gap:var(--cafati-e-2);min-height:44px;margin-top:var(--cafati-e-2);
	padding:0 var(--cafati-e-3);border-radius:var(--cafati-r-sm);
	border:1.5px solid var(--cafati-verde);background:var(--cafati-papel);
	color:var(--cafati-verde);font-size:14.5px;font-weight:800;text-decoration:none}
.cfbc-scope a.cfbc-cob__ver:hover{background:var(--cafati-menta-tenue)}
.cfbc-cob__ver::after{content:"›";font-size:18px;line-height:1;opacity:.7}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.620] LAS COMUNAS SIN HORAS, EN SU PROPIO BLOQUE
 *
 * Dirección: *«las que no tengan horas disponibles sepáralas en un bloque diferente»* · *«para que
 * se vea que pueden solicitar que les busquemos una hora igualmente, claramente»*.
 *
 * 🔴 No es una lista de descartes: son comunas que SÍ atendemos, con doctora asignada, donde hoy no
 * hay hueco publicado. Por eso el bloque va en MORADO —el acento de «hablemos» en esta página— y no
 * en ámbar ni rojo, que son semánticos y convertirían una oferta en una advertencia.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cfbc-cob__sin{margin-top:var(--cafati-e-4);padding:var(--cafati-e-4);
	border-radius:var(--cafati-r-md);background:var(--cafati-purpura-tenue);
	border:1px solid var(--cafati-purpura-suave)}
.cfbc-cob__sint{margin:0 0 var(--cafati-e-1);font-size:15px;font-weight:800;
	color:var(--cafati-verde)}
.cfbc-cob__sind{margin:0 0 var(--cafati-e-4);max-width:62ch;font-size:14px;line-height:1.65;
	color:var(--cafati-texto-tenue)}
.cfbc-cob__singrid{display:grid;gap:var(--cafati-e-3);margin:0;padding:0;list-style:none;
	grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* 🔴 CADA UNA ES UN BOTÓN, NO UNA ETIQUETA. Sin el verbo escrito —«Pídenos una hora»— el elemento
 * se lee como un rótulo («Peñalolén · 3 doctoras») y nadie pulsa un rótulo. **Lo que convierte un
 * dato en una acción es el verbo**, y la forma tiene que acompañarlo: fondo propio, relieve y una
 * flecha que dice que lleva a algún sitio. */
.cfbc-scope a.cfbc-cob__swa,.cfbc-scope a.cfbc-cob__swa:link,
.cfbc-scope a.cfbc-cob__swa:visited,.cfbc-cob__swa{display:flex;flex-direction:column;
	align-items:flex-start;gap:2px;min-height:44px;
	padding:var(--cafati-e-3);border-radius:var(--cafati-r-md);
	background:var(--cafati-papel);border:1px solid var(--cafati-purpura-suave);
	box-shadow:var(--cafati-sombra-sm);text-decoration:none;color:var(--cafati-verde)}
.cfbc-scope a.cfbc-cob__swa:hover{border-color:var(--cafati-purpura);
	background:var(--cafati-purpura-suave)}
.cfbc-cob__swa:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-cob__swa strong{font-size:17px;font-weight:800;line-height:1.2;color:var(--cafati-verde)}
.cfbc-cob__swa span{font-size:13.5px;color:var(--cafati-texto-tenue)}
.cfbc-cob__swa em{display:inline-flex;align-items:center;gap:var(--cafati-e-1);
	margin-top:var(--cafati-e-2);font-style:normal;font-size:14px;font-weight:800;
	color:var(--cafati-purpura)}
.cfbc-cob__swa em::after{content:"›";font-size:17px;line-height:1;opacity:.75}
/* La que no tiene ni WhatsApp ni página: se nombra, pero no finge ser pulsable. */
.cfbc-cob__swa--fija{border-style:dashed;box-shadow:none;background:var(--cafati-marfil)}
.cfbc-cob__swa--fija em{display:none}

/* [mb1.662] Con ancho de sobra, las dos especies van lado a lado. La tarjeta no cambia:
 * solo deja de apilarse. Y crece un poco, porque en 300 px de columna la foto se veía
 * pequeña para lo que tiene que transmitir. */
@media (min-width:600px){
	.cfbc-rv__especie { grid-template-columns: 1fr 1fr; gap: 14px; }
	.cfbc-rv__op { min-height: 116px; }
	.cfbc-rv__op-foto { flex: 0 0 116px; }
}

/* ══ [mb1.708] «FALTA UN PASO» EN LA TARJETA DE COMUNA ════════════════════════════════════════
 *
 * El gemelo de `.cfbc-rv__datos` (mb1.702) para el otro camino de reserva. Mismo lenguaje a
 * proposito: es el MISMO momento del mismo circuito visto desde otra pagina, y que se viera
 * distinto le diria al tutor que son dos cosas.
 *
 * 🔴 NO ES UNA ALARMA: su hora esta retenida y la primera frase lo dice. Se distingue por FORMA
 * —caja propia, borde de marca, fondo claro— y no por color de aviso.
 *
 * ⚠️ Vive DENTRO de la tarjeta de la profesional, mas estrecha que la pagina del embudo: paddings
 * menores y SIN sombra propia —la tarjeta ya tiene la suya, y dos sombras anidadas se leen como un
 * error de maquetacion—. */
.cfbc-td{margin:var(--cafati-e-3) 0 0;padding:var(--cafati-e-3);border-radius:14px;
	background:var(--cafati-purpura-tenue);border:1px solid var(--cafati-purpura);
	text-align:left}
.cfbc-td__t{margin:0;font-size:17px;font-weight:800;color:var(--cafati-purpura);line-height:1.25}
.cfbc-td__h{margin:5px 0 var(--cafati-e-3);font-size:14.5px;line-height:1.55;
	color:var(--cafati-grafito)}
.cfbc-td__err{margin:0 0 var(--cafati-e-3);padding:9px 11px;border-radius:10px;
	background:var(--cafati-papel);border:1px solid var(--cafati-problema);
	color:var(--cafati-problema-texto);font-size:13.5px;line-height:1.5}
/* Etiqueta ENCIMA, nunca dentro: un `placeholder` que hace de etiqueta desaparece al escribir y
   deja al tutor sin saber que estaba rellenando. */
.cfbc-td__c{display:block;margin:0 0 var(--cafati-e-2)}
.cfbc-td__c > span{display:block;margin-bottom:4px;font-size:14px;font-weight:700;
	color:var(--cafati-grafito)}
.cfbc-td__c > span > i{font-style:normal;color:var(--cafati-purpura);font-weight:800}
.cfbc-td__c input,.cfbc-td__c textarea{width:100%;box-sizing:border-box;min-height:46px;
	padding:10px 12px;border:1px solid var(--cafati-linea);border-radius:10px;
	background:var(--cafati-papel);font-family:inherit;font-size:16px;line-height:1.4;
	color:var(--cafati-grafito)}
/* 16px en el input NO es capricho: por debajo de eso Safari en iPhone hace zoom al enfocar y
   descoloca la pantalla entera justo cuando el tutor esta escribiendo su direccion. */
.cfbc-td__c textarea{min-height:78px;resize:vertical}
.cfbc-td__c input:focus-visible,.cfbc-td__c textarea:focus-visible{
	outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-td__mas{margin:0 0 var(--cafati-e-2)}
.cfbc-td__mas > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
	font-size:14px;font-weight:700;color:var(--cafati-purpura)}
.cfbc-td__go{width:100%;justify-content:center}
.cfbc-td__pie{margin:var(--cafati-e-2) 0 0;font-size:13px;line-height:1.5;
	color:var(--cafati-texto-tenue);text-align:center}
/* Mientras guarda, lo demas se apaga: si se puede pulsar otra cosa, se va a pulsar. */
.cfbc-td.is-enviando input,.cfbc-td.is-enviando textarea,
.cfbc-td.is-enviando summary{opacity:.5;pointer-events:none}
/* Ya los dio: verde de HECHO, apagado. No compite con nada porque no pide nada. */
.cfbc-td--ok{background:var(--cafati-menta-tenue);border-color:var(--cafati-verde-accion)}
.cfbc-td--ok .cfbc-td__t{color:var(--cafati-verde-accion);font-size:16px}

/* ══ [mb1.711] EL DIA QUE NO TIENE HORAS, Y EL SALTO QUE SE CONFIESA ══════════════════════════
 *
 * Direccion, sobre la pagina de comuna: «propone una hora, pero no la muestra luego de seleccionar
 * el servicio, hay que hacer un paso extra e ir al dia que la contiene».
 *
 * ⚠️ VACIO NO ES DESHABILITADO: el chip sigue siendo un enlace y se puede visitar —ese dia tiene
 * algo que decir, «no quedan, la proxima agenda es el X»—. Se distingue por FORMA, no por bloqueo:
 * sin relleno, borde discontinuo y numero apagado. */
.cfbc-scope .cfbc-sel__dia--vacio{
	background:transparent;
	border-style:dashed;
	border-color:color-mix(in srgb, var(--cafati-linea) 80%, transparent);
	opacity:.62;
}
.cfbc-scope .cfbc-sel__dia--vacio b,
.cfbc-scope .cfbc-sel__dia--vacio small{ color:var(--cafati-texto-tenue) }
/* El elegido manda aunque este vacio: si el tutor pidio ver un dia sin horas, la pantalla tiene
   que decirle DONDE esta, o pierde el hilo de lo que acaba de pulsar. */
.cfbc-scope .cfbc-sel__dia--vacio.is-on{ opacity:1; border-style:solid }

/* 🔴 EL DIA, PEGADO A LAS HORAS. Es lo unico que impide leer unas horas de manana como si fueran
   de hoy: en movil, cuando se llega a la lista, los chips de dia ya salieron de pantalla. */
.cfbc-scope .cfbc-sel__horas-t > b{ color:var(--cafati-grafito); font-weight:800 }

/* La confesion del salto. NO es una alarma —hay horas, solo que no hoy— asi que no lleva ambar:
   en este proyecto el ambar significa «atencion pendiente» y aqui no hay nada pendiente. Barra a
   la izquierda para que se lea como aclaracion y no como error. */
.cfbc-scope .cfbc-sel__saltamos{
	margin:2px 0 10px; padding:7px 0 7px 11px;
	border-left:3px solid var(--cafati-purpura);
	font-size:13.5px; line-height:1.45; color:var(--cafati-texto-tenue);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.720] «SU PÁGINA» · EL REDISEÑO DE P09
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 *
 * Dirección, 31-ago-2026: *«está demasiado verde […] una mejora visual con más colores, más
 * efectos y sombras, y contornos que ayuden a mostrar un diseño de alta gama profesional. Esta
 * página debe ser espectacular, ya que será el orgullo de cada veterinaria.»*
 *
 * ── EL REPARTO, que es la decisión de fondo ────────────────────────────────────────────────
 *
 *   VERDE  → la casa y la ACCIÓN. Reservar y elegir hora siguen siendo verdes en todo el sitio, y
 *            tocarlo dejaría al tutor sin saber qué botón le compromete algo.
 *   MORADO → ELLA. Sus secciones, su agenda, lo que ha elegido. Es la mitad de la marca que
 *            llevaba desde siempre reducida a un sello, y es lo que Dirección pide por «femenino».
 *   DISTINCIÓN → el filo dorado, y solo eso: el sello de Cafati y sus estrellas. Que la prueba de que
 *            es buena no se pinte del mismo color que el resto de la página.
 *
 * ── Y LO QUE NO CAMBIA ──────────────────────────────────────────────────────────────────────
 * Cero colores literales (todo sale de `cfbc-tokens.css`), nada bajo 13px, 44px de objetivo
 * táctil, y el contraste se garantiza con texto: la distinción no lleva texto encima nunca.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Un ancla no aterriza pegada al borde: deja aire para saber dónde ha caído. */
.cfbc-p9__wrap [id],.cfbc-c__sec[id]{scroll-margin-top:var(--cafati-e-4)}

/* ── 1 · SU FICHA · el carril ──────────────────────────────────────────────────────────────
 * Una corona de color detrás del retrato: es lo primero que se ve y lo que hace que la tarjeta
 * parezca una ficha profesional y no un rectángulo con datos. */
/* 🔴 [mb1.723] LA CORONA ES UN FONDO, NO UN `::before` COLOCADO.
 *
 * Nació como pseudoelemento absoluto y para anclarlo le puse `position:relative` al carril. Esta
 * capa va más abajo en la hoja que la regla del `sticky`, así que con la misma especificidad ganaba
 * esta y el carril dejaba de pegarse al hacer scroll — Dirección lo vio, y el `sticky` estaba
 * escrito y medido. **Una declaración puesta para un adorno desactivó el comportamiento de la
 * pieza entera.** Y el `overflow:hidden` que la acompañaba recortaba lo que asomara.
 *
 * Como fondo pinta exactamente igual, respeta el radio sola, no recorta nada y —lo que importa— no
 * opina sobre cómo se comporta la columna. `position` no es una propiedad de decoración. */
.cfbc-p9__rail{border-color:var(--cafati-purpura-linea);box-shadow:var(--cafati-sombra-md);
	background-color:var(--cafati-papel);background-image:var(--cafati-p9-corona);
	background-repeat:no-repeat;background-size:100% 168px}
/* 🔴 [mb1.724] CIEN PÍXELES MENOS, Y NINGUNO DE INFORMACIÓN.
 *
 * Medido pieza a pieza: 32 px de margen superior en el PRIMER hijo de una tarjeta —que no separa
 * de nada—, un retrato de 128 donde 104 se lee igual, y tres sellos de tres palabras ocupando tres
 * renglones enteros. Nada de eso decía nada; solo hacía que el carril no cupiera en la pantalla, y
 * de ahí salieron los tres parches anteriores. */
.cfbc-p9__rail .cfbc-p9__cab{margin-top:0;margin-bottom:var(--cafati-e-3)}
.cfbc-p9__foto{width:104px;height:104px;box-shadow:var(--cafati-sombra-morada);
	border:3px solid var(--cafati-papel);outline:1px solid var(--cafati-purpura-linea)}
.cfbc-p9__rail .cfbc-p9__h1{font-size:clamp(24px,2.2vw,30px);line-height:1.1}
.cfbc-p9__rail .cfbc-p9__railcta{margin-top:var(--cafati-e-3)}
.cfbc-p9__h1{color:var(--cafati-verde);letter-spacing:-.015em}

/* Los sellos dejan de ser tres pastillas iguales: cada uno dice algo distinto y ahora se ve. */
.cfbc-p9__sellos{gap:6px;margin-top:var(--cafati-e-2)}
.cfbc-p9__sellos .cfbc-t__sello{border-radius:999px;padding:3px 10px;font-size:13px;
	line-height:1.45;font-weight:600;border:1px solid var(--cafati-linea);
	background:var(--cafati-papel);color:var(--cafati-texto-tenue)}
/* 🔴 EL SELLO, EN FILO Y NO EN RELLENO. `--cafati-distincion` tiene regla desde mb1.479 —«es
 * siempre un hilo, un anillo, un glifo pequeño; nunca un relleno»— y mi primera versión le puso un
 * fondo dorado. Un anillo de 2px sobre papel distingue más que un fondo, y encima cumple. */
.cfbc-p9__sellos .cfbc-t__sello--ok{border-width:2px;border-color:var(--cafati-distincion);
	background:var(--cafati-papel);color:var(--cafati-grafito);font-weight:700}
.cfbc-p9__sellos .cfbc-t__sello--nueva{border-color:var(--cafati-purpura-linea);
	background:var(--cafati-purpura-tenue);color:var(--cafati-purpura-hondo)}

/* La nota, con sus estrellas en ORO: la distinción con su propio color y su cifra al lado.
 * Las clases son las de la cartilla —la reputación se hereda de ella, no se duplica— y por eso
 * se acotan al carril y al resumen: en la vitrina, donde hay varias, no se toca nada. */
/* Y las estrellas, con el uso QUE YA TIENE NOMBRE: `--cafati-estrella` existe justamente para
 * esto, y usar el color de base en su lugar habría vuelto a juntar dos cosas que mb1.479 separó. */
.cfbc-p9__rail .cfbc-t__estrellas,.cfbc-p9__rsum .cfbc-t__estrellas{color:var(--cafati-estrella)}
.cfbc-p9__rail .cfbc-t__nota{color:var(--cafati-grafito);font-weight:700}

/* La próxima hora: superficie de ella, punto vivo de la casa. */
.cfbc-p9__prox{background:var(--cafati-purpura-tenue);border-color:var(--cafati-purpura-linea)}
.cfbc-p9__prox-r{color:var(--cafati-purpura-hondo);font-weight:600}
.cfbc-p9__prox strong{color:var(--cafati-verde)}

/* Y el botón, con peso: es el final del carril y lo que la página viene a conseguir. */
.cfbc-scope a.cfbc-p9__cta,.cfbc-scope a.cfbc-p9__cta:link,
.cfbc-scope a.cfbc-p9__cta:visited{min-height:50px;background:var(--cafati-p9-accion);
	box-shadow:var(--cafati-sombra-verde);font-size:16px;letter-spacing:.005em}
.cfbc-scope a.cfbc-p9__cta:hover{background:var(--cafati-p9-elegido);
	box-shadow:var(--cafati-sombra-morada);transform:translateY(-2px)}

/* ── 2 · LAS SECCIONES · cada una con su cejilla y su regla ────────────────────────────────
 * Un `h2` suelto sobre un fondo claro no separa nada. La cejilla dice de qué va antes de leer el
 * título, y la regla degradada cierra el bloque sin dibujar una caja más. */
.cfbc-p9__wrap .cfbc-c__sec{margin-top:var(--cafati-e-6)}
.cfbc-p9__wrap .cfbc-c__h2{position:relative;padding-bottom:var(--cafati-e-2);
	margin-bottom:var(--cafati-e-3);color:var(--cafati-verde);letter-spacing:-.01em}
.cfbc-p9__wrap .cfbc-c__h2::after{content:'';position:absolute;left:0;bottom:0;
	width:120px;height:3px;border-radius:999px;background:var(--cafati-p9-regla)}

/* ── 3 · LOS SELECTORES · elegir se nota ───────────────────────────────────────────────────
 * Sin elegir: papel con contorno fino y una sombra de un píxel — se ve que es pulsable.
 * Elegido: el degradado de ella, con relieve. La diferencia se lee de un vistazo y sin color
 * como única señal (cambia el peso y la sombra). */
.cfbc-p9__comlab{font-size:15px;font-weight:700;color:var(--cafati-purpura-hondo);
	text-transform:none;letter-spacing:0}
.cfbc-p9__compill{border-color:var(--cafati-linea);background:var(--cafati-papel);
	box-shadow:var(--cafati-sombra-sm);font-weight:600;
	transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.cfbc-p9__compill:hover{border-color:var(--cafati-purpura-linea);
	box-shadow:var(--cafati-sombra-md);transform:translateY(-1px)}
.cfbc-p9__compill--on{background:var(--cafati-p9-elegido);border-color:transparent;
	box-shadow:var(--cafati-sombra-morada);font-weight:700}
.cfbc-p9__compill--on:hover{transform:translateY(-1px);box-shadow:var(--cafati-sombra-morada)}
.cfbc-scope a.cfbc-p9__compill--on,.cfbc-scope a.cfbc-p9__compill--on:link,
.cfbc-scope a.cfbc-p9__compill--on:visited{color:var(--cafati-papel)}
.cfbc-p9__compill:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}
.cfbc-p9__svcmas > summary{color:var(--cafati-purpura-hondo);font-weight:700}

/* ── 4 · LA AGENDA · la joya de la página ──────────────────────────────────────────────────
 * Es a lo que se vino. Se le da marco propio, elevación y un rótulo que dice qué se está mirando
 * — antes el nombre del servicio iba en 14px encima del precio y no demarcaba nada. */
.cfbc-p9__com .cfbc-t{border:1px solid var(--cafati-purpura-linea);border-radius:var(--cafati-r-lg);
	background:var(--cafati-papel);box-shadow:var(--cafati-sombra-md);padding:var(--cafati-e-4)}
.cfbc-p9__com .cfbc-t__svc{margin:0}
.cfbc-p9__com .cfbc-t__svc-e{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;
	text-transform:uppercase;color:var(--cafati-purpura-media);margin-bottom:var(--cafati-e-1)}
.cfbc-p9__com .cfbc-t__svc-n{font-family:var(--cafati-fuente-ed);font-size:24px;line-height:1.2;
	font-weight:600;color:var(--cafati-verde);letter-spacing:-.01em}
.cfbc-p9__com .cfbc-t__svc-d{margin-top:var(--cafati-e-2);font-size:14.5px;line-height:1.5;
	color:var(--cafati-texto-tenue)}
.cfbc-p9__com .cfbc-t__precio{margin-top:var(--cafati-e-3);display:flex;align-items:baseline;
	gap:var(--cafati-e-2)}
.cfbc-p9__com .cfbc-t__precio-etq{font-size:13px;font-weight:700;letter-spacing:.05em;
	text-transform:uppercase;color:var(--cafati-texto-tenue)}
.cfbc-p9__com .cfbc-t__precio-val{font-size:30px;font-weight:800;color:var(--cafati-verde);
	font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* La caja de horas, en su superficie. El día es NAVEGACIÓN (morado) y la hora es ACCIÓN (verde):
 * dos colores porque son dos decisiones distintas, no por adorno. */
.cfbc-p9__com .cfbc-ag{margin-top:var(--cafati-e-4);background:var(--cafati-purpura-tenue);
	border-color:var(--cafati-purpura-linea);border-radius:var(--cafati-r-md)}
.cfbc-p9__com .cfbc-ag__etq{color:var(--cafati-purpura-hondo)}
.cfbc-p9__com .cfbc-ag__dia{background:var(--cafati-papel);border-color:var(--cafati-purpura-linea);
	box-shadow:var(--cafati-sombra-sm);transition:transform .16s ease,box-shadow .16s ease}
.cfbc-p9__com .cfbc-ag__dia:hover{border-color:var(--cafati-purpura-media);transform:translateY(-1px)}
.cfbc-p9__com .cfbc-t__horas-dia{color:var(--cafati-purpura-hondo)}
.cfbc-p9__com .cfbc-t__hora{box-shadow:var(--cafati-sombra-verde);
	transition:transform .16s ease,box-shadow .16s ease}
.cfbc-p9__com .cfbc-t__hora:hover{transform:translateY(-2px)}
.cfbc-p9__vercom a{color:var(--cafati-purpura-hondo);font-weight:700}

/* ── 5 · LA EUTANASIA · separada, y con la gravedad que le toca ────────────────────────────
 * Iba pegada a las pastillas de vacunas y con su misma forma. Ahora es un bloque aparte, con aire
 * por delante, superficie propia y dos fichas con foto. Sin animación de entrada y sin rojo: es
 * un servicio que se presta con calma, no una advertencia. */
.cfbc-p9__desp{margin:var(--cafati-e-6) 0 var(--cafati-e-4);padding:var(--cafati-e-4);
	border-radius:var(--cafati-r-lg);background:var(--cafati-marfil);
	border:1px solid var(--cafati-purpura-linea);box-shadow:var(--cafati-sombra-sm)}
.cfbc-p9__desp-e{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;
	text-transform:uppercase;color:var(--cafati-purpura-media)}
.cfbc-p9__desp-t{margin:var(--cafati-e-1) 0 0;font-family:var(--cafati-fuente-ed);
	font-size:22px;line-height:1.25;font-weight:600;color:var(--cafati-verde)}
.cfbc-p9__desp-h{margin:var(--cafati-e-2) 0 var(--cafati-e-4);font-size:15px;line-height:1.65;
	color:var(--cafati-grafito);max-width:60ch}
.cfbc-p9__desp-h strong{color:var(--cafati-purpura-hondo);font-weight:700}
.cfbc-p9__desp-g{display:grid;gap:var(--cafati-e-3);grid-template-columns:1fr}
.cfbc-scope a.cfbc-p9__despc,.cfbc-scope a.cfbc-p9__despc:link,
.cfbc-scope a.cfbc-p9__despc:visited{display:flex;flex-direction:column;overflow:hidden;
	border-radius:var(--cafati-r-md);background:var(--cafati-papel);
	border:1px solid var(--cafati-linea);box-shadow:var(--cafati-sombra-sm);
	text-decoration:none;color:var(--cafati-grafito);
	transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.cfbc-scope a.cfbc-p9__despc:hover{transform:translateY(-2px);
	box-shadow:var(--cafati-sombra-md);border-color:var(--cafati-purpura-linea)}
.cfbc-p9__despc:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}
.cfbc-p9__despc-f{display:block;aspect-ratio:16/10;background:var(--cafati-purpura-suave)}
.cfbc-p9__despc-f img{display:block;width:100%;height:100%;object-fit:cover}
.cfbc-p9__despc-c{display:flex;flex-direction:column;gap:var(--cafati-e-1);
	padding:var(--cafati-e-3)}
.cfbc-p9__despc-t{font-size:16.5px;font-weight:700;line-height:1.3;color:var(--cafati-verde)}
.cfbc-p9__despc-a{font-size:14px;font-weight:700;color:var(--cafati-purpura-hondo)}
.cfbc-p9__despc-a::after{content:' \203A';display:inline-block;transition:transform .16s ease}
.cfbc-p9__despc:hover .cfbc-p9__despc-a::after{transform:translateX(3px)}
.cfbc-p9__desp-n{margin:var(--cafati-e-3) 0 0;font-size:13.5px;line-height:1.55;
	color:var(--cafati-texto-tenue);max-width:60ch}

/* ── 6 · LAS RESEÑAS · lo que la hace elegible ─────────────────────────────────────────────
 * Las barras dejan de ser verdes: no son una acción, son un retrato. El morado las devuelve a
 * ella, y las iniciales de cada tutor pasan a ser una moneda de su color. */
.cfbc-p9__rsum{padding:var(--cafati-e-4);border-radius:var(--cafati-r-lg);
	background:var(--cafati-purpura-tenue);border:1px solid var(--cafati-purpura-linea)}
.cfbc-p9__rnum{color:var(--cafati-purpura-hondo)}
.cfbc-p9__rfill{background:var(--cafati-p9-elegido)}
.cfbc-p9__rini{background:var(--cafati-purpura-suave);color:var(--cafati-purpura-hondo);
	border:1px solid var(--cafati-purpura-linea)}
.cfbc-scope .cfbc-p9__rit{border-bottom-color:var(--cafati-purpura-linea)}

/* ── 7 · MOVIMIENTO ────────────────────────────────────────────────────────────────────────
 * Todo el relieve es de dos píxeles y ninguna animación se repite sola: en esta página nadie
 * está esperando nada, y un movimiento que no para es ruido. Quien pide menos, no ve ninguno. */
@media(prefers-reduced-motion:reduce){
	.cfbc-p9__compill,.cfbc-p9__despc,.cfbc-p9__com .cfbc-ag__dia,.cfbc-p9__com .cfbc-t__hora,
	.cfbc-scope a.cfbc-p9__cta,.cfbc-p9__despc-a::after{transition:none}
	.cfbc-p9__compill:hover,.cfbc-p9__despc:hover,.cfbc-p9__com .cfbc-ag__dia:hover,
	.cfbc-p9__com .cfbc-t__hora:hover,.cfbc-scope a.cfbc-p9__cta:hover{transform:none}
}

/* ── 8 · CON ANCHO ─────────────────────────────────────────────────────────────────────────
 * Las dos eutanasias se ponen a la par: en columna parecen una lista de precios; a la par son
 * dos caminos del mismo servicio, que es lo que son. */
@media(min-width:560px){
	.cfbc-p9__desp{padding:var(--cafati-e-5)}
	.cfbc-p9__desp-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cafati-e-4)}
	.cfbc-p9__com .cfbc-t{padding:var(--cafati-e-5)}
	.cfbc-p9__com .cfbc-t__svc-n{font-size:27px}
	.cfbc-p9__com .cfbc-t__precio-val{font-size:34px}
	.cfbc-p9__wrap .cfbc-c__h2::after{width:160px}
}

/* ── [mb1.721] LOS TRAMOS DE PESO, JUNTO AL VALOR ───────────────────────────────────────────
 *
 * Dirección: «el valor de la eutanasia de perros es por peso y hay varias alternativas; se deben
 * poder seleccionar en la agenda y que cambie el valor». El selector de arriba las presenta como
 * UNA opción —doctrina de mb1.697: el peso se decide con el animal delante— y esto es ese
 * «después», puesto donde la pregunta tiene sentido: al lado del precio.
 *
 * ⚠️ SOBRIO A PROPÓSITO. Es la pantalla de alguien decidiendo el final de su perro: cada tramo
 * dice su peso y su valor, nada más. Sin destacar el barato, sin relieve que invite a jugar y sin
 * movimiento. El elegido se marca por peso y superficie, no por color a secas. */
.cfbc-t__var{margin:var(--cafati-e-3) 0 0}
.cfbc-t__var-r{margin:0 0 var(--cafati-e-2);font-size:14px;font-weight:600;
	color:var(--cafati-purpura-hondo)}
.cfbc-t__var-l{display:grid;gap:var(--cafati-e-2);grid-template-columns:1fr}
.cfbc-scope a.cfbc-t__var-o,.cfbc-scope a.cfbc-t__var-o:link,
.cfbc-scope a.cfbc-t__var-o:visited{display:flex;align-items:center;justify-content:space-between;
	gap:var(--cafati-e-3);min-height:48px;padding:0 var(--cafati-e-3);
	border-radius:var(--cafati-r-md);border:1px solid var(--cafati-linea);
	background:var(--cafati-papel);color:var(--cafati-grafito);text-decoration:none;
	font-size:15px}
.cfbc-scope a.cfbc-t__var-o:hover{border-color:var(--cafati-purpura-linea)}
.cfbc-t__var-o:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}
.cfbc-scope a.cfbc-t__var-o--on,.cfbc-scope a.cfbc-t__var-o--on:link,
.cfbc-scope a.cfbc-t__var-o--on:visited{background:var(--cafati-purpura-tenue);
	border-color:var(--cafati-purpura);color:var(--cafati-purpura-hondo);font-weight:700}
.cfbc-t__var-n{flex:1 1 auto;min-width:0;line-height:1.3}
.cfbc-t__var-p{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(min-width:560px){
	.cfbc-t__var-l{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── [mb1.725] «¿NECESITAS OTRA COSA?» · LA LISTA, DEBAJO DE LA AGENDA Y EN REJILLA ──────────
 *
 * Dirección: los óvalos y el plegable «no se ven ordenados». No lo estaban: `flex-wrap` con
 * pastillas de ancho libre deja cada renglón terminando donde acaba su última palabra, y el
 * resultado es un dentado distinto por fila. Un óvalo cuyo ancho ES su texto no se alinea con nada.
 *
 * Se cambia de sistema: rejilla de celdas parejas. Los renglones cierran a la vez, la lista se lee
 * como lista, y en pantalla ancha el bloque entero queda contenido en vez de estirarse. */
.cfbc-p9__otros{margin:var(--cafati-e-6) 0 0;padding:var(--cafati-e-4);
	border-radius:var(--cafati-r-lg);background:var(--cafati-papel);
	border:1px solid var(--cafati-linea);box-shadow:var(--cafati-sombra-sm)}
.cfbc-p9__otros .cfbc-p9__comlab{margin-bottom:2px}
.cfbc-p9__otros .cfbc-p9__comhelp{margin-bottom:var(--cafati-e-3)}

/* La rejilla. `auto-fill` con un mínimo cómodo: en un móvil da una columna, en un escritorio tres
 * o cuatro, y en ningún caso hay que decidir un número a mano. */
.cfbc-p9__svcs{display:grid;gap:var(--cafati-e-2);
	grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:0}
/* Y la pastilla deja de dimensionarse por su texto: ocupa su celda, con el texto a la izquierda
 * —que es como se lee una lista— y centrado vertical. */
.cfbc-p9__svcs .cfbc-p9__compill{width:100%;justify-content:flex-start;text-align:left;
	padding:var(--cafati-e-2) var(--cafati-e-3);border-radius:var(--cafati-r-md);
	line-height:1.3;font-size:14.5px}

/* El plegable, con forma de control: una fila del ancho del bloque, con marco y flecha. Antes era
 * un enlace morado suelto y nada decía que se abriera. */
.cfbc-p9__svcmas{margin-top:var(--cafati-e-3)}
.cfbc-scope .cfbc-p9__svcmas-r{display:flex;align-items:center;justify-content:space-between;
	gap:var(--cafati-e-3);min-height:48px;padding:0 var(--cafati-e-3);cursor:pointer;
	list-style:none;border-radius:var(--cafati-r-md);
	border:1px dashed var(--cafati-purpura-linea);background:var(--cafati-purpura-tenue);
	color:var(--cafati-purpura-hondo);font-size:14.5px;font-weight:700}
.cfbc-scope .cfbc-p9__svcmas-r::-webkit-details-marker{display:none}
.cfbc-p9__svcmas-r::after{content:'\203A';transform:rotate(90deg);transition:transform .16s ease;
	font-size:18px;line-height:1}
.cfbc-p9__svcmas[open] > .cfbc-p9__svcmas-r::after{transform:rotate(-90deg)}
.cfbc-p9__svcmas-r:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:3px}
.cfbc-p9__svcs--mas{margin-top:var(--cafati-e-2)}

/* La despedida cierra el bloque, dentro de él y con su aire propio. */
.cfbc-p9__otros .cfbc-p9__desp{margin-bottom:0}

@media(prefers-reduced-motion:reduce){
	.cfbc-p9__svcmas-r::after{transition:none}
}

/* ══ TRAUMATOLOGÍA [mb1.935] · el centro traumatológico de La Reina (/traumatologia-veterinaria/) ══ */
/* La caja del centro en Servicios: hermana de la de la despedida, con el verde del respaldo. */
.cfbc-sv__centro{background:var(--cafati-papel)}
.cfbc-scope .cfbc-sv__centro-caja{background:var(--cafati-menta-tenue);border-left:4px solid var(--cafati-verde-accion);border-radius:var(--cafati-r-lg);max-width:76ch}
.cfbc-sv__centro-caja p{font-size:16px;line-height:1.7;color:var(--cafati-grafito)}
/* Señales: cuándo consultar */
.cfbc-tr__senales{background:var(--cafati-papel)}
.cfbc-tr__senales-l{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-tr__senal{background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-left:4px solid var(--cafati-purpura);border-radius:var(--cafati-r-md)}
.cfbc-tr__senal h3{font-size:18px;margin:0 0 6px;color:var(--cafati-purpura-hondo)}
.cfbc-tr__senal p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-tr__urgencia{margin:var(--cafati-e-4) 0 0;padding:14px 18px;border-radius:var(--cafati-r-md);background:var(--cafati-menta-tenue);border-left:4px solid var(--cafati-verde-accion);font-size:15.5px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-tr__urgencia strong{color:var(--cafati-verde)}
.cfbc-tr__urgencia a{color:var(--cafati-purpura-hondo);font-weight:700}
/* Cirugías: la lista y la foto del pabellón en acción */
.cfbc-tr__proc{background:var(--cafati-purpura-tenue)}
.cfbc-tr__proc-in{display:grid;gap:var(--cafati-e-4);align-items:start}
.cfbc-tr__proc-txt{min-width:0}
.cfbc-tr__proc-l{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-2)}
.cfbc-scope .cfbc-tr__proc-i{padding:14px 16px;background:var(--cafati-papel);border:1px solid var(--cafati-purpura-linea);border-radius:var(--cafati-r-md)}
.cfbc-tr__proc-i h3{font-size:17px;margin:0 0 4px;color:var(--cafati-purpura-hondo)}
.cfbc-tr__proc-i p{margin:0;font-size:14.5px;line-height:1.55;color:var(--cafati-grafito)}
.cfbc-tr__proc-vis{margin:0;border-radius:var(--cafati-r-lg);overflow:hidden;box-shadow:var(--cafati-sombra-md);background:var(--cafati-purpura-suave)}
.cfbc-scope .cfbc-tr__proc-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.cfbc-tr__proc-vis figcaption{padding:10px 14px;font-size:13.5px;color:var(--cafati-texto-tenue);background:var(--cafati-papel)}
/* El pabellón */
.cfbc-tr__pab{background:var(--cafati-papel)}
.cfbc-tr__pab-in{display:grid;gap:var(--cafati-e-4);align-items:center}
.cfbc-tr__pab-vis{margin:0;border-radius:var(--cafati-r-lg);overflow:hidden;box-shadow:var(--cafati-sombra-md);background:var(--cafati-purpura-suave)}
.cfbc-scope .cfbc-tr__pab-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.cfbc-tr__pab-txt p{font-size:16px;line-height:1.7;color:var(--cafati-grafito);max-width:62ch}
.cfbc-tr__pab-l{list-style:none;margin:var(--cafati-e-3) 0 0;padding:0;display:grid;gap:10px}
.cfbc-scope .cfbc-tr__pab-i{display:grid;gap:2px;padding:10px 14px;border-left:3px solid var(--cafati-verde-accion);background:var(--cafati-menta-tenue);border-radius:0 var(--cafati-r-md) var(--cafati-r-md) 0}
.cfbc-tr__pab-i strong{color:var(--cafati-verde);font-size:15.5px}
.cfbc-tr__pab-i span{font-size:14px;color:var(--cafati-texto-tenue)}
/* El equipo */
.cfbc-tr__equipo{background:var(--cafati-marfil)}
.cfbc-tr__medicos{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-tr__medico{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--cafati-e-3);align-items:start;background:var(--cafati-papel);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-lg)}
.cfbc-scope .cfbc-tr__medico-foto{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:top;display:block;background:var(--cafati-purpura-suave)}
.cfbc-tr__medico-foto--sin{display:inline-flex;align-items:center;justify-content:center;font-family:var(--cafati-fuente-ed);font-size:30px;color:var(--cafati-purpura-hondo)}
.cfbc-tr__medico-txt{min-width:0;display:grid;gap:4px}
.cfbc-tr__medico-txt h3{margin:0;font-size:19px;color:var(--cafati-verde)}
.cfbc-tr__medico-cargo{margin:0;font-size:14px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--cafati-purpura)}
.cfbc-tr__medico-bio{margin:0;font-size:15px;line-height:1.55;color:var(--cafati-grafito)}
.cfbc-tr__apoyo{margin:var(--cafati-e-4) 0 0}
.cfbc-tr__apoyo h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cafati-purpura);font-weight:700;margin:0 0 var(--cafati-e-2)}
.cfbc-tr__apoyo-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cfbc-tr__apoyo-l li{padding:8px 14px;border-radius:999px;background:var(--cafati-papel);border:1px solid var(--cafati-purpura-linea);font-size:14px;color:var(--cafati-grafito)}
/* Cómo funciona: cinco pasos que sí son una secuencia, y la caja del precio */
.cfbc-tr__pasos{background:var(--cafati-papel)}
.cfbc-tr__pasos-l{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:grid;gap:var(--cafati-e-3)}
.cfbc-scope .cfbc-tr__paso{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--cafati-e-3);align-items:start;padding:16px;background:var(--cafati-marfil);border-radius:var(--cafati-r-md);border:1px solid var(--cafati-purpura-linea)}
.cfbc-tr__paso h3{font-size:17px;margin:0 0 6px;color:var(--cafati-purpura-hondo)}
.cfbc-tr__paso p{margin:0;font-size:15px;line-height:1.6;color:var(--cafati-grafito)}
.cfbc-tr__num{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--cafati-purpura);color:var(--cafati-papel);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.cfbc-scope .cfbc-tr__precio{margin:var(--cafati-e-4) 0 0;background:var(--cafati-menta-tenue);border-left:4px solid var(--cafati-verde-accion);border-radius:var(--cafati-r-lg);max-width:76ch}
.cfbc-tr__precio h3{margin:0 0 8px;font-size:18px;color:var(--cafati-verde)}
.cfbc-tr__precio p{margin:0;font-size:15.5px;line-height:1.65;color:var(--cafati-grafito)}
.cfbc-tr__precio a{color:var(--cafati-purpura-hondo);font-weight:700}
/* El puente con el domicilio */
.cfbc-tr__puente{background:var(--cafati-purpura-tenue)}
.cfbc-tr__puente-in{display:grid;gap:var(--cafati-e-4);align-items:center}
.cfbc-tr__puente-txt p{font-size:16px;line-height:1.7;color:var(--cafati-grafito);max-width:62ch}
.cfbc-tr__puente-vis{margin:0;border-radius:var(--cafati-r-lg);overflow:hidden;box-shadow:var(--cafati-sombra-md);background:var(--cafati-purpura-suave)}
.cfbc-scope .cfbc-tr__puente-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
/* Dónde y cuándo */
.cfbc-tr__donde{background:var(--cafati-papel)}
.cfbc-scope .cfbc-tr__donde-caja{background:var(--cafati-marfil);border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-lg);max-width:76ch}
.cfbc-tr__donde-l{list-style:none;margin:var(--cafati-e-3) 0 var(--cafati-e-3);padding:0;display:grid;gap:10px}
.cfbc-tr__donde-l li{display:grid;gap:2px}
.cfbc-tr__donde-l strong{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--cafati-purpura)}
.cfbc-tr__donde-l span{font-size:15.5px;color:var(--cafati-grafito)}
.cfbc-tr__faq{background:var(--cafati-marfil)}
@media (min-width:720px){
  .cfbc-tr__senales-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-tr__proc-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-tr__medicos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-tr__pasos-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-tr__donde-l{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:960px){
  .cfbc-tr__senales-l{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cfbc-tr__proc-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--cafati-e-6)}
  .cfbc-tr__pab-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--cafati-e-6)}
  .cfbc-tr__puente-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--cafati-e-6)}
  .cfbc-tr__pasos-l{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* [mb1.944] Los pasos nunca van de cinco: el ancho util es 1080px y a cinco columnas quedaba una palabra por linea (Direccion, 5-sep, a 1460px). Tres por fila desde 960 es el maximo. */
/* [mb1.937] LA TPLO, DESTACADA (Dirección: «hay que mostrarla más y posicionarla»). Una banda oscura —naturaleza
   distinta, forma distinta—, el esquema antes/después por clases (nada literal), las señales de rotura de cruzado,
   TPLO frente a extracapsular, la recuperación por etapas y qué detalla el presupuesto. Y el índice de la página. */
.cfbc-tr__indice{background:var(--cafati-papel);border-bottom:1px solid var(--cafati-linea)}
.cfbc-tr__indice-l{list-style:none;margin:0;padding:6px 0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.cfbc-tr__indice-l::-webkit-scrollbar{display:none}
.cfbc-tr__indice-l li{flex:0 0 auto}
.cfbc-tr__indice-l a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--cafati-purpura-hondo);text-decoration:none;white-space:nowrap}
.cfbc-tr__indice-l a:hover,.cfbc-tr__indice-l a:focus-visible{background:var(--cafati-purpura-tenue)}
.cfbc-tr__indice-l a.cfbc-tr__indice-a--tplo{background:var(--cafati-purpura);color:var(--cafati-papel)}
.cfbc-tr__indice-l a.cfbc-tr__indice-a--tplo:hover,.cfbc-tr__indice-l a.cfbc-tr__indice-a--tplo:focus-visible{background:var(--cafati-purpura-hondo)}
.cfbc-tr__senales,.cfbc-tr__tplo,.cfbc-tr__proc,.cfbc-tr__pab,.cfbc-tr__equipo,.cfbc-tr__pasos,.cfbc-tr__puente,.cfbc-tr__donde{scroll-margin-top:12px}
.cfbc-tr__tplo{background:var(--cafati-purpura-hondo);color:var(--cafati-papel)}
.cfbc-tr__tplo .cfbc-lp__eyebrow{color:var(--cafati-menta)}
.cfbc-tr__tplo .cfbc-c__h2{color:var(--cafati-papel)}
.cfbc-tr__tplo h3{margin:0 0 var(--cafati-e-2);font-size:19px;color:var(--cafati-papel)}
.cfbc-tr__tplo-intro{margin:0 0 var(--cafati-e-4);font-size:16.5px;line-height:1.7;max-width:76ch;color:color-mix(in srgb, var(--cafati-papel) 88%, transparent)}
.cfbc-tr__tplo-intro strong{color:var(--cafati-menta)}
.cfbc-tr__tplo-grid{display:grid;gap:var(--cafati-e-4);align-items:start}
.cfbc-tr__tplo-fig{margin:0;background:var(--cafati-papel);border-radius:var(--cafati-r-lg);padding:var(--cafati-e-3);box-shadow:var(--cafati-sombra-md)}
.cfbc-tr__tplo-fig figcaption{margin:var(--cafati-e-2) 0 0;font-size:14px;line-height:1.55;color:var(--cafati-grafito)}
.cfbc-tr__svg{display:block;width:100%;height:auto}
.cfbc-tr__svg-hueso{fill:var(--cafati-marfil);stroke:var(--cafati-grafito);stroke-width:2;stroke-linejoin:round}
.cfbc-tr__svg-ref{stroke:var(--cafati-texto-tenue);stroke-width:1.5;stroke-dasharray:5 5}
.cfbc-tr__svg-meseta{stroke:var(--cafati-purpura);stroke-width:4;stroke-linecap:round}
.cfbc-tr__svg-arco{fill:none;stroke:var(--cafati-purpura);stroke-width:2}
.cfbc-tr__svg-lig{stroke:var(--cafati-grafito);stroke-width:3;stroke-dasharray:6 5;stroke-linecap:round}
.cfbc-tr__svg-corte{fill:none;stroke:var(--cafati-purpura);stroke-width:2.5;stroke-dasharray:7 5}
.cfbc-tr__svg-placa{fill:var(--cafati-verde)}
.cfbc-tr__svg-tornillo{fill:var(--cafati-papel)}
.cfbc-tr__svg-t{font-size:14px;fill:var(--cafati-grafito);font-family:inherit}
.cfbc-tr__svg-t--b{font-size:15px;font-weight:700;fill:var(--cafati-purpura-hondo)}
.cfbc-tr__svg-t--acento{font-weight:700;fill:var(--cafati-purpura-hondo)}
.cfbc-tr__svg-t--min{font-size:13px;fill:var(--cafati-texto-tenue)}
.cfbc-tr__tplo-txt{min-width:0}
.cfbc-tr__tplo-senales{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cfbc-scope .cfbc-tr__tplo-senal{display:grid;gap:2px;padding:12px 14px;border-radius:var(--cafati-r-md);background:color-mix(in srgb, var(--cafati-papel) 10%, transparent);border:1px solid color-mix(in srgb, var(--cafati-papel) 18%, transparent)}
.cfbc-tr__tplo-senal strong{font-size:15.5px;color:var(--cafati-papel)}
.cfbc-tr__tplo-senal span{font-size:14.5px;line-height:1.5;color:color-mix(in srgb, var(--cafati-papel) 78%, transparent)}
.cfbc-tr__tplo-nota{margin:var(--cafati-e-3) 0 0;font-size:15px;line-height:1.6;color:color-mix(in srgb, var(--cafati-papel) 82%, transparent)}
.cfbc-tr__tplo-vs,.cfbc-tr__tplo-rec,.cfbc-tr__tplo-incluye{margin:var(--cafati-e-5) 0 0}
.cfbc-tr__tplo-cards{display:grid;gap:var(--cafati-e-3)}
.cfbc-tr__tplo-card{padding:var(--cafati-e-3) var(--cafati-e-4);border-radius:var(--cafati-r-lg);background:color-mix(in srgb, var(--cafati-papel) 10%, transparent);border:1px solid color-mix(in srgb, var(--cafati-papel) 18%, transparent);display:grid;gap:10px;align-content:start}
.cfbc-tr__tplo-card--tplo{background:var(--cafati-papel);color:var(--cafati-grafito);border-color:var(--cafati-papel)}
.cfbc-tr__tplo-card h4{margin:0;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--cafati-menta)}
.cfbc-tr__tplo-card--tplo h4{color:var(--cafati-purpura)}
.cfbc-tr__tplo-fila{display:grid;gap:2px}
.cfbc-tr__tplo-fila strong{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb, var(--cafati-papel) 70%, transparent)}
.cfbc-tr__tplo-card--tplo .cfbc-tr__tplo-fila strong{color:var(--cafati-texto-tenue)}
.cfbc-tr__tplo-fila span{font-size:15px;line-height:1.5}
.cfbc-tr__tplo-linea{list-style:none;margin:0;padding:0;display:grid;gap:var(--cafati-e-2)}
.cfbc-scope .cfbc-tr__tplo-paso{display:grid;gap:4px;align-content:start;padding:14px 16px;border-radius:var(--cafati-r-md);background:color-mix(in srgb, var(--cafati-papel) 10%, transparent);border:1px solid color-mix(in srgb, var(--cafati-papel) 16%, transparent)}
.cfbc-tr__tplo-paso::before{content:"";display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--cafati-menta) 0%,color-mix(in srgb, var(--cafati-menta) 20%, transparent) 100%);margin:0 0 6px}
.cfbc-tr__tplo-paso strong{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--cafati-menta);font-variant-numeric:tabular-nums}
.cfbc-tr__tplo-paso span{font-size:15px;line-height:1.55;color:color-mix(in srgb, var(--cafati-papel) 85%, transparent)}
.cfbc-tr__tplo-incluye-l{margin:0;padding:0;display:grid;gap:10px;list-style:none}
.cfbc-tr__tplo-incluye-l li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.55;color:color-mix(in srgb, var(--cafati-papel) 88%, transparent)}
.cfbc-tr__tplo-incluye-l li::before{content:"\2713";width:24px;height:24px;border-radius:50%;background:var(--cafati-menta);color:var(--cafati-purpura-hondo);font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.cfbc-tr__tplo-incluye p{margin:var(--cafati-e-3) 0 0;font-size:15.5px;line-height:1.6;color:color-mix(in srgb, var(--cafati-papel) 88%, transparent);max-width:70ch}
.cfbc-tr__tplo .cfbc-doc__cta{margin-top:var(--cafati-e-3)}
.cfbc-tr__proc-i a{display:inline-flex;align-items:center;min-height:44px;color:var(--cafati-purpura-hondo);font-weight:700;text-decoration:none}
.cfbc-tr__proc-i a:hover,.cfbc-tr__proc-i a:focus-visible{text-decoration:underline}
@media (min-width:720px){
  .cfbc-tr__tplo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfbc-tr__tplo-incluye-l{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .cfbc-tr__tplo-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--cafati-e-5)}
  .cfbc-tr__tplo-linea{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* ══ FIN TRAUMATOLOGÍA ══ */

/* ══ [mb1.941] EL CONTENEDOR INTERIOR DE LAS SECCIONES, POR FIN CON REGLA ══
   `cfbc-c__in` se emite en trece páginas y ninguna regla lo vestía: en toda banda con fondo el texto
   arrancaba pegado al borde (Dirección, 5-sep: «hay muchos textos que comienzan sin margen en todas las
   páginas»). Medido a 375px en la página de traumatología: seis bandas con el texto a 0px de su borde.
   Una clase sin regla no rompe: simplemente no pinta (la lección de siempre, esta vez en el contenedor
   más repetido del portal). Relleno lateral e-3 en el teléfono y e-5 desde 768; vertical e-5/e-6.
   El FAQ ya trae su relleno en la sección y no lo duplica; el héroe trae el vertical y aquí recibe solo
   el lateral. */
.cfbc-scope .cfbc-c__sec>.cfbc-c__in{padding:var(--cafati-e-5) var(--cafati-e-3)}
.cfbc-scope .cfbc-doc__hero>.cfbc-c__in{padding:0 var(--cafati-e-3)}
.cfbc-scope .cfbc-c__sec.cfbc-lp__faq>.cfbc-c__in{padding:0}
.cfbc-scope .cfbc-fq__temas{padding-top:0}
@media (min-width:768px){
  .cfbc-scope .cfbc-c__sec>.cfbc-c__in{padding:var(--cafati-e-6) var(--cafati-e-5)}
  .cfbc-scope .cfbc-doc__hero>.cfbc-c__in{padding:0 var(--cafati-e-5)}
}
.cfbc-scope .cfbc-tr__indice>.cfbc-c__in{padding:0 var(--cafati-e-2)}
/* ══ FIN CONTENEDOR INTERIOR ══ */

/* ══ [mb1.943] LA RUTA SOBRE EL TÍTULO, TAMBIÉN EN LOS HEROS DE REJILLA ══
   Servicios, Eutanasia y Trabaje con Cafati pintan su hero como rejilla (texto + foto). La ruta entra como
   primera pieza y ocupa todo el ancho; así no hace falta otro contenedor ni tocar los cierres. */
.cfbc-sv__hero-in>.cfbc-doc__miga,.cfbc-eu__hero-in>.cfbc-doc__miga,.cfbc-tj__hero-in>.cfbc-doc__miga{grid-column:1/-1;margin-bottom:0}
.cfbc-scope .cfbc-p9__rail>.cfbc-doc__miga{margin-bottom:var(--cafati-e-3)}
/* ══ FIN LA RUTA SOBRE EL TÍTULO ══ */

/* ══ [mb1.944] EL RELLENO LATERAL, TAMBIÉN EN LOS HEROS CON CONTENEDOR PROPIO ══
   Dirección (5-sep, con la captura de Servicios): «a la página de servicios aún le falta el margen de los textos».
   La regla del 941 vestía las secciones estándar y el héroe de CSL_Doc; los heros de Servicios, Eutanasia,
   Trabaje, Términos/Privacidad y 404, y el cierre de Eutanasia, tienen su propio contenedor y seguían a 0px del
   borde de la franja. Regla genérica para TODO contenedor interior hijo directo de una sección; las específicas
   (más peso) siguen mandando y la exclusión del FAQ también. */
.cfbc-scope section>.cfbc-c__in{padding-inline:var(--cafati-e-3)}
@media (min-width:768px){
  .cfbc-scope section>.cfbc-c__in{padding-inline:var(--cafati-e-5)}
}
/* ══ FIN RELLENO LATERAL DE LOS HEROS ══ */

/* [mb1.945] La cabecera del embudo es la misma que la publica; solo declara su clase para que nadie la crea huerfana. La marca fija (paso 4) no invita a pulsar. */
.cfbc-scope .cfbc-nav--embudo .cfbc-nav__marca--fija{cursor:default}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.946] LA AUDITORÍA DEL PRIMER MÓDULO · lo que midió el detector a 375 y 1280 (5-sep)
 * Dirección: «algunas secciones tienen mucho espacio entre la barra superior, la ruta y el héroe».
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* 1 · EL RITMO DE LA RUTA SOBRE EL TÍTULO. Medido de la barra al H1 a 1280: 185px en Servicios, Trabaje y
 * Eutanasia (la ruta era una fila de la rejilla y cobraba su hueco de 64px), 137 en las páginas sobre CSL_Doc,
 * 184 en la ficha de servicio a 375 (su miga se partía en dos líneas). Un ritmo: e-3 de relleno arriba (e-4
 * desde 768), la ruta en UNA línea y e-4 hasta el antetítulo. Queda ≈105px en el teléfono y ≈120 en escritorio. */
.cfbc-scope .cfbc-doc__hero,.cfbc-scope .cfbc-sv__hero,.cfbc-scope .cfbc-eu__hero,.cfbc-scope .cfbc-tj__hero,.cfbc-scope .cfbc-lg__hero{padding-top:var(--cafati-e-3)}
/* [mb1.947] La cobertura (`.cfbc-lp__portada`) entra en el mismo ritmo: medido tras 946 daba 142 a 375 frente a 126. */
.cfbc-scope .cfbc-lp__portada{padding-top:var(--cafati-e-3)}
.cfbc-scope .cfbc-doc__miga{margin-bottom:var(--cafati-e-4)}
.cfbc-scope .cfbc-sv__hero-in>.cfbc-doc__miga,.cfbc-scope .cfbc-eu__hero-in>.cfbc-doc__miga,.cfbc-scope .cfbc-tj__hero-in>.cfbc-doc__miga{margin-bottom:0}
.cfbc-scope .cfbc-sv__hero-in,.cfbc-scope .cfbc-eu__hero-in,.cfbc-scope .cfbc-tj__hero-in{row-gap:var(--cafati-e-4)}
.cfbc-scope .cfbc-hero--2col{row-gap:var(--cafati-e-4)}
/* La ruta no se parte en dos líneas: la última miga (la página) se corta con puntos suspensivos. */
.cfbc-scope .cfbc-doc__miga,.cfbc-scope .cfbc-hero__miga{flex-wrap:nowrap;white-space:nowrap;min-width:0;overflow:hidden}
.cfbc-scope .cfbc-doc__miga>*,.cfbc-scope .cfbc-hero__miga>*{flex:0 0 auto}
.cfbc-scope .cfbc-doc__miga>[aria-current],.cfbc-scope .cfbc-hero__miga>[aria-current]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (min-width:768px){
  .cfbc-scope .cfbc-doc__hero,.cfbc-scope .cfbc-sv__hero,.cfbc-scope .cfbc-eu__hero,.cfbc-scope .cfbc-tj__hero,.cfbc-scope .cfbc-lg__hero{padding-top:var(--cafati-e-4)}
  .cfbc-scope .cfbc-lp__portada{padding-top:var(--cafati-e-4)}
}
/* 2 · LAS TARJETAS DEL EQUIPO (cobertura y portada) pintaban papel sobre menta sin relleno: el nombre arrancaba
 * en el borde de la tarjeta (0px, medido a 375 y 1280). Tarjeta de verdad: relleno, radio, línea y sombra. */
.cfbc-scope .cfbc-lp__eq .cfbc-lp__vet{padding:var(--cafati-e-4) var(--cafati-e-3);border-radius:var(--cafati-r-lg);border:1px solid var(--cafati-linea);box-shadow:var(--cafati-sombra-sm)}
/* 3 · EL CHIP FIJO de la portada («Concón», comuna sin página) era un <span> y las reglas del chip solo vestían al
 * <a>: fondo pegado al texto, sin caja. Misma caja que sus vecinos, sin la flecha. */
.cfbc-scope span.cfbc-lp__chip{display:inline-flex;align-items:center;gap:var(--cafati-e-2);min-height:48px;padding:var(--cafati-e-2) var(--cafati-e-3);border-radius:var(--cafati-r-md);border:1px solid var(--cafati-linea);font-size:14.5px;font-weight:700;line-height:1.3}
/* 4 · EL CARRIL DEL PERFIL bajo 560px llevaba la corona de color y ningún relleno: el nombre en el borde. */
.cfbc-scope .cfbc-p9__rail{padding:var(--cafati-e-4) var(--cafati-e-3);border-radius:var(--cafati-r-lg);border:1px solid var(--cafati-purpura-linea);background-color:var(--cafati-papel)}
@media (min-width:560px){ .cfbc-scope .cfbc-p9__rail{padding:var(--cafati-e-4)} }
/* 5 · Un correo largo no se parte solo: en el resumen legal salía 17px de su caja a 375. */
.cfbc-scope .cfbc-lg__corto-l li{overflow-wrap:anywhere}
/* 6 · LA PORTADA DESBORDABA 8px a 375: el héroe y «Cuándo» sangran e-4 hacia los lados, pero el <main> solo lleva
 * e-3 de relleno bajo 768. La sangría iguala al relleno del contenedor en cada tramo. */
.cfbc-scope .cfbc-pt__hero,.cfbc-scope .cfbc-pt__cuando{margin-left:calc(-1 * var(--cafati-e-3));margin-right:calc(-1 * var(--cafati-e-3));padding-left:var(--cafati-e-3);padding-right:var(--cafati-e-3)}
@media (min-width:768px){
  .cfbc-scope .cfbc-pt__hero,.cfbc-scope .cfbc-pt__cuando{margin-left:calc(-1 * var(--cafati-e-4));margin-right:calc(-1 * var(--cafati-e-4));padding-left:var(--cafati-e-4);padding-right:var(--cafati-e-4)}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.948] LA PASADA PREMIUM · lo que el censo de módulos encontró plano (5-sep)
 * Dirección: «deja todo ultra premium». Censo por estilos computados sobre 17 páginas a 1280: la
 * unidad de cada sección (li, article) y si tiene caja, marca, relleno o rejilla.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* 1 · LA FIRMA DEL TÍTULO DE SECCIÓN: antetítulo, Fraunces y una regla corta púrpura→menta bajo el título.
 * El perfil ya la tenía (mb1.6xx); ahora todas. Solo tras el antetítulo de sección: los títulos dentro de
 * cajas (despedida, centro) no la llevan. */
.cfbc-scope .cfbc-lp__eyebrow--sec + .cfbc-c__h2{position:relative;padding-bottom:var(--cafati-e-2)}
.cfbc-scope .cfbc-lp__eyebrow--sec + .cfbc-c__h2::after{content:"";position:absolute;left:0;bottom:0;width:88px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--cafati-purpura-media) 0%,var(--cafati-menta) 100%)}
/* 2 · LAS TARIFAS (packs y adicionales de Servicios): de filas iguales dentro de una caja a una rejilla de
 * tarjetas —nombre a la izquierda, precio en columna a la derecha—, dos columnas desde 720. */
.cfbc-scope .cfbc-sv__lista{padding:0;background:none;border:0;border-radius:0;display:grid;gap:var(--cafati-e-2)}
.cfbc-scope .cfbc-sv__lista li,.cfbc-scope .cfbc-sv__lista li:last-child{padding:14px 18px;min-height:60px;border:1px solid var(--cafati-linea);border-radius:var(--cafati-r-md);background:var(--cafati-papel);box-shadow:var(--cafati-sombra-sm);transition:border-color .16s ease,box-shadow .16s ease}
.cfbc-scope .cfbc-sv__lista li:hover{border-color:var(--cafati-purpura-linea);box-shadow:var(--cafati-sombra-md)}
.cfbc-scope .cfbc-sv__lista a{font-size:16px}
/* 3 · LAS COMUNAS DE «DÓNDE» (Servicios y cada ficha): la lista no tenía ninguna regla. Píldoras como las de
 * región; la comuna que aún no tiene página va apagada y sin enlace. */
.cfbc-scope .cfbc-sv__comunas{list-style:none;margin:var(--cafati-e-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.cfbc-scope .cfbc-sv__comunas li{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--cafati-linea);background:var(--cafati-papel);color:var(--cafati-texto-tenue);font-size:15px;font-weight:600}
.cfbc-scope .cfbc-sv__comunas li:has(> a){padding:0;border-color:var(--cafati-verde-suave)}
.cfbc-scope .cfbc-sv__comunas a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;color:var(--cafati-verde);font-weight:700;text-decoration:none;transition:background .16s ease,color .16s ease}
.cfbc-scope .cfbc-sv__comunas a:hover,.cfbc-scope .cfbc-sv__comunas a:focus-visible{background:var(--cafati-verde);color:var(--cafati-papel)}
.cfbc-scope .cfbc-sv__comunas a:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
.cfbc-scope .cfbc-sv__donde-cta{margin-top:var(--cafati-e-4)}
/* 4 · LAS COMUNAS DE UNA REGIÓN (hasta 38): de texto en cuatro columnas a losetas; las que tienen red, en menta
 * con su punto. */
.cfbc-scope .cfbc-rg__todas{gap:8px 10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cfbc-scope .cfbc-rg__una{justify-content:space-between;min-height:48px;padding:8px 14px;border-radius:var(--cafati-r-md);background:var(--cafati-papel);border:1px solid var(--cafati-linea);transition:border-color .16s ease,box-shadow .16s ease}
.cfbc-scope .cfbc-rg__una:has(> a):hover{border-color:var(--cafati-verde-suave);box-shadow:var(--cafati-sombra-sm)}
.cfbc-scope .cfbc-rg__una--red{background:var(--cafati-menta-tenue);border-color:var(--cafati-menta)}
.cfbc-scope .cfbc-rg__una a{flex:1 1 auto;min-height:32px;line-height:32px}
.cfbc-scope .cfbc-rg__una a:focus-visible{outline:3px solid var(--cafati-purpura);outline-offset:2px}
/* 5 · LOS PASOS DE LA DESPEDIDA: el mismo molde que los pasos de región (tarjeta con numeral), en la paleta
 * suave de la página. */
.cfbc-scope .cfbc-eu__paso{background:var(--cafati-papel);border:1px solid var(--cafati-purpura-linea);border-radius:var(--cafati-r-lg);padding:var(--cafati-e-3) var(--cafati-e-4);box-shadow:var(--cafati-sombra-sm)}
/* 6 · EL ASCENSO al pasar el ratón en lo que enlaza entero (puertas del 404, salidas del perfil, comunas de
 * región con red, chips del catálogo). Sin movimiento si el sistema lo pide. */
.cfbc-scope .cfbc-404__puerta,.cfbc-scope .cfbc-rg__com,.cfbc-scope .cfbc-lp__eq .cfbc-lp__vet{transition:transform .18s ease,box-shadow .18s ease}
.cfbc-scope .cfbc-404__puerta:hover,.cfbc-scope .cfbc-rg__com:hover,.cfbc-scope .cfbc-lp__eq .cfbc-lp__vet:hover{transform:translateY(-2px);box-shadow:var(--cafati-sombra-md)}
@media (min-width:720px){
  .cfbc-scope .cfbc-sv__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion: reduce){
  .cfbc-scope .cfbc-sv__lista li,.cfbc-scope .cfbc-sv__comunas a,.cfbc-scope .cfbc-rg__una,.cfbc-scope .cfbc-404__puerta,.cfbc-scope .cfbc-rg__com,.cfbc-scope .cfbc-lp__eq .cfbc-lp__vet{transition:none}
  .cfbc-scope .cfbc-404__puerta:hover,.cfbc-scope .cfbc-rg__com:hover,.cfbc-scope .cfbc-lp__eq .cfbc-lp__vet:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * [mb1.949] LO QUE VIO LA REVISIÓN VISUAL · Chrome, escritorio, 17 páginas (5-sep)
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* 1 · EL CIERRE. Era un h2 en sans y dos botones sobre marfil (uno invisible). Banda de cierre: degradado
 * púrpura-tenue → papel con una línea arriba, título en Fraunces y todo centrado. */
.cfbc-scope .cfbc-lp__cierre{background:linear-gradient(180deg,var(--cafati-purpura-tenue) 0%,var(--cafati-papel) 100%);border-top:1px solid var(--cafati-purpura-linea);border-radius:var(--cafati-r-lg);text-align:center;padding:var(--cafati-e-6) var(--cafati-e-4)}
.cfbc-scope .cfbc-lp__cierre h2{font-family:var(--cafati-fuente-ed);font-weight:600;letter-spacing:-.01em;color:var(--cafati-verde);margin:0 0 var(--cafati-e-2);text-wrap:balance}
.cfbc-scope .cfbc-lp__cierre p{max-width:58ch;margin:0 auto;color:var(--cafati-grafito)}
.cfbc-scope .cfbc-lp__cierre .cfbc-lp__cta{justify-content:center}
/* 2 · EL PIE decía «Escríbanos por WhatsAppWhatsApp»: el botón trae las dos piezas del rótulo y solo la cabecera
 * escondía una. En la banda del pie cabe la larga. */
.cfbc-scope .cfbc-pie__b2 .cfbc-nav__wa-corto{display:none}
/* 3 · LAS TARJETAS DE SERVICIO de la portada y de Servicios: el botón al pie de la tarjeta, como en `.cfbc-c__grid`. */
.cfbc-scope .cfbc-lp__svcgrid .cfbc-s{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.cfbc-scope .cfbc-lp__svcgrid .cfbc-s__cuerpo{display:flex;flex-direction:column;flex:1 1 auto}
.cfbc-scope .cfbc-lp__svcgrid .cfbc-s__cta{margin-top:auto}
.cfbc-scope .cfbc-lp__svcgrid .cfbc-s__cuerpo > *:has(+ .cfbc-s__cta){margin-bottom:var(--cafati-e-3)}
/* 4 · LOS LLAMADOS EN CAJA (despedida y centro en Servicios, respaldo en Veterinarios, centro en Nosotros) ocupaban
 * media pantalla y dejaban la otra media vacía. Desde 900: el texto a la izquierda y el botón a la derecha, centrado. */
@media (min-width:900px){
  .cfbc-scope .cfbc-sv__desp-caja,.cfbc-scope .cfbc-sv__centro-caja,.cfbc-scope .cfbc-vt__respaldo-caja,.cfbc-scope .cfbc-ns__centro-caja{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--cafati-e-6);align-items:center}
  .cfbc-scope .cfbc-sv__desp-caja>*,.cfbc-scope .cfbc-sv__centro-caja>*,.cfbc-scope .cfbc-vt__respaldo-caja>*,.cfbc-scope .cfbc-ns__centro-caja>*{grid-column:1;max-width:64ch}
  .cfbc-scope .cfbc-sv__desp-caja>:is(a,.cfbc-doc__cta):last-child,.cfbc-scope .cfbc-sv__centro-caja>:is(a,.cfbc-doc__cta):last-child,.cfbc-scope .cfbc-vt__respaldo-caja>:is(a,.cfbc-doc__cta):last-child,.cfbc-scope .cfbc-ns__centro-caja>:is(a,.cfbc-doc__cta):last-child{grid-column:2;grid-row:1/span 4;align-self:center;margin:0;max-width:none}
  .cfbc-scope .cfbc-ns__centro-caja>.cfbc-doc__cta{flex-direction:column;align-items:stretch}
}