/* =========================================================
   JUAN JOSÉ AUX — Sistema visual del sitio
   Basado en el Manual de Marca JJA (2026)
   Principales: #000000 · #162372 · #3c51f4 · #e6e6e6
   Acentos:     #b1aaa0 · #b1cd66 · #0b2a22
   Tipografía:  Montserrat (antetítulo) · Jost (≈ Stolzl, títulos y texto) · Bodoni Moda (cifras y citas)
   ========================================================= */

:root{
  --black:#000000; --navy:#162372; --blue:#3c51f4; --light:#e6e6e6;
  --sand:#b1aaa0; --lime:#b1cd66; --forest:#0b2a22;
  --blue-hover:#2f43e0;
  --ink:#05060d;            /* negro con un punto de azul, para tarjetas */
  --card:rgba(22,35,114,.22);
  --line:rgba(230,230,230,.13); --line2:rgba(230,230,230,.26);
  --text:rgba(230,230,230,.86); --text-soft:rgba(230,230,230,.66);
  --display:'Montserrat',system-ui,sans-serif;
  --title:'Jost','Montserrat',system-ui,sans-serif;
  --body:'Jost',system-ui,sans-serif;
  --serif:'Bodoni Moda',Didot,'Bodoni 72',serif;
  --hdr:76px;
  /* alias heredados de las páginas anteriores (estilos en línea) */
  --white:#ffffff; --gold:var(--lime); --muted:var(--sand); --red:var(--blue);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--light);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- utilidades ---------- */
.wrap{max-width:1240px;margin:0 auto;padding-inline:40px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--lime);color:var(--forest);padding:12px 16px;font-family:var(--display);font-weight:600;z-index:200}
.skip:focus{left:8px}
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.09;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.grain>*{position:relative;z-index:1}
.eyebrow{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--sand);margin:0}
.eyebrow.lime{color:var(--lime)} .eyebrow.light{color:var(--light)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lime);display:inline-block;flex-shrink:0}
.num{font-family:var(--title);font-weight:400;line-height:1;font-variant-numeric:lining-nums;letter-spacing:-.01em}

