/* 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. .tono-noche lleva los mismos a una sola sección (la landing de un barco). */
@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],.tono-noche{
  --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 foto de la portada para lo que va encima de ella (con su velo). Registrada para que el cambio sea una transición. */
@property --tono-c{syntax:'<color>';inherits:true;initial-value:#F3C969}
:root{
  --tono-oro-c:#F3C969; --tono-coral-c:#FFB59C; --tono-violeta-c:#D9C6FF; --tono-turquesa-c:#8FE6E1; --tono-arena-c:#F1DBA9;
}

/* El cielo de cada momento en la barra del reloj (claro en los dos temas): -1…-5 el degradado, -mar el agua bajo el
   horizonte, -sol la luz del sol y -halo su resplandor (tripleta), -tinta y -tinta-2 el texto encima (≥ 5:1 sobre todo
   el degradado), -acento el punto del riel (≥ 3:1) y -luz el filete. Registradas para que el cambio sea una transición. */
@property --cielo-tinta{syntax:'<color>';inherits:true;initial-value:#43215A}
@property --cielo-tinta-2{syntax:'<color>';inherits:true;initial-value:#5B3F68}
@property --cielo-acento{syntax:'<color>';inherits:true;initial-value:#A63D2B}
@property --cielo-luz{syntax:'<color>';inherits:true;initial-value:#FFC48C}
:root{
  --cielo-amanecer-1:#F6D6DC; --cielo-amanecer-2:#FADFD6; --cielo-amanecer-3:#FDE8D2; --cielo-amanecer-mar:#F0D5DE; --cielo-amanecer-mar-2:#EACBD8;
  --cielo-amanecer-sol:#FFF6E4; --cielo-amanecer-sol-2:#FFD9B0; --cielo-amanecer-halo:255 196 160;
  --cielo-amanecer-tinta:#6A2638; --cielo-amanecer-tinta-2:#7A4550; --cielo-amanecer-acento:#A8452F; --cielo-amanecer-luz:#F4A98C;
  --cielo-manana-1:#E5F2F9; --cielo-manana-2:#D9EDF6; --cielo-manana-3:#C9E4F0;
  --cielo-manana-tinta:#0D4462; --cielo-manana-tinta-2:#355669; --cielo-manana-acento:#1D6E93; --cielo-manana-luz:#8CCBE6;
  --cielo-mediodia-1:#CDEFEA; --cielo-mediodia-2:#E2F4EE; --cielo-mediodia-3:#F3E8CF;
  --cielo-mediodia-tinta:#0A4F53; --cielo-mediodia-tinta-2:#355A5B; --cielo-mediodia-acento:#0C756E; --cielo-mediodia-luz:#7FDCD2;
  --cielo-tarde-1:#FCF0D8; --cielo-tarde-2:#F9E2B6; --cielo-tarde-3:#F4D193; --cielo-tarde-halo:255 240 200;
  --cielo-tarde-tinta:#64400F; --cielo-tarde-tinta-2:#664D2C; --cielo-tarde-acento:#8A5A10; --cielo-tarde-luz:#F1C46E;
  --cielo-ocaso-1:#E5D7F0; --cielo-ocaso-2:#EED0DA; --cielo-ocaso-3:#F6CCBC; --cielo-ocaso-4:#FAD9A8; --cielo-ocaso-5:#F3C6B9;
  --cielo-ocaso-mar:#DCCDE6; --cielo-ocaso-mar-2:#D3C3E0;
  --cielo-ocaso-sol:#FFF2D8; --cielo-ocaso-sol-2:#FFD49A; --cielo-ocaso-sol-3:#FFB27E; --cielo-ocaso-halo:255 190 135; --cielo-ocaso-verde:120 214 150;
  --cielo-ocaso-tinta:#43215A; --cielo-ocaso-tinta-2:#5B3F68; --cielo-ocaso-acento:#A63D2B; --cielo-ocaso-luz:#FFB27E;
}

/* El atardecer de la portada: el cielo de «Salidas», el agua de «Elige tu día» y la arena de los tours. La hora avanza con
   el scroll por cuatro momentos (tarde dorada → naranja → puesta roja y rosa → crepúsculo lavanda, pastel, nunca noche) y
   entre dos momentos se mezclan. Cada momento del cielo da los cinco colores de la escena (fondo y rampa a→d, de lo alto a
   la luz del sol); sus nubes, -luz (la base, que toma el sol desde abajo) y -cuerpo; su agua, -cerca (bajo la línea),
   -lejos y -orilla (la lámina sobre la arena). El texto encima es oscuro: ningún color del cielo ni de las nubes baja de
   luminancia 0.33, así que --tinta, --ocaso-tinta-2 y --ocaso-marca dan ≥ 4.9:1. El sol se enrojece al bajar: -alto,
   -medio, -bajo y -rojo, cada uno del centro (1) al borde (4) y su halo (tripleta). La arena es beige de playa y solo se entibia un poco al bajar; la orilla y la ola, casi sin color. */
:root{
  --ocaso-tarde-fondo:#E9A445; --ocaso-tarde-a:#EBA548; --ocaso-tarde-b:#F0B352; --ocaso-tarde-c:#F6C466; --ocaso-tarde-d:#FCD991;
  --ocaso-naranja-fondo:#EE8A4C; --ocaso-naranja-a:#EF8C4E; --ocaso-naranja-b:#F49A50; --ocaso-naranja-c:#F8AC5C; --ocaso-naranja-d:#FDC478;
  --ocaso-puesta-fondo:#E58088; --ocaso-puesta-a:#E8828F; --ocaso-puesta-b:#F07E72; --ocaso-puesta-c:#F6825A; --ocaso-puesta-d:#FB9C66;
  --ocaso-crepusculo-fondo:#B8A2D8; --ocaso-crepusculo-a:#B9A4DA; --ocaso-crepusculo-b:#CBA2D0; --ocaso-crepusculo-c:#E0A6BE; --ocaso-crepusculo-d:#EFBAAE;
  --ocaso-tarde-luz:#FFF2CF; --ocaso-tarde-cuerpo:#FBDDA6; --ocaso-naranja-luz:#FFE0A0; --ocaso-naranja-cuerpo:#F8BE8A;
  --ocaso-puesta-luz:#FFC27E; --ocaso-puesta-cuerpo:#F39DA6; --ocaso-crepusculo-luz:#FFB6B0; --ocaso-crepusculo-cuerpo:#A994D4;
  --ocaso-tarde-cerca:#E9A04A; --ocaso-tarde-lejos:#D98E5A; --ocaso-tarde-orilla:#E2D8C6;
  --ocaso-naranja-cerca:#EE8A4C; --ocaso-naranja-lejos:#DD7E6E; --ocaso-naranja-orilla:#E3D6C6;
  --ocaso-puesta-cerca:#EC7E72; --ocaso-puesta-lejos:#D47D9C; --ocaso-puesta-orilla:#E2D3CC;
  --ocaso-crepusculo-cerca:#B79BD8; --ocaso-crepusculo-lejos:#A096D4; --ocaso-crepusculo-orilla:#D9D5DC;
  --ocaso-tinta-2:#263040; --ocaso-marca:#432A02;
  --ocaso-sol-alto-1:#FFFFF8; --ocaso-sol-alto-2:#FFFBEA; --ocaso-sol-alto-3:#FFF3D0; --ocaso-sol-alto-4:#FFE8B4; --ocaso-sol-alto-halo:255 232 180;
  --ocaso-sol-medio-1:#FFF8E0; --ocaso-sol-medio-2:#FFEDB8; --ocaso-sol-medio-3:#FFDD92; --ocaso-sol-medio-4:#FFCB74; --ocaso-sol-medio-halo:255 206 132;
  --ocaso-sol-bajo-1:#FFC67C; --ocaso-sol-bajo-2:#FEB96A; --ocaso-sol-bajo-3:#FCAA5A; --ocaso-sol-bajo-4:#FAA052; --ocaso-sol-bajo-halo:255 178 112;
  --ocaso-sol-rojo-1:#FB8150; --ocaso-sol-rojo-2:#F97B4B; --ocaso-sol-rojo-3:#F67548; --ocaso-sol-rojo-4:#F37045; --ocaso-sol-rojo-halo:255 160 102;
  --ocaso-horizonte:251 170 110;
  --agua-hondo:70 44 96; --agua-brillo:255 247 226; --agua-filo:255 238 205;
  --arena-dia-1:#E9E0CE; --arena-dia-2:#E1D5BF; --arena-tarde-1:#EBDDC6; --arena-tarde-2:#E2D1B6;
  --arena-mojada:#8C8478; --arena-espuma:#F8F6F1;
}