/* ══════════════════════════════════════════
   VARIABLES & RESET
══════════════════════════════════════════ */
:root {
    /* ── PALETA ─────────────────────────────────────────────
       Colores oficiales del manual de marca:
         #6F0008  vino profundo    #99272F  vino medio
         #6B8041  verde oliva      #BACB98  verde claro
         #D9D9D9  gris claro
       Los nombres --rose/--sage se mantienen para no romper
       las ~200 referencias que ya existen en la hoja.
    ───────────────────────────────────────────────────────── */
    --rose:        #99272F;   /* manual — primario: botones, acentos */
    --rose-deep:   #6F0008;   /* manual — hovers, fondos profundos */
    --rose-text:   #99272F;
    --rose-light:  #B23A43;   /* derivado para estados suaves */
    --rose-pale:   #F9EDEE;   /* tinte del primario para fondos */
    --sage:        #6B8041;   /* manual — verde oliva */
    --sage-dark:   #576834;   /* derivado */
    --sage-strong: #46522A;   /* derivado */
    --sage-light:  #BACB98;   /* manual — verde claro */
    --white:       #FFFFFF;
    --off-white:   #F9F7F5;
    --text-dark:   #1E1E1E;
    --text-mid:    #454545;
    --text-light:  #999999;
    --border:      #D9D9D9;   /* manual — gris claro */
    /* ── MEDIDAS ────────────────────────────────────────────
       Ancho de los bloques anchos —Áreas de Expertise, Sobre mí—.
       Va como variable para que arranquen y terminen en la misma
       línea vertical sin repetir el número en cada regla.
    ───────────────────────────────────────────────────────── */
    --ancho-bloque: 87.5rem;
    /* ── TIPOGRAFÍA ─────────────────────────────────────────
       Dos familias, con roles separados:
         --font-slab  (Cormorant Garamond) → títulos y display
         --font-body  (Montserrat)         → cuerpo, UI y labels
       --font-script se mantiene como alias de --font-slab por
       compatibilidad con clases existentes (.script-rose).
    ───────────────────────────────────────────────────────── */
    --font-slab:   'Cormorant Garamond', Georgia, serif;
    --font-script: var(--font-slab);
    --font-body:   'Montserrat', sans-serif;

    /* Escala tipográfica — usar SIEMPRE uno de estos pasos.
       No inventar tamaños intermedios: la jerarquía se construye
       con la escala, no con diferencias de 0.02rem. */
    /* 0.68rem daba 10.9px reales: por debajo del piso cómodo de lectura en
       teléfono. 0.73rem son 11.7px y la jerarquía no cambia. */
    --fs-micro: 0.73rem;  /* labels diminutos en mayúscula (rol navbar) */
    --fs-2xs:   0.8rem;   /* badges, notas al pie, letra chica */
    --fs-xs:    0.88rem;  /* metadatos, captions, botones */
    --fs-sm:    0.95rem;  /* cuerpo secundario */
    --fs-base:  1.05rem;  /* cuerpo principal */
    --fs-md:    1.18rem;  /* bajadas, títulos de card */
    --fs-lg:    1.38rem;  /* subtítulos, h4 */
    --fs-xl:    1.6rem;   /* h3 */
    --fs-2xl:   1.95rem;  /* h2 — títulos de sección */
    --fs-3xl:   2.4rem;   /* display */
    --fs-4xl:   3.1rem;   /* hero */
    --fs-deco:  4rem;     /* comillas y ornamentos decorativos */

    /* Pesos — tres escalones, sin intermedios.
       500 cuerpo · 600 énfasis/UI · 800 títulos */
    --fw-body:  500;
    --fw-med:   600;
    --fw-bold:  800;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: hidden; }
body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--white);
    line-height: 1.7;
    font-weight: var(--fw-body);
    -webkit-font-smoothing: antialiased;
    /* Las cadenas largas sin espacios —"Personal/Profesional/Ejecutivos/
       Emprendedores", mails, URLs— no tienen dónde cortar y le imponen su
       ancho al contenedor. En teléfonos angostos eso desbordaba la tarjeta
       de Acortando Brechas y el texto quedaba tapado. Solo corta cuando la
       palabra no entra: el resto del texto no se ve afectado. */
    overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

/* El atributo hidden esconde con `display: none` desde la hoja del navegador,
   así que cualquier `display` propio le gana: un .contacto-form con
   display:flex seguía visible con hidden puesto. Va acotado a los dos bloques
   que se alternan por JS —formulario y mensaje de éxito— y no como regla
   global: en `[hidden]` suelto también empezaba a ocultar las opciones de
   servicio, que hasta ahora se veían siempre. */
.contacto-form[hidden],
.modal-success-msg[hidden] { display: none !important; }

/* Los controles de formulario no heredan la tipografía por defecto:
   sin esto, cualquier botón sin font-family propia cae a Arial. */
button, input, select, textarea { font-family: inherit; }


.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

/* ══════════════════════════════════════════
   HELPERS
══════════════════════════════════════════ */
.section-title {
    font-family: var(--font-slab);
    font-size: 1.95rem;
    font-weight: var(--fw-bold);
    color: var(--text-dark);
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

/* Línea decorativa rosa debajo del título */
.title-deco {
    display: inline-block;
    width: 38px;
    height: 2px;
    background: var(--rose);
    border-radius: 2px;
    position: relative;
    margin-top: 0.5rem;
}
.title-deco::after {
    content: '';
    position: absolute;
    right: -12px; top: 0;
    width: 7px; height: 2px;
    background: var(--rose);
    opacity: 0.45;
    border-radius: 2px;
}

.section-header.centered           { text-align: center; margin-bottom: 1.8rem; }
.section-header.centered .title-deco { margin: 0.5rem auto 0; display: block; }
.title-deco.left                   { display: block; margin-left: 0; }

/* Solo se usa en "tu Vida" del titular del hero. En em —no rem— para que
   escale junto con .hero-title; el 0.9 conserva exactamente la proporción
   que tenía con el tamaño anterior. */
.script-rose {
    font-family: var(--font-script);
    font-style: normal;
    color: var(--rose);
    font-weight: 700;
    font-size: 0.9em !important;
}

.divider {
    display: block;
    width: 145px;
    height: auto;
    filter: sepia(1) saturate(3.8) hue-rotate(315deg) brightness(0.72) contrast(1.28);
    opacity: 0.96;
    transform: scaleY(1.08);
}

.divider-centered {
    margin: 0.6rem auto 0;
}

.divider-left {
    margin: 0.55rem 0 0.8rem;
}

.divider-hero {
    margin: 0.4rem auto 1.2rem;
    width: 200px;
    max-width: 80%;
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-rose {
    display: inline-block;
    background: var(--rose);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.75rem 1.8rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.1px;
}
.btn-rose:hover {
    background: var(--rose-deep);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(153,39,47,0.3);
}
.btn-rose.full { width: 100%; text-align: center; display: block; }

.btn-rose-outline {
    background: transparent;
    color: var(--rose);
    border: 2px solid var(--rose);
}
.btn-rose-outline:hover {
    background: var(--rose);
    color: var(--white);
}

.btn-white {
    display: inline-block;
    background: var(--white);
    color: var(--rose);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
}
.btn-white:hover { opacity: 0.92; transform: translateY(-2px); }

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white);
    border-bottom: 1px solid #f0ebed;
    padding: 0.4rem 0;
    transition: box-shadow 0.3s;
}
.navbar.scrolled { box-shadow: 0 4px 18px rgba(0,0,0,0.07); }

.navbar .container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Sin flex-shrink:0 y con min-width:0: la marca mide ~311px y en un teléfono
   de 320 empujaba el botón del menú fuera de pantalla, dejándolo inaccesible.
   Ahora se achica y el texto acompaña. */
.nav-logo {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.nav-logo img {
    height: 50px;
    border-radius: 50%;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.nav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
}

.nav-brand-name {
    font-family: var(--font-slab);
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 600;
    color: black;
}

.nav-brand-role {
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    letter-spacing: 0.09em;
    font-weight: 600;
    color: var(--rose);
    text-transform: uppercase;
    margin-top: 0.15rem;
}

.nav-menu {
    display: flex;
    gap: 1.8rem;
    margin-left: auto;
    margin-right: 1rem;
}
/* El padding vertical le da altura táctil en tablets sin mover el diseño:
   el <li> del menú se centra igual y el subrayado sigue pegado al texto. */
.nav-link {
    font-size: 0.88rem;
    color: var(--text-mid);
    font-weight: 500;
    transition: color 0.2s;
    position: relative;
    display: inline-block;
    padding: 0.7rem 0 calc(0.7rem + 2px);
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0.7rem; left: 0;
    width: 0; height: 1px;
    background: var(--rose);
    transition: width 0.25s;
}
.nav-link:hover { color: var(--rose); }
.nav-link:hover::after { width: 100%; }

.nav-cta { flex-shrink: 0; }

/* El padding lo lleva a 44x44, el mínimo cómodo para el dedo: con 4px el
   área táctil quedaba en 32x24. */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 14px 12px;
    margin-left: auto;
    flex-shrink: 0;
}
.hamburger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: 0.3s;
}

/* ══════════════════════════════════════════
   HERO  — grid full width, imagen llena el alto
══════════════════════════════════════════ */
/* Banda separadora entre la barra blanca de navegación y el hero. El grosor
   es el alto del botón "Entrevista Previa (60 min)" (42px), que es la
   referencia que pidió Graciela. */
.hero-band {
    height: 42px;
    background: var(--rose);
}

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
    background: #F7F3EF;
    overflow: hidden;
    /* ~1cm de aire arriba: la foto arrancaba pegada a la banda bordó y las
       dos manchas de color se leían como una sola. */
    padding-top: 2.4rem;
}

/* Columna izquierda */
/* La columna de la foto se topea en 400px. La clave es que quede SIEMPRE
   más angosta que (alto del hero × 0.759 = la proporción de la foto): así
   el que manda el escalado es el alto, la foto entra entera de arriba a
   abajo y lo único que se recorta son unos píxeles de fondo a los costados.
   Con 465px quedaba al filo —sobraba un pixel— y cualquier cambio de alto
   del hero volvía a recortar arriba. El texto se queda con el resto. */
@media (min-width: 901px) {
    .hero { grid-template-columns: minmax(0, 1fr) minmax(0, min(50%, 400px)); }
}

