/* ==========================================================
   Contenido público — servicios, equipo, blog y reseñas
   Mobile-first. Tipografía legible y buen contraste: es un
   sitio de salud y la confianza se juega en cómo se lee.
   ========================================================== */

.content { padding-block: 2rem 3.5rem; }
.content--narrow { max-width: 680px; }

.breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: 1.2rem;
}
.breadcrumb a { color: inherit; }

/* La cabecera de la página respira más: el título es lo primero que se ve
   y venía pegado al primer bloque. */
.content__header { margin-bottom: 3rem; }
.content__header h1 { margin: 0 0 0.6rem; line-height: 1.15; }

/* La franja celeste de portada vive en components.css: la usan también
   páginas que no cargan esta hoja, como la tienda. */
.content__lead { margin: 0 0 0.8rem; color: var(--color-text-muted); font-size: var(--text-lg); max-width: 62ch; }

/* Serif en los titulares de seccion, igual que en la portada. El prefijo no
   hace falta acá (contenido.css es solo publica) pero se mantiene la forma para
   que la regla se lea igual en las tres hojas. */
.sitio-publico .content__section-title { font-family: var(--font-serif); font-weight: 600; letter-spacing: var(--tracking-serif); }
.content__section-title { font-size: var(--text-2xl); margin: 2.4rem 0 1rem; }
.content__section-title a { color: inherit; text-decoration: none; }
.content__section-title a:hover { text-decoration: underline; }

/* Cada categoría es una unidad: la separación entre bloques tiene que ser
   mayor que la separación interna (1.5rem de la grilla), o se leen como una
   sola lista corrida. */
.content__block { margin-bottom: 4rem; }
.content__note { color: var(--color-text-muted); font-size: var(--text-base); }

.content__hero-img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1.8rem;
    display: block;
}

/* Cuerpo editable: se estiliza acá porque el HTML viene del panel y no lleva
   clases. Medida de línea corta a propósito: se lee mejor. */
/* 56ch, no 68: la unidad `ch` mide el ancho del glifo "0", más ancho que la
   letra promedio, así que 68ch rendían 85 caracteres reales por línea —bien
   por encima de los ~75 que se leen cómodos—. Medido: ahora caen en ~70. */
.prose { max-width: 56ch; font-size: var(--text-lg); line-height: 1.7; }

/* ---------- Página del CMS con índice ----------
   El cuerpo se queda en sus 56ch —ensancharlo hasta el contenedor daría 140
   caracteres por línea y se leería peor—, y el costado que quedaba vacío pasa
   a llevar el índice de la página. En un texto largo resuelve algo real:
   saltar a la sección que se busca sin recorrerlo entero.

   Con menos de tres secciones no hay índice que valga la pena y el cuerpo se
   centra, que también deja la página equilibrada. */
/* `> .prose` y no `.prose` a secas: en las páginas del menú el cuerpo va en
   bloques numerados y cada bloque tiene su propio .prose adentro. Centrar
   aquellos dejaba el texto de cada tarjeta flotando en su caja. */
.pagina:not(.pagina--con-indice) > .prose { margin-inline: auto; }

/* La franja y el cuerpo de una página del menú, con el mismo ritmo que la
   página de área: el <main> arranca pegado a la franja. */
.pagina-main { padding-block: clamp(1.8rem, 3vw, 2.6rem) clamp(2.5rem, 5vw, 4rem); }
.pagina__cuerpo { min-width: 0; }

/* En el teléfono el índice iría al final —después de todo el texto—, que es
   justo donde ya no sirve. Va antes del cuerpo, como el sumario de un
   documento largo. */
@media (max-width: 959px) {
    .pagina--con-indice { display: flex; flex-direction: column; gap: 1.5rem; }
    .pagina--con-indice .pagina__indice { order: -1; }
}

@media (min-width: 960px) {
    .pagina--con-indice {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
        gap: 3rem;
        align-items: start;
    }
    /* En una página de texto el cuerpo se estira a 68ch: son ~85 caracteres por
       línea, el tope de lo que se lee cómodo. Los 56ch del resto del sitio son
       para textos con imágenes y listas al costado; acá el texto es todo lo que
       hay y quedaba angosto contra el índice. */
    .pagina--con-indice .prose { max-width: 68ch; }
    .pagina__indice { position: sticky; top: var(--sticky-top); }
}

.pagina__indice {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}
.pagina__indice-titulo {
    margin: 0 0 .7rem;
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}
.pagina__indice ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pagina__indice a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-md);
    line-height: 1.4;
}
.pagina__indice a:hover { color: var(--color-text); text-decoration: underline; }

/* El ancla no puede quedar debajo del header pegajoso al saltar. */
.prose h2[id] { scroll-margin-top: calc(var(--header-alto) + 1rem); }
.prose h2 { font-size: var(--text-2xl); margin: 2rem 0 0.7rem; line-height: 1.25; }
/* Solo h2. Los h3 del cuerpo quedan en sans: a var(--text-xl) el serif de 500
   se ve endeble y compite mal con el parrafo que tiene al lado. */
.sitio-publico .prose h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: var(--tracking-serif); }
.prose h3 { font-size: var(--text-xl); margin: 1.6rem 0 0.5rem; }
.prose p  { margin: 0 0 1.1rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose blockquote {
    margin: 1.4rem 0;
    padding: 0.2rem 0 0.2rem 1.1rem;
    border-left: 3px solid var(--color-border);
    color: var(--color-text-muted);
}
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 0.6rem; border-bottom: 1px solid var(--color-border); text-align: left; }

/* Servicios */
/* La grilla y la tarjeta del catálogo (.service-grid, .service-card-pub) se
   fueron a layout.css como .service-cards y .service-card: son las mismas que
   usa la portada, y tener dos tarjetas de servicio con distinta forma para el
   mismo dato es lo que hacía que el catálogo se viera de otra época que la
   página de entrada. El componente en PHP también quedó uno solo
   (components/public/_service_card.php).

   Lo único que queda acá es el contador de resultados, que es de esta página. */


/* Encabezado de categoría: el icono le da identidad a un bloque que si no es
   puro texto, y ancla visualmente el comienzo de cada sección. */
.content__block-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.content__block-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--color-accent-soft);
    color: var(--sage-deep);
}
.content__block-head .content__section-title { margin: 0 0 0.3rem; }
.content__block-head .content__lead { margin: 0; max-width: 60ch; }

