/* ===== Variables y layout ===== */
:root {
  --card-w: 400px;
  --card-h: 700px;

  /* Paleta base */
  --brand-light: #0c3e71; /* azul principal */
  --brand-dark: #065c88; /* azul profundo */

  /* Colores neón para intensificar el glow */
  --neon-1: #1bd1ff; /* cian brillante */
  --neon-2: #63f5ff; /* aqua brillante */

  --bg: #fff;
  --text: #ffffff;
  --muted: #cfd4ff;

  /* Alturas seguras para evitar recortes */
  --story-max: 180px; /* alto del área scrolleable de la historia */
  --extra-open: calc(
    var(--story-max) + 120px
  ); /* alto extendido del bloque extra */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

.container {
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: 32px 20px;
}

.page-title {
  margin: 0 0 22px;
  font-size: clamp(1.6rem, 1.8vw + 1.2rem, 2.4rem);
  text-align: center;
  font-weight: 700;
  background: linear-gradient(90deg, var(--brand-light), var(--brand-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Carrusel (autoplay por JS; barra oculta) ===== */
.carousel {
  position: relative;
  overflow-x: auto; /* ← necesario para que scrollLeft se vea */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  scrollbar-width: none; /* oculta barra en Firefox */
}
.carousel::-webkit-scrollbar {
  display: none;
}

#track {
  display: inline-flex; /* importante para el loop por JS */
  gap: 24px;
  align-items: stretch;
  width: max-content; /* fuerza ancho > contenedor */
}

/* ===== Card base ===== */
.card {
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--card-w);
  height: var(--card-h);
  background: linear-gradient(
    160deg,
    #0a0a0f 0%,
    #1a1d29 50%,
    var(--brand-dark) 100%
  );
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid transparent; /* el borde real lo hacen los pseudo */
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  will-change: transform;
  position: relative;
}

/* contenido por encima del glow */
.card > * {
  position: relative;
  z-index: 1;
}

/* === Borde con RESPLANDOR ANIMADO MUY INTENSO === */
.card::before,
.card::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0; /* apagado por defecto */
}

/* Halo exterior (blur y saturación fuertes) */
.card::before {
  inset: -16px; /* halo grueso */
  background: conic-gradient(
    from var(--angle),
    var(--neon-1) 0deg,
    var(--neon-2) 60deg,
    var(--brand-light) 120deg,
    var(--brand-dark) 180deg,
    var(--neon-1) 240deg,
    var(--neon-2) 300deg,
    var(--neon-1) 360deg
  );
  filter: blur(38px) saturate(1.8) brightness(1.15);
  transition: opacity 0.2s ease;
}

/* Borde nítido recortado + anillo interior */
.card::after {
  inset: 0;
  padding: 4px; /* grosor del borde visible */
  background: conic-gradient(
      from var(--angle),
      var(--neon-1) 0deg,
      var(--neon-2) 60deg,
      var(--brand-light) 120deg,
      var(--brand-dark) 180deg,
      var(--neon-1) 240deg,
      var(--neon-2) 300deg,
      var(--neon-1) 360deg
    ),
    radial-gradient(
      120% 120% at 50% 50%,
      rgba(99, 245, 255, 0.35),
      transparent 60%
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.2s ease;
}

/* Hover: activa glow + spin rápido + pulso con más brillo y saturación */
.card:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 0 0 2px var(--neon-2), 0 14px 48px rgba(27, 209, 255, 0.55),
    0 0 60px rgba(99, 245, 255, 0.55);
}
.card:hover::before,
.card:hover::after {
  opacity: 1;
  animation: spin 1.6s linear infinite,
    pulse 1.1s ease-in-out infinite alternate;
}

/* ===== Top: foto ===== */
.top-card {
  position: relative;
  height: 55%;
  transition: height 0.35s ease;
  background: #111;
}
.card-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0) 55%
  );
  pointer-events: none;
}

/* ===== Bottom: contenido ===== */
.bottom-card {
  position: relative;
  height: 45%;
  background: linear-gradient(
    180deg,
    var(--brand-light) 0%,
    var(--brand-dark) 100%
  );
  transition: height 0.35s ease;
}
.card-content {
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #e9ecff;
  font-size: 1rem;
  min-height: 0; /* ← permite que el hijo pueda scrollear */
}

