/* =========================================================
       CABECERA RESPONSIVA DEFINITIVA CON IMAGEN REAL (HERO)
       ========================================================= */

    .responsive-hero {
        position: relative;
        width: 100%;
        height: 75vh; /* Altura relativa: 75% de la altura de la ventana */
        max-height: 700px; /* Un tope para que no sea gigante */
        background-color: #333; /* Color de fondo mientras carga la imagen */
        overflow: hidden;
    }

    .responsive-hero-image-container {
        position: absolute;
        inset: 0; /* Abarca todo el espacio del padre */
    }

    .responsive-hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Llena el espacio, recortando si es necesario */
        object-position: center 30%; /* Foco en PC para ver la cara */
    }

    /* Contenedor del contenido que se superpone */
    .responsive-hero-content {
        position: absolute;
        inset: 0; /* Abarca todo el espacio del padre */
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Empuja el H1 hacia abajo */
        align-items: center; /* Centra el H1 horizontalmente */
        padding: 20px;
    }

    /* Estilos para el H1 */
    .responsive-hero .banner-h1-seo {
        background-color: rgba(255, 255, 255, 0.7);
        color: #0056B3;
        border: 2px solid #0056B3;
        padding: 10px 20px;
        font-size: clamp(1.6rem, 4vw, 2.5rem);
        border-radius: 8px;
        max-width: 90%;
        text-align: center;
        backdrop-filter: blur(2px);
    }

    /* --- AJUSTES RESPONSIVOS PARA LA CABECERA --- */

    @media (max-width: 1024px) {
        .responsive-hero {
            height: 65vh;
            max-height: 600px;
        }
        .responsive-hero-image {
            object-position: center center; /* En tablet, centramos normal */
        }
    }

    @media (max-width: 768px) {
        .responsive-hero {
            height: 60vh;
            max-height: 500px;
        }
        .responsive-hero-content {
            padding: 15px; /* Menos padding en móvil */
        }
        /* H1 de lado a lado en móvil */
        .responsive-hero .banner-h1-seo {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
    }
/* ====== CONTENEDOR PRINCIPAL ====== */
.equipo-tarotistas {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

/* ====== BANNER AZUL CON HORA ====== */
#equipo-banner-tarotistas {
  margin-top: 25px;
  background: #185DC5;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: white;
}

#equipo-banner-tarotistas h2 {
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 1024px) {
  #equipo-banner-tarotistas h2 {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  #equipo-banner-tarotistas h2 {
    font-size: 0.9rem;
  }
}

#equipo-banner-tarotistas .banner-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-weight: bold;
}

@media (max-width: 768px) {
  #equipo-banner-tarotistas .banner-info {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}
/* ===============================
   TARJETAS DE TAROTISTAS (BLOQUE)
   =============================== */

/* APLICA: grid de tarjetas */
.tarotistas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

/* APLICA: contenedor de cada tarjeta */
.tarotista-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* APLICA: imagen circular (si la usas) */
.tarotista-card img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
  margin-bottom: 10px;
}

/* APLICA: márgenes base de cualquier H3 en la tarjeta */
.tarotista-card h3 {
  margin: 8px 0 5px;
}

/* -----------------------------------------------
   1) NOMBRE + ICONO — tamaño fijo en TODAS pantallas
   APLICA: SOLO al nombre de la tarotista (h3.tarotista-nombre)
   ----------------------------------------------- */
.tarotistas-grid .tarotista-card h3.tarotista-nombre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-weight: 700;
  color: #185DC5;
  line-height: 1.2;
  font-size: 1.8rem; /* ← fijo en móvil, tablet y PC */
}

/* APLICA: icono junto al nombre; escala con el texto */
.tarotistas-grid .tarotista-card h3.tarotista-nombre .tarotista-icon {
  display: inline-block;
  font-size: 1.1em;  /* escala respecto al 2.1rem */
  line-height: 1; 
  transform: translateY(1px); /* ajuste fino baseline */
}

/* -----------------------------------------------
   2) H3 genéricos de tarjeta — EXCLUYE el nombre
   APLICA: titulares internos dentro de la descripción
   (NO afecta a h3.tarotista-nombre)
   ----------------------------------------------- */
.tarotistas-grid .tarotista-card h3:not(.tarotista-nombre),
.tarotistas-grid .tarotista-card h3:not(.tarotista-nombre) a {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.25;
}

/* APLICA: h2 de titulares dentro de la tarjeta (si los hay) */
.tarotistas-grid .tarotista-card h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  text-align: center;
}

/* APLICA: texto descriptivo de la tarjeta */
.tarotista-descripcion {
  font-size: 0.95rem;
  margin-bottom: 12px;
  color: #333;
  flex-grow: 1;
}


/* ====== BOTONES DE TELÉFONO EN TAROTISTAS ====== */
.tarotista-phones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tarotista-phones .button {
  width: 100%;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  color: #185DC5;
  border: 2px solid #185DC5;
  transition: all 0.25s ease-in-out;
}

.tarotista-phones .button:hover {
  background: #185DC5;
  color: #fff;
}

.tarotista-phones .button-secondary {
  border-color: #d6564d;
  color: #d6564d;
}

