/* Carta de masajes - frontend
   Puedes sobreescribir estilos desde tu tema o Elementor usando estas clases.
*/
.cmb-book{
  --cmb-bg: #0f0f10;
  --cmb-page-bg: #f7f3ea;
  --cmb-page-border: rgba(0,0,0,.12);
  --cmb-text: #121315;
  --cmb-muted: rgba(18,19,21,.65);
  --cmb-accent: #6D0202; /* rojo oscuro */
  --cmb-shadow: rgba(0,0,0,.25);

  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  color: var(--cmb-text);
  font-family: inherit;
}

.cmb-book__chrome{
  position:absolute; inset:-18px -18px -26px -18px;
  background:
    radial-gradient(1200px 250px at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.1)),
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.35));
  border-radius: 22px;
  filter: blur(.0px);
  z-index: 0;
}

.cmb-book__header{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 18px 8px 10px 8px;
  position: relative;
  z-index: 2;
}

.cmb-book__title{
  font-size: 18px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}

.cmb-book__counter{
  font-size: 13px;
  color: rgba(255,255,255,.6);
}

.cmb-book__spread{
  position: relative;
  z-index: 2;
  display:flex;
  gap: 0;
  background: var(--cmb-bg);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 50px var(--cmb-shadow);
  overflow: hidden;
}

.cmb-page{
  width: 50%;
  min-height: 520px;
  position: relative;
}

.cmb-page__inner{
  height:100%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0, rgba(0,0,0,.03) 2px, rgba(255,255,255,0) 10px, rgba(255,255,255,0) 16px),
    var(--cmb-page-bg);
  border: 1px solid var(--cmb-page-border);
  border-radius: 14px;
  padding: 22px 22px 18px 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 10px 22px rgba(0,0,0,.12);
}

.cmb-page--left .cmb-page__inner{
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.cmb-page--right .cmb-page__inner{
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* “Lomo” del libro */
.cmb-book__spread::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 26px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(0,0,0,.12), rgba(255,255,255,.04));
  border-radius: 18px;
  pointer-events: none;
  z-index: 3;
}

/* Pliegue (oreja) de la página derecha */
.cmb-page__fold{
  position:absolute;
  right: 18px;
  bottom: 18px;
  width: 0;
  height: 0;
  border-left: 56px solid transparent;
  border-top: 56px solid rgba(0,0,0,.08);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
  border-radius: 6px;
}

.cmb-page__fold::after{
  content:"";
  position:absolute;
  left: -56px;
  top: -56px;
  width: 0; height: 0;
  border-left: 56px solid transparent;
  border-top: 56px solid rgba(255,255,255,.38);
}

/* Contenido */
.cmb-card__title{
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 10px 0;
  letter-spacing: -.01em;
}

.cmb-card__meta{
  font-size: 13px;
  color: var(--cmb-muted);
  margin-bottom: 14px;
}

.cmb-card__img{
  width: 100%;
  max-height: 230px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  margin: 10px 0 14px 0;
}

.cmb-card__text{
  font-size: 15px;
  line-height: 1.55;
  color: rgba(18,19,21,.92);
}

.cmb-card__text p{ margin: 0 0 10px 0; }

.cmb-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--cmb-accent) !important;
  /* Forzar texto blanco aunque el tema sobreescriba enlaces */
  color: #fff !important;
  text-decoration:none !important;
  font-weight: 600;
  margin-top: 12px;
  border: none;
}

