/* Generado por `php artisan repronline:css` — no editar a mano.
   La fuente es css/repronline/v3.css y los archivos que importa. */

/* === css/repronline/v3/embudo.css === */
/* ============================================================================
   Repronline v3 — lo propio del embudo
   ----------------------------------------------------------------------------
   Repronline usa el MISMO sistema de diseño que cannis.org: carga
   public/css/web/institucional.css y escribe con sus clases `w-*` —w-hero,
   w-seccion, w-portada, w-titulo, w-bajada, w-campo, w-aviso, w-btn, w-chip,
   w-producto, w-tarjeta…— y con sus tokens --w-*.

   Esta hoja NO redefine nada de eso. Sólo agrega las tres piezas que el sitio
   institucional no tiene porque no tiene un embudo de pago:

     1. el stepper del recorrido,
     2. la tarjeta de profesional del listado,
     3. los remates del checkout.

   Por eso el prefijo es `rp-` y por eso es corta: si una regla de acá se
   parece a una `w-`, sobra y va la `w-`.
   ========================================================================= */

/* ── 1. El stepper ───────────────────────────────────────────────────────
   Cuatro pasos para que el paciente vea dónde está y cuánto le falta antes
   de pagar. Va en la barra, debajo del nav, y SÓLO dentro del embudo: fuera
   manda la franja de destinos. Tener los dos era decir lo mismo dos veces. */

.rp-pasos {
    background: var(--w-surface);
    border-bottom: 1px solid var(--w-border);
}

.rp-pasos__lista {
    max-width: var(--w-max);
    margin-inline: auto;
    padding: 0 var(--w-gutter);
    min-height: 64px;
    display: flex;
    align-items: center;
    /* Centrado. Antes los cuatro pasos tenían `flex: 1 1 0` y se repartían el
       ancho en partes iguales: como el último no lleva línea de unión, su
       cuarto quedaba medio vacío y toda la barra se veía corrida a la
       izquierda —207 px de aire a la derecha y cero a la izquierda, medido en
       el navegador—. Ahora cada paso ocupa lo suyo, las uniones tienen un
       ancho propio y el grupo se centra como cualquier otro contenido de la
       página. */
    justify-content: center;
    gap: 0;
    list-style: none;
    margin-block: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.rp-pasos__lista::-webkit-scrollbar { display: none; }

.rp-pasos__item { display: flex; align-items: center; flex: 0 0 auto; }

.rp-paso {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    padding: var(--w-s2) 0;
    font-size: 0.8125rem;
    color: var(--w-muted);
    text-decoration: none;
}

.rp-paso__marca {
    width: 26px; height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--w-font-titulos);
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--w-border);
    background: var(--w-surface-2);
    color: var(--w-muted);
}

.rp-paso__nombre { white-space: nowrap; font-weight: 600; }

.rp-paso__union {
    flex: 0 0 clamp(24px, 5vw, 80px);
    height: 1px;
    background: var(--w-border);
    margin-inline: var(--w-s2);
}

.rp-pasos__item:last-child .rp-paso__union { display: none; }

.rp-paso--hecho { color: var(--w-text-soft); }
.rp-paso--hecho .rp-paso__marca {
    background: var(--w-menta-suave);
    border-color: var(--w-border-fuerte);
    color: var(--w-menta);
}
.rp-paso--hecho + .rp-paso__union { background: var(--w-border-fuerte); }
.rp-paso--hecho:hover .rp-paso__nombre { color: var(--w-menta); }

.rp-paso--actual { color: var(--w-text); }
.rp-paso--actual .rp-paso__marca {
    /* La tinta sobre el acento es la navy, nunca blanco: sobre menta el
       blanco da 1,6:1. Es la deuda #32 del CLAUDE.md, y acá no se repite. */
    background: var(--w-menta);
    border-color: transparent;
    color: var(--w-ink);
}
.rp-paso--actual .rp-paso__nombre { font-weight: 800; }

@media (max-width: 640px) {
    /* Los cuatro nombres no entran: queda el del paso actual y los demás se
       reducen a su número. Sigue diciendo "vas 2 de 4". */
    .rp-paso:not(.rp-paso--actual) .rp-paso__nombre { display: none; }

    /* Centrar y desbordar a la vez recorta el arranque: si no entra, que
       empiece por el principio. */
    .rp-pasos__lista { justify-content: flex-start; }
}

/* ── 2. Tarjeta de profesional ───────────────────────────────────────────
   Se apoya en .w-tarjeta y sólo agrega la fila de identidad y el pie con el
   aporte, que el sistema no tiene. */

.rp-profesional__persona {
    display: flex;
    align-items: center;
    gap: var(--w-s3);
    margin-bottom: var(--w-s3);
}

.rp-profesional__foto {
    width: 58px; height: 58px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--w-border);
    background: var(--w-surface-2);
}

.rp-profesional__nombre {
    display: block;
    font-family: var(--w-font-titulos);
    font-size: 1.0625rem;
    color: var(--w-text);
    line-height: 1.25;
}

.rp-profesional__dato { display: block; font-size: 0.8125rem; color: var(--w-muted); }

/* El contenedor del texto tiene que poder encogerse. Sin `min-width: 0` un
   hijo flex se niega a bajar de su ancho de contenido, así que un nombre
   largo empujaba la tarjeta fuera de la pantalla en móvil: medido a 390 px,
   la ficha llegaba hasta el píxel 429. */
.rp-profesional__persona > span { min-width: 0; }

/* Sin foto, la inicial. NO se reusa `.rp-medico__iniciales`, que es el avatar
   de la tarjeta del marketplace y está hecho para ocupar todo el ancho de su
   caja: acá medía 308 px y empujaba el texto fuera de la pantalla. */
.rp-profesional__foto--letra {
    display: grid;
    place-items: center;
    font-family: var(--w-font-titulos);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--w-menta);
    background: color-mix(in srgb, var(--w-menta) 14%, transparent);
}

.rp-profesional__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s1) var(--w-s3);
    font-size: 0.8125rem;
    color: var(--w-muted);
}

.rp-profesional__pie {
    margin-top: var(--w-s3);
    padding-top: var(--w-s3);
    border-top: 1px solid var(--w-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-s2);
}

/* ── 3. Remates del checkout ─────────────────────────────────────────── */

.rp-importe { display: flex; flex-direction: column; }

.rp-importe__etiqueta {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--w-muted);
}

.rp-importe__cifra {
    font-family: var(--w-font-titulos);
    font-size: 1.25rem;
    color: var(--w-text);
}

.rp-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--w-s3);
    margin-top: var(--w-s2);
    padding-top: var(--w-s3);
    border-top: 1px solid var(--w-border);
}

.rp-total__cifra {
    font-family: var(--w-font-titulos);
    font-size: 1.75rem;
    color: var(--w-menta);
}

/* ── 4. Modal ────────────────────────────────────────────────────────────
   El sistema del sitio no tiene modales porque no los necesita. Éste es el
   único que queda en Repronline —el aviso de Reprocann fuera de servicio—:
   el login y el registro pasaron a ser pantallas. */

/* Los modales del embudo.

   Estaban armados como una caja suelta dentro de un velo que scrolleaba
   entero: con una agenda larga adentro, la cabecera y el pie se iban con el
   contenido y el paciente perdía de vista el título y el botón. Y el pie
   alternaba entre `flex-end` y `space-between` según el modal, así que dos
   modales del mismo producto alineaban distinto sus acciones.

   Ahora la caja es una columna con alto máximo: cabecera y pie fijos, el
   cuerpo scrollea solo. Y las acciones van SIEMPRE a la derecha, la
   secundaria antes de la principal, en todos los modales. */

.rp-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--w-s3);
    background: rgba(5, 11, 20, 0.72);
    backdrop-filter: blur(4px);
}

.rp-modal.active { display: flex; }

.rp-modal__caja {
    width: 100%;
    max-width: 560px;
    max-height: min(86vh, 760px);
    display: flex;
    flex-direction: column;
    background: var(--w-navy-2);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    box-shadow: var(--w-sombra);
    overflow: hidden;
}

.rp-modal__caja--ancha { max-width: 720px; }

/* La cruz va CENTRADA con el título.

   Estaba en `flex-start` para que no bajara con un título de dos renglones,
   pero con uno solo —que es el caso normal— quedaba más arriba que el texto y
   se notaba. Centrada se alinea siempre con el bloque del título, tenga los
   renglones que tenga. */
.rp-modal__cabecera {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-s3);
    padding: var(--w-s3) var(--w-s4);
    border-bottom: 1px solid var(--w-border);
}

/* El título del modal no es un título de sección: en `--chico` arrancaba en
   1,3rem y con un nombre largo se comía dos renglones al lado de la cruz. */
.rp-modal__titulo {
    font-family: var(--w-font-titulos);
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--w-text);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rp-modal__bajada {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--w-font-texto);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--w-muted);
}

.rp-modal__cerrar {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--w-border);
    border-radius: 50%;
    background: var(--w-surface);
    color: var(--w-muted);
    cursor: pointer;
    transition: color var(--w-transicion), border-color var(--w-transicion);
}

.rp-modal__cerrar:hover { color: var(--w-text); border-color: var(--w-border-fuerte); }
.rp-modal__cerrar:focus-visible { outline: 2px solid var(--w-menta); outline-offset: 2px; }
.rp-modal__cerrar .w-ico { width: 1.05em; height: 1.05em; }

.rp-modal__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--w-s4);
    display: flex;
    flex-direction: column;
    gap: var(--w-s3);
    color: var(--w-text-soft);
    text-align: left;
}

.rp-modal__cuerpo p { margin: 0; }

.rp-modal__pie {
    flex: 0 0 auto;
    padding: var(--w-s3) var(--w-s4);
    border-top: 1px solid var(--w-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--w-s2);
    flex-wrap: wrap;
}

/* Una nota en el pie (por ejemplo «el horario se toma al final») va a la
   izquierda y empuja las acciones a la derecha, sin romper la regla. */
.rp-modal__nota {
    margin-right: auto;
    font-size: 0.8rem;
    color: var(--w-muted);
    flex: 1 1 12rem;
    min-width: 0;
}

