/*
 * Academia Carlos Cenalmor — Framework Visual
 * Stack: WordPress + Astra + Gutenberg nativo + MemberPress
 * Paleta: Arena · Carbón · Terracota · Musgo
 * Tipografía: DM Serif Display + Inter
 *
 * REGLA DE FLUIDEZ: TODO es clamp() excepto donde cambia comportamiento.
 */

/* ============================================
   1. TOKENS — Variables CSS
   ============================================ */

:root {
  /* ── Paleta — mapeada a las variables de Astra ──
     Astra genera --ast-global-color-N a partir del Customizer.
     Al apuntar aquí, cambiar el color en Astra lo cambia todo. */
  --ac-carbon:    var(--ast-global-color-0, #2B2B2B); /* texto principal */
  --ac-terracota: var(--ast-global-color-1, #C4704B); /* acento */
  --ac-arena:     var(--ast-global-color-4, #F5F0EB); /* fondo arena     */
  --ac-nieve:     var(--ast-global-color-5, #FAF8F6); /* fondo blanco cálido */
  --ac-cal:       var(--ast-global-color-6, #E8E3DE); /* bordes          */
  /* Sin equivalente en Astra: se mantienen fijos */
  --ac-arcilla:  #D4A58A;
  --ac-musgo:    #5B7F5E;
  --ac-piedra:   #8A8580;

  /* ── Tipografía — fallback explícito ── */
  --ac-font-heading: 'DM Serif Display', Georgia, serif;
  --ac-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Tipografía fluida ── */
  --ac-text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --ac-text-sm:   clamp(0.8125rem, 0.775rem + 0.25vw, 0.875rem);
  --ac-text-base: clamp(1rem,     0.9rem + 0.5vw,  1.125rem);
  --ac-text-lg:   clamp(1.0625rem, 1rem + 0.3vw,   1.25rem);
  --ac-text-xl:   clamp(1.25rem,   1.1rem + 0.75vw, 1.5rem);
  --ac-text-2xl:  clamp(1.5rem,    1.3rem + 1vw,    2rem);
  --ac-text-3xl:  clamp(2rem,      1.7rem + 1.5vw,  3rem);
  --ac-text-4xl:  clamp(2.5rem,    2rem + 3vw,      4rem);

  /* ── Jerarquía tipográfica ── */
  --ac-h1: var(--ac-text-4xl);
  --ac-h2: var(--ac-text-3xl);
  --ac-h3: var(--ac-text-2xl);
  --ac-h4: var(--ac-text-xl);
  --ac-h5: var(--ac-text-lg);
  --ac-h6: var(--ac-text-base);

  /* ── Espaciado fluido ── */
  --ac-space-xs:   clamp(0.25rem,  0.2rem  + 0.25vw,  0.5rem);
  --ac-space-sm:   clamp(0.5rem,   0.4rem  + 0.5vw,   1rem);
  --ac-space-md:   clamp(1rem,     0.8rem  + 1vw,     1.5rem);
  --ac-space-lg:   clamp(1.5rem,   1.2rem  + 1.5vw,   2rem);
  --ac-space-xl:   clamp(2rem,     1.5rem  + 2.5vw,   3rem);
  --ac-space-2xl:  clamp(3rem,     2rem   + 4vw,      4rem);
  --ac-space-3xl:  clamp(4rem,     3rem   + 5vw,      6rem);
  --ac-space-4xl:  clamp(6rem,     4rem   + 8vw,      10rem);

  /* ── Radios fluidos ── */
  --ac-radius-sm:    clamp(4px,  2px  + 0.5vw,   8px);
  --ac-radius-md:    clamp(8px,  4px  + 1vw,     16px);
  --ac-radius-lg:    clamp(16px, 8px  + 2vw,     24px);
  --ac-radius-pill:  clamp(20px, 10px + 2.5vw,   32px);

  /* ── Iconos fluidos ── */
  --ac-icon-s:  clamp(1rem,   0.9rem + 0.5vw,   1.25rem);
  --ac-icon-m:  clamp(1.25rem, 1rem  + 1.25vw,  1.75rem);
  --ac-icon-l:  clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
  --ac-icon-xl: clamp(2rem,   1.5rem + 2.5vw,   3rem);

  /* ── Sombras ── */
  --ac-shadow-xs:   0 1px 4px rgba(0,0,0,0.04);
  --ac-shadow-card: 0 2px 8px rgba(0,0,0,0.05);

  /* ── Animaciones fluídas ── */
  --ac-duration-fast:   clamp(100ms,  80ms  + 0.1vw,  150ms);
  --ac-duration-base:   clamp(200ms,  150ms + 0.25vw, 300ms);
  --ac-duration-slow:   clamp(300ms,  200ms + 0.5vw,  500ms);
  --ac-ease-out:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ac-ease-in-out:     cubic-bezier(0.645, 0.045, 0.355, 1);
  --ac-transition-fast: var(--ac-duration-fast) var(--ac-ease-out);
  --ac-transition-base: var(--ac-duration-base) var(--ac-ease-out);
}

/* ============================================
   2. RESET — solo lo seguro (no pisa a Astra)
   ============================================ */

/* box-sizing universal: seguro y necesario */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Imágenes dentro de bloques ac/* */
.ac-hero img,
.ac-section img,
.ac-cta-band img,
.ac-card img,
.ac-pricing-card img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Smooth scroll — no afecta a Astra */
html {
  scroll-behavior: smooth;
}

/* Accesibilidad: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ac-hero *, .ac-section *, .ac-cta-band *, .ac-card *, .ac-pricing-card * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   3. TIPOGRAFÍA — scoped a bloques ac/*
      Astra controla la tipografía global del sitio.
      Aquí solo normalizamos lo que necesitan nuestros componentes.
   ============================================ */

/* Base de bloque: hereda de Astra, sobreescribe solo lo necesario */
.ac-hero,
.ac-section,
.ac-cta-band {
  font-family: var(--ac-font-body);
  line-height: 1.65;
  color: var(--ac-carbon);
}

/* Headings dentro de nuestros bloques */
.ac-hero h1, .ac-section h1,
.ac-hero h2, .ac-section h2, .ac-cta-band h2,
.ac-hero h3, .ac-section h3,
.ac-card h4, .ac-pricing-card h3 {
  font-family: var(--ac-font-heading);
  font-weight: 400;
}

.ac-hero h1 {
  font-size: var(--ac-h1);
  line-height: 1.15;
}
.ac-hero h2,
.ac-section h2,
.ac-cta-band h2 {
  font-size: var(--ac-h2);
  line-height: 1.2;
}
.ac-section h3 {
  font-size: var(--ac-h3);
  line-height: 1.25;
}

/* h4 en cards usa Inter (cuerpo) */
.ac-card h4 {
  font-family: var(--ac-font-body);
  font-size: var(--ac-h4);
  font-weight: 600;
  line-height: 1.3;
}

/* Párrafos dentro de bloques */
.ac-hero p,
.ac-section p,
.ac-cta-band p {
  margin-bottom: var(--ac-space-md);
}
.ac-hero p:last-child,
.ac-section p:last-child,
.ac-cta-band p:last-child {
  margin-bottom: 0;
}

/* Enlace hereda el color del bloque (terracota via Astra) */
.ac-section a,
.ac-hero a {
  color: var(--ac-terracota);
  text-decoration: none;
}
.ac-section a:hover,
.ac-hero a:hover {
  text-decoration: underline;
}

/* Listas dentro de secciones de lectura */
.ac-section ul,
.ac-section ol {
  padding-left: 1.5rem;
  margin-bottom: var(--ac-space-md);
}
.ac-section ul { list-style: disc; }
.ac-section ol { list-style: decimal; }

/* Clases utilitarias — no globales, solo texto dentro de bloques ac/* */
.ac-hero .text-lead,
.ac-section .text-lead {
  font-size: var(--ac-text-lg);
  color: var(--ac-piedra);
  max-width: 42rem;
  line-height: 1.6;
}

.label-sm {
  display: inline-block;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ac-piedra);
}

.ac-hero .ac-hero__statement {
  font-family: var(--ac-font-heading);
  font-style: italic;
  line-height: 1.25;
}

.text-muted { color: var(--ac-piedra); }
.text-sm    { font-size: var(--ac-text-sm); }

/* ============================================
   4. LAYOUTS
   ============================================ */

.ac-container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--ac-space-md);
}

.ac-container--wide {
  max-width: 90rem;
}

/* Grids fluidos */
.ac-grid-s {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--ac-space-sm);
}
.ac-grid-m {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ac-space-lg);
}
.ac-grid-l {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--ac-space-xl);
}

