/* ============================================================
   La Cande Gas — style.css (única hoja, BEM)
   Estética editorial: fondo hueso, grotesca gigante, acento lima,
   tarjetas blancas/negras redondeadas, footer tinta con wordmark XXL.
   1. Tokens  2. Reset  3. Utilidades  4. Header  5. Hero
   6. Secciones  7. Footer  8. Legal  9. WA fab  10. Motion/print
   ============================================================ */

/* 1. Tokens ------------------------------------------------- */
:root{
  --font-sans: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --bg: oklch(0.955 0.006 95);           /* hueso */
  --ink: oklch(0.19 0.01 260);           /* tinta casi negra */
  --ink-soft: oklch(0.42 0.01 260);
  --ink-faint: oklch(0.56 0.01 260);
  --card: oklch(0.99 0.002 95);
  --line: color-mix(in oklch, var(--ink) 12%, transparent);
  --orange: oklch(0.66 0.2 38);          /* naranja marca */
  --orange-deep: oklch(0.58 0.21 32);
  --orange-grad: linear-gradient(135deg, oklch(0.58 0.21 30), oklch(0.72 0.18 55));
  --lime: var(--orange); --lime-deep: var(--orange-deep);
  --on-dark: oklch(0.97 0.004 95);
  --on-dark-mid: oklch(0.74 0.008 95);
  --wa: oklch(0.72 0.19 150);

  --r-lg: 20px; --r-md: 14px; --r-pill: 999px;
  --pad-x: 50px;
  --maxw: none;
}
@media (max-width:640px){ :root{ --pad-x: 20px; } }

/* 2. Reset --------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--font-sans);
  background:var(--bg); color:var(--ink);
  line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
p{ text-wrap:pretty; }
a{ color:var(--orange); }
a:hover{ color:var(--orange-deep); }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

/* 3. Utilidades ---------------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--orange); color:#fff;
  padding:10px 18px; font-weight:700; z-index:100;
}
.skip-link:focus{ left:0; }

.tag{
  display:inline-block; background:var(--orange-grad); color:#fff;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:4px; margin:0 0 20px;
}
.section__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(64px,9vh,110px) var(--pad-x); }
.section__title{
  font-weight:600; font-size:clamp(30px,3.8vw,48px);
  line-height:1.06; letter-spacing:-0.03em;
  margin:0 0 18px; max-width:26ch; text-wrap:balance;
}
.section__title .muted, .muted--grad, .hero__title .muted, .btn--grad-text span{
  color:transparent;
  background:linear-gradient(90deg, #F23F00 71.5%, #FF6800 85.75%, #BD1000 100%);
  -webkit-background-clip:text; background-clip:text;
}
.section__lead{ color:var(--ink-soft); font-size:clamp(16px,1.5vw,18px); max-width:56ch; margin:0 0 28px; }
.section--center .tag{ display:table; margin-left:auto; margin-right:auto; }
.section--center .section__title, .section--center .section__lead{
  margin-left:auto; margin-right:auto; text-align:center;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:10px 22px;
  border-radius:var(--r-pill); border:1px solid transparent;
  font-weight:600; font-size:15px; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--lg{ min-height:54px; padding:14px 30px; font-size:16px; }
.btn--lime, .btn--orange{ background:var(--orange-grad); color:#fff; box-shadow:0 6px 18px color-mix(in oklch, var(--orange) 30%, transparent); }
.btn--lime:hover, .btn--orange:hover{ filter:brightness(1.07); color:#fff; }
.btn--ink{ background:var(--card); border-color:var(--line); color:var(--ink); }
.btn--ink:hover{ border-color:var(--ink); color:var(--ink); background:var(--card); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:var(--card); }
.site-header__actions .btn--ink{ background:#25D366; border-color:#25D366; color:#fff; }
.site-header__actions .btn--ink:hover{ background:#1EBE5A; border-color:#1EBE5A; color:#fff; }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn--wa{ background:var(--wa); color:#fff; }
.btn--wa:hover{ background:oklch(0.62 0.18 150); color:#fff; }
.btn__icon{ flex:none; }
.btn__arrow{
  display:inline-grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:#fff; color:var(--orange-deep);
  font-size:14px; line-height:1;
}

/* 4. Header -------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:50; padding:14px var(--pad-x) 0; }
.site-header__inner{
  max-width:var(--maxw); margin:0 auto;
  background:color-mix(in oklch, var(--card) 92%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 8px 8px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-header__brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.site-header__logo{ width:auto; height:34px; }
.site-header__name{
  color:var(--ink); font-weight:700; font-size:19px;
  letter-spacing:-0.03em; line-height:1;
}
.site-header__name small{
  display:block; font-weight:700; font-size:8.5px;
  letter-spacing:0.34em; color:var(--orange); margin-top:2px;
}
.site-header__nav{ display:flex; gap:4px; flex:1; justify-content:center; }
.site-header__nav a{
  color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:14px;
  padding:8px 14px; border-radius:var(--r-pill);
}
.site-header__nav a:hover{ background:var(--bg); color:var(--ink); }
@media (max-width:960px){ .site-header__nav{ display:none; } }

/* 4b. Barra utilitaria --------------------------------------- */
.utility-bar{ padding:10px var(--pad-x) 0; }
.utility-bar__inner{
  max-width:var(--maxw); margin:0 auto; padding:0;
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);
}
.utility-bar__inner strong{ color:var(--ink); }