/* ==========================================================
   Contacto
   ==========================================================
   Los canales directos van ARRIBA del formulario: quien entra a esta página ya
   decidió escribir, y la mayoría prefiere WhatsApp o el teléfono. Debajo del
   formulario obligaba a pasar por encima de cuatro campos para encontrarlos.
   ========================================================== */
.contacto-hero {
    position: relative;
    padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(2rem, 4vw, 3rem);
    background: linear-gradient(
        180deg,
        var(--sage-soft) 0%,
        var(--sage-soft) 66%,
        var(--color-bg-page) 100%
    );
    overflow: hidden;
}

/* El tope de medida va en los textos, no en el contenedor: .contacto-hero__inner
   ES el .container, y acotarlo a 46rem lo centraba, dejando el titular corrido
   200px a la derecha respecto del formulario de abajo. */
.contacto-hero__titulo,
.contacto-hero__lead { max-width: 30ch; }
.contacto-hero__lead { max-width: 62ch; }

.contacto-hero__titulo {
    margin: 0 0 .8rem;
    font-family: var(--font-serif);
    font-size: clamp(var(--text-4xl), 1.1rem + 2.2vw, 3.2rem);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: 1.12;
    color: var(--color-text-strong);
}

.contacto-hero__lead {
    margin: 0;
    font-size: clamp(var(--text-base), .9rem + .3vw, var(--text-lg));
    line-height: 1.6;
    color: var(--color-text-muted);
}

.contacto-hero__chips { margin-top: 1.3rem; }

.contacto { padding-top: clamp(1.8rem, 3vw, 2.6rem); }

/* ---------- Canales ----------
   Una fila de cuatro en escritorio, dos en tableta, una en el teléfono. Cada
   tarjeta muestra su dato —el número, el correo— sin que haya que pulsarla:
   mucha gente viene a copiar el teléfono, no a llamar desde el navegador. */
.canales {
    list-style: none;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
}

@media (min-width: 620px) {
    .canales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .canales { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.canal {
    display: flex;
    align-items: center;
    gap: .8rem;
    height: 100%;
    padding: 1.1rem 1.2rem;
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-organic);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.canal:hover {
    transform: translateY(-3px);
    border-color: var(--color-cta);
    text-decoration: none;
    color: inherit;
}
.canal:focus-visible { outline: none; box-shadow: var(--ring-cta); }

.canal__icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--sage-soft);
    color: var(--sage-deep);
}
.canal__icono svg { width: 21px; height: 21px; }

/* WhatsApp con su verde: es marca, y acá es el canal que más se usa. */
.canal--wa .canal__icono { background: #25d366; color: #fff; }

.canal__texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.canal__rotulo {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-text-strong);
    line-height: 1.3;
}

.canal__dato {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.canal__flecha {
    margin-left: auto;
    display: inline-flex;
    color: var(--sage-deep);
    transition: transform var(--transition);
}
.canal__flecha svg { width: 17px; height: 17px; }
.canal:hover .canal__flecha { transform: translateX(3px); }

/* ---------- Formulario y costado ---------- */
.contacto-grid {
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.4rem);
    align-items: start;
}

@media (min-width: 900px) {
    .contacto-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
}

/* El formulario en su propia tarjeta: antes flotaba sobre el fondo y los
   campos, que ya son cajas blancas, se leían como elementos sueltos en la
   página en vez de como un bloque. */
.contacto-form {
    padding: clamp(1.4rem, 2.6vw, 2rem);
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-organic);
    box-shadow: var(--shadow-soft);
}

.contacto-form__titulo {
    margin: 0 0 .5rem;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    color: var(--color-text-strong);
}

.contacto-form__lead {
    margin: 0 0 1.4rem;
    max-width: 52ch;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.contacto-lado { display: grid; gap: 1rem; }

.contacto-caja {
    padding: clamp(1.2rem, 2vw, 1.5rem);
    background: var(--surface-quiet);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-organic);
}
.contacto-caja .service-card__rotulo { margin-top: 0; }

.contacto-dato {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: .9rem;
    font-size: var(--text-base);
    line-height: 1.5;
}

.contacto-dato__icono {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--sage-deep);
    padding-top: .1rem;
}
.contacto-dato__icono svg { width: 18px; height: 18px; }

.contacto-dato__mapa {
    display: block;
    margin-top: .2rem;
    font-size: var(--text-md);
    color: var(--sage-deep);
    font-weight: 550;
}

.contacto-caja__nota {
    margin: 1.1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* ---------- Redes ----------
   Con nombre y no solo el icono: acá es donde alguien viene a buscarlas, y un
   dibujo de 16px no dice a qué red lleva si no se reconoce la marca. */
.contacto-redes {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: grid;
    gap: .3rem;
}

.contacto-redes a {
    display: flex;
    align-items: center;
    gap: .65rem;
    /* 44px de alto con el relleno: es un objetivo táctil, no una línea de
       texto con un enlace encima. */
    padding: .55rem .6rem;
    margin-inline: -.6rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 550;
    transition: background var(--transition), color var(--transition);
}
.contacto-redes a:hover {
    background: var(--color-bg);
    color: var(--sage-deep);
    text-decoration: none;
}

.contacto-redes__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--sage-soft);
    color: var(--sage-deep);
}
.contacto-redes__icono svg { width: 16px; height: 16px; }

/* El aviso de riesgo vital se distingue del resto sin gritar: fondo de arena y
   nada de rojo. Es información de seguridad, no una alarma. */
.contacto-caja--aviso {
    background: var(--color-warn-soft);
    border-color: color-mix(in srgb, var(--color-warn) 22%, transparent);
}
.contacto-caja--aviso p {
    margin: .9rem 0 0;
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--color-text);
}

/* ==========================================================
   Ficha de servicio
   ==========================================================
   Abre igual que la portada: franja salvia, dos columnas, foto a la derecha.
   Antes empezaba como un documento —migas, título, bajada, muro de texto— y esa
   es la parte que la hacía ver de otra época que el resto del sitio.

   Debajo, dos columnas: la descripción a ancho de lectura y el panel de reserva
   pegado al scroll. En el teléfono el panel se cuela entre la foto y el texto, y
   cuando sale de pantalla lo reemplaza una barra fija con precio y botón.
   ========================================================== */
