/* assets/css/catalogo.css */
:root{
  --bg: #0b0f24;
  --ink: #0d1022;
  --white: #ffffff;

  --azul: #141947;
  --amarillo: #ffcc0a;
  --morado: #a54a97;

  --gold: #d8b25c;
  --gold2: #ffcc0a;

  --line: rgba(20,25,71,.14);
  --soft: rgba(255,255,255,.08);
  --shadow: 0 18px 55px rgba(0,0,0,.22);
  --radius: 18px;
}

.catalogo{
  background: #fff;
  color: #111;
  overflow: hidden;
}

.catalogo h1,
.catalogo h2,
.catalogo h3{
  letter-spacing: 2px !important;
}

.wrap{
  width: min(1140px, calc(100% - 40px));
  margin: 0 auto;
}

/* HERO */
.catalogo-hero{
  position: relative;
  padding: 80px 0 55px;
  background:
    radial-gradient(1200px 520px at 20% 10%, rgba(165,74,151,.14), transparent 55%),
    radial-gradient(900px 480px at 85% 0%, rgba(255,204,10,.18), transparent 60%),
    linear-gradient(180deg, rgba(20,25,71,.08), rgba(20,25,71,0));
  border-bottom: 1px solid var(--line);
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
}

.kicker{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(20,25,71,.72);
  margin: 0 0 14px;
}

.catalogo-hero h1{
  margin: 0 0 12px;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.02;
  color: #0e1230;
}

.lead{
  margin: 0 0 22px;
  font-size: 16.5px;
  line-height: 1.55;
  color: rgba(13,16,34,.78);
  max-width: 58ch;
}

.hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
}

.hero-points{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: rgba(13,16,34,.72);
}
.hero-points li{
  position: relative;
  padding-left: 16px;
}
.hero-points li::before{
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 7px; height: 7px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--amarillo), var(--morado));
}

/* Botones */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  will-change: transform;
}

.btn svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.btn-primary{
  color: #111;
  background: linear-gradient(135deg, var(--amarillo), var(--gold));
  box-shadow: 0 14px 40px rgba(255,204,10,.22);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(255,204,10,.28);
}

.btn-ghost{
  background: rgba(20,25,71,.06);
  border-color: rgba(20,25,71,.14);
  color: #0e1230;
}
.btn-ghost:hover{
  transform: translateY(-2px);
  background: rgba(20,25,71,.085);
}

.btn-whatsapp{
  background: linear-gradient(135deg, #25d366, #1da851);
  border-color: #1fb45a;
  color: #fff;
  box-shadow: 0 14px 40px rgba(37,211,102,.25);
}
.btn-whatsapp:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(37,211,102,.32);
}

/* Hero card */
.hero-card{
  position: relative;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.62)),
    radial-gradient(700px 350px at 30% 0%, rgba(255,204,10,.16), transparent 55%),
    radial-gradient(700px 350px at 80% 20%, rgba(165,74,151,.16), transparent 60%);
  border: 1px solid rgba(20,25,71,.14);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow: hidden;
}

.doc-preview{
  border-radius: 14px;
  border: 1px solid rgba(20,25,71,.14);
  background: rgba(255,255,255,.72);
  overflow: hidden;
  transform: perspective(900px) rotateY(-8deg) rotateX(5deg);
  transition: transform .35s ease;
}
.hero-card:hover .doc-preview{
  transform: perspective(900px) rotateY(-4deg) rotateX(3deg) translateY(-2px);
}

.doc-top{
  height: 36px;
  background: rgba(20,25,71,.06);
  border-bottom: 1px solid rgba(20,25,71,.12);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.dot{
  width: 10px; height: 10px;
  border-radius: 99px;
  background: rgba(20,25,71,.22);
}
.doc-body{
  padding: 16px 16px 18px;
}
.bar{
  height: 10px;
  border-radius: 999px;
  margin: 10px 0;
  background: linear-gradient(90deg, rgba(20,25,71,.15), rgba(20,25,71,.08));
  position: relative;
  overflow: hidden;
}
.bar::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,204,10,.18), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.4s infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-100%); }
  55%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}
.spacer{ height: 10px; }

.w55{ width: 55%; } .w60{ width: 60%; } .w65{ width: 65%; }
.w75{ width: 75%; } .w80{ width: 80%; } .w85{ width: 85%; } .w90{ width: 90%; }

.hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.badge{
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20,25,71,.14);
  background: rgba(255,255,255,.7);
  color: rgba(13,16,34,.78);
}

.hero-glow{
  position: absolute;
  inset: -120px -120px auto auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(255,204,10,.28), transparent 55%),
              radial-gradient(circle at 70% 60%, rgba(165,74,151,.22), transparent 60%);
  filter: blur(18px);
  opacity: .9;
  pointer-events: none;
  animation: floaty 7.5s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-16px, 18px) scale(1.03); }
}

/* SECCIONES */
.section-head{
  margin: 0 0 22px;
}
.section-head h2{
  margin: 0 0 8px;
  font-size: 26px;
  color: #0e1230;
}
.section-head p{
  margin: 0;
  color: rgba(13,16,34,.72);
  max-width: 70ch;
}

.catalogo-resumen{
  padding: 55px 0;
}

.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(20,25,71,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  padding: 18px 18px 16px;
  box-shadow: 0 12px 35px rgba(0,0,0,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,.11);
  border-color: rgba(165,74,151,.26);
}
.card h3{
  margin: 0 0 8px;
  font-size: 18px;
  color: #0e1230;
}
.card p{
  margin: 0 0 12px;
  color: rgba(13,16,34,.74);
  line-height: 1.5;
}
.card ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(13,16,34,.7);
}
.card li{ margin: 6px 0; }

/* DESCARGAS */
.catalogo-descargas{
  padding: 55px 0;
  background:
    radial-gradient(1000px 520px at 10% 40%, rgba(20,25,71,.06), transparent 55%),
    radial-gradient(900px 520px at 90% 50%, rgba(255,204,10,.10), transparent 60%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.downloads-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
}

.note{
  margin-top: 14px;
  border-radius: 14px;
  padding: 14px 14px;
  border: 1px solid rgba(20,25,71,.14);
  background: rgba(255,255,255,.78);
  color: rgba(13,16,34,.74);
}

.downloads-list{
  display: grid;
  gap: 12px;
}

.download-item{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(20,25,71,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  text-decoration: none;
  color: inherit;
  box-shadow: 0 12px 35px rgba(0,0,0,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.download-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 55px rgba(0,0,0,.11);
  border-color: rgba(255,204,10,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
}
.download-item.disabled{
  opacity: .55;
  cursor: default;
  pointer-events: none;
}

.di-icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: .06em;
  color: #0e1230;
  background: linear-gradient(135deg, rgba(255,204,10,.55), rgba(165,74,151,.20));
  border: 1px solid rgba(20,25,71,.14);
}

.di-title{
  display: block;
  font-weight: 800;
  color: #0e1230;
}
.di-sub{
  display: block;
  margin-top: 2px;
  color: rgba(13,16,34,.7);
  font-size: 13.5px;
}
.di-cta{
  font-weight: 800;
  color: rgba(20,25,71,.8);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(20,25,71,.14);
  background: rgba(20,25,71,.04);
}

/* FAQ */
.catalogo-faq{
  padding: 55px 0 70px;
}

.faq-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.faq{
  border-radius: var(--radius);
  border: 1px solid rgba(20,25,71,.14);
  background: rgba(255,255,255,.85);
  box-shadow: 0 12px 35px rgba(0,0,0,.07);
  padding: 12px 14px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.faq:hover{
  transform: translateY(-3px);
  border-color: rgba(165,74,151,.26);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}
.faq summary{
  cursor: pointer;
  font-weight: 800;
  color: #0e1230;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq p{
  margin: 10px 0 0;
  color: rgba(13,16,34,.72);
  line-height: 1.5;
}

.cta-strip{
  margin-top: 22px;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid rgba(20,25,71,.14);
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(255,204,10,.16), transparent 55%),
    radial-gradient(900px 420px at 85% 70%, rgba(165,74,151,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow);
}
.cta-strip h3{
  margin: 0 0 6px;
  color: #0e1230;
}
.cta-strip p{
  margin: 0;
  color: rgba(13,16,34,.72);
}
.cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* REVEAL */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(3px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .downloads-grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .faq-grid{ grid-template-columns: 1fr; }
  .cta-strip{ flex-direction: column; align-items: flex-start; }
}