/********** Template CSS **********/

/* ==========================================================================
   PALETA PRADENTIS — «Negro & Oro»
   --------------------------------------------------------------------------
   Principales : Ónix (negro) · Oro · Blanco
   Apoyo       : Marfil (tinte cálido desaturado del oro)

   El oro tiene un tono H≈43°. Sobre blanco no alcanza el contraste AA como
   texto, por eso el sistema tiene DOS oros:
     --gold       -> superficies, iconos y texto SOBRE FONDO OSCURO (8.4:1 sobre ónix)
     --gold-deep  -> texto y enlaces SOBRE FONDO CLARO (5.2:1 blanco / 4.7:1 marfil)
   ========================================================================== */
:root {
    /* --- Principales --- */
    --black:        #0B0C0E;  /* Ónix: negro principal (titulares, footer)   */
    --black-soft:   #14161A;  /* Ónix elevado: fondos de sección y botones   */
    --gold:         #C8A54B;  /* Oro: acento principal sobre oscuro          */
    --gold-deep:    #87681F;  /* Oro viejo: acento legible sobre claro       */
    --white:        #FFFFFF;

    /* --- Apoyo --- */
    --ivory:        #F6F2E9;  /* Marfil: blanco cálido para fondos suaves    */

    /* Retirados: el azul petróleo ya no se usa como acento. Se conservan
       las variables por si alguna hoja de terceros aún las referencia. */
    --teal:         #0E4C5E;
    --teal-soft:    #12586D;

    /* --- Alias heredados de la plantilla (no eliminar) --- */
    --primary:      var(--gold);
    --secondary:    var(--gold-deep);
    --light:        var(--ivory);
    --dark:         var(--black);
}

h1,
h2,
.font-weight-bold {
    font-weight: 700 !important;
}

h3,
h4,
.font-weight-semi-bold {
    font-weight: 600 !important;
}

h5,
h6,
.font-weight-medium {
    font-weight: 500 !important;
}


/* ==========================================================================
   Ajustes de paleta sobre las utilidades de Bootstrap
   ========================================================================== */

/* Enlaces de contenido: oro profundo para que sean legibles sobre blanco */
a {
    color: var(--gold-deep);
}

a:hover {
    color: var(--black);
}

/* `.text-primary` es el acento de la plantilla (iconos, antetítulos, logo).
   Sobre fondo claro usa el oro profundo. */
.text-primary {
    color: var(--gold-deep) !important;
}

/* ...y sobre cualquier superficie oscura, el oro brillante. */
footer .text-primary,
.bg-dark .text-primary,
.bg-primary .text-primary,
.hero-header .text-primary,
.bg-appointment .text-primary,
.bg-testimonial .text-primary,
.carousel-caption .text-primary,
.offer-text .text-primary {
    color: var(--gold) !important;
}

.border-primary {
    border-color: var(--gold) !important;
}

/* `.bg-secondary` (badges de categoría, etiquetas): oro viejo con texto
   blanco — 4.7:1, el único oro que aguanta blanco encima. */
.bg-secondary {
    background-color: var(--gold-deep) !important;
    color: var(--white) !important;
}

.text-secondary {
    color: var(--gold) !important;
}


/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    transition: .5s;
}

/* Primario: oro con texto ónix. Al pasar el ratón se invierte. */
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--black);
    background: var(--gold);
    border-color: var(--gold);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: var(--gold);
    background: var(--black);
    border-color: var(--black);
}

/* Secundario: ónix elevado perfilado en oro; se rellena de oro al activarse. */
.btn-secondary,
.btn-secondary:disabled,
.btn-secondary.disabled {
    color: var(--gold);
    background: var(--black-soft);
    border-color: var(--gold);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
    color: var(--black);
    background: var(--gold);
    border-color: var(--gold);
}

/* `.btn-dark` es el CTA de los paneles («Solicitar Cita», «Suscribir»). En
   ónix desaparecía sobre su propio panel, también de ónix: ahora va en oro y
   se apaga a oro viejo al pasar el ratón. El texto pasa a blanco en ese estado
   porque el ónix sobre oro viejo se queda en 3.5:1; en blanco son 5.2:1. */
.btn-dark,
.btn-dark:disabled,
.btn-dark.disabled {
    color: var(--black);
    background: var(--gold);
    border-color: var(--gold);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
    color: var(--white);
    background: var(--gold-deep);
    border-color: var(--gold-deep);
}

/* Contornos */
.btn-outline-primary {
    color: var(--gold);
    border-color: var(--gold);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--black);
    background: var(--gold);
    border-color: var(--gold);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: var(--black);
    background: var(--gold);
    border-color: var(--gold);
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

