/* Local fonts */
@font-face {
  font-family: 'SmoochSans';
  src: url('fonts/SmoochSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Orbitron';
  src: url('fonts/Orbitron-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── View transitions (page navigation) ───────────────────
   Opts every page sharing this stylesheet into the native
   cross-document View Transitions API. Unsupported browsers just
   navigate normally — no JS, no fallback needed. */
@view-transition {
  navigation: auto;
}

/* Keep the sticky header out of the whole-page crossfade so it reads
   as a persistent nav bar rather than flickering between pages. */
header {
  view-transition-name: site-header;
}

::view-transition-group(root) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
  animation-name: view-transition-fade-out;
}

::view-transition-new(root) {
  animation-name: view-transition-fade-in;
}

@keyframes view-transition-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-14px); }
}

@keyframes view-transition-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

:root {
  --primary: #155b43;
  --primary-hover: #0d4a36;
  --dark: #123f31;
  --text: #15231d;
  --muted: #66756d;
  --light-bg: #f6f7f3;
  --border: #e4e7df;
  --white: #FFFFFF;
  --gold: #B8860B;
  --gold-bright: #f5c542;
  --header-h: 72px;
  --transition-fast: color 0.15s;
  --transition-btn: background 0.18s, color 0.18s, border-color 0.18s;
  --stack-shadow: 0 -20px 40px rgba(0,0,0,0.15);
}

body {
  font-family: 'SmoochSans', system-ui, sans-serif;
  font-size: 16.53px;
  font-weight: 500;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.hero-text h1,
.section-title,
.plan-title,
.data-number {
  font-family: 'Orbitron', system-ui, sans-serif;
}

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

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1.0875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-btn);
  border: 2px solid transparent;
  text-align: center;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
}

/* ── Header ──────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  background: #000000;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.header-logo {
  justify-self: start;
}
.header-logo img {
  height: 55px;
  width: auto;
  object-fit: contain;
  display: block;
}

.header-nav {
  justify-self: center;
  display: flex;
  gap: 2.5rem;
}
.header-nav a {
  font-size: 1.479rem;
  font-weight: 500;
  color: var(--white);
  transition: var(--transition-fast);
}
.header-nav a:hover { color: var(--gold); }

.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.header-right .btn {
  padding: 0.3rem 0.9rem;
}

/* ── Hero ────────────────────────────────────────────── */
.hero {
  display: flex;
  background: #ffffff;
}

.hero-video {
  display: block;
  width: 90%;
  height: auto;
  margin: 0 auto;
}

/* ── Section Utility ─────────────────────────────────── */
.section { padding: 3rem 0; }

/* ── Parallax stack (sections below hero) ─────────────── */
/* .eficiencia now flows normally (its Ábrete a las posibilidades
   scroll-expand block needs several viewports of scroll room, which a
   fixed 100vh sticky box can't give it) -- .carousel-section is the
   first sticky layer in the stack, .resultados stacks above it in turn. */
.carousel-section {
  position: sticky;
  top: var(--header-h);
  min-height: 100vh;
  display: flex;
  align-items: center;
  z-index: 1;
  box-shadow: var(--stack-shadow);
}

/* [hidden] alone loses to the class rule above (equal specificity, this
   one declared later) -- pin display:none so hiding the section (see
   index.html) actually collapses it instead of leaving a blank sticky
   100vh gap in front of Resultados. */
.carousel-section[hidden] {
  display: none;
}

.carousel-section > .container {
  width: 100%;
}

/* FAQ is intentionally NOT part of the sticky parallax stack: with only
   one viewport of scroll room, the sticky pin released almost immediately
   and the footer (painted above it via z-index) would slide up and cover
   the bottom of the FAQ list before it was fully visible. Flowing
   normally lets the whole FAQ list scroll into view before the footer
   follows after it. */
.faq-section {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.faq-section > .container {
  width: 100%;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark);
  text-align: center;
  margin-bottom: 3rem;
}

/* ── Eficiencia / Carousel ───────────────────────────── */
.eficiencia {
  background: var(--white);
  padding-bottom: 0;
}

/* Opaque background: .carousel-section is a sticky, stacked full-viewport
   section (see "Parallax stack" above) sitting over .eficiencia's scroll-
   expand block as it releases — an opaque background guarantees it cleanly
   covers what's beneath it instead of blending with it. */
.carousel-section {
  background: var(--white);
}

.eficiencia-text {
  font-size: 1.479rem;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
  margin-bottom: 2.5rem;
}

