:root{
  --paper:#fafafa;
  --ink:#202020;
  --ink-soft:#444444;
  --ink-faint:#707070;
  --line:#cfcfcf;
  --typewriter:'Special Elite', 'Courier New', monospace;
  --body-font: 'Courier Prime', 'Courier New', monospace;
  --measure:720px;
}



/* ============================================================
   BASE
   ============================================================ */

*{
  box-sizing:border-box;
}

html{
  background:var(--paper);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--typewriter);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{
  background:var(--ink);
  color:var(--paper);
}

a{
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

button{
  font-family:inherit;
}

.wrap{
  width:100%;
  max-width:var(--measure);
  margin:0 auto;
  padding:0 24px;
}


/* ============================================================
   HEADER
   ============================================================ */

header.site{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(250,250,250,.96);
}

.head-inner{
  width:100%;
  max-width:var(--measure);
  margin:0 auto;
  padding:18px 24px 15px;
}

.brand{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.brand h1{
  margin:0;
  font-family:var(--typewriter);
  font-size:1.15rem;
  line-height:1;
  font-weight:400;
  letter-spacing:.03em;
}

.brand h1 a{
  text-decoration:none;
}

.brand .sub{
  font-family:var(--typewriter);
  font-size:.72rem;
  color:var(--ink-faint);
}

nav.main{
  margin-top:14px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-family:var(--typewriter);
  font-size:.72rem;
}

nav.main a{
  text-decoration:none;
  padding:0;
  color:var(--ink-soft);
  white-space:nowrap;
  text-transform: lowercase;
  transition: color 0.15s ease, font-weight 0.15s ease;
}

nav.main a:not(:last-child)::after {
  content: " ::";
  margin-left: 0.5em;
  margin-right: 0.5em;
  color: var(--ink-faint);
  pointer-events: none;
}

nav.main a:hover,
nav.main a.active {
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 700;
}


/* ============================================================
   LAYOUT
   ============================================================ */

main{
  padding:48px 0 100px;
}

h2.section-title{
  margin:0 0 34px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);

  font-family:var(--typewriter);
  font-size:.78rem;
  font-weight:400;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-soft);
}


/* ============================================================
   ÍNDICE
   ============================================================ */

.ticket-list{
  list-style:none;
  margin:0;
  padding:0;
}

.ticket{
  position:relative;
  display:block;

  margin:0 0 28px;
  padding:0 0 26px;

  border:0;
  border-bottom: 1px solid transparent;

  background:transparent;

  text-decoration:none;
  color:var(--ink);

  transition:none;
}

.ticket:hover{
  border-color:var(--ink);
  transform:none;
}

.ticket::before{
  display:none;
}

.ticket-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
}

.ticket-num{
  display:block;
  margin-bottom:8px;

  font-family:var(--typewriter);
  font-size:.72rem;
  line-height:1.4;
  color:var(--ink-faint);
}

.ticket h3{
  margin:0;
  font-family:var(--typewriter);
  font-size:1.35rem;
  line-height:1.3;
  font-weight:400;
}

.ticket-meta{
  display:flex;
  flex-direction:column;
  gap:3px;

  flex-shrink:0;

  font-family:var(--typewriter);
  font-size:.68rem;
  line-height:1.4;
  color:var(--ink-faint);
  text-align:right;
}

.ticket-meta span:first-child{
  color:var(--ink-soft);
}

.empty-note{
  font-family:var(--typewriter);
  font-size:.82rem;
  color:var(--ink-faint);
}


/* ============================================================
   CAPÍTULO
   ============================================================ */

.back-link{
  display:inline-block;
  margin-bottom:30px;

  font-family:var(--typewriter);
  font-size:.72rem;
  color:var(--ink-faint);
  text-decoration:none;
}

.back-link:hover{
  color:var(--ink);
}


/* ============================================================
   FICHA DEL CAPÍTULO
   ============================================================ */

.boarding-pass{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 28px;

  margin-bottom:34px;
  padding:18px 0;

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  background:transparent;

  font-family:var(--typewriter);
  font-size:.68rem;
}

