/* =========================================================
   Catálogo v11 — Cúpora · Guía editorial
   Estructura v9 + hero v10 + CTA masivo v10
   Solo tokens --cup-* de cupora-design-system.css
   ========================================================= */

/* ── Italic em — patrón compartido ─────────────────────── */
.cat-hero__title em,
.cat-pkg-intro h2 em,
.cat-future h2 em,
.cat-final h2 em,
.cat-card__name em {
  font-style: italic;
  font-weight: inherit;
}

.cat-hero__title em { display: block; }

/* ── Hero ──────────────────────────────────────────────── */
.cat-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(100px, 18vw, 140px) clamp(24px, 6vw, 48px);
  background:
    radial-gradient(ellipse 90% 70% at -5% 0%,  rgba(244, 222, 204, 0.95), transparent 52%),
    radial-gradient(ellipse 50% 55% at 102% 88%, rgba(237, 194, 190, 0.32), transparent 55%),
    var(--cup-beige-rose, #f4decc);
  overflow: hidden;
  text-align: center;
}

/* Monograma atmosférico */
.cat-hero::before {
  content: 'C';
  position: absolute;
  font-family: 'sloop-script-pro', 'sloop-script', 'Sloop Script Pro', cursive;
  font-size: clamp(22rem, 46vw, 60rem);
  line-height: 1;
  color: var(--cup-coffee);
  opacity: 0.045;
  top: -12%;
  right: -3%;
  pointer-events: none;
  user-select: none;
}

.cat-hero__inner {
  position: relative;
  z-index: 1;
}

.cat-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.5rem, 11vw, 13rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  color: var(--cup-ink-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

/* Línea 1: aparece y queda */
.cat-hero-line-1 {
  display: block;
  opacity: 0;
  animation: cat-line1 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;
}

/* Línea 2: aparece más lentamente después, ambas quedan visibles */
.cat-hero-line-2 {
  display: block;
  font-style: italic;
  color: var(--cup-coffee);
  opacity: 0;
  animation: cat-line2 1.5s cubic-bezier(0.23, 1, 0.32, 1) 2.2s forwards;
}

@keyframes cat-line1 {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cat-line2 {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll hint — aparece ~0.8s después de que termina línea 2 (2.2 + 1.5 = 3.7s → hint a 4.5s) */
@keyframes cat-hint-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cat-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

.cat-scroll-hint {
  margin-top: clamp(2rem, 4vh, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: cat-hint-in 0.9s cubic-bezier(0.23, 1, 0.32, 1) 4.5s forwards;
}

.cat-scroll-hint__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cup-coffee);
  opacity: 0.6;
}

.cat-scroll-hint::after {
  content: '';
  display: block;
  width: 1px;
  height: 32px;
  background: var(--cup-coffee);
  opacity: 0.3;
  animation: cat-hint-bounce 1.6s ease-in-out 5.4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cat-hero-line-1  { animation: none; opacity: 1; }
  .cat-hero-line-2  { animation: none; opacity: 1; }
  .cat-scroll-hint  { animation: none; opacity: 0.55; }
}

/* Clases usadas por catalogo-star.blade.php */
.cat-hero__sub {
  font-size: clamp(var(--fs-body), 1.25vw, var(--fs-body-lg));
  color: var(--cup-coffee);
  line-height: var(--lh-body);
  max-width: 56ch;
  margin: 0 auto var(--space-5);
}

.cat-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ── Sección contenedora ────────────────────────────────── */
.cat-section {
  padding-top: 0;
  padding-bottom: clamp(48px, 7vw, 80px);
}

/* ── Separador tipográfico de categoría ─────────────────── */
.cat-divider {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(3rem, 7.5vw, 7.5rem);
  color: var(--cup-ink-black);
  line-height: 1.0;
  letter-spacing: -0.04em;
  border-top: 1px solid var(--cup-gold-line);
  padding-top: var(--space-5);
  padding-bottom: var(--space-7);
  display: block;
  max-width: 24ch;
  text-wrap: balance;
}

/* ── Bento grid base ─────────────────────────────────────── */
.cat-bento {
  display: grid;
  gap: var(--space-4);
}

/* Productos: vasos grande (izq, 2 filas) + stickers/barra (der) + estilos (full) */
.cat-bento--productos {
  grid-template-columns: 1.65fr 1fr;
  grid-template-rows: 270px 270px auto;
  grid-template-areas:
    "vasos   stickers"
    "vasos   barra   "
    "estilos estilos ";
}

.cat-card--vasos    { grid-area: vasos; }
.cat-card--stickers { grid-area: stickers; }
.cat-card--barra    { grid-area: barra; }
.cat-card--estilos  { grid-area: estilos; }

/* Invitaciones: inv. digitales grande (izq, 2 filas) + web/rsvp (der) */
.cat-bento--invitaciones {
  grid-template-columns: 1.65fr 1fr;
  grid-template-rows: 270px 270px;
  grid-template-areas:
    "dig web "
    "dig rsvp";
}

.cat-card--dig  { grid-area: dig; }
.cat-card--web  { grid-area: web; }
.cat-card--rsvp { grid-area: rsvp; }

/* ── Card base ───────────────────────────────────────────── */
.cat-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}

.cat-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.025em;
  color: var(--cup-ink-black);
}

