/* ============================================================
   ACATHI — hoja de estilos del tema WordPress
   Tokens del design system (design_system/tokens/*) + clases de
   componentes equivalentes a los primitivos React del handoff.
   Prefijo de clase: .ac-
   ============================================================ */

/* ————————————————————————— TOKENS: COLOR ————————————————————————— */
:root {
  --acathi-purple:        #310065;
  --acathi-purple-700:    #4a148c;
  --acathi-purple-500:    #7345b6;
  --acathi-magenta:       #b30069;
  --acathi-magenta-bright:#df0e84;
  --acathi-amber:         #dc9000;
  --acathi-navy:          #1a1228;

  --primary:                 var(--acathi-purple);
  --on-primary:              #ffffff;
  --primary-container:       var(--acathi-purple-700);
  --on-primary-container:    #b889ff;
  --primary-fixed:           #eddcff;
  --primary-fixed-dim:       #d7baff;
  --on-primary-fixed:        #280056;
  --on-primary-fixed-variant:#5a2a9c;
  --inverse-primary:         #d7baff;

  --secondary:                 var(--acathi-magenta);
  --on-secondary:              #ffffff;
  --secondary-container:       var(--acathi-magenta-bright);
  --on-secondary-container:    #fffbff;
  --secondary-fixed:           #ffd9e4;
  --secondary-fixed-dim:       #ffb0cc;
  --on-secondary-fixed:        #3e0021;
  --on-secondary-fixed-variant:#8d0051;

  --tertiary:                 #321e00;
  --on-tertiary:              #ffffff;
  --tertiary-container:       #4f3100;
  --on-tertiary-container:    var(--acathi-amber);
  --tertiary-fixed:           #ffddb5;
  --tertiary-fixed-dim:       #ffb957;
  --on-tertiary-fixed:        #2a1800;
  --on-tertiary-fixed-variant:#643f00;

  --background:                #f9f9f7;
  --on-background:             #1a1c1b;
  --surface:                   #f9f9f7;
  --surface-dim:               #dadad8;
  --surface-bright:            #f9f9f7;
  --surface-container-lowest:  #ffffff;
  --surface-container-low:     #f4f4f2;
  --surface-container:         #eeeeec;
  --surface-container-high:    #e8e8e6;
  --surface-container-highest: #e2e3e1;
  --surface-variant:           #e2e3e1;
  --on-surface:                #1a1c1b;
  --on-surface-variant:        #4a4452;
  --inverse-surface:           #2f3130;
  --inverse-on-surface:        #f1f1ef;
  --surface-tint:              var(--acathi-purple-500);

  --outline:         #7c7483;
  --outline-variant: #cdc3d4;

  --error:              #ba1a1a;
  --on-error:           #ffffff;
  --error-container:    #ffdad6;
  --on-error-container: #93000a;
  --success:            #2e7d32;
  --on-success:         #ffffff;

  --rainbow-red:    #d32f2f;
  --rainbow-orange: #f9a825;
  --rainbow-yellow: #fdd835;
  --rainbow-green:  #2e7d32;
  --rainbow-blue:   #1976d2;
  --rainbow-violet: #310065;
  --rainbow-gradient: linear-gradient(to right,
    var(--rainbow-red) 0%, var(--rainbow-orange) 25%,
    var(--rainbow-green) 50%, var(--rainbow-blue) 75%,
    var(--rainbow-violet) 100%);

  --text-strong:     var(--on-surface);
  --text-body:       var(--on-surface-variant);
  --text-on-dark:    rgba(255,255,255,0.82);
  --text-on-dark-dim:rgba(255,255,255,0.6);
  --link:            var(--secondary);
  --surface-card:    var(--surface-container-lowest);
  --surface-page:    var(--background);
  --surface-inverse: var(--acathi-navy);
  --border-subtle:   var(--surface-container-highest);
  --border-default:  var(--outline-variant);
}

/* ————————————————————————— TOKENS: TIPOGRAFÍA ————————————————————————— */
:root {
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-icon:    'Material Symbols Outlined';

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --display-lg-size: 48px; --display-lg-line: 56px; --display-lg-spacing: -0.02em;
  --display-md-size: 36px; --display-md-line: 44px; --display-md-spacing: -0.01em;
  --headline-md-size: 32px; --headline-md-line: 40px;
  --headline-sm-size: 24px; --headline-sm-line: 32px;
  --body-lg-size: 18px; --body-lg-line: 28px;
  --body-md-size: 16px; --body-md-line: 24px;
  --body-sm-size: 14px; --body-sm-line: 20px;
  --label-md-size: 14px; --label-md-line: 20px; --label-md-spacing: 0.05em;
  --label-sm-size: 12px; --label-sm-line: 16px; --label-sm-spacing: 0.08em;
  --eyebrow-spacing: 0.2em;
}

