/* =============================================================================
   CC CHASSIS — estructura y layout
   -----------------------------------------------------------------------------
   Esto es el esqueleto. No impone estética: ni un color propio, ni una
   tipografía, ni una sombra literal. Todo lo que se ve viene de los tokens del
   tema hijo.

   Reglas que cumple este archivo:
     · Cero !important
     · Cero valores estéticos literales (solo var(--cc-*) con fallback neutro)
     · Especificidad máxima 2 niveles
     · Mobile-first

   BREAKPOINTS — CSS no admite var() dentro de @media. Los valores literales de
   abajo son un espejo de --cc-bp-* en tokens/brand.css:
     sm 480px · md 768px · lg 1024px · xl 1440px
   Si cambian allá, cambian aquí. Es la única duplicación deliberada del sistema.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. RESET MÍNIMO
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* clip (no hidden): contiene el .cc-full-bleed sin romper position: sticky */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
}

img,
svg,
video,
canvas,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Foco siempre visible. Nunca outline: none sin reemplazo. */
:focus-visible {
  outline: 2px solid var(--cc-brand, currentColor);
  outline-offset: 3px;
  border-radius: var(--cc-radius-sm, 2px);
}

/* Las anclas no quedan bajo un header sticky */
[id] {
  scroll-margin-top: var(--cc-anchor-offset, 6rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* -----------------------------------------------------------------------------
   2. CONTENEDORES
   -------------------------------------------------------------------------- */

.cc-container {
  width: 100%;
  max-width: var(--cc-container, 1200px);
  margin-inline: auto;
  padding-inline: var(--cc-gutter, 1.25rem);
}

.cc-container--narrow {
  max-width: calc(var(--cc-container, 1200px) * 0.62);
}

.cc-container--wide {
  max-width: calc(var(--cc-container, 1200px) * 1.2);
}

.cc-container--full {
  max-width: none;
}

/* Rompe el contenedor a todo el ancho desde adentro.
   Requiere el overflow-x: clip del reset para no generar scroll lateral. */
.cc-full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: none;
}

/* -----------------------------------------------------------------------------
   3. SECCIONES
   -------------------------------------------------------------------------- */

.cc-section {
  position: relative;
  padding-block: var(--cc-section-y, 4rem);
  background-color: var(--cc-bg, transparent);
  color: var(--cc-ink, inherit);
}

.cc-section--tight {
  padding-block: calc(var(--cc-section-y, 4rem) * 0.55);
}

.cc-section--flush {
  padding-block: 0;
}

.cc-section--flush-top {
  padding-block-start: 0;
}

.cc-section--flush-bottom {
  padding-block-end: 0;
}

.cc-section--alt {
  background-color: var(--cc-bg-alt, transparent);
}

/* SCOPES DE TOKEN
   Una sección oscura no usa colores distintos: redefine los tokens en su
   scope. Los bloques de adentro no saben ni necesitan saber dónde están.

   POR QUÉ EN DOS NIVELES — no juntar estas reglas en un solo selector.
   Las variables CSS se sustituyen DESPUÉS de la cascada, usando el valor
   final que el token tiene en ese mismo elemento. Si --cc-bg: var(--cc-ink)
   y --cc-ink: var(--cc-ink-inverse) se declaran juntos, --cc-bg termina
   valiendo el inverso: fondo y texto quedan del mismo color y la sección se
   ve en blanco. Por eso --cc-ink se voltea un nivel más abajo, donde ya no
   lo consume nadie del mismo elemento. */
.cc-section--dark {
  --cc-bg: var(--cc-ink);
  --cc-bg-alt: color-mix(in srgb, var(--cc-ink) 88%, var(--cc-ink-inverse));
  --cc-surface: color-mix(in srgb, var(--cc-ink) 92%, var(--cc-ink-inverse));
  --cc-line: color-mix(in srgb, var(--cc-ink-inverse) 18%, transparent);
  color: var(--cc-ink-inverse);
}

.cc-section--dark > * {
  --cc-ink: var(--cc-ink-inverse);
  --cc-ink-soft: color-mix(in srgb, var(--cc-ink-inverse) 72%, transparent);
}

.cc-section--tinted {
  --cc-bg: var(--cc-bg-alt);
  --cc-surface: color-mix(in srgb, var(--cc-bg-alt) 60%, var(--cc-ink-inverse));
}

/* -----------------------------------------------------------------------------
   4. GRID
   -------------------------------------------------------------------------- */

.cc-grid {
  display: grid;
  grid-template-columns: repeat(var(--cc-cols, 1), minmax(0, 1fr));
  gap: var(--cc-grid-gap, var(--cc-gutter, 1.25rem));
}

/* Ajuste automático: no necesita breakpoints */
.cc-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cc-col-min, 18rem), 100%), 1fr));
}

/* Los modificadores numéricos solo entran desde md.
   Por debajo, todo es una columna. */
