/* =====================================================================
   dondepescar.com · the redesign approved on 24 Oct 2026
   Ported as is from the design session's src/css/ (redstonelabs/dondepescar,
   docs/sitio-web/diseno/): 00-tokens, 10-base, 20-components, 30-home,
   40-pages, 50-motion. The last block, "sitio", holds what the real site
   adds: the menu as a popover, the migrated article bodies, the video
   player, the comments, the photo credit and the sign-up states.
   Fonts: Archivo Black, Archivo and Inter (SIL Open Font License),
   self-hosted in /fonts/.
   ===================================================================== */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ArchivoBlack-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Archivo-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/Inter-var.woff2) format('woff2')}

/* ---------- 00-tokens.css ---------- */
/* =====================================================================
   dondepescar.com · tokens
   Misma familia que la app (brief.md, tabla de color aprobada) y el panel
   web de negocios. El sitio es claro primero (es para leer) y tiene modo
   oscuro completo. Cabecera y pie son la banda negra de la marca en ambos modos.
   ===================================================================== */
:root{
  color-scheme:light;
  /* base y superficies */
  --bg:#FFFFFF; --bg2:#FAF8F3;
  --sf:#F4F0E6; --sf2:#E9E3D4;
  --ink:#111111; --ink2:#4F4B44; --ink3:#6B665D;
  --line:#E4DED2; --line2:#C9C1B0;
  --field:#FFFFFF; --fl:#8C877C;
  /* verde: acción, selección, buena noticia */
  --green:#15803D; --on-green:#FFFFFF; --link:#116600; --tint:#E3F3DC;
  /* amarillo: saber antes de actuar (una vez por pantalla, texto negro) */
  --yellow:#FFCC00; --on-yellow:#111111; --yellow-tint:#FFF4C2;
  /* coral: puede dañar (veda, error) */
  --coral:#B23A33; --on-coral:#FFFFFF; --coral-tint:#FBE9E7;
  /* agua: solo mapas */
  --water:#CFE3E8; --land:#F4F0E6; --land-hi:#E3F3DC; --border-map:#B5AE9F;
  /* banda de marca (cabecera, pie, tarjeta de la app) */
  --band:#000000; --band2:#141414; --band-ink:#F5F5F3; --band-ink2:#B9B4AA; --band-line:#2A2A2A;
  --band-field:#1C1C1E; --band-fl:#8E8E93; --band-link:#7ED957; --band-coral:#E5534B; --band-ph:#A9A59C;
  --lime:#B2DF00; /* solo decorativo sobre negro: diana, banda diagonal, una palabra del titular de la app */
  --brand-green:#116600; /* la banda diagonal: igual en los dos modos */
  --line-ctl:#8C877C; /* borde de controles: 3:1 */
  --sel-bg:var(--tint); --sel-ink:var(--link); /* seleccionado */
  --focus:#116600;
  --sh1:0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
  --sh2:0 12px 32px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.06);
  --scrim:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.78) 100%);
  /* tipografía */
  --fd:'Archivo Black','Arial Black',Impact,sans-serif;     /* display, mayúsculas */
  --fk:'Archivo','Arial Narrow',Arial,sans-serif;            /* antetítulos y botones, 700 */
  --fb:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* medidas */
  --wrap:1200px; --read:680px; --side:300px; --gut:24px;
  --r-s:12px; --r-card:16px; --r-l:20px; --r-btn:999px; --r-fld:12px;
  --hdr-h:64px;
}
/* superficies negras en los dos modos: el foco y los enlaces usan el verde claro */
.hdr,.ftr,.sheet,.hero:not(.hero-b),.cover,.appcard,.appband,.next,.skip{--focus:#7ED957}
@media (max-width:719px){ :root{ --gut:16px; --hdr-h:56px; } }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#000000; --bg2:#0B0B0C;
    --sf:#1C1C1E; --sf2:#2C2C2E;
    --ink:#F5F5F3; --ink2:#C7C3BA; --ink3:#9C978E;
    --line:#2C2C2E; --line2:#48484C;
    --field:#1C1C1E; --fl:#76767C;
    --green:#4FB532; --on-green:#0D0D0D; --link:#7ED957; --tint:#1B2F19;
    --yellow-tint:#3A3000;
    --coral:#E5534B; --on-coral:#0D0D0D; --coral-tint:#2E1514;
    --water:#12262C; --land:#1C1C1E; --land-hi:#1B2F19; --border-map:#48484C;
    --band:#000000; --band2:#141414; --band-line:#2C2C2E;
    --focus:#7ED957; --line-ctl:#8E8E93;
    --sh1:0 0 0 1px rgba(255,255,255,.08);
    --sh2:0 16px 40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000; --bg2:#0B0B0C;
  --sf:#1C1C1E; --sf2:#2C2C2E;
  --ink:#F5F5F3; --ink2:#C7C3BA; --ink3:#9C978E;
  --line:#2C2C2E; --line2:#48484C;
  --field:#1C1C1E; --fl:#76767C;
  --green:#4FB532; --on-green:#0D0D0D; --link:#7ED957; --tint:#1B2F19;
  --yellow-tint:#3A3000;
  --coral:#E5534B; --on-coral:#0D0D0D; --coral-tint:#2E1514;
  --water:#12262C; --land:#1C1C1E; --land-hi:#1B2F19; --border-map:#48484C;
  --band:#000000; --band2:#141414; --band-line:#2C2C2E;
  --focus:#7ED957; --line-ctl:#8E8E93;
  --sh1:0 0 0 1px rgba(255,255,255,.08);
  --sh2:0 16px 40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12);
}

/* ---------- 10-base.css ---------- */
/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--fb);font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
main:focus{outline:0}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--yellow);color:var(--on-yellow);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:8px}
.num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- tipografía: tres títulos de página, una clase de título de sección ---------- */
.h1-hero,.h1-page,.h1-cover{font-family:var(--fd);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:.98;margin:12px 0 12px}
.h1-hero{font-size:64px}
.h1-page{font-size:52px}
.h1-cover{font-size:60px}
.h1-art{font:750 44px/1.12 var(--fb);letter-spacing:-.02em;margin:12px 0 14px}
@media (max-width:1023px){.h1-hero{font-size:48px}.h1-cover{font-size:48px}.h1-page{font-size:44px}}
@media (max-width:719px){.h1-hero{font-size:38px}.h1-cover,.h1-page{font-size:34px}.h1-art{font-size:30px}}
.h2{font-family:var(--fd);font-weight:400;text-transform:uppercase;font-size:24px;line-height:1.05;margin:0 0 16px;letter-spacing:-.005em}
@media (max-width:719px){.h2{font-size:22px}}
.kick{font:700 12.5px/1.25 var(--fk);text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);margin:0}
.kick a{color:var(--link);text-decoration:none}
.kick a:hover{text-decoration:underline}
.lead{font-size:18px;line-height:1.55;color:var(--ink2);margin:0}
.meta{font-size:14px;color:var(--ink3);margin:0}
.meta.cnt{margin-top:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
@media (max-width:719px){.lead{font-size:17px}}

/* ---------- layout ---------- */
.wrap{max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding-inline:var(--gut)}
.blk{padding-block:48px}
.blk+.blk{padding-top:8px}
.blk-alt,.blk+.blk-alt,.blk-alt+.blk{padding-top:48px}
.blk-alt{background:var(--bg2);border-block:1px solid var(--line)}
@media (max-width:719px){.blk,.blk-alt,.blk+.blk-alt,.blk-alt+.blk{padding-block:32px}.blk+.blk{padding-top:8px}}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin-bottom:16px;flex-wrap:wrap}
.sec-h .h2{margin:0}
.more{font:700 13px/1.2 var(--fk);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--link)}
.more:hover{text-decoration:underline}
.grid{display:grid;gap:var(--gap,24px)}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wide-gap{--gap:48px}
.tiles{--gap:10px}
.rows2{--gap:0 32px}
@media (max-width:1023px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:719px){.g4,.g3,.g2{grid-template-columns:minmax(0,1fr)}.g4.keep2,.g3.keep2,.g2.keep2{grid-template-columns:repeat(2,minmax(0,1fr));--gap:12px}.wide-gap{--gap:40px}}
@media (max-width:359px){.g4.keep2,.g3.keep2,.g2.keep2{grid-template-columns:minmax(0,1fr)}}
.with-side{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:48px;align-items:start}
@media (max-width:1023px){.with-side{grid-template-columns:minmax(0,1fr)}}
.side{display:grid;gap:24px;align-self:stretch;align-content:start}
.side>.appcard:last-child{position:sticky;top:calc(var(--hdr-h) + 16px)}
.stackL>*+*{margin-top:40px}
@media (max-width:719px){.stackL>*+*{margin-top:32px}}
.only-phone{display:none}
@media (max-width:1023px){.only-phone{display:block}.only-desk{display:none}}
.phone-end{display:none;margin-top:40px}
@media (max-width:1023px){.phone-end{display:grid;gap:32px}}
.more-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ---------- 20-components.css ---------- */
/* ---------- íconos ---------- */
.ic{width:20px;height:20px;flex:none;fill:currentColor}
.ic.s16{width:16px;height:16px}.ic.s24{width:24px;height:24px}.ic.s28{width:28px;height:28px}