.hero-left {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.hero-botanical--left {
    left: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 120px;
    pointer-events: none;
    z-index: 0;
    /* El dibujo va a tamaño fijo y se repite hacia abajo. Antes era un SVG
       estirado al 100% del alto: al agrandarse también crecía a lo ancho y
       se salía de los 120px, así que el borde le comía las hojas. Cuanto
       más alta la sección, peor —en Sobre Mí llegaba a 47px por lado—, y
       como el alto cambia con la pantalla, el recorte se veía distinto en
       cada equipo. Repitiendo la baldosa las hojas conservan su tamaño y
       nunca tocan el borde. */
    background-image: url("images/rama-vertical.svg");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 120px 360px;
    /* La última repetición se corta contra el borde de abajo: este degradado
       la desvanece para que no quede una hoja partida al ras. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), transparent 100%);
}

/* Espejo de la anterior sobre el borde derecho de la columna de texto: cae
   en el espacio libre que queda antes de la foto. */
.hero-botanical--right {
    right: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 120px;
    pointer-events: none;
    z-index: 0;
    /* El dibujo va a tamaño fijo y se repite hacia abajo. Antes era un SVG
       estirado al 100% del alto: al agrandarse también crecía a lo ancho y
       se salía de los 120px, así que el borde le comía las hojas. Cuanto
       más alta la sección, peor —en Sobre Mí llegaba a 47px por lado—, y
       como el alto cambia con la pantalla, el recorte se veía distinto en
       cada equipo. Repitiendo la baldosa las hojas conservan su tamaño y
       nunca tocan el borde. */
    background-image: url("images/rama-vertical.svg");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 120px 360px;
    /* La última repetición se corta contra el borde de abajo: este degradado
       la desvanece para que no quede una hoja partida al ras. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), transparent 100%);
    /* Espejada, para que acompañe el borde derecho igual que la otra el izquierdo. */
    transform: scaleX(-1);
}

.hero-asset-left {
    position: absolute;
    left: -62px;
    bottom: -12px;
    height: 300px;
    width: auto;
    z-index: 0;
    pointer-events: none;
}

.hero-text {
    position: relative;
    z-index: 1;
    padding: 2rem 3rem;
    max-width: 740px;
    text-align: left;
}

.hero-title {
    font-family: var(--font-slab);
    /* Bajado en dos pasos a pedido de Graciela (3.1 -> 2.6 -> 2.3rem): el
       titular ocupaba demasiado peso en la primera pantalla. Las partes de
       adentro son proporcionales, así que basta con tocar este valor para
       reescalar todo el bloque. */
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-dark);
    margin-bottom: 1.3rem;
}
.hero-title em {
    font-family: var(--font-slab);
    font-style: normal;
    color: var(--rose-deep);
    font-weight: 700;
    line-height: 1;
}
.hero-title-secondary {
    display: inline-block;
    font-size: 0.86em;
}

/* Dos párrafos en vez de uno largo: el margen baja para que se lean como
   un bloque y no como dos secciones separadas. */
.hero-subtitle {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.78;
    margin-bottom: 0.85rem;
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}

/* Columna derecha — imagen full height con recorte blob orgánico */
.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.hero-right {
    position: relative;
    overflow: hidden;
}
.hero-right img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Con la caja siempre más angosta que la proporción de la foto, el
       recorte cae en los costados (fondo) y no arriba. El "top" garantiza
       que si algún día llegara a recortar de alto, se coma la base y nunca
       la cabeza. */
    object-position: center top;
    display: block;
    clip-path: url(#wavyLeft);
}

/* ══════════════════════════════════════════
   ESPECIALIDADES
══════════════════════════════════════════ */
.especialidades {
    padding: 2rem 0;
    background: var(--white);
    max-width: 1600px;
    /* Sin esto la sección se apoya en el borde izquierdo y en pantallas de
       más de 1600px el título y las tarjetas quedan descentrados. */
    margin-inline: auto;
}

.cards-grid        { display: grid; gap: 1.4rem; }
.cards-grid.four   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-grid.three  { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cards-grid.four { margin-top: 2rem; }
.cards-grid.three { margin-top: 2rem; }

/* Áreas de Expertise: 5 en una fila, rectángulo vertical moderado (no tan angosto/largo) */
.cards-grid.five {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.4rem;
    max-width: var(--ancho-bloque);
    margin: 2rem auto 0;
    padding: 0 1rem;
}

.spec-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--white);
    /* Marco bordó de mayor peso: sobre fondo blanco, 1px gris no despegaba
       la tarjeta del fondo. */
    border: 2px solid var(--rose);
    border-radius: 10px;
    padding: 1.5rem 1.2rem 1.4rem;
    text-align: center;
    /* Sombra en reposo, no solo al pasar el mouse: sobre fondo blanco la
       tarjeta necesita despegarse sola. */
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    transition: box-shadow 0.3s, transform 0.3s;
}
.spec-card:hover {
    box-shadow: 0 14px 34px rgba(153,39,47,0.20);
    transform: translateY(-4px);
}

.spec-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 auto 0.8rem;
    overflow: hidden;
}
.spec-icon img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.spec-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.spec-card h3 {
    font-family: var(--font-slab);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    line-height: 1.25;
    color: var(--text-dark);
}
.spec-card p {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-mid);
    font-weight: 500;
    line-height: 1.5;
}

/* ══════════════════════════════════════════
   SOBRE MÍ
══════════════════════════════════════════ */
.sobre-mi {
    /* La banda de color sigue a todo el ancho; el contenido va centrado. */
    padding: 3rem 0;
    background: #F7F3EF;
    overflow: hidden;
    position: relative;
}

/* Ramitas decorativas sobre el borde derecho, como las del inicio */
.sobre-mi-botanical {
    right: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 120px;
    pointer-events: none;
    z-index: 0;
    /* El dibujo va a tamaño fijo y se repite hacia abajo. Antes era un SVG
       estirado al 100% del alto: al agrandarse también crecía a lo ancho y
       se salía de los 120px, así que el borde le comía las hojas. Cuanto
       más alta la sección, peor —en Sobre Mí llegaba a 47px por lado—, y
       como el alto cambia con la pantalla, el recorte se veía distinto en
       cada equipo. Repitiendo la baldosa las hojas conservan su tamaño y
       nunca tocan el borde. */
    background-image: url("images/rama-vertical.svg");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 120px 360px;
    /* La última repetición se corta contra el borde de abajo: este degradado
       la desvanece para que no quede una hoja partida al ras. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), transparent 100%);
}
/* Misma ramita con hojas que acompaña al tallo en el hero. Espejada: acá
   el adorno va sobre el borde derecho, así las hojas abren hacia el texto
   y no hacia afuera de la página. */
.sobre-mi-asset {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 300px;
    width: auto;
    z-index: 0;
    pointer-events: none;
    transform: scaleX(-1);
}

/* Mismo ancho y mismo padding lateral que las tarjetas de Áreas de Expertise,
   así los dos bloques arrancan y terminan en la misma línea vertical. */
.sobre-mi-container {
    max-width: var(--ancho-bloque);
    margin-inline: auto;
    padding: 0 1rem;
    /* Por encima de las ramitas decorativas */
    position: relative;
    z-index: 1;
    /* La columna de la foto es fluida —un porcentaje del bloque, no de la
       ventana— con piso y techo en rem para que no se achique de más en
       notebooks ni se dispare en monitores grandes. El alto lo pone la
       proporción nativa de la imagen. */
    display: grid;
    grid-template-columns: clamp(15rem, 30%, 22rem) 1fr;
    gap: 0;
    align-items: stretch;
    width: 100%;
}

/* Col izquierda: imagen + quote debajo */
.sobre-mi-left-col {
    display: flex;
    flex-direction: column;
}

/* Imagen: flush al borde izquierdo, cuadrada */
.sobre-mi-image {
    padding: 0;
    margin: 0;
    overflow: hidden;
    flex-shrink: 0;
}
/* Ancho de columna y alto derivado de la proporción nativa (1251×1600): la
   caja es la foto, con su marco bordó incluido —es una foto sacada a una
   foto impresa, y ese marco es justamente lo que le gustó a Graciela—.
   Entra entera, sin recorte ni deformación, en cualquier pantalla. */
.sobre-mi-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1251 / 1600;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* Texto: medida de lectura acotada. Sin tope llegaba a 121 caracteres por
   línea —el doble de lo cómodo— y además no dejaba margen libre a la
   derecha, que es donde ahora va la rama. */
.sobre-mi-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 3.2rem 0 3.2rem 4rem;
    /* 45rem = 720px. El texto trae saltos de línea propios de Graciela, así
       que el alto ya no depende del ancho: lo que hace falta es que entre
       la línea más larga (656px) sin partirse, con algo de aire. Más
       angosto y los renglones se parten al medio. Deja además margen libre
       a la derecha para la rama. */
    max-width: 45rem;
}

.label-small {
    font-family: var(--font-slab);
    font-size: 1.95rem;
    font-weight: 700;
    color: var(--rose);
    margin-bottom: 0.2rem;
}

.sobre-mi-name {
    display: block;
    font-size: 1.95rem;
    line-height: 1.2;
    margin-top: 0.7rem;
    margin-bottom: 0.4rem;
}

.sobre-mi-role {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--rose);
    line-height: 1.45;
    margin-bottom: 1.5rem;
}

.sobre-mi-desc {
    font-size: 0.95rem;
    color: #252525;
    font-weight: 600;
    line-height: 1.75;
    /* Evita que la última palabra quede sola colgando en su propia línea */
    text-wrap: pretty;
    margin-bottom: 0.62rem;
}

.signature {
    font-family: var(--font-script);
    font-size: 1.95rem;
    color: var(--text-dark);
    margin-top: 1.8rem;
    font-weight: 600;
    display: block;
}

/* ══════════════════════════════════════════
   QUOTE (dentro de sobre-mi)
══════════════════════════════════════════ */
.sobre-mi-quote {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.8rem;
    padding: 1.2rem 1.4rem;
    background: var(--rose-pale);
    border-left: 3px solid var(--rose);
    border-radius: 6px;
}

.quote-ornament {
    font-family: var(--font-slab);
    font-size: 4.0rem;
    line-height: 1;
    color: var(--rose);
    opacity: 0.4;
    flex-shrink: 0;
    user-select: none;
    align-self: flex-start;
    margin-top: -0.2rem;
}

.quote-text {
    font-family: var(--font-slab);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sage);
    line-height: 1.55;
    border: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 600px) {
    .quote-text { font-size: 1.05rem; }
    .quote-ornament { font-size: 3.1rem; }
}

/* Quote debajo de la foto */
.sobre-mi-quote--foto {
    margin-top: 0;
    border-radius: 0;
    padding: 1rem 1.4rem;
}
.sobre-mi-quote--foto .quote-text {
    font-size: 1.38rem;
    line-height: 1.5;
    color: var(--rose);
    font-weight: 800;
}
.sobre-mi-quote--foto .quote-ornament {
    font-size: 2.4rem;
}

/* Misión highlight */
.mision-highlight {
    color: var(--rose);
    font-weight: 700;
}

/* ── Contacto: formulario desplegable tras la imagen de los sobres ──
   El formulario completo alargaba mucho el cierre de la página, así que
   arranca plegado y la imagen hace de disparador. */
.contacto-form-wrap {
    display: flex;
    flex-direction: column;
}

.contacto-sobre-btn {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.contacto-sobre-btn:hover {
    border-color: var(--rose);
    box-shadow: 0 8px 24px rgba(111,0,8,0.10);
    transform: translateY(-2px);
}

.contacto-sobre-img {
    width: 100%;
    height: auto;
    display: block;
    /* Se mantiene el gris neutro del original para que combine con la
       trama del logo de fondo, sin tirar de la paleta vino. */
    filter: grayscale(1) contrast(1.02);
}

.contacto-sobre-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    background: var(--white);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    color: var(--rose);
    text-align: center;
}
.contacto-sobre-arrow {
    transition: transform 0.3s;
    flex-shrink: 0;
}
.contacto-sobre-btn[aria-expanded="true"] .contacto-sobre-arrow {
    transform: rotate(180deg);
}