/* ————————————————————————— TOKENS: ESPACIADO ————————————————————————— */
:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --stack-sm: 16px; --stack-md: 32px; --stack-lg: 64px;
  --container-max: 1280px;
  --gutter: 24px;
  --margin-mobile: 16px;
  --section-pad-y: 64px;
}

/* ————————————————————————— TOKENS: EFECTOS ————————————————————————— */
:root {
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-2xl: 32px; --radius-3xl: 40px; --radius-full: 9999px;

  --shadow-sm:  0 1px 2px rgba(26,18,40,0.06), 0 1px 3px rgba(26,18,40,0.05);
  --shadow-md:  0 4px 12px rgba(26,18,40,0.08);
  --shadow-lg:  0 10px 30px rgba(26,18,40,0.10);
  --shadow-xl:  0 20px 45px rgba(26,18,40,0.14);
  --shadow-2xl: 0 30px 60px rgba(26,18,40,0.18);
  --shadow-primary:   0 12px 28px rgba(49,0,101,0.22);
  --shadow-secondary: 0 12px 28px rgba(179,0,105,0.22);

  --glass-bg:     rgba(255,255,255,0.9);
  --glass-bg-dim: rgba(255,255,255,0.1);
  --glass-blur:   blur(8px);

  --scrim-bottom: linear-gradient(to top,
    rgba(49,0,101,0.9) 0%, rgba(49,0,101,0.3) 45%, transparent 100%);

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 500ms; --dur-reveal: 700ms;
}

/* ————————————————————————— BASE ————————————————————————— */
body {
  background: var(--surface-page);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(49,0,101,0.18); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--on-surface);
  text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
/* ACATHI: box-sizing global de controles de formulario — evita que width:100%+padding+borde desborde su columna (solapes). */
input, select, textarea, button { box-sizing: border-box; }

.material-symbols-outlined {
  font-family: var(--font-icon) !important; /* evita herencia de font-family del padre */
  font-weight: normal !important; /* evita herencia del peso del padre (chip, btn…) */
  font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
  -webkit-font-feature-settings: 'liga' !important;
  font-feature-settings: 'liga' 1 !important;
  -webkit-font-smoothing: antialiased;
}
/* Anti-flash: oculta el texto del icono hasta que el polyfill lo convierte a glifo.
   Gateado por html.js → sin JS se muestran igual (degradación segura). */
html.js:not(.ms-ready) .material-symbols-outlined { visibility: hidden; }
.material-symbols-outlined.is-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ————————————————————————— LAYOUT ————————————————————————— */
.ac-container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.ac-section { padding-top: var(--stack-lg); padding-bottom: var(--stack-lg); }
.ac-section--flush { padding-top: 0; }
.ac-dark { background: var(--surface-inverse); color: #fff; }
.ac-dark h1, .ac-dark h2, .ac-dark h3, .ac-dark h4 { color: #fff; }
.ac-dark p { color: var(--text-on-dark); }
.ac-rainbow-top { position: relative; }
.ac-rainbow-top::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--rainbow-gradient); z-index: 1;
}

.ac-grid { display: grid; gap: var(--space-6); }
.ac-grid--2 { grid-template-columns: 1fr 1fr; }
.ac-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ac-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ac-grid--gap-sm { gap: var(--space-4); }
.ac-grid--gap-lg { gap: var(--space-8); }
@media (max-width: 1100px) {
  .ac-grid--3, .ac-grid--4 { grid-template-columns: 1fr 1fr; }
  .ac-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .ac-grid--2, .ac-grid--3, .ac-grid--4 { grid-template-columns: 1fr; }
}

/* ————————————————————————— TIPOGRAFÍA / HELPERS ————————————————————————— */
.ac-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--label-md-size); line-height: var(--label-md-line);
  letter-spacing: var(--eyebrow-spacing); text-transform: uppercase;
  color: var(--secondary);
}
.ac-eyebrow--tick::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: currentColor; }
.ac-eyebrow--amber { color: var(--on-tertiary-container); }
.ac-eyebrow--primary { color: var(--primary); }

.ac-display {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--display-lg-size); line-height: var(--display-lg-line);
  letter-spacing: var(--display-lg-spacing); color: var(--primary);
}
.ac-h2 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--headline-md-size); line-height: var(--headline-md-line);
  color: var(--primary);
}
.ac-h3 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--headline-sm-size); line-height: var(--headline-sm-line);
}
.ac-lead { font-size: var(--body-lg-size); line-height: var(--body-lg-line); color: var(--on-surface-variant); }
.ac-muted { color: var(--on-surface-variant); }
.ac-accent { color: var(--secondary); }
.ac-accent--italic { color: var(--secondary); font-style: italic; }
@media (max-width: 680px) {
  .ac-display { font-size: var(--display-md-size); line-height: var(--display-md-line); }
}

