/* =====================================================================
   TEMA «Laurisilva + Agua» (Tenerife) — variables (y, al final, las letras de nácar «L·M·C»).
   Aquí se cambian los colores de toda la parte pública: la web de regalos (/)
   y la reserva y el pago (/reservar/). La cargan también los paneles: las muestras de
   color de «Categorías» y el cielo de su cabecera.

   El fondo se ve en toda la página: tarjetas y bloques son transparentes, con marco de
   nácar, y el texto va sobre un cristal ligero (--lmc-cristal) solo donde hay texto.
   Contraste AA comprobado en tests/tenerife.test.mjs con los píxeles reales: el cristal
   sobre la zona más oscura de cada imagen de fondo y, en Chrome, el texto de cabecera y pie.
   ===================================================================== */
:root {
  /* ---------- Los tres colores de las secciones (solo acentos: líneas y bordes) ---------- */
  --lmc-ella:        linear-gradient(135deg, #FBF6EE 0%, #F3E3E6 30%, #E6DFF0 62%, #DDE8EE 100%);   /* nácar de la concha */
  --lmc-ella-acento: #7A3D5C;     /* rosa-malva profundo */
  --lmc-el:          #00909E;     /* turquesa de agua: solo líneas y bordes de botón */
  --lmc-el-texto:    #005866;     /* cuando el acento de Él es texto o relleno */
  --lmc-parejas:     #2E5B3B;     /* verde laurisilva */

  /* ---------- Cristal ligero: solo debajo del texto ---------- */
  --lmc-cristal:       rgba(251, 248, 242, 0.68);
  --lmc-cristal-solido: rgba(251, 248, 242, 0.92);  /* formularios y lectura larga */
  --lmc-cristal-blur:  6px;
  --lmc-cristal-radio: 8px;

  /* ---------- Fondo fijo de toda la página ---------- */
  --lmc-fondo-grande: url("/img/fondo/fondo-1672.webp");
  --lmc-fondo-medio:  url("/img/fondo/fondo-1280.webp");
  --lmc-fondo-movil:  url("/img/fondo/fondo-movil.webp");
  --lmc-fondo-color:  #6FCFD2;    /* mientras carga la imagen */

  /* ---------- Cielo de la cabecera y orilla del pie: foto + capa ligera; el AA lo completa la sombra del texto ---------- */
  --lmc-cielo-imagen:   url("/img/fondo/cielo-1672.webp");
  --lmc-cielo-capa:     rgba(0, 62, 120, 0.46);
  --lmc-cielo-encuadre: left 34%;
  --lmc-cielo:          linear-gradient(var(--lmc-cielo-capa), var(--lmc-cielo-capa)), var(--lmc-cielo-imagen) var(--lmc-cielo-encuadre) / cover no-repeat;
  --lmc-cielo-sombra:   0 0 1px rgba(0, 44, 92, 1), 0 0 2px rgba(0, 44, 92, 1), 0 0 3px rgba(0, 44, 92, 0.9), 0 0 6px rgba(0, 44, 92, 0.8), 0 0 14px rgba(0, 44, 92, 0.5);
  --lmc-orilla-imagen:  url("/img/fondo/orilla-1672.webp");
  --lmc-orilla-capa-mar:   rgba(0, 62, 72, 0.48);
  --lmc-orilla-capa-arena: rgba(0, 62, 72, 0.66);
  --lmc-orilla-encuadre: right center;
  --lmc-orilla:         linear-gradient(var(--lmc-orilla-capa-mar) 25%, var(--lmc-orilla-capa-arena) 70%), var(--lmc-orilla-imagen) var(--lmc-orilla-encuadre) / cover no-repeat;
  --lmc-orilla-corta:   linear-gradient(var(--lmc-orilla-capa-arena), var(--lmc-orilla-capa-arena)), var(--lmc-orilla-imagen) var(--lmc-orilla-encuadre) / cover no-repeat;   /* pie corto: todo es texto */
  --lmc-orilla-respaldo: #1F5F66;   /* color del pie mientras su foto no se ha pedido (carga diferida) */
  --lmc-orilla-sombra:  0 0 1px rgba(0, 48, 56, 1), 0 0 2px rgba(0, 48, 56, 1), 0 0 3px rgba(0, 48, 56, 0.9), 0 0 6px rgba(0, 48, 56, 0.8), 0 0 14px rgba(0, 48, 56, 0.5);

  --lmc-concha-filtro:  drop-shadow(0 0 1px rgba(0, 40, 80, 0.95)) drop-shadow(0 0 3px rgba(0, 40, 80, 0.9)) drop-shadow(0 0 7px rgba(0, 40, 80, 0.65));   /* 3:1 con el borde de la concha */

  /* ---------- Texto y superficies ---------- */
  --lmc-texto:       #0F3540;     /* azul petróleo muy oscuro */
  --lmc-texto-suave: #1F4650;
  --lmc-marfil:      #FBF8F2;     /* campos de formulario y botones */
  --lmc-linea:       #CFDCDA;
  --lmc-gris-agua:   #E4ECEA;
  --lmc-nacar-rosa:  #F3E3E6;
  --lmc-nacar-azul:  #DDE8EE;
  --lmc-linea-agua:  rgba(255, 255, 255, 0.6);       /* líneas sobre el agua de cabecera y pie */
  --lmc-linea-agua-suave: rgba(255, 255, 255, 0.3);

  /* ---------- Turquesa para botones y menús ---------- */
  --lmc-turquesa:       #00707F;
  --lmc-turquesa-hondo: #005866;
  --lmc-sobre-turquesa: #FFFFFF;
  --lmc-sobre-turquesa-suave: #F2FAFA;

  /* ---------- Marco de nácar (tarjetas e imágenes) ---------- */
  --lmc-marco: linear-gradient(135deg, #FFFDF8 0%, #F3D9E2 22%, #DDD6F4 46%, #CFE7F2 70%, #FFFFFF 86%, #F0DCE4 100%);
  --lmc-marco-ancho: 3px;
  --lmc-sombra: 0 8px 24px rgba(0, 40, 48, 0.18);

  /* ---------- Paneles (/admin/ y /admin/web/): la misma identidad que la web ---------- */
  /* barra lateral de sidef: las irisaciones de las letras «L·M·C», suaves y en diagonal (texto encima: --lmc-texto, ≥ 7:1) */
  --lmc-sidef-panel: linear-gradient(160deg, #fffefb 0%, #f9ebf2 16%, #fffefb 30%, #e9f5f8 46%, #f3ecf3 62%, #f6ece4 80%, #fffefb 100%);
  --lmc-panel-grupo: var(--lmc-ella-acento);                                    /* títulos de grupo del menú (≥ 6:1) */
  --lmc-campo-borde: color-mix(in srgb, var(--lmc-texto) 55%, var(--lmc-marfil));  /* borde de campos y botones claros (≥ 3:1) */
  /* Sidef de satén blanco (13 nov. 2026, paneles + acceso): SOLO #f4d9e8 · #d9eef4 · #d1b4cb · #e1c7b4 · #fffefb.
     Base blanca de satén con irisaciones suaves en diagonal y un brillo de tela; marco de sidef con los mismos cinco tonos.
     Texto encima: --lmc-texto (≥ 7:1 sobre cualquier punto del degradado). */
  --lmc-saten-base: linear-gradient(155deg,
      #fffefb 0%, color-mix(in srgb, #f4d9e8 55%, #fffefb) 14%, #fffefb 28%,
      color-mix(in srgb, #d9eef4 60%, #fffefb) 44%, #fffefb 56%,
      color-mix(in srgb, #d1b4cb 30%, #fffefb) 70%, color-mix(in srgb, #e1c7b4 40%, #fffefb) 84%, #fffefb 100%);
  --lmc-saten-brillo: linear-gradient(112deg, transparent 30%, color-mix(in srgb, #fffefb 85%, transparent) 46%, transparent 62%);
  --lmc-saten: var(--lmc-saten-brillo), var(--lmc-saten-base);
  --lmc-saten-hoja: linear-gradient(color-mix(in srgb, #fffefb 90%, transparent), color-mix(in srgb, #fffefb 90%, transparent)), var(--lmc-saten-base);
  --lmc-saten-marco: linear-gradient(135deg, #fffefb 0%, #f4d9e8 20%, #d1b4cb 40%, #d9eef4 60%, #e1c7b4 80%, #fffefb 100%);
  --lmc-saten-hover: color-mix(in srgb, #d9eef4 45%, #fffefb);

  /* ---------- Firma «L·M·C» junto a la concha ---------- */
  --lmc-firma-fuente: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --lmc-firma-espacio: 0.32em;

  /* ---------- Letras de nácar de «L·M·C» (1 nov. 2026; nuevo efecto 12 nov. 2026) ----------
     Interior: sidef blanco con irisaciones en bandas diagonales finas; contorno fino en relieve champán-rosé
     con un filo luminoso por dentro; luz desde arriba a la izquierda y una sombra muy fina debajo.
     Los puntos son perlas. Todo CSS sobre el texto real (la fuente de siempre): nítido a cualquier tamaño. */
  --lmc-perla-blanco:    #fffefb;   /* zonas de blanco brillante */
  --lmc-perla-rosa:      #f4d9e8;
  --lmc-perla-bleu:      #d9eef4;
  --lmc-perla-bleu-2:    #b0cfdd;
  --lmc-perla-lila:      #d1b4cb;
  --lmc-perla-lila-2:    #abb1cc;
  --lmc-perla-champan:   #e1c7b4;
  --lmc-perla-borde-claro:  #e8c8c5;   /* contorno: champán-rosé arriba a la izquierda… */
  --lmc-perla-borde-oscuro: #b8a9c6;   /* …y lila abajo a la derecha (relieve) */
  /* bandas diagonales finas (un ciclo ≈ 0.6 em: unas tres por letra), con transiciones suaves de nácar */
  --lmc-perla-bandas: repeating-linear-gradient(118deg,
      var(--lmc-perla-blanco) 0em, var(--lmc-perla-rosa) 0.07em, var(--lmc-perla-blanco) 0.13em,
      var(--lmc-perla-bleu) 0.19em, var(--lmc-perla-bleu-2) 0.23em, var(--lmc-perla-bleu) 0.27em,
      var(--lmc-perla-blanco) 0.32em, var(--lmc-perla-lila) 0.38em, var(--lmc-perla-lila-2) 0.41em,
      var(--lmc-perla-lila) 0.44em, var(--lmc-perla-champan) 0.5em, var(--lmc-perla-blanco) 0.6em);
  /* volumen: brillo arriba a la izquierda, velo lila muy suave abajo a la derecha */
  --lmc-perla-luz: radial-gradient(ellipse 70% 60% at 18% 12%, rgba(255, 254, 251, 0.95) 0%, rgba(255, 254, 251, 0.5) 38%, rgba(255, 254, 251, 0) 70%);
  --lmc-perla-volumen: linear-gradient(135deg, rgba(255, 254, 251, 0) 50%, rgba(171, 177, 204, 0.24) 100%);
  --lmc-perla-relleno: var(--lmc-perla-luz), var(--lmc-perla-volumen), var(--lmc-perla-bandas);
  --lmc-perla-borde: linear-gradient(150deg, var(--lmc-perla-borde-claro) 0%, #dcc0c8 40%, var(--lmc-perla-borde-oscuro) 80%);
  --lmc-perla-borde-ancho: 0.034em;     /* lo que el contorno sobresale de la letra */
  --lmc-perla-filo: rgba(255, 254, 251, 0.92);   /* filo luminoso por dentro del contorno */
  --lmc-perla-filo-ancho: 0.03em;     /* la mitad cae dentro de la letra */
  --lmc-perla-sombra-fina: 0 0.035em 0.03em rgba(70, 52, 96, 0.42);
  /* halo oscuro para el contraste sobre las fotos de cabecera / pie (fuera de ellas, solo la sombra fina) */
  --lmc-perla-halo: 0 0 0 transparent;
  /* perlas de los puntos: esfera blanca, luz arriba a la izquierda y un reflejo rosa-bleu */
  --lmc-perla-punto-tam: 0.2em;
  --lmc-perla-punto: radial-gradient(circle at 31% 27%, #fff 0%, var(--lmc-perla-blanco) 13%, rgba(255, 254, 251, 0) 30%),
                     radial-gradient(circle at 70% 74%, var(--lmc-perla-rosa) 0%, rgba(244, 217, 232, 0.9) 14%, rgba(176, 207, 221, 0.8) 30%, rgba(217, 238, 244, 0) 50%),
                     radial-gradient(circle at 38% 34%, var(--lmc-perla-blanco) 0%, #f6eff3 40%, #e6dbe7 72%, var(--lmc-perla-borde-oscuro) 100%);
  --lmc-perla-punto-sombra: inset -0.012em -0.018em 0.03em rgba(171, 177, 204, 0.55), 0 0.03em 0.03em rgba(70, 52, 96, 0.42);

  /* ---------- Aparición al hacer scroll (discreta) ---------- */
  --lmc-revelar-distancia: 16px;
  --lmc-revelar-tiempo: 0.7s;
}

/* AVIF (más ligero) donde el navegador lo admite; si no, quedan los WebP de arriba */
@supports (background-image: image-set(url("/img/fondo/cielo-1672.avif") type("image/avif"))) {
  :root {
    --lmc-fondo-grande: image-set(url("/img/fondo/fondo-1672.avif") type("image/avif"), url("/img/fondo/fondo-1672.webp") type("image/webp"));
    --lmc-fondo-medio:  image-set(url("/img/fondo/fondo-1280.avif") type("image/avif"), url("/img/fondo/fondo-1280.webp") type("image/webp"));
    --lmc-fondo-movil:  image-set(url("/img/fondo/fondo-movil.avif") type("image/avif"), url("/img/fondo/fondo-movil.webp") type("image/webp"));
    --lmc-cielo-imagen: image-set(url("/img/fondo/cielo-1672.avif") type("image/avif"), url("/img/fondo/cielo-1672.webp") type("image/webp"));
    --lmc-orilla-imagen: image-set(url("/img/fondo/orilla-1672.avif") type("image/avif"), url("/img/fondo/orilla-1672.webp") type("image/webp"));
  }
}

@media (max-width: 767px) {
  :root {
    --lmc-cielo-imagen:    url("/img/fondo/cielo-movil.webp");
    --lmc-cielo-capa:      rgba(0, 62, 120, 0.58);
    --lmc-orilla-capa-mar: rgba(0, 62, 72, 0.54);
    --lmc-cielo-encuadre:  left center;
    --lmc-orilla-imagen:   url("/img/fondo/orilla-movil.webp");
    --lmc-orilla-encuadre: center;
  }
  @supports (background-image: image-set(url("/img/fondo/cielo-movil.avif") type("image/avif"))) {
    :root {
      --lmc-cielo-imagen:  image-set(url("/img/fondo/cielo-movil.avif") type("image/avif"), url("/img/fondo/cielo-movil.webp") type("image/webp"));
      --lmc-orilla-imagen: image-set(url("/img/fondo/orilla-movil.avif") type("image/avif"), url("/img/fondo/orilla-movil.webp") type("image/webp"));
    }
  }
}

/* ---------- Paleta de las secciones y categorías (panel → Categorías) ----------
   El color es solo un acento: las tarjetas son transparentes y el texto, siempre --lmc-texto.
   Cada tono: --tono-fondo (muestra del panel), --tono-acento (líneas y bordes de botón)
   y --tono-enfasis (itálicas, etiquetas y rellenos: con contraste de texto).
   Si se añade uno aquí, añadirlo también en reservar/js/shared/tonos.js y en la migración (_tono_valido). */
.tono-sidef      { --tono-fondo: var(--lmc-ella); --tono-acento: var(--lmc-ella-acento); --tono-enfasis: var(--lmc-ella-acento); }
.tono-agua       { --tono-fondo: linear-gradient(var(--lmc-el), var(--lmc-el)); --tono-acento: var(--lmc-el); --tono-enfasis: var(--lmc-el-texto); }
.tono-laurisilva { --tono-fondo: linear-gradient(var(--lmc-parejas), var(--lmc-parejas)); --tono-acento: var(--lmc-parejas); --tono-enfasis: var(--lmc-parejas); }
.tono-turquesa   { --tono-fondo: linear-gradient(var(--lmc-turquesa), var(--lmc-turquesa)); --tono-acento: var(--lmc-turquesa); --tono-enfasis: var(--lmc-turquesa-hondo); }
.tono-lila       { --tono-fondo: linear-gradient(#5B4A7A, #5B4A7A); --tono-acento: #5B4A7A; --tono-enfasis: #5B4A7A; }
.tono-arena      { --tono-fondo: linear-gradient(#F1E9DA, #F1E9DA); --tono-acento: #6B5532; --tono-enfasis: #6B5532; }

/* ---------- «L·M·C» de nácar junto a la concha (cabecera y pie de /, /reservar/, /admin/, /admin/web/) ----------
   Único bloque con reglas en este archivo: lo cargan todas las partes del sitio. Solo usa las variables de arriba.
   Marcado (lo genera el JS): <span class="lmc-perla"> con una .lmc-perla__l por letra (data-text = la letra) y una
   .lmc-perla__p (perla) por cada «·». Texto real en la fuente de la firma, en tres capas por letra:
     · la propia letra: transparente, con la sombra fina (y el halo de contraste sobre las fotos)
     · ::before = contorno en relieve (trazo transparente recortado por el degradado; se ve lo que sobresale)
     · ::after  = relleno de nácar + filo luminoso (trazo claro: su mitad interior queda dentro de la letra)
   Las capas no se leen en voz alta (content: … / ""); con «colores forzados» queda el texto normal. */
.lmc-perla { display: inline-flex; align-items: baseline; white-space: nowrap; }
.lmc-perla__l {
  position: relative; display: inline-block; letter-spacing: 0;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: var(--lmc-perla-sombra-fina), var(--lmc-perla-halo);
}
.lmc-perla__l::before, .lmc-perla__l::after {
  content: attr(data-text) / ""; position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  text-shadow: none; -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
}
.lmc-perla__l::before { background-image: var(--lmc-perla-borde); -webkit-text-stroke: calc(2 * var(--lmc-perla-borde-ancho)) transparent; }
.lmc-perla__l::after { background-image: var(--lmc-perla-relleno); -webkit-text-stroke: var(--lmc-perla-filo-ancho) var(--lmc-perla-filo); }
.lmc-perla__p {
  display: inline-block; flex: none; width: var(--lmc-perla-punto-tam); height: var(--lmc-perla-punto-tam);
  margin: 0 calc(var(--lmc-firma-espacio) * 0.62); align-self: center; position: relative; top: 0.06em;
  overflow: hidden; border-radius: 50%; font-size: inherit; line-height: 1; text-indent: 2em;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  background: var(--lmc-perla-punto); box-shadow: var(--lmc-perla-punto-sombra), var(--lmc-perla-halo);
}
/* sobre el cielo de la cabecera y la orilla del pie: el halo oscuro de su texto */
.site-header .lmc-perla, .top .lmc-perla, .panel__top .lmc-perla, .sidebar__brand .lmc-perla { --lmc-perla-halo: 0 0 1px rgba(0, 44, 92, 1), 0 0 2px rgba(0, 44, 92, 1), var(--lmc-cielo-sombra); }
/* Foto del pie diferida: solo se pide al acercarse (js: clase .fondo-listo); antes, la capa sobre un color liso */
.site-footer:not(.fondo-listo), .pie:not(.fondo-listo) { background: linear-gradient(var(--lmc-orilla-capa-arena), var(--lmc-orilla-capa-arena)), var(--lmc-orilla-respaldo); }
.site-footer .lmc-perla, .pie .lmc-perla, .pie-legal .lmc-perla { --lmc-perla-halo: var(--lmc-orilla-sombra); }
@media (forced-colors: active) {
  .lmc-perla__l, .lmc-perla__p { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; box-shadow: none; text-indent: 0; width: auto; height: auto; overflow: visible; }
  .lmc-perla__l::before, .lmc-perla__l::after { content: none; }
}

/* ---------- Firma «by Cilioaica Studio» en el pie de todas las páginas (/, /reservar/ y páginas sueltas) ----------
   El logo es EXACTAMENTE images/logo_by_cilioaica.svg (web/img/logo-by-cilioaica.svg, con su brillo animado SMIL).
   Es gris metálico: para que se vea sobre la foto del pie va sobre una placa redonda de cristal con marco de nácar. */
.firma-estudio { margin: var(--space-md, 24px) 0 0; text-align: center; font-size: var(--fs-small, 0.9375rem); }
.firma-estudio a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--lmc-sobre-turquesa); letter-spacing: .04em; text-decoration: none;
}
.firma-estudio a:hover span:last-child, .firma-estudio a:focus-visible span:last-child { text-decoration: underline; }
.firma-estudio__placa {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--lmc-sidef-panel); box-shadow: var(--lmc-sombra);
}
.firma-estudio__placa::after {   /* marco de nácar */
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: var(--lmc-marco-ancho); background: var(--lmc-marco);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none;
}
.firma-estudio__placa img { width: 46px; height: auto; margin: 0; display: block; }