/* Mismo patrón de acordeón que el resto del sitio: max-height fijo y
   generoso, sin cálculo por JS. */
.contacto-form-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1);
}
.contacto-form-wrap.open .contacto-form-panel {
    max-height: 1200px;
}
.contacto-form-panel-inner {
    padding-top: 1.4rem;
}

.contacto-form-titulo {
    font-family: var(--font-slab);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 0.35rem;
}
.contacto-form-nota {
    font-size: var(--fs-2xs);
    color: var(--text-mid);
    font-weight: var(--fw-body);
    margin-bottom: 1.1rem;
}

/* Formulario contacto - botones */
.contacto-form-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-wsp-contacto {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #25d366;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.72rem 1.4rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.btn-wsp-contacto:hover {
    background: #1ebe5a;
    transform: translateY(-2px);
}

/* Imágenes de servicio - evitar oscurecimiento */
.service-img img {
    filter: brightness(1) !important;
}

/* ══════════════════════════════════════════
   SERVICIOS
══════════════════════════════════════════ */
.servicios {
    padding: 2rem 0;
    background: var(--white);
    border-top: 1px solid #f3eeef;
}

.servicios .cards-grid.three {
    width: min(100%, 1000px);
    margin: 2rem auto 0;
    align-items: stretch;
}

.service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--rose);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
    background: #F7F3EF;
}
.service-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.07);
    transform: translateY(-4px);
}
.service-card.clickable {
    cursor: pointer;
}

.service-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center 24%;
    display: block;
}

.service-body {
    flex: 1;
    padding: 1.1rem 1.3rem 1.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

/* min-width:0 permite que el bloque de texto se encoja dentro del flex.
   Sin esto, un título largo en mayúsculas (ej. "COACHING PERSONAL/PROFESIONAL")
   empuja el ícono fuera de la tarjeta.
   Los títulos NO usan break-word: cortaría a mitad de palabra. El salto
   se resuelve con un <wbr> en el HTML, después de la barra. */
.service-info { flex: 1; min-width: 0; }
.service-info p { overflow-wrap: break-word; }
.service-info h3 {
    font-family: var(--font-slab);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.45rem;
    color: var(--rose);
    line-height: 1.2;
}
.service-info p {
    font-size: 0.88rem;
    color: #2f2f2f;
    font-weight: 500;
    line-height: 1.35;
}

.service-card[data-popup="coaching-personal"] .service-img,
.service-card[data-popup="mentoria"] .service-img,
.service-card[data-popup="entrevista"] .service-img {
    padding: 0;
    background: transparent;
}

.service-card[data-popup="coaching-personal"] .service-img img,
.service-card[data-popup="mentoria"] .service-img img,
.service-card[data-popup="entrevista"] .service-img img {
    border-radius: 0;
    object-position: center 24%;
}

.service-icon {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.service-icon.rose { background: rgba(153,39,47,0.08); }
.service-icon.sage { background: rgba(107,128,65,0.12); }
.service-icon img  { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }

/* ══════════════════════════════════════════
   TESTIMONIOS
══════════════════════════════════════════ */
.testimonios {
    padding: 2rem 0;
    background: var(--off-white);
}

.testi-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.8rem 1.6rem;
}

.quote-mark {
    font-family: Georgia, serif;
    font-size: 4.0rem;
    color: var(--rose);
    line-height: 0.9;
    display: block;
    margin-bottom: 0.8rem;
    opacity: 0.45;
}

.testi-card p {
    font-size: 0.95rem;
    color: #303030;
    line-height: 1.72;
    margin-bottom: 1rem;
    font-style: italic;
    font-weight: 600;
}

.testi-card strong {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 700;
}

/* ══════════════════════════════════════════
   CTA BANNER
══════════════════════════════════════════ */
/* Fondo ÚNICO compartido por "El puente al cambio" + "Hablemos" (una sola imagen) */
.fondo-wrap {
    position: relative;
    background-image: url('images/fondo.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--white);
    overflow: hidden;
}
.fondo-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.62);
    pointer-events: none;
    z-index: 0;
}

/* El puente al cambio: tarjeta blanca flotando sobre el fondo unificado */
.cta-wrap {
    position: relative;
    z-index: 1;
    padding: 3.5rem 1.5rem;
}

/* Tarjeta editorial en dos columnas: a la izquierda el mensaje y la acción,
   a la derecha el retrato con su ficha. El acento vino sobre el borde
   izquierdo ancla la lectura y evita que la tarjeta quede plana. */
.cta-banner {
    background:
        linear-gradient(135deg, var(--rose-pale) 0%, var(--white) 46%, var(--white) 100%);
    border: 1px solid rgba(153,39,47, 0.18);
    border-left: 4px solid var(--rose);
    border-radius: 18px;
    padding: 3rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* Ancho medido, no máximo: con la tarjeta más ancha el titular deja un
       hueco muerto de ~250px contra el retrato. */
    max-width: 820px;
    margin: 0 auto;
    box-shadow: 0 18px 48px rgba(111,0,8,0.10);
}

/* Halo verde apenas perceptible en la esquina del retrato: da profundidad
   sin sumar un elemento más que leer. */
.cta-banner::after {
    content: '';
    position: absolute;
    right: -90px;
    bottom: -110px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(186,203,152,0.28) 0%, rgba(186,203,152,0) 70%);
    pointer-events: none;
}

.cta-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

.cta-text {
    text-align: left;
}

.cta-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: 0.5rem;
}

/* Titular en display: es lo que da masa visual a la columna izquierda y la
   equilibra contra el retrato. */
.cta-text h2 {
    font-family: var(--font-slab);
    font-size: var(--fs-4xl);
    color: var(--text-dark);
    font-weight: var(--fw-bold);
    line-height: 1.08;
    margin-bottom: 0;
}

.cta-text .divider-left {
    margin: 0.5rem 0 0.9rem;
    width: 130px;
}

.cta-lead {
    color: var(--text-mid);
    font-size: var(--fs-md);
    font-weight: var(--fw-body);
    line-height: 1.55;
    max-width: 30ch;
}

/* Líneas de apoyo bajo la bajada principal: mismo bloque de lectura, un
   escalón más chicas para que no compitan con el titular. */
.cta-sub {
    color: var(--text-mid);
    font-size: var(--fs-sm);
    font-weight: var(--fw-body);
    line-height: 1.6;
    max-width: 34ch;
    margin-top: 0.5rem;
}

.cta-btn {
    margin-top: 1.6rem;
    padding: 0.85rem 2.1rem;
}

/* ══════════════════════════════════════════
   CONTACTO — HABLEMOS
══════════════════════════════════════════ */
.contacto {
    padding: 2rem 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.contacto-maceta-deco {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
    pointer-events: none;
    z-index: 0;
}

.contacto > .container:first-child {
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.contacto-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5rem;
    align-items: start;
}

.contacto-desc {
    font-size: 0.95rem;
    color: black;
    font-weight: 500;
    line-height: 1.78;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
}

.contacto-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    font-size: 0.88rem;
    color: black;
}
/* Teléfono y correo son enlaces que se tocan con el dedo: sin esto el área
   activa quedaba en 24px de alto. */
.contacto-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.contacto-list svg {
    width: 17px; height: 17px;
    color: var(--rose);
    flex-shrink: 0;
    stroke-width: 2;
}

/* FORM */
.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.form-row { display: grid; gap: 0.9rem; }
.form-row.two { grid-template-columns: 1fr 1fr; }

/* Campo trampa para bots: presente en el DOM (a diferencia de display:none,
   que algunos bots ya saltean) pero invisible y fuera del flujo para personas. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Formularios dentro de modales: más compactos para que entren sin scroll interno */
.modal .contacto-form { gap: 0.65rem; }
.modal .form-row { gap: 0.65rem; }
.modal .form-experiencia { gap: 0.5rem; }

.contacto-form input,
.contacto-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rose);
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--rose-deep);
    background: rgba(255,255,255,0.96);
    outline: none;
    transition: border-color 0.2s;
    resize: none;
}
.contacto-form input::placeholder,
.contacto-form textarea::placeholder {
    color: var(--rose-deep);
    opacity: 0.72;
    font-weight: 500;
}
.contacto-form input:focus,
.contacto-form textarea:focus {
    border-color: var(--rose-deep);
    box-shadow: 0 0 0 3px rgba(153,39,47,0.12);
}

.contacto-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rose);
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--rose-deep);
    background: rgba(255,255,255,0.96);
    outline: none;
    transition: border-color 0.2s;
    cursor: pointer;
}

.contacto-form select:focus {
    border-color: var(--rose);
}

.form-experiencia {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.form-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-med);
    color: var(--text-mid);
    margin-bottom: 0.3rem;
}

.payment-method-label {
    font-size: 0.88rem;
    color: var(--text-dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.checkbox-group {
    /* En fila las opciones se repartian el ancho del modal y las etiquetas
       largas partian en tres renglones ("Programa Acortando Brechas" se
       quedaba con 90px). En columna cada una dispone del ancho completo. */
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
}

.checkbox-label {
    display: flex;
    /* Arriba, no centrado: si la etiqueta llega a ocupar dos renglones en
       pantallas angostas, la casilla queda alineada con el primero. */
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-dark);
}

.checkbox-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    /* Que no se achique cuando la etiqueta es larga */
    flex-shrink: 0;
    /* Centra la casilla con la primera linea de texto */
    margin-top: 0.12em;
    cursor: pointer;
    accent-color: var(--rose);
}

.checkbox-label span {
    user-select: none;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
/* Footer en vino profundo (manual) en lugar del verde: cierra la página
   con el color primario de la marca y la diferencia del bloque de contacto,
   que es claro. La línea superior en verde oliva mantiene presente el
   segundo color de la paleta. */
.footer {
    background: var(--rose-deep);
    border-top: 4px solid var(--sage);
    padding: 3.5rem 0 0;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    padding-bottom: 3rem;
}

.footer-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1rem;
    border-radius: 50%;
}

.footer-brand p {
    font-size: 0.8rem;
    line-height: 1.72;
    max-width: 280px;
    color: rgba(255,255,255,0.86);
    font-weight: 500;
}

.footer-social-title {
    font-family: var(--font-slab);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1rem;
}

.social-icons {
    display: flex;
    gap: 0.7rem;
}
.social-icons a {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.75);
    transition: background 0.2s, border-color 0.2s;
}
.social-icons a:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.45);
    color: var(--white);
}
.social-icons svg { width: 17px; height: 17px; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.1rem 0;
    text-align: center;
}
.footer-bottom p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.72);
    font-weight: 500;
}

