/* ============================================================
   index.css — Estilos específicos de la home
   ============================================================ */

html, body { overflow: hidden; }

.hd, .rail, .hud, .edge { pointer-events: none; }
.hd :is(a, button), .rail .tick { pointer-events: auto; }

/* Barra superior de progreso */
.edge {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 45;
}
.edge i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--acc);
}

/* Burger */
.bur { position: relative; width: 18px; height: 10px; display: block; }
.bur i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: .3s var(--ez);
}
.bur i:first-child { top: 0; }
.bur i:last-child { bottom: 0; }

/* Rail (navegación inferior derecha) */
.rail {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  gap: 16px;
  align-items: flex-end;
  right: max(var(--pad), env(safe-area-inset-right, 0px));
}

.tick { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.tick .tlb {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--mut);
  opacity: 0;
  transform: translateY(4px);
  transition: .25s;
  white-space: nowrap;
}
.tick i {
  width: 14px;
  height: 1px;
  background: var(--mut);
  display: block;
  transition: .3s;
}
.tick:hover .tlb, .tick.on .tlb { opacity: 1; transform: none; }
.tick.on .tlb { color: var(--ink); }
.tick.on i { width: 32px; background: var(--acc); }

/* HUD inferior izquierda */
.hud {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  user-select: none;
  left: max(var(--pad), env(safe-area-inset-left, 0px));
}
#hudIdx { color: var(--acc); font-size: 12px; }
.hud-sep { color: var(--mut); margin: 0 6px; }

/* View (scroll horizontal) */
.view {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100dvh;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.view::-webkit-scrollbar { display: none; }
html.lock .view { overflow: hidden; }

.sec {
  position: relative;
  overflow: clip;
  flex: 0 0 100vw;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 86px var(--pad) 58px;
  display: flex;
  flex-direction: column;
}

#s3, #s4 { overflow-y: auto; overflow-x: clip; scrollbar-width: none; }
#s3::-webkit-scrollbar, #s4::-webkit-scrollbar { display: none; }

.sec.tall { flex-basis: 200vw; display: block; padding: 0; }

.stick {
  position: sticky;
  left: 0; top: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  overflow: clip;
  padding: 86px var(--pad) 58px;
  display: flex;
  flex-direction: column;
}

.tallend { width: 100vw; height: 100%; scroll-snap-align: end; pointer-events: none; }

/* Cabeceras de sección */
.sec-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: clamp(14px, 2.4vh, 32px);
}
.sec-h .no { font-family: var(--mono); font-size: 11px; color: var(--acc); }
.sec-h h2 { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .24em; }
.sec-h .end {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--mut);
}

/* Reveal on scroll */
.rev { transition: opacity .7s var(--ez), transform .7s var(--ez); transition-delay: var(--d, 0s); }
html.js .rev { opacity: 0; transform: translateX(34px); }
html.js .sec.in .rev { opacity: 1; transform: none; }

/* Ghost numbers */
.ghost {
  position: absolute;
  right: 2vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 44vh;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ghost);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Hero */
.hero {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

.kick-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--mut);
  margin-bottom: 3.2vh;
}
.kick-row b { font-weight: 400; color: var(--acc); }

.hero-t {
  font-family: var(--serif);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--brand);
  font-size: clamp(40px, 10.5vw, 220px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-optical-sizing: auto;
}
.hero-t .hero-line { display: inline-flex; flex-wrap: wrap; align-items: center; }
.hero-t .hero-line .lw {
  display: inline-block;
  overflow: hidden;
  line-height: 1;
  padding: .14em 0 .06em;
  margin: -.14em 0 -.06em;
}
.hero-t .hero-line .lw .lt {
  display: inline-block;
  transform: translateY(135%);
  will-change: transform;
  animation: rise 1s var(--ez) forwards;
  animation-delay: calc(.15s + var(--i) * .07s);
}

@keyframes rise {
  from { transform: translateY(135%); }
  to { transform: translateY(0); }
}

.hero-t.free .lw { overflow: visible; }
.lw-reg { align-self: flex-start; margin-top: .14em; margin-left: .05em; }
.lw-reg .lt { font-size: .16em; line-height: 1; }

