@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{--voz:#E2683C;--alta:#E8B44A;--tinta:#2E4B6B;--sierra:#5E9E7E;
--bg:#0F0E11;--bg2:#1A181E;--bg3:#252229;--line:#33303A;
--tx:#F5F1EA;--tx2:#A9A2B0;--tx3:#8F869A}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:Inter,system-ui,sans-serif;
line-height:1.65;-webkit-font-smoothing:antialiased}
.serif{font-family:Fraunces,Georgia,serif}
a{color:var(--alta);text-decoration:none} a:hover{text-decoration:underline}
.sub a,.prose a,.desc a{text-decoration:underline;text-underline-offset:3px}
.w{max-width:1080px;margin:0 auto;padding:0 22px}

header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
background:rgba(15,14,17,.92);backdrop-filter:blur(18px)}
header .w{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:11px;color:var(--tx);text-decoration:none}
.logo .iso{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,var(--voz),#C4532C);
display:flex;align-items:center;justify-content:center;color:#fff;padding:6px}
.logo .iso svg{width:100%;height:100%}
.logo .nm{font-family:Fraunces,serif;font-size:21px;font-weight:600;letter-spacing:-.02em}
.logo .nm i{font-style:normal;color:var(--voz)} .logo .nm b{font-weight:600;color:var(--alta)}
nav a{color:var(--tx2);font-size:14px;font-weight:500;margin-left:24px}
nav a:hover{color:var(--tx);text-decoration:none}

.hero{padding:clamp(40px,7vw,64px) 0 56px;text-align:center}
.hero h1{font-family:Fraunces,serif;font-size:clamp(34px,6vw,62px);font-weight:600;
letter-spacing:-.03em;line-height:1.08}
.hero h1 em{font-style:normal;color:var(--voz)}
.hero p{color:var(--tx2);font-size:clamp(16px,2vw,19px);max-width:620px;margin:18px auto 0}
.tiendas-nota{font-size:13px;color:var(--tx3);margin-top:14px}
.tiendas{display:flex;gap:13px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.tienda{display:inline-flex;align-items:center;gap:9px;background:var(--bg2);
border:1px solid var(--line);border-radius:13px;padding:13px 22px;color:var(--tx);
font-weight:600;font-size:14.5px}
.tienda:hover{border-color:var(--voz);text-decoration:none}

.muestra{background:var(--bg2);border:1px solid var(--line);border-radius:18px;
padding:26px;max-width:640px;margin:44px auto 0;text-align:left}
.muestra .t{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:var(--voz);margin-bottom:13px}
.muestra audio{width:100%;margin-top:14px}
.muestra .n{font-size:13px;color:var(--tx3);margin-top:11px;line-height:1.6}

/* ── Comparador de acentos ────────────────────────────────────────────────
   La pieza central de la landing. El visitante no lee que la voz es regional:
   la escucha, y puede cambiar de variante sin perder el punto de la
   reproducción, así que oye la MISMA palabra en los dos acentos. */
.cmp{background:linear-gradient(180deg,var(--bg2),#151318);border:1px solid var(--line);
border-radius:20px;padding:clamp(20px,3.4vw,30px);max-width:660px;margin:32px auto 0;
text-align:left;box-shadow:0 22px 60px rgba(0,0,0,.45)}
.cmp__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin-bottom:16px}
.cmp__kicker{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:var(--voz)}
.cmp__medida{font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.cmp__medida b{color:var(--sierra);font-weight:700}

.cmp__frase{font-family:Fraunces,Georgia,serif;font-size:clamp(17px,2.3vw,21px);
line-height:1.55;color:var(--tx);margin-bottom:6px}
.cmp__frase .m{color:var(--voz);font-style:normal;
text-decoration:underline;text-decoration-style:dotted;text-underline-offset:5px;
text-decoration-color:rgba(226,104,60,.55);transition:color .25s}
.cmp[data-rehila="no"] .cmp__frase .m{color:var(--tx2);text-decoration-color:var(--line)}
.cmp__fuente{font-size:12.5px;color:var(--tx3);margin-bottom:20px}

.cmp__tabs{display:flex;flex-wrap:wrap;gap:7px;background:var(--bg3);border:1px solid var(--line);
border-radius:13px;padding:5px;margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.cmp__tabs::-webkit-scrollbar{display:none}
.cmp__tab{flex:1 1 0;min-width:max-content;white-space:nowrap;text-align:center;background:none;border:0;cursor:pointer;
color:var(--tx2);font:600 13.5px/1 Inter,system-ui,sans-serif;padding:11px 14px;
border-radius:9px;transition:background .18s,color .18s}
.cmp__tab:hover{color:var(--tx)}
.cmp__tab[aria-selected="true"]{background:var(--voz);color:#180A05}
.cmp__tab:focus-visible{outline:2px solid var(--alta);outline-offset:2px}

.cmp__player{display:flex;align-items:center;gap:16px}
.cmp__play{flex:0 0 auto;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
background:var(--voz);color:#180A05;display:flex;align-items:center;justify-content:center;
transition:transform .15s,background .18s}
.cmp__play:hover{background:#F0784B;transform:scale(1.04)}
.cmp__play:focus-visible{outline:2px solid var(--alta);outline-offset:3px}
.cmp__play svg{width:22px;height:22px;fill:currentColor}
.cmp__play .ic-pause{display:none}
.cmp[data-estado="play"] .cmp__play .ic-play{display:none}
.cmp[data-estado="play"] .cmp__play .ic-pause{display:block}

.cmp__onda{flex:1 1 auto;min-width:0;position:relative;height:46px;display:flex;
align-items:center;gap:2px;cursor:pointer}
.cmp__onda .b{flex:1 1 0;min-width:2px;border-radius:2px;background:var(--line);
transition:background .12s;height:var(--h,20%)}
.cmp__onda .b.on{background:var(--voz)}
.cmp__onda input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
margin:0}
.cmp__onda input:focus-visible + .cmp__ondabars{outline:2px solid var(--alta);
outline-offset:4px;border-radius:6px}
.cmp__ondabars{position:absolute;inset:0;display:flex;align-items:center;gap:2px;
pointer-events:none}
.cmp__t{flex:0 0 auto;font:500 12.5px/1 ui-monospace,SFMono-Regular,monospace;
color:var(--tx3);font-variant-numeric:tabular-nums;min-width:76px;text-align:right}

.cmp__pie{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
display:grid;gap:12px}
.cmp__det{font-size:13.5px;color:var(--tx2)}
.cmp__ipa{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;
color:var(--alta);background:var(--bg3);border:1px solid var(--line);border-radius:8px;
padding:9px 12px;display:block;word-break:break-word;line-height:1.9}
.cmp__barra{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--tx3)}
.cmp__barra .p{flex:1 1 auto;height:6px;border-radius:99px;background:var(--bg3);
overflow:hidden}
.cmp__barra .p i{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,var(--sierra),var(--alta));width:0;transition:width .35s}
.cmp__barra b{color:var(--tx2);font-variant-numeric:tabular-nums;min-width:34px;
text-align:right}
.cmp__nota{font-size:12.5px;color:var(--tx3);line-height:1.6;margin-top:14px}
.cmp__nota a{color:var(--tx2);text-decoration:underline}
.cmp noscript audio{width:100%;margin-top:10px}
.cmp__ipa-det summary{cursor:pointer;font-size:12.5px;color:var(--tx3);list-style:none}
.cmp__ipa-det summary::-webkit-details-marker{display:none}
.cmp__ipa-det summary:before{content:"▸ ";color:var(--voz)}
.cmp__ipa-det[open] summary:before{content:"▾ "}
.cmp__ipa-det summary:focus-visible{outline:2px solid var(--alta);outline-offset:3px;border-radius:4px}
.cmp__ipa-det .cmp__ipa{margin-top:9px}
/* Anclas: el header es sticky, sin esto #voz queda tapado */
.cmp,section[id],div[id]{scroll-margin-top:86px}
@media(max-width:520px){
  .cmp__player{gap:11px}
  .cmp__play{width:48px;height:48px}
  .cmp__onda,.cmp__ondabars{gap:1px}
  .cmp__onda .b{min-width:1px}
  .cmp__t{min-width:62px;font-size:11.5px}
}

.med{margin-top:26px;background:var(--bg2);border:1px solid var(--line);
border-left:2px solid var(--sierra);border-radius:16px;padding:26px}
.med h3{font-family:Fraunces,serif;font-size:19px;font-weight:600;margin-bottom:9px}
.med p{color:var(--tx2);font-size:14.5px;max-width:660px}
.med__t{margin:20px 0 14px;display:grid;gap:9px}
.med__f{display:grid;grid-template-columns:150px 1fr 44px 78px;align-items:center;gap:13px;
font-size:13.5px}
.med__n{color:var(--tx2);font-weight:600}
.med__p{height:8px;border-radius:99px;background:var(--bg3);overflow:hidden;display:block}
.med__p i{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,var(--sierra),var(--alta))}
.med__f b{color:var(--tx);font-variant-numeric:tabular-nums;text-align:right}
.med__r{color:var(--tx3);font-size:12px;font-variant-numeric:tabular-nums}
.med__pie{font-size:12.5px;color:var(--tx3)}
@media(max-width:620px){.med__f{grid-template-columns:1fr 44px;gap:8px}
.med__p{grid-column:1/3} .med__r{grid-column:1/3;margin-top:-4px}}

.lgp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
max-width:820px}
.lgp__p{display:flex;align-items:center;gap:14px;background:var(--bg2);
border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.lgp__p[data-estado="play"] .ic-play{display:none}
.lgp__p[data-estado="play"] .ic-pause{display:block}

/* El análisis de lectura, desplegable */
.lec{margin-top:14px;max-width:640px;background:var(--bg2);border:1px solid var(--line);
border-left:2px solid var(--sierra);border-radius:14px;padding:14px 18px}
.lec summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--tx2);list-style:none}
.lec summary::-webkit-details-marker{display:none}
.lec summary:before{content:"▸ ";color:var(--sierra)}
.lec[open] summary:before{content:"▾ "}
.lec summary:focus-visible{outline:2px solid var(--alta);outline-offset:3px;border-radius:4px}
.lec__intro{font-size:13px;color:var(--tx3);margin:12px 0 4px;line-height:1.6}
.lec ol{margin:10px 0 2px;padding-left:20px}
.lec li{margin-top:12px}
.lec li.lec--fin{padding-bottom:10px;border-bottom:1px dashed var(--line)}
.lec__o{display:block;font-family:Fraunces,Georgia,serif;font-size:16px;color:var(--tx);
line-height:1.5}
.lec__u{margin:8px 0 0;padding-left:16px;list-style:none;border-left:1px solid var(--line)}
.lec__u li{margin-top:8px}
.lec__f{display:block;font-size:13.5px;color:var(--tx2);line-height:1.5}
.lec__f b{color:var(--voz);font-weight:600}
.lec__m{display:block;font-size:11.5px;color:var(--tx3);margin-top:3px;
font-variant-numeric:tabular-nums}
.lec__m code{font-family:ui-monospace,SFMono-Regular,monospace;color:var(--alta);
background:var(--bg3);border-radius:5px;padding:1px 5px;font-size:11px}
.lec__p{display:block;font-size:12.5px;color:var(--tx2);margin-top:4px;line-height:1.55}