@media (max-width: 560px) {
    .rp-modal { padding: 0; align-items: flex-end; }

    /* En teléfono se comporta como una hoja: pegada abajo, a mano del pulgar,
       y sin esquinas inferiores porque no hay nada debajo. */
    .rp-modal__caja {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--w-radio) var(--w-radio) 0 0;
        border-bottom: 0;
    }

    .rp-modal__pie .w-btn { flex: 1 1 10rem; }
    .rp-modal__nota { flex-basis: 100%; margin-bottom: var(--w-s1); }
}

/* ── 5. Pantallas de cuenta ──────────────────────────────────────────────
   Ingresar y crear cuenta.

   La primera versión dejaba que el aire lo pusiera la sección: `w-seccion`
   son hasta 6,5 rem arriba y abajo, y la caja sumaba otros 4,5. Con seis
   campos apilados de a uno, el registro se iba a dos pantallas de scroll y
   se leía roto. Un formulario no es una sección editorial: o entra de un
   vistazo, o no se completa.

   Acá el aire lo pone la caja, la cabecera separa la mitad que en el sitio
   y los campos que van de a pares comparten fila. */

.rp-acceso {
    max-width: 460px;
    margin-inline: auto;
    padding-block: var(--w-s4);
}

/* El registro tiene el doble de campos y va en dos columnas: necesita más
   ancho que el login o las columnas quedan angostas. */
.rp-acceso--ancho { max-width: 620px; }

.rp-acceso .w-cabecera { margin-bottom: var(--w-s3); }
.rp-acceso .w-titulo { font-size: clamp(1.55rem, 4vw, 2rem); }
.rp-acceso .w-bajada { font-size: 0.95rem; }

.rp-acceso__caja {
    padding: var(--w-s4);
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
}

.rp-acceso__form { display: flex; flex-direction: column; gap: var(--w-s3); }

/* El sistema separa label y control con --w-s2 porque sus formularios son de
   dos o tres campos sueltos. Con seis apilados, ese aire multiplicado es el
   que estiraba la pantalla. */
.rp-acceso__form .w-campo { gap: var(--w-s1); }

.rp-acceso__par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--w-s2) var(--w-s3);
}

.rp-acceso__pie {
    margin-top: var(--w-s3);
    padding-top: var(--w-s3);
    border-top: 1px solid var(--w-border);
    text-align: center;
    font-size: 0.875rem;
    color: var(--w-muted);
}

.rp-acceso__recordar {
    display: flex;
    align-items: flex-start;
    gap: var(--w-s2);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--w-text-soft);
    cursor: pointer;
}

.rp-acceso__recordar input {
    accent-color: var(--w-menta);
    cursor: pointer;
    margin-top: 0.15em;
    flex-shrink: 0;
    /* El tamaño de fábrica (13 px) queda perdido al lado de campos de 48 px
       de alto, y en teléfono es un blanco difícil de tocar. */
    width: 1.05rem;
    height: 1.05rem;
}

/* La fila del "mantenerme conectado" y el "olvidé la contraseña" en la misma
   línea: son las dos decisiones chicas del login y ocupan un renglón, no dos. */
.rp-acceso__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-s3);
    flex-wrap: wrap;
}

.rp-acceso__fila .rp-acceso__recordar { margin: 0; }

@media (max-width: 560px) {
    .rp-acceso__par { grid-template-columns: 1fr; gap: var(--w-s3); }
    .rp-acceso__caja { padding: var(--w-s3); }
}

/* ── 6. El marketplace de profesionales ──────────────────────────────────
   La pantalla donde el paciente elige con quién hace el trámite. Es la que
   decide si paga o se va, así que la tarjeta está armada en el orden en que
   se lee una: quién es, qué lo respalda, cuánto cuesta y cuándo puede.

     1. Identidad — foto, nombre y organización. Lo primero que se mira.
     2. Respaldo  — matrícula, especialidad y trámites aprobados. La prueba
        social es lo que más mueve la elección en un marketplace de servicios
        profesionales, y acá es un número real de la base, no una estrella
        inventada.
     3. Disponibilidad — el próximo turno libre, en texto. Un "mañana 10:00"
        convierte más que cualquier botón, porque contesta la pregunta que el
        paciente se está haciendo.
     4. Aporte y acción — el precio junto al botón, nunca separados: que no
        haya que volver a subir para saber cuánto era.

   Las tarjetas tienen la misma altura porque la grilla las estira, y el pie
   va anclado abajo con margin-top:auto. Sin eso, con textos de largo
   distinto, los botones quedan a alturas distintas y la grilla se lee como
   una pila de recortes. */

/* Buscar y ordenar, en una sola barra.

   Primero fueron dos <select>. Después, cuatro chips sueltos flotando al lado
   del buscador: se leían como filtros —"mostrame sólo los express"— cuando en
   realidad son una sola elección de orden, y encima competían visualmente con
   los chips de las tarjetas, que sí son etiquetas.

   Ahora son un control segmentado —un grupo cerrado donde una opción está
   elegida y las otras no— adentro de la misma barra que el buscador. Un
   control, una caja: se entiende de un vistazo que ordena, no que filtra. */

.rp-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-s2);
    padding: 5px 5px 5px 0;
    margin-bottom: var(--w-s3);
    border: 1px solid var(--w-border);
    border-radius: 999px;
    background: var(--w-surface);
    transition: border-color var(--w-transicion);
}

.rp-barra:focus-within { border-color: var(--w-border-fuerte); }

.rp-barra__buscar {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    padding-left: var(--w-s3);
}

.rp-barra__buscar .w-ico { color: var(--w-muted); flex-shrink: 0; }

/* El campo va sin borde propio: el control que se ve es la barra entera. */
.rp-barra__buscar input {
    width: 100%;
    padding: 0.65rem 0;
    border: 0;
    background: none;
    color: var(--w-text);
    font-family: var(--w-font-texto);
    font-size: 0.95rem;
}

.rp-barra__buscar input:focus { outline: none; }
.rp-barra__buscar input::placeholder { color: rgba(255, 255, 255, 0.35); }
.rp-barra__buscar input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.4; }

.rp-barra__rotulo {
    flex-shrink: 0;
    color: var(--w-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rp-segmentos {
    display: flex;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 999px;
    background: var(--w-surface-2);
}

.rp-segmentos__btn {
    padding: 0.5rem 0.95rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--w-muted);
    font-family: var(--w-font-texto);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--w-transicion), background var(--w-transicion);
}

.rp-segmentos__btn:hover { color: var(--w-text); }

.rp-segmentos__btn[aria-pressed="true"] {
    /* La tinta sobre la menta es la navy. Nunca blanco: da 1,6:1. */
    background: var(--w-menta);
    color: var(--w-ink);
}

@media (max-width: 860px) {
    /* Apilado: la barra deja de ser una píldora y el orden se desliza. */
    .rp-barra {
        flex-direction: column;
        align-items: stretch;
        /* OJO: el wrap tiene que irse. En una columna que envuelve, cada
           "línea" toma de ancho el contenido de su ítem más grande —los tres
           botones sin cortar, 405 px— y los hijos se estiran a ESO, no al
           ancho de la barra. Con nowrap la columna es una sola línea y el
           ancho lo manda el contenedor, que es lo que se quiere. */
        flex-wrap: nowrap;
        padding: var(--w-s2);
        border-radius: var(--w-radio-sm);
    }
    .rp-barra__buscar { flex: 0 0 auto; padding-left: var(--w-s2); min-width: 0; }
    .rp-barra__rotulo { display: none; }

    /* min-width:0 es lo que permite encoger: sin él, un ítem flex se niega a
       bajar de su min-content —tres botones con nowrap, 405 px— y estira la
       página entera. Con él, el grupo se recorta y se desliza. */
    .rp-segmentos { min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .rp-segmentos::-webkit-scrollbar { display: none; }
}

.rp-resultados {
    margin-bottom: var(--w-s3);
    color: var(--w-muted);
    font-size: 0.88rem;
}

.rp-resultados strong { color: var(--w-text); font-weight: 700; }

.rp-medicos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--w-s3);
}

.rp-medico {
    display: flex;
    flex-direction: column;
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    transition: border-color var(--w-transicion), background var(--w-transicion), transform var(--w-transicion);
}

.rp-medico:hover {
    border-color: var(--w-border-fuerte);
    background: var(--w-surface-2);
    transform: translateY(-2px);
}

/* 1. Identidad */

.rp-medico__persona {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: var(--w-s3);
}

.rp-medico__retrato {
    position: relative;
    width: 64px;
    height: 64px;
}

.rp-medico__retrato img,
.rp-medico__iniciales {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.rp-medico__iniciales {
    display: grid;
    place-items: center;
    border: 1px solid var(--w-border-fuerte);
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-family: var(--w-font-titulos);
    font-size: 1.15rem;
    font-weight: 700;
}

.rp-medico__sello {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--w-navy);
    background: var(--w-menta);
    color: var(--w-ink);
}

.rp-medico__sello .w-ico { width: 0.72em; height: 0.72em; }

.rp-medico__nombre {
    font-family: var(--w-font-titulos);
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--w-text);
    /* El h2 traía el margen de fábrica y separaba el consultorio del nombre
       como si fueran dos datos distintos. Son el mismo: quién te atiende. */
    margin: 0;
}

.rp-medico__org {
    display: block;
    margin-top: 0.15rem;
    color: var(--w-muted);
    font-size: 0.84rem;
    line-height: 1.3;
}

/* 2. Respaldo */

.rp-medico__respaldo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s1);
    margin-top: var(--w-s3);
}

.rp-medico__marca {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    color: var(--w-text-soft);
    font-size: 0.76rem;
    font-weight: 600;
}

.rp-medico__marca .w-ico { width: 0.85em; height: 0.85em; color: var(--w-menta); }

