:root {
  --bg: #09111f;
  --bg-soft: #0f172a;
  --panel: #101b31;
  --panel-2: #12213d;
  --text: #e5edf8;
  --muted: #9fb1ca;
  --line: rgba(255,255,255,.1);
  --accent: #ff7a1a;
  --accent-2: #ffd166;
  --success: #22c55e;
  --error: #ff6b6b;
  --white: #ffffff;
  --shadow: 0 24px 60px rgba(0,0,0,.32);
  --radius: 22px;
}

/* BASE */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(180deg, var(--bg), #0b1324);
  color: var(--text);
}

.section {
  padding: 90px 0;
}

/* TEXTOS */
.eyebrow {
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
}

.text-accent {
  color: var(--accent);
}

h1, h2, h3 {
  color: var(--white);
}

p {
  color: var(--muted);
}

/* BOTONES */
.btn {
  border-radius: 999px;
  font-weight: 700;
  padding: 12px 22px;
}

.btn-primary,
.btn:not(.btn-ghost) {
  background: linear-gradient(135deg, var(--accent), #ff9b4a);
  border: none;
  color: #fff;
}

.btn:hover {
  filter: brightness(1.05);
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--text);
}

/* NAVBAR */
.site-header {
  background: rgba(6,10,18,.7);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #ffb76a);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
}

/* HERO */
.hero {
  min-height: 100vh;
  position: relative;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.4);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,8,16,.2), rgba(4,8,16,.9));
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* STATS */
.hero-stats div {
  background: rgba(9,17,31,.6);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

/* ABOUT */
.about-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid var(--line);
}

/* PILLS */
.pill-list span {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .9rem;
}

/* CARDS (SERVICIOS) */
.service-card {
  background: linear-gradient(180deg, rgba(18,33,61,.9), rgba(11,18,33,.95));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  height: 100%;
  transition: .25s;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,122,26,.4);
}

.service-card h3 {
  color: var(--white);
}

/* PROYECTOS */
.project-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.project-card img {
  height: 260px;
  width: 100%;
  object-fit: cover;
}

/* FORMULARIO */
.form-card {
  background: linear-gradient(180deg, var(--panel), #0d1628);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

input, select, textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--white);
  padding: 12px;
  width: 100%;
}

select {
  background-color: #0f1d39;
}

select option {
  color: #111;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
}

/* FEEDBACK */
.form-feedback {
  font-weight: 600;
}

.form-feedback.is-success {
  color: var(--success);
}

.form-feedback.is-error {
  color: var(--error);
}

/* FOOTER */
.site-footer {
  background: #070d18;
  border-top: 1px solid var(--line);
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  color: #8091ab;
}

/* CARRUSEL */
.syv-carousel {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}

.syv-carousel img {
  height: 520px;
  object-fit: cover;
  filter: brightness(.85);
}

.carousel-caption.syv-caption {
  background: rgba(9,17,31,.75);
  padding: 14px;
  border-radius: 12px;
}

.syv-caption h5 {
  color: var(--white);
}

.syv-caption p {
  color: var(--muted);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .section {
    padding: 70px 0;
  }

  .hero {
    min-height: auto;
    padding: 100px 0;
  }

  .syv-carousel img {
    height: 300px;
  }
}

/* =========================
   AJUSTES FINALES UI/UX
   ========================= */

/* HEADER */
.site-header {
  background: rgba(4, 10, 20, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-header .navbar {
  min-height: 78px;
}

.navbar-brand.brand {
  color: var(--white);
  font-weight: 800;
}

.navbar-brand.brand:hover {
  color: var(--white);
}

.site-header .nav-link {
  color: #d9e3f5 !important;
  font-weight: 600;
  opacity: .92;
  transition: color .2s ease, opacity .2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: #ffffff !important;
  opacity: 1;
}

.site-header .btn {
  white-space: nowrap;
}

.navbar-toggler.menu-toggle {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: .45rem .7rem;
  color: #fff;
  box-shadow: none;
}

.navbar-toggler.menu-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255,122,26,.18);
}