.ficha-hero {
    position: relative;
    padding: clamp(1.2rem, 2.5vw, 2rem) 0 clamp(2rem, 4vw, 3rem);
    background: linear-gradient(
        180deg,
        var(--sage-soft) 0%,
        var(--sage-soft) 68%,
        var(--color-bg-page) 100%
    );
    overflow: hidden;
}

.ficha-hero__inner {
    display: grid;
    gap: clamp(1.6rem, 3vw, 3rem);
    align-items: center;
}

@media (min-width: 900px) {
    /* La foto pesa menos que el texto: es apoyo, no el argumento. */
    .ficha-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); }
}

.ficha-hero .breadcrumb { margin-bottom: 1rem; }
.ficha-hero .eyebrow { margin-bottom: .5rem; }

.ficha-hero__titulo {
    margin: 0 0 .9rem;
    font-family: var(--font-serif);
    font-size: clamp(var(--text-4xl), 1.1rem + 2.1vw, 3rem);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: 1.12;
    color: var(--color-text-strong);
}

.ficha-hero__lead {
    margin: 0 0 1.2rem;
    max-width: 46ch;
    font-size: clamp(var(--text-base), .9rem + .3vw, var(--text-lg));
    line-height: 1.6;
    color: var(--color-text-muted);
}

.ficha-hero__chips { margin: 0 0 1.3rem; }

/* Las señales de confianza, más discretas que en la portada: acá acompañan, no
   abren la página. */
.ficha-hero__trust {
    gap: .4rem 1.4rem;
    font-size: var(--text-sm);
}

.ficha-hero__foto {
    margin: 0;
    border-radius: var(--radius-organic);
    overflow: hidden;
    background: var(--sage-soft);
    box-shadow: var(--shadow-soft);
}

.ficha-hero__foto img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* El <main> arranca pegado al hero, como en la portada. */
.ficha-main { padding-top: clamp(1.8rem, 3vw, 2.6rem); }

.ficha { display: grid; gap: 2rem; align-items: start; }

/* En el teléfono, el panel antes del texto: al final de un cuerpo de 2000px el
   precio y el botón no los ve nadie. */
.ficha__lado   { order: 1; }
.ficha__cuerpo { order: 2; }

.ficha__caja {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-organic);
    background: var(--color-bg);
    padding: clamp(1.2rem, 2vw, 1.6rem);
    box-shadow: var(--shadow-soft);
}

.ficha__rotulo {
    margin: 0 0 .5rem;
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}

.ficha__precio {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
}

.ficha__unidad {
    display: block;
    margin-top: .35rem;
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

/* La próxima hora, en pastilla salvia: es el único dato del panel que cambia
   solo, y tiene que distinguirse del precio, que es fijo. */
.ficha__slot {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .9rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--sage-soft);
    font-size: var(--text-sm);
    color: var(--color-accent-text);
}
.ficha__slot svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ficha__slot strong { font-weight: 650; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }

/* Sin hora no hay pastilla: una cápsula vacía se lee como un dato que no cargó.
   Queda la frase, que es una respuesta. */
.ficha__slot--sin {
    display: block;
    padding: 0;
    background: none;
    color: var(--color-text-muted);
    font-size: var(--text-md);
    line-height: 1.5;
}

.ficha__accion { width: 100%; justify-content: center; }

.ficha__nota {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .8rem 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.ficha__nota svg { width: 13px; height: 13px; color: var(--sage-deep); }

/* Cada bloque del panel se separa con un filete, no con otra caja adentro. */
.ficha__bloque {
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hairline);
}
.ficha__bloque .service-card__rotulo { margin-top: 0; }

.ficha__persona { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; }
.ficha__persona img,
.ficha__retrato { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; object-fit: cover; flex: 0 0 auto; display: block; background: var(--sage-soft); }
.ficha__retrato img, .ficha__retrato .avatar-def { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha__persona a { display: block; font-weight: 600; color: var(--color-text); text-decoration: none; }
.ficha__persona a:hover { text-decoration: underline; }
.ficha__persona span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- El cuerpo, en tarjetas ----------
   Cada <h2> del texto que escribe la clienta abre una tarjeta numerada. El
   número no es adorno: son dos o tres bloques que responden preguntas
   distintas —cómo funciona, cuánto vale, qué pasa después— y numerarlos deja
   ver de un vistazo cuántos son y dónde empieza cada uno.

   La intro se queda fuera de las tarjetas: es la frase que presenta el
   servicio, no una sección más. */
.ficha__intro {
    font-size: var(--text-lg);
    line-height: 1.65;
    color: var(--color-text);
    margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
}
.ficha__intro p:last-child { margin-bottom: 0; }

.ficha__bloques {
    display: grid;
    gap: 1rem;
}

.bloque-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 1rem;
    padding: clamp(1.2rem, 2.2vw, 1.6rem);
    background: var(--surface-quiet);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-organic);
}

.bloque-info__num {
    grid-row: 1 / span 2;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--sage-soft);
    color: var(--color-accent-text);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.bloque-info__titulo {
    margin: 0 0 .6rem;
    font-size: var(--text-2xl);
    line-height: 1.25;
    color: var(--color-text-strong);
    /* La altura del número, para que título y pastilla apoyen en la misma
       línea de base óptica. */
    padding-top: .15rem;
}

/* Dentro de la tarjeta el texto ya está acotado por la columna: el tope de
   56ch del prose sobra y dejaba las líneas cortadas a media tarjeta. */
.bloque-info .prose { max-width: none; }
.bloque-info .prose p:last-child { margin-bottom: 0; }

/* En el teléfono la pastilla sube: con el número al costado, el título perdía
   una palabra por línea. */
@media (max-width: 560px) {
    .bloque-info { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
    .bloque-info__num { grid-row: auto; }
    .bloque-info__titulo { padding-top: 0; }
}

/* Otros servicios del área: la salida que la ficha no tenía. */
.ficha__relacionados {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--hairline);
}
.ficha__relacionados .content__section-title {
    margin-bottom: 1rem;
    /* Un escalón por debajo del titular de la ficha: es una salida, no otro
       capítulo de la página. */
    font-size: var(--text-2xl);
}

/* Lista de sugeridos: una fila por servicio, separadas por filete. Sin caja,
   sin foto y sin botón —el enlace es la fila entera— para que no compita con la
   ficha que se está leyendo. */