.rp-medico__marca--express {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

.rp-medico__marca--express .w-ico { color: #fbbf24; }

/* Express es el único chip que abre algo, así que el botón es el chip
   entero: un ícono chiquito adentro de una píldora no se lee como algo que
   se pueda tocar, y en teléfono además no llega al área mínima de toque. */
button.rp-medico__marca {
    font-family: var(--w-font-texto);
    cursor: pointer;
}

button.rp-medico__marca--express:hover {
    border-color: rgba(245, 158, 11, 0.8);
    background: rgba(245, 158, 11, 0.2);
}

/* 3. Disponibilidad */

.rp-medico__turno {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    margin-top: var(--w-s3);
    padding: var(--w-s2) var(--w-s3);
    border-radius: var(--w-radio-sm);
    background: var(--w-menta-suave-2);
    color: var(--w-text-soft);
    font-size: 0.85rem;
}

.rp-medico__turno .w-ico { color: var(--w-menta); flex-shrink: 0; }
.rp-medico__turno strong { color: var(--w-text); font-weight: 700; }

.rp-medico__turno--vacio { background: var(--w-surface-2); }
.rp-medico__turno--vacio .w-ico { color: var(--w-muted); }

.rp-medico__agenda {
    margin-left: auto;
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0;
    color: var(--w-menta);
    font-family: var(--w-font-texto);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 4. Aporte y acción */

.rp-medico__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-s3);
    margin-top: auto;
    padding-top: var(--w-s4);
}

.rp-medico__precio { display: flex; flex-direction: column; line-height: 1.15; }

.rp-medico__precio-rotulo {
    color: var(--w-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rp-medico__precio-cifra {
    font-family: var(--w-font-titulos);
    font-size: 1.3rem;
    color: var(--w-text);
    /* Sin esto el "ARS" se cae al renglón siguiente en la columna angosta y
       el pie de esa tarjeta queda un renglón más alto que el de las otras:
       con margin-top:auto, los botones de la fila dejan de alinearse. */
    white-space: nowrap;
}

.rp-medico__precio-cifra span { color: var(--w-muted); font-size: 0.72rem; font-weight: 600; }

.rp-medico__pie .w-btn { flex-shrink: 0; }

.rp-medico .w-btn.cargando { opacity: 0.6; pointer-events: none; }

/* Vacío */

.rp-vacio {
    grid-column: 1 / -1;
    padding: var(--w-s6) var(--w-s4);
    border: 1px dashed var(--w-border);
    border-radius: var(--w-radio);
    text-align: center;
    color: var(--w-muted);
}

.rp-vacio .w-ico { width: 2.5em; height: 2.5em; color: var(--w-border-fuerte); margin-bottom: var(--w-s3); }
.rp-vacio__titulo { font-family: var(--w-font-titulos); font-size: 1.15rem; color: var(--w-text); margin-bottom: var(--w-s1); }

/* Paginación */

.rp-paginas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--w-s1);
    margin-top: var(--w-s5);
}

.rp-paginas__btn {
    min-width: 38px;
    height: 38px;
    padding: 0 0.6rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--w-border);
    border-radius: 10px;
    background: var(--w-surface);
    color: var(--w-text-soft);
    font-family: var(--w-font-texto);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--w-transicion), color var(--w-transicion);
}

.rp-paginas__btn:hover:not(:disabled) { border-color: var(--w-border-fuerte); color: var(--w-text); }
.rp-paginas__btn:disabled { opacity: 0.35; cursor: not-allowed; }

.rp-paginas__btn.activo {
    background: var(--w-menta);
    border-color: transparent;
    color: var(--w-ink);
}

.rp-paginas__puntos { color: var(--w-muted); padding-inline: 0.3rem; }

/* Los horarios del médico dentro del modal de agenda. */

.rp-horarios { display: grid; gap: var(--w-s3); }
.rp-horarios__dia { font-size: 0.85rem; font-weight: 700; color: var(--w-text); text-transform: capitalize; margin-bottom: var(--w-s2); }
.rp-horarios__horas { display: flex; flex-wrap: wrap; gap: var(--w-s1); }

.rp-horarios__hora {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    background: var(--w-surface);
    color: var(--w-text-soft);
    font-size: 0.78rem;
    font-weight: 600;
}

@media (max-width: 480px) {
    .rp-medicos { grid-template-columns: 1fr; }
    .rp-medico__pie { flex-direction: column; align-items: stretch; gap: var(--w-s2); }
    .rp-medico__pie .w-btn { width: 100%; justify-content: center; }
}

/* ── 7. Programa de referidos ────────────────────────────────────────────
   La página que le explica a una marca cómo trabaja con su enlace. Casi todo
   sale del sistema (w-serie, w-tarjetas, w-faq, w-codigo); lo único propio es
   el enlace de ejemplo, que tiene que leerse como una URL y no como prosa. */

.rp-enlace {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    padding: var(--w-s3) var(--w-s4);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(0.85rem, 2.4vw, 1.05rem);
    color: var(--w-text-soft);
    word-break: break-all;
}

.rp-enlace__slug { color: var(--w-menta); font-weight: 700; }

/* ── 8. Cuatro tarjetas ──────────────────────────────────────────────────
   `w-tarjetas` del sitio es de tres columnas, porque sus secciones siempre
   tienen tres. Las dos de Repronline que tienen cuatro —lo que habilita el
   REPROCANN y lo que trae un enlace de referido— dejaban una tarjeta
   huérfana en la segunda fila. Dos por dos se lee como una decisión; tres
   más una, como un error. */

.rp-cuatro { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 720px) {
    .rp-cuatro { grid-template-columns: 1fr; }
}

/* ── 9. El reloj del turno congelado ─────────────────────────────────────
   El paciente eligió el horario antes de pagar y se lo guardamos unos
   minutos. El bloque tiene que decir tres cosas a la vez —qué turno,
   cuánto queda, qué pasa si no llega— así que va en tres columnas: ícono,
   cuerpo y contador. La primera versión era una sola línea con la cuenta
   pegada a la fecha y se leía como un error de formato.

   Es ámbar y no menta a propósito: no es un logro, es algo que se está por
   vencer. Bajo el minuto pasa a rojo, porque ahí la diferencia entre pagar
   y perder el turno son segundos. */

/* El atributo `hidden` lo aplica la hoja del navegador con `display: none`,
   que pierde contra CUALQUIER regla de clase. Sin esta línea, el bloque de
   "se terminó el tiempo" —que nace con [hidden]— se pintaba desde que
   cargaba la página, al lado del reloj corriendo. */
.rp-reloj[hidden] { display: none; }

/* El reloj del turno congelado: una LÍNEA, no una tarjeta.

   Era un bloque con recuadro, ícono en círculo, tres párrafos y un contador
   gigante al costado: pesaba más que el botón de pagar, que es lo que el
   paciente vino a hacer. Ahora dice lo mismo en un renglón y el contador es
   una cifra al final. */
.rp-reloj {
    /* Grilla y no flex: con `flex-wrap` el texto pedía 16rem de base, así que
       en teléfono se llevaba la fila entera y la cifra caía SOLA en el
       renglón de abajo, pegada a la izquierda y a 1,35rem. Parecía un dato
       suelto en vez del tiempo que queda.

       Con tres columnas la cifra queda anclada arriba a la derecha, en la
       misma línea donde arranca el texto, y el texto envuelve debajo de sí
       mismo. Vale igual en teléfono y en escritorio: no hace falta un
       @media. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--w-s2);
    row-gap: var(--w-s2);
    padding-bottom: var(--w-s3);
    margin: 0;
    border-bottom: 1px solid var(--w-border);
    font-size: 0.9rem;
    color: var(--w-text-soft);
}

/* Los dos se empujan un pelín para sentarse sobre la primera línea del texto,
   que tiene line-height y no arranca en el borde de su caja. */
.rp-reloj > .w-ico {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.18em;
    color: var(--w-menta);
}

.rp-reloj__texto { min-width: 0; }
.rp-reloj__texto strong { color: var(--w-text); }

.rp-reloj__cuenta {
    font-family: var(--w-font-titulos);
    font-size: 1.15rem;
    line-height: 1;
    margin-top: 0.05em;
    color: var(--w-menta);
    font-variant-numeric: tabular-nums;
}

.rp-reloj--vencido > .w-ico,
.rp-reloj--vencido .rp-reloj__cuenta { color: #ffb4a2; }

/* El vencido no lleva cifra: lleva el botón de elegir otro horario. En
   teléfono baja a su propia fila en vez de espichar el texto contra el
   borde. */
@media (max-width: 600px) {
    .rp-reloj--vencido { grid-template-columns: auto minmax(0, 1fr); }
    .rp-reloj--vencido > .w-btn { grid-column: 1 / -1; justify-self: start; }
}

/* Cancelar, debajo del bloque de pago: separado por aire, alineado con el
   botón y sin competir con él. */
.rp-checkout__cancelar {
    display: block;
    margin: var(--w-s3) auto 0;
}

.rp-relleno {
    display: flex;
    align-items: center;
    gap: var(--w-s3);
    flex-wrap: wrap;
    margin-bottom: var(--w-s3);
    padding: var(--w-s3);
    border: 1px dashed rgba(245, 158, 11, 0.5);
    border-radius: var(--w-radio-sm);
    background: rgba(245, 158, 11, 0.07);
}

.rp-relleno__sello {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rp-relleno__texto {
    flex: 1 1 240px;
    min-width: 0;
    color: var(--w-text-soft);
    font-size: 0.88rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   11 · Panel de cuenta de la home
   -----------------------------------------------------------------------
   El bloque que ve en la home el paciente con sesión. La caja, el avatar y
   los accesos son los de institucional.css —`w-cuenta`, `w-acceso`—: acá va
   sólo lo que el sitio institucional no tiene porque no vende nada, que es
   la tarjeta de "qué sigue".

   Es el remate del embudo visto desde afuera: el paciente vuelve a la home
   con UNA pregunta, "¿y ahora qué tengo que hacer?", y esta tarjeta es la
   respuesta. Por eso va arriba de los accesos y con el color de acción.
   ═══════════════════════════════════════════════════════════════════════ */

.rp-siguiente {
    display: flex;
    align-items: center;
    gap: var(--w-s4);
    flex-wrap: wrap;
    padding: var(--w-s3) var(--w-s4);
    margin-bottom: var(--w-s4);
    border: 1px solid color-mix(in srgb, var(--w-menta) 32%, transparent);
    border-radius: var(--w-radio);
    background: color-mix(in srgb, var(--w-menta) 7%, transparent);
}

/* El texto manda: el botón se acomoda al final de la línea y baja solo
   cuando ya no entra, sin media query. */
.rp-siguiente__texto {
    flex: 1 1 260px;
    min-width: 0;
}

.rp-siguiente__titulo {
    display: block;
    font-family: var(--w-font-titulos);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--w-text);
}

.rp-siguiente__detalle {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--w-text-soft);
}

.rp-siguiente .w-btn {
    flex: 0 0 auto;
}

/* La ficha del trámite: número, estado y profesional, en una línea de
   rótulos chicos que no compite con la tarjeta de acción. */
.rp-tramite {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s2) var(--w-s4);
    margin-bottom: var(--w-s4);
    font-size: 0.85rem;
    color: var(--w-muted);
}

.rp-tramite__dato strong {
    color: var(--w-text);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   12 · Formulario del trámite
   -----------------------------------------------------------------------
   El sistema institucional trae `.w-campo` —label, input, ayuda— y nada
   más, porque el sitio público no tiene un formulario largo. El del trámite
   tiene veinte campos y tres decisiones que cambian lo que se pide después,
   así que necesita lo que falta: bloques numerados, grilla de dos columnas,
   tarjetas de opción, el buscador de localidad y el pie de acciones.

   Todo con prefijo rp-: `.w-campo` se usa tal cual para el par label+input,
   esto es lo que lo rodea.
   ═══════════════════════════════════════════════════════════════════════ */

.rp-form { display: flex; flex-direction: column; gap: var(--w-s4); }

/* Un bloque por decisión del paciente. La caja existe para que se vea dónde
   termina un tema y empieza el otro: veinte campos seguidos son un muro. */
.rp-form__bloque {
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    padding: clamp(1.25rem, 3vw, 2rem);
}

.rp-form__cabeza {
    display: flex;
    align-items: flex-start;
    gap: var(--w-s3);
    margin-bottom: var(--w-s4);
}

/* El número no es decorativo: dice cuántos pasos faltan sin obligar a
   contar cajas. */
.rp-form__n {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--w-menta) 16%, transparent);
    color: var(--w-menta);
    font-weight: 800;
    font-size: 0.95rem;
}

