/**
 * 04-components.css
 *
 * Componentes reutilizables en toda la página.
 * Decisión: BEM simplificado — .componente__elemento--modificador
 */

/* ══════════════════════════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ic-space-2);
  padding: var(--ic-space-4) var(--ic-space-8);
  font-family: var(--ic-font-sans);
  font-size: var(--ic-text-body);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--ic-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--ic-duration-base) var(--ic-ease-bounce),
    box-shadow var(--ic-duration-base) var(--ic-ease),
    background var(--ic-duration-base) var(--ic-ease),
    border-color var(--ic-duration-base) var(--ic-ease);
  position: relative;
  overflow: hidden;
}

/* Efecto shimmer en hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ic-ease);
}
.btn:hover::after {
  transform: translateX(100%);
}

/* CTA primario — rojo sólido */
.btn--primary {
  background: var(--ic-accent);
  color: #ffffff;
  border-color: var(--ic-accent);
}
.btn--primary:hover {
  background: var(--ic-accent-dark);
  border-color: var(--ic-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--ic-shadow-red);
}
.btn--primary:active {
  transform: translateY(0);
}

/* CTA secundario — outline blanco */
.btn--ghost {
  background: transparent;
  color: var(--ic-text-primary);
  border-color: rgba(255,255,255,0.25);
}
.btn--ghost:hover {
  border-color: rgba(255,255,255,0.60);
  transform: translateY(-2px);
}

/* CTA outline rojo */
.btn--outline-red {
  background: transparent;
  color: var(--ic-accent);
  border-color: var(--ic-accent);
}
.btn--outline-red:hover {
  background: var(--ic-accent-subtle);
  transform: translateY(-2px);
}

/* Tamaños */
.btn--lg {
  padding: var(--ic-space-5) var(--ic-space-10);
  font-size: var(--ic-text-body-lg);
}
.btn--sm {
  padding: var(--ic-space-3) var(--ic-space-6);
  font-size: var(--ic-text-sm);
}

/* Full width en móvil */
.btn--full-mobile {
  @media (max-width: 767px) {
    width: 100%;
    justify-content: center;
  }
}

/* Flecha animada */
.btn .arrow {
  display: inline-block;
  transition: transform var(--ic-duration-base) var(--ic-ease);
}
.btn:hover .arrow {
  transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--ic-bg-card);
  border: 1px solid var(--ic-border-dark);
  border-radius: var(--ic-radius-lg);
  padding: clamp(var(--ic-space-6), 3vw, var(--ic-space-10));
  position: relative;
  transition:
    transform var(--ic-duration-base) var(--ic-ease),
    border-color var(--ic-duration-base) var(--ic-ease),
    box-shadow var(--ic-duration-base) var(--ic-ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.15);
  box-shadow: var(--ic-shadow-lg);
}

/* Card destacada — borde rojo */
.card--featured {
  border-color: var(--ic-accent);
  background: linear-gradient(145deg, var(--ic-bg-card) 0%, rgba(200,16,46,0.04) 100%);
}
.card--featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--ic-accent) 0%, transparent 60%);
  z-index: var(--ic-z-below);
  opacity: 0.3;
}

/* Card clara (para secciones con fondo claro) */
.card--light {
  background: #ffffff;
  border-color: var(--ic-border-light);
  color: var(--ic-text-dark);
}
.card--light:hover {
  border-color: rgba(200,16,46,0.25);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ic-space-2);
  padding: var(--ic-space-1) var(--ic-space-4);
  font-size: var(--ic-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--ic-radius-pill);
}

.badge--red {
  background: var(--ic-accent);
  color: #ffffff;
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--ic-accent);
  color: var(--ic-accent);
}

/* ══════════════════════════════════════════════════════════════════════════════
   DIVIDERS
   ══════════════════════════════════════════════════════════════════════════════ */

.divider {
  width: 100%;
  height: 1px;
  background: var(--ic-border-dark);
  margin-block: var(--ic-space-8);
}

