/* =====================================================================
   SmartCell Phone Shop
   White led brand world, straight off their signage: white ground,
   crimson swooshes, black letters, chrome blue SMART.
   Buildless. Vanilla CSS driven by custom properties. Mobile first.
   Built by Borg Sites, https://borgsites.com
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  0. Fonts, self hosted. Zero external requests.                     */
/*     Chakra Petch ships as a true static face, 700 only, which is     */
/*     the single display weight this page uses. Inter now ships from   */
/*     Google as a variable font, so one file per subset covers         */
/*     400 / 600 / 700 with real instances (no synthetic bold).         */
/*     Both latin and latin-ext are included on every face.             */
/* ------------------------------------------------------------------ */

/* Chakra Petch 700, latin-ext */
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-petch-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 700, latin */
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-petch-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 400 to 700, latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400 to 700, latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ */
/*  1. Tokens                                                          */
/*     Every text colour below is measured. See the palette table in    */
/*     the handover notes for the full set of ratios.                   */
/* ------------------------------------------------------------------ */
:root {
  /* Surfaces */
  --bg:      #F7F8FA;
  --panel:   #FFFFFF;
  --panel-2: #EFF1F5;

  /* Ink */
  --ink:  #12141A;   /* primary text, 17.32 on --bg, 18.41 on --panel */
  --grey: #59616F;   /* secondary text, 5.87 on --bg, 6.24 on --panel */

  /* Crimson */
  --red:        #C0182B;   /* 5.80 on --bg, 6.16 on --panel */
  --red-bright: #E52339;   /* decorative only on light */

  /* Chrome blue.
     --blue is DECORATIVE ONLY (glows, the decorative gradient, the
     marquee tint): it measures 2.64 on white, so it never carries text.
     --blue-ink is the text grade blue, --blue-mark the display grade
     used as the light end of the two display gradients. */
  --blue:      #3FA9E0;
  --blue-ink:  #1A6396;   /* 6.42 on --panel, 6.05 on --bg */
  --blue-mark: #2A83BC;   /* 4.14 on --panel, 3.90 on --bg */

  /* Hairlines */
  --line:        rgba(18, 20, 26, .10);
  --line-strong: rgba(18, 20, 26, .22);   /* battery outline + the burger, so the control is visible on white */

  /* Decorative gradient: hairlines, progress fills, small highlights. */
  --grad: linear-gradient(100deg, var(--red-bright), var(--blue));
  /* Text grade gradient for the H1 clip: both stops clear 3:1 at H1 size. */
  --grad-ink: linear-gradient(100deg, var(--red), var(--blue-mark));
  /* The SMART wordmark: plain --blue misses 3:1 on white, so the mark
     runs the chrome ramp instead, both stops measured. */
  --grad-mark: linear-gradient(100deg, var(--blue-ink), var(--blue-mark));

  /* Type */
  --font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw: 1200px;
  --pad-x: clamp(1.15rem, 5vw, 3rem);
  --sp-section: clamp(4.25rem, 10vw, 8rem);
  --header-h: 66px;
  /* The bar plus the hairline drawn under it: the exact distance from the top
     of the page to the bottom edge of the header, which is what the hero has
     to clear so that nothing shows, or plays, behind the bar. */
  --header-total: calc(var(--header-h) + 1px);
  --radius: 14px;
  --radius-lg: 20px;

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Fine grain, an inline SVG so nothing is fetched from anywhere. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  :root { --header-h: 78px; }
}

/* ------------------------------------------------------------------ */
/*  2. Reset and base                                                  */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--grey);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  color: var(--ink);
  margin: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--ink); font-weight: 600; }