.sugeridos {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hairline);
}
.sugeridos li { border-bottom: 1px solid var(--hairline); }

.sugerido {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .95rem .6rem;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    transition: background var(--transition), padding-left var(--transition);
}
.sugerido:hover {
    background: var(--surface-quiet);
    /* El texto se corre apenas al pasar por encima: dice "esto lleva a otra
       parte" sin agregar un botón. */
    padding-left: 1rem;
    text-decoration: none;
    color: inherit;
}
.sugerido:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.sugerido__texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }

.sugerido__nombre {
    font-weight: 600;
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--color-text-strong);
}

.sugerido__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.sugerido__precio {
    flex: 0 0 auto;
    font-weight: 650;
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}

.sugerido__flecha {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--sage-deep);
    transition: transform var(--transition);
}
.sugerido__flecha svg { width: 17px; height: 17px; }
.sugerido:hover .sugerido__flecha { transform: translateX(3px); }

@media (min-width: 900px) {
    .ficha {
        grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
        gap: 3rem;
    }
    /* El orden del teléfono se anula: acá el cuerpo va primero. */
    .ficha__cuerpo { order: 1; }
    .ficha__lado   { order: 2; }

    /* Acompaña el scroll: en un cuerpo largo, el botón de agendar no puede
       quedar arriba de todo y perderse. */
    .ficha__caja { position: sticky; top: var(--sticky-top); }
}

/* ---------- Barra de reserva del teléfono ----------
   Aparece cuando el panel sale de pantalla. Es el reemplazo del panel, no un
   segundo llamado: el JS de la ficha la muestra y la esconde. */
.barra-reserva {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 75;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1rem;
    /* El respiro de los teléfonos con barra de gestos. */
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -10px 30px -18px rgba(31, 58, 54, .45);
}

.barra-reserva[hidden] { display: none; }

.barra-reserva__dato { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.barra-reserva__dato strong {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}
.barra-reserva__dato span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.barra-reserva .btn { flex: 0 0 auto; }

/* En escritorio no existe: allá el panel acompaña el scroll. */
@media (min-width: 900px) {
    .barra-reserva { display: none; }
    /* Por si la clase quedó puesta al cambiar de tamaño la ventana. */
    .con-barra-reserva .wa-float { bottom: 18px; }
}

/* El botón flotante de WhatsApp sube mientras la barra está a la vista: en su
   sitio de siempre queda montado sobre ella y sobre el texto de al lado. La
   clase la pone el script de la ficha. */
.con-barra-reserva .wa-float { bottom: 92px; }

.service-facts {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    font-size: var(--text-md);
    color: var(--color-text-muted);
}
.service-facts li::before { content: '· '; }

/* Equipo */
.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 1.2rem;
}

/* ---------- Ficha de profesional ----------
   Retrato enmarcado, nombre con el visto, cargo y las dos acciones. El marco
   —el retrato con aire alrededor dentro de la tarjeta— es lo que la hace ver
   como una credencial y no como una tarjeta con foto de fondo. */
.person-card {
    max-width: 340px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1rem 1rem 1.25rem;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform var(--transition-slow) var(--ease-spring), box-shadow var(--transition-slow), border-color var(--transition);
}
.person-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-border-cool);
}

/* El retrato va montado como una foto enmarcada: el paspartú blanco lo separa
   del borde de la tarjeta y el filo interior le da el canto que tiene una foto
   impresa. Es lo que lo hace ver como un retrato y no como una imagen de
   fondo estirada. */
.person-card__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--sage-soft);
    aspect-ratio: 4 / 5;
    margin-bottom: 1rem;
    box-shadow: inset 0 0 0 1px rgba(31, 58, 54, .12);
}
/* Degradado al pie: sostiene el nombre y evita que la figura termine cortada
   contra un borde plano. */