.ac-link-more {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--secondary); font-family: var(--font-display);
  font-weight: var(--weight-semibold); font-size: 14px; text-decoration: none;
  min-height: 44px; padding-block: 10px; /* touch target WCAG 2.5.5 */
}
.ac-link-more .material-symbols-outlined { font-size: 18px; transition: transform var(--dur-fast); }
.ac-link-more:hover { text-decoration: none; }
.ac-link-more:hover .material-symbols-outlined { transform: translateX(4px); }

/* ————————————————————————— BOTONES ————————————————————————— */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--label-md-size); letter-spacing: 0.02em; line-height: 1;
  padding: 12px 24px; border-radius: var(--radius-md);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), background var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
  background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary);
}
.ac-btn:hover { transform: translateY(-2px); text-decoration: none; color: var(--on-primary); }
.ac-btn:active { transform: scale(0.97); }
.ac-btn .material-symbols-outlined { font-size: 20px; }
.ac-btn--secondary { background: var(--secondary); color: var(--on-secondary); box-shadow: var(--shadow-secondary); }
.ac-btn--secondary:hover { color: var(--on-secondary); }
.ac-btn--tonal { background: var(--primary-fixed); color: var(--on-primary-fixed); box-shadow: none; }
.ac-btn--tonal:hover { color: var(--on-primary-fixed); }
.ac-btn--outline { background: var(--surface-container-lowest); color: var(--primary); border-color: var(--outline-variant); box-shadow: none; }
.ac-btn--outline:hover { color: var(--primary); }
.ac-btn--ghost { background: transparent; color: var(--primary); box-shadow: none; }
.ac-btn--ghost:hover { color: var(--primary); }
.ac-btn--amber { background: var(--on-tertiary-container); color: var(--surface-inverse); box-shadow: none; }
.ac-btn--amber:hover { color: var(--surface-inverse); }
.ac-btn--sm { padding: 8px 16px; }
.ac-btn--sm .material-symbols-outlined { font-size: 18px; }
.ac-btn--lg { padding: 16px 32px; font-size: 16px; }
.ac-btn--lg .material-symbols-outlined { font-size: 22px; }
.ac-btn--full { width: 100%; }
.ac-btn[disabled], .ac-btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ————————————————————————— TARJETAS ————————————————————————— */
.ac-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.ac-card--hover { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ac-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ac-card--tight { padding: var(--space-6); }
.ac-card--soft { background: var(--surface-container-low); border: none; box-shadow: none; }

/* Icon tile (cuadrado tintado con icono, usado en stat/service cards) */
.ac-icon-tile {
  width: 56px; height: 56px; flex: none; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: rgba(49,0,101,0.10); color: var(--primary);
}
.ac-icon-tile .material-symbols-outlined { font-size: 30px; }
.ac-icon-tile--sm { width: 48px; height: 48px; border-radius: var(--radius-md); }
.ac-icon-tile--sm .material-symbols-outlined { font-size: 28px; }
.ac-icon-tile--secondary { background: rgba(179,0,105,0.10); color: var(--secondary); }
.ac-icon-tile--amber { background: rgba(220,144,0,0.12); color: var(--on-tertiary-container); }
.ac-icon-tile--success { background: rgba(46,125,50,0.10); color: var(--success); }

/* StatCard — métrica de impacto */
.ac-stat-card {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md);
}
.ac-stat-card__value { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--headline-sm-size); line-height: 1.1; color: var(--primary); }
.ac-stat-card__label { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 14px; color: var(--on-surface-variant); margin-top: 2px; }
.ac-stat-card--secondary .ac-stat-card__value { color: var(--secondary); }
.ac-stat-card--amber .ac-stat-card__value { color: #b06800; } /* #dc9000 fails 3:1 on white; #b06800 = 3.97:1 ✓ */
.ac-stat-card--success .ac-stat-card__value { color: var(--success); }

/* ServiceCard — programa / servicio */
.ac-service-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ac-service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; color: inherit; }
.ac-service-card:hover .ac-link-more .material-symbols-outlined { transform: translateX(4px); }
.ac-service-card h3 { font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); margin: 0; }
.ac-service-card p { font-size: 15px; line-height: 23px; color: var(--on-surface-variant); margin: 0; flex: 1; }

