/* custom.css */
.container-fluid {
  background-color: #AB9558;   /* color de fondo */
}

/* custom.css */
.section-header {
  background-color: #272932;            /* mismo color que ya estabas usando */
}

.diagonal-divider {
    background-color: #AB9558; 
    line-height: 0;           /* elimina espacios extra */
}

.diagonal-blanco {
    background-color: #FFFFFF; 
}

.diagonal-divider svg {
  display: block;
  width: 100%;
  height: 70px;             /* alto del separador (ajústalo) */
}

/* ---- */

.projects-section {
  position: relative;
  background: #AB9558; /* centro blanco */
  z-index: 0;
}

/* borde superior */
.projects-section::before,
.projects-section::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%; /* grosor del degradado */
  z-index: -1;
}

.services-section {
  position: relative;
  background: #272932; /* centro blanco */
  z-index: 0;
}

/* Botones de paginador noticias */
#newsPager .btn {
  background-color: #AB9558;   /* azul corporativo */
  color: #fff;                 /* texto blanco */
  border: none;
}

/* Hover */
#newsPager .btn:hover {
  background-color: #272932;
  color: #fff;
}

/* Botón activo (el que tiene .btn-light en tu script) */
#newsPager .btn-light {
  background-color: #2729321d !important; /* gris oscuro */
  color: #000000 !important;
}

/* Fondo y colores de la navbar */
#main_nav { 
  background-color: #272932 !important; 
  min-height: var(--nav-height);
}
#main_nav .nav-link,
#main_nav .navbar-brand,
#main_nav .navbar-brand span {
  color: #AB9558 !important;
}
#main_nav .nav-link:hover,
#main_nav .navbar-brand:hover,
#main_nav .navbar-brand span:hover {
  color: #ffffff !important;
}

/* Logo escalable con el tamaño del texto */
#main_nav .navbar-brand .brand-logo {
  width: 1.6em;          /* escala con la fuente del h4 */
  height: 1.6em;         /* mantiene 1:1 */
  object-fit: cover;     /* recorta y centra cualquier imagen */
  border-radius: 6px;    /* si lo quieres redondo usa 50% */
  display: inline-block;
}

/* Evita que el contenido quede oculto bajo la navbar fija */
body { 
  padding-top: var(--nav-height);
}

/* -------- HERO -------- */

#heroCarousel .custom-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 50%;
  background-color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  margin: 0 6px;
  transition: transform .2s ease, background-color .2s ease;
}
#heroCarousel .custom-indicators .active {
  background-color: #AB9558;               /* tu dorado */
  transform: scale(1.15);
  border-color: #AB9558;
}

/* Controles compactos y bonitos */

#heroCarousel .hero-control i {
  font-size: 22px;
  line-height: 1;
}
#heroCarousel .hero-prev { left: 18px; }
#heroCarousel .hero-next { right: 18px; }

#heroCarousel .hero-control:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  background: rgba(39,41,50,.55);
  border-color: rgba(255,255,255,.6);
}

/* Degradado superior e inferior (overlay) */
#heroCarousel .hero-gradient{
  position: absolute;
  inset: 0;
  z-index: 1;               /* debajo del texto, sobre la imagen */
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(39, 41, 50, 0.992), rgba(39,41,50,0) 35%),
    linear-gradient(to top,    rgba(39,41,50,.55), rgba(39,41,50,0) 40%);
}
#heroCarousel .hero-caption{ z-index: 2; top:0; bottom:0; }

/* Texto del hero (tamaños fluidos + sombra) */
.hero-title{
  color:#fff;
  font-weight:700;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  font-size: clamp(28px, 4vw, 56px);
  margin-bottom:.25rem;
}
.hero-subtitle{
  color:#fff;
  opacity:.95;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
  font-size: clamp(16px, 1.8vw, 22px);
  margin-bottom:.75rem;
}

/* Indicadores: círculos perfectos */
#heroCarousel .custom-indicators{
  bottom: 18px;
  display:flex;
  gap:10px;
}
#heroCarousel .custom-indicators [data-bs-target]{
  width: 12px !important;
  height: 12px !important;
  padding: 0 !important;
  border-radius: 50% !important;     /* <-- redondo */
  background-color: rgba(255,255,255,.35);
  border: 2px solid rgba(255,255,255,.65);
  opacity: 1;                        /* override de Bootstrap */
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
#heroCarousel .custom-indicators .active{
  background-color: #272932;
  border-color: #AB9558;
  transform: scale(1.08);
}

/* Controles compactos (si los usas) */
#heroCarousel .hero-control{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background: rgba(39,41,50,.35);
  border:1px solid rgba(255,255,255,.35);
  color:#fff; display:grid; place-items:center;
  z-index:5;
}
#heroCarousel .hero-prev{ left:18px; }
#heroCarousel .hero-next{ right:18px; }

