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

/* Como los objetos de mi "escritorio de laboratorio" están acomodados de forma un poco orgánica, me ayudé de la IA para hacer un script en JS que controlara que no se empalmaran, estos pedazos de CSS apoyan ese código de Javascript. */

[hidden] {display: none !important; }

.oculto-colision { display: none !important; }

::selection      { background: #e8ff00; color: #2F3031; }
::-moz-selection { background: #e8ff00; color: #2F3031; }

/* TOKENS DE DISEÑO */
:root {
  --black:    #2F3031;
  --offwhite: #f0ebe0;
  --font: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  --font-hand: 'September Spirit', 'Segoe Script', cursive;
  --petri-clean: #c7d9e8;
}

/* ------------------ GENERAL ------------------ */
html, body {
  height: 100%;
  width: 100%;
  background: var(--black) url('assets/img/fondo.png') center center / cover no-repeat;
  color: var(--offwhite);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Para visibilidad por viewport (el detalle responsive más abajo) */
.solo-mobile { display: none; }

/* ------------------ NAV ------------------ */
#ui-top {
  position: relative;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 34px;
}

.ui-logo-link {
  display: inline-flex;
}

#ui-logo {
  display: block;
  height: 19px;
  width: auto;
}

#ui-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

#ui-nav a {
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--offwhite);
  text-decoration: none;
  transition: opacity 0.2s ease;
  opacity: 1;
}

#ui-nav a:hover {
  opacity: 0.6; 
}

/* Menú desplegable (tablet/celular) */
.ui-menu-wrap { position: relative; }

.ui-menu-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(43, 47, 51, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.4);
  z-index: 40;
}
.ui-menu-panel[hidden] { display: none; }
.ui-menu-panel a {
  padding: 9px 16px;
  border-radius: 8px;
}
.ui-menu-panel a:hover { background: rgba(255,255,255,0.06); }

#ui-menu { cursor: pointer; }

/* ------------------ PETRI DISH ------------------ */
#petri-wrap {
  position: absolute;
  right: calc(2vw + 80px);
  bottom: -13vh;
  width: clamp(360px, min(76vh, 42vw), 700px); /*clamps me ayudan al acomodo de todo responsive*/
  height: clamp(360px, min(76vh, 42vw), 700px);
  z-index: 1;
}

#petri {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

/* Animación de cambio de color del fondo */
#petri-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--petri-clean);
  --halftone: rgb(176, 200, 219); 
  transition: background 2s ease;
}

/* Claude sugirió esto para que la textura de halftone de fondo del petri cambiara de color a su propio ritmo, de forma que siempre se notara pero avanzara de la mano del color del fondo general */
@property --halftone {
  syntax: '<color>';
  inherits: true;
  initial-value: rgb(176, 200, 219);
}

#petri-bg::before,
#petri-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

/* Textura de halftone como imagen */
#petri-bg::before {
  background: var(--halftone, rgb(176, 200, 219));
  -webkit-mask: url('assets/img/petri-bg-mask.png') center / 100% 100% no-repeat;
          mask: url('assets/img/petri-bg-mask.png') center / 100% 100% no-repeat;
}

#petri-bg::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: soft-light;
  opacity: 0.4;
}

/* ------------------ COLONIA DE MOHO ------------------ */
#colony {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}

/* La "iluminación" del petri dish, para crear un poquito de profundidad le agregué sombra interna de desde el lado izq */
#petri-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 30px -20px 70px -26px rgba(6,6,4,0.55),
    inset 14px -8px 34px -20px rgba(6,6,4,0.4),
    0 0 0 1px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* Cree esta imagen del petri dish con textura de risografía para contener mi colonia */
#petri-ring {
  position: absolute;
  inset: -8%; /* para que se salga de las orillitas del círculo */
  background: url('assets/img/petri-dish-alpha.png') center / 100% 100% no-repeat;
  pointer-events: none;
}