/* Muestra compacta de las fichas de título */
.mini{display:flex;align-items:center;gap:14px;background:var(--bg2);
border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:24px;
max-width:520px}
.mini__play{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
background:var(--voz);color:#180A05;display:flex;align-items:center;justify-content:center}
.mini__play:hover{background:#F0784B}
.mini__play:focus-visible{outline:2px solid var(--alta);outline-offset:3px}
.mini__play svg{width:18px;height:18px;fill:currentColor}
.mini__play .ic-pause{display:none}
.mini[data-estado="play"] .ic-play{display:none}
.mini[data-estado="play"] .ic-pause{display:block}
.mini__tx{min-width:0}
.mini__tx b{display:block;font-size:13.5px;font-weight:600;color:var(--tx)}
.mini__tx span{display:block;font-size:12.5px;color:var(--tx3);margin-top:2px}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

section{padding:64px 0}
h2{font-family:Fraunces,serif;font-size:clamp(25px,3.4vw,36px);font-weight:600;
letter-spacing:-.02em;margin-bottom:12px}
.sub{color:var(--tx2);margin-bottom:34px;max-width:620px}

.dif{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.dif .c{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:26px;
border-top:2px solid var(--voz)}
.dif h3{font-family:Fraunces,serif;font-size:19px;font-weight:600;margin-bottom:9px}
.dif p{color:var(--tx2);font-size:14.5px}
.ipa{font-family:ui-monospace,monospace;font-size:14px;color:var(--alta);
background:var(--bg3);padding:3px 9px;border-radius:6px;display:inline-block;margin-top:11px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:22px}
.card{display:block;color:var(--tx);text-decoration:none}
.card:hover{text-decoration:none}

/* ── Portada con cinta ─────────────────────────────────────────────────────
   Al estilo de las tiendas de audiolibros, pero la cinta dice algo verdadero:
   la obra es de dominio público, lo exclusivo es la narración. Y el chip de
   arriba a la derecha anticipa el acento con el que está leída, que es el
   dato por el que alguien nos elige y no se ve en ninguna otra tienda. */
.pt{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;display:block;
box-shadow:0 6px 20px rgba(0,0,0,.45);transition:transform .18s,box-shadow .18s}
.card:hover .pt{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.6)}
.pt img{width:100%;height:100%;object-fit:cover;display:block}

/* La cinta va en la ESQUINA, no abajo: las portadas de D2 ya tienen el título y
   el autor apoyados en el borde inferior y una banda ahí se los come. El lado
   derecho está libre en las 49. */
.pt__cinta{position:absolute;top:0;right:0;width:88px;height:88px;overflow:hidden;
pointer-events:none}
.pt__cinta b{position:absolute;top:15px;right:-26px;width:120px;transform:rotate(45deg);
background:linear-gradient(90deg,#C4532C,var(--voz));color:#1A0B04;text-align:center;
font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
padding:3px 0;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.pt__voz{position:absolute;top:52px;right:0;display:inline-flex;align-items:center;gap:5px;
background:rgba(15,14,17,.86);border:1px solid rgba(245,241,234,.16);border-right:0;
border-radius:99px 0 0 99px;padding:4px 9px 4px 8px;font-size:9.5px;font-weight:700;
letter-spacing:.02em;color:var(--tx);backdrop-filter:blur(6px);white-space:nowrap}
.pt__voz i{width:5px;height:5px;border-radius:50%;background:var(--voz);display:block;
flex:0 0 auto}
/* En la ficha la portada es de 300 px: la insignia acompaña la escala */
.ficha .pt__cinta{width:132px;height:132px}
.ficha .pt__cinta b{top:24px;right:-38px;width:176px;font-size:11px;padding:5px 0}
.ficha .pt__voz{top:78px;font-size:12px;padding:6px 14px 6px 12px}

.lgp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
max-width:820px}
.lgp__p{display:flex;align-items:center;gap:14px;background:var(--bg2);
border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.lgp__p[data-estado="play"] .ic-play{display:none}
.lgp__p[data-estado="play"] .ic-pause{display:block}

/* El análisis de lectura, desplegable */
.lec{margin-top:14px;max-width:640px;background:var(--bg2);border:1px solid var(--line);
border-left:2px solid var(--sierra);border-radius:14px;padding:14px 18px}
.lec summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--tx2);list-style:none}
.lec summary::-webkit-details-marker{display:none}
.lec summary:before{content:"▸ ";color:var(--sierra)}
.lec[open] summary:before{content:"▾ "}
.lec summary:focus-visible{outline:2px solid var(--alta);outline-offset:3px;border-radius:4px}
.lec__intro{font-size:13px;color:var(--tx3);margin:12px 0 4px;line-height:1.6}
.lec ol{margin:10px 0 2px;padding-left:20px}
.lec li{margin-top:12px}
.lec li.lec--fin{padding-bottom:10px;border-bottom:1px dashed var(--line)}
.lec__o{display:block;font-family:Fraunces,Georgia,serif;font-size:16px;color:var(--tx);
line-height:1.5}
.lec__u{margin:8px 0 0;padding-left:16px;list-style:none;border-left:1px solid var(--line)}
.lec__u li{margin-top:8px}
.lec__f{display:block;font-size:13.5px;color:var(--tx2);line-height:1.5}
.lec__f b{color:var(--voz);font-weight:600}
.lec__m{display:block;font-size:11.5px;color:var(--tx3);margin-top:3px;
font-variant-numeric:tabular-nums}
.lec__m code{font-family:ui-monospace,SFMono-Regular,monospace;color:var(--alta);
background:var(--bg3);border-radius:5px;padding:1px 5px;font-size:11px}
.lec__p{display:block;font-size:12.5px;color:var(--tx2);margin-top:4px;line-height:1.55}

/* Muestra compacta de las fichas de título */
.mini{display:flex;align-items:center;gap:14px;background:var(--bg2);
border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:24px;
max-width:520px}
.mini__play{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
background:var(--voz);color:#180A05;display:flex;align-items:center;justify-content:center}
.mini__play:hover{background:#F0784B}
.mini__play:focus-visible{outline:2px solid var(--alta);outline-offset:3px}
.mini__play svg{width:18px;height:18px;fill:currentColor}
.mini__play .ic-pause{display:none}
.mini[data-estado="play"] .ic-play{display:none}
.mini[data-estado="play"] .ic-pause{display:block}
.mini__tx{min-width:0}
.mini__tx b{display:block;font-size:13.5px;font-weight:600;color:var(--tx)}
.mini__tx span{display:block;font-size:12.5px;color:var(--tx3);margin-top:2px}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

section{padding:64px 0}
h2{font-family:Fraunces,serif;font-size:clamp(25px,3.4vw,36px);font-weight:600;
letter-spacing:-.02em;margin-bottom:12px}
.sub{color:var(--tx2);margin-bottom:34px;max-width:620px}

.dif{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.dif .c{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:26px;
border-top:2px solid var(--voz)}
.dif h3{font-family:Fraunces,serif;font-size:19px;font-weight:600;margin-bottom:9px}
.dif p{color:var(--tx2);font-size:14.5px}
.ipa{font-family:ui-monospace,monospace;font-size:14px;color:var(--alta);
background:var(--bg3);padding:3px 9px;border-radius:6px;display:inline-block;margin-top:11px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:22px}
.card{display:block;color:var(--tx);text-decoration:none}
.card:hover{text-decoration:none}

/* ── Portada con cinta ─────────────────────────────────────────────────────
   Al estilo de las tiendas de audiolibros, pero la cinta dice algo verdadero:
   la obra es de dominio público, lo exclusivo es la narración. Y el chip de
   arriba a la derecha anticipa el acento con el que está leída, que es el
   dato por el que alguien nos elige y no se ve en ninguna otra tienda. */

.card .t{font-family:Fraunces,serif;font-size:14.5px;font-weight:600;margin-top:11px;line-height:1.3}
.card .a{font-size:12px;color:var(--tx3);margin-top:3px}

.ficha{display:grid;grid-template-columns:300px 1fr;gap:44px;padding:52px 0}
.ficha .pt{border-radius:15px;box-shadow:0 16px 44px rgba(0,0,0,.55)}
.ficha img{width:100%;border-radius:15px}
.ficha h1{font-family:Fraunces,serif;font-size:clamp(30px,4.4vw,46px);font-weight:600;
letter-spacing:-.02em;line-height:1.1}
.ficha .aut{color:var(--tx2);font-size:18px;margin-top:9px}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.chip{background:var(--bg3);border:1px solid var(--line);border-radius:99px;
padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--tx2)}
.chip.cat{border-color:var(--voz);color:var(--voz)}
.desc{color:var(--tx2);margin-top:24px;font-size:16px}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--voz);color:#180A05;
font-weight:700;padding:15px 30px;border-radius:13px;margin-top:28px;font-size:15.5px}
.cta:hover{text-decoration:none;background:#C4532C}
.breadcrumb{font-size:13.5px;color:var(--tx3);padding-top:26px}
.breadcrumb a{color:var(--tx2);text-decoration:underline;text-underline-offset:3px}

.prose h2{margin-top:38px;font-size:24px}
.prose p,.prose li{color:var(--tx2);margin-top:13px}
.prose ul{margin-left:22px}

footer{border-top:1px solid var(--line);padding:44px 0;margin-top:52px;
color:var(--tx3);font-size:13.5px}
footer .w{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
footer a{color:var(--tx2);margin-right:20px}

@media(max-width:720px){.ficha{grid-template-columns:1fr;gap:28px}
.ficha img{max-width:300px} nav a{margin-left:14px;font-size:13px}}