.hero-row { display: flex; align-items: flex-end; gap: clamp(24px, 3.5vw, 70px); margin-top: 2.6vh; }
.hero-sub {
  max-width: 34ch;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.55;
  padding-bottom: .4em;
}
.stats { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--mut); }
.stats b { font-weight: 400; color: var(--ink); }

.gosec {
  flex: none;
  align-self: center;
  margin-left: auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color .25s, color .25s;
}
.gosec:hover { border-color: var(--acc); color: var(--acc); }
.gosec svg { width: 18px; height: 18px; transition: transform .25s var(--ez); }
.gosec:hover svg { transform: translateX(4px); }

/* Hint inferior */
.hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transition: opacity .5s;
}
.hint.off { opacity: 0; }
.hint span { font-family: var(--mono); font-size: 9px; letter-spacing: .32em; color: var(--mut); }
.hint-line {
  width: 46px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
  position: relative;
  display: block;
}
.hint-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -45%;
  width: 45%;
  height: 100%;
  background: var(--acc);
  animation: slideR 1.7s ease-in-out infinite;
}
@keyframes slideR { to { left: 110%; } }

/* Cruces */
.cross { position: absolute; width: 11px; height: 11px; z-index: 3; pointer-events: none; }
.cross::before, .cross::after { content: ''; position: absolute; background: var(--mut); }
.cross::before { left: 5px; top: 0; width: 1px; height: 11px; }
.cross::after { top: 5px; left: 0; height: 1px; width: 11px; }
.c-tl { top: 78px; left: 24px; }
.c-tr { top: 78px; right: 24px; }

/* Manifiesto */
.mani-wrap { flex: 1; display: flex; align-items: safe center; position: relative; z-index: 2; }
.mani {
  font-weight: 600;
  font-size: clamp(20px, min(3.2vw, 5.5vh), 56px);
  line-height: 1.22;
  letter-spacing: -.01em;
  max-width: 24ch;
}
.mani .w { color: var(--ghost); transition: color .15s linear; }
.mani .w.on { color: var(--ink); }
.mani .w.acc { font-style: italic; }
.mani .w.acc.on { color: var(--acc); }

.mhint {
  margin-top: 3.5vh;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--mut);
  transition: opacity .4s;
}
.mhint.off { opacity: 0; }
.mhint svg { width: 15px; height: 15px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* Controles del track */
.tctl { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#tIdx { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--mut); }

/* Track (carrusel vertical) */
.track {
  flex: 1;
  min-height: 0;
  user-select: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}
.track::-webkit-scrollbar { display: none; }
#track:focus-visible { outline: 1px solid var(--acc); outline-offset: -2px; }

/* Paneles */
.panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  gap: clamp(18px, 3.5vw, 52px);
  align-items: center;
}
.pn-a { grid-template-columns: 1.05fr .95fr; }
.pn-b { grid-template-columns: .95fr 1.05fr; }
.pn-d { grid-template-columns: 1fr .34fr; }
.pn-c { display: block; position: relative; }

.pmedia { position: relative; overflow: hidden; height: min(58vh, 100%); }
.pn-d .pmedia { height: min(72vh, 100%); }
.pmedia img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: grayscale(1) contrast(1.06) brightness(.92);
  transition: filter .5s, transform .8s var(--ez);
}
.pmedia:hover img { filter: none; transform: scale(1.045); }

.ptag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 4;
  pointer-events: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  padding: 5px 9px;
}

.popen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  cursor: pointer;
  background: transparent;
  border: none;
}
.popen:focus-visible { outline: 1px solid var(--acc); outline-offset: -3px; }

.pill {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  padding: 8px 12px;
  transition: background .25s, color .25s;
  pointer-events: none;
}
.popen:hover .pill { background: var(--ink); color: var(--bg); }
.pill svg { width: 11px; height: 11px; }

