/* ============================================================
   EZEQUIEL SAGASTI — sitio multipágina
   Home (mosaico molinete) + Recorrido + Teatro Consciente + Libro
   Usa los tokens y helpers de ../shared/shared.css
   ============================================================ */

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:var(--sans);
  background:var(--paper); color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::-webkit-scrollbar{width:0;height:0;}

/* fondos de página */
body.bg-paper { background:var(--paper);  color:var(--ink);  }
body.bg-paper2{ background:var(--paper-2); color:var(--ink);  }
body.bg-dark  { background:var(--charcoal); color:var(--paper); }

/* grano */
.grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px;}
body.bg-dark .grain::after{mix-blend-mode:soft-light;opacity:.10;}
body.bg-paper .grain::after, body.bg-paper2 .grain::after{mix-blend-mode:multiply;opacity:.045;}

/* status bar (chrome del teléfono) */
.statusbar{height:34px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px 0 26px;font-family:var(--sans);font-weight:500;font-size:11px;color:inherit;}
.statusbar .dots{display:flex;gap:4px;align-items:center;}
.statusbar .dots i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block;opacity:.85;}

/* ---- topbar + menú (páginas internas) ---- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px 14px;
  background:inherit;
  border-bottom:0.5px solid color-mix(in oklch, currentColor 16%, transparent);
}
.topbar .name{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:.01em;}
.topbar .name em{font-style:italic;color:var(--red);}
.burger{display:flex;flex-direction:column;gap:4px;padding:6px;border:0;background:none;cursor:pointer;}
.burger i{width:21px;height:1px;background:currentColor;display:block;transition:.3s;}

.menu{position:fixed;inset:0;z-index:80;background:var(--charcoal);color:var(--paper);
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);
  display:flex;flex-direction:column;padding:22px;}
.menu.open{transform:translateY(0);}
.menu .menu-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;}
.menu .menu-top .name{font-family:var(--serif);font-size:19px;}
.menu .close{font-family:var(--serif);font-size:30px;line-height:1;font-weight:300;border:0;background:none;color:inherit;cursor:pointer;}
.menu nav{display:flex;flex-direction:column;flex:1;justify-content:center;}
.menu nav a{font-family:var(--serif);font-weight:300;font-size:34px;line-height:1.15;
  display:flex;align-items:baseline;gap:14px;transition:color .25s;
  padding:16px 0;border-top:0.5px solid color-mix(in oklch,var(--paper) 16%,transparent);}
.menu nav a:last-child{border-bottom:0.5px solid color-mix(in oklch,var(--paper) 16%,transparent);}
.menu nav a:hover,.menu nav a.active{color:var(--red-bright);}
.menu nav a .mi{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--gray-soft);}
.menu .menu-foot{font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-soft);}

/* ============ HOME · mosaico molinete ============ */
.home-screen{position:relative;}
.mhero{padding:18px 22px 14px;}
.mhero .hero-head{display:inline-block;}
.mhero .eyebrow{display:block;width:auto;white-space:nowrap;
  letter-spacing:0.28em;
  font-size:clamp(7.2px,2.56vw,13.7px);margin-bottom:18px;color:var(--red);}
.mhero .eyebrow::before{content:none;}
.mhero h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,14.2vw,76px);line-height:.92;letter-spacing:-.01em;
  white-space:nowrap;}
.mhero h1 em{font-style:italic;}
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,clamp(132px,40vw,172px));gap:8px;padding:0 14px 4px;}
.mt{border-radius:14px;overflow:hidden;position:relative;display:flex;align-items:flex-end;padding:15px;color:#fff;}
.mt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.66);}
.mt:has(img)::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top, rgba(20,19,17,.82), rgba(20,19,17,.12) 58%, rgba(20,19,17,.28));}
.mt .lab{position:relative;z-index:1;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5);}
.mt .n{display:block;font-family:var(--sans);font-weight:500;font-size:8px;letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-bottom:3px;}
.mt .t{font-family:var(--serif);font-weight:300;font-size:25px;line-height:1.02;}
.mt.red{background:var(--red);}
.mt.red::before{content:none;}
.mt .ar{position:absolute;top:14px;right:15px;z-index:1;font-size:14px;opacity:.85;}
/* molinete: a recorrido (alta izq), b contacto (rojo), c teatro (alta der), d libro */
.mt.a{grid-column:1;grid-row:1/3;}
.mt.b{grid-column:2;grid-row:1;}
.mt.c{grid-column:2;grid-row:2/4;}
.mt.d{grid-column:1;grid-row:3;}
.home-pie{padding:14px 24px 30px;font-family:var(--sans);font-weight:500;font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--gray);}

