/*
  AYISPAIN / AlphaMale — hoja de estilos compartida.

  Mobile-first, tema claro únicamente (a propósito: ver README), sin
  dependencias externas y sin JavaScript. Paleta tomada de
  ios/AlphaMale/DesignSystem/AMColor.swift — los nombres de las variables
  siguen los mismos que allí para poder comparar a ojo.

  El degradado de marca (--grape → --pink → --orange) es el mismo que
  `AMColor.backdrop`, pero mezclado al 50% con tinta antes de usarlo como
  fondo de héroe: el original, con texto crema encima, no llega al contraste
  mínimo de accesibilidad (el naranja del degradado baja de 3:1). La versión
  "entintada" conserva el aire de cartel de cómic con contraste de sobra.
*/

:root {
  color-scheme: light;

  /* Paleta de marca (AMColor.swift) */
  --ink: #121217;
  --cream: #faf2e0;
  --yellow: #ffcc1a;
  --lime: #8cf240;
  --blue: #338cff;
  --pink: #ff338c;
  --purple: #8c40f2;
  --orange: #ff731a;

  /* Degradado de héroe: grape → pink → orange mezclados al 50% con tinta. */
  --hero-grape: #4f2985;
  --hero-pink: #892352;
  --hero-orange: #894319;

  /* Fondo casi blanco de las pantallas internas de la app (appBackdrop). */
  --paper: #fffaf5;
  --paper-alt: #fdf7f0;

  --ink-soft: rgba(18, 18, 23, 0.7);
  --ink-faint: rgba(18, 18, 23, 0.5);
  --cream-soft: rgba(250, 242, 224, 0.82);
  --border-soft: rgba(18, 18, 23, 0.12);

  --radius: 18px;
  --radius-sm: 10px;
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --container: 60rem;
  --container-narrow: 42rem;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* --- Reset mínimo --- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--font-body);
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3, p, ul, ol, figure { margin: 0 0 1rem; }

ul, ol { padding-left: 1.35rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.container--narrow { max-width: var(--container-narrow); }

/* --- Accesibilidad: saltar al contenido --- */

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--yellow);
  color: var(--ink);
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* --- Cabecera --- */

.site-header {
  background: var(--ink);
  color: var(--cream);
  padding: 0.9rem 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.header-nav a {
  color: var(--cream-soft);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}

.header-nav a:hover,
.header-nav a:focus-visible {
  color: var(--yellow);
  text-decoration: underline;
}

/* Wordmark AYISPAIN, para la cabecera y el pie. */
.brand-ayispain {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  color: var(--cream);
}

.brand-ayispain small {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--cream-soft);
}

/* Wordmark ALPHA MALE, composición del login: ALPHA en crema, MALE en
   amarillo, negrita, sobre tinta. */
.brand-alphamale {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 1.15rem;
  line-height: 1;
}

.brand-alphamale .word-alpha { color: var(--cream); }
.brand-alphamale .word-male { color: var(--yellow); }

.breadcrumb-back {
  font-size: 0.85rem;
  color: var(--cream-soft);
  text-decoration: none;
}

.breadcrumb-back:hover, .breadcrumb-back:focus-visible {
  color: var(--yellow);
}

/* --- Héroe --- */

.hero {
  background: linear-gradient(135deg, var(--hero-grape), var(--hero-pink), var(--hero-orange));
  color: var(--cream);
  padding: 3.5rem 0 3rem;
  text-align: center;
}

.hero .container { max-width: var(--container-narrow); }

.hero-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 1.25rem;
}

.hero-logo .word-alpha,
.hero-logo .word-male {
  display: block;
  font-weight: 900;
  font-size: clamp(2.5rem, 12vw, 4.2rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-shadow: 3px 3px 0 var(--ink);
}

.hero-logo .word-alpha { color: var(--cream); }
.hero-logo .word-male { color: var(--yellow); }

.hero-eyebrow {
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 8vw, 2.6rem);
  color: var(--cream);
  text-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 1rem;
}

.hero-tagline {
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  font-weight: 600;
  color: var(--cream);
  max-width: 34rem;
  margin: 0 auto 0.5rem;
}

.hero-sub {
  font-size: 0.95rem;
  color: var(--cream-soft);
  max-width: 30rem;
  margin: 0 auto;
}

/* --- Secciones generales --- */

main { display: block; }

.section {
  padding: 3rem 0;
}

.section--alt { background: var(--paper-alt); }

.section-title {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.section-lead {
  color: var(--ink-soft);
  max-width: 38rem;
  margin-bottom: 2rem;
}

/* --- Tarjetas de feature (Hoy / Físico / Nutrición / Social) --- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

.feature-card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: 1.4rem 1.4rem 1.5rem;
}

.feature-card .feature-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--accent, var(--yellow));
  color: var(--ink);
  margin-bottom: 0.7rem;
}

.feature-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.feature-card p {
  color: var(--ink-soft);
  margin-bottom: 0;
  font-size: 0.96rem;
}

.feature-card--hoy { --accent: var(--yellow); }
.feature-card--fisico { --accent: var(--lime); }
.feature-card--nutricion { --accent: var(--blue); }
.feature-card--social { --accent: var(--pink); }

/* --- Tarjeta de app (portada AYISPAIN) --- */

.app-card {
  display: block;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: 1.6rem 1.6rem 1.7rem;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.app-card:hover, .app-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--purple);
}

.app-card .app-card-name {
  margin-bottom: 0.5rem;
}

.app-card .app-card-name .word-alpha { color: var(--cream); }
.app-card .app-card-name .word-male { color: var(--yellow); }

.app-card p {
  color: var(--cream-soft);
  margin-bottom: 0.8rem;
}

.app-card .app-card-link {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--yellow);
}

/* --- Aviso de seguridad / descargo --- */

.safety-notice {
  background: var(--cream);
  border: 2px dashed var(--ink);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  white-space: pre-line;
  font-size: 0.95rem;
  color: var(--ink);
}

.safety-notice strong { font-weight: 800; }

/* --- Botones --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: var(--shadow-hard-sm);
}

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

.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--cream);
}

.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.7;
}

.btn[aria-disabled="true"]:hover {
  background: var(--yellow);
}

.cta-note {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 0.6rem;
}

/* --- Contacto --- */

.contact-box {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: 1.6rem;
}

.contact-box a {
  font-weight: 700;
  color: var(--purple);
  text-decoration: underline;
}

/* --- Pie de página --- */

.site-footer {
  background: var(--ink);
  color: var(--cream-soft);
  padding: 2rem 0;
  font-size: 0.85rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-bottom: 1rem;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--cream-soft);
  text-decoration: underline;
}

.footer-links a:hover, .footer-links a:focus-visible {
  color: var(--yellow);
}

.footer-meta {
  color: rgba(250, 242, 224, 0.55);
  line-height: 1.5;
}

/* --- Contenido legal (generado desde Markdown) --- */

.legal-content h1 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.legal-content h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
}

.legal-content h3 {
  font-size: 1.05rem;
  margin-top: 1.5rem;
}

.legal-content p { margin: 0 0 1rem; }

.legal-content ul, .legal-content ol { padding-left: 1.4rem; margin-bottom: 1rem; }

.legal-content li { margin-bottom: 0.35rem; }

.legal-content code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgba(18, 18, 23, 0.08);
}

.legal-content a { color: var(--purple); }

.legal-updated {
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}