/* ------------------ MOHO ------------------ */
.moho-instance {
  position: absolute;
  width: 0;            /* el ancho real lo define el JS (inline) */
  aspect-ratio: 1;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scaleX(var(--flip, 1));
  animation: spin var(--spin-dur, 90s) linear var(--spin-delay, 0s) infinite;
  cursor: pointer; /*la pista que se puede hacer clic sobre el moho*/
}

/* Giro del moho */
@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scaleX(var(--flip, 1)); }
  to   { transform: translate(-50%, -50%) rotate(calc(var(--tilt, 0deg) + var(--spin-dir, 1) * 360deg)) scaleX(var(--flip, 1)); }
}

/* NOTA: Me ayudé de Claude para animar los movimientos del moho: cómo tiembla
   y la forma en la que crece. A diferencia de los hongos (que crecían hacia
   arriba desde el suelo), el moho crece desde el CENTRO hacia afuera, como una
   colonia que se expande. Sigue siendo en stop motion :) */

.moho-instance img {
  position: absolute;
  left: 50%;
  top: 50%;
  /* width/height los pone el JS según el tamaño real de cada etapa */
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;
}

.moho-instance img.active {
  opacity: 1;
  animation: var(--tr-name, tremble-a) var(--tr-dur, 1s) steps(3) var(--tr-delay, 0s) infinite;
}

.moho-instance img.active.unfolding {
  animation: unfold 0.19s steps(4) 1 forwards;
}

@keyframes unfold {
  from { transform: translate(-50%, -50%) scale(var(--from-scale, 0.18)); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

/* Animación en reversa para cuando se hace clic sobre una manchita */
.moho-instance img.active.folding {
  animation: fold 0.19s steps(4) 1 forwards;
}

@keyframes fold {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(var(--from-scale, 0.18)); }
}

/* NOTA: 3 opciones de "temblor" (todas creadas animando los ángulos de rotación) diferente para que no todas las manchas vibren al mismo tiempo, si no que se sienta único para cada una. La base translate(-50%,-50%) mantiene el moho centrado. */

@keyframes tremble-a {
  0%   { transform: translate(-50%, -50%) translate(0,0) rotate(0deg); }
  22%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) * -2.6px), calc(var(--tr,0.5) *  1.4px)) rotate(calc(var(--tr,0.5) * -0.8deg));  }
  41%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) *  1.8px), calc(var(--tr,0.5) * -0.7px)) rotate(calc(var(--tr,0.5) *  0.5deg));  }
  68%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) * -1.0px), calc(var(--tr,0.5) * -1.9px)) rotate(calc(var(--tr,0.5) * -0.35deg)); }
  86%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) *  2.4px), calc(var(--tr,0.5) *  0.9px)) rotate(calc(var(--tr,0.5) *  0.7deg));  }
  100% { transform: translate(-50%, -50%) translate(0,0) rotate(0deg); }
}
@keyframes tremble-b {
  0%   { transform: translate(-50%, -50%) translate(0,0) rotate(0deg); }
  19%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) *  1.5px), calc(var(--tr,0.5) * -1.6px)) rotate(calc(var(--tr,0.5) *  0.6deg));  }
  37%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) * -2.1px), calc(var(--tr,0.5) *  0.5px)) rotate(calc(var(--tr,0.5) * -0.5deg));  }
  58%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) *  0.7px), calc(var(--tr,0.5) *  2.0px)) rotate(calc(var(--tr,0.5) *  0.3deg));  }
  79%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) * -1.4px), calc(var(--tr,0.5) * -0.9px)) rotate(calc(var(--tr,0.5) * -0.7deg));  }
  100% { transform: translate(-50%, -50%) translate(0,0) rotate(0deg); }
}
@keyframes tremble-c {
  0%   { transform: translate(-50%, -50%) translate(0,0) rotate(0deg); }
  28%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) * -1.2px), calc(var(--tr,0.5) * -1.1px)) rotate(calc(var(--tr,0.5) * -0.4deg));  }
  52%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) *  2.3px), calc(var(--tr,0.5) *  0.6px)) rotate(calc(var(--tr,0.5) *  0.8deg));  }
  73%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) * -0.6px), calc(var(--tr,0.5) *  1.7px)) rotate(calc(var(--tr,0.5) * -0.6deg));  }
  91%  { transform: translate(-50%, -50%) translate(calc(var(--tr,0.5) *  1.1px), calc(var(--tr,0.5) * -0.5px)) rotate(calc(var(--tr,0.5) *  0.45deg)); }
  100% { transform: translate(-50%, -50%) translate(0,0) rotate(0deg); }
}