.rp-form__titulo {
    margin: 0;
    font-family: var(--w-font-titulos);
    font-size: clamp(1.1rem, 2.4vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--w-text);
}

.rp-form__nota {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: var(--w-text-soft);
}

/* Dos columnas para los campos cortos. `minmax(0, 1fr)` y no `1fr`: con 1fr
   un input de ancho 100% desborda la columna en vez de encogerla. */
.rp-form__grilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--w-s3) var(--w-s4);
}

@media (max-width: 700px) {
    .rp-form__grilla { grid-template-columns: minmax(0, 1fr); }
}

/* ── Tarjetas de opción ───────────────────────────────────────────────────
   Las dos decisiones que gobiernan el formulario —primera vez o renovación,
   autocultivo u organización— eran <select> con la explicación en otra caja
   más abajo. Elegir sin leer lo que estás eligiendo es la forma más cara de
   equivocarse acá: el tipo de cultivo decide qué dirección hay que declarar.
   Ahora la explicación va DENTRO de la opción. */

.rp-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--w-s3);
}

.rp-opcion {
    position: relative;
    display: flex;
    gap: var(--w-s3);
    padding: var(--w-s3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: border-color var(--w-transicion), background var(--w-transicion);
}

.rp-opcion:hover { border-color: var(--w-border-fuerte); }

/* El input real se queda: es el que viaja al POST y el que enfoca el
   teclado. Sólo se lo saca de la composición visual. */
.rp-opcion input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.rp-opcion__marca {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    border: 2px solid var(--w-border-fuerte);
    border-radius: 50%;
    transition: border-color var(--w-transicion), box-shadow var(--w-transicion);
}

.rp-opcion__titulo {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--w-text);
}

.rp-opcion__texto {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--w-text-soft);
}

.rp-opcion__aviso {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--w-ambar, #fbbf24);
}

/* El estado elegido va por :has() y TAMBIÉN por .is-active, que lo pone el
   JS: son la misma regla por dos caminos, para no depender de uno solo. */
.rp-opcion:has(input:checked),
.rp-opcion.is-active {
    border-color: var(--w-menta);
    background: color-mix(in srgb, var(--w-menta) 8%, transparent);
}

.rp-opcion:has(input:checked) .rp-opcion__marca,
.rp-opcion.is-active .rp-opcion__marca {
    border-color: var(--w-menta);
    box-shadow: inset 0 0 0 3px var(--w-navy, #0a1628), inset 0 0 0 1rem var(--w-menta);
}

.rp-opcion:has(input:focus-visible) {
    outline: 2px solid var(--w-menta);
    outline-offset: 2px;
}

/* ── Ayuda, error y guías ────────────────────────────────────────────── */

.rp-ayuda { font-size: 0.85rem; line-height: 1.55; color: var(--w-muted); }
.rp-ayuda strong { color: var(--w-text-soft); }

.rp-error {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fca5a5;
}

.rp-campo--mal input,
.rp-campo--mal select { border-color: #f87171; }

/* La guía de "qué tenés que hacer antes": aparece según lo que se eligió y
   puede mandar a salir del sitio, así que se distingue del resto. */
.rp-guia {
    margin-top: var(--w-s3);
    padding: var(--w-s3) var(--w-s4);
    border: 1px solid color-mix(in srgb, var(--w-menta) 24%, transparent);
    border-radius: var(--w-radio-sm);
    background: color-mix(in srgb, var(--w-menta) 5%, transparent);
}

.rp-guia__titulo {
    display: block;
    font-weight: 700;
    color: var(--w-text);
    margin-bottom: 0.45rem;
}

.rp-guia__intro { margin: 0 0 var(--w-s3); font-size: 0.92rem; line-height: 1.6; color: var(--w-text-soft); }

.rp-guia__pasos { display: grid; gap: var(--w-s2); margin-bottom: var(--w-s3); }

.rp-guia__paso { display: flex; gap: var(--w-s3); align-items: flex-start; }

.rp-guia__n {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--w-menta);
}

.rp-guia__paso strong { display: block; font-size: 0.92rem; color: var(--w-text); }
.rp-guia__paso small { display: block; margin-top: 0.15rem; font-size: 0.85rem; line-height: 1.5; color: var(--w-muted); }

.rp-guia__nota {
    padding: var(--w-s2) var(--w-s3);
    border-radius: var(--w-radio-sm);
    background: rgba(251, 191, 36, 0.09);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--w-text-soft);
}

.rp-guia__acciones { display: flex; flex-wrap: wrap; gap: var(--w-s2); margin-top: var(--w-s3); }

/* ── Desplegable de ayuda ─────────────────────────────────────────────── */

.rp-detalle { margin-top: var(--w-s2); }

.rp-detalle > summary {
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--w-menta);
    list-style: none;
}
.rp-detalle > summary::-webkit-details-marker { display: none; }
.rp-detalle > summary::before { content: '+ '; font-weight: 800; }
.rp-detalle[open] > summary::before { content: '– '; }

.rp-detalle__cuerpo {
    margin-top: var(--w-s2);
    padding: var(--w-s3);
    border-radius: var(--w-radio-sm);
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--w-text-soft);
}
.rp-detalle__cuerpo ol { margin: 0 0 var(--w-s2); padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.rp-detalle__cuerpo p:last-child { margin-bottom: 0; }

/* ── Prefijo del celular ──────────────────────────────────────────────── */

.rp-prefijo { display: flex; align-items: stretch; }

.rp-prefijo__cod {
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    border: 1px solid var(--w-border);
    border-right: none;
    border-radius: var(--w-radio-sm) 0 0 var(--w-radio-sm);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--w-muted);
    white-space: nowrap;
    user-select: none;
}

.rp-prefijo input { border-radius: 0 var(--w-radio-sm) var(--w-radio-sm) 0; }

/* ── Buscador de localidad ────────────────────────────────────────────── */

.rp-buscador { position: relative; }

.rp-buscador__lista {
    display: none;
    position: absolute;
    z-index: 30;
    inset-inline: 0;
    top: calc(100% + 0.35rem);
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid var(--w-border-fuerte);
    border-radius: var(--w-radio-sm);
    background: var(--w-navy-2, #0e1e33);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.rp-buscador__item {
    padding: 0.7rem 0.95rem;
    font-size: 0.93rem;
    color: var(--w-text);
    cursor: pointer;
}
.rp-buscador__item:hover { background: rgba(82, 242, 156, 0.12); }
.rp-buscador__item--vacio { color: var(--w-muted); cursor: default; }
.rp-buscador__item--vacio:hover { background: none; }

/* ── Conformidades ────────────────────────────────────────────────────── */

.rp-consentimiento {
    max-height: 13rem;
    overflow-y: auto;
    padding: var(--w-s3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: rgba(0, 0, 0, 0.22);
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--w-text-soft);
}

.rp-conformes { display: grid; gap: var(--w-s2); margin-top: var(--w-s3); }

.rp-conforme {
    display: flex;
    gap: var(--w-s3);
    align-items: flex-start;
    padding: var(--w-s3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: rgba(0, 0, 0, 0.14);
    cursor: pointer;
    transition: border-color var(--w-transicion);
}
.rp-conforme:hover { border-color: var(--w-border-fuerte); }
.rp-conforme:has(input:checked) { border-color: color-mix(in srgb, var(--w-menta) 45%, transparent); }

.rp-conforme input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    accent-color: var(--w-menta);
    cursor: pointer;
}

.rp-conforme__texto { font-size: 0.9rem; line-height: 1.55; color: var(--w-text-soft); }
.rp-conforme__texto a { color: var(--w-menta); }

/* ── Pie de acciones ──────────────────────────────────────────────────── */

.rp-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-s3);
    flex-wrap: wrap;
    padding-top: var(--w-s3);
}

/* En móvil el orden visual se invierte: la acción que avanza va arriba y a
   todo lo ancho, que es donde cae el pulgar. */
@media (max-width: 560px) {
    .rp-acciones { flex-direction: column-reverse; align-items: stretch; }
    .rp-acciones .w-btn { width: 100%; }
}

/* ── Velo de envío ────────────────────────────────────────────────────────
   El POST del formulario crea la cuenta, la gestión y la ficha del paciente:
   tarda. Sin nada en pantalla el paciente vuelve a tocar el botón, y por eso
   el submit además lo deshabilita. Esto es lo que se ve mientras tanto. */

.rp-cargando {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    place-items: center;
    padding: var(--w-s4);
    background: rgba(10, 22, 40, 0.88);
    backdrop-filter: blur(4px);
}

.rp-cargando.active { display: grid; }

.rp-cargando__caja {
    width: 100%;
    max-width: 22rem;
    padding: var(--w-s5) var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    text-align: center;
}