.pbody { position: relative; z-index: 2; }
.pnum { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--acc); }
.ptitle {
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand);
  font-size: clamp(30px, min(5.4vw, 9vh), 88px);
  line-height: .92;
  letter-spacing: 0;
  margin: 12px 0 14px;
  font-optical-sizing: auto;
}
.pdesc { max-width: 46ch; color: var(--mut); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.55; }

.pmeta { margin-top: clamp(14px, 2.2vh, 30px); border-top: 1px solid var(--line); }
.pmeta div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
}
.pmeta dt { color: var(--mut); font-weight: 400; }
.pmeta dd { color: var(--ink); }

.pn-c .pmedia { position: absolute; inset: 0; height: auto; }
.pn-c .scrim { position: absolute; inset: 0; background: rgba(12, 12, 11, .38); z-index: 1; }
.pn-c .cmeta {
  position: absolute;
  top: 14px; right: 16px;
  z-index: 7;
  pointer-events: none;
  background: rgba(12, 12, 11, .6);
  color: #EDEAE1;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  padding: 8px 12px;
}
.pn-c .popen { z-index: 6; }
.pn-c .pbody { position: absolute; left: 0; bottom: 0; right: 26%; z-index: 7; pointer-events: none; }
.pn-c .pnum { display: block; width: max-content; background: var(--bg); padding: 6px 10px; }
.pn-c .ptitle { color: var(--brand-soft); }
.pn-c .pdesc { color: #EDEAE1; max-width: 52ch; }
.pn-c .pmeta { display: flex; flex-wrap: wrap; gap: 12px 28px; border: 0; margin-top: 14px; }
.pn-c .pmeta div { border: 0; padding: 0; gap: 10px; }
.pn-c .pmeta dt { color: rgba(237, 234, 225, .65); }
.pn-c .pmeta dd { color: #EDEAE1; }

/* Footer del track */
.tfoot {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}
.tnums { display: flex; gap: 16px; }
.tnum { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--mut); transition: color .2s; }
.tnum:hover { color: var(--ink); }
.tnum.on { color: var(--acc); }
.tbar { position: relative; flex: 1; height: 1px; background: var(--line); }
.tbar i { position: absolute; inset: 0; background: var(--acc); transform: scaleX(0); transform-origin: left; }

/* Proceso (acordeón) */
.plist {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  position: relative;
  z-index: 2;
}
.prow { border-top: 1px solid var(--line); }
.prow:last-child { border-bottom: 1px solid var(--line); }
.prow-h {
  display: grid;
  grid-template-columns: 64px minmax(0, .9fr) minmax(0, 1.3fr) auto 24px;
  gap: clamp(12px, 2vw, 36px);
  align-items: baseline;
  width: 100%;
  padding: clamp(12px, 2.2vh, 22px) 6px;
  transition: background .25s;
}
.prow-h:hover { background: rgba(237, 234, 225, .04); }
html[data-theme="paper"] .prow-h:hover { background: rgba(21, 21, 16, .05); }
.pn { font-family: var(--mono); font-size: 11px; color: var(--mut); transition: color .25s; }
.prow-h:hover .pn, .prow.open .pn { color: var(--acc); }
.pt {
  font-family: var(--serif);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--brand);
  font-size: clamp(18px, 2.4vw, 38px);
  line-height: 1.05;
  letter-spacing: 0;
  font-optical-sizing: auto;
}
.pd { color: var(--mut); font-size: clamp(12px, 1.05vw, 15px); line-height: 1.5; max-width: 54ch; }
.pw { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--mut); white-space: nowrap; }
.pplus {
  justify-self: end;
  align-self: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--mut);
  transition: transform .35s var(--ez), border-color .25s, color .25s;
}
.pplus svg { width: 10px; height: 10px; }
.prow.open .pplus { transform: rotate(45deg); border-color: var(--acc); color: var(--acc); }

.pextra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ez); }
.prow.open .pextra { grid-template-rows: 1fr; }
.pextra-in { overflow: hidden; }
.pextra p {
  padding: 0 6px clamp(12px, 2vh, 20px) calc(64px + clamp(12px, 2vw, 36px));
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--mut);
}
.pextra p b { font-weight: 400; color: var(--ink); }