.tarotista-phones .button-secondary:hover {
  background: #d6564d;
  color: #fff;
}
/* Centrar y forzar línea completa bajo los botones */
.tarotista-phones .legal-small {
  flex: 0 0 100%;     /* ocupa toda la fila del flex */
  width: 100%;
  text-align: center; /* centra el texto */
  margin: 6px auto 0; /* espacio superior y centrado */
}
/* Separación entre los dos párrafos legales */
.tarotista-phones .legal-small + .legal-small {
  margin-top: 8px;
}
/* Estilos para los botones dentro de las tarjetas de tarotista */
    .tarotista-card-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px; /* Espacio entre botones */
    }

    .tarotista-card-actions .button {
        width: 100%;
        box-sizing: border-box; /* Asegura que el padding no desborde */
    }
    /* Separación para el aviso legal debajo de cada botón en la tarjeta */
    .tarotista-card-actions .legal-small {
        margin-top: 4px; /* Pequeño espacio superior */
        margin-bottom: 12px; /* Espacio antes del siguiente botón */
    }

/* === Contenedor neutro que solo controla layout y espaciado botones neve=== */
.contact-cta {
  display: flex;
  flex-wrap: wrap;               /* hasta 3 botones sin romper línea */
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 28px 0;                /* espacio arriba/abajo */
}

/* No tocamos fondo/borde/color: hereda el estilo de Neve (.button, .button-primary, etc.) */
.contact-cta .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 12px 18px;            /* solo tamaño táctil */
}

@media (max-width: 768px) {
  .contact-cta { flex-direction: column; }
  .contact-cta .button {
    width: 100%;
    max-width: 520px;            /* no “de lado a lado” en móvil */
    margin-inline: auto;
  }
}
/* Los botones mantienen el estilo de Neve; solo controlamos layout */
.contact-cta .legal-small {
  flex: 0 0 100%;     /* nueva línea completa bajo los botones */
  width: 100%;
  text-align: center; /* centrado */
  margin: 6px auto 0; /* espacio superior y centrado */
}
.contact-cta .legal-small + .legal-small {
  margin-top: 8px;
}

/* ====== LEYENDA DE ESTADOS ====== */
.leyenda-estados {
  margin-top: 30px;
  padding: 20px;
  border-top: 3px solid #ddd;
  background: #f9f9f9;
  border-radius: 8px;
}

.leyenda-estados h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.color-indicador {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
}

.color-indicador.disponible { background: green; }
.color-indicador.ocupada { background: orange; }
.color-indicador.no-disponible { background: red; }

/* ====== AVISO LEGAL ====== */
.legal-small {
  font-size: 9px;
  line-height: 1.3;
  color: #444;
  margin-top: 6px;
}

.button + .legal-small {
  display: block;
  margin-top: 10px !important;
}

/* ====== CONTENEDOR PRINCIPAL ====== */
.promociones-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

/* ====== INTRO DE LANDINGS ====== */
.promo-intro {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 30px;
}

/* ====== TARJETAS DE PROMOCIONES ====== */
.promo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 50px;
  margin-bottom: 50px;
}

.promo-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.promo-card:hover {
  transform: scale(1.02);
}
.promo-title {
  font-size: 2rem;
  font-weight: bold;
  color: #185DC5;  /* Azul corporativo */
  margin-bottom: 8px;
}

/* ====== BOTONES EN TARJETAS ====== */
.promo-card a.button {
  display: block;
  width: 100%;
  margin-top: 10px;
}
/* === PREGUNTAS FRECUENTES === */
.promo-faqs {
  margin-top: 40px;
}

.promo-faqs h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* FAQ con efecto desplegable */
.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

.faq-question {
  font-weight: bold;
  color: #185DC5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-answer {
  display: none;
  margin-top: 8px;
  font-size: 0.95rem;
  color: #333;
}

/* Animación simple */
.faq-answer.open {
  display: block;
}
.promo-intro ul li a {
  color: #185DC5; /* Cambia el color */
  text-decoration: underline; /* Ejemplo */
  font-weight: 400; /* Ejemplo */
}
.promo-links ul li a {
  color: #185DC5;
}
.promo-intro a.button {
  display: inline-block;
  margin: 5px;
}

@media (max-width: 768px) {
  .promo-intro a.button {
    display: block;
    width: 100%;
    text-align: center;
    margin: 8px 0;
  }
}
.promo-intro a.button {
  display: inline-block;
  margin: 5px;
}

@media (max-width: 768px) {
  .promo-intro a.button {
    display: block;
    width: 100%;
    text-align: center;
    margin: 30px 0; /* separación vertical de 10px */
  }
}
/* ====== TESTIMONIOS ====== */
.testimonio-box {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}

