/* ===== RESET BÁSICO ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== PALETA (cache.php theme) ===== */
:root{
  --bg:#0b0b12;
  --card:#141422;
  --border:#2a2a40;
  --text:#eaeaf2;
  --muted:#9aa;
  --brand:#6c5ce7;
  --brand-2:#7b6df0;
  --ok:#00d084;
  --warn:#ffb703;
  --err:#ff6b6b;
  --shadow: 0 10px 24px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(108,92,231,.25);
  --radius:16px;
}

/* ===== FUENTES ===== */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}
h1,h2,h3{
  color: var(--text);
  text-align: center;
  font-family: "Playfair Display", Georgia, serif; /* opcional */
}
p{ text-align:center; color: var(--muted); }

h1{ font-size: 40px; }
h2{ font-size: 30px; }
h3{ font-size: 25px; }
p { font-size: 20px; }

a img{ outline:none; border:none; }

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenido-principal{
  max-width:1200px;
  margin:60px auto;
  background: linear-gradient(180deg, var(--card), #10101b);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Ajustes móviles */
@media (max-width: 768px){
  .contenido-principal{ margin:30px 10px; }
}

/* ============================== header.php ============================== */
.header-principal{
  position: fixed; top:0; left:0; width:100%; z-index:1000;
  background: rgba(12,12,20,.92);
  backdrop-filter: saturate(1.2) blur(6px);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.contenido-principal-header{ max-width:1200px; margin:0 auto; }
.fila-superior{ display:flex; justify-content:space-between; align-items:center; }

/* LOGO */
.logo-link{ display:flex; align-items:center; }
.logo{ max-height:60px; width:auto; height:auto; }

/* BOTÓN TIENDA */
.boton-tienda-header{
  background: var(--brand);
  color:#fff;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  box-shadow: var(--shadow);
  transition: transform .06s ease, filter .15s ease, background .2s ease;
}
.boton-tienda-header:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.boton-tienda-header:active{ transform: translateY(0) scale(.98); }

body{ padding-top: 90px; }

/* ===== MÓVILES ===== */
@media (max-width: 768px){
  .fila-superior{ flex-direction:row; justify-content:space-between; }
  .logo{ max-height:50px; }
  .boton-tienda-header{ font-size:14px; padding:8px 14px; }
  body{ padding-top: 75px; }
}

/* Fucsia obligado SOLO en el botón del header (super-específico) */
header.header-principal .contenido-principal-header .fila-superior > a.tuuapp-cta,
header.header-principal .contenido-principal-header .fila-superior > a.tuuapp-cta:link,
header.header-principal .contenido-principal-header .fila-superior > a.tuuapp-cta:visited {
  color:#e91e63 !important;
  background:#fff !important;
}

header.header-principal .contenido-principal-header .fila-superior > a.tuuapp-cta span {
  color:inherit !important;
}

header.header-principal .contenido-principal-header .fila-superior > a.tuuapp-cta .tuuapp-ico {
  color:inherit !important;
  fill:currentColor !important;
}

/* Hover idéntico a la promo */
header.header-principal .contenido-principal-header .fila-superior > a.tuuapp-cta:hover {
  background:#ffeef5 !important;
}


/* ============================== index.php ============================== */
.contenido-principal-index{
  max-width:1200px;
  margin:30px auto;
  padding:40px 20px;
  background: linear-gradient(180deg, var(--card), #121223);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow: var(--shadow);
  color:var(--text);
  text-align:center;
}
.seccion-index{ border-bottom:1px solid var(--border); text-align:center; }
.seccion-index h2, .seccion-index h3{
  padding:30px 0 10px;
  text-align:center;
  color: var(--text);
}
.seccion-index img{
  max-width:100%; height:auto;
  border-radius:12px; margin:30px 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  background:#0f0f1a; border:1px solid var(--border);
}
.seccion-index p{ max-width:1000px; margin:0 auto 20px; color: var(--muted); }

.redes-sociales{ text-align:center; margin-top:30px; }
.iconos-redes{ display:flex; justify-content:center; gap:30px; }
.iconos-redes a img{
  border-radius:50%;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .2s ease, filter .2s ease;
}
.iconos-redes a:hover img{ transform: scale(1.05); filter: brightness(1.05); }

/* ===== BOTONES ===== */
.boton, .boton-whatsapp{
  display:inline-block;
  background: var(--brand);
  color:#fff;
  padding:12px 24px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  transition: transform .06s ease, filter .15s ease, background .2s ease;
  box-shadow: var(--shadow);
}
.boton:hover, .boton-whatsapp:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.boton:active, .boton-whatsapp:active{ transform: translateY(0) scale(.98); }

/* 🌍 Mapa de Google */
.bloque-mapa{
  width:100%; max-width:1200px; height:300px; margin:20px auto;
  background-image:url('/imagenes/brujo-mayor/mapa.webp');
  background-size:cover; background-position:center;
  border-radius:16px; border:1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .2s ease, filter .2s ease;
  box-sizing:border-box;
}
.bloque-mapa:hover{ transform: scale(1.02); filter: brightness(1.03); }

.seccion-incluye p, .seccion-incluye ul{ text-align:center; }
.seccion-incluye ul{ list-style:none; padding-bottom:20px; }
.seccion-incluye li{ margin:10px 0; }

.precio{
  color:#00e0c7; font-weight:700;
  text-shadow: 0 0 10px rgba(0,224,199,.25);
  background: linear-gradient(90deg, rgba(0,224,199,.12), rgba(0,255,255,.10));
  padding:10px 15px; margin-bottom:30px;
  border-radius:999px; display:inline-block; border:1px solid var(--border);
}

/* ✅ Responsive */
@media (max-width: 768px){
  .bloque-mapa{ height:300px; border-radius:12px; margin:20px auto; padding:0 10px; width:calc(100% - 20px); }
  .contenido-principal-index{ padding:30px 10px; }
  .index-seccion{ margin:10px 0; padding:10px; }
  .seccion-index > p{ padding:0 15px; }
  .boton, .boton-whatsapp{ font-size:16px; padding:10px 20px; display:block; width:100%; margin-bottom:10px; }
  .boton:last-child, .boton-whatsapp:last-child{ margin-bottom:0; }
}

/* ============================== footer.php ============================== */
.footer-brujo{
  background:#0f0f1a;
  color: var(--muted);
  text-align:center;
  padding:30px 20px;
  border-top:1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0,0,0,.35) inset;
}
.footer-brujo p{ margin-bottom:10px; font-size:14px; }
.footer-superior{ max-width:1200px; margin:0 auto 25px; text-align:center; }

/* ============================== contacto telefono y whatsapp ============================== */
.footer-contacto{
  position:fixed; bottom:0; left:0; width:100vw; display:flex; z-index:9999;
}
.footer-btn{
  flex:1; text-align:center; padding:17px 0; font-weight:700;
  color:#fff; text-decoration:none; font-size:16px;
}
.footer-btn.telefono{ background:#3b5998; border-right:1px solid rgba(255,255,255,.25); }
.footer-btn.whatsapp{ background:#00a884; }
.redes-sociales a{ outline:none; text-decoration:none; color:inherit; }
.redes-sociales a:focus, .redes-sociales a:active{ outline:none; box-shadow:none; }

@media (min-width: 769px){
  .footer-contacto{ display:none !important; }
  body{ padding-bottom:0 !important; }
}
@media (max-width: 768px){
  body{ padding-bottom:56px; }
}

/* ============================== tienda.php ============================== */
.contenido-principal-tienda{
  max-width:1200px; 
  margin:30px auto; 
  padding:40px 20px;
  background: linear-gradient(180deg, var(--card), #121223);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow: var(--shadow);
  color:var(--text); 
  text-align:center;
}

.contenido-principal-tienda h2{ 
  margin-bottom:20px; 
}
.contenido-principal-tienda p{ 
  margin-bottom:40px; 
  color:var(--muted); 
}

.tienda-seccion{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:30px; 
  justify-content:center; 
}

.seccion-tienda{
  background:#0f0f1a;
  border:1px solid var(--border);
  border-radius:16px; 
  padding:30px 20px; 
  width:350px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.seccion-tienda:hover{ 
  transform: translateY(-3px); 
  filter:brightness(1.03); 
  box-shadow: 0 14px 30px rgba(0,0,0,.4); 
}
.seccion-tienda img{
  max-width:100%; 
  height:auto; 
  border-radius:12px; 
  margin-bottom:15px;
  border:1px solid var(--border);
}
.seccion-tienda h3{ 
  font-size:24px; 
  margin:15px 0 10px; 
  color:var(--text); 
}
.seccion-tienda p{ 
  margin-bottom:20px; 
  color:var(--muted); 
}

/* Botón */
.boton-tienda{
  background: var(--brand);
  color:#fff; 
  padding:12px 20px; 
  border-radius:999px;
  display:inline-block; 
  text-decoration:none; 
  font-weight:700;
  transition: transform .06s ease, filter .15s ease; 
  box-shadow: var(--shadow);
}
.boton-tienda:hover{ 
  transform:translateY(-1px); 
  filter:brightness(1.05); 
}

.seccion-tienda-link{ 
  text-decoration:none; 
  color:inherit; 
  display:block; 
}
.seccion-tienda-link .seccion-tienda{ 
  transition: transform .15s ease; 
}
.seccion-tienda-link:hover .seccion-tienda{ 
  transform: scale(1.02); 
  cursor:pointer; 
}

/* ============================== HERO PERFIL ============================== */
.perfil-hero{
  margin: 0 0 34px 0;
  text-align: center;
}

/* Contenedor de la imagen */
.perfil-hero-media{
  margin: 0 0 18px 0;
}

/* Imagen:
   - En computadora: respeta 560x315 centrada.
   - En móvil: ocupa todo el ancho disponible del contenedor. */
.perfil-hero-img{
  width: 560px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Título debajo de la imagen */
.perfil-hero-titulo{
  margin: 14px 0 12px 0;
  line-height: 1.1;
}

/* Párrafos del hero */
.perfil-hero-texto p{
  margin: 0 auto 14px auto;
  color: var(--muted);
  max-width: 900px;
}

/* ======= MÓVIL ======= */
@media (max-width: 768px){
  .contenido-principal-tienda{ 
    padding:30px 10px; 
  }
  .contenido-principal-tienda > p{ 
    padding:0 15px; 
  }
  .tienda-seccion{ 
    margin:10px 0; 
    padding:10px; 
  }
  .contenido-principal-tienda h2{ 
    font-size:32px; 
  }
  .seccion-tienda{ 
    width:100%; 
  }

  /* Que la imagen "se pegue" arriba y a los lados */
  .perfil-hero-media{
    margin-top: -10px;
  }
  .contenido-principal-tienda .perfil-hero-img{
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  .perfil-hero-titulo{
    margin: 16px 0 10px 0;
    font-size: 32px;
  }
  .perfil-hero-texto p{
    padding: 0 6px;
  }
}

/* ======= DESKTOP ======= */
@media (min-width: 1024px){
  .perfil-hero{ 
    margin-bottom: 40px; 
  }
  .perfil-hero-titulo{ 
    font-size: 40px; 
  }
  .perfil-hero-texto p{ 
    font-size: 18px; 
  }
}


/* ============================== tarot.php ============================== */
.contenido-principal-tarot{
  max-width:1200px; margin:30px auto; padding:40px 20px;
  background: linear-gradient(180deg, var(--card), #121223);
  border:1px solid var(--border); border-radius:20px; box-shadow: var(--shadow);
  color:var(--text); text-align:center;
}
.contenido-principal-tarot > p{ color:var(--muted); }

.zona-cartas-wrapper{ display:flex; justify-content:center; padding:0 10px; box-sizing:border-box; }
.zona-cartas{
  display:grid; grid-template-columns: repeat(10, 1fr);
  gap:20px; max-width:1200px; width:100%;
}
.carta-oculta{
  width:100%; aspect-ratio: 5 / 8; border-radius:12px; overflow:hidden; cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
  border:1px solid var(--border); background:#0f0f1a;
}
.carta-oculta img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.carta-oculta:hover{ transform: scale(1.03); filter:brightness(1.03); }
.carta-oculta.seleccionada{
  box-shadow: 0 0 0 3px var(--brand); transform: scale(1.06);
}

#resultado-tirada{ text-align:center; }
#resultado-tirada img{
  width:140px; height:auto; margin:10px;
  border-radius:12px; border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.boton-tarot{
  background: var(--brand);
  color:#fff; padding:12px 20px; border-radius:999px; display:inline-block;
  text-decoration:none; font-weight:700; transition: transform .06s ease, filter .15s ease;
  width:auto; margin:0 10px 0 0; box-shadow: var(--shadow);
}
.boton-tarot:hover{ transform: translateY(-1px); filter: brightness(1.05); }

@media (max-width: 600px){
  .contenido-principal-tarot{ padding:30px 10px; }
  .contenido-principal-tarot > p{ padding:0 15px; }
  .boton-tarot{ display:block; width:100%; margin:10px 0; box-sizing:border-box; }
  .zona-cartas{ grid-template-columns: repeat(5, 1fr); gap:12px; }
  #resultado-tirada img{ width:100px; margin:8px; }
}

/* ============================== tarot-gratis.php ============================== */
.contenido-principal-tarot-gratis{
  max-width:1200px; margin:30px auto; padding:40px 20px;
  background: linear-gradient(180deg, var(--card), #121223);
  border:1px solid var(--border); border-radius:20px; box-shadow: var(--shadow);
  color:var(--text); text-align:center;
}
.zona-tirada{
  display:grid; grid-template-columns:1fr; gap:24px; padding:0 10px;
}
.carta-tirada{
  background:#0f0f1a; border:1px solid var(--border); border-radius:12px;
  padding:16px; box-shadow: var(--shadow);
  animation: aparecer 1s ease forwards; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.carta-tirada-imagen{ margin-bottom:12px; }
.carta-tirada-imagen img{
  width:100px; border-radius:10px; animation: revelar 1s ease forwards;
  box-shadow: var(--shadow); display:block; margin:0 auto;
  border:1px solid var(--border);
}
.carta-tirada-contenido{ display:flex; flex-direction:column; align-items:center; }
.carta-tirada-contenido h2{ margin:0 0 8px; font-weight:700; text-align:center; color:var(--text); }
.carta-tirada-contenido p{ color:var(--muted); margin:0; line-height:1.5; text-align:center; max-width:500px; }

.botones-tarot-gratis{ text-align:center; margin-top:30px; }
.boton-tarot-gratis{
  background: var(--brand); color:#fff; padding:12px 20px; border-radius:999px;
  display:inline-block; text-decoration:none; font-weight:700; transition: transform .06s ease, filter .15s ease;
  width:auto; margin:0 10px 0 0; text-align:center; box-shadow: var(--shadow);
}
.boton-tarot-gratis:hover{ transform: translateY(-1px); filter: brightness(1.05); }

@media (max-width: 600px){
  .zona-tirada{ grid-template-columns:1fr; }
  .carta-tirada-imagen img{ width:80px; }
  .carta-tirada-contenido h2{ margin-bottom:6px; }
  .carta-tirada-contenido p{ line-height:1.4; }
  .boton-tarot-gratis{ display:block; width:100%; margin:10px 0; box-sizing:border-box; }
}

/* ===== DISEÑO DE 3 COLUMNAS EN COMPUTADORA ===== */
@media (min-width: 768px){ .zona-tirada{ grid-template-columns: repeat(3, 1fr); } }

/* ===== ANIMACIONES ===== */
@keyframes revelar{
  0%{ transform: rotateY(90deg) scale(.92); opacity:0; }
  60%{ transform: rotateY(-8deg) scale(1.04); opacity:1; }
  100%{ transform: rotateY(0) scale(1); }
}
@keyframes aparecer{
  0%{ transform: translateY(12px) scale(.98); opacity:0; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}

/* ============================== mostrar-frase-seo.php ============================== */
.contenido-principal-seo{
  max-width:1200px; margin:30px auto; padding:40px 20px;
  background: linear-gradient(180deg, var(--card), #121223);
  border:1px solid var(--border); border-radius:20px; box-shadow: var(--shadow);
  color:var(--text); text-align:center;
}
.contenedor-frase-seo{
  max-width:1000px; margin:30px auto; padding:0 30px; border-radius:16px; text-align:center; color:var(--text);
}
.img-carta-seo{
  width:140px; display:block; margin:0 auto 30px; border-radius:12px;
  box-shadow: var(--shadow); border:1px solid var(--border);
}
.contenido-principal-seo h1{
  font-size:32px; color:var(--text); margin:10px auto 20px; text-align:center;
}
.frase-destacada{ font-size:22px; font-style:italic; margin-bottom:20px; line-height:1.6; color:var(--text); }
.acciones-seo p{ font-size:18px; margin-bottom:20px; color:var(--muted); }
.boton-seo{
  display:inline-block; background: var(--brand); color:#fff;
  padding:14px 28px; margin:8px 12px; border:none; border-radius:999px; text-decoration:none;
  font-weight:700; font-size:16px; transition: transform .06s ease, filter .15s ease; box-shadow: var(--shadow);
}
.boton-seo:hover{ transform: translateY(-1px); filter: brightness(1.05); }
@media (max-width:600px){
  .contenedor-frase-seo{ margin:10px 0; padding:10px; }
  .frase-destacada{ font-size:18px; }
  .boton-seo{ width:100%; margin:10px 0; }
}

/* ============================== horoscopo.php ============================== */
.contenido-principal-horoscopo{
  max-width:1200px; margin:30px auto; padding:40px 20px;
  background: linear-gradient(180deg, var(--card), #121223);
  border:1px solid var(--border); border-radius:20px; box-shadow: var(--shadow);
  color:var(--text); text-align:center;
}
.zona-horoscopo-wrapper{ display:flex; justify-content:center; padding:0 10px; box-sizing:border-box; }
.zona-horoscopo{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:20px; max-width:1000px; width:100%;
}
@media (min-width:769px){ .zona-horoscopo{ grid-template-columns: repeat(6, 1fr); } }

.horoscopo-oculta{
  width:100%; aspect-ratio:1 / 1; border-radius:12px; overflow:hidden; cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
  border:1px solid var(--border); background:#0f0f1a;
}
.horoscopo-oculta img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.horoscopo-oculta:hover{ transform: scale(1.03); filter: brightness(1.03); }

#resultado-horoscopo{ text-align:center; }
#resultado-tirada img{
  width:140px; height:auto; margin:10px; border-radius:12px; border:1px solid var(--border); box-shadow: var(--shadow);
}

.boton-horoscopo{
  background: var(--brand); color:#fff; padding:12px 20px; border-radius:999px;
  display:inline-block; text-decoration:none; font-weight:700; transition: transform .06s ease, filter .15s ease;
  width:auto; margin:10px; text-align:center; box-shadow: var(--shadow);
}
.boton-horoscopo:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.botones-horoscopo{ text-align:center; margin-top:30px; max-width:1000px; margin-left:auto; margin-right:auto; padding:0 10px; }

@media (max-width:600px){
  .contenido-principal-horoscopo{ padding:30px 10px; }
  .boton-horoscopo{ display:block; width:100%; margin:10px 0; box-sizing:border-box; }
  .zona-horoscopo{ grid-template-columns: repeat(3, 1fr); gap:12px; }
  .horoscopo-oculta{ aspect-ratio:1/1; }
  .contenido-principal-horoscopo > p{ padding:0 15px; }
}

/* ============================== horoscopo-gratis.php ============================== */
.contenido-principal-horoscopo-gratis{
  max-width:1200px; margin:30px auto; padding:40px 20px;
  background: linear-gradient(180deg, var(--card), #121223);
  border:1px solid var(--border); border-radius:20px; box-shadow: var(--shadow);
  color:var(--text); text-align:center;
}
.zona-horoscopo-gratis{
  display:grid; grid-template-columns:1fr; gap:24px; padding:0 10px; max-width:1000px; margin:0 auto;
}
.horoscopo-gratis{
  background:#0f0f1a; border:1px solid var(--border); border-radius:12px;
  padding:30px 20px; box-shadow: var(--shadow); text-align:center;
  animation: aparecer 1s ease forwards; display:flex; flex-direction:column; align-items:center;
}
.horoscopo-gratis-imagen img{
  width:200px; border-radius:10px; box-shadow: var(--shadow); animation: revelar 1s ease forwards;
  display:block; margin:0 auto 16px; border:1px solid var(--border);
}
.horoscopo-gratis-contenido h2{ margin:0 0 12px; color:var(--text); }
.horoscopo-gratis-contenido p{ color:#d7d9e4; line-height:1.6; max-width:600px; text-align:center; margin:0 auto; }

.boton-horoscopo-gratis{
  background: var(--brand); color:#fff; padding:12px 20px; border-radius:999px;
  display:inline-block; text-decoration:none; font-weight:700; transition: transform .06s ease, filter .15s ease;
  width:auto; margin:0 10px 0 0; box-shadow: var(--shadow);
}
.boton-horoscopo-gratis:hover{ transform: translateY(-1px); filter: brightness(1.05); }

@media (max-width:768px){
  .horoscopo-gratis{ padding:25px 15px; }
  .boton-horoscopo-gratis{ display:block; width:100%; margin:10px 0; box-sizing:border-box; }
  .horoscopo-gratis-imagen img{ width:200px; }
  .horoscopo-gratis-contenido p{ padding:0 10px; }
}

/* =============================== numeros.php =============================== */

/* CONTENEDOR PRINCIPAL */
.contenido-principal-numeros {
  max-width: 1200px;
  margin: 30px auto;
  padding: 40px 20px;
  background: linear-gradient(180deg, var(--card), #121223);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  text-align: center;
}

.contenido-principal-numeros p {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 1000px;
  color: var(--muted);
}

/* FORMULARIO */
.formulario-numeros {
  max-width: 500px;
  margin: 40px auto;
  background: #0f0f1a;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
  text-align: center;
}

/* INPUT FECHA */
.input-numeros {
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  color: #000;
  font-size: 18px;
  padding: 14px 18px;
  border-radius: 10px;
  border: none;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.input-numeros::-webkit-calendar-picker-indicator {
  filter: invert(0);
  cursor: pointer;
  opacity: 1;
  z-index: 2;
}

/* BOTÓN PRINCIPAL DE NÚMEROS */
.boton-numeros {
  background: linear-gradient(90deg, #ffd700, #ffae00); /* dorado mágico */
  color: #000;
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 30px;
  transition: transform .08s ease, filter .15s ease;

  /* <— FIX para que el brillo no se salga del botón */
  position: relative;
  overflow: hidden;
}

.boton-numeros:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

/* EFECTO DE BRILLO SUAVE */
.boton-numeros::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75px;
  width: 50px;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-20deg);
  animation: brillo 3s infinite;
  pointer-events: none;
}

@keyframes brillo {
  0% { left: -75px; opacity: 0; }
  50% { left: 120%; opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .contenido-principal-numeros {
    padding: 30px 10px;
  }

  .formulario-numeros {
    margin: 40px auto;
    background: #0f0f1a;
    color: #fff;
    padding: 20px;
  }

  .input-numeros {
    font-size: 16px;
    padding: 12px;
  }

  .boton-numeros {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }

  .contenido-principal-numeros > p {
    padding: 0 15px;
  }
}


/* =============================== numeros-gratis.php =============================== */
.contenido-principal-numeros-gratis{
  max-width:1200px; margin:30px auto; padding:40px 20px;
  background: linear-gradient(180deg, var(--card), #121223);
  border:1px solid var(--border); border-radius:20px; box-shadow: var(--shadow);
  color:var(--text); text-align:center;
}
.contenido-principal-numeros-gratis p{ text-align:center; margin:0 auto 40px; max-width:1000px; color:var(--muted); }

.zona-numeros-gratis{ display:grid; grid-template-columns:1fr; gap:24px; padding:0 10px; }
.carta-numeros-gratis{
  background:#0f0f1a; border:1px solid var(--border); border-radius:12px; padding:16px;
  box-shadow: var(--shadow); animation: aparecer 1s ease forwards; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.carta-numeros-gratis-imagen{ margin-bottom:12px; }
.carta-numeros-gratis-imagen img{
  width:100px; border-radius:10px; animation: revelar 1s ease forwards; box-shadow: var(--shadow);
  display:block; margin:0 auto; border:1px solid var(--border);
}
.carta-numeros-gratis-contenido{ display:flex; flex-direction:column; align-items:center; }
.carta-numeros-gratis-contenido h2{ margin:0 0 8px; font-weight:700; text-align:center; color:var(--text); }
.carta-numeros-gratis-contenido p{ color:var(--muted); margin:0; line-height:1.5; text-align:center; max-width:500px; }

.boton-numeros-gratis{
  background: var(--brand); color:#fff; padding:12px 20px; border-radius:999px;
  display:inline-block; text-decoration:none; font-weight:700; transition: transform .06s ease, filter .15s ease;
  width:auto; margin:0 10px 0 0; text-align:center; box-shadow: var(--shadow);
}
.boton-numeros-gratis:hover{ transform: translateY(-1px); filter: brightness(1.05); }

@media (max-width:600px){
  .zona-numeros-gratis{ grid-template-columns:1fr; }
  .contenido-principal-numeros-gratis{ padding:30px 10px; margin:20px 0; }
  .carta-numeros-gratis-imagen img{ width:80px; height:auto; }
  .boton-numeros-gratis{ display:block; width:100%; margin:10px 0; text-align:center; }
  .contenido-principal-numeros-gratis > p{ padding:0 15px; }
}
@media (min-width:768px){ .zona-numeros-gratis{ grid-template-columns: repeat(3, 1fr); } }

/* ======================== ANIMACIONES (ajuste) ======================== */
@keyframes animar-revelacion{
  0%{ transform: rotateY(90deg) scale(.92); opacity:0; }
  60%{ transform: rotateY(-8deg) scale(1.04); opacity:1; }
  100%{ transform: rotateY(0) scale(1); }
}
@keyframes animar-aparicion{
  0%{ transform: translateY(12px) scale(.98); opacity:0; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}

/* ===== TITULOS IGUALES A cache.php (override) ===== */
h1, h2, h3{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 800 !important;      /* bien grueso como en cache */
  letter-spacing: 0 !important;      /* sin tracking */
  text-transform: none !important;   /* respeta may/min */
  text-shadow: none !important;      /* sin sombra */
  color: var(--text) !important;
  line-height: 1.15 !important;
}

/* Tamaños (si quieres mantener los que ya tenías, borra esta parte) */
h1{ font-size: clamp(32px, 5vw, 56px) !important; }
h2{ font-size: clamp(28px, 3.6vw, 36px) !important; }
h3{ font-size: clamp(22px, 3vw, 28px) !important; }

/* ——— Texto un poco más grueso (sin tocar h1–h3) ——— */
p,
li,
.contenido-principal p,
.seccion-index p,
.footer-brujo p {
  font-weight: 600;   /* “medium”: sutil, no pesado */
}

/* Si en móvil quieres aún un pelín menos para que no “apriete”: */
@media (max-width: 600px) {
  p, li { font-weight: 600; } /* o baja a 450/normal si lo ves muy fuerte */
}

/* === Quitar espacio arriba cuando NO hay header fijo === */
body{ padding-top: 0 !important; }  /* reset global */

/* Aplica padding solo si existe .header-principal en la página */
body:has(.header-principal){
  padding-top: 90px !important;
}
@media (max-width: 768px){
  body:has(.header-principal){
    padding-top: 75px !important;
  }
}

/* (Opcional) deja el contenedor un poco más cerca del top */
.contenido-principal-tienda{
  margin-top: 16px !important;   /* antes 30px */
}