/* ── Términos y condiciones: desplegable al pie ── */
.legales {
    max-width: 78ch;
    margin: 0 auto 0.9rem;
    text-align: left;
}
.legales-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* Alcanzable con el dedo y sin el triangulito propio del navegador, que
       rompe el centrado y no se puede colorear. */
    padding: 0.7rem 0;
    font-size: 0.8rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    cursor: pointer;
    list-style: none;
    transition: color 0.2s;
}
.legales-toggle::-webkit-details-marker { display: none; }
.legales-toggle:hover { color: #fff; }
.legales-arrow {
    flex-shrink: 0;
    transition: transform 0.25s;
}
.legales[open] .legales-arrow { transform: rotate(180deg); }

.legales-cuerpo {
    /* La numeración la pone el <ol>: el reset del sitio le saca los bullets a
       todas las listas, así que hay que devolvérsela acá. */
    list-style: decimal;
    padding: 0.35rem 0 0.9rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.legales-cuerpo li {
    font-size: 0.78rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.62);
    font-weight: var(--fw-body);
}
.legales-cuerpo li strong {
    color: rgba(255,255,255,0.85);
    font-weight: var(--fw-bold);
}
.legales-cuerpo li p {
    /* Pisa el .footer-bottom p de arriba, que fija tamaño y color propios. */
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    margin-top: 0.45rem;
}

/* ══════════════════════════════════════════
   MODALES / POP-UPS
══════════════════════════════════════════ */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.modal-content {
    position: relative;
    background: var(--white);
    border-radius: 12px;
    padding: 1.7rem 2rem;
    max-width: 620px;
    width: 100%;
    max-height: 94vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    animation: modalFadeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.modal-content.modal-wide {
    max-width: 820px;
    max-height: 95vh;
}

#modal-programa .modal-content {
    max-width: 1050px;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.95rem;
    line-height: 1;
    color: var(--text-mid);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}

.modal-close:hover {
    background: var(--rose-pale);
    color: var(--rose);
}

.modal-content h3 {
    font-family: var(--font-slab);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.2rem;
    text-align: center;
}

.modal-content h4 {
    font-family: var(--font-slab);
    font-size: 1.38rem;
    font-weight: 700;
    color: var(--rose);
    margin-bottom: 0.8rem;
}

.modal-content .divider {
    margin: 0.4rem auto 1rem;
}

.modal-text {
    font-size: 0.88rem;
    color: var(--text-mid);
    line-height: 1.75;
    text-align: center;
}

.modal-desc {
    font-family: var(--font-slab);
    font-size: 1.38rem;
    font-style: italic;
    color: var(--sage);
    font-weight: 800;
    text-align: center;
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.modal-quote {
    font-family: var(--font-slab);
    font-size: 1.18rem;
    font-style: italic;
    color: var(--rose-text);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
    padding: 0.7rem 0.7rem;
    background: var(--rose-pale);
    border-left: 3px solid var(--rose-text);
    border-radius: 6px;
    font-weight: 700;
}

.modal-two-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: .5rem;
}

.modal-block {
    padding: 1rem;
    background: var(--off-white);
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.modal-section {
    margin-top: 1rem;
}

.modal-section p {
    font-size: 0.88rem;
    color: var(--text-mid);
    line-height: 1.7;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.modal-section strong {
    color: var(--text-dark);
    font-weight: 600;
}

.modal-pricing {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(153,39,47,0.05);
    border-radius: 6px;
}

.modal-pricing p {
    font-size: 0.88rem;
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.modal-pricing p:last-child {
    margin-bottom: 0;
}

.modal-pricing em {
    font-size: 0.8rem;
    color: var(--text-mid);
    display: block;
    margin-top: 0.3rem;
}

.modal-block .btn-rose {
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .modal-content {
        padding: 2rem 1.5rem;
        max-width: 95%;
    }

    .modal-content h3 {
        font-size: 1.6rem;
    }

    .modal-quote {
        font-size: 0.95rem;
        padding: 0.9rem 1rem;
    }

    .modal-two-blocks {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   MODALES DE PAGO
══════════════════════════════════════════ */
.pago-content {
    max-width: 520px;
    text-align: center;
}

.pago-check {
    display: flex;
    justify-content: center;
    margin-bottom: 1.2rem;
}
.pago-check svg {
    width: 52px;
    height: 52px;
}

.pago-titulo {
    font-family: var(--font-slab);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.6rem;
}

.pago-subtitulo {
    font-size: 0.95rem;
    color: var(--text-mid);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.pago-opciones {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.pago-opcion {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1.2rem;
    background: var(--off-white);
}

.pago-separador {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
    background: var(--white);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.pago-separador span {
    font-size: 0.8rem;
    color: var(--text-light);
    font-style: italic;
}

.pago-region {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.1rem;
}

.pago-monto {
    font-family: var(--font-slab);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rose);
    margin-bottom: 0.8rem;
}

/* Botón Mercado Pago */
.btn-mp {
    display: inline-block;
    background: #009EE3;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.65rem 1.1rem;
    border-radius: 6px;
    text-align: center;
    transition: background 0.2s, transform 0.2s;
    width: 100%;
}
.btn-mp:hover {
    background: #0080c0;
    transform: translateY(-1px);
}

/* Botón PayPal */
.btn-paypal {
    display: inline-block;
    background: #003087;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.65rem 1.1rem;
    border-radius: 6px;
    text-align: center;
    transition: background 0.2s, transform 0.2s;
    width: 100%;
}
.btn-paypal:hover {
    background: #00205b;
    transform: translateY(-1px);
}

/* WhatsApp (modal consultar) */
.pago-wsp {
    margin-top: 0.5rem;
    padding: 0.85rem 2rem;
}

@media (max-width: 600px) {
    .pago-opciones {
        flex-direction: column;
    }
    .pago-separador {
        width: 100%;
        height: 32px;
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hero-text { padding: 4rem 2rem; }
    /* "tu Vida" ya no necesita override: .script-rose es proporcional */
    .hero-title { font-size: 1.75rem; }
}

/* Cinco columnas dejaban tarjetas de ~150px en notebooks y tablets apaisadas:
   el ícono solo ya mide 52px y los títulos partían en cuatro líneas. Se pasa
   a tres antes de llegar ahí. */
@media (max-width: 1100px) {
    .cards-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .cards-grid.four  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards-grid.five  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sobre-mi-container { grid-template-columns: 1fr; }
    /* En una sola columna la foto ocuparía todo el ancho y en tablet se
       dispararía de alto: se topea en rem y queda centrada. */
    .sobre-mi-image img { max-width: min(100%, 26rem); margin-inline: auto; }
    .sobre-mi-text { padding: 2.5rem 2rem; max-width: 100%; }
    .contacto-container { grid-template-columns: 1fr; gap: 2.5rem; }
    .contacto-maceta-deco { display: none; }
    .cta-wrap { padding: 2.5rem 1rem; }
}

@media (max-width: 768px) {
    .nav-menu, .nav-cta { display: none; }
    .hamburger { display: flex; }
    .nav-brand-name { font-size: 0.95rem; }
    .nav-brand-role { font-size: var(--fs-micro); letter-spacing: 0.07em; }

    .nav-menu.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        background: white;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        z-index: 9999;
        margin: 0;
    }
    .nav-menu.open .nav-link { font-size: 1.38rem; color: var(--text-dark); }

    /* Hero mobile: imagen arriba, texto abajo */
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
.hero-right {
        order: -1;
        position: relative;
        /* En celular la foto ocupa todo el ancho, así que el alto tiene que
           ser exactamente el de su proporción: cualquier otro valor obliga
           a recortar, y arriba no sobra nada de pelo. */
        aspect-ratio: 839 / 1105;
    }
    .hero-right img {
        -webkit-clip-path: none;
        clip-path: none;
    }
    .hero-text {
        padding: 3.5rem 1.8rem 3rem;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .hero-botanical--left,
    .hero-botanical--right { display: none; }
    /* En pantalla angosta las ramitas se cruzan con el texto */
    .sobre-mi-botanical,
    .sobre-mi-asset { display: none; }
    /* Los saltos de línea que trae el texto están pensados para el ancho de
       escritorio (la línea más larga pide 656px). En el celular cada uno
       partiría el renglón al medio y quedaría todo dentado, así que se
       desactivan y el texto fluye solo. */
    .sobre-mi-desc br { display: none; }
    .hero-asset-left {
        height: 140px;
        left: -45px;
        bottom: -8px;
    }
    .hero-title { font-size: 2.1rem; }
    .hero-eyebrow { font-size: 1.18rem; }
    .hero-subtitle {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .cards-grid.three { grid-template-columns: 1fr; }
    .cards-grid.four  { grid-template-columns: 1fr; }
    .cards-grid.five  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .especialidades .cards-grid.four { padding: 0 0.8rem; }
    .especialidades .cards-grid.five { padding: 0 0.8rem; }
    /* Acompaña el margen lateral de las tarjetas, para seguir arrancando en
       la misma línea que ellas. */
    .sobre-mi-container { padding: 0 0.8rem; }
}

@media (max-width: 480px) {
    .cards-grid.five { grid-template-columns: 1fr; }
    .form-row.two     { grid-template-columns: 1fr; }
    .divider          { width: 105px; }
    .divider-hero     { width: 170px; margin-left: auto; margin-right: auto; }
    .section-title    { font-size: 1.6rem; }
    .footer-container { flex-direction: column; gap: 2rem; }
    .cta-text h2      { font-size: var(--fs-2xl); }
}

/* ══════════════════════════════════════════
   ANIMACIONES DE ENTRADA
══════════════════════════════════════════ */
@keyframes anim-fade-up {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes anim-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes anim-slide-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Navbar */
.navbar { animation: anim-slide-down 0.5s cubic-bezier(0.22,1,0.36,1) both; }

/* Hero — secuencia de carga */
.hero-title                { animation: anim-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
.divider-hero              { animation: anim-fade-in 0.6s ease 0.4s both; }
.hero-subtitle             { animation: anim-fade-up 0.7s cubic-bezier(0.22,1,0.36,1) 0.5s both; }
.hero-text .btn-rose       { animation: anim-fade-up 0.65s cubic-bezier(0.22,1,0.36,1) 0.65s both; }
.hero-right                { animation: anim-fade-in 1s ease 0.1s both; }
.hero-asset-left           { animation: anim-fade-up 0.9s ease 0.45s both; }

/* ── Scroll reveal — estado inicial ── */
.reveal {
    opacity: 0;
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
                transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal[data-anim="up"]    { transform: translateY(32px); }
.reveal[data-anim="left"]  { transform: translateX(-36px); }
.reveal[data-anim="right"] { transform: translateX(36px); }
.reveal[data-anim="fade"]  { transform: none; }
.reveal[data-anim="scale"] { transform: scale(0.93); }

/* Estado final — activado por JS */
.reveal.visible {
    opacity: 1;
    transform: none !important;
}

/* ══════════════════════════════════════════
   TALLERES VIVENCIALES (sección)
══════════════════════════════════════════ */
.talleres-section {
    padding: 2rem 0;
    background: #F7F3EF;
    border-top: 1px solid #ede8e5;
}

.section-subtitle {
    font-family: var(--font-slab);
    font-size: 1.38rem;
    font-style: italic;
    color: var(--sage-strong);
    /* 600, no 800: la familia no tiene ese peso y ya renderizaba 600.
       Deja lugar para que el destacado en bordó (700) se note en negrita. */
    font-weight: 600;
    margin-top: 0.2rem;
    margin-bottom: 0.3rem;
}

.cards-grid.two {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
}

.taller-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.8rem 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    transition: box-shadow 0.3s, transform 0.3s;
    border-left: 4px solid var(--rose);
}
.taller-card:hover {
    box-shadow: 0 10px 36px rgba(153,39,47,0.1);
    transform: translateY(-4px);
}

.taller-num {
    font-family: var(--font-slab);
    font-size: 3.1rem;
    font-weight: 700;
    color: var(--rose);
    opacity: 0.13;
    line-height: 1;
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    pointer-events: none;
    user-select: none;
}

.taller-card h3 {
    font-family: var(--font-slab);
    font-size: 1.38rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.25;
    color: var(--text-dark);
    margin-bottom: 0;
}

.taller-tagline {
    font-family: var(--font-slab);
    font-size: 1.18rem;
    font-style: italic;
    color: var(--rose-text);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0.2rem;
}

.taller-card p:not(.taller-tagline) {
    font-size: 0.95rem;
    color: #303030;
    font-weight: 600;
    line-height: 1.72;
    flex: 1;
}

.taller-card .btn-rose {
    align-self: flex-start;
    margin-top: 0.4rem;
}

/* ══════════════════════════════════════════
   MODALES — VISTAS Y ELEMENTOS NUEVOS
══════════════════════════════════════════ */

/* Ocultar vista de modal */
.modal-view.hidden {
    display: none !important;
}

/* Subtítulo del modal (debajo del h3) */
.modal-subtitle {
    font-family: var(--font-slab);
    font-size: 1.18rem;
    font-style: italic;
    color: var(--rose-text);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.3rem;
}

/* Intro de modal (texto introductorio antes de los bloques) */
.modal-intro {
    font-size: 0.95rem;
    color: #303030;
    font-weight: 500;
    line-height: 1.72;
    text-align: center;
    margin-bottom: 0.6rem;
}

/* Bloque solo (sin dos columnas) */
.modal-block.modal-block-solo {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}

/* Badges de servicio */
.servicio-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}
.badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    line-height: 1.4;
}
.badge-rose    { background: rgba(153,39,47,0.12); color: var(--rose); }
.badge-sage    { background: rgba(107,128,65,0.14); color: var(--sage-dark); }
.badge-neutral { background: rgba(0,0,0,0.06); color: var(--text-mid); }

/* Texto "qué te llevás" */
.modal-qte {
    font-size: 0.88rem;
    color: #303030;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 0.7rem;
    padding: 0.65rem 0.9rem;
    background: rgba(107,128,65,0.09);
    border-radius: 6px;
}

/* Bonus bonificación */
.modal-bonus {
    font-size: 0.8rem;
    color: var(--sage-dark);
    font-weight: 500;
    margin-bottom: 0.6rem;
}

/* Cierre del embudo en la Entrevista Previa: la pregunta levanta el tono
   justo antes del botón, y la línea de abajo baja la barrera de entrada. */
.modal-cierre-pregunta {
    font-family: var(--font-slab);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--rose);
    line-height: 1.35;
    margin: 1.4rem 0 0.35rem;
}
.modal-cierre-invito {
    font-size: var(--fs-sm);
    font-weight: var(--fw-med);
    color: var(--text-mid);
    margin-bottom: 1.1rem;
}

/* Precio en modal de programa */
.modal-precio {
    font-family: var(--font-slab);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rose);
    margin: 0.6rem 0 0.5rem;
}
.precio-nota {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-mid);
    margin-left: 0.3rem;
}

/* Precio dual: Valor Argentina (ARS) / Valor exterior (USD) */
.precio-dual {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    align-items: baseline;
}
.precio-dual .precio-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}
.precio-dual .precio-label {
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-mid);
    opacity: 0.8;
}

/* Variante para usar dentro de .modal-precio (precios grandes) */
.modal-precio.precio-dual {
    flex-direction: column;
    gap: 0.2rem;
}
.modal-precio.precio-dual .precio-item:first-child { font-size: 1.6rem; }
.modal-precio.precio-dual .precio-item:last-child {
    font-size: 0.95rem;
    color: var(--text-mid);
    font-weight: 600;
}

/* Variante para usar dentro de un badge (precio chico en pill) */
.badge.precio-dual {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    line-height: 1.3;
}
.badge.precio-dual .precio-item:last-child { font-size: var(--fs-micro); opacity: 0.85; }

/* Botón de la agenda post-pago */
.pago-agenda {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    padding: 0.9rem 1.8rem;
}

/* Nota pequeña bajo el botón de pago */
.pago-nota {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 1rem;
    text-align: center;
}
.pago-nota a {
    color: var(--rose);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ══════════════════════════════════════════
   PÁGINAS DE RESULTADO DE PAGO (/exito /fallo /pendiente)
══════════════════════════════════════════ */
.result-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--rose-pale);
}
.result-card {
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 2.5rem 2rem;
    max-width: 460px;
    width: 100%;
    text-align: center;
}
.result-card .pago-check svg { width: 60px; height: 60px; }
.result-card .pago-check.fallo svg { stroke: var(--rose); }
.result-card .result-orden {
    font-family: var(--font-slab);
    font-size: 0.95rem;
    color: var(--text-mid);
    margin-bottom: 1.2rem;
}
.result-card .result-links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.2rem;
}
.result-card .btn-outline {
    display: block;
    border: 1px solid var(--border);
    color: var(--text-dark);
    padding: 0.75rem 1.8rem;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: border-color 0.2s ease;
}
.result-card .btn-outline:hover { border-color: var(--rose); }

/* Responsive talleres */
@media (max-width: 768px) {
    .cards-grid.two { grid-template-columns: 1fr; }
    .taller-card { border-left-width: 3px; }
}

/* ══════════════════════════════════════════
   HERO — EYEBROW + CREDENTIALS
══════════════════════════════════════════ */
.hero-eyebrow {
    font-family: var(--font-slab);
    font-size: 1.38rem;
    font-style: italic;
    color: var(--rose-deep);
    margin-bottom: 0.85rem;
    line-height: 1.42;
    font-weight: 700;
}

.hero-credentials {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mid);
    margin: 0.8rem 0 1.4rem;
}

/* ── Credenciales del hero en tres escalones ──
   Título en negrita, especialidades en itálica con peso, y la modalidad
   al pie. Todo alineado a la izquierda, en el mismo eje que el texto y
   el botón. */
.hero-credenciales {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    width: fit-content;
    margin: 1.5rem 0 1.6rem;
}
.hero-cred-titulo {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-dark);
    letter-spacing: 0.01em;
    line-height: 1.5;
    margin: 0;
}
.hero-cred-linea {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-med);
    font-style: italic;
    color: var(--text-mid);
    line-height: 1.6;
    margin: 0;
}
.hero-cred-modalidad {
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose);
    text-align: left;
    margin: 0.5rem 0 0;
}