.person-card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(to top, rgba(28, 34, 29, .38), transparent);
    pointer-events: none;
}
.person-card__photo { display: block; width: 100%; height: 100%; }
.person-card__photo img,
.person-card__photo .avatar-def { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El cargo va bajo el nombre, como en la referencia: dentro del marco tapaba
   parte del retrato, que acá es lo que se viene a ver. */
.person-card__cinta {
    display: block;
    margin: .15rem 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.person-card__verificado { width: 17px; height: 17px; color: var(--sage-deep); vertical-align: -2px; margin-left: .3rem; }
.person-card__reg { margin: .5rem 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.person-card__acciones { margin: 1rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

/* Una sola profesional: la ficha se despliega a lo ancho —retrato a un lado,
   quién es y qué atiende al otro— en vez de quedar sola contra el margen. */
.people-grid--sola { grid-template-columns: 1fr; }
.people-grid--sola .person-card {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    text-align: left;
    padding: 1.25rem;
}
.people-grid--sola .person-card__media { aspect-ratio: 4 / 5; margin: 0; }
.people-grid--sola .person-card__acciones { justify-content: flex-start; }
@media (max-width: 700px) {
    .people-grid--sola .person-card { grid-template-columns: 1fr; text-align: center; }
    .people-grid--sola .person-card__acciones { justify-content: center; }
}

.person-card__name  { margin: 0; font-size: var(--text-2xl); font-family: var(--font-serif); font-weight: 600; letter-spacing: var(--tracking-serif); }
.person-card__name a { color: inherit; text-decoration: none; }
.person-card__name a:hover { text-decoration: underline; }
.person-card__role  { margin: 0 0 0.4rem; font-size: var(--text-md); color: var(--color-text-muted); }
.person-card__text  { margin: 0; font-size: var(--text-md); color: var(--color-text-muted); }

/* Las áreas de trabajo en la tarjeta del equipo: el dato que se busca al mirar
   un equipo —quién ve lo mío— y que antes había que entrar a la ficha para
   saber. Píldoras y no una lista con puntos: son etiquetas, no una lectura. */
.person-card__areas {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.person-card__areas li {
    padding: .2rem .6rem;
    border-radius: var(--radius-pill);
    background: var(--sage-soft);
    color: var(--color-accent-text);
    font-size: var(--text-xs);
    font-weight: 600;
}
.people-grid:not(.people-grid--sola) .person-card__areas { justify-content: center; }

/* ==========================================================
   Ficha del profesional
   ==========================================================
   Era migas, un retrato de 96px, el nombre, un muro de texto y una grilla de
   servicios: un documento interno dentro de la plantilla del sitio.

   Es la página donde alguien decide si le va a contar su caso a esta persona,
   así que abre como la portada —franja, dos columnas, retrato grande— y el
   costado lleva la agenda, no aire.
   ========================================================== */
.pro-hero {
    background: linear-gradient(180deg, var(--sage-soft) 0%, var(--sage-soft) 70%, var(--color-bg-page) 100%);
    padding-block: clamp(1.2rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3rem);
}
.pro-hero__inner {
    display: grid;
    gap: clamp(1.6rem, 3vw, 3rem);
    align-items: center;
}
@media (min-width: 900px) {
    /* El retrato pesa, pero no manda: la columna de texto es la que lleva el
       nombre, las áreas y las señales. */
    .pro-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); }
}
.pro-hero .breadcrumb { margin-bottom: 1rem; }
.pro-hero .eyebrow { margin-bottom: .5rem; }

.pro-hero__titulo {
    margin: 0 0 .7rem;
    font-family: var(--font-serif);
    font-size: clamp(var(--text-4xl), 1.1rem + 2.1vw, 3rem);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: 1.12;
    color: var(--color-text-strong);
}
.pro-hero__lead {
    margin: 0 0 1.1rem;
    max-width: 46ch;
    font-size: var(--text-xl);
    line-height: 1.55;
    color: var(--color-text-muted);
}

.pro-hero__areas {
    list-style: none;
    margin: 0 0 1.3rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.pro-hero__areas a,
.pro-hero__areas span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: .25rem .8rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    border: 1px solid var(--color-border-cool);
    color: var(--color-accent-text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}
.pro-hero__areas a:hover { background: var(--color-cta-soft); border-color: var(--sage); }

.pro-hero__trust { gap: .4rem 1.4rem; font-size: var(--text-sm); }

/* El retrato en 4:5, el encuadre de un retrato, y no en un círculo de 96px: la
   cara es el argumento de esta página. */
.pro-hero__retrato {
    margin: 0;
    border-radius: var(--radius-organic);
    overflow: hidden;
    background: var(--sage-soft);
    box-shadow: var(--shadow-soft);
    aspect-ratio: 4 / 5;
    max-width: 22rem;
}
.pro-hero__retrato img,
.pro-hero__retrato .avatar-def {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pro-main { padding-block: clamp(1.8rem, 3vw, 2.6rem) clamp(2.5rem, 5vw, 4rem); }

.pro-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) {
    .pro-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 3rem; }
    .pro-lado { position: sticky; top: var(--sticky-top); }
}

.pro-cuerpo__titulo { margin-top: 0; }
.pro-bio { max-width: 62ch; }

.pro-panel {
    padding: 1.4rem 1.3rem 1.2rem;
    border-radius: var(--radius-2xl);
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-soft);
}
.pro-panel__titulo {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: 1.2;
    color: var(--color-text-strong);
}
.pro-panel__contacto { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: var(--text-md); }
.pro-panel__contacto a { display: inline-flex; align-items: center; min-height: 36px; }

.pro-otros { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Vive fuera del grid de dos columnas, así que el aire de arriba ya lo pone el
   relleno inferior de `.area-layout`; lo que falta es el de abajo, antes del
   pie. */
.area-otras { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* El icono del área dentro de la lista de sugeridos. Mismo lugar que el
   retrato en la lista del equipo: lo que identifica la fila, a la izquierda. */
.sugerido__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    flex: 0 0 auto;
    background: var(--sage-soft);
    color: var(--color-accent-text);
}
.sugerido__icono svg { width: 21px; height: 21px; }

/* El retrato dentro de la lista de sugeridos, que la comparten esta página y la
   ficha de servicio. Solo aparece cuando el marcado lo trae. */
.sugerido__retrato {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: var(--sage-soft);
}
.sugerido__retrato img,
.sugerido__retrato .avatar-def { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Acá vivía `.person-header`: el retrato de 140px y el nombre con el que abría
   la ficha del profesional. Se fue con la ficha vieja —ahora abre con
   `.pro-hero`, más arriba— y no quedaba nadie usándolo. */

/* Blog */
/* La barra del catálogo, los chips de filtro y el contador se fueron a
   layout.css: los usan /servicios y también la tienda, que no carga esta hoja.
   Ahí los filtros se veían como enlaces subrayados sueltos. */

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.4rem;
}

/* Con dos artículos publicados, la grilla de tres columnas dejaba el tercio
   derecho vacío. El tope va en la celda, no en la tarjeta: la tarjeta llena la
   celda que le toque —si no, queda flotando adentro con aire muerto a la
   derecha— y es la celda la que no pasa de 460px. */
.post-grid > * { max-width: 460px; }

/* En la portada las entradas van sobre una franja tintada, y ahí el texto
   suelto flota sin apoyo. Con caja se leen como las tarjetas de áreas y el
   bloque deja de verse a medio terminar. */
.post-grid--tarjetas .post-card {
    max-width: none;
    height: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.post-grid--tarjetas .post-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* El marco de la foto sangra hasta el borde de la tarjeta.
   ------------------------------------------------------------
   Quien sangra es el marco —un `span`— y no la imagen, y eso importa: base.css
   le pone `max-width: 100%` a todo `img`, así que el `width: calc(100% + 2.8rem)`
   que había acá antes se recortaba de vuelta al ancho del contenido y dejaba
   45px de tarjeta blanca a la derecha de cada foto. Un `span` en bloque con
   márgenes negativos a los lados se estira solo, sin calc y sin nada que lo
   contradiga.

   `overflow: hidden` es lo que recorta el acercamiento de la foto al pasar el
   mouse; sin él, la imagen se sale por las esquinas redondeadas. */
.post-grid--tarjetas .post-card__frame {
    margin: -1.4rem -1.4rem 1rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Igual que en la tienda: la tarjeta entera se puede tocar. */
.post-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
}
.post-card__link { text-decoration: none; color: inherit; display: block; }
.post-card__link::after { content: ''; position: absolute; inset: 0; }

.post-card__frame {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
}
.post-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Un acercamiento, no un salto. La tarjeta entera ya sube 2px al pasar el
       mouse; que la foto además se despegara hacia arriba —lo que hacía antes—
       abría una franja de tarjeta vacía justo arriba de todo. */
    transition: transform 600ms var(--ease-out-quart);
}
.post-card:hover .post-card__img { transform: scale(1.04); }

/* Sin foto: el isotipo sobre el acento lavado. No es un relleno bonito, es lo
   que mantiene la fila pareja —una tarjeta que arranca en el título al lado de
   dos que arrancan en una foto se lee como un error—. */
.post-card__frame--vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--color-accent-soft), var(--sand));
    color: var(--color-accent-text);
}
.post-card__frame--vacio .brand-mark { width: 22%; height: auto; opacity: .42; }

