@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   IDENTIDAD VISUAL — NEGRO, DORADO & AZUL MARINO (Ronny Chirinos)
   ------------------------------------------------------------
   Hoja compartida que se enlaza DESPUÉS de los estilos propios
   de cada página, para reescribir la paleta clara original a un
   tema oscuro premium (estilo editorial de lujo): titulares en
   serif Playfair Display, cuerpo en Inter, acento dorado y toques
   de azul marino profundo. Textura mate de dinero, monedas y
   diamantes al fondo. Redeclara las mismas clases del template,
   así que gana por orden de carga sin tocar 18 archivos.
   ============================================================ */

:root{
  --paper:#07080c;            /* negro con matiz azulado */
  --card:#1A1814;             /* superficie grafito cálido */
  --card-warm:#14120c;        /* superficie cálida alterna */
  --ink:#F4EFE3;              /* texto principal: blanco cálido */
  --stone:#C2BBAD;            /* texto secundario cálido, más claro */
  --hair:rgba(196,168,110,.16);
  --hairline:rgba(196,168,110,.16);
  --gold:#D0A64F;            /* acento dorado */
  --gold-text:#EFD79C;       /* dorado más claro para texto sobre negro */
  --navy:#2A2419;            /* grafito cálido profundo */
  --navy-deep:#161207;       /* grafito cálido más profundo */
  --navy-glow:#D9B65F;       /* oro medio para acentos */
  --royal:#D9B65F;
  --line:rgba(196,168,110,.16);
}

/* ---------- Tipografía estilo editorial de lujo ---------- */
body{font-family:'Inter',system-ui,sans-serif;}
h1,h2,h3,h4,.sec-h,.hero h1,.rec-h,.rev-name,.vs-title,
.block-head h2,.ben-card h3,.help-card h3{
  font-family:'Playfair Display',Georgia,serif !important;
  letter-spacing:0 !important;
  font-weight:700 !important;
}
.hero h1{font-weight:800 !important;line-height:1.02 !important;}
.eyebrow,.block-head .eyebrow{
  font-family:'Inter',sans-serif !important;
  letter-spacing:.28em !important;text-transform:uppercase !important;
  font-size:11.5px !important;font-weight:600 !important;
}

/* ---------- Fondo de negro brillante con relieve visible ----------
   Capas (de arriba hacia abajo):
   1. Brillo especular superior: da el aspecto de laca negra pulida.
   2. Matiz azul marino sutil en la parte superior.
   3. Velo oscuro LIGERO para mantener legibilidad sin tapar el relieve.
   4. La textura de billetes, monedas y diamantes en negro brillante. */