/* ══════════════════════════════════════════
   PROPUESTA DE VALOR
══════════════════════════════════════════ */
.propuesta-valor {
    padding: 5rem 0;
    background: var(--off-white);
    border-top: 1px solid var(--border);
}

.pv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
    margin-top: 2.2rem;
}

.pv-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: box-shadow 0.3s, transform 0.3s;
}
.pv-card:hover {
    box-shadow: 0 8px 32px rgba(153,39,47,0.09);
    transform: translateY(-4px);
}

.pv-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pv-icon.rose { background: rgba(153,39,47,0.08); }
.pv-icon.sage { background: rgba(107,128,65,0.12); }
.pv-icon img  { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

.pv-card h3 {
    font-family: var(--font-slab);
    font-size: 1.18rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dark);
    line-height: 1.3;
}

.pv-card p {
    font-size: 0.95rem;
    color: #252525;
    font-weight: 600;
    line-height: 1.75;
}

@media (max-width: 900px) {
    .pv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .pv-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   TRAYECTORIA / LOGOS
══════════════════════════════════════════ */
.trayectoria {
    padding: 3rem 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.tray-label {
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 2rem;
}

/* Carrusel infinito de logos — se desplaza solo por todo el ancho de pantalla */
.tray-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.tray-marquee-track {
    display: flex;
    width: max-content;
    animation: tray-scroll 30s linear infinite;
}

/* La separación entre logos va como gap + padding del grupo, no como gap de
   la cinta: así cada copia mide exactamente lo mismo —separación de salida
   incluida— y el -50% de la animación cae justo en el corte, sin saltos. */
.tray-marquee-group {
    display: flex;
    align-items: center;
    gap: clamp(1.6rem, 2.6vw, 3rem);
    padding-right: clamp(1.6rem, 2.6vw, 3rem);
}

.tray-marquee:hover .tray-marquee-track {
    animation-play-state: paused;
}

/* Los logos escalan con la pantalla, con piso y techo en rem: en el celular
   caen a ~3.1rem y en escritorio no pasan de 4.4rem. */
.tray-marquee-track img {
    height: clamp(3.1rem, 4.6vw, 4.4rem);
    width: auto;
    max-width: clamp(5.6rem, 12vw, 11.25rem);
    object-fit: contain;
    flex-shrink: 0;
    filter: grayscale(1) opacity(0.6);
    transition: filter 0.3s;
}
.tray-marquee-track img:hover {
    filter: grayscale(0) opacity(0.9);
}

@keyframes tray-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 600px) {
    .tray-marquee-track { animation-duration: 20s; }
}

@media (prefers-reduced-motion: reduce) {
    .tray-marquee-track { animation: none; }
}

/* ══════════════════════════════════════════
   MARCO EN L — despega las tarjetas del fondo
══════════════════════════════════════════ */
/* Una línea de peso que entra por un ángulo, recorre un lado entero y cierra
   un poco en el ángulo opuesto. Marca la tarjeta sin encerrarla en un
   recuadro completo, que competiría con el borde que ya tienen.
   Va en un ::before y no en el borde propio de la tarjeta porque un borde
   no se puede recorrer a medias. */
.pv-card,
.programa-featured,
.org-bloque,
.health-bloque {
    position: relative;
}
.pv-card::before,
.programa-featured::before,
.org-bloque::before,
.health-bloque::before {
    content: '';
    position: absolute;
    border: 2px solid var(--rose);
    /* Cuánto avanza la línea sobre los ángulos del lado corto. */
    --marco-vuelta: 2.75rem;
    pointer-events: none;
}

/* Misión profesional y Acortando Brechas: por el lado izquierdo. */
.pv-card::before,
.programa-featured::before {
    inset: 0 auto 0 0;
    width: var(--marco-vuelta);
    border-right: 0;
}
.pv-card::before        { border-radius: 12px 0 0 12px; }
.programa-featured::before { border-radius: 14px 0 0 14px; }

/* Transformación en las Organizaciones: espejado, por el lado derecho. */
.org-bloque::before {
    inset: 0 0 0 auto;
    width: var(--marco-vuelta);
    border-left: 0;
    border-radius: 0 14px 14px 0;
}

/* Health Coach: por abajo y en verde, el color con el que ya se identifica
   el bloque (tiene el borde superior en sage). */
.health-bloque::before {
    inset: auto 0 0 0;
    height: var(--marco-vuelta);
    border: 2px solid var(--sage);
    border-top: 0;
    border-radius: 0 0 14px 14px;
}

/* ══════════════════════════════════════════
   BOTTOM ROW — Acortando Brechas + Health Coach
══════════════════════════════════════════ */
/* Dos columnas arriba — Acortando Brechas a la izquierda, Transformación
   en las Organizaciones a la derecha — y Health Coach a todo el ancho
   abajo, como cierre. */
.bottom-row {
    margin-top: 3.5rem;
    display: grid;
    /* minmax(0,…) y no 1fr a secas: un track 1fr no baja del min-content de
       su tarjeta, así que en teléfonos angostos las tarjetas se salían de la
       columna. Con el mínimo en 0 la tarjeta acompaña el ancho disponible. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
/* Con los pilares plegados —el estado por defecto— la tarjeta izquierda se
   estira para que las dos terminen a la misma altura. Al desplegarlos deja
   de estirarse: la tarjeta de la derecha crece sola y Acortando Brechas se
   queda donde está, sin acompañar el movimiento. */
.bottom-row:not(:has(.org-pilares.open)) .programa-featured {
    align-self: stretch;
}
.health-bloque { grid-column: 1 / -1; }

/* ══════════════════════════════════════════
   PROGRAMA ACORTANDO BRECHAS — FEATURED
══════════════════════════════════════════ */
.programa-featured {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--white);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.programa-featured-img {
    display: block;
}

/* Cuerpo en dos columnas: a la izquierda de qué se trata, a la derecha
   los formatos y la acción. Mantiene la medida de línea en ~65 caracteres
   aunque la tarjeta ocupe todo el ancho. */
/* La tarjeta vive en media columna, así que el cuerpo va apilado: dos
   columnas acá dejarían la medida de línea en ~35 caracteres. */
.programa-featured-text {
    padding: 2.25rem 2rem;
    background: var(--white);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    /* Absorbe el alto sobrante cuando la tarjeta se estira. */
    flex: 1;
}
.programa-col {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}
.programa-col-acciones {
    gap: 1.1rem;
}
.programa-col-acciones .btn-rose {
    align-self: flex-start;
}

/* Mismo tratamiento que el label de "Propuesta y soluciones" en el bloque de
   organizaciones: misma familia, peso y espaciado, para que los encabezados
   de las dos tarjetas de la fila se lean como pares. Pisa la Cormorant que
   trae .label-small. */
.programa-featured-text .label-small {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rose);
    line-height: 1.3;
}

.programa-featured-text h3 {
    font-family: var(--font-slab);
    font-size: 2.4rem;
    font-weight: var(--fw-bold);
    color: var(--text-dark);
    line-height: 1.2;
    margin: 0;
}

.programa-tagline {
    font-family: var(--font-slab);
    font-size: 1.6rem;
    font-style: italic;
    color: var(--rose);
    font-weight: 700;
    /* Se pega al título: la columna usa gap de 0.9rem y entre "Acortando
       Brechas" y su bajada quedaba demasiado aire. */
    margin-top: -0.55rem;
}

.programa-featured-text > p:not(.label-small):not(.programa-tagline) {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.75;
}

.programa-opciones {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.4rem 0;
}

.programa-opcion {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    background: var(--off-white);
    border-radius: 8px;
    border-left: 3px solid var(--rose);
}
.programa-opcion strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-dark);
}
.programa-opcion span {
    font-size: 0.88rem;
    color: var(--text-dark);
    font-weight: 600;
}

