/* =========================================================
   Eficaz AI Studio — design tokens
   Theme: locked dark. One accent (mint signal green) used
   identically everywhere. Radius rule: buttons = pill,
   cards/panels = 20px, inputs = 12px, chips/badges = pill.
   ========================================================= */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-variable.woff2") format("woff2");
}

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

:root {
  --bg: #090c0c;
  --bg-soft: #0d1211;
  --surface: #131917;
  --surface-2: #171e1c;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #eef3f1;
  --text-muted: #9fb0ac;
  --text-faint: #71827e;

  --accent: #34e6ab;
  --accent-dim: #22a87e;
  --accent-ink: #052018;
  --accent-soft-bg: rgba(52, 230, 171, 0.1);

  --danger: #ff6b6b;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;

  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 24px 60px -20px rgba(0, 10, 8, 0.65);
  --shadow-pop: 0 30px 80px -24px rgba(4, 30, 22, 0.7);

  --header-h: 76px;
  --max: 1240px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h2 {
  font-size: clamp(28px, 4vw, 42px);
}

h3 {
  font-size: 20px;
}

p {
  color: var(--text-muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 3000;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 12px;
}

section {
  padding: 100px 6vw;
  max-width: var(--max);
  margin: 0 auto;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

#chat-demo,
#contenido {
  scroll-margin-top: calc(var(--header-h) + 40px);
}

#contacto {
  padding: 100px 6vw;
  max-width: var(--max);
  margin: 0 auto;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
}

.section-head p {
  margin-top: 12px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 13px 26px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 85%, white 15%);
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 50%, transparent);
}

.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-lg {
  padding: 15px 30px;
  font-size: 16px;
}

.btn-sm {
  padding: 9px 18px;
  font-size: 13.5px;
}

.btn-spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(5, 32, 24, 0.35);
  border-top-color: var(--accent-ink);
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(9, 12, 12, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  color: var(--text);
  display: flex;
}

