/* ==========================================================================
   Limpiezas RYC — Design system
   Marca real: azul marino + turquesa (extraídos del logotipo original),
   tipografía Manrope (UI) + Fraunces (editorial), sin dependencias externas.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-var.woff2") format("woff2-variations"),
       url("/assets/fonts/manrope-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var.woff2") format("woff2-variations"),
       url("/assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic-var.woff2") format("woff2-variations"),
       url("/assets/fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand — muestreados del logotipo real de la empresa */
  --navy-950: #071b2f;
  --navy-900: #0a2846;
  --navy-800: #0a3d6b;
  --navy-700: #0a4b83; /* azul marino del logo */

  --teal-600: #047784; /* eyebrows are small text: needs 4.5:1 on white and on
                          the tinted section backgrounds, which #058a9a missed */
  --teal-500: #07a9bd; /* turquesa atenuado, uso en texto/UI */
  --teal-400: #24c7d9;
  --teal-300: #6fdcea;
  --teal-200: #b3edf3;
  --teal-100: #e3f9fb;
  --teal-brand: #07e9ff; /* turquesa puro del logo, uso muy puntual */

  --ink: #12202c;
  --slate-700: #33454f;
  --slate-600: #4c5f6a;
  --slate-500: #5c6c76; /* darkened to clear 4.5:1 on white AND on the tinted
                            paper-cool/paper-warm section backgrounds */
  --slate-400: #96a5ac;

  --paper: #ffffff;
  --paper-warm: #f7f7f4;
  --paper-cool: #f2f8f9;
  --line: #e2e8ea;
  --line-soft: #ecf0f1;
  --white: #ffffff; /* fixed — for text/icons on surfaces that are ALWAYS dark
                        (navy buttons, footer, mobile menu, CTA banner), as
                        opposed to --paper which flips with the theme */

  /* Form feedback. Themed, because the light-mode reds/greens are far too dark
     to read on the dark surfaces (the error text scored 2.5:1 before). */
  --danger: #b23a3a;
  --danger-border: #d64545;
  --danger-bg: #fbeaea;
  --success: #1a7a4c;
  --success-bg: #e6f7ee;

  --font-sans: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Iowan Old Style", serif;

  --container: 1240px;
  --container-narrow: 800px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 40, 70, 0.06), 0 1px 1px rgba(10, 40, 70, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(10, 40, 70, 0.18);
  --shadow-lg: 0 24px 48px -16px rgba(10, 40, 70, 0.24);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;

  color-scheme: light;
}

/* ---------- Dark mode tokens ----------
   Follows the OS/browser preference automatically (prefers-color-scheme).
   Brand navy/teal stay the anchor; only the neutral scale flips so text,
   surfaces and borders stay readable on a dark background. */