/* Responsive */
@media (max-width: 575.98px){
  #heroCarousel .carousel-inner{ height:56vh; min-height:360px; }
}

#heroCarousel { position: relative; }

/* Hero caption centrado */
#heroCarousel .hero-caption {
  position: absolute;
  inset: 0;                          /* ocupa todo el carrusel */
  display: flex;
  align-items: center;               /* centra en eje Y */
  justify-content: center;           /* centra en eje X */
  flex-direction: column;
  text-align: center;
  z-index: 3;                        /* sobre imágenes y degradados */
  pointer-events: none;              /* evita bloquear clics */
}

/* Efecto deslizante más suave en el hero */
#heroCarousel .carousel-item {
  /* transición del slide */
  transition: transform .8s cubic-bezier(.22,.61,.36,1); /* ease-out suave */
}

/* Degradado fijo solo en la parte inferior del hero */
#heroCarousel .hero-bottom-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px; /* altura del degradado */
  pointer-events: none; /* no bloquea clics */
  z-index: 2; /* por encima de la imagen, debajo del texto */
  background: linear-gradient(to top, #AB9558, rgba(39,41,50,0));
}

/*! BOTÓN DEL HERO */
.hero-btn {
  border-radius: 50px;                 /* pill */
  padding: .6rem 1.8rem;
  color: #AB9558;                      /* texto dorado */
  background-color: #272932 ;       /* fondo transparente */
  font-weight: 500;
  transition: all .3s ease;
}



/* Hover: fondo dorado + texto blanco */
.hero-btn:hover {
  background-color: #272932;
  color: #ffffff;
  text-decoration: none;               /* quita subrayado */
  transform: translateY(-2px);         /* pequeño lift */
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
}

/* Caption no bloquea eventos, pero sí dejamos clics en botones */
#heroCarousel .hero-caption {
  pointer-events: none;
}

#heroCarousel .hero-caption .hero-btn {
  pointer-events: auto;   /* <- reactivamos clics */
}

/* Nav links: color y subrayado animado */
#main_nav .nav-link{
  position: relative;
  color: #AB9558 !important;              /* color de tus links */
  transition: color .2s ease;
}

/* Línea inferior “subrayado” (oculta por defecto) */
#main_nav .nav-link::after{
  content:"";
  position:absolute;
  left: 0.75rem;                           /* margen hacia adentro; ajusta si usas px-3 */
  right: 0.75rem;
  bottom: -0.15rem;                        /* ligeramente pegado al borde inferior */
  height: 2px;                             /* grosor de la línea */
  background: #AB9558;                     /* color del indicador */
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}

/* Activo u hover = mostrar línea */
#main_nav .nav-link.active::after,
#main_nav .nav-link:hover::after{
  transform: scaleX(1);
}

/* (Opcional) Al pasar el mouse, aclarar el texto */
#main_nav .nav-link:hover{
  color: #ffffff !important;
}
#main_nav .nav-link:hover::after{
  background: #ffffff;
}

/* Asegura que los enlaces “pill” no tapen la línea con su borde */
#main_nav .nav-link.btn-outline-primary{
  border-color: transparent !important;
}

#main_nav .brand-logo {
  transition: filter .3s ease;
}
#main_nav .brand-logo:hover {
  filter: brightness(0) invert(1);
}

/* Estado normal */
#main_nav .navbar-brand {
  color: #AB9558 !important;
  transition: color .3s ease;
}
#main_nav .navbar-brand .brand-logo {
  transition: filter .3s ease, content .3s ease, opacity .3s ease;
}

/* Estado base: dorado */
#main_nav .navbar-brand {
  color: #AB9558 !important;
  transition: color .3s ease;
}

/* Asegura que el span herede el color del contenedor */
#main_nav .navbar-brand span {
  color: inherit !important;
  transition: color .3s ease;
}

/* Logo: transición suave */
#main_nav .navbar-brand .brand-logo {
  transition: filter .3s ease, opacity .3s ease;
}

/* HOVER en el BLOQUE (logo o texto): cambian ambos */
#main_nav .navbar-brand:hover {
  color: #fff !important;                 /* texto a blanco */
}
#main_nav .navbar-brand:hover .brand-logo {
  /* Opción 100% CSS sin cambiar imagen: invierte a blanco */
  filter: brightness(0) invert(1);
}

/* IMPORTANTE: desactivar hover directo en el logo */
#main_nav .brand-logo:hover { 
  filter: none;
}

/* Botones del paginador Noticias */
#newsPager .btn {
  border-radius: 50px !important;   /* pill redondeado */
  padding: .5rem 1rem;              /* un poco más de espacio */
  margin: 0 .25rem;                 /* separación entre botones */
  transition: all .2s ease;
}

/* Hover */
#newsPager .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Botón activo */
#newsPager .btn.active,
#newsPager .btn:focus {
  background-color: #AB9558 !important; /* dorado */
  border-color: #AB9558 !important;
  color: #fff !important;
}

