@import "tailwindcss";

/* ==========================================================================
   Acepla — Recreación fiel del template Flex / Helix3
   Paleta y tipografía extraídas del preset1.css original
   ========================================================================== */

@theme {
  /* Rojo corporativo Acepla (major_color) */
  --color-acepla-50: #fef2f2;
  --color-acepla-100: #fee2e2;
  --color-acepla-200: #fecaca;
  --color-acepla-300: #fca5a5;
  --color-acepla-400: #ffafa3;
  --color-acepla-500: #f3b9b9; /* títulos sobre rojo */
  --color-acepla-600: #ec646a;
  --color-acepla-700: #e42028; /* major_color primario */
  --color-acepla-800: #d11921;
  --color-acepla-900: #ba171d; /* hover */

  /* Grises del template (escala coherente del original) */
  --color-topbar: #3d3d3d;
  --color-header: #303030;
  --color-footer: #2e2e2e;
  --color-footer-copy: #363839;
  --color-ink: #1a1a1a; /* texto principal */
  --color-ink-soft: #666666;
  --color-ink-mute: #777777;
  --color-line: #e2e2e2;
  --color-line-soft: #e3e3e3;

  /* Tipografías del original */
  --font-sans: "Open Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Raleway", system-ui, -apple-system, sans-serif;

  /* Sombras */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Base — replicando Helix3
   ========================================================================== */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 25px;
    color: var(--color-ink);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Headings — Raleway con pesos ligeros como el original */
  h1 {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 200;
    line-height: 1.1;
  }
  h2 {
    font-family: var(--font-display);
    font-size: 33px;
    font-weight: 300;
    line-height: 1.1;
  }
  h3 {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 400;
    line-height: 1.1;
  }
  h4 {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.1;
  }
  h5,
  h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
  }

  a {
    color: var(--color-acepla-700);
    text-decoration: none;
    transition: color 0.2s, background-color 0.35s;
  }
  a:hover {
    color: var(--color-acepla-900);
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   Componentes
   ========================================================================== */
@layer components {
  /* Contenedor central (Bootstrap 3 like, max 1170px) */
  .container-x {
    @apply mx-auto w-full max-w-[1170px] px-5 sm:px-6 lg:px-8;
  }

  /* Botones (sppb-btn del original) — clases base compartidas */
  .btn,
  .btn-primary,
  .btn-outline-primary,
  .btn-light,
  .btn-default {
    @apply inline-flex items-center justify-center gap-2 rounded-[4px] px-7 py-2
      font-display text-[100%] font-normal leading-[1.4] transition-all
      duration-[400ms] focus:outline-none cursor-pointer border border-transparent;
  }
  .btn-primary {
    @apply border-[#df1b23] bg-acepla-700/90 text-white hover:border-[#a4141a] hover:bg-acepla-800;
  }
  .btn-outline-primary {
    @apply border-2 border-acepla-700 bg-transparent text-ink hover:bg-acepla-700/90 hover:text-white;
  }
  .btn-light {
    @apply border-white/70 bg-white/5 text-white/95 hover:border-white hover:bg-white/15 hover:text-white;
  }
  .btn-default {
    @apply border-[#666] bg-white/75 text-[#666] hover:border-acepla-700 hover:bg-white/95 hover:text-acepla-700;
  }
  .btn-sm,
  .btn-primary.btn-sm,
  .btn-outline-primary.btn-sm {
    @apply px-[22px] py-1.5 text-[87%];
  }
  .btn-lg {
    @apply px-8 py-2.5 text-[125%] leading-[1.7];
  }

  /* Tarjeta de producto — usar class="card group" en el HTML */
  .card {
    @apply relative flex flex-col overflow-hidden rounded-xl border border-line
      bg-white shadow-[var(--shadow-card)] transition-all duration-300
      hover:-translate-y-1 hover:shadow-[0_10px_30px_-8px_rgba(228,32,40,0.18)];
  }

  /* Enlace de navegación (header oscuro) */
  .nav-link {
    @apply relative inline-flex items-center font-sans text-[15px] font-normal text-[#ededed]
      transition-colors duration-200 hover:text-white px-3;
  }

  /* Título de addon con subrayado decorativo rojo (patrón Flex) */
  .addon-title {
    @apply relative font-display text-ink;
  }

  /* Etiqueta de familia */
  .badge {
    @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide;
  }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

/* Ocultar scrollbar en carruseles */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Efecto desaturate del carrusel original (gris → color al hover) */
.desaturate {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}
.desaturate:hover {
  filter: grayscale(0%);
}

/* Fondo con rayas oscuras (SVG del original) */
.bg-stripes {
  background-color: var(--color-footer);
  background-image: url("/images/svg/section-background-stripes2.svg");
  background-repeat: repeat;
}
.bg-soft-white {
  background-color: #ffffff;
  background-image: url("/images/svg/background-white-85.svg");
  background-repeat: repeat;
}

/* Sombra de texto de captions del slider */
.text-shadow-slider {
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.text-shadow-soft {
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
}

/* Animaciones */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up 0.6s ease-out both; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in { animation: fade-in 0.8s ease-out both; }

/* ken-burns para slider */
@keyframes ken-burns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.15) translate(-2%, -2%); }
}
.ken-burns { animation: ken-burns 9s ease-out both; }

/* Contador animado (count-up) */
@keyframes count-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Respeto prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .desaturate { filter: none; }
}

/* ==========================================================================
   MODO REDESIGN — estética audaz (dentro de marca)
   Se activa agregando class="rd" al body. Sobrescribe con más impacto visual.
   ========================================================================== */

/* Tipografía más bold e impactante */
.rd h1, .rd h2, .rd h3 { font-weight: 800 !important; letter-spacing: -0.02em; }
.rd .hero-caption { font-weight: 900 !important; }

/* Botones con más peso */
.rd .btn-primary {
  background: linear-gradient(135deg, #e42028, #c41018);
  box-shadow: 0 4px 14px rgba(228,32,40,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.rd .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(228,32,40,0.55);
  transform: translateY(-1px);
}

/* Hero con profundidad */
.rd-hero {
  position: relative;
}
.rd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20,20,20,0.6) 100%);
  pointer-events: none;
}

/* Eyebrow / kicker con barra roja */
.rd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-acepla-700);
}
.rd-eyebrow::before {
  content: "";
  width: 32px;
  height: 3px;
  background: var(--color-acepla-700);
  border-radius: 2px;
}

/* Sección con número grande de fondo */
.rd-section-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 18vw, 220px);
  line-height: 0.8;
  color: rgba(228,32,40,0.06);
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* Cards con borde superior rojo */
.rd .card {
  border-top: 3px solid transparent;
  border-radius: 14px;
}
.rd .card:hover {
  border-top-color: var(--color-acepla-700);
  transform: translateY(-6px);
}

/* Contador redesign: número gigante con borde */
.rd-counter-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 80px);
  line-height: 1;
  background: linear-gradient(180deg, #fff, #ffafa3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Banda diagonal separadora */
.rd-diagonal {
  position: relative;
  background: var(--color-acepla-700);
  color: #fff;
  clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
  padding: 70px 0;
}

/* Reveal on scroll — solo oculta si JS está activo (evita contenido invisible) */
.js .rd-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.js .rd-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Feature con icono en círculo de marca */
.rd-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(228,32,40,0.12), rgba(228,32,40,0.04));
  color: var(--color-acepla-700);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .rd-reveal { opacity: 1; transform: none; }
}