/* ---------- botones: uno principal por vista ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;font:700 14px/1.15 var(--fk);text-transform:uppercase;letter-spacing:.07em;text-decoration:none;white-space:nowrap;transition:transform .12s ease,background-color .15s ease}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--green);color:var(--on-green)}
.btn-p:hover{background:color-mix(in srgb,var(--green) 88%,#000)}
.btn-s{background:var(--sf);color:var(--ink);border-color:var(--line-ctl)}
.btn-s:hover{background:var(--sf2)}
.btn-g{background:rgba(255,255,255,.08);color:var(--band-ink);border-color:var(--band-fl)}
.btn-g:hover{background:rgba(255,255,255,.16)}
.btn-sm{min-height:40px;padding:0 14px;font-size:12.5px}
@media (max-width:719px){.btn{white-space:normal;text-align:center}}
.ibtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:0;background:transparent;color:inherit;cursor:pointer}
.ibtn:hover{background:rgba(255,255,255,.12)}

/* ---------- chips: filtro, enlace a un tema; seleccionado = tinte verde ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips.inline{display:inline-flex}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--sf);color:var(--ink);text-decoration:none;font:500 14.5px/1.2 var(--fb);border:1px solid var(--line);cursor:pointer}
.chip:hover{background:var(--sf2)}
.chip .n{color:var(--ink2);font-variant-numeric:tabular-nums}
.chip[aria-current="page"],.chip[aria-pressed="true"]{background:var(--sel-bg);color:var(--sel-ink);border-color:var(--sel-ink);font-weight:650}
.chip[aria-current="page"] .n,.chip[aria-pressed="true"] .n{color:var(--sel-ink)}
.chip.on-dark{background:rgba(255,255,255,.12);color:var(--band-ink);border-color:rgba(255,255,255,.3)}
.chip.on-dark:hover{background:rgba(255,255,255,.2)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}

/* ---------- cabecera ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--band);color:var(--band-ink);border-bottom:1px solid var(--band-line)}
.hdr-in{display:flex;align-items:center;gap:20px;height:var(--hdr-h)}
.logo{display:flex;align-items:center;flex:none;text-decoration:none;color:inherit;margin-top:2px}
.logo img{height:52px;width:auto}
.nav{display:flex;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;color:var(--band-ink);text-decoration:none;font:600 15px/1 var(--fb);border-radius:8px}
.nav a:hover{background:rgba(255,255,255,.1)}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--band-link);border-radius:0}
.hdr-act{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr-search{display:flex;align-items:center;width:240px;height:40px;border-radius:999px;background:var(--band-field);border:1px solid var(--band-fl)}
.hdr-search:focus-within{border-color:var(--band-link);box-shadow:0 0 0 1px var(--band-link)}
.hdr-search input{flex:1;min-width:0;width:0;height:100%;border:0;background:transparent;color:var(--band-ink);padding:0 4px 0 16px;outline:0;font-size:15px}
.hdr-search input::placeholder{color:var(--band-ph)}
.hdr-search button{display:grid;place-items:center;width:40px;height:40px;border:0;background:none;color:var(--band-ink);cursor:pointer;border-radius:999px}
.app-btn{white-space:nowrap}
.app-btn[aria-current="page"]{color:var(--band-link);border-color:var(--band-link)}
.hdr .menu-btn,.hdr .hdr-q{display:none}
@media (max-width:1180px){.hdr-search{width:180px}}
@media (max-width:1023px){.nav,.hdr-search{display:none}.hdr .menu-btn,.hdr .hdr-q{display:inline-grid}}
@media (max-width:719px){.hdr-in{gap:4px}.logo img{height:42px}.app-btn{padding:0 10px;min-height:36px}}
@media (max-width:400px){.app-btn .ic{display:none}}
.crumbs{font-size:14px;color:var(--ink3);padding-top:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0}
.crumbs li+li::before{content:'›';margin-right:8px;color:var(--ink3)}
.crumbs a{color:var(--link)}
.crumb-up{display:none}
@media (max-width:719px){.crumbs ol{display:none}.crumb-up{display:inline-flex;align-items:center;gap:4px;min-height:40px;color:var(--link);text-decoration:none;font-weight:600}}

/* menú del teléfono y la tableta */
.sheet{position:fixed;inset:0;z-index:60;background:var(--band);color:var(--band-ink);display:flex;flex-direction:column;padding:0 var(--gut) 24px;overflow:auto;overscroll-behavior:contain}
.sheet>*{flex:none}
@media (min-width:1024px){.sheet{display:none}}
.sheet .hdr-in{border-bottom:1px solid var(--band-line);margin:0 calc(-1*var(--gut));padding:0 var(--gut)}
.sheet nav{display:grid;margin:8px 0 24px}
.sheet nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;color:var(--band-ink);text-decoration:none;font:400 24px/1 var(--fd);text-transform:uppercase;border-bottom:1px solid var(--band-line)}
.sheet nav a[aria-current="page"]{color:var(--band-link)}
.sheet .sub{display:grid;gap:2px}
.sheet .sub a{color:var(--band-ink2);text-decoration:none;min-height:44px;display:flex;align-items:center;font-size:16px}