/* Quitar borde/outline al hacer clic o foco en los filtros */
.filter-btn:focus,
.filter-btn:active,
.filter-btn.active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.footer a {
  transition: color .3s ease;
  color: #272932 !important;
}

.footer h5 {
  color: #272932 !important;
}
.footer p {
  color: #272932 !important;
}
.footer .bx {
  transition: transform .3s ease;
}
.footer .bx:hover {
  transform: scale(1.2);
  color: #ffffff !important;
}

/* Enlaces del footer */
footer .list-unstyled a {
  transition: color .3s ease;
  color: #272932 !important; /* dorado al hover */
}

footer .list-unstyled a:hover {
  color: #ffffff !important; /* dorado al hover */
  text-decoration: underline; /* opcional: subrayado elegante */
}

footer small {
  color: #AB9558 !important;
}

.footer .brand-logo-footer {
  filter: brightness(0) saturate(100%) invert(13%) sepia(6%) saturate(2393%) hue-rotate(186deg) brightness(94%) contrast(89%);
}

/* Sección Historia */
.historia-section {
  background-color: #272932; /* Fondo predeterminado */
}

.historia-title {
  color: #AB9558; /* Título */
}

.historia-text {
  color: #ffffff; /* Párrafos */
  line-height: 1.7;
}

/* ===== Nuestros valores ===== */
.valores-section {
  background-color: #AB9558;           /* Fondo de la sección */
}

.valores-card .card-body { 
  color: #ffffff;                         /* Texto de párrafos */
  line-height: 1.7;
}

.valores-item-title { 
  color: #AB9558;                      /* Título de cada tarjeta */
}

/* Icono dentro del círculo: ligera animación */
.valores-ico {
  transition: transform .18s ease, opacity .18s ease, color .18s ease;
}

.valores-card:hover .valores-ico {
  transform: scale(1.08);
  opacity: .95;
}

.valores-card:hover {
  box-shadow: 0 18px 38px rgba(39,41,50,.18);
  border-color: rgba(7, 7, 7, 0.45);
}

/* ===== Contacto – paleta y base ===== */
:root{
  --brand-dark: #272932;
  --brand-gold: #AB9558;
  --brand-gold-dark: #8f7c4d;
  --ink-400: #555;
  --bg-soft: #f7f7f7;
}

/* Fondo suave de la sección */
.contacto-section{
  background: #272932;
}

/* ===== Tarjetas de info (WhatsApp/Email/etc.) ===== */
.contact-card{
  padding: .75rem 1rem;
  border: 1px solid rgba(39,41,50,.08);
  border-radius: 14px;
  background: #fff;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.contact-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.14);
  border-color: rgba(171,149,88,.35);
}

/* Icono redondo con micro-animación */
.contact-icon{
  width:56px; height:56px;
  border-radius: 14px;
  display:grid; place-items:center;
  color:#fff;
  background: linear-gradient(135deg, var(--brand-dark), #1e2130);
  transition: transform .2s ease, background .2s ease;
}
.contact-card:hover .contact-icon{
  transform: scale(1.06);
  background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dark));
}