ul, ol, dl, dd { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--blue-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/*  3. Utilities                                                       */
/* ------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section { padding: var(--sp-section) 0; }

.section__title {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: -.005em;
  margin: .45rem 0 1.75rem;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-ink);
  margin: 0;
}

.grad { color: var(--red); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .grad {
    background-image: var(--grad-ink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.link {
  color: inherit;
  border-bottom: 1px solid var(--line);
  transition: color .22s ease, border-color .22s ease;
}
.link:hover { color: var(--blue-ink); border-bottom-color: var(--blue-ink); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 100;
  background-color: var(--red);
  color: var(--panel);
  font-weight: 600;
  padding: .7rem 1.1rem;
  border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  padding: .9rem 1.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .24s var(--ease), background-color .24s ease, border-color .24s ease, color .24s ease;
}

.btn--primary {
  background-color: var(--red);
  color: var(--panel);
  box-shadow: 0 10px 24px rgba(192, 24, 43, .20);
}
.btn--primary:hover { transform: translateY(-2px); border-color: var(--red-bright); }

.btn--ghost {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--red); color: var(--red); }

/* Scroll reveal --------------------------------------------------- */
/* Only hidden when JS is actually present, so a no-JS visit and a
   failed script both leave the whole page readable. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ */
/*  4. Battery scroll indicator                                        */
/*     Mobile: hairline progress bar pinned to the top.                */
/*     Desktop: slim vertical cell on the right edge.                  */
/* ------------------------------------------------------------------ */
.battery { display: none; }

.js .battery {
  display: block;
  position: fixed;
  z-index: 70;
  top: 0; left: 0; right: 0;
  height: 3px;
  pointer-events: none;
}

.battery__cap { display: none; }

.battery__body {
  display: block;
  position: relative;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background-color: rgba(18, 20, 26, .10);
}

.battery__fill {
  display: block;
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, var(--red-bright), var(--blue));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@media (min-width: 900px) {
  .js .battery {
    top: 50%;
    left: auto;
    right: clamp(12px, 1.6vw, 22px);
    width: 10px;
    height: min(38vh, 300px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .battery__cap {
    display: block;
    position: relative;
    width: 14px;
    height: 4px;
    flex: none;
    border-radius: 2px;
    background-color: var(--line-strong);
  }

  .battery__glow {
    position: absolute;
    left: 50%; top: 50%;
    width: 46px; height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background-image: radial-gradient(circle, rgba(63, 169, 224, .55), rgba(63, 169, 224, 0) 68%);
    opacity: 0;
    transition: opacity .35s ease;
  }
  .battery.is-full .battery__glow { opacity: 1; }

  .battery__body {
    flex: 1;
    width: 10px;
    height: auto;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background-color: var(--panel);
  }

  .battery__fill {
    inset: 2px;
    border-radius: 4px;
    background-image: linear-gradient(0deg, var(--red-bright), var(--blue));
    transform: scaleY(0);
    transform-origin: center bottom;
  }
}

/* ------------------------------------------------------------------ */
/*  5. Header                                                          */
/* ------------------------------------------------------------------ */
/* Solid white from the first paint, with the hairline under it. The bar is
   never see through, so nothing from the hero, least of all the video, ever
   shows or plays behind the menu. The hero starts below this bar (see §6). */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background-color: var(--panel);   /* #FFFFFF */
  border-bottom: 1px solid var(--line);
}

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Header logotype, plus the text wordmark the dark footer still uses -- */
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  line-height: 1;
}

/* The real lockup. Its ground is white, like the header, so it composites
   seamlessly; capped in height so it always clears the bar. */
.brand__logo {
  display: block;
  height: 40px;
  width: auto;
}

.brand__word {
  display: inline-flex;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.18rem, 3.6vw, 1.45rem);
  letter-spacing: .015em;
  line-height: 1;
}