/* ------------------ COPY ------------------ */
#editorial {
  position: relative;
  z-index: 2;
  padding: 26px 40px 0;   /* menos padding arriba: aprovecho el espacio del header */
  pointer-events: none;
}

#editorial a,
#editorial button { pointer-events: auto; }

.ed-title {
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(34px, 3.4vw, 64px);   /* base 1920: ~64px, más proporcionado */
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 14px 0 20px;
  max-width: 20ch;
}
.ed-title .t-fill  { color: var(--offwhite); }
.ed-title .t-muted { color: var(--offwhite); }

/* Párrafo de contexto bajo el título, en Neue Haas */
.ed-lede {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(12.5px, 0.92vw, 16px);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--offwhite);
  max-width: 44ch;
  margin-top: -6px;
}

/* para cuando estamos en móvil y tablet */
.ed-dato {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-top: 38px;
  color: var(--offwhite);
}
.ed-dato-fecha {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.ed-dato-fecha .js-fecha {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ed-dato-num {
  font-weight: 500;
  font-size: clamp(40px, 12vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ed-dato-unit {
  font-size: clamp(13px, 3.4vw, 16px);
  font-weight: 400;
  letter-spacing: 0;
}
.ed-dato-btn {
  align-self: center;
  margin-top: 14px;
}

.ed-text {
  flex: 0 1 340px;
}

.ed-text p {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(240,235,224,0.62);
  break-inside: avoid;
}
.ed-text p + p {
  margin-top: 12px;
}

/* Botón */

.btn {
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 9px 18px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Botón en el NAV */

.btn-ghost {
  background: transparent;
  color: var(--offwhite);
  border-color: var(--offwhite);
}

/* ------------------ FOOTER ------------------ */
#ui-footer {
  position: absolute;
  left: 2.5%;
  right: auto;
  bottom: 2.5%;
  z-index: 3;
  display: flex;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: #4a4843;
}

/* ------------------ PORTAOBJETOS (microscopio) ------------------ */
#slides {
  position: fixed;
  top: 12vh;
  right: -1vw;
  width: clamp(280px, 24vw, 420px);
  z-index: 2;
  transform: rotate(-4deg);
  pointer-events: none;
}
#slides img { width: 100%; height: auto; display: block; aspect-ratio: 2816 / 1536; }

/* ------------------ CUADERNO (objeto, abajo-izquierda) ------------------ */
#cuaderno {
  position: fixed;
  left: calc(-5vw - 30px);
  bottom: -11vh;
  width: clamp(440px, min(46vw, 85vh), 880px);
  z-index: 1;
  pointer-events: none;
}

#cuaderno img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1792 / 1277;   /* alto conocido sin esperar la imagen (para medir el layout al inicio) */
}

/* ------------------ POST-IT ------------------ */
#postit {
  position: fixed;
  left: 7%;
  bottom: 8%;   /* más abajo, junto con el cuaderno, para no tapar el copy */
  width: clamp(240px, 17.6vw, 336px);   /* aprox 80% */
  aspect-ratio: 768 / 772;
  z-index: 2;
  pointer-events: auto;
  transform: rotate(4deg);
  container-type: inline-size;
}

