/* CSV101 · Cristal + burbujas 3D + Butano/Compartir */
:root{
 --csv101-glass:rgba(255,255,255,.72);
 --csv101-glass-line:rgba(255,255,255,.78);
 --csv101-glass-shadow:0 18px 48px rgba(6,23,43,.13), inset 0 1px 0 rgba(255,255,255,.92);
 --csv101-navy:#06172b;
}

/* The page behaves like a polished glass plane; important cards float above it. */
:is(.csv99-quick-card,.csv99-station-mini,.csv99-contact-action,.service-family-grid .card,
    .station-card,.contact-card,.csv-signup-card,.csv-premium-card){
  position:relative;
  isolation:isolate;
}
:is(.csv99-quick-card,.csv99-station-mini,.csv99-contact-action,.service-family-grid .card,
    .station-card,.contact-card,.csv-signup-card)::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.88),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.07) 45%,rgba(7,49,91,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
}

/* Small specular 'bubble' reflection — depth without visual clutter. */
:is(.csv99-quick-card,.csv99-station-mini,.service-family-grid .card,.csv-signup-card)::after{
  content:"";
  position:absolute;
  top:10px;
  right:12px;
  width:18px;
  height:18px;
  border-radius:50%;
  pointer-events:none;
  opacity:.58;
  background:radial-gradient(circle at 32% 28%,#fff 0 16%,rgba(255,255,255,.5) 18% 36%,rgba(255,255,255,.08) 62%,transparent 68%);
  filter:drop-shadow(0 4px 6px rgba(6,23,43,.10));
}

/* Butano new-customer glass card */
.csv101-butano-alta{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:20px 22px;
  border:1px solid rgba(232,181,74,.46);
  border-radius:24px;
  background:
    radial-gradient(circle at 5% 0%,rgba(255,255,255,.92),transparent 28%),
    linear-gradient(135deg,rgba(255,250,241,.94),rgba(255,255,255,.68));
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  box-shadow:var(--csv101-glass-shadow);
}
.csv101-butano-copy{min-width:0}
.csv101-butano-copy strong{display:block;color:var(--csv101-navy);font-size:1.12rem}
.csv101-butano-copy p{margin:5px 0 0;color:#637184;max-width:760px}
.csv101-kicker{display:block;margin-bottom:4px;color:#b76a00;font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.csv101-butano-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 17px;
  border-radius:999px;
  white-space:nowrap;
  text-decoration:none;
  font-weight:900;
}

/* Share = unmistakable floating glass bubble. */
.csv101-share-fab{
  position:fixed;
  right:18px;
  bottom:88px;
  z-index:1200;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:6px 13px 6px 6px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(238,246,255,.70));
  color:var(--csv101-navy);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  box-shadow:
    0 14px 36px rgba(6,23,43,.20),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -8px 18px rgba(25,94,153,.05);
  cursor:pointer;
  font:inherit;
  transition:transform .18s ease,box-shadow .18s ease;
}
.csv101-share-orb{
  position:relative;
  display:grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:50%;
  color:#fff;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.92) 0 7%,transparent 8%),
    radial-gradient(circle at 35% 28%,#5b98cd 0,#174f83 45%,#062b51 78%);
  box-shadow:
    inset 0 1px 4px rgba(255,255,255,.8),
    inset 0 -8px 15px rgba(0,0,0,.18),
    0 7px 15px rgba(6,23,43,.24);
}
.csv101-share-label{font-size:.84rem;font-weight:900;letter-spacing:.01em}
@media(hover:hover){
 .csv101-share-fab:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 19px 42px rgba(6,23,43,.25),inset 0 1px 0 #fff}
}
.csv101-share-fab:active{transform:translateY(1px) scale(.98)}

@media(max-width:650px){
 .csv101-butano-alta{align-items:flex-start;flex-direction:column}
 .csv101-butano-button{width:100%}
 .csv101-share-fab{right:14px;bottom:82px}
 .csv101-share-label{display:none}
 .csv101-share-fab{padding:5px;border-radius:50%}
 .csv101-share-orb{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
 .csv101-share-fab{transition:none}
}


/* CSV102 preproduction fixes: protect floating controls from legacy enhancers. */
html body .csv101-share-fab{
  position:fixed!important;
  right:18px!important;
  left:auto!important;
  top:auto!important;
  bottom:96px!important;
}
@media(max-width:650px){html body .csv101-share-fab{right:14px!important;bottom:84px!important}}

/* Definitive pill contrast. Preserve glass depth while enforcing the approved palette. */
html body :is(a,button,input[type="submit"]).csv-pill--navy{
  --csv46-a:#2c77b7!important;
  --csv46-b:#0b4b86!important;
  --csv46-c:#06172b!important;
  background:linear-gradient(145deg,#2c77b7 0%,#0b4b86 46%,#06172b 100%) padding-box,
             linear-gradient(145deg,#f8fbff,#aab9c9 46%,#526477 78%,#fff) border-box!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.32)!important;
}
html body :is(a,button,input[type="submit"]).csv-pill--navy :is(span,strong,b,em,small,i){
  color:#fff!important;-webkit-text-fill-color:#fff!important;
}
html body :is(a,button).csv-pill--light{
  --csv46-a:#fff!important;
  --csv46-b:#f5f9fd!important;
  --csv46-c:#e3ecf5!important;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(246,250,254,.96) 52%,rgba(225,235,245,.94)) padding-box,
             linear-gradient(145deg,#fff,#b7c5d4 52%,#788a9d 84%,#fff) border-box!important;
  color:#06172b!important;
  -webkit-text-fill-color:#06172b!important;
  text-shadow:none!important;
}
html body :is(a,button).csv-pill--light :is(span,strong,b,em,small,i){
  color:#06172b!important;-webkit-text-fill-color:#06172b!important;text-shadow:none!important;
}


/* CSV102.1 — definitive action palette, beats legacy high-specificity selectors. */
html body :is(a,button,input[type="submit"]).csv-pill--navy:not(#csv-never){
  --csv46-a:#347ebc!important;--csv46-b:#0b4b86!important;--csv46-c:#06172b!important;
  background:
    radial-gradient(circle at 28% 8%,rgba(255,255,255,.72) 0 4%,rgba(255,255,255,.18) 11%,transparent 28%),
    linear-gradient(155deg,#347ebc 0%,#0b4b86 48%,#06172b 100%)!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.30)!important;
}
html body :is(a,button,input[type="submit"]).csv-pill--navy:not(#csv-never) :is(span,strong,b,em,small,i){color:#fff!important;-webkit-text-fill-color:#fff!important}
html body :is(a,button).csv-pill--light:not(#csv-never){
  --csv46-a:#fff!important;--csv46-b:#f7fbff!important;--csv46-c:#e4edf6!important;
  background:
    radial-gradient(circle at 28% 8%,rgba(255,255,255,.98) 0 6%,rgba(255,255,255,.52) 16%,transparent 34%),
    linear-gradient(155deg,#fff 0%,#f7fbff 50%,#e4edf6 100%)!important;
  color:#06172b!important;-webkit-text-fill-color:#06172b!important;text-shadow:none!important;
  border-color:rgba(6,23,43,.13)!important;
}
html body :is(a,button).csv-pill--light:not(#csv-never) :is(span,strong,b,em,small,i){color:#06172b!important;-webkit-text-fill-color:#06172b!important;text-shadow:none!important}

/* Real approved logo floating on a frosted glass plate over the map hero. */
.csv-logo-stage{position:relative!important;isolation:isolate}
.csv102-hero-logo-glass{
  position:absolute;z-index:6;left:7%;right:7%;top:3.5%;height:39%;
  display:grid;place-items:center;padding:1.5% 4%;border-radius:clamp(14px,2.2vw,28px);
  background:linear-gradient(145deg,rgba(4,20,38,.86),rgba(8,38,67,.69));
  border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -18px 34px rgba(0,0,0,.12),0 15px 34px rgba(6,23,43,.24);
  -webkit-backdrop-filter:blur(16px) saturate(115%);backdrop-filter:blur(16px) saturate(115%);
  overflow:hidden;pointer-events:none;
}
.csv102-hero-logo-glass::before{
  content:"";position:absolute;left:7%;right:7%;top:5%;height:35%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.32),transparent);filter:blur(2px);pointer-events:none
}
.csv102-hero-logo-glass img{display:block;width:min(94%,760px);height:94%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.22));position:relative;z-index:2}
@media(max-width:650px){
  .csv102-hero-logo-glass{left:5%;right:5%;top:3%;height:40%;padding:1% 3%;border-radius:14px}
  .csv102-hero-logo-glass img{width:96%;height:96%}
}


/* CSV103 · HERO FINAL — fotografía real Sant Mateu + mapa corporativo.
   Evita cualquier screenshot/maqueta antigua embebida como fondo. */
html body.home-page .hero::before{
  background-image:
    linear-gradient(90deg,rgba(3,15,29,.965) 0%,rgba(3,15,29,.88) 38%,rgba(3,15,29,.52) 68%,rgba(3,15,29,.28) 100%),
    radial-gradient(circle at 74% 24%,rgba(255,206,104,.17),transparent 34%),
    url('/assets/sant-mateu-zona-repostaje-1600.webp')!important;
  background-size:cover!important;
  background-position:center 48%!important;
  background-repeat:no-repeat!important;
}
@media(max-width:980px){
  html body.home-page .hero::before{
    background-image:
      linear-gradient(180deg,rgba(3,15,29,.93) 0%,rgba(3,15,29,.84) 43%,rgba(3,15,29,.62) 72%,rgba(3,15,29,.48) 100%),
      radial-gradient(circle at 68% 22%,rgba(255,206,104,.14),transparent 35%),
      url('/assets/sant-mateu-zona-repostaje-960.webp')!important;
    background-position:center 46%!important;
  }
}
/* Make the approved transparent full logo actually visible over the baked map mark. */
html body .csv102-hero-logo-glass img{
  display:block!important;
  width:92%!important;
  height:92%!important;
  max-width:92%!important;
  max-height:92%!important;
  min-width:0!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  margin:auto!important;
}
@media(max-width:650px){
  html body .csv102-hero-logo-glass img{width:94%!important;height:94%!important;max-width:94%!important;max-height:94%!important}
}
/* CSV103.1: lock approved hero logo inside the frosted plate. */
html body .csv102-hero-logo-glass > img{
  position:absolute!important;
  inset:8%!important;
  width:84%!important;
  height:84%!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  object-fit:contain!important;
  object-position:center!important;
  aspect-ratio:auto!important;
}
/* CSV103.2: desktop logo plate proportion closer to the approved horizontal lock-up. */
@media(min-width:651px){
  html body .csv102-hero-logo-glass{left:16%!important;right:16%!important;height:39%!important}
}


/* CSV104 final verification: the official horizontal logo fully covers the baked mark in the territorial artwork. */
html body .csv102-hero-logo-glass{
  left:10%!important;right:10%!important;top:2.2%!important;height:34%!important;
  background:linear-gradient(145deg,rgba(4,20,38,.94),rgba(8,38,67,.88))!important;
  -webkit-backdrop-filter:blur(22px) saturate(120%)!important;backdrop-filter:blur(22px) saturate(120%)!important;
}
html body .csv102-hero-logo-glass > img{inset:7%!important;width:86%!important;height:86%!important}
@media(max-width:650px){
 html body .csv102-hero-logo-glass{left:5%!important;right:5%!important;top:2%!important;height:35%!important}
 html body .csv102-hero-logo-glass > img{inset:6%!important;width:88%!important;height:88%!important}
}