/* ---------- botones ---------- */
.btn,.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s;text-align:center;line-height:1.2}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover);color:#fff}
.btn-ghost,.btn-secondary{background:transparent;border-color:rgba(230,230,230,.45);color:var(--light)}
.btn-ghost:hover,.btn-secondary:hover{border-color:var(--lime);color:#fff}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(0,0,0,.82);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:32px;height:var(--hdr)}
.hdr-logo{display:flex;align-items:center;gap:16px}
.hdr-logo .hdr-aux{height:24px;width:auto}
.hdr-sep{width:1px;height:30px;background:var(--line2)}
.hdr-name{display:flex;flex-direction:column;gap:4px;font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#fff;line-height:1.2;white-space:nowrap}
.hdr-name small{font-size:9px;font-weight:500;letter-spacing:.32em;color:var(--sand)}
.hdr-jja{display:none}
.hdr-jja img{height:26px;width:auto}
.nav{display:flex;gap:30px;font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.nav a{padding:14px 0;border-bottom:1px solid transparent;color:var(--light);transition:border-color .2s,color .2s}
.nav a:hover,.nav a[aria-current="true"]{border-bottom-color:var(--lime);color:#fff}
.hdr .btn{min-height:44px;padding:0 20px;font-size:11px}
.mnav{display:none;position:relative}
/* backdrop-filter crea un bloque contenedor para hijos fixed: se desactiva con el menú abierto */
.hdr.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:#000}
.mnav summary{list-style:none;width:44px;height:44px;border:1px solid var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block;width:18px;height:1.5px;background:var(--light);transition:transform .2s,opacity .2s}
.mnav summary span:last-child{width:12px;margin-left:6px;background:var(--lime)}
.mnav[open] summary span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mnav[open] summary span:nth-child(2){opacity:0}
.mnav[open] summary span:nth-child(3){width:18px;margin-left:0;transform:translateY(-6.5px) rotate(-45deg)}
.mnav-panel{position:fixed;left:0;right:0;top:64px;bottom:0;overflow-y:auto;background:#000;padding:8px 20px 28px;display:flex;flex-direction:column}
.mnav-panel a{min-height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-family:var(--title);font-size:20px;font-weight:500;color:#fff}
.mnav-panel a.btn{margin-top:24px;border-bottom:0;font-family:var(--display);font-size:12px;min-height:56px;justify-content:center}
.mnav-panel .mnav-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--sand)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding:80px 0 40px;background:radial-gradient(ellipse 50% 70% at 100% 100%,rgba(22,35,114,.55) 0%,rgba(0,0,0,0) 70%),#000}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr);gap:48px;margin-bottom:64px}
.ftr-brand{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.ftr-brand img{width:150px;height:auto}
.ftr-brand p{margin:0;font-size:15px;line-height:1.6;color:var(--text-soft);max-width:340px}
.ftr nav{display:flex;flex-direction:column;gap:12px;font-size:15px}
.ftr nav a{color:var(--text);transition:color .2s}
.ftr nav a:hover{color:var(--lime)}
.ftr-k{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);padding-bottom:8px}
.ftr-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);font-family:var(--display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand)}
.ftr-bottom a:hover{color:var(--lime)}
.ftr-bottom img{height:16px;width:auto}

/* ---------- barra móvil ---------- */
.mbar{display:none}

/* =========================================================
   PÁGINAS INTERNAS (columnas, servicios, actualidad, perfil)
   ========================================================= */
.wire-strip{background:var(--navy);color:var(--light);text-align:center;padding:9px 16px;font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.article-hero{position:relative;overflow:hidden;padding:88px 0 64px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse 65% 95% at 0% 0%,rgba(60,81,244,.9) 0%,rgba(22,35,114,.5) 40%,rgba(0,0,0,0) 72%),radial-gradient(ellipse 50% 70% at 100% 100%,rgba(22,35,114,.7) 0%,rgba(0,0,0,0) 65%),#000;isolation:isolate}
.article-hero::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.09;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.article-hero-inner{max-width:880px;margin:0 auto;padding:0 40px;position:relative;z-index:1}
.article-hero-inner.has-photo{max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:center}
.breadcrumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:36px;font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(230,230,230,.6)}
.breadcrumb a{color:rgba(230,230,230,.6);transition:color .2s}
.breadcrumb a:hover{color:var(--lime)}
.breadcrumb>span{color:rgba(230,230,230,.35)}
.breadcrumb>span[style]{color:var(--light)!important}
.article-category{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--lime)}
.article-category::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex-shrink:0}
.article-title{margin:0 0 24px;font-family:var(--title);font-weight:500;font-size:clamp(34px,4.6vw,60px);line-height:1.06;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.article-dek,.hero-lead{margin:0 0 32px;max-width:700px;font-family:var(--body);font-weight:400;font-size:clamp(19px,1.7vw,22px);line-height:1.55;color:rgba(230,230,230,.9)}
.service-cta-row{display:flex;gap:14px;flex-wrap:wrap}
.article-meta{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line2)}
.meta-author{display:flex;align-items:center;gap:10px}
.meta-author-name{font-family:var(--display);font-size:13px;font-weight:600;color:#fff}
.meta-author-title{font-size:14px;color:var(--sand)}
.meta-sep{color:var(--line2);font-size:18px}
.meta-date{font-size:14px;color:var(--sand)}
.meta-read{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);background:var(--lime);padding:6px 10px}
.meta-updated{font-size:13px;color:var(--sand);font-style:italic}

/* foto en hero (servicios) y foto bajo hero (actualidad) */
.article-hero .hero-photo-wrap{margin-top:48px}
.hero-photo-wrap{position:relative;border:1px solid var(--line);background:var(--ink)}
body>.hero-photo-wrap{max-width:1080px;margin:56px auto 0;padding:0}
.hero-photo{width:100%;height:auto;max-height:480px;object-fit:cover;object-position:center 22%}
.hero-photo-caption,.hero-caption{margin:0;font-family:var(--display);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);padding:14px 18px;border-top:1px solid var(--line)}
.hero-caption{max-width:1080px;margin:0 auto;border-top:0;border-left:2px solid var(--lime);padding:12px 16px}

