/* ===== 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; }

@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%; }
}

/* ============================== 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 =============================== */
.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; box-shadow: var(--shadow);
  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; }

@media (max-width:600px){
  .formulario-numeros{ padding:20px; }
  .input-numeros{ font-size:16px; padding:12px; }
}

/* BOTÓN */
.boton-numeros{
  background: var(--brand); color:#fff; border:none; border-radius:999px;
  padding:14px 24px; font-weight:700; cursor:pointer; margin-top:30px;
  box-shadow: var(--shadow);
  transition: transform .06s ease, filter .15s ease;
}
.boton-numeros:hover{ transform: translateY(-1px); filter: brightness(1.05); }
@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; }
  .boton-numeros{ width:100%; box-sizing:border-box; }
  .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 */
}