/* Grid dos columnas */
.ac-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ac-space-xl);
}
@media (max-width: 48em) {
  .ac-grid-2 { grid-template-columns: 1fr; }
}

/* Grid tres columnas */
.ac-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ac-space-xl);
}
@media (max-width: 64em) {
  .ac-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40em) {
  .ac-grid-3 { grid-template-columns: 1fr; }
}

/* Stack vertical */
.ac-stack { display: flex; flex-direction: column; }
.ac-stack > * + * { margin-top: var(--ac-space-md); }
.ac-stack--sm  > * + * { margin-top: var(--ac-space-sm); }
.ac-stack--lg  > * + * { margin-top: var(--ac-space-lg); }
.ac-stack--xl  > * + * { margin-top: var(--ac-space-xl); }

/* Ancho de lectura óptimo */
.ac-reading {
  max-width: 42rem;
}

/* Layout con sidebar */
.ac-layout-sidebar-right {
  display: grid;
  grid-template-columns: 1fr clamp(200px, 22vw, 300px);
  gap: var(--ac-space-xl);
}
.ac-layout-sidebar-left {
  display: grid;
  grid-template-columns: clamp(200px, 20vw, 280px) 1fr;
  gap: var(--ac-space-xl);
}
.ac-layout-full {
  display: grid;
  grid-template-columns: 1fr;
}
@media (max-width: 48em) {
  .ac-layout-sidebar-right,
  .ac-layout-sidebar-left {
    grid-template-columns: 1fr;
  }
}