/* ===== Formulario ===== */
.contact-form .form-control{
  border-radius: 14px;
  border: 1px solid rgba(39,41,50,.18);
  background-color: #fff;
  color: var(--ink-400);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.contact-form .form-control:focus{
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 .2rem rgba(171,149,88,.25);
}

/* Ajuste del label flotante para inputs redondeados */

.contact-form .form-floating>label{
  color: #7a7a7a;
}


/* Mapa responsivo con borde redondeado */
.map-wrapper{
  border: 1px solid rgba(39,41,50,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  background: #fff;
}

/* Hero about */
.hero-about {
  background: linear-gradient(135deg, #272932 0%, #343743 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-about .text-highlight {
  color: #AB9558; /* dorado marca */
}
.hero-about .hero-img {
  max-width: 90%;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
  transition: transform .3s ease;
}
.hero-about .hero-img:hover {
  transform: scale(1.05);
}
.hero-about .btn {
  border: 2px solid #AB9558;
  color: #AB9558;
  font-weight: 600;
  transition: all .3s ease;
}
.hero-about .btn:hover {
  background-color: #AB9558;
  color: #272932;
  box-shadow: 0 6px 16px rgba(171,149,88,.35);
}
/* separador */
.hero-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #AB9558;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.hero-img {
  width: 300px;         /* ajusta el tamaño según prefieras */
  height: 350px;        /* fuerza la proporción cuadrada */
  object-fit: cover;    /* recorta la imagen manteniendo proporción */
  border-radius: 20px;  /* bordes redondeados */
}

/* Animación para imágenes de la historia */
.historia-section img {
  transition: transform .4s ease, box-shadow .4s ease;
}

.historia-section img:hover {
  transform: scale(1.05); /* pequeño zoom */
  box-shadow: 0 12px 24px rgba(0,0,0,.25); /* sombra destacada */
}

/* ===== LOGIN ===== */
.auth-body {
  background:
    radial-gradient(900px 500px at 0% -10%, rgba(171,149,88,.12), transparent 60%),
    linear-gradient(180deg, rgba(39,41,50,.06), rgba(39,41,50,0));
}
.auth-card {
  border-radius: 16px;
}
.auth-card .form-control {
  border-radius: 14px;
}
.news-card img { object-fit: cover; }

/* ===== ADMIN ===== */
.admin-topbar{
  background: #272932;
}
.admin-topbar .brand-logo{
  width: 24px; height: 24px; object-fit: contain;
  filter: brightness(0) invert(1);
}

.admin-layout{
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 56px);
}

.admin-sidebar{
  background: linear-gradient(180deg, #272932, #2f323f);
  color: #fff;
  padding: 20px;
}
.admin-link{
  display: block;
  color: #e8e8e8;
  text-decoration: none;
  padding: 8px 0;
  border-radius: 6px;
  transition: color .2s ease, background-color .2s ease, padding-left .2s ease;
}
.admin-link:hover{
  color: #fff;
  background: rgba(171,149,88,.18);
  padding-left: 6px;
}
.admin-content{
  padding: 24px;
  background: #f6f7f9;
}

/* Mesas (tablas) coherentes con el sitio */
.table thead th{
  border-bottom-width: 1px;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-accent-bg: rgba(39,41,50,.02);
}

/* --- Fix visibilidad de botones en tablas del Admin --- */
.admin-content .table .btn {
  opacity: 1 !important;
  filter: none !important;
  color: #fff !important;           /* texto visible */
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

/* Colores sólidos (Bootstrap defaults) */
.admin-content .table .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}
.admin-content .table .btn-primary:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
}

.admin-content .table .btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}
.admin-content .table .btn-danger:hover {
  background-color: #bb2d3b !important;
  border-color: #b02a37 !important;
}

.admin-content .table .btn-secondary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}
.admin-content .table .btn-secondary:hover {
  background-color: #5c636a !important;
  border-color: #565e64 !important;
}

/* Por si algún estilo global los dejaba “transparentes” */
.admin-content .table .btn,
.admin-content .table .btn:visited,
.admin-content .table .btn:active {
  background-image: none !important;
}

/* Quita cualquier sombra/outline raro que tape el texto */
.admin-content .table .btn:focus {
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25) !important; /* enfoque accesible */
}


/* Fix visibilidad botón Guardar */
.admin-content .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
  opacity: 1 !important;
}

.admin-content .btn-primary:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
}

/* Estado base */
.admin-sidebar .admin-link{
  position: relative;
  display: block;
  color: #e8e8e8;
  text-decoration: none;
  padding: 8px 12px 8px 16px;
  border-radius: 8px;
  transition: color .2s ease, background-color .2s ease, padding-left .2s ease;
}

/* Hover */
.admin-sidebar .admin-link:hover{
  color: #fff;
  background: rgba(171,149,88,.16);
  padding-left: 20px;
}

/* Activo (ruta / sección en pantalla) */
.admin-sidebar .admin-link.active{
  color: #fff;
  background: rgba(171,149,88,.22);
}
.admin-sidebar .admin-link.active::before{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #AB9558;  /* dorado */
  border-radius: 2px;
}

/* La imagen SIEMPRE llena la tarjeta */
.services-section .recent-work-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Texto SIEMPRE visible: sin cortes ni ellipsis */
.services-section .recent-work-content .card-title{
  color: #fff;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  word-break: normal;
  overflow: visible;            /* <- nada de line-clamp */
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.services-section .recent-work-content .card-text{
  color: #e9e9e9;
  margin-top: .25rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* Hover: mueve (lift) y realza sombra/borde – mantener tu animación base */
.services-section .recent-work:hover,
.services-section .recent-work:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  border-color: rgba(171,149,88,.35); /* dorado sutil de tu paleta */
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .services-section .recent-work{ transition: none; }
}

/* Centrar la grilla y evitar que se “pegue” a la derecha */
.services-grid {
  max-width: 1900px;        /* controla el ancho total de la grilla */
  margin-inline: auto;      /* centra la grilla dentro del container */
}

/* Separación cómoda entre tarjetas (sin desplazarlas) */
.services-section .row {
  --bs-gutter-x: 1rem;    /* espacio horizontal */
  --bs-gutter-y: 1rem;    /* espacio vertical */
}

/* Tamaño y animación que ya te gustaron (con pequeño lift) */
.services-section .recent-work{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(39,41,50,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  aspect-ratio: 5 / 3;
  min-height: 200px;
}

.services-section .recent-work:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  border-color: rgba(171,149,88,.35);
}

@media (max-width: 768px) {
  #heroCarousel .carousel-inner {
    min-height: 50vh;
  }
  #heroCarousel .carousel-item img {
    min-height: 50vh;
  }
}

