/* ================================================================
   TRÉS JOLIE IBIZA — Sistema de diseño inmersivo
   Paleta dorado / marfil / berenjena · sobre Flatsome + UX Builder
   v1.0  ·  Child theme: tres-jolie-ibiza
   ================================================================ */

:root{
  /* Oro de marca (base: #DFB757 detectado en la web) */
  --tj-gold-900:#9C7B2E;
  --tj-gold-700:#C9A24B;
  --tj-gold:#DFB757;
  --tj-gold-300:#EAD09A;
  --tj-gold-100:#F6E9C8;
  --tj-gold-gradient:linear-gradient(135deg,#C9A24B 0%,#EAD09A 45%,#DFB757 70%,#B98C36 100%);

  /* Claros */
  --tj-white:#FFFFFF;
  --tj-ivory:#F7F3E8;
  --tj-cream:#F4ECDD;

  /* Oscuros inmersivos (berenjena de marca #230245) */
  --tj-plum-900:#140121;
  --tj-plum:#230245;
  --tj-plum-700:#34114F;
  --tj-ink:#1E0A2E;

  /* Texto */
  --tj-text:#1E0A2E;
  --tj-text-soft:rgba(30,10,46,.74);
  --tj-on-dark:#F7F3E8;

  /* Tipografía */
  --tj-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --tj-script:'Dancing Script','Moon Dance',cursive;
  --tj-sans:'Montserrat','Helvetica Neue',Arial,sans-serif;

  --tj-ease:cubic-bezier(.16,.84,.44,1);
  --tj-shadow:0 24px 60px -24px rgba(20,1,33,.55);
}

/* ---------- Tipografía global (suple a "Moon Dance" recargada) -------- */
body, p, li, .ux-text, #main{
  font-family:var(--tj-sans);
  color:var(--tj-text);
  letter-spacing:.005em;
}
h1,h2,h3,h4,h5,h6,
.is-xlarge,.banner h1,.banner h2{
  font-family:var(--tj-display)!important;
  font-weight:600;
  letter-spacing:.012em;
  line-height:1.12;
}
h1,.banner h1{font-weight:700;}
.alt-font,.script-accent{
  font-family:var(--tj-script)!important;
  font-weight:600;
  color:var(--tj-gold);
}
/* Limpia el ruido de los <strong data-start...> pegados desde IA */
strong[data-start]{font-weight:700;}

/* ---------- Filete / divisor dorado --------------------------------- */
.is-divider{
  background:var(--tj-gold-gradient)!important;
  height:3px!important;border-radius:2px;opacity:1;
}
.tj-eyebrow{
  font-family:var(--tj-sans);font-size:.78rem;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--tj-gold-700);
  display:inline-block;margin-bottom:.6rem;
}

/* ---------- Botones: oro líquido ------------------------------------ */
.button,.ux-builder .button,a.button{
  font-family:var(--tj-sans)!important;
  letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;
  border-radius:999px;border:0;padding:.95em 2.4em;
  transition:transform .45s var(--tj-ease),box-shadow .45s var(--tj-ease),background-position .6s var(--tj-ease);
}
.button.primary,.button:not(.is-outline):not(.is-link):not(.white):not(.secondary){
  background:var(--tj-gold-gradient);background-size:200% 200%;
  color:#2A1A05!important;font-weight:700;
  box-shadow:0 14px 30px -14px rgba(201,162,75,.7);
}
.button.primary:hover{transform:translateY(-3px);background-position:100% 0;
  box-shadow:0 22px 44px -16px rgba(201,162,75,.85);}
.button.white,
.tj-hero .button.white,
.tj-theme .button.white{
  background:rgba(20,1,33,0.18)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,0.75)!important;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.button.white:hover,