/* Menú colapsado mobile */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    margin-top: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(7, 13, 24, 0.98);
    border: 1px solid rgba(255,255,255,.08);
  }

  .site-header .navbar-nav {
    gap: 8px !important;
    align-items: stretch !important;
  }

  .site-header .nav-link {
    padding: 10px 8px;
    border-radius: 10px;
  }

  .site-header .nav-link:hover {
    background: rgba(255,255,255,.04);
  }

  .site-header .btn {
    margin-top: 8px;
    width: 100%;
  }
}

/* HERO: un poco más respirado */
.hero .lead {
  max-width: 860px;
}

.hero-stats .col-md-4 > div {
  min-height: 100%;
}

/* ABOUT */
.about .row {
  row-gap: 2rem;
}

.about-card {
  padding: 28px 26px;
}

.metric span {
  display: block;
  line-height: 1.65;
  color: var(--muted);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill-list span {
  line-height: 1.2;
}

/* SERVICIOS */
.services .row {
  row-gap: 1.25rem;
}

.service-card {
  padding: 26px 22px;
}

.service-card p {
  margin-bottom: 0;
}

/* CONFIGURACIÓN */
.config-section .section-copy {
  margin-bottom: 0;
}

/* CARRUSEL */
.syv-carousel {
  margin-top: 32px;
}

.carousel-caption.syv-caption {
  left: 24px;
  right: 24px;
  bottom: 20px;
}

/* PROYECTOS */
.project-card {
  margin: 0;
  background: #0d1628;
}

.project-card img {
  display: block;
}

/* COTIZACIÓN */
.quote-section .row {
  row-gap: 2rem;
}

.form-card {
  padding: 28px;
}

.form-card .btn {
  min-width: 180px;
}

.form-card label {
  font-weight: 500;
  margin-bottom: 0;
}

.form-card input,
.form-card select,
.form-card textarea {
  margin-top: 8px;
}

.form-feedback {
  min-height: 28px;
}

/* FOOTER */
.site-footer {
  padding-top: 8px;
}

.site-footer .container {
  position: relative;
}

.footer-grid {
  align-items: start;
}

.footer-brand {
  margin-bottom: 16px;
}

.site-footer h3 {
  font-size: 1.5rem;
  margin-bottom: 14px;
}

.site-footer p,
.site-footer li,
.site-footer a,
.footer-bottom {
  line-height: 1.7;
}

.contact-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.contact-list li {
  margin-bottom: 10px;
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom {
  margin-top: 14px;
  padding-top: 18px;
}

/* ESPACIADO MOBILE */
@media (max-width: 767.98px) {
  .section {
    padding: 78px 0;
  }

  .hero {
    min-height: auto;
    padding-top: 110px;
    padding-bottom: 90px;
  }

  .hero-content {
    padding-top: 20px;
  }

  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.08;
  }

  .hero .lead {
    font-size: 1rem;
    line-height: 1.7;
  }

  .hero-actions {
    gap: 12px;
  }

  .hero-stats {
    margin-top: 8px;
  }

  .hero-stats .col-md-4 > div {
    padding: 16px;
  }

  .about .pill-list {
    gap: 8px;
  }

  .about .pill-list span {
    font-size: .88rem;
    padding: 8px 12px;
  }

  .about-card {
    padding: 22px 18px;
  }

  .service-card {
    padding: 22px 18px;
  }

  .service-card h3 {
    font-size: 1.15rem;
  }

  .syv-carousel img {
    height: 300px;
  }

  .carousel-caption.syv-caption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px 14px;
  }

  .project-card img {
    height: 220px;
  }

  .quote-section h2,
  .services h2,
  .projects h2,
  .config-section h2,
  .about h2 {
    line-height: 1.15;
  }

  .form-card {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .form-card .btn {
    width: 100%;
  }

  .site-footer {
    padding-top: 0;
  }

  .site-footer .row {
    row-gap: 1.75rem;
  }

  .site-footer h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .footer-actions {
    gap: 10px;
  }

  .footer-actions .btn {
    flex: 1 1 auto;
    min-width: 140px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
  }
}

/* ESPACIADO EXTRA EN MÓVIL PEQUEÑO */
@media (max-width: 480px) {
  .container {
    width: min(100% - 1rem, 1120px);
  }

  .section {
    padding: 70px 0;
  }

  .hero {
    padding-bottom: 80px;
  }

  .pill-list span {
    font-size: .84rem;
  }

  .project-card img {
    height: 200px;
  }

  .site-footer {
    padding-bottom: 12px;
  }
}
/* ======================================
   FIX HEADER + FOOTER SOBRE BOOTSTRAP
   PONER AL FINAL DE styles.css
   ====================================== */

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: rgba(4, 10, 20, 0.96) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-header .navbar {
  min-height: 78px;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

/* Marca */
.site-header .navbar-brand,
.site-header .navbar-brand.brand,
.site-header .navbar-brand.brand span:last-child {
  color: #f8fbff !important;
  font-weight: 800;
  letter-spacing: .03em;
}

.site-header .navbar-brand:hover,
.site-header .navbar-brand:focus {
  color: #ffffff !important;
}

/* Links del menú */
.site-header .navbar-nav .nav-link {
  color: #dbe7fb !important;
  font-weight: 600;
  opacity: 1 !important;
  padding-left: .8rem;
  padding-right: .8rem;
  transition: color .2s ease, opacity .2s ease;
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus,
.site-header .navbar-nav .nav-link.active {
  color: #ffffff !important;
}

/* Evita que visitados se vean oscuros */
.site-header .navbar-nav .nav-link:visited,
.site-header .navbar-brand:visited {
  color: #dbe7fb !important;
}

/* Botón cotización en header */
.site-header .navbar-nav .btn,
.site-header .navbar-nav .btn:visited {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--accent), #ff9b4a) !important;
  border: none !important;
  box-shadow: none;
  padding: 12px 20px;
}

.site-header .navbar-nav .btn:hover,
.site-header .navbar-nav .btn:focus {
  color: #ffffff !important;
  filter: brightness(1.05);
}

/* Toggler */
.site-header .navbar-toggler {
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px;
  padding: .45rem .7rem;
  color: #ffffff !important;
  box-shadow: none !important;
}

.site-header .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(255,122,26,.2) !important;
}

/* Menú mobile */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    margin-top: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(8, 15, 28, 0.98) !important;
    border: 1px solid rgba(255,255,255,.08);
  }

  .site-header .navbar-nav {
    gap: 6px !important;
    align-items: stretch !important;
  }

  .site-header .navbar-nav .nav-link {
    display: block;
    padding: 12px 10px;
    border-radius: 12px;
  }

  .site-header .navbar-nav .nav-link:hover,
  .site-header .navbar-nav .nav-link:focus {
    background: rgba(255,255,255,.04);
  }

  .site-header .navbar-nav .btn {
    margin-top: 10px;
    width: 100%;
    justify-content: center;
  }
}

