:root{
  --bg:#000;
  --card:#0b0b0b;
  --line:#1b1b1b;
  --gold:#f9b233;
  --txt:#d8d8d8;
  --muted:#9a9a9a;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family: Georgia, "Times New Roman", serif;
  line-height:1.7;
}

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 44px 18px 120px;
}

/* ===========================
   NAV (desktop)
   =========================== */

.topnav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin: 0 0 22px;
  padding: 14px 12px;
  background: #060606;
  border:1px solid var(--line);
  border-radius: 14px;
}

.topnav a{
  color: var(--muted);
  text-decoration:none;
  padding: 10px 14px;
  border-radius: 999px;
  border:1px solid #2a2a2a;
  letter-spacing:.06em;
  font-size: .95rem;
}

.topnav a:hover{
  color:#000;
  background: var(--gold);
  border-color: var(--gold);
}

/* Si usas brandlink + hamburguesa */
.topnav .brandlink{
  margin-right:auto;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.06em;
  opacity:.9;
  border: none;
  padding: 10px 10px;
}

/* Botón hamburguesa (solo visible en móvil) */
.nav-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:inherit;
  padding:10px 12px;
  border-radius:12px;
  font-size:18px;
  cursor:pointer;
}

/* Contenedor de links para modo móvil */
.nav-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* ===========================
   TITULOS / TEXTOS
   =========================== */

  /* Modifica esta línea para incluir h3 en el color dorado */
h1,h2{
  color: var(--gold);
  letter-spacing: .10em;
  margin: 0 0 14px;
}

.lead{
  color:var(--muted);
  margin-top:0;
}

.small{
  color:var(--muted);
  font-size:.95rem;
}

hr{
  border:0;
  border-top:1px solid var(--line);
  margin: 18px 0;
}

/* ===========================
   TARJETAS / BOTONES / GRID
   =========================== */

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 18px 16px;
  margin: 16px 0;
}

.btn{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  border:2px solid var(--gold);
  color: var(--gold);
  text-decoration:none;
  font-weight:bold;
  letter-spacing:.06em;
}
.btn:hover{background:var(--gold); color:#000}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 820px){
  .grid2{grid-template-columns:1fr;}
}

/* ===========================
   VIDEO + BLOQUE ALINEADO
   =========================== */

/* wrapper para que video y cintillo queden EXACTAMENTE del mismo ancho */
.media-block{
  max-width: 980px; /* igual que .container; ajusta si algún día cambias */
  margin: 0 auto;
}

.video{
  border:1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  background:#000;
}

.video iframe{
  width:100%;
  aspect-ratio:16/9;
  display:block;
}

/* ===========================
   CINTILLO GUEIDES (compacto)
   =========================== */

.gueides-ribbon{
  width: 100%;
  margin: 10px 0 18px;
  padding: 12px 16px;

  background: linear-gradient(
    180deg,
    rgba(22, 24, 28, 0.95),
    rgba(16, 18, 22, 0.95)
  );

  border-radius: 12px;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);

  text-align: center;
}