.eficiencia-text a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Así de fácil funciona (vanilla port of InfiniteSpiral) ──
   Plain DOM + CSS 3D transforms (see infinite-spiral.js /
   infinite-spiral-init.js) -- no WebGL this time, so cards are real
   HTML: a gold icon badge over the statement text, rather than a
   baked canvas texture. */
.circular-gallery-section {
  background: var(--white);
  padding-bottom: 6rem;
}

.gallery-footnote {
  margin-top: 1.5rem;
  color: var(--primary);
  text-align: center;
  font-size: 0.95rem;
}

.gallery-stage {
  height: 640px;
  position: relative;
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
}

/* Base component structure (react-bits InfiniteSpiral.css) --
   infinite-spiral.js sets width/height/border-radius per card inline
   and drives transform/opacity/filter every frame; this just gives it
   somewhere to position against. */
.infinite-spiral {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  isolation: isolate;
  outline: none;
}

.infinite-spiral:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.infinite-spiral__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Card look on top of the base structure -- the original component's
   .infinite-spiral__item is just an image frame; this site's cards
   carry an icon + the statement text instead (see createCard in
   infinite-spiral.js), so it's a flex box rather than a bare frame.
   Colors themselves are set per 3-card cycle below (green / white /
   gold), so this rule only carries the shared shape. */
.infinite-spiral__item {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem 0.9rem;
  overflow: hidden;
  border: 1px solid transparent;
  box-shadow: 0 14px 34px rgb(0 0 0 / 14%);
  text-align: center;
  text-decoration: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

.spiral-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
}

.spiral-card-icon svg {
  width: 24px;
  height: 24px;
}

.spiral-card-text {
  font-size: 0.92rem;
  line-height: 1.35;
}

.spiral-card-arrow {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.9;
}

/* Cards are appended in statement order with no duplication (see
   createCards in infinite-spiral.js), so nth-child directly cycles
   the three brand colors every 3 cards: green, white, gold. */
.infinite-spiral__item:nth-child(3n+1) {
  background: var(--dark);
  border-color: rgb(255 255 255 / 12%);
}
.infinite-spiral__item:nth-child(3n+1) .spiral-card-icon {
  background: var(--white);
  color: var(--gold-bright);
}
.infinite-spiral__item:nth-child(3n+1) .spiral-card-text,
.infinite-spiral__item:nth-child(3n+1) .spiral-card-arrow {
  color: var(--white);
}

.infinite-spiral__item:nth-child(3n+2) {
  background: var(--light-bg);
  border-color: var(--border);
}
.infinite-spiral__item:nth-child(3n+2) .spiral-card-icon {
  background: var(--dark);
  color: var(--gold-bright);
}
.infinite-spiral__item:nth-child(3n+2) .spiral-card-text,
.infinite-spiral__item:nth-child(3n+2) .spiral-card-arrow {
  color: var(--dark);
}

.infinite-spiral__item:nth-child(3n+3) {
  background: var(--gold-bright);
  border-color: rgb(18 63 49 / 18%);
}
.infinite-spiral__item:nth-child(3n+3) .spiral-card-icon {
  background: var(--dark);
  color: var(--gold-bright);
}
.infinite-spiral__item:nth-child(3n+3) .spiral-card-text {
  color: var(--dark);
}
.infinite-spiral__item:nth-child(3n+3) .spiral-card-arrow {
  color: var(--dark);
}

@media (max-width: 640px) {
  .gallery-stage { height: 480px; }
}

.deck-wrap {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.deck-row {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.deck-stage {
  position: relative;
  flex: 0 0 65%;
  aspect-ratio: 16 / 10;
}

.deck-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 78%;
  border-radius: 16px;
  overflow: hidden;
  will-change: transform;
  box-shadow: 0 16px 36px rgba(18, 63, 49, 0.28);
  background: var(--light-bg);
}

.deck-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.deck-captions {
  position: relative;
  flex: 1;
  align-self: stretch;
}

.deck-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--dark);
  opacity: 0;
}

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.carousel-btn {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-family: inherit;
  font-size: 1.0875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-btn);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.carousel-btn:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* ── Ábrete a las posibilidades (scroll-expand) ───────── */
.scroll-expand {
  position: relative;
  width: 100%;
}

.scroll-expand__track {
  position: relative;
  width: 100%;
}

.scroll-expand__stage {
  position: sticky;
  top: var(--header-h);
  width: 100%;
  overflow: hidden;
  box-shadow: var(--stack-shadow);
  --se-title-size: 4rem;
}

.scroll-expand__frame {
  position: absolute;
  inset: 0;
  clip-path: inset(21% 29% 21% 29% round 24px);
  will-change: clip-path;
  background: var(--light-bg);
}

.scroll-expand__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
}

.scroll-expand__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.35));
  opacity: 0;
}