.tj-hero .button.white:hover,
.tj-theme .button.white:hover{
  background:var(--tj-gold)!important;border-color:var(--tj-gold)!important;
  color:#2A1A05!important;transform:translateY(-3px);text-shadow:none;
}
.button.secondary{
  background:transparent;color:var(--tj-plum)!important;
  border:1px solid var(--tj-gold);
}
.button.secondary:hover{background:var(--tj-gold);color:#2A1A05!important;transform:translateY(-3px);}
.button.is-underline:hover{color:var(--tj-gold)!important;}

/* ---------- Secciones inmersivas con vídeo -------------------------- */
.section .bg video,
.ux-banner .bg video,
.banner .bg video,
video.bg-video{
  object-fit:cover!important;width:100%!important;height:100%!important;
}
/* Velo degradado para legibilidad sobre vídeo/imagen oscura */
.tj-immersive .bg-overlay-add,
.section.dark .bg-overlay-add,
.ux-banner.dark .bg-overlay-add{
  background:linear-gradient(180deg,rgba(20,1,33,.30) 0%,rgba(20,1,33,.55) 55%,rgba(20,1,33,.78) 100%)!important;
}
.section.dark, .ux-banner.dark, .dark .ux-text, .dark h1,.dark h2,.dark h3,.dark h4{
  color:var(--tj-on-dark);
}
/* Hero a pantalla completa */
.tj-hero{min-height:100svh!important;}
.tj-hero .text-box h1,.tj-hero .text-box h2{
  text-shadow:0 2px 30px rgba(20,1,33,.6);
}
.tj-hero .tj-scroll-cue{
  position:absolute;left:50%;bottom:26px;width:26px;height:42px;
  border:1px solid rgba(255,255,255,.6);border-radius:14px;transform:translateX(-50%);
}
.tj-hero .tj-scroll-cue::after{
  content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;border-radius:2px;
  background:var(--tj-gold);transform:translateX(-50%);animation:tj-scroll 1.8s var(--tj-ease) infinite;
}
@keyframes tj-scroll{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,16px)}}

/* ---------- Carta de masajes: tarjetas de lujo ---------------------- */
.info-card-1 .col,
.tj-carta .ux-image-box{
  transition:transform .6s var(--tj-ease),box-shadow .6s var(--tj-ease);
}
.info-card-1 .img-inner,
.tj-carta .image-cover{border-radius:6px 6px 0 0;overflow:hidden;}
.info-card-1 .col-inner,
.tj-carta .ux-image-box{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(223,183,87,.45);
  border-radius:8px;box-shadow:var(--tj-shadow);overflow:hidden;
}
.info-card-1 .col:hover{transform:translateY(-10px);}
.info-card-1 .col:hover .col-inner{box-shadow:0 34px 70px -26px rgba(20,1,33,.6);}
/* Precio destacado */
.tj-carta .price, .info-card-1 h2 strong{
  font-family:var(--tj-display);color:var(--tj-gold-700);letter-spacing:.02em;
}
.tj-price-tag{
  display:inline-block;font-family:var(--tj-display);font-size:1.5rem;
  color:var(--tj-plum);border-top:1px solid rgba(223,183,87,.5);
  border-bottom:1px solid rgba(223,183,87,.5);padding:.35em 0;margin:.4em 0;
}

/* ---------- Animaciones de scroll (reveal) -------------------------- */
.tj-reveal{opacity:0;transform:translateY(38px);
  transition:opacity 1s var(--tj-ease),transform 1s var(--tj-ease);will-change:opacity,transform;}
.tj-reveal.in-view{opacity:1;transform:none;}
.tj-reveal.d1{transition-delay:.12s}.tj-reveal.d2{transition-delay:.24s}.tj-reveal.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .tj-reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .tj-hero .tj-scroll-cue::after{animation:none;}
}

