:root,
:root[data-tema="oscuro"] {
  --fondo:      #050706;   
  --sup:        #0c1210;
  --sup2:       #141c18;
  --acento:     #1ec9a0;   
  --acento2:    #e0a458;   
  --texto:      #f3e6df;   
  --suave:      #9db8ab;   
  --lila:       #6ad1a8;   
  --tinta:      #06130e;   

  --borde:       rgba(30,201,160,.30);
  --borde-fino:  rgba(30,201,160,.16);
  --borde-medio: rgba(30,201,160,.26);
  --borde-fuerte:rgba(30,201,160,.45);
  --velo:        rgba(5,10,8,.88);
  --velo-modal:  rgba(3,6,5,.94);
  --sombra:      0 20px 60px rgba(0,0,0,.55);

  --fuente-titulo: 'Playfair Display', 'Georgia', serif;
  --fuente-texto:  'Raleway', sans-serif;
  --titulo-espaciado: .04em;
  --radio: 14px;

  --noche: var(--fondo);
  --carbon: var(--sup);
  --carbon2: var(--sup2);
  --oro: var(--acento);
  --oro2: var(--acento2);
  --crema: var(--texto);
  --piedra: var(--suave);
  --rosa: #1ec9a0;
  --rojo: #e0445c;
  --verde: #4fbf7a;
}

:root[data-tema="kawaii"] {
  --fondo:      #f2ebe2;   
  --sup:        #ffffff;
  --sup2:       #e5ddd0;
  --acento:     #0f9b6e;   
  --acento2:    #b8863b;   
  --texto:      #16241c;   
  --suave:      #4a6b5c;
  --lila:       #4aa588;
  --tinta:      #ffffff;

  --borde:       rgba(15,155,110,.32);
  --borde-fino:  rgba(15,155,110,.20);
  --borde-medio: rgba(15,155,110,.28);
  --borde-fuerte:rgba(15,155,110,.50);
  --velo:        rgba(242,235,226,.92);
  --velo-modal:  rgba(242,235,226,.95);
  --sombra:      0 10px 30px rgba(15,60,45,.18);

  --fuente-titulo: 'Playfair Display', 'Georgia', serif;
  --fuente-texto:  'Raleway', 'Segoe UI', sans-serif;
  --titulo-espaciado: .01em;
  --radio: 16px;

  --noche: var(--fondo);
  --carbon: var(--sup);
  --carbon2: var(--sup2);
  --oro: var(--acento);
  --oro2: var(--acento2);
  --crema: var(--texto);
  --piedra: var(--suave);
  --rosa: var(--acento);
  --rojo: #d3524a;
  --verde: #12b886;
}

:root { background-color: var(--fondo); }
:root body { background-color: transparent; }

:root body::before {
  content: ""; position: fixed; inset: -25%; z-index: -2; pointer-events: none;
  background: none;   
}
:root body::after {
  
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .45;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(59deg, transparent 0 34px, rgba(30,201,160,.12) 34px 37px, transparent 37px 74px);
  animation: aguaOndas 18s linear infinite;
}
:root[data-tema="kawaii"] body::before {
  background:
    radial-gradient(40% 32% at 22% 26%, rgba(15,155,110,.08), transparent 62%),
    radial-gradient(36% 28% at 74% 22%, rgba(15,155,110,.07), transparent 60%),
    radial-gradient(44% 34% at 62% 76%, rgba(15,155,110,.06), transparent 62%);
}
:root[data-tema="kawaii"] body::after { opacity: .18; mix-blend-mode: multiply;
  background: repeating-linear-gradient(59deg, transparent 0 34px, rgba(15,155,110,.05) 34px 37px, transparent 37px 74px);
}
@keyframes aguaDeriva {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-2%, 1.4%) scale(1.05); }
  100% { transform: translate(1.4%, -1%) scale(1.02); }
}
@keyframes aguaOndas {
  0%   { background-position: 0 0; }
  100% { background-position: 240px 66px; }
}
@media (prefers-reduced-motion: reduce) {
  :root body::before, :root body::after { animation: none; }
}

