/* ==========================================================================
   Avantia Diary · el cuaderno en CSS 3D
   - Negro total: tapas y páginas negro profundo, texto blanco, acentos violeta.
   - Todo transparente alrededor: se ve el espacio de fondo, sin cajas ni cortes.
   - La hoja que gira se compone de pocas tiras anidadas (5 en escritorio, 4 en
     móvil) que dibujan la curva; sólo existe mientras se pasa página.
   - Nada se anima en reposo: sin bucles, sin filtros ni sombras animadas.
   La lista .diario-entradas es el contenido real: sin JS se enseña como
   tarjetas; con el libro montado queda sólo para lectores de pantalla.
   ========================================================================== */

.diario{background:transparent;overflow:hidden}
.diario .diary3-cab{margin-bottom:clamp(12px,2.4vw,30px)}

.diario-escena{position:relative;container-type:inline-size}
.diario-libro{
  /* ancho de una página: cabe en el ancho (dos páginas + flechas) y en el alto de la pantalla */
  --pw:min(calc((100cqw - 190px) / 2),480px,calc((100svh - 310px) / 1.36));
  --ph:calc(var(--pw) * 1.36);
  --grosor:11px;
  position:relative;height:calc(var(--ph) + 96px);
}

/* ---------- escenario y libro ---------- */
.dl-escenario{position:absolute;inset:0;perspective:1900px;perspective-origin:50% 40%;
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.dl-libro{position:absolute;left:50%;top:44px;width:0;height:var(--ph);transform-style:preserve-3d;
  transform:translateX(calc(var(--pw) * -.5)) rotateX(20deg) rotateY(-16deg) rotateZ(-2deg);will-change:transform}
.diario-escena[data-estado="abierto"] .dl-libro{transform:rotateX(9deg)}
.dl-libro > *{position:absolute;top:0;transform-style:preserve-3d}

/* sombra de apoyo y brillo violeta: estáticos, gradientes sin bordes */
.dl-suelo{left:calc(var(--pw) * -1.25);width:calc(var(--pw) * 2.5);height:calc(var(--ph) * 1.2);top:calc(var(--ph) * -.08);
  background:radial-gradient(50% 50% at 50% 52%,rgb(0 0 0 / .85),rgb(0 0 0 / .5) 45%,transparent 72%),
             radial-gradient(48% 46% at 50% 50%,rgb(107 43 255 / .22),transparent 70%);
  transform:translateZ(-40px);pointer-events:none}

/* tapas: negro con un filo apenas visible */
.dl-tapa{width:calc(var(--pw) + 12px);height:calc(var(--ph) + 16px);top:-8px;border-radius:2px 7px 7px 2px;
  background:#050407;box-shadow:inset 0 0 0 1px #17141f}
.dl-trasera{left:0;transform:translateZ(0)}
.dl-portada{left:0;transform-origin:0 50%;transform:translateZ(calc(var(--grosor) + 1px))}
.dl-portada .dl-cara{border-radius:2px 7px 7px 2px}

/* bloques de papel: cara de arriba (página) y cantos inferior y exterior, muy sutiles */
.dl-bloque{width:var(--pw);height:var(--ph);pointer-events:none}
.dl-bloque.der{left:0}
.dl-bloque.izq{left:calc(var(--pw) * -1);opacity:0}
.diario-escena[data-izq="si"] .dl-bloque.izq{opacity:1}
.dl-canto{position:absolute;background:#0d0b12;
  background-image:repeating-linear-gradient(var(--dir,0deg),rgb(255 255 255 / .05) 0 1px,transparent 1px 3px)}
.dl-canto.inf{left:0;right:0;top:100%;height:var(--grosor);transform-origin:50% 0;transform:translateZ(var(--grosor)) rotateX(-90deg);--dir:0deg}
.dl-canto.ext{top:0;bottom:0;width:var(--grosor);transform-origin:0 50%}
.dl-bloque.der .dl-canto.ext{left:100%;transform:translateZ(var(--grosor)) rotateY(90deg);--dir:90deg}
.dl-bloque.izq .dl-canto.ext{left:0;transform:rotateY(-90deg);--dir:90deg}

/* lomo: sólo se ve con el libro cerrado, de tres cuartos */
.dl-lomo{left:0;width:calc(var(--grosor) + 2px);height:calc(var(--ph) + 16px);top:-8px;background:#09080d;
  box-shadow:inset 0 0 0 1px #17141f;transform-origin:0 50%;transform:rotateY(-90deg)}

/* páginas fijas */
.dl-pag{width:var(--pw);height:var(--ph);overflow:hidden;transform:translateZ(var(--grosor));backface-visibility:hidden}
.dl-pag.der{left:0}
.dl-pag.izq{left:calc(var(--pw) * -1);visibility:hidden}
.diario-escena[data-izq="si"] .dl-pag.izq{visibility:visible}

/* sombra que recorre la página bajo la hoja que gira (sólo transform y opacity) */
.dl-sombra{position:absolute;top:0;bottom:0;width:38%;opacity:0;pointer-events:none;z-index:3}
.dl-sombra.der{left:0;background:linear-gradient(90deg,rgb(0 0 0 / .7),transparent)}
.dl-sombra.izq{right:0;background:linear-gradient(270deg,rgb(0 0 0 / .7),transparent)}

/* esquina que se levanta al pasar por encima (escritorio) */
.dl-esquina{position:absolute;right:0;bottom:0;width:0;height:0;z-index:4;pointer-events:none;
  background:linear-gradient(315deg,transparent 50%,#1a1624 50%,#0c0a11 100%);
  box-shadow:-3px -3px 10px rgb(0 0 0 / .45);transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.dl-pag.der:hover .dl-esquina{width:46px;height:46px}}

/* hoja que gira: tiras anidadas, cada una con su cara y su dorso */
.dl-hoja{left:0;width:var(--pw);height:var(--ph);transform-origin:0 50%;pointer-events:none}
.dl-tira{position:absolute;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
.dl-tira .dl-tira{left:100%}
.dl-cara{position:absolute;inset:0 -1px 0 0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#07060a}
.dl-cara.dorso{transform:rotateY(180deg)}
.dl-cara::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgb(0 0 0 / var(--s0,0)),rgb(0 0 0 / var(--s1,0)))}
.dl-cont{position:absolute;top:0;width:var(--pw);height:var(--ph)}

/* cinta marcapáginas: sale por abajo del lomo, entera, con cola de golondrina */
.dl-cinta{left:20px;top:calc(100% - 3px);width:11px;height:58px;z-index:1;
  background:linear-gradient(90deg,#4b1fc7,#8f63ff 50%,#4b1fc7);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);transform:translateZ(calc(var(--grosor) * .55)) rotateZ(4deg);transform-origin:50% 0;pointer-events:none}

/* ---------- la página ---------- */
.dl-p{position:absolute;inset:0;background:#07060a;color:#f3f1f8;font:400 calc(var(--pw) / 31)/1.6 "Inter",system-ui,sans-serif;
  padding:8.5% 9% 8%;display:flex;flex-direction:column}
.dl-p.der{padding-left:11%}
.dl-p.izq{padding-right:11%}
/* el canal del lomo: oscurece apenas hacia dentro */
.dl-p::before{content:"";position:absolute;top:0;bottom:0;width:14%;pointer-events:none}
.dl-p.der::before{left:0;background:linear-gradient(90deg,rgb(0 0 0 / .9),transparent)}
.dl-p.izq::before{right:0;background:linear-gradient(270deg,rgb(0 0 0 / .9),transparent)}
.dl-cab{display:flex;justify-content:space-between;font:500 .6em/1 var(--mono,monospace);letter-spacing:.24em;text-transform:uppercase;color:#7d778c;
  padding-bottom:1.1em;border-bottom:1px solid #1c1926}
.dl-pie{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;font:500 .6em/1 var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#6f6a80}
.dl-pie b{font:600 1.5em/1 "Inter Tight",sans-serif;letter-spacing:0;color:#cbc6d8}
.dl-p.izq .dl-pie{flex-direction:row}
.dl-p.der .dl-pie{flex-direction:row-reverse}

.dl-fecha{display:flex;align-items:flex-end;gap:.7em;margin-top:1.4em}
.dl-fecha b{font:800 9.4em/.8 "Inter Tight",sans-serif;letter-spacing:-.06em;
  background:linear-gradient(180deg,#f2edff 0%,#b49cff 45%,#6b2bff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.dl-fecha span{display:flex;flex-direction:column;gap:.45em;padding-bottom:.5em;font:500 .85em/1 var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#f3f1f8}
.dl-fecha span i{font-style:normal;color:#7d778c}
.dl-fecha em{font:italic 400 1.35em/1 "Serif",Georgia,serif;color:#a98bff;padding-bottom:.4em}
.dl-etq{align-self:flex-start;margin-top:1.8em;padding:.6em 1.1em;border:1px solid rgb(143 99 255 / .55);border-radius:99px;
  font:500 .62em/1 var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#c9b8ff}
.dl-tit{margin:.9em 0 0;font:700 2.25em/1.06 "Inter Tight",sans-serif;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.dl-raya{width:2.6em;height:2px;margin:1.3em 0 1.1em;background:#6b2bff}
.dl-ent{margin:0;font:italic 400 1.28em/1.42 "Serif",Georgia,serif;color:#cfc9dd}

.dl-fig{margin:1.5em 0 0}
.dl-fig img{display:block;width:100%;aspect-ratio:16/10.4;object-fit:cover;border-radius:3px;outline:1px solid rgb(255 255 255 / .06);outline-offset:-1px}
.dl-fig figcaption{margin-top:.9em;font:500 .55em/1.3 var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#6f6a80}
.dl-cuerpo{margin-top:1.5em;color:#cfcad9;font-size:.94em;line-height:1.62}
.dl-cuerpo p{margin:0 0 .7em}
.dl-cuerpo p:first-child::first-letter{float:left;font:italic 400 3.5em/.82 "Serif",Georgia,serif;color:#a98bff;padding:.06em .14em 0 0}
.dl-firma{margin-top:.6em;font:italic 400 1.05em/1 "Serif",Georgia,serif;color:#a7a1b6}

/* portadilla y sumario */
.dl-titulo{align-items:center;text-align:center}
.dl-titulo .dl-cab{align-self:stretch}
.dl-titulo .dl-a{width:28%;margin-top:2.2em}
.dl-titulo h4{margin:.5em 0 0;font:800 3.1em/.98 "Inter Tight",sans-serif;letter-spacing:-.045em;color:#fff}
.dl-titulo h4 em{font-style:normal;background:linear-gradient(100deg,#e6dcff,#a98bff 45%,#6b2bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.dl-titulo .dl-sub{margin:.9em 0 0;font:italic 400 1.15em/1.35 "Serif",Georgia,serif;color:#bdb6cc}
.dl-sumario{align-self:stretch;margin:2.2em 0 0;padding:0;list-style:none;text-align:left}
.dl-sumario::before{content:"Sumario";display:block;padding-bottom:.9em;margin-bottom:.5em;border-bottom:1px solid #1c1926;
  font:500 .6em/1 var(--mono,monospace);letter-spacing:.26em;text-transform:uppercase;color:#a98bff}
.dl-sumario li{display:flex;align-items:baseline;gap:.8em;padding:.42em 0;font-size:.86em;color:#ece9f3}
.dl-sumario li i{font:500 .72em/1 var(--mono,monospace);font-style:normal;letter-spacing:.14em;color:#6f6a80}
.dl-sumario li span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-sumario li small{font:500 .7em/1 var(--mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:#7d778c;white-space:nowrap}

/* guardas: negro liso, una línea fina y la firma de la casa, sin cajas */
.dl-guarda{justify-content:center;align-items:center;text-align:center}
.dl-guarda .dl-a{width:16%;opacity:.9}
.dl-guarda p{margin:1.4em 0 0;font:italic 400 1.5em/1.2 "Serif",Georgia,serif;color:#a98bff}
.dl-guarda strong{display:block;margin-top:.25em;font:700 1.7em/1 "Inter Tight",sans-serif;letter-spacing:-.03em;color:#f3f1f8}
.dl-guarda small{display:block;margin-top:1.2em;font:500 .58em/1 var(--mono,monospace);letter-spacing:.26em;text-transform:uppercase;color:#6f6a80}
.dl-guarda .dl-linea{width:1px;height:12%;background:linear-gradient(#0000,#3a2f5c,#0000);margin:1.6em 0}

/* final */
.dl-final h4{margin:1.6em 0 0;font:italic 400 4.4em/1 "Serif",Georgia,serif;letter-spacing:-.01em;
  background:linear-gradient(180deg,#f2edff,#a98bff 50%,#6b2bff);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em}
.dl-final p{margin:1.1em 0 0;color:#cfcad9;font-size:1.02em;line-height:1.6}
.dl-final strong{display:block;margin-top:1.8em;padding-top:1.3em;border-top:1px solid #1c1926;font:700 1.6em/1.1 "Inter Tight",sans-serif;letter-spacing:-.03em;color:#fff}
.dl-final .dl-mail{margin-top:.9em;font:500 .7em/1 var(--mono,monospace);letter-spacing:.22em;color:#a98bff}
.dl-final .dl-a{width:15%;margin:auto auto 1.2em}

/* reverso de hoja (móvil) */
.dl-reverso{justify-content:center;align-items:center}
.dl-reverso .dl-a{width:30%;opacity:.07}

/* portada */
.dl-portada-arte{position:absolute;inset:0;background:#050407;display:flex;flex-direction:column;align-items:center;
  padding:13% 10% 9%;font-size:calc(var(--pw) / 31);color:#cdbfff;overflow:hidden}
.dl-portada-arte::before{content:"";position:absolute;inset:4.5%;border:1px solid #1d1a27;border-radius:4px;pointer-events:none}
.dl-portada-arte::after{content:"";position:absolute;left:50%;top:28%;width:90%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgb(107 43 255 / .26),transparent);pointer-events:none}
.dl-portada-arte .dl-a{position:relative;z-index:1;width:46%;margin-top:6%}
.dl-portada-arte .dl-marca{position:relative;z-index:1;margin-top:auto;text-align:center}
.dl-portada-arte .dl-marca b{display:block;font:500 1em/1 var(--mono,monospace);letter-spacing:.7em;margin-right:-.7em;color:#d9ceff}
.dl-portada-arte .dl-marca span{display:block;width:2.4em;height:1px;margin:1.3em auto;background:#4a3f6e}
.dl-portada-arte .dl-marca em{display:block;font:italic 400 3.1em/1 "Serif",Georgia,serif;color:#e6dcff}
.dl-portada-arte .dl-vol{position:relative;z-index:1;margin-top:3.2em;font:500 .58em/1 var(--mono,monospace);letter-spacing:.4em;color:#6f6a80}

/* ---------- controles ---------- */
.diario-flecha{position:absolute;top:calc(44px + var(--ph) / 2);z-index:5;width:56px;height:56px;margin-top:-28px;border-radius:50%;
  display:grid;place-items:center;color:#efeaff;cursor:pointer;background:rgb(12 9 22 / .6);
  border:1px solid rgb(201 184 255 / .2);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,background-color .3s,opacity .3s}
.diario-flecha svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.diario-flecha.ant{left:max(4px,calc(50% - var(--pw) - 88px))}
.diario-flecha.sig{right:max(4px,calc(50% - var(--pw) - 88px))}
.diario-flecha:hover{border-color:rgb(201 184 255 / .6);background-color:rgb(107 43 255 / .5)}
.diario-flecha.ant:hover{transform:translateX(-3px)}
.diario-flecha.sig:hover{transform:translateX(3px)}
.diario-flecha:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.diario-flecha[disabled]{opacity:0;pointer-events:none}

.diario-barra{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,28px);flex-wrap:wrap;
  font:500 11px/1 var(--mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:#8f8a9e}
.diario-cuenta{display:inline-flex;align-items:baseline;gap:8px;min-width:9em;justify-content:flex-end}
.diario-cuenta b{font-weight:500;color:#efeaff}
.diario-puntos{display:inline-flex;align-items:center;gap:2px}
.diario-puntos button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.diario-puntos button::before{content:"";width:6px;height:6px;border-radius:999px;background:#3b3650;transition:width .4s ease,background-color .3s}
.diario-puntos button:hover::before{background:#8f63ff}
.diario-puntos button[aria-current="true"]::before{width:22px;background:#8f63ff}
.diario-puntos button:focus-visible{outline:2px solid #c9b8ff;outline-offset:1px;border-radius:6px}
.diario-pista{min-width:15em;color:#6f6a80;transition:opacity .6s}
.diario-pista.oculta{opacity:0}
.diario-sonido{width:34px;height:34px;border-radius:50%;border:1px solid #2c2838;background:none;color:#a99fc6;cursor:pointer;display:grid;place-items:center;transition:border-color .3s,color .3s}
.diario-sonido svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.diario-sonido svg path:first-child{fill:currentColor;stroke:none}
.diario-sonido[aria-pressed="false"] .ondas{opacity:.15}
.diario-sonido:hover{border-color:#6b2bff;color:#efeaff}
.diario-sonido:focus-visible{outline:2px solid #c9b8ff;outline-offset:2px}
.diario-vivo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* fundido (reducir movimiento) */
.dl-libro{transition:opacity .22s ease}
.diario-escena.fundido .dl-libro{opacity:0}

/* ---------- sin JS: tarjetas; con el libro, sólo para lectores ---------- */
.diario.con-3d .diario-entradas{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
.diario:not(.con-3d) .diario-libro,.diario:not(.con-3d) .diario-barra{display:none}
.diario-entradas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.diario-entrada article{height:100%;border:1px solid #1d1a26;border-radius:18px;overflow:hidden;background:#07060a}
.diario-entrada img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.diario-entrada article > :not(img){margin:0 22px}
.diario-meta{display:flex;gap:12px;margin-top:20px!important;font:500 11px/1 var(--mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:#bdbcc6}
.diario-meta b{color:#a98bff;font-weight:500}
.diario-entrada h3{font-size:22px;line-height:1.2;color:#fff;margin-top:14px!important}
.diario-entrada p:not(.diario-meta){color:#bdbcc6;font-size:15px;line-height:1.55;margin-top:10px!important}
.diario-entrada p:last-child{margin-bottom:22px!important}
.diario-entrada p:not(.diario-entradilla):not(.diario-meta){display:none}

/* ---------- móvil: una sola página ---------- */
@media (max-width:760px){
  .diario-libro{--pw:min(calc(100cqw - 36px),440px,calc((100svh - 200px) / 1.5));--ph:calc(var(--pw) * 1.5);height:calc(var(--ph) + 72px)}
  .dl-libro{top:22px;transform:translateX(calc(var(--pw) * -.5)) rotateX(14deg) rotateY(-12deg)}
  .diario-escena[data-estado="abierto"] .dl-libro{transform:translateX(calc(var(--pw) * -.5)) rotateX(4deg)}
  /* una sola página: lo que queda a la izquierda del lomo no se enseña (nada de bordes cortados por la pantalla) */
  .diario-escena[data-estado="abierto"] .dl-portada{visibility:hidden}
  .diario-escena .dl-bloque.izq,.diario-escena .dl-pag.izq{display:none}
  .dl-final h4{font-size:3.4em;margin-top:1em}
  .dl-final strong{margin-top:1.2em;padding-top:1em;font-size:1.4em}
  .dl-final .dl-a{width:12%;margin-bottom:.8em}
  .dl-p{font-size:calc(var(--pw) / 25);padding:9% 8% 8% 10%}
  .dl-fecha{margin-top:1.1em}
  .dl-fecha b{font-size:5.6em}
  .dl-etq{margin-top:1.3em}
  .dl-tit{font-size:1.8em;margin-top:.7em}
  .dl-fig{margin-top:1.1em}
  .dl-fig img{aspect-ratio:16/9.4}
  .dl-ent{font-size:1.1em}
  .dl-cinta{height:34px}
  .diario-flecha{top:calc(100% - 4px);bottom:auto;margin-top:0;width:46px;height:46px}
  .diario-flecha.ant{left:6px}
  .diario-flecha.sig{right:6px}
  .diario-barra{gap:8px 10px;padding-inline:54px;min-height:40px}
  .diario-cuenta{min-width:0}
  .diario-pista{display:none}
  .diario-puntos{gap:0}
  .diario-puntos button{width:17px}
  .diario-puntos button[aria-current="true"]::before{width:13px}
}
@media (prefers-reduced-motion:reduce){
  .dl-esquina,.diario-flecha,.diario-puntos button::before{transition:none}
}