.rp-cargando__titulo {
    display: block;
    font-family: var(--w-font-titulos);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--w-text);
}

.rp-cargando__texto { display: block; margin-top: 0.35rem; font-size: 0.9rem; color: var(--w-muted); }

.rp-cargando__barra {
    height: 4px;
    margin-top: var(--w-s4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.rp-cargando__barra::after {
    content: '';
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: var(--w-menta);
    animation: rp-corre 1.1s ease-in-out infinite;
}

@keyframes rp-corre {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .rp-cargando__barra::after { animation: none; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   13 · Elegir horario
   -----------------------------------------------------------------------
   El calendario lo dibuja el JS. Antes lo hacía con `style.cssText` y
   tokens de la hoja anterior —`--accent-green`, `--bg-card`,
   `--border-primary`—, que en el sistema nuevo no existen: los días salían
   sin color y el hover reescribía tres propiedades a mano en cada evento.

   Acá están las clases y el JS sólo agrega o saca una: además de verse
   bien, el estado elegido pasa a ser una sola fuente de verdad.
   ═══════════════════════════════════════════════════════════════════════ */

/* Cabecera de una pantalla de TAREA.

   El sitio tiene `w-cabecera--centro` —eyebrow, título grande y bajada, todo
   al medio—, que está bien para una página que explica un producto y mal para
   una en la que hay que hacer algo: en la agenda empujaba el calendario 600 px
   abajo del pliegue. Acá el título va en una línea, al ras, y la nota es el
   dato que hay que leer antes de tocar nada. */
.rp-cabecera-tarea {
    display: flex;
    flex-direction: column;
    gap: var(--w-s2);
    padding-bottom: var(--w-s3);
    margin-bottom: var(--w-s4);
    border-bottom: 1px solid var(--w-border);
}

.rp-cabecera-tarea__titulo {
    font-family: var(--w-font-titulos);
    font-size: clamp(1.45rem, 3.2vw, 1.9rem);
    line-height: 1.15;
    margin: 0;
    color: var(--w-text);
}

.rp-cabecera-tarea__nota {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--w-s2);
    margin: 0;
    font-size: 0.9rem;
    color: var(--w-text-soft);
}

.rp-cabecera-tarea__nota .w-ico {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.18em;
    color: var(--w-menta);
}

.rp-cabecera-tarea__nota strong { color: var(--w-text); }

/* ⚠️ Se llama `rp-agendar` y NO `rp-agenda` a propósito.

   `.rp-agenda` ya era el contenedor del WIDGET de días y horas (más abajo en
   esta misma hoja, `display: flex`), y como va después ganaba la cascada: la
   pantalla de agendar perdía su grilla de dos columnas y el calendario y la
   ficha del profesional quedaban apilados en una columna angosta, pegados a
   la izquierda. Es la misma clase de choque que ya había pasado con
   `.rp-ficha`: dos bloques distintos compartiendo prefijo BEM.

   `rp-agendar` es la PANTALLA (la de elegir horario y la del turno
   confirmado); `rp-agenda` es el widget, con sus `__dia`, `__hora` y
   `__lista`. */
.rp-agendar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--w-s4);
    align-items: start;
}

@media (max-width: 900px) {
    /* La ficha del profesional va ARRIBA en móvil: es la confirmación de con
       quién estás por reservar, y abajo del calendario no la ve nadie. */
    .rp-agendar { grid-template-columns: minmax(0, 1fr); }
    .rp-agendar__aside { order: -1; }
}

.rp-panel {
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    padding: clamp(1.1rem, 2.5vw, 1.6rem);
}

.rp-panel__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-s3);
    margin-bottom: var(--w-s3);
    padding-bottom: var(--w-s3);
    border-bottom: 1px solid var(--w-border);
}

.rp-panel__titulo {
    margin: 0;
    font-family: var(--w-font-titulos);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--w-text);
}

/* ── Meses ────────────────────────────────────────────────────────────── */

.rp-mes { display: flex; align-items: center; justify-content: space-between; gap: var(--w-s2); margin-bottom: var(--w-s3); }

/* `capitalize` pone mayúscula en CADA palabra: «Septiembre De 2026». Con
   ::first-letter se levanta sólo la primera, que es lo que pide el castellano. */
.rp-mes__nombre { font-size: 0.95rem; font-weight: 700; color: var(--w-text); }

/* `inline-block` no es decorativo: ::first-letter NO aplica a un inline, y
   `.rp-fecha-larga` casi siempre es un <span>. Sin esto la fecha quedaba
   íntegra en minúscula, que es como la devuelve isoFormat. */
.rp-fecha-larga { display: inline-block; }
.rp-mes__nombre::first-letter,
.rp-fecha-larga::first-letter { text-transform: uppercase; }

.rp-mes__btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: none;
    color: var(--w-muted);
    cursor: pointer;
    transition: border-color var(--w-transicion), color var(--w-transicion);
}
.rp-mes__btn:hover:not(:disabled) { border-color: var(--w-menta); color: var(--w-menta); }
.rp-mes__btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Días ─────────────────────────────────────────────────────────────── */

.rp-dias { display: flex; flex-wrap: wrap; gap: var(--w-s2); }

.rp-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 4rem;
    padding: 0.6rem 1rem;
    border: 1px solid color-mix(in srgb, var(--w-menta) 26%, transparent);
    border-radius: var(--w-radio-sm);
    background: color-mix(in srgb, var(--w-menta) 7%, transparent);
    color: var(--w-menta);
    font: inherit;
    cursor: pointer;
    transition: background var(--w-transicion), color var(--w-transicion),
                border-color var(--w-transicion);
}

.rp-dia:hover { background: color-mix(in srgb, var(--w-menta) 18%, transparent); }

.rp-dia.is-elegido {
    background: var(--w-menta);
    border-color: var(--w-menta);
    color: var(--w-ink);
}

.rp-dia__mes { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
.rp-dia__num { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.rp-dia__sem { font-size: 0.6rem; font-weight: 600; text-transform: capitalize; opacity: 0.75; }

/* ── Horas ────────────────────────────────────────────────────────────── */

.rp-horas { display: flex; flex-wrap: wrap; gap: var(--w-s2); }

.rp-hora {
    padding: 0.5rem 1.05rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--w-text-soft);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--w-transicion), color var(--w-transicion),
                border-color var(--w-transicion);
}

.rp-hora:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--w-menta) 40%, transparent);
    background: color-mix(in srgb, var(--w-menta) 10%, transparent);
    color: var(--w-menta);
}

/* Un horario tomado se ve, no se esconde: que la grilla tenga huecos es
   información —dice que el profesional trabaja— y que estén apagados evita
   el "¿por qué no puedo elegir las 10?". */
.rp-hora:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

.rp-hora.is-elegido {
    background: var(--w-menta);
    border-color: var(--w-menta);
    color: var(--w-ink);
}

/* ── Remate de la elección ────────────────────────────────────────────── */

.rp-elegido {
    margin-top: var(--w-s4);
    padding-top: var(--w-s4);
    border-top: 1px solid var(--w-border);
}

.rp-elegido__resumen {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    padding: var(--w-s3);
    margin-bottom: var(--w-s3);
    border: 1px solid color-mix(in srgb, var(--w-menta) 30%, transparent);
    border-radius: var(--w-radio-sm);
    background: color-mix(in srgb, var(--w-menta) 8%, transparent);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--w-menta);
}

.rp-elegido__acciones { display: flex; gap: var(--w-s2); flex-wrap: wrap; }
.rp-elegido__acciones .w-btn { flex: 1 1 10rem; }

/* ── Ficha lateral ────────────────────────────────────────────────────── */

.rp-ficha { text-align: center; }

.rp-ficha__foto {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--w-s3);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--w-menta) 40%, transparent);
    background: var(--w-surface-2);
}

.rp-ficha__foto--letra {
    display: grid;
    place-items: center;
    font-family: var(--w-font-titulos);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--w-menta);
    background: color-mix(in srgb, var(--w-menta) 14%, transparent);
}

.rp-ficha__nombre { display: block; font-size: 1rem; font-weight: 700; color: var(--w-text); }
.rp-ficha__rol { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--w-muted); }

.rp-datos { margin-top: var(--w-s4); text-align: left; display: grid; gap: var(--w-s2); }

.rp-datos__fila {
    display: flex;
    justify-content: space-between;
    gap: var(--w-s3);
    padding-bottom: var(--w-s2);
    border-bottom: 1px solid var(--w-border);
    font-size: 0.85rem;
}
.rp-datos__fila:last-child { border-bottom: none; padding-bottom: 0; }
.rp-datos__rotulo { color: var(--w-muted); }
.rp-datos__valor { font-weight: 700; color: var(--w-text); text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════
   14 · El remate del embudo
   -----------------------------------------------------------------------
   La pantalla del turno confirmado. Lo que el paciente busca acá es UNA
   cosa —cuándo es— y después, si acaso, los detalles. Por eso el día y la
   hora van grandes arriba y todo lo demás baja a paneles.
   ═══════════════════════════════════════════════════════════════════════ */

.rp-remate {
    text-align: center;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--w-menta) 22%, transparent);
    border-radius: var(--w-radio);
    background: color-mix(in srgb, var(--w-menta) 5%, transparent);
}

.rp-remate__sello {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto var(--w-s3);
    border-radius: 50%;
    background: color-mix(in srgb, var(--w-menta) 16%, transparent);
    color: var(--w-menta);
}

.rp-remate__sello .w-ico { width: 1.5rem; height: 1.5rem; }

/* El dato que vino a buscar. Va entre el título y la explicación porque es
   lo que responde la pregunta, no un detalle de la respuesta. */
.rp-remate__cuando {
    display: inline-flex;
    align-items: center;
    gap: var(--w-s2);
    margin: var(--w-s3) 0 0;
    padding: var(--w-s2) var(--w-s4);
    border-radius: 999px;
    background: color-mix(in srgb, var(--w-menta) 12%, transparent);
    color: var(--w-menta);
    font-family: var(--w-font-titulos);
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    font-weight: 700;
}

.rp-remate__acciones {
    display: flex;
    justify-content: center;
    gap: var(--w-s3);
    flex-wrap: wrap;
    margin-top: var(--w-s4);
}