#postit .pf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

#postit .pf-1 {
  opacity: 1;
}

/* UI del "día en cultivo" sobre el post-it. Hereda la rotación del postit, así que va inclinada igual que la nota. */
.postit-ui {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 13% 8% 30%;
  pointer-events: none;
  color: #3a4850;
}

.pu-fecha {
  font-size: 5cqw;
  letter-spacing: 0.01em;
}
.pu-label { color: #5b6970; }
.postit-ui .js-fecha {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #313f46;
}

.postit-ui .js-num {
  font-family: var(--font);
  font-weight: 500;
  font-size: 27cqw;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #313f46;
  margin: 0.1em 0 0.04em;
}

.pu-unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  font-size: 5cqw;
  color: #4a5860;
}
.pu-info-wrap { position: relative; display: inline-flex; }
.pu-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5cqw;
  height: 5cqw;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: #2f6fed;
  color: #fff;
  font-family: inherit;
  font-size: 3.4cqw;
  font-weight: 700;
  font-style: italic;
  cursor: help;
  pointer-events: auto;
}

/* Mini explicación de PM2.5: hover en desktop, tap sobre la i en tablet/móvil. */
.pu-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  max-width: 60vw;
  padding: 8px 11px;
  border-radius: 9px;
  background: rgba(28, 31, 34, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #e9ecef;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 20;
}
.pu-info-wrap:hover .pu-tip,
.pu-info:hover + .pu-tip,
.pu-info:focus-visible + .pu-tip,
.pu-tip.is-open {
  opacity: 1;
  visibility: visible;
}

.pu-btn {
  pointer-events: auto;
  position: absolute;
  left: 8%;
  bottom: 9%;
  font-size: 5cqw;
  padding: 2.6cqw 8cqw;
  border-radius: 50px;
  color: #4a5860;
  border-width: 2px;
  border-color: rgba(58,72,80,0.6);
}
.pu-btn:hover { color: #313f46; border-color: rgba(58,72,80,0.85); }

/* ------------------ LAPICERO ------------------ */
#lapicero {
  position: fixed;
  left: 28%;
  bottom: -14vh;   /* un poco más abajo */
  width: clamp(190px, 17.25vw, 310px);
  z-index: 2;
  pointer-events: none;
  transform: rotate(-12deg);
}

#lapicero img { width: 100%; height: auto; display: block; aspect-ratio: 1207 / 2753; }

/* ------------------ CALENDARIO (selector propio, solo 2024) ------------------ */
.cal {
  position: fixed;
  z-index: 50;
  width: 300px;
  padding: 18px 18px 14px;
  border-radius: 18px;
  background: rgba(43, 47, 51, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  color: #e9ecef;
  font-family: var(--font);
  user-select: none;
}

.cal[hidden] {
  display: none;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal-month {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--offwhite);
}
.cal-nav { display: flex; gap: 18px; }
.cal-nav button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--offwhite);
  font-size: 20px;
  line-height: 1;
}
.cal-nav button:hover {
  opacity: 0.6;
}
.cal-nav button:disabled {
  opacity: 0.25; cursor: default;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-dow span {
  text-align: center;
  font-size: 12px;
  color: var(--offwhite);
  padding: 6px 0;
}
.cal-days { margin-top: 2px; }

.cal-day,
.cal-blank {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.cal-day {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #e8ff00;
  border-radius: 50%;
}
.cal-day:hover { background: rgba(255,255,255,0.08); }
.cal-day.is-selected {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

.cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.cal-foot button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--offwhite);
}
.cal-foot button:hover { opacity: 0.6; }
.cal-foot .cal-today { color: var(--offwhite); }

/* ------------------ CONTACTO ------------------ */
#contacto {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 22, 24, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#contacto[hidden] { display: none !important; }

.contacto-card {
  position: relative;
  width: min(420px, 100%);
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: rgba(43, 47, 51, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  color: var(--offwhite);
}

.contacto-form,
.contacto-ok { display: flex; flex-direction: column; gap: 12px; }
.contacto-form[hidden], .contacto-ok[hidden] { display: none; }

.contacto-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--offwhite);
}