/* 5. Hero ---------------------------------------------------- */
.hero{ padding:12px var(--pad-x) 0; }
.hero__panel{
  position:relative; isolation:isolate;
  max-width:var(--maxw); margin:0 auto;
  border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:min(78vh, 720px);
}
.hero__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(12,16,24,0.9) 0%, rgba(12,16,24,0.55) 45%, rgba(12,16,24,0.2) 80%);
}
.hero__main{
  display:grid; grid-template-columns:minmax(0, 760px);
  padding:clamp(120px,18vh,220px) clamp(32px,4.5vw,56px) clamp(32px,4.5vw,48px);
}
.hero__copy{ display:grid; gap:18px; justify-items:start; }
.hero__copy .tag{ margin:0; }
.hero__title{
  margin:0; font-weight:700; color:#fff;
  font-size:clamp(34px, 4.4vw, 64px);
  line-height:1.04; letter-spacing:-0.035em; max-width:16ch; text-wrap:balance;
  text-shadow:0 2px 26px rgba(12,16,24,0.35);
}
.hero__sub{ margin:0; color:rgba(255,255,255,0.88); font-size:clamp(15px,1.5vw,17px); max-width:44ch; text-shadow:0 1px 14px rgba(12,16,24,0.4); }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.btn--outline{ border-color:rgba(255,255,255,0.55); color:#fff; background:rgba(12,16,24,0.18); backdrop-filter:blur(4px); }
.btn--outline:hover{ border-color:#fff; color:#fff; }
.btn--grad-text{ background:var(--card); border-color:var(--line); }
.btn--grad-text span{ font-weight:700; }
.btn--grad-text:hover{ border-color:var(--orange); }
.hero__prices{
  list-style:none; margin:10px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.hero__price{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.16); backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:var(--r-pill); padding:8px 16px;
  font-size:13.5px; font-weight:500; color:rgba(255,255,255,0.85);
}
.hero__price strong{ color:#fff; font-weight:700; font-variant-numeric:tabular-nums; }
.hero__price-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.hero__price--premium .hero__price-dot{ background:oklch(0.55 0.21 27); }
.hero__price--magna .hero__price-dot{ background:oklch(0.55 0.17 148); }
.hero__price--diesel .hero__price-dot{ background:oklch(0.24 0.01 275); }
.hero__meta{
  margin:0; padding:22px clamp(32px,4.5vw,56px);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:18px 32px;
}
.hero__meta-item dt{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.65);
  margin:0 0 6px;
}
.hero__meta-item dd{ margin:0; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,0.92); text-shadow:0 1px 10px rgba(12,16,24,0.45); }
.hero__proof{
  list-style:none; margin:0 auto; padding:26px 8px 6px;
  max-width:var(--maxw);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;
}
.hero__proof-item{
  display:grid; gap:2px; padding:6px 22px;
  border-left:1px solid var(--line);
  font-size:13.5px; color:var(--ink-faint); background:none;
}
.hero__proof-item strong{
  display:block; font-size:clamp(22px,2vw,28px); font-weight:600;
  letter-spacing:-0.02em; line-height:1.15; color:var(--ink);
}

/* 6a. Servicios (mosaico) ------------------------------------ */
.services__grid{
  list-style:none; margin:44px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:230px; gap:16px;
}
.service-tile{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink);
}
.service-tile--tall{ grid-column:span 2; grid-row:span 2; }
.service-tile--wide{ grid-column:span 2; }
@media (max-width:900px){
  .services__grid{ grid-template-columns:1fr 1fr; grid-auto-rows:210px; }
}
@media (max-width:560px){
  .services__grid{ grid-template-columns:1fr; }
  .service-tile--tall, .service-tile--wide{ grid-column:span 1; grid-row:span 1; }
}
.service-tile__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.service-tile:hover .service-tile__img{ transform:scale(1.04); }
.service-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,18,25,0.82) 0%, rgba(15,18,25,0.35) 45%, rgba(15,18,25,0) 75%);
}
.service-tile__title{
  position:absolute; left:22px; right:22px; bottom:18px; z-index:1;
  margin:0; color:#fff; font-size:clamp(18px,1.8vw,22px); font-weight:500;
  line-height:1.25; letter-spacing:-0.02em; text-wrap:balance;
}
.service-tile__title a{ color:#fff; text-decoration:none; }
.service-tile__title a:hover{ color:#fff; }

/* 6b. Precios (panel tinta) ---------------------------------- */
.prices .section__inner{ padding-top:0; }
.prices__panel{
  background:var(--card); color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(36px,5vw,56px);
}
.prices__panel .section__title{ margin-left:auto; margin-right:auto; }
.prices__panel .section__lead{ margin-left:auto; margin-right:auto; }
.prices__panel .section__lead strong{ color:var(--ink); }
.prices__seals{
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin:6px 0 4px;
}
.prices__seals img{ height:44px; width:auto; border-radius:8px; }
.prices__grid{
  list-style:none; margin:40px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:28px 20px;
  align-items:end; max-width:1060px; margin-left:auto; margin-right:auto;
}
.pump{ display:grid; justify-items:center; }
.pump__body{
  position:relative; width:min(100%, 290px);
  border-radius:22px 22px 10px 10px;
  padding:22px 22px 20px; padding-right:46px;
  display:grid; gap:16px;
}
.pump--premium .pump__body{ background:linear-gradient(160deg, oklch(0.6 0.21 27), oklch(0.5 0.2 27)); }
.pump--magna .pump__body{ background:linear-gradient(160deg, oklch(0.58 0.17 148), oklch(0.48 0.16 148)); }
.pump--diesel .pump__body{ background:linear-gradient(160deg, oklch(0.34 0.015 275), oklch(0.24 0.012 275)); }
.pump__screen{
  background:var(--card); border-radius:12px; padding:18px 16px;
  display:grid; gap:6px; text-align:center;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.18);
}
.pump__logo{ height:24px; width:auto; max-width:100%; object-fit:contain; justify-self:center; margin-top:2px; }
.pump__lcd{
  display:block; background:oklch(0.2 0.02 160); border-radius:8px;
  padding:10px 8px 8px; margin:6px 0 2px;
  font-family:"Chakra Petch", var(--font-mono);
  font-size:clamp(30px,2.6vw,38px); font-weight:600; letter-spacing:0.04em;
  color:oklch(0.85 0.19 150); font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px color-mix(in oklch, oklch(0.85 0.19 150) 60%, transparent);
}
.pump__unit{ font-size:12px; font-weight:600; color:var(--ink-faint); }
.pump__brand{ display:flex; justify-content:center; }
.pump__brand img{ height:26px; width:auto; }
.pump__nozzle{
  position:absolute; top:26px; right:-8px;
  width:26px; height:38px; border-radius:6px 10px 4px 4px;
  background:oklch(0.24 0.012 275);
}
.pump__nozzle::before{
  content:""; position:absolute; top:-9px; right:5px;
  width:9px; height:14px; border-radius:3px 3px 0 0;
  background:oklch(0.24 0.012 275);
}
.pump__hose{
  position:absolute; top:60px; right:-9px; bottom:26px; width:34px;
  border:5px solid oklch(0.24 0.012 275); border-left:none;
  border-radius:0 20px 24px 0;
}
.pump__base{
  width:min(100%, 322px); height:14px; margin-top:2px;
  background:oklch(0.3 0.012 275); border-radius:4px;
}
.prices__note{ margin:24px auto 4px; font-size:13px; color:var(--ink-faint); text-align:center; max-width:none; }
.prices__payments{ margin:0 auto; font-size:14px; color:var(--ink-soft); max-width:72ch; text-align:center; }

/* 6c. Flotillas ---------------------------------------------- */
.fleet{ padding:clamp(64px,9vh,110px) 0 0; }
.fleet__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px 56px; align-items:center;
}
@media (max-width:860px){ .fleet__inner{ grid-template-columns:1fr; } }
.fleet__copy{ display:block; padding:0; background:none; color:var(--ink); }
.fleet__copy .section__title{ color:var(--ink); }
.fleet__copy .section__lead{ color:var(--ink-soft); }
.fleet__ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.fleet__media{ display:grid; gap:12px; }
.fleet__img{
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--r-lg); min-height:300px;
}
.fleet__stats{
  list-style:none; margin:26px 0 0; padding:0; grid-column:auto; background:none; color:var(--ink);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px;
}
.fleet__stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 18px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:12px; align-items:center;
}
.fleet__stat-icon{ width:34px; height:34px; grid-row:span 2; }
.fleet__stat dt{ grid-column:2; order:2; line-height:1.3; }
.fleet__stat dd{ grid-column:2; line-height:1.1; }
.fleet__stat:first-child{ background:var(--orange-grad); border-color:transparent; }
.fleet__stat dt{ color:var(--ink-soft); font-size:13px; }
.fleet__stat:first-child dt{ color:rgba(255,255,255,0.85); }
.fleet__stat:first-child dd{ color:#fff; }
.fleet__stat dd{ margin:0; font-size:26px; font-weight:700; letter-spacing:-0.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.fleet__stat dd .hot{ color:inherit; }

/* 6d. Reseñas ------------------------------------------------ */
.reviews__grid{
  list-style:none; margin:40px 0 28px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px;
}
.review-card{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px 26px; display:flex; flex-direction:column; gap:14px; text-align:left;
  transition:transform .25s ease, box-shadow .25s ease;
}
.review-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px color-mix(in oklch, var(--ink) 10%, transparent);
}
.review-card::before{
  content:"\201C"; position:absolute; top:-14px; right:14px;
  font-size:120px; line-height:1; font-weight:800;
  color:transparent;
  background:linear-gradient(90deg, #F23F00 71.5%, #FF6800 85.75%, #BD1000 100%);
  -webkit-background-clip:text; background-clip:text;
  opacity:0.12; pointer-events:none;
}
.review-card__stars{
  font-size:17px; letter-spacing:4px;
  color:transparent;
  background:linear-gradient(90deg, #F23F00 71.5%, #FF6800 85.75%, #BD1000 100%);
  -webkit-background-clip:text; background-clip:text;
}
.review-card__quote{ margin:0; font-size:16.5px; line-height:1.55; font-weight:500; flex:1; }
.review-card__meta{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.review-card__avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--orange-grad); color:#fff; font-weight:700; font-size:15px;
}
.review-card__author{ font-style:normal; color:var(--ink); font-size:14px; font-weight:600; line-height:1.3; }
.review-card__author small{ display:block; font-weight:400; font-size:12px; color:var(--ink-faint); margin-top:1px; }
.reviews .section__inner > .reviews__cta{ display:table; margin:0 auto; }

/* 6e. Facturación (panel tinta) ------------------------------ */
.billing .section__inner{ padding-top:0; }
.billing__panel{
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(36px,5vw,56px);
  display:grid; grid-template-columns:1.4fr 0.6fr; gap:40px; align-items:center;
}
@media (max-width:860px){ .billing__panel{ grid-template-columns:1fr; } }

.billing__tip{ font-size:14px; font-style:italic; margin:0; color:var(--ink-faint); }
.billing__action{ display:flex; align-items:center; gap:20px; margin-top:24px; }
.billing__img{ width:100%; height:100%; min-height:260px; object-fit:cover; border-radius:var(--r-md); }
.billing__img--truck{ object-fit:contain; min-height:0; align-self:center; }
.billing__mail{ font-size:14px; font-weight:600; color:var(--ink); }
.billing__mail:hover{ color:var(--orange); }

/* 6f. Ubicación ----------------------------------------------- */
.location__inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; }
@media (max-width:860px){ .location__inner{ grid-template-columns:1fr; } }
.location__nap{ font-style:normal; color:var(--ink-soft); line-height:1.7; margin:0 0 18px; }
.location__nap strong{ color:var(--ink); }
.location__meta{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:8px; color:var(--ink-soft); font-size:15px; }
.location__map{
  width:100%; aspect-ratio:4/3; border:1px solid var(--line);
  border-radius:var(--r-lg); filter:grayscale(0.2);
}

/* 7. Footer -------------------------------------------------- */
.site-footer{ background:oklch(0.93 0.005 95); color:var(--ink); border-top:1px solid var(--line); margin-top:20px; }
.site-footer__inner{ max-width:var(--maxw); margin:0 auto; padding:64px var(--pad-x) 0; }
.site-footer__grid{
  display:grid; grid-template-columns:1.2fr 0.9fr 0.9fr; gap:40px;
  padding-bottom:52px; border-bottom:1px solid var(--line);
}
@media (max-width:860px){ .site-footer__grid{ grid-template-columns:1fr; } }
.site-footer__col h2{
  margin:0 0 16px; font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--orange);
}
.site-footer__nap{ font-style:normal; color:var(--ink-soft); font-size:14.5px; line-height:1.8; }
.site-footer__nap strong{ color:var(--ink); }
.site-footer__nap a{ color:var(--ink); }
.site-footer__nap a:hover{ color:var(--orange); }
.site-footer__nav{ display:grid; gap:9px; }
.site-footer__nav a{ color:var(--ink-soft); text-decoration:none; font-size:14.5px; }
.site-footer__nav a:hover{ color:var(--orange); }
.site-footer__legal{ font-size:13px; color:var(--ink-faint); margin:0; padding:22px 0; line-height:1.7; }
.site-footer__legal a{ color:var(--ink-faint); }
.site-footer__legal a:hover{ color:var(--orange); }
.site-footer__wordmark{
  margin:0; font-weight:700; text-align:left;
  font-size:clamp(60px, 13vw, 200px); line-height:0.86; letter-spacing:-0.05em;
  color:color-mix(in oklch, var(--ink) 16%, transparent); user-select:none; white-space:nowrap;
  transform:translateY(0.08em); overflow:hidden; padding-top:20px;
}