@media (max-width: 560px) {
    .rp-remate__acciones { flex-direction: column; }
    .rp-remate__acciones .w-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   15 · Mis trámites
   -----------------------------------------------------------------------
   Una tarjeta por trámite. Cada una tenía hasta cinco botones y los cinco
   eran `btn-primary`: con todo en el mismo nivel, el paciente tiene que
   leer los cinco para saber cuál es el que le toca. Ahora el siguiente
   paso es el único primario y el resto baja de nivel.
   ═══════════════════════════════════════════════════════════════════════ */

.rp-tramites { display: grid; gap: var(--w-s4); }

.rp-item {
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    overflow: hidden;
}

.rp-item__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-s3);
    flex-wrap: wrap;
    padding: var(--w-s3) var(--w-s4);
    border-bottom: 1px solid var(--w-border);
}

.rp-item__num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--w-muted);
}

.rp-item__cuerpo { display: flex; gap: var(--w-s4); padding: var(--w-s4); align-items: center; flex-wrap: wrap; }
.rp-item__texto { flex: 1 1 16rem; min-width: 0; }

.rp-item__medico {
    display: block;
    font-family: var(--w-font-titulos);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--w-text);
}

.rp-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s1) var(--w-s3);
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--w-muted);
}

.rp-item__meta strong { color: var(--w-text-soft); font-weight: 600; }

.rp-item__turno {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: var(--w-s2);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--w-menta) 28%, transparent);
    background: color-mix(in srgb, var(--w-menta) 8%, transparent);
    color: var(--w-menta);
    font-size: 0.82rem;
    font-weight: 700;
}

.rp-item__pie {
    display: flex;
    gap: var(--w-s2);
    flex-wrap: wrap;
    padding: var(--w-s3) var(--w-s4);
    border-top: 1px solid var(--w-border);
}

/* ── Estado ───────────────────────────────────────────────────────────── */

.rp-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.8rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.74rem;
    font-weight: 700;
}

/* El color sale de una variable por estado y no de tres atributos style
   repetidos en el Blade, que era lo que había. */
.rp-estado::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

.rp-estado--espera   { color: #fbbf24; }
.rp-estado--curso    { color: #a78bfa; }
.rp-estado--evaluar  { color: #60a5fa; }
.rp-estado--ok       { color: var(--w-menta); }
.rp-estado--mal      { color: #f87171; }
.rp-estado--neutro   { color: #94a3b8; }

.rp-express {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    color: #1a1a00;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Sin trámites ─────────────────────────────────────────────────────── */

.rp-vacio-caja {
    text-align: center;
    padding: clamp(2rem, 5vw, 3.5rem) var(--w-s4);
    border: 1px dashed var(--w-border-fuerte);
    border-radius: var(--w-radio);
}

/* ═══════════════════════════════════════════════════════════════════════
   16 · El perfil del profesional / del enlace de referido
   -----------------------------------------------------------------------
   La pantalla a la que cae el paciente desde un enlace compartido. Antes
   corría sobre las clases `pm-*` de la hoja histórica, con el degradé y el
   blur propios, y se leía como otro producto: era la única del embudo que
   no usaba el sistema.

   El orden importa más que el estilo. Abría con tres párrafos sobre qué es
   un enlace de referido y dejaba la identidad —quién es, quién te atiende—
   al fondo de todo: el paciente leía la letra chica de algo que todavía no
   sabía qué era. Ahora es ficha, aporte, agenda y remate, y la explicación
   larga vive en su modal.

   Y una sola `--primario` en la pantalla, la del aporte: el botón del cierre
   repite la misma acción, así que baja a `--secundario`. Con los dos en menta
   ninguno era EL paso.
   ═══════════════════════════════════════════════════════════════════════ */

.rp-perfil {
    display: flex;
    flex-direction: column;
    gap: var(--w-s5);
    max-width: 720px;
}

/* ── Quién es ─────────────────────────────────────────────────────────
   Sin retrato y sin «Partnership Repronline»: los dos viven en la barra, a
   diez centímetros de acá, y repetirlos sólo hacía la tarjeta más alta. Ahora
   la tarjeta dice lo que la barra NO dice, y va DEBAJO del bloque de reserva
   porque quién es el profesional es evidencia, no la acción. */

.rp-quien {
    display: flex;
    flex-direction: column;
    gap: var(--w-s2);
    padding-top: var(--w-s4);
    border-top: 1px solid var(--w-border);
}

.rp-quien__rotulo {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--w-menta);
}

.rp-quien__nombre {
    font-family: var(--w-font-titulos);
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    line-height: 1.15;
    color: var(--w-text);
    margin: 0;
    overflow-wrap: anywhere;
}

.rp-quien__dato { font-size: 0.95rem; color: var(--w-text-soft); margin: 0; }
.rp-quien__dato strong { color: var(--w-text); }
.rp-quien__dato-suave { color: var(--w-muted); }

/* Cada sello es una píldora que se encoge a su contenido.

   Como texto suelto en una fila, el más largo —«En Repronline desde enero de
   2025»— se estiraba a todo el ancho, partía en dos renglones y dejaba su
   ícono contra el margen izquierdo mientras el texto se centraba: ése era el
   que se veía torcido en teléfono. Una píldora no puede desalinearse respecto
   de sí misma, y la fila la centra `justify-content`. */
.rp-quien__sellos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s1);
    list-style: none;
    margin: var(--w-s1) 0 0;
    padding: 0;
}

.rp-quien__sellos li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--w-surface-2);
    border: 1px solid var(--w-border);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--w-text-soft);
    white-space: nowrap;
}

.rp-quien__sellos .w-ico { width: 1.05em; height: 1.05em; color: var(--w-menta); flex: 0 0 auto; }

.rp-quien__texto { font-size: 0.92rem; color: var(--w-text-soft); margin: var(--w-s1) 0 0; }

/* Sin recuadro: era una caja adentro de la caja. */
.rp-quien__nota {
    font-size: 0.9rem;
    color: var(--w-muted);
    margin: var(--w-s2) 0 0;
}

.rp-quien__nota .w-btn { margin-left: 0.2rem; }

/* ── Reservá tu turno: EL bloque de la pantalla ──────────────────────────

   Eran dos tarjetas del mismo peso: una para el precio —una pantalla entera de
   teléfono para decir «Gratis»— y otra para la agenda. Pero son la misma
   decisión: cuánto cuesta y cuándo es. Juntas, y con el acento y el aire que
   las otras dos no tienen, para que se vea cuál es el bloque que importa.

   Las otras dos tarjetas —quién es y cómo sigue— quedan planas a propósito:
   son evidencia, no acción. Cuando las cuatro pesaban igual, la pantalla se
   leía como un formulario y no como una landing. */

/* Sin tarjeta.

   Era un recuadro translúcido con borde, y con los otros dos bloques igual la
   pantalla se leía como una pila de cajas. La jerarquía ahora la dan el
   TAMAÑO y el AIRE: este bloque tiene el título más grande, la cifra en menta
   y todo el espacio arriba; los otros dos van detrás de una línea fina. */
.rp-reserva {
    display: flex;
    flex-direction: column;
    gap: var(--w-s3);
}

.rp-reserva__cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--w-s3);
    flex-wrap: wrap;
}

.rp-reserva__titulo {
    font-family: var(--w-font-titulos);
    font-size: clamp(1.7rem, 4.5vw, 2.4rem);
    line-height: 1.15;
    color: var(--w-text);
    margin: 0;
}

.rp-reserva__aporte { display: flex; align-items: baseline; gap: var(--w-s2); }

.rp-reserva__aporte-rotulo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--w-muted);
}

/* La cifra dejó de ser un cartel de 4rem: al lado de lo que se está comprando
   se lee igual y no se come la pantalla. */
.rp-reserva__aporte-cifra {
    font-family: var(--w-font-titulos);
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1;
    color: var(--w-menta);
}

.rp-reserva__aporte-cifra span {
    font-family: var(--w-font-texto);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--w-muted);
    margin-left: 0.3rem;
}

.rp-reserva__incluye { font-size: 0.95rem; color: var(--w-text-soft); margin: 0; }
.rp-reserva__medios { display: block; margin-top: var(--w-s1); font-size: 0.82rem; color: var(--w-muted); }

/* Sin recuadro: era una caja adentro de la caja. El ícono ya distingue el
   aviso del resto del texto. */
.rp-reserva__express {
    display: flex;
    align-items: flex-start;
    gap: var(--w-s2);
    font-size: 0.92rem;
    color: var(--w-text-soft);
    margin: 0;
}

.rp-reserva__express .w-ico { flex: 0 0 auto; width: 1.2em; height: 1.2em; color: var(--w-menta); margin-top: 0.15em; }
.rp-reserva__express strong { color: var(--w-text); }

/* El botón a ancho completo y sin flecha.

   Estaba centrado dentro de un pie con borde —otra caja— y con una flecha a la
   izquierda que, al lado de un texto largo y centrado, quedaba colgada lejos
   del texto. A ancho completo es un solo objeto y el texto manda. */
.rp-reserva__accion { margin-top: var(--w-s2); }

/* ── Cómo sigue ──────────────────────────────────────────────────────────
   Tres pasos y un enlace de ayuda. Reemplaza al cierre, que era un tercer
   botón con la misma acción que los dos de arriba. */

.rp-luego {
    display: flex;
    flex-direction: column;
    gap: var(--w-s3);
    padding-top: var(--w-s4);
    border-top: 1px solid var(--w-border);
}

.rp-luego__titulo {
    font-family: var(--w-font-titulos);
    font-size: 1.15rem;
    color: var(--w-text);
    margin: 0;
}

.rp-luego__pasos {
    display: grid;
    gap: var(--w-s3);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: paso;
}

.rp-luego__pasos li {
    display: flex;
    align-items: flex-start;
    gap: var(--w-s2);
    font-size: 0.93rem;
    color: var(--w-text-soft);
}

.rp-luego__pasos strong { color: var(--w-text); }

.rp-luego__n {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--w-menta-suave);
    border: 1px solid var(--w-border-fuerte);
    color: var(--w-menta);
    font-size: 0.8rem;
    font-weight: 700;
}

.rp-luego__ayuda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--w-s1);
    padding-top: var(--w-s3);
    border-top: 1px solid var(--w-border);
    font-size: 0.9rem;
    color: var(--w-muted);
    margin: 0;
}

.rp-luego__ayuda .w-ico { width: 1.05em; height: 1.05em; }