.ribbon-title{
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.ribbon-text{
  font-size: 1.02rem;
  line-height: 1.45;
  margin-bottom: 6px;
  opacity: 0.95;
}

.ribbon-footer{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Difuminado lateral opcional: añade class="gueides-ribbon ribbon-fade" */
.ribbon-fade{
  position:relative;
  overflow:hidden;
}

.ribbon-fade::before,
.ribbon-fade::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:70px;
  pointer-events:none;
}

.ribbon-fade::before{
  left:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}

.ribbon-fade::after{
  right:0;
  background:linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* ===========================
   NAV RESPONSIVE (móvil)
   =========================== */

@media (max-width: 720px){
  .topnav{
    justify-content:flex-start;
  }

  .nav-toggle{
    display:inline-flex;
    margin-left:auto;
  }

  .nav-links{
    width:100%;
    display:none;          /* cerrado por defecto */
    padding:10px 0 2px;
    justify-content:center;
  }

  .nav-links.open{
    display:flex;          /* se abre con JS */
  }

  .nav-links a{
    width: calc(50% - 6px);
    text-align:center;
  }
}

/* Ajustes móviles extra */
@media (max-width: 640px){
  .container{
    padding: 36px 14px 100px;
  }

  .ribbon-text{
    font-size: 0.98rem;
  }
  .section-title::before{
  content: "✔ ";
  color: var(--gold);
  font-weight: bold;
}

/* ============================================================
   BOTONES: por defecto abrazan el texto (NO full width)
   ============================================================ */
.btn{
  display:inline-block;
  width:auto;
  max-width:100%;
  padding: 12px 18px;
  border-radius: 999px;
  border:2px solid var(--gold);
  color: var(--gold);
  background: transparent;
  text-decoration:none;
  font-weight:bold;
  letter-spacing:.06em;
  line-height:1.2;
}

.btn:hover{ background:var(--gold); color:#000; }

/* variante secundaria (para diferenciar el 2do WhatsApp) */
.btn.secondary{
  border-color: rgba(249,178,51,.55);
  color: rgba(249,178,51,.92);
}
.btn.secondary:hover{
  background: rgba(249,178,51,.92);
  color:#000;
}

/* Si ALGUNA vez quieres botón ancho, usa class="btn block" */
.btn.block{
  display:block;
  width:100%;
  text-align:center;
}

/* ============================================================
   BLOQUE APOYO (estética limpia y coherente)
   ============================================================ */
.support{
  text-align:center;
}

.support-title{
  margin-bottom: 8px;
}

.support-intro{
  max-width: 720px;
  margin: 0 auto 14px;
  opacity: .95;
}

.support-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top: 12px;
  text-align:left;
}

.support-box{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 16px 14px;
}

.support-box-title{
  margin: 0 0 6px;
  color: var(--gold);
  letter-spacing: .06em;
}

.support-role{
  margin: 0 0 12px;
}

.support-foot{
  margin: 14px auto 0;
  max-width: 780px;
  opacity:.85;
}

.support-mail{
  opacity:.85;
  margin-left: 8px;
}

/* móvil */
@media (max-width: 820px){
  .support-grid{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .support-box{
    text-align:center;
  }
  

/* Añade estas clases al final de tu site.css */
.grid3 {
  display: grid;
  grid-template-columns: 1fr; /* Móvil: una encima de otra */
  gap: 14px;
}

@media (min-width: 820px) {
 .grid3 {
    grid-template-columns: repeat(3, 1fr); /* Escritorio: 3 en horizontal */
  }
}

.audio-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.locked-tier {
  filter: grayscale(1) opacity(0.4);
  pointer-events: none;
  user-select: none;
  position: relative;
}

/* Navegación Estilo Ejecutivo (Sin botones) */
.topnav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 5%;
background: #000;
border-bottom: 1px solid rgba(249, 178, 51, 0.2);
position: sticky;
top: 0;
z-index: 1000;
}

/* Marca GUEIDES en Mayúsculas */
.brand-link {
color: #f9b233;
text-decoration: none;
font-weight: bold;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 1.1rem;
}

.nav-links {
display: flex;
gap: 25px;
}

/* Enlaces en minúsculas y sin fondo de botón */
.nav-links a {
color: #fff;
text-decoration: none;
text-transform: lowercase;
font-size: 0.95rem;
letter-spacing: 1px;
padding-bottom: 4px;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
}

.nav-links a:hover {
color: #f9b233;
border-bottom: 1px solid #f9b233;
}

/* Icono Hamburguesa para Celular (3 rayitas) */
.menu-toggle {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
}

.menu-toggle span {
width: 28px;
height: 1px; /* Línea muy fina y profesional */
background-color: #f9b233;
}

/* Adaptación para Celular Vertical (Portrait) */
@media (max-width: 768px) {
.menu-toggle { display: flex; }
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.95);
padding: 30px 0;
gap: 20px;
text-align: center;
border-bottom: 1px solid #f9b233;
}
.nav-links.active { display: flex; }
}
}

}