/* Cuña decorativa: debe igualar el fondo `.bg-primary` de la barra superior */
.top-shape::before {
    position: absolute;
    content: "";
    width: 35px;
    height: 100%;
    top: 0;
    left: -17px;
    background: var(--black-soft);
    transform: skew(40deg);
}

.navbar-light .navbar-nav .nav-link {
    font-family: 'Jost', sans-serif;
    padding: 35px 15px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    outline: none;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 20px 15px;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--gold);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link,
    .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 12, 14, .78);
    z-index: 1;
}

@media (max-width: 576px) {
    .carousel-caption h5 {
        font-size: 14px;
        font-weight: 500 !important;
    }

    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 600 !important;
    }
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

@media (min-width: 991.98px) {
    .banner {
        position: relative;
        margin-top: -90px;
        z-index: 1;
    }
}

.section-title h5 {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

/* Trazo largo en oro brillante + trazo corto en oro viejo */
.section-title h5::before {
    position: absolute;
    content: "";
    width: 45px;
    height: 3px;
    left: 0;
    bottom: 0;
    background: var(--gold);
}

.section-title h5::after {
    position: absolute;
    content: "";
    width: 15px;
    height: 3px;
    left: 50px;
    bottom: 0;
    background: var(--gold-deep);
}


.twentytwenty-wrapper {
    height: 100%;
}

.hero-header {
    background: linear-gradient(rgba(11, 12, 14, .82), rgba(11, 12, 14, .82)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.bg-appointment {
    background: linear-gradient(rgba(11, 12, 14, .82), rgba(11, 12, 14, .82)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

/* Panel del formulario: ónix elevado para despegarse del fondo negro */
.appointment-form {
    background: rgba(20, 22, 26, .92);
}

.service-item img,
.service-item .bg-light,
.service-item .bg-light h5,
.team-item .team-text {
    transition: .5s;
}

.service-item:hover img {
    transform: scale(1.15);
}

.team-item .team-text::after,
.service-item .bg-light::after {
    position: absolute;
    content: "";
    top: 50%;
    bottom: 0;
    left: 15px;
    right: 15px;
    border-radius:100px / 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .7);
    opacity: 0;
    transition: .5s;
    z-index: -1;
}

.team-item:hover .team-text::after,
.service-item:hover .bg-light::after {
    opacity: 1;
}

.bg-offer {
    background:url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.offer-text {
    background: rgba(20, 22, 26, .92);
}

.price-carousel .owl-nav {
    position: absolute;
    width: calc(100% + 45px);
    height: 45px;
    top: calc(50% - 22.5px);
    left: -22.5px;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: .5s;
}

.price-carousel:hover .owl-nav {
    opacity: 1;
}

.price-carousel .owl-nav .owl-prev,
.price-carousel .owl-nav .owl-next {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    background: var(--gold);
    border-radius: 2px;
    font-size: 22px;
    transition: .5s;
}

.price-carousel .owl-nav .owl-prev:hover,
.price-carousel .owl-nav .owl-next:hover {
    color: var(--gold);
    background: var(--black);
}

.bg-testimonial {
    background: url(../img/carousel-2.jpg) center center no-repeat;
    background-size: cover;
}

.testimonial-carousel {
    background: rgba(11, 12, 14, .88);
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: calc(100% + 46px);
    height: 46px;
    top: calc(50% - 23px);
    left: -23px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    background: var(--gold);
    border-radius: 2px;
    font-size: 22px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--black);
    background: var(--gold);
}

.testimonial-carousel .owl-item img {
    width: 120px;
    height: 120px;
}

h1.m-0.text-primary {
    display: flex;
    align-items: center;
}
/*

custom css

**/
.mb-01 {
    margin: 0px;
}
a:hover{
text-decoration: none!important;
}


/* Pradentis Logo */
/* Logotipo: Poiret One para toda la palabra. Tiene un único grosor (400), así
   que no se le piden pesos: cualquier otro valor solo daría una falsa negrita
   sintética del navegador. */
.navbar-brand-logo {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    font-size: 44px;
    letter-spacing: 0;
}

/* El diente se iguala a la altura visual de la palabra (~34px de ascendente a
   descendente). `width: auto` deja que el navegador saque el ancho del viewBox
   del SVG, así no hay forma de deformarlo al retocar la altura. */
.navbar-brand-logo img {
    width: auto;
    height: 36px;
}

/* El logotipo va dentro de un contenedor flex: sin este envoltorio, la «P» y
   el resto de la palabra son dos ítems flex distintos y se centran cada uno
   por su cuenta en vez de compartir línea base. Aquí dentro vuelve el flujo
   inline normal y las dos partes se apoyan en la misma base. */
.navbar-brand-logo .brand-word {
    display: inline-block;
}

/* La «P» inicial hereda Poiret One y solo se destaca por el cuerpo: al ser una
   fuente de un solo grosor, subirle el peso daría negrita falsa. */
.navbar-brand-logo .brand-initial {
    font-size: 1.15em;
}


/* ==========================================================================
   FONDO GLOBAL OSCURO — «Negro & Oro»
   El lienzo del sitio es ónix; las superficies claras de la plantilla
   (.bg-light / .bg-white) pasan a ser ónix elevado.
   ========================================================================== */
body {
    background-color: var(--black);
    color: rgba(255, 255, 255, 0.78);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--white);
}

.bg-light,
.bg-white {
    background-color: var(--black-soft) !important;
    color: rgba(255, 255, 255, 0.78);
}

.bg-light h1, .bg-light h2, .bg-light h3,
.bg-light h4, .bg-light h5, .bg-light h6,
.bg-white h1, .bg-white h2, .bg-white h3,
.bg-white h4, .bg-white h5, .bg-white h6 {
    color: var(--white);
}

.text-dark,
.bg-light .text-dark,
.bg-white .text-dark {
    color: var(--white) !important;
}

.text-body,
.text-muted,
.form-text {
    color: rgba(255, 255, 255, 0.62) !important;
}

/* Tablas: Bootstrap las tiñe de gris cálido, ilegible sobre ónix */
.table {
    --bs-table-color: rgba(255, 255, 255, 0.78);
    --bs-table-bg: transparent;
    --bs-table-striped-color: rgba(255, 255, 255, 0.78);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: var(--white);
    --bs-table-hover-bg: rgba(200, 165, 75, 0.10);
    --bs-table-border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
}

.table > thead {
    color: var(--white);
}

/* El acento vuelve a ser el oro brillante: ahora todo fondo es oscuro */
.text-primary,
.bg-light .text-primary,
.bg-white .text-primary {
    color: var(--gold) !important;
}

a {
    color: var(--gold);
}

a:hover {
    color: var(--white);
}

/* Bordes y separadores legibles sobre ónix */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
hr {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.card {
    background-color: var(--black-soft);
    color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Listas de navegación (`.list-group`: categorías del blog)
   Bootstrap las pinta en blanco: sobre el ónix de la página quedaban como un
   bloque blanco suelto. Se alinean con `.card`.
   -------------------------------------------------------------------------- */
.list-group-item {
    background-color: var(--black-soft);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.list-group-item.active {
    background-color: var(--gold-deep);
    border-color: var(--gold-deep);
    color: var(--white);
}

/* --------------------------------------------------------------------------
   Formularios sobre fondo oscuro
   Las plantillas marcan los campos como `.bg-light .border-0`, pensado para
   cuando el panel era claro: ahora el campo y su panel son del mismo ónix y
   la caja desaparece. Se le devuelve el borde (4.5:1 contra el campo, muy por
   encima del 3:1 que pide la WCAG para el contorno de un control).
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: rgba(255, 255, 255, 0.92);
    color-scheme: dark;
}

/* El desplegable nativo del `select` se pinta fuera de la página y no hereda
   el color del control: sin esto las opciones salen en blanco sobre blanco. */
.form-select option,
.form-select optgroup,
.form-control option {
    background-color: var(--black-soft);
    color: rgba(255, 255, 255, 0.92);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.62);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, 0.10) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 .2rem rgba(200, 165, 75, .28);
    color: var(--white);
}

.form-check-input {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.45);
}

/* Marca en ónix sobre el oro: la de Bootstrap es blanca y sobre oro se queda
   en 2:1, por debajo del 3:1 que pide la WCAG para un elemento gráfico. */
.form-check-input:checked {
    background-color: var(--gold);
    border-color: var(--gold);
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B0C0E' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230B0C0E'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 .2rem rgba(200, 165, 75, .28);
}

/* --------------------------------------------------------------------------
   Sección «Valores»: columnas con icono
   El texto lo edita el backend y puede tener cualquier longitud, así que las
   columnas se estiran solas y solo se alinean por arriba (icono y título).
   -------------------------------------------------------------------------- */
.value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    font-size: 30px;
    transition: .5s;
}

.value-item:hover .value-icon {
    background: var(--gold);
    color: var(--black);
}

.input-group-text {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.45);
    color: rgba(255, 255, 255, 0.78);
}