/* CSV96 · Stability / Responsive / Contrast invariants
   Loaded LAST on every page. This file intentionally defines only final
   visual invariants that must not be reversed by historical CSS layers. */
:root{
  --csv96-navy:#071a31;
  --csv96-muted:#516273;
  --csv96-gold:rgba(213,161,30,.54);
  --csv96-card-bg:linear-gradient(155deg,#ffffff 0%,#fbfcfe 68%,#f4f7fa 100%);
}

/* -------------------------------------------------------------------------
   1) CONTRAST CONTRACT
   Light pill = light surface + dark navy text.
   Navy pill  = navy surface + pure white text.
   Descendants inherit the same visible color to avoid white-on-white bugs.
   ------------------------------------------------------------------------- */
:where(a,button).csv-pill--light,
:where(a,button).csv-pill--light:link,
:where(a,button).csv-pill--light:visited,
.btn.csv-pill--light,
.btn.alt.csv-pill--light,
.btn.dark.csv-pill--light,
.btn.outline.csv-pill--light{
  color:var(--csv96-navy)!important;
  -webkit-text-fill-color:var(--csv96-navy)!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 52%,#e9f0f6 100%)!important;
  border-color:rgba(213,161,30,.72)!important;
  text-shadow:none!important;
}
.csv-pill--light :is(span,strong,b,em,small,i){
  color:var(--csv96-navy)!important;
  -webkit-text-fill-color:var(--csv96-navy)!important;
  text-shadow:none!important;
}
.csv-pill--light :is(svg,path,use){color:var(--csv96-navy)!important;stroke:currentColor!important}

:where(a,button).csv-pill--navy,
:where(a,button).csv-pill--navy:link,
:where(a,button).csv-pill--navy:visited,
.btn.csv-pill--navy,
.btn.alt.csv-pill--navy,
.btn.dark.csv-pill--navy,
.btn.outline.csv-pill--navy{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:linear-gradient(180deg,#276aa8 0%,#124f87 46%,#082b4d 100%)!important;
  border-color:rgba(213,161,30,.72)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.28)!important;
}
.csv-pill--navy :is(span,strong,b,em,small,i){
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.csv-pill--navy :is(svg,path,use){color:#fff!important;stroke:currentColor!important}

/* -------------------------------------------------------------------------
   2) SERVICE CARDS — one architecture on phone, tablet and desktop.
   They are CARDS, never capsules/pills.
   ------------------------------------------------------------------------- */
.service-cloud{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
  grid-auto-rows:1fr!important;
}
.service-chip{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:154px!important;
  height:100%!important;
  padding:22px 20px!important;
  border-radius:16px!important;
  border:1px solid var(--csv96-gold)!important;
  outline:1px solid rgba(7,25,45,.055)!important;
  outline-offset:-2px!important;
  background:var(--csv96-card-bg)!important;
  color:var(--csv96-navy)!important;
  -webkit-text-fill-color:var(--csv96-navy)!important;
  box-shadow:0 13px 28px rgba(4,20,38,.10),0 3px 8px rgba(4,20,38,.05),inset 0 1px 0 rgba(255,255,255,.98)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  gap:0!important;
  text-align:left!important;
  overflow:hidden!important;
}
.service-chip::before{border-radius:14px!important;opacity:.34!important}
.service-chip::after{border-radius:14px!important}
.service-chip > i{
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
  display:grid!important;
  place-items:center!important;
  margin:0 0 12px!important;
  line-height:1!important;
  color:#175c96!important;
  -webkit-text-fill-color:#175c96!important;
}
.service-chip > i .csv-icon{width:1.55rem!important;height:1.55rem!important}
.service-chip > b{
  display:block!important;
  margin:0 0 7px!important;
  color:var(--csv96-navy)!important;
  -webkit-text-fill-color:var(--csv96-navy)!important;
  font-size:1.06rem!important;
  font-weight:800!important;
  line-height:1.22!important;
  letter-spacing:-.01em!important;
}
.service-chip > span{
  display:block!important;
  margin:0!important;
  color:var(--csv96-muted)!important;
  -webkit-text-fill-color:var(--csv96-muted)!important;
  font-size:.94rem!important;
  line-height:1.48!important;
  text-wrap:pretty!important;
}
a.service-chip{text-decoration:none!important}

/* Section headings: controlled editorial hierarchy instead of oversized text. */
#servicios .section-head,
#ayuda-conductor .section-head{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr)!important;
  align-items:end!important;
  gap:28px!important;
  margin-bottom:28px!important;
}
#servicios .section-head h2,
#ayuda-conductor .section-head h2{
  max-width:760px!important;
  margin:6px 0 0!important;
  font-size:clamp(2rem,3.1vw,3.05rem)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
  text-wrap:balance!important;
}
#servicios .section-head p,
#ayuda-conductor .section-head p{
  max-width:520px!important;
  margin:0!important;
  font-size:1rem!important;
  line-height:1.58!important;
  color:var(--csv96-muted)!important;
  -webkit-text-fill-color:var(--csv96-muted)!important;
  text-wrap:pretty!important;
}

