/* ==========================================================================
   Unidad Médica Quirúrgica Zamiled — capa de diseño
   Va DESPUÉS de Bootstrap. No sustituye al framework: lo viste.
   ========================================================================== */

:root {
    --z-azul: #2c5282;
    --z-azul-osc: #1e3a5f;
    --z-azul-cla: #3182ce;
    --z-turquesa: #17a2a8;
    --z-turquesa-cla: #2bc0c7;
    --z-tinta: #14203a;
    --z-gris: #6b7a90;
    --z-hueso: #f5f8fc;
    --z-sombra: 0 .5rem 1.5rem rgba(20, 32, 58, .08);
    --z-sombra-alta: 0 1rem 2.5rem rgba(20, 32, 58, .16);
    --z-radio: 1rem;
}

body {
    color: var(--z-tinta);
}

/* Clases heredadas del sitio anterior. Viven aquí para que TODAS las páginas
   las tengan sin depender del <style> suelto que cada una traía. */
.section-padding {
    padding: 80px 0;
}

.hero-section {
    background: linear-gradient(135deg, var(--z-azul) 0%, var(--z-azul-cla) 100%);
}

.card-hover {
    transition: transform .3s ease, box-shadow .3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--z-sombra-alta);
}

.text-primary-custom {
    color: var(--z-azul) !important;
}

.bg-primary-custom {
    background-color: var(--z-azul) !important;
}

.btn-primary-custom {
    background-color: var(--z-azul);
    border-color: var(--z-azul);
    color: #fff;
}

.btn-primary-custom:hover {
    background-color: var(--z-azul-osc);
    border-color: var(--z-azul-osc);
    color: #fff;
}

/* ---------- Tipografía de sección ------------------------------------- */
.z-titulo {
    position: relative;
    display: inline-block;
    padding-bottom: .75rem;
}

.z-titulo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--z-azul) 0%, var(--z-turquesa) 100%);
}

.z-titulo.text-start::after {
    left: 0;
    transform: none;
}

.z-eyebrow {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--z-turquesa);
    margin-bottom: .5rem;
}

/* ---------- Cintillo superior ----------------------------------------- */
.z-cintillo {
    background: linear-gradient(90deg, var(--z-azul-osc) 0%, var(--z-azul) 55%, var(--z-turquesa) 100%);
    color: #fff;
    font-size: .875rem;
}

.z-cintillo a {
    color: #fff;
    text-decoration: none;
    opacity: .92;
    transition: opacity .2s ease, transform .2s ease;
    display: inline-flex;
    align-items: center;
}

.z-cintillo a:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.z-cintillo .z-sep {
    opacity: .35;
    margin: 0 .35rem;
}

/* el WhatsApp del cintillo late despacito para que se note sin molestar */
.z-wa {
    background: #25d366;
    border-radius: 50rem;
    padding: .18rem .8rem;
    font-weight: 600;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .65);
    animation: z-latido 2.6s infinite;
}