.cmb-book a.cmb-card__btn:visited{ color:#fff !important; }
.cmb-card__btn:hover,
.cmb-card__btn:focus,
.cmb-card__btn:active{ color:#fff !important; opacity: .92; }

/* Páginas especiales (mensaje portada/despedida) */
.cmb-message{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cmb-message__box{
  max-width: 92%;
  padding: 22px 14px;
}

.cmb-message__text{
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--cmb-accent);
  letter-spacing: -.01em;
}

@media (max-width: 820px){
  .cmb-message__text{ font-size: 26px; }
}

/* Nav */
.cmb-book__nav{
  display:flex;
  justify-content:center;
  gap: 10px;
  padding: 14px 0 6px 0;
  position: relative;
  z-index: 2;
}

.cmb-btn{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  color: #6D0202 !important;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: none !important;
}

/* Iconos navegación */
.cmb-btn__icon{ display:inline-flex; align-items:center; justify-content:center; }
.cmb-btn__icon svg{ width: 22px; height: 22px; }
.cmb-btn__icon svg path{ stroke: currentColor; }

.cmb-btn:hover{ opacity: .92; }

.cmb-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.cmb-page__placeholder{
  color: rgba(18,19,21,.55);
  font-size: 14px;
  margin-top: 10px;
}

/* =====================================================
   Page flip (cambio de hoja completo)
   ===================================================== */

.cmb-page{ overflow: visible; }

/* Capa de giro (se crea por JS) */
.cmb-page__flip{
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  display: none;
}

.cmb-page__flip.is-active{ display:block; }

.cmb-page__flip-inner{
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.cmb-page__flip-face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

/* La “cara trasera” se rota para que al girar 180º se lea bien */
.cmb-page__flip-back{ transform: rotateY(180deg); }

/* Ajustes de la hoja clonada dentro del giro */
.cmb-page__inner--flip{
  height: 100%;
}

.cmb-page__inner--flip.cmb-page__inner--left{
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.cmb-page__inner--flip.cmb-page__inner--right{
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* Ocultar el pliegue durante el giro para que no “flote” */
.cmb-page.cmb-is-flipping .cmb-page__fold{ opacity: 0; }

/* Sombras durante el giro */
.cmb-page__flip-face::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,0) 42%, rgba(0,0,0,.10));
  opacity: .0;
  pointer-events: none;
}

.cmb-page__flip.is-active .cmb-page__flip-face::after{ opacity: .55; }

/* ANIMACIONES */
.cmb-page__flip.cmb-flip--next .cmb-page__flip-inner{
  transform-origin: left center;
  animation: cmbFlipRightToLeft .52s ease-in-out forwards;
}

.cmb-page__flip.cmb-flip--prev .cmb-page__flip-inner{
  transform-origin: right center;
  animation: cmbFlipLeftToRight .52s ease-in-out forwards;
}

/* Modo móvil (solo 1 página visible): volver atrás gira hacia la derecha */
.cmb-page__flip.cmb-flip--prev-right .cmb-page__flip-inner{
  transform-origin: right center;
  animation: cmbFlipRightBack .52s ease-in-out forwards;
}

@keyframes cmbFlipRightToLeft{
  0%   { transform: perspective(1800px) rotateY(0deg); }
  45%  { transform: perspective(1800px) rotateY(-110deg); }
  100% { transform: perspective(1800px) rotateY(-180deg); }
}

@keyframes cmbFlipLeftToRight{
  0%   { transform: perspective(1800px) rotateY(0deg); }
  45%  { transform: perspective(1800px) rotateY(110deg); }
  100% { transform: perspective(1800px) rotateY(180deg); }
}

@keyframes cmbFlipRightBack{
  0%   { transform: perspective(1800px) rotateY(0deg); }
  45%  { transform: perspective(1800px) rotateY(110deg); }
  100% { transform: perspective(1800px) rotateY(180deg); }
}

@media (prefers-reduced-motion: reduce){
  .cmb-page__flip.cmb-flip--next .cmb-page__flip-inner,
  .cmb-page__flip.cmb-flip--prev .cmb-page__flip-inner,
  .cmb-page__flip.cmb-flip--prev-right .cmb-page__flip-inner{
    animation: none !important;
  }
}

/* Animations */
.cmb-anim{
  position: relative;
}

.cmb-anim.cmb-anim--next{
  animation: cmbFlipNext .32s ease-in-out;
  transform-origin: left center;
}

.cmb-anim.cmb-anim--prev{
  animation: cmbFlipPrev .32s ease-in-out;
  transform-origin: left center;
}

@keyframes cmbFlipNext{
  0% { transform: perspective(1400px) rotateY(0deg); }
  100%{ transform: perspective(1400px) rotateY(-20deg); }
}

@keyframes cmbFlipPrev{
  0% { transform: perspective(1400px) rotateY(0deg); }
  100%{ transform: perspective(1400px) rotateY(20deg); }
}

/* Responsive */
@media (max-width: 820px){
  .cmb-page{ width: 100%; }
  .cmb-page--left{ display:none; }
  .cmb-book__spread::before{ display:none; }
  .cmb-page__fold{ right: 12px; bottom: 12px; border-left-width: 44px; border-top-width: 44px; }
  .cmb-page__fold::after{ left: -44px; top: -44px; border-left-width: 44px; border-top-width: 44px; }
  .cmb-page__inner{ padding: 18px; min-height: 520px; }
  .cmb-card__title{ font-size: 24px; }
}

/* =====================================================
   SEO: cache de headings (H3) sin cambiar el diseño
   - No se muestra en pantalla
   - No usa display:none para que las herramientas puedan detectarlo
   ===================================================== */
.cmb-seo-cache{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}