.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.brand-word em {
  font-style: normal;
  color: var(--accent);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-sub {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
  opacity: 0.75;
}

.footer-brand-sub {
  display: block;
  margin: -2px 0 10px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.main-nav a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.main-nav a:hover {
  color: var(--text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- language switch (ES | EN) ----------
   New class names, so this is safe to keep unscoped: it never collides
   with anything else and needs to inherit each page's own --accent so
   it matches that project's theme automatically. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.lang-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.lang-btn:hover {
  color: var(--text);
}

.lang-btn.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

.lang-sep {
  color: var(--border-strong);
  font-size: 11px;
}

.mobile-nav .lang-switch {
  align-self: flex-start;
  margin: 4px 4px 14px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.nav-toggle span {
  width: 17px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 6vw 22px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.mobile-nav a {
  padding: 12px 4px;
  text-decoration: none;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.mobile-nav .btn {
  margin-top: 14px;
  width: 100%;
}

/* ---------- hero ---------- */
.hero {
  padding-top: 64px;
  padding-bottom: 90px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.pill {
  display: inline-block;
  background: var(--accent-soft-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.12;
  max-width: 21ch;
  margin-bottom: 22px;
}

.hero-lede {
  max-width: 46ch;
  font-size: 17.5px;
  line-height: 1.55;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  min-height: 420px;
}

.orbit-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
  filter: blur(0.3px);
}

.orbit-dot.d1 { top: 8%; left: 12%; animation: float 7s ease-in-out infinite; }
.orbit-dot.d2 { top: 68%; left: 4%; animation: float 9s ease-in-out infinite 1s; }
.orbit-dot.d3 { top: 20%; right: 6%; animation: float 8s ease-in-out infinite 0.4s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.mock-card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px;
}

.mock-chat {
  top: 0;
  left: 4%;
  width: min(340px, 78%);
}

.mock-calendar {
  bottom: 0;
  right: 2%;
  width: min(230px, 62%);
}

.mock-chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}

.mock-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft-bg);
  flex-shrink: 0;
}

.mock-bubble {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.bubble-in {
  background: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.bubble-out {
  background: var(--accent);
  color: var(--accent-ink);
  margin-left: auto;
  border-bottom-right-radius: 4px;
  font-weight: 600;
}

.mock-typing {
  display: flex;
  gap: 4px;
  padding: 8px 4px 2px;
}

.mock-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: blink 1.2s infinite ease-in-out;
}

.mock-typing span:nth-child(2) { animation-delay: 0.2s; }
.mock-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

.mock-calendar-head {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.mock-calendar-head strong {
  color: var(--text);
}

.mock-calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.mock-calendar-grid span {
  height: 26px;
  border-radius: 7px;
  background: var(--surface-2);
}

.mock-calendar-grid .busy {
  background: rgba(255, 107, 107, 0.28);
}

.mock-calendar-grid .active {
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.mock-calendar-tag {
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}

/* ---------- bento (beneficios) ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 18px;
}

.bento-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.bento-card i {
  font-size: 26px;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
}

.bento-card h3 {
  margin-bottom: 8px;
}

.bento-card p {
  font-size: 14.5px;
}

.bento-feature {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bento-feature i {
  font-size: 34px;
}

.bento-feature h3 {
  font-size: 24px;
}

.bento-accent {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), var(--surface));
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ---------- split sections (agente IA) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.lede {
  font-size: 16.5px;
  margin: 10px 0 26px;
  max-width: 46ch;
}

.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text);
}

.check-list i {
  color: var(--accent);
  font-size: 18px;
  margin-top: 1px;
  flex-shrink: 0;
}

.chat-window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 460px;
}

.chat-window-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.chat-window-head strong {
  display: block;
  font-size: 14px;
}

.chat-window-head small {
  color: var(--accent);
  font-size: 12px;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
}

.chat-msg.in {
  background: var(--surface-2);
  border-bottom-left-radius: 4px;
}

.chat-msg.out {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.chat-msg-typing {
  display: flex;
  gap: 4px;
  padding: 14px 16px;
}

.chat-msg-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-ink);
  opacity: 0.6;
  animation: blink 1.2s infinite ease-in-out;
}

.chat-msg-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-msg-typing span:nth-child(3) { animation-delay: 0.4s; }

.chat-input {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--border);
}

.chat-input input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}

.chat-input input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.chat-input button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.chat-input button:active {
  transform: scale(0.94);
}

/* ---------- citas ---------- */
.citas-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}

.citas-actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.citas-action {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.citas-action:last-child {
  border-bottom: none;
}

.citas-action i {
  font-size: 22px;
  color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.citas-action h3 {
  font-size: 16.5px;
  margin-bottom: 4px;
}

.citas-action p {
  font-size: 14px;
}

.cita-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  position: relative;
  box-shadow: var(--shadow-card);
}

.cita-card-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.cita-card-row:last-of-type {
  border-bottom: none;
}

.cita-card-row span {
  color: var(--text-faint);
}

.cita-card-row strong {
  color: var(--text);
  text-align: right;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  margin-top: 16px;
}

.status-pendiente { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.status-confirmada { background: var(--accent-soft-bg); color: var(--accent); }
.status-completada { background: rgba(120, 170, 255, 0.15); color: #78aaff; }
.status-cancelada { background: rgba(255, 107, 107, 0.15); color: var(--danger); }

.cita-states {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.cita-states .status-badge {
  margin-top: 0;
}

/* ---------- steps ---------- */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
}

.steps li {
  position: relative;
  padding-top: 8px;
}

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 14px;
}

.steps h3 {
  margin-bottom: 6px;
  font-size: 17.5px;
}

.steps p {
  font-size: 14px;
}

/* ---------- pricing ---------- */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: end;
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.price-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.price-card li {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text);
}

.price-card i {
  color: var(--accent);
  margin-top: 2px;
}

.price {
  font-size: 15px;
  color: var(--text-muted);
}

.price strong {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--text);
  display: block;
}

.price small {
  font-size: 13px;
}

.price-featured {
  border-color: var(--accent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--surface) 60%);
  transform: scale(1.04);
  box-shadow: var(--shadow-pop);
}

.price-tag {
  align-self: flex-start;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}

.pricing-note {
  text-align: center;
  font-size: 13.5px;
  margin-top: 30px;
}

/* ---------- pricing: Eficaz AI Studio "Planes y precios" polish ----------
   Scoped under #planes (unique to this section on the main site) so the
   Bella Studio demo pricing and checkout.html plan summary — which reuse
   the same .price-card / .price-featured / .price-tag class names — are
   completely unaffected. */
#planes .pricing {
  align-items: stretch;
}

#planes .price-card {
  padding: 38px 30px 32px;
  gap: 16px;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

#planes .price-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

#planes .price-card h3 {
  font-size: 21px;
}

/* Price block: an explicit flex column with its own gap replaces the old
   inherited-line-height stacking, so the lead-in word ("Desde") and the
   big number never sit close enough to read as overlapping, regardless
   of font metrics or zoom level. */
#planes .price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

#planes .price-lead {
  color: var(--text-faint);
}

#planes .price strong {
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

#planes .price small {
  color: var(--text-muted);
}

/* "Mantenimiento y soporte — $X/mes" — stays on one line whenever the card
   has room for it (true at every 3-column desktop width down to the
   2-column breakpoint below), instead of wrapping a couple of words early.
   Reset to normal wrapping in the narrower layouts below, so it still
   wraps gracefully instead of overflowing if a card is ever narrower than
   the phrase itself. */
#planes .price .price-mant {
  white-space: nowrap;
}

/* "Pago único de implementación" — a quieter caption than the recurring
   maintenance line next to it, so the two read as distinct facts rather
   than two lines of the same weight. */
#planes .price .price-note {
  color: var(--text-faint);
  font-size: 12.5px;
}

#planes .price-for {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  padding-bottom: 16px;
  margin-bottom: -2px;
  border-bottom: 1px solid var(--border);
}