.brand__smart {
  color: var(--blue-ink);
  transform: skewX(-10deg);
  transform-origin: left bottom;
  margin-right: .1em;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .brand__smart {
    background-image: var(--grad-mark);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.brand__cell { color: var(--ink); }

/* Hamburger ------------------------------------------------------- */
.burger {
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: border-color .24s ease;
}
.burger:hover { border-color: var(--red); }

.burger__bar {
  width: 18px; height: 2px;
  border-radius: 2px;
  background-color: var(--ink);
  transition: transform .28s var(--ease), opacity .18s ease;
}
body.menu-open .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger__bar:nth-child(2) { opacity: 0; }
body.menu-open .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav: opaque white slide down panel on mobile, inline row on desktop */
.nav {
  position: fixed;
  left: 0; right: 0;
  top: var(--header-h);
  bottom: 0;
  z-index: 55;
  background-color: var(--panel);
  border-top: 1px solid var(--line);
  padding: 1.9rem var(--pad-x) 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px);
  transition: opacity .26s ease, transform .32s var(--ease), visibility 0s linear .32s;
}

body.menu-open .nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .26s ease, transform .32s var(--ease), visibility 0s;
}

body.menu-open { overflow: hidden; }

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  list-style: none;
  width: 100%;
}

.nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  padding-bottom: .18rem;
  transition: color .22s ease;
}
.nav__link:hover { color: var(--red); }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background-image: var(--grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__cta { padding: .8rem 1.4rem; }

@media (min-width: 900px) {
  .burger { display: none; }

  .nav {
    position: static;
    inset: auto;
    z-index: auto;
    background-color: transparent;
    border-top: 0;
    padding: 0;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: clamp(1.1rem, 2.4vw, 2.1rem);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.9rem);
    width: auto;
  }

  .nav__link {
    font-size: .95rem;
    color: var(--grey);
  }
  .nav__link:hover,
  .nav__link.is-active { color: var(--ink); }

  .nav__cta { font-size: .9rem; padding: .72rem 1.3rem; }
}

/* ------------------------------------------------------------------ */
/*  6. Hero                                                            */
/* ------------------------------------------------------------------ */
/* PHONE: the hero is stacked. The copy comes first, on the page's own clean
   ground, and the picture follows it as a true 16:9 band running the full
   width of the screen. Nothing is written over the photograph, so the film
   plays at full strength with no wash laid on top of it and the copy is read
   against plain light. From 900px up it goes back to one frame with the copy
   overlaid on its left (see the 900px blocks below).
   The hero is the bar, then the copy, then the picture, nothing more, so it
   takes its height from those three and no further. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* The bar above is solid, so the scene starts exactly where the bar ends,
     hairline included, and nothing ever runs underneath it. --header-total
     already carries 67px on phones and 79px from 900px up; on the phone the
     copy gets a little air under the bar on top of that. */
  padding: calc(var(--header-total) + clamp(1.5rem, 6vw, 2.5rem)) 0 0;
  overflow: hidden;
  isolation: isolate;
}

/* DESKTOP HEIGHT. The clip is 1920x1080, so the box under the bar is given
   that exact 16:9 shape: 56.25vw is the height a full width 16:9 frame needs.
   The footage plays at its natural proportions, with no crop and no zoom, and
   the hero is the bar plus the picture, nothing more. The window is the
   ceiling, so the hero never runs past the fold and the copy always sits in
   the part of it you can see.

   The scene box keeps that 16:9 shape even when the ceiling is what decides
   the hero's height (see .hero__bg below). It has to: a box wider than 16:9
   makes `contain` answer with bars down the sides, and while white is a clean
   join against the frame's pale left edge, the right edge is a saturated blue
   panel and the cut there is brutal, measured at 165 to 178 out of 255. So on
   a short window the hero trims the bottom of the frame, which is bare studio
   floor, rather than framing the whole thing between two white walls. */
@media (min-width: 900px) {
  .hero {
    flex-direction: row;
    align-items: center;
    padding: var(--header-total) 0 0;
    height: calc(var(--header-total) + 56.25vw);
    max-height: 100vh;
    max-height: 100svh;
  }
}

/* The picture, and the film that plays inside it.
   PHONE: an in flow 16:9 band under the copy, the full width of the screen.
   The clip is 1920x1080 and both stills are cut straight out of the clip, so
   16 by 9 is the shape all three already are: in this band nothing is cropped
   and nothing is letterboxed. DESKTOP: the same box goes back behind the copy
   (see the 900px block above).
   Until the photograph is in, the box draws a light studio scene of its own:
   a soft crimson wash on the left, chrome blue on the right. main.js layers
   hero-wide.webp on top of that, with no change to markup or CSS. */
