@import "tailwindcss";
@import "tw-animate-css";

@custom-variant xs (@media (min-width: 480px));
@custom-variant sm (@media (min-width: 640px));
@custom-variant md (@media (min-width: 768px));
@custom-variant lg (@media (min-width: 1024px));
@custom-variant xl (@media (min-width: 1280px));
@custom-variant 2xl (@media (min-width: 1440px));

@theme {
  --color-contigo-verde: #75d3a8;
  --color-contigo-violeta: #7f0689;
  --color-contigo-violeta-oscuro: #572c5f;
  --color-contigo-blanco: #f8f8f8;
  --color-contigo-gris-claro: #f2f2f2;
  --color-contigo-negro: #101820;
  --font-poppins: var(--font-poppins);
  --animate-shine: shine 5s linear infinite;

  @keyframes shine {
    0% {
      background-position: 100%;
    }
    100% {
      background-position: -100%;
    }
  }
}

@media (min-width: 568px) and (orientation: landscape) {
  html {
    @apply text-[min(1.85vh,var(--vh))];
  }
}
:root {
  --vh: 100%;
}
@media (min-height: 1200px) {
  :root {
    --vh: 150%;
  }
}
@media (min-height: 2000px) {
  :root {
    --vh: 225%;
  }
}

@layer base {
  * {
    @apply box-border antialiased font-poppins leading-[1.2];
  }
  html::-webkit-scrollbar {
    @apply hidden;
  }
  html,
  body {
    @apply size-full bg-contigo-blanco [scrollbar-width:none] [-ms-overflow-style:none];
  }
  a,
  button {
    @apply transition-colors;
  }
  button {
    @apply cursor-pointer;
  }
}

@utility contigo-link-primary {
  @apply text-contigo-violeta hover:text-contigo-verde;
}
@utility contigo-link-secondary {
  @apply text-white hover:text-contigo-violeta;
}
@utility contigo-link-tertiary {
  @apply text-white hover:text-contigo-verde;
}
@utility contigo-container {
  @apply w-[90%] max-w-[79rem] mx-auto;
}

@utility scrollbar-contigo {
  @apply [scrollbar-width:thin] [scrollbar-color:_var(--color-contigo-verde)_transparent];
}
@utility contigo-rounded {
  @apply relative before:content-[''] before:w-full before:absolute before:h-8 lg:before:h-[4.5rem] before:bg-contigo-blanco before:top-0 before:left-0 before:rounded-bl-[3rem] before:rounded-br-[3rem] before:z-2;
}
@utility contigo-title {
  @apply text-contigo-negro font-medium;
}
@utility contigo-title-homepage {
  @apply text-[min(8vw,1.75rem)] md:text-[min(4vw,3.5rem)] text-center;
}
@utility contigo-section-title-contigo {
  @apply text-[min(7vw,1.5rem)] md:text-[min(4vw,3.375rem)] font-medium;
}

/* Estilos para contenido rich text (innerHTML) */
.rich-text h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  line-height: 1.2;
}

.rich-text h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
  line-height: 1.3;
}

.rich-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  line-height: 1.4;
}

.rich-text p {
  font-size: 1.25rem;
  line-height: 1.6;
}

.rich-text strong,
.rich-text b {
  font-weight: 700;
}

.rich-text em,
.rich-text i {
  font-style: italic;
}

.rich-text ul {
  font-size: 1.25rem;
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.rich-text ol {
  font-size: 1.25rem;
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.rich-text a {
  color: #7f0689;
  text-decoration: none;
}

.rich-text a:hover {
  color: #75d3a8;
}

@media (width < 768px) {
  .rich-text h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    margin-top: 2rem;
    line-height: 1.2;
  }

  .rich-text h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
    line-height: 1.3;
  }

  .rich-text h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    line-height: 1.4;
  }

  .rich-text p {
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .rich-text ul {
    list-style-type: disc;
    font-size: 0.75rem;
    padding-left: 1rem;
    margin-bottom: 1rem;
  }

  .rich-text ol {
    list-style-type: decimal;
    font-size: 0.75rem;
    padding-left: 1rem;
    margin-bottom: 1rem;
  }
}