#planes .price-card li {
  align-items: flex-start;
  line-height: 1.45;
}

#planes .price-card .btn {
  margin-top: 4px;
  transition: transform 0.45s var(--ease), background 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}

#planes .price-card .btn:hover {
  transform: translateY(-2px);
}

/* Featured card: a soft gradient ring and colour-matched glow read as
   more premium than a flat scale-up, and no longer risk overlapping the
   neighbouring cards at narrower desktop widths. */
#planes .price-featured {
  position: relative;
  transform: none;
  border: 1px solid transparent;
  background:
    linear-gradient(170deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--surface) 55%) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 75%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) 55%) border-box;
  box-shadow: 0 30px 80px -32px rgba(52, 230, 171, 0.4), var(--shadow-pop);
}

#planes .price-featured::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14%;
  right: 14%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.85;
}

#planes .price-featured:hover {
  transform: translateY(-6px);
}

#planes .price-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, white 35%));
  box-shadow: 0 10px 24px -10px rgba(52, 230, 171, 0.65);
}

#planes .price-tag i {
  font-size: 12px;
}

@media (max-width: 1024px) {
  #planes .price-featured {
    transform: none;
  }

  /* Below the 3-column layout, card width isn't guaranteed to fit the
     phrase on one line anymore — let it wrap normally rather than risk
     overflowing a narrower 2-column or single-column card. */
  #planes .price .price-mant {
    white-space: normal;
  }
}

/* ---------- servicios ---------- */
.service-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-group h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--accent);
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- portfolio ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.portfolio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease);
}

.portfolio-card:hover {
  transform: translateY(-6px);
}

.portfolio-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.portfolio-body {
  padding: 22px;
}

.portfolio-body p {
  font-size: 13.5px;
  margin: 6px 0 14px;
}

.tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tag-row span {
  font-size: 11.5px;
  color: var(--accent);
  background: var(--accent-soft-bg);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.portfolio-body a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

/* ---------- marquee (por qué elegirnos) ---------- */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
}

.marquee-track i {
  color: var(--accent);
}

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

/* ---------- testimonios ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.testimonial-card p {
  color: var(--text);
  font-size: 15px;
  margin-bottom: 16px;
}

.testimonial-card footer {
  font-size: 13px;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}

.testimonial-badge {
  background: var(--accent-soft-bg);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

/* ---------- faq ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 780px;
  margin: 0 auto;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 20px;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary i {
  color: var(--accent);
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
  margin-left: 14px;
}

.faq-item[open] summary i {
  transform: rotate(45deg);
}

.faq-item p {
  padding-bottom: 18px;
  font-size: 14px;
}

/* ---------- quote form ---------- */
.quote-form {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.field input,
.field select,
.field textarea {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

.field-error {
  font-size: 12.5px;
  color: var(--danger);
  min-height: 15px;
}

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

.quote-form .btn {
  align-self: flex-start;
}

.form-status {
  font-size: 14px;
  min-height: 20px;
}

.form-status.success {
  color: var(--accent);
}

.form-status.error {
  color: var(--danger);
}

/* ---------- "plan seleccionado" banner inside the quote form ----------
   Scoped under #cotizacion (unique to the main site) since .quote-form
   is reused, unstyled here, by several demo project contact forms. */
#cotizacion .quote-plan-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-size: 14px;
  color: var(--text);
}

#cotizacion .quote-plan-selected[hidden] {
  display: none;
}

#cotizacion .quote-plan-selected i {
  color: var(--accent);
  font-size: 18px;
  flex-shrink: 0;
}

#cotizacion .quote-plan-selected span {
  flex: 1;
}

#cotizacion .quote-plan-selected strong {
  color: var(--accent);
}

#cotizacion .quote-plan-clear {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

#cotizacion .quote-plan-clear:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- contacto ---------- */
.contact-panel {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 50px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}

.contact-copy h2 {
  margin-bottom: 12px;
}

.contact-list {
  list-style: none;
  margin: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text);
}

.contact-list i {
  color: var(--accent);
}

.social-row {
  display: flex;
  gap: 12px;
}