.scroll-expand__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6%;
  opacity: 0;
  will-change: opacity, transform;
}

.scroll-expand__overlay-title {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem;
  max-width: 720px;
}

.scroll-expand__overlay-text {
  font-family: 'SmoochSans', system-ui, sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  max-width: 640px;
  line-height: 1.5;
}

.scroll-expand__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 6%;
  text-align: center;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: var(--se-title-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--primary);
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.6);
  pointer-events: none;
  will-change: opacity, transform;
}

.scroll-expand__title--light {
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

@media (max-width: 640px) {
  .scroll-expand__overlay-title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .scroll-expand__overlay-text { font-size: clamp(0.95rem, 4vw, 1.15rem); }
}

/* ── Resultados (scroll-staged) ───────────────────────── */
.resultados {
  /* Not sticky (see .results-scroll note below), but still needs to be
     "positioned" with a z-index above .carousel-section so its own
     background paints over it correctly as it scrolls into place —
     otherwise, being non-positioned, it would paint in the static
     layer, below the still-stuck sticky carousel section. */
  position: relative;
  z-index: 2;
  background: var(--dark);
}
.resultados .section-title { color: var(--white); }
.resultados-wordmark {
  height: 2.2em;
  width: auto;
  display: inline-block;
  margin-bottom: 0.4rem;
}

.results-scroll {
  /* Plain (non-sticky) spacer that reserves scroll room: 4 point-reveal
     segments + 1 regroup segment (100vh each) + 1 extra viewport of
     settle buffer so the last stage isn't immediately covered by the
     next section sliding in. Making THIS element sticky (rather than
     the 100vh .results-stage below) was tried first, but very tall
     sticky elements release far earlier than their own height would
     predict — some kind of browser cap — so the pin lives on the short
     inner element instead. */
  position: relative;
  height: 600vh;
}

.results-stage {
  position: sticky;
  top: var(--header-h);
  z-index: 3;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  box-shadow: var(--stack-shadow);
}

.results-stage .section-title {
  transition: transform 0.6s ease;
}
.results-stage.is-lifted .section-title {
  transform: translateY(-2.5rem);
}

.results-steps {
  position: relative;
  width: 100%;
  max-width: 920px;
  height: 380px;
}

/* Positioned by JS (transform: translate + scale) as the user scrolls;
   this only sets the shared box shape and centers the origin so JS can
   deal in offsets proportional to .results-steps' own measured size. */
.result-step {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  opacity: 0;
}

.data-number {
  font-size: 5rem;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -0.03em;
  white-space: nowrap;
  line-height: 1;
}

.data-label {
  font-size: 1.218rem;
  text-align: center;
  color: #d5e6de;
  line-height: 1.35;
}

/* ── FAQ ─────────────────────────────────────────────── */
.faq-section { background: var(--light-bg); }

.faq-list {
  max-width: 780px;
  margin: 0 auto;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.65rem;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 1.15rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: inherit;
  font-size: 1.479rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.faq-icon {
  font-size: 1.392rem;
  font-weight: 300;
  color: var(--primary);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  display: inline-block;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 1.5rem;
  font-size: 1.2615rem;
  color: var(--muted);
  line-height: 1.75;
}
.faq-item.open .faq-answer {
  max-height: 400px;
  padding: 0 1.5rem 1.25rem;
}

.faq-cta {
  text-align: center;
  margin-top: 2.75rem;
}

/* ── Footer ──────────────────────────────────────────── */
/* Needs its own z-index above .carousel-section (2): that section is
   sticky with no tall wrapper of its own, so its containing block is
   effectively the whole document and it stays eligible to render
   "stuck" for the rest of the page -- every section after it (.resultados
   at 3, .faq-section at 5) relies on a higher z-index to paint over
   that, and the footer needs the same or it shows through. */
footer {
  position: relative;
  z-index: 7;
  overflow: hidden;
  background: var(--dark);
  padding: 3.5rem 0;
  box-shadow: var(--stack-shadow);
}

/* Strands WebGL flourish, filling the footer as a background layer. */
.strands-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 4rem;
}

.footer-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.131rem;
  color: var(--white);
  white-space: nowrap;
  flex-shrink: 0;
}

.footer-logo {
  height: 1.6em;
  width: auto;
  display: block;
}

.footer-cols {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 4rem;
}

.footer-col h4 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1rem;
}

.footer-col a {
  display: block;
  font-size: 1.044rem;
  color: var(--white);
  margin-bottom: 0.55rem;
  transition: opacity 0.15s;
}
.footer-col a:hover { opacity: 0.7; }