/* ── La agenda, dentro del bloque de reserva ─────────────────────────── */

.rp-calendario { display: flex; flex-direction: column; gap: var(--w-s3); margin-top: var(--w-s2); }

.rp-calendario__meses {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-s2);
}

.rp-calendario__mover {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--w-border);
    border-radius: 50%;
    background: var(--w-surface);
    color: var(--w-text-soft);
    cursor: pointer;
    transition: border-color var(--w-transicion), color var(--w-transicion);
}

.rp-calendario__mover:hover:not(:disabled) { border-color: var(--w-menta); color: var(--w-menta); }
.rp-calendario__mover:disabled { opacity: 0.35; cursor: not-allowed; }
.rp-calendario__mover .w-ico { width: 1.1em; height: 1.1em; transform: rotate(90deg); }
.rp-calendario__mover--sig .w-ico { transform: rotate(-90deg); }

/* `capitalize` levanta CADA palabra y deja «Septiembre De 2026». */
.rp-calendario__mes,
.rp-agenda__rotulo span {
    font-weight: 700;
    color: var(--w-text);
    text-transform: none;
}

.rp-calendario__mes::first-letter,
.rp-agenda__rotulo span::first-letter { text-transform: uppercase; }

/* Días: una fila que scrollea en el teléfono antes que una grilla que
   obligue a achicar cada ficha hasta no poder tocarla. */
/* El contenedor del widget. La ficha del profesional lo envuelve en
   `.rp-calendario` —que le suma la navegación de meses—; el modal de «Ver
   agenda» del listado lo usa pelado, porque ahí los días vienen servidos. */
.rp-agenda { display: flex; flex-direction: column; gap: var(--w-s3); }

.rp-agenda__dias {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s2);
}

.rp-agenda__dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 72px;
    padding: var(--w-s2);
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    color: var(--w-text-soft);
    cursor: pointer;
    transition: border-color var(--w-transicion), background var(--w-transicion);
}

.rp-agenda__dia:hover { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }

.rp-agenda__dia--activo {
    background: var(--w-menta-suave);
    border-color: var(--w-menta);
}

.rp-agenda__dia-mes {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--w-muted);
}

.rp-agenda__dia-num {
    font-family: var(--w-font-titulos);
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--w-menta);
}

.rp-agenda__dia-nom { font-size: 0.7rem; color: var(--w-muted); text-transform: none; }
.rp-agenda__dia-nom::first-letter { text-transform: uppercase; }
.rp-agenda__dia--activo .rp-agenda__dia-nom { color: var(--w-text-soft); }

.rp-agenda__horas {
    padding-top: var(--w-s3);
    border-top: 1px solid var(--w-border);
}

.rp-agenda__rotulo {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: var(--w-s2);
    font-size: 0.9rem;
}

.rp-agenda__rotulo .w-ico { width: 1.05em; height: 1.05em; color: var(--w-menta); }

.rp-agenda__lista { display: flex; flex-wrap: wrap; gap: var(--w-s1); }

/* Ahora SÍ se tocan: cada horario arranca el trámite con ese turno guardado.
   Antes eran informativos —el turno se elegía recién después de cargar los
   datos— y por eso no tenían pinta de botón. Ahora son la puerta de entrada
   más corta que tiene la pantalla, así que se ven y se sienten como tal. */
.rp-agenda__hora {
    padding: 0.5rem 0.9rem;
    background: var(--w-surface-2);
    border: 1px solid var(--w-border);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--w-text-soft);
    cursor: pointer;
    transition: background var(--w-transicion), border-color var(--w-transicion), color var(--w-transicion);
}

.rp-agenda__hora:hover:not(:disabled) {
    background: var(--w-menta-suave);
    border-color: var(--w-menta);
    color: var(--w-menta);
}

.rp-agenda__hora:focus-visible { outline: 2px solid var(--w-menta); outline-offset: 2px; }
.rp-agenda__hora:disabled { opacity: 0.5; cursor: progress; }

/* El aviso de que todavía no está reservado va pegado a los horarios: es la
   letra chica de lo que el paciente está por tocar, no una nota al pie. */
.rp-agenda__aviso {
    font-size: 0.8rem;
    color: var(--w-muted);
    margin: 0 0 var(--w-s2);
}

.rp-agenda__vacio { font-size: 0.9rem; color: var(--w-muted); margin: 0; }

@media (max-width: 640px) {
    /* La tarjeta de identidad ya no se centra: sin retrato, un bloque de
       texto centrado con líneas de largos distintos se lee peor que
       alineado a la izquierda. Los sellos sí, porque son píldoras. */
    .rp-quien__sellos { justify-content: flex-start; }

    .rp-agenda__dias { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--w-s1); }
    .rp-agenda__dia { flex: 0 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   18 · La marca del partner, DENTRO de la barra
   -----------------------------------------------------------------------
   En un enlace de referido la barra es de la organización que derivó al
   paciente: ocupa el lugar del logo de Repronline, centrada, con el nombre
   y el rótulo «Partnership Repronline» debajo.

   Antes intenté dos cosas peores. Primero meterla en el hueco del claim
   —de costado, compitiendo con el logo, y escondida en teléfono—. Después
   dejarla como banda propia debajo de la barra, que daba DOS filas de
   identidad peleándose por la misma pantalla.

   ⚠️ En este modo la barra tiene UNA sola fila: no hay franja de destinos.
   Por eso `--w-nav-h` se redefine más abajo — el token vale 128 px, que es
   el alto de las dos filas, y todo lo que se apoya en él (el scroll-padding
   de los anclajes, el padding del hero) quedaba con una banda vacía de
   76 px. Ése era el «espacio horrible» al hacer scroll.
   ═══════════════════════════════════════════════════════════════════════ */

.rp-partner {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    text-decoration: none;
}

.rp-partner__foto {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--w-surface-2);
}

.rp-partner__texto { display: flex; flex-direction: column; min-width: 0; text-align: left; }

.rp-partner__nombre {
    font-family: var(--w-font-titulos);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--w-text);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-partner__rotulo {
    font-size: 0.72rem;
    color: var(--w-muted);
    line-height: 1.3;
    white-space: nowrap;
}
.rp-partner__rotulo strong { color: var(--w-menta); font-weight: 700; }

/* El alto REAL de la barra en modo partner: una fila. Sin esto, todo lo que
   calcula sobre `--w-nav-h` deja 76 px de aire muerto arriba. */
body:has(.rp-partner) { --w-nav-h: 76px; }