/* DonationTierCard — nivel de donación seleccionable */
.ac-tier-card {
  text-align: left; cursor: pointer; width: 100%; display: block;
  background: var(--surface-card); border: 2px solid var(--outline-variant);
  border-radius: var(--radius-lg); padding: 16px 18px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  font-family: var(--font-body);
}
.ac-tier-card.is-selected { background: var(--primary-fixed); border-color: var(--primary); }
.ac-tier-card__tier {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary);
}
.ac-tier-card.is-selected .ac-tier-card__tier { color: var(--primary); }
.ac-tier-card__tier .material-symbols-outlined { font-size: 16px; }
.ac-tier-card__amount { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 24px; color: var(--on-surface); }
.ac-tier-card.is-selected .ac-tier-card__amount { color: var(--primary); }
.ac-tier-card__period { font-size: 13px; color: var(--on-surface-variant); margin-left: 4px; }
.ac-tier-card__desc { font-size: 13px; line-height: 18px; color: var(--on-surface-variant); margin: 6px 0 0; }

/* Tarjeta foto + scrim (historias) */
.ac-photo-card {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 1 / 1;
}
.ac-photo-card img { width: 100%; height: 100%; object-fit: cover; }
.ac-photo-card__overlay {
  position: absolute; inset: 0; background: var(--scrim-bottom);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 28px;
}
.ac-photo-card blockquote { color: #fff; font-style: italic; font-size: 15px; line-height: 22px; margin: 0 0 12px; border: none; padding: 0; }
.ac-photo-card cite {
  color: rgba(255,255,255,0.85); font-style: normal; font-family: var(--font-display);
  font-weight: var(--weight-semibold); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Tarjeta translúcida sobre fondo oscuro */
.ac-dark-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  padding: 28px; border-radius: var(--radius-xl);
}
.ac-dark-card h3 { color: #fff; }
.ac-dark-card p { color: var(--text-on-dark-dim); }
.ac-dark-card__num { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 36px; color: var(--on-tertiary-container); }

/* ————————————————————————— CHIPS / FILTROS ————————————————————————— */
.ac-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px;
  border-radius: var(--radius-full); border: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest); color: var(--on-surface-variant);
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 14px;
  cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  text-decoration: none;
}
.ac-chip:hover { background: var(--surface-container-low); text-decoration: none; color: var(--on-surface-variant); }
.ac-chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ac-chip .material-symbols-outlined {
  font-size: 18px;
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
  -webkit-font-feature-settings: 'liga' !important;
  font-feature-settings: 'liga' 1 !important;
}
.ac-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Radio chips — selección con estilo ac-chip */
.ac-radio-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px;
  border-radius: var(--radius-full); border: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest); color: var(--on-surface-variant);
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 14px;
  cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.ac-radio-chip input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; }
.ac-radio-chip:hover { background: var(--surface-container-low); }
.ac-radio-chip:has(input:checked) { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ————————————————————————— ALERTAS ————————————————————————— */
.ac-alert {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--radius-lg); padding: 18px 20px;
  background: var(--primary-fixed); color: var(--on-primary-fixed);
  font-size: 14px; line-height: 21px;
}
.ac-alert .material-symbols-outlined { font-size: 22px; flex: none; }
.ac-alert--success { background: #e6f3e6; color: #1b4d1e; }
.ac-alert--error { background: var(--error-container); color: var(--on-error-container); }
.ac-alert--dark { background: rgba(255,255,255,0.08); color: var(--text-on-dark); border: 1px solid rgba(255,255,255,0.15); }
.ac-alert p { margin: 0; color: inherit; }

/* ————————————————————————— FORMULARIOS (placeholder) ————————————————————————— */
.ac-field { display: flex; flex-direction: column; gap: 6px; }
.ac-field label {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 13px; color: var(--on-surface);
}
.ac-field input[type="text"], .ac-field input[type="email"], .ac-field input[type="tel"],
.ac-field select, .ac-field textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--on-surface);
  /* --outline (4.25:1) en vez de --outline-variant (1.61:1) → cumple WCAG 1.4.11 (contraste de UI) */
  background: var(--surface-container-lowest); border: 1.5px solid var(--outline);
  border-radius: var(--radius-md); padding: 12px 14px; width: 100%; box-sizing: border-box;
  transition: border-color var(--dur-fast);
}
/* Foco del campo: borde + sombra de doble contraste (el outline global lo refuerza) */
.ac-field input:focus, .ac-field select:focus, .ac-field textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-fixed);
}
.ac-field__hint { font-size: 12px; color: var(--on-surface-variant); }
.ac-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 680px) { .ac-form-grid { grid-template-columns: 1fr; } }
.ac-consent,
.ac-field-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--on-surface-variant); }
.ac-consent input[type="checkbox"],
.ac-field-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); }

