/* ============================================================
   Ravenol Landings — front.css (carga todos los módulos)
   v3.1 — CSS separado por componente
   ============================================================ */

/* Variables y reset */
.rvll-wrap, .rvll-wrap * { box-sizing: border-box; }

.rvll-wrap {
  --rvll-blue-dark:  #0a2c67;
  --rvll-blue:       #123f8c;
  --rvll-blue-soft:  #eaf1fb;
  --rvll-yellow:     #f3c300;
  --rvll-yellow-dk:  #d4a800;
  --rvll-text:       #1d2433;
  --rvll-muted:      #5d677d;
  --rvll-border:     #dce4f1;
  --rvll-radius-xl:  28px;
  --rvll-radius-lg:  20px;
  --rvll-radius-md:  14px;
  font-family: inherit;
  color: var(--rvll-text);
}

/* --- eyebrow.css --- */
.rvll-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(243,195,0,0.12);
  color: var(--rvll-blue-dark);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 16px;
}

/* --- products.css --- */
.rvll-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .rvll-products-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .rvll-products-grid { grid-template-columns: 1fr; } }

.rvll-product-card {
  border-radius: var(--rvll-radius-xl);
  overflow: visible; /* overflow:hidden movido a __media — el badge no se recorta en hover */
  box-shadow: 0 14px 40px rgba(18,63,140,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.rvll-product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(18,63,140,0.14); }
.rvll-product-card--out { opacity: .65; }

.rvll-product-card__media {
  position: relative; background: #fff;
  padding: 20px 20px 8px; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; /* contiene el scale de la imagen sin tocar el badge */
  border-radius: var(--rvll-radius-xl) var(--rvll-radius-xl) 0 0;
}
.rvll-product-card__badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(10,44,103,0.92);
  color: #fff; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  z-index: 2; pointer-events: none;
}
.rvll-product-card__img-link { display: flex; align-items: center; justify-content: center; width: 100%; }
.rvll-product-card__img { max-height: 200px; width: auto; object-fit: contain; transition: transform .3s ease; }
.rvll-product-card:hover .rvll-product-card__img { transform: scale(1.05); }
.rvll-product-card__img-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 200px; color: var(--rvll-blue); font-weight: 900; font-size: 14px; letter-spacing: 3px; }

.rvll-product-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 13px; }
.rvll-product-card__name { font-size: 21px; font-weight: 900; line-height: 1.12; letter-spacing: -0.02em; color: var(--rvll-blue-dark); margin: 0; }
.rvll-product-card__name a { color: inherit; text-decoration: none; }
.rvll-product-card__name a:hover { color: var(--rvll-blue); }