/* retrato en hero (perfil) */
.article-hero-photo-wrap{position:relative;aspect-ratio:3/4}
.article-hero-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 15%;position:relative;z-index:1}
.article-hero-photo-frame{position:absolute;inset:0;border:1px solid var(--line2);z-index:2;pointer-events:none}
.article-hero-photo-accent{position:absolute;left:-28%;right:-40%;top:62%;height:72px;background:var(--blue);transform:rotate(-28deg);z-index:0}

/* cuerpo de lectura */
.article-body{max-width:760px;margin:0 auto;padding:80px 40px 96px}
.article-body>p:first-child,.intro-lead{font-family:var(--body);font-size:18.5px!important;line-height:1.78!important;color:var(--text)!important;font-weight:400!important}
.article-body p{margin:0 0 1.5em;font-size:18.5px;line-height:1.78;color:var(--text);font-weight:400;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.article-body h2{margin:2.2em 0 .8em;font-family:var(--title);font-weight:500;font-size:clamp(26px,2.6vw,34px);line-height:1.18;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.article-body h3{margin:2.2em 0 .7em;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--lime)}
.article-body h4{margin:1.8em 0 .5em;font-family:var(--title);font-size:20px;font-weight:500;color:#fff}
.article-body strong,.article-body b{font-weight:600;color:#fff}
.article-body em{font-style:italic}
.article-body a:not([class]){color:#fff;text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .2s}
.article-body a:not([class]):hover{text-decoration-color:var(--lime)}
.article-body ul,.article-body ol{margin:0 0 1.8em;padding-left:1.3em;display:flex;flex-direction:column;gap:.6em}
.article-body li{font-size:18px;line-height:1.7;color:var(--text);padding-left:6px}
.article-body ul li::marker{color:var(--lime)}
.article-body ol li::marker{color:var(--blue);font-family:var(--serif);font-weight:600}
.article-body blockquote{margin:2.4em 0;padding:8px 0 8px 32px;border-left:2px solid var(--blue);font-family:var(--body);font-weight:400;font-size:clamp(21px,2vw,24px);line-height:1.5;color:#fff;font-style:italic}
.article-body blockquote cite{display:block;margin-top:16px;font-family:var(--display);font-size:10px;font-style:normal;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--lime)}
.article-body figure{margin:2.4em 0}
.article-body figcaption{font-family:var(--display);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-top:10px}
.article-divider{border:0;border-top:1px solid var(--line2);margin:3em 0}
.qnum{font-family:var(--serif);color:var(--lime);margin-right:8px}
.source-note{font-size:14px!important;color:var(--sand)!important;font-style:italic}

/* pasos numerados */
.steps-list{list-style:none;margin:1.4em 0 2em!important;padding:0!important;display:flex;flex-direction:column;gap:0!important;border-top:1px solid var(--line2)}
.steps-list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:18px 0!important;border-bottom:1px solid var(--line2)}
.step-num{font-family:var(--title);font-size:26px;font-weight:500;color:var(--lime);line-height:1.1}
.step-content{font-size:18px;line-height:1.7;color:var(--text)}
.step-content strong{color:#fff;font-weight:600}

/* metodología (servicios) */
.method-tag{margin:3em 0 1.2em!important;font-family:var(--display);font-size:11px!important;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--sand)!important}
.method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:2em}
.method-card{background:#000;padding:34px 30px;display:flex;flex-direction:column;gap:12px;transition:background .25s}
.method-card:hover{background:#06091f}
.method-num{font-family:var(--title);font-size:24px;font-weight:500;color:var(--blue);line-height:1}
.method-title{font-family:var(--title);font-size:20px;font-weight:500;line-height:1.25;color:#fff}
.method-desc{font-size:16px;line-height:1.6;color:var(--sand)}

/* caso de estudio */
.case-study{margin:1.8em 0 2.6em;padding:40px 36px;background:radial-gradient(ellipse 80% 90% at 0% 100%,rgba(60,81,244,.55) 0%,rgba(22,35,114,.5) 50%,rgba(22,35,114,.35) 100%);border:1px solid var(--line);border-top:2px solid var(--lime)}
.case-tag{margin:0 0 14px!important;font-family:var(--display);font-size:10px!important;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--lime)!important;line-height:1.6!important}
.case-title{margin:0 0 16px!important;font-family:var(--title)!important;font-size:26px!important;font-weight:500;line-height:1.2;color:#fff!important;letter-spacing:-.01em!important;text-transform:none!important}
.case-study p{font-size:17px;color:var(--light)}
.case-stats{display:flex;gap:20px 40px;flex-wrap:wrap;margin-top:12px;padding-top:22px;border-top:1px solid var(--line2)}
.case-stat-num{font-family:var(--title);font-size:30px;font-weight:500;color:#fff;line-height:1}
.case-stat-lbl{margin-top:8px;max-width:220px;font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);line-height:1.5}

/* tabla comparativa */
.table-wrap{overflow-x:auto;margin:1.8em 0 2.4em;border:1px solid var(--line2);-webkit-overflow-scrolling:touch}
.comparison-table,.article-body table{width:100%;border-collapse:collapse;min-width:600px}
.comparison-table th,.article-body th{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--navy);padding:16px 18px;text-align:left}
.comparison-table th:first-child{width:22%}
.comparison-table td,.article-body td{padding:16px 18px;font-size:16px;line-height:1.55;color:var(--text);border-top:1px solid var(--line);vertical-align:top}
.comparison-table tr:nth-child(even) td{background:rgba(22,35,114,.18)}
.comparison-table td:first-child{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.comparison-table tr:last-child td{background:rgba(60,81,244,.22);color:#fff}

/* línea de tiempo y FAQ (perfil) */
.timeline{list-style:none;margin:1.4em 0 2em!important;padding:0!important;display:flex;flex-direction:column;gap:0!important;border-top:2px solid var(--light)}
.timeline li{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:18px 0!important;border-bottom:1px solid var(--line2)}
.timeline li::marker{content:""}
.t-role{font-family:var(--title);font-weight:500;font-size:19px;color:#fff}
.t-org{grid-column:1;font-size:15px;color:var(--sand)}
.t-date{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--serif);font-size:18px;color:var(--light)}
.faq-item{padding:24px 0;border-bottom:1px solid var(--line2)}
.faq-item:first-of-type{border-top:1px solid var(--line2)}
.faq-q{margin:0 0 10px;font-family:var(--title);font-size:21px;font-weight:500;color:#fff}
.faq-a{margin:0;font-size:17px;line-height:1.7;color:var(--text)}

/* galería (perfil) */
.profile-gallery{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:repeat(3,1fr);gap:12px;margin:3em 0;height:580px}
.profile-gallery figure{margin:0;position:relative;overflow:hidden;background:var(--ink);border:1px solid var(--line)}
.profile-gallery figure.g-feature{grid-column:1;grid-row:1 / 4}
.profile-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.profile-gallery figure:hover img{transform:scale(1.04)}
.profile-gallery figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--light)}

/* caja de autor */
.author-box{margin-top:72px;padding:36px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start;background:rgba(22,35,114,.3);border:1px solid var(--line);border-top:2px solid var(--blue)}
.author-box::before{content:"";width:84px;height:84px;border-radius:50%;background:url("/assets/apple-touch-icon.png") center/cover}
.author-box-info h3{margin:0 0 8px!important;font-family:var(--display);font-size:10px!important;font-weight:600;letter-spacing:.3em!important;text-transform:uppercase;color:var(--sand)!important}
.author-box-info h4{margin:0 0 10px!important;font-family:var(--title);font-size:22px!important;font-weight:500;color:#fff}
.author-box-info p{margin:0!important;font-size:16px!important;line-height:1.65!important;color:var(--text)}
.author-box-cta{display:inline-flex;align-items:center;gap:10px;margin-top:20px;min-height:44px;padding:0 20px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:var(--blue);color:#fff!important;text-decoration:none!important;transition:background .2s}
.author-box-cta:hover{background:var(--blue-hover)}
.author-box-cta::after{content:"→"}

/* cierre con llamado */
.final-cta{position:relative;overflow:hidden;isolation:isolate;padding:112px 40px;text-align:center;border-top:1px solid var(--line);background:radial-gradient(ellipse 60% 120% at 50% 120%,rgba(60,81,244,.95) 0%,rgba(22,35,114,.6) 40%,rgba(0,0,0,0) 75%),#000}
.final-cta::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.09;mix-blend-mode:overlay;pointer-events:none;z-index:-1}
.final-cta h2{max-width:820px;margin:0 auto 20px;font-family:var(--title);font-weight:500;font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.final-cta h2 em{font-style:normal;color:var(--lime)}
.final-cta p{max-width:560px;margin:0 auto 34px;font-size:18px;line-height:1.65;color:var(--light)}

/* relacionados */
.related-section{padding:96px 0;border-top:1px solid var(--line);background:#000}
.related-inner{max-width:1080px;margin:0 auto;padding:0 40px}
.related-tag{margin:0 0 32px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--sand)}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.related-card{display:flex;flex-direction:column;gap:12px;padding:36px 32px;background:rgba(22,35,114,.25);border:1px solid var(--line);transition:background .25s,border-color .25s}
.related-card:hover{background:rgba(22,35,114,.5);border-color:var(--line2)}
.r-cat{margin:0;font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--sand)}
.r-title{margin:0;font-family:var(--title);font-size:23px;font-weight:500;line-height:1.22;color:#fff}
.r-excerpt{margin:0;font-size:16px;line-height:1.6;color:var(--text-soft)}
.r-link{margin-top:auto;padding-top:8px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .hdr-sep,.hdr-name{display:none}
  .hdr-logo .hdr-aux{height:26px}
}
@media (max-width:1080px){
  .nav{gap:22px}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-brand{grid-column:1 / -1}
}
@media (max-width:960px){
  :root{--hdr:64px}
  .wrap{padding-inline:20px}
  .nav,.hdr-cta,.hdr-logo{display:none!important}
  .hdr-jja,.mnav{display:flex;align-items:center}
  .ftr{padding:56px 0 120px}
  .ftr-grid{gap:36px;margin-bottom:40px}
  .mbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(0,0,0,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transition:transform .3s}
  .mbar .btn{min-height:48px;padding:0 12px;font-size:11px}
  .mbar.is-hidden{transform:translateY(110%)}

  .article-hero{padding:48px 0 44px}
  .article-hero-inner,.article-body,.related-inner{padding-left:20px;padding-right:20px}
  .article-hero-inner.has-photo{grid-template-columns:minmax(0,1fr);gap:40px}
  .article-hero-photo-wrap{max-width:300px}
  .breadcrumb{margin-bottom:24px}
  .meta-sep{display:none}
  .article-body{padding-top:48px;padding-bottom:64px}
  .article-body>p:first-child,.intro-lead{font-size:19px!important}
  .article-body p,.article-body li,.step-content{font-size:17.5px}
  .method-grid,.related-grid{grid-template-columns:minmax(0,1fr)}
  .case-study{padding:28px 22px}
  .author-box{grid-template-columns:minmax(0,1fr);padding:28px 22px}
  .author-box::before{width:64px;height:64px}
  .final-cta{padding:80px 20px}
  .related-section{padding:64px 0}
  .profile-gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}
  .profile-gallery figure{aspect-ratio:1}
  .profile-gallery figure.g-feature{grid-column:1 / -1;grid-row:auto;aspect-ratio:4/3}
  body>.hero-photo-wrap{margin-top:32px;border-inline:0}
  .hero-caption{margin:0 20px}
  .ftr-bottom{flex-direction:column;align-items:flex-start}
}

@media (max-width:640px){.article-body p{text-align:left}}