/* ========================================
   CARDS MODELS - Sistema Modular de Cards
   Basado en components/css/styles.css
   Adaptado para compatibilidad con public/css/style.css
   ======================================== */

/* ========================================
   VARIABLES CSS - Cards Models
   ======================================== */

:root {
  /* === Cards Models - Componentes === */
  --cm-card-radius: 20px;
  --cm-card-padding: 18px;
  --cm-card-width: 265px;
  --cm-card-min-height: 300px;
  --cm-card-bg-overlay: linear-gradient(135deg, #3e7bfe, rgba(255, 48, 0, 1));
  --cm-card-bg-overlay-opacity: 0.1;

  /* === Cards Models - Buttons === */
  --cm-btn-radius: 12px;
  --cm-btn-padding-y: 0.5rem;
  --cm-btn-padding-x: 1.5rem;
  --cm-btn-gradient-blue: linear-gradient(135deg, #1157ee, #1d4ed8);
  --cm-btn-gradient-orange: linear-gradient(135deg, rgb(255, 100, 14), rgb(255, 48, 0));
  --cm-btn-shadow: 0 4px 12px -2px rgba(17, 87, 238, 0.4);
  --cm-btn-shadow-hover: 0 10px 20px -5px rgba(255, 87, 34, 0.5);

  /* === Cards Models - Efectos === */
  --cm-gradient-glow: linear-gradient(135deg, rgba(255, 61, 2, 0.3), rgba(17, 87, 238, 0.3));
  /* --cm-gradient-border: linear-gradient(135deg, #3e7bfe, rgba(255, 48, 0, 1)); */

  /* === Cards Models - Spacing === */
  --cm-grid-gap: 20px;
  --cm-section-padding-y: 60px;
  --cm-section-padding-x: 20px;
}

/* === Dark Mode Variables === */
html.dark_mode {
  --cm-card-bg-overlay: linear-gradient(135deg, rgba(255, 0, 55, 1), rgba(0, 17, 255, 1));
  --cm-card-bg-overlay-opacity: 0.3;
  --cm-gradient-border: linear-gradient(135deg, rgba(255, 0, 55, 1), rgba(29, 78, 216, 1));
  --cm-gradient-glow: linear-gradient(135deg, rgba(255, 0, 55, 1), rgba(0, 17, 255, 1));
}

/* ========================================
   COMPONENTES BASE REUTILIZABLES
   ======================================== */

/* === Card Base === */
.cm-card-base {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--cm-card-radius);
  padding: var(--cm-card-padding);
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
  width: 100%;
  max-width: none;
  flex-shrink: 0;
  min-height: var(--cm-card-min-height);
}  

.cm-card-base:link,
.cm-card-base:visited {
  text-decoration: none !important;
  color: inherit;
}

.cm-card-base:active {
  transform: translateY(-2px);
}

.cm-card-base:focus {
  outline: none;
}

.cm-card-base * {
  text-decoration: none !important;
}

/* === Button Base === */
.cm-btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cm-btn-padding-y) var(--cm-btn-padding-x);
  border-radius: var(--cm-btn-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  gap: 0.625rem;
  letter-spacing: 0.01em;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-top: auto;
  z-index: 1;
}

.cm-btn-base:active {
  transform: translateY(0);
}

/* === Grid Layout Base === */
.cm-grid-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cm-grid-gap);
  justify-content: center;
}

/* === Section Base === */
.cm-section-base {
  max-width: 1500px;
  margin: var(--cm-section-padding-y) auto;
  padding: 0 var(--cm-section-padding-x);
}

/* === Card Wrapper (para efectos externos) === */
.cm-card-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  transition: transform 0.3s ease;
}

/* ========================================
   UTILITARIAS - MAX WIDTH
   ======================================== */

/* Anchos específicos en pixels */
.cm-mw-200 { max-width: 200px !important; }
.cm-mw-265 { max-width: 265px !important; }
.cm-mw-300 { max-width: 300px !important; }
.cm-mw-320 { max-width: 320px !important; }
.cm-mw-350 { max-width: 350px !important; }
.cm-mw-400 { max-width: 400px !important; }
.cm-mw-450 { max-width: 450px !important; }
.cm-mw-500 { max-width: 500px !important; }
.cm-mw-600 { max-width: 600px !important; }
.cm-mw-full { max-width: none !important; }

/* Anchos semánticos */
.cm-mw-xs { max-width: 200px !important; }
.cm-mw-sm { max-width: 265px !important; }
.cm-mw-md { max-width: 350px !important; }
.cm-mw-lg { max-width: 400px !important; }
.cm-mw-xl { max-width: 500px !important; }
.cm-mw-2xl { max-width: 600px !important; }

/* ========================================
   EFECTOS REUTILIZABLES
   ======================================== */