/* La categoría, como placa sobre la foto. Fondo sólido y no translúcido: por
   encima puede caer cualquier fotografía que suba la clienta, y sobre una foto
   clara un velo blanco deja el texto sin contraste. */
.post-card__cat {
    position: absolute;
    left: 0.7rem;
    bottom: 0.7rem;
    max-width: calc(100% - 1.4rem);
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-accent-text);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-card__title {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.3;
    /* El subrayado al pasar el mouse se fue: con la tarjeta entera levantándose
       y la foto acercándose, un tercer efecto sobre lo mismo es ruido. Queda el
       cambio de color, que además dice cuál es el enlace. */
    transition: color var(--transition);
}
.post-card:hover .post-card__title { color: var(--color-accent-text); }

/* Tres líneas de bajada. El resumen lo escribe la clienta y no hay largo
   máximo en el panel: sin tope, una entrada con cuatro renglones estiraba su
   tarjeta y las de al lado la seguían con el fondo vacío. */
.post-card__text {
    margin: 0;
    font-size: var(--text-md);
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Al fondo de la tarjeta, sobre un filete: así las fechas de una fila quedan
   a la misma altura aunque los títulos midan dos líneas o una. */
.post-card__meta {
    margin: auto 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.post-card__leer {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--color-accent-text);
}
.post-card__leer svg { transition: transform var(--transition); }
.post-card:hover .post-card__leer svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .post-card__img,
    .post-card__leer svg { transition: none; }
    .post-card:hover .post-card__img { transform: none; }
    .post-card:hover .post-card__leer svg { transform: none; }
}

.post__meta { margin: 0 0 0.8rem; font-size: var(--text-md); color: var(--color-text-muted); }

/* Reseñas */
.review-form { max-width: 560px; }

.rating { border: 0; padding: 0; margin: 0 0 1.2rem; }
.rating legend { font-size: var(--text-md); font-weight: 500; margin-bottom: 0.5rem; padding: 0; }
.rating__options { display: flex; flex-direction: column; gap: 0.35rem; }
.rating__option { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; font-size: var(--text-base); }

/* El llamado a la acción de cierre (.cta-block) vivía acá, pero esta hoja solo
   se carga en las páginas que tienen contenido —la portada la incluye únicamente
   si hay entradas publicadas— y el bloque también se usa en la home. Se mudó a
   layout.css, que acompaña a todas las páginas públicas y a ninguna del admin. */

/* ==========================================================
   Blog — entradas del listado, firma y compartir
   ==========================================================
   El listado es una pila de piezas anchas, no una grilla de cajas: cada
   entrada muestra su bajada entera y su propio botón, para que se pueda
   decidir qué leer sin abrir cuatro artículos.
   ========================================================== */
/* Las piezas se separan con el `gap` de la lista, no con margen propio: así el
   ritmo entre entradas se define en un solo lugar. */
/* El filtro de categorías queda pegado a la primera entrada: los chips son
   píldoras claras y la pieza es una caja salvia, así que sin aire de por medio
   la fila de chips se lee como el borde superior de la primera entrada y no
   como lo que es, la navegación de la página. */
.chip-nav + .post-list { margin-top: 2rem; }

.post-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.post-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    margin: 0;
    padding: 2rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-xl);
}

/* La portada entra siempre —foto cargada o dibujo—, así que la pieza es
   siempre de dos columnas y ya no hay variante "sin imagen" que reparta el
   costado entre la ficha y el vacío. */
.post-featured__media {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    order: 2;
    /* La proporción vive acá y no solo en la <img>: el dibujo es un SVG que se
       estira a lo que le den, y sin esto una entrada ilustrada quedaba con una
       portada de otro alto que la de al lado. */
    aspect-ratio: 4 / 3;
    background: var(--sage-soft);
}
.post-featured__media img,
.post-featured__media .cover-ilustrada {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}
.post-featured:hover .post-featured__media img,
.post-featured:hover .post-featured__media .cover-ilustrada { transform: scale(1.03); }

.post-featured__body { display: flex; flex-direction: column; gap: .7rem; }
.post-featured__flag {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}
.post-featured__title { margin: 0; font-size: var(--text-3xl); line-height: 1.2; }
.post-featured__title a { color: inherit; text-decoration: none; }
.post-featured__title a:hover { text-decoration: underline; }
.post-featured__text { margin: 0; font-size: var(--text-xl); line-height: 1.55; color: var(--color-text-muted); }
.post-featured__meta { margin: 0; font-size: var(--text-md); color: var(--color-text-muted); }
.post-featured__action { margin: .4rem 0 0; }

@media (max-width: 720px) {
    .post-featured { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.5rem; }
    .post-featured__media { order: 0; }
}

/* ==========================================================
   Blog — la entrada
   ==========================================================
   Era el h1 a todo lo ancho, una línea de metadatos en gris y una columna de
   texto de 56ch pegada al margen izquierdo: media pantalla en blanco durante
   todo el artículo, y ninguna salida hasta el final.

   Ahora abre con la franja del resto del sitio, la portada monta sobre ella, y
   el costado que sobraba lleva el índice y la salida a agendar. El cuerpo no
   se ensancha —la medida de lectura es lo único que no se negocia—: lo que
   cambia es qué hay al lado.
   ========================================================== */

/* La barra de progreso vive pegada bajo la cabecera. `transform: scaleX` y no
   `width`: es la única propiedad que el navegador anima sin recalcular el
   layout en cada scroll. */