@media (prefers-color-scheme: dark) {
  :root {
    --teal-600: #3ddce8; /* eyebrow/icon accent needs to be lighter to read on dark */

    --ink: #eef4f6;
    --slate-700: #c7d6dd;
    --slate-600: #a9bcc5;
    --slate-500: #8ba0ac;
    --slate-400: #7b939f; /* lightened vs. light-mode scale: footer/muted text
                              needs 4.5:1 against the near-black navy surfaces */

    /* Page bg is deliberately darker than the navy-950/900 accent panels
       (footer, CTA banner, mobile menu, the "Quiénes somos" card) so those
       still read as distinct floating blocks instead of melting into the
       page — the previous paper (#071627) sat almost exactly on top of
       navy-950 (#071b2f, a 1.05:1 difference), which is why the "Quiénes
       somos" section looked like one big empty gap instead of a card. */
    --paper: #04101c;
    --paper-cool: #0a2135;
    --paper-warm: #15304a;
    --navy-950: #0d2c4a;
    --navy-900: #123a60;
    --line: #24455e;
    --line-soft: #1c3549;

    --danger: #ff9d9d;
    --danger-border: #e46a6a;
    --danger-bg: #3a1e1e;
    --success: #8ce0ad;
    --success-bg: #10301f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* `clip` (not `hidden`) contains the off-canvas mobile menu without turning
     the root into a scroll container — `hidden` here would kill the sticky
     header. NB: body must NOT get height:100%, or it becomes a 1-viewport-tall
     box and `position: sticky` has nothing left to stick within. */
  overflow-x: clip;
}
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img, picture, video { display: block; max-width: 100%; }

/* Icons: a zero-specificity fallback size, so an SVG dropped anywhere without
   a component rule renders as an icon instead of stretching to fill its box.
   Any real component rule (.card-icon svg, .footer-contact svg, …) overrides
   this, because :where() contributes no specificity. */
:where(svg) { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.15em; }
svg { flex-shrink: 0; }

/* Icon + text on one line, icon aligned to the first line of text. */
.inline-icon-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.inline-icon-row > svg { width: 1.3rem; height: 1.3rem; margin-top: 0.15em; color: var(--teal-600); }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; }
h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2.5px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Typography scale ---------- */
.h-display { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4.4rem); line-height: 1.04; }
.h1 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(2.1rem, 1.7rem + 1.8vw, 3.2rem); line-height: 1.08; }
.h2 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.005em; font-size: clamp(1.7rem, 1.45rem + 1.1vw, 2.5rem); line-height: 1.12; }
.h3 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem); line-height: 1.22; }
.h4 { font-size: clamp(1.05rem, 1rem + 0.2vw, 1.2rem); font-weight: 700; line-height: 1.3; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--teal-600);
}
.eyebrow::before { content: ""; width: 1.4em; height: 2px; background: currentColor; border-radius: 2px; }
.lede { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--slate-600); line-height: 1.6; }
.text-sm { font-size: 0.9rem; }
.text-muted { color: var(--slate-500); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3.5rem, 6vw, 6.5rem); }
.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }

.bg-warm { background: var(--paper-warm); }

/* Editorial split: a section intro that stays with its list instead of sitting
   alone above a full-width column of over-long lines. */
.split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .split > :first-child { position: sticky; top: 110px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-weight: 700; font-size: 0.98rem; line-height: 1;
  padding: 0.95em 1.5em; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--teal-500); color: var(--navy-950); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--teal-400); box-shadow: var(--shadow-md); }
.btn-dark { background: var(--navy-800); color: var(--white); }
.btn-dark:hover { background: var(--navy-700); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--navy-800); }
.btn-outline:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.55); color: var(--white); }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-ghost { background: transparent; color: var(--navy-800); padding-inline: 0.2em; }
.btn-ghost::after { content: "→"; transition: transform var(--dur-fast) var(--ease); }
.btn-ghost:hover::after { transform: translateX(3px); }
.btn-sm { padding: 0.7em 1.15em; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(10,40,70,0.02), 0 12px 24px -20px rgba(10,40,70,0.3); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 78px; }
.brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }

.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: 2.1rem; }
.nav-link {
  position: relative; font-weight: 600; font-size: 0.96rem; color: var(--slate-700);
  padding-block: 0.4rem; display: inline-flex; align-items: center; gap: 0.35rem;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--teal-500); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--navy-900); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link .caret { width: 9px; height: 9px; transition: transform var(--dur-fast) var(--ease); }
.has-mega:hover .caret, .has-mega:focus-within .caret { transform: rotate(180deg); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), visibility var(--dur-med);
}
.has-mega { position: static; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner { padding-block: 2.25rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem 1.75rem; }
.mega-col-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 0.85rem; }
.mega-link { display: block; padding: 0.5rem 0.6rem; margin-inline: -0.6rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.92rem; color: var(--navy-900); transition: background var(--dur-fast) var(--ease); }
.mega-link span { display: block; font-weight: 500; font-size: 0.8rem; color: var(--slate-500); margin-top: 0.1rem; }
.mega-link:hover { background: var(--paper-cool); }