/* Banda superior a todo el ancho. El cartel de la foto ocupa la franja
   central horizontal, así que recortar arriba y abajo no toca el texto —
   recortar a los costados sí lo cortaría. De ahí el ratio panorámico con
   object-position centrado. (Antes la caja tenía flex:1 1 0 y absorbía
   todo el alto sobrante de la fila, lo que ampliaba una franja mínima y
   dejaba la foto borrosa.) */
/* Proporción nativa del archivo: no se recorta nada, así se ve la curva
   completa del camino hasta el cartel. Antes era 16/5 (panorámica) y ese
   recorte se comía la ruta en primer plano, que es justamente el "cómo
   se llega" a la meta. */
.programa-featured-img {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1300 / 597;
    flex: 0 0 auto;
}
/* <picture> es inline por defecto: sin esto no llena la caja y el
   object-fit del <img> no tiene contra qué calcularse. */
.programa-featured-img picture {
    display: block;
    width: 100%;
    height: 100%;
}
.programa-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ══════════════════════════════════════════
   HEALTH COACH CARD
══════════════════════════════════════════ */
/* ── Bloque "Mi trabajo con organizaciones" ──
   Encabezado propio + bandas internas de dos columnas. */
.org-bloque {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.org-head {
    display: flex;
    /* Arriba y no centrado: con la bajada de tres líneas al lado, centrado
       dejaba el logo a la altura del párrafo en vez del título. */
    align-items: flex-start;
    gap: 1.25rem;
}
.org-head-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}
.org-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
/* La unidad ch mide el ancho del "0", más ancho que el caracter promedio:
   58ch aterriza en ~72 caracteres reales, dentro del rango legible. */
.org-head-text .hc-lead {
    max-width: 58ch;
}

/* La banda parte el bloque en contexto (izquierda) y detalle (derecha):
   dos medidas angostas en vez de una línea de ancho completo.
   Va con doble clase porque `.hc-block` (display:flex) se declara más
   abajo y con un solo `.org-banda` le ganaría por orden de aparición. */
.hc-block.org-banda {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 2rem;
    align-items: start;
    padding: 1.5rem 1.75rem;
}
.org-banda-side,
.org-banda-main {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

/* Banda apilada: intro arriba, los cuatro ejes en cajas y el CTA al pie.
   Doble clase por el mismo motivo que .org-banda (ver .hc-block). */
.hc-block.org-banda-full {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: 1.5rem 1.75rem;
}
.org-intro {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Tope de medida: la banda ocupa todo el ancho, el texto no. */
    max-width: 62ch;
}

/* Los cuatro ejes como cajas cortas: antes eran un punteo de párrafos
   largos donde ningún título destacaba. */
/* Una sola columna: el bloque ocupa media pantalla, en dos columnas cada
   caja quedaría en ~225px. */
.org-ejes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}
.org-eje {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.1rem 1rem 3.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.org-eje:hover {
    border-color: var(--rose);
    box-shadow: 0 4px 14px rgba(153,39,47,0.14);
}
.org-eje-num {
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    font-family: var(--font-slab);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--rose-light);
    line-height: 1;
}
.org-eje .org-eje-titulo {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--rose);
    line-height: 1.35;
    margin: 0;
}
.org-eje .org-eje-desc {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-body);
    color: var(--text-mid);
    line-height: 1.55;
    margin: 0;
}

/* ── Desplegable: los cuatro pilares estratégicos ──
   Mismo patrón que el acordeón de beneficios, pero con grid-template-rows
   en vez de max-height: el alto de las cuatro cajas cambia con el ancho
   y un tope fijo las recortaría en pantallas angostas. */
.org-pilares {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
}
.org-pilares-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: background 0.2s;
}
.org-pilares-head:hover { background: var(--rose-pale); }

.org-pilares-titulo {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--rose);
    line-height: 1.35;
}
.org-pilares-arrow {
    flex-shrink: 0;
    color: var(--rose);
    transition: transform 0.25s;
}
.org-pilares.open .org-pilares-arrow { transform: rotate(180deg); }

.org-pilares-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.22,1,0.36,1);
}
.org-pilares-body > * { overflow: hidden; }
.org-pilares.open .org-pilares-body { grid-template-rows: 1fr; }

.org-pilares .org-ejes {
    padding: 0.2rem 1.1rem 1rem;
}

.org-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    margin-top: 0.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(153,39,47,0.18);
}
/* Pisa el align-self:flex-start propio del botón */
.org-cta .hc-cta-btn {
    align-self: center;
}

.health-coach-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* ── Health Coach: cierre integral, centrado al pie de la sección ── */
.health-bloque {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 4px solid var(--sage);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    /* Márgenes ajustados: con 2.5rem el bloque quedaba muy extenso y el
       contenido nadaba adentro de la tarjeta. */
    padding: 1.9rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
.health-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    margin-bottom: 0.2rem;
}
.health-titulo {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sage-dark);
    line-height: 1.3;
    margin: 0;
}
.health-sub {
    font-size: var(--fs-xs);
    font-weight: var(--fw-med);
    font-style: italic;
    color: var(--text-mid);
    line-height: 1.5;
    margin: 0;
}
/* Un respiro entre el título y la primera bajada, que ahora son dos líneas */
.health-titulo + .health-sub { margin-top: 0.15rem; }
/* El encabezado (ícono, título y las dos bajadas) queda centrado a todo el
   ancho; recién debajo se abren las dos columnas. Así la foto suma sin
   correr de lugar el título, que ya estaba aprobado centrado. */
.health-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
}
/* Texto a la izquierda + foto a la derecha. La columna de la foto es más
   angosta: el peso lo sigue llevando el texto, la imagen acompaña. */
.health-body {
    width: 100%;
    margin-top: 1.1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
    gap: 1.8rem;
    align-items: center;
}
/* El cuerpo se alinea a la izquierda, que es como se lee cómodo un párrafo
   largo. Tope de medida para que no pase de ~68 caracteres por línea. */
.health-texto {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 68ch;
    text-align: left;
}
.health-foto {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    /* La franja verde repite el borde superior de la tarjeta: ata la foto
       al bloque en vez de dejarla flotando como un recorte pegado. */
    border-bottom: 4px solid var(--sage);
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.health-foto img {
    display: block;
    width: 100%;
    /* height: auto es imprescindible: los atributos width/height del <img>
       imponen un alto fijo que le gana a aspect-ratio (solo actúa cuando
       una de las dos medidas es automática). Sin esto la foto salía de
       408x747 en vez de respetar la proporción. */
    height: auto;
    /* Proporción fija + cover: la foto no se deforma ni se recorta de más,
       pase lo que pase con la altura del texto de al lado. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}
.health-texto p {
    font-size: var(--fs-sm);
    font-weight: var(--fw-body);
    color: var(--text-dark);
    line-height: 1.75;
    margin: 0;
}

.hc-title {
    font-family: var(--font-slab);
    font-size: 1.95rem;
    font-weight: var(--fw-bold);
    color: var(--text-dark);
    line-height: 1.2;
    margin: 0;
}
.hc-lead {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.75;
    margin: 0;
}
/* Vino = bloque de Transformación Organizacional (institucional). */
.hc-block {
    padding: 1rem 1.25rem;
    background: var(--off-white);
    border-radius: 8px;
    border-left: 3px solid var(--rose);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
/* Verde = bloque de Health Coach (bienestar). */
.hc-block-health {
    border-left-color: var(--sage);
}
/* El título tiene que ganarle al cuerpo. Ojo con el selector: los labels
   son <p> dentro de .hc-block, así que `.hc-block p` (0,1,1) le ganaba a
   `.hc-block-label` (0,1,0) y le imponía el tamaño y el peso del cuerpo —
   por eso el encabezado se veía igual que el texto que encabeza. */
.hc-block .hc-block-label {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rose);
    line-height: 1.3;
    margin: 0 0 0.15rem;
}
.hc-block.hc-block-health .hc-block-label {
    color: var(--sage-dark);
}
.hc-block p {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.7;
    margin: 0;
}

/* Bajada del bloque: aclara a quién se dirige, sin competir con el label.
   Misma especificidad que .hc-block-label por el mismo motivo. */
.hc-block .hc-block-sub {
    font-size: var(--fs-xs);
    font-weight: var(--fw-med);
    color: var(--text-mid);
    font-style: italic;
    margin-top: -0.15rem;
}

.hc-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.25rem 0 0;
    padding: 0;
}
.hc-list li {
    font-size: var(--fs-sm);
    color: var(--text-dark);
    font-weight: var(--fw-body);
    line-height: 1.65;
    padding-left: 1rem;
    position: relative;
}
.hc-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sage);
}
.hc-list li strong { font-weight: var(--fw-bold); }

