/* =====================================================================
   SHADHANA — CSS de las páginas legales (Cookies, Privacidad, Aviso legal)
   Texto en negro, Verdana, fondo crema. Se muestran dentro del modal legal.
   Variables editables: panel admin > ESTILO GENERAL > Ventanas modales.
   ===================================================================== */

:root {
  --cream:        #efe6d3;
  --cream-light:  #f7f0df;
  --cream-shadow: #e2d4b6;
  --teal:         #1a7b76;
  --teal-bright:  #00c1bc;
  --teal-soft:    #2fc4be; /* la paleta completa también en los textos legales */
  --gold:         #a67c3f;
  --ink:          #4a3d29;
  --ochre:        #6a4a1e;
  --ease:         cubic-bezier(.19, 1, .22, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100dvh;
  background: var(--sh-page-bg, var(--cream));
  color: var(--sh-page-color, var(--ink));
  font-family: var(--sh-font-primary, "Cormorant Garamond", "Times New Roman", serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

.page-bg {
  position: fixed; inset: 0; z-index: -3;
  background: var(--sh-pagebg-gradient,
    radial-gradient(ellipse at 26% 18%, rgba(166,124,63,0.10), transparent 60%),
    linear-gradient(180deg, var(--cream-light) 0%, var(--cream) 55%, var(--cream-shadow) 100%));
}
/* El brillo dorado sigue al «Secundario» (S5b); sin color-mix, la línea de arriba */
@supports (color: color-mix(in srgb, red, blue)) {
  .page-bg {
    background: var(--sh-pagebg-gradient,
      radial-gradient(ellipse at 26% 18%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%),
      linear-gradient(180deg, var(--cream-light) 0%, var(--cream) 55%, var(--cream-shadow) 100%));
  }
}
.page-grain {
  position: fixed; inset: -50%; z-index: -2; pointer-events: none;
  opacity: var(--sh-pagegrain-opacity, 0.07); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.29  0 0 0 0 0.24  0 0 0 0 0.16  0 0 0 0.55 0'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
}

.content {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 40px) clamp(28px, 5vw, 56px);
}

/* ---------- CONTENIDO LEGAL (negro, Verdana) ---------- */
.legal-content {
  max-width: var(--sh-legaldoc-maxwidth, 820px); margin: 0 auto;
  font-family: var(--sh-legaldoc-font, Verdana, Geneva, Tahoma, sans-serif);
  color: var(--sh-legaldoc-color, var(--sh-c-ink-strong, #000000));
  background: var(--sh-legaldoc-bg, rgba(255, 255, 255, 0.55));
  border-radius: var(--sh-legaldoc-radius, 14px);
  padding: var(--sh-legaldoc-padding, clamp(22px, 4vw, 44px));
  box-shadow: var(--sh-legaldoc-shadow, 0 8px 24px rgba(74, 61, 41, 0.10));
}
.legal-content h1 {
  font-family: var(--sh-legaldoc-font, Verdana, Geneva, Tahoma, sans-serif);
  font-size: var(--sh-legaldoc-h1-size, clamp(22px, 3.4vw, 32px)); font-weight: 700; color: var(--sh-legaldoc-heading-color, var(--sh-c-ink-strong, #000)); margin-bottom: 8px;
}
.legal-content .updated { font-size: 12px; color: var(--sh-legaldoc-color, var(--sh-c-ink-strong, #000)); opacity: 0.7; margin-bottom: 22px; }
.legal-content h2 {
  font-family: var(--sh-legaldoc-font, Verdana, Geneva, Tahoma, sans-serif);
  font-size: var(--sh-legaldoc-h2-size, clamp(15px, 2vw, 18px)); font-weight: 700; color: var(--sh-legaldoc-heading-color, var(--sh-c-ink-strong, #000)); margin: 26px 0 8px;
}
.legal-content p, .legal-content li {
  font-family: var(--sh-legaldoc-font, Verdana, Geneva, Tahoma, sans-serif);
  font-size: var(--sh-legaldoc-size, 13.5px); line-height: var(--sh-legaldoc-lineheight, 1.75); color: var(--sh-legaldoc-color, var(--sh-c-ink-strong, #000));
}
.legal-content ul { margin: 8px 0 8px 22px; }
.legal-content a { color: var(--sh-legaldoc-link-color, var(--sh-c-ink-strong, #000)); text-decoration: underline; }
/* El recuadro del documento sigue a la superficie elevada y su sombra al texto (con la paleta activa, también); sin
   color-mix, las líneas de arriba */
@supports (color: color-mix(in srgb, red, blue)) {
  .legal-content {
    background: var(--sh-legaldoc-bg, color-mix(in srgb, var(--sh-c-raised, #ffffff) 55%, transparent));
    box-shadow: var(--sh-legaldoc-shadow, 0 8px 24px color-mix(in srgb, var(--sh-c-shadow, var(--ink)) 10%, transparent));
  }
}

/* ---------- VÍDEO pegado en el texto (R0): la misma fachada que en las demás páginas (styles.css, «VÍDEO»), en corto.
   Nada de YouTube ni Vimeo hasta pulsar; video.js pone el reproductor. ---------- */
/* Como en styles.css, nunca recorta: la proporción es un mínimo (el marco crece si su contenido no cabe; overflow: clip) */
.legal-content .shb-video__frame {
  display: grid; position: relative; width: 100%; margin: 1.2em 0; border-radius: var(--sh-video-radius, 16px); overflow: hidden; overflow: clip;
  background: var(--sh-video-bg, var(--sh-c-veil, #000)); container-type: inline-size;
}
.legal-content .shb-video__frame.is-tall { max-width: min(100%, calc(var(--sh-video-tall-maxheight, 85vh) * var(--shv-ar, 1))); margin-left: auto; margin-right: auto; }
.legal-content .shb-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.legal-content .shb-video__play {
  position: relative; width: 100%; min-width: 0; margin: 0; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; cursor: pointer;
  font: inherit; text-align: center; color: var(--sh-c-on-photo, #ffffff); background: var(--sh-video-bg, var(--sh-c-veil, #000)) center / cover no-repeat;
}
.legal-content .shb-video__play.is-plain { background-image: radial-gradient(ellipse at 50% 40%, rgba(26, 123, 118, 0.55), rgba(0, 0, 0, 0.92) 70%); }
.legal-content .shb-video__play:focus-visible { outline: 3px solid var(--sh-c-on-photo, #ffffff); outline-offset: -6px; }
.legal-content .shb-video__icon {
  position: relative; flex: none; width: var(--sh-video-play-size, 72px); height: var(--sh-video-play-size, 72px); border-radius: 50%;
  background: var(--sh-video-play-bg, rgba(255, 255, 255, 0.9));
}
.legal-content .shb-video__icon::before {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--sh-video-play-color, var(--teal));
}
.legal-content .shb-video__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 34em;
  font-weight: 600; font-size: 18px; line-height: 1.25;
}
.legal-content .shb-video__title.is-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.legal-content .shb-video__note { max-width: 100%; font-size: 13px; line-height: 1.35; background: rgba(0, 0, 0, 0.72); padding: 5px 12px; border-radius: 999px; }
/* Los mismos colores siguiendo a la paleta, como en styles.css (degradado del principal, velo y fondo del icono); sin
   color-mix, las líneas de arriba */
@supports (color: color-mix(in srgb, red, blue)) {
  .legal-content .shb-video__play.is-plain { background-image: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--teal) 55%, transparent), color-mix(in srgb, var(--sh-c-veil, #000000) 92%, transparent) 70%); }
  .legal-content .shb-video__icon { background: var(--sh-video-play-bg, color-mix(in srgb, var(--sh-c-on-photo, #ffffff) 90%, transparent)); }
  .legal-content .shb-video__note { background: color-mix(in srgb, var(--sh-c-veil, #000000) 72%, transparent); }
}
/* Estrecho (el texto dentro de la ventana legal en un móvil): icono más pequeño y el título en una línea; muy estrecho,
   el título solo para los lectores de pantalla y el aviso entero y a la vista */
@container (max-width: 360px) {
  .legal-content .shb-video__play { gap: 6px; padding: 8px 10px; }
  .legal-content .shb-video__icon { width: min(var(--sh-video-play-size, 72px), 48px); height: min(var(--sh-video-play-size, 72px), 48px); }
  .legal-content .shb-video__icon::before { border-width: 9px 0 9px 15px; }
  .legal-content .shb-video__title { -webkit-line-clamp: 1; font-size: 15px; }
  .legal-content .shb-video__note { font-size: 12px; }
}
@container (max-width: 240px) {
  .legal-content .shb-video__play { gap: 4px; padding: 6px 8px; }
  .legal-content .shb-video__icon { width: min(var(--sh-video-play-size, 72px), 34px); height: min(var(--sh-video-play-size, 72px), 34px); }
  .legal-content .shb-video__icon::before { border-width: 7px 0 7px 11px; }
  .legal-content .shb-video__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal-content .shb-video__note { padding: 3px 8px; font-size: 11.5px; }
}

/* Enlace de vuelta: solo visible cuando el documento se abre fuera del modal */
.legal-back { max-width: var(--sh-legaldoc-maxwidth, 820px); margin: 0 auto 14px; font: 13px/1.4 Verdana, Geneva, Tahoma, sans-serif; }
.legal-back a { color: var(--sh-c-link, var(--teal)); text-decoration: underline; }

/* Móvil en HORIZONTAL (también dentro del modal cuando mide ≤500px de alto) */
@media (orientation: landscape) and (max-height: 500px) {
  .content { padding-bottom: clamp(16px, 4vh, 28px); }
}