/**
 * RecurreYa · Estilos de afiliados Amazon (.ryl-afi-*)
 *
 * Componentes para las fichas de producto (CPT "ficha", plantilla single-ficha.php)
 * y para el shortcode [fichas] usado en las Páginas pillar/comparativa.
 * Reutiliza los tokens globales del tema (--blue, --green, --ink, --muted,
 * --border, --surface, --soft) definidos en style.css.
 *
 * @package RecurreYa
 */

/* Colores de marca Amazon para los botones de afiliado. */
:root {
  --afi-amazon: #ff9900;
  --afi-amazon-btn: #ffd814;
  --afi-amazon-btn-hover: #f7ca00;
}

/* ---------- Banner de divulgación de afiliados (obligatorio Amazon) ---------- */
.ryl-afi-disclosure {
  background: rgba(255, 153, 0, 0.08);
  border: 1px solid rgba(255, 153, 0, 0.35);
  border-left: 4px solid var(--afi-amazon);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 auto 28px;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Botón de afiliado de Amazon ---------- */
.ryl-afi-btn {
  display: inline-block;
  background: var(--afi-amazon-btn);
  color: #11253b;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 13px 28px;
  border: 1px solid #e0ab00;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(255, 153, 0, 0.25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ryl-afi-btn:hover {
  color: #11253b;
  background: var(--afi-amazon-btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 153, 0, 0.32);
}
.ryl-afi-cta-wrap {
  text-align: center;
  margin: 30px auto;
  max-width: 760px;
}
.ryl-afi-gama {
  display: block;
  margin-top: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Estrellas de valoración ---------- */
.ryl-afi-stars {
  color: var(--afi-amazon);
  font-size: 20px;
  letter-spacing: 2px;
  white-space: nowrap;
}
.ryl-afi-score {
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  letter-spacing: 0;
  margin-left: 6px;
}

/* ---------- Pros y contras a dos columnas ---------- */
.ryl-afi-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 36px auto;
}
.ryl-afi-pc-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
}
.ryl-afi-pc-col h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  margin: 0 0 14px;
}
.ryl-afi-pros { border-top: 4px solid var(--green); }
.ryl-afi-contras { border-top: 4px solid #d64545; }
.ryl-afi-pc-col ul { list-style: none; margin: 0; padding: 0; }
.ryl-afi-pc-col li {
  position: relative;
  padding-left: 26px;
  margin: 0 0 12px;
  line-height: 1.55;
  color: var(--ink);
}
.ryl-afi-pros li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.ryl-afi-contras li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #d64545;
  font-weight: 700;
}

/* ---------- Ficha técnica ---------- */
.ryl-afi-specs {
  max-width: 760px;
  margin: 36px auto;
}
.ryl-afi-specs h2 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  margin: 0 0 16px;
}
.ryl-afi-specs table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.ryl-afi-specs th,
.ryl-afi-specs td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  vertical-align: top;
}
.ryl-afi-specs tr:last-child th,
.ryl-afi-specs tr:last-child td { border-bottom: 0; }
.ryl-afi-specs th {
  width: 42%;
  font-weight: 600;
  color: var(--muted);
  background: var(--soft);
}

/* ---------- Veredicto ---------- */
.ryl-afi-veredicto {
  max-width: 760px;
  margin: 36px auto;
  background: rgba(87, 178, 46, 0.08);
  border: 1px solid rgba(87, 178, 46, 0.30);
  border-left: 4px solid var(--green);
  border-radius: 12px;
  padding: 22px 26px;
}
.ryl-afi-veredicto h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 20px;
  margin: 0 0 10px;
}
.ryl-afi-veredicto p { margin: 0; color: var(--ink); }

/* ---------- Rejilla de tarjetas de ficha (shortcode [fichas]) ---------- */
.ryl-afi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 300px));
  justify-content: center;
  gap: 22px;
  margin: 30px 0;
}
.ryl-afi-pick {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 22px rgba(17, 37, 59, 0.06);
  display: flex;
  flex-direction: column;
}
.ryl-afi-pick-img img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 14px;
}
.ryl-afi-pick-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.3;
}
.ryl-afi-pick-title a { color: var(--ink); text-decoration: none; }
.ryl-afi-pick-title a:hover { color: var(--blue); }
.ryl-afi-pick-rating { margin: 0 0 8px; }
.ryl-afi-pick-pro { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.ryl-afi-pick-actions {
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.ryl-afi-pick-link {
  color: var(--blue);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .ryl-afi-pc { grid-template-columns: 1fr; }
  .ryl-afi-specs th { width: 45%; }
}

/* ---- Bloque "productos recomendados" en páginas de multa relacionadas ---- */
.ryl-afi-rel{background:#f3f7fc;border-top:1px solid rgba(17,37,59,.08);margin:48px 0 0;padding:48px 20px;display:flex;justify-content:center}
.ryl-afi-rel-in{max-width:1040px;width:100%}
.ryl-afi-rel-kicker{display:block;text-align:center;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#1b78c2}
.ryl-afi-rel-title{text-align:center;font-family:'Playfair Display',Georgia,serif;font-size:28px;line-height:1.2;color:#11253b;margin:8px 0 26px}
.ryl-afi-rel-mas{margin:22px 0 0;text-align:center}
.ryl-afi-rel .ryl-afi-disclosure{text-align:center}
.ryl-afi-rel-mas a{color:#1b78c2;font-weight:600;text-decoration:none}
.ryl-afi-rel-mas a:hover{text-decoration:underline}
.ryl-afi-rel .ryl-afi-disclosure{margin-top:16px}

/* ---- Tarjetas de ficha: indicador de precio (gama) + descripción uniforme ---- */
.ryl-afi-pick-gama{font:600 12px/1 'DM Mono',monospace;letter-spacing:.02em;color:#5d6b7a;margin:6px 0 2px;display:flex;align-items:center;gap:8px;text-transform:uppercase}
.ryl-afi-pick-euros{font-size:15px;letter-spacing:2px;color:#57b22e}
.ryl-afi-pick-euros .off{color:rgba(17,37,59,.16)}
.ryl-afi-pick-pro{min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}