/* ---------- buscador ---------- */
.search{display:flex;align-items:center;gap:8px;background:var(--field);border-radius:999px;padding:5px 5px 5px 18px;border:1.5px solid var(--fl);max-width:640px;margin-top:20px}
.search:focus-within{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.search>.ic{color:var(--ink3)}
.search input{flex:1 1 auto;width:0;min-width:0;border:0;background:transparent;outline:0;font-size:17px;min-height:44px;color:var(--ink)}
.search input::placeholder{color:var(--ink3)}
.search.big{max-width:720px}
@media (max-width:719px){.search{padding-left:14px}.search .btn{padding:0 14px}}

/* ---------- tarjetas y filas ---------- */
.card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;min-width:0}
.card .ph{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--sf2)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.03)}
.card h3{font:650 17px/1.3 var(--fb);margin:2px 0 0;letter-spacing:-.01em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card:hover h3{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.card.sm h3{font-size:16px}
/* lugar destacado: foto con el nombre encima; en el teléfono, el nombre abajo */
.place-card{position:relative}
.place-card .ph{aspect-ratio:3/4}
.place-card .ph::after{content:'';position:absolute;inset:0;background:var(--scrim)}
.place-card .cap{position:absolute;left:16px;right:16px;bottom:14px;color:#fff}
.place-card .cap .kick{color:#fff}
.place-card .cap h3{color:#fff;font:400 24px/1.02 var(--fd);text-transform:uppercase;-webkit-line-clamp:3}
.place-card .cap p{margin:6px 0 0;font-size:14px;color:#fff}
@media (max-width:719px){.place-card .ph{aspect-ratio:4/3}.place-card .ph::after{display:none}.place-card .cap{position:static;color:var(--ink);margin-top:2px}.place-card .cap .kick{color:var(--ink3)}.place-card .cap h3{color:var(--ink);font-size:18px}.place-card .cap p{color:var(--ink3)}}
.row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;text-decoration:none;color:inherit;padding:14px 0;border-top:1px solid var(--line)}
.rows>.row:first-child,.grid>.row:nth-child(-n+2){border-top:0}
.row .ph{aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;background:var(--sf2)}
.row .ph>img{width:100%;height:100%;object-fit:cover}
.row .ph .minimap{height:100%;border-radius:0;box-shadow:none}
.row .ph .minimap svg{height:100%}
.row h3{font:650 16px/1.35 var(--fb);margin:3px 0 4px;color:var(--ink)}
.row:hover h3{color:var(--link);text-decoration:underline}
@media (max-width:719px){.row{grid-template-columns:80px minmax(0,1fr)}.grid>.row:nth-child(2){border-top:1px solid var(--line)}}
/* especies y técnicas */
.tile{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-s);background:var(--sf);text-decoration:none;color:var(--ink);border:1px solid var(--line);min-height:64px}
a.tile:hover{background:var(--sf2)}
.tile>.ic{color:var(--ink2)}
.tile b{font-weight:650;font-size:16px;display:block}
.tile span{font-size:14px;color:var(--ink3)}
.tile .go{margin-left:auto;color:var(--ink3)}
/* listas con nombre y detalle: el nombre en tinta, el detalle en gris */
.cols-list,.biz-list{list-style:none;margin:0;padding:0}
.cols-list a,.biz-list a{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.cols-list li:first-child a,.biz-list li:first-child a{border-top:0;padding-top:0}
.cols-list .av{width:44px;height:44px;border-radius:50%;background:var(--sf2);display:grid;place-items:center;font:400 15px var(--fd);color:var(--ink2);flex:none}
.biz-list .mk{width:44px;height:44px;border-radius:var(--r-s);background:var(--sf);display:grid;place-items:center;color:var(--ink2);flex:none;border:1px solid var(--line)}
.cols-list b,.biz-list b{display:block;font-weight:650;font-size:16px;color:var(--ink)}
.cols-list .sub,.biz-list .sub{display:block;font-size:14px;color:var(--ink3)}
.cols-list a:hover b,.biz-list a:hover b{color:var(--link);text-decoration:underline}

/* ---------- avisos ---------- */
.notice{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-s);padding:14px 16px;font-size:15px;line-height:1.5}
.notice.warn{background:var(--yellow);color:var(--on-yellow)}
.notice.info{background:var(--sf);color:var(--ink);border:1px solid var(--line)}
.notice.danger{background:var(--coral-tint);color:var(--ink);box-shadow:inset 3px 0 0 var(--coral)}
.notice.danger>.ic{color:var(--coral)}
.notice b{font-weight:650}
.notice a{color:inherit;font-weight:600}
.nodata{color:var(--ink3)}
.nodata a{color:var(--link)}

/* ---------- publicidad: alto reservado, etiqueta visible, sin landmark ---------- */
/* patrocinadores: su propio bloque, también en el teléfono */

/* ---------- la app ---------- */
.appcard{position:relative;overflow:hidden;background:var(--band);color:var(--band-ink);border-radius:var(--r-l);padding:24px;border:1px solid var(--band-line)}
.appcard .kick{color:var(--band-ink2)}
.appcard .t{font:400 24px/1.02 var(--fd);text-transform:uppercase;margin:10px 0 10px}
.appcard>.kick,.appcard>.t{padding-right:64px}
.appcard>p:not(.kick):not(.fine){color:var(--band-ink2);margin:0 0 16px;font-size:15.5px}
.appcard .diana{position:absolute;right:-56px;top:-56px;width:150px;height:150px;opacity:.85;pointer-events:none}
.appform{display:flex;flex-direction:column;gap:8px}
.appform .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.appform.wide{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
.appform.wide .fld{flex:2 1 220px}
.appform.wide select{flex:1 1 180px}
.appform input,.appform select{width:100%;min-width:0;min-height:44px;border-radius:999px;border:1.5px solid var(--band-fl);padding:0 18px;background:var(--band-field);color:var(--band-ink);font-size:16px}
.appform select{appearance:none;-webkit-appearance:none;padding-right:40px;background:var(--band-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23C7C3BA' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") no-repeat right 14px center/16px}
.appform input::placeholder{color:var(--band-ph)}
.appform input:focus,.appform select:focus{outline:0;border-color:var(--band-link);box-shadow:0 0 0 1px var(--band-link)}
.appform input[aria-invalid="true"]{border-color:var(--band-coral)}
.appform .err{margin:0 0 0 6px;color:var(--band-coral);font-size:14px;display:flex;gap:6px;align-items:center}
.appform .btn{align-self:flex-start}
.fine{font-size:12.5px;color:var(--band-ph);margin:10px 0 0;line-height:1.45}
.fine a{color:var(--band-ink2)}
.joined{display:flex;gap:10px;align-items:center;color:var(--band-ink);margin:0}
.joined .ic{color:var(--band-link)}
.appband{background:var(--band);color:var(--band-ink);overflow:hidden;position:relative}
.appband .in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-block:56px}
.appband .kick{color:var(--band-ink2)}
.appband h2{font:400 44px/1 var(--fd);text-transform:uppercase;margin:12px 0 14px}
.appband h2 em{font-style:normal;color:var(--lime)}
.appband p:not(.kick):not(.fine){color:var(--band-ink2);font-size:17px;margin:0 0 20px;max-width:56ch}
.appband .pistas{margin:0 0 24px}
@media (max-width:1023px){.appband .in{grid-template-columns:minmax(0,1fr)}.appband .tphone{display:none}}
@media (max-width:719px){.appband h2{font-size:32px}.appband .in{padding-block:40px}}
/* pistas: lo poco que se cuenta de la app */
.pistas{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pistas li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.pistas .ic{flex:none;color:var(--link)}
.appcard .pistas,.appband .pistas{color:var(--band-ink)}
.appcard .pistas .ic,.appband .pistas .ic{color:var(--band-link)}
.appcard .pistas{margin:18px 0 12px;gap:8px;font-size:14px}
.more-pistas{margin:12px 0 0;font-size:14px}
.more-pistas a{color:var(--band-link);display:inline-flex;gap:6px;align-items:center}
.blk .pistas{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.blk .pistas li{flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;font-size:17px;color:var(--ink)}
.blk .pistas .ic{width:28px;height:28px}
@media (max-width:1023px){.blk .pistas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:719px){.blk .pistas{grid-template-columns:minmax(0,1fr);gap:12px}}
.diag{height:10px;background:repeating-linear-gradient(-55deg,var(--brand-green) 0 18px,var(--lime) 18px 24px,var(--band) 24px 42px)}

/* compartir y cómo llegar */
.share{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:18px 0;border-block:1px solid var(--line);margin:28px 0}
.share .kick{margin-right:6px}
.howto{position:relative;display:inline-block}
.howto summary{list-style:none}
.howto summary::-webkit-details-marker{display:none}
.howto[open] summary .ic:last-child{transform:rotate(180deg)}
.howto-m{position:absolute;z-index:20;left:0;top:calc(100% + 6px);min-width:200px;background:var(--bg);color:var(--ink);border-radius:var(--r-s);box-shadow:var(--sh2);padding:6px;display:grid}
.howto-m a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600}
.howto-m a:hover{background:var(--sf)}

/* ---------- mapa de México: imagen de apoyo; la lista es el camino ---------- */
.mx{position:relative;margin:0}
.mx svg{width:100%;height:auto;background:var(--water);border-radius:var(--r-card)}
.mx .st{fill:var(--land);stroke:var(--border-map);stroke-width:1;transition:fill .15s}
.mx a:hover .st{fill:var(--land-hi)}
.mx .pin{fill:var(--ink);stroke:var(--bg);stroke-width:1.5}
.mx a:hover .pin{fill:var(--green)}
@media (max-width:719px){.mx svg a{pointer-events:none}}
.mx-legend{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink3);margin-top:10px}
.mx-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ink);margin-right:6px;vertical-align:-1px;box-shadow:0 0 0 1.5px var(--bg)}
.states{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.states a{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:44px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:15px}
.states a:hover{color:var(--link)}
.states a span{color:var(--ink3);font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}
@media (max-width:719px){.states{grid-template-columns:minmax(0,1fr)}.states.top li:nth-child(n+7){display:none}}
.more-states{margin-top:14px}
.more-states summary{list-style:none;cursor:pointer}
.more-states summary::-webkit-details-marker{display:none}
.more-states .c,.more-states[open] .o{display:none}
.more-states[open] .c{display:inline}
.more-states[open] summary .ic{transform:rotate(180deg)}
.more-states[open] .states{margin-top:6px}

/* ---------- pie ---------- */
.ftr{background:var(--band);color:var(--band-ink2);padding:0 0 32px}
.ftr .diag{margin-bottom:40px}
.ftr .cols{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:32px}
.ftr h2{font:700 12.5px/1 var(--fk);text-transform:uppercase;letter-spacing:.09em;color:var(--band-ink);margin:0 0 10px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid}
.ftr a{color:var(--band-ink2);text-decoration:none;font-size:15px;display:inline-flex;min-height:40px;align-items:center}
.ftr a:hover{color:var(--band-ink);text-decoration:underline}
.ftr .about{font-size:14.5px;line-height:1.6;margin:12px 0 0;max-width:36ch}
.ftr .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--band-line);margin-top:32px;padding-top:20px;font-size:13.5px}
.seg{display:inline-flex;padding:3px;margin:0;border-radius:999px;background:var(--band-field);border:1px solid var(--band-fl)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;color:var(--band-ink2);font-size:14px}
.seg input:checked+span{background:var(--band-ink);color:#111;font-weight:650}
.seg input:focus-visible+span{outline:3px solid var(--band-link);outline-offset:1px}
@media (max-width:1023px){.ftr .cols{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr .brand{grid-column:1/-1}}
@media (max-width:719px){.ftr .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:var(--r-s);font-size:15px;box-shadow:var(--sh2);max-width:calc(100% - 32px);animation:tin .25s ease}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}}
@media (forced-colors:active){.btn,.chip,.search,.appform input,.appform select,.tile,.notice{border:1px solid CanvasText}}

/* ---------- 30-home.css ---------- */
/* ---------- portada y cabeceras con foto a sangre ---------- */
.hero{position:relative;background:var(--band);color:var(--band-ink);overflow:hidden;isolation:isolate}
.hero .bgimg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero .stick{position:relative;isolation:isolate}
.hero .stick::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.3) 100%)}
.hero .in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-block:72px 64px;min-height:560px}
.hero .kick{color:var(--band-ink2)}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero .lead{color:var(--band-ink);max-width:46ch}
.hero .chips{margin-top:16px}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin:28px 0 0}
.facts>div{display:flex;flex-direction:column-reverse}
.facts dd{margin:0;font:400 30px/1 var(--fd);color:var(--band-ink)}
.facts dt{font-size:13.5px;color:var(--band-ink2);margin-top:4px}
@media (max-width:1023px){.hero .in{grid-template-columns:minmax(0,1fr);gap:32px;min-height:0;padding-block:48px}}
@media (max-width:719px){.hero .in{padding-block:32px}.hero .stick::after{background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.86))}.facts{gap:20px}.facts dd{font-size:24px}}