/* ---------- Botón flotante de WhatsApp (conversión) ---------------- */
.tj-wa{
  position:fixed;right:20px;bottom:20px;z-index:9999;
  display:flex;align-items:center;gap:.6em;
  background:var(--tj-gold-gradient);color:#23150a;
  font-family:var(--tj-sans);font-weight:700;font-size:.8rem;letter-spacing:.06em;
  padding:.85em 1.25em;border-radius:999px;text-decoration:none;
  box-shadow:0 16px 34px -14px rgba(201,162,75,.8);
  transition:transform .4s var(--tj-ease);
}
.tj-wa:hover{transform:translateY(-3px) scale(1.03);color:#23150a;}
.tj-wa svg{width:20px;height:20px;flex:0 0 auto;}
@media (max-width:549px){.tj-wa span{display:none;}.tj-wa{padding:.95em;border-radius:50%;}}

/* ---------- Encabezado / logo --------------------------------------- */
.header-main{transition:background .4s var(--tj-ease);}
.nav-uppercase>li>a{letter-spacing:.18em;font-size:.78rem;}

/* ---------- Arreglos responsive (los márgenes negativos del builder
   rompen en móvil) --------------------------------------------------- */
@media (max-width:849px){
  [class*="margin"][style*="-"],
  .col[style*="margin: -"], .col-inner[style*="margin: -"]{margin-top:0!important;}
  .section,.ux-banner{background-attachment:scroll!important;} /* parallax off en móvil */
  h1,.banner h1{font-size:clamp(2rem,9vw,2.8rem);}
  h2{font-size:clamp(1.6rem,6.5vw,2.1rem);}
}

/* Imagen demo de relleno que quedó publicada: se oculta si aparece */
img[src*="/2016/08/dummy"],img[src*="dummy-2.jpg"]{display:none!important;}

/* =============================================================
   v2 — interacciones GSAP / ScrollTrigger
   ============================================================= */

/* Barra de progreso superior (filete dorado) */
.tj-progress{
  position:fixed;left:0;top:0;width:100%;height:2px;z-index:10000;pointer-events:none;
  background:rgba(20,1,33,.08);
}
.tj-progress i{
  display:block;width:100%;height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:var(--tj-gold-gradient);box-shadow:0 0 14px rgba(223,183,87,.55);
}

/* Cabecera: fondo sólido al hacer scroll (Flatsome header) */
.header.tj-scrolled,
.header.tj-scrolled .header-main{
  background:rgba(247,243,232,0.97)!important;
  box-shadow:0 6px 24px -16px rgba(20,1,33,.5);
}

/* Botones magnéticos: aseguramos transform-origin y will-change */
.button.primary,
a.button:not(.is-link):not(.is-outline):not(.white):not(.secondary){
  transform-origin:center;will-change:transform;
}

/* Tarjetas de la carta: perspectiva para el rotateX del reveal */
.tj-carta .row{perspective:1200px;}
.tj-carta .col{transform-style:preserve-3d;backface-visibility:hidden;}

/* Cabecera más limpia tras montar GSAP (evita el "salto" inicial) */
html.tj-anim h1,html.tj-anim h2{will-change:transform,clip-path;}

/* Soporte reducido: si el navegador no entiende clip-path,
   el encabezado se ve completo (sin reveal pero legible) */
@supports not (clip-path: inset(0 0 0% 0)){
  h1,h2{clip-path:none!important;transform:none!important;opacity:1!important;}
}

/* Microinteracción de tarjetas de la carta (hover finísimo) */
.tj-carta .ux-image-box{transition:transform .55s var(--tj-ease),box-shadow .55s var(--tj-ease);}
.tj-carta .ux-image-box:hover{transform:translateY(-8px);}

/* Asegura que el botón flotante de WhatsApp queda por encima del progreso */
.tj-wa{z-index:10001;}

/* =============================================================
   v2.1 — fixes de contraste, gradiente cinemático y scroll-snap
   ============================================================= */

/* --- Sección USP oscura: fuerza contraste correcto -----------
   En la home la sección 'USP' usa bg dorado/crema desde la imagen
   placeholder de Flatsome. Limpiamos: bg oscuro real + filete dorado. */
.tj-usp{
  background:radial-gradient(ellipse at center, #2a0653 0%, #14012b 70%) !important;
  position:relative;
}
.tj-usp::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%, rgba(223,183,87,.10), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(223,183,87,.08), transparent 32%);
}
.tj-usp h1,.tj-usp h2,.tj-usp h3,.tj-usp h4{color:var(--tj-ivory)!important;text-shadow:0 1px 24px rgba(0,0,0,.35);}
.tj-usp p,.tj-usp .ux-text{color:rgba(247,243,232,0.88)!important;}
.tj-usp .is-divider{background:var(--tj-gold-gradient)!important;opacity:1;}

/* --- Gradiente cinemático al pie del héroe (fusión con la siguiente sección crema) --- */
.tj-hero{position:relative;}
.tj-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:42%;z-index:2;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(20,1,33,0) 0%,
    rgba(20,1,33,0.25) 28%,
    rgba(124, 86, 22, 0.32) 58%,
    rgba(223,183,87,0.32) 78%,
    rgba(247,243,232,0.92) 100%
  );
  mix-blend-mode:multiply;
}
/* Sutil resplandor dorado lateral en el héroe (cinematic vignette) */
.tj-hero > .text-box,
.tj-hero > .row{position:relative;z-index:3;}
.tj-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(223,183,87,0.10), transparent 60%),
    radial-gradient(100% 80% at 50% 100%, rgba(20,1,33,0.55), transparent 70%);
}