.social-row a,
.social-row .social-disabled {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.social-row a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.social-row .social-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.contact-cta {
  text-align: center;
  border-left: 1px solid var(--border);
  padding-left: 40px;
}

.contact-cta p {
  margin-bottom: 16px;
}

.contact-cta .btn-whatsapp {
  margin-top: 12px;
}

.contact-cta .btn-whatsapp .ph-whatsapp-logo {
  font-size: 18px;
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 60px 6vw 30px;
}

.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.footer-brand {
  font-size: 18px;
  margin-bottom: 10px;
}

.footer-grid p {
  font-size: 13.5px;
}

.footer-grid h3 {
  font-size: 14px;
  margin-bottom: 14px;
  color: var(--text);
}

.footer-grid a {
  display: block;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 13.5px;
  margin-bottom: 9px;
}

.footer-grid a:hover {
  color: var(--accent);
}

.footer-bottom {
  max-width: var(--max);
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 96px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  color: var(--accent);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 900;
  box-shadow: var(--shadow-card);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.to-top:hover {
  transform: translateY(-3px);
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 27px;
  text-decoration: none;
  z-index: 950;
  box-shadow: 0 12px 22px -16px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-card);
  opacity: 0;
  animation: whatsapp-intro 0.8s var(--ease) 0.4s both;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 26px -14px color-mix(in srgb, var(--accent) 26%, transparent), var(--shadow-card);
}

.whatsapp-float:active {
  transform: translateY(-1px) scale(0.99);
}

@keyframes whatsapp-intro {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.whatsapp-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.whatsapp-float:hover .whatsapp-tooltip,
.whatsapp-float:focus-visible .whatsapp-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (hover: none) {
  .whatsapp-tooltip {
    display: none;
  }
}

@media (max-width: 560px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    font-size: 24px;
  }

  .to-top {
    right: 16px;
    bottom: 86px;
  }
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .orbit-dot,
  .mock-typing span,
  .marquee-track,
  .whatsapp-float {
    animation: none !important;
  }
  .whatsapp-float {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1024px) {
  .hero-grid,
  .split,
  .citas-layout {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    max-width: 420px;
    margin: 0 auto;
  }

  .orbit-field {
    display: none;
  }

  .mock-card {
    position: static;
    width: 100% !important;
  }

  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-feature {
    grid-column: span 2;
    grid-row: span 1;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing,
  .service-groups,
  .portfolio-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .price-featured {
    transform: none;
  }

  .contact-panel {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 40px;
  }

  .contact-cta {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 30px;
  }

  .social-row {
    justify-content: center;
  }
}

@media (max-width: 1180px) {
  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .header-inner {
    padding: 0 5vw;
  }
}

@media (max-width: 560px) {
  .header-actions .btn {
    display: none;
  }
}

@media (max-width: 720px) {
  section,
  #contacto {
    padding: 70px 6vw;
  }

  .bento,
  .steps,
  .pricing,
  .service-groups,
  .portfolio-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .bento-feature {
    grid-column: span 1;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .quote-form {
    padding: 26px;
  }

  .citas-action {
    align-items: flex-start;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero h1 {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .hero-visual {
    display: none;
  }

  .mock-calendar-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .quote-form {
    padding: 20px;
  }
}

/* =========================================================
   Premium demo components (additive — used by individual
   project demos only, scoped there via per-page theme
   variables on main#contenido). Nothing here changes the
   look of the main Eficaz AI Studio site.
   ========================================================= */

.img-zoom {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.img-zoom img {
  transition: transform 0.7s var(--ease);
}

.img-zoom:hover img {
  transform: scale(1.06);
}

/* ---------- before / after comparison ---------- */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.compare-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.compare-item img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}

.compare-item:hover img {
  transform: scale(1.05);
}

.compare-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

/* ---------- animated stats ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.stat-item {
  padding: 14px 8px;
}

.stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 44px);
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ---------- testimonial slider ---------- */
.testimonial-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.testimonial-track .testimonial-card {
  flex: 0 0 min(360px, 84vw);
  scroll-snap-align: start;
}

/* ---------- modal (project / gallery detail) ---------- */
.modal-backdrop[hidden] {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 6, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2000;
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 36px;
  position: relative;
  box-shadow: var(--shadow-pop);
}

.modal-box h3 {
  font-size: 26px;
  margin-bottom: 10px;
  padding-right: 30px;
}

.modal-box p {
  font-size: 14.5px;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
}

.modal-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.modal-gallery img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

@media (max-width: 720px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-gallery {
    grid-template-columns: 1fr;
  }

  .modal-box {
    padding: 26px;
  }
}

/* =========================================================
   Proyectos section — premium per-card treatment (scoped to
   #proyectos only, on the main Eficaz AI Studio site). This
   never touches .portfolio-grid/.portfolio-card as used by
   demo-construccion.html or demo-tienda.html, since every
   rule below is qualified by the #proyectos ancestor.
   ========================================================= */

#proyectos .portfolio-grid {
  gap: 30px;
}

#proyectos .portfolio-card {
  --card-heading: #e7e4e1;
  --card-body: #aca6a0;
  background: linear-gradient(165deg, var(--card-bg-2), var(--card-bg-1));
  border: 1px solid var(--card-border);
  border-radius: 22px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

#proyectos .portfolio-card:hover {
  transform: translateY(-8px);
  border-color: var(--card-border-strong);
  box-shadow: 0 26px 60px -24px color-mix(in srgb, var(--card-accent) 45%, transparent);
}

#proyectos .portfolio-card img {
  height: 220px;
  transition: transform 0.6s var(--ease);
}

#proyectos .portfolio-card:hover img {
  transform: scale(1.07);
}

#proyectos .portfolio-body {
  padding: 32px;
}