/* ── Overlay card ───────────────────────────────────────── */
.cat-card--overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}

.cat-card--overlay .cat-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.cat-card--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(23, 17, 11, 0.84) 0%,
    rgba(23, 17, 11, 0.35) 45%,
    transparent 100%
  );
  z-index: 1;
}

.cat-card--overlay .cat-card__overlay-body {
  position: relative;
  z-index: 2;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cat-card--overlay .cat-card__name {
  font-size: var(--fs-h2);
  color: var(--cup-white);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}

.cat-card--overlay .cat-card__overlay-desc {
  font-size: var(--fs-small);
  color: rgba(255, 248, 239, 0.78);
  line-height: var(--lh-body);
  max-width: 38ch;
}

.cat-card--overlay .cat-card__cta {
  margin-top: var(--space-3);
  width: fit-content;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

/* ── Dark card ───────────────────────────────────────────── */
.cat-card--dark {
  background:
    radial-gradient(circle at 15% 15%, rgba(245, 179, 194, 0.15), transparent 40%),
    linear-gradient(145deg, #2b1e17, #6a4638);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  min-height: 100%;
}

.cat-card--dark .cat-card__label { color: rgba(199, 168, 100, 0.82); }
.cat-card--dark .cat-card__name  { color: var(--cup-white-warm); }
.cat-card--dark .cat-card__desc  { color: rgba(255, 248, 239, 0.68); line-height: var(--lh-body); }

.cat-card__cta-inline {
  margin-top: var(--space-4);
  width: fit-content;
}

/* ── Soft card ───────────────────────────────────────────── */
.cat-card--soft {
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,248,239,0.68));
  border: 1px solid rgba(27, 23, 21, 0.08);
  box-shadow: 0 14px 40px rgba(38, 26, 16, 0.07);
  padding: clamp(22px, 2.8vw, 34px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-radius: var(--radius-card-sm);
}

.cat-card--soft .cat-card__name  { margin-bottom: var(--space-1); }
.cat-card--soft .cat-card__desc  { font-size: var(--fs-small); color: rgba(27, 23, 21, 0.68); line-height: var(--lh-body); }

/* ── Labels y tags — plain eyebrow style ─────────────────── */
.cat-card__label {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(199, 168, 100, 0.88);
}

.cat-card__tag {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(27, 23, 21, 0.50);
}

/* Estilos card: full-width → layout horizontal */
.cat-card--estilos {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  min-height: 140px;
  padding: var(--space-6) clamp(28px, 4vw, 48px);
}

.cat-card--estilos .cat-card__name { max-width: 48ch; }

/* ── Star duo ────────────────────────────────────────────── */
.cat-star-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.cat-star-duo .cat-card--overlay { min-height: 480px; }

/* ── Organización: grid 3 columnas ─────────────────────── */
.cat-org-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* ── pkg-intro (compartida con star) ─────────────────────── */
.cat-pkg-intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}

.cat-pkg-intro h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--cup-ink-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  margin-bottom: var(--space-3);
}

