/* Provida: clínica en rosa y morado, títulos con serifa. Colores: --pv-titulo (morado), --pv-rosa y --pv-suave (vars.php). */
:root { --pv-titulo: #22106E; --pv-rosa: #E6287C; --pv-suave: #FEF1F7; --pv-t: 34 16 110; --pv-r: 230 40 124; }

.tema-provida .font-heading,
.tema-provida h1, .tema-provida h2 { font-weight: 400; letter-spacing: -0.01em; }

.pv-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; line-height: 1.6; }
.pv-h2 { font-family: var(--font-heading); color: var(--pv-titulo); font-size: 1.9rem; line-height: 1.12; }
@media (min-width: 640px) { .pv-h2 { font-size: 2.5rem; } .pv-eyebrow { font-size: 12.5px; } }

/* Botones: rosa sólido y con borde; la flecha se mueve al pasar el mouse. */
.pv-btn, .pv-btn-borde {
    display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
    padding: .9rem 1.6rem; border-radius: .5rem; font-size: 15px; font-weight: 600; line-height: 1.2;
    transition: filter .2s, transform .2s, background-color .2s, box-shadow .2s;
}
.pv-btn { background: var(--pv-rosa); color: #fff; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--pv-rosa) 60%, transparent); }
.pv-btn:hover { filter: brightness(.94); transform: translateY(-1px); }
.pv-btn-borde { background: #fff; color: var(--pv-titulo); border: 1.5px solid color-mix(in srgb, var(--pv-rosa) 70%, transparent); padding: calc(.9rem - 1.5px) calc(1.6rem - 1.5px); }
.pv-btn-borde:hover { background: var(--pv-suave); border-color: var(--pv-rosa); }
.pv-flecha { transition: transform .2s; }
.pv-btn:hover .pv-flecha, .pv-btn-borde:hover .pv-flecha, .pv-enlace:hover .pv-flecha, .group:hover .pv-flecha { transform: translateX(3px); }
.pv-enlace { display: inline-flex; align-items: center; gap: .4rem; font-size: 14px; font-weight: 600; color: var(--pv-rosa); }
.pv-enlace:hover { filter: brightness(.9); }
.pv-enlace.pv-oscuro { color: var(--pv-titulo); }
.pv-enlace.pv-oscuro .pv-flecha { color: var(--pv-rosa); }

/* Menú: subrayado rosa bajo la página actual (y al pasar el mouse). */
.pv-nav { position: relative; color: var(--pv-titulo); transition: color .2s; }
.pv-nav::after { content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .05rem; height: 2px; border-radius: 2px; background: var(--pv-rosa); transform: scaleX(0); transition: transform .25s; }
.pv-nav:hover::after, .pv-nav-on::after { transform: scaleX(1); }
.pv-nav-on { font-weight: 700; }

/* Columnas separadas por líneas finas (especialidades, áreas de enfoque). */
@media (min-width: 1024px) {
    .pv-col + .pv-col { border-left: 1px solid rgb(var(--fg) / .1); }
    .pv-col-izq + .pv-col-izq { border-left: 1px solid rgb(var(--fg) / .1); padding-left: 1.75rem; }
}

/* Portada y cabecera de especialidad: foto a la derecha que se funde con el fondo; en celular, arriba. */
.pv-hero-foto { display: block; height: 290px; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
@media (min-width: 640px) { .pv-hero-foto { height: 380px; } }
@media (min-width: 1024px) {
    .pv-hero { min-height: var(--pv-alto, 540px); }
    .pv-hero-foto { position: absolute; top: 0; right: 0; bottom: 0; height: auto; width: 58%; -webkit-mask-image: linear-gradient(to right, transparent, #000 26%); mask-image: linear-gradient(to right, transparent, #000 26%); }
}

/* Slider: fundido entre diapositivas, la foto se acerca despacio y el texto sube escalonado. */
.pv-diapo { transition: opacity .8s ease, visibility .8s; }
.pv-zoom { transform: scale(1.06); transition: transform 7s ease-out; }
.pv-on .pv-zoom { transform: scale(1); }
.pv-on .pv-texto > * { animation: pv-sube .8s cubic-bezier(.2, .7, .2, 1) both; }
.pv-on .pv-texto > :nth-child(2) { animation-delay: .1s; }
.pv-on .pv-texto > :nth-child(3) { animation-delay: .2s; }
.pv-on .pv-texto > :nth-child(4) { animation-delay: .3s; }
@keyframes pv-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .pv-diapo, .pv-zoom { transition: none; }
    .pv-zoom { transform: none; }
    .pv-on .pv-texto > * { animation: none; }
}

/* Franja con foto: la foto se funde hacia el texto. */
.pv-cta-foto { height: 220px; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
@media (min-width: 1024px) {
    .pv-cta-foto { position: absolute; top: 0; bottom: 0; left: 0; height: auto; width: 46%; -webkit-mask-image: linear-gradient(to right, #000 62%, transparent); mask-image: linear-gradient(to right, #000 62%, transparent); }
    .pv-cta-foto.pv-cta-der { left: auto; right: 0; -webkit-mask-image: linear-gradient(to left, #000 62%, transparent); mask-image: linear-gradient(to left, #000 62%, transparent); }
    .pv-cta-ficha-foto { -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
}

/* Carruseles (testimonios, equipo): se deslizan con el dedo; 1 / 2 / 3 (o 4) por vista. */
.pv-pista { scrollbar-width: none; scroll-behavior: smooth; }
.pv-pista::-webkit-scrollbar { display: none; }
.pv-tarjeta { width: 86%; }
.pv-tarjeta > * { width: 100%; }
@media (min-width: 640px) { .pv-tarjeta { width: calc((100% - 1.25rem) / 2); } }
@media (min-width: 1024px) {
    .pv-tarjeta { width: calc((100% - 2.5rem) / 3); }
    .pv-pista-4 .pv-tarjeta { width: calc((100% - 3.75rem) / 4); }
}

/* Ficha del profesional: pestañas y línea de tiempo. */
.pv-tab { color: rgb(var(--fg) / .7); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.pv-tab:hover { color: var(--pv-titulo); }
.pv-tab-on { color: var(--pv-rosa); border-bottom-color: var(--pv-rosa); }
.pv-ancla { scroll-margin-top: 150px; }
@media (min-width: 1024px) { .pv-ancla { scroll-margin-top: 170px; } }
.pv-linea { position: relative; }
.pv-linea::before { content: ''; position: absolute; left: 4.5px; top: .6rem; bottom: .6rem; width: 2px; background: color-mix(in srgb, var(--pv-rosa) 45%, transparent); }

/* Filtro por especialidad. */
.pv-chip { flex-shrink: 0; border: 1px solid rgb(var(--fg) / .12); border-radius: 999px; padding: .5rem 1rem; font-size: 13px; font-weight: 500; color: var(--pv-titulo); white-space: nowrap; transition: background-color .2s, border-color .2s; }
.pv-chip:hover { border-color: var(--pv-rosa); }
.pv-chip-on { background: var(--pv-rosa); border-color: var(--pv-rosa); color: #fff; }

/* Cabecera fija: la sección que la envuelve es la que se pega arriba (si no, el sticky no tiene recorrido). */
.oc-header:has(> header.sticky) { position: sticky; top: 0; z-index: 40; }

/* Ventana de citas: oculta hasta que se abre (el atributo hidden gana a la clase flex). */
[data-pv-cita][hidden] { display: none; }