/* ==========================================================================
   mereg.com.mx — design system

   Blended from the four references:
   · palette + confidence  → the RHAJHUS electrical page (deep blue ground,
     white panels, one bright blue). Anchored on MEREG's own #0071ce / #0f206c,
     so this reads as turning the existing brand up, not replacing it.
   · panel forms           → Blend Bend (soft white cards with a notched
     corner, pill labels sitting on imagery)
   · page structure        → the Digiboost agency layout (alternating light and
     dark bands, big service rows, catalogue, closing CTA)
   · buttons               → "Benefícios de Morar" (blue pill with a circular
     arrow badge, on a light patterned ground)
   ========================================================================== */

:root{
  /* ---- palette: MEREG's own blues, pushed ---- */
  --blue:       #0071ce;   /* brand bright blue, from the logo */
  --blue-hot:   #1a8cf0;   /* hover / highlight */
  --blue-deep:  #0f206c;   /* brand navy, from the logo */
  --navy:       #081a4d;   /* dark section ground */
  --navy-2:     #0c2560;   /* raised surface on dark */
  --sky:        #cfe4f9;   /* pale blue for eyebrow text on dark */

  --paper:      #eef3f9;   /* light section ground */
  --paper-2:    #f7fafd;
  --white:      #ffffff;

  --ink:        #0b1524;   /* body text on light */
  --muted:      #5b6b80;   /* secondary text on light */
  --muted-dark: #9fb2cd;   /* secondary text on dark */

  --line:       rgba(11,21,36,.10);
  --line-dark:  rgba(255,255,255,.12);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1280px;
  --r: 18px;
  --r-lg: 30px;
  --notch: 34px;           /* the Blend Bend corner cut */

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

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* --------------------------------------------------------------------------
   Layout + type
   -------------------------------------------------------------------------- */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:1; }
.section{ position:relative; padding-block:clamp(64px,9vw,124px); }
.section--tight{ padding-block:clamp(48px,6vw,84px); }

/* the alternating bands from the Digiboost reference */
.band-dark{ background:var(--navy); color:#fff; }
.band-light{ background:var(--paper); }
.band-white{ background:var(--white); }

/* subtle diagonal weave, from the "Benefícios" reference's textured ground */
.band-light::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(15,32,108,.028) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(15,32,108,.028) 0 1px, transparent 1px 14px);
}

h1,h2,h3{ margin:0 0 .5em; line-height:1.08; letter-spacing:-.03em; font-weight:800; }
h1{ font-size:clamp(36px,5.4vw,68px); }
h2{ font-size:clamp(28px,4vw,50px); }
h3{ font-size:clamp(18px,2vw,23px); letter-spacing:-.02em; }
p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; }

.lead{ font-size:clamp(16px,1.5vw,18.5px); color:var(--muted); max-width:62ch; }
.band-dark .lead,
.hero .lead{ color:var(--muted-dark); }