.hc-block .hc-cta-pregunta {
    font-family: var(--font-slab);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--rose);
    line-height: 1.3;
    margin-top: 0.9rem;
}
.hc-cta-btn {
    align-self: flex-start;
    margin-top: 0.6rem;
}

@media (max-width: 900px) {
    /* Acortando Brechas y Transformación Organizacional se apilan; Health
       Coach ya ocupaba el ancho completo. */
    .bottom-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .health-bloque {
        padding: 2rem 1.5rem;
    }
    /* Se apilan: primero el texto, la foto cierra el bloque. */
    .health-body {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .programa-featured-text {
        gap: 1.5rem;
        padding: 2rem 1.5rem;
    }
    .programa-featured-img {
        /* En el celular la proporción nativa deja una franja muy baja y la
           foto pierde presencia. Se sube a 16/10 recortando a los costados;
           el cartel va del 15.9% al 74.8% del ancho, y con el encuadre
           corrido al 40% queda entero con margen a ambos lados. */
        aspect-ratio: 16 / 10;
    }
    .programa-featured-img img {
        object-position: 40% center;
    }
    .org-bloque { padding: 2rem 1.5rem; }
    .hc-block.org-banda {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.25rem 1.25rem;
    }
    .hc-block.org-banda-full { padding: 1.25rem; gap: 1.1rem; }
    .org-ejes { grid-template-columns: 1fr; }
    .org-pilares .org-ejes { padding: 0.2rem 0.9rem 0.9rem; }
    /* En celular la bajada pasa a su propia fila, a todo el ancho, para que
       arranque en la misma vertical que el bloque de abajo en vez de quedar
       indentada bajo el título. display:contents sube el título y la bajada
       a la grilla del padre, así se pueden ubicar por separado sin tocar
       el HTML. */
    .org-head {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1rem;
        row-gap: 0.5rem;
        align-items: center;
    }
    .org-head-text { display: contents; }
    .org-head-icon {
        width: 60px;
        height: 60px;
        grid-column: 1;
        grid-row: 1;
    }
    .org-head .hc-title { grid-column: 2; grid-row: 1; }
    .org-head-text .hc-lead {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        /* Arranca en la misma vertical que el texto de la tarjeta de abajo.
           Ese texto queda corrido por el borde (3px) y el padding (1.25rem)
           de .hc-block.org-banda: se repite acá la misma cuenta para que si
           alguno cambia, se vea que hay que tocar los dos. */
        padding-left: calc(1.25rem + 3px);
    }
}

/* ══════════════════════════════════════════
   TESTIMONIOS — ACCORDION
══════════════════════════════════════════ */
.testi-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 2rem;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.testi-accordion {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
    transition: box-shadow 0.2s;
}
.testi-accordion.open {
    box-shadow: 0 4px 20px rgba(153,39,47,0.08);
}

.testi-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.1rem 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: background 0.2s;
}
.testi-acc-head:hover {
    background: var(--off-white);
}

.testi-acc-name {
    font-family: var(--font-slab);
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--rose);
}

.testi-acc-org {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--rose);
    background: rgba(153,39,47,0.08);
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    white-space: nowrap;
}

.testi-acc-arrow {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-light);
    transition: transform 0.25s;
}
.testi-accordion.open .testi-acc-arrow {
    transform: rotate(180deg);
}

.testi-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22,1,0.36,1);
}
.testi-accordion.open .testi-acc-body {
    max-height: 300px;
}

.testi-acc-body p {
    padding: 0.2rem 1.4rem 1.4rem;
    font-family: var(--font-slab);
    font-size: 1.18rem;
    font-style: italic;
    color: var(--sage);
    font-weight: 700;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .testi-acc-head { padding: 0.9rem 1rem; gap: 0.5rem; }
    .testi-acc-name { font-size: 0.95rem; }
    .testi-acc-body p { padding: 0.1rem 1rem 1.1rem; font-size: 0.95rem; }
}

/* ══════════════════════════════════════════
   REFERENCIAS — CARDS GRID
══════════════════════════════════════════ */
.ref-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 2rem;
}

.ref-card {
    background: var(--white);
    flex: 0 1 calc((100% - 2.8rem) / 3);
    border: 1px solid var(--border);
    border-top: 3px solid var(--rose);
    border-radius: 12px;
    padding: 1.6rem 1.4rem 1.3rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s, transform 0.3s;
}
.ref-card:hover {
    box-shadow: 0 8px 28px rgba(153,39,47,0.08);
    transform: translateY(-3px);
}

/* 1. Encabezado — nombre + cargo + empresa, siempre visible */
.ref-head {
    margin-bottom: 0.7rem;
}

.ref-name {
    font-family: var(--font-slab);
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--rose);
    line-height: 1.2;
}

.ref-cargo {
    font-size: var(--fs-xs);
    color: var(--text-mid);
    font-weight: var(--fw-med);
    line-height: 1.4;
    margin-top: 0.15rem;
}

.ref-org {
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rose-text);
    background: var(--rose-pale);
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    margin-top: 0.5rem;
}

/* 2. Cuerpo — frase destacada, siempre visible y en negrita */
.ref-quote {
    font-family: var(--font-slab);
    font-size: var(--fs-md);
    font-style: italic;
    color: var(--text-dark);
    font-weight: 800;
    line-height: 1.55;
    flex: 1;
}

/* 3. Interacción — acordeón que despliega el texto completo */
.ref-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: var(--rose);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-med);
    cursor: pointer;
    /* Con padding 0 el botón medía 15px de alto: imposible de acertar con el
       dedo. El margen se compensa para no mover el diseño. */
    padding: 0.72rem 0;
    margin-top: 0.3rem;
    transition: opacity 0.2s;
}
.ref-toggle:hover { opacity: 0.72; }
.ref-toggle-arrow { transition: transform 0.25s; flex-shrink: 0; }
.ref-toggle[aria-expanded="true"] .ref-toggle-arrow { transform: rotate(180deg); }
.ref-toggle[aria-expanded="true"] .ref-toggle-label::after { content: ' (ocultar)'; }

.ref-full {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1);
}
/* Máximo generoso y fijo (no calculado por JS): el testimonio más largo
   del sitio ronda los 550px de alto, este valor deja margen de sobra. */
.ref-card.open .ref-full {
    max-height: 700px;
}
.ref-full-inner {
    padding-top: 0.9rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--border);
}
.ref-full-inner p {
    font-size: var(--fs-sm);
    color: var(--text-mid);
    font-weight: var(--fw-body);
    line-height: 1.75;
}

@media (max-width: 900px) { .ref-card { flex-basis: calc((100% - 1.4rem) / 2); } }
@media (max-width: 600px) { .ref-card { flex-basis: 100%; } }
@media (max-width: 600px) { .ref-card { flex-basis: 100%; } }

/* ══════════════════════════════════════════
   CTA BANNER — PERSONA BLOCK
══════════════════════════════════════════ */
.cta-persona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0;
    flex-shrink: 0;
}

.cta-logo-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(255,255,255,0.18);
    padding: 4px;
}

/* Doble anillo: el marco blanco separa la foto del fondo y el trazo vino
   la ata a la paleta sin pintar un borde grueso sobre el rostro. */
.cta-persona-frame {
    display: block;
    padding: 6px;
    border-radius: 50%;
    background: var(--white);
    box-shadow:
        0 0 0 1.5px rgba(153,39,47,0.35),
        0 14px 32px rgba(111,0,8,0.16);
}

.cta-graciela-img {
    width: 182px;
    height: 182px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: none;
    box-shadow: none;
}

.cta-persona-caption {
    text-align: center;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(153,39,47,0.22);
    width: 100%;
    max-width: 215px;
}

.cta-persona-name {
    font-family: var(--font-slab);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--rose);
    line-height: 1.15;
    margin: 0 0 0.3rem;
}

/* El rol baja a label: en Montserrat chico y espaciado no compite con el
   nombre ni con el botón, que es la acción real de la tarjeta. */
.cta-persona-role {
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    color: var(--text-mid);
    font-weight: var(--fw-med);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 900px) {
    .cta-banner { padding: 2.5rem 2rem; }
    .cta-container { gap: 2.25rem; }
    .cta-text h2 { font-size: var(--fs-3xl); }
    .cta-graciela-img { width: 158px; height: 158px; }
    .cta-logo-img { width: 38px; height: 38px; }
}

@media (max-width: 768px) {
    .cta-banner {
        padding: 2.25rem 1.5rem;
        border-left-width: 1px;
        border-top: 4px solid var(--rose);
    }
    .cta-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        justify-items: center;
    }
    /* En una sola columna el retrato va primero: entra a la tarjeta por la
       cara y después lee el mensaje. */
    .cta-persona { order: -1; margin-top: 0; }
    .cta-text { text-align: center; }
    .cta-text h2 { font-size: var(--fs-2xl); }
    .cta-text .divider-left { margin: 0.4rem auto 0.9rem; }
    .cta-lead { font-size: var(--fs-base); max-width: 34ch; margin: 0 auto; }
    .cta-sub { max-width: 38ch; margin-left: auto; margin-right: auto; }
    .cta-btn { margin-top: 1.3rem; }
}

/* ══════════════════════════════════════════
   IMÁGENES CIRCULARES DE SECCIÓN
══════════════════════════════════════════ */
.section-round-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 1rem;
    border: 2px solid var(--border);
}

.taller-card .section-round-img {
    width: 68px;
    height: 68px;
    margin: 0 0 0.7rem;
}

.hc-img-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.hc-img-row img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.hc-img-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.contacto-img-round {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.2rem;
    border: 2px solid var(--border);
    display: block;
}