/* Quitar recuadro morado al hacer clic/focus en las cards de noticias */
#newsGrid a:focus,
#newsGrid a:active {
  outline: none !important;
  box-shadow: none !important;
}

/* ===== Tarjetas de Proyectos ===== */
.projects-section .card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(39,41,50,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  background: #fff;
}

.projects-section .card-img-top {
  width: 100%;
  aspect-ratio: 3 / 2;   /* relación horizontal */
  object-fit: cover;     /* recorta sin deformar */
  display: block;
}

/* Título y subtítulo */
.projects-section .card-title {
  font-weight: 700;
  color: #272932;          /* gris oscuro corporativo */
}

.projects-section .card-subtitle {
  color: #6c757d;          /* gris suave */
}

/* Badges personalizados */
.projects-section .badge {
  font-size: 0.75rem;
  border-radius: 12px;
  padding: .35rem .7rem;
  margin-right: .25rem;
  background-color: #AB9558; /* dorado corporativo */
  color: #fff;
  font-weight: 500;
  transition: all 0.25s ease;
}

.projects-section .badge:hover {
  background-color: #272932; /* gris oscuro en hover */
}

/* Arreglar scroll horizontal en móvil */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* SECCIÓN CLIENTES */

/* ===== Clientes ===== */
.clientes-section {
  background-color: #AB9558;   /* dorado corporativo, consistente con tu web */
}

/* Logos de clientes */
.cliente-logo {
  max-width: 140px;
  max-height: 80px;
  object-fit: contain;
  transition: transform .3s ease, box-shadow .3s ease;
  border-radius: 6px; /* opcional, por si quieres bordes suaves */
}

/* Hover: animación elegante */
.cliente-logo:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  border-radius: 6px; /* opcional, por si quieres bordes suaves */
}

/* ===== Separador Clientes (oscuro arriba, dorado abajo) ===== */
.clientes-separator {
  line-height: 0;
  overflow: hidden;
  background: #AB9558; /* color de arriba */
}

.clientes-separator svg {
  display: block;
  width: 100%;
  height: 70px;  /* altura ajustable */
}

.clientes-separator path {
  fill: #272932; /* color de abajo (logos) */
}

/* Modal de proyectos */
/* Quitar fondo del modal */
#projectModal .modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#projectModal .btn-close {
  all: unset;                  /* resetea todo el estilo default */
  cursor: pointer;
  position: absolute;
  top: 12px;                   /* margen desde borde superior */
  right: 16px;                 /* margen desde borde derecho */
  z-index: 10;
}

#projectModal .btn-close::before {
  content: "✕";
  font-size: 2rem;
  color: #272932;
  font-weight: bold;
  line-height: 1;
}

#projectModal .btn-close:hover::before {
  color: #AB9558;              /* dorado corporativo */
  transform: scale(1.15);
  transition: all 0.2s ease;
}

/* ===== FAQ: quitar borde morado de enfoque ===== */
.faq-section .accordion {
  /* Apaga el focus de Bootstrap en los botones del acordeón */
  --bs-accordion-btn-focus-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-border-color: transparent;
  --bs-accordion-active-bg: #272932;  /* abierto: fondo oscuro */
  --bs-accordion-active-color: #272932;   /* abierto: texto blanco */
}

.faq-section {
  background-color: #AB9558;   /* dorado corporativo */
  padding: 4rem 0;
}

.faq-section .accordion-button:focus,
.faq-section .accordion-button:active,
.faq-section .accordion-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ===== FAQ: esquinas siempre redondeadas (sin "salto") ===== */
.faq-section .accordion-flush .accordion-item {
  border: 0;
  border-radius: 14px;      /* radio constante para todo el bloque */
  overflow: hidden;         /* recorta contenido durante la animación */
  background: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.514);
  margin-bottom: 12px;
}

.faq-section .accordion-flush .accordion-button {
  border-radius: 14px !important;
  background: #272932;
  color: #ffffff;
  margin-bottom: .4rem; /* deja un espacio entre pregunta y respuesta */
}


.faq-section .accordion-flush .accordion-body {
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  background: #AB9558;
  color: #000000;
  line-height: 1.6;
}


/* Subtítulo pequeño (h6) en la izquierda */
.faq-section .col-lg-5 h6 {
  color: #272932 !important;   /* oscuro corporativo */
}

/* Título grande (h2) en la izquierda */
.faq-section .col-lg-5 h2 {
  color: #272932 !important;   /* blanco */
}

/* Párrafo introductorio */
.faq-section .col-lg-5 p {
  color: #272932 !important;   /* gris claro */
}

/* FAQ – cada bloque (pregunta/respuesta) como tarjeta independiente */
.faq-section .accordion-item {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 1.2rem;
}