@media(max-width:1000px){
  .service-cloud{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
  .service-chip{min-height:148px!important}
  #servicios .section-head,#ayuda-conductor .section-head{
    grid-template-columns:minmax(0,1fr) minmax(260px,.78fr)!important;
    gap:22px!important;
  }
}

@media(max-width:650px){
  .service-cloud{grid-template-columns:1fr!important;gap:14px!important;grid-auto-rows:auto!important}
  .service-chip{
    min-height:0!important;
    height:auto!important;
    padding:20px 18px!important;
    border-radius:14px!important;
    box-shadow:0 10px 22px rgba(4,20,38,.10),0 2px 6px rgba(4,20,38,.05),inset 0 1px 0 rgba(255,255,255,.98)!important;
  }
  .service-chip::before,.service-chip::after{border-radius:12px!important}
  .service-chip > i{margin-bottom:10px!important}
  .service-chip > b{font-size:1.04rem!important;margin-bottom:6px!important}
  .service-chip > span{font-size:.93rem!important;line-height:1.45!important}
  #servicios .section-head,#ayuda-conductor .section-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
    margin-bottom:22px!important;
  }
  #servicios .section-head h2,#ayuda-conductor .section-head h2{
    font-size:clamp(2rem,9.2vw,2.45rem)!important;
    line-height:1.06!important;
  }
  #servicios .section-head p,#ayuda-conductor .section-head p{
    max-width:100%!important;
    font-size:.97rem!important;
    line-height:1.52!important;
  }
}

/* Keep physical feedback subtle and consistent; no geometry change on interaction. */
@media(hover:hover) and (pointer:fine){
  .service-chip:hover{
    transform:translateY(-3px)!important;
    border-radius:16px!important;
    border-color:rgba(213,161,30,.78)!important;
    box-shadow:0 19px 38px rgba(4,20,38,.14),0 5px 12px rgba(4,20,38,.07),inset 0 1px 0 #fff!important;
  }
}
.service-chip:active{transform:translateY(1px) scale(.993)!important}
@media(prefers-reduced-motion:reduce){.service-chip{transition:none!important}}

/* Legacy button variants that do not yet carry an explicit csv-pill token.
   This closes the historic V19/CSV48 contradiction that could leave a light
   surface with white text after cascade overrides. */
.btn.alt:not(.csv-pill--navy),
.btn.outline:not(.csv-pill--navy),
.utility-pill:not(.csv-pill--navy):not(.csv-object--call){
  color:var(--csv96-navy)!important;
  -webkit-text-fill-color:var(--csv96-navy)!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 52%,#e9f0f6 100%)!important;
  text-shadow:none!important;
}
.btn.alt:not(.csv-pill--navy) :is(span,strong,b,em,small,i),
.btn.outline:not(.csv-pill--navy) :is(span,strong,b,em,small,i),
.utility-pill:not(.csv-pill--navy):not(.csv-object--call) :is(span,strong,b,em,small,i){
  color:var(--csv96-navy)!important;
  -webkit-text-fill-color:var(--csv96-navy)!important;
}
.btn.dark:not(.csv-pill--light){
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:linear-gradient(180deg,#276aa8 0%,#124f87 46%,#082b4d 100%)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.28)!important;
}
.btn.dark:not(.csv-pill--light) :is(span,strong,b,em,small,i){color:#fff!important;-webkit-text-fill-color:#fff!important}

/* CSV97 — invariant: recovered mobile header is fully interactive at any scroll position. */
@media(max-width:980px){
 body>header.csv83-visible{transform:translate3d(0,0,0)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
 body>header.csv83-hidden{transform:translate3d(0,-105%,0)!important;pointer-events:none!important}
 body>header.csv83-visible .menu-toggle,body>header.csv83-visible .menu,body>header.csv83-visible .menu a{pointer-events:auto!important}
 body>header{will-change:transform;transition:transform .22s cubic-bezier(.2,.7,.2,1),opacity .18s ease!important}
}

/* CSV97 — price-row status keeps card geometry stable during refresh. */
.manual-badge.csv-price-freshness{min-height:22px;display:flex;align-items:center}