#proyectos .portfolio-body h3 {
  color: var(--card-heading);
}

#proyectos .portfolio-body p {
  color: var(--card-body);
  margin: 8px 0 16px;
}

#proyectos .portfolio-body p.portfolio-problema {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--card-body) 75%, white 15%);
  opacity: 0.85;
  margin: 0 0 10px;
}

#proyectos .portfolio-body p.portfolio-capacidades {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--card-accent);
  margin: -6px 0 16px;
}

#proyectos .portfolio-body p.portfolio-problema i,
#proyectos .portfolio-body p.portfolio-capacidades i {
  margin-top: 2px;
  flex-shrink: 0;
}

#proyectos .tag-row {
  margin-bottom: 20px;
}

#proyectos .tag-row span {
  color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 16%, transparent);
}

#proyectos .portfolio-body a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: none;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--card-accent);
  color: var(--card-accent-ink);
  border: 1px solid color-mix(in srgb, var(--card-accent) 70%, black 15%);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
}

#proyectos .portfolio-body a::after {
  content: "→";
  transition: transform 0.25s var(--ease);
}

#proyectos .portfolio-body a:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--card-accent) 55%, transparent);
}

#proyectos .portfolio-body a:hover::after {
  transform: translateX(3px);
}

/* Per-card dark backgrounds stay distinct; the accent (buttons, tags,
   borders, hover glow) is unified back to Eficaz AI Studio's own
   elegant green across every card. */
#proyectos .card-restaurante {
  --card-bg-1: #1c1410;
  --card-bg-2: #2a1f17;
  --card-border: rgba(52, 230, 171, 0.16);
  --card-border-strong: rgba(52, 230, 171, 0.32);
  --card-accent: #34e6ab;
  --card-accent-ink: #052018;
}

#proyectos .card-salon {
  --card-bg-1: #1c1418;
  --card-bg-2: #2a1c22;
  --card-border: rgba(52, 230, 171, 0.16);
  --card-border-strong: rgba(52, 230, 171, 0.32);
  --card-accent: #34e6ab;
  --card-accent-ink: #052018;
}

#proyectos .card-construccion {
  --card-bg-1: #17181a;
  --card-bg-2: #232527;
  --card-border: rgba(52, 230, 171, 0.16);
  --card-border-strong: rgba(52, 230, 171, 0.32);
  --card-accent: #34e6ab;
  --card-accent-ink: #052018;
}

#proyectos .card-limpieza {
  --card-bg-1: #11181f;
  --card-bg-2: #1a2530;
  --card-border: rgba(52, 230, 171, 0.16);
  --card-border-strong: rgba(52, 230, 171, 0.32);
  --card-accent: #34e6ab;
  --card-accent-ink: #052018;
}

#proyectos .card-tienda {
  --card-bg-1: #101a17;
  --card-bg-2: #182721;
  --card-border: rgba(52, 230, 171, 0.16);
  --card-border-strong: rgba(52, 230, 171, 0.32);
  --card-accent: #34e6ab;
  --card-accent-ink: #052018;
}

#proyectos .card-consultorio {
  --card-bg-1: #131c26;
  --card-bg-2: #1c2a37;
  --card-border: rgba(52, 230, 171, 0.16);
  --card-border-strong: rgba(52, 230, 171, 0.32);
  --card-accent: #34e6ab;
  --card-accent-ink: #052018;
}

@media (max-width: 720px) {
  #proyectos .portfolio-grid {
    gap: 22px;
  }

  #proyectos .portfolio-body {
    padding: 26px;
  }
}

/* =========================================================
   Home premium polish — everything below is scoped under
   body.page-home (set only on public/index.html). It only
   ever adds to or overrides rules for that one page and
   never lowers specificity below the shared base rules, so
   no demo project or other page is affected. Pure visual
   refinement: no markup, copy, or functionality changes.
   ========================================================= */

/* ---------- ambient background: black + very subtle green light ---------- */
.page-home {
  position: relative;
  background:
    radial-gradient(1100px 620px at 14% -8%, rgba(52, 230, 171, 0.09), transparent 60%),
    radial-gradient(900px 560px at 104% 12%, rgba(52, 230, 171, 0.06), transparent 58%),
    radial-gradient(1000px 700px at 50% 62%, rgba(52, 230, 171, 0.035), transparent 62%),
    var(--bg);
}

.page-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(720px 420px at 82% 6%, rgba(52, 230, 171, 0.05), transparent 65%);
  animation: homeGlowDrift 16s ease-in-out infinite;
}

@keyframes homeGlowDrift {
  0%, 100% { opacity: 0.7; transform: translate3d(0, 0, 0); }
  50% { opacity: 1; transform: translate3d(-1.5%, 1.5%, 0); }
}

.page-home .site-header,
.page-home main,
.page-home .site-footer {
  position: relative;
  z-index: 1;
}

