/* =========================================================
   B CHILL — MAIN.CSS OPTIMIZADO
   ========================================================= */

:root{
  --granate:#722f37;
  --texto:#212529;
  --primario:#722f37;

  --nav-glass-bg:rgba(255,255,255,.14);
  --nav-glass-border:rgba(255,255,255,.18);
  --nav-glass-blur:10px;
  --nav-pad-y:.28rem;
  --nav-pad-x:.75rem;
  --nav-radius:18px;
  --nav-offset-mobile:3.8rem;

  --glass-bg:rgba(255,255,255,.12);
  --glass-bg-hover:rgba(255,255,255,.14);
  --glass-border:rgba(255,255,255,.18);
  --glass-shadow:0 12px 30px rgba(0,0,0,.12);

  --kp-title-size:.95rem;
  --kp-text-size:.86rem;
  --kp-line:1.42;
  --kp-pad-y:.78rem;
  --kp-pad-x:.90rem;
  --kp-gap:.85rem;
  --kp-mt:1.15rem;
  --kp-minh-mobile:150px;
  --kp-minh-desktop:168px;
  --kp-lines-mobile:4;
  --kp-lines-desktop:5;
  --kp-radius:1rem;

  --icon-size:88px;
}

/* =========================================================
   BASE
   ========================================================= */

html{
  font-size:16px;
  scroll-behavior:smooth;
}

body{
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

@media (max-width:576px){
  body{
    font-size:16.5px;
  }
}

/* =========================================================
   HERO
   ========================================================= */

header.masthead,
.service-header{
  position:relative;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  color:#fff;
  min-height:70vh;
  overflow:hidden;
  padding-bottom:clamp(2rem,6vh,5rem);
}

header.masthead .overlay{
  display:none !important;
}

header.masthead::before,
.service-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.42),
    rgba(0,0,0,.18) 45%,
    rgba(0,0,0,.62)
  );
  z-index:1;
  pointer-events:none;
}

header.masthead > *,
.service-header > *{
  position:relative;
  z-index:2;
}

header.masthead .page-heading,
header.masthead .site-heading{
  text-align:center !important;
}

.hero-copy{
  text-align:center;
  max-width:980px;
  margin:0 auto;
}

.hero-title,
header.masthead .page-heading h1,
header.masthead .site-heading h1{
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  line-height:1.05 !important;
  margin:0 0 .75rem 0 !important;
  text-shadow:0 10px 30px rgba(0,0,0,.28);
}

.hero-subtitle,
header.masthead .page-heading .subheading,
header.masthead .site-heading .subheading{
  margin:0 auto .6rem auto !important;
  max-width:72ch;
  font-size:1.05rem !important;
  line-height:1.55 !important;
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 6px 18px rgba(0,0,0,.22);
  font-weight:400 !important;
}

.hero-small{
  margin:0 auto;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.55rem;
  font-size:.9rem;
  line-height:1.4;
  color:rgba(255,255,255,.80);
  letter-spacing:.22px;
  text-shadow:0 6px 18px rgba(0,0,0,.20);
}

header.service-header p,
header.masthead p{
  font-size:clamp(1rem,1vw,1.25rem);
  line-height:1.55;
  max-width:900px;
  margin:0 auto;
  padding-block:.10em;
  overflow:visible;
}

@media (max-width:576px){
  header.masthead,
  .service-header{
    min-height:55vh;
    padding-top:var(--nav-offset-mobile) !important;
  }

  .hero-title{
    line-height:1.05;
    margin-bottom:.6rem;
  }

  .hero-subtitle{
    font-size:.96rem !important;
    margin-bottom:.5rem !important;
  }

  .hero-small{
    font-size:.82rem;
    gap:.4rem;
  }
}

/* =========================================================
   NAVBAR
   ========================================================= */

#mainNav{
  transition:background-color .2s ease, box-shadow .2s ease, padding .2s ease, backdrop-filter .2s ease;
  display:block !important;
}

#mainNav a{
  text-decoration:none !important;
}

#mainNav .navbar-brand,
#mainNav .nav-link{
  color:rgba(30,30,30,.92) !important;
  font-weight:800;
  transition:color .18s ease, transform .18s ease, text-shadow .18s ease;
}

