:root {
  --color-primary: #3E3B68;
  --color-primary-dark: #211F3D;
  --color-primary-light: #D8D7EA;
  --color-primary-mid: #635EA1;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F5FB;
  --color-text: #1E1B2E;
  --color-text-muted: #5D5B7B;
  --color-border: #E4E2EF;
  --color-dent3d-teal: #1BA6A6;
  --color-dent3d-magenta: #C43F86;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-weight: 700; margin: 0 0 0.5em; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--color-primary-mid); outline-offset: 2px; }
/* The default outline color is too low-contrast against these darker/filled
   card and footer backgrounds (on .plan-card--advanced it would be flatly
   invisible, since its background IS --color-primary-mid), so focusable
   elements inside them get a white outline instead. */
.plan-card--advanced :focus-visible,
.plan-card--professional :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }
.container { max-width: 1200px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-primary-dark); }
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--color-primary); color: #fff; }
.btn--lg { padding: 0.9rem 2rem; font-size: 1.05rem; }

.section-title {
  text-align: center;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  margin-bottom: 3rem;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 60ms; }
.reveal:nth-child(3) { transition-delay: 120ms; }
.reveal:nth-child(4) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity 300ms ease; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* Transparent over the hero until the first scroll, so the hero's own
     full-bleed background shows through behind the header instead of a
     white bar sitting on top of it. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.site-header--scrolled {
  background: var(--color-bg);
  box-shadow: 0 4px 24px rgba(30, 27, 46, 0.08);
  border-bottom-color: var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.site-header__logo { position: relative; display: inline-flex; }
.site-header__logo-img {
  height: 32px;
  width: auto;
  transition: opacity 200ms ease;
}
/* Dark (on-white) logo is stacked on top of the light one and starts hidden;
   swapping opacity (not the img src) avoids any flash/reflow on scroll. */
.site-header__logo-img--dark { position: absolute; inset: 0; opacity: 0; }
.site-header--scrolled .site-header__logo-img--light { opacity: 0; }
.site-header--scrolled .site-header__logo-img--dark { opacity: 1; }

.site-nav__list {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  transition: color 200ms ease;
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--color-primary-light);
}
.site-header--scrolled .site-nav__list a { color: var(--color-text); }
.site-header--scrolled .site-nav__list a:hover,
.site-header--scrolled .site-nav__list a:focus-visible {
  color: var(--color-primary);
}

.site-nav__item { position: relative; }
.site-nav__link-row { display: flex; align-items: center; gap: 0.3rem; }
.site-nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: color 200ms ease;
}
.site-header--scrolled .site-nav__dropdown-toggle { color: var(--color-text); }
.site-nav__dropdown-chevron { width: 14px; height: 14px; transition: transform 200ms ease; }
.site-nav__item.is-open .site-nav__dropdown-chevron { transform: rotate(180deg); }

/* Dropdown panels are always solid white, same reasoning as the mobile nav
   panel - their links must stay dark regardless of header scroll state.
   Visibility is driven by the .is-open class (set on hover-with-a-closing-
   delay by initNavDropdowns, so a diagonal mouse path into a wide mega-menu
   doesn't get read as "left the trigger" and slam it shut) plus a plain CSS
   :focus-within fallback for keyboard users, who don't have that diagonal-
   path problem in the first place. */
.site-nav__dropdown {
  list-style: none;
  /* No gap between the trigger and the panel (flush at top: 100%) - a gap
     here is a dead zone the mouse has to cross with nothing hoverable under
     it, so moving straight down toward an item closes the dropdown before
     the cursor arrives. */
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  /* Clips the square :hover background of the first/last item to the panel's
     rounded corners - without it the highlight paints over them. */
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(30, 27, 46, 0.14);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
  z-index: 60;
}
.site-nav__item.is-open .site-nav__dropdown:not(.site-nav__dropdown--mega),
.site-nav__item:focus-within .site-nav__dropdown:not(.site-nav__dropdown--mega) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.site-nav__dropdown a {
  display: block;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.6rem 1rem;
  border-bottom: none;
  white-space: nowrap;
}
.site-nav__dropdown a:hover,
.site-nav__dropdown a:focus-visible {
  color: var(--color-primary);
  border-color: transparent;
  background: var(--color-bg-alt);
}

/* Mega-menu variant (Productos, Marcas): a native CSS multi-column flow
   instead of one tall single-file list, so 19 (or 9) items fit in a few
   short rows with no internal scrollbar. `columns: N minWidth` lets the
   browser drop a column on narrower desktop widths instead of overflowing. */
