/**
 * Cometa Taller · Estilos Base y Tipografía (Sección 6.2 del Brief)
 */

/* ==========================================================================
   1. Tipografías Autoalojadas (@font-face)
   ========================================================================== */

/* Karla (Lectura / Textos de cuerpo) */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fuentes/karla-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fuentes/karla-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fuentes/karla-700.woff2') format('woff2');
}

/* Bricolage Grotesque (Titulares / Impacto) */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fuentes/bricolage-grotesque-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fuentes/bricolage-grotesque-800.woff2') format('woff2');
}

/* IBM Plex Mono (Datos, Medidas, Precios, Migas) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fuentes/ibm-plex-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fuentes/ibm-plex-mono-600.woff2') format('woff2');
}

/* ==========================================================================
   2. Reset Mínimo y Accesibilidad
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ct-texto);
  font-weight: 400;
  color: var(--ct-crema);
  background-color: var(--ct-violeta);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Foco visible: Anillo Sol de 3 px con 2 px de separación (Sección 7.9) */
:focus-visible {
  outline: 3px solid var(--ct-sol);
  outline-offset: 2px;
}

a {
  color: var(--ct-sol);
  text-decoration: none;
  transition: color var(--ct-dur-micro) var(--ct-ease);
}

a:hover {
  color: var(--ct-crema);
}

/* ==========================================================================
   2.1. Cascada Sistemática de Superficies Claras (Regla 6.5)
   Toda superficie clara declara color: var(--ct-tinta).
   Hijos de texto heredan (color: inherit). Cero crema o sol sobre fondo claro.
   ========================================================================== */
.card, .tile, .ct-card, .ct-tile, .ct-catalogo-item, .ct-catalogo-tile,
.ct-banda--sol, .ct-banda--lila, .ct-banda-inclinada--sol, .ct-banda-inclinada--lila,
.ct-banda-sol, .ct-banda-lila,
.ct-tienda-caminos-wrap, .ct-tienda-caminos-banda, .ct-camino-card,
.ct-carrito-resumen-card, .ct-checkout-resumen-card,
.ct-carrito-items-card, .ct-checkout-card, .ct-conf-items-card, .ct-conf-card-cambio,
.ct-boletin, .ct-boletin-banda,
.ct-encaja-banda, .ct-encaja-inner, .ct-encaja-card,
.ct-filtros-wrap, .ct-filtros,
[data-superficie="clara"], [data-superficie="sol"], [data-superficie="lila"] {
  color: var(--ct-tinta);
}

:where(.card, .tile, .ct-card, .ct-tile, .ct-catalogo-item,
.ct-banda--sol, .ct-banda--lila, .ct-banda-inclinada--sol, .ct-banda-inclinada--lila,
.ct-banda-sol, .ct-banda-lila,
.ct-carrito-resumen-card, .ct-checkout-resumen-card,
.ct-carrito-items-card, .ct-checkout-card, .ct-conf-items-card, .ct-conf-card-cambio,
.ct-boletin, .ct-boletin-banda,
.ct-encaja-banda, .ct-encaja-inner, .ct-encaja-card,
.ct-filtros-wrap, .ct-filtros,
[data-superficie="clara"], [data-superficie="sol"], [data-superficie="lila"]) :where(a:not([class*="btn"]):not(.button):not([role="button"]):not(.ct-quick-add):not(.ct-filtro-pill):not(.ct-catalogo-item):not(.ct-cuenta-nav__enlace)) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
}

:where(.card, .tile, .ct-card, .ct-tile, .ct-catalogo-item,
.ct-banda--sol, .ct-banda--lila, .ct-banda-inclinada--sol, .ct-banda-inclinada--lila,
.ct-banda-sol, .ct-banda-lila,
.ct-carrito-resumen-card, .ct-checkout-resumen-card,
.ct-carrito-items-card, .ct-checkout-card, .ct-conf-items-card, .ct-conf-card-cambio,
.ct-boletin, .ct-boletin-banda,
.ct-encaja-banda, .ct-encaja-inner, .ct-encaja-card,
.ct-filtros-wrap, .ct-filtros,
[data-superficie="clara"], [data-superficie="sol"], [data-superficie="lila"]) a:not([class*="btn"]):not(.button):not([role="button"]):not(.ct-quick-add):not(.ct-filtro-pill):not(.ct-catalogo-item):hover {
  color: #000;
}