@keyframes z-latido {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); }
    70% { box-shadow: 0 0 0 .6rem rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---------- Navbar ----------------------------------------------------- */
.z-nav {
    background: #fff;
    transition: box-shadow .25s ease, padding .25s ease;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.z-nav.z-nav-scroll {
    box-shadow: 0 .35rem 1.25rem rgba(20, 32, 58, .12);
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.z-nav .navbar-brand img {
    transition: transform .25s ease;
}

.z-nav .navbar-brand:hover img {
    transform: scale(1.04);
}

/* los items del menú se ven y se sienten como botones */
.z-nav .nav-link {
    position: relative;
    margin: 0 .15rem;
    padding: .5rem 1rem !important;
    border-radius: 50rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--z-azul) !important;
    border: 1px solid transparent;
    transition: all .25s ease;
}

.z-nav .nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50rem;
    background: linear-gradient(135deg, var(--z-azul) 0%, var(--z-turquesa) 100%);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .25s ease, transform .25s ease;
    z-index: -1;
}

.z-nav .nav-link:hover,
.z-nav .nav-link.z-activo {
    color: #fff !important;
    box-shadow: 0 .35rem .9rem rgba(44, 82, 130, .28);
}

.z-nav .nav-link:hover::before,
.z-nav .nav-link.z-activo::before {
    opacity: 1;
    transform: scale(1);
}

.z-nav .navbar-toggler {
    border-color: rgba(44, 82, 130, .25);
}

/* ---------- Hero con video -------------------------------------------- */
/* El hero lleva FOTO de fondo, no video: con el recorrido en video al lado,
   dos videos a la vez se veian mal y pesaban de mas. */
.z-hero.z-hero--foto {
    /* doble clase a proposito: `.z-hero` usa el atajo `background:` mas abajo y
       si esto fuera una sola clase, ese atajo borraria la imagen. */
    background: url("../img/hero-clinica.jpg") center/cover no-repeat var(--z-azul-osc);
}

/* con foto fija el velo puede ser mas ligero que con video */
.z-hero--foto .z-hero__velo {
    background:
        linear-gradient(100deg, rgba(20, 32, 58, .90) 0%, rgba(30, 58, 95, .72) 45%, rgba(23, 162, 168, .34) 100%),
        radial-gradient(circle at 78% 28%, rgba(43, 192, 199, .22) 0%, transparent 58%);
}

.z-hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--z-azul-osc);
}

.z-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* la capa oscura es la que hace legible el texto sobre el video */
.z-hero__velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(100deg, rgba(20, 32, 58, .94) 0%, rgba(30, 58, 95, .82) 45%, rgba(23, 162, 168, .38) 100%),
        radial-gradient(circle at 78% 28%, rgba(43, 192, 199, .28) 0%, transparent 58%);
}

.z-hero__cuerpo {
    position: relative;
    z-index: 2;
    padding: 5.5rem 0;
}

.z-hero h1 {
    text-shadow: 0 .15rem 1.5rem rgba(0, 0, 0, .35);
    line-height: 1.15;
}

.z-hero .lead {
    color: rgba(255, 255, 255, .92);
    max-width: 34rem;
}

.z-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
    border-radius: 50rem;
    padding: .4rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.z-hero__datos {
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
}

.z-hero__dato .z-num {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--z-turquesa-cla);
}

.z-hero__dato small {
    color: rgba(255, 255, 255, .78);
}

.z-baja {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    z-index: 2;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .8);
    font-size: 1.6rem;
    animation: z-flota 2s ease-in-out infinite;
}

@keyframes z-flota {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, .5rem); }
}

/* ---------- Botones ---------------------------------------------------- */
.btn-z {
    background: linear-gradient(135deg, var(--z-azul) 0%, var(--z-turquesa) 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 50rem;
    padding: .8rem 1.9rem;
    box-shadow: 0 .5rem 1.25rem rgba(44, 82, 130, .35);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* OJO: hay que repetir el fondo en :hover / :focus / :active.
   El `.btn:hover` de Bootstrap pone `background-color: transparent` con la MISMA
   especificidad, y si aqui no se vuelve a declarar, el boton se queda blanco
   con el texto blanco encima (invisible). */
.btn-z:hover,
.btn-z:focus,
.btn-z:focus-visible,
.btn-z:active,
.btn-z.active {
    background: linear-gradient(135deg, var(--z-azul) 0%, var(--z-turquesa) 100%);
    color: #fff;
    filter: brightness(1.06);
    box-shadow: 0 .85rem 1.75rem rgba(44, 82, 130, .45);
}

.btn-z:hover {
    transform: translateY(-2px);
}

.btn-z-linea {
    border: 1.5px solid rgba(255, 255, 255, .6);
    color: #fff;
    background: transparent;
    font-weight: 600;
    border-radius: 50rem;
    padding: .8rem 1.9rem;
    transition: all .25s ease;
}

.btn-z-linea:hover {
    background: #fff;
    color: var(--z-azul);
    border-color: #fff;
    transform: translateY(-2px);
}

.btn-wa {
    background: #25d366;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 50rem;
    padding: .8rem 1.9rem;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 .5rem 1.25rem rgba(37, 211, 102, .35);
}

.btn-wa:hover,
.btn-wa:focus,
.btn-wa:focus-visible,
.btn-wa:active,
.btn-wa.active {
    background: #1fbe5b;          /* mismo verde, un tono mas oscuro */
    color: #fff;
    box-shadow: 0 .85rem 1.75rem rgba(37, 211, 102, .45);
}

.btn-wa:hover {
    transform: translateY(-2px);
}

/* ---------- Tarjetas --------------------------------------------------- */
.z-card {
    background: #fff;
    border: 1px solid rgba(20, 32, 58, .06);
    border-radius: var(--z-radio);
    box-shadow: var(--z-sombra);
    overflow: hidden;
    height: 100%;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
}

.z-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--z-azul), var(--z-turquesa));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.z-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--z-sombra-alta);
}

