/* ==========================================================================
   MundoBiólogo — hoja de estilos compartida
   Identidad: carbón cálido #121110 · texto crema #ede8dc · ámbar #EF9F27
   Mobile-first. Modo claro vía [data-theme="light"] en <html>.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Identidad (modo oscuro, por defecto) */
  --bg:#121110;
  --surface:#1a1917;
  --surface-2:#232120;
  --surface-3:#2c2a27;
  --border:rgba(237,226,205,0.10);
  --border-strong:rgba(237,226,205,0.22);
  --text:#ede8dc;
  --text-mid:#c4bdae;
  --text-dim:#9b9484;
  --heading:#f5f0e4;
  --accent:#EF9F27;        /* ámbar: decorativo y texto */
  --accent-text:#EF9F27;
  --accent-display:#EF9F27; /* ámbar para titulares y logo */
  --accent-soft:rgba(239,159,39,0.12);
  --green:#a9c48a;          /* verde salvia, solo semántico */
  --green-soft:rgba(237,226,205,0.06); /* hover y chips neutros */
  --teal:#9FE1CB;
  --red:#F2A0A0;
  --blue:#9CC4EF;
  --shadow:0 1px 0 rgba(255,255,255,0.03) inset,0 18px 40px -24px rgba(0,0,0,0.75);
  --shadow-hover:0 1px 0 rgba(255,255,255,0.04) inset,0 26px 50px -24px rgba(0,0,0,0.85);
  --vignette:radial-gradient(1200px 600px at 75% -10%,rgba(239,159,39,0.07),transparent 60%),
             radial-gradient(900px 500px at -10% 30%,rgba(237,226,205,0.03),transparent 60%);
  --nav-bg:rgba(18,17,16,0.86);
  --input-bg:rgba(255,255,255,0.04);

  /* Estados de conservación */
  --st-cr-bg:rgba(224,75,74,0.22);--st-cr:#F7B3B3;
  --st-en-bg:rgba(224,75,74,0.16);--st-en:#F2A0A0;
  --st-vu-bg:rgba(186,117,23,0.20);--st-vu:#FAC775;
  --st-nt-bg:rgba(190,170,60,0.18);--st-nt:#E3D58A;
  --st-lc-bg:rgba(140,175,100,0.16);--st-lc:#bcd69c;
  --st-inv-bg:rgba(55,138,221,0.16);--st-inv:#9CC4EF;

  /* Tipografía */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-xs:.75rem;   /* 12 */
  --fs-sm:.8125rem; /* 13 */
  --fs-base:.9375rem;/* 15 */
  --fs-md:1.0625rem;/* 17 */
  --fs-lg:1.375rem; /* 22 */
  --fs-xl:1.75rem;  /* 28 */
  --fs-hero:2rem;   /* 32 móvil → 44 desktop */

  --radius:14px;
  --radius-sm:9px;
  --gutter:16px;
  --maxw:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