/* lo que viene (página /proximamente) */
.hero-a .hero-form{margin-top:24px;max-width:600px}
@media (max-width:1023px){.hero-a .tphone{display:none}}

/* portada · a la par: la pregunta del sitio y lo que viene */
.hero-c .appcard{background:rgba(10,10,10,.78);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-color:rgba(255,255,255,.18)}
.hero-c .appcard .t{font-size:28px}
@media (max-width:719px){.hero-c .appcard .t{font-size:24px}}

/* cabecera de lugar con foto grande */
.cover{position:relative;color:var(--band-ink);isolation:isolate;background:var(--band);margin-top:14px}
.cover .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cover::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.86) 100%)}
.cover .in{min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;padding-block:28px}
.cover .kick{color:var(--band-ink)}
.cover .sub{font-size:18px;color:var(--band-ink);margin:0}
.cover .acts,.splithead .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:flex-start}
.cover .notice,.splithead .notice{margin-top:16px;max-width:640px}
@media (max-width:719px){.cover .in{min-height:340px}.cover .sub{font-size:16px}}

/* bloques de la portada */
.mx-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px;align-items:start}
@media (max-width:1023px){.mx-split{grid-template-columns:minmax(0,1fr)}}
.tour{list-style:none;margin:0;padding:0}
.tour li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.tour li:first-child{border-top:0;padding-top:0}
.tour .dt{font:400 13px/1.1 var(--fd);text-transform:uppercase;color:var(--ink);text-align:center;background:var(--sf);border-radius:var(--r-s);padding:9px 4px;border:1px solid var(--line)}
.tour .dt b{display:block;font-size:24px;line-height:1;font-weight:400}
.tour .dt span{display:block;font:600 12px var(--fb);color:var(--ink3);margin-top:2px}
.tour .dt.none{display:grid;place-items:center;min-height:64px;color:var(--ink3)}
.tour a{color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;line-height:1.35}
.tour a:hover{color:var(--link);text-decoration:underline}
.tour .meta{margin-top:4px}
.tour .meta b{font-weight:600;color:var(--ink2)}

/* torneos de hace más de seis meses: sin fecha, con menos peso */
.tour li.old{grid-template-columns:minmax(0,1fr);padding:10px 0}
.tour li.old a{font-weight:500;font-size:15px;color:var(--ink2)}

/* especies con foto: grandes; las demás en chips */
.sp-big .place-card .ph{aspect-ratio:4/5}
.sp-big .cap .kick{text-transform:none;letter-spacing:0;font:italic 400 14px var(--fb)}
.sp-more{margin-top:20px;align-items:center}
@media (max-width:719px){.sp-big .place-card .ph{aspect-ratio:1}}

/* técnicas: tarjeta con ícono y una línea */
.tcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 48px 20px 20px;border-radius:var(--r-l);background:var(--bg2);border:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:100%}
.tcard .ti{width:52px;height:52px;border-radius:var(--r-s);background:var(--tint);color:var(--link);display:grid;place-items:center;margin-bottom:6px}
.tcard b{font:400 22px/1.05 var(--fd);text-transform:uppercase}
.tcard .d{color:var(--ink2);font-size:15px}
.tcard .c{color:var(--ink3);font-size:14px;margin-top:auto;padding-top:4px}
.tcard .go{position:absolute;right:18px;top:22px;color:var(--ink3)}
.tcard:hover b,.tcard:hover .go{color:var(--link)}

/* columnas: quién escribe y su texto más reciente */
.ccard{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--r-l);background:var(--bg);border:1px solid var(--line)}
.ccard .who{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.ccard .av{width:52px;height:52px;border-radius:50%;background:var(--band);color:var(--band-ink);display:grid;place-items:center;font:400 17px var(--fd);flex:none}
.ccard b{display:block;font:400 19px/1.1 var(--fd);text-transform:uppercase}
.ccard .sub{display:block;font-size:14px;color:var(--ink3);margin-top:2px}
.ccard .who:hover b{color:var(--link)}
.ccard .last{color:var(--ink);text-decoration:none;font:600 16px/1.4 var(--fb);border-top:1px solid var(--line);padding-top:12px;overflow-wrap:anywhere}
.ccard .last:hover{color:var(--link);text-decoration:underline}
@media (prefers-reduced-motion:no-preference){.tcard,.ccard{transition:transform .25s cubic-bezier(.2,.7,.2,1)}.tcard:hover,.ccard:hover{transform:translateY(-3px)}.tcard .go{transition:transform .2s}.tcard:hover .go{transform:translateX(4px)}}

/* especies: tarjetas grandes; la que no tiene foto propia lleva la diana */
.sp-rail{grid-auto-columns:calc((100% - 3*24px)/4)}
.sp-feat .ph{aspect-ratio:4/5}
.sp-feat .cap .kick{text-transform:none;letter-spacing:0;font:italic 400 14px var(--fb)}
.sp-feat.noimg .ph{background:var(--band);display:grid;place-items:center}
.sp-feat.noimg .ph::after{display:none}
.sp-feat.noimg .diana{position:absolute;width:150%;height:auto;left:-25%;top:50%;margin-top:-75%;opacity:.5;overflow:visible}
.sp-feat.noimg .fishic{position:relative;width:64px;height:64px;color:var(--band-link);margin-bottom:30%}
@media (max-width:1023px){.sp-rail{grid-auto-columns:calc((100% - 24px)/2.3)}}
@media (max-width:719px){.sp-rail{grid-auto-columns:62%}.sp-feat .ph{aspect-ratio:4/5}.sp-feat .ph::after{display:block}.sp-feat .cap{position:absolute;left:14px;right:14px;bottom:12px;color:#fff;margin:0}.sp-feat .cap .kick,.sp-feat .cap h3,.sp-feat .cap p{color:#fff}.sp-feat .cap h3{font:400 22px/1.02 var(--fd);text-transform:uppercase}}
/* el titular de la portada es largo: un poco más chico que el de la página de la app */
.hero-c .h1-hero{font-size:54px}
@media (max-width:1023px){.hero-c .h1-hero{font-size:44px}}
@media (max-width:719px){.hero-c .h1-hero{font-size:34px}}
/* nombres de las especies, grandes y solo con contorno, detrás de las tarjetas: solo en la portada cinemática */
.sp-marq{display:none;position:absolute;left:0;top:50%;translate:0 -50%;white-space:nowrap;font:400 clamp(96px,12vw,176px)/1 var(--fd);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--line2);pointer-events:none;z-index:0}

/* dónde y cómo pescar: en el teléfono, técnicas en dos columnas sin la línea y solo tres columnas de autor */
@media (max-width:719px){.tech-cards{grid-template-columns:repeat(2,minmax(0,1fr));--gap:12px}.tcard{padding:14px 34px 14px 14px}.tcard .d{display:none}.tcard b{font-size:17px}.tcard .ti{width:44px;height:44px}.tcard .go{right:12px;top:16px}.col-cards>:nth-child(n+4){display:none}}
/* oscuro: las tarjetas sin foto y los círculos de autor no se pierden en el fondo */
.sp-feat.noimg .ph{box-shadow:inset 0 0 0 1px var(--line2)}
.ccard .av{background:var(--ink);color:var(--bg)}
/* el mapa de la portada: el dibujo en su propio recorte, la leyenda fuera */
.mx-clip{border-radius:var(--r-card)}

/* ---------- 40-pages.css ---------- */
/* ---------- cabecera de página (guías, listados, fijas, búsqueda) ---------- */
.phead{padding-block:16px 28px;border-bottom:1px solid var(--line)}
.phead .lead{max-width:62ch}
.phead .chips{margin-top:16px}
.phead .contact{margin-top:20px}
.hub-link{margin:8px 0 0}
@media (max-width:719px){.phead{padding-block:8px 22px}}
.splithead{border-bottom:1px solid var(--line);margin-top:6px}
.splithead .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:40px;align-items:center;padding-block:20px 32px}
.splithead .sub{font-size:18px;color:var(--ink2);margin:0}
.splithead figure{margin:0}
.splithead figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card);background:var(--sf2)}
@media (max-width:1023px){.splithead .in{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:24px}}
@media (max-width:719px){.splithead .in{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:12px 24px}.splithead figure{order:-1}}