/* ---------- header + nav: quiet, precise microinteractions ---------- */
.page-home .site-header {
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.page-home .brand-mark svg {
  transition: filter 0.5s var(--ease), transform 0.5s var(--ease);
}

.page-home .brand:hover .brand-mark svg {
  filter: drop-shadow(0 0 10px rgba(52, 230, 171, 0.55));
  transform: translateY(-1px);
}

.page-home .main-nav a {
  position: relative;
  transition: color 0.35s var(--ease);
}

.page-home .main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transition: right 0.4s var(--ease);
}

.page-home .main-nav a:hover::after {
  right: 0;
}

.page-home .nav-toggle {
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.page-home .nav-toggle:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ---------- buttons: soft shine sweep + weightier hover ---------- */
.page-home .btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease), background 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}

.page-home .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}

.page-home .btn-primary:hover::after {
  transform: translateX(120%);
}

.page-home .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}

.page-home .btn-outline {
  transition: transform 0.45s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease);
}

.page-home .btn-outline:hover {
  transform: translateY(-2px);
  background: rgba(52, 230, 171, 0.06);
}

/* ---------- slower, softer entrance for the home page only ---------- */
.page-home .reveal {
  transition-duration: 0.95s, 0.95s;
}

.page-home .hero-visual.reveal {
  transition-delay: 0.12s;
}

.page-home .bento-card.reveal:nth-child(2) { transition-delay: 0.06s; }
.page-home .bento-card.reveal:nth-child(3) { transition-delay: 0.12s; }
.page-home .bento-card.reveal:nth-child(4) { transition-delay: 0.18s; }
.page-home .bento-card.reveal:nth-child(5) { transition-delay: 0.24s; }
.page-home .bento-card.reveal:nth-child(6) { transition-delay: 0.3s; }

/* ---------- hero: premium spacing, hierarchy, alignment ---------- */
.page-home .hero {
  padding-top: 88px;
  padding-bottom: 128px;
  position: relative;
}

.page-home .hero-grid {
  gap: 72px;
}

.page-home .pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: linear-gradient(180deg, rgba(52, 230, 171, 0.12), rgba(52, 230, 171, 0.05));
}

.page-home .pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(52, 230, 171, 0.18);
  animation: homePulseDot 2.4s ease-in-out infinite;
}

@keyframes homePulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52, 230, 171, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(52, 230, 171, 0.08); }
}

.page-home .hero h1 {
  text-wrap: balance;
  letter-spacing: -0.025em;
}

.page-home .hero-lede {
  color: color-mix(in srgb, var(--text-muted) 78%, white 22%);
  font-size: 18px;
}

.page-home .hero-actions {
  margin-top: 6px;
}

.page-home .hero-visual {
  min-height: 460px;
}

.page-home .hero-visual::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: radial-gradient(420px 420px at 55% 45%, rgba(52, 230, 171, 0.16), transparent 68%);
  filter: blur(6px);
  animation: homeGlowDrift 12s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- hero mock cards: read like a real product UI ---------- */
.page-home .mock-card {
  background: linear-gradient(175deg, rgba(24, 32, 30, 0.92), rgba(17, 23, 21, 0.88));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  animation: homeCardFloat 7.5s ease-in-out infinite;
}

.page-home .mock-chat {
  animation-delay: 0s;
}

.page-home .mock-calendar {
  animation-delay: 1.4s;
}

@keyframes homeCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.page-home .mock-status {
  animation: homeStatusPulse 2.2s ease-in-out infinite;
}

@keyframes homeStatusPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft-bg); }
  50% { box-shadow: 0 0 0 6px rgba(52, 230, 171, 0.14); }
}

.page-home .mock-bubble {
  opacity: 0;
  animation: homeBubbleIn 0.6s var(--ease) forwards;
}

.page-home .bubble-in { animation-delay: 0.5s; }
.page-home .bubble-out { animation-delay: 1.05s; }
.page-home .mock-typing { opacity: 0; animation: homeBubbleIn 0.6s var(--ease) forwards 1.6s; }

@keyframes homeBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-home .mock-calendar-grid .active {
  box-shadow: 0 0 0 3px rgba(52, 230, 171, 0.16), 0 6px 16px -6px rgba(52, 230, 171, 0.6);
}

.page-home .mock-calendar-grid span {
  transition: background 0.3s var(--ease);
}

/* ---------- bento cards: quiet elevation + cursor-lit border ---------- */
.page-home .bento-card {
  position: relative;
  background: linear-gradient(175deg, var(--surface), var(--surface-2));
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.page-home .bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(180px 180px at var(--mx, 50%) var(--my, 0%), rgba(52, 230, 171, 0.5), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.page-home .bento-card:hover::before {
  opacity: 1;
}

.page-home .bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px -24px rgba(52, 230, 171, 0.35);
}

.page-home .bento-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft-bg);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}

.page-home .bento-card:hover i {
  transform: scale(1.06);
  background: rgba(52, 230, 171, 0.18);
}