.pnote {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--mut);
}

/* Contacto */
.cgrid {
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding-block: clamp(10px, 2vh, 20px);
}
.avail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--mut);
  border: 1px solid var(--line);
  padding: 8px 12px;
  width: max-content;
  max-width: 100%;
}
.avail i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex: none; }

.cta-t {
  font-family: var(--serif);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--brand);
  line-height: .88;
  letter-spacing: 0;
  font-size: clamp(40px, min(9.5vw, 16vh), 150px);
  margin-top: clamp(16px, 3vh, 30px);
  font-optical-sizing: auto;
}
.cta-t span { display: block; }
.cta-t i { font-style: normal; }

.mail {
  margin-top: clamp(18px, 3.5vh, 36px);
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: clamp(12px, 1.5vw, 20px);
  letter-spacing: .08em;
  padding: 14px 20px;
  border: 1px solid var(--line);
  transition: border-color .3s, color .3s;
}
.mail:hover { border-color: var(--acc); color: var(--acc); }
.mail .mc { font-size: 9px; letter-spacing: .22em; color: #131311; background: var(--acid); padding: 5px 9px; flex: none; }

.c-note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--mut);
  max-width: 40ch;
  line-height: 1.8;
}

/* Brief form */
.brief {
  border: 1px solid var(--line);
  padding: clamp(18px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.b-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--mut);
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.b-top span:first-child { color: var(--ink); }

.f-lab {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--mut);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
#fErr { color: var(--err); letter-spacing: .1em; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.shake { animation: shake .4s; }
@keyframes shake {
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.chip {
  border: 1px solid var(--line);
  padding: 9px 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--mut);
  transition: border-color .2s, color .2s, background .2s;
}
.chip:hover { border-color: var(--acc); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  line-height: 1.7;
  padding: 12px;
  resize: vertical;
  min-height: 76px;
}
textarea:focus { outline: none; border-color: var(--acc); }
textarea::placeholder { color: var(--mut); }

.send {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--acid);
  color: #131311;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  padding: 15px 18px;
  transition: filter .2s, transform .1s;
}
.send:hover { filter: brightness(1.07); }
.send:active { transform: scale(.985); }
.send svg { width: 14px; height: 14px; transition: transform .25s; }
.send:hover svg { transform: translateX(5px); }

.f-note { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--mut); line-height: 1.8; }

/* Footer */
.foot {
  display: flex;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--mut);
  position: relative;
  z-index: 2;
}
#topBtn { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .16em; transition: color .2s; }
#topBtn:hover { color: var(--acc); }
#topBtn svg { width: 12px; height: 12px; }

/* Menú overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: calc(var(--pad) * .8) var(--pad);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .65s var(--ez), visibility 0s .65s;
}
.menu.open { clip-path: inset(0 0 0% 0); visibility: visible; transition: clip-path .65s var(--ez); }

.m-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.m-top span { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; color: var(--mut); }

.m-links { margin-top: clamp(10px, 3vh, 30px); display: flex; flex-direction: column; overflow-y: auto; flex: 1; }
.m-link {
  display: grid;
  grid-template-columns: 56px minmax(0, auto) 1fr;
  align-items: baseline;
  gap: 14px;
  padding: clamp(10px, 2vh, 18px) 4px;
  border-top: 1px solid var(--line);
  transform: translateY(30px);
  opacity: 0;
  transition: transform .55s var(--ez) calc(var(--i) * .05s + .18s),
              opacity .55s var(--ez) calc(var(--i) * .05s + .18s);
}
.m-links .m-link:last-child { border-bottom: 1px solid var(--line); }
.menu.open .m-link { transform: none; opacity: 1; }
.m-no { font-family: var(--mono); font-size: 11px; color: var(--acc); white-space: nowrap; }
.m-t {
  font-weight: 800;
  text-transform: uppercase;
  line-height: .95;
  font-size: clamp(34px, 7.5vh, 84px);
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  transition: transform .3s var(--ez);
}
.m-t svg {
  width: .5em;
  height: .5em;
  opacity: 0;
  transform: translateX(-8px);
  transition: .3s var(--ez);
}
.m-link:hover .m-t { transform: translateX(10px); }
.m-link:hover .m-t svg { opacity: 1; transform: none; }
.m-d { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--mut); text-align: right; white-space: nowrap; }

.m-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--mut);
  flex-wrap: wrap;
}
.m-foot .fm { transition: color .2s; }
.m-foot .fm:hover { color: var(--acc); }

/* Modal selector de correo */
.mailModal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mailModal.open { display: flex; }
.mm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: mmFade .25s var(--ez);
}
@keyframes mmFade { from { opacity: 0 } to { opacity: 1 } }