.cat-pkg-intro p {
  font-size: var(--fs-body);
  color: rgba(27, 23, 21, 0.68);
  line-height: var(--lh-body);
}

/* ── Paquetes ───────────────────────────────────────────── */
.cat-pkg-section {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(48px, 7vw, 80px);
  background: linear-gradient(180deg, rgba(246, 239, 228, 0.4), rgba(255, 255, 255, 0.28));
}

.cat-pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.cat-pkg-card {
  min-height: 290px;
  padding: clamp(22px, 2.5vw, 34px);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,248,239,0.64));
  border: 1px solid rgba(27, 23, 21, 0.08);
  box-shadow: 0 18px 52px rgba(38, 26, 16, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
}

.cat-pkg-card__num {
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--cup-mustard);
  margin-bottom: var(--space-2);
}

.cat-pkg-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--cup-ink-black);
  line-height: var(--lh-snug);
  letter-spacing: -0.025em;
}

.cat-pkg-card p {
  font-size: var(--fs-small);
  color: rgba(27, 23, 21, 0.68);
  line-height: var(--lh-body);
}

.cat-pkg-card--complete {
  background:
    radial-gradient(circle at 20% 20%, rgba(245, 179, 194, 0.18), transparent 40%),
    linear-gradient(145deg, #271d18, #6a4638);
}

.cat-pkg-card--complete .cat-pkg-card__num { color: rgba(199, 168, 100, 0.72); }
.cat-pkg-card--complete h3               { color: #fff8ef; }
.cat-pkg-card--complete p                { color: rgba(255, 248, 239, 0.72); }

/* ── Fotografía futura ───────────────────────────────────── */
.cat-future {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 0.54fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: stretch;
  padding: clamp(28px, 3.5vw, 48px);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(27, 23, 21, 0.08);
  box-shadow: var(--shadow-soft);
}

.cat-future__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

.cat-future__label {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cup-mustard);
}

.cat-future h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--cup-ink-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
}

.cat-future p {
  font-size: var(--fs-body);
  color: rgba(27, 23, 21, 0.68);
  line-height: var(--lh-body);
  max-width: 52ch;
}

.cat-future img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: var(--radius-card-sm);
  object-fit: cover;
}

/* ── CTA standard (compartida con star) ──────────────────── */
.cat-final {
  padding: clamp(40px, 6vw, 72px);
  border-radius: var(--radius-card);
  text-align: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(245, 179, 194, 0.16), transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(216, 188, 141, 0.20), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,0.90), rgba(255,248,239,0.72));
  border: 1px solid rgba(27, 23, 21, 0.08);
  box-shadow: 0 26px 80px rgba(38, 26, 16, 0.09);
}

.cat-final h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--cup-ink-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  max-width: 820px;
  margin: 0 auto var(--space-6);
  text-wrap: balance;
}

.cat-final .table-actions { justify-content: center; }

/* ── CTA final — espejo de .cq-cta ──────────────────────── */
.cat-cta-v2 {
  background: var(--cup-blush);
  padding: clamp(64px, 9vw, 104px) clamp(16px, 4vw, 64px);
  overflow: hidden;
}

.cat-cta-v2__inner {
  max-width: 1440px;
  margin-inline: auto;
}

.cat-cta-v2__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.cat-cta-v2__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.8vw, 5.5rem);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  color: var(--cup-ink-black);
}

.cat-cta-v2__script {
  display: block;
  font-family: 'sloop-script-pro', 'sloop-script', 'Sloop Script Pro', cursive;
  font-size: 1.25em;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--cup-rose);
  margin-top: var(--space-2);
}