#mainNav .navbar-brand:hover,
#mainNav .nav-link:hover{
  color:var(--granate) !important;
  transform:translateY(-1px);
  text-shadow:0 0 8px rgba(114,47,55,.25);
}

#mainNav .nav-link.active,
#mainNav .navbar-brand.is-active{
  color:var(--granate) !important;
  text-shadow:0 0 8px rgba(114,47,55,.25);
}

/* Desktop */

@media (min-width:992px){
  #mainNav{
    background:rgba(255,255,255,.85) !important;
    border-bottom:1px solid rgba(0,0,0,.05) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 2px 12px rgba(0,0,0,.08) !important;
  }

  #mainNav .navbar-toggler{
    display:none !important;
  }

  #navbarResponsive{
    display:flex !important;
    opacity:1 !important;
    transform:none !important;
  }

  #navbarResponsive.collapse{
    display:flex !important;
    height:auto !important;
    visibility:visible !important;
  }

  #navbarResponsive.collapse:not(.show){
    display:flex !important;
  }

  #mainNav .navbar-nav{
    flex-direction:row !important;
    gap:.3rem;
    align-items:center;
  }

  #mainNav .nav-link{
    padding:.45rem .70rem;
    border-radius:12px;
  }

  #mainNav .nav-link:hover{
    background:rgba(114,47,55,.06);
  }
}

/* Mobile / tablet */

@media (max-width:991.98px){
  #mainNav{
    background:var(--nav-glass-bg) !important;
    border-bottom:1px solid var(--nav-glass-border) !important;
    backdrop-filter:blur(var(--nav-glass-blur));
    -webkit-backdrop-filter:blur(var(--nav-glass-blur));
    box-shadow:none !important;
  }

  #mainNav.navbar{
    padding-top:var(--nav-pad-y) !important;
    padding-bottom:var(--nav-pad-y) !important;
    min-height:64px;
  }

  #mainNav .container{
    padding-left:var(--nav-pad-x) !important;
    padding-right:var(--nav-pad-x) !important;
  }

  #mainNav .navbar-brand{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    line-height:1;
    padding:.15rem 0;
  }

  #mainNav .navbar-brand svg{
    width:38px !important;
    height:38px !important;
  }

  #mainNav .brand-word{
    font-size:1rem !important;
    line-height:1 !important;
  }

  #mainNav .navbar-toggler{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.38) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:none !important;
  }

  #mainNav .navbar-toggler:focus{
    box-shadow:0 0 0 .15rem rgba(114,47,55,.22) !important;
  }

  #navbarResponsive{
    transform-origin:top center;
    transition:opacity .22s ease, transform .22s ease;
  }

  #navbarResponsive.collapse{
    opacity:0;
    transform:scaleY(.98);
  }

  #navbarResponsive.collapse.show{
    opacity:1;
    transform:scaleY(1);
  }

  #navbarResponsive.show{
    background:rgba(255,255,255,.94) !important;
    border-radius:var(--nav-radius) !important;
    padding:.85rem 1rem !important;
    margin-top:.55rem !important;
    box-shadow:0 16px 36px rgba(0,0,0,.14) !important;
    border:1px solid rgba(0,0,0,.06) !important;
  }

  #navbarResponsive .nav-link{
    padding:.45rem .35rem !important;
    font-size:.78rem;
    letter-spacing:.08em;
  }
}

/* =========================================================
   KEYPOINTS / GLASS CARDS
   ========================================================= */

.kp-grid,
.hero-keypoints{
  margin-top:var(--kp-mt);
  display:grid;
  gap:var(--kp-gap);
  grid-template-columns:repeat(1,minmax(0,1fr));
  justify-items:center;
}

