/* Paleta exclusiva de la home: amarillo mantequilla y Mulberry. */
html.home-palette{
  --palette-butter:#FAFBE0;
  --palette-mulberry:#5F0032;
  --color-brand-cream:var(--palette-butter);
  --color-brand-light:var(--palette-butter);
  --color-brand-primary:var(--palette-mulberry);
  --color-brand-dark:var(--palette-mulberry);
  --color-brand-accent:var(--palette-mulberry);
}
html.home-palette[data-theme=dark]{
  --color-brand-cream:var(--palette-mulberry);
  --color-brand-light:var(--palette-butter);
  --color-brand-primary:var(--palette-butter);
  --color-brand-dark:var(--palette-mulberry);
  --color-brand-accent:var(--palette-butter);
}
.home-palette ::selection{background:var(--color-brand-primary);color:var(--color-brand-cream)}
.home-palette #inicio>section:first-child>.grid:last-child>div:last-child{background:var(--palette-butter)}
.home-palette #sobre-mi .mb-3.text-\[0\.7rem\]{display:inline-block;background:var(--color-brand-primary);color:var(--color-brand-cream);padding:5px 9px;opacity:1}
.home-palette footer nav>a:hover{background:var(--palette-butter);color:var(--palette-mulberry)}
.home-palette .base-menu a:hover{background:var(--color-brand-primary);color:var(--color-brand-cream)}
.home-palette .base-dialog{border-color:var(--color-brand-primary)}
.home-palette a:focus-visible,.home-palette button:focus-visible{outline-color:currentColor}
.home-palette[data-theme=dark] header img[alt="bello-site-logo-primary"]{content:url('./assets/bello-site-logo-primary-tidal.svg')}

/* Grano fino en ambas tintas; no intercepta clics ni se aplica a los proyectos. */
.home-palette body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  background-size:220px 220px;
  opacity:.34;
  mix-blend-mode:multiply;
}

.home-palette[data-theme=dark] body::after{mix-blend-mode:screen;opacity:.22}

/* Mulberry único también en el fondo de las fichas. */
.home-palette .base-dialog::backdrop{background:#5F0032A8}

/* Fondo marfil con zonas Lavender Rose, solo en la home. */
html.home-palette{
  --palette-lavender:#EAA2E5;
  --palette-ivory:#FDFCF3;
  background:var(--palette-butter);
}
.home-palette body{
  background:
    radial-gradient(ellipse at var(--rose-x,100%) var(--rose-y,85%),#EAA2E5B3 0%,#EAA2E561 18%,#EAA2E500 52%),
    radial-gradient(ellipse at var(--rose-secondary-x,4%) var(--rose-secondary-y,100%),#EAA2E54D 0%,#EAA2E500 32%),
    var(--palette-butter);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.home-palette[data-theme=dark] body{
  background:var(--palette-mulberry);
}
.home-palette:not([data-theme=dark]) header,
.home-palette:not([data-theme=dark]) #inicio>section:first-child>.grid:last-child>div:last-child{
  background:transparent;
}
.home-palette:not([data-theme=dark]) header{
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}


/* En móvil el degradado vive en una capa del tamaño de la pantalla,
   para que no se estire sobre toda la altura de la página (Safari). */
@media(max-width:767px){
 .home-palette body{position:relative;isolation:isolate;background:var(--palette-butter);background-attachment:scroll}
 .home-palette body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 300px 250px at var(--rose-x,100%) var(--rose-y,85%),#EAA2E54D 0%,#EAA2E51F 35%,#EAA2E500 100%),radial-gradient(ellipse 230px 200px at var(--rose-secondary-x,4%) var(--rose-secondary-y,100%),#EAA2E526 0%,#EAA2E500 100%);background-repeat:no-repeat}
 .home-palette[data-theme=dark] body{background:var(--palette-mulberry)}
 .home-palette[data-theme=dark] body::before{display:none}
}