.divider--red {
  background: linear-gradient(90deg, transparent, var(--ic-accent), transparent);
  height: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ESTRELLAS (testimonios)
   ══════════════════════════════════════════════════════════════════════════════ */

.stars {
  display: flex;
  gap: 2px;
}

.star {
  width: 16px;
  height: 16px;
}

.star--filled {
  color: #f5a623; /* Dorado */
}

.star--empty {
  color: var(--ic-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN PRINCIPAL
   ══════════════════════════════════════════════════════════════════════════════ */

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--ic-space-8);
  list-style: none;
}

.primary-nav a {
  font-size: var(--ic-text-sm);
  font-weight: 500;
  color: var(--ic-text-secondary);
  letter-spacing: 0.01em;
  transition: color var(--ic-duration-fast) var(--ic-ease);
  position: relative;
}

.primary-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ic-accent);
  transform: scaleX(0);
  transition: transform var(--ic-duration-base) var(--ic-ease);
}

.primary-nav a:hover,
.primary-nav a.current {
  color: var(--ic-text-primary);
}
.primary-nav a:hover::after,
.primary-nav a.current::after {
  transform: scaleX(1);
}

/* Menú móvil — oculto por defecto */
.mobile-menu-toggle {
  display: none;
  padding: var(--ic-space-2);
  color: var(--ic-text-primary);
}

@media (max-width: 767px) {
  .primary-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--ic-bg-deep);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--ic-space-8);
    z-index: var(--ic-z-modal);
  }
  .primary-nav.is-open {
    display: flex;
  }
  .primary-nav a {
    font-size: var(--ic-text-h3);
  }
  .mobile-menu-toggle {
    display: block;
    z-index: calc(var(--ic-z-modal) + 1);
  }
}