.z-card:hover::before {
    transform: scaleX(1);
}

.z-card a {
    color: var(--z-azul);
}

.z-card a:hover {
    color: var(--z-turquesa);
}

.z-icono {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #fff;
    background: linear-gradient(135deg, var(--z-azul) 0%, var(--z-turquesa) 100%);
    box-shadow: 0 .5rem 1rem rgba(44, 82, 130, .28);
    transition: transform .35s ease;
}

.z-card:hover .z-card a {
    color: var(--z-azul);
}

.z-card a:hover {
    color: var(--z-turquesa);
}

.z-icono {
    transform: rotate(-6deg) scale(1.06);
}

/* especialidades: fichas compactas */
.z-espec {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border: 1px solid rgba(20, 32, 58, .07);
    border-radius: .85rem;
    padding: 1rem 1.15rem;
    height: 100%;
    text-decoration: none;
    color: var(--z-tinta);
    transition: all .25s ease;
}

.z-espec i {
    font-size: 1.35rem;
    color: var(--z-turquesa);
    transition: transform .25s ease;
}

.z-espec:hover {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--z-azul) 0%, var(--z-turquesa) 100%);
    transform: translateY(-3px);
    box-shadow: var(--z-sombra);
}

.z-espec:hover i {
    color: #fff;
    transform: scale(1.15);
}

/* ---------- Sección "por qué elegirnos" -------------------------------- */
.z-ventaja {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.z-ventaja .z-bolita {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--z-azul) 0%, var(--z-turquesa) 100%);
    box-shadow: 0 .4rem .9rem rgba(44, 82, 130, .25);
}

.z-marco {
    border-radius: var(--z-radio);
    overflow: hidden;
    box-shadow: var(--z-sombra-alta);
    position: relative;
}

.z-marco::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 6px solid rgba(255, 255, 255, .55);
    border-radius: var(--z-radio);
    pointer-events: none;
}

/* ---------- Contacto --------------------------------------------------- */
.z-contacto {
    background: var(--z-hueso);
}

.z-mapa {
    border: 0;
    width: 100%;
    height: 100%;
    min-height: 340px;
    border-radius: var(--z-radio);
    box-shadow: var(--z-sombra);
    filter: saturate(.9);
}