.rvll-product-card__specs { display: flex; flex-wrap: wrap; gap: 6px; }
.rvll-spec-pill { background: #f3f6fa; border: 1px solid rgba(15,23,42,.10); border-radius: 8px; padding: 5px 10px; color: #0f172a; font-weight: 700; font-size: 12px; line-height: 1.25; }
.rvll-spec-pill--visc { background: #eaf1fb; border-color: rgba(17,79,136,.18); color: var(--rvll-blue-dark); }

.rvll-product-card__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rvll-product-card__benefits li { display: flex; gap: 10px; font-size: 14px; color: var(--rvll-text); line-height: 1.5; }
.rvll-product-card__benefits li svg { width: 16px; height: 16px; flex: 0 0 16px; fill: #2ca24f; margin-top: 2px; }

.rvll-product-card__price-row { margin-top: auto; }
.rvll-product-card__price { font-size: 28px; font-weight: 900; color: var(--rvll-blue-dark); letter-spacing: -0.03em; line-height: 1; }
.rvll-product-card__price del { font-size: 15px; color: #9ca3af; font-weight: 400; }
.rvll-product-card__price ins { text-decoration: none; display: block; }
.rvll-product-card__price .woocommerce-Price-amount { font-weight: 900; }
.rvll-product-card__price del .woocommerce-Price-amount { font-size: 15px; font-weight: 400; color: #9ca3af; }

.rvll-product-card__footer { padding: 4px 22px 22px; }

/* Botón carrito — azul gradiente Woodmart, nunca naranja */
.rvll-btn-cart,
.rvll-btn-cart:link,
.rvll-btn-cart:visited {
  width: 100%; min-height: 52px;
  border-radius: var(--rvll-radius-md) !important;
  background: linear-gradient(90deg, #093875 0%, #0088CF 52.08%, #093875 100%) !important;
  color: #fefefe !important;
  border: none !important; padding: 0 18px;
  font-size: 14px; font-weight: 800 !important; line-height: 1;
  text-decoration: none !important; cursor: pointer;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 8px 20px rgba(9,56,117,.22) !important;
}
.rvll-btn-cart:hover,
.rvll-btn-cart:focus {
  opacity: .88 !important;
  color: #fefefe !important;
  transform: translateY(-2px);
  background: linear-gradient(90deg, #093875 0%, #0088CF 52.08%, #093875 100%) !important;
}
.rvll-btn-cart--secondary,
.rvll-btn-cart--secondary:link,
.rvll-btn-cart--secondary:visited {
  background: #edf3fb !important;
  color: var(--rvll-blue-dark) !important;
  box-shadow: none !important;
}
.rvll-btn-cart--secondary:hover { background: #dde8f8 !important; }

/* --- why.css --- */
.rvll-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 640px) { .rvll-why-grid { grid-template-columns: 1fr; } }

.rvll-why-item {
  background: #fff; border: 1px solid #e5ecf7;
  border-radius: 22px; padding: 26px;
  box-shadow: 0 10px 32px rgba(18,63,140,.06);
  display: flex; gap: 18px; align-items: flex-start;
  transition: transform .2s, box-shadow .2s;
}
.rvll-why-item:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(18,63,140,.11); }
.rvll-why-icon {
  width: 64px; height: 64px; min-width: 64px; border-radius: 18px;
  background: linear-gradient(135deg, #edf3ff 0%, #dfe9fb 100%);
  border: 1px solid #d6e1f2;
  display: flex; align-items: center; justify-content: center;
}
.rvll-why-icon svg { width: 30px !important; height: 30px !important; max-width: 30px !important; fill: #0a2c67; display: block; }
.rvll-why-title { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; color: #0a2c67; margin: 0 0 6px; line-height: 1.15; }
.rvll-why-desc  { font-size: 14px; color: #5d677d; margin: 0; line-height: 1.7; }

/* --- intervals.css --- */
.rvll-intervals-card {
  background: #fff; border-radius: 24px; border: 1px solid #e3ebf7;
  box-shadow: 0 16px 42px rgba(10,44,103,.08);
  padding: 32px; max-width: 980px; margin: 0 auto;
}
.rvll-intervals-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 640px) { .rvll-intervals-row { grid-template-columns: 1fr; } }

.rvll-intervals-box {
  border-radius: 18px; padding: 26px; text-align: center;
  background: linear-gradient(135deg, #0b2e69 0%, #1c4c9d 100%);
  color: #fff; box-shadow: 0 14px 32px rgba(10,44,103,.18);
}
.rvll-intervals-box--alt { background: linear-gradient(135deg, #d3a400 0%, #f3c300 100%); color: #1d2433; box-shadow: 0 14px 32px rgba(243,195,0,.22); }
.rvll-intervals-box--soft { background: #eef3fb; color: #0a2c67; box-shadow: none; border: 1px solid #dde6f3; }
.rvll-intervals-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; margin-bottom: 10px; opacity: .9; }
.rvll-intervals-value { font-size: 28px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.rvll-intervals-note  { font-size: 13px; line-height: 1.5; margin-top: 10px; opacity: .92; }

/* --- compat-table.css --- */
.rvll-compat-wrap { width: 100%; }
.rvll-compat-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.rvll-compat-count { color: #5d677d; font-size: 14px; }
.rvll-compat-count strong { color: #1d2433; font-size: 16px; }
.rvll-compat-search {
  padding: 9px 36px 9px 14px; border: 1px solid #dce4f1; border-radius: 10px;
  font-size: 14px; width: 260px; outline: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.rvll-compat-search:focus { border-color: #123f8c; box-shadow: 0 0 0 3px rgba(18,63,140,.10); }
.rvll-compat-table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid #dce4f1; }
.rvll-compat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rvll-compat-table thead tr { background: #0a2c67; }
.rvll-compat-table thead th { padding: 13px 18px; text-align: left; font-weight: 800; font-size: 11px; letter-spacing: .7px; text-transform: uppercase; white-space: nowrap; color: #fff !important; }
.rvll-compat-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background .15s; }
.rvll-compat-table tbody tr:last-child { border-bottom: none; }
.rvll-compat-table tbody tr:hover { background: #f8faff; }
.rvll-compat-table td { padding: 12px 18px; color: #374151; vertical-align: middle; }
.rvll-engine-code { background: #f3f6fa; border: 1px solid rgba(15,23,42,.10); padding: 3px 8px; border-radius: 6px; font-size: 12px; font-family: monospace; }
.rvll-years { background: #fff8e1; border: 1px solid #ffe082; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #b45309; white-space: nowrap; }
.rvll-muted-cell { color: #d1d5db; }
.rvll-hidden { display: none !important; }
.rvll-compat-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 0 4px; }
.rvll-page-btn { background: transparent; border: 1px solid #dce4f1; border-radius: 8px; padding: 8px 18px; font-size: 13px; cursor: pointer; color: #5d677d; transition: all .15s; }
.rvll-page-btn:hover:not(:disabled) { border-color: #123f8c; color: #123f8c; }
.rvll-page-btn:disabled { opacity: .3; cursor: default; }
.rvll-page-info { font-size: 13px; color: #9ca3af; }
.rvll-compat-noresults { text-align: center; padding: 32px; color: #d1d5db; font-size: 14px; }

/* --- faq.css --- */
.rvll-faq-wrap { max-width: 980px; margin: 0 auto; }
.rvll-faq-item {
  background: #fff; border: 1px solid #e1e8f4;
  border-radius: 18px; margin-bottom: 14px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(18,63,140,.05);
}
.rvll-faq-item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 22px 56px 22px 22px;
  font-size: 17px; font-weight: 800; color: #0a2c67; line-height: 1.35;
  transition: background .15s;
}
.rvll-faq-item summary::-webkit-details-marker { display: none; }
.rvll-faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 300; color: #5d677d; }
.rvll-faq-item[open] summary { background: #f8faff; color: #123f8c; border-bottom: 1px solid #e8f0fb; }
.rvll-faq-item[open] summary::after { content: "−"; color: #123f8c; }
.rvll-faq-content { padding: 18px 22px 22px; color: #5d677d; font-size: 15px; line-height: 1.75; }
.rvll-faq-content p { margin: 0 0 12px; }
.rvll-faq-content p:last-child { margin: 0; }

/* Badge posicionado relativo a la card, encima del __media — no se recorta en hover */
.rvll-product-card { position: relative; }
.rvll-product-card > .rvll-product-card__badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
}
/* Ocultar el badge que está dentro de __media (si existe en markup antiguo) */
.rvll-product-card__media > .rvll-product-card__badge { display: none; }