:root{
    /* Paleta provista — aswell_edits café collection */
    --froth:#F1EEEB;   /* papel */
    --chai:#E4D8CB;    /* bloque cálido */
    --creme:#CDC6C3;   /* bloque frío */
    --cinna:#CFB3A9;   /* acento terracota */
    --latte:#A09086;   /* taupe — texto secundario */
    --espresso:#43392F;/* latte profundo — bloque de cierre (contraste AA) */
    --blush:#F3DFD6;  /* rosa de referencia — nav y bandas */
    --ink:#3A322C;     /* tinta: latte oscurecido para lectura legible */
    --ink-soft:#5C5149;

    --serif:"Spectral", Georgia, "Times New Roman", serif;
    --display:"Fraunces", Georgia, serif;

    --maxw:1180px;
    --pad:clamp(1.25rem, 5vw, 4rem);
    --gut:clamp(2rem, 6vw, 5.5rem);

    --fs-eyebrow:0.74rem;
    --tr-eyebrow:0.26em;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--froth);
    color:var(--ink);
    font-family:var(--serif);
    font-weight:400;
    font-size:1.0625rem;
    line-height:1.75;
    letter-spacing:.005em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{max-width:100%;display:block}
  a{color:inherit}

  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}

  /* ---------- Tipografía ---------- */
  .eyebrow{
    font-family:var(--serif);
    text-transform:uppercase;
    letter-spacing:var(--tr-eyebrow);
    font-size:var(--fs-eyebrow);
    font-weight:500;
    color:var(--latte);
    margin:0 0 1.4rem;
    display:flex; align-items:center; gap:.85rem;
  }
  .eyebrow::before{
    content:""; width:2.2rem; height:1px; background:var(--cinna); flex:0 0 auto;
  }
  h1,h2,h3{
    font-family:var(--display);
    font-optical-sizing:auto;
    font-weight:400;
    color:var(--ink);
    margin:0;
    line-height:1.08;
    letter-spacing:-.012em;
  }
  h2{
    font-size:clamp(1.7rem, 1.1rem + 2.6vw, 2.7rem);
    margin-bottom:1.6rem;
    max-width:18ch;
  }
  .prose{max-width:63ch}
  .prose p{margin:0 0 1.15rem}
  .prose p:last-child{margin-bottom:0}
  .prose em{font-style:italic}
  strong{font-weight:500; color:var(--ink)}

  /* ---------- Header ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--cinna) 66%, transparent);
    backdrop-filter:saturate(120%) blur(8px);
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, background .3s ease;
  }
  header.site.scrolled{border-bottom-color:color-mix(in srgb, var(--latte) 35%, transparent)}
  .bar{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; min-height:72px;
  }
  .brand{
    font-family:var(--display); font-weight:400;
    font-size:1.18rem; letter-spacing:.02em; color:var(--ink);
    text-decoration:none; white-space:nowrap;
  }
  .brand span{color:var(--latte); font-style:italic; font-size:.92em}

  nav.main{display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem)}
  .nav-links{
    display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem);
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    text-decoration:none; color:var(--ink-soft);
    font-size:.86rem; letter-spacing:.04em;
    padding:.2rem 0; position:relative;
    transition:color .2s ease;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-2px;
    height:1px; background:var(--cinna); transition:right .28s ease;
  }
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{right:0}
  .nav-links a.is-current{color:var(--ink)}
  .nav-links a.is-current::after{right:0}

  .lang{display:flex; align-items:center; gap:.1rem; font-family:var(--serif)}
  .lang button{
    background:none; border:0; cursor:pointer;
    font:inherit; font-size:.8rem; letter-spacing:.08em;
    color:var(--latte); padding:.25rem .45rem; line-height:1;
    transition:color .2s ease;
  }
  .lang button.is-active{color:var(--ink); text-decoration:underline; text-decoration-color:var(--cinna); text-underline-offset:4px}
  .lang button:hover{color:var(--ink)}
  .lang .sep{color:color-mix(in srgb,var(--latte) 50%, transparent)}

  .nav-toggle{
    display:none; background:none; border:0; cursor:pointer;
    font:inherit; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink); padding:.4rem;
  }

  /* ---------- Botones ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:var(--serif); font-size:.82rem; letter-spacing:.12em;
    text-transform:uppercase; text-decoration:none;
    color:var(--ink); background:none;
    border:1px solid color-mix(in srgb, var(--latte) 55%, transparent);
    padding:.85rem 1.5rem; border-radius:2px;
    transition:background .25s ease, color .25s ease, border-color .25s ease;
    cursor:pointer;
  }
  .btn:hover{background:var(--cinna); border-color:var(--cinna); color:var(--ink)}
  .btn .arrow{transition:transform .25s ease}
  .btn:hover .arrow{transform:translateX(3px)}

  /* ---------- Secciones ---------- */
  section{scroll-margin-top:88px}
  .section{padding-block:clamp(4rem, 9vw, 8rem)}
  .bg-chai{background:var(--chai)}
  .bg-creme{background:var(--creme)}
  .bg-cinna{background:var(--cinna)}
  .bg-latte{background:var(--espresso); color:var(--froth)}
  .bg-blush{background:var(--blush)}
  .bg-white{background:#fff}

  /* ---------- Hero ---------- */
  .hero{position:relative; overflow:hidden; background:#fff}
  .hero-grid{
    display:grid;
    grid-template-columns:1.55fr .9fr;
    min-height:clamp(440px, 60vh, 580px);
    align-items:stretch;
  }
  .hero-text{
    display:flex; flex-direction:column; justify-content:flex-start;
    padding:clamp(4rem,6.5vw,6rem) clamp(1.25rem,5vw,4rem) clamp(2.5rem,6vw,5rem) 0;
    padding-inline-start:max(var(--pad), calc((100vw - var(--maxw))/2 + var(--pad)));
  }
  .hero-statement{
    font-family:var(--display); font-optical-sizing:auto;
    font-weight:380;
    font-size:clamp(1.55rem, 1rem + 2.4vw, 2.6rem);
    line-height:1.12; letter-spacing:-.014em;
    max-width:18ch; margin:0 0 2rem;
  }
  .hero-statement em{font-style:italic; color:var(--ink)}
  .hero-masthead{max-width:42ch; margin:0 0 2rem}
  .hero-name{
    font-family:var(--display); font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem); letter-spacing:.01em;
    color:var(--ink); margin:0 0 .3rem;
  }
  .hero-role{color:var(--ink-soft); font-size:1rem; margin:0 0 .2rem}
  .hero-meta{color:var(--latte); font-size:.93rem; font-style:italic; margin:0}
  .hero-text{position:relative; z-index:3}
  .hero-panel{
    position:relative; background:transparent;
  }
  .hero-panel::after{
    /* hairline interior, eco de las tarjetas de paleta */
    content:""; position:absolute; left:clamp(1.5rem,3vw,3rem); top:clamp(2rem,6vw,5rem);
    width:2.4rem; height:1px; background:var(--cinna);
  }
  .side-label{
    position:absolute; right:1.7rem; top:50%;
    transform:translateY(-50%);
    writing-mode:vertical-rl; text-orientation:mixed;
    text-transform:uppercase; letter-spacing:.42em;
    font-size:.7rem; color:var(--latte); font-weight:500;
  }
  .hero-mark{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:var(--display); font-style:italic; font-weight:300;
    font-size:clamp(4rem,9vw,7rem); color:color-mix(in srgb,var(--latte) 38%, transparent);
    letter-spacing:.02em; user-select:none;
  }

  /* ---------- Banda epígrafe (momento de color) ---------- */
  .epi-band{background:var(--cinna); padding-block:clamp(3.5rem,8vw,7rem)}
  .epi-band blockquote{
    margin:0; max-width:24ch;
    font-family:var(--display); font-style:italic; font-weight:380;
    font-size:clamp(1.5rem, 1rem + 2.8vw, 2.65rem);
    line-height:1.22; letter-spacing:-.01em; color:var(--ink);
  }
  .epi-band .epi-dash{
    width:3rem; height:1px; background:color-mix(in srgb,var(--ink) 55%, transparent);
    margin-bottom:1.8rem;
  }

  /* ---------- Epígrafe inline (más callado) ---------- */
  .pullquote{
    margin:2.5rem 0; padding-left:1.6rem;
    border-left:1px solid var(--cinna);
    font-family:var(--display); font-style:italic; font-weight:380;
    font-size:clamp(1.25rem,1rem + 1.4vw,1.7rem);
    line-height:1.3; color:var(--ink-soft);
    max-width:30ch;
  }

  /* ---------- Layout dos columnas (encabezado + cuerpo) ---------- */
  .split{
    display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:var(--gut);
  }
  .split .head{position:relative}
  @media(min-width:880px){
    .split .head{position:sticky; top:104px; align-self:start}
  }

  /* ---------- Quién: índice ---------- */
  .who-band{padding-block:clamp(3rem,6vw,5rem)}
  .who-band .who-inner{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:var(--gut); align-items:baseline}
  .who-band p{font-size:clamp(1.1rem,1rem + .8vw,1.45rem); line-height:1.5; color:var(--ink); max-width:40ch; margin:0; font-family:var(--display); font-weight:350}

  /* ---------- Lista de signos (niños) ---------- */
  ul.signs{list-style:none; margin:2rem 0 0; padding:0; max-width:63ch}
  ul.signs li{
    padding:1.15rem 0; border-top:1px solid color-mix(in srgb,var(--latte) 30%, transparent);
  }
  ul.signs li:first-child{border-top:0; padding-top:0}
  ul.signs strong{display:block; margin-bottom:.25rem; font-family:var(--display); font-weight:450; font-style:normal; color:var(--ink); letter-spacing:.005em}

  /* ---------- Formación: foto ---------- */
  .about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--gut); align-items:start}
  .portrait{
    position:relative; aspect-ratio:4/5; background:var(--creme);
    border:1px solid color-mix(in srgb,var(--latte) 35%, transparent);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  /* Reemplazá este bloque por la foto real: <img src="ana.jpg" alt="Ana Wiener"> */
  .portrait .ph{font-family:var(--display); font-style:italic; font-size:clamp(3rem,7vw,5rem); color:color-mix(in srgb,var(--latte) 55%, transparent)}
  .portrait figcaption{
    position:absolute; left:0; right:0; bottom:0;
    padding:.7rem 1rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--latte); background:color-mix(in srgb,var(--froth) 80%, transparent);
  }

  /* ---------- Contacto / pie ---------- */
  .contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gut); align-items:start}
  .contact-grid h2{color:var(--froth)}
  .contact-grid .eyebrow{color:color-mix(in srgb,var(--froth) 70%, transparent)}
  .contact-grid .eyebrow::before{background:var(--chai)}
  .contact-grid .prose{color:color-mix(in srgb,var(--froth) 88%, transparent)}
  .details{list-style:none; margin:0 0 2rem; padding:0}
  .details li{
    display:grid; grid-template-columns:8rem 1fr; gap:1rem;
    padding:1rem 0; border-top:1px solid color-mix(in srgb,var(--froth) 22%, transparent);
    align-items:baseline;
  }
  .details li:first-child{border-top:0}
  .details dt, .details .k{
    text-transform:uppercase; letter-spacing:.16em; font-size:.7rem;
    color:color-mix(in srgb,var(--froth) 62%, transparent);
  }
  .details .v{font-size:1.02rem; color:var(--froth)}
  .details .v a{color:var(--froth); text-decoration:none; border-bottom:1px solid var(--cinna); padding-bottom:1px}
  .details .v a:hover{color:var(--chai)}
  .btn-light{color:var(--froth); border-color:color-mix(in srgb,var(--froth) 45%, transparent)}
  .btn-light:hover{background:var(--froth); color:var(--ink); border-color:var(--froth)}

  footer.foot{padding-block:2.2rem; background:var(--espresso)}
  footer.foot .foot-inner{
    display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; align-items:center;
    border-top:1px solid color-mix(in srgb,var(--froth) 22%, transparent); padding-top:2rem;
    color:color-mix(in srgb,var(--froth) 72%, transparent); font-size:.82rem; letter-spacing:.04em;
  }

  /* ---------- Reveal ---------- */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1; transform:none}

  :focus-visible{outline:2px solid var(--cinna); outline-offset:3px; border-radius:2px}

  .skip{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--froth); padding:.6rem 1rem; z-index:100}
  .skip:focus{left:.5rem; top:.5rem}

  /* ---------- Responsive ---------- */
  @media(max-width:880px){
    .nav-links{
      display:none; position:absolute; left:0; right:0; top:100%;
      flex-direction:column; align-items:flex-start; gap:0;
      background:var(--froth); border-bottom:1px solid color-mix(in srgb,var(--latte) 30%, transparent);
      padding:.5rem var(--pad) 1.25rem;
    }
    .nav-links.open{display:flex}
    .nav-links li{width:100%}
    .nav-links a{display:block; width:100%; padding:.85rem 0; font-size:1rem; border-bottom:1px solid color-mix(in srgb,var(--latte) 18%, transparent)}
    .nav-links a::after{display:none}
    .nav-toggle{display:inline-block}
    nav.main{position:static}
    header.site{position:sticky}

    .hero-grid{grid-template-columns:1fr; min-height:auto}
    .hero-text{padding-inline:var(--pad); padding-top:clamp(2.75rem,9vw,4rem); padding-bottom:clamp(1.75rem,6vw,2.75rem)}
    .hero-panel{display:none}

    .split{grid-template-columns:1fr; gap:2.5rem}
    .who-band .who-inner{grid-template-columns:1fr; gap:1.5rem}
    .about-grid{grid-template-columns:1fr; gap:2.5rem}
    .portrait{max-width:340px}
    .contact-grid{grid-template-columns:1fr; gap:2.5rem}
    .details li{grid-template-columns:6.5rem 1fr}
  }
  @media(max-width:520px){
    h2{max-width:none}
    .details li{grid-template-columns:1fr; gap:.2rem}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1; transform:none; transition:none}
    *{transition-duration:.001ms !important}
  }

  /* Foto Ana — círculo (data URI una sola vez) */
  .ana-photo{
    background-image:url("img/ana.jpg");
    background-size:cover; background-position:50% 28%; background-repeat:no-repeat;
    border-radius:50%; flex:0 0 auto;
  }
  .hero-figure{
    position:absolute; z-index:2;
    top:50%; right:clamp(36px,7vw,128px); transform:translateY(-50%);
    width:clamp(300px,33vw,470px); aspect-ratio:1;
  }
  .hero-figure .hero-photo-d{
    position:relative; z-index:2; width:100%; height:100%;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--latte) 16%, transparent),
               0 20px 50px -30px rgba(150,110,120,.32);
  }
  .hero-mesh{
    position:absolute; z-index:1; inset:-40%; border-radius:50%; pointer-events:none;
    background:
      radial-gradient(58% 58% at 68% 26%, var(--cinna) 0%, transparent 60%),
      radial-gradient(62% 62% at 32% 40%, color-mix(in srgb, var(--cinna) 72%, #fff) 0%, transparent 62%),
      radial-gradient(70% 70% at 55% 72%, color-mix(in srgb, var(--cinna) 32%, #fff) 0%, transparent 66%),
      radial-gradient(50% 50% at 80% 66%, var(--cinna) 0%, transparent 58%);
    filter:blur(58px);
    -webkit-mask:radial-gradient(circle at 50% 50%, #000 38%, transparent 84%);
            mask:radial-gradient(circle at 50% 50%, #000 38%, transparent 84%);
  }
  .hero-photo-m{display:none}
  @media(max-width:880px){
    .hero-figure{display:none}
    .hero-photo-m{
      position:relative; display:block; width:148px; aspect-ratio:1; margin:0 0 1.9rem;
      box-shadow:0 0 0 1px color-mix(in srgb,var(--latte) 18%, transparent),
                 0 14px 34px -22px rgba(150,110,120,.3);
    }
    .hero-photo-m::before{
      content:""; position:absolute; inset:-54%; z-index:-1; border-radius:50%;
      background:
        radial-gradient(62% 62% at 70% 28%, var(--cinna) 0%, transparent 62%),
        radial-gradient(64% 64% at 32% 72%, color-mix(in srgb, var(--cinna) 45%, #fff) 0%, transparent 64%),
        radial-gradient(54% 54% at 56% 52%, color-mix(in srgb, var(--cinna) 80%, #fff) 0%, transparent 60%);
      filter:blur(34px);
      -webkit-mask:radial-gradient(circle at 50% 50%, #000 36%, transparent 84%);
              mask:radial-gradient(circle at 50% 50%, #000 36%, transparent 84%);
    }
  }

  /* Carrusel de diplomas */
  .diplomas{max-width:100%}
  .dc-viewport{
    position:relative; overflow:hidden; background:#fff;
    border:1px solid color-mix(in srgb,var(--latte) 35%, transparent);
  }
  .dc-track{display:flex; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .dc-slide{
    margin:0; flex:0 0 100%; aspect-ratio:6/5;
    display:flex; align-items:center; justify-content:center;
    background:#fff; padding:clamp(.5rem,1.6vw,1.1rem);
  }
  .dc-slide img{max-width:100%; max-height:100%; object-fit:contain; display:block; cursor:zoom-in}
  .dc-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:40px; height:40px; border-radius:50%; cursor:pointer;
    border:1px solid color-mix(in srgb,var(--latte) 45%, transparent);
    background:color-mix(in srgb,#fff 78%, transparent); backdrop-filter:blur(4px);
    color:var(--ink); font-size:1.45rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
  }
  .dc-nav:hover{background:var(--cinna); border-color:var(--cinna)}
  .dc-prev{left:.7rem} .dc-next{right:.7rem}
  .dc-foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.95rem}
  .dc-caption{margin:0; font-size:.82rem; font-style:italic; color:var(--ink-soft); min-height:1.2em}
  .dc-cap{display:none} .dc-cap.is-on{display:inline}
  .dc-dots{display:flex; gap:.45rem; flex:0 0 auto}
  .dc-dot{
    width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
    border:1px solid var(--latte); background:transparent; transition:background .2s ease;
  }
  .dc-dot.is-on{background:var(--latte)}

  /* Lightbox */
  .lightbox{
    position:fixed; inset:0; z-index:200; display:none;
    align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
    background:color-mix(in srgb, var(--espresso) 90%, transparent); backdrop-filter:blur(4px);
  }
  .lightbox.is-open{display:flex}
  .lightbox img{max-width:100%; max-height:100%; object-fit:contain; background:#fff; box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
  .lightbox-close{
    position:absolute; top:.8rem; right:1.1rem; cursor:pointer;
    background:none; border:0; color:var(--froth); font-size:2.1rem; line-height:1;
  }

  /* Hilera de videos (estilo feed) */
  .reels-section{padding-block:clamp(4rem,8vw,7rem)}
  .reels-head{margin-bottom:clamp(2rem,4vw,3rem)}
  .reels-intro{margin:1rem 0 0; color:var(--ink-soft); max-width:54ch}
  .reels-row{display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
  .reel{position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer; border:0; padding:0; display:block; background:var(--creme)}
  .reel img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .reel::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(58,50,44,.04) 40%, rgba(58,50,44,.28)); transition:background .3s ease}
  .reel:hover img{transform:scale(1.05)}
  .reel:hover::after{background:linear-gradient(180deg, rgba(58,50,44,.02) 30%, rgba(58,50,44,.34))}
  .reel-play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
    width:58px; height:58px; border-radius:50%; padding-left:4px;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb,#fff 82%, transparent); backdrop-filter:blur(3px);
    color:var(--ink); font-size:1.15rem;
    transition:transform .25s ease, background .25s ease, color .25s ease;
  }
  .reel:hover .reel-play{transform:translate(-50%,-50%) scale(1.08); background:var(--cinna)}
  @media(max-width:820px){ .reels-row{grid-template-columns:repeat(2,1fr)} }

  /* Lightbox: imagen o video */
  .lb-stage{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center}
  #lightboxVideo{width:min(100%,1120px); aspect-ratio:16/9; max-height:100%}
  #lightboxVideo iframe{width:100%; height:100%; border:0; display:block; background:#000; box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}

  /* ---------- Publicaciones (carrusel de portadas) ---------- */
  .pub-section{padding-block:clamp(4rem,8vw,7rem)}
  .pub-head{margin-bottom:clamp(2rem,4vw,2.6rem)}
  .pub-intro{margin:1rem 0 0; color:var(--ink-soft); max-width:56ch}
  .pub-carousel{position:relative}
  .pub-track{
    display:flex; gap:clamp(1rem,2.4vw,1.5rem);
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding:.4rem .2rem 1.4rem; margin:0 calc(var(--pad) * -1); padding-inline:var(--pad);
    scrollbar-width:thin; -webkit-overflow-scrolling:touch;
    scrollbar-color:color-mix(in srgb,var(--latte) 50%, transparent) transparent;
  }
  .pub-track::-webkit-scrollbar{height:6px}
  .pub-track::-webkit-scrollbar-track{background:transparent}
  .pub-track::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--latte) 45%, transparent); border-radius:3px}
  .pub-card{
    scroll-snap-align:start; flex:0 0 auto;
    width:clamp(218px,74vw,272px);
    display:flex; flex-direction:column;
    text-decoration:none; color:var(--ink);
    border:1px solid color-mix(in srgb,var(--latte) 30%, transparent);
    background:#fff; position:relative; overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  }
  .pub-card:hover{transform:translateY(-6px); box-shadow:0 24px 50px -28px rgba(67,57,47,.5)}
  /* portada: imagen arriba */
  .pub-cover{display:block; aspect-ratio:3/4; overflow:hidden; background:var(--chai)}
  .pub-cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .pub-card:hover .pub-cover img{transform:scale(1.045)}
  .pub-cover--book{background:var(--blush)}
  .pub-cover--book img{object-fit:contain}
  /* descripción: texto abajo */
  .pub-body{display:flex; flex-direction:column; flex:1; padding:1rem 1.15rem 1.15rem; border-top:1px solid color-mix(in srgb,var(--latte) 22%, transparent)}
  .pub-src{
    text-transform:uppercase; letter-spacing:.18em; font-size:.62rem;
    color:color-mix(in srgb,var(--ink) 60%, transparent); font-family:var(--serif);
  }
  .pub-title{
    font-family:var(--display); font-weight:400; line-height:1.18;
    font-size:1.02rem; letter-spacing:-.01em;
    margin:.4rem 0 .9rem;
  }
  .pub-foot{display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-top:auto}
  .pub-author{font-style:italic; font-size:.8rem; color:color-mix(in srgb,var(--ink) 68%, transparent)}
  .pub-read{
    font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
    border-bottom:1px solid var(--cinna); padding-bottom:1px;
  }
  .pub-card .pub-read .arrow{transition:transform .25s ease; display:inline-block}
  .pub-card:hover .pub-read .arrow{transform:translateX(3px)}
  /* flechas */
  .pub-arrows{display:flex; gap:.6rem; margin-top:.2rem}
  .pub-arrow{
    width:42px; height:42px; border-radius:50%; cursor:pointer;
    border:1px solid color-mix(in srgb,var(--latte) 45%, transparent);
    background:#fff; color:var(--ink); font-size:1.4rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, border-color .2s ease;
  }
  .pub-arrow:hover{background:var(--cinna); border-color:var(--cinna)}

  /* ---------- Parallax (hero + bandas + citas) ---------- */
  /* Hero: la foto, el fondo difuminado y la marca se mueven a distinta velocidad */
  .hero-figure{transform:translate3d(0, calc(-50% + var(--py,0px)), 0)}
  .hero-mark{transform:translate3d(-50%, calc(-50% + var(--py,0px)), 0)}
  .hero-mesh{transform:translate3d(0, var(--py,0px), 0)}
  .side-label{transform:translate3d(0, calc(-50% + var(--py,0px)), 0)}

  /* Bandas de color: el fondo deriva suavemente respecto al contenido */
  .epi-band, .who-band, .reels-section{position:relative; overflow:hidden}
  .epi-band{background-color:transparent}
  .who-band{background-color:transparent}
  .reels-section{background-color:transparent}
  .epi-band::before, .who-band::before, .reels-section::before{
    content:""; position:absolute; left:0; right:0; top:-22%; height:144%;
    z-index:0; transform:translate3d(0, var(--py,0px), 0); will-change:transform;
  }
  .epi-band::before{background:var(--cinna)}
  .who-band::before{background:var(--blush)}
  .reels-section::before{background:var(--blush)}
  .epi-band > *, .who-band > *, .reels-section > *{position:relative; z-index:1}

  /* Cita inline (adolescentes) */
  .pullquote{transform:translate3d(0, var(--py,0px), 0)}