/* ---------- datos de un lugar o una guía ---------- */
.facts-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:0}
.facts-dl>div{padding:14px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;align-content:start}
.facts-dl dt{grid-column:2;font:700 12.5px/1.2 var(--fk);text-transform:uppercase;letter-spacing:.09em;color:var(--ink3)}
.facts-dl dd{grid-column:2;margin:0;font-size:15.5px;line-height:1.5}
.facts-dl dd.chips{display:flex;margin-top:4px}
.facts-dl>div>.ic{grid-row:1/3;color:var(--ink2);margin-top:2px}
.facts-dl .wide{grid-column:1/-1}
@media (max-width:719px){.facts-dl{grid-template-columns:minmax(0,1fr)}}

/* ---------- mapa recortado ---------- */
.minimap{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);container-type:inline-size}
.minimap svg{width:100%;height:auto;display:block;background:var(--water)}
.minimap.big svg{min-height:420px;object-fit:cover}
.minimap .st{fill:var(--land);stroke:var(--border-map)}
.minimap .st.cur{fill:var(--bg);stroke:var(--ink2)}
.minimap .near{fill:var(--ink2);stroke:var(--bg)}
.minimap a:hover .near{fill:var(--green)}
.minimap .here{fill:var(--green);stroke:var(--bg)}
.minimap .mlbl{position:absolute;transform:translate(var(--dx,10px),-50%);font:600 12.5px/1.1 var(--fb);color:var(--ink2);white-space:nowrap;pointer-events:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 3px var(--land),0 0 3px var(--land),0 0 2px var(--land)}
.minimap .mlbl.here{font-weight:750;font-size:14px;color:var(--ink);max-width:60%}
.minimap .acts{position:absolute;right:10px;bottom:10px;display:flex;gap:8px}
.minimap .acts .btn{box-shadow:var(--sh2)}
@container (max-width:200px){.minimap .mlbl{display:none}}
.mapfig .minimap{aspect-ratio:4/3}
.mapfig .minimap svg{height:100%}

/* ---------- negocio y listados ---------- */
.contact{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:1023px){.types{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:719px){.types{grid-template-columns:minmax(0,1fr)}}
.byst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;align-items:start}
.byst details{border-bottom:1px solid var(--line)}
.byst summary{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;list-style:none;font-weight:600}
.byst summary::-webkit-details-marker{display:none}
.byst summary .n{margin-left:auto;color:var(--ink3);font-weight:400;font-size:14px}
.byst details[open] summary .ic{transform:rotate(180deg)}
.byst ul{list-style:none;margin:0 0 12px;padding:0}
.byst li{display:flex;justify-content:space-between;gap:12px;align-items:center}
.byst li a{display:flex;align-items:center;min-height:40px;color:var(--link)}
.byst li .n{color:var(--ink3);font-size:14px;font-variant-numeric:tabular-nums}
@media (max-width:1023px){.byst{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:719px){.byst{grid-template-columns:minmax(0,1fr)}}

/* ---------- artículo ---------- */
.art-wrap{padding-block:16px 56px}
.art{max-width:var(--read)}
.art .bylines{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:var(--ink3);font-size:15px}
.art .chip-place{display:inline-flex;align-items:center;gap:6px;color:var(--link);font-weight:600}
.art figure{margin:24px 0}
.art figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card);background:var(--sf2)}
.prose{font-size:18px;line-height:1.7;color:var(--ink);margin-top:20px;overflow-wrap:anywhere}
.h1-art,.row h3,.card h3,.tour a{overflow-wrap:anywhere}
.prose p{margin:0 0 1.1em}
.prose h2{font:700 24px/1.25 var(--fb);margin:1.6em 0 .6em}
.placebox{display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:center;background:var(--sf);border-radius:var(--r-card);padding:14px;border:1px solid var(--line);text-decoration:none;color:var(--ink);margin:28px 0}
.placebox .minimap{border-radius:var(--r-s);aspect-ratio:1}
.placebox .minimap svg{height:100%}
.placebox b{font:400 20px/1.05 var(--fd);text-transform:uppercase;display:block;margin:6px 0 4px}
a.placebox:hover b{color:var(--link)}
.placebox.list{grid-template-columns:minmax(0,1fr);gap:4px}
.placebox.list>a:not(.more){display:flex;align-items:center;gap:8px;min-height:40px;color:var(--ink);text-decoration:none;font-weight:600}
.placebox.list>a span{color:var(--ink3);font-weight:400;font-size:14px}
.placebox.list>a:hover{color:var(--link)}
@media (max-width:719px){.prose{font-size:17px}.placebox{grid-template-columns:96px minmax(0,1fr)}}
.tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:28px}
.more-s{margin-top:48px}