/* Respuesta = tarjeta blanca separada */
.faq-section .accordion-body {
  border-radius: 14px;
  background: #fff;
  color: #272932;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* Flecha del acordeón siempre blanca */
.faq-section .accordion-button::after {
  filter: invert(100%) brightness(200%) !important;
}

/* FAQ: evitar cambio de color en la flecha y mantener tamaño estable */
.faq-section .accordion-button {
  border-radius: 14px !important;
  background: #272932 !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  margin-bottom: .6rem;
  border: none !important;       /* elimina bordes extra */
}

/* Cuando está abierta: no cambiar estilos */
.faq-section .accordion-button:not(.collapsed) {
  background: #272932 !important;
  color: #AB9558 !important;
  border: none !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

/* Flecha siempre blanca */
.faq-section .accordion-button::after {
  filter: invert(100%) brightness(200%) !important;
  transition: transform .3s ease;
}

/* Rotación suave al abrir/cerrar */
.faq-section .accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg);
}

/* ===== FAQ en tarjeta ===== */
.faq-section{
  background: #AB9558;
}

.faq-card{
  position: relative;
  background: #ffffff;               /* tono oscuro para contraste */
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  overflow: hidden;
}

/* barra superior sutil con color de marca */
.faq-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg,#242833 0%,#24283367 60%,#242833 100%);
  opacity:.95;
}

/* Tipografías dentro de la tarjeta */
.faq-card .faq-subtitle{ color:#AB9558; }
.faq-card p{ color:#c9cbd3; }

/* Acordeón estilizado */
.faq-card .accordion-item{
  background: transparent;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  overflow: hidden;
  margin-bottom: .75rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.faq-card .accordion-button{
  background: #2a2e39;
  color: #e9eaee;
  padding: 1rem 1.25rem;
  font-weight: 600;
  border: none;
}

.faq-card .accordion-button:focus{
  box-shadow: 0 0 0 .2rem rgba(171,149,88,.25);
}

.faq-card .accordion-button:not(.collapsed){
  background: #2f3440;
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.faq-card .accordion-body{
  background: #242833;
  color: #d7d9e0;
  line-height: 1.7;
}

/* Chevron personalizado */
.faq-card .accordion-button::after{
  background-image: none;
  content: "▾";
  font-size: 1rem;
  
  color: #000000;
}
.faq-card .accordion-button.collapsed::after{
  
  color: #000000;
}

/* Hover sutil */
.faq-card .accordion-item:hover{
  border-color: rgba(171, 149, 88, 0) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}

/* Responsive: reduce paddings en móvil */
@media (max-width: 575.98px){
  .faq-card{ padding: 1.25rem; }
}

/* Icono de Preguntas Frecuentes */
.faq-icon {
  color: #AB9558;       /* dorado corporativo */
  font-size: 1.6em;     /* tamaño proporcional */
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .2s ease, color .3s ease;
}
.faq-icon:hover {
  color: #fff;          /* se ilumina en hover */
  transform: scale(1.1);
}

/* Subtítulo y párrafo de la sección Contacto */
.contacto-subtitle {
  color: #AB9558;    /* dorado corporativo */
  font-size: 1.4rem;
  margin-bottom: .5rem;
}

.contacto-text {
  color: #ffffff;    /* texto claro */
  font-size: 1rem;
  max-width: 720px;
  margin: 0 auto;    /* centrado */
  line-height: 1.7;
  opacity: .9;
}

/* Texto de la sección Nosotros */
.nosotros-text {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* consistente con resto */
  font-size: 1.05rem;        /* un poco más grande y legible */
  line-height: 1.8;          /* mejora la lectura */
  color: #f1f1f1;            /* claro sobre fondo oscuro */
  margin-bottom: 1.2rem;     /* más espacio entre párrafos */
}

/* En pantallas grandes, dale un poco más de aire */
@media (min-width: 992px) {
  .nosotros-text {
    font-size: 1.1rem;
    line-height: 1.9;
    max-width: 90%;          /* para no ocupar todo el ancho */
  }
}

/*! --- TOGGLER DORADO NORMAL + BLANCO EN HOVER --- */

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgb(171,149,88)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

/* Hover = blanco */
.navbar-light .navbar-toggler:hover .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.navbar-toggler {
  border: none !important;
  background: transparent !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/*! --- FIX FORMS (superposición en inputs flotantes) --- */

.form-floating > label {
  padding: 0.5rem 0.9rem; /* ajusta posición del label flotante */
  height: auto;           /* evita cortes */
  line-height: 1.2;
}

/*! --- FIX FORMS (Estilo de focus más potente dorado en los inputs) --- */

.contact-form .form-control:focus {
  border-color: #AB9558 !important; /* dorado corporativo */
  box-shadow: 0 4px 10px #AB9558; /* sombra más pequeña y suave */
}

/*! --- BOTÓN DE CONTACTO --- */

.btn-contact {
  background-color: var(--brand-gold);   /* dorado base */
  border: 2px solid var(--brand-gold);
  color: #fff;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .25s ease, color .25s ease;
}

.btn-contact:hover {
  transform: translateY(-2px); 
  color: #272932;                      /* texto gris corporativo */
  background-color: var(--brand-gold); /* fondo se mantiene dorado */
  border-color: var(--brand-gold);     /* borde igual */
  box-shadow: 0 4px 10px #AB9558; /* sombra más pequeña y suave */
}

/*! --- MODAL HEADER NOTICIA ESTILIZADO --- */

#newsModal .modal-header{
  background:#272932;
  border-bottom:none;
  justify-content:flex-end;
}

/* --- Botón cerrar (X) personalizado SOLO en #newsModal --- */
#newsModal .btn-close{
  background: transparent !important;   /* sin SVG de Bootstrap */
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  width: 1.75rem;
  height: 1.75rem;
  position: relative;
  cursor: pointer;
}

/* Dibujamos la X */
#newsModal .btn-close::before{
  content: "✕";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #AB9558;            /* dorado */
  transition: color .2s ease, transform .2s ease;
}

/* Hover: blanca y un pelín de zoom */
#newsModal .btn-close:hover::before{
  color:#fff;
  transform: scale(1.1);
}

/* Accesibilidad: sin halo al focus */
#newsModal .btn-close:focus{
  outline: none !important;
  box-shadow: none !important;
}