.header-cta { display: none; align-items: center; gap: 0.9rem; }
.header-tel { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.92rem; color: var(--navy-900); }
.header-tel svg { width: 18px; height: 18px; color: var(--teal-600); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--paper-cool); border: 1px solid var(--line-soft);
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (min-width: 1000px) {
  .nav-desktop { display: block; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--navy-950);
  transform: translateX(100%);
  /* visibility keeps the closed menu out of the keyboard tab order (and out of
     the layout box that would otherwise widen the page on small screens).
     It flips to visible instantly on open, and back to hidden only once the
     slide-out has finished — hence the delay rather than a duration. */
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; transition: transform var(--dur-slow) var(--ease), visibility 0s; }
.mobile-menu-inner { padding: 1.5rem clamp(1.25rem, 5vw, 2.5rem) 3rem; color: var(--white); min-height: 100%; display: flex; flex-direction: column; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.mobile-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: rgba(255,255,255,0.08); }
.mobile-close svg { width: 20px; height: 20px; color: var(--white); }
.mobile-nav { margin-top: 1.5rem; display: flex; flex-direction: column; }
.mobile-nav > li { border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 0.1rem; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; }
.mobile-sub { display: none; padding-bottom: 1rem; }
.mobile-sub.is-open { display: block; }
.mobile-sub li a { display: block; padding: 0.65rem 0.1rem; color: var(--teal-200); font-size: 1rem; font-weight: 600; }
/* sub-services sit one level in from their category heading */
.mobile-sub .is-child a { padding-left: 1rem; }
/* Targets the attribute the markup and JS actually use — the previous
   `.mobile-submenu-toggle` class was never emitted, so the chevron never
   rotated when the submenu opened. */
[data-submenu-toggle] { width: 100%; background: none; border: none; text-align: left; color: inherit; font-family: inherit; }
[data-submenu-toggle] svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
[data-submenu-toggle][aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-actions { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 0.85rem; }
.mobile-contact-row { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.75rem; font-size: 0.95rem; color: var(--teal-200); }
.mobile-contact-row a { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--white); }
.mobile-contact-row svg { width: 17px; height: 17px; color: var(--teal-400); flex-shrink: 0; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 1.75rem; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.83rem; font-weight: 600; color: var(--slate-600); }
.hero-badge svg { width: 15px; height: 15px; color: var(--teal-600); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
.hero-visual { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: linear-gradient(155deg, var(--navy-800), var(--navy-950) 65%); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-visual::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 12%, rgba(7,233,255,0.35), transparent 45%),
              radial-gradient(circle at 12% 92%, rgba(7,233,255,0.18), transparent 40%);
}
.hero-visual-figures { position: absolute; z-index: 1; left: 50%; bottom: 1.5rem; transform: translateX(-50%); width: 68%; max-width: 270px; }
.hero-visual-scrim {
  position: absolute; z-index: 2; inset: auto 0 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, rgba(5, 16, 28, 0.92), transparent);
}
.hero-visual-tag {
  position: absolute; z-index: 3; top: 1.5rem; left: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.18);
  color: var(--white); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-pill);
}
.hero-visual-tag svg { width: 13px; height: 13px; color: var(--teal-brand); }
.hero-visual-caption { position: absolute; z-index: 3; right: 1.5rem; bottom: 1.25rem; left: 1.5rem; color: var(--white); font-size: 0.85rem; font-weight: 600; text-align: right; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.75fr; }
}

/* ---------- Marquee strip ---------- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-warm); overflow: hidden; }
.strip-track { display: flex; gap: clamp(2rem, 5vw, 4rem); padding-block: 1rem; white-space: nowrap; }
.strip-item { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.88rem; color: var(--navy-800); }
.strip-item svg { width: 16px; height: 16px; color: var(--teal-600); flex-shrink: 0; }

/* ---------- Cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card-icon { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--teal-100); color: var(--navy-800); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.card-icon svg { width: 24px; height: 24px; }

.service-card { display: flex; flex-direction: column; height: 100%; }
.service-card .h4 { margin-bottom: 0.5rem; }
.service-card p { color: var(--slate-600); font-size: 0.94rem; flex-grow: 1; }
.service-card-link { margin-top: 1.25rem; font-weight: 700; font-size: 0.88rem; color: var(--navy-800); display: inline-flex; align-items: center; gap: 0.4rem; }
.service-card-link svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.service-card:hover .service-card-link svg { transform: translateX(3px); }

.value-row { display: flex; gap: 1rem; align-items: flex-start; padding-block: 1.35rem; border-top: 1px solid var(--line-soft); }
.value-row:first-of-type { border-top: none; }
.value-row .card-icon { margin-bottom: 0; flex-shrink: 0; }
/* keeps the copy readable when the section collapses to one column */
.value-row p { max-width: 62ch; }