/* ---------- listados ---------- */
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:36px}
.pager ol{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.pager a,.pager li>span{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:999px;text-decoration:none;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.pager a:hover{background:var(--sf)}
.pager [aria-current="page"]{background:var(--sel-bg);color:var(--sel-ink);box-shadow:inset 0 0 0 1px var(--sel-ink)}
.pager .gap{color:var(--ink3);min-width:20px;display:grid;place-items:center}
.pager .nx{display:inline-flex;gap:6px;border:1px solid var(--line-ctl)}
.pager .of{display:none;color:var(--ink2);font-size:15px;padding:0 8px}
@media (max-width:479px){.pager ol{display:none}.pager .of{display:inline}.pager{justify-content:space-between}}
.sample{margin-top:20px;font-style:italic}

/* ---------- especies ---------- */
.sp-card .ph .ph-ic{width:100%;height:100%;display:grid;place-items:center;color:var(--ink3)}
.sp-card i{font-style:italic}

/* ---------- torneos ---------- */
.next{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;background:var(--band);color:var(--band-ink);border-radius:var(--r-l);padding:24px;position:relative;overflow:hidden}
.next .diana{position:absolute;right:-56px;top:-56px;width:150px;height:150px;opacity:.85;pointer-events:none}
.next .big{font:400 15px/1.05 var(--fd);text-transform:uppercase;text-align:center;background:var(--band-field);border-radius:var(--r-card);padding:16px 18px;border:1px solid var(--band-fl)}
.next .big b{display:block;font-size:48px;line-height:1;font-weight:400}
.next .big span{display:block;font:600 13px var(--fb);color:var(--band-ink2);margin-top:4px}
.next h2{font:400 28px/1.02 var(--fd);text-transform:uppercase;margin:6px 0 10px;padding-right:72px}
.next p:not(.kick):not(.warn-chip){margin:0 0 6px;color:var(--band-ink2)}
.next .kick{color:var(--band-ink2)}
.next .warn-chip{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:var(--on-yellow);border-radius:999px;padding:6px 12px;font-weight:650;font-size:14px;margin:6px 0 4px}
.next .contact{margin-top:14px}
@media (max-width:719px){.next{grid-template-columns:minmax(0,1fr)}.next .big{justify-self:start}.next h2{font-size:24px}}
.empty{border-radius:var(--r-l);padding:28px;background:var(--sf);border:1px solid var(--line);display:grid;gap:12px;justify-items:start}
.empty h2{font:400 22px/1.05 var(--fd);text-transform:uppercase;margin:0}
.empty p{margin:0;color:var(--ink2);max-width:60ch}

/* ---------- lo que viene ---------- */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;font-weight:650;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .2s;color:var(--ink3)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{margin:0 0 16px;color:var(--ink2);max-width:64ch}

/* ---------- búsqueda, Anúnciate, 404, fijas ---------- */
.results{padding-block:8px 56px;max-width:860px}
.results .tabs{margin:20px 0 4px}
.res-h{font:700 13px/1.2 var(--fk);text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);margin:32px 0 10px}
.results section>.more{margin-top:4px}
mark{background:var(--sf2);color:inherit;border-radius:3px;padding:0 2px;box-shadow:inset 0 -2px 0 var(--ink3)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.stats>div{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r-s);background:var(--sf);border:1px solid var(--line)}
.stats .ic{color:var(--ink2)}
.stats dd{margin:0;font:400 30px/1 var(--fd)}
.stats dt{font-size:14px;color:var(--ink3);order:3}
@media (max-width:1023px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nf{display:grid;justify-items:start;gap:14px;padding-block:32px 64px}
.nf .code{font:400 120px/.9 var(--fd);color:var(--coral);letter-spacing:-.02em}
.nf .search{width:100%}
@media (max-width:719px){.nf .code{font-size:84px}}
.static{max-width:var(--read);padding-block:8px 56px}

/* ---------- para que una respuesta de IA tenga qué citar y el lector, a qué venir ---------- */
.resumen{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px}
.resumen p:not(.kick){margin:6px 0 0;font-size:18px;line-height:1.55;color:var(--ink)}
.meta.rev{margin:-8px 0 14px}
.vigente{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:15px;color:var(--ink2)}
.vigente .ic{flex:none;margin-top:3px;color:var(--ink3)}
.qa>div{border-top:1px solid var(--line);padding:16px 0}
.qa>div:last-child{border-bottom:1px solid var(--line)}
.qa h3{font:650 17px/1.35 var(--fb);margin:0 0 6px}
.qa p{margin:0;color:var(--ink2);max-width:68ch}
@media (max-width:719px){.resumen p:not(.kick){font-size:17px}}
/* «No confundir» en una especie: una nota, no otra caja */
.ojo{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:15.5px;color:var(--ink2)}
.ojo .ic{flex:none;color:var(--ink3);margin-top:1px}

/* ---------- 50-motion.css ---------- */
/* =====================================================================
   movimiento. Todo es mejora: sin soporte, sin JavaScript o con «reducir
   movimiento», la página se ve completa y quieta. Nada se mueve solo más
   de cinco segundos (WCAG 2.2.2); lo que sigue al scroll lo mueve quien lee.
   ===================================================================== */

/* ---------- piezas nuevas (se ven igual con o sin movimiento) ---------- */
/* el teléfono sin pantallas de la app: dice que es una app sin mostrar qué hace */
.tphone{justify-self:center;width:min(100%,250px);aspect-ratio:9/19;border-radius:42px;padding:8px;background:#1A1A1A;box-shadow:0 0 0 1px #3A3A3C,0 30px 60px rgba(0,0,0,.5);rotate:-6deg}
.tphone .scr{position:relative;height:100%;border-radius:34px;overflow:hidden;display:grid;place-items:center;container-type:inline-size;background:radial-gradient(120% 70% at 50% 42%,#173a1c 0%,#071007 58%,#000 100%)}
.tphone .scr::before{content:'';position:absolute;top:12px;left:50%;translate:-50% 0;width:30%;height:22px;border-radius:999px;background:#000;z-index:1}
.tphone .diana{position:absolute;width:118%;height:auto;left:-9%;top:50%;margin-top:-59%;overflow:visible}
.tphone .diana rect:last-child{display:none}
.tphone .q{position:relative;font:400 36cqi/1 var(--fd);color:var(--band-ink)}
.tphone .lbl{position:absolute;left:0;right:0;bottom:9%;text-align:center;font:700 12px/1 var(--fk);letter-spacing:.16em;text-transform:uppercase;color:var(--band-ink2)}
.appband .tphone{width:min(100%,230px)}

/* el botón de la app en la cabecera lleva un punto: hay algo nuevo */
.app-btn{position:relative}
.app-btn .dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--band-link);box-shadow:0 0 0 2px var(--band)}

/* filas deslizables («slides»): scroll-snap nativo, la siguiente tarjeta se asoma */
.sec-act{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.rail-nav{display:flex;gap:8px}
.rbtn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-ctl);background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.rbtn:hover{border-color:var(--ink)}
.rbtn:disabled{opacity:.35;cursor:default;border-color:var(--line-ctl)}
.rail{list-style:none;margin:-6px 0 0;padding:6px 0 10px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*24px)/3.5);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rail>li{scroll-snap-align:start;min-width:0;display:flex}
.rail>li>*{flex:1}
.rail.arts{grid-auto-columns:calc((100% - 3*24px)/4.3)}
@media (max-width:1023px){.rail{grid-auto-columns:calc((100% - 24px)/2.3)}.rail.arts{grid-auto-columns:calc((100% - 24px)/2.6)}}
@media (max-width:719px){.rail,.rail.arts{grid-auto-columns:78%;gap:12px;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}.rail.arts{grid-auto-columns:62%}.rail-nav{display:none}}

/* cuenta regresiva del próximo torneo */
.next p.countdown{font:400 22px/1 var(--fd);text-transform:uppercase;color:var(--band-link);margin:2px 0 8px}
/* copiar enlace: el botón confirma */
.share [data-copy].done{background:var(--tint);color:var(--link);border-color:var(--link)}
/* la lista de estados y el mapa se señalan entre sí */
.mx .st.hi{fill:var(--land-hi)}
/* barra de lectura del artículo: sigue al scroll (solo con movimiento) */
.progress{position:fixed;left:0;right:0;top:var(--hdr-h);height:3px;background:var(--green);transform-origin:0 50%;scale:0 1;z-index:39;pointer-events:none}
@keyframes dp-prog{to{scale:1 1}}
/* las flechas de una fila no cambian el alto del título al aparecer */
.sec-h{min-height:44px}
/* cifras de la portada: el número final reserva su ancho mientras cuenta */
.facts dd{display:inline-grid}
.facts dd>[aria-hidden]{grid-area:1/1}
.facts dd .ghost{visibility:hidden}
/* sombra de la cabecera al bajar: una capa que solo cambia de opacidad */
.hdr::after{content:'';position:absolute;left:0;right:0;bottom:-14px;height:14px;background:linear-gradient(rgba(0,0,0,.28),transparent);opacity:0;pointer-events:none}

/* ---------- movimiento ---------- */
@media (prefers-reduced-motion:no-preference){
  /* toques: presionar, pasar el puntero, abrir */
  .btn,.chip,.ibtn,.rbtn,.tile,.row,.biz-list a,.cols-list a{transition:transform .18s ease,background-color .2s,border-color .2s,color .2s,box-shadow .2s}
  .btn:active,.chip:active,.ibtn:active,.rbtn:active{transform:scale(.96)}
  .card{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .card:hover{transform:translateY(-4px)}
  .card:hover .ph img{transform:scale(1.05)}
  .row .ph img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .row:hover .ph img{transform:scale(1.06)}
  .tile .go,.more .ic,.more-pistas .ic{transition:transform .2s ease}
  .tile:hover .go,.more:hover .ic,.more-pistas a:hover .ic{transform:translateX(4px)}
  .tile:hover{transform:translateY(-2px)}
  .appcard .diana{transition:rotate .6s cubic-bezier(.2,.7,.2,1)}
  .appcard:hover .diana{rotate:45deg}
  :root:not(.pinged) .app-btn .dot{animation:dp-ping 1.4s ease-out 3}
  .sheet:not([hidden]){animation:dp-down .28s cubic-bezier(.2,.7,.2,1)}
  .joined .ic{animation:dp-pop .5s cubic-bezier(.3,1.6,.5,1)}
  .mx .pin{transform-box:fill-box;transform-origin:center}
  .mx.wait .pin{scale:0}
  .mx.go .pin{animation:dp-pin .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * 6ms)}
  :root:not(.pinged) .tphone .q{animation:dp-pulse 1.6s ease-in-out 3}
  .tphone .diana{animation:dp-spin 1.6s cubic-bezier(.2,.7,.2,1) both}

  /* entrada de la página: el titular y su bloque suben una vez */
  .enter :is(.hero .in>div:not(.tphone),.cover .in,.phead .wrap,.splithead .in>div)>*{animation:dp-up .6s cubic-bezier(.2,.7,.2,1) both}
  .enter :is(.hero .in>div:not(.tphone),.cover .in,.phead .wrap,.splithead .in>div)>:nth-child(2){animation-delay:.05s}
  .enter :is(.hero .in>div:not(.tphone),.cover .in,.phead .wrap,.splithead .in>div)>:nth-child(3){animation-delay:.1s}
  .enter :is(.hero .in>div:not(.tphone),.cover .in,.phead .wrap,.splithead .in>div)>:nth-child(4){animation-delay:.15s}
  .enter :is(.hero .in>div:not(.tphone),.cover .in,.phead .wrap,.splithead .in>div)>:nth-child(n+5){animation-delay:.2s}
  .enter .hero-c .appcard{animation:dp-up .7s .2s cubic-bezier(.2,.7,.2,1) both}

  /* desplazarse: las secciones aparecen al entrar, la foto de la cabecera se queda atrás, la cabecera toma sombra */
  @supports (animation-timeline: view()){
    main :is(.sec-act,.tcard,.ccard,.rows>.row,.grid>.row,.grid>.card,.tile,.tour>li,.facts-dl>div,.qa>div,.blk .pistas>li,.cols-list>li,.biz-list>li,.resumen,.placebox,.mx,.states,.more-s,.empty,.next,.faq,.minimap,.byst>details),.appband .in>div{animation:dp-rv linear both;animation-timeline:view();animation-range:entry var(--st,0%) entry calc(55% + var(--st,0%))}
    .rail>li{animation:dp-slide linear both;animation-timeline:view(inline);animation-range:entry 0% entry 70%}
    /* lo que tiene el foco del teclado se ve entero: nada a medio aparecer. Solo con el teclado (:focus-visible): con el ratón,
       quitar la animación al presionar movería el botón bajo el puntero y el clic se perdería */
    main :is(.sec-act,.tcard,.ccard,.rows>.row,.grid>.row,.grid>.card,.tile,.tour>li,.facts-dl>div,.qa>div,.blk .pistas>li,.cols-list>li,.biz-list>li,.resumen,.placebox,.mx,.states,.more-s,.empty,.next,.faq,.minimap,.byst>details):is(:focus-visible,:has(:focus-visible)),.appband .in>div:has(:focus-visible),.rail>li:has(:focus-visible){animation:none}
    .appband .tphone,.hero-a .tphone{animation:dp-tilt linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
  /* más fuerte en todas las páginas: títulos palabra por palabra, fotos que se abren, tarjetas escalonadas, el mapa que dibuja sus estados */
  .split .w{display:inline-block}
  .enter :is(.h1-hero,.h1-page,.h1-cover,.h1-art).split{animation:none}
  .enter :is(.h1-hero,.h1-page,.h1-cover,.h1-art).split .w{animation:dp-word .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--w) * 55ms)}
  main .grid>:nth-child(4n+2),main .rows>:nth-child(4n+2){--st:5%}
  main .grid>:nth-child(4n+3),main .rows>:nth-child(4n+3){--st:10%}
  main .grid>:nth-child(4n+4),main .rows>:nth-child(4n+4){--st:15%}
  @supports (animation-timeline: view()){
    .h2.split{view-timeline:--h2t block}
    .h2.split .w{animation:dp-word linear both;animation-timeline:--h2t;animation-range:cover calc(var(--w) * 2.5%) cover calc(14% + var(--w) * 2.5%)}
    main :is(.grid>.card .ph,.rows .row .ph,.grid>.row .ph,.art figure,.splithead figure){animation:dp-wipe linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    /* solo los mapas grandes dibujan sus estados; las miniaturas de las filas no */
    :is(.mx,.mapfig .minimap,.stackL>.minimap,#mapa .minimap){view-timeline:--map block}
    :is(.mx,.mapfig .minimap,.stackL>.minimap,#mapa .minimap) .st{animation:dp-draw linear both;animation-timeline:--map;animation-range:entry 5% cover 40%}
  }

  /* cinemático, solo en la portada y en pantallas grandes: la cabecera se queda y la foto se acerca; las especies pasan de lado; el mapa se acerca a los estados */
  @supports (animation-timeline: view()){
    @media (min-width:1024px) and (min-height:780px){
      .hero-c{overflow:clip;height:calc(100vh - var(--hdr-h) + 55vh);view-timeline:--hero block;view-timeline-inset:var(--hdr-h) 0}
      .hero-c .stick{position:sticky;top:var(--hdr-h);height:calc(100vh - var(--hdr-h));overflow:hidden;display:grid;align-items:center}
      .hero-c .in{min-height:0;width:100%}
      .hero-c .stick .bgimg{animation:dp-zoom linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}
      /* se van el antetítulo, el titular, la entrada y las cifras; el buscador y los chips se quedan, usables, frente a la tarjeta de la app */
      .hero-c .in>div:first-child>:is(.kick,.h1-hero,.lead,.facts){transform-origin:0 0;animation:dp-shrink linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}
      /* la sección no se detiene: se fija abajo, sube a un cuarto de velocidad mientras las tarjetas pasan de lado y deja ver
         la sección siguiente al final (--peek). El fondo de puntos baja al paso normal. --pl: lo que dura (el recorrido / 1.5). */
      .sp-pin{--cw:300px;--gap:24px;--hs:min(480px,100vh - var(--hdr-h));--peek:140px;--t:calc(100vh - var(--hs) - var(--peek));
        --pl:calc((var(--n) * (var(--cw) + var(--gap)) - var(--gap) - min(100vw - 2 * var(--gut), var(--wrap))) / 1.5);
        height:calc(var(--hs) + var(--pl));padding:0;view-timeline:--sp block;view-timeline-inset:var(--t) var(--peek);
        background-color:var(--bg2);background-image:radial-gradient(var(--line2) 1px,transparent 1.3px);background-size:22px 22px;border-block:1px solid var(--line)}
      .sp-pin .stick{position:sticky;top:var(--t);height:var(--hs);overflow-x:clip;display:flex;align-items:center}
      .sp-pin .stick>.wrap{position:relative;z-index:1;width:100%;container-type:inline-size;animation:dp-drift linear both;animation-timeline:--sp;animation-range:contain 0% contain 100%}
      .sp-pin .sp-marq{display:block;animation:dp-marq linear both;animation-timeline:--sp;animation-range:cover 0% cover 100%}
      .sp-pin .rail-nav{display:none}
      .sp-pin .rail{--px:calc(var(--n) * (var(--cw) + var(--gap)) - var(--gap) - 100cqi);overflow:visible;width:max-content;grid-auto-columns:var(--cw);animation:dp-hscroll linear both;animation-timeline:--sp;animation-range:contain 0% contain 100%}
      .sp-pin .rail>li{animation:none}
      /* el mapa se acerca un poco; recorta solo el dibujo (clip, no hidden: hidden haría de la caja su propio scroll) y la leyenda queda fuera */
      .mx-cine .mx-clip{overflow:clip;border-radius:var(--r-card)}
      .mx-cine .mx svg{transform-origin:55% 55%;animation:dp-mapzoom linear both;animation-timeline:view();animation-range:entry 30% cover 70%}
    }
  }

  @supports (animation-timeline: scroll()){
    .hero .bgimg,.cover .bgimg{animation:dp-par linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .hdr::after{animation:dp-shadow linear both;animation-timeline:scroll(root);animation-range:0 160px}
    .progress{animation:dp-prog linear both;animation-timeline:scroll(root)}
  }

  /* de una página a otra: fundido corto; la foto de un lugar o un artículo viaja de la tarjeta a la cabecera */
  @view-transition{navigation:auto}
  .hdr{view-transition-name:hdr}
  ::view-transition-old(root){animation:dp-out .18s ease both}
  ::view-transition-new(root){animation:dp-up .32s cubic-bezier(.2,.7,.2,1) both}
  ::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  ::view-transition-old(*),::view-transition-new(*){height:100%;object-fit:cover;overflow:clip}

  /* preguntas y listas plegables: abren con altura animada donde el navegador sabe hacerlo */
  @supports (interpolate-size: allow-keywords){
    :root{interpolate-size:allow-keywords}
    :is(.faq,.byst) details::details-content,.more-states::details-content{height:0;overflow:clip;transition:height .3s ease,content-visibility .3s allow-discrete}
    :is(.faq,.byst) details[open]::details-content,.more-states[open]::details-content{height:auto}
  }
}
@keyframes dp-up{from{opacity:0;translate:0 18px}}
@keyframes dp-down{from{opacity:0;translate:0 -12px}}
@keyframes dp-out{to{opacity:0}}
@keyframes dp-rv{from{opacity:0;translate:0 28px}}
@keyframes dp-slide{from{opacity:.35;scale:.92}}
@keyframes dp-par{to{translate:0 16%;scale:1.08}}
@keyframes dp-shadow{to{opacity:1}}
@keyframes dp-tilt{from{rotate:-14deg;translate:0 48px}to{rotate:4deg;translate:0 -36px}}
@keyframes dp-pin{from{scale:0}to{scale:1}}
@keyframes dp-word{from{opacity:0;translate:0 .45em}}
@keyframes dp-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes dp-draw{from{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}60%{fill-opacity:.2}to{stroke-dasharray:1;stroke-dashoffset:0;fill-opacity:1}}
@keyframes dp-zoom{to{scale:1.3}}
@keyframes dp-shrink{to{scale:.8;translate:0 -10vh;opacity:0}}
@keyframes dp-hscroll{to{translate:calc(-1 * var(--px)) 0}}
@keyframes dp-mapzoom{from{scale:1}to{scale:1.08}}
@keyframes dp-drift{to{translate:0 calc(-1 * min(.25 * var(--pl), var(--t) - var(--hdr-h) + 60px))}}
@keyframes dp-marq{from{translate:0 -50%}to{translate:-40% -50%}}
@keyframes dp-pop{from{scale:.4;opacity:0}}
@keyframes dp-ping{0%{box-shadow:0 0 0 2px var(--band),0 0 0 2px rgba(126,217,87,.7)}100%{box-shadow:0 0 0 2px var(--band),0 0 0 12px rgba(126,217,87,0)}}
@keyframes dp-pulse{50%{opacity:.45;scale:.9}}
@keyframes dp-spin{from{rotate:-90deg;opacity:0}}

/* =====================================================================
   sitio: what the real site adds to the design
   ===================================================================== */
/* the phone menu is a popover (it opens without JavaScript); site.js makes the rest of the page inert. A browser
   without popovers gets the class .open from site.js instead. Each selector in its own rule: one a browser does not
   know drops only that rule. */
.sheet[popover]{width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;inset:0}
.sheet{display:none}
.sheet.open{display:flex}
.sheet:popover-open{display:flex}
@media (min-width:1024px){.sheet.open{display:none}}
@media (min-width:1024px){.sheet:popover-open{display:none}}
.sheet .sheet-close{margin-left:auto}
@media (prefers-reduced-motion:no-preference){.sheet:popover-open{animation:dp-down .28s cubic-bezier(.2,.7,.2,1)}}

/* the credit of a Commons photo */
.hero .credit{position:absolute;right:var(--gut);bottom:8px;margin:0;font-size:11.5px;line-height:1.3;z-index:1;max-width:calc(100% - 2*var(--gut));text-align:right}
.hero .credit a{color:var(--band-ink2);text-decoration:none;display:inline-block;padding:4px 0}
.hero .credit a:hover{color:var(--band-ink);text-decoration:underline}

/* the icons of a minimap's buttons are no map: the map's svg rules (water, full width, min-height) skip them */
.minimap .acts .ic{background:none;min-height:0}
.minimap .acts .ic.s16{width:16px;height:16px}
/* "Cómo llegar" over a map opens upwards, inside the map's frame */
.minimap .acts .howto-m{top:auto;bottom:calc(100% + 6px);left:auto;right:0}

/* small spacings the prototype wrote inline */
.more-note{margin-top:12px}
.meta.fix,.meta.contact-text{margin-top:12px}
.phead .notice{margin-top:16px}
.page-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.lead.guide-intro{color:var(--ink)}
.place-text p{font-size:18px;line-height:1.55;color:var(--ink);margin:0 0 .8em}
.place-text p:last-child{margin-bottom:0}
@media (max-width:719px){.place-text p{font-size:17px}}

/* a card or row without a photo */
.card .ph.noimg,.row .ph.noimg{display:grid;place-items:center;color:var(--ink3);background:var(--sf)}

/* the migrated article bodies: photos in the column, never enlarged; tables that scroll */
.prose img{max-width:100%;height:auto;border-radius:var(--r-s)}
.prose .centrado{text-align:center}
.prose .centrado img{margin-inline:auto}
.prose h1,.prose h3,.prose h4,.prose h5,.prose h6{font:700 20px/1.3 var(--fb);margin:1.4em 0 .5em}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 1.1em}
.prose li{margin:.2em 0}
.prose .table-scroll{max-width:100%;overflow-x:auto;margin:0 0 1.1em}
.prose table{border-collapse:collapse;max-width:100%;font-size:15px;line-height:1.45;margin:0 0 1.1em}
.prose .table-scroll table{margin:0}
.prose td,.prose th{border:1px solid var(--line);padding:6px 8px;vertical-align:top}
.prose blockquote{margin:0 0 1.1em;padding-left:16px;border-left:3px solid var(--line2);color:var(--ink2)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose iframe,.prose video,.prose object,.prose embed{max-width:100%}
.art .prose figure img{aspect-ratio:auto;object-fit:initial;height:auto}
.listing-body{margin-top:0}

/* YouTube: a click-to-load player, 16:9 in the reading column (src/site/content.js, js/site.js) */
.prose figure.video-youtube,.video-youtube{position:relative;margin:24px 0;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#000}
.video-youtube .video-youtube-link{position:absolute;inset:0;display:block;color:#fff;text-decoration:none}
.art .prose .video-youtube .video-youtube-link img,.video-youtube .video-youtube-link img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0}
.video-youtube-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:14px;background:rgba(0,0,0,.72)}
.video-youtube-play::after{content:'';position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.video-youtube-link:hover .video-youtube-play,.video-youtube-link:focus-visible .video-youtube-play{background:#c00}
.video-youtube-text{position:absolute;left:12px;bottom:10px;font:600 14px/1.2 var(--fb);text-shadow:0 1px 3px #000}
.video-youtube iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* comments of the old site: pseudonym and text, no date */
.comments{margin-top:32px}
.comments ol{list-style:none;margin:0;padding:0}
.comments li{padding:14px 0;border-top:1px solid var(--line)}
.comments li:first-child{border-top:0;padding-top:0}
.comments b{font-weight:650}
.comments p{margin:4px 0 0;color:var(--ink2);overflow-wrap:anywhere}

/* the sign-up: the error under the field (in the app band too, whose paragraphs are grey), and the card's answer */
.appform .err,.appband .appform .err{margin:2px 0 0 6px;color:var(--band-coral);font-size:14px}
.joined.pending .ic{color:var(--band-ink2)}
.joined span{min-width:0;overflow-wrap:anywhere}

/* AdSense (ui.js adSpace): one space in the reading column, shown only on the site's own domain (html.ads). Its height
   is kept while the ad loads; when Google has no ad for it, site.js folds it away once it is off screen. */
.ad{display:none;margin:40px 0;padding-top:12px;border-top:1px solid var(--line)}
.ads .ad{display:block}
.ad .kick{margin-bottom:12px}
.ad ins{min-height:280px}
.ads .ad.off{display:none}

/* the search page */
.results .row .meta mark{background:transparent;box-shadow:inset 0 -2px 0 var(--ink3);color:inherit}