/* Comparador de técnicas · estilos (movido desde la landing) */

/* === COMPARISON PILLS === */
.comp-pill {
  padding: 0.65rem 1.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(92,7,16, 0.2);
  border-radius: 999px;
  color: var(--cherry);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}
.comp-pill:hover {
  border-color: var(--gold);
  background: rgba(201, 169, 97, 0.1);
}
.comp-pill.active {
  background: var(--wine-deep);
  color: var(--cream);
  border-color: var(--wine-deep);
  box-shadow: 0 8px 20px -8px rgba(92,7,16, 0.4);
}

/* === COMPARISON GRID === */
.comp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  /* [v9.7] Generous top padding so the floating badge (top: -16px)
     never collides with the section's overflow:hidden boundary,
     even on cards with translateY transforms. */
  padding-top: 2.25rem;
}
@media (min-width: 640px) { .comp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .comp-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

.comp-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(92,7,16, 0.08);
  border-radius: 24px;
  padding: 1.75rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.comp-card.hidden-card { display: none; }
.comp-card:hover, .comp-card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 30px 60px -25px rgba(92,7,16, 0.3);
}
.comp-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.comp-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(92,7,16, 0.08);
  margin-bottom: 0.75rem;
}
.comp-card-name {
  font-family: 'Italiana', serif;
  font-size: 1.5rem;
  color: var(--cherry);
}
.comp-card-price {
  font-family: 'Italiana', serif;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--wine-deep), var(--wine-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.comp-card-hook {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold-dark);
  margin-bottom: 1rem;
  min-height: 1.5em;
}

/* Stats with bars */
.comp-card-stats {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.comp-stat {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.65rem;
}
.comp-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0.7;
}
.comp-bar {
  height: 4px;
  background: rgba(92,7,16, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.comp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  border-radius: 999px;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.comp-card.in-view .comp-bar-fill,
.comp-card:hover .comp-bar-fill { width: var(--target-fill, 0%); }
.comp-stat-val {
  font-size: 0.65rem;
  color: var(--cherry);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

.comp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
}
.comp-card-tags li {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  background: rgba(201, 169, 97, 0.12);
  border-radius: 999px;
  color: var(--cherry);
}

.comp-card-recommend {
  background: linear-gradient(135deg, var(--cream-100), var(--paper));
  padding: 0.85rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  border-left: 3px solid var(--gold);
}
.comp-rec-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.comp-card-recommend p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--cherry);
}

.comp-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  background: var(--wine-deep);
  color: var(--cream);
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: auto;
  transition: all 0.4s ease;
}
.comp-card-cta:hover {
  background: var(--wine-bright);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -10px rgba(92,7,16, 0.5);
}
.comp-card-cta-gold { background: var(--gold); color: var(--cherry); }
.comp-card-cta-gold:hover { background: var(--gold-light); }

/* FEATURED */
.comp-card-featured {
  background: linear-gradient(180deg, #fff, #fdf6e8);
  border-color: var(--gold);
  box-shadow: 0 20px 50px -25px rgba(201, 169, 97, 0.4);
  transform: translateY(-4px);
}
.comp-card-featured:hover { transform: translateY(-12px); }
/* [v9.7] BADGE — bulletproof flow-based positioning.
   Previously absolute positioning conflicted with the parent card's
   transform: translateY (different stacking contexts caused clipping).
   Now the badge is part of the flow, aligned to top of card via
   negative margin. No transforms compose, no clipping ancestors break it.
   The card body uses margin-top: 0.5rem to compensate for spacing. */
.comp-card-badge {
  align-self: center;
  margin-top: -1.85rem;        /* pulls badge up above the card border */
  margin-bottom: 0.85rem;       /* breathing room before card content */
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--cherry);
  padding: 0.5rem 1.1rem;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 20px -8px rgba(201, 169, 97, 0.6),
              0 0 0 4px rgba(255, 255, 255, 0.85);  /* white halo so it pops cleanly above card */
  position: relative;
  z-index: 2;
}

