/* ============================================================
   tahyi.css — TAHÝI: iniciativa social (view-tahyi), su ítem en el
   menú y la hormiga animada junto al logo del header.
   Usa los tokens de base.css y las tarjetas de inicio.css; el verde es
   el color propio de TAHÝI.
   ============================================================ */

:root{ --tahyi:#047857; --tahyi-dark:#065f46; --tahyi-soft:#d1fae5; --tahyi-bg:#ecfdf5; }

/* ===== Ítem del menú ===== */
.nav-drawer-item.tahyi svg.tahyi-mini{ width:28px; height:28px; margin:-4px; }
.nav-drawer-item .tahyi-label{ flex:1; min-width:0; }
.nav-drawer-item .tahyi-label small{ display:block; font-size:.75rem; font-weight:600; color:var(--tahyi); }
.nav-drawer-item .tahyi-badge{
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; background:var(--tahyi); color:#fff;
}
.nav-drawer-item.tahyi:hover, .nav-drawer-item.tahyi.current{ background:var(--tahyi-bg); color:var(--tahyi-dark); }

/* ===== Hormiga animada junto al logo (solo en /tahyi) ===== */
.topbar-logo-box{ position:relative; display:inline-flex; max-width:100%; }
.tahyi-scene{
  display:none; position:absolute; left:calc(100% - 6px); top:50%;
  width:100px; height:76px; margin-top:-38px; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 72%,transparent);
  mask-image:linear-gradient(to right,#000 72%,transparent);
}
body[data-view="view-tahyi"] .tahyi-scene{ display:block; }
body[data-view="view-tahyi"] .topbar{ overflow:hidden; }

/* Ciclo de 10 s: cae la hoja junto al logo, la hormiga entra por la
   derecha, la carga en la espalda, se da vuelta y se va por la derecha. */
.tahyi-ant-walk{ transform:translate(61px,90px); animation:tahyiAntWalk 10s linear infinite; }
@keyframes tahyiAntWalk{
  0%,25%{ transform:translate(200px,90px) scaleX(1); }
  50%,55%{ transform:translate(61px,90px) scaleX(1); }
  58%{ transform:translate(61px,90px) scaleX(-1); }
  85%,100%{ transform:translate(215px,90px) scaleX(-1); }
}
.tahyi-leaf-fall{ animation:tahyiLeafFall 10s ease-in infinite; }
@keyframes tahyiLeafFall{
  0%{ transform:translate(40px,-24px); opacity:1; }
  18%,53%{ transform:translate(30px,104px); opacity:1; }
  53.5%,100%{ transform:translate(30px,104px); opacity:0; }
}
.tahyi-leaf-sway{ transform-box:fill-box; transform-origin:center; animation:tahyiLeafSway 10s ease-in-out infinite; }
@keyframes tahyiLeafSway{
  0%{ transform:rotate(-30deg); } 4%{ transform:rotate(25deg); } 8%{ transform:rotate(-20deg); }
  12%{ transform:rotate(30deg); } 18%,100%{ transform:rotate(80deg); }
}
.tahyi-leaf-carried{ opacity:0; animation:tahyiCarry 10s step-end infinite; }
@keyframes tahyiCarry{ 0%{ opacity:0; } 53.5%{ opacity:1; } 90%{ opacity:0; } }
.tahyi-legs-a, .tahyi-legs-b{ transform-box:fill-box; transform-origin:50% 0; animation:tahyiLegs .35s ease-in-out infinite alternate; }
.tahyi-legs-b{ animation-direction:alternate-reverse; }
@keyframes tahyiLegs{ from{ transform:rotate(-9deg); } to{ transform:rotate(9deg); } }

@media (prefers-reduced-motion:reduce){
  .tahyi-ant-walk, .tahyi-leaf-fall, .tahyi-leaf-sway, .tahyi-leaf-carried, .tahyi-legs-a, .tahyi-legs-b{ animation:none; }
  .tahyi-leaf-fall{ opacity:0; }
  .tahyi-leaf-carried{ opacity:1; }
}

/* ===== Página ===== */
#view-tahyi [hidden]{ display:none !important; }
#view-tahyi .home-eyebrow{ color:var(--tahyi); }

.tahyi-hero-photo{ background:var(--tahyi-bg); }
/* Con foto cargada desde el panel, la ilustración sobra. */
.tahyi-hero-photo.con-foto .tahyi-hero-art{ display:none; }
.tahyi-tag{
  position:absolute; top:14px; left:14px; z-index:1;
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--tahyi-dark);
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
/* .home-hero-photo svg estira la ilustración a todo el ancho: acá no. */
.tahyi-tag svg{ position:static; inset:auto; width:18px; height:18px; flex-shrink:0; }
/* Fondo verde claro: degradé más marcado para que el texto blanco se lea. */
.tahyi-hero-photo::after{ background:linear-gradient(180deg,rgba(17,24,39,0) 15%,rgba(17,24,39,.72) 100%); }
.tahyi-hero-text h1{ font-size:clamp(2rem,9vw,2.6rem); }
.tahyi-hero-text .tahyi-lema{ margin:4px 0 0; font-size:1rem; font-weight:700; line-height:1.3; opacity:1; }
.tahyi-footer{ gap:4px; }
.tahyi-firma{ color:var(--muted); font-size:.82rem; }
.tahyi-hero-btns{ display:flex; gap:10px; }
.tahyi-hero-btns .home-cta{ flex:1; padding:0 14px; }

.tahyi-about{ padding:20px; display:flex; flex-direction:column; gap:10px; }
.tahyi-about p{ margin:0; }
.tahyi-about-lead{ font-size:1.12rem; font-weight:700; line-height:1.4; color:#24479a; text-wrap:balance; }
.tahyi-about-body{ font-size:.92rem; line-height:1.6; color:#4b5563; max-width:60ch; white-space:pre-line; }

.home-tile.tahyi-eje{ cursor:default; }
.home-tile.tahyi-eje:hover{ transform:none; box-shadow:none; }

/* Próximas acciones */
.tahyi-acciones{ display:flex; flex-direction:column; gap:10px; }
.tahyi-accion{ padding:16px; display:flex; flex-direction:column; gap:10px; box-shadow:0 8px 20px rgba(17,24,39,.06); }
.tahyi-accion-head{ display:flex; align-items:center; gap:12px; }
.tahyi-fecha{
  flex-shrink:0; width:52px; height:56px; border-radius:12px; background:var(--tahyi-soft); color:var(--tahyi-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.tahyi-fecha.colecta{ background:#fef3c7; color:#92400e; }
.tahyi-fecha b{ font-size:1.3rem; }
.tahyi-fecha span{ font-size:.7rem; font-weight:800; text-transform:uppercase; }
.tahyi-fecha svg{ width:22px; height:22px; }
.tahyi-accion-text{ min-width:0; flex:1; }
.tahyi-accion-text h3{ margin:0; font-size:1rem; font-weight:800; }
.tahyi-accion-text p{ margin:2px 0 0; font-size:.82rem; color:var(--muted); }
.tahyi-accion-detalle{ margin:0; font-size:.88rem; color:#4b5563; line-height:1.45; }
.tahyi-accion-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.tahyi-pill-btn{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px;
  background:#111827; color:#fff; font-size:.85rem; font-weight:700; text-decoration:none;
}
.tahyi-pill-btn:hover{ background:#1f2937; }
.tahyi-pill-btn.light{ background:transparent; color:var(--text); border:1.5px solid #d6dbe3; }
.tahyi-pill-btn.light:hover{ background:#f3f4f6; }

/* Galería */
.tahyi-galeria{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,72%); gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 10px; scrollbar-width:thin;
}
@media (min-width:620px){ .tahyi-galeria{ grid-auto-columns:minmax(240px,40%); } }
.tahyi-foto{ margin:0; overflow:hidden; scroll-snap-align:start; display:flex; flex-direction:column; }
.tahyi-foto img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--tahyi-soft); }
.tahyi-foto figcaption{ padding:12px 14px; font-size:.9rem; font-weight:700; }
.tahyi-foto figcaption span{ display:block; font-weight:500; font-size:.8rem; color:var(--muted); }

/* Cómo ayudar */
#view-tahyi .home-step::before{ background:var(--tahyi); }

/* Aliados */
.tahyi-aliados{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.tahyi-aliado{
  min-height:64px; padding:10px; display:grid; place-items:center; text-align:center;
  font-size:.8rem; font-weight:700; color:#4b5563; text-decoration:none;
}
.tahyi-aliado img{ max-width:100%; max-height:44px; object-fit:contain; }
a.tahyi-aliado:hover{ border-color:var(--tahyi); }

/* Llamado final */
.tahyi-cta{
  border-radius:22px; padding:22px 20px; background:var(--tahyi-dark); color:#fff;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 14px;
}
.tahyi-cta h2{ margin:0; font-size:1.35rem; font-weight:800; line-height:1.2; text-wrap:balance; }
.tahyi-cta p{ margin:6px 0 0; font-size:.92rem; line-height:1.5; color:var(--tahyi-soft); }
.tahyi-cta-art{
  width:112px; height:112px; border-radius:50%; background:var(--tahyi-bg);
  display:grid; place-items:center; flex-shrink:0;
}
.tahyi-cta-art svg{ width:96px; height:auto; }
.tahyi-cta .home-cta{ grid-column:1 / -1; justify-self:start; }
@media (max-width:360px){ .tahyi-cta-art{ width:88px; height:88px; } .tahyi-cta-art svg{ width:76px; } }