/* =====================================================================
   THEME — sitio de regalos (Cilioaica Rituales)
   Estilo: lujo tranquilo, spa de Bali — base crema + oro fino, mucho aire,
   serif fina, sin animaciones pesadas.

   Los COLORES y FUENTES de marca se definen en js/config.js → MARCA
   (core.js los aplica como --c-* / --f-*). Aquí solo están los mismos
   valores por defecto, para que la página se vea bien antes de que cargue
   el JavaScript. css/site.css solo usa estas variables.
   ===================================================================== */
:root {
  /* ---------- Colores de marca (sobrescritos por js/config.js) ---------- */
  --c-crema:        #F7F1E6;
  --c-crema-claro:  #FCF9F3;
  --c-arena:        #EDE2CF;
  --c-oro:          #B8975A;
  --c-oro-texto:    #7A6136;
  --c-texto:        #3A3128;
  --c-texto-suave:  #62574A;
  --c-oscuro:       #2F2A23;
  --c-ella:         #F3DCDC;
  --c-ella-linea:   #D9A7AC;
  --c-ella-texto:   #87414D;
  --c-el:           #006039;
  --c-el-suave:     #E2ECE5;
  --c-el-texto:     #006039;
  --f-titulos:      'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --f-texto:        'Jost', 'Avenir Next', 'Century Gothic', sans-serif;

  /* ---------- Fondo general (nombres heredados del esqueleto) ---------- */
  --satin-base:      var(--c-crema);
  --satin-light:     var(--c-crema-claro);
  --satin-iris:      var(--c-ella);
  --satin-shadow:    var(--c-arena);

  /* ---------- Fondo oscuro (pie de página) ---------- */
  --cacao-satin:       var(--c-oscuro);
  --cacao-satin-light: color-mix(in srgb, var(--c-oscuro) 82%, var(--c-oro));
  --cacao-satin-deep:  color-mix(in srgb, var(--c-oscuro) 88%, #000);

  /* ---------- Texto ---------- */
  --text:            var(--c-texto);
  --text-soft:       var(--c-texto-suave);
  --text-on-dark:    var(--c-crema-claro);
  --text-on-dark-soft: color-mix(in srgb, var(--c-crema-claro) 82%, var(--c-oscuro));
  --accent-text:     var(--c-oro-texto);      /* palabras clave en itálica */
  --accent-text-on-dark: var(--c-oro);

  /* ---------- Oro (SOLO líneas, marcos y separadores) ---------- */
  --gold:            var(--c-oro);
  --rose-gold:       var(--c-oro);            /* nombre heredado: aquí es oro */
  --silver:          var(--c-arena);
  --line-soft:       color-mix(in srgb, var(--c-oro) 40%, transparent);

  /* ---------- Cabecera clara ---------- */
  --header-bg:        color-mix(in srgb, var(--c-crema-claro) 90%, transparent);
  --header-text:      var(--c-texto);
  --header-text-soft: var(--c-texto-suave);
  --header-border:    color-mix(in srgb, var(--c-oro) 45%, transparent);
  --header-line:      linear-gradient(90deg, transparent, var(--c-oro) 18%, var(--c-oro) 82%, transparent);
  --header-veil:      var(--c-crema-claro);
  --logo-size:        1.75rem;               /* logotipo en texto */

  /* ---------- Sobre fondo oscuro (pie) ---------- */
  --logo-on-dark-filter: none;
  --line-on-dark:    color-mix(in srgb, var(--c-oro) 45%, transparent);
  --focus-on-dark:   var(--c-oro);
  --social-metal-a:  var(--c-crema-claro);
  --social-metal-b:  var(--c-oro);
  --social-metal-c:  var(--c-arena);
  --social-size:     44px;

  /* ---------- Botones ---------- */
  --btn-primary-bg:  var(--c-oscuro);
  --btn-primary-bg-hover: color-mix(in srgb, var(--c-oscuro) 85%, var(--c-oro));
  --btn-primary-text: var(--c-crema-claro);

  /* ---------- «Para ella» / «Para él» ---------- */
  --ella-bg:         var(--c-ella);
  --ella-line:       var(--c-ella-linea);
  --ella-text:       var(--c-ella-texto);
  --el-bg:           var(--c-el);
  --el-bg-soft:      var(--c-el-suave);
  --el-text:         var(--c-el-texto);
  --el-text-on:      var(--c-crema-claro);
  --dos-bg:          var(--c-arena);

  /* ---------- Estados ---------- */
  --ok:              #3F6B4E;
  --error:           #8E3B33;
  --whatsapp:        var(--c-oscuro);

  /* ---------- Tipografía (serif fina) ---------- */
  --font-display:    var(--f-titulos);
  --font-body:       var(--f-texto);
  --fw-display:      300;
  --fw-body:         300;
  --fw-body-strong:  400;
  --fs-hero:         clamp(2.75rem, 5.6vw, 4.75rem);
  --fs-h2:           clamp(2.125rem, 3.8vw, 3.25rem);
  --fs-h3:           clamp(1.5rem, 2.2vw, 1.875rem);
  --fs-quote:        clamp(1.5rem, 2.8vw, 2.25rem);
  --fs-price:        clamp(1.75rem, 2.4vw, 2.25rem);
  --fs-body:         1.0625rem;
  --fs-small:        .875rem;
  --fs-label:        .75rem;
  --ls-label:        .28em;
  --lh-body:         1.7;
  --lh-display:      1.12;

  /* ---------- Espaciado (rejilla de 8px) ---------- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ---------- Layout ---------- */
  --container:       1200px;
  --gutter:          40px;
  --header-h:        88px;
  --label-line:      48px;
  --frame-offset:    16px;      /* marco dorado desplazado de las imágenes */
  --radius:          0;
  --hairline:        1px;

  /* ---------- Movimiento (solo transiciones finas) ---------- */
  --ease:            cubic-bezier(.22, .61, .36, 1);
  --t-fast:          .25s;
  --t-med:           .5s;
  --quote-interval:  7000;
  --typing-speed:    38;
  --scroll-duration: 9s;

  /* ---------- Carrusel (heredado, oculto) ---------- */
  --carousel-peek-scale:   .88;
  --carousel-peek-opacity: .5;
  --carousel-gap:          3vw;

  /* ---------- Passe-partout: marcos uniformes ---------- */
  --mat-ratio-carousel:    16 / 9;
  --mat-ratio-benefit:     4 / 5;
  --mat-ratio-project:     4 / 5;
  --mat-ratio-paquete:     4 / 5;
  --mat-ratio-testimonial: 1 / 1;
  --mat-gap:               5cqi;
  --mat-line:              color-mix(in srgb, var(--c-oro) 55%, transparent);
  --mat-shadow:            0 2px 10px rgba(58, 49, 40, .08);
  --testimonial-photo:     144px;
  --play-size:             56px;
  --modal-veil:            rgba(47, 42, 35, .88);
  --modal-media-bg:        #000;

  /* ---------- Planes de precios (heredado, oculto) ---------- */
  --price-featured-bg:     var(--c-crema-claro);
  --price-featured-inner:  var(--c-oro);
  --price-featured-shadow: 0 12px 32px rgba(58, 49, 40, .08);

  /* ---------- Decoración Bali (líneas finas, sin animación) ---------- */
  --deco-opacity:          .55;
  --deco-size:             240px;

  /* ---------- Fondos (solo degradados suaves, sin imágenes) ---------- */
  --satin-bg:
    radial-gradient(120% 80% at 0% 0%, var(--c-crema-claro) 0%, transparent 60%),
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--c-arena) 70%, transparent) 0%, transparent 65%),
    linear-gradient(170deg, var(--c-crema-claro) 0%, var(--c-crema) 55%, var(--c-crema) 100%);
  --satin-dark-bg:
    linear-gradient(160deg, var(--cacao-satin-light) 0%, var(--cacao-satin) 55%, var(--cacao-satin-deep) 100%);
  --placeholder-bg:
    linear-gradient(140deg, var(--c-crema-claro) 0%, var(--c-crema) 45%, var(--c-arena) 100%);
}

@media (max-width: 767px) {
  :root {
    --gutter:     24px;
    --header-h:   72px;
    --space-3xl:  64px;
    --frame-offset: 12px;
    --fs-body:    1rem;
    --deco-size:  160px;
  }
}