/* ============ bloques de sección ============ */
section.block{padding:50px 22px;position:relative;}
.block.dark{background:var(--charcoal);color:var(--paper);}
.block.dark .body-text{color:color-mix(in oklch,var(--paper) 76%,transparent);}
.block.paper{background:var(--paper);color:var(--ink);}
.block.paper2{background:var(--paper-2);color:var(--ink);}
.block::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px;}
.block.dark::before{mix-blend-mode:soft-light;opacity:.10;}
.block.paper::before,.block.paper2::before{mix-blend-mode:multiply;opacity:.05;}
.block>*{position:relative;z-index:1;}

.section-eye{margin-bottom:16px;}
.section-title{font-size:46px;margin:2px 0 22px;line-height:.98;}
.section-title em{font-style:italic;}
.mid-title{font-family:var(--serif);font-weight:300;font-size:46px;line-height:.98;letter-spacing:-.01em;margin-top:68px;}
.mid-title em{font-style:italic;}
p.body-text+p.body-text{margin-top:15px;}
.body-text strong{font-weight:550;color:inherit;}
.body-text a{color:inherit;border-bottom:0.5px solid color-mix(in oklch, currentColor 38%, transparent);transition:color .25s,border-color .25s;}
.body-text a:hover{color:var(--red-bright);border-color:var(--red-bright);}
.body-text a strong{font-weight:550;}
#sueno{scroll-margin-top:64px;}

.portrait{aspect-ratio:3/4;margin:4px 0 26px;overflow:hidden;}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;}

.tags-row{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0;}
.pull{border-left:1.5px solid var(--red);padding-left:18px;margin:30px 0;font-size:25px;}

.pilars{display:flex;flex-direction:column;gap:0;margin-top:14px;}
.pilar{padding:24px 0;border-top:0.5px solid color-mix(in oklch,var(--paper) 16%,transparent);}
.pilar:last-child{border-bottom:0.5px solid color-mix(in oklch,var(--paper) 16%,transparent);}
.pilar .ph-num{display:flex;align-items:baseline;gap:14px;margin-bottom:9px;}
.pilar .num{color:var(--gold);}
.pilar h4{font-family:var(--serif);font-weight:300;font-size:30px;}

.ficha{display:flex;flex-direction:column;margin-top:26px;}
.ficha .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;
  border-top:0.5px solid color-mix(in oklch,var(--paper) 12%,transparent);border-bottom:0.5px solid color-mix(in oklch,var(--paper) 12%,transparent);}
.ficha .k{font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;}
.ficha .v{font-family:var(--serif);font-style:italic;font-size:15px;text-align:right;}
#teatro .ficha .v{white-space:nowrap;font-size:13.5px;}
#teatro .ficha .k{white-space:nowrap;}

/* aire teatro */
#teatro .section-title{margin-bottom:30px;}
#teatro .pilars{margin-top:28px;}
#teatro .pilar{padding:32px 0;}
#teatro .pull{margin-top:48px;margin-bottom:36px;}
#teatro .body-text+.body-text{margin-top:22px;}
#teatro .ficha{margin-top:44px;}
#teatro .mid-title{margin-top:88px;}
#teatro .mid-title+.body-text{margin-top:32px;}
#teatro .ext-link{margin-top:34px;}

/* carrusel redondeado vertical (estilo teselas) */
.polaroid-carousel{margin:46px 0 40px;}
.po-stack{position:relative;width:225px;margin:6px auto 0;}
.po-back{display:none;}
.po-card{position:relative;z-index:3;margin:0;background:none;padding:0;border-radius:18px;overflow:hidden;
  box-shadow:0 22px 46px -20px rgba(0,0,0,.6);transform:none;will-change:transform,opacity;}
.po-pic{aspect-ratio:4/5;overflow:hidden;background:#2a2724;border-radius:18px;position:relative;}
.po-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .5s ease;}
.po-zone{position:absolute;top:0;bottom:0;width:42%;z-index:4;background:none;border:0;cursor:pointer;}
.po-zone.prev{left:-6%;}.po-zone.next{right:-6%;}
.po-chev{position:absolute;top:50%;transform:translateY(-50%);z-index:5;font-family:var(--serif);font-size:32px;line-height:1;color:rgba(255,255,255,.8);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.55);}
.po-chev.prev{left:8px;}.po-chev.next{right:8px;}
.po-dots{display:flex;gap:6px;justify-content:center;margin-top:24px;}
.po-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in oklch,var(--paper) 25%,transparent);transition:.3s;cursor:pointer;}
.po-dots i.on{background:var(--red);width:18px;border-radius:3px;}

