:root{
  --tdl-blue:#6EC1EC;
  --tdl-red:#F40009;
}

/* =========================
   Layout base (TRANSPARENTE)
   ========================= */
.tdl-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  padding:40px 20px;
  background: transparent !important; /* ✅ SIN recuadro blanco */
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.tdl-lang-radio{display:none!important}

.tdl-card{
  max-width:1000px;
  width:100%;
  text-align:center;
}

/* =========================
   Selector idioma (TRANSPARENTE + BLANCO)
   ========================= */
.lang-select{
  display:inline-flex;
  gap:10px;
  background: transparent !important; /* ✅ */
  padding:6px;
  border-radius:999px;
  margin-bottom:18px;
}

.lang-btn{
  padding:8px 18px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  color:#fff;                 /* ✅ BLANCO */
  background: transparent;
  user-select:none;
  text-shadow: 0 2px 10px rgba(0,0,0,.45); /* ✅ legible sobre video */
}

/* Estado seleccionado: SIN fondo, con borde */
#lang-es:checked~.tdl-card .btn-es,
#lang-en:checked~.tdl-card .btn-en{
  background: transparent !important;
  box-shadow: none !important;
  outline: 2px solid rgba(255,255,255,.9);
}

/* =========================
   Badge (TRANSPARENTE + BLANCO)
   ========================= */
.slogan{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: transparent !important; /* ✅ */
  padding:10px 22px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  color:#fff;                 /* ✅ BLANCO */
  margin-bottom:18px;

  max-width:92vw;        /* móvil: que no se salga */
  white-space:normal;    /* permite wrap */
  text-align:center;
  justify-content:center;

  outline: 2px solid rgba(255,255,255,.35); /* ✅ se ve sin fondo */
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.dot{
  width:10px;
  height:10px;
  background:var(--tdl-red);
  border-radius:50%;
  animation:heartbeat 1.8s infinite;
}

@keyframes heartbeat{
  0%,100%{transform:scale(1)}
  40%{transform:scale(1.4)}
}

/* =========================
   Subtítulo (BLANCO)
   ========================= */
.subtitle{
  font-size:1.05rem;
  margin-bottom:26px;
  color:#fff; /* ✅ */
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* =========================
   Botones (igual que antes)
   ========================= */
.tdl-buttons{
  display:flex;
  gap:22px;
  justify-content:center;
  flex-wrap:wrap;
}

.tdl-btn{
  max-width:360px;       /* más estrecho */
  width:100%;
  padding:24px 22px;     /* compacto */
  border-radius:22px;
  color:#fff;
  text-decoration:none;
  transition:.2s ease;
  display:block;
}

.tdl-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.25);
}

.blue-btn{background:linear-gradient(135deg,var(--tdl-blue),#4aa3d8)}
.red-btn{background:linear-gradient(135deg,var(--tdl-red),#c20007)}

/* Texto de botones (legible) */
.tdl-btn-title{
  font-size:1.55rem;
  font-weight:800;
  margin-bottom:6px;
  display:block;
  line-height:1.15;
}
.tdl-btn-main{
  font-size:1.35rem;
  font-weight:800;
  display:block;
  line-height:1.2;
}
.tdl-btn-sub{
  font-size:1.15rem;
  font-weight:700;
  display:block;
  margin-top:6px;
  line-height:1.25;
}

/* =========================
   Idiomas
   ========================= */
.lang-es,.lang-en{display:none}
#lang-es:checked~.tdl-card .lang-es{display:block}
#lang-en:checked~.tdl-card .lang-en{display:block}

/* =========================
   MÓVIL
   ========================= */
@media (max-width:768px){
  .tdl-wrapper{padding:28px 16px}

  .slogan{
    font-size:.78rem;
    padding:8px 14px;
  }

  .subtitle{
    font-size:1.05rem;
    margin-bottom:18px;
  }

  .tdl-buttons{
    flex-direction:column;
    gap:16px;
    align-items:center;
  }

  .tdl-btn{
    max-width:340px;
    padding:22px 20px;
  }

  .tdl-btn-title{font-size:1.65rem}
  .tdl-btn-main{font-size:1.45rem}
  .tdl-btn-sub{font-size:1.20rem}
}
/* ===== FIX CONTRASTE BOTÓN AZUL ===== */

/* Forzar texto blanco sólido en botones */
.blue-btn,
.blue-btn *{
  color:#ffffff !important;
  opacity:1 !important;
}

/* Sombra de texto para legibilidad sobre fondos claros */
.blue-btn .tdl-btn-title,
.blue-btn .tdl-btn-main,
.blue-btn .tdl-btn-sub{
  text-shadow: 0 3px 8px rgba(0,0,0,.45);
}

/* Asegurar que el botón NO herede transparencias */
.blue-btn{
  background: linear-gradient(135deg,var(--tdl-blue),#4aa3d8) !important;
}
/* ===========================
   FIX DEFINITIVO: texto "lavado"
   (cuando hay opacity en un padre)
   =========================== */

/* 1) Asegura que nada del portal esté semi-transparente */
.tdl-wrapper,
.tdl-wrapper *{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 2) Asegura que el botón azul y su texto queden 100% sólidos */
.tdl-wrapper a.tdl-btn.blue-btn,
.tdl-wrapper a.tdl-btn.blue-btn *{
  opacity: 1 !important;
  color: #ffffff !important;
}

/* 3) Refuerza legibilidad del texto en el botón azul */
.tdl-wrapper .blue-btn .tdl-btn-title,
.tdl-wrapper .blue-btn .tdl-btn-main,
.tdl-wrapper .blue-btn .tdl-btn-sub{
  text-shadow: 0 3px 10px rgba(0,0,0,.55) !important;
}

/* 4) Mantén el gradiente del azul intacto (por si se está sobrescribiendo) */
.tdl-wrapper .blue-btn{
  background: linear-gradient(135deg,var(--tdl-blue),#4aa3d8) !important;
}