.z-dato {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    border-radius: .85rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(20, 32, 58, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.z-dato:hover {
    transform: translateX(4px);
    box-shadow: var(--z-sombra);
}

.z-dato i {
    font-size: 1.3rem;
    color: var(--z-turquesa);
}

/* ---------- Franja CTA ------------------------------------------------- */
.z-franja {
    background:
        linear-gradient(120deg, var(--z-azul-osc) 0%, var(--z-azul) 50%, var(--z-turquesa) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.z-franja::after {
    content: "";
    position: absolute;
    right: -6rem;
    top: -6rem;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

/* ---------- Footer ----------------------------------------------------- */
.z-footer {
    position: relative;
    background: linear-gradient(180deg, #16223c 0%, #0f1830 100%);
    color: rgba(255, 255, 255, .82);
    padding-top: 5.5rem;
}

/* la curva de arriba: para que no entre como una plasta recta */
.z-footer__curva {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    transform: translateY(-1px);
}

.z-footer__curva svg {
    display: block;
    width: 100%;
    height: 70px;
}

.z-footer h6 {
    color: #fff;
    letter-spacing: .04em;
}

.z-footer a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
}

.z-footer a:hover {
    color: var(--z-turquesa-cla);
    padding-left: .25rem;
}

/* el logo ya no va como recuadro pegado: va en cápsula con aire */
.z-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    background: rgba(255, 255, 255, .96);
    border-radius: 1.15rem;
    padding: .75rem 1.15rem;
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .28);
}

.z-footer__logo img {
    border-radius: .6rem;
}

.z-social {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .1);
    color: #fff !important;
    transition: all .25s ease;
}

.z-social:hover {
    background: var(--z-turquesa);
    transform: translateY(-3px);
    padding-left: 0 !important;
}

/* ---------- Aparecer al hacer scroll ----------------------------------- */
.z-rev {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.z-rev.z-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Móvil / accesibilidad -------------------------------------- */
@media (max-width: 991.98px) {
    .z-nav .nav-link {
        margin: .2rem 0;
    }

    .z-hero {
        min-height: auto;
    }

    .z-hero__cuerpo {
        padding: 3.5rem 0;
    }

    /* en celular no se descarga el video: se queda el póster */
    .z-hero__media {
        display: none;
    }

    .z-hero {
        background: url("../img/hero-clinica.jpg") center/cover no-repeat var(--z-azul-osc);
    }
}

@media (prefers-reduced-motion: reduce) {

    .z-rev,
    .z-baja,
    .z-wa {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- Bootstrap con los colores de la marca ----------------------
   Las páginas interiores usan .text-primary / .bg-primary de Bootstrap, que
   pinta un azul-violeta que no es el de Zamiled. Se reemplaza aquí para no
   tener que tocar el marcado de cada página. */
.text-primary {
    color: var(--z-azul) !important;
}

.bg-primary {
    background-color: var(--z-azul) !important;
}

.btn-primary {
    --bs-btn-bg: var(--z-azul);
    --bs-btn-border-color: var(--z-azul);
    --bs-btn-hover-bg: var(--z-azul-osc);
    --bs-btn-hover-border-color: var(--z-azul-osc);
    --bs-btn-active-bg: var(--z-azul-osc);
    --bs-btn-active-border-color: var(--z-azul-osc);
}

.btn-outline-primary {
    --bs-btn-color: var(--z-azul);
    --bs-btn-border-color: var(--z-azul);
    --bs-btn-hover-bg: var(--z-azul);
    --bs-btn-hover-border-color: var(--z-azul);
    --bs-btn-active-bg: var(--z-azul);
    --bs-btn-active-border-color: var(--z-azul);
}

a {
    color: var(--z-azul);
}

a:hover {
    color: var(--z-turquesa);
}

/* los títulos de las páginas interiores heredan el subrayado de la marca */
section > .container > .row h2.display-5 {
    position: relative;
    display: inline-block;
    padding-bottom: .75rem;
}

section > .container > .row h2.display-5::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--z-azul) 0%, var(--z-turquesa) 100%);
}

/* ---------- Encabezado de las páginas interiores ----------------------- */
.z-encabezado {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 4.5rem 0 4rem;
    background:
        linear-gradient(115deg, rgba(20, 32, 58, .93) 0%, rgba(30, 58, 95, .88) 50%, rgba(23, 162, 168, .72) 100%),
        var(--z-azul-osc);
    background-size: cover;
    background-position: center;
}

.z-encabezado::after {
    content: "";
    position: absolute;
    right: -8rem;
    bottom: -10rem;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.z-encabezado h1 {
    font-weight: 700;
    letter-spacing: -.02em;
}

.z-encabezado .z-ruta {
    font-size: .875rem;
    color: rgba(255, 255, 255, .75);
}

.z-encabezado .z-ruta a {
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
}

.z-encabezado .z-ruta a:hover {
    color: #fff;
}

/* ---------- Especialidades: tarjeta con foto --------------------------- */
.z-espec-card {
    background: #fff;
    border-radius: var(--z-radio);
    box-shadow: var(--z-sombra);
    border: 1px solid rgba(20, 32, 58, .06);
    height: 100%;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.z-espec-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--z-sombra-alta);
}

.z-espec-card__foto {
    position: relative;
    background: var(--z-hueso);
    text-align: center;
    padding: 1.5rem 1.5rem 0;
}

.z-espec-card__foto img {
    width: 190px;
    height: 190px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 .5rem 1.25rem rgba(20, 32, 58, .12);
    transition: transform .35s ease;
}

.z-espec-card:hover .z-espec-card__foto img {
    transform: scale(1.04);
}

.z-espec-card__ico {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--z-azul), var(--z-turquesa));
    box-shadow: 0 .35rem .8rem rgba(44, 82, 130, .3);
}