/* links externos */
.link-row{display:flex;flex-direction:column;gap:14px;align-items:center;margin-top:22px;}
.ext-link{display:flex;align-items:center;gap:11px;width:fit-content;margin:22px auto 0;
  font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.03em;
  color:color-mix(in oklch,var(--paper) 85%,transparent);padding-bottom:4px;text-align:center;
  border-bottom:0.5px solid color-mix(in oklch,var(--paper) 28%,transparent);transition:color .25s,border-color .25s;}
.ext-link:hover{color:var(--red-bright);border-color:var(--red-bright);}
.ext-link .ic{width:19px;height:19px;flex:none;}
.link-row .ext-link{margin:0;}

/* libro */
.book-title{display:block;font-size:40px;line-height:1;}
.book-subtitle{display:block;font-size:22px;color:inherit;margin-top:8px;line-height:1.05;margin-bottom:8px;}
.book-cover{aspect-ratio:2/3;max-width:230px;margin:38px 0;box-shadow:0 22px 46px -20px rgba(0,0,0,.5);}
.book-cover img{width:100%;height:100%;object-fit:cover;display:block;}
#libro .body-text+.body-text{margin-top:22px;}
.price-card{border:0.5px solid color-mix(in oklch,var(--ink) 22%,transparent);padding:22px 20px;margin-top:44px;}
.price-card .label{font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);}
.price-card .price{font-family:var(--serif);font-weight:300;font-size:44px;margin:8px 0 4px;}
.buy-btns{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.btn{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 22px;border:0.5px solid currentColor;transition:background .25s,color .25s;}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn--solid:hover{background:var(--red);border-color:var(--red);}
#libro .pull{margin:44px 0;}

/* contacto (en home) */
.contact-list{display:flex;flex-direction:column;margin-top:40px;}
.contact-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 2px;
  border-top:0.5px solid color-mix(in oklch,var(--paper) 16%,transparent);transition:padding-left .25s,color .25s;}
.contact-row:last-child{border-bottom:0.5px solid color-mix(in oklch,var(--paper) 16%,transparent);}
.contact-row .cr-k{font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in oklch,var(--paper) 42%,transparent);}
.contact-row .cr-v{font-family:var(--serif);font-style:italic;font-size:18px;color:color-mix(in oklch,var(--paper) 88%,transparent);text-align:right;transition:color .25s;}
.contact-row:hover{padding-left:10px;}
.contact-row:hover .cr-v{color:var(--red-bright);}

/* navegación entre páginas (pie de sección) */
.pagenav{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:26px 22px 40px;border-top:0.5px solid color-mix(in oklch, currentColor 16%, transparent);}
.pagenav a{font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in oklch, currentColor 60%, transparent);transition:color .25s;}
.pagenav a:hover{color:var(--red-bright);}
.pagenav .nxt{font-family:var(--serif);font-style:italic;font-size:18px;letter-spacing:0;text-transform:none;color:inherit;}

/* ============================================================
   ANIMACIONES
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* — entrada escalonada — */
  html.anims .stagger>*:nth-child(-n+6){opacity:0;animation:riseIn .6s cubic-bezier(.2,.8,.2,1) both;}
  html.anims .stagger>*:nth-child(1){animation-delay:.45s}
  html.anims .stagger>*:nth-child(2){animation-delay:.58s}
  html.anims .stagger>*:nth-child(3){animation-delay:.71s}
  html.anims .stagger>*:nth-child(4){animation-delay:.84s}
  html.anims .stagger>*:nth-child(5){animation-delay:.97s}
  html.anims .stagger>*:nth-child(6){animation-delay:1.1s}
  @keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* — máquina de escribir — */
  [data-typewriter].typing::after{content:"";display:inline-block;width:2px;height:.9em;background:var(--red);
    margin-left:3px;vertical-align:-1px;animation:caret .6s step-end infinite;}
  @keyframes caret{50%{opacity:0}}
}

/* ============================================================
   RESPONSIVE — columna centrada + chrome de teléfono adaptativo
   El diseño es mobile-first; en pantallas grandes se centra una
   columna cómoda y se oculta la barra de estado simulada.
   ============================================================ */
.statusbar, .topbar, main, .home-screen{
  max-width:520px; margin-left:auto; margin-right:auto;
}
.menu .menu-top, .menu nav, .menu .menu-foot{
  width:100%; max-width:520px; margin-left:auto; margin-right:auto;
}
@media (min-width:600px){
  .statusbar{display:none;}            /* chrome de teléfono solo en mobile */
  .topbar{top:0;}
}
@media (min-width:900px){
  /* un poco más de aire lateral en escritorio */
  section.block{padding-left:28px;padding-right:28px;}
}