/* ===== Textos ===== */
.card-title {
  margin: 2px 0 6px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}
.card-sub {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--muted);
}
.card-line {
  margin: 0;
  font-size: 1.05rem;
}

/* Hover: texto legible con glow fuerte */
.card:hover .card-title,
.card:hover .card-sub,
.card:hover .card-line {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(27, 209, 255, 0.95),
    0 0 26px rgba(99, 245, 255, 0.85);
  transform: scale(1.04);
  transition: color 0.12s ease, text-shadow 0.18s ease, transform 0.18s ease;
}

/* ===== Extra (hover) ===== */
.card-extra {
  margin-top: 12px;
  overflow: hidden; /* contenedor colapsable */
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  box-sizing: border-box;
  display: flex; /* para que la historia crezca/contraiga correctamente */
  flex-direction: column;
  gap: 8px;
  min-height: 0; /* habilita overflow del hijo */
}
.card:hover .top-card {
  height: 40%;
}
.card:hover .bottom-card {
  height: 60%;
}
/* altura amplia para que NUNCA recorte la historia dentro */
.card:hover .card-extra {
  max-height: var(--extra-open);
  opacity: 1;
}

/* historia con scroll (siempre alcanzable el último renglón) */
.card-story {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #e6eaff;

  flex: 1 1 auto; /* ocupa el espacio disponible en .card-extra */
  min-height: 0;
  max-height: var(--story-max);
  overflow-y: auto;
  padding-right: 12px; /* espacio para el gutter/scrollbar */
  padding-bottom: 16px; /* deja “aire” para la última línea */
  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
.card-story::-webkit-scrollbar {
  width: 6px;
}
.card-story::-webkit-scrollbar-thumb {
  background: var(--neon-1);
  border-radius: 10px;
}
.card-story {
  scrollbar-width: thin;
  scrollbar-color: var(--neon-1) transparent;
}

/* ===== Responsivo ===== */
@media (max-width: 768px) {
  :root {
    --card-w: 86vw;
    --card-h: 560px;

    /* un poco más compacto en tablet */
    --story-max: 150px;
    --extra-open: calc(var(--story-max) + 110px);
  }

  .carousel {
    padding-inline: 12px;
    /* mantenemos overflow-x:auto para que el autoplay funcione */
    -webkit-mask-image: none;
    mask-image: none;
  }

  #track {
    gap: 16px;
  }

  .card-content {
    font-size: 0.95rem;
  }
  .card-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --card-w: 92vw;
    --card-h: 540px;

    /* aún más compacto en móvil */
    --story-max: 130px;
    --extra-open: calc(var(--story-max) + 100px);
  }

  .page-title {
    font-size: clamp(1.3rem, 2.5vw + 1rem, 1.8rem);
  }
  #track {
    gap: 14px;
  }

  .card-content {
    font-size: 0.92rem;
  }
  .card-title {
    font-size: 1.18rem;
  }
  .card-sub,
  .card-line {
    font-size: 0.98rem;
  }

  .card::before {
    inset: -10px;
    filter: blur(22px) saturate(1.4) brightness(1.05);
  }
  .card:hover {
    transform: translateY(-2px) scale(1.015);
  }
}

/* Dispositivos sin hover (móviles): expandido por defecto, pero mantenemos overflow-x:auto para autoplay */
@media (hover: none) and (pointer: coarse) {
  .carousel {
    overflow-x: auto; /* ← NO ocultar para que el scrollLeft se note */
    -webkit-overflow-scrolling: touch;
  }

  .top-card {
    height: 40% !important;
  }
  .bottom-card {
    height: 60% !important;
  }

  /* mostramos el bloque extra abierto (mismas variables) */
  .card-extra {
    max-height: var(--extra-open) !important;
    opacity: 1 !important;
  }

  .card::before,
  .card::after {
    opacity: 0.9;
    animation: spin 2.2s linear infinite,
      pulse 1.2s ease-in-out infinite alternate;
  }

  .card {
    transform: none !important;
  }
  .card:hover .card-title,
  .card:hover .card-sub,
  .card:hover .card-line {
    transform: none;
  }
}