.z-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.z-lista li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .45rem;
    color: var(--z-gris);
    font-size: .95rem;
}

.z-lista li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--z-turquesa);
    font-size: .9rem;
}

/* ---------- Servicios: tarjeta con imagen ------------------------------ */
.z-serv {
    background: #fff;
    border-radius: var(--z-radio);
    overflow: hidden;
    box-shadow: var(--z-sombra);
    border: 1px solid rgba(20, 32, 58, .06);
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}

.z-serv:hover {
    transform: translateY(-6px);
    box-shadow: var(--z-sombra-alta);
}

.z-serv__img {
    position: relative;
    height: 210px;
    overflow: hidden;
}

.z-serv__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.z-serv:hover .z-serv__img img {
    transform: scale(1.07);
}

.z-serv__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(20, 32, 58, .55) 100%);
}

.z-serv__ico {
    position: absolute;
    left: 1.1rem;
    bottom: -22px;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--z-azul), var(--z-turquesa));
    box-shadow: 0 .4rem .9rem rgba(44, 82, 130, .35);
}

/* ---------- Precios ---------------------------------------------------- */
.z-precio {
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--z-sombra);
    border: 1px solid rgba(20, 32, 58, .06);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
}

.z-precio:hover {
    transform: translateY(-8px);
    box-shadow: var(--z-sombra-alta);
}

.z-precio__cabeza {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.75rem 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, var(--z-azul-osc) 0%, var(--z-azul) 55%, var(--z-turquesa) 100%);
}

/* La foto del procedimiento va VISIBLE arriba de la tarjeta, no de fondo:
   detras del degradado no se alcanzaba a percibir. */
.z-precio__foto {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: var(--z-hueso);
}

.z-precio__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.z-precio:hover .z-precio__foto img {
    transform: scale(1.05);
}

.z-precio__cabeza::after {
    content: "";
    position: absolute;
    right: -3.5rem;
    top: -3.5rem;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.z-precio__ico {
    font-size: 1.6rem;
    opacity: .9;
    margin-bottom: .5rem;
}

.z-precio__nombre {
    /* en CSS y no con strtoupper() de PHP: esa funcion parte los acentos en UTF-8 */
    text-transform: uppercase;
    text-shadow: 0 .1rem .5rem rgba(0, 0, 0, .5);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: .75rem;
    position: relative;
}

.z-precio__monto {
    text-shadow: 0 .1rem .6rem rgba(0, 0, 0, .45);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    position: relative;
}

.z-precio__monto small {
    font-size: 1rem;
    font-weight: 600;
    opacity: .8;
}

.z-precio__cuerpo {
    padding: 1.5rem 1.75rem 1.75rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.z-precio__nota {
    font-size: .8rem;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: .6rem;
    padding: .5rem .75rem;
    margin-top: 1rem;
}

.z-precio__incluye {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--z-turquesa);
    margin-bottom: .75rem;
}

/* tira de precios del home */
.z-precio-mini {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--z-sombra);
    border: 1px solid rgba(20, 32, 58, .06);
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
    text-decoration: none;
    display: block;
    color: inherit;
}

