/* AppMenu — Landing (web de marketing). Tokens del sistema de diseño (_ds/),
   solo Poppins (la marca no usa otra familia). El markup lleva estilos inline
   del handoff; aquí van tokens, reset y los pocos añadidos (hover + responsive).
   ponytail: estilos inline conservados del .dc.html — no re-maquetados a clases.
   Poppins se encola aparte en functions.php (no @import, carga en paralelo). */

:root {
  /* Marca */
  --orange-500: #FF6B35;
  --orange-600: #F14E17;
  --orange-700: #C93E10;
  --orange-50:  #FFF3EC;
  /* Neutros carbón */
  --gray-0:   #FFFFFF;
  --gray-50:  #F8F7F6;
  --gray-100: #F0EFED;
  --gray-200: #E3E1DE;
  --gray-300: #CBC9C6;
  --gray-400: #9A9893;
  --gray-500: #6E7180;
  --gray-800: #2B2D33;
  --gray-900: #1A1B1F;
  --green-500: #1F9D55;

  /* Aliases semánticos */
  --color-primary: var(--orange-500);
  --color-primary-hover: var(--orange-600);
  --color-primary-press: var(--orange-700);
  --color-primary-tint: var(--orange-50);
  --text-heading: var(--gray-800);
  --text-body: #383A42;
  --text-muted: var(--gray-500);
  --text-on-primary: #FFFFFF;
  --surface-page: var(--gray-50);
  --surface-card: var(--gray-0);
  --surface-sunken: var(--gray-100);
  --surface-inverse: var(--gray-800);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--orange-500);
  --state-success: var(--green-500);

  /* Tipografía (Poppins, el peso diferencia) */
  --font-display: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --text-display-xl: 700 40px/1.15 var(--font-display);
  --text-h1: 600 22px/1.3 var(--font-display);
  --text-h2: 600 18px/1.35 var(--font-display);
  --text-h3: 600 16px/1.4 var(--font-display);
  --text-body-lg: 400 17px/1.5 var(--font-body);
  --text-body-md: 400 15px/1.5 var(--font-body);
  --text-body-sm: 400 13px/1.45 var(--font-body);
  --text-label: 500 13px/1.3 var(--font-body);
  --text-caption: 500 12px/1.3 var(--font-body);
  --text-button: 600 16px/1 var(--font-display);
  --text-price: 700 20px/1 var(--font-display);

  /* Radios, sombras, motion */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26,27,31,.06);
  --shadow-md: 0 4px 16px rgba(26,27,31,.08);
  --shadow-lg: 0 12px 32px rgba(26,27,31,.12);
  --ease-standard: cubic-bezier(0.2,0.8,0.2,1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* Reset mínimo */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-card);
  color: var(--text-body);
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; }

/* Botón del sistema (réplica de AppMenu_ba3c66.Button) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-md); cursor: pointer; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { height: 40px; padding: 0 16px; font: 600 14px/1 var(--font-display); }
.btn--md { height: 48px; padding: 0 20px; font: var(--text-button); }
.btn--lg { height: 56px; padding: 0 28px; font: 600 17px/1 var(--font-display); }
.btn--primary { background: var(--color-primary); color: var(--text-on-primary); border: none; }
.btn--primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn--secondary { background: var(--surface-card); color: var(--text-heading); border: 2px solid var(--border-strong); }
.btn--secondary:hover { color: var(--text-heading); border-color: var(--color-primary); }
.btn--ghost { background: transparent; color: var(--text-heading); border: none; }
.btn--onDark.btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--onDark.btn--secondary:hover { color: #fff; border-color: #fff; }

/* Toggle de precios: la pastilla blanca se desliza al plan anual */
.lp-billing[data-annual="1"] .lp-billing__slider { transform: translateX(calc(100% + 8px)); }

/* [hidden] debe ganar al `display` inline del markup (menú de idioma y banner de
   cookies llevan display:flex inline). Sin !important, hidden no oculta nada. */
[hidden] { display: none !important; }

/* Accesibilidad: foco visible */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}

/* Páginas legales (plantilla tpl-legal.php): columna de lectura sobre el mismo
   sistema de tokens. El contenido lo escribe el editor de WP, así que aquí se
   estiliza por etiqueta y no por clase. */
.lp-legal { background: var(--surface-page); padding: 56px 32px 72px; }
.lp-legal__inner { max-width: 760px; margin: 0 auto; background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 48px 48px 56px; }
.lp-legal h1 { font: 700 clamp(28px,4vw,38px)/1.15 var(--font-display);
  letter-spacing: -.02em; color: var(--text-heading); margin: 0 0 8px; text-wrap: balance; }
.lp-legal h2 { font: 600 20px/1.35 var(--font-display); color: var(--text-heading);
  margin: 40px 0 12px; }
.lp-legal h3 { font: var(--text-h3); color: var(--text-heading); margin: 24px 0 8px; }
.lp-legal p, .lp-legal li { font: var(--text-body-md); color: var(--text-body); text-wrap: pretty; }
.lp-legal p { margin: 0 0 14px; }
.lp-legal ul { margin: 0 0 16px; padding-left: 22px; }
.lp-legal li { margin: 0 0 8px; }
.lp-legal strong { color: var(--text-heading); font-weight: 600; }
.lp-legal a { text-decoration: underline; text-underline-offset: 2px; }
.lp-legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--surface-sunken); padding: 1px 5px; border-radius: 4px; }
.lp-legal hr { border: 0; border-top: 1px solid var(--border-default); margin: 40px 0 20px; }
.lp-legal em { color: var(--text-muted); font-style: normal; font-size: 13px; }

@media (max-width: 620px) {
  .lp-legal { padding: 32px 16px 48px; }
  .lp-legal__inner { padding: 28px 22px 36px; }
}

/* Responsive — el diseño usa grid auto-fit; solo faltan estos saltos */
@media (max-width: 860px) {
  .lp-hero-grid { grid-template-columns: 1fr !important; }
  .lp-hero-visual { height: 360px !important; }
  .lp-nav { display: none !important; }
  .lp-web-grid { grid-template-columns: 1fr !important; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 520px) {
  .lp-hero-visual { height: 300px !important; }
}