/* ============================================================
   DUNIA TIZÓN — ARQUITECTA · Personalización de marca
   Se carga DESPUÉS de styles.css y solo sobreescribe.
   Paleta (Brief 02, sección 2):
     Azul marino  #1B2A4A / #0F2F4F
     Dorado       #B8952A / #C9A86A
     Fondo claro  #FFFFFF / #F7F5F2
     Texto sec.   #555555 / #6B6B6B
   ============================================================ */

/* ---------- 1. LOGO DE TEXTO (provisional hasta recibir PNG) ---------- */
.logo-text {
    display: inline-block;
    line-height: 1.1;
    text-align: left;
    text-decoration: none;
}
.logo-text .logo-nombre {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: #1B2A4A;
    letter-spacing: 1px;
    white-space: nowrap;
}
.logo-text .logo-cargo {
    display: block;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #8F731F; /* dorado de marca oscurecido: cumple contraste AA sobre blanco */
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 3px;
    white-space: nowrap;
}
/* La barra de escritorio (solo-desktop: hidden-xs hidden-sm) usa flex para
   centrar verticalmente logo y menú. El logo original era un <img> de una
   línea centrado con line-height:140px; nuestro logo de texto es de 2 líneas,
   así que ese truco lo dejaba descolgado. */
#header-top .wrapper-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#header .header_logo {
    float: none;
    line-height: normal;
}
#header .header_logo a { text-decoration: none; }
.navbar .brand .logo-text .logo-nombre { font-size: 19px; }
.navbar .brand .logo-text .logo-cargo { font-size: 8px; letter-spacing: 4px; }
/* Header móvil (oculto en escritorio con hidden-md hidden-lg). Flex a TODO el
   ancho para (1) centrar verticalmente logo y botón y (2) mandarlos a los
   extremos. Se fuerza width:100% porque entre 768–991px el .container de
   Bootstrap pasa a 750px centrado y agrupaba el contenido hacia el medio. */
@media (max-width: 991px) {
    .navbar.small .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: none;
        min-height: 64px;
        padding-left: 20px;
        padding-right: 20px;
    }
    /* Bootstrap añade .container::before/::after (clearfix). Al ser el contenedor
       flex, esos pseudo-elementos vacíos se vuelven ITEMS y descuadran el
       space-between (logo y botón quedaban al centro). Se anulan. */
    .navbar.small .container::before,
    .navbar.small .container::after { content: none; }
    .navbar.small .brand { margin: 0; padding: 0; float: none; display: flex; align-items: center; }
    .navbar.small .togglebutton { margin: 0; float: none; }
}