.category-card {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  background: var(--paper-cool); border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.75rem);
}
@media (min-width: 780px) { .category-card { grid-template-columns: 1.1fr 1fr; align-items: center; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-block: 1.1rem; font-size: 0.83rem; color: var(--slate-500); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.breadcrumbs a { font-weight: 600; color: var(--slate-500); }
.breadcrumbs a:hover { color: var(--navy-800); }
.breadcrumbs li[aria-current] { color: var(--navy-800); font-weight: 700; }
/* separator inherits --slate-500 from .breadcrumbs; --slate-400 is tuned for
   the dark footer and is too light to sit on a white page background */

/* ---------- Page hero (internal pages) ---------- */
.page-hero { padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.page-hero .h1 { max-width: 34ch; }
.page-hero .lede { max-width: 62ch; margin-top: 1.1rem; }

/* ---------- FAQ / accordion ---------- */
.accordion-item { border-top: 1px solid var(--line); }
.accordion-item:last-child { border-bottom: 1px solid var(--line); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.35rem; text-align: left; background: none; border: none; font-family: var(--font-serif); font-size: 1.08rem; font-weight: 500; color: var(--navy-900);
}
.accordion-trigger .plus { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.accordion-trigger .plus::before, .accordion-trigger .plus::after { content: ""; position: absolute; background: var(--navy-800); border-radius: 2px; }
.accordion-trigger .plus::before { top: 9px; left: 0; width: 20px; height: 2px; }
.accordion-trigger .plus::after { left: 9px; top: 0; width: 2px; height: 20px; transition: transform var(--dur-fast) var(--ease); }
.accordion-trigger[aria-expanded="true"] .plus::after { transform: rotate(90deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease); }
.accordion-panel-inner { padding-bottom: 1.5rem; color: var(--slate-600); max-width: 65ch; }

/* ---------- CTA banner ---------- */
.cta-banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-900); padding: clamp(2.5rem, 5vw, 4rem); }
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% -10%, rgba(7,233,255,0.28), transparent 55%);
}
.cta-banner-inner { position: relative; display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start; }
@media (min-width: 820px) { .cta-banner-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.cta-banner .h2 { color: var(--white); }
.cta-banner-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; flex-shrink: 0; }

/* ---------- Contact blocks ---------- */
.contact-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; border-radius: var(--radius-md); background: var(--paper-cool); }
.contact-card .card-icon { background: var(--paper); }
.contact-card a { font-weight: 700; color: var(--navy-900); }
.contact-card a:hover { color: var(--teal-600); }

.map-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/11; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--navy-900); }
.field .hint { font-size: 0.78rem; color: var(--slate-500); font-weight: 500; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.85em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  background: var(--paper); font-size: 0.98rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--slate-400); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 4px var(--teal-100);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234c5f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.5em; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger-border); }
.field-error { display: none; color: var(--danger); font-size: 0.8rem; font-weight: 600; }
.field.has-error .field-error { display: block; }
.form-row { display: grid; gap: 1.15rem; }
@media (min-width: 620px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }
.form-note { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.82rem; color: var(--slate-500); }
.form-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.15em; color: var(--teal-600); }