/* --- Scroll-snap (proximity) solo en la home: catch suave entre secciones --- */
@media (min-width: 850px) and (prefers-reduced-motion: no-preference){
  html:has(body.tj-home){scroll-snap-type:y proximity;scroll-padding-top:90px;}
  body.tj-home .section,
  body.tj-home > div > .ux-banner,
  body.tj-home #main .section,
  body.tj-home #main .ux-banner{
    scroll-snap-align:start;scroll-snap-stop:normal;
  }
}

/* --- Lightweight 3D tilt: perspectiva y profundidad para Vanilla-Tilt ----- */
.tj-carta .row{perspective:1400px;}
.tj-carta .col{transform-style:preserve-3d;will-change:transform;}
.tj-carta .col .ux-image-box,
.tj-carta .col img{transform:translateZ(28px);}
.tj-carta .col h2{transform:translateZ(46px);}
.tj-carta .col .price,.tj-carta .col .tj-price-tag{transform:translateZ(40px);}
.tj-carta .col .button{transform:translateZ(60px);}

/* Glare brillo dorado que añade Vanilla-Tilt — color de marca */
.tj-carta .col .js-tilt-glare,
.tj-masajistas-grid .col .js-tilt-glare{border-radius:10px;overflow:hidden;}
.tj-carta .col .js-tilt-glare-inner,
.tj-masajistas-grid .col .js-tilt-glare-inner{
  background:linear-gradient(0deg, transparent 0%, rgba(255,232,175,0.28) 100%) !important;
}

/* =============================================================
   v2.2 — Grid de masajistas (página /nuestras-masajistas/)
   ============================================================= */

.tj-masajistas-grid{margin-bottom:18px;perspective:1400px;}
.tj-masajistas-grid > .col{
  padding:6px;
  text-align:center;                 /* centra divider, botón y todo lo inline */
  transition:transform .55s var(--tj-ease),box-shadow .55s var(--tj-ease);
  transform-style:preserve-3d;
}
.tj-masajistas-grid > .col .is-divider-wrap,
.tj-masajistas-grid > .col .is-divider,
.tj-masajistas-grid > .col p{margin-left:auto;margin-right:auto;}
.tj-masajistas-grid > .col .button{display:inline-flex;margin:8px auto 0;}
.tj-masajista-card,
.tj-masajistas-grid .col-inner{
  background:#fff;
  border-radius:10px;
  box-shadow:0 14px 40px -20px rgba(20,1,33,.42);
  border:1px solid rgba(223,183,87,.35);
  overflow:hidden;
  padding:0 0 22px !important;
}
.tj-masajistas-grid > .col:hover .col-inner{
  box-shadow:0 28px 60px -22px rgba(20,1,33,.55);
}
.tj-masajista-photos,
.tj-masajistas-grid .ux-slider{border-radius:10px 10px 0 0;overflow:hidden;}
.tj-masajistas-grid .col h3{
  font-family:var(--tj-display)!important;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--tj-plum);
  font-size:1.25rem;
  margin:.8em 0 .15em;
  text-align:center;
}
.tj-masajistas-grid .tj-meta{
  font-family:var(--tj-sans);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tj-gold-700);
  margin:0 0 .25em;
  text-align:center;
}
.tj-masajistas-grid .tj-langs{
  font-family:var(--tj-sans);
  font-size:.72rem;
  color:rgba(30,10,46,.6);
  margin:0 0 .4em;
  text-align:center;
}
.tj-masajistas-grid .is-divider{margin:10px auto 14px;}
.tj-masajistas-grid .button{
  margin:6px auto 0;display:inline-block;font-size:.7rem;letter-spacing:.18em;
}
/* Profundidad real para Vanilla-Tilt en las cards de masajistas */
.tj-masajistas-grid .col .ux-slider{transform:translateZ(24px);}
.tj-masajistas-grid .col h3{transform:translateZ(38px);}
.tj-masajistas-grid .col .button{transform:translateZ(52px);}

/* Slider: aspecto 3:4 portrait constante (evita saltos cuando rota) */
.tj-masajistas-grid .ux-slider .flickity-viewport{aspect-ratio:3/4;}
.tj-masajistas-grid .ux-slider img{width:100%;height:100%;object-fit:cover;}

/* Mobile: 1 col, alturas razonables */
@media (max-width:849px){
  .tj-masajistas-grid > .col{padding:6px 0;}
  .tj-masajistas-grid .col h3{font-size:1.15rem;}
}