@media (max-width: 768px) {
    .contacto-img-round { width: 70px; height: 70px; margin-bottom: 0.8rem; }
    .hc-img-row img { width: 56px; height: 56px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn-rose { width: 100%; text-align: center; }
}

/* Reduced motion — desactiva todas las animaciones */
@media (prefers-reduced-motion: reduce) {
    .navbar,
    .hero-title, .divider-hero, .hero-subtitle,
    .hero-text .btn-rose, .hero-right, .hero-asset-left {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── Mobile nav overlay ── */
.mobile-nav {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background: var(--white);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity 0.28s cubic-bezier(0.22,1,0.36,1),
                transform 0.28s cubic-bezier(0.22,1,0.36,1),
                visibility 0s linear 0.28s;
}
.mobile-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.28s cubic-bezier(0.22,1,0.36,1),
                transform 0.28s cubic-bezier(0.22,1,0.36,1);
}

/* Hamburger → X al abrir el menú */
.hamburger span { transform-origin: center; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-close {
    position: absolute;
    top: 1.2rem; right: 1.4rem;
    background: none;
    border: none;
    font-size: 1.95rem;
    line-height: 1;
    color: var(--text-mid);
    cursor: pointer;
    padding: 4px 8px;
}
.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
}
.mobile-nav-links a {
    font-size: 1.38rem;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.2s;
}
.mobile-nav-links a:hover { color: var(--rose); }
.mobile-nav-cta { margin-top: 0.5rem; }

/* ── EYEBROW SECCIÓN TESTIMONIOS ── */
.seccion-eyebrow {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 0.5rem;
}

/* ── TÍTULOS ROJOS (El Arte de Expresar) ── */
.modalidad-titulo {
    color: var(--rose-text);
    font-weight: 800;
}

/* ── TALLER CARD — nuevos elementos ── */
.taller-modalidades-titulo {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rose-text);
    margin: 1.4rem 0 0.75rem;
}

.taller-card p.taller-modalidades-titulo {
    color: var(--rose-text);
    font-weight: 800;
}

.taller-modalidad {
    margin-bottom: 1.1rem;
}
.taller-modalidad p {
    font-size: var(--fs-sm);
    line-height: 1.65;
}

.taller-subtag {
    font-style: italic;
    color: var(--rose-text);
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.taller-card p.taller-subtag {
    color: var(--rose-text);
    font-weight: 800;
}

/* Puente conceptual entre la frase corta y el resumen del encuentro: va en
   itálica y con peso de cuerpo para que no compita con ninguna de las dos. */
.taller-concepto {
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.taller-cierre {
    font-style: italic;
    font-size: 1.05rem;
    color: #303030;
    font-weight: 700;
    margin: 1.2rem 0 1.4rem;
    border-left: 3px solid var(--rose-text);
    padding-left: 0.9rem;
}

.taller-card p.taller-cierre {
    color: #303030;
    font-weight: 700;
}

.modal-success-msg {
    text-align: center;
    color: var(--rose);
    font-weight: 600;
    padding: 1rem 0 0.5rem;
    font-size: 0.95rem;
}

/* ── ACORDEÓN BENEFICIOS (El Trazo Emocional) ── */
.beneficios-title {
    margin: 1.25rem 0 0.45rem;
    font-family: var(--font-body);
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--rose-text);
}

.beneficio-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0.5rem 0 1rem;
}

.beneficio-accordion {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
}

.beneficio-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: background 0.2s;
}
.beneficio-acc-head:hover { background: var(--rose-pale); }

.beneficio-acc-titulo {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.45;
    color: var(--text-dark);
}

.beneficio-acc-titulo strong {
    color: var(--rose-text);
    font-weight: 800;
}

.beneficio-acc-arrow {
    flex-shrink: 0;
    color: var(--rose);
    transition: transform 0.25s;
}

.beneficio-accordion.open .beneficio-acc-arrow {
    transform: rotate(180deg);
}

.beneficio-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.22,1,0.36,1);
}
.beneficio-accordion.open .beneficio-acc-body {
    max-height: 200px;
}

.beneficio-acc-body p {
    padding: 0.1rem 1rem 0.9rem;
    font-size: 0.88rem;
    color: var(--text-mid);
    line-height: 1.6;
}

@media (max-width: 600px) {
    .beneficios-title { font-size: 1.05rem; }
    .beneficio-acc-head { padding: 0.8rem 0.85rem; }
    .beneficio-acc-titulo { font-size: 0.95rem; }
    .beneficio-acc-body p { padding: 0.05rem 0.85rem 0.8rem; }
}

/* Contenido ampliado de El Arte de Expresar */
.arte-more-btn {
    width: 100%;
    margin: 0.35rem 0 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
}

.arte-more-btn svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.arte-more-btn.open svg {
    transform: rotate(180deg);
}

.arte-expresar-extra {
    margin-bottom: 0.35rem;
}

/* ══════════════════════════════════════════
   FORMULARIO MENTORÍAS 1:1
   Enmarcado y botón en bordó, según la referencia que pasó Graciela.
   Todo va dentro de .form-mentoria-wrap para no tocar el resto de los
   formularios del sitio, que siguen con su estilo.
══════════════════════════════════════════ */
.mentoria-titulo {
    font-family: var(--font-slab);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
    line-height: 1.15;
    margin: 0;
}
.mentoria-destacado {
    font-family: var(--font-slab);
    font-size: 1.25rem;
    font-weight: 700;
    font-style: italic;
    color: var(--rose);
    text-align: center;
    margin: 0.35rem 0 0;
}
.mentoria-bienvenida {
    font-family: var(--font-slab);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-mid);
    text-align: center;
    margin: 0.5rem 0 0;
}
.mentoria-instruccion {
    font-size: var(--fs-xs);
    color: var(--text-mid);
    text-align: center;
    margin: 0.2rem 0 1.4rem;
}

/* Campos: cápsula con marco bordó, como en el modelo. El placeholder hace
   de etiqueta, así que va en bordó y con peso, no en gris claro. */
.form-mentoria input[type="text"],
.form-mentoria input[type="email"],
.form-mentoria input[type="tel"],
.form-mentoria textarea {
    width: 100%;
    border: 2px solid var(--rose);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-dark);
    background: var(--white);
}
.form-mentoria textarea { border-radius: 12px; resize: vertical; }
.form-mentoria input::placeholder,
.form-mentoria textarea::placeholder {
    color: var(--rose);
    font-weight: 600;
    opacity: 1;
}
.form-mentoria input:focus,
.form-mentoria textarea:focus {
    outline: none;
    border-color: var(--rose-deep);
    box-shadow: 0 0 0 3px rgba(153,39,47,0.14);
}
/* El campo trampa anti-bots no debe heredar el marco */
.form-mentoria .hp-field { border: none !important; padding: 0 !important; }

.mentoria-detalle,
.form-detalle {
    border: 2px solid var(--rose);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    background: rgba(153,39,47,0.04);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.mentoria-detalle p,
.form-detalle p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-dark);
}
.mentoria-detalle strong,
.form-detalle strong { color: var(--rose); font-weight: 700; }
.mentoria-detalle span,
.form-detalle span { color: var(--text-mid); }

.form-mentoria .btn-rose.full {
    font-size: 1rem;
    padding: 1rem 1.4rem;
    border-radius: 12px;
}

/* Frase al lado del botón del hero */
.hero-actions-nota {
    font-family: var(--font-slab);
    font-style: italic;
    /* Más grande y en negrita: es la frase que sostiene al botón principal
       y con el peso de antes se perdía debajo de él. */
    font-size: 1.18rem;
    font-weight: var(--fw-bold);
    color: var(--rose-deep);
    /* En escritorio va en una línea al lado del botón; en pantalla angosta
       se deja envolver, porque con nowrap se sale en teléfonos de 320px. */
    white-space: nowrap;
}
@media (max-width: 900px) {
    .hero-actions-nota { white-space: normal; }
}

/* ── Health Coach: propuesta ejecutiva y llamado a la acción ──
   Cierra el bloque. Se separa con una línea en verde, que es el color con
   el que Graciela identificó a Health Coach; el botón queda en bordó, como
   todas las acciones del sitio. */
.health-cta {
    width: 100%;
    margin-top: 1.4rem;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(107,128,65,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
.health-cta-titulo {
    font-family: var(--font-slab);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rose);
    line-height: 1.2;
    margin: 0;
}
.health-cta-texto {
    max-width: 62ch;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
}
.health-cta-nota {
    font-family: var(--font-slab);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--rose);
    margin: 0;
}
.health-cta .btn-rose {
    margin-top: 0.5rem;
}

/* Asterisco de campo obligatorio en los rótulos de formulario */
.form-label-req {
    color: var(--rose);
    font-weight: 700;
}

/* ══════════════════════════════════════════
   PISO DE 16px EN LOS CAMPOS — iOS
══════════════════════════════════════════ */
/* Safari en iPhone hace zoom automático al enfocar un campo que mide menos
   de 16px y deja la página corrida. Los campos del sitio estaban en 14px, así
   que pasaba en todos los formularios. 1rem son los 16px justos del umbral.
   Va al final del archivo a propósito: las reglas de cada formulario tienen la
   misma especificidad, así que lo que decide es el orden. */
@media (max-width: 900px) {
    .contacto-form input,
    .contacto-form textarea,
    .contacto-form select,
    .form-mentoria input,
    .form-mentoria textarea,
    /* Con el atributo: los campos de Mentorías se declaran como
       input[type="text"] y esa forma le gana a un `input` pelado. */
    .form-mentoria input[type] {
        font-size: 1rem;
    }
}

/* ══════════════════════════════════════════
   PASO SIGUIENTE — puente hacia WhatsApp
══════════════════════════════════════════ */
/* Reemplaza al formulario dentro del mismo modal. No es un cartel de "gracias":
   deja a mano el botón de WhatsApp por si la ventana no llegó a abrirse, y
   avisa que el día y el horario se acuerdan ahí. */
.paso-agenda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0;
}
.paso-agenda-titulo {
    font-family: var(--font-slab);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--rose);
    margin: 0;
}
.paso-agenda-texto {
    color: var(--text-dark);
    font-weight: var(--fw-med);
    margin: 0;
}
.paso-agenda .btn-rose {
    margin-top: 0.35rem;
}
.paso-agenda-nota {
    font-size: var(--fs-2xs);
    color: var(--text-mid);
    font-weight: var(--fw-body);
    line-height: 1.6;
    max-width: 44ch;
    margin: 0;
}
.paso-agenda-alt {
    font-size: var(--fs-xs);
    font-weight: var(--fw-med);
    color: var(--rose);
    text-decoration: underline;
    text-underline-offset: 3px;
    /* Alcanzable con el dedo sin agrandar el bloque. */
    padding: 0.55rem 0;
}
.paso-agenda-alt:hover { opacity: 0.75; }

/* Nota de valor: siempre debajo del botón y con asterisco. Reemplaza a los
   precios que estaban a la vista en Entrevista Previa y Mentoría — el embudo
   centraliza todo en la entrevista, y el valor se conversa ahí. */
.nota-valor {
    text-align: center;
    font-size: var(--fs-2xs);
    font-style: italic;
    font-weight: var(--fw-med);
    color: var(--text-mid);
    margin-top: 0.7rem;
}

/* ══════════════════════════════════════════
   BONIFICACIÓN — aclaraciones por propuesta
══════════════════════════════════════════ */
/* Cada propuesta tiene su propia regla de bonificación, así que la
   aclaración vive en cada bloque y no en un texto único. */
.health-cta-bonus,
.programa-bonus {
    font-size: var(--fs-2xs);
    color: var(--sage-dark);
    font-weight: var(--fw-med);
    line-height: 1.6;
    margin: 0;
}
.health-cta-bonus { max-width: 62ch; }
.modal-bonus-centrado { text-align: center; }

/* "¿Qué te llevás?" de Coaching: pasa de párrafo corrido a lista, que es
   como lo redactó Graciela. Conserva la caja verde de .modal-qte. */
.modal-qte-titulo {
    font-weight: var(--fw-bold);
    margin: 0 0 0.35rem;
}
.modal-qte-lista {
    /* El reset del sitio le saca los bullets a todas las listas. */
    list-style: disc;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.modal-opcional {
    font-size: var(--fs-2xs);
    color: var(--text-mid);
    font-weight: var(--fw-med);
    line-height: 1.6;
    margin-bottom: 0.6rem;
}