.z-precio-mini:hover {
    transform: translateY(-6px);
    box-shadow: var(--z-sombra-alta);
    color: inherit;
}

.z-precio-mini .z-mini-ico {
    width: 54px;
    height: 54px;
    margin: 0 auto .9rem;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.35rem;
    background: linear-gradient(135deg, var(--z-azul), var(--z-turquesa));
}

.z-precio-mini .z-mini-monto {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--z-azul);
    line-height: 1;
}

.z-precio-mini .z-mini-nombre {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

/* ---------- Valores / chips -------------------------------------------- */
.z-valor {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border: 1px solid rgba(20, 32, 58, .07);
    border-radius: .75rem;
    padding: .85rem 1rem;
    height: 100%;
    font-weight: 600;
    transition: all .25s ease;
}

.z-valor i {
    color: var(--z-turquesa);
    font-size: 1.2rem;
}

.z-valor:hover {
    border-color: transparent;
    background: linear-gradient(135deg, var(--z-azul), var(--z-turquesa));
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--z-sombra);
}

.z-valor:hover i {
    color: #fff;
}

@media (max-width: 767.98px) {
    .z-precio__monto {
        font-size: 2rem;
    }

    .z-encabezado {
        padding: 3rem 0 2.5rem;
    }
}

/* ---------- Cintillo de crédito (pie del pie) -------------------------- */
.z-credito {
    background: rgba(0, 0, 0, .28);
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: .85rem 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
    letter-spacing: .02em;
}

.z-credito a {
    color: rgba(255, 255, 255, .8);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
}

.z-credito a:hover {
    color: var(--z-turquesa-cla);
    padding-left: 0;
    text-decoration: underline;
}

.z-credito__sep {
    opacity: .35;
}

/* ---------- Video vertical del recorrido, al lado del hero ------------- */
.z-reel {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    /* el marco negro: como si fuera la pantalla de un equipo */
    background: #05070d;
    padding: 12px;
    border-radius: 28px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .12),
        0 1.5rem 3rem rgba(0, 0, 0, .55);
}

.z-reel video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 18px;
    background: #000;
}

/* etiqueta que explica qué es */
.z-reel__tag {
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    white-space: nowrap;
    background: linear-gradient(135deg, var(--z-azul) 0%, var(--z-turquesa) 100%);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem 1rem;
    border-radius: 50rem;
    box-shadow: 0 .4rem .9rem rgba(0, 0, 0, .35);
}

/* botón de sonido (arranca en silencio para que el navegador deje reproducir) */
.z-reel__son {
    position: absolute;
    right: 22px;
    top: 22px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1rem;
    backdrop-filter: blur(4px);
    transition: background .2s ease, transform .2s ease;
}

.z-reel__son:hover {
    background: var(--z-turquesa);
    transform: scale(1.08);
}

@media (max-width: 991.98px) {
    .z-reel {
        margin: 2.5rem auto 1.5rem;
        max-width: 260px;
    }
}

/* ---------- Modal de ofertas del home ---------------------------------- */
.z-oferta-modal {
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, .45);
}

.z-oferta-modal__cabeza {
    position: relative;
    padding: 2rem 1.75rem 1.75rem;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(20, 32, 58, .93) 0%, rgba(44, 82, 130, .88) 55%, rgba(23, 162, 168, .78) 100%),
        url("../img/clinica/quirofano-1.jpg") center/cover no-repeat;
}

.z-oferta-modal__cabeza::after {
    content: "";
    position: absolute;
    right: -4rem;
    top: -4rem;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.z-oferta-modal__urg {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #c62828;
    border-radius: 50rem;
    padding: .3rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 .4rem .9rem rgba(198, 40, 40, .45);
}

.z-oferta-modal__x {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 5;
    opacity: .85;
}

.z-oferta-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--z-hueso);
    border: 1px solid rgba(20, 32, 58, .06);
    border-radius: .6rem;
    padding: .6rem .85rem;
    font-weight: 600;
    font-size: .95rem;
    height: 100%;
}

