/* ============================================================
   ESPALDINHA AGENCY — Sistema de estilo
   Tokens · Base · Tipografía · Layout · Componentes
   ============================================================ */

:root{
  /* — Color — */
  --negro:    #0D0D0D;
  --carbon:   #1A1A1A;
  --carbon-2: #232323;
  --lima:     #C5F135;
  --lima-osc: #A9D518;   /* hover del primary */
  --lima-cla: #E8F9A0;
  --crema:    #F5F4F0;
  --blanco:   #FFFFFF;
  --gris:     #888888;
  --gris-lin: rgba(255,255,255,.14); /* hairline sobre oscuro */
  --gris-lin-d: rgba(13,13,13,.14);  /* hairline sobre claro */

  /* — Tipografía — */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans:    "DM Sans", system-ui, sans-serif;

  /* — Radios — */
  --r-ui:  8px;
  --r-tag: 4px;

  /* — Espaciado (escala 4px) — */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* — Layout — */
  --maxw: 1240px;
  --gutter: 32px;
  --nav-h: 64px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body{
  margin:0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection{ background: var(--lima); color: var(--negro); }
img{ max-width:100%; display:block; }
a{ color: inherit; }
button{ font-family: inherit; }

/* ---------- Tipografía ---------- */
.h1{ font-family:var(--display); font-weight:800; font-size: clamp(48px, 7vw, 80px); line-height:.95; letter-spacing:-.01em; text-wrap:balance; margin:0; }
.h2{ font-family:var(--display); font-weight:700; font-size: clamp(34px, 4.2vw, 48px); line-height:1.0; letter-spacing:-.005em; margin:0; }
.h3{ font-family:var(--display); font-weight:700; font-size: clamp(24px, 2.6vw, 32px); line-height:1.05; margin:0; }
.h4{ font-family:var(--sans); font-weight:500; font-size:22px; line-height:1.3; margin:0; }
.body{ font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.6; }
.lead{ font-family:var(--sans); font-weight:400; font-size:20px; line-height:1.55; color:#D8D8D8; }
.small{ font-size:13px; line-height:1.5; }
.meta{ font-size:13px; color:var(--gris); }
.label{ font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.mono{ font-variant-numeric: tabular-nums; }

.display-num{ font-family:var(--display); font-weight:800; line-height:.85; letter-spacing:-.02em; }

/* ---------- Layout ---------- */
.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 var(--gutter); }
.section{ padding: var(--s10) 0; border-top:1px solid var(--gris-lin); position:relative; }
.section--tight{ padding: var(--s9) 0; }
.section.light{ background: var(--crema); color: var(--negro); border-top-color: var(--gris-lin-d); }
.section.light .meta{ color:#6B6B6B; }
.section.light .lead{ color:#2A2A2A; }

/* Cabecera de capítulo con número grande */
.chap-head{ display:grid; grid-template-columns: auto 1fr; gap: var(--s7); align-items:start; margin-bottom: var(--s8); }
.chap-num{ font-family:var(--display); font-weight:800; font-size: clamp(56px,9vw,120px); line-height:.8; color:var(--lima); letter-spacing:-.03em; padding-right:8px; }
.section.light .chap-num{ color:var(--negro); }
.chap-head .label{ color:var(--lima); margin-bottom:var(--s3); display:block; }
.section.light .chap-head .label{ color:#6B6B6B; }
.chap-head h2{ max-width: 20ch; }
.chap-intro{ max-width: 56ch; margin-top: var(--s4); }

/* rejillas utilitarias */
.grid{ display:grid; gap: var(--s5); }
.cols-2{ grid-template-columns: repeat(2,1fr); }
.cols-3{ grid-template-columns: repeat(3,1fr); }
.cols-4{ grid-template-columns: repeat(4,1fr); }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.gap2{ gap:var(--s2);} .gap3{ gap:var(--s3);} .gap4{ gap:var(--s4);} .gap5{ gap:var(--s5);} .gap6{ gap:var(--s6);}
.wrap-flex{ flex-wrap:wrap; }

/* hairline */
.hr{ height:1px; background:var(--gris-lin); border:0; margin:var(--s6) 0; }
.section.light .hr{ background:var(--gris-lin-d); }

/* tarjeta de spec/demo */
.panel{ background:var(--carbon); border:1px solid var(--gris-lin); border-radius:var(--r-ui); }
.section.light .panel{ background:var(--blanco); border-color:var(--gris-lin-d); }
.panel-pad{ padding: var(--s6); }
.caption{ font-size:13px; color:var(--gris); margin-top:var(--s3); }

/* etiqueta "demo" sobre ejemplos */
.demo-tag{ font-family:var(--sans); font-weight:500; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); }

/* ---------- Marca / mark ---------- */
.esp-mark{ width:100%; height:100%; display:block; }
[data-logo]{ display:inline-block; line-height:0; color:var(--lima); }

/* lockup: icono + wordmark */
.lockup{ display:inline-flex; align-items:center; gap:.5em; color:var(--lima); }
.lockup [data-logo]{ width:1.15em; height:1.15em; }
.wordmark{ font-family:var(--display); font-weight:800; letter-spacing:.02em; text-transform:uppercase; line-height:1; }
.wordmark .ag{ color:var(--gris); font-weight:700; }

/* ---------- Tags / pills ---------- */
.tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:500;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-tag); line-height:1; }
.tag--lima{ background:var(--lima); color:var(--negro); }
.tag--out{ border:1px solid var(--lima); color:var(--lima); }
.tag--ghost{ border:1px solid var(--gris-lin); color:var(--gris); }

/* ---------- Botones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:var(--sans); font-weight:500; font-size:14px; letter-spacing:.02em;
  padding:0 20px; height:44px; border-radius:var(--r-ui); border:1px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease; text-decoration:none; white-space:nowrap; }
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--lima); color:var(--negro); }
.btn--primary:hover{ background:var(--lima-osc); }
.btn--secondary{ background:transparent; border-color:var(--lima); color:var(--lima); }
.btn--secondary:hover{ background:var(--lima); color:var(--negro); }
.btn--ghost-d{ background:transparent; border-color:var(--blanco); color:var(--blanco); }
.btn--ghost-d:hover{ background:var(--blanco); color:var(--negro); }
.btn--ghost-l{ background:transparent; border-color:var(--negro); color:var(--negro); }
.btn--ghost-l:hover{ background:var(--negro); color:var(--blanco); }
.btn--destructive{ background:transparent; border-color:#E0533D; color:#E0533D; }
.btn--destructive:hover{ background:#E0533D; color:var(--blanco); }
.btn:disabled,.btn.is-disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }
.btn--sm{ height:36px; font-size:13px; padding:0 14px; }
.btn--lg{ height:52px; font-size:15px; padding:0 28px; }
.btn:focus-visible{ outline:2px solid var(--lima); outline-offset:2px; }

/* ---------- Iconos ---------- */
.ico{ display:block; width:100%; height:100%; }
[data-icon]{ display:inline-grid; place-items:center; width:24px; height:24px; line-height:0; vertical-align:middle; flex:none; }

/* ---------- NAV ---------- */
.nav{ position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center; gap:var(--s5); padding:0 var(--gutter);
  background:rgba(13,13,13,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--gris-lin); }
.nav-brand{ text-decoration:none; color:var(--lima); }
.nav-index{ display:flex; gap:2px; margin-left:auto; }
.nav-index a{ font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.06em;
  color:var(--gris); text-decoration:none; padding:8px 9px; border-radius:6px; transition:.16s; font-variant-numeric:tabular-nums; }
.nav-index a:hover{ color:var(--blanco); }
.nav-index a.active{ color:var(--negro); background:var(--lima); }
.nav-cta{ margin-left:var(--s3); }

/* ---------- COVER ---------- */
.cover{ min-height:100vh; display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--nav-h) + 28px) 0 40px; position:relative; overflow:hidden; }
.cover-grid-lines{ position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--gris-lin) 1px, transparent 1px), linear-gradient(90deg, var(--gris-lin) 1px, transparent 1px);
  background-size:100% 33.333%, 12.5% 100%; opacity:.5; mask-image:linear-gradient(#000,transparent 78%); }
.cover-top, .cover-bottom{ display:flex; justify-content:space-between; align-items:flex-end; position:relative; z-index:2; }
.cover-top .label{ color:var(--gris); }
.cover-center{ position:relative; z-index:2; text-align:center; padding:0 var(--gutter); margin:auto 0; }
.cover-mark{ width:clamp(180px,26vw,300px); height:clamp(180px,26vw,300px); margin:0 auto var(--s5); color:var(--lima); }
.cover-wordmark{ font-size:clamp(46px,11.5vw,132px); line-height:.86; letter-spacing:.005em; color:var(--blanco); white-space:nowrap; }
.cover-ag{ display:block; font-size:.26em; letter-spacing:.42em; color:var(--lima); font-weight:700; margin-top:.18em; padding-left:.42em; }
.cover-tag{ font-family:var(--sans); font-size:clamp(15px,1.7vw,20px); color:var(--gris); margin:var(--s5) 0 0; }
.cover-desc{ max-width:46ch; font-size:15px; color:#BdBdBd; line-height:1.6; }
.cover-scroll{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.cover-scroll span:first-child{ font-family:var(--sans); font-weight:500; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); }
.cover-scroll-line{ width:1px; height:46px; background:linear-gradient(var(--lima), transparent); animation:scrollpulse 2.2s ease-in-out infinite; }
@keyframes scrollpulse{ 0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; transform-origin:top; } }

/* ---------- FOOTER ---------- */
.foot{ background:var(--carbon); border-top:1px solid var(--gris-lin); padding:var(--s9) 0 var(--s6); }
.foot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; }
.foot-quote .h3{ max-width:22ch; }
.foot-quote .meta{ display:block; margin-top:var(--s4); }
.foot-bottom{ display:flex; justify-content:space-between; margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--gris-lin); }