.site-nav__dropdown--mega {
  left: 50%;
  /* Fixed horizontal centering lives on `transform`; the open/close motion
     runs on the independent `translate` property instead of also being on
     `transform`, so the two never fight over which one "wins" the property
     (the same fix as the hero's Professional-card elevation/hover bug). */
  transform: translateX(-50%);
  translate: 0 -8px;
  transition: opacity 200ms ease, translate 200ms var(--ease-out);
  width: max-content;
  max-width: min(85vw, 760px);
  padding: 1.25rem 1.5rem;
  column-gap: 0.5rem;
}
.site-nav__dropdown--productos { columns: 4 190px; }
.site-nav__dropdown--marcas { columns: 3 160px; }
.site-nav__dropdown--mega li { break-inside: avoid; }
.site-nav__item.is-open .site-nav__dropdown--mega,
.site-nav__item:focus-within .site-nav__dropdown--mega {
  opacity: 1;
  transform: translateX(-50%);
  translate: 0 0;
  pointer-events: auto;
}
.site-nav__dropdown--mega a { padding: 0.5rem 0.75rem; white-space: normal; }

/* El nav de escritorio arranca en 992px, pero ahi la barra todavia es angosta
   y "Productos" queda muy a la izquierda: centrado sobre su trigger (cuyo eje
   cae en ~349px), un panel de 760px se sale 31px por el borde IZQUIERDO de la
   pantalla y la primera columna de links queda fuera de vista. El caso peor es
   exactamente 992px - de ahi para arriba el trigger se corre a la derecha y el
   margen crece -, asi que acotamos el ancho solo en esta franja: 660px deja
   19px de aire contra el borde a 992px y `columns: 4 190px` sigue entrando en
   4 columnas, con lo cual el panel no cambia de alto. A partir de 1200px hay
   lugar de sobra y vuelve el ancho pleno de 760px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-nav__dropdown--mega { max-width: min(85vw, 660px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__dropdown { transition: opacity 200ms ease; }
  .site-nav__dropdown--mega { transition: opacity 200ms ease; }
}

/* Groups the cart link with the hamburger so they stay pinned together on
   the right edge - without this wrapper, .site-header__inner's
   justify-content: space-between spaces the cart and toggle apart as two
   separate flex items instead of keeping them adjacent. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-header__cart {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: color 200ms ease;
}
.site-header__cart-icon { width: 22px; height: 22px; flex-shrink: 0; }
/* Icon-only below the desktop breakpoint - there's no room next to the
   hamburger for the label, but the link should still be reachable. */