/* ————————————————————————— PÍLDORAS SOCIALES ————————————————————————— */
.ac-social-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px;
  border-radius: var(--radius-full); background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18); color: #fff !important; text-decoration: none;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 15px;
}
.ac-social-pill:hover { background: rgba(255,255,255,0.15); text-decoration: none; }
.ac-social-pill .material-symbols-outlined { font-size: 20px; }
.ac-social-pill--sm { height: 44px; /* touch target */ padding: 0 12px; font-size: 13px; background: rgba(255,255,255,0.06); border: none; }
.ac-social-pill--sm .material-symbols-outlined { font-size: 18px; }

/* ————————————————————————— CABECERA / NAVEGACIÓN ————————————————————————— */
.ac-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-container-lowest);
  box-shadow: var(--shadow-md); border-bottom: 1px solid var(--border-default);
}
body.admin-bar .ac-header { top: 32px; }
.ac-header__row1 {
  max-width: var(--container-max); margin: 0 auto; height: 88px;
  padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.ac-header__left { display: flex; align-items: center; gap: 12px; }
.ac-header__search {
  display: flex; align-items: center; gap: 8px; background: var(--surface-container-high);
  border-radius: var(--radius-full); padding: 0 16px; height: 42px; max-width: 220px;
}
.ac-header__search .material-symbols-outlined { font-size: 20px; color: var(--on-surface-variant); }
.ac-header__search input {
  border: none; outline: none; background: transparent; font-family: var(--font-body);
  font-size: 14px; color: var(--on-surface); width: 100%; min-width: 0;
}
.ac-header__account {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
  cursor: pointer; font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 14px; color: var(--on-surface-variant); white-space: nowrap; text-decoration: none;
}
.ac-header__account:hover { text-decoration: none; color: var(--primary); }
.ac-header__account .material-symbols-outlined { font-size: 22px; }
.ac-header__logo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 24px; text-decoration: none; }
.ac-header__logo:hover { text-decoration: none; }
.ac-header__logo img { height: 52px; width: auto; }
.ac-header__tagline {
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface-variant); white-space: nowrap;
}
.ac-header__actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.ac-burger {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-md); border: none; background: var(--surface-container-high);
  color: var(--primary); cursor: pointer;
}
.ac-burger .material-symbols-outlined { font-size: 26px; }
.ac-burger__icon-close { display: none; font-size: 22px; line-height: 1; font-weight: 300; }
.ac-burger[aria-expanded="true"] .ac-burger__icon { display: none; }
.ac-burger[aria-expanded="true"] .ac-burger__icon-close { display: inline; }

.ac-header__row2 { position: relative; border-top: 1px solid var(--border-subtle); background: var(--surface-container-lowest); }
.ac-header__row2-inner {
  max-width: var(--container-max); margin: 0 auto; height: 52px; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.ac-nav-links { display: flex; align-items: center; justify-content: center; }
.ac-nav-pillar {
  display: inline-flex; align-items: center; gap: 4px; height: 52px; padding: 0 18px;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 16px; font-weight: 400;
  color: var(--on-surface-variant); border-bottom: 3px solid transparent;
  transition: color var(--dur-fast); white-space: nowrap;
}
.ac-nav-pillar .material-symbols-outlined { font-size: 18px; transition: transform var(--dur-fast); }
.ac-nav-pillar.is-open { font-weight: 600; color: var(--primary); border-bottom-color: var(--primary); }
.ac-nav-pillar.is-open .material-symbols-outlined { transform: rotate(180deg); }

.ac-lang { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.ac-lang .material-symbols-outlined { font-size: 18px; color: var(--on-surface-variant); }
.ac-lang a, .ac-lang span.sep { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 13px; color: var(--on-surface-variant); text-decoration: none; }
.ac-lang span.sep { color: var(--outline-variant); }
.ac-lang a.is-active, .ac-lang a:hover { color: var(--primary); text-decoration: none; }

.ac-mega {
  display: none; position: absolute; top: 52px; left: var(--gutter); right: var(--gutter);
  background: var(--surface-container-lowest);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-xl); border: 1px solid var(--border-subtle);
  overflow: hidden; z-index: 60;
}
.ac-mega.is-open { display: block; }
.ac-mega__rainbow { height: 4px; background: var(--rainbow-gradient); }
.ac-mega__grid { display: grid; gap: 8px; padding: 20px; }
.ac-mega__item {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  border-radius: var(--radius-md); padding: 14px; text-decoration: none;
  transition: background var(--dur-fast);
}
.ac-mega__item:hover { background: var(--surface-container-low); text-decoration: none; }
.ac-mega__item .material-symbols-outlined { font-size: 24px; color: var(--secondary); flex: none; }
.ac-mega__item-title { display: block; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 15px; color: var(--on-surface); }
.ac-mega__item-desc { display: block; font-family: var(--font-body); font-size: 13px; color: var(--on-surface-variant); margin-top: 2px; }

/* Menú móvil */
.ac-mobile-menu {
  display: none; position: fixed; top: 88px; left: 0; right: 0; bottom: 0;
  background: var(--surface-container-lowest); z-index: 60; overflow-y: auto;
  padding: 20px var(--gutter) 40px;
}
.ac-mobile-menu.is-open { display: block; }
.ac-mobile-group { border-bottom: 1px solid var(--border-subtle); }
.ac-mobile-group__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 18px; color: var(--primary);
}
.ac-mobile-group__head .material-symbols-outlined { font-size: 24px; color: var(--on-surface-variant); transition: transform var(--dur-fast); }
.ac-mobile-group.is-open .ac-mobile-group__head .material-symbols-outlined { transform: rotate(180deg); }
.ac-mobile-group__items { display: none; flex-direction: column; padding-bottom: 8px; }
.ac-mobile-group.is-open .ac-mobile-group__items { display: flex; }
.ac-mobile-group__items a {
  display: flex; gap: 12px; align-items: center; padding: 12px 4px 12px 8px;
  font-family: var(--font-body); font-size: 16px; color: var(--on-surface); text-decoration: none;
}
.ac-mobile-group__items a .material-symbols-outlined { font-size: 22px; color: var(--secondary); flex: none; }
.ac-mobile-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