.mm-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 22px;
  animation: mmUp .35s var(--ez);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes mmUp { from { opacity: 0; transform: translateY(18px) scale(.98) } to { opacity: 1; transform: none } }

.mm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--ink);
}
.mm-note {
  margin: 14px 0 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--mut);
  line-height: 1.6;
}
.mm-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mm-opt {
  display: grid;
  grid-template-columns: 40px 1fr 20px;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  transition: background .2s, padding .25s var(--ez);
  color: var(--ink);
}
.mm-opt:hover { background: rgba(237, 234, 225, .05); padding-left: 10px; }
html[data-theme="paper"] .mm-opt:hover { background: rgba(21, 21, 16, .05); }
.mm-ico {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--acc);
  transition: border-color .25s, background .25s, color .25s;
}
.mm-opt:hover .mm-ico { border-color: var(--acc); background: var(--acc); color: #131311; }
.mm-txt { display: flex; flex-direction: column; gap: 3px; }
.mm-txt b { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; font-weight: 700; }
.mm-txt i { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--mut); font-style: normal; }
.mm-opt svg { width: 14px; height: 14px; color: var(--mut); transition: transform .25s var(--ez), color .25s; }
.mm-opt:hover svg { transform: translateX(4px); color: var(--acc); }
.mm-foot { margin-top: 16px; display: flex; justify-content: center; }
.mm-copy {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--mut);
  border: 1px solid var(--line);
  padding: 10px 16px;
  transition: border-color .2s, color .2s;
}
.mm-copy:hover { border-color: var(--acc); color: var(--acc); }