@media (max-width: 560px) {
    .rp-partner { gap: 0.5rem; }
    .rp-partner__foto { width: 32px; height: 32px; }
    /* En teléfono el nombre ENVUELVE, no se corta.
       Con `nowrap` + ellipsis y un tope de 40vw, «Sathiri Tienda de Cultivo
       Bariloco» salía como «Sathiri Ti…»: la organización que derivó al
       paciente no se reconocía, que es lo único que este bloque tiene que
       lograr. Ahora entra en dos renglones y el clamp evita que un nombre
       larguísimo estire la barra. */
    .rp-partner__nombre {
        font-size: 0.88rem;
        max-width: none;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .rp-partner__rotulo { font-size: 0.68rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   19 · El menú de «Mi cuenta»
   -----------------------------------------------------------------------
   Era un enlace directo a Mis trámites: prometía una cuenta y entregaba una
   pantalla, y cerrar sesión no estaba en ningún lado del producto.

   Va con <details>, que abre y cierra sin JavaScript. Lo único que necesita
   script es cerrarse al tocar afuera, que está en el layout.
   ═══════════════════════════════════════════════════════════════════════ */

.rp-cuenta { position: relative; }

.rp-cuenta > summary { cursor: pointer; list-style: none; }
.rp-cuenta > summary::-webkit-details-marker { display: none; }

.rp-cuenta__flecha {
    width: 0.8em;
    height: 0.8em;
    color: var(--w-muted);
    transition: transform var(--w-transicion);
}
.rp-cuenta[open] .rp-cuenta__flecha { transform: rotate(180deg); }

.rp-cuenta__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 120;
    min-width: 15rem;
    padding: var(--w-s2);
    border: 1px solid var(--w-border-fuerte);
    border-radius: var(--w-radio-sm);
    background: var(--w-navy-2, #0f2341);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.rp-cuenta__quien {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: var(--w-s2);
    margin-bottom: var(--w-s2);
    border-bottom: 1px solid var(--w-border);
}

.rp-cuenta__nombre { font-weight: 700; font-size: 0.92rem; color: var(--w-text); }

.rp-cuenta__mail {
    font-size: 0.8rem;
    color: var(--w-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-cuenta__item {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    width: 100%;
    padding: 0.6rem var(--w-s2);
    border: 0;
    border-radius: var(--w-radio-sm);
    background: none;
    color: var(--w-text-soft);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--w-transicion), color var(--w-transicion);
}

.rp-cuenta__item:hover { background: rgba(255, 255, 255, 0.06); color: var(--w-text); }
.rp-cuenta__item .w-ico { width: 1em; height: 1em; color: var(--w-menta); }

.rp-cuenta__item--salir { color: #fca5a5; }
.rp-cuenta__item--salir:hover { background: rgba(248, 113, 113, 0.1); color: #fca5a5; }
.rp-cuenta__item--salir .w-ico { color: #fca5a5; }

/* En teléfono el menú se ancla al borde y no se sale de la pantalla. */
@media (max-width: 480px) {
    .rp-cuenta__menu { right: -0.5rem; min-width: min(17rem, calc(100vw - 2rem)); }
}

/* El flotante de «Agendar turno» comparte esquina con el botón de Cannis AI,
   que ahora va pegado abajo. Éste se apila encima, con su alto más aire, así
   que se acomodan solos si alguno cambia de tamaño. */
.rp-flotante {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.25rem + 54px + var(--w-s2) + env(safe-area-inset-bottom));
    z-index: 90;
}

/* La cuenta en teléfono vive DENTRO del menú del burger.

   El desplegable de la barra entraba a los empujones entre la marca del
   partner y el burger: le comía el ancho al nombre de la organización —que
   quedaba cortado en «Sathiri Ti…»— y su panel, anclado a la derecha de un
   botón ya pegado al borde, se abría fuera de la pantalla. Es el mismo
   criterio que institucional.css ya aplica a «Ingresar». */
@media (max-width: 900px) {
    .rp-cuenta { display: none; }
}

/* La identidad arriba del todo en el menú: quién sos antes que a dónde vas. */
.rp-menu__quien {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    padding-bottom: var(--w-s3);
    margin-bottom: var(--w-s1);
    border-bottom: 1px solid var(--w-border);
}

.rp-menu__datos { display: flex; flex-direction: column; min-width: 0; }

.rp-menu__nombre {
    font-weight: 700;
    color: var(--w-text);
    overflow-wrap: anywhere;
}

.rp-menu__mail {
    font-size: 0.85rem;
    color: var(--w-muted);
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════
   20 · Preguntas frecuentes
   -----------------------------------------------------------------------
   `.w-faq__respuesta` sólo trae padding y color: los párrafos de adentro
   heredan `margin: 0` del reset, así que el texto salía en bloque. Se venía
   resolviendo con `style="margin-top:…"` pegado a mano en cada <p>, y donde
   faltaba —que era casi siempre— quedaba todo junto.

   Va en la hoja de Repronline y no en la del sitio: acá las respuestas son
   largas y tienen listas y botones, y en el institucional son de dos
   líneas. No hay por qué cambiarle el ritmo a esa.
   ═══════════════════════════════════════════════════════════════════════ */

.w-faq__respuesta > p { margin: 0 0 var(--w-s3); line-height: 1.7; }
.w-faq__respuesta > p:last-child { margin-bottom: 0; }

.w-faq__respuesta ul,
.w-faq__respuesta ol {
    display: grid;
    gap: var(--w-s2);
    margin: 0 0 var(--w-s3);
    padding-left: 1.2rem;
}

.w-faq__respuesta li { line-height: 1.6; }
.w-faq__respuesta li::marker { color: var(--w-menta); }

/* Los botones de una respuesta. Separados del texto y con su propia caja:
   son lo que hay que HACER, no una línea más de la explicación. */
.w-faq__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s2);
    margin-top: var(--w-s4);
    padding-top: var(--w-s3);
    border-top: 1px solid var(--w-border);
}

@media (max-width: 560px) {
    .w-faq__acciones { flex-direction: column; }
    .w-faq__acciones .w-btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   21 · Los convenios de referido
   -----------------------------------------------------------------------
   La prueba social de la página de referidos: quién ya tiene su enlace.
   Explicar el programa y no mostrar a nadie usándolo deja al que lo lee
   preguntándose si existe.

   Es una tira que scrollea de verdad (`overflow-x`), no un `transform`: así
   el dedo, la rueda y el teclado funcionan solos y la lista sigue siendo una
   lista para un lector de pantalla. Las flechas y el movimiento automático
   sólo le mueven el `scrollLeft`.
   ═══════════════════════════════════════════════════════════════════════ */

.rp-convenios {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    margin-top: var(--w-s4);
}

.rp-convenios__tira {
    display: flex;
    gap: var(--w-s3);
    list-style: none;
    margin: 0;
    padding: var(--w-s1) 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;           /* la barra no aporta: hay flechas */
    -ms-overflow-style: none;
}

.rp-convenios__tira::-webkit-scrollbar { display: none; }

.rp-convenios__item {
    flex: 0 0 auto;
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--w-s2);
    text-align: center;
}

.rp-convenios__foto {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--w-menta-suave);
    border: 1px solid var(--w-border-fuerte);
    color: var(--w-menta);
    font-family: var(--w-font-titulos);
    font-size: 1.5rem;
    font-weight: 700;
}

.rp-convenios__foto img { width: 100%; height: 100%; object-fit: cover; }

.rp-convenios__nombre {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--w-text-soft);
    overflow-wrap: anywhere;
}

.rp-convenios__flecha {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--w-border);
    border-radius: 50%;
    background: var(--w-surface);
    color: var(--w-text-soft);
    cursor: pointer;
    transition: border-color var(--w-transicion), color var(--w-transicion);
}

.rp-convenios__flecha:hover { border-color: var(--w-menta); color: var(--w-menta); }
.rp-convenios__flecha:focus-visible { outline: 2px solid var(--w-menta); outline-offset: 2px; }
.rp-convenios__flecha .w-ico { width: 1.1em; height: 1.1em; transform: rotate(90deg); }
.rp-convenios__flecha--der .w-ico { transform: rotate(-90deg); }

/* En teléfono las flechas no entran al costado sin comerle ancho a la tira:
   la tira ocupa todo y se desliza con el dedo, que es el gesto natural ahí. */
@media (max-width: 640px) {
    .rp-convenios__flecha { display: none; }
    .rp-convenios__item { width: 120px; }
    .rp-convenios__foto { width: 60px; height: 60px; font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   22 · Checkout
   -----------------------------------------------------------------------
   Eran dos tarjetas translúcidas lado a lado, con un recuadro más adentro
   para «pago protegido» y otro para el reloj. En teléfono se apilaban en el
   orden del documento —primero los datos, después el cobro—, así que el
   paciente que llegó hasta acá a PAGAR tenía que scrollear siete filas de
   datos que ya había cargado él mismo para encontrar el botón.

   Ahora el cobro va primero en el DOM, que es el orden que vale para el
   teclado y para un lector de pantalla, y en escritorio la grilla lo manda a
   la derecha sin tocar ese orden. Sin recuadros: la jerarquía la dan el
   tamaño del total, el aire y la línea que separa las dos mitades.
   ═══════════════════════════════════════════════════════════════════════ */

.rp-checkout {
    max-width: 960px;
    display: flex;
    flex-direction: column;
    gap: var(--w-s4);
}

.rp-checkout__columnas {
    display: flex;
    flex-direction: column;
    gap: var(--w-s5);
}

/* El rótulo es una píldora, no una barra: estirado a todo el ancho se comía
   un renglón entero arriba del título. */
.rp-checkout .w-eyebrow { align-self: start; justify-self: start; }

.rp-checkout__cobro,
.rp-checkout__detalle { display: flex; flex-direction: column; gap: var(--w-s3); }

.rp-checkout__titulo {
    font-family: var(--w-font-titulos);
    font-size: clamp(1.7rem, 4.5vw, 2.3rem);
    line-height: 1.12;
    color: var(--w-text);
    margin: 0;
}

/* El total es lo más grande de la pantalla: es el dato que el paciente
   necesita confirmar antes de tocar el botón. */
.rp-checkout__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--w-s3);
    margin: 0;
    padding-bottom: var(--w-s3);
    border-bottom: 1px solid var(--w-border);
}

.rp-checkout__total-rotulo {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--w-muted);
}

.rp-checkout__total-cifra {
    font-family: var(--w-font-titulos);
    font-size: clamp(2rem, 6vw, 2.75rem);
    line-height: 1;
    color: var(--w-menta);
}

/* Una lista de definiciones, no una tabla con marco: rótulo a la izquierda,
   valor a la derecha, y una línea fina que las ata. */
.rp-lista { display: grid; gap: 0; margin: 0; }

.rp-lista > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--w-s3);
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--w-border);
}

.rp-lista > div:last-child { border-bottom: 0; }

.rp-lista dt { font-size: 0.88rem; color: var(--w-muted); flex: 0 1 auto; }
.rp-lista dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--w-text);
    text-align: right;
    overflow-wrap: anywhere;
}

.rp-lista dd s { color: var(--w-muted); font-weight: 400; }
.rp-lista__destacada dt, .rp-lista__destacada dd { color: var(--w-menta); }

.rp-checkout__nota {
    display: flex;
    align-items: flex-start;
    gap: var(--w-s2);
    font-size: 0.82rem;
    color: var(--w-muted);
    margin: 0;
}

.rp-checkout__nota .w-ico { flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-top: 0.15em; }

.rp-checkout__legal { font-size: 0.8rem; color: var(--w-muted); margin: 0; }

.rp-checkout__cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--w-s3);
}

.rp-checkout__subtitulo {
    font-family: var(--w-font-titulos);
    font-size: 1.15rem;
    color: var(--w-text);
    margin: 0;
}

.rp-checkout__nro { font-size: 0.8rem; color: var(--w-muted); }
.rp-checkout__detalle .w-btn--texto { align-self: flex-start; padding-inline: 0; }

@media (min-width: 900px) {
    /* Dos columnas, y el cobro a la derecha SIN moverlo del documento: el
       orden del DOM es el que recorren el teclado y el lector de pantalla, y
       ahí el cobro tiene que seguir siendo lo primero. `order` mueve la caja,
       no el documento. */
    .rp-checkout__columnas {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--w-s6);
    }

    .rp-checkout__detalle { order: 1; flex: 1 1 auto; min-width: 0; }

    .rp-checkout__cobro {
        order: 2;
        flex: 0 0 360px;
        position: sticky;
        top: calc(var(--w-nav-h) + var(--w-s3));
    }
}

/* Con quién es el trámite, arriba del formulario.

   Era un `rp-form__bloque` —tarjeta con borde— que adentro tenía otras dos
   cajas: el aviso de sin costo y el del horario elegido. Tres marcos
   anidados para decir tres frases. Ahora es una franja con una línea abajo y
   los avisos son texto. */
.rp-conquien {
    display: flex;
    flex-direction: column;
    gap: var(--w-s3);
    padding-bottom: var(--w-s4);
    margin-bottom: var(--w-s4);
    border-bottom: 1px solid var(--w-border);
}

.rp-conquien__aviso {
    font-size: 0.9rem;
    color: var(--w-text-soft);
    margin: 0;
}

.rp-conquien__aviso strong { color: var(--w-text); }

.rp-conquien__aviso--turno {
    display: flex;
    align-items: flex-start;
    gap: var(--w-s2);
}

.rp-conquien__aviso--turno .w-ico {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    color: var(--w-menta);
    margin-top: 0.15em;
}

/* ============================================================================
   Repronline v3 — índice
   ----------------------------------------------------------------------------
   Repronline NO tiene sistema de diseño propio: usa el de cannis.org. El
   layout carga public/css/web/institucional.css y esta hoja va encima con lo
   único que el sitio institucional no tiene, porque no vende nada: el stepper
   del embudo, la tarjeta de profesional y los remates del checkout.

   Lo arma `php artisan repronline:css` en public/css/repronline/bundle.css,
   que no va a git.

   ⚠️ Nada de acá importa public/css/facade/*: ese directorio lo comparten
   public/css/app.css, eventos, revista y Marketplace.
   ========================================================================= */