.site-header__cart-label { display: none; }
.site-header__cart:hover,
.site-header__cart:focus-visible { color: var(--color-primary-light); }
.site-header--scrolled .site-header__cart { color: var(--color-text); }
.site-header--scrolled .site-header__cart:hover,
.site-header--scrolled .site-header__cart:focus-visible { color: var(--color-primary); }
@media (min-width: 992px) {
  .site-header__cart-icon { width: 18px; height: 18px; }
  .site-header__cart-label { display: inline; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease, background-color 200ms ease;
}
.site-header--scrolled .nav-toggle__bar { background: var(--color-text); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#inicio, #planes, #licencias { scroll-margin-top: 88px; }

/* 6 top-level items (3 with a chevron) plus the cart link no longer fit on
   one line once tablet width dips below ~992px - "Mi cuenta" was the first
   to wrap, breaking the whole row into two. Collapse to the hamburger menu
   through the tablet range too, not just phones, and only show the full
   inline nav at the same >=992px breakpoint the cart label already uses. */
@media (max-width: 991.98px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    /* A fixed element has no bound on its own height, so a fully-expanded
       Productos (19 items) can run taller than the screen - without a max
       height and its own scroll, touch-scrolling over it just scrolls the
       page underneath instead. overscroll-behavior stops the scroll from
       "chaining" into the page once the panel's own scroll hits an end. */
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms var(--ease-out), opacity 200ms ease;
  }
  .site-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  /* The dropdown panel is always solid white, whether the header itself is
     still transparent (pre-scroll) or not, so its links must always be dark
     regardless of .site-header--scrolled - otherwise white-on-white. */
  .site-nav__list a { color: var(--color-text); }
  .site-nav__list a:hover,
  .site-nav__list a:focus-visible { color: var(--color-primary); }
  .site-nav__list { flex-direction: column; gap: 0; padding: 1rem 1.5rem 1.5rem; }
  .site-nav__list a { display: block; padding: 0.75rem 0; }

  .site-nav__dropdown-toggle { color: var(--color-text); }
  .site-nav__link-row { justify-content: space-between; }
  /* Inline accordion instead of a floating panel - the whole nav is already
     a dropdown at this width, so a second floating layer on top of it would
     run off-screen. grid-template-rows 0fr->1fr auto-sizes to real content,
     same technique as the "Datos bancarios" panel in the license form. */
  .site-nav__item--has-dropdown {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 250ms var(--ease-in-out);
  }
  .site-nav__item--has-dropdown.is-open { grid-template-rows: auto 1fr; }
  .site-nav__dropdown {
    position: static;
    margin: 0;
    min-width: 0;
    max-height: none;
    overflow: hidden;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    /* Same background as the rest of the panel - a visibly different-colored
       box around the submenu read as a mistake, not a nested section. */
    background: var(--color-bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .site-nav__dropdown a { padding: 0.6rem 1rem 0.6rem 2rem; }
  /* The desktop mega-menu rules (centering transform, multi-column flow,
     fixed max-width) have higher specificity than the plain-dropdown reset
     above and would otherwise still apply here - explicitly neutralize them
     so Productos/Marcas fall back to the same single-column inline accordion
     as every other mobile submenu. */
  .site-nav__dropdown--mega {
    left: auto;
    transform: none;
    translate: 0 0;
    width: auto;
    max-width: none;
    columns: auto;
    padding: 0;
  }
  /* .site-nav__item.is-open .site-nav__dropdown--mega (desktop, open state)
     sets `transform: translateX(-50%)` again and outranks the plain reset
     above by specificity alone - same selector here, so it wins instead by
     also being declared later, actually neutralizing the centering. Without
     this the mega dropdown renders shifted ~50% of its own width off-screen
     to the left on mobile, i.e. it's there but invisible. */
  .site-nav__item.is-open .site-nav__dropdown--mega,
  .site-nav__item:focus-within .site-nav__dropdown--mega {
    transform: none;
    translate: 0 0;
  }
  .site-nav__dropdown--mega a { padding: 0.6rem 1rem 0.6rem 2rem; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: opacity 200ms ease; }
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 140px 0 100px;
  overflow: hidden;
  color: #fff;
  background: var(--color-primary-dark);
}
.hero__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  /* Full-bleed (not a right-side box) so there's no separate image "panel"
     with its own hard rectangular edge - the photo IS the section background,
     same as the reference site. hero-derecha.jfif is already framed with the
     tooth toward the right, so a plain cover/center is enough here. */
  background-size: cover;
  background-position: center;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* One continuous gradient across the full width - never resolves to fully
     solid or fully transparent, so there's no visible seam between a "block"
     and the image; it's the same photo everywhere, just tinted more on the
     left (behind the text) than on the right. */
  background: linear-gradient(90deg, rgba(41, 38, 69, 0.88) 0%, rgba(33, 31, 61, 0.5) 100%);
}
@media (max-width: 767.98px) {
  /* Text runs full-width below the breakpoint, so darken more evenly across
     the whole section instead of favoring the left side specifically. */
  .hero__overlay {
    background: linear-gradient(180deg, rgba(41, 38, 69, 0.9) 0%, rgba(33, 31, 61, 0.75) 100%);
  }
  /* hero-derecha.jfif frames the tooth ~75% across the image, not centered.
     A narrow mobile viewport with background-size:cover crops down to a
     vertical strip around the horizontal center, which misses the tooth
     entirely. Shift the focal point right so it stays in frame. */
  .hero__bg-image {
    background-position: 70% center;
  }
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.eyebrow {
  color: var(--color-primary-light);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.hero__content { max-width: 640px; }
.hero__content h1 {
  color: #fff;
  font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.hero__brand { color: var(--color-primary-light); }
.hero__subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 34ch;
  margin-bottom: 2rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}
.distributor-badge {
  background: var(--color-bg);
  border-radius: 16px;
  padding: 0.65rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 12px 24px rgba(30, 27, 46, 0.25);
}
.distributor-badge__logo { height: 21px; width: auto; min-width: 80px; }
.distributor-badge__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.benefits { padding: 80px 0; background: var(--color-bg-alt); }
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}
.benefit-card { text-align: center; padding: 1rem; }
.benefit-card__icon { width: 40px; height: 40px; color: var(--color-primary); margin-bottom: 1rem; }
.benefit-card h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin: 0; }

@media (min-width: 576px) {
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .benefits__grid { grid-template-columns: repeat(4, 1fr); }
}

.plans { padding: 96px 0; }
.plans__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.plan-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, translate 200ms ease, box-shadow 200ms ease;
}
.plan-card__badge {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.plan-card__badge--inverse { color: var(--color-primary-dark); background: #fff; }
.plan-card__name { font-size: 1.4rem; margin-bottom: 1rem; }
.plan-card__price { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.plan-card__price-amount { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.plan-card__price--monthly {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.5rem;
}
.plan-card__price--monthly span { font-size: 1rem; font-weight: 500; color: var(--color-text-muted); }
.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex-grow: 1;
}
.plan-card__features li { padding-left: 1.5rem; position: relative; font-size: 0.9rem; }
.plan-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-primary);
}
.plan-card__cta { width: 100%; margin-top: auto; }
.plans-note {
  max-width: 720px;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.plans-note a { color: var(--color-primary); text-decoration: underline; }

.plan-card--starter { border-top: 4px solid var(--color-primary); }
.plan-card--basic { background: var(--color-primary-light); border-color: transparent; }
/* The default badge chip (--color-primary-light bg) is invisible against this
   card's identical background, so it needs the same white-chip treatment as
   Professional's --inverse badge. */
.plan-card--basic .plan-card__badge { background: #fff; }

.plan-card--advanced,
.plan-card--professional {
  color: #fff;
  border-color: transparent;
  border-top: 4px solid var(--color-primary-mid);
}
.plan-card--advanced { background: var(--color-primary-mid); }
.plan-card--professional { background: var(--color-primary-dark); }
.plan-card--advanced .plan-card__badge,
.plan-card--professional .plan-card__badge { background: #fff; }
.plan-card--advanced .plan-card__badge { color: var(--color-primary-mid); }
.plan-card--advanced .plan-card__name,
.plan-card--advanced .plan-card__price-amount,
.plan-card--advanced .plan-card__price--monthly,
.plan-card--advanced .plan-card__features li,
.plan-card--professional .plan-card__name,
.plan-card--professional .plan-card__price-amount,
.plan-card--professional .plan-card__price--monthly,
.plan-card--professional .plan-card__features li { color: #fff; }
.plan-card--advanced .plan-card__price,
.plan-card--advanced .plan-card__price--monthly span,
.plan-card--professional .plan-card__price,
.plan-card--professional .plan-card__price--monthly span { color: rgba(255, 255, 255, 0.72); }
.plan-card--advanced .plan-card__features li::before,
.plan-card--professional .plan-card__features li::before { background: #fff; }
.plan-card__ribbon {
  position: absolute;
  top: -14px;
  right: 1.5rem;
  background: var(--color-primary-mid);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(33, 31, 61, 0.28);
}

@media (min-width: 576px) {
  .plans__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .plans__grid { grid-template-columns: repeat(4, 1fr); }
  /* `translate` (not `transform`) so this persistent offset composes with
     .reveal/.reveal.is-visible's `transform` instead of being clobbered by
     it once the card's scroll-reveal fires (see QA pass, Task 10). */
  .plan-card--professional { translate: 0 -12px; }
}
@media (hover: hover) and (pointer: fine) {
  .plan-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(30, 27, 46, 0.12); }
}
/* Scoped to the same >=1200px breakpoint as the resting -12px translate above,
   so a hover-capable viewport narrower than that (where the card has no
   resting elevation to begin with) doesn't jump straight to a -16px lift. */
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
  /* translate (not transform) so it overrides the resting -12px translate
     outright; transform: none cancels the generic .plan-card:hover rule's
     transform: translateY(-4px) above, which would otherwise compose with
     this translate and land the card at -20px instead of the intended -16px. */
  .plan-card--professional:hover { translate: 0 -16px; transform: none; }
}

.license-form-section { padding: 96px 0; background: var(--color-bg-alt); }
.license-form-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.license-form-section__header .section-title { margin-bottom: 0; text-align: left; }
.whatsapp-help { flex-shrink: 0; border-color: #128C4A; color: var(--color-text); }
.whatsapp-help__icon { width: 18px; height: 18px; color: #128C4A; }
.whatsapp-help:hover, .whatsapp-help:focus-visible { background: #0E6B3A; color: #fff; border-color: #0E6B3A; }
.whatsapp-help:hover .whatsapp-help__icon, .whatsapp-help:focus-visible .whatsapp-help__icon { color: #fff; }

/* Paso a paso de compra: vive entre el titulo de la seccion y el formulario,
   y concentra los datos bancarios (antes escondidos tras un desplegable
   dentro del formulario) para que el paso 2 se pueda completar sin ir a
   buscarlos a otro lado. */
.license-steps {
  --step-marker: 48px;
  background: var(--color-bg);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 24px 48px rgba(30, 27, 46, 0.08);
}
.license-steps__title {
  font-size: clamp(1.35rem, 1.2vw + 0.9rem, 1.85rem);
  margin: 0 0 2rem;
}
.license-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}
.license-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
}
/* Linea que une los marcadores: arranca debajo del circulo y llega al del
   paso siguiente (de ahi el bottom negativo, igual al gap de la lista). */
.license-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(var(--step-marker) / 2 - 1px);
  top: calc(var(--step-marker) + 8px);
  bottom: -1.75rem;
  width: 2px;
  background: var(--color-primary-light);
}
.license-step__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--step-marker);
  height: var(--step-marker);
  border-radius: 14px;
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.license-step__marker svg { width: 24px; height: 24px; }
.license-step__body { min-width: 0; }
.license-step__eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-mid);
}
.license-step__heading { margin: 0 0 0.35rem; font-size: 1.05rem; }
.license-step__text { margin: 0; font-size: 0.95rem; color: var(--color-text-muted); }
.license-step__bank {
  margin-top: 1.1rem;
  background: var(--color-primary-light);
  border-radius: 12px;
  padding: 1.25rem;
}
.license-step__bank p { margin: 0 0 0.4rem; font-size: 0.9rem; }
.license-step__bank p:last-child { margin-bottom: 0; }

.license-steps__notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary-mid);
  border-radius: 12px;
  background: var(--color-bg-alt);
}
.license-steps__notice-icon {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--color-primary-mid);
}
.license-steps__notice-title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.license-steps__notice-body p { margin: 0 0 0.5rem; font-size: 0.92rem; color: var(--color-text-muted); }
.license-steps__notice-body p:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .license-steps { --step-marker: 42px; padding: 1.5rem 1rem; }
  .license-step { gap: 0.85rem; }
  .license-step__marker { border-radius: 12px; }
  .license-step__marker svg { width: 21px; height: 21px; }
  /* En pantallas angostas el panel bancario se sale de la sangria del paso y
     ocupa todo el ancho de la tarjeta: son ~56px mas, los que hacen que un
     CBU entre en una sola linea en vez de partirse al medio. El z-index lo
     pone por encima de la linea que une los marcadores. */
  .license-step__bank {
    position: relative;
    z-index: 1;
    margin-left: calc(-1 * (var(--step-marker) + 0.85rem));
    padding: 0.75rem;
  }
  .bank-account { padding: 0.75rem; }
  /* 0.85rem en vez de 0.9rem: son los ~10px que le faltaban al CBU (22
     digitos, el dato mas ancho de todos) para entrar en una linea a 320px. */
  .license-step__bank p { font-size: 0.85rem; }
  /* CBU/alias/numero de cuenta a linea completa, debajo de su etiqueta: asi
     entran enteros y no hay que cortarlos. Se excluyen la nota y la
     cotizacion, donde el <strong> es enfasis dentro de una oracion. */
  .bank-account p:not(.bank-account__note):not(.bank-account__rate) strong { display: block; }
  .license-steps__notice { padding: 1.1rem; gap: 0.8rem; }
}