/* ── Planes ──────────────────────────────────────────── */
/* planes-hold is a spacer, taller than its sticky child, giving
   planes-section real room to hold in place -- the same track/stage
   relationship the scroll-expand hero uses for its own hold. Without
   it, a sticky element sized to exactly fill the viewport has zero
   spare scroll room and releases the instant it arrives, which reads
   identically to not being sticky at all. */
.planes-hold {
  min-height: 175vh;
}

/* min-height + no top padding: the crossfade in main.js pulls this
   section up to land its top right where the hero's sticky stage was
   pinned (see the scroll-expand IIFE), so it needs to fill that same
   full-bleed, viewport-minus-header rect for the fade to read as cards
   replacing the image in place rather than a smaller block appearing
   below it. Sticky (rather than static) is what turns that hand-off
   into cards holding position like the next slide instead of just
   continuing to scroll off with the rest of the page; the container's
   own max-width is dropped to match the image's full width, and
   centering the content vertically keeps the cards from pinning to the
   top of that taller box. */
.planes-section {
  position: sticky;
  top: var(--header-h);
  padding: 0 0 5rem;
  background: var(--light-bg);
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}
.planes-section .container {
  max-width: none;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* ── BorderGlow (vanilla port) ──────────────────────────
   This site has no React/build step, so the requested BorderGlow
   component is ported to plain CSS custom properties + a small JS
   controller (border-glow.js) that drives --edge-proximity (0-100,
   how close the pointer is to the card's edge) and --cursor-angle
   (the direction of the pointer from the card's center), matching the
   requested props: edgeSensitivity 46, coneSpread 45, borderRadius 25,
   glowRadius 50 (--glow-padding), backgroundColor #0f3d2e, glowColor
   "40 80 80" (the box-shadow rings' default hsl(40deg 80% 80%) below
   *is* that color), colors [purple, pink, blue] (the gradient-*
   stops). Glow only appears on hover, aimed at the cursor via
   border-glow.js. */
.plan-card.border-glow-card {
  --edge-sensitivity: 46;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 25px;
  --glow-padding: 50px;
  --cone-spread: 45;
  /* keeps the mask's color-stops monotonic (and so valid) even at a wide
     spread like 45 -- the stock 15-unit transition only stays valid up
     to a spread of 35 (2*spread + 2*transition <= 100). */
  --cone-transition: min(15, 50 - var(--cone-spread));
  --card-bg: #0f3d2e;

  --gradient-one: radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #f472b6 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #38bdf8 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #f472b6 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #38bdf8 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #c084fc 0px, transparent 50%);
  --gradient-base: linear-gradient(#f472b6 0 100%);
}

.plan-card.border-glow-card {
  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg);
  overflow: visible;
  padding: 2.5rem 2rem;
  color: var(--white);
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px;
  transition: transform 0.2s;
}
.plan-card.border-glow-card:hover {
  transform: translateY(-4px);
}

.plan-card.border-glow-card::before,
.plan-card.border-glow-card::after,
.plan-card.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
  pointer-events: none;
}

.plan-card.border-glow-card:not(:hover)::before,
.plan-card.border-glow-card:not(:hover)::after,
.plan-card.border-glow-card:not(:hover) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.plan-card.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + var(--cone-transition)) * 1%),
      transparent calc((100 - var(--cone-spread) - var(--cone-transition)) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* colored mesh-gradient fill near the edges */
.plan-card.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(0.5 * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer -- the actual "border glow" halo */
.plan-card.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

/* Ring thickness/alpha ramp scaled up for glowIntensity: 3 (a stronger
   read than the component's baseline intensity). */
.plan-card.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1.5px hsl(40deg 80% 80% / 100%),
    inset 0 0 3px 0 hsl(40deg 80% 80% / 85%),
    inset 0 0 8px 0 hsl(40deg 80% 80% / 70%),
    inset 0 0 16px 0 hsl(40deg 80% 80% / 55%),
    inset 0 0 32px 0 hsl(40deg 80% 80% / 42%),
    inset 0 0 56px 4px hsl(40deg 80% 80% / 30%),
    inset 0 0 100px 4px hsl(40deg 80% 80% / 18%),
    0 0 3px 0 hsl(40deg 80% 80% / 85%),
    0 0 8px 0 hsl(40deg 80% 80% / 70%),
    0 0 16px 0 hsl(40deg 80% 80% / 55%),
    0 0 32px 0 hsl(40deg 80% 80% / 42%),
    0 0 56px 4px hsl(40deg 80% 80% / 30%),
    0 0 100px 4px hsl(40deg 80% 80% / 18%);
}

.plan-card .border-glow-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 1;
}

