/* Sunset Society · portada. Colores, tipografías y medidas: el resto solo usa var(--…).
   Tema claro por omisión: papel y arena cálidos, tinta azul noche y oro. Ninguna sección va sobre fondo oscuro en claro:
   el azul noche es texto y botones; --noche solo da el velo para leer sobre una foto. Mismos nombres que tokens.css del sitio. */
@font-face{font-family:'Gilda Display';src:url(fonts/gilda-display.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(fonts/general-sans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(fonts/general-sans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(fonts/general-sans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  /* Claro (por omisión) */
  --fondo:#F6F0E5;            /* papel */
  --fondo-2:#EEE4D2;          /* arena: bandas alternas y pie */
  --superficie:#FFFBF4;       /* tarjetas */
  --tinta:#0B1A2E;            /* azul noche */
  --tinta-2:#4A5466;          /* texto secundario (≥ 4.5:1 sobre papel y arena) */
  --linea:rgb(11 26 46 / .14);
  --marca:#7A5412;            /* oro para texto y filetes sobre papel (≥ 4.5:1) */
  --marca-hover:#5E400C;
  --marca-suave:rgb(210 162 74 / .14);
  --marca-oscura:#5E400C;
  --sobre-marca:#FFFFFF;
  --oro:#D2A24A;              /* oro de adorno: filetes, puntos, el sol (no texto sobre papel) */
  --acento:#1D5C8A;           /* azul del mar, para enlaces y detalles */
  --sobre-acento:#FFFFFF;
  --accion:linear-gradient(104deg,#F6DDA4 0%,#E8B65B 100%); /* el botón que importa */
  --sobre-accion:#0B1A2E;
  --vidrio:rgb(255 251 244 / .66);   /* vidrio claro: cabecera, riel, buscador */
  --vidrio-linea:rgb(11 26 46 / .12);
  --velo:rgb(11 26 46 / .45);
  --hm-cab-bg:#0B1A2E; --hm-cab-tinta:#F6F0E5; --hm-cuerpo:#FFFBF4;
  --ok:#15803D; --aviso:#B45309; --error:#C2410C; --info:#1D4ED8;
  /* Noche: el velo y la tinta clara para leer sobre las fotos del reloj */
  --noche:#050B16; --sobre-noche:#F3EFE6; --sobre-noche-2:rgb(243 239 230 / .74);
  /* Tripletas para mezclar con alfa: rgb(var(--x-rgb) / .5) */
  --fondo-rgb:246 240 229; --fondo-2-rgb:238 228 210; --tinta-rgb:11 26 46; --oro-rgb:210 162 74;
  --noche-rgb:5 11 22; --sobre-noche-rgb:243 239 230;
  /* Panel (cifras, listas): igual en los dos temas */
  --panel-fondo:#FFFBF4; --panel-tinta:#0B1A2E; --panel-tinta-2:#47505E; --panel-marca:#5E450D; --panel-fondo-rgb:255 251 244; --panel-tinta-rgb:11 26 46;
  --heroe-tinta-2:#3F4A5C;    /* texto secundario sobre los paneles claros de la portada (≥ 4.5:1) */
  /* Papelería de la invitación (el sobre y la carta son objetos: crema y azul noche en los dos temas) */
  --sobre-papel:#FBF6EC; --sobre-papel-2:#EFE5D1; --sobre-forro:#0B1A2E; --sobre-forro-2:#18305A; --sobre-oro:#D2A24A; --sobre-filo:#C9A55C;
  --sobre-tinta:#0B1A2E; --sobre-tinta-rgb:11 26 46; --sobre-tinta-texto:#0B1A2E; --sobre-tinta-2:#4A5466; --sobre-oro-texto:#7A5412; --sobre-linea:rgb(11 26 46 / .2);
  --sobre-sombra:0 1px 1px rgb(11 26 46 / .08),0 3px 6px -2px rgb(11 26 46 / .12),0 18px 30px -16px rgb(11 26 46 / .3),0 40px 70px -36px rgb(11 26 46 / .42);
  --oro-noche:#F3C969;        /* oro sobre el velo de las fotos del reloj */
  /* Tipografía: dos familias */
  --display:'Gilda Display',ui-serif,Georgia,serif;
  --sans:'General Sans',ui-sans-serif,system-ui,sans-serif;
  --t-1:clamp(2.25rem,4.6vw,4.5rem); --t-2:clamp(1.75rem,3.2vw,2.75rem); --t-3:1.375rem; --t-texto:1rem; --t-chico:.875rem;
  /* Forma */
  --radio:18px; --radio-chico:12px; --radio-tarjeta:22px; --radio-accion:999px; --radio-capsula:29px;
  --sombra:0 1px 2px rgb(11 26 46 / .06),0 14px 34px -18px rgb(11 26 46 / .28);
  --sombra-alta:0 30px 70px -30px rgb(11 26 46 / .45);
  --dur-normal:250ms; --curva:cubic-bezier(.2,0,0,1);
  color-scheme:light dark;
}
/* Oscuro (con el botón o el sistema): la noche de cubierta. Mismos nombres, AA. */
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]){
  --fondo:#050B16; --fondo-2:#0A1628; --superficie:#0E1B30; --tinta:#F3EFE6; --tinta-2:#B5B3AE; --linea:rgb(243 239 230 / .16);
  --marca:#F3C969; --marca-hover:#F7DA96; --marca-suave:rgb(243 201 105 / .12); --marca-oscura:#F7DA96; --sobre-marca:#050B16;
  --acento:#8CCFFF; --sobre-acento:#050B16; --vidrio:rgb(10 22 40 / .62); --vidrio-linea:rgb(243 239 230 / .14); --velo:rgb(0 0 0 / .6);
  --hm-cab-bg:#0B1A2E; --hm-cab-tinta:#F3EFE6; --hm-cuerpo:#0E1B30; --fondo-rgb:5 11 22; --fondo-2-rgb:10 22 40; --tinta-rgb:243 239 230;
  --ok:#4ADE80; --aviso:#FBBF24; --error:#FB923C; --info:#93C5FD;
  --sombra:0 1px 2px rgb(0 0 0 / .4),0 14px 34px -18px rgb(0 0 0 / .7); --sombra-alta:0 30px 70px -30px rgb(0 0 0 / .8);
}}
:root[data-tema=oscuro]{
  --fondo:#050B16; --fondo-2:#0A1628; --superficie:#0E1B30; --tinta:#F3EFE6; --tinta-2:#B5B3AE; --linea:rgb(243 239 230 / .16);
  --marca:#F3C969; --marca-hover:#F7DA96; --marca-suave:rgb(243 201 105 / .12); --marca-oscura:#F7DA96; --sobre-marca:#050B16;
  --acento:#8CCFFF; --sobre-acento:#050B16; --vidrio:rgb(10 22 40 / .62); --vidrio-linea:rgb(243 239 230 / .14); --velo:rgb(0 0 0 / .6);
  --hm-cab-bg:#0B1A2E; --hm-cab-tinta:#F3EFE6; --hm-cuerpo:#0E1B30; --fondo-rgb:5 11 22; --fondo-2-rgb:10 22 40; --tinta-rgb:243 239 230;
  --ok:#4ADE80; --aviso:#FBBF24; --error:#FB923C; --info:#93C5FD;
  --sombra:0 1px 2px rgb(0 0 0 / .4),0 14px 34px -18px rgb(0 0 0 / .7); --sombra-alta:0 30px 70px -30px rgb(0 0 0 / .8);
}
:root[data-tema=claro]{color-scheme:light}
:root[data-tema=oscuro]{color-scheme:dark}

/* Base de toda página (igual que la del sitio). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent} /* sin destello gris al tocar: el foco visible es propio */
body{margin:0;min-height:100dvh;background:var(--fondo);color:var(--tinta);font:400 var(--t-texto)/1.5 var(--sans);touch-action:manipulation;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
@media (pointer:coarse){input,select,textarea{font-size:16px}}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
img{max-width:100%;height:auto}
/* Controles: no se selecciona su texto al mantener presionado (el contenido sí se puede copiar). */
button,[role=button],[role=tab],[role=switch],summary{-webkit-user-select:none;user-select:none}
/* Instalada (inicio del celular) vs. navegador: .solo-navegador (p. ej. «Instalar») desaparece al instalarla.
   pwa.js pone html.instalada también en iOS (navigator.standalone). */
@media (display-mode:standalone){.solo-navegador{display:none!important}}
html.instalada .solo-navegador{display:none!important}
html:not(.instalada) .solo-instalada{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* La luz de cada momento para las cifras del reloj: -o sobre el vidrio claro del riel (≥ 4.5:1), -c sobre la foto con su velo.
   Registradas para que el cambio de una luz a otra sea una transición. */
@property --tono-o{syntax:'<color>';inherits:true;initial-value:#7A5412}
@property --tono-c{syntax:'<color>';inherits:true;initial-value:#F3C969}
:root{
  --tono-oro-o:#7A5412; --tono-oro-c:#F3C969;
  --tono-coral-o:#9C3F26; --tono-coral-c:#FFB59C;
  --tono-violeta-o:#5A3D8A; --tono-violeta-c:#D9C6FF;
  --tono-turquesa-o:#0B6267; --tono-turquesa-c:#8FE6E1;
  --tono-arena-o:#6E5026; --tono-arena-c:#F1DBA9;
}