/* ==========================================================================
   SISTEMA CANÓNICO DE BOTONES (Sección 6.3)
   Los botones declaran su propio color directamente.
   Una declaración directa SIEMPRE vence a un valor heredado sin usar !important.
   ========================================================================== */
.ct-btn--tinta,
.ct-btn-ink,
.btn-ink,
.ct-conf-btn-cambio,
.ct-checkout-btn-pagar,
.ct-carrito-btn-pagar,
.ct-compra-btn-anadir,
.ct-encaja-card__btn,
.ct-crosssell-card .ct-btn {
  background-color: var(--ct-tinta);
  color: var(--ct-sol);
  border: none;
  text-decoration: none;
}

.ct-btn--tinta:hover,
.ct-btn--tinta:focus-visible,
.ct-btn-ink:hover,
.ct-btn-ink:focus-visible,
.btn-ink:hover,
.btn-ink:focus-visible,
.ct-conf-btn-cambio:hover,
.ct-conf-btn-cambio:focus-visible,
.ct-checkout-btn-pagar:hover,
.ct-checkout-btn-pagar:focus-visible,
.ct-carrito-btn-pagar:hover,
.ct-carrito-btn-pagar:focus-visible,
.ct-compra-btn-anadir:hover,
.ct-compra-btn-anadir:focus-visible,
.ct-encaja-card__btn:hover,
.ct-encaja-card__btn:focus-visible,
.ct-crosssell-card .ct-btn:hover {
  background-color: #000;
  color: var(--ct-sol);
}

.ct-btn--vio {
  background-color: var(--ct-violeta);
  color: var(--ct-sol);
  border: none;
  text-decoration: none;
}

.ct-btn--vio:hover,
.ct-btn--vio:focus-visible {
  background-color: #381e6b;
  color: var(--ct-sol);
}

.ct-btn--sol,
.btn-sol {
  background-color: var(--ct-sol);
  color: var(--ct-tinta);
  border: none;
  text-decoration: none;
}

.ct-btn--sol:hover,
.ct-btn--sol:focus-visible,
.btn-sol:hover,
.btn-sol:focus-visible {
  background-color: #f7d63e;
  color: var(--ct-tinta);
}

.ct-quick-add {
  background-color: var(--col-btn-fondo, var(--ct-tinta));
  color: var(--col-btn-tinta, var(--ct-sol));
  border: none;
  text-decoration: none;
}

.ct-quick-add:hover,
.ct-quick-add:focus-visible {
  opacity: 0.92;
}

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

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

/* ==========================================================================
   3. Escala Tipográfica (Sección 6.2)
   ========================================================================== */
h1, h2, h3, h4, h5, h6, .ct-titular {
  font-family: var(--ct-titular);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  margin: 0;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

h1 {
  font-size: clamp(48px, 8vw, 116px);
  line-height: 0.84;
}

h2 {
  font-size: clamp(36px, 5.5vw, 76px);
  line-height: 0.89;
}

h3 {
  font-size: clamp(24px, 3vw, 42px);
  line-height: 0.92;
}

p {
  font-family: var(--ct-texto);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ct-crema-84);
}

/* Regla: Karla NUNCA en mayúsculas */
p, .ct-texto-lectura {
  text-transform: none;
}

/* Datos y Monospace */
.mono, .ct-mono {
  font-family: var(--ct-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Precios (Regla 7.7: NUNCA parten) */
.ct-precio {
  font-family: var(--ct-mono);
  font-weight: 600;
  color: var(--ct-sol);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
}

/* ==========================================================================
   4. Movimiento Base (CSS Ambiental - Sección 6.4)
   ========================================================================== */
@keyframes ct-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes ct-flotar {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-20px); }
}

@keyframes ct-girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ct-ticker {
  display: flex;
  width: max-content;
  animation: ct-slide 30s linear infinite;
  will-change: transform;
}

.ct-flota {
  animation: ct-flotar 8s ease-in-out infinite;
}

.ct-gira {
  animation: ct-girar 90s linear infinite;
}

/* Prevensión de mareo / Accesibilidad de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .ct-ticker,
  .ct-flota,
  .ct-gira {
    animation: none !important;
  }
}

/* ==========================================================================
   5. Andamiaje de Animación GSAP (Sección 8.1)
   ========================================================================== */
/* Los estados iniciales de animación los gestiona GSAP con gsap.from/fromTo según Sección 8.1 y 8.6 */
.ct-js [data-ct-anim] {
  will-change: transform, opacity;
}