/* the two-weight headline from the references: light colour word + solid */
.hl-soft{ color:var(--blue); font-weight:800; }
.band-dark .hl-soft,
.hero .hl-soft{ color:#7fc0f7; }

/* --------------------------------------------------------------------------
   Buttons — the "Benefícios" pill with its circular arrow badge
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:11px 13px 11px 26px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-size:15px; font-weight:700;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease);
  box-shadow:0 10px 26px -12px rgba(0,113,206,.85);
}
.btn:hover{ background:var(--blue-hot); transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(0,113,206,.95); }
.btn .badge{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  transition:transform .3s var(--ease);
}
.btn:hover .badge{ transform:translateX(2px); }
.btn .badge svg{ width:16px; height:16px; }

.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:var(--line); box-shadow:none;
  padding:11px 24px;
}
.btn--ghost:hover{ background:rgba(11,21,36,.05); border-color:rgba(11,21,36,.22); }
.band-dark .btn--ghost,
.hero .btn--ghost,
.site-footer .btn--ghost{ color:#fff; border-color:var(--line-dark); }
.band-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.site-footer .btn--ghost:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.3); }

.btn--white{ background:#fff; color:var(--blue-deep); box-shadow:0 10px 26px -14px rgba(0,0,0,.5); }
.btn--white .badge{ background:rgba(0,113,206,.14); }
.btn--white:hover{ background:#fff; }

/* --------------------------------------------------------------------------
   The Blend Bend notch — a panel with one corner cut away
   -------------------------------------------------------------------------- */

.notch{
  border-radius:var(--r-lg);
  /* clip the top-right corner at 45°, leaving the rest rounded */
  clip-path:polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    0 100%
  );
}
.notch--tl{
  clip-path:polygon(
    var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch)
  );
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 var(--line), 0 8px 30px -22px rgba(8,26,77,.6);
}
.nav{ display:flex; align-items:center; gap:22px; height:82px; }
.brand{ margin-right:auto; display:flex; align-items:center; }
.brand img{ height:46px; width:auto; }
@media (max-width:520px){ .brand img{ height:38px; } }

.nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-links a{
  display:block; padding:10px 16px; border-radius:999px;
  font-size:14.5px; font-weight:600; color:var(--ink);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{ color:var(--blue); background:rgba(0,113,206,.08); }

/* on the transparent hero the nav sits on dark imagery */
.site-header:not(.is-stuck) .nav-links a{ color:#fff; }
.site-header:not(.is-stuck) .nav-links a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.site-header:not(.is-stuck) .brand img{ filter:brightness(0) invert(1); }
.site-header:not(.is-stuck) .nav-toggle span,
.site-header:not(.is-stuck) .nav-toggle span::before,
.site-header:not(.is-stuck) .nav-toggle span::after{ background:#fff; }

.nav-toggle{
  display:none; width:44px; height:44px;
  border:1px solid var(--line); border-radius:13px;
  background:transparent; cursor:pointer; place-items:center;
}
.nav-toggle span{ display:block; width:17px; height:2px; background:var(--ink); position:relative; transition:.25s var(--ease); }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:17px; height:2px; background:var(--ink); transition:.25s var(--ease);
}
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent !important; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:940px){
  .nav-toggle{ display:grid; }
  .nav-links{
    position:fixed; inset:82px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:16px var(--pad) 26px;
    background:rgba(255,255,255,.98); backdrop-filter:blur(18px);
    box-shadow:0 20px 40px -28px rgba(8,26,77,.7);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:.28s var(--ease);
  }
  .nav-links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .site-header:not(.is-stuck) .nav-links a{ color:var(--ink); }
  .nav-links a{ padding:14px 16px; font-size:16.5px; }
  .nav .btn{ display:none; }
}

/* --------------------------------------------------------------------------
   Hero — Blend Bend composition: headline panel overlapping the photograph
   -------------------------------------------------------------------------- */

.hero{ position:relative; background:var(--navy); color:#fff; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(8,26,77,.94) 0%, rgba(8,26,77,.80) 42%, rgba(8,26,77,.35) 100%),
    linear-gradient(0deg, rgba(8,26,77,.7) 0%, transparent 45%);
}
.hero-inner{ padding-block:clamp(128px,17vh,190px) clamp(56px,8vh,96px); }
.hero h1{ margin:0; max-width:16ch; }
.hero .lead{ margin-top:22px; max-width:52ch; color:#d5e2f4; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }


/* --------------------------------------------------------------------------
   Client logo strip
   -------------------------------------------------------------------------- */

/* Two modes, chosen automatically by js/site.js:

   - Few enough logos to fit on one line -> centred, static. Nothing moves.
   - Too many to fit -> the track is duplicated once and scrolls forever.

   The spacing is margin, not `gap`, on purpose. With `gap` the duplicated
   track is one gap wider than two copies, so translating -50% lands half a
   gap off and the loop visibly stutters every cycle. Half-gap margins on each
   image make each copy exactly n*(image+gap) wide, and -50% is then seamless. */

.logos{ overflow:hidden; }

.logos__track{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center;
}
.logos__track img{
  height:clamp(26px,3vw,38px); width:auto;
  margin:10px clamp(12px,2.5vw,32px);
  filter:grayscale(1) opacity(.55);
  transition:filter .3s var(--ease);
}
.logos__track img:hover{ filter:grayscale(0) opacity(1); }

/* Marquee mode */
.logos.is-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logos.is-marquee .logos__track{
  flex-wrap:nowrap; justify-content:flex-start; width:max-content;
  animation:logos-scroll var(--logos-duration,44s) linear infinite;
  will-change:transform;
}
/* Stop it while someone is reading a logo, or hovering to click through. */
.logos.is-marquee:hover .logos__track,
.logos.is-marquee:focus-within .logos__track{ animation-play-state:paused; }

@keyframes logos-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

@media (prefers-reduced-motion:reduce){
  .logos.is-marquee{ -webkit-mask-image:none; mask-image:none; }
  .logos.is-marquee .logos__track{
    animation:none; flex-wrap:wrap; justify-content:center; width:auto;
  }
  .logos.is-marquee .logos__track [data-clone]{ display:none; }
}
.logos-note{ text-align:center; font-size:13px; color:var(--muted); margin-top:22px; }

/* --------------------------------------------------------------------------
   Service rows — the Digiboost big-list treatment
   -------------------------------------------------------------------------- */

.rows{ border-top:1px solid var(--line-dark); }
.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 56px;
  gap:clamp(16px,3vw,44px);
  align-items:center;
  padding:clamp(22px,3vw,34px) 0;
  border-bottom:1px solid var(--line-dark);
  transition:padding-left .35s var(--ease);
}
.row:hover{ padding-left:14px; }
.row h3{ margin:0; font-size:clamp(20px,2.6vw,30px); font-weight:700; letter-spacing:-.025em; transition:color .25s var(--ease); }
.row:hover h3{ color:#7fc0f7; }
.row p{ margin:0; color:var(--muted-dark); font-size:15px; }
.row .go{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-dark);
  transition:.3s var(--ease);
}
.row:hover .go{ background:var(--blue); border-color:var(--blue); transform:rotate(-45deg); }
.row .go svg{ width:18px; height:18px; }
@media (max-width:820px){
  .row{ grid-template-columns:1fr 46px; gap:8px 18px; }
  .row p{ grid-column:1 / -1; }
}

/* --------------------------------------------------------------------------
   Course catalogue — replaces the reference's pricing tiers
   -------------------------------------------------------------------------- */

.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:32px; }
.filters button{
  padding:10px 20px; border-radius:999px;
  border:1px solid var(--line); background:var(--white);
  font-size:14px; font-weight:600; color:var(--muted);
  cursor:pointer; transition:.22s var(--ease);
}
.filters button:hover{ color:var(--blue); border-color:rgba(0,113,206,.4); }
.filters button[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff; }