.boarding-pass .field{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.boarding-pass .label{
  color:var(--ink-faint);
  letter-spacing:.04em;
}

.boarding-pass .value{
  color:var(--ink);
}

.boarding-pass .value.accent{
  color:var(--ink);
}


/* ============================================================
   TÍTULO DEL CAPÍTULO
   ============================================================ */

.chapter-title{
  margin:0 0 32px;

  font-family:var(--typewriter);
  font-size:2rem;
  line-height:1.25;
  font-weight:400;
}


/* ============================================================
   FOTOGRAFÍA
   ============================================================ */

.cover-frame{
  position:relative;
  margin:0 0 30px;
  padding:0;
}

.cover-photo,
.cover-frame img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;

  border:0;
}

.cover-cap{
  margin-top:9px;

  font-family:var(--typewriter);
  font-size:.64rem;
  line-height:1.4;
  color:var(--ink-faint);
  text-align:left;
}

/* ==========================================================================
   POLAROID FRAME :: Respeta Proporción y Composición Original
   ========================================================================== */

.polaroid-frame {
  /* Alineación editorial en Desktop */
  float: left;
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0.5rem 2.25rem 1.75rem 0;
  box-sizing: border-box;

  /* Tarjeta de papel crudo / marfil */
  background-color: var(--card-bg, #f4f3ef);
  padding: 12px 12px 20px 12px;
  border: 1px solid var(--border-color, #d1d0cb);

  /* Sin transformaciones ni sombras */
  transform: none;
  box-shadow: none;
}

/* Imagen sin recortes ni proporciones forzadas */
.polaroid-frame img {
  display: block;
  width: 100%;
  height: auto; /* Mantiene la proporción real del archivo original */

  /* Fondo y borde oscuro limpios para evitar halos/subpíxeles al escalar */
  background-color: #111111;
  border: 1px solid #111111;
  outline: none;

  /* Sin filtros de software */
  filter: none;
}

/* Epígrafe inferior */
.polaroid-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 0 2px;
  font-family: var(--typewriter, "Courier Prime", "Courier New", monospace);
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--ink-soft, #4a4a4a);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.polaroid-caption time {
  color: var(--ink-faint, #8c8c8c);
  margin-left: 0.75rem;
  white-space: nowrap;
}

/* Variante para imágenes dentro del cuerpo de texto */
.polaroid-frame.inner-photo {
  max-width: 320px;
  margin: 0.75rem 2rem 1.5rem 0;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .polaroid-frame {
    max-width: 300px;
    margin: 0.4rem 1.5rem 1.25rem 0;
    padding: 10px 10px 18px 10px;
  }

  .polaroid-caption {
    font-size: 0.70rem;
    margin-top: 10px;
  }
}

@media (max-width: 600px) {
  .polaroid-frame,
  .polaroid-frame.inner-photo {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    padding: 10px 10px 16px 10px;
  }
}

/* ============================================================
   ANCLAJE
   ============================================================ */

.anchor-block{
  margin:42px 0 40px;
  padding:0;

  border-left:2px solid var(--ink);

  padding-left:18px;

  font-family:var(--typewriter);
  font-size:.9rem;
  line-height:1.65;

  color:var(--ink-soft);
  font-style:normal;
}

.anchor-block .kicker{
  display:block;

  margin-bottom:8px;

  font-family:var(--typewriter);
  font-size:.64rem;
  line-height:1.4;
  letter-spacing:.04em;
  color:var(--ink-faint);
  font-style:normal;
}


/* ============================================================
   RELATO
   ============================================================ */

.viaje-kicker{
  margin-bottom:18px;

  font-family:var(--typewriter);
  font-size:.66rem;
  line-height:1.4;
  letter-spacing:.05em;
  color:var(--ink-faint);
}

.prose p{
  max-width:64ch;

  margin:0 0 1.6em;

  font-family:var(--body-font);
  font-size:1rem;
  line-height:1.75;
}

.prose p:first-of-type::first-letter{
  font-size:inherit;
  float:none;
  line-height:inherit;
  padding:0;
  color:inherit;
  font-weight:400;
}


/* ============================================================
   IMÁGENES DENTRO DEL RELATO
   ============================================================ */

.inline-photo{
  margin:34px 0;
  padding:0;

  border:0;
  background:transparent;
}

.inline-photo img{
  width:100%;
  display:block;
}

.inline-photo figcaption{
  padding:9px 0 0;

  border:0;

  font-family:var(--typewriter);
  font-size:.64rem;
  line-height:1.4;
  color:var(--ink-faint);
}

.missing-image{
  padding:10px 0;

  border-top:1px dashed var(--line);
  border-bottom:1px dashed var(--line);

  background:transparent;

  font-family:var(--typewriter);
  font-size:.72rem;
  color:var(--ink-soft);
}


/* ============================================================
   YOUTUBE / BSO
   ============================================================ */

.bso-card{
  margin:48px 0 24px;

  border:1px solid var(--line);
  background:var(--paper-soft);

  overflow:hidden;
}

.bso-card .bso-head{
  display:flex;
  justify-content:space-between;
  gap:16px;

  padding:11px 14px;

  border-bottom:1px solid var(--line);

  font-family:var(--typewriter);
  font-size:.64rem;
  line-height:1.4;
  color:var(--ink-faint);
}

.bso-embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#222;
}

.bso-embed iframe{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  border:0;
}

.bso-cover{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  border:0;
  padding:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05),
      rgba(0,0,0,.45)
    ),
    var(--yt-thumb, #222);

  background-size:cover;
  background-position:center;
}