/* ===== RESPONSIVE ===== */
@media (max-width: 759px) {
  .hd { padding: 14px 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .hd-meta { display: none; }
  .rail { right: 14px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .rail .tlb { display: none; }
  .tick i { width: 10px; }
  .tick.on i { width: 18px; }
  .hud { left: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .sec { padding: 70px 18px calc(76px + env(safe-area-inset-bottom, 0px)); }
  .stick { padding: 70px 18px calc(76px + env(safe-area-inset-bottom, 0px)); }
  .sec-h { margin-bottom: 12px; padding-bottom: 9px; }
  .kick-row { flex-direction: column; gap: 6px; }
  .hint { display: none; }
  .ghost { font-size: 26vh; right: 4vw; }

  /* ===== FIX HERO MOBILE ===== */
  .hero {
    justify-content: flex-start;
    padding-top: 0;
    flex: 0 0 auto;
    min-height: auto;
  }

  .hero-t {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    font-size: clamp(56px, 20vw, 120px);
  }

  .hero-t .hero-line,
  .hero-t .hero-line-mobile {
    display: block;
    width: 100%;
    line-height: .92;
  }

  .hero-t .hero-line .lw,
  .hero-t .hero-line-mobile .lw {
    display: inline-block;
    padding: .1em 0 .05em;
    margin: -.1em 0 -.05em;
    overflow: hidden;
  }

  /* Desactivamos la animación de entrada en mobile
     para evitar que las letras queden ocultas */
  .hero-t .hero-line .lw .lt,
  .hero-t .hero-line-mobile .lw .lt {
    transform: translateY(0);
    animation: none;
  }

  .hero-t .hero-line-mobile {
    margin-top: -.04em;
  }

  .hero-t .hero-line-mobile .lw-reg {
    margin-top: 0;
    margin-left: .04em;
  }
  /* ===== FIN FIX HERO MOBILE ===== */

  .hero-row { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 3vh; }
  .hero-sub { padding-bottom: 0; max-width: 30ch; }
  .gosec { width: 46px; height: 46px; align-self: flex-end; }
  .gosec svg { width: 16px; height: 16px; }
  .panel { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
  .pmedia { height: 30vh; }
  .pn-d .pmedia { height: 34vh; }
  .pn-c .pbody { right: 14px; left: 14px; }
  .ptitle { font-size: clamp(28px, 9vw, 54px); margin: 8px 0 10px; }
  .pdesc { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .pmeta { display: none; }
  .tfoot, .tnums { gap: 12px; }
  .prow-h { grid-template-columns: 44px 1fr 24px; }
  .pd { grid-column: 1/-1; grid-row: 2; }
  .pw { display: none; }
  .pextra p { padding-left: 44px; }
  .cta-t { font-size: clamp(40px, 11vw, 90px); }
  .cgrid { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .mail { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .foot { flex-direction: column; gap: 10px; align-items: flex-start; }
  .foot span:nth-child(3) { display: none; }
  .m-d { display: none; }
  .m-link { grid-template-columns: 28px 1fr; gap: 6px; padding: 6px 3px; }
  .m-no { font-size: 7px; }
  .m-t { font-size: clamp(17px, 5.5vw, 36px); gap: 6px; }
  .m-t svg { width: .35em; height: .35em; }
  .m-top span { font-size: 7px; letter-spacing: .14em; }
  .m-foot { font-size: 7px; padding-top: 10px; }
  .m-foot .fm { font-size: 8px; }
}

@media (max-height: 560px) {
  .hd { padding-top: 10px; padding-bottom: 10px; }
  .sec { padding-top: 58px; padding-bottom: 42px; }
  .stick { padding-top: 58px; padding-bottom: 42px; }
  .sec-h { margin-bottom: 8px; padding-bottom: 7px; }
  .rail { bottom: 8px; }
  .hud { bottom: 10px; }
  .hint { display: none; }
  .kick-row { margin-bottom: 1vh; }
  .hero-row { margin-top: 1.2vh; gap: 12px; }
  .gosec { width: 38px; height: 38px; }
  .gosec svg { width: 14px; height: 14px; }
  .ghost { font-size: 28vh; }
  .pmedia { height: 15vh; }
  .pn-d .pmedia { height: 17vh; }
  .pdesc { -webkit-line-clamp: 1; }
  .ptitle { font-size: clamp(20px, 4.5vh, 36px); }
  .avail { padding: 5px 9px; }
  .mani { font-size: clamp(16px, 3.4vh, 34px); }
}

@media (min-width: 1600px) {
  :root { --pad: clamp(32px, 3.2vw, 96px); }
  .kick-row { font-size: 11px; }
  .hero-sub { font-size: clamp(15px, 1vw, 21px); }
  .mani { font-size: clamp(24px, 1.9vw, 72px); }
  .ptitle { font-size: clamp(36px, 4.4vw, 118px); }
  .pdesc { font-size: clamp(14px, .95vw, 20px); }
  .cta-t { font-size: clamp(48px, 8.4vw, 200px); }
}

@media (max-width: 380px) {
  .kick-row { letter-spacing: .18em; }
  .hero-sub { max-width: 28ch; }
  .chip { padding: 8px 11px; }
  .mail { gap: 12px; padding: 12px 14px; }
  .foot span:nth-child(2) { display: none; }
  .m-t { font-size: clamp(14px, 4.5vw, 28px); }
  .m-link { grid-template-columns: 22px 1fr; gap: 4px; padding: 4px 2px; }
  .m-no { font-size: 6px; }
}

@media (pointer: coarse) {
  textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .view { scroll-snap-type: x proximity; }
  html.js .rev { transition: none; opacity: 1; transform: none; }
  .lt { animation: none; transform: none; }
  .lw { overflow: visible; }
  .hint-line::after, .mhint svg { animation: none; }
  .menu, .m-link, .pextra { transition-duration: .01s; }
}