.hero__bg {
  order: 1;                 /* after the copy, whatever the source order says */
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: clamp(1.6rem, 6.5vw, 2.6rem);
  background-color: var(--bg);
  background-image:
    radial-gradient(70% 60% at 2% 94%, rgba(192, 24, 43, .10), rgba(192, 24, 43, 0) 68%),
    radial-gradient(62% 56% at 98% 4%, rgba(63, 169, 224, .16), rgba(63, 169, 224, 0) 70%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* DESKTOP: out of the flow and back behind the copy. This block has to come
   AFTER the one above, not before it: the two rules are the same selector at
   the same specificity, so whichever is written last is the one that wins. */
@media (min-width: 900px) {
  .hero__bg {
    order: 0;
    position: absolute;
    inset: var(--header-total) 0 auto;
    z-index: -1;
    width: auto;
    aspect-ratio: auto;
    /* 56.25vw again, the same figure the hero's own height is built from, so
       the scene is the clip's shape and not the window's. When the window is
       the shorter of the two, this overflows the hero and the hero clips it. */
    height: 56.25vw;
    margin-top: 0;
  }
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px 140px;
  opacity: .045;
  pointer-events: none;
}

/* With the real photo in, the ground under it is plain white. The shot and the
   clip are both a bright white studio, so wherever the frame stops short of the
   edge of the box the join simply cannot be seen. */
.hero__bg.has-img { background-color: var(--panel); }   /* #FFFFFF */

/* Below 900px NOTHING is written over the picture: the copy is above the band,
   on the page's own ground. So there is no scrim down there at all, and both
   the film and the still play at their own full strength. Everything that
   follows is desktop, where the copy does sit on the frame.

   DESKTOP: the frame is shown whole, never cropped, exactly the way the clip
   is shown (see .hero__video). Same source, same box, same fit, so the moment
   the footage hands back to the still nothing on screen moves.

   Showing the frame whole also brings back its own left edge, where the studio
   is lit by a hard crimson key. That is where the copy sits, so the wash is
   replaced by a soft white gradient that rides over that edge and nothing else.
   The old one covered the ENTIRE frame (94% at the left, still 38% at the right
   edge) and that is what drained the colour out of the clip; this one is done
   by 36% of the width, so the phone at 57% and the whole blue side play at full
   strength. The stops are not a guess: the amount of white each column needs
   was measured on the real pixels, over nine frames of the clip plus the
   resting still, against 3:1 for the headline and 4.5:1 for the sub. */
@media (min-width: 900px) {
  .hero__bg.has-img {
    background-size: contain;
    background-position: center;
  }

  .hero__bg.has-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg,
      rgba(255, 255, 255, .90) 0%,
      rgba(255, 255, 255, .76) 10%,
      rgba(255, 255, 255, .42) 20%,
      rgba(255, 255, 255, 0) 36%);
  }
}

.hero__inner { position: relative; text-align: left; }

.hero__title {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: .65rem 0 1.15rem;
}

.hero__sub {
  max-width: 46ch;
  font-size: clamp(1rem, 1.2vw + .7rem, 1.16rem);
  color: var(--grey);
  margin: 0 0 2rem;
}

/* 900 a 956px: con 46ch la primera línea del sub alcanza la pantalla negra
   del celular (contraste 1.09:1 medido). 40ch la corta antes del borde. */