.testimonio-header {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.testimonio-header span { font-weight: bold; }
.testimonio-text { margin-top: 5px; }
.testimonio-text { display: none; }
.testimonio-box.open .testimonio-text { display: block; }


/* ===========================================================
   APLICACIÓN SOLO A PÁGINAS ESPECÍFICAS POR ID
   paar 
   - Añadir nuevos IDs aquí cuando se creen más páginas
   =========================================================== */
.page-id-14090 .nv-page-header h1,
.page-id-20138 .nv-page-header h1,
.page-id-19986 .nv-page-header h1,
.page-id-19064 .nv-page-header h1,
.page-id-7743 .nv-page-header h1,
.page-id-13269 .nv-page-header h1 {
  display: block;
}

/* ===========================================================
   NOTA PARA EL FUTURO
   Para aplicar el estilo a más páginas, añade aquí más IDs:
   Ejemplo:
   .page-id-XXXXX .nv-page-header h1,
   .page-id-YYYYY .nv-page-header h1
   =========================================================== */
/* ===========================================================
   🔹 CORRECCIÓN DE MARGEN EN TABLET PARA H1 EN BANNERS
   - Se asegura que en tablets (horizontal y vertical)
     el H1 quede a 5px de cada borde lateral.
   =========================================================== */
body .nv-page-header h1 {
  width: calc(100% - 10px) !important;
  max-width: calc(100% - 10px) !important;
}
/* ====== BOTÓN PAYPAL CENTRADO Y CON ESPACIADO ====== */
.paypal-button-container {
  text-align: center;
  margin-top: 20px;
}

.paypal-button-container p {
  margin-top: 15px;
  font-size: 14px;
  color: #555;
}
/* ====== BOTÓN TESTIMONIOS====== */
.testimonio-box {
  background: #f9f9f9;
  padding: 15px;
  border-left: 4px solid #d6564d;
  margin-bottom: 10px;
  font-style: italic;
}
/* ====== TAROT USA LANDING ====== */
.custom-header {
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
  color: #fff;
  text-align: center;
}
.custom-header-content h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}
.custom-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
}

.promo-intro {
  text-align: center;
  padding: 40px 20px;
}
.cta-botones {
  margin-top: 20px;
}
.phone-legal {
  font-size: 0.85rem;
  margin-top: 10px;
  color: #666;
}
.testimonio-box {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  margin: 10px auto;
  max-width: 700px;
  background-color: #f9f9f9;
}
.faq-item {
  margin-bottom: 15px;
}
.faq-question {
  font-weight: bold;
  cursor: pointer;
}
.faq-answer {
  display: none;
  padding-top: 5px;
  color: #444;
}
.cta-final {
  text-align: center;
  margin-top: 40px;
}
/* ======== SECCIÓN BENEFICIOS (estructura) ======== */
/* Solo el contenedor de tarjetas se centra; el <section> no centra textos */
.section-beneficios {
  text-align: initial; /* evita que el H2 herede centrado */
}
.section-beneficios .promo-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1000px;
  margin: 12px auto 0; /* pequeño respiro entre H2 y tarjetas */
}


.promo-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.promo-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 15px;
  width: 230px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.promo-card h3 {
  margin-bottom: 10px;
  color: #185DC5;
  font-size: 1.2rem;
}

.promo-card p {
  font-size: 0.95rem;
  color: #333;
}

/* Responsive */
@media (max-width: 768px) {
  .promo-card {
    width: 100%;
    max-width: 320px;
  }
}
/* Forzar centrado del H2 de Beneficios en tablet/móvil */
@media (max-width: 1024px){
  .entry-content .section-beneficios .beneficios-title,
  .nv-content-wrap .section-beneficios .beneficios-title,
  .section-beneficios .beneficios-title{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }
}
/* =============================
   TARJETAS tarotistas – Ajuste de espacios
   ============================= */

/* 1) Quitar el padding grande del wrapper de botones dentro de las tarjetas
   y eliminar margen inferior extra del bloque de teléfonos/avisos */
.tarotistas-grid .tarotista-card .promo-intro{
  padding: 0;
  margin: 12px 0 0; /* pequeño aire por encima de los botones */
}
.tarotistas-grid .tarotista-card .promo-intro:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 2) Reducir espacio entre la descripción y el primer botón */
.tarotistas-grid .tarotista-card .tarotista-descripcion{
  margin-bottom: 10px; /* antes 12px */
}

/* 3) Botones: margen vertical más corto en todos los breakpoints */
.tarotistas-grid .tarotista-card .promo-intro a.button{
  display: block;
  width: 100%;
  text-align: center;
  margin: 10px 0 6px; /* antes tenías 5px y en móvil 30px */
}
@media (max-width: 768px){
  .tarotistas-grid .tarotista-card .promo-intro a.button{
    margin: 10px 0 6px; /* asegura que NO suba a 30px en móvil */
  }
}

/* 4) Aviso legal: menos espacio respecto al botón */
.tarotistas-grid .tarotista-card .button + .legal-small{
  margin-top: 6px !important; /* sobrescribe tu regla global con !important */
}
.tarotistas-grid .tarotista-card .legal-small{
  margin-bottom: 0; /* que no empuje hacia el borde inferior */
}

/* 5) Un poco menos de “colchón” al final de la tarjeta */
.tarotistas-grid .tarotista-card{
  padding-bottom: 10px; /* antes 15px; ajusta a tu gusto */
}
/* Color base del nombre (el SVG hereda por currentColor) */
.tarotistas-grid .tarotista-card h3.tarotista-nombre{
  color: #185DC5;
}
/* ===== Icono SVG junto al nombre (versión final robusta) ===== */
.tarotistas-grid .tarotista-card h3.tarotista-nombre{
  color:#185DC5; /* el SVG hereda este color (currentColor) */
}

