/* Official palette per MiraNomas_Manual_Maestro_Identidad_v1.0 (§4/§10 design tokens) —
   background/text/primary/accent are now the exact confirmed brand hex values, not
   approximations. --surface/--green/--asphalt stay as this UI's own supporting colors (the
   manual doesn't define them); --text-muted is the manual's brand.textMuted, now a real token
   instead of an opacity trick (see .muted below). */
:root{--background:#F6F0E4;--text:#1F1F1F;--text-muted:#54514C;--surface:#fff9ed;--primary:#F4B63E;--accent:#E66F61;--green:#a8be89;--asphalt:#383a3d;--font-heading:Georgia,serif;--font-body:Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;color:var(--text);font-family:var(--font-body);line-height:1.5;
  background-color:var(--background)}
h1,h2,h3{font-family:var(--font-heading);margin:0 0 12px;letter-spacing:-.5px}
p{margin:0 0 10px}
a{color:var(--accent)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;background:var(--surface);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent);flex-wrap:wrap}
.site-header .wordmark{font-family:var(--font-heading);font-size:20px;font-weight:700;text-decoration:none;color:var(--text);display:flex;align-items:center;margin-right:auto}
.site-header .wordmark .brand-logo{height:60px;width:auto;display:block}
/* GLOBAL SIDE-ILLUSTRATION BACKGROUND (owner's 2026-09-15 request, replacing the old sparkle
   dots + the old smaller "brand-watermark" side logo above) — the app's one existing brand
   illustration sheet (static/brand/watermark-bg.png: a title lockup + 3x3 grid of MiraNomas
   party/photo icons — friends, polaroids, disco ball, drinks, a phone with a heart, a
   celebrating group, a camera, more photos, a calendar with a heart) is reused here, cropped
   to a different window on each side via background-position/-size so left and right show
   different parts of the same sheet instead of mirrored duplicates. This is a GLOBAL rule
   (bare `body`, not a class most templates would need to remember to add) with a single,
   explicit opt-out class — `.no-side-bg` — used only on templates/home.html, whose hero is
   already illustration-heavy on its own. No JS: position:fixed keeps it visually still while
   the real page content scrolls over it; pointer-events:none plus a negative z-index keep it
   fully inert to clicks/selection and behind every real element. Blur+desaturate+low opacity
   is the combination that reads as "recognizable but quiet" per the brand reference — cranking
   opacity alone toward invisible was explicitly rejected in favor of this combination. */
body:not(.no-side-bg){position:relative}
body:not(.no-side-bg)::before,body:not(.no-side-bg)::after{content:'';position:fixed;top:0;
  width:26vw;max-width:420px;height:100vh;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-image:url('/static/brand/watermark-bg.png');
  filter:blur(3.5px) saturate(.75) brightness(1.08);opacity:.22}
body:not(.no-side-bg)::before{left:0;background-size:230% auto;background-position:-25% 48%}
body:not(.no-side-bg)::after{right:0;background-size:230% auto;background-position:125% 55%}
@media(max-width:900px){body:not(.no-side-bg)::before,body:not(.no-side-bg)::after{opacity:.12;width:34vw;filter:blur(2.5px) saturate(.75) brightness(1.08)}}
@media(max-width:600px){body:not(.no-side-bg)::before,body:not(.no-side-bg)::after{display:none}}
.site-nav{display:flex;gap:22px;flex-wrap:wrap}
.site-nav a{text-decoration:none;color:var(--text);font-size:13px;font-weight:700;letter-spacing:.5px}
.site-nav a:hover{color:var(--accent)}
/* "ADQUIERE TU PAQUETE" fire-glow CTA (owner's 2026-09-14 request) — a warm gradient fill
   (gradient-clipped text, not an image) plus a soft animated text-shadow glow reads as
   "lit up" without any literal flame shape, which is what keeps it elegant instead of
   costume-y. Two independent animations: a slow gradient sweep (the "flowing heat") and a
   gentle opacity flicker (the "candle" feel) — both stay subtle (short travel, narrow flicker
   range) on purpose. Hover intensifies the glow and nudges scale by 1.04x, never a jump.
   Tune: swap the two gradient colors, adjust the text-shadow blur radii/opacity (via the
   color-mix percentages) for intensity, or the two animation durations for speed. */