/* ---------- Placeholders (imagen pendiente) ---------- */
.ph{ position:relative; background:var(--carbon); border:1px solid var(--gris-lin); border-radius:var(--r-ui);
  overflow:hidden; display:grid; place-items:center; min-height:120px; }
.ph::before{ content:""; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(45deg, transparent 0 11px, rgba(255,255,255,.04) 11px 12px); }
.ph::after{ content:attr(data-ph); position:absolute; bottom:10px; left:12px;
  font-family:var(--sans); font-weight:500; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); }
.ph > *{ position:relative; z-index:1; }
.ph--mark{ aspect-ratio:1; color:var(--lima); }
.ph--mark span{ display:block; width:58%; height:58%; }
.ph-note{ display:block; margin-top:10px; }
.section.light .ph{ background:#EAE8E2; border-color:var(--gris-lin-d); }
.section.light .ph::before{ background:repeating-linear-gradient(45deg, transparent 0 11px, rgba(13,13,13,.05) 11px 12px); }
.section.light .ph::after{ color:#8A8A8A; }

/* ---------- Feature (media + texto) ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; }
.feature-media .ph{ aspect-ratio:4/3; }

/* ---------- Quote bar / pull quote ---------- */
.quote-bar{ border-left:3px solid var(--lima); padding-left:20px; }

/* ---------- Value cards ---------- */
.value-card{ padding:var(--s5) var(--s5) var(--s6); background:var(--carbon); border:1px solid var(--gris-lin);
  border-radius:var(--r-ui); transition:.2s; }
.value-card:hover{ border-color:rgba(197,241,53,.5); transform:translateY(-2px); }
.value-idx{ font-family:var(--display); font-weight:800; font-size:14px; color:var(--lima); letter-spacing:.04em; }
.vh{ font-family:var(--display); font-weight:700; font-size:26px; margin:10px 0 8px; line-height:1; }

/* ---------- Pos cards ---------- */
.pos-card{ display:flex; flex-direction:column; }

/* ---------- CH02b placeholder anchor ---------- */
/* ---------- CH02 · Logo ---------- */
.logo-tile{ background:var(--carbon); border:1px solid var(--gris-lin); border-radius:var(--r-ui);
  min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:var(--s6); position:relative; }
.logo-tile .demo-tag{ position:absolute; bottom:14px; left:16px; }
.logo-tile--stack{ min-height:230px; }

.logo-versions .lv{ aspect-ratio:4/3; border-radius:var(--r-ui); border:1px solid var(--gris-lin);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:var(--s5); }
.lv [data-logo]{ width:64px; height:64px; }
.lv-cap{ font-family:var(--sans); font-weight:500; font-size:12px; text-align:center; color:var(--blanco); line-height:1.4; }
.lv-cap em{ font-style:normal; color:var(--lima); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }

.clearspace{ padding:var(--s8); display:grid; place-items:center; min-height:240px; }
.cs-frame{ position:relative; padding:46px; outline:1px dashed rgba(197,241,53,.45); }
.cs-frame::before{ content:""; position:absolute; inset:0; outline:1px solid var(--gris-lin); }
.cs-x{ position:absolute; font-family:var(--display); font-weight:800; color:var(--lima); font-size:13px;
  background:var(--carbon); padding:0 4px; }
.cs-x--t{ top:-7px; left:50%; transform:translateX(-50%); }
.cs-frame::after{ content:""; position:absolute; top:0; bottom:0; left:23px; border-left:1px solid rgba(197,241,53,.3); }

.minsize{ display:flex; flex-direction:column; justify-content:center; min-height:240px; }
.ms-row{ display:flex; align-items:center; gap:18px; }
.ms-row [data-logo]{ flex:none; }

.misuse .mu{ position:relative; background:var(--carbon); border:1px solid var(--gris-lin); border-radius:var(--r-ui); padding:var(--s5); overflow:hidden; }
.mu-vis{ height:120px; display:grid; place-items:center; margin-bottom:16px; }
.mu-x{ position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; background:#E0533D; color:#fff; display:grid; place-items:center; }
.mu-x .ico{ width:16px; height:16px; }
.mu-grad{ background:linear-gradient(135deg,#C5F135 0%, #1E6BE0 100%);
  -webkit-mask:url('icono_logo.svg') center/contain no-repeat; mask:url('icono_logo.svg') center/contain no-repeat; }

/* ---------- CH03 · Color ---------- */
.palette .swatch{ text-align:left; background:var(--carbon); border:1px solid var(--gris-lin); border-radius:var(--r-ui);
  padding:0; overflow:hidden; cursor:pointer; transition:.18s; color:inherit; display:block; }
.palette .swatch:hover{ border-color:rgba(197,241,53,.5); transform:translateY(-2px); }
.sw-chip{ display:block; height:108px; width:100%; }
.sw-info{ display:block; padding:16px; }
.sw-name{ display:block; font-family:var(--display); font-weight:700; font-size:20px; line-height:1; }
.sw-hex{ display:inline-block; font-family:var(--sans); font-weight:500; font-size:13px; color:var(--lima); margin:8px 0 2px; font-variant-numeric:tabular-nums; }
.swatch--hero .sw-hex{ color:var(--lima); }
.sw-rgb{ display:block; font-size:11px; color:var(--gris); letter-spacing:.04em; }
.sw-use{ display:block; font-size:12px; color:#B5B5B5; margin-top:10px; }
.swatch--note{ background:transparent; border:1px dashed var(--gris-lin); display:flex; flex-direction:column; justify-content:center; padding:20px; }

.prop-bar{ display:flex; gap:4px; height:72px; border-radius:var(--r-ui); overflow:hidden; }
.prop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-family:var(--display); font-weight:800; font-size:18px; color:#fff; }
.prop em{ font-family:var(--sans); font-weight:500; font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); }

.combo{ position:relative; aspect-ratio:16/9; border-radius:var(--r-ui); border:1px solid var(--gris-lin);
  display:flex; align-items:center; justify-content:center; gap:14px; }
.combo-cap{ position:absolute; bottom:10px; left:12px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); }
.combo--no{ border-color:rgba(224,83,61,.5); }
.combo-x{ position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; background:#E0533D; color:#fff; display:grid; place-items:center; }
.combo-x .ico{ width:15px; height:15px; }

/* ---------- CH04 · Tipografía (light) ---------- */
.spec-card{ display:flex; gap:24px; align-items:center; background:var(--blanco); border:1px solid var(--gris-lin-d);
  border-radius:var(--r-ui); padding:28px; }
.spec-card--dark{ background:#0D0D0D; color:#fff; border-color:transparent; }
.spec-aa{ font-size:96px; line-height:.8; flex:none; }
.spec-card--dark .spec-aa{ color:var(--lima); }
.spec-card .spec-aa{ color:#0D0D0D; }
.spec-glyphs{ font-size:15px; letter-spacing:.02em; margin:14px 0 12px; word-spacing:2px; }
.spec-card .spec-glyphs{ color:#444; }
.spec-card--dark .spec-glyphs{ color:#bbb; }
.spec-weights{ display:flex; gap:18px; font-size:20px; }
.spec-card--dark .spec-weights span:first-child{ color:#888; }
.spec-weights span:last-child{ color:var(--lima); }
.spec-card:not(.spec-card--dark) .spec-weights span:last-child{ color:#0D0D0D; }

.type-scale{ display:flex; flex-direction:column; }
.ts-row{ display:grid; grid-template-columns:1fr 240px; gap:32px; align-items:center; padding:22px 0; border-bottom:1px solid var(--gris-lin-d); }
.ts-row:first-child{ border-top:1px solid var(--gris-lin-d); }
.ts-sample{ color:#0D0D0D; overflow:hidden; }
.ts-spec{ display:flex; flex-direction:column; gap:3px; }
.ts-name{ font-family:var(--sans); font-weight:600; font-size:13px; color:#0D0D0D; }
.ts-det{ font-size:12px; color:#7a7a7a; font-variant-numeric:tabular-nums; }

.rules{ list-style:none; margin:0; padding:0; }
.rules li{ position:relative; padding:10px 0 10px 22px; border-bottom:1px solid var(--gris-lin-d); font-size:14px; color:#333; }
.rules li::before{ content:""; position:absolute; left:0; top:17px; width:8px; height:8px; background:var(--lima); border:1px solid #0D0D0D; }
.rules li strong{ color:#0D0D0D; }
.section.light .panel-pad .label{ color:var(--lima); }

/* ---------- CH05 · Iconos ---------- */
.icon-specs .ispec{ background:var(--carbon); border:1px solid var(--gris-lin); border-radius:var(--r-ui); padding:18px 20px; display:flex; flex-direction:column; gap:4px; }
.ispec-k{ font-family:var(--sans); font-weight:500; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); }
.ispec-v{ font-family:var(--display); font-weight:700; font-size:22px; }
.icat{ margin:32px 0 16px; }
.icon-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:12px; }
.itile{ aspect-ratio:1; background:var(--carbon); border:1px solid var(--gris-lin); border-radius:var(--r-ui);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; transition:.16s; cursor:default; }
.itile:hover{ border-color:rgba(197,241,53,.5); color:var(--lima); }
.itile [data-icon]{ width:26px; height:26px; }
.itile .ico{ width:100%; height:100%; }
.itile span:last-child{ font-family:var(--sans); font-size:10px; color:var(--gris); letter-spacing:.02em; }
.itile:hover span:last-child{ color:var(--lima); }
.itile--hl{ background:var(--lima); color:var(--negro); border-color:var(--lima); }
.itile--hl:hover{ color:var(--negro); }
.itile--hl span:last-child, .itile--hl:hover span:last-child{ color:rgba(13,13,13,.6); }

.size-row{ display:flex; align-items:center; gap:28px; justify-content:center; min-height:120px; color:var(--lima); }
.ivar{ aspect-ratio:1; border-radius:var(--r-ui); border:1px solid var(--gris-lin); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.ivar-c{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#fff; }
.icon-grid + .icat{ margin-top:32px; }
code{ font-family:var(--sans); font-weight:500; background:var(--carbon-2); color:var(--lima); padding:1px 6px; border-radius:4px; font-size:.9em; }

/* ---------- CH06 · Fotografía ---------- */
.photo-fig{ margin:0; }
.photo-fig figcaption{ margin-top:14px; display:flex; flex-direction:column; gap:4px; }
.pf-name{ font-family:var(--display); font-weight:700; font-size:20px; }
.fakephoto{ aspect-ratio:4/3; border-radius:var(--r-ui); position:relative; overflow:hidden; border:1px solid var(--gris-lin);
  background:
    radial-gradient(70% 90% at 28% 22%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(120% 120% at 80% 90%, rgba(255,255,255,.05), transparent 60%),
    repeating-linear-gradient(115deg, #161616 0 16px, #1d1d1d 16px 17px),
    #101010; }
.fakephoto::after{ content:attr(data-ph); position:absolute; bottom:10px; left:12px; z-index:3;
  font-family:var(--sans); font-weight:500; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.fp--duo{ background:
    radial-gradient(70% 90% at 28% 22%, rgba(197,241,53,.9), transparent 55%),
    radial-gradient(120% 120% at 80% 90%, rgba(197,241,53,.25), transparent 60%),
    repeating-linear-gradient(115deg, #141a05 0 16px, #1b2208 16px 17px),
    #0c0f04; }
.fp--bad{ background:
    radial-gradient(60% 80% at 30% 25%, #ff5d8f, transparent 55%),
    radial-gradient(80% 80% at 75% 80%, #38b6ff, transparent 55%),
    linear-gradient(120deg,#ffd23f,#ee4b2b); }
.fp--wm{ display:grid; place-items:center; }
.wm-mark{ width:46%; height:46%; color:rgba(197,241,53,.32); }
.photo-fig--sm{ position:relative; }
.photo-fig--sm .fakephoto{ aspect-ratio:1; }
.judge{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; z-index:4; }
.judge [data-icon]{ width:15px; height:15px; }
.judge--ok{ background:var(--lima); color:var(--negro); }
.judge--no{ background:#E0533D; color:#fff; }
.rules--dark li{ color:#C7C7C7; border-bottom-color:var(--gris-lin); }
.rules--dark li strong{ color:#fff; }
.rules--dark li::before{ border-color:#fff; }

/* icon button */
.iconbtn{ width:44px; height:44px; display:inline-grid; place-items:center; border:1px solid var(--gris-lin);
  background:transparent; color:inherit; border-radius:var(--r-ui); cursor:pointer; transition:.16s; }
.iconbtn:hover{ border-color:var(--lima); color:var(--lima); }
.btn [data-icon]{ width:18px; height:18px; }
.iconbtn svg{ width:20px; height:20px; }
.iconbtn [data-icon]{ width:20px; height:20px; }