/*! ===== HERO FULLSCREEN + BLUR ===== */

/* Un poquito más de aire para el caption en móviles y zoom alto */
@media (max-width: 768px){
  #heroCarousel .carousel-caption.hero-caption{ padding: 0 64px; }
}
/* O sube los controles un pelín */
#heroCarousel .carousel-control-prev,

/* === HERO: altura única y cover robusto === */
#heroCarousel { position: relative; overflow: hidden; }

#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {
  height: min(92vh, 900px) !important; /* una sola regla de altura */
  min-height: 480px;                   /* evita quedar muy chico */
}

#heroCarousel .carousel-item { position: relative; }

#heroCarousel .carousel-item > img {
  position: absolute;    /* clave: saca la imagen del flujo */
  inset: 0;              /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;     /* siempre rellena */
}

/* El gradiente inferior sigue siendo de 60px pegado abajo */
#heroCarousel .hero-bottom-gradient {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  z-index: 2; pointer-events: none;
}


/* Forzar que NUNCA muestre la manita en servicios */
.services-section .recent-work,
.services-section .recent-work * {
  cursor: default !important;
  pointer-events: auto; /* permite que las animaciones se vean */
}

/* Proyectos: manita en la imagen y la tarjeta */
.projects-section .project-img,
.projects-section .card {
  cursor: pointer !important;
}

/* Proyectos: sombra exterior más marcada en hover */
.projects-section .card {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* sombra base */
}

/* Fuerza sombra exterior muy oscura en hover solo en Proyectos */
.projects-section .card:hover {
  box-shadow: 0 15px 20px #00000088 !important;
  transform: translateY(-3px);
}

/* === Noticias: animación suave SIN zoom de imagen === */
#newsGrid .service-work{
  border-radius: 16px;
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;   /* base suave */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Hover/focus: levanta un poco y aparece sombra negra exterior */
#newsGrid a:hover .service-work,
#newsGrid a:focus .service-work{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,.65) !important;  /* sombra más oscura */
  border-color: rgba(171,149,88,.35);
}

/* Quitar completamente el zoom y filtros de la imagen */
#newsGrid .service-work .card-img-top{
  transform: none !important;
  filter: none !important;
  transition: none !important; /* sin animación de zoom */
}
#newsGrid a:hover .service-work .card-img-top,
#newsGrid a:focus .service-work .card-img-top{
  transform: none !important;
  filter: none !important;
}

/* (Opcional) Solo aplicar el hover en dispositivos con hover real */
@media (hover: hover){
  #newsGrid .service-work{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
}

/* Quitar halo/borde en las tarjetas de Noticias */
#newsGrid .service-work {
  border: none !important;          /* elimina borde */
  outline: none !important;         /* elimina halo de focus */
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important; /* sombra base */
}

#newsGrid a:hover .service-work,
#newsGrid a:focus .service-work {
  border: none !important;
  outline: none !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.65) !important; /* sombra hover limpia */
}

/* Por si algún estilo global fuerza el cursor en wrappers */
.historia-section .col-6,
.historia-section .col-6 * {
  cursor: default !important;
}

/* Tarjetas de Valores con sombra más marcada */
.valores-section .valores-card {
  border: none !important;
  border-radius: 16px;
  background: #272932;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);   /* sombra base */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover: más elevación y sombra más oscura */
.valores-section .valores-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.747);
}

/* === Misión & Visión: animación suave con sombra dorada === */
.mv-section .mv-card {
  border: none !important;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(171,149,88,0.25) !important; /* sombra dorada base */
  transition: transform 0.3s ease, box-shadow 0.3s ease;  /* animación suave */
  cursor: default;
}