.contacto-sub {
  margin-top: -6px;
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--offwhite);
  opacity: 0.7;
}

.contacto-form input,
.contacto-form textarea {
  font-family: var(--font);
  font-size: 14px;
  color: var(--offwhite);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(240, 235, 224, 0.18);
  border-radius: 10px;
  padding: 11px 13px;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.contacto-form input::placeholder,
.contacto-form textarea::placeholder { color: rgba(240, 235, 224, 0.4); }
.contacto-form input:focus,
.contacto-form textarea:focus {
  border-color: rgba(240, 235, 224, 0.55);
  background: rgba(255, 255, 255, 0.1);
}

.contacto-enviar {
  align-self: flex-end;
  margin-top: 4px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  color: var(--black);
  background: var(--offwhite);
  border: 0;
  border-radius: 20px;
  padding: 10px 22px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.contacto-enviar:hover { opacity: 0.85; }

.contacto-x {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  color: var(--offwhite);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.contacto-x:hover { opacity: 1; }

/* ------------------ ACERCA: postal que se voltea ------------------ */
#acerca-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: linear-gradient(
    to top,
    rgba(47, 48, 49, 0.70) 0%,
    rgba(47, 48, 49, 0.70) 72%,
    rgba(47, 48, 49, 0)    92%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#acerca-overlay.is-on {
  opacity: 1;
  pointer-events: auto;
}

/* Postal con perspectiva 3D para la animación de giro. */
#postal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(64vh, 88vw);
  aspect-ratio: 1152 / 1352;
  z-index: 110;
  perspective: 1800px;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
#postal.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.postal-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotate(-3.5deg) rotateY(0deg);
  transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.2, 1);
  cursor: pointer;
}
#postal.is-flipped .postal-inner {
  transform: rotate(-3.5deg) rotateY(180deg);
}

.postal-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 34px 70px -22px rgba(0, 0, 0, 0.65),
    0 10px 24px rgba(0, 0, 0, 0.35);
}
.postal-face img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

.postal-back {
  transform: rotateY(180deg);
  container-type: inline-size;
}

/* Texto escrito "a mano" sobre las líneas del reverso (September Spirit). */
.postal-text {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 37.6%;
  bottom: 3%;
  font-family: var(--font-hand);
  color: #2b2a28;
  font-size: 4.55cqw;
  line-height: 4.6cqw;
  letter-spacing: 0.01em;
  text-align: left;
  text-wrap: pretty;
}
.postal-text p { margin: 0; }
.postal-text p + p { margin-top: 4.6cqw; } /*para mantener la grilla */

/* ------------------ INTRO (animaciones de carga de la pag) ------------------ */
@keyframes entra-izq {
  from { opacity: 0; translate: -72vw 5vh;  rotate: -15deg; }
  to   { opacity: 1; translate: 0 0;         rotate: 0deg; }
}
@keyframes entra-der {
  from { opacity: 0; translate: 72vw -4vh;   rotate: 15deg; }
  to   { opacity: 1; translate: 0 0;         rotate: 0deg; }
}
@keyframes entra-abajo {
  from { opacity: 0; translate: 0 55vh;      rotate: 8deg; }
  to   { opacity: 1; translate: 0 0;         rotate: 0deg; }
}
@keyframes entra-texto {
  from { opacity: 0; translate: 0 1.1em; }
  to   { opacity: 1; translate: 0 0; }
}