/* Sidebar sticky */
.ac-sidebar-sticky {
  position: sticky;
  top: var(--ac-space-lg);
  align-self: start;
}
@media (max-width: 48em) {
  .ac-sidebar-sticky { position: relative; top: 0; }
}

/* ============================================
   5. SECCIONES
   ============================================ */

.ac-section {
  padding-block: var(--ac-space-4xl);
}

.ac-section--light {
  background-color: var(--ac-nieve);
  color: var(--ac-carbon);
}

.ac-section--arena {
  background-color: var(--ac-arena);
  color: var(--ac-carbon);
}

.ac-section--carbon {
  background-color: var(--ac-carbon);
  color: var(--ac-arena);
}

.ac-section--terracota {
  background-color: var(--ac-terracota);
  color: #fff;
}

/* Separador de sección — forma orgánica sutíl */
.ac-section-divider {
  width: 100%;
  height: 3px;
  background: var(--ac-cal);
  border: none;
  margin-block: 0;
}
.ac-section-divider--accent {
  background: var(--ac-terracota);
}

/* ============================================
   6. COMPONENTES — Botones
   ============================================ */

.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ac-space-sm);
  padding: clamp(12px, 0.8rem + 0.5vw, 16px) clamp(20px, 1.2rem + 2vw, 32px);
  border-radius: var(--ac-radius-md);
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-base);
  font-weight: 600;
  line-height: 1.3;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--ac-transition-fast),
    border-color var(--ac-transition-fast),
    color var(--ac-transition-fast),
    transform var(--ac-transition-fast);
  min-height: clamp(44px, 2.75rem + 0.5vw, 52px);
  text-decoration: none;
  white-space: nowrap;
}
.ac-btn:hover  { transform: translateY(-1px); }
.ac-btn:active { transform: translateY(0);   }
.ac-btn:focus-visible {
  outline: 3px solid var(--ac-terracota);
  outline-offset: 2px;
}
.ac-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.ac-btn--primary {
  background-color: var(--ac-terracota);
  color: #fff;
  border-color: var(--ac-terracota);
}
.ac-btn--primary:hover  { background-color: #b25e3c; border-color: #b25e3c; }
.ac-btn--primary:focus-visible { outline-color: #b25e3c; }

.ac-btn--secondary {
  background-color: transparent;
  color: var(--ac-terracota);
  border-color: var(--ac-terracota);
}
.ac-btn--secondary:hover  { background-color: var(--ac-terracota); color: #fff; }

.ac-btn--dark {
  background-color: var(--ac-carbon);
  color: #fff;
  border-color: var(--ac-carbon);
}
.ac-btn--dark:hover { background-color: #1a1a1a; border-color: #1a1a1a; }

.ac-btn--outline {
  background-color: transparent;
  color: var(--ac-carbon);
  border-color: var(--ac-cal);
}
.ac-btn--outline:hover  { background-color: var(--ac-nieve); border-color: var(--ac-piedra); }

/* Outline sobre fondos oscuros (hero carbon/dark) */
.ac-btn--outline-light {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.ac-btn--outline-light:hover { background-color: rgba(255,255,255,0.12); border-color: #fff; }

.ac-btn--sm {
  min-height: clamp(36px, 2.25rem + 0.25vw, 42px);
  padding: clamp(6px, 0.4rem + 0.25vw, 10px) clamp(14px, 0.8rem + 1vw, 20px);
  font-size: var(--ac-text-sm);
}
.ac-btn--full { width: 100%; }

/* ============================================
   7. COMPONENTES — Cards
   ============================================ */

.ac-card {
  background-color: var(--ac-nieve);
  border: 1px solid var(--ac-cal);
  border-radius: var(--ac-radius-lg);
  overflow: hidden;
  transition: border-color var(--ac-transition-fast);
}
.ac-card:hover {
  border-color: var(--ac-arcilla);
}

.ac-card__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ac-arcilla), var(--ac-cal));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ac-icon-xl);
  color: var(--ac-piedra);
}

.ac-card__body {
  padding: var(--ac-space-md);
}

.ac-card__badge {
  display: inline-block;
  padding: var(--ac-space-xs) var(--ac-space-sm);
  border-radius: var(--ac-radius-pill);
  font-size: var(--ac-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.ac-card__badge--default {
  background-color: var(--ac-arena);
  color: var(--ac-terracota);
}
.ac-card__badge--musgo {
  background-color: #e8f0e9;
  color: var(--ac-musgo);
}

.ac-card__price {
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-2xl);
  font-weight: 700;
  color: var(--ac-terracota);
  line-height: 1.2;
}

.ac-card__title {
  font-family: var(--ac-font-heading);
  font-size: var(--ac-text-xl);
  color: var(--ac-carbon);
  margin-block: var(--ac-space-xs);
  line-height: 1.25;
}

.ac-card__desc {
  font-size: var(--ac-text-sm);
  color: var(--ac-piedra);
  line-height: 1.55;
  margin-block-start: var(--ac-space-xs);
}

.ac-card__actions {
  margin-block-start: var(--ac-space-md);
}

/* Card variant — destacada */
.ac-card--featured {
  border: 2px solid var(--ac-terracota);
  box-shadow: var(--ac-shadow-card);
}

/* Card — sin borde, solo fondo */
.ac-card--flat {
  border: none;
  background-color: transparent;
}

/* ============================================
   8. COMPONENTES — Tabla de precios / Grupos
   ============================================ */

.ac-pricing-card {
  background-color: #fff;
  border: 1px solid var(--ac-cal);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-lg);
  position: relative;
  display: flex;
  flex-direction: column;
}
.ac-pricing-card--featured {
  border: 2px solid var(--ac-terracota);
  box-shadow: var(--ac-shadow-card);
}

.ac-pricing-card__name {
  font-family: var(--ac-font-heading);
  font-size: var(--ac-text-xl);
  margin-bottom: var(--ac-space-xs);
}

.ac-pricing-card__amount {
  font-family: var(--ac-font-body);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.8rem);
  font-weight: 700;
  color: var(--ac-terracota);
  line-height: 1.1;
}

.ac-pricing-card__period {
  font-size: var(--ac-text-sm);
  color: var(--ac-piedra);
  margin-bottom: var(--ac-space-md);
}

.ac-pricing-card__badge {
  position: absolute;
  top: var(--ac-space-sm);
  right: var(--ac-space-sm);
  background-color: var(--ac-terracota);
  color: #fff;
  font-size: var(--ac-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: var(--ac-space-xs) var(--ac-space-sm);
  border-radius: var(--ac-radius-pill);
}

.ac-pricing-card__features {
  list-style: none;
  margin-block: var(--ac-space-md);
  padding: 0;
  flex: 1;
}
.ac-pricing-card__features li {
  font-size: var(--ac-text-sm);
  padding: var(--ac-space-xs) 0;
  border-bottom: 1px solid var(--ac-cal);
}
.ac-pricing-card__features li:last-child { border-bottom: none; }

/* ============================================
   9. COMPONENTES — Barra de progreso
   ============================================ */

.ac-progress {
  height: clamp(6px, 0.4rem + 0.25vw, 10px);
  background-color: var(--ac-cal);
  border-radius: 9999px;
  overflow: hidden;
  width: 100%;
}
.ac-progress__fill {
  height: 100%;
  background-color: var(--ac-musgo);
  border-radius: 9999px;
  transition: width var(--ac-duration-base) var(--ac-ease-out);
}

/* ============================================
   10. COMPONENTES — Badges
   ============================================ */

.ac-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ac-space-xs) var(--ac-space-sm);
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--ac-radius-pill);
}
.ac-badge--terracota {
  background-color: var(--ac-arena);
  color: var(--ac-terracota);
}
.ac-badge--musgo {
  background-color: #e8f0e9;
  color: var(--ac-musgo);
}
.ac-badge--piedra {
  background-color: var(--ac-cal);
  color: var(--ac-piedra);
}
.ac-badge--filled {
  background-color: var(--ac-carbon);
  color: #fff;
}