.plan-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.plan-title-underline {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.plan-price {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.plan-price-period {
  font-family: 'SmoochSans', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--white);
  opacity: 0.75;
}

/* A medida has no fixed price -- de-emphasize it (SmoochSans, smaller,
   lighter weight) so the card's weight falls on the tailored-approach list
   below rather than on a number that isn't really there. */
.plan-price-custom {
  font-family: 'SmoochSans', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--white);
  opacity: 0.75;
}

.plan-content {
  flex: 1;
  font-size: 1.392rem;
  color: var(--white);
  opacity: 0.9;
  line-height: 1.7;
}

.plan-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.plan-list li {
  position: relative;
  padding-left: 1.5rem;
}

.plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--white);
  font-weight: 700;
}

.plan-footer {
  margin-top: 2rem;
  text-align: center;
}

.plan-footer .btn-primary {
  background: #c6a15b;
  border-color: #c6a15b;
}
.plan-footer .btn-primary:hover {
  background: #a8823f;
  border-color: #a8823f;
}

.plan-price-note {
  text-align: center;
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: 1.1rem;
}

/* ── Planes page hero text (SmoochSans) ───────────────── */
.plan-hero-text {
  font-size: 1.392rem;
}

/* ── Contacto ────────────────────────────────────────── */
.contacto-section { padding: 5rem 0; }

.page-hero p.contacto-hero-text {
  font-size: 1.65rem;
}

.contacto-intro {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
  color: var(--muted);
  font-size: 1.65rem;
  line-height: 1.75;
}

/* Contact form text (labels, inputs, checkboxes, submit button and
   status message) enlarged to match the rest of this page's SmoochSans
   text -- scoped to .contacto-section so it doesn't affect the admin
   login form, which reuses the same .form-group/.checkbox-item/.btn
   classes at its own sizes (see admin.css). */
.contacto-section .form-group label,
.contacto-section .form-group input,
.contacto-section .form-group select,
.contacto-section .checkbox-item,
.contacto-section .form-submit .btn,
.contacto-section .form-status {
  font-size: 1.65rem;
}

.contacto-section .terminos-group {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.contact-form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 0.76125rem;
  font-weight: 600;
  color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: inherit;
  font-size: 0.8265rem;
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  background: var(--white);
  transition: border-color 0.18s;
  outline: none;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
}

.checkboxes-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.80475rem;
  color: var(--text);
  cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
  cursor: pointer;
}

.form-submit {
  margin-top: 0.5rem;
}

