/* ==========================================================================
   ELENA HAIRLOVER — Temas extra de la web pública (2026-10-06)
   ---------------------------------------------------------------------------
   Traídos de Elegance by Stoica (allí desde el 2026-10-05): el propietario
   quiere los mismos 6 temas en las dos webs, 4 claros y 2 oscuros. Noche y
   Lino son los de siempre (css/base.css y compañía); aquí van los demás.

   Cómo funciona: un tema extra es UNA PALETA encima de Noche o de Lino. La
   web pone a la vez <html data-tema="lino" data-paleta="avellana">, así que
   el tema nuevo hereda todos los arreglos que ya tiene Lino para un fondo
   claro (logo oscuro, islas oscuras sobre las fotos, pie, cabecera…) y aquí
   solo se cambian las fichas de color y las letras. Quién va encima de quién
   lo dice PALETAS en js/temas.js, la única lista de temas.

   Los colores son los mismos que en Stoica. Ojo con un nombre: en Elena
   --color-dark-main es el fondo de la página y --color-dark-bg el fondo
   alterno (en Stoica van al revés); con los mismos valores, aquí la página
   es la más clara y las secciones alternas un punto más oscuras, como en Lino.

   Va DESPUÉS de las demás hojas. `html[data-tema][data-paleta]` pesa más que
   `html[data-tema]`, así que gana sin !important.
   ========================================================================== */

/* ── AVELLANA (claro) ─────────────────────────────────────────────────────
   Paleta del propietario: fondo #ECE3D3, secciones #F6F0E5, texto #2E2A24,
   acento #6B4F2E (botones con letra blanca), letras Lora (títulos) y Jost
   (texto), esquinas de 4 px.
   Contraste medido: texto 11,2:1 sobre el fondo; acento como letra 5,9:1;
   blanco sobre el acento 7,6:1. Su «texto suave» (el 62 % del texto sobre el
   fondo) se quedaba en 3,85:1: se usa uno más oscuro (#625D54), que pasa de
   4,5:1 en todos los fondos del tema, también en la tarjeta de una reseña. */