/* Contenedor del icono:
   - line-height:1 (evita colapsos del primer ítem en Chrome móvil)
   - flex:0 0 auto (no se contrae) */
.tarotista-nombre .tarotista-icon{
  display:inline-flex;
  align-items:center;
  margin-right:.35em;
  line-height:1;
  flex:0 0 auto;
}

/* Tamaño unificado y sin baseline issues:
   - display:block en SVG/IMG elimina artefactos en el primer elemento */
.tarotista-nombre .tarotista-icon svg,
.tarotista-nombre .tarotista-icon img{
  width:1.25em;
  height:1.25em;
  display:block;
}
/* ===== Nombre de la tarotista: fuerza tamaño en tablet/móvil ===== */
@media (max-width: 1024px){
  .entry-content .tarotistas-grid .tarotista-card h3.tarotista-nombre,
  .nv-content-wrap .tarotistas-grid .tarotista-card h3.tarotista-nombre,
  .tarotistas-grid .tarotista-card h3.tarotista-nombre{
    font-size: 2.1rem !important;  /* ~33-34px en tablet */
    line-height: 1.2;
  }
}

@media (max-width: 768px){
  .entry-content .tarotistas-grid .tarotista-card h3.tarotista-nombre,
  .nv-content-wrap .tarotistas-grid .tarotista-card h3.tarotista-nombre,
  .tarotistas-grid .tarotista-card h3.tarotista-nombre{
    font-size: 2rem !important;    /* ~32px en móvil */
  }
}

@media (max-width: 480px){
  .entry-content .tarotistas-grid .tarotista-card h3.tarotista-nombre,
  .nv-content-wrap .tarotistas-grid .tarotista-card h3.tarotista-nombre,
  .tarotistas-grid .tarotista-card h3.tarotista-nombre{
    font-size: 1.9rem !important;  /* ~30px en móviles más pequeños */
  }
}

/* Forzar que .beneficios-title use el estilo global del tema (Neve) en esta landing */
.page-template-page-equipo-tarotistas-php .section-beneficios .beneficios-title,
.page-template-page-equipo-tarotistas-php .section-testimonios .beneficios-title,
.page-template-page-equipo-tarotistas-php .section-faqs .beneficios-title{
  all: revert !important;   /* vuelve al estilo del tema */
}
/* =========================================================
   BLOQUE DE TELÉFONOS DEL GABINETE (UNIFICADO)
   ========================================================= */

.phones-box {
    background-color: #f7f9ff;
    border: 1px solid #e9efff;
    border-radius: 16px;
    padding: 25px 20px;
    margin: 40px 0;
    text-align: center;
}

.phones-box .titulo-seccion {
    margin-top: 0;
    margin-bottom: 10px;
}

.phones-box p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    color: #555;
}

.phones-row {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinea los items arriba */
    flex-wrap: wrap;
    gap: 30px; /* Espacio entre los bloques de botones */
}

.phones-row > div {
    flex: 1;
    min-width: 280px; /* Ancho mínimo para cada columna */
    max-width: 320px; /* Ancho máximo para cada columna */
}

.phones-row .button {
    width: 100%;
    margin-bottom: 10px;
}

.phones-row .legal-small { /* <-- Regla corregida */
    font-size: 10px;
    line-height: 1.4;
    color: #666;
}

/* ==== Ajustes H2 con la parte superior-inferio del contenido ==== */
    h2.titulo-seccion {
      margin-top: 34px;
      margin-bottom: 40px; /* margen inferior */
    }