/* HERO */
.hero h1,
.hero .lead,
.hero .eyebrow {
  position: relative;
  z-index: 2;
}

.hero h1 {
  max-width: 980px;
}

.hero .lead {
  max-width: 860px;
  line-height: 1.7;
}

.hero-stats .col-md-4 > div {
  min-height: 100%;
}

/* ABOUT */
.about .row {
  row-gap: 2rem;
}

.about-card {
  padding: 28px 26px;
}

.metric {
  color: var(--text);
}

.metric + .metric {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.metric strong {
  display: block;
  color: #ffffff;
  margin-bottom: 6px;
}

.metric span {
  display: block;
  color: var(--muted);
  line-height: 1.65;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.pill-list span {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .9rem;
  line-height: 1.2;
  color: #eef4ff;
}

/* SERVICIOS */
.services .row {
  row-gap: 1.25rem;
}

.service-card {
  background: linear-gradient(180deg, rgba(18,33,61,.9), rgba(11,18,33,.95)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  padding: 26px 22px !important;
  box-shadow: none !important;
}

.service-card h3 {
  color: #ffffff !important;
}

.service-card p {
  margin-bottom: 0;
  color: var(--muted) !important;
}

/* CARRUSEL */
.syv-carousel {
  margin-top: 32px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--panel);
}

.syv-carousel .carousel-item img {
  height: 520px;
  object-fit: cover;
  filter: brightness(.82);
}

.carousel-caption.syv-caption {
  left: 24px;
  right: 24px;
  bottom: 20px;
  text-align: left;
  background: rgba(9,17,31,.74);
  padding: 14px 16px;
  border-radius: 12px;
}

.syv-caption h5 {
  color: #ffffff;
  margin-bottom: 6px;
}

.syv-caption p {
  color: #d6e1f3;
  margin-bottom: 0;
}

/* PROYECTOS */
.project-card {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #0d1628;
}

.project-card img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

/* FORMULARIO */
.quote-section .row {
  row-gap: 2rem;
}

.form-card {
  background: linear-gradient(180deg, var(--panel), #0d1628);
  padding: 28px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
}

.form-card label {
  display: block;
  font-weight: 500;
  color: #eef4ff;
}

.form-card input,
.form-card select,
.form-card textarea {
  margin-top: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: #ffffff;
  padding: 12px 14px;
  width: 100%;
  box-shadow: none;
}

.form-card input::placeholder,
.form-card textarea::placeholder {
  color: #92a5c4;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: rgba(255,122,26,.75);
  outline: none;
  box-shadow: 0 0 0 .18rem rgba(255,122,26,.14);
}

/* Select arreglado */
.form-card select {
  background-color: #0f1d39 !important;
  color: #ffffff !important;
  appearance: auto;
}

.form-card select option {
  color: #111111;
  background-color: #ffffff;
}

/* Firefox */
@-moz-document url-prefix() {
  .form-card select {
    color: #ffffff !important;
    background-color: #0f1d39 !important;
  }
}

/* Feedback */
.form-feedback {
  min-height: 28px;
  margin-bottom: 0;
  font-weight: 600;
}

.form-feedback.is-success {
  color: var(--success);
}

.form-feedback.is-error {
  color: var(--error);
}

/* FOOTER */
.site-footer {
  background: #070d18;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 24px;
}

.footer-grid {
  align-items: start;
}

.footer-brand {
  margin-bottom: 16px;
}

.site-footer h3 {
  font-size: 1.35rem;
  margin-bottom: 14px;
  color: #ffffff;
}

.site-footer p,
.site-footer li,
.site-footer a {
  color: var(--muted);
  line-height: 1.75;
}

.site-footer a:hover {
  color: #ffffff;
}

.contact-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.contact-list li {
  margin-bottom: 10px;
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-actions .btn {
  min-width: 145px;
}

.footer-bottom {
  margin-top: 20px;
  padding-top: 18px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #8091ab;
  font-size: .92rem;
}

/* MOBILE */
@media (max-width: 767.98px) {
  .section {
    padding: 78px 0;
  }

  .hero {
    min-height: auto;
    padding-top: 110px;
    padding-bottom: 90px;
  }

  .hero-content {
    padding-top: 20px;
  }

  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.08;
  }

  .hero .lead {
    font-size: 1rem;
    line-height: 1.7;
  }

  .hero-stats .col-md-4 > div {
    padding: 16px;
  }

  .about .pill-list {
    gap: 8px;
  }

  .about .pill-list span {
    font-size: .88rem;
    padding: 8px 12px;
  }

  .about-card {
    padding: 22px 18px;
  }

  .service-card {
    padding: 22px 18px !important;
  }

  .service-card h3 {
    font-size: 1.12rem;
  }

  .syv-carousel .carousel-item img {
    height: 300px;
  }

  .carousel-caption.syv-caption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px 14px;
  }

  .project-card img {
    height: 220px;
  }

  .quote-section h2,
  .services h2,
  .projects h2,
  .config-section h2,
  .about h2 {
    line-height: 1.15;
  }

  .form-card {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .form-card .btn {
    width: 100%;
  }

  .site-footer {
    padding-top: 10px;
  }

  .site-footer .row {
    row-gap: 1.75rem;
  }

  .site-footer h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .footer-actions {
    gap: 10px;
  }

  .footer-actions .btn {
    flex: 1 1 auto;
    min-width: 140px;
  }

  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 70px 0;
  }

  .hero {
    padding-bottom: 80px;
  }

  .pill-list span {
    font-size: .84rem;
  }

  .project-card img {
    height: 200px;
  }

  .site-footer {
    padding-bottom: 12px;
  }
}
/* FORZAR MENU EN BLANCO */
.site-header .navbar-brand,
.site-header .navbar-brand span,
.site-header .navbar-nav .nav-link,
.site-header .navbar-nav .nav-link:link,
.site-header .navbar-nav .nav-link:visited,
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus,
.site-header .navbar-nav .nav-link.active {
  color: #ffffff !important;
}

.site-header .navbar-toggler {
  color: #ffffff !important;
}