.post-progreso {
    position: sticky;
    /* Justo debajo de la barra de navegación, no en el borde de la pantalla:
       en 0 quedaba detrás de la barra —que se pega ahí y pinta por encima— y
       no se veía nunca una vez que la página empezaba a desplazarse. */
    top: var(--header-alto);
    z-index: 60;
    height: 3px;
    background: transparent;
    /* Se come su propio alto para no empujar el contenido tres píxeles hacia
       abajo en una página que no está haciendo scroll todavía. */
    margin-bottom: -3px;
}
/* En el resalte de la marca: la barra tiene que verse de reojo mientras se lee
   y en verde se perdía contra la cabecera, que también es verde. Es una marca
   sin texto, así que el rosa entra sin condiciones. */
.post-progreso span {
    display: block;
    height: 100%;
    background: var(--accent-alt);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.post-hero {
    background: linear-gradient(180deg, var(--sage-soft) 0%, var(--sage-soft) 72%, var(--color-bg-page) 100%);
    padding-block: clamp(1.2rem, 2.5vw, 2rem) clamp(2.5rem, 4.5vw, 3.5rem);
}
.post-hero .breadcrumb { margin-bottom: 1.2rem; }
.post-hero .eyebrow { margin-bottom: .5rem; }

/* Encabezado a dos columnas: el texto a la izquierda, la portada a la derecha.
   ------------------------------------------------------------
   Antes la portada iba debajo del encabezado, a todo el ancho y en 16:9 —a
   1160px eso son 650px de alto, media pantalla de portátil antes de la primera
   línea del artículo— y montaba sobre la franja con un margen negativo que se
   comía el aire bajo la firma: el nombre de quien escribe quedaba pegado al
   borde de la foto.

   Al mismo tiempo el encabezado desperdiciaba su mitad derecha, porque el
   titular está acotado a un ancho de lectura y la bajada también. Los dos
   problemas se resuelven con el mismo movimiento.

   La columna de la foto es fija y la del texto elástica: así el titular manda
   —que es lo que se vino a leer— y la foto acompaña. Sin foto no hay grilla y
   el texto usa el ancho que quiera, que es lo que ya hacía. */
.post-hero__inner { display: grid; gap: 1.5rem; }
/* El tope existe para la entrada SIN portada: ahí no hay grilla que acote la
   columna, y el filete sobre la firma se estiraba los 1160px del contenedor
   mientras el titular y la bajada se quedaban en su ancho de lectura. */
.post-hero__texto { max-width: 46rem; }

@media (min-width: 900px) {
    .post-hero__inner--con-foto {
        grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
        gap: clamp(2rem, 4vw, 3.5rem);
        align-items: center;
    }
}

.post-hero__titulo {
    margin: 0 0 .9rem;
    /* Titular a ancho de lectura y no a ancho de página: a 1200px, un título de
       dos líneas se leía en diagonal y no se sabía dónde volvía el ojo. */
    max-width: 20ch;
    font-family: var(--font-serif);
    font-size: clamp(var(--text-4xl), 1.1rem + 2.1vw, 3rem);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: 1.12;
    color: var(--color-text-strong);
}
.post-hero__lead {
    margin: 0 0 1.6rem;
    max-width: 52ch;
    font-size: var(--text-xl);
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* La portada, ya dentro del encabezado. 4:3 y no 16:9: en una columna de 400px
   la panorámica deja una tira de 225px donde no se distingue qué se ve. */
.post-hero__portada {
    margin: 0;
    border-radius: var(--radius-organic);
    overflow: hidden;
    background: var(--sage-soft);
    box-shadow: var(--shadow-soft);
}
.post-hero__portada img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* En el teléfono la foto va después del texto y se aplana: apilada en 4:3
   ocupa la pantalla entera y empuja el artículo abajo del pliegue. */
@media (max-width: 899px) {
    .post-hero__portada img { aspect-ratio: 16 / 10; }
}

/* La firma cierra el encabezado, así que se separa del resto con un filete y
   no con aire suelto: aire sola, se leía como una línea más de la bajada. */
.post-firma {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border-cool);
}
.post-firma__foto {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--sage-soft);
    /* El anillo despega el retrato de la franja, que es del mismo tono. */
    box-shadow: 0 0 0 2px var(--color-bg);
}
.post-firma__texto { margin: 0; font-size: var(--text-md); line-height: 1.4; }
.post-firma__texto strong { display: block; font-weight: 650; color: var(--color-text-strong); }
.post-firma__texto span { display: block; color: var(--color-text-muted); }

/* El cuerpo arranca con aire propio: la portada ya no monta sobre la franja,
   así que este espacio dejó de venir de un margen negativo. */
.post-main { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }

.post-layout { display: grid; gap: 2rem; align-items: start; }

@media (max-width: 959px) {
    /* En el teléfono el índice sirve arriba —es el sumario— y la caja de
       agendar al final, que es donde termina la lectura. Por eso el costado se
       parte en dos en vez de bajar entero. */
    .post-lado { display: contents; }
    .post-indice { order: -1; margin-bottom: 1.5rem; }
    .post-caja { order: 1; margin-top: 1.5rem; }
}

@media (min-width: 960px) {
    .post-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: 3rem; }
    .post-lado { display: grid; gap: 1rem; position: sticky; top: var(--sticky-top); }
}

/* El cuerpo del artículo se lee un punto más grande y más suelto que el resto
   del sitio: acá la persona vino a leer, no a decidir. */
.post-cuerpo .prose { max-width: 64ch; font-size: var(--text-xl); line-height: 1.75; }
.post-cuerpo .prose > :first-child { margin-top: 0; }
/* La primera línea entra con más peso: marca dónde empieza el artículo sin
   necesitar una capitular, que en pantalla se ve como un adorno. */
.post-cuerpo .prose > p:first-of-type { font-size: var(--text-2xl); line-height: 1.6; color: var(--color-text-strong); }
.post-cuerpo .prose h2 { margin-top: 2.6rem; }

.post-caja {
    padding: 1.3rem;
    border-radius: var(--radius-xl);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border-cool);
}
.post-caja__rotulo {
    margin: 0 0 .4rem;
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    color: var(--color-text-strong);
}
.post-caja__texto { margin: 0 0 1rem; font-size: var(--text-md); line-height: 1.5; color: var(--color-text-muted); }
.post-caja__accion { width: 100%; justify-content: center; }
.post-caja__wa { margin: .7rem 0 0; font-size: var(--text-sm); text-align: center; }