/* Para medir los espacios que van a ocupar cada elemento en el tamaño exacto de la pantalla anetes de animarlos */
body.intro-pendiente #petri-wrap,
body.intro-pendiente #cuaderno,
body.intro-pendiente #postit,
body.intro-pendiente #slides,
body.intro-pendiente #lapicero,
body.intro-pendiente .ui-logo-link,
body.intro-pendiente #ui-nav,
body.intro-pendiente .ed-title,
body.intro-pendiente .ed-lede,
body.intro-pendiente .ed-dato,
body.intro-pendiente #ui-footer { opacity: 0; }

/* Objetos: cada uno desde su orilla, escalonados */
body.intro #petri-wrap { animation: entra-abajo 0.9s  steps(8) both; }
body.intro #cuaderno   { animation: entra-izq   0.75s steps(7) both 0.10s; }
body.intro #postit     { animation: entra-izq   0.75s steps(7) both 0.22s; }
body.intro #slides     { animation: entra-der   0.75s steps(7) both 0.18s; }
body.intro #lapicero   { animation: entra-abajo 0.70s steps(6) both 0.32s; }

/* Textos: suben y aparecen a pasos (como frames de stop motion) */
body.intro .ui-logo-link { animation: entra-texto 0.5s steps(4) both 0.10s; }
body.intro #ui-nav       { animation: entra-texto 0.5s steps(4) both 0.20s; }
body.intro .ed-title     { animation: entra-texto 0.6s steps(5) both 0.34s; }
body.intro .ed-lede      { animation: entra-texto 0.6s steps(5) both 0.46s; }
body.intro .ed-dato      { animation: entra-texto 0.6s steps(5) both 0.54s; }
body.intro #ui-footer    { animation: entra-texto 0.5s steps(4) both 0.62s; }

/* NOTA DE ACCESIBILIDAD */
@media (prefers-reduced-motion: reduce) {
  body.intro * { animation-name: none !important; }
}

/* ------------------ RESPONSIVE ------------------ */
/* En vertical (tablet y móvil) no caben los objetos de escritorio (cuaderno, lapicero, portaobjetos) entonces el layout pasa a: título arriba, el post-it centrado como tarjeta (con datos + botón) y el petri grande abajo. */

@media (max-width: 900px), (max-aspect-ratio: 23/20) {
  #ui-top { padding: 18px 24px; }
  #ui-nav { gap: 18px; }

  /* nav desktop fuera; aparece el menú desplegable "Menú" */
  .solo-desktop { display: none !important; }
  .ui-menu-wrap.solo-mobile { display: block; }

  /* objetos de escritorio fuera */
  #cuaderno, #lapicero, #slides { display: none; }

  #editorial { padding: 26px 24px 0; }
  /* título más grande y en  aprox 3 líneas, ocupando aprox 2/3 del ancho (no toda la pantalla) */
  .ed-title { font-size: clamp(38px, 5.6vw, 52px); max-width: 20ch; }
  #postit { display: none; }
  .ed-lede { display: block; margin-top: 6px; }
  .ed-dato { display: flex; }

  /* petri centrado abajo, grande, bleed por abajo. Tope por px Y por altura para que en pantallas anchas/chaparras no se vuelva gigante y tape el título y todo el fondo. */
  #petri-wrap {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 80dvh, 660px);
    height: min(92vw, 80dvh, 660px);
    bottom: -14dvh;
  }

  /* sin libreta (vertical): el footer va centrado abajo, mismo gris oscuro */
  #ui-footer {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 14px;
    justify-content: center;
    text-align: center;
    color: #4a4843;
  }
}

/* Móvil... título más chico; post-it más grande en proporción y el petri puede cortarse de los lados. */
@media (max-width: 600px) {
  #ui-top { padding: 18px 20px; }
  #editorial { padding: 18px 20px 0; }
  .ed-title { font-size: clamp(30px, 9.5vw, 44px); max-width: none; margin: 4px 0 0; }

  #petri-wrap {
    width: min(128vw, 92dvh, 560px);
    height: min(128vw, 92dvh, 560px);
    bottom: -24dvh;
  }

  #ui-footer { bottom: 12px; }
}