.bso-cover .play{
  width:48px;
  height:48px;

  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
}

.bso-cover .play svg{
  width:15px;
  height:15px;

  fill:#fff;

  margin-left:2px;
}

.bso-track-title{
  padding:10px 14px 13px;

  font-family:var(--typewriter);
  font-size:.68rem;
  line-height:1.4;
  color:var(--ink-soft);
}

.bso-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

@media(min-width:560px){
  .bso-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* ============================================================
   NAVEGACIÓN ENTRE CAPÍTULOS
   ============================================================ */

.chapter-nav{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;

  margin-top:64px;
  padding-top:22px;

  border-top:1px solid var(--line);

  font-family:var(--typewriter);
  font-size:.72rem;
}

.chapter-nav a{
  color:var(--ink-soft);
  text-decoration:none;
}

.chapter-nav a:hover{
  color:var(--ink);
}

.chapter-nav .next{
  margin-left:auto;
  text-align:right;
}

.chapter-nav .dir{
  display:block;

  margin-bottom:4px;

  font-size:.62rem;
  color:var(--ink-faint);
}


/* ============================================================
   ÍNDICE FLOTANTE
   ============================================================ */

.floating-index{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;

  padding:9px 12px;

  border:1px solid var(--line);

  background:var(--paper);
  color:var(--ink);

  font-family:var(--typewriter);
  font-size:.66rem;

  text-decoration:none;
}

.floating-index:hover{
  border-color:var(--ink);
}


/* ============================================================
   MANIFIESTO / SOBRE EL AUTOR
   ============================================================ */

.manifest p,
.about-body p{
  max-width:64ch;

  margin:0 0 1.6em;

  font-family:var(--body-font);
  font-size:1rem;
  line-height:1.75;
}

.manifest .lead{
  margin-bottom:30px;

  font-family:var(--typewriter);
  font-size:.9rem;
  line-height:1.65;

  color:var(--ink-soft);
}

.about-sign{
  margin-top:34px;
  padding-top:16px;

  border-top:1px solid var(--line);

  font-family:var(--typewriter);
  font-size:.7rem;
  color:var(--ink-faint);
}


/* ============================================================
   FOOTER
   ============================================================ */

footer.site{
  padding:28px 24px 52px;

  border-top:1px solid var(--line);

  font-family:var(--typewriter);
  font-size:.62rem;
  line-height:1.5;

  color:var(--ink-faint);
  text-align:center;
}


/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:480px){

  .wrap{
    padding:0 18px;
  }

  .head-inner{
    padding:16px 18px 14px;
  }

  main{
    padding:38px 0 80px;
  }

  .brand{
    display:block;
  }

  .brand .sub{
    display:block;
    margin-top:7px;
  }

  nav.main{
    gap:9px 13px;
  }

  .chapter-title{
    font-size:1.55rem;
  }

  .boarding-pass{
    grid-template-columns:1fr;
  }

  .prose p,
  .manifest p,
  .about-body p{
    font-family: var(--body-font);
    font-size:.94rem;
    line-height:1.72;
  }

  .ticket h3{
    font-size:1.15rem;
  }

  .ticket-meta{
    text-align:left;
  }

  .chapter-nav{
    display:block;
  }

  .chapter-nav .next{
    margin-top:22px;
    text-align:left;
  }
}