:root[data-theme="light"]{
  --bg:#f4f1e6;
  --surface:#fbf9f1;
  --surface-2:#ebe7d6;
  --surface-3:#e1dcc6;
  --border:rgba(60,45,20,0.14);
  --border-strong:rgba(60,45,20,0.30);
  --text:#1f1c17;
  --text-mid:#45403a;
  --text-dim:#5f5950;
  --heading:#1a1712;
  --accent:#EF9F27;
  --accent-text:#8a4b00;
  --accent-display:#8a4b00; /* el ámbar puro da 1.9:1 sobre crema: no pasa AA */
  --accent-soft:rgba(239,159,39,0.16);
  --green:#3f6b12;
  --green-soft:rgba(60,45,20,0.06);
  --teal:#0d6b55;
  --red:#a8302f;
  --blue:#1f5f9e;
  --shadow:0 1px 0 rgba(255,255,255,0.7) inset,0 16px 36px -24px rgba(40,50,20,0.35);
  --shadow-hover:0 1px 0 rgba(255,255,255,0.7) inset,0 24px 44px -22px rgba(40,50,20,0.45);
  --vignette:radial-gradient(1200px 600px at 75% -10%,rgba(239,159,39,0.10),transparent 60%),
             radial-gradient(900px 500px at -10% 30%,rgba(60,45,20,0.04),transparent 60%);
  --nav-bg:rgba(244,241,230,0.9);
  --input-bg:rgba(255,255,255,0.7);

  --st-cr-bg:rgba(200,50,50,0.14);--st-cr:#8f1f1f;
  --st-en-bg:rgba(200,60,60,0.12);--st-en:#9a2a2a;
  --st-vu-bg:rgba(186,117,23,0.16);--st-vu:#7a4300;
  --st-nt-bg:rgba(160,140,30,0.16);--st-nt:#5f5200;
  --st-lc-bg:rgba(99,153,34,0.16);--st-lc:#2f5409;
  --st-inv-bg:rgba(31,95,158,0.12);--st-inv:#1d4f82;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--vignette),var(--bg);
  background-attachment:fixed;
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.65;
  color:var(--text);min-height:100vh;
  transition:background-color .3s,color .3s;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#121110}

.skip-link{position:absolute;left:-999px;top:8px;z-index:200;background:var(--accent);color:#121110;padding:8px 14px;border-radius:8px;font-weight:600}
.skip-link:focus{left:8px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* Enlace con subrayado que crece */
.link-grow{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),color .2s}
.link-grow:hover,.link-grow:focus-visible{background-size:100% 1px}

/* ---------- NAVBAR ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;gap:12px;max-width:var(--maxw);margin:0 auto;padding:12px var(--gutter)}
.logo{font-family:var(--serif);font-size:1.375rem;color:var(--heading);letter-spacing:-.01em;white-space:nowrap;margin-right:auto}
.logo span{color:var(--accent-display);font-style:italic}
.nav-links{display:none}
.nav-tools{display:flex;align-items:center;gap:6px}
.icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);color:var(--text-mid);font-size:18px;transition:border-color .2s,color .2s,background .2s,transform .15s}
.icon-btn:hover{border-color:var(--border-strong);color:var(--heading);background:var(--green-soft)}
.icon-btn:active{transform:scale(.95)}
.theme-toggle .ti-sun{display:none}
:root[data-theme="light"] .theme-toggle .ti-sun{display:inline}
:root[data-theme="light"] .theme-toggle .ti-moon{display:none}

.soc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;min-width:38px;padding:0 10px;font-size:var(--fs-sm);font-weight:600;border-radius:10px;color:#fff;transition:transform .15s var(--ease),box-shadow .2s,filter .2s}
.soc-btn i{font-size:18px}
.soc-btn span{display:none}
.soc-btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.soc-yt{background:#FF0000}
.soc-yt:hover{background:#e60000}
/* Degradado IG con el naranja solo en la esquina del icono: el texto blanco queda sobre tonos ≥4.7:1 */
.soc-ig{background:linear-gradient(135deg,#f09433 0%,#dc2743 30%,#cc2366 62%,#bc1888 100%)}

.burger{display:inline-flex}
.burger .ti-x{display:none}
.nav.open .burger .ti-x{display:inline}
.nav.open .burger .ti-menu-2{display:none}

/* Menú móvil: grid-rows 0fr → 1fr para animar altura */
.mobile-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.mobile-menu>div{overflow:hidden}
.nav.open .mobile-menu{grid-template-rows:1fr}
.mobile-menu ul{list-style:none;padding:4px var(--gutter) 18px;display:grid;gap:2px}
.mobile-menu a{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--border);font-size:var(--fs-md);color:var(--text);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s var(--ease),color .2s}
.mobile-menu a i{color:var(--text-dim);font-size:16px}
.mobile-menu a:hover,.mobile-menu a[aria-current="page"]{color:var(--accent-text)}
.nav.open .mobile-menu a{opacity:1;transform:none}
.nav.open .mobile-menu li:nth-child(2) a{transition-delay:.03s}
.nav.open .mobile-menu li:nth-child(3) a{transition-delay:.06s}
.nav.open .mobile-menu li:nth-child(4) a{transition-delay:.09s}
.nav.open .mobile-menu li:nth-child(5) a{transition-delay:.12s}
.nav.open .mobile-menu li:nth-child(6) a{transition-delay:.15s}
.nav.open .mobile-menu li:nth-child(7) a{transition-delay:.18s}
.mobile-soc{display:flex;gap:8px;padding-top:12px}
.mobile-soc .soc-btn span{display:inline}
.mobile-soc .soc-btn{flex:1}

/* ---------- HERO ---------- */
.hero{display:grid;gap:36px;padding:40px 0 44px}
/* fadeUp crea una capa por columna: subimos la del buscador para que el desplegable quede encima del Animal del día */
.hero-text{position:relative;z-index:3}
.hero-right{position:relative;z-index:1}
.eyebrow{font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::before{content:'';width:22px;height:1px;background:currentColor;opacity:.7}
.hero-title{font-family:var(--serif);font-weight:600;font-size:var(--fs-hero);line-height:1.08;letter-spacing:-.015em;color:var(--text);margin-bottom:18px;text-wrap:balance}
.hero-title em{color:var(--accent-display);font-style:italic;font-weight:400}
.hero-desc{font-size:var(--fs-md);line-height:1.75;color:var(--text-mid);font-weight:300;margin-bottom:28px;max-width:34em}
.hero-desc strong{color:var(--text);font-weight:500}

.search{position:relative;max-width:560px}
.search-wrap{display:flex;align-items:center;gap:10px;background:var(--input-bg);border:1px solid var(--border-strong);border-radius:12px;padding:0 14px;transition:border-color .2s,box-shadow .2s}
.search-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search-wrap i{font-size:18px;color:var(--text-dim)}
.search-wrap input{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:14px 0;font-size:var(--fs-base);color:var(--text)}
.search-wrap input::placeholder{color:var(--text-dim)}
.search-wrap input::-webkit-search-cancel-button,.search-wrap input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search-clear{color:var(--text-mid);font-size:18px;padding:4px;display:none;border-radius:6px}
.search-clear:hover{color:var(--text);background:var(--green-soft)}
.search.has-value .search-clear{display:inline-flex}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:50;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow-hover);max-height:min(60vh,420px);overflow:auto;padding:6px;display:none}
.search.open .search-results{display:block;animation:fadeUp .25s var(--ease) both}
.sr-group{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);padding:10px 10px 4px}
.sr-item{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:9px;transition:background .15s}
.sr-item:hover,.sr-item:focus-visible{background:var(--green-soft)}
.sr-item img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.sr-title{font-size:var(--fs-sm);color:var(--text);font-weight:500;line-height:1.35}
.sr-meta{font-size:var(--fs-xs);color:var(--text-dim)}
.sr-empty{padding:16px 12px;color:var(--text-mid);font-size:var(--fs-sm)}
.search-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.stag{font-size:var(--fs-sm);font-weight:500;padding:7px 14px;border-radius:999px;background:transparent;border:1px solid var(--border-strong);color:var(--text-mid);transition:background .2s,border-color .2s,color .2s,transform .15s}
.stag:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--text);transform:translateY(-1px)}

/* Tarjetas */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--border-strong)}

