:root{
    /* Paleta premium Aruno */
    --bg:#0f0f0f;
    --bg-soft:#151515;
    --card:#111316;
    --text:#efe8d9;      /* crema */
    --muted:#c9c0b2;
    --stroke:rgba(239,232,217,.14);
    --accent:#003933;    /* verde profundo */
  }
  
  /* Base */
  html,body{background:var(--bg); color:var(--text); scroll-behavior:smooth}
  .container-narrow{max-width:1100px}
  .bg-soft{background:var(--bg-soft)}
  section{padding:80px 0; border-top:1px solid var(--stroke)}
  .section-title{font-weight:800; letter-spacing:.5px}
  .lead-muted{color:var(--muted)}
  .text-secondary{color:var(--muted)!important}
  
  /* Botones */
  .btn-outline-cream{
    --bs-btn-color:var(--text);
    --bs-btn-border-color:var(--text);
    --bs-btn-hover-bg:var(--text);
    --bs-btn-hover-color:var(--bg);
    --bs-btn-hover-border-color:var(--text);
  }
  .btn-accent{
    --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent);
    --bs-btn-hover-bg:#175248; --bs-btn-hover-border-color:#175248;
    --bs-btn-color:#fff;
  }
  
  /* NAVBAR */
  .navbar{
    backdrop-filter:saturate(120%) blur(6px);
    background:rgba(10,10,10,.6)!important;
    border-bottom:1px solid var(--stroke)
  }
  .navbar .nav-link{color:var(--muted)}
  .navbar .nav-link.active,.navbar .nav-link:hover{color:var(--text)}
  
  /* HERO */
  .hero{
    min-height:100vh; /* pantalla completa */
    display:grid; align-items:center;
    background:url('./Public/Hero.jpg') center/cover no-repeat; /* TODO */
    position:relative; padding: 100px 0 80px; /* evita solaparse con navbar */
  }
  .hero::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  }
  .hero .inner{position:relative}
  .tagline{color:var(--muted); letter-spacing:.5px}
  .display-3{font-weight:800; line-height:1.05}
  
  /* QUIÉNES SOMOS */
  .about-photo{border:1px solid var(--stroke)}
  .about-photo-bg{
    background:url('.jpg') center/cover no-repeat; /* TODO */
    min-height:320px; border:1px solid var(--stroke)
  }
  .brand-tile{
    background:var(--card); border:1px solid var(--stroke); border-radius:18px;
    padding:26px; height:100%
  }
  .brand-logo{max-height:56px; width:auto}
  
  /* VALORES */
  .value-card{
    background:rgba(17,19,22,.75); border:1px solid var(--stroke); border-radius:20px;
    padding:26px; height:100%
  }
  .value-card i{font-size:28px; color:var(--muted)}
  
  /* PROYECTOS */
  .project-card{
    background:var(--card); border:1px solid var(--stroke); border-radius:22px; overflow:hidden
  }
  .project-cover{
    background:url('./Public/primerproyecto.jpg') center/cover no-repeat; /* TODO */
    min-height:360px;
  }
  .badge-ribbon{
    position:absolute; top:18px; left:18px; background:#7b6438; color:#fff;
    padding:8px 14px; border-radius:999px; font-weight:700; letter-spacing:.4px; font-size:.85rem
  }
  
  /* MODELOS */
  .models{background:#1a1613}
  .model-card{
    background:var(--card); border:1px solid var(--stroke); border-radius:18px; overflow:hidden; height:100%
  }
  .model-photo{min-height:220px; background-position:center; background-size:cover}
  .model-a{background-image:url('./Public/1.png')} /* TODO */
  .model-b{background-image:url('./Public/2.png')} /* TODO */
  .model-c{background-image:url('./Public/3.png')} /* TODO */
  
  /* CONTACTO + MAPA */
  .map-wrap{
    border:1px solid var(--stroke); border-radius:22px; overflow:hidden; background:#0b0b0b
  }
  .map-wrap iframe{filter:grayscale(1) invert(.02) brightness(.8) contrast(1.05)} /* tema dark */
  
  /* FOOTER */
  footer{border-top:1px solid var(--stroke); padding:60px 0 30px}
  footer a{color:var(--text)}
  footer a:hover{opacity:.9}
  .legal{border-top:1px solid var(--stroke); margin-top:28px; padding-top:18px; color:var(--muted)}
  
  /* === POR QUÉ ELEGIR ARUNO: fondo con imagen + overlay === */
#values{
    position: relative;
    background: url('./Public/edificio.jpg') center/cover no-repeat; /* <-- cambia la ruta si usas otro nombre */
    color: var(--text);
  }
  
  /* Capa oscura para que el texto se lea bien */
  #values::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
  }
  
  /* Asegura que el contenido quede por encima del overlay */
  #values .container{
    position: relative;
    z-index: 1;
  }
  
  /* (Opcional) efecto parallax suave en desktop */
  @media (min-width: 992px){
    #values{
      background-attachment: fixed;
    }
  }
  
  /* Links del bloque de contacto */
#contact .lead-muted a {
  color: inherit;              /* mismo color que el texto alrededor */
  text-decoration: none;       /* sin subrayado */
}
#contact .lead-muted a:hover {
  text-decoration: underline;  /* o lo que prefieras en hover */
}

/* Links grises del footer */
footer .text-secondary a {
  color: inherit;
  text-decoration: none;
}
footer .text-secondary a:hover {
  text-decoration: underline;
}