html[data-tema="lino"][data-paleta="avellana"] {
  --color-dark-main:   #F6F0E5;   /* fondo de página */
  --color-dark-main-rgb: 246 240 229;
  --color-dark-bg:     #ECE3D3;   /* fondo alterno */
  --color-dark-card:   #FBF8F2;   /* tarjetas */
  --color-dark:        #F0E9DC;
  --color-dark-deep:   #E9E0CE;   /* franja de reseñas: con #E4D9C6 su letra gris se quedaba en 4,34:1 */

  --color-text-light:  #3D3830;   /* texto principal (2026-10-05, más suave que el #2E2A24 de la paleta) */
  --color-text-muted:  #625D54;   /* 4,65:1 en lo más oscuro (la tarjeta de una reseña); 5,13:1 sobre el fondo */
  --color-text-suave:  #5A544B;
  --color-text-gold:   #6E5944;

  --color-gold-warm:   #6E5944;   /* botones, bordes, iconos (2026-10-05: el #6B4F2E de la paleta, menos saturado) */
  --color-gold-bright: #7C6650;
  --color-gold-dark:   #5F4C39;
  --color-gold-light:  #FBF8F2;
  --color-gold-warm-rgb: 110 89 68;

  --color-on-gold:     #FFFFFF;   /* letra sobre el acento */
  --color-gold-text:   #6E5944;   /* 4,71:1 en lo más oscuro (la tarjeta de una reseña) */
  --color-superficie-suave: rgba(46, 42, 36, 0.04);
  --color-linea-suave: rgba(107, 79, 46, 0.18);
  --color-linea-fuerte: rgba(46, 42, 36, 0.4);

  --gold-grad-primary: linear-gradient(135deg, #7C6650 0%, #6E5944 50%, #5F4C39 100%);
  --gold-grad-hover:   linear-gradient(135deg, #887260 0%, #7A6550 50%, #6A5642 100%);
  --gold-grad-text:    linear-gradient(135deg, #6E5944 0%, #6E5944 50%, #6E5944 100%);
  --gold-grad-border:  linear-gradient(135deg, #887260, #6E5944, #5F4C39);

  --color-border-light: rgba(107, 79, 46, 0.28);
  --color-border-dark:  rgba(107, 79, 46, 0.18);
  --color-border:       rgba(107, 79, 46, 0.22);

  --color-btn-ghost:        rgba(107, 79, 46, 0.10);
  --color-btn-ghost-hover:  rgba(107, 79, 46, 0.18);
  --color-btn-ghost-border: #6E5944;

  --font-heading: "Lora", Georgia, serif;
  --font-display: "Lora", Georgia, serif;
  --font-body:    "Jost", system-ui, sans-serif;
  --radio-esquinas: 4px;
}
/* Las clases de letra de Tailwind llevan el nombre escrito (Cormorant y
   Montserrat): se redirigen a las fichas */
html[data-paleta="avellana"] .font-display { font-family: var(--font-display); }
html[data-paleta="avellana"] .font-body { font-family: var(--font-body); }

/* Cabecera (fichas --cab-* de css/cabecera.css) */
html[data-tema="lino"][data-paleta="avellana"] .header,
html[data-tema="lino"][data-paleta="avellana"] .cabecera {
  --cab-fondo: rgba(236, 227, 211, 0.9);
  --cab-fondo-bajando: rgba(236, 227, 211, 0.97);
  --cab-borde: rgba(107, 79, 46, 0.18);
  --cab-sombra: 0 4px 24px rgba(46, 42, 36, 0.06);
  --cab-sombra-bajando: 0 8px 28px rgba(46, 42, 36, 0.1);
  --cab-texto: #3D3830;
  --cab-texto-suave: #5A544B;
  --cab-texto-enlace: #5A544B;
  --cab-acento: #6E5944;
  --cab-rgb: 236 227 211;
  --cab-linea-brillo: rgb(107 79 46 / 0.4);
}

/* Pie (fichas --pie-* de css/footer-modern.css) */
html[data-tema="lino"][data-paleta="avellana"] .footer-modern {
  --pie-linea:       rgba(46, 42, 36, 0.14);
  --pie-linea-fina:  rgba(46, 42, 36, 0.08);
  --pie-oro-borde:   rgba(107, 79, 46, 0.30);
  --pie-oro-boton:   rgba(107, 79, 46, 0.45);
  --pie-oro-fondo:   rgba(107, 79, 46, 0.10);
}

/* Los botones de reservar (fichas --res-* de css/web.css): el color «oro»,
   que es el de serie, pasa al acento con letra blanca. Bronce, terracota y
   oliva siguen siendo los de Lino. */
html[data-paleta="avellana"]:not([data-reservar="bronce"]):not([data-reservar="terracota"]):not([data-reservar="oliva"]) {
  --res-relleno: linear-gradient(135deg, #7C6650 0%, #6E5944 50%, #5F4C39 100%);
  --res-relleno-hover: linear-gradient(135deg, #887260 0%, #7A6550 50%, #6A5642 100%);
  --res-letra: #FFFFFF;
  --res-anillo: 110, 89, 68;
}

/* Esquinas de 4 px en las tarjetas de la carta y en sus botones (no en la
   píldora flotante «Reservar», que es redonda a propósito) */
html[data-paleta="avellana"] #public-services-list .service-item,
html[data-paleta="avellana"] #public-services-list .service-item:hover,
html[data-paleta="avellana"] #public-services-list .service-item__btn { border-radius: var(--radio-esquinas) !important; }


/* ── PERLA (claro, 2026-10-06) ─────────────────────────────────────────────
   Porcelana y oro rosa, letras Playfair Display (títulos) y Nunito Sans
   (texto). Lo eligió el propietario entre dos propuestas.
   Contraste medido en sus cinco fondos (del más claro, #FFFFFF, al de la
   franja de reseñas, #EFE8E3): texto 10,2:1; gris 5,4:1; acento como letra
   4,73:1 en lo más oscuro (la tarjeta de una reseña, #E8E1DC; con el #8A5A4D
   de la propuesta se quedaba en 4,44:1); blanco sobre el acento 6,1:1. */
html[data-tema="lino"][data-paleta="perla"] {
  --color-dark-main:   #FBF8F5;   /* fondo de página */
  --color-dark-main-rgb: 251 248 245;
  --color-dark-bg:     #F4EFEB;   /* fondo alterno */
  --color-dark-card:   #FFFFFF;   /* tarjetas */
  --color-dark:        #F7F3F0;
  --color-dark-deep:   #EFE8E3;   /* franja de reseñas */

  --color-text-light:  #3A3331;
  --color-text-muted:  #655B57;
  --color-text-suave:  #5E5451;
  --color-text-gold:   #855649;

  --color-gold-warm:   #855649;   /* oro rosa: botones, bordes, iconos */
  --color-gold-bright: #956556;
  --color-gold-dark:   #724739;
  --color-gold-light:  #FFFAF8;
  --color-gold-warm-rgb: 133 86 73;

  --color-on-gold:     #FFFFFF;
  --color-gold-text:   #855649;
  --color-superficie-suave: rgba(58, 51, 49, 0.04);
  --color-linea-suave: rgba(133, 86, 73, 0.18);
  --color-linea-fuerte: rgba(58, 51, 49, 0.4);

  --gold-grad-primary: linear-gradient(135deg, #956556 0%, #855649 50%, #724739 100%);
  --gold-grad-hover:   linear-gradient(135deg, #A27262 0%, #916055 50%, #7E4F42 100%);
  --gold-grad-text:    linear-gradient(135deg, #855649 0%, #855649 50%, #855649 100%);
  --gold-grad-border:  linear-gradient(135deg, #A27262, #855649, #724739);

  --color-border-light: rgba(133, 86, 73, 0.28);
  --color-border-dark:  rgba(133, 86, 73, 0.18);
  --color-border:       rgba(133, 86, 73, 0.22);

  --color-btn-ghost:        rgba(133, 86, 73, 0.10);
  --color-btn-ghost-hover:  rgba(133, 86, 73, 0.18);
  --color-btn-ghost-border: #855649;

  --font-heading: "Playfair Display", Georgia, serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Nunito Sans", system-ui, sans-serif;
}
html[data-paleta="perla"] .font-display { font-family: var(--font-display); }
html[data-paleta="perla"] .font-body { font-family: var(--font-body); }

html[data-tema="lino"][data-paleta="perla"] .header,
html[data-tema="lino"][data-paleta="perla"] .cabecera {
  --cab-fondo: rgba(244, 239, 235, 0.9);
  --cab-fondo-bajando: rgba(244, 239, 235, 0.97);
  --cab-borde: rgba(133, 86, 73, 0.18);
  --cab-sombra: 0 4px 24px rgba(58, 51, 49, 0.06);
  --cab-sombra-bajando: 0 8px 28px rgba(58, 51, 49, 0.1);
  --cab-texto: #3A3331;
  --cab-texto-suave: #5E5451;
  --cab-texto-enlace: #5E5451;
  --cab-acento: #855649;
  --cab-rgb: 244 239 235;
  --cab-linea-brillo: rgb(133 86 73 / 0.4);
}

html[data-tema="lino"][data-paleta="perla"] .footer-modern {
  --pie-linea:       rgba(58, 51, 49, 0.14);
  --pie-linea-fina:  rgba(58, 51, 49, 0.08);
  --pie-oro-borde:   rgba(133, 86, 73, 0.30);
  --pie-oro-boton:   rgba(133, 86, 73, 0.45);
  --pie-oro-fondo:   rgba(133, 86, 73, 0.10);
}

html[data-paleta="perla"]:not([data-reservar="bronce"]):not([data-reservar="terracota"]):not([data-reservar="oliva"]) {
  --res-relleno: linear-gradient(135deg, #956556 0%, #855649 50%, #724739 100%);
  --res-relleno-hover: linear-gradient(135deg, #A27262 0%, #916055 50%, #7E4F42 100%);
  --res-letra: #FFFFFF;
  --res-anillo: 133, 86, 73;
}


/* ── SALVIA (claro, 2026-10-06) ────────────────────────────────────────────
   Verde salvia, como un spa, letras DM Serif Display (títulos) y Karla
   (texto). DM Serif Display solo tiene un grosor: sin `font-synthesis` el
   navegador se inventaría una negrita borrosa en los títulos gruesos.
   Contraste medido en sus cinco fondos (#FBFCFA a #E2E8DE): texto 10:1;
   gris 5,2:1; acento como letra 4,95:1; blanco sobre el acento 6,2:1. */
html[data-tema="lino"][data-paleta="salvia"] {
  --color-dark-main:   #F4F7F1;   /* fondo de página */
  --color-dark-main-rgb: 244 247 241;
  --color-dark-bg:     #E7ECE4;   /* fondo alterno */
  --color-dark-card:   #FBFCFA;   /* tarjetas */
  --color-dark:        #EEF2EB;
  --color-dark-deep:   #E2E8DE;   /* franja de reseñas */

  --color-text-light:  #2E3631;
  --color-text-muted:  #56615A;
  --color-text-suave:  #4F5A53;
  --color-text-gold:   #4A6855;

  --color-gold-warm:   #4A6855;   /* salvia oscura: botones, bordes, iconos */
  --color-gold-bright: #587A64;
  --color-gold-dark:   #3E5948;
  --color-gold-light:  #FBFCFA;
  --color-gold-warm-rgb: 74 104 85;

  --color-on-gold:     #FFFFFF;
  --color-gold-text:   #4A6855;
  --color-superficie-suave: rgba(46, 54, 49, 0.04);
  --color-linea-suave: rgba(74, 104, 85, 0.18);
  --color-linea-fuerte: rgba(46, 54, 49, 0.4);

  --gold-grad-primary: linear-gradient(135deg, #587A64 0%, #4A6855 50%, #3E5948 100%);
  --gold-grad-hover:   linear-gradient(135deg, #658770 0%, #567561 50%, #486553 100%);
  --gold-grad-text:    linear-gradient(135deg, #4A6855 0%, #4A6855 50%, #4A6855 100%);
  --gold-grad-border:  linear-gradient(135deg, #658770, #4A6855, #3E5948);

  --color-border-light: rgba(74, 104, 85, 0.28);
  --color-border-dark:  rgba(74, 104, 85, 0.18);
  --color-border:       rgba(74, 104, 85, 0.22);

  --color-btn-ghost:        rgba(74, 104, 85, 0.10);
  --color-btn-ghost-hover:  rgba(74, 104, 85, 0.18);
  --color-btn-ghost-border: #4A6855;

  --font-heading: "DM Serif Display", Georgia, serif;
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body:    "Karla", system-ui, sans-serif;
}
html[data-paleta="salvia"] .font-display { font-family: var(--font-display); }
html[data-paleta="salvia"] .font-body { font-family: var(--font-body); }
html[data-paleta="salvia"] { font-synthesis-weight: none; }

html[data-tema="lino"][data-paleta="salvia"] .header,
html[data-tema="lino"][data-paleta="salvia"] .cabecera {
  --cab-fondo: rgba(231, 236, 228, 0.9);
  --cab-fondo-bajando: rgba(231, 236, 228, 0.97);
  --cab-borde: rgba(74, 104, 85, 0.18);
  --cab-sombra: 0 4px 24px rgba(46, 54, 49, 0.06);
  --cab-sombra-bajando: 0 8px 28px rgba(46, 54, 49, 0.1);
  --cab-texto: #2E3631;
  --cab-texto-suave: #4F5A53;
  --cab-texto-enlace: #4F5A53;
  --cab-acento: #4A6855;
  --cab-rgb: 231 236 228;
  --cab-linea-brillo: rgb(74 104 85 / 0.4);
}

html[data-tema="lino"][data-paleta="salvia"] .footer-modern {
  --pie-linea:       rgba(46, 54, 49, 0.14);
  --pie-linea-fina:  rgba(46, 54, 49, 0.08);
  --pie-oro-borde:   rgba(74, 104, 85, 0.30);
  --pie-oro-boton:   rgba(74, 104, 85, 0.45);
  --pie-oro-fondo:   rgba(74, 104, 85, 0.10);
}

html[data-paleta="salvia"]:not([data-reservar="bronce"]):not([data-reservar="terracota"]):not([data-reservar="oliva"]) {
  --res-relleno: linear-gradient(135deg, #587A64 0%, #4A6855 50%, #3E5948 100%);
  --res-relleno-hover: linear-gradient(135deg, #658770 0%, #567561 50%, #486553 100%);
  --res-letra: #FFFFFF;
  --res-anillo: 74, 104, 85;
}


/* ── ESMERALDA (oscuro, 2026-10-06) ────────────────────────────────────────
   El único tema extra OSCURO: va encima de Noche (data-tema="noche"), así
   que hereda todo lo de Noche y aquí solo cambian las fichas. Verde
   profundo y oro, letras Cormorant Garamond (las de Noche) y Josefin Sans.
   Como en Noche, el fondo de la página es lo más oscuro y el fondo alterno,
   un punto más claro.
   Contraste medido en sus cinco fondos (#0B1411 a #1C2D28): texto 12,4:1;
   gris 5,5:1; texto secundario 7,5:1; oro como letra 6,8:1; letra sobre el
   oro 8,35:1. */
html[data-tema="noche"][data-paleta="esmeralda"] {
  --color-dark-main:   #0F1A17;   /* fondo de página */
  --color-dark-main-rgb: 15 26 23;
  --color-dark-bg:     #15231F;   /* fondo alterno */
  --color-dark-card:   #1C2D28;   /* tarjetas */
  --color-dark:        #13201C;
  --color-dark-deep:   #0B1411;   /* secciones intercaladas */

  --color-text-light:  #E8EFEC;
  --color-text-muted:  #8FA49C;
  --color-text-suave:  rgba(232, 239, 236, 0.74);
  --color-text-gold:   #CDB07A;

  --color-gold-warm:   #CDAE6A;
  --color-gold-bright: #D9BE80;
  --color-gold-dark:   #A98C4E;
  --color-gold-light:  #F3EBD3;
  --color-gold-warm-rgb: 205 174 106;

  --color-on-gold:     #0F1A17;
  --color-gold-text:   #CDAE6A;
  --color-superficie-suave: rgba(255, 255, 255, 0.03);
  --color-linea-suave: rgba(232, 239, 236, 0.08);
  --color-linea-fuerte: rgba(232, 239, 236, 0.4);

  --gold-grad-primary: linear-gradient(135deg, #E9D3A0 0%, #CDAE6A 50%, #9E8243 100%);
  --gold-grad-hover:   linear-gradient(135deg, #F0DDB0 0%, #D9BE80 50%, #AE9150 100%);
  --gold-grad-text:    linear-gradient(135deg, #F0DDB0 0%, #CDAE6A 50%, #E0C68C 100%);
  --gold-grad-border:  linear-gradient(135deg, #E9D3A0, #CDAE6A, #9E8243);

  --color-border-light: rgba(205, 174, 106, 0.25);
  --color-border-dark:  rgba(205, 174, 106, 0.15);
  --color-border:       rgba(205, 174, 106, 0.2);

  --color-btn-ghost:        rgba(205, 174, 106, 0.15);
  --color-btn-ghost-hover:  rgba(205, 174, 106, 0.28);
  --color-btn-ghost-border: #CDAE6A;

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Josefin Sans", system-ui, sans-serif;

  /* El fondo de detrás de las fotos de la portada (index.html lo pone en
     #111111 para Noche) */
  --hero-fondo: var(--color-dark-main);
}
html[data-paleta="esmeralda"] .font-display { font-family: var(--font-display); }
html[data-paleta="esmeralda"] .font-body { font-family: var(--font-body); }

html[data-tema="noche"][data-paleta="esmeralda"] .header,
html[data-tema="noche"][data-paleta="esmeralda"] .cabecera {
  --cab-fondo: rgba(15, 26, 23, 0.88);
  --cab-fondo-bajando: rgba(15, 26, 23, 0.96);
  --cab-borde: rgba(205, 174, 106, 0.15);
  --cab-texto: #E8EFEC;
  --cab-texto-suave: rgba(232, 239, 236, 0.62);
  --cab-texto-enlace: rgba(232, 239, 236, 0.82);
  --cab-acento: #CDAE6A;
  --cab-rgb: 15 26 23;
  --cab-luz: rgb(205 174 106 / 0.24);
  --cab-linea-brillo: rgb(205 174 106 / 0.5);
}

html[data-tema="noche"][data-paleta="esmeralda"] .footer-modern {
  --pie-fondo:       #0B1411;
  --pie-texto:       #E8EFEC;
  --pie-suave:       rgba(232, 239, 236, 0.62);
  --pie-tenue:       rgba(232, 239, 236, 0.52);  /* con 0,45, como Noche, se quedaba en 4:1 sobre este verde: 0,52 da 5:1 */
  --pie-oro-borde:   rgba(205, 174, 106, 0.2);
  --pie-oro-boton:   rgba(205, 174, 106, 0.55);
  --pie-oro-fondo:   rgba(205, 174, 106, 0.12);
}

html[data-paleta="esmeralda"]:not([data-reservar="bronce"]):not([data-reservar="terracota"]):not([data-reservar="oliva"]) {
  --res-relleno: linear-gradient(135deg, #E3CB94 0%, #CDAE6A 50%, #A08445 100%);
  --res-relleno-hover: linear-gradient(135deg, #EED7A6 0%, #D9BD7E 50%, #AE9150 100%);
  --res-letra: #0F1A17;
  --res-anillo: 205, 174, 106;
}

/* Las páginas legales llevan su gris escrito a mano (rgba(255,255,255,.45),
   css/legal.css): sobre el verde de Esmeralda se quedaba en 4,48:1. Como en
   Lino, se pasa a la ficha del gris (#8FA49C, 6,7:1). */
html[data-paleta="esmeralda"] .doc__fecha,
html[data-paleta="esmeralda"] .doc__pie { color: var(--color-text-muted); }

/* El botón del mapa del pie (2026-10-07, al volver el mapa que se carga al
   pulsarlo): el borde y el fondo al pasar el ratón, con el acento de cada tema
   claro. En Esmeralda vale el oro de siempre. */
html[data-tema="lino"][data-paleta="avellana"] .mapa-diferido__boton { border-color: rgba(107, 79, 46, 0.35); }
html[data-tema="lino"][data-paleta="avellana"] .mapa-diferido__boton:hover { background: rgba(107, 79, 46, 0.08); }
html[data-tema="lino"][data-paleta="perla"] .mapa-diferido__boton { border-color: rgba(133, 86, 73, 0.35); }
html[data-tema="lino"][data-paleta="perla"] .mapa-diferido__boton:hover { background: rgba(133, 86, 73, 0.08); }
html[data-tema="lino"][data-paleta="salvia"] .mapa-diferido__boton { border-color: rgba(74, 104, 85, 0.35); }
html[data-tema="lino"][data-paleta="salvia"] .mapa-diferido__boton:hover { background: rgba(74, 104, 85, 0.08); }