/* ── CHECKOUT ────────────────────────────────────────────────────────────── */
.ic-trust-badges svg,
.ic-trust-badges { max-width: 24px !important; max-height: 24px !important; }
.ic-trust-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.woocommerce-checkout { color: var(--ic-text-primary); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: var(--ic-bg-card) !important;
  border: 1px solid var(--ic-border-dark) !important;
  color: var(--ic-text-primary) !important;
  border-radius: var(--ic-radius-md) !important;
  padding: var(--ic-space-4) !important;
}
.woocommerce #payment { background: var(--ic-bg-card) !important; border-radius: var(--ic-radius-lg) !important; }
.woocommerce #payment div.payment_box { background: var(--ic-bg-mid) !important; }
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: var(--ic-space-4) var(--ic-space-5) !important; border-bottom: 1px solid var(--ic-border-dark) !important; }
/* CHECKOUT PREMIUM v2 — intimidadconsciente.es */
.ic-checkout-premium svg{display:inline-block!important;vertical-align:middle!important;flex-shrink:0!important}
.woocommerce-checkout #payment .payment_box::before,.woocommerce-checkout #payment .payment_box::after{display:none!important}
.woocommerce-checkout #payment div.payment_box{margin-top:0!important}
.ic-checkout-premium .woocommerce{max-width:1060px;margin:0 auto;padding:40px 20px 80px}
.ic-checkout-premium #customer_details{float:left;width:56%;margin-right:4%}
.ic-checkout-premium #order_review_heading,.ic-checkout-premium #order_review{float:right;width:40%}
@media(max-width:860px){.ic-checkout-premium #customer_details,.ic-checkout-premium #order_review_heading,.ic-checkout-premium #order_review{float:none;width:100%;margin-right:0}}
.ic-checkout-premium #order_review_heading{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#e63946;margin-bottom:12px;margin-top:0}
.ic-checkout-premium .woocommerce-billing-fields,.ic-checkout-premium #payment{background:#111;border:1px solid #1e1e1e;border-radius:12px;padding:24px;margin-bottom:16px}
.ic-checkout-premium .woocommerce-billing-fields h3{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#e63946;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid #1e1e1e}
.ic-checkout-premium .form-row{margin-bottom:16px}
.ic-checkout-premium .form-row label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#777;display:block;margin-bottom:8px}
.ic-checkout-premium .form-row label .required{color:#e63946}
.ic-checkout-premium .form-row input[type=text],.ic-checkout-premium .form-row input[type=email],.ic-checkout-premium .form-row input[type=tel],.ic-checkout-premium .form-row select{width:100%;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:8px;padding:13px 16px;color:#fff;font-size:15px;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;-webkit-appearance:none}
.ic-checkout-premium .form-row input:focus,.ic-checkout-premium .form-row select:focus{outline:none;border-color:#e63946;box-shadow:0 0 0 3px rgba(230,57,70,.12)}
.ic-checkout-premium #payment{padding:20px}
.ic-checkout-premium #payment ul.payment_methods{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:10px;border:none!important}
.ic-checkout-premium #payment ul.payment_methods li{background:#0d0d0d;border:1px solid #2a2a2a;border-radius:10px;overflow:hidden;padding:0!important;margin:0!important}
.ic-checkout-premium #payment ul.payment_methods li label{display:flex!important;align-items:center;gap:10px;padding:14px 16px!important;cursor:pointer;font-size:14px!important;font-weight:600;color:#ccc!important;text-transform:none!important;letter-spacing:0!important}
.ic-checkout-premium #payment ul.payment_methods li label img{height:22px!important;width:auto!important;max-width:55px!important;display:inline-block!important}
.ic-checkout-premium #payment ul.payment_methods li input[type=radio]{accent-color:#e63946;width:16px;height:16px;cursor:pointer;flex-shrink:0}
.ic-checkout-premium #payment div.payment_box{background:#080808!important;border-top:1px solid #1e1e1e;padding:14px 16px!important;font-size:13px;color:#666;border-radius:0 0 10px 10px}
.ic-checkout-premium #payment #place_order{width:100%!important;background:linear-gradient(135deg,#e63946,#c1121f)!important;color:#fff!important;border:none!important;border-radius:10px!important;padding:18px 24px!important;font-size:17px!important;font-weight:800!important;cursor:pointer!important;transition:all .2s!important;text-transform:uppercase!important;letter-spacing:.5px!important;box-shadow:0 4px 24px rgba(230,57,70,.4)!important;display:block!important;margin-top:16px!important}
.ic-checkout-premium #payment #place_order:hover{transform:translateY(-2px)!important;box-shadow:0 8px 32px rgba(230,57,70,.5)!important}
.ic-trust-badges{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding:16px;background:#0a0a0a;border-radius:8px;border:1px solid #1a1a1a}
.ic-trust-item{display:flex;align-items:center;gap:8px;font-size:12px;color:#777;line-height:1.3}
.ic-guarantee-strip{display:flex;align-items:flex-start;gap:12px;margin-top:12px;padding:14px 16px;background:#0a1a0a;border:1px solid #1a3a1a;border-radius:8px}
.ic-guarantee-icon{font-size:26px;line-height:1;flex-shrink:0}
.ic-guarantee-strip strong{display:block;font-size:12px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.ic-guarantee-strip p{font-size:12px;color:#555;margin:0;line-height:1.4}
.ic-checkout-premium .woocommerce-checkout-review-order{background:#111;border:1px solid #1e1e1e;border-radius:12px;overflow:hidden}
.ic-checkout-premium .woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse}
.ic-checkout-premium .woocommerce-checkout-review-order-table thead{display:none}
.ic-checkout-premium .woocommerce-checkout-review-order-table th,.ic-checkout-premium .woocommerce-checkout-review-order-table td{padding:12px 20px;text-align:left;font-size:14px;color:#888;border-bottom:1px solid #1a1a1a}
.ic-checkout-premium .woocommerce-checkout-review-order-table .order-total th,.ic-checkout-premium .woocommerce-checkout-review-order-table .order-total td{font-size:22px;font-weight:800;color:#fff;border-bottom:none}
.ic-checkout-premium .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount{color:#e63946}
.ic-book-preview-row td{padding:16px 20px!important;border-bottom:1px solid #1a1a1a}
.ic-book-preview{display:flex;align-items:center;gap:14px}
.ic-book-preview img{width:64px!important;height:auto!important;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.6);flex-shrink:0;display:block!important}
.ic-book-preview-info{display:flex;flex-direction:column;gap:3px}
.ic-book-preview-info strong{font-size:14px;font-weight:700;color:#fff;line-height:1.3;display:block}
.ic-book-preview-info span{font-size:11px;color:#555}
.ic-book-price{display:flex;align-items:center;gap:8px;margin-top:4px}
.ic-book-price s{font-size:12px;color:#444;text-decoration:line-through}
.ic-book-price em{font-size:20px;font-weight:900;color:#e63946;font-style:normal}
.ic-book-price b{font-size:10px;font-weight:800;background:#22c55e;color:#000;padding:2px 7px;border-radius:100px}
.ic-checkout-premium .woocommerce-privacy-policy-text,.ic-checkout-premium #createaccount,.ic-checkout-premium .create-account,.ic-checkout-premium .woocommerce-account-fields{display:none!important}
.ic-checkout-premium .woocommerce-error{background:#1a0505;border:1px solid #5a0a0a;border-radius:8px;padding:14px 18px;margin-bottom:16px;list-style:none;color:#f87171;font-size:14px}
.ic-checkout-premium .woocommerce::after{content:'';display:table;clear:both}
@media(max-width:600px){.ic-checkout-premium .woocommerce{padding:20px 16px 60px}.ic-checkout-premium .woocommerce-billing-fields,.ic-checkout-premium #payment{padding:18px}}

/* === CHECKOUT LIMPIO FINAL === */
.ic-checkout-premium #customer_details{width:55%!important;float:left!important;margin-right:4%!important}
.ic-checkout-premium #order_review_heading,.ic-checkout-premium #order_review{float:right!important;width:40%!important}
.ic-checkout-premium .woocommerce-billing-fields{width:100%!important;box-sizing:border-box!important;padding:24px!important}
.ic-checkout-premium .woocommerce-billing-fields__field-wrapper{display:grid!important;grid-template-columns:1fr 1.6fr!important;gap:16px!important;width:100%!important}
.ic-checkout-premium .woocommerce-billing-fields .form-row{width:100%!important;margin:0!important;float:none!important}
.ic-checkout-premium .woocommerce-billing-fields .form-row input{width:100%!important;box-sizing:border-box!important;display:block!important}
.ic-checkout-premium #payment{overflow:visible!important}
.ic-checkout-premium .woocommerce-checkout-review-order{overflow:visible!important}
.ic-trust-badges{display:flex!important;flex-direction:column!important;gap:8px!important;width:100%!important;box-sizing:border-box!important;padding:16px!important;background:#0a0a0a!important;border-radius:8px!important;border:1px solid #1a1a1a!important;margin-top:16px!important}
.ic-trust-item{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;width:100%!important;font-size:12px!important;color:#777!important}
.ic-trust-item span{flex:1!important;white-space:normal!important;word-break:normal!important}
.ic-guarantee-strip{display:flex!important;align-items:center!important;gap:12px!important;margin-top:12px!important;padding:14px 16px!important;background:#0a1a0a!important;border:1px solid #1a3a1a!important;border-radius:8px!important;width:100%!important;box-sizing:border-box!important}
.ppc-button-wrapper,.ppcp-button-apm,[data-ppcp-button],#ppc-button,#ppc-button-checkout-form,.ppcp-button-checkout-form{display:none!important}
.woocommerce-checkout .woocommerce-form__label-for-checkbox,[name="ppcp_subscribe"],[name="ppcp_subscribe"]+label,[for="ppcp_subscribe"],.woocommerce-privacy-policy-text,.woocommerce-account-fields{display:none!important}
.ic-checkout-premium .woocommerce-additional-fields{display:none!important}
.ic-checkout-premium .woocommerce::after{content:'';display:table;clear:both}
@media(max-width:860px){.ic-checkout-premium #customer_details,.ic-checkout-premium #order_review_heading,.ic-checkout-premium #order_review{float:none!important;width:100%!important;margin-right:0!important}}