.form-status { display: none; align-items: center; gap: 0.7rem; padding: 1rem 1.15rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.92rem; }
.form-status.is-visible { display: flex; }
.form-status.is-success { background: var(--success-bg); color: var(--success); }
.form-status.is-error { background: var(--danger-bg); color: var(--danger); }
.form-status svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn[data-loading="true"] .btn-label { visibility: hidden; }
.btn[data-loading="true"] { position: relative; pointer-events: none; }
.btn[data-loading="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,0.2); border-top-color: currentColor; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: var(--teal-100); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer-grid { display: grid; gap: 2.75rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: 2rem; } }
.footer-brand img { height: 30px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { color: var(--slate-400); font-size: 0.92rem; max-width: 32ch; }
.footer-social { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.88rem; color: var(--white); }
.footer-social svg { width: 18px; height: 18px; color: var(--teal-400); }
.footer-heading { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 1.1rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-links a { font-size: 0.92rem; font-weight: 600; color: var(--teal-100); }
.footer-links a:hover { color: var(--teal-400); }
.footer-contact { display: flex; flex-direction: column; gap: 0.85rem; }
.footer-contact li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.9rem; color: var(--teal-100); }
.footer-contact svg { width: 16px; height: 16px; color: var(--teal-400); flex-shrink: 0; margin-top: 0.2em; }
.footer-contact a:hover { color: var(--teal-400); }
.footer-bottom { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: 0.82rem; color: var(--slate-400); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a:hover { color: var(--teal-300); }

/* ---------- Reveal-on-scroll ----------
   Hidden-by-default only once we know JS + IntersectionObserver actually ran
   (see the `.js` class set synchronously in the head). Without JS, or before
   that script runs, content stays fully visible — no dependency on scroll. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Utilities ---------- */
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 300; background: var(--navy-950); color: var(--white); padding: 0.85em 1.3em; border-radius: var(--radius-sm); font-weight: 700; transition: top var(--dur-fast) var(--ease); }
.skip-link:focus { top: 1rem; }
.cols-2 { grid-template-columns: 1fr; }
.cols-3 { grid-template-columns: 1fr; }
.cols-4 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px) { .cols-3 { grid-template-columns: repeat(2, 1fr); } .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag { font-size: 0.82rem; font-weight: 700; color: var(--navy-800); background: var(--teal-100); padding: 0.45em 0.9em; border-radius: var(--radius-pill); }

.benefit-list { display: flex; flex-direction: column; gap: 0.9rem; }
.benefit-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.benefit-list svg { width: 20px; height: 20px; color: var(--teal-600); flex-shrink: 0; margin-top: 0.1em; }

.related-strip { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: thin; }
.related-chip { flex-shrink: 0; padding: 0.7em 1.2em; border-radius: var(--radius-pill); background: var(--paper-cool); font-weight: 700; font-size: 0.88rem; color: var(--navy-800); border: 1px solid transparent; }
.related-chip:hover { border-color: var(--teal-400); }

/* ---------- 404 ---------- */
.error-page { min-height: 62vh; display: flex; align-items: center; }
.error-figure { width: 200px; margin-inline: auto; }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 150;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 27px; height: 27px; }

/* ---------- Dark mode: logo swaps ----------
   Navy-on-transparent logo marks need a light version once the background
   goes dark. Both images render; CSS picks the right one per theme. */
.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .only-light { display: none; }
  .only-dark { display: block; }
}

/* ---------- Dark mode: component overrides ----------
   Everything else adapts automatically through the token remap above.
   These are the handful of rules that hard-picked a light-mode-only color
   (e.g. navy text meant to sit on white) and need a legible dark-mode value. */
@media (prefers-color-scheme: dark) {
  .site-header { background: rgba(7, 20, 35, 0.86); }

  .nav-link:hover, .nav-link[aria-current="page"] { color: var(--teal-300); }
  .mega-link { color: var(--teal-100); }
  .mega-link:hover { background: var(--paper-warm); }
  .header-tel { color: var(--teal-100); }

  .btn-outline { color: var(--teal-200); }
  .btn-outline:hover { background: var(--teal-200); border-color: var(--teal-200); color: var(--navy-950); }
  .btn-ghost { color: var(--teal-200); }

  .service-card-link { color: var(--teal-300); }
  .contact-card .card-icon { background: var(--teal-100); }
  /* same reasoning as the --paper/navy-950 split above: a bordered card in
     the exact page color reads as "no card" once the border itself is a
     subtle dark line — give it one step of elevation instead */
  .card { background: var(--paper-cool); }

  .accordion-trigger { color: var(--ink); }
  .accordion-trigger .plus::before, .accordion-trigger .plus::after { background: var(--teal-300); }

  .contact-card a { color: var(--teal-100); }
  .contact-card a:hover { color: var(--teal-400); }

  .related-chip { color: var(--teal-100); }
  .related-chip:hover { border-color: var(--teal-400); }

  .breadcrumbs a:hover { color: var(--teal-300); }
  .breadcrumbs li[aria-current] { color: var(--teal-200); }

  .strip-item { color: var(--teal-100); }

  .field label { color: var(--ink); }
  .field input, .field textarea, .field select { color: var(--ink); }
  .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a9bcc5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .hero-badge { color: var(--slate-600); }

  .map-frame { filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9); }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .wa-float, .mobile-menu, .cta-banner, .site-footer { display: none; }
}