.license-form {
  background: var(--color-bg);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 24px 48px rgba(30, 27, 46, 0.08);
}
.license-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field--full { margin-bottom: 1.5rem; }
.form-field label { font-weight: 600; font-size: 0.9rem; }
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Cada control del formulario lleva un icono acorde al dato que pide. El
   wrapper posiciona el SVG y el padding extra del control le deja el hueco. */
.form-field__control { position: relative; }
.form-field__control > input,
.form-field__control > select,
.form-field__control > textarea {
  display: block;
  width: 100%;
  padding-left: 2.9rem;
}
.form-field__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: color 200ms ease;
}
/* El textarea crece en alto: su icono se ancla arriba en vez de centrarse. */
.form-field__icon--top { top: 0.9rem; translate: none; }
.form-field__control:focus-within .form-field__icon { color: var(--color-primary); }

.bank-details__holder { color: var(--color-text-muted); }
.bank-details__accounts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.bank-account {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  /* Un CBU son 22 digitos sin separadores: como "palabra" mide mas que la
     columna en pantallas angostas y, con el min-width: auto que traen los
     items de grid, estiraba la tarjeta fuera del panel violeta. min-width: 0
     la deja encogerse y overflow-wrap parte el numero como ultimo recurso. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.bank-account__title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bank-account__note {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.bank-account__note a { color: var(--color-primary); text-decoration: underline; }
.bank-account__rate {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
@media (min-width: 768px) {
  .bank-details__accounts { grid-template-columns: 1fr 1fr; }
}

.file-field { position: relative; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* El input real queda invisible pero ocupando toda la fila (opacity, no
   clip/1px) para que el globo de validacion nativo de "campo obligatorio"
   pueda anclarse al campo; pointer-events: none deja los clicks al boton. */
.file-field__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.file-field__icon { width: 18px; height: 18px; }
.file-field__name { font-size: 0.9rem; color: var(--color-text-muted); }

.license-form__privacy { font-size: 0.85rem; color: var(--color-text-muted); max-width: 60ch; margin-bottom: 1.5rem; }
.form-field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}
.form-field--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.form-field--checkbox label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
}
.form-field--checkbox label a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-field--checkbox label a:hover,
.form-field--checkbox label a:focus-visible { color: var(--color-primary-dark); }
.license-form__submit { width: 100%; }