/* ---------- agent chat + appointment card: same premium glass treatment ---------- */
.page-home .chat-window,
.page-home .cita-card {
  background: linear-gradient(175deg, rgba(24, 32, 30, 0.94), rgba(17, 23, 21, 0.92));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}

.page-home #agente-ia,
.page-home #citas {
  position: relative;
}

.page-home #agente-ia::before,
.page-home #citas::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  width: 46%;
  background: radial-gradient(480px 480px at 50% 50%, rgba(52, 230, 171, 0.05), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.page-home #agente-ia::before { right: -4%; }
.page-home #citas::before { left: -4%; }

.page-home .chat-window:hover,
.page-home .cita-card:hover {
  box-shadow: 0 34px 90px -26px rgba(4, 30, 22, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.page-home .status-badge {
  transition: transform 0.3s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .page-home .mock-card,
  .page-home .mock-status,
  .page-home .pill::before,
  .page-home::before,
  .page-home .hero-visual::before {
    animation: none !important;
  }

  .page-home .mock-bubble,
  .page-home .mock-typing {
    opacity: 1;
    animation: none !important;
  }
}

@media (max-width: 860px) {
  .page-home .hero {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .page-home .hero-grid {
    gap: 40px;
  }
}

/* =========================================================
   Home premium polish, part 2 — agency-grade pass over
   Resultados, FAQ, "Qué construimos", Cotización, Contacto
   and the footer. Same rule as above: everything here is
   scoped under body.page-home, #resultados, #faq,
   #que-construimos, #cotizacion or #contacto (all unique to
   index.html), so no demo project page is ever touched.
   ========================================================= */

/* ---------- tighter, more deliberate vertical rhythm ---------- */
.page-home section {
  padding: 88px 6vw;
}

.page-home #contacto {
  padding: 88px 6vw;
}

.page-home .section-head {
  margin-bottom: 48px;
}

.page-home .section-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  text-wrap: balance;
}

.page-home .section-head p {
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text-muted) 85%, white 15%);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Resultados (formerly "testimonios") ---------- */
#resultados .results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

#resultados .result-card {
  background: linear-gradient(175deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

#resultados .result-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}

#resultados .result-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft-bg);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

#resultados .result-card h3 {
  font-size: 19px;
  margin-top: 6px;
}

#resultados .result-card p {
  font-size: 14.5px;
  line-height: 1.55;
}

#resultados .result-card.reveal:nth-child(2) { transition-delay: 0.08s; }
#resultados .result-card.reveal:nth-child(3) { transition-delay: 0.16s; }

/* ---------- FAQ: premium accordion, smooth open/close via CSS grid ---------- */
#faq .faq-list {
  gap: 14px;
}

#faq .faq-item {
  border-radius: var(--radius-lg);
  padding: 4px 26px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

#faq .faq-item:hover {
  border-color: var(--border-strong);
}

#faq .faq-item[open] {
  background: linear-gradient(175deg, var(--surface), var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

#faq .faq-item summary {
  padding: 21px 0;
  font-size: 16px;
  gap: 18px;
}

#faq .faq-item summary i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--accent-soft-bg);
  transition: transform 0.45s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}

#faq .faq-item[open] summary i {
  background: var(--accent);
  color: var(--accent-ink);
}

/* No JS: the UA stylesheet hides non-open <details> content outright,
   but any author rule (even low-specificity) outranks that default, so
   giving .faq-panel `display: grid` keeps it laid out at all times and
   lets grid-template-rows animate between collapsed (0fr) and open
   (1fr) — a smooth height transition without measuring pixels in JS. */
#faq .faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}

#faq .faq-item[open] .faq-panel {
  grid-template-rows: 1fr;
}

#faq .faq-panel > p {
  overflow: hidden;
  min-height: 0;
  padding-bottom: 22px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

#faq .faq-item[open] .faq-panel > p {
  opacity: 1;
  transition: opacity 0.5s var(--ease) 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  #faq .faq-panel,
  #faq .faq-panel > p,
  #faq .faq-item summary i {
    transition: none !important;
  }
}

/* ---------- "Qué construimos" (new section, fully index-only) ---------- */
#que-construimos .build-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

#que-construimos .build-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

#que-construimos .build-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 24px 60px -30px rgba(52, 230, 171, 0.35);
}

#que-construimos .build-index {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--border-strong);
  opacity: 0.6;
  line-height: 1;
}

#que-construimos .build-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent-soft-bg);
  color: var(--accent);
  font-size: 22px;
  margin-bottom: 18px;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}

#que-construimos .build-card:hover i {
  transform: scale(1.06);
  background: var(--accent);
  color: var(--accent-ink);
}

#que-construimos .build-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

#que-construimos .build-card p {
  font-size: 14px;
  line-height: 1.55;
}

#que-construimos .build-beneficio {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-top: -6px;
}

#que-construimos .build-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

#que-construimos .build-cta:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Now five cards deep (was four) — text content decides layout, so give
   each card room to breathe as a flex column instead of relying on
   implicit block flow for the new beneficio/cta rows. */