.cat-cta-v2__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.cat-cta-v2__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--cup-coffee);
  margin: 0;
}

.cat-cta-v2__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Botones tipo intent-card (igual que cq-cta-btn) */
.cat-cta-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(91, 59, 40, 0.2);
  border-radius: var(--radius-md, 12px);
  background: rgba(255, 250, 243, 0.6);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--cup-coffee);
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, transform 120ms ease;
}

.cat-cta-btn__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--cup-gold);
}

.cat-cta-btn__icon svg { width: 20px; height: 20px; }

.cat-cta-btn__arrow {
  width: 16px; height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 180ms ease, transform 180ms ease;
}

/* ── Hover states ────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .cat-cta-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(91, 59, 40, 0.38);
    transform: translateY(-1px);
  }
  .cat-cta-btn:hover .cat-cta-btn__arrow {
    opacity: 0.9;
    transform: translate(2px, -2px);
  }

  .cat-nav-pill:hover {
    background: rgba(255, 250, 243, 0.95);
    border-color: rgba(91, 59, 40, 0.42);
    transform: translateY(-1px);
  }

  .cat-card {
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 72px rgba(38, 26, 16, 0.16);
  }

  .cat-card--overlay:hover .cat-card__bg  { transform: scale(1.05); }
  .cat-card--overlay:hover .cat-card__cta { opacity: 1; transform: translateY(0); }

  .cat-pkg-card {
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .cat-pkg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 64px rgba(38, 26, 16, 0.15);
  }

  .cat-card--soft {
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .cat-card--soft:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 52px rgba(38, 26, 16, 0.12);
  }
}

/* Mobile: overlay CTA siempre visible */
@media (hover: none), (pointer: coarse) {
  .cat-card--overlay .cat-card__cta { opacity: 1; transform: none; }
}

/* ── Active states ───────────────────────────────────────── */
.cat-card:active,
.cat-pkg-card:active       { transform: scale(0.98); }
.cat-nav-pill:active       { transform: scale(0.97); }
.cat-cta-btn:active        { transform: scale(0.97); }

.btn {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.2s ease;
}
.btn:active { transform: scale(0.97); }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cat-card,
  .cat-card--overlay .cat-card__bg,
  .cat-card--overlay .cat-card__cta,
  .cat-pkg-card,
  .cat-card--soft,
  .cat-nav-pill,
  .btn { transition: none; animation: none; }

  .cat-card:active,
  .cat-pkg-card:active,
  .cat-nav-pill:active,
  .cat-cta-btn:active,
  .btn:active { transform: none; }
  .cat-cta-btn { transition: none; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .cat-cta-v2__layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .cat-pkg-grid { grid-template-columns: repeat(2, 1fr); }

  .cat-future { grid-template-columns: 1fr; }
  .cat-future img { min-height: 240px; }

  .cat-star-duo { grid-template-columns: 1fr; }
  .cat-star-duo .cat-card--overlay { min-height: 400px; }
}

@media (max-width: 680px) {
  .cat-bento--productos {
    grid-template-columns: 1fr;
    grid-template-rows: 360px 200px 200px auto;
    grid-template-areas:
      "vasos"
      "stickers"
      "barra"
      "estilos";
  }

  .cat-bento--invitaciones {
    grid-template-columns: 1fr;
    grid-template-rows: 340px auto auto;
    grid-template-areas:
      "dig"
      "web"
      "rsvp";
  }

  .cat-card--estilos {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    min-height: auto;
  }

  .cat-org-grid  { grid-template-columns: 1fr; }
  .cat-pkg-grid  { grid-template-columns: 1fr; }

  .cat-divider   { font-size: clamp(3rem, 12vw, 5rem); }

  .cat-card--soft { min-height: 180px; }

  .cat-cta-v2__layout {
    gap: clamp(32px, 5vw, 48px);
  }
}