.post-relacionados { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Compartir y la firma se alinean con el cuerpo del artículo. Sus 56ch los
   dejaban ocho caracteres más angostos que el texto que tienen encima, y ese
   escalón se nota justo donde termina la lectura. */
.post-cuerpo .post-share,
.post-cuerpo .post-author { max-width: 64ch; }

/* Compartir: enlaces, sin SDK de terceros. Una página sobre salud no tiene
   por qué cargar los rastreadores de una red social. */
.post-share {
    max-width: 56ch;
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
.post-share__label { margin: 0 0 .7rem; font-size: var(--text-md); color: var(--color-text-muted); }
.post-share__links { margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }

/* Firma al pie. */
.post-author {
    max-width: 56ch;
    margin: 2rem 0 0;
    padding: 1.5rem;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
}
.post-author__photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.post-author__body { min-width: 0; }
.post-author__label {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.post-author__name { margin: .15rem 0 0; font-size: var(--text-xl); font-weight: 650; }
.post-author__name a { color: inherit; text-decoration: none; }
.post-author__name a:hover { text-decoration: underline; }
.post-author__role { margin: .1rem 0 0; font-size: var(--text-md); color: var(--color-accent-text); }
.post-author__bio  { margin: .5rem 0 0; font-size: var(--text-md); line-height: 1.55; color: var(--color-text-muted); }

/* Cuerpo del artículo: más aire alrededor de los subtítulos y una cita que
   se distinga del párrafo. */
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 2rem; }
.prose > :first-child { margin-top: 0; }
.prose blockquote {
    background: var(--color-bg-alt);
    border-left-width: 3px;
    border-left-color: var(--sage);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1rem 1.2rem;
    font-size: var(--text-xl);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* ==========================================================
   Página de área (/servicios/categoria/{slug})
   ==========================================================
   Era una página de documento: migas, título, un cuerpo de texto y las tarjetas
   de sus servicios. Como pantalla de paso servía; como primera pantalla, no, y
   es lo que es: quien busca "licencia médica rechazada" cae acá antes que en la
   portada.

   Ahora abre con franja como la portada y el contenido va en dos columnas, con
   la acción de agendar al costado. */
.area-hero {
    background: linear-gradient(180deg, var(--sage-soft) 0%, var(--sage-soft) 70%, var(--color-bg-page) 100%);
    padding-block: clamp(1.4rem, 3vw, 2.2rem) clamp(2rem, 4vw, 3rem);
}

/* Dos columnas, como la ficha de servicio: la foto del área a la derecha. Con
   el titular solo, la franja medía 300px y la mitad derecha no decía nada. */
.area-hero__inner {
    display: grid;
    gap: clamp(1.6rem, 3vw, 3rem);
    align-items: center;
}
@media (min-width: 900px) {
    /* La foto pesa menos que el texto: es apoyo, no el argumento. */
    .area-hero__inner:has(.area-hero__foto) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); }
}

.area-hero__foto {
    margin: 0;
    border-radius: var(--radius-organic);
    overflow: hidden;
    background: var(--sage-soft);
    box-shadow: var(--shadow-soft);
}
.area-hero__foto img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.area-hero__chips { margin: 1.3rem 0 0; }

.area-hero__titulo {
    margin: 0.6rem 0 0.6rem;
    font-family: var(--font-serif);
    font-size: clamp(var(--text-4xl), 1.1rem + 2vw, 3rem);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: 1.1;
    color: var(--color-text-strong);
}

.area-hero__lead {
    margin: 0;
    max-width: 58ch;
    font-size: var(--text-xl);
    line-height: 1.55;
    color: var(--color-text-muted);
}

.area-layout {
    display: grid;
    gap: 2rem;
    padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}

@media (min-width: 960px) {
    /* El panel a la derecha y angosto: es una acción, no una segunda lectura. */
    .area-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 3rem; }
    /* Acompaña el scroll por debajo de la cabecera pegajosa, que mide 104px. */
    .area-panel { position: sticky; top: var(--sticky-top); }
}

/* La grilla del catálogo dentro de una columna, no de la página.
   ------------------------------------------------------------
   `.service-cards--catalogo` fija tres columnas a partir de 960px, y eso está
   calculado para /servicios, donde la grilla ocupa los 1200px del contenedor.
   Acá vive dentro de la columna izquierda —unos 700px con el panel al lado— y
   tres columnas dejaban tarjetas de 220px: la foto ilegible, el título en
   cuatro líneas y las viñetas de "qué incluye" partidas por la mitad.

   Con `auto-fit` la grilla se acomoda al ancho que de verdad tiene. Y con una
   sola tarjeta —el caso de un área con un servicio— la columna vacía se
   colapsa, así que se le pone techo: estirada a 700px, la foto se ve como un
   banner y el pie con el precio queda flotando al fondo. */
.area-main .service-cards--catalogo,
.pro-cuerpo .service-cards--catalogo {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.area-main .service-cards--catalogo > :only-child,
.pro-cuerpo .service-cards--catalogo > :only-child { max-width: 30rem; }

.area-main__titulo {
    margin: 2.4rem 0 1.2rem;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    color: var(--color-text-strong);
}

/* ---------- El panel ---------- */
.area-panel__caja {
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-2xl);
    padding: 1.4rem 1.35rem;
    box-shadow: var(--shadow-soft);
}

.area-panel__rotulo {
    margin: 0 0 0.2rem;
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}

.area-panel__titulo {
    margin: 0 0 0.9rem;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    color: var(--color-text-strong);
}

/* El precio es el dato que se compara, así que pesa por tamaño y no por color. */
.area-panel__precio {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 0.8rem;
    font-size: var(--text-md);
    color: var(--color-text-muted);
}
.area-panel__precio strong {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}

.area-panel__hora {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 1.1rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-lg);
    background: var(--color-cta-soft);
    font-size: var(--text-xs);
    color: var(--color-accent-text);
}
.area-panel__hora svg { width: 14px; height: 14px; flex: 0 0 auto; }
.area-panel__hora strong { font-weight: 650; font-variant-numeric: tabular-nums; }

.area-panel__accion { margin: 0 0 0.6rem; }
.area-panel__accion .btn { width: 100%; }

.area-panel__nota {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.area-panel__wa {
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.area-panel__senales {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--hairline);
    display: grid;
    gap: 0.6rem;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-text-muted);
}
.area-panel__senales li { display: flex; gap: 0.5rem; align-items: flex-start; }
.area-panel__senales svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--color-accent-text);
}