.form-status {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ── Legal pages ─────────────────────────────────────── */
.legal-section { padding: 5rem 0; }

.legal-content {
  max-width: 880px;
  margin: 0 auto;
  /* SmoochSans runs small at its natural metrics -- fine for marketing copy in
     short bursts, punishing across pages of legal text. Everything below is the
     previous scale x1.3; max-width grew with it so the measure stays near 70
     characters instead of turning into a narrow ribbon. */
  font-size: 1.3em;
}
.legal-content h1 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 2rem;
}
.legal-content p {
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

/* The legal pages carry full documents now (aviso legal, términos, privacidad),
   not the two-paragraph stubs they started as -- so they need headings, lists
   and a table that .legal-content didn't previously style. */
.legal-content h2 {
  font-size: 1.69rem;
  font-weight: 800;
  color: var(--dark);
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.legal-content h3 {
  font-size: 1.365rem;
  font-weight: 700;
  color: var(--dark);
  margin: 1.75rem 0 0.6rem;
}

/* Política de privacidad carries two documents on one page. These title each
   one so the reader can see where the cookie policy ends and the privacy
   policy begins -- heavier than the section headings below them, and without
   the rule, which would read as just another section divider. */
.legal-content h2.legal-part {
  font-size: 2.275rem;
  color: var(--primary);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 1.25rem;
}
.legal-content h2.legal-part + p { margin-bottom: 1.5rem; }
.legal-content .legal-part-divider {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 2px solid var(--border);
}
.legal-content ul {
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 1.25rem 1.25rem;
  padding-left: 0.75rem;
}
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a { color: var(--primary); }

/* Identity block on the aviso legal: label/value pairs, not prose. */
.legal-dl {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 0.55rem 1.5rem;
  margin: 0 0 1.5rem;
  color: var(--muted);
  line-height: 1.6;
}
.legal-dl dt { font-weight: 700; color: var(--text); }
.legal-dl dd { margin: 0; }

.legal-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.235rem;
  color: var(--muted);
}
.legal-content th,
.legal-content td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal-content th {
  color: var(--text);
  font-weight: 700;
  background: var(--light-bg);
  white-space: nowrap;
}

/* EU residency: the one infrastructure claim worth pulling out of the prose,
   since no competitor in the segment can currently make it. */
.legal-callout {
  background: var(--light-bg);
  border-left: 4px solid var(--primary);
  padding: 1.4rem 1.6rem;
  margin: 0 0 1.5rem;
  border-radius: 0 6px 6px 0;
}
.legal-callout p:last-child { margin-bottom: 0; }
.legal-callout strong { color: var(--dark); }

/* Warning variant: the onboarding documents' own "PENDIENTE"/"ADVERTENCIA"/
   "IMPORTANTE" boxes (unfilled company data, confidentiality notices, SLA
   disclaimers) -- same shape as .legal-callout, red instead of gold so it
   reads as urgent rather than informational. */
.legal-callout--warning {
  background: #fdf0ee;
  border-left-color: #b3261e;
}
.legal-callout--warning strong { color: #8c1d17; }

/* ── Onboarding e-signature page ─────────────────────── */
.onboarding-status {
  max-width: 880px;
  margin: 0 auto 2.5rem;
  padding: 1.1rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
}
.onboarding-status--error {
  background: #fdf0ee;
  border: 1px solid #b3261e;
  color: #8c1d17;
}
.onboarding-status--success {
  background: #eef6f1;
  border: 1px solid var(--primary);
  color: var(--dark);
}
.onboarding-signer {
  max-width: 880px;
  margin: 0 auto 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.onboarding-signer label {
  display: block;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.onboarding-signer input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  color: var(--text);
}
.onboarding-doc {
  max-width: 880px;
  margin: 0 auto 2rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem 2.25rem;
}
.onboarding-accept {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-weight: 600;
  color: var(--text);
}
.onboarding-accept input { margin-top: 0.3rem; }
.onboarding-signed-note {
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.5rem;
}
.onboarding-submit-wrap {
  max-width: 880px;
  margin: 0 auto 4rem;
  text-align: right;
}
@media (max-width: 640px) {
  .onboarding-signer { grid-template-columns: 1fr; }
  .onboarding-doc { padding: 1.5rem; }
}

/* Fields the owner still has to supply. Deliberately conspicuous: these are
   live public pages, and an unfilled NIF is an LSSI-CE Art. 10 gap, not a
   cosmetic one. Remove the span once the value is in. */
.pendiente {
  background: #fdf3d7;
  border-bottom: 1px dashed var(--gold);
  color: #6b5200;
  padding: 0 0.25rem;
  font-style: italic;
}

.legal-updated {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 1.17rem;
  color: var(--muted);
}

/* ── Página en construcción ──────────────────────────── */
/* Stands in for the three legal documents while their pending fields are
   filled in. The finished documents live in /legal at the repo root, outside
   staticPublishPath, so they are versioned but not reachable by URL. */
.construccion {
  max-width: 560px;
  margin: 0 auto;
  padding: 3rem 0 1rem;
  text-align: center;
}
.construccion-eyebrow {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
}
.construccion h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1.5rem;
}
.construccion p {
  font-size: 1.35rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.construccion-acciones {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* ── Page hero (inner pages) ─────────────────────────── */
.page-hero {
  background: linear-gradient(150deg, #eef3e9 0%, #f0f5ec 100%);
  padding: 4rem 2rem;
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
}
.page-hero p {
  margin-top: 0.75rem;
  font-size: 0.957rem;
  color: var(--muted);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .header-inner { padding: 0 1rem; gap: 0.5rem; }
  .header-logo img { height: 39px; }
  .header-nav { gap: 1.25rem; }
  .header-nav a { font-size: 1rem; }
  .header-right .btn { font-size: 0.9rem; padding: 0.4rem 0.7rem; white-space: nowrap; }
  .data-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .plans-grid { grid-template-columns: 1fr; }
  /* Stacked single-column cards are taller than one viewport, so
     holding planes-section sticky here would pin it on-screen with the
     lower cards stuck below the fold and no way to scroll to them
     until the whole (now very tall) box finally released. Sticky only
     pays off when all three cards fit within roughly one screen. */
  .planes-hold { min-height: 0; }
  .planes-section { position: static; min-height: 0; }
  .deck-row { flex-direction: column; }
  .deck-stage { flex-basis: auto; width: 100%; order: 1; }
  .deck-card { width: 46%; height: 74%; }
  .deck-captions { width: 100%; min-height: 4.5rem; margin-top: 0.5rem; order: 2; }
  .deck-caption { text-align: center; }
  .data-number { font-size: 3.5rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 2.5rem; }
  .footer-cols { flex-direction: column; gap: 2rem; justify-content: flex-start; }
}

@media (max-width: 420px) {
  .header-inner { padding: 0 0.75rem; gap: 0.35rem; }
  .header-logo img { height: 33px; }
  .header-nav { gap: 0.75rem; }
  .header-nav a { font-size: 0.85rem; }
  .header-right .btn { font-size: 0.78rem; padding: 0.35rem 0.55rem; }
}

/* ── 404 ─────────────────────────────────────────────── */
.notfound {
  --gold-on-dark: #e0b23d;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--header-h));
  padding: 3.5rem 1.5rem;
  background: var(--dark);
  text-align: center;
  overflow: hidden;
}

.notfound-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 50% 38%, rgba(224,178,61,0.16) 0%, rgba(224,178,61,0) 70%);
  pointer-events: none;
}

.notfound-rings {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.notfound-rings span {
  position: absolute;
  top: 30%;
  width: var(--nf-size);
  height: var(--nf-size);
  margin-top: calc(var(--nf-size) / -2);
  border: 1px solid rgba(224,178,61,0.12);
  border-radius: 50%;
  animation: nf-ping 5s cubic-bezier(0, 0, 0.2, 1) var(--nf-delay) infinite;
}

@keyframes nf-ping {
  0%   { transform: scale(0.9); opacity: 0.9; }
  80%, 100% { transform: scale(1.35); opacity: 0; }
}

.notfound-inner {
  position: relative;
  width: 100%;
  max-width: 40rem;
}

.notfound-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border: 1px solid rgba(224,178,61,0.3);
  border-radius: 999px;
  background: rgba(224,178,61,0.1);
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-on-dark);
}
.notfound-kicker svg { width: 0.9rem; height: 0.9rem; }

.notfound-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: clamp(4.5rem, 16vw, 8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.notfound-digit {
  background: linear-gradient(180deg, #f0d488 0%, #e0b23d 55%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.notfound-dial {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0.8em;
  height: 0.8em;
  border: 0.1em solid rgba(224,178,61,0.85);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(224,178,61,0.25);
  color: var(--gold-on-dark);
}
.notfound-dial svg { width: 0.34em; height: 0.34em; }

.notfound-title {
  margin-top: 2rem;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--white);
  text-wrap: balance;
}

.notfound-text {
  max-width: 28rem;
  margin: 1rem auto 0;
  font-size: 1.25rem;
  color: rgba(255,255,255,0.85);
  text-wrap: pretty;
}

.notfound-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  margin: 1.5rem auto 0;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  font-size: 1.125rem;
  color: rgba(255,255,255,0.65);
}
.notfound-path span { flex-shrink: 0; }
.notfound-path code {
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: rgba(255,255,255,0.9);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.notfound-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.625rem 1.75rem;
  font-size: 1.25rem;
}
.notfound-actions .btn svg { width: 1rem; height: 1rem; }

.btn-gold {
  background: var(--gold-on-dark, #e0b23d);
  border-color: var(--gold-on-dark, #e0b23d);
  color: var(--dark);
}
.btn-gold:hover {
  background: #cfa032;
  border-color: #cfa032;
}

.btn-ghost-light {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.55);
  color: var(--white);
}
.btn-ghost-light:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--dark);
}

.notfound-help {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.notfound-help h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.notfound-help ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 2rem;
  margin-top: 0.5rem;
  list-style: none;
}
.notfound-help a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  transition: var(--transition-fast);
}
.notfound-help a:hover {
  color: var(--gold-on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 480px) {
  .notfound { padding: 3rem 1rem; }
  .notfound-help ul { gap: 0 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .notfound-rings span { animation: none; }
}

/* ── Cookie notice banner ─────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.cookie-banner-text {
  margin: 0;
  max-width: 60ch;
  font-size: 0.95rem;
  color: var(--text);
}
.cookie-banner-text a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-btn {
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
}

@media (max-width: 480px) {
  .cookie-banner { justify-content: stretch; text-align: center; }
  .cookie-banner-btn { width: 100%; }
}

/* ── PYMES page ──────────────────────────────────────── */
.pymes .section-title {
  font-size: clamp(1.45rem, 1rem + 1.6vw, 2rem);
  line-height: 1.25;
}

.pymes p {
  font-size: 1.4rem;
  line-height: 1.55;
}

/* Hero: text + looping video on the brand's dark green. */
.pymes-hero {
  background: linear-gradient(150deg, #0d2f24 0%, var(--dark) 55%, var(--primary) 130%);
  padding: 4.5rem 0;
}

.pymes-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 3.5rem;
  align-items: center;
}

.pymes-hero h1 {
  font-size: clamp(1.6rem, 0.8rem + 1.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
}
.pymes-hero-ia {
  color: var(--gold-bright);
}

.pymes-hero-wordmark {
  height: clamp(2.185rem, 1.15rem + 2.99vw, 3.565rem);
  width: auto;
  vertical-align: -0.12em;
  display: inline-block;
}

.pymes .pymes-hero-sub {
  margin-top: 1.25rem;
  max-width: 30rem;
  font-size: 1.65rem;
  line-height: 1.4;
  color: #d5e6de;
}

.pymes-hero-actions,
.pymes-cierre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.pymes-hero-actions .btn,
.pymes-cierre-actions .btn {
  min-height: 44px;
  padding: 0.625rem 1.75rem;
  font-size: 1.25rem;
}

.pymes-video {
  display: block;
  width: 100%;
  height: auto;
  background: #0d2f24;
}
.pymes-hero .pymes-video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* The rounding/border/shadow live on this wrapper rather than the
   <video> itself: iOS Safari can fail to repaint a looping video that
   has its own border-radius, leaving it visually frozen after the
   first loop even though playback continues underneath. */
.pymes-video-frame {
  border-radius: 18px;
  overflow: hidden;
  background: #0d2f24;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.pymes-video-caption {
  margin-top: 0.6rem;
  text-align: right;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
}
/* .pymes-calendario sits on a white background, unlike the dark hero. */
.pymes-split-media .pymes-video-caption {
  color: var(--muted);
}

/* Intro */
.pymes-intro { padding: 4.5rem 0 4rem; }

.pymes .pymes-lead {
  max-width: 60rem;
  margin: 0 auto;
  font-size: 1.65rem;
  line-height: 1.5;
  text-align: center;
}

/* Tinted bands alternate with white sections. */
.pymes-band { background: var(--light-bg); padding: 5rem 0; }

.pymes-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

.pymes-figure {
  margin-top: 3rem;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(18, 63, 49, 0.14);
}
.pymes-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Calendar: copy left, screen recording right. */
.pymes-calendario { padding: 5rem 0; }

.pymes-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}
.pymes-split-copy .section-title {
  text-align: left;
  margin-bottom: 1.5rem;
}
.pymes-split-copy p + p { margin-top: 1.25rem; }

.pymes-split-media { justify-self: center; width: 100%; max-width: 560px; }
.pymes-video--calendar {
  aspect-ratio: 1200 / 1002;
  background: var(--white);
}
.pymes-video-frame--calendar {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(18, 63, 49, 0.14);
}

/* Three benefit cards */
.pymes-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.pymes-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem 1.75rem 2.25rem;
}
.pymes-card h2 {
  min-height: 2.6em;
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dark);
}
.pymes-card p + p { margin-top: 1rem; }