@media (min-width: 900px) and (max-width: 959px) {
  .hero__sub { max-width: 40ch; }
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

@media (max-width: 419px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* The hero's charging clip. main.js builds this element and drops it INSIDE
   .hero__bg, at every width: on the phone that box is the 16:9 band under the
   copy, on desktop it is the frame behind it. z-index -1 puts it above the
   still it will hand back to, and below .hero__bg's own ::after grain, so the
   footage and the still are graded identically and the handoff is invisible.
   `contain` matches the still's fit in both boxes, and the poster picks up the
   same fit, so the clip, its poster and the resting frame are all drawn at the
   same size in the same place. In the phone's band all three are 16:9 inside a
   16:9 box, so `contain` fills it edge to edge with nothing trimmed. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------------ */
/*  7. Signage swoosh                                                  */
/*     The storefront sign's wave, as a divider band: a sweeping        */
/*     crimson curve over a thin black underlay. Purely decorative.     */
/* ------------------------------------------------------------------ */
.swoosh {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.swoosh__svg {
  display: block;
  width: 100%;
  height: clamp(90px, 8.5vw, 140px);
}

.swoosh__under { fill: var(--ink); opacity: .88; }
.swoosh__main  { fill: var(--red); }

.swoosh--flip .swoosh__svg { transform: scaleX(-1); }

/* ------------------------------------------------------------------ */
/*  8. Servicios                                                       */
/* ------------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
}

@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.card {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.55rem 1.4rem;
  box-shadow: 0 1px 2px rgba(18, 20, 26, .04);
  transition: transform .3s var(--ease), border-color .3s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(192, 24, 43, .55);
}

.card__title {
  font-size: 1.2rem;
  letter-spacing: .005em;
  margin: 0 0 .5rem;
}

.card__text {
  margin: 0;
  color: var(--grey);
  font-size: .97rem;
  line-height: 1.7;
}

/* The FIAO card: gradient hairline, a touch larger. */
.card--featured {
  border-color: transparent;
  background-color: transparent;
  background-image: linear-gradient(var(--panel-2), var(--panel-2)), var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  padding: 1.95rem 1.7rem;
}
.card--featured:hover {
  border-color: transparent;
  background-color: transparent;
}
.card--featured .card__title { font-size: 1.42rem; }
.card--featured .card__text { font-size: 1.02rem; }

/* ------------------------------------------------------------------ */
/*  9. FIAO band                                                       */
/* ------------------------------------------------------------------ */
.fiao {
  position: relative;
  overflow: hidden;
  padding: var(--sp-section) 0;
  background-color: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.fiao::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(58% 62% at 0% 100%, rgba(192, 24, 43, .08), rgba(192, 24, 43, 0) 70%),
    radial-gradient(48% 56% at 100% 0%, rgba(63, 169, 224, .12), rgba(63, 169, 224, 0) 72%);
}

.fiao__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .fiao__inner {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 4.5vw, 4rem);
  }
}

.fiao__media { max-width: 380px; width: 100%; }

.fiao__text {
  max-width: 46ch;
  color: var(--grey);
  font-size: 1.02rem;
  margin: 0 0 1.9rem;
}

/* ------------------------------------------------------------------ */
/*  10. Image slots (light CSS scenes until the photography lands)     */
/*      Briefs are bright daylight shots, so the placeholders are       */
/*      light too and the real frames drop straight in.                 */
/* ------------------------------------------------------------------ */
.slot {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--panel-2);
  background-image:
    linear-gradient(145deg, rgba(192, 24, 43, .08), rgba(239, 241, 245, 0) 48%),
    linear-gradient(315deg, rgba(63, 169, 224, .10), rgba(239, 241, 245, 0) 48%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px 140px;
  opacity: .04;
  pointer-events: none;
}

.slot--portrait, .slot--portrait-sm { aspect-ratio: 3 / 4; }

/* The one tile that is a link, so it carries the same hover language as
   the service cards: lift plus a red hairline. */
.slot--panel {
  background-image:
    linear-gradient(160deg, rgba(192, 24, 43, .07), rgba(239, 241, 245, 0) 55%),
    linear-gradient(20deg, rgba(63, 169, 224, .10), rgba(239, 241, 245, 0) 55%);
  transition: transform .3s var(--ease), border-color .3s ease;
}
.slot--panel:hover {
  transform: translateY(-4px);
  border-color: rgba(192, 24, 43, .55);
}

.slot__ph {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  padding: 1.2rem;
  text-align: center;
}

.slot__icon {
  width: 34px;
  height: 34px;
  color: var(--blue-ink);
}

.slot__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey);
}