.ac-badge--sm {
  padding: 2px var(--ac-space-xs);
  font-size: 0.65rem;
}

/* ============================================
   11. COMPONENTES — Separador con acento
   ============================================ */

.ac-divider {
  width: 100%;
  height: 1px;
  background-color: var(--ac-cal);
  border: none;
  margin-block: var(--ac-space-xl);
}
.ac-divider--accent {
  height: 3px;
  background-color: var(--ac-terracota);
  border-radius: 2px;
  width: clamp(3rem, 5vw, 5rem);
}
.ac-divider--center { margin-inline: auto; }

/* ============================================
   12. COMPONENTES — Testimonio
   ============================================ */

.ac-testimonial {
  background-color: #fff;
  border-left: 4px solid var(--ac-terracota);
  border-radius: 0 var(--ac-radius-md) var(--ac-radius-md) 0;
  padding: var(--ac-space-md) var(--ac-space-lg);
}
.ac-testimonial__quote {
  font-family: var(--ac-font-heading);
  font-style: italic;
  font-size: var(--ac-text-lg);
  line-height: 1.4;
  color: var(--ac-carbon);
  margin-bottom: var(--ac-space-sm);
}
.ac-testimonial__author {
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-sm);
  font-weight: 600;
  color: var(--ac-piedra);
}