@media (max-width: 1100px) {
  .ac-header__row2, .ac-header__search, .ac-header__account, .ac-header__actions { display: none; }
  .ac-burger { display: inline-flex; }
}

/* ————————————————————————— PIE DE PÁGINA ————————————————————————— */
.ac-footer { background: var(--surface-inverse); color: #fff; padding: 64px 0 0; }
.ac-footer__grid {
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--gutter);
}
.ac-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ac-footer__brand img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.ac-footer__brand span { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 22px; }
.ac-footer__desc { color: var(--text-on-dark-dim); font-size: 14px; line-height: 22px; max-width: 280px; margin: 0 0 22px; }
.ac-footer h5, .ac-footer__section-title {
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-tertiary-container); margin: 0 0 22px;
}
.ac-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-footer ul a { color: rgba(255,255,255,0.7); font-size: 14px; text-decoration: none; }
.ac-footer ul a { display: inline-block; padding-block: 4px; } /* touch target WCAG 2.5.5 */
.ac-footer ul a:hover { color: #fff; }
.ac-footer__contact li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,0.7); font-size: 14px; }
.ac-footer__contact .material-symbols-outlined { font-size: 18px; color: var(--on-tertiary-container); flex: none; }
.ac-footer__tagline {
  max-width: var(--container-max); margin: 56px auto 0; padding: 40px var(--gutter) 0;
  border-top: 1px solid rgba(255,255,255,0.06); text-align: center;
}
.ac-footer__tagline-main {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: 18px; letter-spacing: 0.01em; color: rgba(255,255,255,0.9); margin: 0;
}
.ac-footer__legal {
  max-width: var(--container-max); margin: 6px auto 0; padding: 6px var(--gutter) 28px;
  text-align: center;
}
.ac-footer__legal p { color: rgba(255,255,255,0.6); font-size: 12px; margin: 0; } /* 0.4 = 4:1 fail; 0.6 = 7:1 ✓ */
@media (max-width: 1100px) { .ac-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 680px) { .ac-footer__grid { grid-template-columns: 1fr; } }

/* ————————————————————————— FAB DE AYUDA ————————————————————————— */
.ac-fab {
  position: fixed; right: 24px; bottom: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 22px;
  border-radius: var(--radius-full); background: var(--secondary); color: #fff !important;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 15px;
  text-decoration: none; box-shadow: var(--shadow-secondary);
  transition: transform var(--dur-fast) var(--ease-out);
}
.ac-fab:hover { transform: translateY(-2px); text-decoration: none; }
.ac-fab .material-symbols-outlined { font-size: 22px; }

/* ————————————————————————— UTILIDADES WP ————————————————————————— */
/* Que los grupos a ancho completo no hereden padding lateral del editor */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0 !important; }
.ac-aspect-3-4 { aspect-ratio: 3 / 4; }
.ac-aspect-1-1 { aspect-ratio: 1 / 1; }
.ac-rounded-img { border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-2xl); }
.ac-rounded-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -----------------------------------------------------------------------
 * Skip link — accesibilidad (v1.1.0)
 * Visible solo al recibir foco con teclado.
 * ----------------------------------------------------------------------- */