/* Hover: levanta suavemente y aumenta la sombra dorada */
@media (hover: hover) {
  .mv-section .mv-card:hover,
  .mv-section .mv-card:focus-within {
    transform: translateY(-6px); /* levantamiento fluido */
    box-shadow: 0 14px 32px rgba(171,149,88,0.45) !important; /* sombra dorada más notoria */
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .mv-section .mv-card {
    transition: none;
  }
}

/* Misión & Visión con la misma animación que Valores */
.mv-section .mv-card {
  border: none !important;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(171,149,88,0.25); /* sombra dorada como base */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mv-section .mv-card:hover {
  transform: translateY(-6px); /* igual que valores */
  box-shadow: 0 14px 32px rgba(171,149,88,0.45); /* sombra dorada más fuerte */
  
}

/* Tipografía */
.mv-card .card-body{ padding: 1.75rem; }
.mv-card h2{
  color: var(--mv-title);
  letter-spacing: .2px;
}

.mv-section {
  background-color: #272932;   /* tu color aquí */
}


/* ----- Que el título "Contáctanos" quede visible al saltar al ancla ----- */
/* Navegadores modernos */
#contacto,
.contacto-section {
  scroll-margin-top: calc(var(--nav-height, 72px) + 16px);
}

/* Fallback para Safari/legacy: truco con pseudo-elemento */
#contacto::before {
  content: "";
  display: block;
  height: calc(var(--nav-height, 72px) + 16px);
  margin-top: calc(-1 * (var(--nav-height, 72px) + 16px));
}

/* Si no tienes --nav-height definida, puedes fijarla aquí */
:root { --nav-height: 72px; }

/* Botón Contáctanos en sección Nosotros */
.hero-about .btn {
  background-color: #ab9558 !important; /* dorado */
  color: #fff !important;              /* texto blanco */
  border: none !important;
  transition: color 0.3s ease, transform 0.3s ease;
}

.hero-about .btn:hover {
  color: #1f2127 !important;           /* gris oscuro del sitio */
  transform: translateY(-2px);         /* efecto sutil */
}

/* Escritorio: el hero del INDEX ocupa el alto de la ventana MENOS la navbar */
@media (min-width: 992px) {
  /* El contenedor completo también necesita altura */
  #heroCarousel {
    height: calc(100vh - var(--nav-h, 72px)) !important;
    display: flex;
    flex-direction: column; /* deja sitio a indicadores/controles */
  }

  /* El carrusel rellena el espacio restante del contenedor */
  #heroCarousel .carousel-inner {
    flex: 1 1 auto;
    height: 100% !important;
  }

  /* Cada slide ocupa el 100% del alto del hero */
  #heroCarousel .carousel-item {
    height: 100% !important;
    position: relative; /* para contener la imagen absoluta */
  }

  /* La imagen cubre todo el slide */
  #heroCarousel .carousel-item > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Asegura que los indicadores queden visibles dentro del hero */
  #heroCarousel .carousel-indicators {
    bottom: 16px;
    z-index: 3;
  }
}

/* ===== LOGIN (refinado) ===== */
:root{
  --brand-dark: #272932;
  --brand-gold: #AB9558;
}

/* Fondo con textura/gradientes suaves + ajuste por navbar fija */
.login-page{
  padding-top: calc(var(--nav-height, 56px) + 16px);
  background:
    radial-gradient(900px 500px at 0% -10%, rgba(171,149,88,.12), transparent 60%),
    linear-gradient(180deg, rgba(39,41,50,.06), rgba(39,41,50,0));
  min-height: calc(100vh - var(--nav-height, 56px));
}

/* Tarjeta estilo glassy */
.login-card{
  border-radius: 20px;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 50px rgba(39,41,50,.15);
}

/* Marca / títulos */
.login-logo{
  width: 56px; height: 56px; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.15));
}
.login-title{
  color: var(--brand-dark);
}
.login-subtitle{
  color: #6b7280;           /* gris suave */
  margin-top: .25rem;
}

/* Inputs redondeados y focus dorado */
.login-card .form-control{
  border-radius: 14px;
  border: 1px solid rgba(39,41,50,.18);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.login-card .form-control:focus{
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 .2rem rgba(171,149,88,.25);
}

/* Botón mostrar/ocultar password */
.toggle-pass{
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #6b7280;
}
.toggle-pass:hover{ color: var(--brand-dark); }

/* Links auxiliares */
.login-card a{
  color: var(--brand-gold);
  text-decoration: none;
}
.login-card a:hover{ color: #8f7c4d; text-decoration: underline; }

/* Botón primario coherente con tu paleta (usa tu clase .btn-contact) */
.btn-contact{
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #fff !important;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-contact:hover{
  background-color: #1f2230 !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* Ajustes de mensajes flash dentro de la card */
.login-card .alert{
  border-radius: 12px;
  margin-bottom: .5rem;
}