/* 8. Página legal -------------------------------------------- */
.page-legal main{ max-width:760px; margin:0 auto; padding:56px var(--pad-x) 88px; }
.page-legal h1{ font-size:clamp(30px,4vw,44px); letter-spacing:-0.03em; line-height:1.05; }
.page-legal h2{ font-size:22px; margin-top:2.2em; letter-spacing:-0.02em; }
.page-legal p, .page-legal li{ color:var(--ink-soft); max-width:68ch; }
.controller-card{ width:100%; border-collapse:collapse; margin:24px 0; font-size:15px; background:var(--card); }
.controller-card th, .controller-card td{ text-align:left; padding:10px 14px; border:1px solid var(--line); }
.controller-card th{ color:var(--ink-faint); font-weight:600; width:38%; }

/* 9. WhatsApp fab -------------------------------------------- */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--wa); color:#fff; text-decoration:none;
  font-weight:700; font-size:15px;
  padding:13px 22px; border-radius:var(--r-pill);
  box-shadow:0 10px 26px color-mix(in oklch, var(--wa) 45%, transparent);
}
.wa-fab:hover{ background:oklch(0.62 0.18 150); color:#fff; }

/* 10. Motion y print ----------------------------------------- */
.reveal{ opacity:1; transform:none; }
body.anim-ready .reveal:not(.is-in){ opacity:0; transform:translateY(14px); }
body.anim-ready .reveal{ transition:opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  body.anim-ready .reveal{ opacity:1 !important; transform:none !important; }
}

@media print{
  body{ background:#fff; color:#000; }
  .site-header, .utility-bar, .btn, .skip-link, .location__map, .wa-fab{ display:none !important; }
  a{ color:#000; }
}

/* 10. Página de flotillas -------------------------------------- */
.fp-grid{
  list-style:none; margin:40px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:14px;
  text-align:left;
}
.fp-grid--two{ grid-template-columns:repeat(4, 1fr); max-width:none; margin-left:auto; margin-right:auto; }
@media (max-width: 900px){ .fp-grid--two{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px){ .fp-grid--two{ grid-template-columns:1fr; } }
.fp-card{ align-content:start; }
.fp-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px 24px 22px; display:grid; gap:10px; justify-items:start;
}
.fp-card img{ width:34px; height:34px; }
.fp-card h3{ margin:2px 0 0; font-size:17px; font-weight:600; color:var(--ink); }
.fp-card p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
.fp-steps{
  list-style:none; margin:40px 0 0; padding:0; counter-reset:paso;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px;
  text-align:left;
}
.fp-step{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px; display:grid; gap:8px; justify-items:start;
}
.fp-step__num{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--orange-grad); color:#fff; font-weight:700; font-size:15px;
}
.fp-step h3{ margin:6px 0 0; font-size:17px; font-weight:600; color:var(--ink); }
.fp-step p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
.fp-steps__cta{ margin-top:28px; display:flex; justify-content:center; }
.services__grid--three{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.services__grid--three .service-tile{ aspect-ratio:4/3; }

/* 11. Marcas de agua isotipo ----------------------------------- */
.services, .reviews, #control{ position:relative; overflow:hidden; }
.wm{
  position:absolute; width:min(560px, 55vw); height:auto;
  opacity:0.05; pointer-events:none; user-select:none; z-index:0;
}
.wm--left{ left:-140px; top:40px; }
.wm--right{ right:-150px; bottom:-60px; transform:scaleX(-1); }
.services .section__inner, .reviews .section__inner, #control .section__inner{ position:relative; z-index:1; }

/* 12. Administración de flotillas ------------------------------- */
.fp-grid--five{ grid-template-columns:repeat(5, 1fr); }
@media (max-width: 1100px){ .fp-grid--five{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 720px){ .fp-grid--five{ grid-template-columns:1fr 1fr; } }
@media (max-width: 480px){ .fp-grid--five{ grid-template-columns:1fr; } }
.fp-grid--three{ grid-template-columns:repeat(3, 1fr); }
@media (max-width: 980px){ .fp-grid--three{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .fp-grid--three{ grid-template-columns:1fr; } }
.quality-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left;
}
@media (max-width: 860px){ .quality-grid{ grid-template-columns:1fr; } }
.quality-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(28px,3.5vw,44px); display:grid; gap:14px; justify-items:start; align-content:start;
}
.quality-card img{ height:48px; width:auto; border-radius:8px; }
.quality-card h2{ margin:6px 0 0; font-size:clamp(20px,2vw,26px); font-weight:700; letter-spacing:-0.02em; color:var(--ink); }
.quality-card p{ margin:0; font-size:15px; line-height:1.7; color:var(--ink-soft); }
.credit-panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(28px,4vw,52px);
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(24px,4vw,56px); align-items:center;
  text-align:left;
}
@media (max-width: 900px){ .credit-panel{ grid-template-columns:1fr; } }
.credit-panel .tag{ display:inline-block; margin-left:0; margin-right:0; }
.credit-panel .section__title, .credit-panel .section__lead{ margin-left:0; margin-right:0; text-align:left; }
.credit-panel .section__lead{ margin-bottom:0; }
.credit-list{
  list-style:none; margin:22px 0 28px; padding:0; display:grid; gap:12px;
}
.credit-list li{
  position:relative; padding-left:26px; font-size:15px; line-height:1.65; color:var(--ink-soft);
}
.credit-list li::before{
  content:""; position:absolute; left:0; top:7px; width:10px; height:10px;
  border-radius:50%; background:var(--orange-grad);
}
.credit-list strong{ color:var(--ink); }
.credit-list small{ display:block; font-size:12.5px; color:var(--ink-faint); }
.credit-panel__img{ width:100%; height:auto; object-fit:contain; }
.hero__panel--split{ background:var(--card); border:1px solid var(--line); }
.hero__panel--split .hero__title{ color:var(--ink); }
.hero__panel--split .hero__sub{ color:var(--ink-soft); }
.hero__panel--split .hero__meta{ border-top:1px solid var(--line); background:var(--bg); }
.hero__panel--split .hero__meta-item dt{ color:var(--ink-faint); }
.hero__panel--split .hero__meta-item dd{ color:var(--ink-soft); text-shadow:none; }
.hero__panel--split .btn--outline{
  border-color:transparent;
  color:transparent;
  background-image:linear-gradient(90deg, #F23F00 71.5%, #FF6800 85.75%, #BD1000 100%), linear-gradient(oklch(0.96 0.02 45), oklch(0.96 0.02 45));
  -webkit-background-clip:text, border-box; background-clip:text, border-box;
}
.hero__panel--split .btn--outline:hover{
  border-color:transparent; color:transparent;
  background-image:linear-gradient(90deg, #F23F00 71.5%, #FF6800 85.75%, #BD1000 100%), linear-gradient(oklch(0.93 0.035 45), oklch(0.93 0.035 45));
  -webkit-background-clip:text, border-box; background-clip:text, border-box;
}
.hero__panel--split .hero__main--split{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,4vw,56px); align-items:center;
}
@media (max-width: 900px){ .hero__panel--split .hero__main--split{ grid-template-columns:1fr; } }
.hero__video{
  width:100%; height:100%; min-height:280px; object-fit:cover;
  border-radius:var(--r-md); display:block;
}

/* 12b. Pagos y sectores (administración) ------------------------ */
.pay-marquee{
  margin:36px 0 0; overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pay-marquee__track{
  list-style:none; margin:0; padding:6px 0; display:flex; gap:12px; width:max-content;
  animation:pay-scroll 32s linear infinite;
}
.pay-marquee:hover .pay-marquee__track{ animation-play-state:paused; }
@keyframes pay-scroll{ to{ transform:translateX(calc(-50% - 6px)); } }
.pay-marquee__track li{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 22px; display:grid; place-items:center; min-width:120px;
}
.pay-marquee__track img{ height:28px; width:auto; max-width:110px; object-fit:contain; }
@media (prefers-reduced-motion: reduce){ .pay-marquee__track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; } }
.sectors{
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,4vw,56px); align-items:center;
  text-align:left;
}
@media (max-width: 900px){ .sectors{ grid-template-columns:1fr; } }
.sectors__nexus{ height:30px; width:auto; display:block; margin-bottom:18px; }
.sectors__copy .tag{ display:inline-block; margin-left:0; margin-right:0; }
.sectors__copy .section__title, .sectors__copy .section__lead{ margin-left:0; margin-right:0; text-align:left; }
.sectors__copy .section__lead{ margin-bottom:0; }
.sectors__copy .btn{ margin-top:26px; }
.sectors__carousel{ min-width:0; display:grid; gap:18px; }
.sectors__slider{
  list-style:none; margin:0; padding:0; display:flex;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; min-width:0; border-radius:var(--r-md);
}
.sectors__slider::-webkit-scrollbar{ display:none; }
.sectors__slider .fp-card{
  flex:0 0 100%; scroll-snap-align:start; box-sizing:border-box;
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(28px,3vw,40px); min-height:340px; border:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
}
.sectors__slider .fp-card h3{ font-size:22px; color:#fff; margin:0; }
.sectors__slider .fp-card p{ font-size:15.5px; color:rgba(255,255,255,0.88); }
.sectors__slider .fp-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(15,18,25,0.78) 0%, rgba(15,18,25,0.25) 55%, rgba(15,18,25,0.05) 100%);
}
.sectors__dots{ display:flex; justify-content:center; gap:8px; }
.sectors__dots button{
  width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:color-mix(in oklch, var(--ink) 18%, transparent);
}
.sectors__dots button[aria-selected="true"]{
  background:var(--orange-grad); width:24px; border-radius:99px;
}

/* 12c. Formulario de contacto (administración) ------------------- */
.contact-form{ display:grid; gap:14px; text-align:left; }
#contacto .billing__panel:has(.contact-form){ grid-template-columns:1fr 1.1fr; align-items:start; }
.contact-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 560px){ .contact-form__row{ grid-template-columns:1fr; } }
.contact-form label{
  display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--ink-soft);
}
.contact-form label small{ font-weight:400; color:var(--ink-faint); }
.contact-form input, .contact-form select, .contact-form textarea{
  font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; width:100%; box-sizing:border-box;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange);
}
.contact-form textarea{ resize:vertical; }
.contact-form button{ justify-self:start; margin-top:4px; cursor:pointer; border:0; }
.contact-form__ok{ margin:2px 0 0; font-size:14px; font-weight:600; color:var(--ink); }
.sectors__slider .fp-card__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2; border-radius:0; margin:0;
}
.pay-marquee__track li.pay-chip-text{
  font-weight:700; font-size:16px; letter-spacing:-0.01em; color:var(--ink-soft);
}