/* ============================================
   13. COMPONENTES — Formularios
   ============================================ */

.ac-input {
  width: 100%;
  padding: var(--ac-space-sm) var(--ac-space-md);
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-base);
  border: 2px solid var(--ac-cal);
  border-radius: var(--ac-radius-md);
  background-color: #fff;
  color: var(--ac-carbon);
  transition:
    border-color var(--ac-transition-fast),
    box-shadow var(--ac-transition-fast);
}
.ac-input:focus {
  outline: none;
  border-color: var(--ac-terracota);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-terracota) 20%, transparent);
}
.ac-input:disabled { opacity: 0.5; cursor: not-allowed; }
.ac-input.is-error { border-color: #c44b4b; }
.ac-input.is-success { border-color: var(--ac-musgo); }

.ac-label {
  display: block;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-sm);
  font-weight: 600;
  color: var(--ac-piedra);
  margin-bottom: var(--ac-space-xs);
}

.ac-field { margin-bottom: var(--ac-space-md); }

/* ============================================
   14. COMPONENTES — Alerts
   ============================================ */

.ac-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ac-space-sm);
  padding: var(--ac-space-md) var(--ac-space-lg);
  border-radius: var(--ac-radius-md);
  font-size: var(--ac-text-sm);
  border-left: 4px solid;
}
.ac-alert--info {
  background-color: color-mix(in srgb, var(--ac-terracota) 8%, transparent);
  border-color: var(--ac-terracota);
  color: var(--ac-carbon);
}
.ac-alert--success {
  background-color: color-mix(in srgb, var(--ac-musgo) 8%, transparent);
  border-color: var(--ac-musgo);
  color: var(--ac-carbon);
}
.ac-alert--warning {
  background-color: #fff8eb;
  border-color: var(--ac-arcilla);
  color: var(--ac-carbon);
}
.ac-alert--error {
  background-color: #fdf0ee;
  border-color: #c44b4b;
  color: var(--ac-carbon);
}

