/* ========================================================
   Amour Spa — Dark Passion Theme
   Fondo oscuro, rojizo/vino, degradé desvaneciente y fijo,
   inspirado en luxurystarspa.com. Tono sobrio, no saturado.
   ======================================================== */

:root {
  --pp-bg-deep: #12070a;
  --pp-bg-mid: #2a0f16;
  --pp-bg-warm: #33141a;
  --pp-bg-soft: #1c0d10;
  --pp-text: #f5e6e2;
  --pp-text-muted: #d3b3ae;
  --pp-accent: #fca9a9;
  --pp-accent-gold: #d9a56b;
  --pp-border: rgba(252, 169, 169, 0.16);
  --pp-card: rgba(255, 255, 255, 0.035);
  --pp-card-border: rgba(255, 255, 255, 0.08);

  /* Alinea el topbar existente con la paleta pasión (mismo tono, sin tocar topbar.css) */
  --topbar-bg: var(--pp-bg-deep);

  /* Bootstrap: aclara el color "secondary" usado en checks, links y textos secundarios */
  --bs-secondary: var(--pp-accent-gold);
  --bs-secondary-rgb: 217, 165, 107;
}

/* ---------- Fondo general de la página (degradé fijo) ---------- */
html,
body {
  background-color: var(--pp-bg-deep);
}