/* ---------- 2. MENÚ ---------- */
#header .header_menu .menu > li > a {
    color: #1B2A4A;
    letter-spacing: 2px;
}
#header .header_menu .menu > li > a:hover,
#header .header_menu .menu > li:hover > a,
#header .header_menu .menu > li.current-menu-item > a {
    color: #B8952A;
}
/* anula el naranja demo del hover sobre el <li> (styles.css:6110) */
.header_menu .menu li:hover a { color: #B8952A; }
.header_top.header_menu_home2.header-top-dleh {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 2px 14px rgba(27, 42, 74, 0.12);
}
/* Menú móvil: panel y hover en colores de marca (demo: negro + naranja) */
.menu-mobile { background: rgba(21, 33, 58, 0.97); }
.menu-mobile ul li a { letter-spacing: 1px; }
.menu-mobile ul li a:hover { color: #C9A86A; }
body.menu-open .wrapper { background: rgba(15, 26, 46, 0.5); }
/* Cabecera móvil: fondo blanco de marca (demo: negro translúcido) */
.navbar.small {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 2px 14px rgba(27, 42, 74, 0.12);
}
.navbar .togglebutton { border-color: #1B2A4A; }
.navbar .togglebutton > span { background: #1B2A4A; }

/* Más aire respecto al borde de la pantalla en móvil: el .container trae 15px;
   solo en teléfonos lo subimos a 20px. No toca escritorio (≥768px) ni las
   secciones full-width, que usan .container-fluid (hero y banda del slider). */
@media (max-width: 767px) {
    .container { padding-left: 20px; padding-right: 20px; }
}

/* ---------- 3. PORTADA (HERO) ---------- */
.section-slider.home4 .img_slider img {
    width: 100%;
    height: 82vh;
    min-height: 480px;
    object-fit: cover;
}
.section-slider.home4 .owl-stage-outer .item:after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(15, 26, 46, 0.62) 0%, rgba(15, 26, 46, 0.28) 55%, rgba(15, 26, 46, 0.05) 100%);
    z-index: 1;
}
.section-slider.home4 .owl-stage-outer .item .caption {
    top: 50%;
    left: 8%;
    right: 18%;
    transform: translateY(-50%);
    z-index: 2;
}
.section-slider.home4 .owl-stage-outer .item .caption h1,
.section-slider.home4 .owl-stage-outer .item .caption h3 {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    line-height: 1.25;
    color: #FFFFFF;
    border-bottom: none;
    white-space: normal;
    margin: 0 0 18px;
    max-width: 640px;
}
.section-slider.home4 .owl-stage-outer .item .caption .sub {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
    max-width: 520px;
    margin: 0 0 30px;
}
@media (max-width: 991px) {
    .section-slider.home4 .owl-stage-outer .item .caption h1,
    .section-slider.home4 .owl-stage-outer .item .caption h3 { font-size: 30px !important; }
    .section-slider.home4 .owl-stage-outer .item .caption .sub { font-size: 14px; }
}
@media (max-width: 600px) {
    .section-slider.home4 .owl-stage-outer .item .caption { right: 8%; top: 50%; }
    .section-slider.home4 .owl-stage-outer .item .caption h1,
    .section-slider.home4 .owl-stage-outer .item .caption h3 { font-size: 22px !important; }
    .section-slider.home4 .owl-stage-outer .item .caption .sub { display: none; }
}
.section-slider.home4 .owl-nav { z-index: 3; }
/* La demo fuerza width:200% !important en móvil (styles.css:7655) — restaurar 100% */
@media (max-width: 991px) {
    .section-slider.home4 .owl-carousel .owl-item img,
    .section-slider.home4 .img_slider img {
        width: 100% !important;
    }
}
/* Puntos del slider en colores de marca */
.section-slider.home4 .owl-dots { text-align: center; margin-top: 12px; }
.section-slider.home4 .owl-dots .owl-dot span { background: #D6D2CB; }
.section-slider.home4 .owl-dots .owl-dot.active span,
.section-slider.home4 .owl-dots .owl-dot:hover span { background: #B8952A; }

/* ---------- 4. BOTONES CTA ----------
   Navy + blanco (13:1 AA) por defecto; hover dorado + navy (4,6:1 AA). */
.btn-wsp {
    display: inline-block;
    padding: 14px 34px;
    background: #1B2A4A;
    color: #FFFFFF !important;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 1px solid #1B2A4A;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.btn-wsp:hover, .btn-wsp:focus {
    background: #C9A86A;
    border-color: #C9A86A;
    color: #1B2A4A !important;
}
.btn-wsp i { margin-right: 8px; }
.btn-wsp--outline {
    background: transparent;
    border-color: #1B2A4A;
    color: #1B2A4A !important;
}
.btn-wsp--outline:hover { background: #1B2A4A; color: #FFFFFF !important; }
@media (max-width: 480px) {
    .btn-wsp { padding: 12px 20px; letter-spacing: 2px; }
}

/* ---------- 5. TITULARES Y LÍNEAS DE SECCIÓN ----------
   Selectores con la especificidad de la demo para ganar la cascada. */
.heading, .title-all,
.section-our-work .heading,
.section-service .heading,
.section-home-about .text .title { color: #1B2A4A; }
.line, .mine_line { background: #B8952A !important; border-color: #B8952A !important; }
/* .title-all de la demo trae capitalize + adorno PNG — anular */
.title-all {
    text-transform: none;
    background-image: none;
}
/* separador gris de la demo sobre "Conceptos residenciales" — anular */
.section-our-work .heading { border-top: none; }
.section-service .sub-title { color: #555555; }

/* ---------- 6. QUIÉN SOY (Home) ---------- */
.section-home-about.home4 .text p { color: #555555; }
.section-home-about.home4 .demo-img img { box-shadow: 20px 20px 0 #F7F5F2; }

/* ---------- 7. PILARES DE MARCA ---------- */
.section-pilares {
    background: #F7F5F2;
    padding: 85px 0 60px;
}
/* .heading/.line no tienen estilos globales en la demo: replicarlos aquí */
.section-pilares .heading {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    color: #1B2A4A;
    text-align: center;
    margin: 0;
}
.section-pilares .line {
    width: 60px;
    height: 2px;
    margin: 20px auto 55px;
    background: #B8952A;
}
@media (max-width: 767px) {
    .section-pilares .heading { font-size: 32px; }
}
.section-pilares .pilar {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 22px;
}
.section-pilares .pilar .pilar-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 24px;
    border: 1px solid #C9A86A;
    border-radius: 50%;
    line-height: 82px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.section-pilares .pilar .pilar-icon i {
    font-size: 32px;
    color: #B8952A;
    line-height: inherit;
    transition: color 0.3s ease;
}
.section-pilares .pilar:hover .pilar-icon { background: #1B2A4A; border-color: #1B2A4A; }
.section-pilares .pilar:hover .pilar-icon i { color: #C9A86A; }
.section-pilares .pilar h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #1B2A4A;
    margin: 0 0 12px;
}
.section-pilares .pilar p {
    font-size: 13px;
    line-height: 1.8;
    color: #6B6B6B;
    margin: 0;
}

/* ---------- 8. CONCEPTOS RESIDENCIALES (galería) ----------
   La demo pinta borde naranja #e09300 en activo/hover (styles.css:9583-9606):
   replicar sus selectores para ganar la cascada. */
.wrap-blog .gallery-restaurant ul li a {
    color: #555555;
    letter-spacing: 2px;
}
.wrap-blog .gallery-restaurant ul li a:hover,
.wrap-blog .gallery-restaurant ul li a:focus {
    border: 1px solid #C9A86A;
    color: #8F731F;
}
.wrap-blog .gallery-restaurant ul li.active > a,
.wrap-blog .gallery-restaurant ul li.active > a:hover,
.wrap-blog .gallery-restaurant ul li.active > a:focus {
    border: 1px solid #B8952A;
    color: #8F731F;
}
.item-isotope .wrap-box-1 { position: relative; overflow: hidden; }
.item-isotope .concepto-tag {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 30px 18px 14px;
    background: linear-gradient(180deg, rgba(15, 26, 46, 0) 0%, rgba(15, 26, 46, 0.82) 100%);
    color: #FFFFFF;
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.item-isotope .concepto-tag small {
    display: block;
    color: #C9A86A;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.item-isotope .wrap-box-1:hover .concepto-tag { opacity: 1; }
/* En táctil no hay hover: etiquetas siempre visibles */
@media (max-width: 991px) {
    .item-isotope .concepto-tag { opacity: 1; }
}

/* ---------- 9. SERVICIOS (tarjetas Home) ---------- */
.section-service .content .icon {
    margin-right: 20px;
    min-width: 44px;
}
.section-service .content .icon i {
    font-size: 38px;
    color: #B8952A;
    line-height: 1.2;
}
.section-service .content .text .skill {
    color: #1B2A4A;
    font-size: 20px;
    line-height: 1.3;
}
.section-service .content .content_skill p { color: #6B6B6B; }
/* separación vertical entre tarjetas al apilarse (la demo solo la da <480px) */
@media (max-width: 991px) {
    .section-service .content { margin-bottom: 30px; }
}
.ver-mas {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8F731F !important; /* dorado AA para texto pequeño */
    text-decoration: none !important;
    transition: color 0.3s ease;
}
.ver-mas i { margin-left: 6px; transition: margin 0.3s ease; }
.ver-mas:hover { color: #1B2A4A !important; }
.ver-mas:hover i { margin-left: 12px; }

/* ---------- 10. SLIDER DE PRESENTACIÓN (3 puntos) ----------
   La demo (styles.css:10165-10232) impone fondo PNG, altura fija 600px y
   .content en posición absoluta — se resetea todo con su misma especificidad. */
.section-service #owl-service .item {
    text-align: center;
    background-image: none;
    height: auto;
    padding-bottom: 20px;
}
.section-service #owl-service .item .img_slider { padding-top: 0; }
/* Imagen circular (como la plantilla original), recortada al centro */
.section-service #owl-service .item .img_slider img {
    width: 200px !important;
    height: 200px;
    max-width: none;
    max-height: none;
    margin: 0 auto;
    border-radius: 50%;
    object-fit: cover;
    /*border: 6px solid #FFFFFF;*/
    /*box-shadow: 0 12px 30px rgba(27, 42, 74, 0.15);*/
}
.section-service #owl-service .item .name {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    color: #1B2A4A;
    margin-top: 28px;
}
.section-service #owl-service .item .mine_line {
    width: 44px;
    height: 2px;
    margin: 14px auto;
}
.section-service #owl-service .item .job {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #8F731F;
}
.section-service #owl-service .item .content {
    position: static;
    transform: none;
    width: auto;
    max-width: 700px;
    margin: 18px auto 0;
    padding: 0 20px;
    font-size: 14px;
    line-height: 2;
    color: #555555;
}
.section-service #owl-service .owl-dots {
    position: static;
    transform: none;
    margin-top: 26px;
    text-align: center;
}
.section-service #owl-service .owl-dots .owl-dot { border: 1px solid #B8952A; }
.section-service #owl-service .owl-dot.active { background: #B8952A; }
/* Banda de fondo crema que separa el slider del blanco de la página y
   contiene los puntitos de navegación. El slider vive en
   .section-service > .container-fluid (las tarjetas usan .container). */
.section-service #owl-service { margin-top: 0; }
.section-service .container-fluid {
    background: #F7F5F2;
    margin-top: 70px;
    padding: 70px 0 55px;
}
@media (max-width: 767px) {
    .section-service .container-fluid { margin-top: 45px; padding: 45px 0 40px; }
}

/* ---------- 11. BANNER DE PÁGINAS INTERNAS ---------- */
.banner-blog {
    background-image: url("../img/portada.png");
    min-height: 340px;
}
.banner-blog:before { background: rgba(15, 26, 46, 0.55); }
/* background-attachment:fixed de la demo falla en iOS Safari */
@media (max-width: 991px) {
    .banner-blog { background-attachment: scroll; }
}
.banner-blog .img_banner .banner-h4 {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: 4px;
    text-align: center;
    width: 90%;
    white-space: normal;
    border-bottom: none; /* la demo subraya .banner-h4 en blanco */
}
@media (max-width: 767px) {
    .banner-blog .img_banner .banner-h4 { font-size: 28px; }
}
.banner-blog .img_banner .banner-h4:after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    background: #C9A86A;
    margin: 18px auto 0;
}

/* ---------- 12. SECCIONES DE CONTENIDO INTERNO ---------- */
.bg-crema { background: #F7F5F2; }
/* ritmo vertical uniforme (demo: 65px arriba / 25px abajo) */
.about1 { padding: 75px 0 65px; }
.about1 p { color: #555555; }
.seccion-filosofia { padding: 80px 0; }
.filosofia-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 24px;
    line-height: 1.7;
    color: #1B2A4A;
    max-width: 760px;
    margin: 0 auto;
}
.filosofia-quote:before { content: "“"; color: #C9A86A; font-size: 48px; line-height: 0; vertical-align: -14px; margin-right: 6px; }

/* Bloques de servicio detallado (servicios.html) */
.servicio-detalle { padding: 80px 0; }
.servicio-detalle .demo-img img { width: 100%; box-shadow: 20px 20px 0 rgba(201, 168, 106, 0.18); }
/* Aire entre imagen y texto (el gutter por defecto de 30px se veía apretado).
   El texto siempre es el 1er hijo; con col-md-push-6 queda visualmente a la
   derecha (imagen a la izquierda), así que el aire va del lado que toca. */
@media (min-width: 992px) {
    .servicio-detalle .col-md-6:first-child:not(.col-md-push-6) { padding-right: 45px; }
    .servicio-detalle .col-md-push-6 { padding-left: 45px; }
}
.servicio-detalle h3 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    color: #1B2A4A;
    margin: 0 0 8px;
}
.servicio-detalle .servicio-num {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #8F731F; /* dorado AA para texto pequeño */
    display: block;
    margin-bottom: 14px;
}
.servicio-detalle p { color: #555555; line-height: 2; }
.que-incluye {
    list-style: none;
    padding: 0;
    margin: 22px 0 30px;
}
.que-incluye li {
    position: relative;
    padding: 5px 0 5px 30px;
    color: #555555;
    line-height: 1.7;
}
.que-incluye li:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    position: absolute;
    left: 0;
    top: 5px;
    color: #B8952A;
    font-size: 13px;
}
@media (max-width: 991px) {
    .servicio-detalle { padding: 55px 0; }
    /* Al apilarse, la imagen queda debajo del texto (que termina en el botón):
       margin-top separa el botón de la imagen. */
    .servicio-detalle .demo-img { margin-top: 34px; margin-bottom: 35px; }
}

/* Valores diferenciales (sobre-mi.html): rejilla de 2 columnas con tarjetas
   crema, marcador dorado y realce al pasar el cursor. Mantiene el key visual
   (navy + dorado + crema, minimalista). */
.valores-lista {
    list-style: none;
    padding: 0;
    margin: 45px auto 10px;
    max-width: 820px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    text-align: left;
}
.valores-lista li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #F7F5F2;
    border-left: 2px solid transparent;
    color: #1B2A4A;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.5;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
/* Icono + texto centrados verticalmente en la tarjeta (align-items:center),
   así el ítem de 1 línea queda al centro del rectángulo, no pegado arriba. */
.valores-lista li:before {
    content: "\f219";
    font-family: 'FontAwesome';
    flex-shrink: 0;
    color: #B8952A;
    font-size: 14px;
    line-height: 1;
}
.valores-lista li:hover {
    background: #FFFFFF;
    border-left-color: #B8952A;
    box-shadow: 0 10px 26px rgba(27, 42, 74, 0.10);
    transform: translateY(-2px);
}
@media (max-width: 600px) {
    .valores-lista { grid-template-columns: 1fr; max-width: 420px; }
}

/* CTA final de página: tarjeta navy sobre fondo claro, así NO se funde con
   el footer (que también es navy). El navy va en el .container (tarjeta
   centrada), no en la sección a todo el ancho. */
.cta-final {
    background: #FFFFFF;
    padding: 70px 15px;
    text-align: center;
}
.cta-final .container {
    background: #1B2A4A;
    border-radius: 8px;
    padding: 62px 30px;
    box-shadow: 0 20px 50px rgba(15, 26, 46, 0.18);
}
.cta-final h2 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    color: #FFFFFF;
    margin: 0 0 12px;
}
/* acento dorado bajo el título (mismo key visual que las .line de sección) */
.cta-final h2:after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: #C9A86A;
    margin: 18px auto 0;
}
.cta-final p {
    color: rgba(255, 255, 255, 0.78);
    max-width: 620px;
    margin: 22px auto 30px;
    line-height: 1.9;
}
/* El botón navy por defecto sería invisible sobre la tarjeta navy: dorado */
.cta-final .btn-wsp {
    background: #C9A86A;
    border-color: #C9A86A;
    color: #1B2A4A !important;
}
.cta-final .btn-wsp:hover { background: #FFFFFF; border-color: #FFFFFF; color: #1B2A4A !important; }
@media (max-width: 767px) {
    .cta-final { padding: 45px 15px; }
    .cta-final .container { padding: 45px 22px; }
    .cta-final h2 { font-size: 26px; }
}

/* ---------- 13. CONTACTO ---------- */
.contact-1.contact-v { padding-bottom: 80px; }
.contact-1.contact-v .wrap i { color: #B8952A; }
.contact-1.contact-v .wrap h4 { color: #1B2A4A; letter-spacing: 3px; }
.contact-1.contact-v .wrap p, .contact-1.contact-v .wrap p a {
    color: #555555;
    text-decoration: none; /* la demo subraya en naranja */
}
.contact-1.contact-v .wrap p a:hover { color: #8F731F; text-decoration: underline; }
/* con 4 cajas en 2×2 (768-991px) la 3ª pierde el borde inferior de la demo */
@media (min-width: 768px) and (max-width: 991px) {
    .contact-1.contact-v .no-pagding:nth-child(3) .wrap { border-bottom: 1px solid #d6d6d6; }
}

/* ---------- 14. FOOTER ---------- */
#footer_home3 .footer_content_home3 {
    background: #1B2A4A;
    padding: 65px 0 55px;
}
.footer-brand { text-align: center; margin-bottom: 32px; }
.footer-brand .logo-nombre { color: #FFFFFF; font-size: 26px; }
.footer-brand .logo-cargo { color: #C9A86A; }
.footer-contact ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.footer-contact ul li {
    display: inline-block;
    margin: 0 14px;
}
.footer-contact ul li a {
    display: inline-block;
    width: 46px;
    height: 46px;
    line-height: 44px;
    text-align: center;
    border: 1px solid rgba(201, 168, 106, 0.55);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.footer-contact ul li a:hover {
    background: #B8952A;
    border-color: #B8952A;
    color: #FFFFFF;
}
.footer-cap {
    text-align: center;
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.footer-cap a { color: #C9A86A; }
#footer_home3 .footer_bottom {
    background: #14203A;
    padding: 20px 0;
}
#footer_home3 .footer_bottom p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin: 0;
    padding: 0;          /* la demo añade 30px extra */
    border-top: none;    /* hairline gris de la demo sobre navy */
    text-align: center;
}
#footer_home3 .footer_bottom p a { color: #C9A86A; }
#footer_home3 .footer_bottom p a:hover { color: #FFFFFF; }

/* ---------- 15. BOTÓN FLOTANTE DE WHATSAPP ---------- */
.wsp-float {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #FFFFFF !important;
    font-size: 28px;
    line-height: 56px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.25s ease;
}
.wsp-float:hover { transform: scale(1.1); color: #FFFFFF; }

/* ---------- 16. VARIOS ---------- */
.servicio-detalle[id] { scroll-margin-top: 100px; }
/* separado del botón de WhatsApp (demo: misma esquina inferior derecha) */
.scrollToTop {
    background: #1B2A4A;
    color: #fff;
    right: 26px;
    bottom: 100px;
}
.scrollToTop:hover { background: #B8952A; color: #fff; }
::selection { background: #C9A86A; color: #fff; }
a { transition: color 0.25s ease; }
/* red de seguridad: la demo compila body { color:#fff } */
body { color: #555555; }
/* accesibilidad: foco visible (la demo elimina outline) y táctil */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #8F731F;
    outline-offset: 2px;
}
a, button { touch-action: manipulation; }
/* enlace "saltar al contenido" */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1200;
    padding: 10px 18px;
    background: #1B2A4A;
    color: #FFFFFF;
    font-size: 13px;
    letter-spacing: 1px;
}
.skip-link:focus {
    left: 0;
    color: #FFFFFF;
}
/* respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}