/* ============================================
   15. COMPONENTES — Navegación
   ============================================ */

.ac-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ac-space-md) var(--ac-space-md);
  max-width: 72rem;
  margin-inline: auto;
}
.ac-nav__logo {
  font-family: var(--ac-font-heading);
  font-size: var(--ac-text-lg);
  color: var(--ac-carbon);
}
.ac-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--ac-space-md);
}
.ac-nav__link {
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-sm);
  font-weight: 500;
  color: var(--ac-piedra);
  transition: color var(--ac-transition-fast);
  position: relative;
}
.ac-nav__link:hover,
.ac-nav__link.is-active {
  color: var(--ac-carbon);
}
.ac-nav__link.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--ac-terracota);
  border-radius: 1px;
}

/* ── Hamburguesa ── */
.ac-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 0.5vw, 6px);
  width: var(--ac-icon-l);
  height: var(--ac-icon-l);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.ac-hamburger__line {
  display: block;
  height: 2px;
  background-color: var(--ac-carbon);
  transition: transform var(--ac-transition-base), opacity var(--ac-transition-base);
  transform-origin: center;
}
.ac-hamburger--active .ac-hamburger__line:nth-child(1) {
  transform: rotate(45deg) translateY(5px);
}
.ac-hamburger--active .ac-hamburger__line:nth-child(2) { opacity: 0; }
.ac-hamburger--active .ac-hamburger__line:nth-child(3) {
  transform: rotate(-45deg) translateY(-5px);
}

/* Menú móvil — por defecto oculto, se abre con .ac-nav__menu--open */
.ac-nav__menu--open {
  display: none;
}
.body-lock { overflow: hidden; }