html{background-color:#04050a;}
body{
  background-color:#04050a;
  background-image:
    radial-gradient(1100px 520px at 50% -8%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(1200px 700px at 50% -10%, rgba(150,116,52,.20), transparent 60%),
    linear-gradient(180deg, rgba(4,5,10,.36), rgba(4,5,10,.52)),
    url("assets/brand/texture-noir.png");
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  background-size:cover, cover, cover, 480px auto;
  background-attachment:fixed, fixed, fixed, fixed;
  background-position:center, center, center, center;
  color:var(--ink);
}

/* Texto general y encabezados en claro */
h1,h2,h3,h4{color:var(--ink);}
.sec-h{color:var(--ink);}
.eyebrow,.block-head .eyebrow{color:var(--gold-text) !important;}
.block-head .lede{color:var(--stone);}

/* ---------- HERO ---------- */
.hero{background:#07080c !important;}
.hero-veil{
  background:linear-gradient(to top,
    rgba(7,8,12,.99) 0%, rgba(7,8,12,.97) 20%,
    rgba(7,8,12,.86) 34%, rgba(7,8,12,.52) 48%,
    rgba(7,8,12,.16) 62%, rgba(7,8,12,0) 78%) !important;
}
@media(min-width:900px){
  .hero-veil{
    background:linear-gradient(to right,
      rgba(7,8,12,.96) 38%, rgba(7,8,12,.62) 55%,
      rgba(7,8,12,0) 78%) !important;
  }
}
.hero h1{
  color:var(--ink) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:0 2px 24px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.6) !important;
}
.hero .sub{
  color:var(--gold-text) !important;
  text-shadow:0 1px 12px rgba(0,0,0,.7) !important;
}

/* ---------- Botón / CTA principal (dorado, texto oscuro) ---------- */
.btn-solid,
.c-item.primary,
.bottombar .bb-main,
.tn-cta{
  background:linear-gradient(160deg,#FBEFC6 0%,#EBD08E 18%,#C9A24B 46%,#E8CD86 62%,#A87C2E 100%) !important;
  color:#1a1405 !important;
  border-color:transparent !important;
  box-shadow:0 8px 26px rgba(201,162,75,.30) !important;
}
.btn-solid svg,.c-item.primary svg,.bottombar .bb-main svg,.tn-cta svg{color:#1a1405;}

/* Círculos y pasos numerados: dorado sólido */
.how-n,.stp-n{
  background:linear-gradient(180deg,#F1DFA8,#C9A24B) !important;
  color:#1a1405 !important;
}

/* Chips seleccionados: dorado */
.gal-chip.on,.chip.on,.tab.on{
  background:linear-gradient(180deg,#F1DFA8,#C9A24B) !important;
  color:#1a1405 !important;
  border-color:transparent !important;
}

/* Superficies oscuras secundarias */
.faq-ic,.pill.video,.vs-head .rp,.toast{
  background:#241f16 !important;
  color:var(--gold-text) !important;
  border-color:rgba(230,205,150,.20) !important;
}
.toast{color:var(--ink) !important;}
.vs-head .rp small{color:var(--gold) !important;}

/* Líneas del menú hamburguesa: claras */
.tn-burger span{background:var(--ink) !important;}

/* ---------- Superficies de tarjeta que estaban en blanco ---------- */
.nv-card,.nvm-close,.bottombar .bb-wa,.gal-chip,.ts-item,.ben-card,
.comp-details,.cat-card,.fc-wa,.rev-photo img,.vs-cell.rp-cell{
  background:var(--card) !important;
  border-color:var(--hairline) !important;
  color:var(--ink);
}
.vs-cell.rp-cell{background:rgba(230,205,150,.05) !important;}

/* Botones con borde dorado (mantienen el borde, fondo oscuro) */
.btn-save,.how-more,.btn-line-g{
  background:var(--card) !important;
  color:var(--ink) !important;
  border:1.5px solid var(--gold) !important;
}
.hero .btn-save,.hero .btn-save:hover{background:var(--card) !important;color:var(--ink) !important;}
.btn-ghost{
  background:rgba(30,27,20,.6) !important;
  border-color:var(--hairline) !important;
  color:var(--ink) !important;
}

/* Estados hover/active claros del original → oscuros */
.help-card:hover{background:#1d1a13 !important;}
.help-card:active{background:#211d15 !important;box-shadow:inset 0 2px 6px rgba(0,0,0,.4) !important;}

/* ---------- Encabezados fijos con desenfoque ---------- */
.bar,.tabs,.topnav,.bottombar{
  background:rgba(11,11,12,.82) !important;
  border-color:var(--hairline) !important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}

/* ---------- Textos oscuros fijos → claros ---------- */
.rev-txt{color:#DED7C8 !important;}
.vs-cell{color:var(--stone);}
.vs-cell.rp-cell{color:var(--ink) !important;}
.hint,.h-txt p,.rec-body p,.rev-sub,.rev-note,.g-count,.location,.sub{color:var(--stone) !important;}

/* Enlaces dorados de refuerzo */
.see-all{border-bottom-color:var(--gold) !important;color:var(--gold-text) !important;}

/* Inputs sobre fondo oscuro */
input,textarea,select{
  background:var(--card) !important;
  border-color:var(--hairline) !important;
  color:var(--ink) !important;
}
input::placeholder,textarea::placeholder{color:#8A8171;}

/* Bordes sutiles de tarjetas basadas en tokens (por si el borde queda invisible) */
.help-card,.rec-card,.vs-card,.g-summary,.rev-card,.gal-item,.card-form,.item,.stat-card{
  border-color:var(--hairline);
}

/* Foco accesible en dorado claro */
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--gold-text) !important;}

/* ---------- Trabaja conmigo: convertir su tema morado a negro/dorado ----------
   Esta página trae su propia paleta violeta (--violet*). La remapeamos a
   bronce/dorado para que combine con el resto del sitio. */
:root{
  --violet:#7a5c1e;        /* bronce-dorado: el texto blanco sigue legible sobre botones */
  --violet-deep:#4d3a12;
  --violet-glow:#E4C270;   /* dorado claro para acentos y texto */
}

/* ---------- Franja de lema (presencia sutil, sin competir con el CTA) ---------- */
.lema-band{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:rgba(20,17,11,.55);
  padding:22px 20px;
}
.lema-txt{
  max-width:820px;margin:0 auto;text-align:center;
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;font-weight:500;
  font-size:clamp(18px,4vw,26px);
  line-height:1.5;color:var(--ink);
  letter-spacing:.01em;text-wrap:balance;
}
.lema-txt em{color:var(--gold-text);font-style:italic;}

/* ============================================================
   ACENTOS DE AZUL MARINO PROFUNDO (secundario al dorado)
   ============================================================ */
/* Franja de confianza y encabezados fijos con base azul noche */
.trust,.trust-band,.bar,.topnav,.tabs{
  background:linear-gradient(180deg, rgba(34,29,20,.62), rgba(7,8,12,.88)) !important;
  border-color:var(--hairline) !important;
}
/* Superficies secundarias en azul marino (contraste con las cálidas) */
.ben-card,.help-card,.vs-card,.comp-details,.cat-card{
  background:linear-gradient(180deg,#1C1A15,#141209) !important;
  border-color:rgba(230,205,150,.16) !important;
}
.ben-card:hover,.help-card:hover{border-color:rgba(230,205,150,.32) !important;}
/* Íconos y detalles finos en dorado sobre las tarjetas azules */
.ben-ic,.help-ic svg,.cat-ic{color:var(--gold-text) !important;}
/* Botón secundario / fantasma con matiz azul marino */
.btn-ghost{
  background:rgba(48,41,27,.55) !important;
  border-color:rgba(230,205,150,.28) !important;
  color:var(--ink) !important;
}
/* Líneas divisorias con brillo azul sutil */
.lema-band{
  background:linear-gradient(180deg, rgba(32,27,18,.42), rgba(7,8,12,.35)) !important;
  border-top-color:rgba(230,205,150,.18) !important;
  border-bottom-color:rgba(230,205,150,.18) !important;
}

/* ============================================================
   LOGO GRANDES LIGAS GROUP (encabezado + pie)
   ============================================================ */
.gl-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.gl-logo img{
  height:34px;width:auto;display:block;
  background:none;padding:0;box-shadow:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.topnav .gl-logo img{height:30px;}
/* Bloque de logo en el pie de página */
.gl-foot{
  display:flex;justify-content:center;padding:6px 0 16px;
}
.gl-foot img{
  height:58px;width:auto;
  background:none;padding:0;box-shadow:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
}

/* ============================================================
   REGALA Y GANA — legibilidad sobre fondo oscuro
   El modulo se diseno para tarjeta marfil: su titular y su lista
   usaban var(--navy), que en tema oscuro queda azul sobre azul.
   ============================================================ */
.ryg-h{color:var(--ink) !important;}
.ryg-points li{color:var(--stone) !important;}
.ryg-points svg{color:#57C98A !important;}
.ryg-prizes figcaption{color:var(--stone) !important;}



/* ============================================================
   SINTONIA — piezas que seguian con la paleta clara original
   Cada bloque corrige un elemento que quedaba fuera de tono
   sobre el fondo negro con relieve.
   ============================================================ */

/* 1. Fondo continuo: la franja del CTA final cortaba la textura
      con un marron (#1A1714). Ahora deja ver el fondo. */
.final-cta{
  background:transparent !important;
  border-top:1px solid var(--hairline) !important;
}
.fc-p{color:var(--stone) !important;}
.fc-h{color:var(--ink) !important;}
.scroll-cue{color:var(--gold-text) !important;}

/* 2. Menu movil: era un panel blanco (#FAFAF8) sobre el sitio negro. */
.tn-links{
  background:rgba(9,11,17,.97) !important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline) !important;
}
.tn-links a{color:var(--ink) !important;}
.tn-links a:hover,.tn-links a:active{background:rgba(230,205,150,.10) !important;}

/* 3. Destello blanco al tocar (#F3EFE7): en tema oscuro daba un
      flash desagradable. Se cambia por un realce dorado tenue. */
.c-item:active,.sgo-opt:active,.needs-opt:active,
.ay-pick button:active,.nv-card:active{
  background:rgba(230,205,150,.12) !important;
}

/* 4. Boton flotante: usaba var(--ink), que en oscuro es crema,
      con el icono en blanco -> practicamente invisible. */
.fab{
  background:linear-gradient(160deg,#FBEFC6 0%,#EBD08E 18%,#C9A24B 46%,#E8CD86 62%,#A87C2E 100%) !important;
  color:#1a1405 !important;
  box-shadow:0 8px 26px rgba(208,166,79,.34) !important;
}
.fab svg{color:#1a1405 !important;}

/* 5. Mismo problema en el icono "+" del FAQ cuando esta abierto. */
details[open] .faq-ic{
  background:linear-gradient(180deg,#F1DFA8,#C9A24B) !important;
  color:#1a1405 !important;
  border-color:transparent !important;
}

/* 6. Iconos en relieve: eran losas blancas brillantes. Se pasan a
      losa negra con brillo superior y el simbolo en dorado. */
.icon-3d{
  color:var(--gold-text) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), rgba(255,255,255,.04) 42%, transparent 72%),
    linear-gradient(145deg,#231F17,#12100A) !important;
  border:1px solid rgba(230,205,150,.18) !important;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.10),
    inset -3px -3px 8px rgba(0,0,0,.55),
    0 8px 18px rgba(0,0,0,.45) !important;
}

/* 7. Miniatura de producto en las tarjetas de novedades. */
.nv-ph{background:var(--card) !important;}

/* 8. Estrellas y linea dorada del hero: el dorado oscuro (#B8860B)
      estaba pensado para fondo claro y sobre negro se apagaba. */
.hero-trust .stars,.hero-badge .hb-l2{color:var(--gold-text) !important;}


/* 9. Avatares de testimonios: eran azul, verde y topo. Pasan a la
      familia del oro; la inicial va oscura para que se lea. */
.avatar{
  color:#1a1405 !important;
  border-color:#E8CD8E !important;
  font-weight:700 !important;
}


/* ============================================================
   10. ORO METALICO EN TEXTO
   El degradado se recorta contra las letras, igual que en el
   boton. Solo en palabras: en estrellas, iconos o texto de 11px
   el recorte se ve sucio, asi que esos quedan en oro plano.
   ============================================================ */
.hero .sub,
.eyebrow,.block-head .eyebrow,
.lema-txt em,
.see-all,
.hero-badge .hb-l2{
  color:var(--gold-text) !important;              /* respaldo si el navegador no recorta */
  background-image:linear-gradient(100deg,
    #FDF3D2 0%, #EFD79C 20%, #C9A24B 42%,
    #F8EBC2 56%, #D9B65F 74%, #A87C2E 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:none !important;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero .sub,.eyebrow,.block-head .eyebrow,.lema-txt em,.see-all,.hero-badge .hb-l2{
    -webkit-text-fill-color:var(--gold-text) !important;
    background-image:none !important;
  }
}


/* ============================================================
   11. HERO — sello a la derecha y encuadre de la foto
   ============================================================ */

/* El sello estaba a la izquierda, encima de la cara. Pasa a la
   derecha y en tres lineas:
   DISTRIBUIDOR / AUTORIZADO / Royal Prestige */
.hero-badge{
  left:auto !important;
  right:20px !important;
  align-items:flex-end !important;
  text-align:right !important;
  /* Sin placa: la foto nueva tiene cortina oscura justo detras del
     sello, asi que el dorado ya contrasta solo. Queda una sombra
     tenue en el texto por si la foto cambia. */
  background:none !important;
  border:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}
.hero-badge .hb-l1{
  width:min-content !important;   /* una palabra por linea */
  text-align:right !important;
  text-shadow:0 1px 6px rgba(0,0,0,.75) !important;
}
.hero-badge .hb-l2{white-space:nowrap !important;}
@media(min-width:768px){ .hero-badge{right:40px !important;} }

/* La foto se ampliaba un 12% desde un punto al 78% de la altura,
   asi que el zoom empujaba la cabeza fuera del encuadre. Anclando
   el origen arriba, la ampliacion crece hacia abajo y lo que se
   recorta es la base, que ya queda tapada por el velo. */
.hero-photo img{transform-origin:50% 0% !important;}


/* ============================================================
   12. HERO — nombre en una linea y propuesta de valor
   ============================================================ */

/* "Ronny Chirinos" en Playfair Display 800 mide 7.33 veces el
   tamano de letra. Con 3% de margen (7.55) el tamano se calcula
   solo y nunca desborda, en cualquier ancho de pantalla.
   El tope de escritorio es 52px: mas alla el nombre invadiria
   la franja de la foto, que empieza al 44%. */
.hero h1{
  white-space:nowrap !important;
  font-size:min(calc((100vw - 52px) / 8.4), 54px) !important;
}
@media(min-width:900px){
  .hero h1{ font-size:min(calc((44vw - 80px) / 8.4), 48px) !important; }
}

/* Jerarquia: la frase principal manda, la secundaria acompana.
   Margenes ajustados para que el bloque ocupe menos alto y el
   boton principal quede mas cerca del texto. */
.hero .sub{
  font-size:clamp(18px,5vw,24px) !important;
  font-weight:700 !important;
  line-height:1.18 !important;
  max-width:15ch !important;
  margin-top:10px !important;
}
.hero .sub-2{
  margin-top:7px;
  max-width:34ch;
  font-family:'Inter',sans-serif;
  font-size:clamp(13.5px,3.6vw,15.5px);
  line-height:1.42;
  font-weight:500;
  color:var(--ink);
  opacity:.9;
  text-shadow:0 1px 10px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.7);
}
.hero-cta{margin-top:16px !important;}
@media(min-width:900px){
  .hero .sub{max-width:20ch !important;}
  .hero .sub-2{max-width:46ch;}
}


/* ============================================================
   13. HERO EN TABLET / ESCRITORIO (>=900px)
   Antes la foto ocupaba solo el 44% derecho y el resto era
   #07080c solido: de ahi la linea vertical entre negro e imagen.
   Ahora la foto cubre todo el ancho y el oscurecimiento se hace
   con un degradado sobre la misma imagen.
   ============================================================ */
@media(min-width:900px){
  .hero{align-items:flex-end !important;}

  /* foto a todo lo ancho, sin columna negra */
  .hero-photo{left:0 !important; right:0 !important;}
  .hero-photo img{
    object-fit:cover !important;
    object-position:center 20% !important;
    transform:none !important;
  }

  /* degradado vertical: Ronny queda a la izquierda de la foto, asi
     que un degradado horizontal oscuro por la izquierda lo tapaba.
     Oscureciendo desde abajo la imagen se lee completa y el texto
     mantiene contraste. */
  .hero-veil{
    background:linear-gradient(to top,
      rgba(7,8,12,.98) 0%,  rgba(7,8,12,.95) 16%,
      rgba(7,8,12,.82) 32%, rgba(7,8,12,.52) 48%,
      rgba(7,8,12,.20) 64%, rgba(7,8,12,0) 82%) !important;
  }

  .hero-content{
    padding-bottom:calc(52px + env(safe-area-inset-bottom)) !important;
  }

  /* En tablet la esquina superior derecha cae sobre el fondo blanco
     del letrero, asi que el sello recupera su placa. */
  .hero-badge{
    padding:9px 13px 10px !important;
    border-radius:14px !important;
    background:rgba(9,11,17,.80) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    backdrop-filter:blur(10px) !important;
    border:1px solid rgba(230,205,150,.30) !important;
  }
}