.ac-skip-link.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.ac-skip-link.screen-reader-text:focus {
  background-color: var(--surface-container, #fff);
  border-radius: 4px;
  clip: auto !important;
  clip-path: none;
  color: var(--primary, #310065);
  display: block;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 12px 20px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 10000;
}

/* ============================================================
   ACCESIBILIDAD — Lote 1 (objetivo WCAG 2.1 AA, varios AAA)
   Capa aditiva y no destructiva. Añade: anillo de foco visible
   por teclado, soporte de alto contraste del SO, motion reducido
   ampliado, áreas táctiles mínimas y enlaces no dependientes
   solo del color.
   ============================================================ */
:root {
  --focus-ring-color:         var(--primary);   /* #310065 → 15.9:1 sobre claro */
  --focus-ring-color-on-dark: #ffffff;
  --focus-ring-width:         3px;
  --focus-ring-offset:        2px;
}

/* WCAG 2.4.7 — Foco visible. :focus-visible solo lo muestra en navegación
   por teclado, sin robar el estilo al clic de ratón. */
a:focus-visible,
button:focus-visible,
.ac-btn:focus-visible,
.ac-burger:focus-visible,
.ac-header__account:focus-visible,
.ac-mobile-group__head:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[type="search"]:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}
/* Sobre superficies oscuras el anillo morado pierde contraste → blanco */
.ac-dark a:focus-visible,
.ac-dark button:focus-visible,
.ac-dark .ac-btn:focus-visible,
.ac-footer a:focus-visible,
.ac-footer button:focus-visible,
.ac-social-pill:focus-visible {
  outline-color: var(--focus-ring-color-on-dark);
}

/* WCAG 2.5.8 / 2.5.5 — Área táctil mínima en controles solo-icono */
.ac-burger,
.ac-icon-btn,
.ac-header__search button {
  min-width: 44px; min-height: 44px;
}

/* WCAG 1.4.1 — No depender solo del color: los enlaces dentro de texto
   corrido van subrayados (los .ac-btn y la navegación quedan excluidos). */
p a:not(.ac-btn):not(.ac-social-pill),
.ac-prose a:not(.ac-btn),
li a:not(.ac-btn):not(.ac-social-pill):not(.ac-nav__link) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* WCAG 1.4.13 — al pasar/enfocar, el subrayado se engrosa (señal redundante) */
p a:not(.ac-btn):hover,
p a:not(.ac-btn):focus-visible { text-decoration-thickness: 2px; }

/* Alto contraste del SO (Windows/macOS) — respeta los colores del sistema
   y garantiza bordes en controles que solo se distinguen por fondo. */
@media (forced-colors: active) {
  .ac-btn,
  .ac-field input, .ac-field select, .ac-field textarea,
  .ac-card, .ac-chip { border: 1px solid currentColor; }
  :focus-visible { outline: 3px solid; outline-offset: 2px; }
}

/* WCAG 2.3.3 — Motion reducido (amplía el bloque previo: también desactiva
   scroll suave y los parallax/scroll-driven). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-iteration-count: 1 !important;
  }
}

/* Utilidad para texto solo-lector reutilizable (además del skip-link) */
.ac-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   PRIVACIDAD — Banner de consentimiento de cookies (Lote 2)
   Privacy-first: rechazar pesa igual que aceptar. Accesible.
   ============================================================ */
.ac-cookie {
  position: fixed; inset: auto 0 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 9000;
  background: var(--surface-inverse); color: var(--text-on-dark);
  box-shadow: 0 -8px 30px rgba(26,18,40,0.25);
  animation: ac-cookie-in var(--dur-base, 240ms) ease both;
}
.ac-cookie[hidden] { display: none; }
@keyframes ac-cookie-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ac-cookie { animation: none; } }

.ac-cookie__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 20px var(--gutter); display: flex; flex-direction: column; gap: 12px;
}
.ac-cookie__title { font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-bold); color: #fff; margin: 0; }
.ac-cookie__desc { font-size: 14px; line-height: 21px; margin: 0; max-width: 70ch; }
.ac-cookie__desc a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.ac-cookie__prefs { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 0; }
.ac-cookie__opt { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; }
.ac-cookie__opt input { width: 18px; height: 18px; accent-color: var(--acathi-magenta-bright); }

.ac-cookie__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ac-cookie .ac-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.ac-cookie .ac-btn--outline:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ac-cookie__link {
  background: none; border: none; cursor: pointer; color: #fff;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 14px; text-decoration: underline; text-underline-offset: 2px; padding: 8px;
  min-height: 44px;
}