@media (min-width:576px){
  .kp-grid,
  .hero-keypoints{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:992px){
  .kp-grid,
  .hero-keypoints{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

.kp-card,
.hero-keypoint{
  width:100%;
  max-width:280px;
  border-radius:var(--kp-radius);
  padding:var(--kp-pad-y) var(--kp-pad-x);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:visible;
  min-height:var(--kp-minh-desktop);
  height:auto;
  display:grid;
  align-content:start;
  text-align:center;
  will-change:transform;
}

@media (max-width:575.98px){
  .kp-card,
  .hero-keypoint{
    max-width:320px;
    min-height:var(--kp-minh-mobile);
    padding:.70rem .82rem;
  }
}

.kp-title,
.hero-keypoint h4{
  color:#fff;
  font-weight:800;
  font-size:var(--kp-title-size);
  margin:0;
  letter-spacing:.2px;
  white-space:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-block:.08em;
}

.kp-text,
.hero-keypoint p{
  margin:.35rem 0 0 0;
  color:rgba(255,255,255,.88);
  font-size:var(--kp-text-size);
  line-height:var(--kp-line);
  padding-block:.10em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--kp-lines-desktop);
  overflow:clip;
}

@supports not (overflow:clip){
  .kp-text,
  .hero-keypoint p{
    overflow:hidden;
  }
}

@media (max-width:575.98px){
  .kp-text,
  .hero-keypoint p{
    -webkit-line-clamp:var(--kp-lines-mobile);
  }
}

@media (hover:hover){
  .kp-card,
  .hero-keypoint{
    transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }

  .kp-card:hover,
  .hero-keypoint:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(0,0,0,.14);
    background:var(--glass-bg-hover);
  }
}

/* =========================================================
   HOME / SERVICIOS
   ========================================================= */

.project-note{
  max-width:760px;
  margin:0 auto 1.75rem auto;
  padding:0 .75rem;
  font-size:.98rem;
  line-height:1.6;
  color:rgba(33,37,41,.62);
  font-style:italic;
  letter-spacing:.15px;
}

.project-note strong{
  font-style:normal;
  font-weight:600;
  color:rgba(33,37,41,.78);
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:2.2rem 1.8rem;
  align-items:start;
  justify-items:center;
  margin-top:.25rem;
}

.service-col{
  width:100%;
}

.service-card{
  display:block;
  width:100%;
  max-width:190px;
  color:inherit !important;
  text-decoration:none !important;
  padding:.35rem .25rem .25rem;
  border-radius:.95rem;
  transition:transform .22s ease, filter .22s ease;
  will-change:transform;
}

.service-card:hover{
  transform:translateY(-4px);
}

.service-card:focus-visible{
  outline:2px solid var(--primario);
  outline-offset:4px;
  border-radius:.95rem;
}

.service-icon-wrap{
  width:var(--icon-size);
  height:var(--icon-size);
  margin:0 auto;
  display:grid;
  place-items:center;
  border-radius:1rem;
  background:transparent;
}

.service-icon-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

.service-card:hover .service-icon-wrap{
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.10));
}

.service-title{
  margin-top:.85rem;
  margin-bottom:0;
  font-weight:800;
  font-size:1rem;
  color:var(--texto);
  letter-spacing:.15px;
}

.service-microcopy{
  margin-top:.35rem;
  margin-bottom:0;
  font-size:.86rem;
  line-height:1.35;
  color:rgba(33,37,41,.58);
  max-width:26ch;
  margin-left:auto;
  margin-right:auto;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.35em * 2);
}

.no-services-message{
  text-align:center;
  padding:3rem 1rem;
  color:#6c757d;
  font-size:1.1rem;
}

@media (max-width:576px){
  :root{
    --icon-size:78px;
  }

  .services-grid{
    grid-template-columns:repeat(2,minmax(140px,1fr));
    gap:1.5rem .8rem;
  }

  .service-card{
    max-width:160px;
  }

  .project-note{
    font-size:.93rem;
    margin-bottom:1.25rem;
  }

  .service-title{
    font-size:.92rem;
  }

  .service-microcopy{
    font-size:.80rem;
  }
}

/* =========================================================
   SKIP LINK
   ========================================================= */

.skip-link{
  position:absolute;
  top:-120px;
  left:12px;
  z-index:9999;
  background:#ffffff;
  color:#111111;
  padding:.5rem .75rem;
  border-radius:.5rem;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  font-size:.9rem;
  font-weight:600;
  text-decoration:none !important;
  transition:top .2s ease;
}

.skip-link:focus,
.skip-link:focus-visible{
  top:12px;
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

  .service-card:hover,
  .kp-card:hover,
  .hero-keypoint:hover{
    transform:none !important;
  }
}