@media (min-width: 768px) {
  .cc-grid--2 {
    --cc-cols: 2;
  }

  .cc-grid--3 {
    --cc-cols: 3;
  }

  .cc-grid--4 {
    --cc-cols: 4;
  }

  .cc-grid--12 {
    --cc-cols: 12;
  }

  .cc-span-2 {
    grid-column: span 2;
  }

  .cc-span-3 {
    grid-column: span 3;
  }

  .cc-span-4 {
    grid-column: span 4;
  }

  .cc-span-5 {
    grid-column: span 5;
  }

  .cc-span-6 {
    grid-column: span 6;
  }

  .cc-span-8 {
    grid-column: span 8;
  }

  .cc-span-full {
    grid-column: 1 / -1;
  }
}

/* --keep: mantiene las columnas también en móvil (pares de iconos, logos…) */
.cc-grid--keep.cc-grid--2 {
  --cc-cols: 2;
}

.cc-grid--keep.cc-grid--3 {
  --cc-cols: 3;
}

.cc-grid--keep.cc-grid--4 {
  --cc-cols: 4;
}

/* -----------------------------------------------------------------------------
   5. FLUJO (flex)
   -------------------------------------------------------------------------- */

.cc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cc-stack-gap, var(--cc-space-4, 1rem));
}

.cc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-row-gap, var(--cc-space-4, 1rem));
}

.cc-row--nowrap {
  flex-wrap: nowrap;
}

/* Separación entre hermanos: para bloques de texto largo y campos rich */
.cc-flow > * + * {
  margin-block-start: var(--cc-flow-gap, var(--cc-space-4, 1rem));
}

.cc-items-start {
  align-items: flex-start;
}

.cc-items-center {
  align-items: center;
}

.cc-items-end {
  align-items: flex-end;
}

.cc-items-stretch {
  align-items: stretch;
}

.cc-justify-start {
  justify-content: flex-start;
}

.cc-justify-center {
  justify-content: center;
}

.cc-justify-end {
  justify-content: flex-end;
}

.cc-justify-between {
  justify-content: space-between;
}

.cc-text-center {
  text-align: center;
}

.cc-text-start {
  text-align: start;
}

.cc-text-end {
  text-align: end;
}

/* -----------------------------------------------------------------------------
   6. MEDIA
   -------------------------------------------------------------------------- */

.cc-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--cc-ratio, 16 / 9);
  border-radius: var(--cc-radius, 0);
}

.cc-media > img,
.cc-media > video,
.cc-media > picture {
  width: 100%;
  height: 100%;
  object-fit: var(--cc-fit, cover);
  object-position: var(--cc-fit-pos, center);
}

.cc-media--contain {
  --cc-fit: contain;
}

.cc-media--square {
  --cc-ratio: 1 / 1;
}

.cc-media--portrait {
  --cc-ratio: 3 / 4;
}

.cc-media--wide {
  --cc-ratio: 21 / 9;
}

.cc-media--free {
  aspect-ratio: auto;
}

/* Capa sobre imagen. La opacidad y el color salen del token, no de aquí. */
.cc-media--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--cc-overlay, transparent);
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   7. UTILIDADES
   -------------------------------------------------------------------------- */

.cc-relative {
  position: relative;
}

.cc-clip {
  overflow: clip;
}

.cc-isolate {
  isolation: isolate;
}

.cc-sticky {
  position: sticky;
  top: var(--cc-sticky-top, var(--cc-space-6, 2rem));
}

.cc-balance {
  text-wrap: balance;
}

.cc-pretty {
  text-wrap: pretty;
}

/* Oculto en todos los tamaños. Para ocultar por breakpoint ver la sección 8. */
.cc-hidden {
  display: none;
}

/* Accesibilidad: visible solo para lectores de pantalla */
.cc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cc-skip-link {
  position: absolute;
  inset-inline-start: var(--cc-space-4, 1rem);
  inset-block-start: calc(var(--cc-space-4, 1rem) * -1);
  z-index: 999;
  padding: var(--cc-space-3, 0.75rem) var(--cc-space-5, 1.5rem);
  background-color: var(--cc-surface, transparent);
  color: var(--cc-ink, inherit);
  border-radius: var(--cc-radius-sm, 0);
  transform: translateY(-200%);
}

.cc-skip-link:focus-visible {
  transform: translateY(calc(var(--cc-space-4, 1rem) * 2));
}

/* Invertir el orden de columnas sin tocar el HTML */
.cc-order-first {
  order: -1;
}

.cc-order-last {
  order: 1;
}

/* -----------------------------------------------------------------------------
   8. VARIANTES RESPONSIVE
   -------------------------------------------------------------------------- */

/* Nombres explícitos a propósito: "below" = se oculta en pantallas pequeñas,
   "from" = se oculta en pantallas grandes. Sin ambigüedad al leer el HTML. */

@media (max-width: 767.98px) {
  .cc-hide-below-md {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  .cc-hide-below-lg {
    display: none;
  }
}

@media (min-width: 768px) {
  .cc-hide-from-md {
    display: none;
  }

  .cc-md-order-first {
    order: -1;
  }

  .cc-md-order-last {
    order: 1;
  }
}

@media (min-width: 1024px) {
  .cc-hide-from-lg {
    display: none;
  }
}