:root[data-tema="kawaii"] { font-weight: 500; }
:root[data-tema="kawaii"] body {
  text-shadow: 0 0 2px rgba(255,255,255,.8), 0 1px 1px rgba(255,255,255,.85);
}
:root[data-tema="kawaii"] h1,
:root[data-tema="kawaii"] h2,
:root[data-tema="kawaii"] h3,
:root[data-tema="kawaii"] .logo,
:root[data-tema="kawaii"] .codigo {
  text-shadow:
    1px 1px 0 rgba(255,255,255,.9), -1px 1px 0 rgba(255,255,255,.9),
    1px -1px 0 rgba(255,255,255,.9), -1px -1px 0 rgba(255,255,255,.9),
    0 0 3px rgba(255,255,255,.6);
}
:root[data-tema="kawaii"] .btnOro,
:root[data-tema="kawaii"] .btnOro *,
:root[data-tema="kawaii"] .cta,
:root[data-tema="kawaii"] .pest.activa,
:root[data-tema="kawaii"] .chapa.si,
:root[data-tema="kawaii"] .marca,
:root[data-tema="kawaii"] button[style*="gradient"] { text-shadow: none; }
:root[data-tema="kawaii"] h1,
:root[data-tema="kawaii"] h2,
:root[data-tema="kawaii"] h3 { font-weight: 700; }
.titulo::after { content: ""; }

#btnTema {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 1.05rem; line-height: 1; padding: 4px 6px; border-radius: 999px;
  color: var(--acento); transition: transform .15s, color .15s;
}
#btnTema:hover { transform: scale(1.15) rotate(-8deg); color: var(--acento2); }

@property --ledAng { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.ledReserva { position: relative; z-index: 0; isolation: isolate; }
.ledReserva::before {
  content: ""; position: absolute; inset: -3px; z-index: -1;
  border-radius: inherit; padding: 3px;
  background: conic-gradient(from var(--ledAng),
    transparent 0deg, transparent 200deg,
    var(--acento2) 255deg, #fff 288deg, var(--acento) 320deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 4px var(--acento)) drop-shadow(0 0 9px var(--acento2));
  animation: ledReservaGira 2.3s linear infinite;
  pointer-events: none;
}
@keyframes ledReservaGira { to { --ledAng: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ledReserva::before { animation: none; opacity: .6; } }
@supports not (background: conic-gradient(from var(--ledAng), red 0deg, red 360deg)) {
  .ledReserva::before { display: none; }
  .ledReserva { animation: ledReservaLate 1.6s ease-in-out infinite; }
  @keyframes ledReservaLate {
    0%, 100% { box-shadow: 0 0 6px var(--acento), 0 0 0 0 rgba(255,255,255,0); }
    50%      { box-shadow: 0 0 18px var(--acento2), 0 0 0 2px rgba(255,255,255,.5); }
  }
}

.perfilTri { max-width: 1100px; margin: 0 auto 22px; padding: 0 20px; }
.perfilTri svg { display: block; width: 100%; height: 46px; }
.perfilTri .linea { fill: none; stroke: var(--acento); stroke-width: 1.4; opacity: .30;
  stroke-linejoin: round; stroke-linecap: round; }
.guinoTri { display: block; text-align: center; font-size: .7rem; letter-spacing: .34em;
  color: var(--suave); opacity: .32; margin-top: 3px; }

.metaTri { height: 14px; width: 100%; opacity: .16; margin: 0 0 16px;
  background-image:
    linear-gradient(45deg, var(--acento) 25%, transparent 25% 75%, var(--acento) 75%),
    linear-gradient(45deg, var(--acento) 25%, transparent 25% 75%, var(--acento) 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; }