/* DARK variant */
.comp-card-dark {
  background: linear-gradient(180deg, var(--wine-deep), var(--wine-mid));
  color: var(--cream);
  border-color: rgba(201, 169, 97, 0.3);
}
.comp-card-dark .comp-card-name { color: var(--gold-light); }
.comp-card-dark .comp-card-price {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.comp-card-dark .comp-card-head { border-color: rgba(201, 169, 97, 0.2); }
.comp-card-dark .comp-card-hook { color: var(--gold-light); }
.comp-card-dark .comp-stat-label { color: var(--cream); opacity: 0.7; }
.comp-card-dark .comp-stat-val { color: var(--gold-light); }
.comp-card-dark .comp-bar { background: rgba(201, 169, 97, 0.15); }
.comp-card-dark .comp-card-tags li {
  background: rgba(201, 169, 97, 0.18);
  color: var(--gold-light);
}
.comp-card-dark .comp-card-recommend {
  background: rgba(201, 169, 97, 0.1);
  border-left-color: var(--gold-light);
}
.comp-card-dark .comp-card-recommend p { color: var(--gold-light); }

/* Trust mini cards */
.trust-mini {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 16px;
  transition: all 0.3s ease;
}
.trust-mini:hover {
  background: #fff;
  border-color: var(--gold);
  transform: translateY(-3px);
}


/* ════════════════════════════════════════════════
   Utilidades (Tailwind → CSS plano) scopeadas al comparador embebido
   Necesario porque las páginas de detalle no cargan Tailwind.
   ════════════════════════════════════════════════ */
.cmp-embed { position: relative; overflow: hidden; padding: clamp(2.5rem,5vw,4rem) 0 clamp(4rem,8vw,6rem); background: var(--cream-100, #F7F2EF); }
.cmp-embed .relative { position: relative; }
.cmp-embed .absolute { position: absolute; }
.cmp-embed .hidden { display: none; }
.cmp-embed .flex { display: flex; }
.cmp-embed .inline-flex { display: inline-flex; }
.cmp-embed .flex-wrap { flex-wrap: wrap; }
.cmp-embed .items-center { align-items: center; }
.cmp-embed .justify-center { justify-content: center; }
.cmp-embed .text-center { text-align: center; }
.cmp-embed .uppercase { text-transform: uppercase; }
.cmp-embed .italic { font-style: italic; }
.cmp-embed .rounded-full { border-radius: 9999px; }
.cmp-embed .mx-auto { margin-left: auto; margin-right: auto; }
.cmp-embed .mb-2 { margin-bottom: .5rem; }
.cmp-embed .mb-4 { margin-bottom: 1rem; }
.cmp-embed .mb-8 { margin-bottom: 2rem; }
.cmp-embed .mb-10 { margin-bottom: 2.5rem; }
.cmp-embed .mb-12 { margin-bottom: 3rem; }
.cmp-embed .mt-4 { margin-top: 1rem; }
.cmp-embed .gap-2 { gap: .5rem; }
.cmp-embed .gap-4 { gap: 1rem; }
.cmp-embed .px-4 { padding-left: 1rem; padding-right: 1rem; }
.cmp-embed .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.cmp-embed .py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.cmp-embed .z-10 { z-index: 10; }
.cmp-embed .max-w-\[1200px\] { max-width: 1200px; }
.cmp-embed .w-2 { width: .5rem; }
.cmp-embed .h-2 { height: .5rem; }
.cmp-embed .w-40 { width: 10rem; }
.cmp-embed .h-40 { height: 10rem; }
.cmp-embed .top-10 { top: 2.5rem; }
.cmp-embed .right-\[10\%\] { right: 10%; }
.cmp-embed .opacity-\[0\.06\] { opacity: .06; }
.cmp-embed .text-xs { font-size: .75rem; line-height: 1rem; }
.cmp-embed .text-\[0\.7rem\] { font-size: .7rem; }
.cmp-embed .text-lg { font-size: 1.125rem; }
.cmp-embed .text-xl { font-size: 1.25rem; }
.cmp-embed .tracking-\[0\.3em\] { letter-spacing: .3em; }
.cmp-embed .tracking-\[0\.2em\] { letter-spacing: .2em; }
.cmp-embed .font-editorial { font-family: 'Cormorant Garamond', serif; }
.cmp-embed .inline-block { display: inline-block; }
.cmp-embed .animate-pulse { animation: cmpPulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes cmpPulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.cmp-embed .headline-section { font-family: 'Italiana', serif; font-weight: 400; line-height: 1.1; }
.cmp-embed .headline-xl { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
@media (min-width: 768px) {
  .cmp-embed .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .cmp-embed .md\:pt-16 { padding-top: 4rem; }
  .cmp-embed .md\:pb-28 { padding-bottom: 7rem; }
  .cmp-embed .md\:block { display: block; }
  .cmp-embed .md\:text-xl { font-size: 1.25rem; }
}