.slot__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--ink);
  line-height: 1.2;
}

.slot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot.has-img .slot__ph,
.slot.has-img::after { display: none; }

/* ------------------------------------------------------------------ */
/*  11. Marcas marquee                                                 */
/* ------------------------------------------------------------------ */
.marcas {
  padding: 2.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(90deg, rgba(63, 169, 224, .07), rgba(63, 169, 224, 0) 58%, rgba(192, 24, 43, .05));
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}

.marquee__group {
  display: flex;
  list-style: none;
}

.marquee__group li {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
  padding: 0 clamp(1.3rem, 4vw, 3rem);
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ------------------------------------------------------------------ */
/*  12. Galería                                                        */
/* ------------------------------------------------------------------ */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 760px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(220px, 24vw, 320px);
    gap: 1.15rem;
  }
  .gallery .slot { aspect-ratio: auto; height: 100%; }
}

/* ------------------------------------------------------------------ */
/*  13. Contacto                                                       */
/* ------------------------------------------------------------------ */
.contacto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
}

@media (min-width: 900px) {
  .contacto {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}

.facts {
  display: grid;
  gap: 1.1rem;
  margin: 0 0 1.9rem;
}

.facts__row {
  display: grid;
  gap: .18rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.facts__k {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-ink);
}

.facts__v {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Pagos: la tarjeta va con su glifo, en el mismo trazo que los demás. */
.facts__v--pay {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.facts__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--blue-ink);
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  list-style: none;
}

.social__link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  transition: transform .24s var(--ease), border-color .24s ease, color .24s ease;
}
.social__link:hover { transform: translateY(-2px); border-color: var(--blue-ink); color: var(--blue-ink); }

.social__link svg { width: 18px; height: 18px; flex: none; }

/* WhatsApp card */
.wa {
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background-color: transparent;
  background-image: linear-gradient(var(--panel), var(--panel)), var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 1px 2px rgba(18, 20, 26, .04);
}

.wa__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.15;
  color: var(--ink);
  margin: .6rem 0 .65rem;
}

.wa__text { color: var(--grey); margin: 0 0 1.5rem; }

/* ------------------------------------------------------------------ */
/*  14. Footer                                                         */
/*      Near black band echoing the black letters on their sign.        */
/*      The ink tokens flip inside this scope, so the shared brand and  */
/*      social components come along without duplicated rules.          */
/* ------------------------------------------------------------------ */
.footer {
  --ink:  #F7F8FA;   /* 17.32 on the band */
  --grey: #AEB6C4;   /* 9.02 on the band */
  --blue-ink: #6FC2EE;   /* 9.32 on the band */
  --line: rgba(245, 247, 250, .16);
  --line-strong: rgba(245, 247, 250, .26);
  --grad-mark: linear-gradient(100deg, #6FC2EE, #A8DBF6);

  background-color: #12141A;
  border-top: 2px solid var(--red);
  padding: 2.75rem 0;
  color: var(--grey);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
}

@media (min-width: 860px) {
  .footer__inner {
    grid-template-columns: 1fr auto auto;
    gap: 2rem;
  }
}

.footer__tag {
  color: var(--grey);
  font-size: .95rem;
  margin: .55rem 0 0;
}

.footer__credit {
  margin: 0;
  color: var(--grey);
  font-size: .85rem;
}

.footer__credit a {
  border-bottom: 1px solid var(--line);
  transition: color .22s ease, border-color .22s ease;
}
.footer__credit a:hover { color: var(--blue-ink); border-bottom-color: var(--blue-ink); }

/* ------------------------------------------------------------------ */
/*  15. Reduced motion: everything still, everything readable          */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1 !important; transform: none !important; }

  .marquee__track { animation: none !important; }

  .js .battery, .battery { display: none !important; }
}