@media (min-width: 720px) {
  .ac-cookie__inner { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ac-cookie__desc { flex: 1 1 420px; }
  .ac-cookie__actions { margin-left: auto; }
}

/* ============================================================
   MARCA E INTERACCIÓN — Lote 3
   Estados de interacción coherentes y accesibles + firma de
   marca + cimientos de modo oscuro (opt-in, por tokens).
   ============================================================ */

/* --- Feedback de hover que NO depende solo del movimiento ---
   prefers-reduced-motion anula la DURACIÓN de la transición, pero el cambio
   de estado (brillo/fondo/sombra) sigue aplicándose al instante. Antes, los
   botones solo cambiaban con translateY → con motion reducido no daban
   ninguna pista visual. Ahora sí. */
.ac-btn {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* Botones sólidos (fondo de color): aclarar al pasar, oscurecer al pulsar. */
.ac-btn:hover  { filter: brightness(1.06); }
.ac-btn:active { transform: translateY(0) scale(0.98); filter: brightness(0.96); box-shadow: var(--shadow-md); }

/* Botones de superficie clara: brightness no se nota → fondo/sombra. */
.ac-btn--outline { border-color: var(--outline); } /* 4.25:1 — cumple WCAG 1.4.11 */
.ac-btn--outline:hover,
.ac-btn--ghost:hover,
.ac-btn--tonal:hover { filter: none; box-shadow: var(--shadow-sm); }
.ac-btn--outline:hover { background: var(--primary-fixed); border-color: var(--primary); }
.ac-btn--ghost:hover   { background: var(--primary-fixed); }
.ac-btn--tonal:hover   { background: var(--primary-fixed-dim); }

/* --- Firma de marca: filete arcoíris reutilizable (uso opcional) ---
   <hr class="ac-rainbow-rule"> o como acento bajo un eyebrow. */
.ac-rainbow-rule {
  height: 4px; width: 100%; border: 0; margin: 0;
  border-radius: var(--radius-full); background: var(--rainbow-gradient);
}
.ac-rainbow-rule--short { width: 56px; }

/* --- Cimientos de MODO OSCURO (opt-in) ---
   Desactivado por defecto. Se activa con <html data-theme="dark"> o un
   toggle. Solo redefine tokens → todos los componentes lo heredan.
   ⚠️ Requiere QA de contraste por pantalla antes de exponerlo a usuarios. */
[data-theme="dark"] {
  --background:                #141218;
  --on-background:             #e6e1e9;
  --surface:                   #141218;
  --surface-container-lowest:  #0f0d13;
  --surface-container-low:     #1d1a22;
  --surface-container:         #211e26;
  --surface-container-high:    #2b2830;
  --surface-container-highest: #36333b;
  --surface-variant:           #49454f;
  --on-surface:                #e6e1e9;
  --on-surface-variant:        #cac4d0;
  --outline:                   #948f99;
  --outline-variant:           #49454f;

  --primary:                   #d7baff; /* morado claro legible sobre oscuro */
  --on-primary:                #2a0a4f;
  --secondary:                 #ffb0cc;
  --on-secondary:              #5e1133;
  --link:                      #ffb0cc;

  --surface-dim:               #141218;
  --surface-bright:            #3b383e;
  --surface-tint:              #d7baff;
  --inverse-surface:           #e6e1e9;
  --inverse-on-surface:        #322f35;

  --primary-container:         #4a148c;
  --on-primary-container:      #eddcff;
  --secondary-container:       #8d0051;
  --on-secondary-container:    #ffd9e4;

  --error:                     #ffb4ab;
  --on-error:                  #690005;
  --error-container:           #93000a;
  --on-error-container:        #ffdad6;
  --success:                   #7dc47f;

  --text-on-dark:              rgba(255,255,255,0.87);
  --text-on-dark-dim:          rgba(255,255,255,0.64);
}
/* ── Dark-mode toggle ──────────────────────────────────────────── */
.ac-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--outline-variant);
  background: var(--surface-container-low);
  color: var(--primary); cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.ac-theme-toggle:hover {
  background: var(--primary-fixed);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(100,60,180,0.18);
  transform: scale(1.08);
}
.ac-theme-toggle:active { transform: scale(0.95); }
.ac-theme-toggle .material-symbols-outlined {
  font-size: 20px; transition: opacity 0.2s, transform 0.3s; position: absolute;
}
.ac-theme-toggle__icon--dark  { opacity: 1; transform: rotate(0deg) scale(1); }
.ac-theme-toggle__icon--light { opacity: 0; transform: rotate(90deg) scale(0.6); }
[data-theme='dark'] .ac-theme-toggle__icon--dark  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
[data-theme='dark'] .ac-theme-toggle__icon--light { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme='dark'] .ac-theme-toggle {
  background: var(--surface-container-high); border-color: var(--outline-variant); color: #fbbf24;
}
[data-theme='dark'] .ac-theme-toggle:hover {
  background: rgba(251,191,36,0.15); border-color: #fbbf24; box-shadow: 0 2px 8px rgba(251,191,36,0.25);
}
/* ── /Dark-mode toggle ─────────────────────────────────────────── */