/* Modificador para alinear a la izquierda texto de */
.promo-intro.intro-left {
  text-align: left;
}
/* Formulario Solicitar Ritual */
.form-solicitar-ritual { max-width: 880px; margin: 0 auto 32px; }
.form-solicitar-ritual .form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.form-solicitar-ritual .form-row-full { grid-column: 1 / -1; }
.form-solicitar-ritual label { font-weight: 600; display:block; margin-bottom:6px; }
.form-solicitar-ritual input, .form-solicitar-ritual select, .form-solicitar-ritual textarea {
  width: 100%; padding: 10px; border:1px solid #ddd; border-radius:8px;
}
.form-solicitar-ritual .actions { grid-column: 1 / -1; text-align: center; margin-top: 8px; }
.form-solicitar-ritual .form-errors { background:#fee; border:1px solid #f99; color:#900; padding:10px; border-radius:8px; margin-bottom:10px;}
.hp { display:none; }
@media (max-width: 768px){ .form-solicitar-ritual .form-grid { grid-template-columns: 1fr; } }
.gracias-mensaje {
  background-color: #f0f6ff; /* azul muy suave */
  border: 2px solid #4a90e2; /* azul principal de la paleta */
  border-radius: 12px;
  padding: 20px;
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.gracias-mensaje h2 {
  margin-top: 0;
  font-size: 1.6em;
  color: #2a4d8f; /* tono más oscuro para destacar */
}

.gracias-mensaje p {
  margin-bottom: 10px;
  font-size: 1.05em;
}

.gracias-mensaje strong {
  color: #d35400; /* un tono cálido para resaltar */
}
/* =========================================================
   SERVICIOS DE TAROT – BLOQUE FINAL (override seguro)
   ========================================================= */

/* ===== Contenedor general (reutilizado) ===== */
.promociones-container{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
}

/* ===== Grid de servicios (3 → 2 → 1) ===== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  margin:10px 0 26px;
}
@media (max-width:1024px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .services-grid{ grid-template-columns:1fr; } }

/* ===== Tarjetas ===== */
.service-card{
  border:1px solid #e7e7e7;
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.service-card:hover{ transform:translateY(-2px); box-shadow:0 10px 18px rgba(0,0,0,.08); }

.service-card-link{ display:block; color:inherit; text-decoration:none; height:100%; }

.service-card-media{ position:relative; overflow:hidden; }

/* Imagen: sin CLS + visible en tablet/móvil */
.service-card-img{
  width:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:16/9;
  background:#eef3ff;
}
/* Fallback si el motor ignora aspect-ratio */
@supports not (aspect-ratio: 16/9){
  .service-card-img{ height:200px; }
}
/* Mantener visibilidad en pantallas pequeñas */
@media (max-width:1024px){ .service-card-img{ min-height:180px; } }
@media (max-width:640px) { .service-card-img{ min-height:160px; } }

.service-card-body{ padding:14px 14px 16px; }
.service-card-title{ font-size:1.06rem; margin:0 0 6px; font-weight:800; color:#173D8F; }
.service-card-desc{ margin:0 0 10px; color:#444; font-size:.95rem; line-height:1.45; }
.service-card-cta{ font-weight:700; color:#1a5bdb; }

/* ===== Bloque de teléfonos final ===== */
.phones-box{
  text-align:center;
  background:#f7f9ff;
  border:1px solid #e9efff;
  border-radius:14px;
  padding:22px 18px;
  margin:12px 0 26px;
}
.phones-row{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
/* Aire lateral consistente en los botones de teléfono */
.tarotista-phones .button{ padding:10px 18px; }
@media (max-width:768px){ .tarotista-phones .button{ padding:12px 20px; } }

/* ===== Legal: unificado y con separación consistente ===== */
/* Reset de márgenes heredados en contenedores conocidos */
.tarotista-phones .legal-small,
.contact-cta .legal-small,
.tarotistas-grid .tarotista-card .legal-small{
  margin:0 !important;
}
/* Estilo base y aire vertical bajo el botón */
.legal-small{
  display:block;
  margin-top:12px;            /* espacio bajo el botón */
  font-size:11px;
  color:#666;
  line-height:1.35;
}
/* =========================================================
   TARJETAS DE SERVICIOS (GRID UNIFICADO)
   ========================================================= */

/* --- Contenedor del Grid (3 -> 2 -> 1 columnas) --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 20px 0;
}
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Estructura de la Tarjeta --- */
.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}

.service-card-link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: inherit;
    text-decoration: none;
}

/* --- Contenido de la Tarjeta --- */
.service-card-media {
    line-height: 0;
}
.service-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    background: #eef3ff;
}

.service-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px;
}

.service-card-title {
    font-size: 1.1rem;
    margin: 0 0 8px;
    font-weight: 700;
    color: #173D8F;
}

.service-card-desc {
    margin: 0 0 15px;
    color: #444;
    font-size: .95rem;
    line-height: 1.5;
    flex-grow: 1; /* <-- LA REGLA CLAVE */
}

.service-card-cta {
    margin-top: auto;
    width: 100%;
    display: inline-block;
    text-align: center;
}

/* ====== FOOTER 2025 – Tarotistasvidentes.es (2 cols desktop/tablet, 1 col móvil) ====== */
.custom-footer-rm { background:#185DC5; color:#fff; }
.custom-footer-rm .footer-content {
  max-width: 1200px; margin: 0 auto; padding: 32px 20px;
  display:block !important; /* evita herencias de flex */
}

/* Grid columnas */
.custom-footer-rm .footer-columns {
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.custom-footer-rm .footer-col { min-width:0; }

/* Títulos y listas */
.custom-footer-rm .footer-section h4 {
  color:#fff; font-weight:700; font-size:1.2rem; line-height:1.25; margin: 0 0 10px;
}
.custom-footer-rm .footer-list { list-style:none; margin:0; padding:0; }
.custom-footer-rm .footer-list li { margin: 0 0 4px; }

/* Enlaces */
.custom-footer-rm .footer-section a {
  color:#fff !important;
  text-decoration:none;
  line-height:1.85;
  font-size:0.95rem;               /* ✔ Tamaño equilibrado en desktop */
  transition: color .2s ease-in-out, text-decoration .2s ease-in-out;
}
.custom-footer-rm .footer-section a:hover {
  color:#FFD700 !important;         /* dorado */
  text-decoration:underline;
}

/* Tablet */
@media (max-width: 1024px) {
  .custom-footer-rm .footer-columns { grid-template-columns: 1fr; gap: 28px; }
  .custom-footer-rm .footer-section h4 { font-size:1.25rem; }
  .custom-footer-rm .footer-section a { font-size:1.02rem; line-height:2; }
}

/* Móvil */
@media (max-width: 768px) {
  .custom-footer-rm .footer-content { padding: 26px 16px; }
  .custom-footer-rm .footer-section h4 { font-size:1.2rem; }
  .custom-footer-rm .footer-section a {
    font-size:1.06rem;              /* ✔ Más legible en móvil */
    line-height:2.05;
    display:inline-block;
    padding: 2px 0;
  }
}
/* ====== FOOTER – ajustes de centrado + tipografías por breakpoint ====== */

/* 0) Variables para controlar el tamaño de los h4 a voluntad */
:root {
  --footer-h4-pc: 1.00rem;      /* Desktop */
  --footer-h4-tablet: 1.22rem;  /* Tablet */
  --footer-h4-mob: 1.18rem;     /* Móvil */
}

/* 1) Asegurar contenedor centrado y sin herencias de flex raras */
.custom-footer-rm .footer-content {
  display: block !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px;
  box-sizing: border-box;
}

/* 2) Grid de columnas CENTRADO en PC/Tablet */
.custom-footer-rm .footer-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(300px, 520px)); /* 2 columnas con ancho máx. */
  justify-content: center;   /* centra el conjunto de columnas */
  justify-items: start;      /* alinea contenido dentro de cada columna */
  gap: 40px;
}

/* 3) Limitar ancho de cada columna para mejorar el centrado visual */
.custom-footer-rm .footer-col {
  max-width: 520px;
  width: 100%;
}

/* 4) Títulos controlables por clase */
.custom-footer-rm .footer-section .footer-h4 {
  font-size: var(--footer-h4-pc);
  line-height: 1.25;
  margin: 0 0 10px;
  color: #fff;   /* mantiene tu blanco */
  font-weight: 700;
}

/* 5) Listas y enlaces (desktop base) */
.custom-footer-rm .footer-list { list-style: none; margin: 0; padding: 0; }
.custom-footer-rm .footer-list li { margin: 0 0 4px; }
.custom-footer-rm .footer-section a {
  color: #fff !important;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.85;
  transition: color .2s ease-in-out, text-decoration .2s ease-in-out;
}
.custom-footer-rm .footer-section a:hover {
  color: #FFD700 !important;
  text-decoration: underline;
}

/* ====== TABLET (>=768px y <=1024px): mantener 2 columnas centradas ====== */
@media (max-width: 1024px) and (min-width: 768px) {
  .custom-footer-rm .footer-columns {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 32px;
    justify-content: center;  /* sigue centrado */
    justify-items: start;
  }
  .custom-footer-rm .footer-section .footer-h4 { font-size: var(--footer-h4-tablet); }
  .custom-footer-rm .footer-section a { font-size: 1.00rem; line-height: 1.95; }
}

/* ====== MÓVIL (<768px): 1 columna y TODO centrado ====== */
@media (max-width: 768px) {
  .custom-footer-rm .footer-columns {
    grid-template-columns: 1fr;   /* una columna */
    gap: 24px;
    justify-content: center;      /* centra el bloque */
    justify-items: center;        /* centra cada columna */
  }
  .custom-footer-rm .footer-col,
  .custom-footer-rm .footer-section { width: 100%; text-align: center; }

  .custom-footer-rm .footer-section .footer-h4 { 
    font-size: var(--footer-h4-mob);
    text-align: center;
  }
  .custom-footer-rm .footer-list li { text-align: center; }
  .custom-footer-rm .footer-section a {
    display: inline-block;        /* permite centrado visual del enlace */
    font-size: 1.06rem;
    line-height: 2.05;
    padding: 2px 0;
  }
}
/* ====== CENTRADO ROBUSTO DE COLUMNAS (PC/TABLET) ====== */
/* Evita herencias de flex/align raras del tema */
.custom-footer-rm .footer-content {
  display: block !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px;
  box-sizing: border-box;
}

/* 2 columnas centradas con ancho máximo controlado */
.custom-footer-rm .footer-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(320px, 520px)); /* fija mínimo y tope visual */
  column-gap: 48px;
  row-gap: 0;
  justify-content: center;      /* centra el conjunto (todas las columnas) */
  align-items: start;
  margin-inline: auto;          /* fallback adicional de centrado */
  max-width: 1140px;            /* contenedor visual de columnas */
  width: 100%;
}

/* Ajuste fino por navegador (Firefox a veces “estira” demasiado) */
@-moz-document url-prefix() {
  .custom-footer-rm .footer-columns {
    justify-content: center;
  }
}

/* Títulos controlados por variables (ya definidos) */
:root{
  --footer-h4-pc: 1.00rem;
  --footer-h4-tablet: 1.22rem;
  --footer-h4-mob: 1.18rem;
}
.custom-footer-rm .footer-section .footer-h4 {
  font-size: var(--footer-h4-pc);
  line-height: 1.25;
  margin: 0 0 10px;
  color: #fff;
  font-weight: 700;
}

/* Enlaces (desktop base) */
.custom-footer-rm .footer-section a {
  color:#fff !important; text-decoration:none;
  font-size:0.75rem; line-height:1.85;
  transition: color .2s, text-decoration .2s;
}
.custom-footer-rm .footer-section a:hover { color:#FFD700 !important; text-decoration:underline; }

/* ====== TABLET (dos columnas centradas) ====== */
@media (max-width: 1024px) and (min-width: 768px) {
  .custom-footer-rm .footer-columns {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    column-gap: 32px;
    justify-content: center;
  }
  .custom-footer-rm .footer-section .footer-h4 { font-size: var(--footer-h4-tablet); }
  .custom-footer-rm .footer-section a { font-size: 1.00rem; line-height: 1.95; }
}

/* ====== MÓVIL (una columna centrada) ====== */
@media (max-width: 768px) {
  .custom-footer-rm .footer-columns {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-content: center;
    justify-items: center;      /* centra cada columna */
  }
  .custom-footer-rm .footer-section,
  .custom-footer-rm .footer-col { width:100%; text-align:center; }

  .custom-footer-rm .footer-section .footer-h4 { font-size: var(--footer-h4-mob); text-align:center; }
  .custom-footer-rm .footer-section a {
    display:inline-block;
    font-size:1.06rem; line-height:2.05; padding:2px 0;
  }
}

/* ====== BLOQUE LEGAL: UNA SOLA COLUMNA SIEMPRE, CENTRADA ====== */
.custom-footer-rm .footer-legal {
  display: grid;
  place-items: center;     /* centra horizontal y verticalmente su contenido */
  row-gap: 16px;
  margin-top: 28px;
  text-align: center;
}

.custom-footer-rm .footer-legal-img img {
  width: min(96vw, 720px); /* fluido; tope 720px */
  height: auto;
  border: 2px solid #fff;
  border-radius: 8px;
}

/* Copyright en blanco, línea separadora sutil */
.custom-footer-rm .footer-copyright {
  color:#fff !important;
  border-top: 1px solid rgba(255,255,255,0.55);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 1rem;
}
/* Tamaño base (PC de escritorio) */
.footer-legal-img img {
  max-width: 420px; /* ancho máximo en PC */
  width: 100%;      /* ocupa todo el ancho disponible */
  height: auto;     /* mantiene proporción */
  border: 2px solid #fff;
  border-radius: 8px;
}

/* Tablet */
@media (max-width: 1024px) {
  .footer-legal-img img {
    max-width: 320px; /* más reducido en tablet */
  }
}

/* Móvil */
@media (max-width: 768px) {
  .footer-legal-img img {
    max-width: 96vw; /* casi ancho completo en móvil */
  }
}
/* =========================================================
   FIX: Asegurar que el menú principal de Neve esté por
   encima de las cabeceras de las plantillas personalizadas
   ========================================================= */
.header-main {
    position: relative; /* Necesario para que z-index funcione */
    z-index: 999;
}
/* =========================================================
       CTA Card con Banner (Entradas de Blog)
       ========================================================= */
    
    /* Contenedor principal de la tarjeta */
    .cta-card-container {
        background-color: #f7f9ff; /* Un azul muy pálido y suave */
        border: 1px solid #e9efff;
        border-radius: 16px;
        padding: 20px;
        margin-top: 50px;
        text-align: center;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
        overflow: hidden; /* Asegura que el banner respete los bordes redondeados */
    }
/* Banner superior de la tarjeta */
.cta-card-banner {
    margin: -20px -20px 20px -20px;
    text-align: center; /* Centra la imagen si es más pequeña que el contenedor */
}

.cta-card-banner img {
    width: 100%;
    max-width: 600px; /* <-- NUEVO: Define el ancho máximo de la imagen */
    height: auto;     /* <-- NUEVO: Mantiene la proporción automáticamente */
    display: inline-block; /* Permite el centrado */
    border-radius: 8px 8px 0 0; /* Redondea solo las esquinas superiores */
}
    
    /* Texto persuasivo */
    .cta-card-text {
        max-width: 600px;
        margin: 0 auto 25px;
        font-size: 1.05rem;
        line-height: 1.6;
        color: #333;
    }
    
    /* Contenedor de los botones */
    .cta-card-buttons {
        display: flex;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap; /* Para que se apilen en móvil */
    }
    
    .cta-card-buttons .button {
        min-width: 260px;
    }
    
    /* Texto legal final */
    .cta-card-legal {
        margin-top: 20px;
        font-size: 0.9em;
        color: #666;
    }
/* Estilo para el título del CTA Card */
.cta-card-title {
    font-size: 1.9rem;
    color: #1F53C5; /* Color corporativo azul */
    margin-bottom: 20px;
    font-weight: 700;
}
  /* =========================================================
       ESTILOS PARA CABECERA DE POST CONTENIDA (IMÁGENES EXISTENTES)
       ========================================================= */

    /* Contenedor principal de la cabecera */
    .post-hero-contained {
        max-width: 750px;
        margin-left: auto;   /* <-- CAMBIO CLAVE */
        margin-right: auto;  /* <-- CAMBIO CLAVE */
        margin-top: 30px;
        margin-bottom: 0;
        text-align: center;
    }

    /* La imagen destacada */
    .post-hero-image {
        display: block;
        width: 100%;
        height: auto; /* Mantiene la proporción original (350px de alto) */
        border-radius: 12px; /* Bordes redondeados */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px; /* Espacio entre la imagen y el H1 */
    }

    /* El H1 del post */
    .single .post-hero-title {
        font-size: clamp(2rem, 5vw, 2.8rem);
        line-height: 1.2;
        color: #333;
        padding: 0 15px;
        margin-top: 15px; /* Controla el espacio superior */
    }

    /* --- Media Query para Móviles (< 768px) --- */
    @media (max-width: 768px) {
        .post-hero-contained {
            /* El max-width se mantiene, pero el padding del contenedor principal se encarga del espacio */
            margin-top: 0;
        }
        .post-hero-image {
            border-radius: 0; /* Sin bordes en móvil para efecto de pantalla completa */
        }
    }
   /* =================================================================
   =================================================================
   BLOQUE ÚNICO DE ESTILOS RESPONSIVOS PARA MÓVIL/TABLET (< 768px)
   =================================================================
   ================================================================= */
    /* =========================================================
       AJUSTES PARA TABLET (769px - 1024px)
       ========================================================= */
    @media (max-width: 1024px) {

        /* Asegura que el bloque de teléfonos se vea bien en tablet */
        .phones-row {
            gap: 20px;
        }
        .phones-row > div {
            min-width: 260px; /* Reduce el ancho mínimo para que quepan mejor */
        }

    }

@media (max-width: 768px) {

    /* --- ESTILOS GENERALES DEL TEMA --- */
    #equipo-banner-tarotistas h2 {
        font-size: 0.9rem;
    }
    #equipo-banner-tarotistas .banner-info {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
    .promo-intro a.button {
        display: block;
        width: 100%;
        text-align: center;
        margin: 8px 0; /* Unificado desde 30px */
    }
    .banner-image {
        height: 500px;
        padding: 0 10px;
    }
    .banner-h1-seo {
        font-size: 1.4rem;
        padding: 6px 12px;
        margin-bottom: 20px;
        width: calc(100% - 20px);
    }
    .promo-card {
        width: 100%;
        max-width: 320px;
    }
    .tarotistas-grid .tarotista-card .promo-intro a.button {
        margin: 10px 0 6px;
    }
    .entry-content .tarotistas-grid .tarotista-card h3.tarotista-nombre,
    .nv-content-wrap .tarotistas-grid .tarotista-card h3.tarotista-nombre,
    .tarotistas-grid .tarotista-card h3.tarotista-nombre {
        font-size: 2rem !important;
    }
    .form-solicitar-ritual .form-grid {
        grid-template-columns: 1fr;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .tarotista-phones .button {
        padding: 12px 20px;
    }
    .custom-footer-rm .footer-columns {
        grid-template-columns: 1fr;
        gap: 24px;
        justify-items: center;
    }
    .custom-footer-rm .footer-col,
    .custom-footer-rm .footer-section {
        width: 100%;
        text-align: center;
    }

    /* --- ESTILOS DE NUESTRAS PLANTILLAS PERSONALIZADAS --- */
     /* 1. Ajuste de padding general para el contenido en móvil */
    /*
     * Forzamos un padding consistente en el contenedor principal
     * tanto para Entradas (.single) como para Páginas (.page)
     * que usan nuestras plantillas.
     */
    .single .container,
    .page .container,
    .promociones-container,
    body[class*="page-template-page-"] .container,
    .page-template-page-equipo-tarotistas .container { /* <-- LÍNEA AÑADIDA */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 2. Ajustes para la cabecera de post */
    .post-hero-contained {
        margin-top: 0;
    }
    .post-hero-image {
        border-radius: 0;
    }

    /* 3. Ajustes para la tarjeta CTA */
    .cta-card-container {
        padding: 15px;
    }
    .cta-card-title {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    .cta-card-text {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    .cta-card-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-card-buttons .button {
        width: 100%;
        max-width: 320px;
    }

    /* 4. Ajustes para el CTA genérico (si se usa) */
    .contact-cta {
        flex-direction: column;
    }
    .contact-cta .button {
        width: 100%;
        max-width: 520px;
        margin-inline: auto;
    }
}
/* Asegura que los botones no sean demasiado anchos */
    .cta-card-buttons .button {
        width: 100%;
        max-width: 320px;
        min-width: 0; /* <-- AÑADE ESTA LÍNEA */
        font-size: 1rem; /* <-- AÑADE ESTA LÍNEA */
    }
/* ===== Bloque de teléfonos con tres botones gabinete ===== */
.phones-box{
  text-align:center;
  background:#f7f9ff;
  border:1px solid #e9efff;
  border-radius:14px;
  padding:22px 18px;
  margin:12px 0 26px;
}
.phones-row{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
/* Aire lateral consistente en los botones de teléfono */
.tarotista-phones .button{ padding:10px 18px; }
@media (max-width:768px){ .tarotista-phones .button{ padding:12px 20px; } }
 /* 5. Ajustes para los botones de contacto en Tarot USA  los dos primeros*/
    /*
     * Usamos el ID de la página para ser muy específicos y no afectar
     * a otros bloques de botones en el resto del sitio.
     */
    .page-id-7734 .section-contacto .button {
        width: 100%;
        max-width: 320px; /* Mismo ancho que los otros botones para consistencia */
        min-width: 0;
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box; /* Asegura que el padding no desborde el ancho */
    }