/* ==========================================================================
   Chia Auto-Ecole — page chrome
   Header, buttons, contact strip, footer, floating WhatsApp.
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* The opaque state is the DEFAULT, so a page with no JS (or a script that
   failed) never ends up with white text over a white section. The
   transparent-over-hero look is only enabled once .js confirms something is
   there to switch it back. */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--hairline);
  transition:
    background-color 260ms var(--ease-out),
    color 120ms var(--ease-out),
    box-shadow 260ms var(--ease-out);
}

.js .hdr:not([data-stuck]) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
  box-shadow: none;
}

.hdr[data-stuck] {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--hairline);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 72px;
}

.hdr__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex: 0 0 auto;
  /* the mark's colours follow the header's state */
  --lg-red: var(--red);
  --lg-ink: currentColor;
}

.hdr__logo svg { height: 38px; width: auto; }

.hdr__logo b {
  font-size: var(--t-sm);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.hdr__logo b span {
  display: block;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.14em;
  /* the header sits on the dark hero first, then on paper once stuck,
     and the two reds each pass AA on exactly one of those grounds */
  color: var(--red-bright);
  margin-top: 0.24em;
}

.hdr[data-stuck] .hdr__logo b span { color: var(--red); }

.hdr__nav {
  display: none;
  gap: var(--s-5);
  margin-inline-start: auto;
  font-size: var(--t-sm);
  font-weight: 600;
}

.hdr__nav a {
  text-decoration: none;
  position: relative;
  padding-block: 0.35rem;
  opacity: 0.86;
  transition: opacity 160ms var(--ease-out);
}

/* the underline grows from the left, only on real pointers */
.hdr__nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hdr__nav a:hover { opacity: 1; }
  .hdr__nav a:hover::after { transform: scaleX(1); }
}

.hdr__end {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-inline-start: auto;
}

/* Below 30rem the logo, the language switch and a button do not fit on one
   line. The button goes: the hero CTA and the floating WhatsApp already
   cover that job on a phone, the brand name does not have a substitute. */
@media (max-width: 29.99rem) {
  /* .hdr__end scopes this above `.btn { display: inline-flex }`, which is
     defined later in this file and would otherwise win on source order */
  .hdr__end .hdr__cta { display: none; }
  .hdr__logo b { font-size: var(--t-xs); }
}

@media (min-width: 62rem) {
  .hdr__nav { display: flex; }
  .hdr__end { margin-inline-start: 0; }
}

/* ---- language switch ---------------------------------------------------- */

.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.lang a,
.lang span {
  display: block;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out);
}

.lang [aria-current] {
  background: var(--red);
  color: #fff;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  /* name the properties; never transition: all */
  transition:
    transform var(--d-press) var(--ease-out),
    background-color var(--d-press) var(--ease-out),
    color var(--d-press) var(--ease-out);
}

/* :active is a real press on touch, so it needs no hover gate */
.btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--red-deep); }
  .btn--ghost:hover { background: rgba(128,128,128,0.16); }
  .btn--solid:hover { background: var(--ink-2); }
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}

.btn--solid { --btn-bg: var(--ink); }

.btn--lg { padding: 1.15rem 1.9rem; font-size: var(--t-base); }

.btn--sm { padding: 0.6rem 1rem; font-size: var(--t-xs); }

/* the arrow nudges, the label does not */
.btn svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(3px); }
}

/* ==========================================================================
   Quick contact strip
   ========================================================================== */

.strip {
  background: var(--ink);
  color: #fff;
  border-block: 1px solid var(--hairline-dark);
}

.strip__in {
  display: grid;
  gap: 1px;
  background: var(--hairline-dark);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .strip__in { grid-template-columns: repeat(3, 1fr); }
}

.strip__cell {
  background: var(--ink);
  padding: var(--s-5) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* a red wash sweeps in from the left on hover */
.strip__cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
  z-index: 0;
}

@media (hover: hover) and (pointer: fine) {
  a.strip__cell:hover::before { transform: scaleX(1); }
}

.strip__cell > * { position: relative; z-index: 1; }

.strip__k {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dark);
  transition: color 320ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a.strip__cell:hover .strip__k { color: rgba(255,255,255,0.78); }
}

.strip__v {
  font-size: var(--t-lg);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.strip__v small {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--muted-dark);
  letter-spacing: 0;
  transition: color 320ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a.strip__cell:hover .strip__v small { color: rgba(255,255,255,0.82); }
}

/* the approval number is a fact, not a link — keep it monospaced-ish and calm */
.strip__approval {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  word-break: break-all;
  line-height: 1.35;
}

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */

.wa {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.75rem);
  bottom: clamp(0.9rem, 3vw, 1.75rem);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 700;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28);
  transition:
    transform 220ms var(--ease-out),
    background-color 220ms var(--ease-out);
}

.wa svg { width: 22px; height: 22px; flex: 0 0 auto; }

.wa__label {
  display: none;
  white-space: nowrap;
}

@media (min-width: 30rem) { .wa__label { display: block; } }

.wa:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .wa:hover { background: var(--red); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ftr {
  background: var(--ink);
  color: #fff;
  padding-block: var(--s-8) var(--s-6);
}

.ftr__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--hairline-dark);
}

@media (min-width: 48rem) {
  .ftr__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); }
}

.ftr__logo {
  --lg-red: var(--red);
  --lg-ink: #fff;
}

/* the footer lockup is an <img> (colours baked for dark), so size it directly */
.ftr__logo { height: auto; width: auto; max-width: min(100%, 260px); }

.ftr h4 {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: var(--s-3);
}

.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; justify-items: start; }

/* an inline icon with no intrinsic size will otherwise fill its container */
.ftr ul a { display: inline-flex; align-items: center; gap: 0.45rem; }
.ftr ul a svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

.ftr a { text-decoration: none; opacity: 0.86; transition: opacity 160ms var(--ease-out), color 160ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .ftr a:hover { opacity: 1; color: var(--red); }
}

.ftr__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  justify-content: space-between;
  padding-top: var(--s-5);
  font-size: var(--t-xs);
  color: var(--muted-dark);
}

.ftr__approval { letter-spacing: 0.02em; }
.ftr__approval b { color: #fff; font-weight: 600; }