/* === Efecto: Borde con gradiente (hover) === */
.cm-effect-border-gradient::after {
  border-radius: var(--cm-card-radius);
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: var(--cm-gradient-border);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.cm-effect-border-gradient:hover::after {
  opacity: 1;
}

/* === Efecto: Overlay con gradiente (hover) === */
.cm-effect-overlay-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--cm-card-bg-overlay);
  opacity: 0;
  transition: var(--transition-smooth);
  z-index: -1;
}

.cm-effect-overlay-gradient:hover::before,
.cm-effect-overlay-gradient.active::before {
  opacity: var(--cm-card-bg-overlay-opacity);
}

/* === Efecto: Shadow glow externo (hover) === */
.cm-effect-shadow-glow::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  background: var(--cm-gradient-glow);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
  z-index: -1;
  pointer-events: none;
}

.cm-effect-shadow-glow:hover {
  transform: translateY(-4px);
}

.cm-effect-shadow-glow:hover::before {
  opacity: 1;
}

/* === Efecto COMBINADO: Shadow glow + Border gradient === */
.cm-effect-glow-border::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  background: var(--cm-gradient-glow);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
  z-index: -1;
  pointer-events: none;
}

.cm-effect-glow-border::after {
  border-radius: var(--cm-card-radius);
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: var(--cm-gradient-border);
  -webkit-mask:
    linear-gradient(#ff0000 0 0) content-box,
    linear-gradient(#ff0000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#ff0000 0 0) content-box,
    linear-gradient(#ff0000 0 0);
  mask-composite: exclude;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.cm-effect-glow-border:hover {
  transform: translateY(-4px);
}

.cm-effect-glow-border:hover::before {
  opacity: 1;
}

.cm-effect-glow-border:hover::after {
  opacity: 1;
}

/* === Efecto: Elevación en hover === */
.cm-effect-lift:hover {
  color: var(--primary-color);
  transform: translateY(-0px);
  box-shadow: var(--shadow-lg);
}

.cm-effect-lift:focus:not(:hover) {
  transform: none;
  box-shadow: var(--shadow-md);
}

/* === Efecto: Imagen sube en hover === */
.cm-effect-image-lift img {
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.cm-effect-image-lift:hover img {
  transform: translateY(-4px);
}

.cm-effect-image-lift:focus:not(:hover) img {
  transform: scale(1);
}

/* === Efecto: Botón con transición de gradiente === */
.cm-effect-btn-gradient-shift::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--cm-btn-gradient-orange);
  border-radius: var(--cm-btn-radius);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.cm-effect-btn-gradient-shift::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
  z-index: 1;
}

/* === Aplicar efectos al hacer hover en el card === */
.cm-card-base:hover .cm-effect-btn-gradient-shift::before {
  left: 100%;
}

.cm-card-base:hover .cm-effect-btn-gradient-shift::after {
  opacity: 1;
}

.cm-card-base:hover .cm-effect-btn-gradient-shift {
  transform: translateY(-2px);
  box-shadow: var(--cm-btn-shadow-hover);
}

/* ========================================
   VARIANTES DE BOTONES
   ======================================== */

/* === Botón con gradiente azul === */
.cm-btn-gradient-blue {
  background: var(--cm-btn-gradient-blue);
  color: #fff;
  box-shadow: var(--cm-btn-shadow);
}

/* === Botón con gradiente naranja === */
.cm-btn-gradient-orange {
  background: var(--cm-btn-gradient-orange);
  color: #fff;
  box-shadow: var(--cm-btn-shadow-hover);
}

/* ========================================
   COMPONENTES ESPECÍFICOS
   ======================================== */

/* === Título de sección === */
.cm-section-title {
  font-size: 1.6rem;
  margin-bottom: 25px;
  font-weight: 600;
}

/* === Descripción de card === */
.cm-card-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  margin-top: 8px;
  margin-bottom: 16px;
  flex-grow: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* === Imagen de card === */
.cm-card-image {
  width: 100%;
  max-width: 150px;
  max-height: 150px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* === Tablet & Mobile === */
@media (max-width: 768px) {
  :root {
    --cm-grid-gap: 16px;
    --cm-section-padding-x: 16px;
  }

  .cm-card-wrapper {
    width: calc(50% - 8px);
  }

  .cm-card-base {
    width: 100%;
    max-width: none;
  }

  .cm-card-image {
    max-width: 150px;
    max-height: 200px;
  }
}

/* === Small Mobile === */
@media (max-width: 480px) {
  .cm-card-wrapper {
    width: calc(50% - 8px);
  }

  .cm-card-base {
    width: 100%;
  }

  .cm-card-image {
    max-width: 120px;
    max-height: 160px;
  }

  .cm-btn-base {
    font-size: 0.85rem;
    padding: 7px 15px;
  }
}