@media (max-width: 48em) {
  .ac-nav__menu:not(.ac-nav__menu--open) {
    display: none;
  }
  .ac-nav__menu--open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ac-nieve);
    border-bottom: 1px solid var(--ac-cal);
    padding: var(--ac-space-md);
    gap: var(--ac-space-sm);
    box-shadow: var(--ac-shadow-card);
  }
}

/* ============================================
   16. COMPONENTES — Icono
   ============================================ */

.ac-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ac-icon svg {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ac-icon--s  { --ac-icon-size: var(--ac-icon-s); }
.ac-icon--m  { --ac-icon-size: var(--ac-icon-m); }
.ac-icon--l  { --ac-icon-size: var(--ac-icon-l); }
.ac-icon--xl { --ac-icon-size: var(--ac-icon-xl); }
.ac-icon svg { width: var(--ac-icon-size, 1em); height: var(--ac-icon-size, 1em); }

/* Iconos inline (emoji como fallback) */
.ac-emoji {
  font-style: normal;
  line-height: 1;
}

/* ============================================
   17. ESTADOS — Skeleton, Empty, Alert
   ============================================ */

/* Skeleton */
.ac-skeleton {
  background: linear-gradient(
    90deg,
    var(--ac-nieve) 25%,
    var(--ac-arena)  50%,
    var(--ac-nieve)  75%
  );
  background-size: 200% 100%;
  animation: ac-skeleton-loading 1.6s infinite;
  border-radius: var(--ac-radius-sm);
}
@keyframes ac-skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ac-skeleton--text {
  height: 1em;
  margin-bottom: var(--ac-space-sm);
}
.ac-skeleton--title {
  height: 1.5em;
  width: 60%;
  margin-bottom: var(--ac-space-md);
}
.ac-skeleton--media {
  aspect-ratio: 16 / 9;
  border-radius: var(--ac-radius-md);
  margin-bottom: var(--ac-space-md);
}

/* Empty state */
.ac-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ac-space-3xl) var(--ac-space-md);
}
.ac-empty__icon {
  font-size: var(--ac-icon-xl);
  color: var(--ac-piedra);
  margin-bottom: var(--ac-space-md);
}
.ac-empty__title {
  font-family: var(--ac-font-heading);
  font-size: var(--ac-text-2xl);
  margin-bottom: var(--ac-space-sm);
}
.ac-empty__desc {
  font-size: var(--ac-text-base);
  color: var(--ac-piedra);
  max-width: 32rem;
  margin-bottom: var(--ac-space-lg);
}

/* ============================================
   18. UTILITY CLASSES
   ============================================ */

/* Visibilidad */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Alineación */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Aspect ratio */
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-1-1  { aspect-ratio: 1 / 1; }

/* Overflow */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Espaciado utilitario solo cuando no tiene sentido componente */
.mt-auto { margin-top: auto; }
.mb-0   { margin-bottom: 0; }
.gap-sm { gap: var(--ac-space-sm); }
.gap-md { gap: var(--ac-space-md); }
.gap-lg { gap: var(--ac-space-lg); }

/* Ocultar / mostrar por breakpoint de comportamiento */
@media (max-width: 48em) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 48.01em) {
  .show-mobile { display: none !important; }
}

/* ============================================
   19. PATTERNS
   ============================================ */

/* Hero — statement tipográfico */
.ac-hero {
  padding-block: var(--ac-space-4xl);
  text-align: center;
}
.ac-hero__statement {
  font-family: var(--ac-font-heading);
  font-style: italic;
  font-size: clamp(1.75rem, 1.5rem + 2.5vw, 3rem);
  line-height: 1.25;
  max-width: 42rem;
  margin-inline: auto;
}
.ac-hero__divider {
  width: clamp(2.5rem, 4vw, 4rem);
  height: 3px;
  background-color: var(--ac-terracota);
  border-radius: 2px;
  margin: var(--ac-space-lg) auto;
}
.ac-hero--dark {
  background-color: var(--ac-carbon);
  color: var(--ac-arena);
}
.ac-hero--arena {
  background-color: var(--ac-arena);
  color: var(--ac-carbon);
}