#que-construimos .build-card {
  display: flex;
  flex-direction: column;
}

#que-construimos .build-card.reveal:nth-child(2) { transition-delay: 0.06s; }
#que-construimos .build-card.reveal:nth-child(3) { transition-delay: 0.12s; }
#que-construimos .build-card.reveal:nth-child(4) { transition-delay: 0.18s; }
#que-construimos .build-card.reveal:nth-child(5) { transition-delay: 0.24s; }

@media (max-width: 1400px) {
  #que-construimos .build-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1180px) {
  #que-construimos .build-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  #que-construimos .build-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Confianza (trust/authority strip) ---------- */
#confianza .trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

#confianza .trust-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

#confianza .trust-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

#confianza .trust-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft-bg);
  color: var(--accent);
  font-size: 19px;
}

#confianza .trust-card h3 {
  font-size: 16px;
}

#confianza .trust-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

#confianza .trust-card.reveal:nth-child(2) { transition-delay: 0.05s; }
#confianza .trust-card.reveal:nth-child(3) { transition-delay: 0.1s; }
#confianza .trust-card.reveal:nth-child(4) { transition-delay: 0.15s; }
#confianza .trust-card.reveal:nth-child(5) { transition-delay: 0.2s; }

@media (max-width: 1180px) {
  #confianza .trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  #confianza .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  #confianza .trust-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Cotización: premium form treatment ---------- */
#cotizacion .quote-form {
  padding: 46px 44px;
  gap: 24px;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}

#cotizacion .field label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

#cotizacion .field input,
#cotizacion .field select,
#cotizacion .field textarea {
  padding: 13px 16px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

#cotizacion .field input:focus,
#cotizacion .field select:focus,
#cotizacion .field textarea:focus {
  box-shadow: 0 0 0 4px rgba(52, 230, 171, 0.12);
}

#cotizacion .quote-plan-selected {
  padding: 15px 18px;
}

#cotizacion .quote-form .btn {
  align-self: stretch;
  justify-content: center;
  padding: 16px 30px;
  font-size: 16px;
  margin-top: 6px;
}

/* ---------- Contacto: quieter, more confident placeholder copy ---------- */
#contacto .contact-panel {
  padding: 56px;
  border-color: var(--border-strong);
}

#contacto .contact-list {
  margin: 24px 0;
  gap: 14px;
}

#contacto .contact-list li {
  font-size: 14.5px;
  gap: 12px;
}

#contacto .contact-list i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent-soft-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.contact-list-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  transition: color 0.3s var(--ease);
}

.contact-list-link:hover {
  color: var(--accent);
}

.contact-list-link:hover i {
  background: var(--accent);
  color: var(--accent-ink);
  transform: scale(1.05);
}

/* ---------- Footer: agency-grade layout ---------- */
.page-home .site-footer {
  position: relative;
  padding: 64px 6vw 34px;
  overflow: hidden;
}

.page-home .site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}

.page-home .footer-top {
  max-width: var(--max);
  margin: 0 auto 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.page-home .footer-top-copy {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-home .footer-top-copy .brand-mark {
  color: var(--text);
  display: flex;
  flex-shrink: 0;
}

.page-home .footer-top-copy h3 {
  font-size: 22px;
  color: var(--text);
}

.page-home .footer-grid {
  gap: 50px;
}

.page-home .footer-brand {
  font-size: 19px;
}

.page-home .footer-grid > div > p {
  font-size: 13.5px;
  line-height: 1.6;
  margin-top: 8px;
  max-width: 32ch;
}

.page-home .footer-grid h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 18px;
}

.page-home .footer-grid a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin-bottom: 12px;
  width: fit-content;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.page-home .footer-grid a::before {
  content: "→";
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  color: var(--accent);
}

.page-home .footer-grid a:hover {
  color: var(--text);
  transform: translateX(2px);
}

.page-home .footer-grid a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.page-home .footer-bottom {
  font-size: 12px;
  letter-spacing: 0.02em;
}

.page-home .footer-social-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-home .footer-grid a.footer-social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}

.page-home .footer-grid a.footer-social-link::before {
  content: none;
}

.page-home .footer-grid a.footer-social-link i {
  font-size: 17px;
  color: var(--accent);
  flex-shrink: 0;
}

.page-home .footer-grid a.footer-social-link:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--accent-soft-bg);
  transform: translateY(-3px);
  color: var(--text);
}

.page-home .footer-bottom-bar {
  max-width: var(--max);
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-home .footer-legal-links {
  display: flex;
  gap: 20px;
}

.page-home .footer-legal-links a {
  color: var(--text-faint);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.3s var(--ease);
}

.page-home .footer-legal-links a:hover {
  color: var(--accent);
}

.page-home .footer-copyright {
  margin: 0;
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .page-home .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-home .footer-top .btn {
    width: 100%;
    justify-content: center;
  }

  .page-home .footer-bottom-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}