/* Cuba Despierta · Inventos (views/inventos.php). Se carga solo en /descubre-cuba/inventos.
   Paleta de site.css más el papel de las patentes, la tinta del sello y el cobre de los cables.
   Animaciones comunes de redesign.css (kenburns, fadeup, lineup, data-reveal). Sin JS propio. */
.iz { --paper: #f4eedf; --paper-line: #e3d9c2; --ink-doc: #2b2620; --stamp: #b3261e; --copper: #d08a4a; --copper-light: #f2b077;
      --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Courier New', monospace; }

/* ---------- 1. Cabecera: el taller ---------- */
.ih { position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 900px); padding: calc(var(--hdr-h) + 4rem) 0 7rem; background: var(--ink-950); color: #fff; overflow: hidden; isolation: isolate; }
.ih-media { position: absolute; inset: 0; z-index: -3; }
.ih-media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%; transform-origin: 65% 40%; }
html.js .ih-media img { animation: kenburns 26s var(--ease-out) both, hx-drift 46s ease-in-out 26s infinite alternate; }
.ih::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(14,14,14,.94) 0%, rgba(14,14,14,.7) 45%, rgba(14,14,14,.2) 85%), linear-gradient(to top, rgba(14,14,14,.9) 0%, rgba(14,14,14,0) 50%); }
@media (max-width: 767px) { .ih::before { background: linear-gradient(to top, rgba(14,14,14,.96) 0%, rgba(14,14,14,.74) 55%, rgba(14,14,14,.52) 100%); } }
/* Engranajes que giran engranados (cada uno en sentido contrario al vecino) */
.ih-gears { position: absolute; z-index: -1; top: calc(var(--hdr-h) + 1.5rem); right: clamp(1rem, 4vw, 4rem); width: clamp(170px, 24vw, 360px); height: auto; overflow: visible; pointer-events: none; }
.ih-gear { fill: rgba(20,14,8,.5); stroke: var(--copper-light); stroke-width: 1.8; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.ih-gear * { vector-effect: non-scaling-stroke; }
.ih-gear.is-a { translate: 10px 30px; scale: 1.25; }
.ih-gear.is-b { translate: 120px 4px; scale: .9; }
.ih-gear.is-c { translate: 128px 104px; scale: .78; }
html.js .ih-gear { animation: iz-spin 24s linear infinite, iz-fade 1.2s ease .4s both; }
html.js .ih-gear.is-b { animation-name: iz-spin-back, iz-fade; animation-duration: 17s, 1.2s; animation-delay: 0s, .6s; }
html.js .ih-gear.is-c { animation-name: iz-spin-back, iz-fade; animation-duration: 13.7s, 1.2s; animation-delay: 0s, .8s; }
@keyframes iz-spin { to { transform: rotate(360deg); } }
@keyframes iz-spin-back { to { transform: rotate(-360deg); } }
@keyframes iz-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767px) { .ih-gears { opacity: .5; } }
.ih-in { position: relative; width: 100%; }
.ih-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.ih-title { margin-top: 1.2rem; font-size: clamp(2.6rem, .8rem + 6.4vw, 6.6rem); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.ih-title .serif { color: var(--copper-light); font-size: 1.08em; text-transform: none; }
.ih-lead { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e0e0e0; }
.ih-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
/* Onda de voz: una ráfaga de cobre recorre la línea una y otra vez */
.ih-wave { position: absolute; left: 0; right: 0; bottom: 1.2rem; z-index: -1; width: 100%; height: 70px; pointer-events: none; }
.ih-wave path { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ih-wave .is-base { stroke: rgba(255,255,255,.14); stroke-width: 1; }
.ih-wave .is-pulse { stroke: var(--copper-light); stroke-width: 2; stroke-dasharray: .14 .86; stroke-dashoffset: .14; opacity: 0; filter: drop-shadow(0 0 6px rgba(242,176,119,.7)); }
html.js .ih-wave .is-pulse { animation: iz-voice 5s linear 1.2s infinite; }
@keyframes iz-voice { 0% { stroke-dashoffset: .14; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }

/* ---------- 2. Registro de patentes ---------- */
.ip { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); overflow-x: clip; }
.ip-note { max-width: 22rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(4rem, 3rem + 3vw, 6rem); }
.ip-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 900px) {
  .ip-item { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
  .ip-item:nth-child(even) .ip-doc { order: 2; }
}
/* El documento: papel con renglones, doble filete, cabecera mecanografiada */
.ip-doc { position: relative; display: flex; flex-direction: column; gap: 1.1rem; width: 100%; max-width: 470px; margin-inline: auto; padding: 1.6rem 1.6rem 2rem; color: var(--ink-doc); text-decoration: none; background: var(--paper) repeating-linear-gradient(to bottom, transparent 0 27px, var(--paper-line) 27px 28px); border: 1px solid #d8ccb0; box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px #cbbd9c, 0 30px 44px -30px rgba(0,0,0,.6); rotate: -1.5deg; transition: rotate .6s var(--ease-out), translate .6s var(--ease-out), box-shadow .6s; }
.ip-item:nth-child(even) .ip-doc { rotate: 1.5deg; }
.ip-doc:hover { rotate: 0deg; translate: 0 -6px; box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px #cbbd9c, 0 40px 60px -34px rgba(0,0,0,.65); }
.ip-doc:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.ip-head { display: flex; flex-direction: column; gap: .3rem; padding-bottom: .8rem; border-bottom: 2px solid var(--ink-doc); font-family: var(--mono); text-transform: uppercase; }
.ip-head span { font-size: 10.5px; letter-spacing: .14em; color: #6b6151; }
.ip-head b { font-size: 1.25rem; letter-spacing: .06em; }
.ip-fig { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--ink-doc); background: #e9e1cd; }
.ip-fig img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) contrast(1.02); transition: transform 1.4s var(--ease-out), filter .8s; }
.ip-doc:hover .ip-fig img { transform: scale(1.05); filter: none; }
.ip-figcap { position: absolute; left: .6rem; bottom: .5rem; padding: .15rem .5rem; background: var(--paper); font-family: var(--serif); font-style: italic; font-size: 14px; }
.ip-rows { display: flex; flex-direction: column; gap: .45rem; font-family: var(--mono); font-size: 13px; }
.ip-rows > span { display: flex; align-items: baseline; gap: .5rem; }
.ip-rows i { font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: #6b6151; }
.ip-rows i::after { content: ''; display: inline-block; width: 2.2rem; margin-left: .5rem; border-bottom: 1px dotted #8a7f6c; }
.ip-rows b { font-weight: 700; }
/* El sello: cae con un golpe al aparecer la patente */
.ip-stamp { position: absolute; right: -22px; top: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; width: 124px; height: 124px; border-radius: 50%; border: 3px solid var(--stamp); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 6px var(--stamp); color: var(--stamp); background: rgba(244,238,223,.55); text-align: center; rotate: -14deg; opacity: .9; transition: transform .5s cubic-bezier(.2,1.6,.4,1) .9s, opacity .3s ease .9s; }
.ip-stamp span { font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.ip-stamp b { max-width: 90px; font-family: var(--mono); font-size: 10px; line-height: 1.25; font-weight: 700; }
html.js .ip-item[data-reveal]:not(.is-in) .ip-stamp { transform: scale(2.6); opacity: 0; }
@media (max-width: 520px) { .ip-stamp { right: -8px; top: 80px; width: 104px; height: 104px; } }
.ip-body { display: flex; flex-direction: column; gap: 1.1rem; max-width: 36rem; }
.ip-t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.ip-t a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease-out); }
.ip-t a:hover { background-size: 100% 2px; }
.ip-d { font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.ip-pts { list-style: none; margin: .2rem 0 0; padding: 1.1rem 0 0; display: flex; flex-direction: column; gap: .75rem; border-top: 1px solid var(--line); counter-reset: art; }
.ip-pts li { position: relative; padding-left: 3.2rem; font-size: 15px; line-height: 1.6; color: var(--muted); counter-increment: art; }
.ip-pts li::before { content: 'Art. ' counter(art); position: absolute; left: 0; top: .25em; font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--stamp); }
.ip-pts strong { color: var(--ink); }
.ip-go { margin-top: .4rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; padding-bottom: .15rem; border-bottom: 2px solid var(--brand); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); text-decoration: none; }
.ip-go svg { transition: transform .45s var(--ease-out); }
.ip-go:hover svg { transform: translateX(5px); }
.ip-empty { padding: 2rem; border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- 2b. Más patentes: documentos pequeños ---------- */
.ia { padding-block: 0 clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); overflow-x: clip; }
.ih + .ia { padding-top: clamp(4rem, 3rem + 4vw, 7rem); }
.ia-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem 1.6rem; }
@media (min-width: 560px) { .ia-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ia-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ia-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ia-doc { position: relative; display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1rem 1rem 1.2rem; color: var(--ink-doc); text-decoration: none; background: var(--paper) repeating-linear-gradient(to bottom, transparent 0 21px, var(--paper-line) 21px 22px); border: 1px solid #d8ccb0; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px #cbbd9c, 0 20px 30px -24px rgba(0,0,0,.55); rotate: -1deg; transition: rotate .5s var(--ease-out), translate .5s var(--ease-out); }
.ia-item:nth-child(even) .ia-doc { rotate: 1deg; }
.ia-doc:hover { rotate: 0deg; translate: 0 -5px; }
.ia-doc:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.ia-head { padding-bottom: .5rem; border-bottom: 2px solid var(--ink-doc); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ia-fig { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--ink-doc); }
.ia-fig img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25); transition: filter .6s, transform 1.2s var(--ease-out); }
.ia-doc:hover .ia-fig img { filter: none; transform: scale(1.05); }
.ia-t { font-size: 14.5px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.ia-p { font-family: var(--mono); font-size: 11px; color: #6b6151; }
.ia-stamp { position: absolute; right: -8px; top: 2.4rem; padding: .3rem .6rem; border: 2px solid var(--stamp); border-radius: 4px; color: var(--stamp); background: rgba(244,238,223,.6); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; rotate: -10deg; transition: transform .45s cubic-bezier(.2,1.6,.4,1) .6s, opacity .3s ease .6s; }
html.js .ia-item[data-reveal]:not(.is-in) .ia-stamp { transform: scale(2.2); opacity: 0; }

/* ---------- 3. Cronología: la voz por el cable ---------- */
.ic { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--ink-900); color: #fff; scroll-margin-top: var(--hdr-h); overflow: hidden; }
.ic .kicker-light, .ic .h-display .serif { color: var(--copper-light); }
.ic-note { max-width: 26rem; font-size: 15px; line-height: 1.6; color: #c9c9c9; }
.ic-line { position: relative; list-style: none; margin: 1rem 0 0; padding: 0 0 0 2.2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
/* El cable y el pulso de voz que lo recorre */
.ic-line::before, .ic-line::after { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--copper); }
.ic-line::after { width: 4px; left: 8px; background: linear-gradient(to bottom, transparent, #fff, transparent) no-repeat 0 -30% / 100% 18%; filter: drop-shadow(0 0 6px var(--copper-light)); }
html.js .ic-line::after { animation: iz-pulse-y 3.6s linear infinite; }
@keyframes iz-pulse-y { from { background-position: 0 -30%; } to { background-position: 0 130%; } }
html.js .ic-line[data-reveal] { opacity: 1; transform: none; }
.ic-line li { position: relative; display: flex; flex-direction: column; gap: .3rem; transition: opacity .6s ease, transform .8s var(--ease-out); transition-delay: calc(.2s + var(--i) * 160ms); }
html.js .ic-line[data-reveal]:not(.is-in) li { opacity: 0; transform: translateY(16px); }
.ic-dot { position: absolute; left: calc(-2.2rem + 2px); top: .35rem; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-900); border: 3px solid var(--copper); }
.ic-y { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ic-h { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.2; color: var(--copper-light); }
.ic-t { font-size: 14px; line-height: 1.55; color: #c9c9c9; }
.ic-line li.is-cuba .ic-dot { background: var(--brand); border-color: #fff; }
.ic-line li.is-cuba .ic-dot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--brand); animation: pin-pulse 2.6s ease-out infinite; }
.ic-line li.is-cuba .ic-y { color: var(--brand-light); }
@media (min-width: 960px) {
  .ic-line { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.4rem; padding: 2.4rem 0 0; }
  .ic-line::before, .ic-line::after { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 2px; }
  .ic-line::after { height: 4px; top: 6px; background: linear-gradient(90deg, transparent, #fff, transparent) no-repeat -30% 0 / 14% 100%; }
  html.js .ic-line::after { animation-name: iz-pulse-x; }
  .ic-dot { left: 0; top: -2.4rem; }
}
@keyframes iz-pulse-x { from { background-position: -30% 0; } to { background-position: 130% 0; } }
.ic-more { margin-top: 2.6rem; }

/* ---------- 4. Sigue descubriendo ---------- */
.ix { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.ix ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
@media (min-width: 560px) { .ix ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ix ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ix ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ix a { display: flex; align-items: center; gap: .9rem; height: 100%; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .3s, transform .5s var(--ease-out); }
.ix-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; background: var(--soft); color: var(--brand-dark); transition: background-color .35s, color .35s, transform .5s var(--ease-out); }
.ix-txt { display: flex; flex: 1; flex-direction: column; gap: .15rem; min-width: 0; }
.ix-n { font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.ix-c { font-size: 12px; color: var(--muted); }
.ix a > svg { color: var(--brand); transition: transform .45s var(--ease-out); }
.ix a:hover { border-color: var(--ink); transform: translateY(-3px); }
.ix a:hover .ix-ico { background: var(--brand); color: #fff; transform: rotate(-8deg); }
.ix a:hover > svg { transform: translateX(5px); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .ih-gear, html.js .ih-wave .is-pulse, html.js .ic-line::after, .ic-line li.is-cuba .ic-dot::after { animation: none; }
  .ip-doc, .ip-fig img, .ip-stamp, .ic-line li, .ix a { transition: none; }
  html.js .ip-item[data-reveal]:not(.is-in) .ip-stamp { transform: none; opacity: .9; }
  html.js .ic-line[data-reveal]:not(.is-in) li { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ia-doc, .ia-fig img, .ia-stamp { transition: none; }
  html.js .ia-item[data-reveal]:not(.is-in) .ia-stamp { transform: none; opacity: 1; }
}