/* CTA band */
.ac-cta-band {
  padding-block: var(--ac-space-3xl);
  text-align: center;
}
.ac-cta-band--terracota {
  background-color: var(--ac-terracota);
  color: #fff;
}
.ac-cta-band--carbon {
  background-color: var(--ac-carbon);
  color: var(--ac-arena);
}

/* ============================================
   20. AREA PRIVADA — MemberPress layout
   ============================================ */

/* Layout dashboard: sidebar izquierda + contenido */
.ac-dashboard {
  display: grid;
  grid-template-columns: clamp(200px, 18vw, 280px) 1fr;
  gap: var(--ac-space-xl);
  padding-block: var(--ac-space-2xl);
}
@media (max-width: 48em) {
  .ac-dashboard { grid-template-columns: 1fr; }
}

/* Sidebar de navegación de cursos */
.ac-course-nav {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-xs);
}
.ac-course-nav__link {
  display: block;
  padding: var(--ac-space-sm) var(--ac-space-md);
  border-radius: var(--ac-radius-md);
  font-size: var(--ac-text-sm);
  color: var(--ac-piedra);
  transition: background-color var(--ac-transition-fast), color var(--ac-transition-fast);
}
.ac-course-nav__link:hover {
  background-color: var(--ac-arena);
  color: var(--ac-carbon);
}
.ac-course-nav__link.is-active {
  background-color: var(--ac-terracota);
  color: #fff;
  font-weight: 600;
}
.ac-course-nav__link--completed::before {
  content: '✓ ';
  color: var(--ac-musgo);
  font-weight: 700;
}
.ac-course-nav__link--completed.is-active::before {
  color: #fff;
}

/* Contenido del área privada */
.ac-course-content {
  max-width: 48rem;
}
.ac-course-content .ac-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--ac-carbon);
  border-radius: var(--ac-radius-lg);
  margin-bottom: var(--ac-space-lg);
}
.ac-course-content h1,
.ac-course-content h2 {
  margin-bottom: var(--ac-space-md);
}
.ac-course-content p {
  margin-bottom: var(--ac-space-md);
  font-size: var(--ac-text-base);
  line-height: 1.7;
}

/* ============================================
   21. MOTION — reserva
   ============================================ */

/* Las animaciones del proyecto son exclusivamente transiciones de estado CSS:
   hover, focus, active — duración 150–200ms (--ac-duration-fast / --duration-base).
   No hay motion on-scroll, reveal, parallax ni animaciones de entrada.
   El framework incluye estas clases utilitarias por si se necesitan en el futuro.
*/

.ac-fade-in {
  animation: ac-fade-in var(--ac-duration-base) var(--ac-ease-out) both;
}
@keyframes ac-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ac-slide-up {
  animation: ac-slide-up var(--ac-duration-base) var(--ac-ease-out) both;
}
@keyframes ac-slide-up {
  from { opacity: 0; transform: translateY(var(--ac-space-md)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   22. PATRONES DE MATERIALIDAD (sutiles)
   ============================================ */

/* Textura de papel muy sutil — solo en fondos de sección alternos */
.ac-surface-paper {
  position: relative;
}
.ac-surface-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}
.ac-surface-paper > * { position: relative; z-index: 1; }

/* Separador orgánico (forma suave entre secciones) */
.ac-organic-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.ac-organic-divider svg {
  width: 100%;
  height: clamp(3rem, 5vw, 6rem);
  fill: var(--ac-arena);
  display: block;
}

/* ============================================
   FIN DEL FRAMEWORK
   ============================================ */