.courses{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));
  gap:14px;
}
.course{
  --notch:26px;
  position:relative;
  background:var(--white);
  padding:24px 24px 22px;
  border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.course:hover{
  transform:translateY(-3px);
  border-color:rgba(0,113,206,.35);
  box-shadow:0 22px 44px -28px rgba(8,26,77,.55);
}
.course__tag{
  display:inline-block; margin-bottom:12px;
  padding:5px 12px; border-radius:999px;
  background:rgba(0,113,206,.10); color:var(--blue);
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.course h3{ font-size:17.5px; margin:0; line-height:1.3; }
.course .dc3{
  display:flex; align-items:center; gap:7px;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--muted);
}
.course .dc3 svg{ width:15px; height:15px; color:var(--blue); flex:none; }

/* --------------------------------------------------------------------------
   Gallery — Blend Bend notched photo panels
   -------------------------------------------------------------------------- */

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:16px;
}
.shot{
  --notch:30px;
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--navy-2);
}
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.shot:hover img{ transform:scale(1.05); }
.shot figcaption{
  position:absolute; left:16px; bottom:16px; right:16px;
  padding:11px 18px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-radius:999px;
  font-size:14px; font-weight:700; color:var(--blue-deep);
}
.shot--wide{ grid-column:span 2; aspect-ratio:16/9; }
@media (max-width:700px){ .shot--wide{ grid-column:span 1; aspect-ratio:4/3; } }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px; background:var(--line-dark);
  border:1px solid var(--line-dark); border-radius:var(--r); overflow:hidden;
}
.stats div{ background:var(--navy); padding:26px 24px; }
.stats b{ display:block; font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.04em; color:#fff; line-height:1; }
.stats span{ font-size:13.5px; color:var(--muted-dark); }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form{ display:grid; gap:14px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px;
  border:1px solid var(--line); border-radius:13px;
  background:var(--white); color:var(--ink);
  font:inherit; font-size:15px;
  transition:.2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,113,206,.14);
}
.field textarea{ min-height:130px; resize:vertical; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .field--row{ grid-template-columns:1fr; } }

.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

.form-status{ font-size:14px; padding:12px 15px; border-radius:12px; display:none; }
.form-status.is-ok{ display:block; background:rgba(0,150,80,.10); border:1px solid rgba(0,150,80,.35); color:#0a7a45; }
.form-status.is-err{ display:block; background:rgba(200,40,40,.08); border:1px solid rgba(200,40,40,.3); color:#b03030; }

/* --------------------------------------------------------------------------
   Floating WhatsApp
   -------------------------------------------------------------------------- */

.wa-float{
  position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px); z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 20px 13px 15px; border-radius:999px;
  background:#25d366; color:#04240f; font-size:14.5px; font-weight:700;
  box-shadow:0 12px 34px -12px rgba(37,211,102,.75);
  transition:transform .28s var(--ease);
}
.wa-float:hover{ transform:translateY(-3px); }
.wa-float svg{ width:22px; height:22px; fill:currentColor; flex:none; }
@media (max-width:560px){ .wa-float{ padding:14px; } .wa-float span{ display:none; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer{ background:var(--blue-deep); color:#fff; padding-block:clamp(52px,7vw,84px) 28px; }
/* The floating WhatsApp button is fixed bottom-right and was sitting on top of
   the "Encuesta de satisfacción" link once you scrolled to the very bottom.
   Extra bottom padding lifts the last row clear of it. Desktop only — on a
   phone the row stacks left and never reaches under the button. */
@media (min-width:701px){ .site-footer{ padding-bottom:92px; } }
.footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:clamp(26px,4vw,56px);
  padding-bottom:34px; border-bottom:1px solid var(--line-dark);
}
.site-footer img.mark{ height:44px; filter:brightness(0) invert(1); margin-bottom:16px; }
.site-footer h4{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#8fb2e8; margin:0 0 14px; }
.site-footer p,.site-footer a{ color:#cfdcf2; font-size:14.5px; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{ padding-top:24px; font-size:13px; color:#8fb2e8; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:flex-end; }

/* Copyright and the Nexo credit stack; the survey link stays on the right. */
.footer-legal{ display:flex; flex-direction:column; gap:6px; }

/* Same treatment as mantenimientoflores.mx: "Powered by" recedes, the
   wordmark carries the weight. */
.powered{ font-size:11.5px; letter-spacing:.06em; color:#6d90c9; }
.powered a{
  font-size:12.5px; font-weight:800; letter-spacing:.10em;
  color:#cfdcf2; text-decoration:none;
  transition:color .25s var(--ease);
}
.powered a:hover{ color:#fff; }

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */

[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}