/* Closing panel */
.pymes-cierre { padding: 5rem 0 6rem; }

.pymes-cierre-panel {
  padding: 4rem 3rem;
  border-radius: 24px;
  background: linear-gradient(150deg, #0d2f24 0%, var(--dark) 60%, var(--primary) 140%);
  text-align: center;
}
.pymes-cierre-panel .section-title {
  color: var(--white);
  margin-bottom: 1.5rem;
}
.pymes-cierre-panel p {
  max-width: 48rem;
  margin: 0 auto 1rem;
  color: #d5e6de;
}
.pymes .pymes-cierre-panel .pymes-cierre-claim {
  margin-top: 2rem;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--gold-bright);
}
.pymes-cierre-actions { justify-content: center; }

/* Headings wrap to three lines in the narrower three-column layout. */
@media (min-width: 901px) and (max-width: 1180px) {
  .pymes-card h2 { min-height: 3.9em; }
}

@media (max-width: 900px) {
  .pymes-hero { padding: 3rem 0; }
  .pymes-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .pymes-band,
  .pymes-calendario { padding: 3.5rem 0; }
  .pymes-intro { padding: 3rem 0 2.5rem; }
  .pymes-columns { grid-template-columns: 1fr; }
  .pymes-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .pymes-cards { grid-template-columns: 1fr; }
  .pymes-card h2 { min-height: 0; }
  .pymes-cierre { padding: 3.5rem 0 4rem; }
}

@media (max-width: 640px) {
  .pymes-hero-inner { padding: 0 1.25rem; }
  .pymes .container { padding: 0 1.25rem; }
  .pymes p { font-size: 1.3rem; }
  .pymes .pymes-lead,
  .pymes .pymes-hero-sub { font-size: 1.45rem; }
  .pymes-cierre-panel { padding: 2.5rem 1.5rem; border-radius: 18px; }
  .pymes-hero-actions .btn,
  .pymes-cierre-actions .btn { flex: 1 1 100%; }
}