/* =========================================================
   VERSIÓN D · "COLIBRÍ"
   Duplicado exacto de la versión C (grabado naturalista):
   <html data-identidad="grabado" data-version="colibri">
   Añade en la portada una capuchina que crece en el lado derecho
   y un colibrí que entra volando desde el lado opuesto a libar.
   ========================================================= */

.art-d { display: none; }
html[data-version="colibri"] .art-d { display: inline; }
/* el colibrí quieto de la versión C se reemplaza por el que vuela */
html[data-version="colibri"] .hummingbird { display: none; }

/* ---------- La capuchina: aparece creciendo desde el suelo ---------- */
.capuchina { transform: translate(1290px, 560px); }
.capuchina__grow {
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scale(0); opacity: 0;
  animation: d-crece 2.8s cubic-bezier(.2, .8, .2, 1) .4s forwards;
}
@keyframes d-crece { 0% { transform: scale(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.capuchina__flor { transform-box: fill-box; transform-origin: 80% 50%; animation: d-mece 5s ease-in-out 3.2s infinite; }
@keyframes d-mece { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }

/* ---------- El colibrí: cruza desde el lado opuesto y liba ---------- */
.d-bird { opacity: 0; animation: d-vuelo 16s ease-in-out 2.6s infinite; }
@keyframes d-vuelo {
  0%   { transform: translate(-200px, 260px); opacity: 0; }
  6%   { opacity: 1; }
  20%  { transform: translate(260px, 200px); }
  34%  { transform: translate(640px, 300px); }
  46%  { transform: translate(1000px, 500px); }
  52%  { transform: translate(1145px, 570px); }
  62%  { transform: translate(1141px, 562px); }
  72%  { transform: translate(1147px, 574px); }
  82%  { transform: translate(1143px, 566px); }
  90%  { transform: translate(1350px, 380px); opacity: 1; }
  100% { transform: translate(1750px, 160px); opacity: 0; }
}
.d-bird__bob { animation: d-bob .5s ease-in-out infinite alternate; }
@keyframes d-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
/* aleteo muy rápido, como un colibrí */
.d-wing { transform-box: fill-box; animation: d-aleteo .07s linear infinite alternate; }
.d-wing--near { transform-origin: 10% 95%; }
.d-wing--far { transform-origin: 5% 95%; animation-delay: -.035s; }
@keyframes d-aleteo { from { transform: scaleY(1); } to { transform: scaleY(.2); } }

/* ---------- Pantallas verticales (teléfonos): todo dentro de la zona visible ---------- */
@media (max-aspect-ratio: 1/1) {
  /* Inicio con scroll: la escena va arriba, donde no hay texto */
  .capuchina { transform: translate(930px, 380px); }
  .d-bird { animation-name: d-vuelo-m; }
  @keyframes d-vuelo-m {
    0%   { transform: translate(420px, 180px); opacity: 0; }
    8%   { opacity: 1; }
    24%  { transform: translate(560px, 210px); }
    38%  { transform: translate(690px, 320px); }
    50%  { transform: translate(785px, 390px); }
    60%  { transform: translate(781px, 383px); }
    70%  { transform: translate(788px, 396px); }
    82%  { transform: translate(783px, 387px); }
    90%  { transform: translate(900px, 260px); opacity: 1; }
    100% { transform: translate(1100px, 120px); opacity: 0; }
  }
  /* Portada sin scroll: la escena va abajo, bajo el título centrado */
  .portal .capuchina { transform: translate(950px, 790px); }
  .portal .d-bird { animation-name: d-vuelo-pm; }
  @keyframes d-vuelo-pm {
    0%   { transform: translate(420px, 900px); opacity: 0; }
    8%   { opacity: 1; }
    24%  { transform: translate(560px, 860px); }
    38%  { transform: translate(700px, 760px); }
    50%  { transform: translate(805px, 800px); }
    60%  { transform: translate(801px, 793px); }
    70%  { transform: translate(808px, 806px); }
    82%  { transform: translate(803px, 797px); }
    90%  { transform: translate(920px, 700px); opacity: 1; }
    100% { transform: translate(1100px, 620px); opacity: 0; }
  }
}

/* ---------- Portada sin scroll: velo más ligero a los lados para ver la escena ---------- */
html[data-version="colibri"] .portal::after {
  background: radial-gradient(ellipse 42% 52% at 50% 52%, rgba(244, 239, 227, .86), rgba(244, 239, 227, .2));
}

/* ---------- Movimiento reducido: la escena queda quieta, el colibrí frente a la flor ----------
   Salvo que la persona pulse «Ver volar al colibrí» (html.animar). */
@media (prefers-reduced-motion: reduce) {
  html:not(.animar) .capuchina__grow { animation: none; transform: none; opacity: 1; }
  html:not(.animar) .capuchina__flor, html:not(.animar) .d-bird__bob, html:not(.animar) .d-wing { animation: none; }
  html:not(.animar) .d-bird { animation: none; opacity: 1; transform: translate(1145px, 570px); }
}
@media (prefers-reduced-motion: reduce) and (max-aspect-ratio: 1/1) {
  html:not(.animar) .d-bird { transform: translate(785px, 390px); }
  html:not(.animar) .portal .d-bird { transform: translate(805px, 800px); }
}

/* Controles de la escena: «Ver volar al colibrí» (si el movimiento está reducido) y sonido del agua */
.d-controls {
  position: absolute; z-index: 3; right: max(16px, 3vw); bottom: clamp(16px, 4vh, 32px);
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: calc(100% - 32px);
}
/* mientras exista el selector flotante de identidad (fase de revisión), los controles van más arriba */
html:not(.en-marco) .hero .d-controls { bottom: 84px; }
.d-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 16px 6px 12px;
  border-radius: 2px; border: 1px solid rgba(75, 90, 51, .5); background: rgba(244, 239, 227, .92); color: #4b5a33;
  font: 600 .72rem/1 "Cinzel", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.d-btn:hover { background: #fff; }
.d-btn svg { width: 18px; height: 18px; flex: none; }
.d-sound .d-sound__on { display: none; }
.d-sound[aria-pressed="true"] .d-sound__on { display: inline; }
.d-sound[aria-pressed="true"] .d-sound__off { display: none; }
.d-sound[aria-pressed="true"] { background: #4b5a33; color: #f4efe3; border-color: #4b5a33; }
/* esperando el primer clic o toque para poder sonar */
.d-sound.is-waiting::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid #4b5a33;
  animation: d-espera 1.8s ease-out infinite !important; animation-duration: 1.8s !important; animation-iteration-count: infinite !important;
}
@keyframes d-espera { from { transform: scale(1); opacity: .8; } to { transform: scale(1.12, 1.45); opacity: 0; } }
@media (max-width: 700px) { .d-controls { bottom: auto; top: calc(var(--header-h, 72px) + 12px); } }
.portal .d-controls { top: auto; bottom: 18px; }