.hero-right{display:grid;gap:16px;align-content:start}
.animal-card{overflow:hidden}
.animal-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.animal-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.animal-card:hover .animal-media img{transform:scale(1.04)}
.animal-media::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(5,10,3,.82));pointer-events:none}
.animal-badge{position:absolute;top:12px;left:12px;z-index:1;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#121110;background:var(--accent);padding:5px 10px;border-radius:999px}
.animal-over{position:absolute;left:16px;right:16px;bottom:12px;z-index:1;color:#f7f2e6}
.animal-name{font-family:var(--serif);font-size:1.6rem;line-height:1.1}
.animal-sci{font-style:italic;font-size:var(--fs-sm);opacity:.88}
.animal-body{padding:14px 16px 16px}
.tag-row{display:flex;flex-wrap:wrap;gap:6px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.stat-n{font-family:var(--serif);font-size:1.3rem;color:var(--heading);line-height:1.1}
.stat-n.txt{font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;line-height:1.3;padding-top:4px;color:var(--text)}
.stat-l{font-size:var(--fs-xs);color:var(--text-dim);margin-top:3px;line-height:1.35}
.animal-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:var(--fs-sm);font-weight:500;color:var(--accent-text)}
.animal-link i{transition:transform .2s}
.animal-link:hover i{transform:translateX(3px)}

.credit{font-size:11px;line-height:1.4;color:var(--text-dim);padding:6px 16px 0}
.credit a{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px}
.credit a:hover{color:var(--text)}
.animal-media .credit-over{position:absolute;right:8px;top:10px;z-index:1;font-size:10px;color:rgba(255,255,255,.82);background:rgba(0,0,0,.45);padding:2px 7px;border-radius:6px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Badges de estado */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:999px;border:1px solid transparent;line-height:1.4}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.cr{background:var(--st-cr-bg);color:var(--st-cr)}
.badge.en{background:var(--st-en-bg);color:var(--st-en)}
.badge.vu{background:var(--st-vu-bg);color:var(--st-vu)}
.badge.nt{background:var(--st-nt-bg);color:var(--st-nt)}
.badge.lc{background:var(--st-lc-bg);color:var(--st-lc)}
.badge.inv,.badge.ne{background:var(--st-inv-bg);color:var(--st-inv)}
.badge.zone{background:rgba(29,158,117,0.14);color:var(--teal)}
.badge.zone::before{display:none}
.animal-over .badge.zone{background:rgba(0,0,0,.4);color:#c9f1e2}

/* YouTube */
.social-band{padding:44px 0 0}
.social-band .sh{margin-bottom:20px}
.social-grid{display:grid;gap:16px;align-items:start}
.yt-head-cta{display:none}
.yt-panel:not(.is-active){display:none}
.yt-panel-title{display:none}
.yt-card{padding:16px;background:linear-gradient(180deg,rgba(255,0,0,0.06),transparent 70%),var(--surface)}
.yt-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.yt-logo{width:34px;height:34px;background:#FF0000;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:19px}
.yt-channel{font-size:var(--fs-base);font-weight:600;color:var(--text);line-height:1.2}
.yt-handle{font-size:var(--fs-xs);color:var(--text-dim)}
.yt-player{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;margin-bottom:12px;display:none}
.yt-player.active{display:block;animation:fadeUp .35s var(--ease) both}
.yt-player iframe{width:100%;height:100%;border:0;display:block}
.yt-vids{display:grid;gap:10px}
.yt-vid{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center;text-align:left;width:100%;padding:6px;margin:-6px;border-radius:10px;transition:background .2s}
.yt-vid:hover{background:rgba(255,0,0,0.06)}
.yt-thumb{position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:var(--surface-2)}
.yt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.yt-vid:hover .yt-thumb img{transform:scale(1.06)}
.yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;background:rgba(0,0,0,.18);transition:background .2s}
.yt-play i{filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.yt-vid:hover .yt-play{background:rgba(0,0,0,.05)}
.yt-badge{position:absolute;left:5px;bottom:5px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#FF0000;padding:1px 6px;border-radius:4px}
.yt-vid.playing .yt-thumb{outline:2px solid #FF0000;outline-offset:2px}
.yt-tabs{display:flex;gap:4px;padding:4px;margin-bottom:12px;border-radius:10px;background:var(--surface-2)}
.yt-tabs button{flex:1;padding:7px 10px;border-radius:7px;font-size:var(--fs-sm);font-weight:600;color:var(--text-mid);transition:background .2s,color .2s}
.yt-tabs button:hover{color:var(--text)}
.yt-tabs button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.yt-player.vertical{aspect-ratio:9/16;max-height:560px;max-width:315px;margin-left:auto;margin-right:auto}
.yt-short{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:9px;overflow:hidden;background:var(--surface-2);text-align:left}
.yt-short img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.yt-short::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.85))}
.yt-short-title{position:absolute;left:7px;right:7px;bottom:7px;z-index:1;color:#fff;font-size:11px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.yt-short-icon{position:absolute;top:6px;right:6px;z-index:1;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background .2s}
.yt-short:hover img{transform:scale(1.06)}
.yt-short:hover .yt-short-icon{background:#FF0000}
.yt-short.playing{outline:2px solid #FF0000;outline-offset:2px}
.shorts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,180px),1fr));gap:14px}
.short-card .yt-short-title{font-size:13px}
.short-card .yt-player.vertical{margin:0;max-width:none;border-radius:9px}
.yt-vid-title{font-size:var(--fs-sm);color:var(--text);line-height:1.4;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-vid-meta{font-size:var(--fs-xs);color:var(--text-dim);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.btn-ghost i{font-size:20px}
.btn-ghost{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;padding:10px;font-size:var(--fs-sm);font-weight:600;border-radius:10px;transition:background .2s,transform .15s,border-color .2s}
.btn-ghost:hover{transform:translateY(-1px)}
.yt-cta{color:#ff8a8a;border:1px solid rgba(255,0,0,0.28)}
:root[data-theme="light"] .yt-cta{color:#b00000}
.yt-cta:hover{background:rgba(255,0,0,0.08)}

/* ---------- STRIP ---------- */
.strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.strip-inner{display:grid;grid-template-columns:1fr 1fr;padding:0}
.sitem{display:flex;align-items:center;gap:12px;padding:16px 14px;border-bottom:1px solid var(--border);transition:background .25s}
.sitem:nth-child(odd){border-right:1px solid var(--border)}
.sitem:last-child{grid-column:1/-1;border-right:0;border-bottom:0}
.sitem:hover{background:var(--green-soft)}
.sicon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:transform .3s var(--ease)}
.sitem:hover .sicon{transform:rotate(-6deg) scale(1.06)}
.sicon.g{background:rgba(99,153,34,0.16);color:var(--green)}
.sicon.a{background:rgba(186,117,23,0.16);color:var(--accent-text)}
.sicon.t{background:rgba(29,158,117,0.16);color:var(--teal)}
.sicon.r{background:rgba(224,75,74,0.16);color:var(--red)}
.sicon.b{background:rgba(55,138,221,0.16);color:var(--blue)}
.slabel strong{display:block;font-size:var(--fs-base);color:var(--heading);font-weight:600;line-height:1.2}
.slabel span{font-size:var(--fs-xs);color:var(--text-dim)}

/* ---------- GRID PRINCIPAL ---------- */
.main-grid{display:grid;gap:44px;padding:44px 0 56px}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.sh h2,.h2{font-family:var(--serif);font-weight:600;font-size:var(--fs-xl);color:var(--heading);letter-spacing:-.01em;line-height:1.15}
.sh .num{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.18em;color:var(--accent-text);margin-right:10px;vertical-align:middle;font-weight:500}
.sh a{font-size:var(--fs-sm);color:var(--text-mid);white-space:nowrap}
.sh a:hover{color:var(--heading)}

/* Noticias */
.news-list{display:flex;flex-direction:column}
.ni{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--border);position:relative}
.ni:last-child{border-bottom:0}
.nthumb{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--surface-2);align-self:start}
.nthumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s}
.ni:hover .nthumb img{transform:scale(1.06);filter:saturate(1.15)}
.ncat{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:6px}
.nhead{font-family:var(--serif);font-size:1.125rem;font-weight:600;color:var(--text);line-height:1.3;margin-bottom:6px;text-wrap:pretty}
.nhead a{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease),color .2s}
.ni:hover .nhead a,.nhead a:focus-visible{background-size:100% 1px;color:var(--heading)}
.nsum{font-size:var(--fs-sm);color:var(--text-mid);line-height:1.65;margin-bottom:8px;display:none}
.nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:var(--fs-xs);color:var(--text-dim)}
.nmeta .dot{opacity:.6}
.news-list.full .nsum{display:block}