body {
  color: var(--pp-text-muted);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(122, 6, 6, 0.3) 0%, transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(122, 6, 6, 0.25) 0%, transparent 50%),
    linear-gradient(160deg, var(--pp-bg-deep) 0%, var(--pp-bg-mid) 30%, var(--pp-bg-warm) 50%, var(--pp-bg-soft) 72%, var(--pp-bg-deep) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

@media (max-width: 991.98px) {
  body {
    background-attachment: scroll;
  }
}

/* ---------- Tipografía base: hereda en toda la página ---------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--pp-text);
}

p, span {
  color: var(--pp-text-muted);
}

.sub-heading {
  color: var(--pp-accent-gold);
}

/* ---------- Header / Topbar ---------- */
.header.index-5,
.header.fixed {
  background-color: var(--pp-bg-deep) !important;
}

.header .menu li span,
.header .menu li a {
  color: var(--pp-text) !important;
}

.header .menu li span.active,
.header .menu li a.active {
  color: var(--pp-accent-gold) !important;
}

.amour-navbar .toggle-menu {
  color: var(--pp-text) !important;
}

/* ---------- Hero: overlay del video en tono vino, no negro plano ---------- */
.banner.banner-6::after {
  background: linear-gradient(160deg, rgba(42, 15, 22, 0.55), rgba(18, 7, 10, 0.55));
  opacity: 0.55;
}

/* ---------- Secciones: transparentes para dejar ver el degradé de fondo ---------- */
.gallery.n0,
.features-6,
.pricing-section.white,
.testimonial-6,
.experts-3,
.faq-2,
.faq-2.bg4,
.faq-2 .logo-slider-2.bg4,
.faq-2 .faq-content,
.bg4.recent-news,
.footer.footer-two,
.footer.footer-two form {
  background-color: transparent !important;
}

/* ---------- Cards e imágenes: panel translúcido sutil para separarlas del fondo ---------- */
.project-card,
.expert-card,
.testimonial-card-6,
.blog-grid,
.pricing-list-area .item {
  border-color: var(--pp-card-border);
}

.experts-3 .expert-card .img-box .social .social-btn {
  background-color: var(--pp-card);
  color: var(--pp-text);
}

/* ---------- Botones outline secondary (usan #6b594c por defecto) ---------- */
.outline-btn.secondary {
  color: var(--pp-accent-gold) !important;
  border-color: var(--pp-accent-gold);
}

.outline-btn.secondary:hover {
  color: var(--pp-bg-deep) !important;
}

/* ---------- Pricing: precios y línea punteada ---------- */
.pricing-section .pricing-list-area .left-side-pricing .item .price,
.pricing-section .pricing-list-area .right-side-pricing .item .price {
  color: var(--pp-accent-gold);
}

.pricing-section .pricing-list-area .left-side-pricing .item .dashed-line,
.pricing-section .pricing-list-area .right-side-pricing .item .dashed-line {
  border-color: var(--pp-border);
}

.pricing-section .right-text h2.vertical {
  color: var(--pp-text);
  opacity: 0.25;
}

/* ---------- Checklist de features (iconos check-square) ---------- */
.features-6 .text-secondary {
  color: var(--pp-accent-gold) !important;
}

/* ---------- FAQ / Accordion ---------- */
.faq-2 .accordion-item {
  background-color: var(--pp-card);
  border: 1px solid var(--pp-card-border);
}

.faq-2 .accordion-button {
  background-color: transparent !important;
  color: var(--pp-text) !important;
}

.faq-2 .accordion-button:not(.collapsed) {
  background-color: rgba(217, 165, 107, 0.14) !important;
  color: var(--pp-text) !important;
}

.faq-2 .accordion-body p {
  color: var(--pp-text-muted) !important;
  border-top-color: var(--pp-border);
}

/* ---------- Footer ---------- */
.footer.footer-two {
  border-top-color: var(--pp-card-border);
}

/* Quita la franja blanca heredada del tema claro: todo el footer debe verse
   con el mismo fondo oscuro, sin importar el ancho de pantalla */
.footer.white-left::after {
  background-color: transparent !important;
}

/* Reduce el espaciado vertical excesivo del footer (se sentía muy separado) */
@media (min-width: 1200px) {
  .footer.footer-two .footer-card,
  .footer.footer-two .footer-card-3 {
    padding-top: 40px !important;
  }
}

@media (min-width: 992px) {
  .footer .navigate-part .top .border-left-right {
    padding: 32px 0px !important;
  }
}

@media (min-width: 1200px) {
  .footer .navigate-part .bottom {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* Descripción de la tarjeta del logo: era #404a60 (casi invisible en fondo oscuro) */
.text-n500,
.footer-card__desc {
  color: var(--pp-text-muted) !important;
}

/* Logo del footer: más pequeño en móvil, crece a tamaño normal desde tablet */
.footer-card__logo {
  max-width: 150px;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .footer-card__logo {
    max-width: 220px;
  }
}

.footer .contact-two .contact-item a,
.footer .contact-two .contact-item p {
  color: var(--pp-text-muted) !important;
}

.footer .contact-two .contact-icon {
  border-color: var(--pp-card-border);
  color: var(--pp-accent-gold) !important;
}

.footer .navigate-part .navigation-links li a {
  color: var(--pp-text-muted) !important;
}

.footer .navigate-part .navigation-links li a:hover {
  color: var(--pp-accent-gold) !important;
}

.footer .navigate-part .top {
  border-color: var(--pp-card-border);
}

.social-link.two li a {
  color: var(--pp-accent-gold) !important;
  border-color: var(--pp-card-border);
}

.footer .copyright-two {
  border-color: var(--pp-card-border);
}

.footer .copyright-two ul a {
  color: var(--pp-text-muted);
}

/* ---------- Bordes claros / decorativos que dependían del fondo blanco ---------- */
.border-left-right {
  border-color: var(--pp-card-border) !important;
}

/* =======================================================
   AMOUR SPA - TARJETAS DEL EQUIPO
======================================================= */

.experts-3 .expert-card{

    background:rgba(38,18,24,.78) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(217,165,107,.28) !important;

    border-radius:24px !important;

    padding:18px;

    overflow:hidden;

    transition:all .4s ease;

    box-shadow:
        0 12px 35px rgba(0,0,0,.35);

    position:relative;

}

/* Línea dorada superior */

.experts-3 .expert-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:70px;

    height:3px;

    background:linear-gradient(90deg,#d9a56b,#f5d39d,#d9a56b);

    border-radius:20px;

}

/* Hover */

.experts-3 .expert-card:hover{

    transform:translateY(-10px);

    border-color:#D9A56B !important;

    box-shadow:
        0 22px 55px rgba(0,0,0,.50),
        0 0 25px rgba(217,165,107,.12);

}

/* Imagen */

.experts-3 .expert-card .img-box{

    border-radius:18px;

    overflow:hidden;

    position:relative;

}

.experts-3 .expert-card .img-box img{

    width:100%;

    display:block;

    border-radius:18px;

    transition:transform .6s ease;

}

.experts-3 .expert-card:hover .img-box img{

    transform:scale(1.06);

}

/* Oscurecer ligeramente la imagen */

.experts-3 .expert-card .img-box::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.18),
        transparent 40%
    );

    pointer-events:none;

}

/* Nombre */

.experts-3 .expert-card h5{

    color:#F8F4EF !important;

    font-size:25px;

    font-weight:600;

    margin-top:18px;

    margin-bottom:10px;

    letter-spacing:.5px;

}

/* Línea bajo el nombre */

.experts-3 .expert-card h5::after{

    content:"";

    display:block;

    width:42px;

    height:2px;

    margin:10px auto 0;

    background:#D9A56B;

    border-radius:20px;

}

/* Especialidad */

.experts-3 .expert-card p{

    color:#D6C2B3 !important;

    font-size:15px;

    line-height:1.6;

    margin-bottom:6px;

}

