/* Revista HAIR MÉTODO — artículo, listados y ficha de autora.
   Va en fichero aparte: app.css se queda pegado en la caché del móvil. */

/* ---------- cabecera de artículo ---------- */
.art-hd{padding:140px 0 26px}
.art-hd h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.2vw,58px);line-height:1.04;letter-spacing:-.015em;max-width:15ch}
.art-hd .eyebrow{margin-bottom:14px;transition:.2s}
.art-hd a.eyebrow:hover{color:var(--g3)}
.art-lead{font-size:clamp(17px,2.1vw,20px);color:#ded8cd;font-weight:300;line-height:1.55;margin:18px 0 0;max-width:62ch}

/* ---------- firma ---------- */
.hm-firma{display:flex;align-items:center;gap:14px;margin:30px 0 0;padding-top:26px;border-top:1px solid var(--line2)}
.hm-firma-foto{flex:0 0 52px;width:52px;height:52px;border-radius:50%;overflow:hidden;border:1px solid var(--line);display:block}
.hm-firma-foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.hm-firma-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.hm-firma-n{font-weight:700;font-size:15.5px;color:var(--ivory);letter-spacing:.01em}
.hm-firma-n:hover{color:var(--gold)}
.hm-firma-c{font-size:13px;color:var(--gold);letter-spacing:.02em}
.hm-firma-m{font-size:12.5px;color:var(--muted2)}
.hm-firma-m .sep{margin:0 7px;opacity:.5}

/* ---------- portada ---------- */
.art-portada{margin:38px auto 0}
.art-portada img{width:100%;border-radius:var(--r);border:1px solid var(--line2)}
.art-cap{display:block;margin-top:10px;font-size:12.5px;color:var(--muted2)}

/* ---------- cuerpo ---------- */
.hm-art-body{font-size:17.5px;line-height:1.78;color:#ddd7cc;max-width:none}
.hm-art-body p{margin:0 0 1.15em}
.hm-art-body h2{font-family:var(--serif);font-weight:500;font-size:clamp(27px,3.4vw,36px);line-height:1.15;color:var(--ivory);margin:1.9em 0 .5em;letter-spacing:-.01em}
.hm-art-body h3{font-size:20.5px;font-weight:700;color:var(--ivory);margin:1.7em 0 .45em;letter-spacing:.005em}
.hm-art-body h2:first-child,.hm-art-body h3:first-child{margin-top:0}
.hm-art-body a:not(.btn){color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(231,200,120,.42);transition:.2s}
.hm-art-body a:not(.btn):hover{text-decoration-color:var(--gold);color:var(--g3)}
.hm-art-body strong,.hm-art-body b{color:var(--ivory);font-weight:700}
.hm-art-body ul,.hm-art-body ol{padding-left:22px;margin:0 0 1.15em}
.hm-art-body li{margin-bottom:.5em}
.hm-art-body li::marker{color:var(--gold)}
.hm-art-body img{border-radius:var(--r);border:1px solid var(--line2);margin:1.6em 0}
.hm-art-body figure{margin:1.8em 0}
.hm-art-body figcaption{font-size:12.5px;color:var(--muted2);margin-top:9px}
.hm-art-body blockquote{margin:1.8em 0;padding:4px 0 4px 24px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:23px;line-height:1.4;color:var(--ivory);font-style:italic}
.hm-art-body blockquote p:last-child{margin-bottom:0}
.hm-art-body hr{border:0;border-top:1px solid var(--line2);margin:2.4em 0}
.hm-art-body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15.5px}
.hm-art-body th,.hm-art-body td{padding:11px 14px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
.hm-art-body th{color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
/* caja de apunte dentro del texto */
.hm-nota{background:var(--panel);border:1px solid var(--line2);border-left:2px solid var(--gold);
  border-radius:var(--r);padding:20px 24px;margin:1.9em 0;font-size:16.5px;color:#d3cdc2}
.hm-nota p:last-child{margin-bottom:0}
.hm-nota b{color:var(--ivory)}

/* ---------- preguntas frecuentes dentro del articulo ---------- */
.hm-faq{margin:2em 0;border-top:1px solid var(--line2)}
.hm-faq-i{border-bottom:1px solid var(--line2)}
.hm-faq-i summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-weight:700;font-size:17px;color:var(--ivory);line-height:1.4;transition:.2s}
.hm-faq-i summary::-webkit-details-marker{display:none}
.hm-faq-i summary:hover{color:var(--gold)}
.hm-faq-i summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:rotate(45deg);transition:.25s}
.hm-faq-i[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.hm-faq-i>div{padding:0 0 22px;color:#cfc9be;font-size:16.5px;line-height:1.72}
.hm-faq-i>div p:last-child{margin-bottom:0}

/* ---------- tablas que no caben en el movil ---------- */
.hm-tabla{margin:1.6em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line2);border-radius:var(--r)}
.hm-tabla table{margin:0;min-width:420px;border-collapse:collapse}
.hm-tabla th,.hm-tabla td{white-space:normal}
.hm-tabla tr:last-child th,.hm-tabla tr:last-child td{border-bottom:0}

/* ---------- diagramas propios ---------- */
.hm-dg{margin:2.2em 0}
.hm-dg img{width:100%;height:auto;display:block;border:0;border-radius:var(--r);margin:0}
.hm-dg figcaption{margin-top:11px;font-size:12.5px;color:var(--muted2);line-height:1.5}
/* En movil, a 375 px de ancho el texto del diagrama caeria a 6 px: no se lee.
   Se le da carril propio con desplazamiento lateral y se conserva el tamano. */
@media(max-width:720px){
  .hm-dg{margin-left:calc(50% - 50vw + 12px);margin-right:calc(50% - 50vw + 12px);
    overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hm-dg img{min-width:780px}
  .hm-dg figcaption{padding:0 4px}
  .hm-dg::after{content:"Desliza para verlo entero";display:block;padding:8px 4px 0;
    font-size:11.5px;color:var(--gold);letter-spacing:.06em;position:sticky;left:0}
}

/* ---------- el video de Anna dentro del articulo ---------- */
.hm-video{margin:2.2em 0}
.hm-video-box{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line2);background:var(--panel2)}
.hm-video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hm-video figcaption{margin-top:10px;font-size:12.5px;color:var(--muted2)}

/* ---------- llamada a la academia ---------- */
.hm-cta-art{margin:56px 0 0;padding:34px 36px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(140deg,rgba(184,134,47,.1),var(--panel) 55%);
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.hm-cta-art .eyebrow{margin-bottom:10px}
.hm-cta-art h2{font-size:clamp(23px,2.9vw,30px);font-weight:500;margin:0 0 8px;line-height:1.16}
.hm-cta-art p{margin:0;font-size:15.5px;max-width:52ch}
.hm-cta-art>div{flex:1 1 360px}
.hm-cta-art .btn{flex:0 0 auto}

/* ---------- siguiente artículo ---------- */
.hm-sig{display:block;padding:26px 30px;border:1px solid var(--line2);border-radius:var(--r);
  background:var(--panel);transition:.25s;margin-top:46px}
.hm-sig:hover{border-color:var(--line);transform:translateY(-3px)}
.hm-sig-e{display:block;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:9px}
.hm-sig-t{display:block;font-family:var(--serif);font-size:clamp(21px,2.6vw,27px);line-height:1.2;color:var(--ivory)}
.hm-sig-m{display:block;margin-top:9px;font-size:12.5px;color:var(--muted2)}

/* ---------- rejilla de pilares del hub ---------- */
.hm-pilares{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.hm-pilar{display:flex;flex-direction:column;gap:9px;padding:28px 30px;background:var(--panel);
  border:1px solid var(--line2);border-radius:var(--r);transition:.26s}
.hm-pilar:hover{border-color:var(--line);transform:translateY(-3px)}
.hm-pilar-t{font-family:var(--serif);font-size:clamp(22px,2.6vw,27px);line-height:1.18;color:var(--ivory)}
.hm-pilar:hover .hm-pilar-t{color:var(--gold)}
.hm-pilar-x{font-size:15px;color:var(--muted);line-height:1.62}
.hm-pilar-n{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-top:4px}
@media(max-width:820px){.hm-pilares{grid-template-columns:1fr}.hm-pilar{padding:24px 24px}}

/* ---------- listados ---------- */
.hm-rev-cats{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hm-rev-cats a{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border:1px solid var(--line2);
  border-radius:100px;font-size:14px;color:var(--muted);transition:.22s}
.hm-rev-cats a:hover{border-color:var(--gold);color:var(--ivory)}
.hm-rev-cats a span{font-size:11.5px;color:var(--gold);font-variant-numeric:tabular-nums}

.hm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hm-card-l{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--r);overflow:hidden;transition:.28s}
.hm-card-l:hover{border-color:var(--line);transform:translateY(-4px)}
.hm-card-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--panel2)}
.hm-card-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.hm-card-l:hover .hm-card-img img{transform:scale(1.04)}
.hm-card-b{display:flex;flex-direction:column;gap:9px;padding:22px 24px 24px;flex:1}
.hm-card-cat{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600}
.hm-card-t{font-family:var(--serif);font-size:23px;line-height:1.18;color:var(--ivory)}
.hm-card-x{font-size:14.5px;color:var(--muted);line-height:1.6;flex:1}
.hm-card-m{font-size:12px;color:var(--muted2);letter-spacing:.02em}
.hm-card--big{grid-column:span 3}
.hm-card--big .hm-card-l{flex-direction:row}
.hm-card--big .hm-card-img{flex:0 0 52%;aspect-ratio:16/9}
.hm-card--big .hm-card-b{justify-content:center;padding:36px 40px}
.hm-card--big .hm-card-t{font-size:clamp(27px,3.4vw,38px)}
.hm-card--big .hm-card-x{flex:0 0 auto;font-size:16px}

.hm-pag,.pagination,.navigation.pagination{margin-top:52px;display:flex;justify-content:center}
.navigation.pagination .nav-links{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.navigation.pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 13px;
  border:1px solid var(--line2);border-radius:100px;font-size:14.5px;color:var(--muted);transition:.22s}
.navigation.pagination a.page-numbers:hover{border-color:var(--gold);color:var(--ivory)}
.navigation.pagination .page-numbers.current{background:var(--gold-grad);color:#20160a;border-color:transparent;font-weight:700}
.navigation.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- ficha de autora ---------- */
.autora-hd{padding-bottom:20px}
.autora-top{display:grid;grid-template-columns:360px 1fr;gap:56px;align-items:center}
.autora-foto img{width:100%;border-radius:var(--r);border:1px solid var(--line);object-fit:cover;aspect-ratio:4/5}
.autora-hd h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.6vw,64px);margin-bottom:6px}
.autora-cargo{color:var(--gold);font-size:14.5px;letter-spacing:.04em;margin:0 0 18px}
.autora-redes{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.autora-redes a{padding:9px 18px;border:1px solid var(--line2);border-radius:100px;font-size:13.5px;color:var(--muted);transition:.22s}
.autora-redes a:hover{border-color:var(--gold);color:var(--ivory)}

/* ---------- móvil ---------- */
@media(max-width:980px){
  .hm-grid{grid-template-columns:repeat(2,1fr)}
  .hm-card--big{grid-column:span 2}
  .hm-card--big .hm-card-l{flex-direction:column}
  .hm-card--big .hm-card-img{flex:0 0 auto;aspect-ratio:4/3}
  .hm-card--big .hm-card-b{padding:22px 24px 24px}
  .autora-top{grid-template-columns:1fr;gap:30px}
  .autora-foto{max-width:300px}
}
@media(max-width:720px){
  .art-hd{padding:120px 0 20px}
  .hm-art-body{font-size:17px}
  .hm-grid{grid-template-columns:1fr;gap:18px}
  .hm-card--big{grid-column:span 1}
  .hm-cta-art{padding:26px 24px;flex-direction:column;align-items:flex-start}
  .hm-cta-art .btn{width:100%}
  .hm-sig{padding:22px 24px}
  .hm-firma{gap:12px}
}