:root{ --negro:#171717; --gris:#252525; --blanco:#ffffff; --rojo:#E8272A; --crema:#F9DFC1; }
.contact-info{ display:flex; flex-direction:column; gap:11px; }
.contact-line{ font-family:'DM Sans',sans-serif; font-size:13px; color:#a3a3a3; text-decoration:none; display:block; transition:color .2s; }
.contact-line:hover{ color:var(--blanco); }
.contact-socials{ display:flex; gap:11px; }
.contact-copy{ font-family:'DM Sans',sans-serif; font-weight:500; font-size:14px; color:#404040; text-align:right; }

/* TOPBAR */
.detail-topbar{ width:100%; height:100px; position:relative; pointer-events:none; }
.volver-link{ position:absolute; left:50%; transform:translateX(-50%); top:40px; font-family:'Unbounded',sans-serif; font-weight:700; font-size:24px; line-height:1; color:#555; text-decoration:none; white-space:nowrap; pointer-events:all; display:flex; align-items:center; gap:10px; transition:color .25s; }
.volver-link svg path{ stroke:#555; transition:stroke .25s; }
.volver-link:hover{ color:var(--blanco); }
.volver-link:hover svg path{ stroke:var(--blanco); }

/* ARTICLE */
.estudio-article{ max-width:720px; margin:0 auto; padding:64px 56px 80px; }
.art-tag{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.08em; color:var(--rojo); text-transform:uppercase; margin-bottom:16px; }
.art-h1{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:48px; line-height:1.05; color:var(--blanco); margin-bottom:32px; }
.art-subtitle{ font-family:'DM Sans',sans-serif; font-size:21px; line-height:1.55; color:#a7a7a7; margin:-14px 0 32px; }
.art-media{ display:block; }
.art-img{ width:100%; border-radius:4px; display:block; margin-bottom:48px; }
.art-body{ font-family:'DM Sans',sans-serif; font-size:18px; line-height:1.85; color:#c8c8c8; display:flex; flex-direction:column; gap:24px; }
.art-body p{ margin:0; }

/* FOOTER ACTIONS */
.art-footer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; row-gap:20px; margin-top:80px; padding-top:32px; border-top:1px solid #2a2a2a; }
.volver-bottom{ display:inline-flex; align-items:center; gap:8px; font-family:'DM Sans',sans-serif; font-weight:500; font-size:15px; color:var(--blanco); text-decoration:none; opacity:0.5; transition:opacity .2s; white-space:nowrap; order:2; }
.volver-bottom:hover{ opacity:1; }
.dl-btn{ display:inline-flex; align-items:center; gap:10px; font-family:'Unbounded',sans-serif; font-weight:700; font-size:14px; color:var(--negro); background:var(--blanco); text-decoration:none; padding:16px 28px; border-radius:100px; transition:background .2s, color .2s; white-space:nowrap; flex-shrink:0; }
.dl-btn:hover{ background:var(--rojo); color:var(--blanco); }

.footer-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; order:1; width:100%; justify-content:flex-end; }
.share-btn{ display:inline-flex; align-items:center; gap:10px; font-family:'Unbounded',sans-serif; font-weight:700; font-size:14px; color:var(--blanco); background:transparent; border:1.5px solid #404040; text-decoration:none; padding:15px 26px; border-radius:100px; cursor:pointer; transition:border-color .2s, background .2s; white-space:nowrap; flex-shrink:0; }
.share-btn:hover{ border-color:var(--blanco); background:rgba(255,255,255,0.06); }

@media (max-width:600px){
  .art-footer{ justify-content:center; }
  .footer-actions{ justify-content:center; }
  .volver-bottom{ width:100%; justify-content:center; }
}

/* SHARE MODAL */
.share-modal-overlay{ position:fixed; inset:0; z-index:9990; display:flex; align-items:center; justify-content:center; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .25s ease; background:rgba(0,0,0,0.55); }
.share-modal-overlay.open{ visibility:visible; opacity:1; pointer-events:auto; }
.share-modal{ background:var(--gris); border-radius:16px; padding:32px; width:100%; max-width:400px; margin:0 20px; transform:translateY(12px) scale(0.98); opacity:0; transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.share-modal-overlay.open .share-modal{ transform:translateY(0) scale(1); opacity:1; }
.share-modal-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.share-modal-title{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:24px; color:var(--blanco); }
.share-modal-close{ background:none; border:none; color:#999; font-size:22px; line-height:1; cursor:pointer; padding:4px; transition:color .2s; }
.share-modal-close:hover{ color:var(--blanco); }
.share-option{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:transparent; border:1px solid #404040; border-radius:10px; padding:16px 18px; margin-bottom:14px; color:var(--blanco); font-family:'DM Sans',sans-serif; font-weight:500; font-size:16px; text-decoration:none; cursor:pointer; transition:border-color .2s, background .2s; }
.share-option:last-child{ margin-bottom:0; }
.share-option:hover{ border-color:var(--blanco); background:rgba(255,255,255,0.05); }
.share-option svg{ flex-shrink:0; }

/* ══════════ MOBILE (≤768px) ══════════ */
@media (max-width:768px){
  .hamburger svg{ width:32px; height:28px; }

  .detail-topbar{ height:96px; }
  .volver-link{ left:20px; transform:none; top:78px; font-size:15px; gap:6px; }
  .volver-link svg{ width:16px; height:11px; }

  .estudio-article{ padding:28px 20px 56px; }
  .art-tag{ font-size:10px; margin-bottom:12px; }
  .art-h1{ font-size:30px; line-height:1.15; margin-bottom:22px; }
  .art-subtitle{ font-size:18px; line-height:1.5; margin:-8px 0 24px; }
  .art-img{ border-radius:6px; margin-bottom:32px; }
  .art-body{ font-size:16px; line-height:1.7; gap:20px; }

  .art-footer{ margin-top:48px; padding-top:24px; }
  .footer-actions{ width:100%; gap:10px; }
  .footer-actions .share-btn,
  .footer-actions .dl-btn{ flex:1 1 auto; justify-content:center; padding:14px 16px; font-size:13px; }
  .volver-bottom{ font-size:14px; }

  .share-modal{ padding:24px; max-width:340px; }
  .share-modal-title{ font-size:20px; }
  .share-option{ padding:14px 16px; font-size:15px; }
}

@media (max-width:400px){
  .art-h1{ font-size:26px; }
  .footer-actions{ flex-direction:column; }
  .footer-actions .share-btn,
  .footer-actions .dl-btn{ width:100%; }
}

/* ── Header/menú móvil — tamaños propios de esta página ── */
@media (max-width:768px){
  #logo-sticky{ top:18px; left:20px; width:56px; }
  .hamburger{ top:22px; right:20px; width:32px; gap:6px; }
  #back-to-top{ bottom:18px; right:18px; width:40px; height:40px; }
}
@media (max-width:480px){
  #logo-sticky{ width:48px; }
}