/* Compartir */
.share{display:inline-flex;align-items:center;gap:4px}
.share-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text-dim);font-size:15px;border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
.share-btn:hover{color:var(--heading);border-color:var(--border);background:var(--green-soft)}
.share-btn.copied{color:var(--accent-text)}
.share-lg .share-btn{width:auto;height:36px;padding:0 12px;gap:6px;font-size:var(--fs-sm);border-color:var(--border);color:var(--text-mid)}

/* Sidebar */
.sidebar{display:grid;gap:34px;align-content:start}
.sbt{font-size:var(--fs-xs);font-weight:600;color:var(--text-dim);letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sbt::after{content:'';flex:1;height:1px;background:var(--border)}
.sp{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 6px;margin:0 -6px;border-radius:10px;transition:background .2s}
.sp:hover{background:var(--green-soft)}
.sp+.sp{border-top:1px solid var(--border)}
.sp-img{width:56px;height:42px;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.sp-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.sp:hover .sp-img img{transform:scale(1.08)}
.sp-name{font-size:var(--fs-sm);color:var(--heading);font-weight:600;line-height:1.3}
.sp-sci{font-size:var(--fs-xs);color:var(--text-dim);font-style:italic}
.sp i{color:var(--text-dim);transition:transform .2s,color .2s}
.sp:hover i{transform:translateX(3px);color:var(--accent-text)}

.zg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.zp{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:92px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:var(--fs-sm);font-weight:500;color:#f7f2e6;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease),box-shadow .25s}
.zp img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.zp::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 15%,rgba(8,7,5,.85))}
.zp span{font-family:var(--serif);font-size:1rem;line-height:1.2}
.zp small{font-size:10.5px;color:rgba(247,242,230,.85);font-weight:400;letter-spacing:.02em}
.zp:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.zp:hover img{transform:scale(1.06)}
.zp.ft{box-shadow:0 0 0 2px var(--accent)}
.zp.ft::before{content:'Destacado';position:absolute;top:7px;left:8px;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#121110;background:var(--accent);padding:2px 7px;border-radius:999px}

.cu{padding:16px;background:linear-gradient(160deg,var(--accent-soft),transparent 60%),var(--surface);border-color:rgba(186,117,23,0.28)}
.cu-l{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--accent-text);margin-bottom:10px}
.cu-img{aspect-ratio:16/9;border-radius:9px;overflow:hidden;margin-bottom:12px;background:var(--surface-2)}
.cu-img img{width:100%;height:100%;object-fit:cover}
.cu-t{font-size:var(--fs-sm);color:var(--text);line-height:1.7}
.cu-s{font-size:var(--fs-xs);color:var(--text-dim);margin-top:8px}
.cu-s em{font-style:italic}

/* Instagram */
.ig-block{padding:16px;background:linear-gradient(160deg,rgba(220,60,120,0.08),transparent 60%),var(--surface);border-color:rgba(220,60,120,0.24)}
.ig-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ig-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#f09433,#dc2743,#bc1888);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:19px}
.ig-name{font-size:var(--fs-base);font-weight:600;color:var(--text);line-height:1.2}
.ig-handle{font-size:var(--fs-xs);color:var(--text-dim)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ig-post{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--surface-2)}
.ig-post img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ig-post .ig-cap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:6px;font-size:10.5px;line-height:1.3;color:#fff;background:linear-gradient(transparent 30%,rgba(0,0,0,.78));opacity:0;transition:opacity .25s}
.ig-post .ig-type{position:absolute;top:5px;right:5px;color:#fff;font-size:14px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.ig-post:hover img,.ig-post:focus-visible img{transform:scale(1.08)}
.ig-post:hover .ig-cap,.ig-post:focus-visible .ig-cap{opacity:1}
.ig-fallback{text-align:center;padding:18px 12px;border-radius:10px;border:1px dashed rgba(220,60,120,0.35);background:rgba(220,60,120,0.04)}
.ig-fallback i{font-size:28px;color:#e1306c}
.ig-fallback p{font-size:var(--fs-sm);color:var(--text-mid);margin-top:8px;line-height:1.6}
.ig-fallback strong{color:var(--text)}
.ig-cta{color:#f29cc3;border:1px solid rgba(220,60,120,0.3)}
:root[data-theme="light"] .ig-cta{color:#a3124f}
.ig-cta:hover{background:rgba(220,60,120,0.08)}

/* ---------- SUSCRIPCIÓN ---------- */
.subscribe{position:relative;overflow:hidden;padding:28px 20px;margin-bottom:56px;background:linear-gradient(120deg,rgba(239,159,39,0.10),transparent 70%),var(--surface)}
.subscribe h2{font-family:var(--serif);font-weight:600;font-size:var(--fs-xl);color:var(--heading);line-height:1.15;margin-bottom:8px}
.subscribe h2 em{color:var(--accent-display);font-weight:400}
.subscribe p{color:var(--text-mid);max-width:36em;margin-bottom:18px}
.sub-form{display:flex;flex-direction:column;gap:10px;max-width:520px}
.sub-copy p:last-child{margin-bottom:18px}
.sub-form input{flex:1;min-width:0;padding:13px 14px;border-radius:11px;background:var(--input-bg);border:1px solid var(--border-strong);color:var(--text);outline:0;transition:border-color .2s,box-shadow .2s}
.sub-form input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.sub-form input:user-invalid{border-color:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:11px;background:var(--accent);color:#1d1203;font-weight:600;transition:transform .15s var(--ease),box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(239,159,39,.7);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:progress}
.sub-msg{min-height:1.5em;font-size:var(--fs-sm);margin-top:10px}
.sub-msg.ok{color:var(--green)}
.sub-msg.err{color:var(--red)}
.sub-msg.info{color:var(--text-mid)}
.sub-legal{font-size:var(--fs-xs);color:var(--text-dim);margin-top:4px}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--border);padding:32px 0 40px}
.footer-inner{display:grid;gap:20px}
.fl{font-family:var(--serif);font-size:1.15rem;color:var(--heading)}
.fl span{color:var(--accent-display);font-style:italic}
.ftag{font-size:var(--fs-sm);color:var(--text-dim);margin-top:4px}
.flinks{display:flex;flex-wrap:wrap;gap:8px 18px}
.flinks a{font-size:var(--fs-sm);color:var(--text-mid)}
.flinks a:hover{color:var(--heading)}
.fsoc{display:flex;gap:8px}
.fsoc a{font-size:var(--fs-sm);font-weight:600;padding:8px 14px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;transition:transform .15s,background .2s}
.fsoc a:hover{transform:translateY(-1px)}
.fsoc .fy{background:rgba(255,0,0,0.12);color:#ff8a8a;border:1px solid rgba(255,0,0,0.25)}
.fsoc .fk{background:rgba(255,94,91,0.12);color:#ff9c9a;border:1px solid rgba(255,94,91,0.28)}
:root[data-theme="light"] .fsoc .fk{color:#b3261e}
.fsoc .fi{background:rgba(220,60,120,0.12);color:#f29cc3;border:1px solid rgba(220,60,120,0.25)}
:root[data-theme="light"] .fsoc .fy{color:#b00000}
:root[data-theme="light"] .fsoc .fi{color:#a3124f}
.fnote{font-size:var(--fs-xs);color:var(--text-dim);line-height:1.6}

/* ---------- PÁGINAS INTERIORES ---------- */
.crumbs{font-size:var(--fs-xs);color:var(--text-dim);padding:18px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--text-mid)}
.crumbs a:hover{color:var(--heading)}
.page-head{padding:28px 0 32px;border-bottom:1px solid var(--border);margin-bottom:36px}
.page-title{font-family:var(--serif);font-weight:600;font-size:2rem;line-height:1.1;letter-spacing:-.015em;color:var(--text);margin-bottom:12px}
.page-title em{color:var(--accent-display);font-weight:400}
.page-lead{font-size:var(--fs-md);color:var(--text-mid);max-width:40em;font-weight:300;line-height:1.75}

/* Hero de ficha / zona */
.feature-hero{position:relative;border-radius:var(--radius);overflow:hidden;margin-top:18px;background:var(--surface-2)}
.feature-hero picture,.feature-hero img{display:block;width:100%;height:100%}
.feature-hero img{aspect-ratio:4/3;object-fit:cover}
.feature-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(5,10,3,.85));pointer-events:none}
.feature-over{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;color:#f7f2e6}
.feature-over .eyebrow{color:#ffc061;margin-bottom:8px}
.feature-over h1{font-family:var(--serif);font-weight:600;font-size:2.2rem;line-height:1.05;letter-spacing:-.015em}
.feature-over .sci{font-family:var(--serif);font-style:italic;font-size:1.15rem;opacity:.9;margin-top:4px}
.feature-over .tag-row{margin-top:12px}
.feature-over .badge.lc{background:rgba(0,0,0,.4);color:#cdeaa6}
.feature-over .badge.vu{background:rgba(0,0,0,.45);color:#ffd27f}
.feature-over .badge.en,.feature-over .badge.cr{background:rgba(0,0,0,.45);color:#ffb3b3}
.feature-over .badge.nt{background:rgba(0,0,0,.45);color:#efe29a}
.coords{font-size:var(--fs-xs);letter-spacing:.12em;opacity:.85;margin-top:6px}

.article-grid{display:grid;gap:40px;padding:32px 0 56px}
.prose h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--heading);margin:36px 0 12px;line-height:1.2;scroll-margin-top:84px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--text);margin-bottom:14px;max-width:42em}
.prose ul{margin:0 0 16px 1.1em;max-width:42em}
.prose li{margin-bottom:8px;padding-left:4px}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--heading);font-weight:600}
.prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lead-p{font-size:var(--fs-md);color:var(--text-mid);font-weight:300}

.facts{padding:4px 18px}
.facts dl{display:grid;grid-template-columns:auto 1fr}
.facts dt,.facts dd{padding:11px 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.facts dt{color:var(--text-dim);padding-right:16px}
.facts dd{color:var(--text);text-align:right;font-weight:500}
.facts dd em{font-style:italic;font-weight:400}
.facts dl>*:nth-last-child(-n+2){border-bottom:0}

/* Escala UICN */
.uicn{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:14px 0 8px}
.uicn span{display:flex;flex-direction:column;align-items:center;justify-content:center;height:46px;border-radius:7px;font-size:12px;font-weight:700;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);position:relative}
.uicn span.on{transform:translateY(-4px);border-color:transparent;box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.uicn span.on::after{content:'';position:absolute;bottom:-9px;border:5px solid transparent;border-top-color:currentColor}
.uicn .ex.on{background:#111;color:#fff}
.uicn .ew.on{background:#3d1e3f;color:#fff}
.uicn .cr.on{background:#c62828;color:#fff}
.uicn .en.on{background:#e8590c;color:#1a0b00}
.uicn .vu.on{background:#EF9F27;color:#1d1203}
.uicn .nt.on{background:#cdd96a;color:#1d2208}
.uicn .lc.on{background:#5f9a24;color:#fff}
.uicn-legend{font-size:var(--fs-xs);color:var(--text-dim);display:flex;justify-content:space-between}

.callout{padding:18px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:8px 0 18px}
.callout h3{font-family:var(--serif);font-size:1.15rem;color:var(--heading);margin-bottom:6px}
.callout p{margin-bottom:0}

.range-map{padding:12px;max-width:560px}
.range-map svg{width:100%;height:auto;display:block}
.range-map figcaption{font-size:var(--fs-xs);color:var(--text-dim);padding:8px 4px 2px;line-height:1.5}
.rm-land{fill:var(--surface-2);stroke:var(--border-strong);stroke-width:1.2}
.rm-sea{fill:transparent}
.rm-core{fill:var(--accent);fill-opacity:.85;stroke:var(--bg);stroke-width:1.5}
.rm-halo{fill:var(--accent);fill-opacity:.18}
.rm-alm{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-dasharray:3 3}
.rm-label{font-family:var(--sans);font-size:11px;fill:var(--text-mid)}
.rm-label.alm{fill:var(--teal);font-weight:600}

.aside-stack{display:grid;gap:18px;align-content:start}
.aside-title{font-size:var(--fs-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);padding:14px 18px 0}
.toc{padding:6px 0 10px}
.toc a{display:block;padding:7px 18px;font-size:var(--fs-sm);color:var(--text-mid);border-left:2px solid transparent;transition:color .2s,border-color .2s,background .2s}
.toc a:hover{color:var(--heading);border-left-color:var(--accent);background:var(--green-soft)}

.sources{font-size:var(--fs-sm)}
.sources li{color:var(--text-mid)}

/* Cards de especie */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:16px}
.sp-card{overflow:hidden;display:flex;flex-direction:column}
.sp-card .media{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.sp-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.sp-card:hover .media img{transform:scale(1.06)}
.sp-card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.sp-card h3{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--heading);line-height:1.2}
.sp-card .sci{font-style:italic;font-size:var(--fs-xs);color:var(--text-dim)}
.sp-card p{font-size:var(--fs-sm);color:var(--text-mid);line-height:1.6}
.sp-card .more{margin-top:auto;padding-top:8px;font-size:var(--fs-sm);font-weight:600;color:var(--accent-text);display:inline-flex;align-items:center;gap:6px}
.sp-card .more.muted{color:var(--text-dim);font-weight:400}
.cards.small{grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}
.cards.small .sp-card p{display:none}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{font-size:var(--fs-sm);padding:7px 14px;border-radius:999px;border:1px solid var(--border);color:var(--text-mid);transition:all .2s}
.chip:hover{border-color:var(--border-strong);color:var(--heading)}
.chip[aria-pressed="true"]{background:var(--heading);color:var(--bg);border-color:var(--heading)}

.empty{padding:22px;border:1px dashed var(--border-strong);border-radius:var(--radius);color:var(--text-mid);font-size:var(--fs-sm)}
.empty a{color:var(--accent-text);text-decoration:underline}

/* Glosario */
.gloss{display:grid;gap:0}
.gloss dt{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--heading);padding-top:22px;scroll-margin-top:84px}
.gloss dd{color:var(--text-mid);padding:6px 0 22px;border-bottom:1px solid var(--border);max-width:46em}
.az{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.az a{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-mid)}
.az a:hover{border-color:var(--accent);color:var(--accent-text)}

/* Créditos */
.credit-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.credit-table th,.credit-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:top}
.credit-table th{color:var(--text-dim);font-weight:500;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase}
.credit-table img{width:64px;height:44px;object-fit:cover;border-radius:6px}
.credit-table a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.table-wrap{overflow-x:auto}

/* Vídeos (página dedicada) */
.video-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.video-card{overflow:hidden}
.video-card .yt-player{display:block;margin:0;border-radius:0}
.video-card .vthumb{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000}
.video-card .vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .3s}
.video-card .vthumb:hover img{transform:scale(1.04);opacity:.9}
.video-card .vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video-card .vplay span{width:64px;height:44px;border-radius:12px;background:#FF0000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .2s}
.video-card .vthumb:hover .vplay span{transform:scale(1.08)}
.video-card .body{padding:14px 16px 18px}
.video-card h3{font-size:var(--fs-base);font-weight:600;line-height:1.4;color:var(--text)}
.video-card p{font-size:var(--fs-sm);color:var(--text-mid);margin-top:6px}

/* Avistamientos (iNaturalist) */
.inat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,190px),1fr));gap:14px}
.inat-card{overflow:hidden;display:flex;flex-direction:column}
.inat-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.inat-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.inat-card:hover .inat-media img{transform:scale(1.05)}
.inat-q{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#f2ead8}
.inat-q.ok{background:rgba(70,110,40,.85);color:#fff}
.inat-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
.inat-name{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--heading);line-height:1.25}
.inat-sci{font-size:var(--fs-xs);font-style:italic;color:var(--text-dim);margin-bottom:4px}
.inat-meta{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--text-mid)}
.inat-meta i{color:var(--text-dim)}
.inat-credit{font-size:10.5px;color:var(--text-dim);margin-top:6px}
.inat-row{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:8px 6px;margin:0 -6px;border-radius:10px;transition:background .2s}
.inat-row+.inat-row{border-top:1px solid var(--border)}
.inat-row:hover{background:var(--green-soft)}
.inat-row img{width:48px;height:48px;border-radius:8px;object-fit:cover}
.inat-row .inat-name{font-family:var(--sans);font-size:var(--fs-sm);display:block}
.inat-row .inat-meta{display:block}
.inat-loading{font-size:var(--fs-sm);color:var(--text-dim);padding:12px 0}
.inat-note{font-size:var(--fs-xs);color:var(--text-dim);margin-top:10px;line-height:1.5}
.inat-note a{text-decoration:underline;text-underline-offset:2px}

/* Portada: este mes y acceso al quiz */
.month-card{padding:16px}
.month-name{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:1.25rem;color:var(--heading);margin-bottom:6px}
.month-name i{color:var(--accent-text);font-size:20px}
.month-sum{font-size:var(--fs-sm);color:var(--text-mid);margin-bottom:10px}
.month-list{list-style:none;display:grid;gap:6px}
.month-list li{position:relative;padding-left:16px;font-size:var(--fs-sm);color:var(--text)}
.month-list li::before{content:'';position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.month-card .animal-link{margin-top:12px}
.quiz-cta{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;background:linear-gradient(135deg,var(--accent-soft),transparent 70%),var(--surface)}
.quiz-cta-icon{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#1d1203;display:flex;align-items:center;justify-content:center;font-size:22px}
.quiz-cta strong{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--heading)}
.quiz-cta span span{font-size:var(--fs-xs);color:var(--text-mid)}
.quiz-cta>i{color:var(--accent-text);transition:transform .2s}
.quiz-cta:hover>i{transform:translateX(3px)}

.kofi-cta{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px}
.kofi-cta-icon{width:44px;height:44px;border-radius:12px;background:#FF5E5B;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
.kofi-cta strong{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--heading)}
.kofi-cta span span{font-size:var(--fs-xs);color:var(--text-mid)}
.kofi-cta>i{color:var(--text-dim);transition:transform .2s}
.kofi-cta:hover>i{transform:translateX(3px)}
.btn.kofi-btn{background:#c42f2c;color:#fff} /* coral Ko-fi oscurecido: 5,5:1 con texto blanco */
.btn.kofi-btn:hover{box-shadow:0 10px 24px -12px rgba(255,94,91,.7)}
.fsoc{flex-wrap:wrap}

/* Calendario */
.cal-nav{position:sticky;top:64px;z-index:5;padding:10px 0;background:var(--bg);margin-bottom:12px}
.cal-nav .chip[aria-current="date"]{border-color:var(--accent);color:var(--accent-text)}
.cal-list{display:grid;gap:18px}
.cal-month{padding:22px 20px;scroll-margin-top:130px}
.cal-month.is-now{box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.cal-head{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;margin-bottom:16px}
.cal-num{font-family:var(--serif);font-size:1.6rem;color:var(--accent-text);line-height:1}
.cal-head h2{font-family:var(--serif);font-size:1.5rem;color:var(--heading);line-height:1.1}
.cal-head p{font-size:var(--fs-sm);color:var(--text-mid);margin-top:4px}
.cal-now{display:none;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1d1203;background:var(--accent);padding:4px 10px;border-radius:999px;white-space:nowrap}
.cal-month.is-now .cal-now{display:inline-block}
.cal-items{list-style:none;display:grid;gap:14px}
.cal-items li{padding-top:14px;border-top:1px solid var(--border)}
.cal-items h3{font-size:var(--fs-base);font-weight:600;color:var(--text);margin-bottom:4px}
.cal-items p{font-size:var(--fs-sm);color:var(--text-mid);line-height:1.65}
.cal-where{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px;font-size:var(--fs-xs)!important;color:var(--text-dim)!important}
.cal-where a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}

/* Quiz */
.quiz{max-width:980px}
.quiz-top{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);color:var(--text-mid);margin-bottom:8px}
.quiz-score{display:inline-flex;align-items:center;gap:6px;color:var(--accent-text);font-weight:600}
.quiz-bar{height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-bottom:20px}
.quiz-bar span{display:block;height:100%;background:var(--accent);transition:width .4s var(--ease)}
.quiz-grid{display:grid;gap:20px;animation:fadeUp .4s var(--ease) both}
.quiz-photo{overflow:hidden;margin:0}
.quiz-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.quiz-q{font-family:var(--serif);font-size:1.5rem;color:var(--heading);margin-bottom:12px}
.quiz-options{display:grid;gap:10px}
.quiz-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);text-align:left;transition:border-color .2s,background .2s,transform .15s}
.quiz-opt span{font-weight:600;color:var(--text)}
.quiz-opt small{font-size:var(--fs-xs);font-style:italic;color:var(--text-dim)}
.quiz-opt:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.quiz-opt:disabled{cursor:default;opacity:.6}
.quiz-opt.right{opacity:1;border-color:#5f9a24;background:rgba(95,154,36,.16)}
.quiz-opt.wrong{opacity:1;border-color:#c62828;background:rgba(198,40,40,.14)}
.quiz-feedback:empty{display:none}
.quiz-feedback{margin-top:16px;animation:fadeUp .35s var(--ease) both}
.quiz-verdict{font-size:var(--fs-base);margin-bottom:8px}
.quiz-verdict i{margin-right:4px;vertical-align:-2px}
.quiz-verdict.ok i{color:var(--green)}
.quiz-verdict.ko i{color:var(--red)}
.quiz-fact{font-size:var(--fs-sm);color:var(--text-mid);line-height:1.7;margin-bottom:14px}
.quiz-fact a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.quiz-end{text-align:center;padding:36px 20px;animation:fadeUp .4s var(--ease) both}
.quiz-trophy{font-size:44px;color:var(--accent)}
.quiz-final{font-family:var(--serif);font-size:3.5rem;color:var(--heading);line-height:1;margin:6px 0 10px}
.quiz-final span{font-size:1.5rem;color:var(--text-dim)}
.quiz-msg{color:var(--text-mid);margin-bottom:20px}
.quiz-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:16px}
.quiz-share{display:flex;align-items:center;justify-content:center;gap:6px;font-size:var(--fs-sm);color:var(--text-dim)}

/* Sobre / legales */
.about-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:3px;overflow:hidden;padding:0}
.about-mosaic img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.legal h2{font-size:1.25rem}
.legal code{font-size:.85em;background:var(--surface-2);padding:1px 6px;border-radius:5px}
.flegal a{font-size:var(--fs-xs);color:var(--text-dim)}

/* Imagen no disponible (nunca rota en silencio) */
.img-fallback{width:100%;height:100%;min-height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--surface-2);color:var(--text-dim);font-size:22px;text-align:center}
.img-fallback small{font-size:10px;letter-spacing:.04em}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:var(--heading);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:var(--fs-sm);font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:300}
.toast.show{opacity:1;transform:translate(-50%,0)}

.load-error{padding:16px;border-radius:var(--radius-sm);border:1px solid rgba(224,75,74,.35);background:rgba(224,75,74,.08);color:var(--text);font-size:var(--fs-sm)}
.load-error code{background:var(--surface-2);padding:1px 6px;border-radius:5px}

/* ---------- ANIMACIONES ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .7s var(--ease) both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.36s}
.js .reveal{opacity:0;transform:translateY(18px)}
.reveal.in{animation:fadeUp .7s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- BREAKPOINTS ---------- */
@media (min-width:600px){
  :root{--gutter:24px}
  .soc-btn span{display:inline}
  .soc-btn{padding:0 12px}
  /* con texto, blanco sobre #FF0000 = 4.0:1; #d40000 = 5.5:1 (AA). El logo YT mantiene #FF0000 */
  .soc-yt{background:#d40000}
  .soc-yt:hover{background:#bf0000}
  .ni{grid-template-columns:150px 1fr;gap:20px}
  .nsum{display:block}
  .sub-form{flex-direction:row}
  .subscribe{padding:40px}
  .feature-hero img{aspect-ratio:16/8}
  .feature-over{left:28px;right:28px;bottom:26px}
  .feature-over h1{font-size:3rem}
  .page-title{font-size:2.6rem}
  .footer-inner{grid-template-columns:1fr auto;align-items:center}
}

@media (min-width:900px){
  :root{--gutter:36px;--fs-hero:2.75rem}
  .nav-inner{padding:14px var(--gutter)}

  /* Hero equilibrado: texto | Animal del día, centrados en vertical y dentro de la primera pantalla */
  .hero{grid-template-columns:minmax(0,1fr) 460px;gap:64px;padding:64px 0 56px;align-items:center}
  .hero-text{padding-top:0}
  .hero-title{font-size:3.25rem}
  .animal-media{aspect-ratio:16/11}
  .strip-inner{grid-template-columns:repeat(5,1fr);padding:0 var(--gutter)}
  .strip-inner .sitem:first-child{padding-left:0}

  /* Redes: YouTube (Shorts + vídeos a la vez) | Instagram */
  .social-band{padding-top:56px}
  .social-grid{grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:stretch}
  .yt-card{padding:20px 22px 22px}
  .yt-card .yt-tabs,.yt-cta-foot{display:none}
  .yt-head-cta{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:8px 14px;border-radius:10px;font-size:var(--fs-sm);font-weight:600;color:#fff;background:#d40000;transition:background .2s,transform .15s}
  .yt-head-cta:hover{background:#bf0000;transform:translateY(-1px)}
  .yt-head-cta i{font-size:18px}
  .yt-panels{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px}
  .yt-panel,.yt-panel:not(.is-active){display:block}
  .yt-panel-title{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px}
  .yt-panel-s .yt-vids{grid-template-columns:repeat(3,1fr);gap:12px}
  .yt-panel-s .yt-vid{grid-template-columns:1fr;align-items:start;gap:8px;margin:0;padding:0}
  .yt-panel-s .yt-vid:hover{background:none}
  .yt-panel-s .yt-thumb{aspect-ratio:9/16;border-radius:10px}
  .yt-panel-s .yt-play{font-size:30px}
  .yt-panel-s .yt-vid-title{-webkit-line-clamp:3}
  .yt-player.active{margin-bottom:18px}
  .ig-block{display:flex;flex-direction:column}
  .ig-block #ig-feed{flex:1;display:flex;flex-direction:column;justify-content:center}

  .quiz-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
  .cal-items{grid-template-columns:repeat(3,1fr);gap:22px}
  .cal-items li{padding-top:0;border-top:0;padding-left:16px;border-left:1px solid var(--border)}
  .cal-month{padding:28px 30px}

  /* Newsletter en dos columnas */
  .subscribe{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding:44px 48px}
  .sub-copy p:last-child{margin-bottom:0}
  .sub-form{max-width:none}
  .sitem{border-bottom:0;border-right:1px solid var(--border);padding:18px 18px}
  .sitem:nth-child(odd){border-right:1px solid var(--border)}
  .sitem:last-child{grid-column:auto;border-right:0}
  .main-grid{grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding:56px 0 72px}
  .article-grid{grid-template-columns:minmax(0,1fr) 320px;gap:56px}
  .aside-stack{position:sticky;top:84px}
  .page-head{padding:44px 0 40px}
  .page-title{font-size:3rem}
}

@media (min-width:1080px){
  .nav-inner{gap:24px}
  .logo{margin-right:0}
  .nav-links{display:flex;gap:2px;margin-right:auto}
  .nav-links a{position:relative;font-size:var(--fs-sm);color:var(--text-mid);padding:8px 9px;border-radius:8px;transition:color .2s;white-space:nowrap}
  .nav-links a::after{content:'';position:absolute;left:9px;right:9px;bottom:4px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--heading)}
  .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
  .burger,.mobile-menu{display:none}
}

.sp-card:target{outline:2px solid var(--accent);outline-offset:3px}
.ni:target .nhead a{color:var(--accent-text)}