.site-nav a.nav-cta-fire{
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 6px color-mix(in srgb,var(--primary) 55%,transparent),0 0 14px color-mix(in srgb,var(--accent) 30%,transparent);
  animation:nav-fire-flow 5s ease-in-out infinite,nav-fire-flicker 2.6s ease-in-out infinite;
  transition:transform .2s ease,text-shadow .2s ease;display:inline-block}
.site-nav a.nav-cta-fire:hover,.site-nav a.nav-cta-fire:focus-visible{
  color:transparent;transform:scale(1.04);
  text-shadow:0 0 10px color-mix(in srgb,var(--primary) 75%,transparent),0 0 22px color-mix(in srgb,var(--accent) 50%,transparent)}
@keyframes nav-fire-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes nav-fire-flicker{0%,100%{opacity:1}45%{opacity:.86}55%{opacity:1}72%{opacity:.92}}
@media(prefers-reduced-motion:reduce){
  .site-nav a.nav-cta-fire{animation:none;text-shadow:0 0 8px color-mix(in srgb,var(--primary) 60%,transparent)}
  .site-nav a.nav-cta-fire:hover,.site-nav a.nav-cta-fire:focus-visible{transform:none}
}
main{max-width:1080px;margin:0 auto;padding:32px 24px 64px}
.hero{text-align:center;padding:56px 20px 40px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--accent)}
.hero h1{font-size:clamp(34px,6vw,58px);margin-top:14px}
.hero p{max-width:520px;margin:14px auto 0;opacity:.8}
.cta-row{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;border:0;font-size:13px;font-weight:800;letter-spacing:.5px;padding:14px 22px;text-decoration:none;transition:transform .15s}
.button:active{transform:scale(.97)}
.button.primary{background:var(--primary);color:var(--text)}
.button.secondary{background:transparent;border:1px solid color-mix(in srgb,var(--text) 25%,transparent);color:var(--text)}
.button.block{width:100%}
.orbit-hero{padding:20px 0 8px}
.orbit-frame{position:relative;max-width:920px;margin:0 auto;min-height:600px;padding:60px 40px}
.orbit-text{position:relative;z-index:2;text-align:center;padding:40px 30px;max-width:640px;margin:0 auto}
.orbit-text .eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--accent)}
.orbit-text h1{font-size:clamp(30px,5vw,50px);margin-top:12px}
.orbit-text p{opacity:.8;margin-top:12px}
.orbit-card{position:absolute;top:0;left:0;width:112px;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:14px;padding:10px 8px;text-align:center;box-shadow:0 8px 20px #20212414;z-index:1;offset-rotate:0deg;animation-name:orbit-drive;animation-duration:var(--orbit-duration,45s);animation-timing-function:linear;animation-iteration-count:infinite;transition:transform .18s}
.orbit-card .cover{line-height:1}
.orbit-card .cover img{width:34px;height:34px;display:block;margin:0 auto}
.orbit-card h3{font-size:10.5px;margin:6px 0 0;font-family:var(--font-body);font-weight:700;line-height:1.25}
.orbit-frame:has(.orbit-card:hover,.orbit-card:focus-visible) .orbit-card{animation-play-state:paused}
.orbit-card:hover,.orbit-card:focus-visible{transform:scale(1.15);z-index:5;outline:none}
.orbit-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:170px;background:var(--asphalt);color:#fff;font-size:11px;line-height:1.4;padding:9px 11px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .15s}
.orbit-card:hover .orbit-tooltip,.orbit-card:focus-visible .orbit-tooltip{opacity:1}
@keyframes orbit-drive{from{offset-distance:0%}to{offset-distance:100%}}
@media(max-width:760px){.orbit-card{display:none}.orbit-frame{min-height:0;padding:20px 10px}}
.card{background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:18px;padding:24px}
/* Selectable Privado/Exclusivo cards at checkout — a real radio input for keyboard/screen-
   reader users, styled as a clickable card (same idiom as the QR-template picker cards in
   admin_new_event.html) rather than a dropdown, since two compared options read better
   side-by-side than hidden inside a <select>. */
.access-mode-card{display:flex;gap:10px;align-items:flex-start;cursor:pointer;transition:border-color .15s}
.access-mode-card input{margin-top:4px}
.access-mode-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.card+.card{margin-top:16px}
.grid{display:grid;gap:18px}
.grid .card+.card{margin-top:0} /* the stacking margin above is for cards in normal flow —
  inside a grid it only pushed later cards down within their row, breaking the "uniform boxes"
  look that the grid's own gap and stretch sizing already give for free */
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(200px,260px));justify-content:center}
.home-info-grid{column-gap:27px} /* 50% more than the base 18px gap, horizontal only */
.grid.photos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.photo-tile{position:relative}
.photo-tile .report-btn{position:absolute;top:6px;right:6px;background:#000000aa;color:#fff;border:0;border-radius:8px;font-size:10px;padding:5px 8px}
.open-photo{all:unset;display:block;width:100%;cursor:pointer}
.photo-tile.unlocked img{outline:3px solid var(--green)}
.event-card{text-decoration:none;color:var(--text);display:block}
.event-card .cover{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.event-card h3{margin-top:12px;font-size:18px}
.event-card .meta{font-size:12px;opacity:.65}
/* Package cards: same fixed-box treatment as .event-card .cover (sponsor cards), but 70%
   bigger per the owner's ask (240x150 -> ~408x255) — a package is the main sales pitch, a
   sponsor card is a secondary mention, so the size difference is deliberate. auto-fit +
   justify-content:center means cards re-center themselves as a row fills up, whether there's
   one package or ten, instead of stretching or hugging one side. */
.grid.cols-packages{grid-template-columns:repeat(auto-fit,minmax(380px,408px));justify-content:center}
.package-cover{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));display:block}
label{display:block;font-size:12px;font-weight:700;margin:16px 0 6px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid color-mix(in srgb,var(--text) 25%,transparent);border-radius:10px;background:var(--surface);color:var(--text);font-size:15px}
textarea{min-height:80px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.error{color:#a92519;font-size:13px;margin-top:10px}
.error:empty{display:none}
.notice{background:color-mix(in srgb,var(--green) 25%,var(--surface));border-radius:10px;padding:12px 14px;font-size:13px;margin-top:14px}
.notice:empty{display:none}
table{width:100%;border-collapse:collapse;font-size:13px}
table th,table td{text-align:left;padding:9px 10px;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;padding:3px 9px;border-radius:20px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.badge.warn{background:color-mix(in srgb,var(--accent) 20%,var(--surface));color:var(--accent)}
.badge.ok{background:color-mix(in srgb,var(--green) 35%,var(--surface))}
.badge.info{background:color-mix(in srgb,var(--primary) 45%,var(--surface));color:var(--asphalt)}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.muted{color:var(--text-muted);font-size:13px}
.price-highlight{font-weight:800;color:var(--accent)}
footer.page-footer{text-align:center;font-size:12px;opacity:.6;padding:30px 20px}
.social-share-trigger{display:inline-flex;align-items:center;gap:10px;margin-left:12px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);background:var(--surface);color:var(--text);font-size:12px;font-weight:800;padding:7px 16px 7px 7px;border-radius:999px;box-shadow:0 4px 14px #20212414;transition:transform .16s,box-shadow .16s}
.social-share-trigger:hover{transform:translateY(-1px);box-shadow:0 7px 18px #2021241f}
.social-icons{display:flex;flex-shrink:0}
.social-icons svg{display:block;border-radius:50%;box-shadow:0 0 0 2px var(--surface)}
.social-icons svg:not(:first-child){margin-left:-8px}
.social-share-label{color:var(--text)}
.social-share-dialog{width:min(94vw,1080px);max-height:92dvh;overflow:auto;padding:36px;border:0;border-radius:22px;color:var(--text);background:var(--surface)}
.social-share-dialog::backdrop{background:#101114d9;backdrop-filter:blur(5px)}
.social-share-dialog .dialog-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:24px}
.social-share-dialog .dialog-top h2{font-size:26px;margin:0}
.social-share-dialog .icon-button{width:40px;height:40px;flex-shrink:0;border:0;background:transparent;color:var(--text);font-size:20px;border-radius:50%}
.social-share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;justify-items:center}
.social-share-item{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-size:15px;font-weight:700}
.social-share-item img{width:100%;max-width:360px;aspect-ratio:1;object-fit:contain;border-radius:16px;background:#fff;padding:10px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
@media(max-width:760px){.social-share-grid{grid-template-columns:1fr;max-width:360px;margin:auto}}
.mfa-code{letter-spacing:6px;font-size:24px;text-align:center;font-weight:800}
.row-starting-soon{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.row-live{background:color-mix(in srgb,var(--green) 16%,transparent)}
.row-review{background:color-mix(in srgb,var(--primary) 22%,transparent)}
.row-published{background:color-mix(in srgb,var(--green) 38%,transparent)}
.row-expired{background:color-mix(in srgb,var(--text) 12%,transparent)}
.row-swatch{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:4px;border:1px solid color-mix(in srgb,var(--text) 15%,transparent)}
.qr-box{text-align:center;margin:16px 0}
.qr-box img{width:180px;height:180px;border-radius:12px;background:#fff;padding:8px}
.spot-row,.code-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent);font-size:13px}
.small-button{border:1px solid color-mix(in srgb,var(--text) 25%,transparent);background:transparent;border-radius:8px;font-size:11px;padding:6px 10px}
@media(max-width:640px){.site-header{padding:14px 16px;flex-direction:column;gap:10px}.site-header .wordmark{margin-right:0}.site-nav{justify-content:center;gap:10px 18px;text-align:center}main{padding:20px 14px 40px}.form-row{grid-template-columns:1fr}}

@media(max-width:760px){.orbit-instructions{display:none}}
@media(prefers-reduced-motion:reduce){.orbit-card{animation:none}}
.card:has(> #events-table){overflow-x:auto}

/* Centered layout for /anfitrion and /eventos-patrocinados — headings, copy, labels,
   notices and the cards/thumbnails themselves all centered on the page. Typed input text
   stays left-aligned (centering text as you type it is a real usability regression, not
   an aesthetic win), so it's excluded on purpose. */
main.page-center{text-align:center}
main.page-center .card{margin-left:auto;margin-right:auto}
main.page-center label{text-align:center}
main.page-center input,main.page-center textarea{text-align:left}
main.page-center .event-card{text-align:center}
main.page-center .event-card .cover{margin:0 auto}

/* Auto-scrolling sponsor carousel — kicks in at 5+ sponsors (see eventos_patrocinados.html),
   comfortably handles up to ~10. Cards are duplicated in the markup so the strip can loop
   seamlessly at -50%; hovering/focusing ANY card pauses the whole strip, not just that card. */
.sponsor-carousel{overflow:hidden;margin:24px 0 0;padding:0 0 12px}
.sponsor-track{display:flex;gap:18px;width:max-content;animation-name:sponsor-scroll;animation-timing-function:linear;animation-iteration-count:infinite}
.sponsor-carousel:has(.sponsor-card:hover,.sponsor-card:focus-visible) .sponsor-track{animation-play-state:paused}
.sponsor-card{flex:0 0 240px}
@keyframes sponsor-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
@media(prefers-reduced-motion:reduce), (hover:none){.sponsor-carousel{overflow-x:auto}.sponsor-track{animation:none}.sponsor-card[aria-hidden=true]{display:none}}
.button.whatsapp{background:#176b40;color:#fff}
.site-nav a.nav-whatsapp{color:#176b40}
.contact-whatsapp{margin:22px 0;text-align:center}
.contact-whatsapp p{margin-top:8px}
.button:focus-visible,a:focus-visible,.open-photo:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* "Secciones de tu álbum" tabs (Todas | Sección A | Sección B…) — horizontally-scrollable pill
   nav instead of a <select>, so every section's live count stays visible at a glance even when
   there are more sections than fit the screen width. Same overflow-x:auto idiom this file
   already uses for #events-table above. */
.section-tabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;padding:2px 2px 10px;margin:4px 0 16px}
.section-tabs .tab-pill{flex:0 0 auto;scroll-snap-align:start;padding:8px 16px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--text) 15%,transparent);white-space:nowrap;
  text-decoration:none;color:var(--text);font-size:14px;background:var(--surface)}
.section-tabs .tab-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Small "ⓘ" info tooltip next to "Secciones de tu álbum: N" — hover on desktop, tap/focus on
   mobile (CSS :hover alone never fires on touch, so section_configurator.js also toggles a
   .open class on click/touchstart; see that file). */
.info-tooltip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:color-mix(in srgb,var(--text) 12%,transparent);color:var(--text);
  font-size:12px;cursor:help;position:relative;vertical-align:middle}
.info-tooltip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%);width:min(280px,80vw);padding:10px 12px;border-radius:10px;
  background:var(--asphalt);color:#fff;font-size:13px;line-height:1.4;text-align:left;
  box-shadow:0 6px 18px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .15s;z-index:20}
.info-tooltip:hover::after,.info-tooltip:focus-visible::after,.info-tooltip.open::after{opacity:1}