/* Botón + */

.experts-3 .expert-card .social-btn{

    width:52px;

    height:52px;

    border-radius:50% !important;

    background:#D9A56B !important;

    color:#2A0F16 !important;

    box-shadow:
        0 8px 18px rgba(0,0,0,.30);

    transition:all .35s ease;

}

.experts-3 .expert-card .social-btn:hover{

    background:#ffffff !important;

    color:#D9A56B !important;

}

/* Instagram */

.experts-3 .expert-card .links li a{

    background:#2A0F16;

    color:#D9A56B;

    transition:.3s;

}

.experts-3 .expert-card .links li a:hover{

    background:#D9A56B;

    color:#2A0F16;

}

/* =======================================================
   AMOUR SPA - TARJETAS "CRÓNICAS DE LA PIEL" (blog)
   Mismo estilo que las tarjetas de "Manos especialistas"
======================================================= */

.recent-news .swiper-slide{

    height:auto;

    display:flex;

}

.recent-news .blog-grid{

    background:rgba(38,18,24,.78) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(217,165,107,.28) !important;

    border-radius:24px !important;

    padding:18px;

    overflow:hidden;

    position:relative;

    transition:all .4s ease;

    box-shadow:
        0 12px 35px rgba(0,0,0,.35);

    display:flex;
    flex-direction:column;
    width:100%;

}

.recent-news .blog-grid::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:70px;

    height:3px;

    background:linear-gradient(90deg,#d9a56b,#f5d39d,#d9a56b);

    border-radius:20px;

}

.recent-news .blog-grid:hover{

    transform:translateY(-10px);

    border-color:#D9A56B !important;

    box-shadow:
        0 22px 55px rgba(0,0,0,.50),
        0 0 25px rgba(217,165,107,.12);

}

.recent-news .blog-grid .blog-img{

    border-radius:18px;

    overflow:hidden;

}

.recent-news .blog-grid .blog-img img{

    border-radius:18px;

    transition:transform .6s ease;

}

.recent-news .blog-grid:hover .blog-img img{

    transform:scale(1.06);

}

.recent-news .blog-grid .blog-content{

    background:transparent;

    display:flex;
    flex-direction:column;
    flex:1;

}

.recent-news .blog-grid .blog-content h4,
.recent-news .blog-grid .blog-content a{

    color:#F8F4EF !important;

}

.recent-news .blog-grid .blog-content h4{

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.4em;

}

.recent-news .blog-grid .blog-content p{

    color:#D6C2B3 !important;

}

.recent-news .blog-grid .blog-content p.mb-4{

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

}

.recent-news .blog-grid .blog-content > a{

    margin-top:auto;

}

/*=========================================================
  FAQ - Ajuste de espaciado
=========================================================*/

.faq-2 .faq-content{
    padding-top:25px !important;
}

@media(min-width:1200px){

    .faq-2 .faq-content.no-cta{

        padding:40px 50px !important;

    }

}

/* Fondo blanco solo para la tarjeta del footer */
.footer-card {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    padding: 25px 20px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease;
}

/* Ajuste de colores de texto para que se vean sobre fondo blanco */
.footer-card .footer-card__desc {
    color: #4a4a4a !important; /* Texto oscuro para legibilidad */
}

.footer-card .social-link.two li a {
    color: #d9a56b !important; /* Mantiene el color dorado */
    border-color: #e0d5c8 !important;
    background-color: #f8f5f0 !important;
}

.footer-card .social-link.two li a:hover {
    background-color: #d9a56b !important;
    color: #ffffff !important;
}

/* Enlace del logo */
.footer-card a {
    display: inline-block;
}

/* Ajuste responsive */
@media (max-width: 767.98px) {
    .footer-card {
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
    }
}

/* =======================================================
   AJUSTE DE ESPACIADO - Sección Crónicas
======================================================= */

/* Aumenta el padding inferior de la sección de blogs */
.recent-news {
    padding-bottom: 20px !important;
    /* Aumenta el espacio inferior */
    padding-top: 20px !important;
    /* Ajusta el espacio superior si es necesario */
}

/* Si la sección siguiente tiene padding superior, lo reducimos */
.recent-news + section,
.recent-news + .footer,
.recent-news + div {
    padding-top: 30px !important;
    /* Espacio entre secciones */
}

/* O si quieres un margen específico entre secciones */
.recent-news {
    margin-bottom: 10px !important;
    /* Margen inferior directo */
}

/* Ajuste del contenedor para mejor espaciado */
.recent-news .container {
    padding-bottom: 50px;
}