@media (min-width: 768px) {
  .license-form__grid { grid-template-columns: repeat(2, 1fr); }
  .license-form__submit { width: auto; min-width: 260px; }
}

.site-footer { background: var(--color-primary-dark); color: rgba(255, 255, 255, 0.85); padding: 72px 0 0; }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__brand img { height: 28px; width: auto; margin-bottom: 1rem; }
.site-footer__brand p { max-width: 32ch; margin-bottom: 1.25rem; color: rgba(255, 255, 255, 0.7); }
.site-footer__social { display: flex; gap: 1rem; }
.site-footer__social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background-color 200ms ease;
}
.site-footer__social a svg { width: 20px; height: 20px; }
.site-footer__social a:first-child:hover,
.site-footer__social a:first-child:focus-visible { background: var(--color-dent3d-teal); }
.site-footer__social a:last-child:hover,
.site-footer__social a:last-child:focus-visible { background: var(--color-dent3d-magenta); }
.site-footer__col h4 { color: #fff; font-size: 0.95rem; margin-bottom: 1rem; }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__col a { text-decoration: none; transition: color 200ms ease; }
.site-footer__col a:hover, .site-footer__col a:focus-visible { color: #fff; }
.site-footer__col li { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; }
.site-footer__bottom { padding: 24px 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); text-align: center; }

@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #128C4A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(18, 140, 74, 0.35);
  z-index: 40;
  opacity: 0;
  transform: scale(0.9);
  animation: whatsapp-float-in 400ms var(--ease-out) 600ms forwards;
  transition: transform 200ms ease, background-color 200ms ease;
}
.whatsapp-float svg { width: 28px; height: 28px; }
@keyframes whatsapp-float-in {
  to { opacity: 1; transform: scale(1); }
}
@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover { transform: scale(1.08); background: #0E6B3A; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none; opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   Página de Términos y Condiciones (terminos.html) - reusa por completo la
   paleta/tipografía/botones de arriba; estas son las únicas reglas propias
   de esa página (título, cuerpo de lectura, secciones numeradas).
   ========================================================================== */
.legal-header {
  padding: 140px 0 40px;
  background: var(--color-bg-alt);
}
.legal-header h1 {
  font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
  margin-bottom: 0.5rem;
}
.legal-header__updated {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
}
.legal-content { padding: 64px 0 96px; }
/* 70ch keeps lines short enough to read comfortably on wide desktop screens;
   on mobile the viewport is already narrower than 70ch, so this simply has
   no effect there - no separate mobile rule needed. */
.legal-content__inner { max-width: 70ch; margin: 0 auto; }
.legal-intro {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-primary-light);
  padding-left: 1rem;
  margin-bottom: 2.5rem;
}
.legal-section { margin-bottom: 2.5rem; }
.legal-section:last-child { margin-bottom: 0; }
.legal-section h2 {
  font-size: 1.3rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.legal-section p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.legal-section ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
}
.legal-section ul li { margin-bottom: 0.5rem; }
.legal-section p:last-child,
.legal-section ul:last-child { margin-bottom: 0; }
.legal-outro {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-primary-light);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 2.5rem 0 0;
}
.legal-back { margin-top: 1rem; }