.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:1.2rem;
  min-height:52px;
  padding:.8rem 1.5rem;
  border:1px solid transparent;
  border-radius:999px;
  text-decoration:none;
  font-size:.9375rem;
  font-weight:500;
  transition:background-color var(--duration-normal),transform var(--duration-fast) var(--ease-out),border-color var(--duration-normal)
}
.button--primary {
  background:var(--color-brand);
  color:#fff
}
.button--secondary {
  border-color:var(--color-border-strong)
}
.button--ghost {
  border-color:transparent
}
.button--small {
  min-height:44px;
  padding:.6rem 1.1rem;
  font-size:.8125rem
}
.button--large {
  min-height:60px;
  padding:1rem 2rem
}
.button:active {
  transform:scale(.97)
}
.link-arrow {
  display:inline-flex;
  gap:1rem;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  border-bottom:1px solid var(--color-border-strong)
}
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--color-bg);
  border-bottom:1px solid transparent
}
.site-header.is-scrolled {
  border-color:var(--color-border)
}
.site-header__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:90px
}
.site-header__brand {
  flex-shrink:0
}
.site-header__logo {
  width:auto;
  height:42px
}
.site-nav__list,.site-header__actions,.lang-switch {
  display:flex;
  align-items:center;
  gap:1.5rem
}
.site-nav__link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  font-size:.875rem;
  color:var(--color-text-muted)
}
.site-header__actions {
  gap:1.2rem
}
.lang-switch {
  gap:.25rem;
  list-style:none;
  padding:0
}
.lang-switch__link {
  display:inline-flex;
  min-width:44px;
  min-height:44px;
  justify-content:center;
  align-items:center;
  font-size:.75rem;
  text-decoration:none;
  color:var(--color-text-muted)
}
.lang-switch__link[aria-current] {
  color:var(--color-text);
  text-decoration:underline;
  text-decoration-color:var(--color-brand-light)
}
.menu-toggle {
  display:none;
  border:1px solid var(--color-border);
  background:none;
  border-radius:50%;
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center
}
.menu-toggle__close {
  display:none
}
.menu-toggle[aria-expanded=true] .menu-toggle__open {
  display:none
}
.menu-toggle[aria-expanded=true] .menu-toggle__close {
  display:flex
}
.mobile-nav {
  border-top:1px solid var(--color-border);
  max-height:calc(100dvh - 90px);
  overflow:auto;
  background:var(--color-bg)
}
.mobile-nav__inner {
  padding-block:2rem
}
.mobile-nav__link {
  font-family:var(--font-display);
  display:block;
  font-size:clamp(1.75rem,6vw,3rem);
  padding:.65rem 0;
  text-decoration:none
}
.mobile-nav__cta {
  margin-block:2rem
}
.lang-switch--large {
  justify-content:flex-start
}
.lang-switch--large a {
  padding-inline:.75rem
}
.browser-frame {
  overflow:hidden;
  border:1px solid #635b53;
  border-radius:10px;
  background:#211c19;
  box-shadow:var(--shadow-screen)
}
.browser-frame__bar {
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid #413b36;
  position:relative
}
.browser-frame__bar::before {
  content:'';
  position:absolute;
  left:12px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#bcb5ac;
  box-shadow:9px 0 #70665e,18px 0 #70665e
}
.browser-frame__address {
  font-size:10px;
  color:#bcb5ac
}
.browser-frame__media,.device-frame__media {
  display:block
}
.browser-frame__media img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top
}
.device-frame {
  overflow:hidden;
  background:var(--color-bg-elevated);
  border:5px solid #292421;
  border-radius:24px;
  box-shadow:0 18px 35px #0008
}
.device-frame img {
  width:100%;
  aspect-ratio:390/760;
  object-fit:cover;
  object-position:top
}
.site-footer {
  padding-top:5rem;
  border-top:1px solid var(--color-border)
}
.site-footer__grid {
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr;
  gap:3rem;
  padding-bottom:5rem
}
.site-footer__logo {
  width:auto;
  height:72px
}
.site-footer__tagline {
  color:var(--color-text-muted);
  font-size:.875rem;
  margin-top:1.5rem;
  max-width:25ch
}
.site-footer__contact {
  display:grid;
  gap:.35rem;
  margin-top:1.5rem;
  font-size:.75rem;
  line-height:1.5;
  color:var(--color-text-muted)
}
.site-footer__contact a {
  /* 24px tap height (WCAG 2.5.8) without changing the visual rhythm. */
  display:inline-flex;
  align-items:center;
  width:fit-content;
  min-height:24px;
  color:var(--color-text);
  text-decoration:none
}
.site-footer__contact p { margin:0; max-width:34ch }
.site-footer__heading {
  font-family:var(--font-sans);
  font-size:.875rem;
  letter-spacing:0;
  margin-bottom:1.5rem
}
.site-footer__col a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:.8125rem;
  color:var(--color-text-muted);
  text-decoration:none
}
.site-footer__base {
  display:flex;
  justify-content:space-between;
  gap:2rem;
  align-items:center;
  padding-block:1.5rem;
  border-top:1px solid var(--color-border);
  font-size:.75rem;
  color:var(--color-text-muted)
}
.whatsapp-float {
  position:fixed;
  right:clamp(1rem,2vw,1.5rem);
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  width:3.75rem;
  height:3.75rem;
  color:#fff;
  background:#25d366;
  border:1px solid #8af5ad;
  border-radius:999px;
  box-shadow:0 0 0 .28rem #25d36626,0 1rem 2.5rem #0008,0 0 1.35rem #25d36666;
  text-decoration:none;
  transition:transform 180ms ease,box-shadow 180ms ease,background-color 180ms ease;
}
.whatsapp-float::after {
  content:'';
  position:absolute;
  inset:-.28rem;
  border:1px solid #25d366;
  border-radius:inherit;
  pointer-events:none;
  animation:whatsapp-pulse 2.8s ease-out infinite
}
.whatsapp-float:hover {
  color:#fff;
  background:#20c960;
  box-shadow:0 0 0 .28rem #25d36633,0 1.2rem 2.8rem #0009,0 0 1.6rem #25d36699;
  transform:translateY(-3px)
}
.whatsapp-float:focus-visible {
  outline:2px solid var(--color-brand-light);
  outline-offset:4px
}
.whatsapp-float__icon {
  display:grid;
  width:2.1rem;
  height:2.1rem;
  place-items:center;
  color:#fff
}
.whatsapp-float__mark {
  display:block;
  width:100%;
  height:100%
}
@keyframes whatsapp-pulse {
  0%,35% { opacity:0; transform:scale(.92) }
  55% { opacity:.55 }
  100% { opacity:0; transform:scale(1.35) }
}
@media(hover:hover) {
  .button--primary:hover {
  background:#7b42dd
}
.button--secondary:hover {
  background:var(--color-surface)
}
.site-nav__link:hover,.site-footer__col a:hover {
  color:var(--color-text)
}
.link-arrow:hover .icon {
  transform:translate(2px,-2px)
}

}
@media(max-width:1150px) {
  .site-nav,.site-header__actions>.lang-switch {
  display:none
}
.menu-toggle {
  display:flex
}

}
@media(max-width:767px) {
  .site-header__inner {
  min-height:76px;
  gap:1rem
}
.site-header__cta {
  display:none
}
.site-footer__grid {
  grid-template-columns:1fr 1fr;
  gap:2.5rem
}
.site-footer__brand {
  grid-column:1/-1
}
.site-footer__base {
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem
}
.whatsapp-float {
  right:.85rem;
  bottom:calc(.85rem + env(safe-area-inset-bottom));
  width:3.5rem;
  height:3.5rem
}

}

/* ── Mobile alignment polish (2026-10-03) ─────────────────────────────── */
@media (max-width: 767px) {
  /* El botón flotante ya no tapa texto ni enlaces del footer. */
  .whatsapp-float { width: 3rem; height: 3rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); }
  .whatsapp-float::after { animation: none; }
  .site-footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  /* Footer: dos columnas con el mismo eje y ritmo vertical uniforme. */
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.25rem; align-items: start; }
  .site-footer__brand { display: grid; justify-items: start; gap: .9rem; }
  .site-footer__logo { width: clamp(132px, 34vw, 168px); height: auto; }
  .site-footer__tagline, .site-footer__contact { max-width: 34ch; }
  .site-footer__contact { display: grid; gap: .3rem; }
  .site-footer__col ul { display: grid; gap: .1rem; }
  .site-footer__col a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__heading { margin-bottom: .35rem; }
  .site-footer__base { gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::after { animation: none; }
}