.z-oferta-item i {
    color: var(--z-turquesa);
    flex: 0 0 auto;
}

/* ---------- Tarjeta de paquete del home (con la foto del procedimiento) --
   Clase aparte de .z-precio-mini a proposito: esa se sigue usando SIN foto en
   ofertas.php y en la lista de check ups de precios.php. */
.z-paquete {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(20, 32, 58, .06);
    border-radius: var(--z-radio);
    overflow: hidden;
    box-shadow: var(--z-sombra);
    text-decoration: none;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease;
}

.z-paquete:hover {
    transform: translateY(-6px);
    box-shadow: var(--z-sombra-alta);
    color: inherit;
}

.z-paquete__foto {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--z-hueso);
}

.z-paquete__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.z-paquete:hover .z-paquete__foto img {
    transform: scale(1.06);
}

.z-paquete__foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 32, 58, .10) 0%, rgba(20, 32, 58, .55) 100%);
}

.z-paquete__ico {
    position: absolute;
    left: 1.1rem;
    bottom: -20px;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--z-azul), var(--z-turquesa));
    box-shadow: 0 .4rem .9rem rgba(44, 82, 130, .35);
}

.z-paquete__cuerpo {
    padding: 2rem 1.4rem 1.5rem;
}

.z-paquete__nombre {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .35rem;
}

.z-paquete__monto {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--z-azul);
    margin-bottom: .6rem;
}

/* ---------- Filas de oferta dentro del modal --------------------------- */
.z-oferta-fila {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--z-hueso);
    border: 1px solid rgba(20, 32, 58, .07);
    border-radius: .9rem;
    padding: 1rem 1.1rem;
    margin-bottom: .85rem;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.z-oferta-fila:hover {
    border-color: rgba(23, 162, 168, .45);
    box-shadow: var(--z-sombra);
    transform: translateY(-2px);
}

.z-oferta-fila__ico {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(135deg, var(--z-azul), var(--z-turquesa));
    box-shadow: 0 .35rem .8rem rgba(44, 82, 130, .3);
}

.z-oferta-fila__txt {
    flex: 1 1 auto;
    min-width: 0;
}

.z-oferta-fila__tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--z-turquesa);
    margin-bottom: .15rem;
}

.z-oferta-fila__precio {
    margin-top: .35rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--z-azul);
    line-height: 1;
}

.z-oferta-fila__precio .antes {
    font-size: .95rem;
    font-weight: 600;
    color: var(--z-gris);
    text-decoration: line-through;
    margin-right: .5rem;
}

.z-oferta-fila__btn {
    flex: 0 0 auto;
    padding: .55rem 1.3rem;
    font-size: .92rem;
}

@media (max-width: 575.98px) {
    .z-oferta-fila {
        flex-wrap: wrap;
    }

    .z-oferta-fila__btn {
        width: 100%;
    }
}

/* ---------- Aviso de descuentos en el hero ----------------------------- */
.z-hero__aviso {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.1rem 1.35rem;
    max-width: 34rem;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-left: 4px solid var(--z-turquesa-cla);
    backdrop-filter: blur(6px);
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .28);
}

.z-hero__aviso-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, var(--z-turquesa) 0%, var(--z-turquesa-cla) 100%);
    box-shadow: 0 .35rem .8rem rgba(23, 162, 168, .45);
}

.z-hero__aviso strong {
    display: block;
    font-size: 1.02rem;
    line-height: 1.3;
    margin-bottom: .2rem;
    color: #fff;
}

.z-hero__aviso span {
    display: block;
    font-size: .9rem;
    color: rgba(255, 255, 255, .8);
}

@media (max-width: 575.98px) {
    .z-hero__aviso {
        margin-top: 1.75rem;
        padding: .95rem 1.1rem;
    }

    .z-hero__aviso strong {
        font-size: .95rem;
    }
}