/* ===== Animaciones utilitarias ===== */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin {
  to {
    --angle: 360deg;
  }
}
@keyframes pulse {
  from {
    filter: brightness(1) saturate(1);
  }
  to {
    filter: brightness(1.35) saturate(1.4);
  }
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; /* más grande */
    height: 56px;
    border-radius: 50%;
    border: 2px solid #007bff; /* borde azul */
    display: grid;
    place-items: center;
    cursor: pointer;
    background: rgba(0, 123, 255, 0.85); /* azul intenso */
    backdrop-filter: blur(6px);
    transition: transform .15s ease, background .15s ease, opacity .2s ease;
    z-index: 5;
    opacity: 1; /* opacas para máxima visibilidad */
    user-select: none;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.6); /* glow azul */
}

    .carousel-arrow svg {
        width: 28px; /* más grande */
        height: 28px;
        fill: #ffffff; /* ícono blanco */
        pointer-events: none;
    }

    .carousel-arrow:hover {
        transform: translateY(-50%) scale(1.12);
        background: #0056b3; /* azul más oscuro al hover */
        border-color: #0056b3;
        box-shadow: 0 6px 14px rgba(0, 86, 179, 0.8);
    }

    .carousel-arrow:active {
        transform: translateY(-50%) scale(0.95);
    }

    .carousel-arrow.prev {
        left: 14px;
    }

    .carousel-arrow.next {
        right: 14px;
    }

/* El contenedor donde agregas las flechas (en tu JS es .viewport) */
.viewport {
    position: relative;
}

/* Desktop: como ya lo tienes */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50; /* más alto para evitar que algo las tape */
}

/* ===== Móvil: flechas abajo visibles ===== */
@media (max-width: 768px) {
    /* Deja espacio para que las flechas quepan sin salir y sin tapar texto */
    .viewport {
        position: relative;
        overflow: hidden; /* puede ser hidden; no usamos valores negativos */
        padding-bottom: 84px; /* espacio reservado para las flechas */
    }

    .carousel-arrow {
        top: auto; /* ya no a mitad */
        bottom: 12px; /* dentro del contenedor, no negativo */
        transform: none; /* sin translateY */
    }

        /* Centrar el par de flechas debajo de la card */
        .carousel-arrow.prev,
        .carousel-arrow.next {
            left: 50%;
            right: auto;
        }

        .carousel-arrow.prev {
            transform: translateX(-120%); /* a la izquierda del centro */
        }

        .carousel-arrow.next {
            transform: translateX(20%); /* a la derecha del centro */
        }

        /* Opcional: sin zoom en hover para móviles */
        .carousel-arrow:hover,
        .carousel-arrow:active {
            transform: none;
        }
}



/* ====== Mejora de lectura en MÓVIL ====== */
@media (max-width: 480px) {
  :root {
    --card-w: 92vw;
    --card-h: 620px; /* más alta */
    --story-max: 260px; /* área de historia MUCHO más grande */
    --extra-open: calc(var(--story-max) + 120px);
  }

  /* Más espacio para el contenido (la historia gana altura) */
  .top-card {
    height: 34% !important; /* foto un poco más chica */
  }
  .bottom-card {
    height: 66% !important; /* más espacio para el texto */
  }

  /* Tipografía y paddings pensados para lectura */
  .card-content {
    padding: 18px 18px 20px;
    font-size: 1rem; /* evita hacerla más chica en móvil */
  }
  .card-title {
    font-size: 1.3rem;
    line-height: 1.25;
  }
  .card-sub,
  .card-line {
    font-size: 1.04rem;
  }

  /* Historia: texto más grande y área mínima garantizada */
  .card-story {
    font-size: 1.06rem;
    line-height: 1.6;
    min-height: 180px; /* asegura que no se vea "enano" */
    max-height: var(--story-max);
    padding-right: 14px;
    padding-bottom: 18px;
  }

  /* Scrollbar un poco más ancho para el dedo */
  .card-story::-webkit-scrollbar {
    width: 8px;
  }
}

/* Dispositivos sin hover (móviles/táctiles): mantener expandido
   y con las nuevas proporciones de altura para mejor lectura */
@media (hover: none) and (pointer: coarse) {
  :root {
    --story-max: 260px;
    --extra-open: calc(var(--story-max) + 120px);
  }
  .top-card {
    height: 34% !important;
  }
  .bottom-card {
    height: 66% !important;
  }
  .card-extra {
    max-height: var(--extra-open) !important;
    opacity: 1 !important;
  }
}