/* 13. Responsivo móvil (no afecta desktop) ----------------------- */
@media (max-width:860px){
  #contacto .billing__panel:has(.contact-form){ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .site-header{ padding-top:10px; }
  .site-header__inner{ padding:6px 6px 6px 14px; }
  .site-header__logo{ height:28px; }
  .site-header__actions .btn{ min-height:40px; padding:8px 16px; font-size:14px; }
  .utility-bar__inner{ flex-wrap:wrap; text-align:center; letter-spacing:0.06em; font-size:11px; }
  .hero__panel{ min-height:min(70vh, 560px); }
  .hero__main{ padding-top:clamp(90px,14vh,140px); }
  .hero__ctas{ width:100%; }
  .hero__ctas .btn{ flex:1 1 auto; }
  .hero__meta{ grid-template-columns:1fr 1fr; gap:14px 20px; padding:18px 22px; }
  .hero__proof{ grid-template-columns:1fr 1fr; gap:8px; }
  .hero__proof-item{ padding:6px 14px; }
  .section__inner{ padding-top:56px; padding-bottom:56px; }
  .prices__panel, .billing__panel, .credit-panel{ padding:26px 20px; }
  .prices__seals img{ height:36px; }
  .pump__body{ width:min(100%, 320px); }
  .billing__action{ flex-wrap:wrap; }
  .billing__img{ min-height:200px; }
  .hero__video{ min-height:220px; }
  .sectors__slider .fp-card{ min-height:280px; }
  .quality-card{ padding:24px 20px; }
  .fleet__img{ min-height:220px; }
  .site-footer__inner{ padding-top:48px; }
  .wa-fab{ right:14px; bottom:14px; padding:11px 18px; font-size:14px; }
}
@media (max-width:480px){
  .hero__meta{ grid-template-columns:1fr; gap:12px; }
  .hero__proof{ grid-template-columns:1fr; }
  .hero__price{ padding:7px 12px; font-size:12.5px; }
  .pump__nozzle, .pump__hose{ display:none; }
  .pump__body{ padding-right:22px; }
  .fp-grid--two{ grid-template-columns:1fr; }
  .contact-form__row{ grid-template-columns:1fr; }
  .contact-form button{ width:100%; }
  .sectors__nexus{ height:24px; }
}