@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/archivo-800.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-400.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-600.woff2) format('woff2')}

:root{
  --navy:#0A1F47;
  --navy-2:#123C7E;
  --blue:#1E7FD4;
  --cyan:#4BB8E8;
  --paper:#EDF1F7;
  --seal:#C8102E;
  --ink:#16223A;
  --muted:#5A6883;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{width:min(1120px,92vw); margin-inline:auto}
h1,h2,h3,.display{font-family:Archivo,system-ui,sans-serif; line-height:1.02; letter-spacing:-.02em; margin:0}
:focus-visible{outline:3px solid var(--cyan); outline-offset:3px}

/* ---------- buy button ---------- */
.buy{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--seal); color:#fff; text-decoration:none;
  font-family:Archivo; font-weight:800; font-size:1.05rem; letter-spacing:.01em;
  padding:1.05rem 2rem; border:0; cursor:pointer;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
  padding-right:2.6rem;
  transition:background .18s ease;
}
.buy:hover,.buy:focus-visible{background:#a30d26}
.buy small{font-family:"Source Sans 3"; font-weight:400; font-size:.78rem; opacity:.85; letter-spacing:0}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    linear-gradient(118deg, transparent 58%, rgba(75,184,232,.16) 58.2%, rgba(75,184,232,.16) 73%, transparent 73.2%),
    linear-gradient(200deg, rgba(30,127,212,.30) 0 32%, transparent 32.2%),
    linear-gradient(72deg, rgba(10,31,71,.9) 0 44%, transparent 44.2%),
    linear-gradient(145deg,#123C7E 0%,#0A1F47 55%,#071633 100%);
  padding:0 0 clamp(4.2rem,8vw,6.5rem);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
h1{font-size:clamp(2.9rem,7.2vw,5.1rem); font-weight:800; text-transform:uppercase}
h1 .thin{display:block; font-weight:600; font-size:.33em; letter-spacing:.13em; margin-top:1.1rem; color:#9CC8EF; text-transform:uppercase; line-height:1.3}
.lede{font-size:clamp(1.05rem,2vw,1.2rem); color:#C7D7EE; max-width:36ch; margin:1.6rem 0 2.2rem}
.lede strong{color:#fff; font-weight:600}
.hero-meta{display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.2rem; font-size:.92rem; color:#9CB2D2}
.hero-meta b{display:block; font-family:Archivo; font-weight:800; font-size:1.5rem; color:#fff; line-height:1.1}
.hero-art{position:relative}
.hero-art img{filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}

/* ---------- sections ---------- */
section{padding:clamp(4.4rem,9vw,8rem) 0}
.page-head + section{padding-top:clamp(3.2rem,6vw,4.5rem)}
.h2{font-size:clamp(1.9rem,4.2vw,2.9rem); font-weight:800; max-width:20ch}
.sub{color:var(--muted); max-width:58ch; margin-top:1.3rem; font-size:1.05rem}

/* parts of the exam */
.parts{background:var(--paper); position:relative; overflow:hidden}
.part-list a.part{display:block}
.part-list a.part:hover h3{color:var(--blue)}
.parts::before{
  content:""; position:absolute; top:0; right:0; width:38%; height:100%;
  background:linear-gradient(200deg, rgba(30,127,212,.07) 0 60%, transparent 60.2%);
  pointer-events:none;
}
.parts .wrap{position:relative; z-index:1}
.part-list{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.2vw,1.6rem); margin-top:3.4rem;
}
.part{
  position:relative; overflow:hidden; background:#fff;
  padding:2.1rem 2rem 2.2rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
  box-shadow:0 10px 26px rgba(10,31,71,.07);
  transition:transform .2s ease, box-shadow .2s ease;
}
.part:hover{transform:translateY(-4px); box-shadow:0 18px 38px rgba(10,31,71,.13)}
.part::before{
  content:attr(data-n); position:absolute; right:1.1rem; bottom:.2rem;
  font-family:Archivo; font-weight:800; font-size:5.6rem; line-height:.82;
  color:var(--navy); opacity:.07; letter-spacing:-.06em; pointer-events:none;
}
.part::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}
.part .no{
  display:inline-block; font-family:Archivo; font-weight:800;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); background:rgba(30,127,212,.09);
  padding:.32rem .7rem; margin-bottom:1rem;
}
.part h3{font-size:1.42rem; font-weight:800; margin-bottom:.6rem; position:relative}
.part p{margin:0; color:var(--muted); font-size:.98rem; position:relative}

/* interiors */
.inside{background:linear-gradient(#fff 0 18%, var(--paper) 18%)}
.spreads{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.5vw,2rem); margin-top:3.4rem}
figure{margin:0}
figure img{background:#fff; box-shadow:0 14px 30px rgba(10,31,71,.13)}
figcaption{margin-top:.75rem; font-size:.9rem; color:var(--muted)}

/* audience */
.who{background:var(--navy); color:#fff; position:relative; overflow:hidden}
.who::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, transparent 62%, rgba(30,127,212,.22) 62.2%);
}
.who .wrap{position:relative; z-index:1}
.who .h2{color:#fff}
.who-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,3.5vw,3.2rem); margin-top:3.4rem}
.who-grid h3{font-size:1.12rem; font-weight:800; color:var(--cyan); margin-bottom:.5rem}
.who-grid p{margin:0; color:#B9CBE4; font-size:.97rem}
.compare{display:flex; align-items:baseline; gap:.6rem; margin-bottom:.6rem!important; flex-wrap:wrap}
.compare .was{font-family:Archivo; font-weight:800; font-size:1.9rem; color:#fff; text-decoration:line-through; text-decoration-color:var(--seal); text-decoration-thickness:3px}
.compare .arrow{font-size:.85rem; color:#8CA6C6}
.compare .now{font-family:Archivo; font-weight:800; font-size:1.9rem; color:var(--cyan); margin-left:.2rem}

/* publisher */
.pub-grid{display:grid; grid-template-columns:340px 1fr; gap:clamp(2.2rem,5vw,4.5rem); align-items:center}
.pub-grid img{width:100%; border-radius:2px}
.pub-mark{
  background:var(--paper); padding:clamp(2rem,3.5vw,3rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}
.pub-grid p{color:var(--muted)}
.pub-grid p:first-child{font-size:1.15rem; color:var(--ink)}
.pub-grid p + p{margin-top:1rem}
.textlink{display:inline-block; margin-top:1.4rem; font-family:Archivo; font-weight:800; font-size:.92rem; letter-spacing:.02em; color:var(--blue); text-decoration:none; border-bottom:2px solid rgba(30,127,212,.35); padding-bottom:.15rem}
.textlink:hover{border-color:var(--blue)}
.hero-testlink{margin-left:1.2rem; color:#9CC8EF; border-color:rgba(156,200,239,.4)}
.hero-testlink:hover{border-color:#9CC8EF}
@media (max-width:520px){ .hero-testlink{display:block; margin:1rem 0 0} }

/* final cta */
.final{
  background:
    linear-gradient(105deg, transparent 63%, rgba(75,184,232,.14) 63.2%),
    linear-gradient(150deg,#123C7E,#0A1F47);
  color:#fff; text-align:center;
}
.final .h2{margin-inline:auto; max-width:24ch}
.final p{color:#C0D2EA; max-width:46ch; margin:1.2rem auto 2.4rem}
.price{font-family:Archivo; font-weight:800; font-size:1.05rem; color:#9CC8EF; margin-top:1.4rem}

/* ---------- lead magnet ---------- */
.magnet{
  background:
    linear-gradient(110deg, transparent 66%, rgba(75,184,232,.13) 66.2%),
    linear-gradient(150deg,#123C7E,#0A1F47);
  color:#fff; position:relative; overflow:hidden;
}
.magnet-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.magnet .h2{color:#fff}
.magnet .kicker{
  font-family:Archivo; font-weight:800; font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:1rem;
}
.magnet p.intro{color:#C0D2EA; max-width:44ch; margin:1.2rem 0 0}
.magnet ul{list-style:none; padding:0; margin:1.6rem 0 0; color:#C0D2EA; font-size:.98rem}
.magnet ul li{position:relative; padding-left:1.6rem; margin-bottom:.55rem}
.magnet ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:.7rem; height:.7rem;
  background:var(--cyan); clip-path:polygon(0 0,100% 0,100% 100%);
}
.form-card{
  background:#fff; color:var(--ink); padding:clamp(1.6rem,3vw,2.2rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
  box-shadow:0 24px 50px rgba(0,0,0,.3);
}
.form-card h3{font-size:1.25rem; font-weight:800; margin-bottom:.4rem}
.form-card .note{font-size:.92rem; color:var(--muted); margin:0 0 1.4rem}
.field{display:block; margin-bottom:1rem}
.field span{display:block; font-size:.82rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem}
.field input[type=email],.field input[type=text]{
  width:100%; font:inherit; font-size:1rem; padding:.8rem .9rem;
  border:2px solid #C9D5E6; background:#fff; color:var(--ink); border-radius:0;
}
.field input:focus{border-color:var(--blue); outline:none}
.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.86rem; color:var(--muted); margin:0 0 1.4rem}
.consent input{margin-top:.28rem; width:1.05rem; height:1.05rem; accent-color:var(--blue); flex:none}
.consent a{color:var(--blue)}
.form-card button{width:100%; justify-content:center; padding-right:2rem}
.form-card .privacy{font-size:.78rem; color:var(--muted); margin:.9rem 0 0; text-align:center}

/* ---------- blog ---------- */
.page-head{
  background:
    linear-gradient(112deg, transparent 64%, rgba(75,184,232,.12) 64.2%),
    linear-gradient(150deg,#123C7E,#0A1F47);
  color:#fff; padding:0 0 clamp(3.6rem,6vw,5.5rem);
}
.page-head .h2{color:#fff; max-width:24ch}
.page-head .sub{color:#C0D2EA; max-width:62ch}
.crumb{
  font-family:Archivo; font-weight:600; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan); text-decoration:none; display:inline-block; margin-bottom:1.5rem;
}
.post-list{display:grid; gap:0; margin-top:0; border-top:1px solid #C9D5E6}
.post-item{
  display:block; text-decoration:none; padding:1.9rem 0;
  border-bottom:1px solid #C9D5E6; transition:background .15s ease;
}
.post-item:hover{background:var(--paper)}
.post-item .tag{font-family:Archivo; font-weight:800; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue)}
.post-item h3{font-size:1.4rem; font-weight:800; margin:.45rem 0 .5rem}
.post-item p{margin:0; color:var(--muted); font-size:.98rem; max-width:70ch}

article.post{padding:clamp(2.5rem,6vw,4.5rem) 0}
article.post .wrap > *{max-width:74ch; margin-left:auto; margin-right:auto}
article.post .inline-cta{max-width:74ch; margin-left:auto; margin-right:auto}
article.post h2{font-size:clamp(1.4rem,3vw,1.85rem); font-weight:800; margin:2.8rem 0 .9rem}
article.post h3{font-size:1.15rem; font-weight:800; margin:2rem 0 .6rem}
article.post p{margin:0 0 1.1rem}
article.post ul,article.post ol{margin:0 0 1.3rem; padding-left:1.3rem}
article.post ul{list-style:none; padding-left:0}
article.post ul > li{padding-left:1.5rem; position:relative}
article.post ul > li::before{content:"■"; position:absolute; left:.1rem; top:.05em; color:var(--navy); font-size:.65em}
article.post li{margin-bottom:.5rem}
article.post strong{font-weight:600}
.example{
  background:var(--paper); border-left:4px solid var(--blue);
  padding:1.2rem 1.4rem; margin:0 0 1.4rem; font-size:.98rem;
}
.example p{margin:0 0 .5rem}
.example p:last-child{margin:0}
.example .en{font-style:italic}
.example .key{font-family:Archivo; font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:.6rem}
.inline-cta{
  background:var(--navy); color:#fff; padding:1.8rem; margin:2.8rem 0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
.inline-cta p{color:#C0D2EA; margin:0 0 1.2rem; font-size:.98rem}
.inline-cta strong{color:#fff}

.inline-cta.tip-box{
  background:#F5F7FB; border-left:4px solid #1E7FD4; color:#16223A;
  clip-path:none; padding:1.4rem 1.6rem;
}
.inline-cta.tip-box p{color:#3A4A63; margin:0}
.inline-cta.tip-box strong{color:#16223A}
.inline-cta.tip-box.warn{background:#EDF1F7; border-left-color:#5A6883}

/* ---------- tablas de vocabulario (phrasal verbs, collocations) ---------- */
article.post table{
  width:100%; border-collapse:collapse; margin:1.4rem 0 2.2rem;
  box-shadow:0 1px 3px rgba(10,31,71,.08);
}
article.post table th{
  background:var(--navy); color:#fff; font-family:Archivo; font-weight:800;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
  padding:.7rem 1rem; text-align:left;
}
article.post table td{
  padding:.7rem 1rem; border-bottom:1px dotted #C7D1E0; font-size:.96rem;
  vertical-align:top;
}
article.post table tr:nth-child(even) td{background:#F5F7FB}
article.post table tr:last-child td{border-bottom:none}
article.post table td:first-child{font-weight:700; color:var(--navy); white-space:nowrap}
article.post table em{color:#5A6883}

/* ---------- respuesta abierta (Open Cloze / Key Word Transformation) ---------- */
.qo .fill{
  font-family:Archivo,system-ui,sans-serif; font-weight:700; font-size:1rem;
  color:#16223A; background:#fff; border:2px solid var(--cyan);
  border-radius:4px; padding:.3rem .6rem; width:9rem; text-align:center;
  margin:0 .2rem;
}
.qo .fill:focus{outline:2px solid #fff; outline-offset:1px}
.qo .fill.ok{background:#DFF5E6; border-color:#35B06B}
.qo .fill.ko{background:#FBE0E4; border-color:#C8102E}
.qo .check{
  font-family:Archivo,system-ui,sans-serif; font-weight:800; font-size:.82rem;
  letter-spacing:.04em; color:#0A1F47; background:var(--cyan);
  border:none; border-radius:4px; padding:.55rem 1.1rem; cursor:pointer; margin-top:.8rem;
}
.qo .check:hover{opacity:.9}
.qo .check[disabled]{opacity:.5; cursor:default}

.q .orig{
  font-style:italic; color:#C0D2EA; margin:0 0 .5rem; font-size:.98rem;
}
.q .keyword{
  font-family:Archivo,system-ui,sans-serif; font-weight:800; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); margin:0 0 .9rem;
}
.q.kwt .keyword strong{color:#fff; letter-spacing:.02em}
.kwt-fill{width:15rem !important; text-align:left !important}
@media (max-width:520px){ .kwt-fill{width:100% !important; margin:.4rem 0 !important; display:block} }


/* ---------- site nav ---------- */
.sitenav{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:2.2rem 0 0; margin-bottom:clamp(3.4rem,8vw,6.5rem);
  flex-wrap:wrap;
}
.sitenav .brand{
  display:inline-flex; align-items:center; gap:.7rem; text-decoration:none;
  font-family:Archivo; font-weight:800; font-size:1.12rem; letter-spacing:.015em;
  color:#fff; text-transform:uppercase; line-height:1;
}
.sitenav .brand img{width:2.15rem; height:auto; flex:none}
.sitenav ul{display:flex; gap:2rem; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.sitenav a.nl{
  text-decoration:none; color:#C7D7EE; font-size:1.02rem; font-weight:600;
  padding-bottom:.3rem; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.sitenav a.nl:hover{color:#fff}
.sitenav a.nl[aria-current="page"]{color:#fff; border-color:var(--cyan)}

/* ---------- books ---------- */
.book-list{display:grid; gap:clamp(1.2rem,2.5vw,1.8rem)}
.book-row{
  position:relative; overflow:hidden; background:var(--paper);
  display:grid; grid-template-columns:270px minmax(0,1fr); gap:clamp(1.8rem,4vw,3.4rem);
  align-items:center; padding:clamp(1.8rem,3.5vw,2.8rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
}
.book-row::after{
  content:""; position:absolute; left:0; top:0; width:5px; height:100%;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
}
.book-row.soon-row{background:#F5F7FB}
.book-row.soon-row::after{background:#C9D5E6}
.book-row img{filter:drop-shadow(0 18px 32px rgba(10,31,71,.22))}
.book-row h3{font-size:1.6rem; font-weight:800; margin-bottom:.5rem}
.book-row .status{
  display:inline-block; font-family:Archivo; font-weight:800; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; padding:.3rem .7rem; margin-bottom:.9rem;
}
.status.out{background:rgba(30,127,212,.1); color:var(--blue)}
.status.soon{background:rgba(90,104,131,.12); color:var(--muted)}
.book-row p{color:var(--muted); margin:0 0 1.3rem; max-width:60ch}
.book-row .specs{font-size:.88rem; color:var(--muted); margin-top:1rem}

/* ---------- social ---------- */
.social{display:flex; gap:.7rem; flex-wrap:wrap}
.social a{
  display:grid; place-items:center; width:2.4rem; height:2.4rem;
  background:rgba(255,255,255,.07); color:#B9CBE4; text-decoration:none;
  transition:background .15s, color .15s;
  clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);
}
.social a:hover{background:var(--cyan); color:var(--navy)}
.social svg{width:1.05rem; height:1.05rem; fill:currentColor}
footer .foot-top{
  display:grid; grid-template-columns:1.3fr .8fr 1fr; gap:2.5rem;
  padding-bottom:1.8rem; margin-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,.09);
}
footer .foot-top nav{flex-direction:column; gap:.6rem}
footer .foot-col .flogo{width:165px; margin-bottom:1.1rem; opacity:.9}
footer .foot-col h4{
  font-family:Archivo; font-weight:800; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; margin:0 0 .9rem;
}
footer .foot-col p{margin:0 0 1rem; max-width:34ch; color:#7E94B4}
footer .legal{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem}
footer .legal nav{display:flex; gap:1.2rem; flex-wrap:wrap}

/* ---------- sticky + footer ---------- */
.stickybuy{
  position:fixed; left:0; right:0; bottom:0; z-index:20; display:none;
  align-items:center; justify-content:space-between; gap:1rem;
  background:#0A1F47; color:#fff; padding:.75rem 1rem;
  box-shadow:0 -6px 20px rgba(0,0,0,.25);
}
.stickybuy strong{display:block; font-family:Archivo; font-weight:800; font-size:.95rem; line-height:1.2}
.stickybuy span{font-size:.8rem; color:#9CB2D2}
.stickybuy a{
  background:var(--seal); color:#fff; text-decoration:none; white-space:nowrap;
  font-family:Archivo; font-weight:800; font-size:.95rem; padding:.7rem 1.4rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%); padding-right:1.9rem;
}
footer{background:#071633; color:#7E94B4; font-size:.88rem; padding:2.5rem 0}
footer a{color:#B9CBE4; text-decoration:none}
footer nav a:hover{color:#fff}
footer .legal a{color:#7E94B4}
footer .wrap{display:block}
footer nav{display:flex; gap:1.4rem; flex-wrap:wrap}

@media (max-width:820px){
  body{font-size:17px; padding-bottom:4.6rem}
  .stickybuy{display:flex}
  /* el heroe cabia en una pantalla y deja ver la portada */
  section{padding:clamp(3.2rem,9vw,4.6rem) 0}
  .hero{padding-bottom:2.6rem}
  h1{font-size:clamp(2.35rem,10vw,3.2rem)}
  h1 .thin{font-size:.36em; margin-top:.8rem}
  .lede{font-size:1.02rem; margin:1.2rem 0 1.7rem; max-width:40ch}
  .buy{padding:.95rem 1.6rem; padding-right:2.2rem; font-size:1rem}
  .hero-meta{gap:1.2rem; margin-top:1.7rem; font-size:.85rem}
  .hero-meta b{font-size:1.3rem}
  .h2{font-size:clamp(1.65rem,6.5vw,2.2rem)}
  .sub{font-size:1rem; margin-top:1rem}
  .hero-grid{grid-template-columns:1fr; gap:1.8rem}
  .hero-art{max-width:86%; margin-inline:auto}
  .spreads,.who-grid,.pub-grid,.magnet-grid,.part-list{grid-template-columns:1fr}
  .book-row{grid-template-columns:1fr; gap:1.6rem}
  footer .foot-top{grid-template-columns:1fr; gap:2rem}
  .book-row img{max-width:180px}
  .sitenav{gap:1rem; margin-bottom:2.4rem}
  .sitenav ul{gap:1.25rem; justify-content:center; row-gap:.6rem}
  .sitenav a.nl{font-size:.95rem}
  .sitenav .brand{font-size:1rem}
  .sitenav .brand img{width:1.9rem}
  .pub-grid img{max-width:240px; margin-inline:auto}
  .part{padding:1.6rem 1.4rem 1.7rem}
  .part h3{font-size:1.25rem}
  .part-list,.spreads,.who-grid{margin-top:2.2rem}
  .faq summary{font-size:1rem; padding:1.15rem 2.2rem 1.15rem 0}
  .form-card{padding:1.4rem}
  .sitenav{margin-bottom:2rem}
  .part::before{font-size:4.6rem}
  .magnet-grid{gap:2.5rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- accesibilidad ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--cyan); color:var(--navy); padding:.8rem 1.4rem;
  font-family:Archivo; font-weight:800; text-decoration:none;
}
.skip-link:focus{left:.5rem; top:.5rem}
.page-head h1{text-transform:none; font-weight:800}

/* ---------- FAQ ---------- */
.faq{background:var(--paper)}
.faq-list{margin-top:2.6rem; border-top:1px solid #C9D5E6; max-width:80ch}
.faq details{border-bottom:1px solid #C9D5E6}
.faq summary{
  cursor:pointer; list-style:none; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:Archivo; font-weight:800; font-size:1.08rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:.45rem; top:50%; width:.7rem; height:.7rem;
  border-right:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--blue)}
.faq details p{margin:0 0 1.35rem; color:var(--muted); font-size:1rem; max-width:70ch}

/* ---------- migas ---------- */
.breadcrumb{font-size:.86rem; color:#9CB2D2; margin-bottom:1.2rem}
.breadcrumb a{color:#C7D7EE; text-decoration:none}
.breadcrumb a:hover{color:#fff; text-decoration:underline}
.breadcrumb span{margin:0 .45rem; opacity:.5}

/* ---------- meta de articulo ---------- */
.post-meta{font-size:.9rem; color:#9CB2D2; margin-top:1.1rem}
.post-item .meta{font-size:.84rem; color:var(--muted); margin-top:.6rem; display:block}

@media print{
  .sitenav,.stickybuy,footer,.magnet,.final{display:none!important}
  body{font-size:11pt; color:#000; padding:0}
  .hero,.page-head{background:#fff!important; color:#000!important; padding:0}
  h1,.h2{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
}


/* ---------- imagenes y diagramas en articulos ---------- */
figure.diagram{margin:2.4rem 0; max-width:100%}
figure.diagram svg{width:100%; height:auto; display:block}
@media (max-width:820px){
  article.post figure.diagram{
    width:100vw; max-width:100vw;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding:0 12px;
  }
}
figure.diagram figcaption{
  margin-top:.8rem; font-size:.88rem; color:var(--muted); font-style:italic;
}




/* ---------- secciones del blog ---------- */
.secnav{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.6rem}
.secnav a{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:Archivo; font-weight:800; font-size:.86rem; letter-spacing:.02em;
  color:var(--muted); background:var(--paper); padding:.62rem 1.1rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  transition:background .15s, color .15s;
}
.secnav a:hover{background:#DCE5F1; color:var(--ink)}
.secnav a .n{
  font-family:"Source Sans 3"; font-weight:600; font-size:.74rem;
  color:#8FA2BD; background:#fff; padding:.08rem .38rem;
}
.secnav a[aria-current="page"]{background:var(--navy); color:#fff}
.secnav a[aria-current="page"] .n{background:rgba(255,255,255,.16); color:#9CC8EF}

/* ---------- diagnostico de 5 preguntas ---------- */
.quiz{
  background:linear-gradient(150deg,#123C7E,#0A1F47);
  color:#fff; padding:clamp(1.8rem,3.5vw,2.6rem); margin:3rem 0;
  position:relative; overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%);
}
.quiz::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg, transparent 68%, rgba(75,184,232,.12) 68.2%);
}
.quiz > *{position:relative}
.quiz .kicker{
  font-family:Archivo; font-weight:800; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan); margin:0 0 .7rem;
}
.quiz > h2{font-size:clamp(1.4rem,3vw,1.75rem); color:#fff; margin:0 0 .6rem}
.quiz .lead{color:#C0D2EA; font-size:.98rem; margin:0 0 2rem; max-width:52ch}

.q{background:rgba(255,255,255,.055); padding:1.4rem 1.5rem; margin:0 0 .9rem}
.q .num{
  font-family:Archivo; font-weight:800; font-size:.72rem; letter-spacing:.12em;
  color:#7F9DC4; display:block; margin:0 0 .6rem;
}
.q .stem{font-size:1.05rem; color:#fff; margin:0 0 .7rem; line-height:1.5}
.q .stem .gap{color:var(--cyan); letter-spacing:.08em}
.q .base{
  display:inline-block; font-family:Archivo; font-weight:800; font-size:.76rem;
  letter-spacing:.14em; color:var(--navy); background:var(--cyan);
  padding:.26rem .6rem; margin:0 0 1.1rem;
}
.opts{display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; margin:0; padding:0; list-style:none}
.opts button{
  width:100%; font:inherit; font-size:.97rem; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.07); color:#E6EEF9;
  border:1.5px solid rgba(255,255,255,.18); padding:.68rem .9rem; border-radius:0;
  transition:background .14s, border-color .14s, color .14s;
}
.opts button:hover:not([disabled]){background:rgba(75,184,232,.18); border-color:var(--cyan)}
.opts button[disabled]{cursor:default; opacity:.55}
.opts button.ok{
  background:#1E7A46; border-color:#35B06B; color:#fff; font-weight:600; opacity:1;
}
.opts button.ko{
  background:#8E1024; border-color:#C8102E; color:#fff; opacity:1;
}
.opts button .mark{float:right; font-family:Archivo; font-weight:800; font-size:.8rem; opacity:0}
.opts button.ok .mark,.opts button.ko .mark{opacity:1}

.veredicto{
  display:none; margin:1.1rem 0 0; font-family:Archivo; font-weight:800;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
}
.veredicto.bien{display:block; color:#6EE7A0}
.veredicto.mal{display:block; color:#FF9AA8}
.why{
  display:none; margin:.6rem 0 0; padding:.9rem 1.05rem;
  background:rgba(255,255,255,.07); border-left:3px solid var(--cyan);
  font-size:.93rem; color:#C0D2EA; line-height:1.55;
}
.why.show{display:block}
.why b{color:#fff; font-weight:600}
.why em{font-style:italic; color:#E6EEF9}

.score{
  display:none; margin-top:1.6rem; padding:1.6rem 1.5rem;
  background:#fff; color:var(--ink);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.score.show{display:block}
.score .n{
  font-family:Archivo; font-weight:800; font-size:2.6rem; line-height:1;
  display:block; color:var(--navy);
}
.score .msg{margin:.8rem 0 1.4rem; color:var(--muted); font-size:.98rem; max-width:60ch}
.quiz noscript p{color:#C0D2EA; font-size:.93rem}

@media (max-width:820px){
  .opts{grid-template-columns:1fr}
  .q{padding:1.2rem 1.1rem}
  .secnav{gap:.45rem; margin-bottom:2rem}
  .secnav a{font-size:.8rem; padding:.55rem .85rem}
}

/* ---------- test largo de diagnostico ---------- */
.test{
  background:linear-gradient(150deg,#123C7E,#0A1F47); color:#fff;
  padding:clamp(1.8rem,3.5vw,2.8rem); position:relative; overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
}
.test::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg, transparent 70%, rgba(75,184,232,.12) 70.2%);
}
.test > *{position:relative}

.barra{height:5px; background:rgba(255,255,255,.14); margin-bottom:1.5rem}
.barra span{display:block; height:100%; width:0; background:var(--cyan); transition:width .3s ease}
.avance{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:Archivo; font-weight:800; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:#7F9DC4; margin-bottom:1.4rem;
}
.avance .parte{color:var(--cyan)}

.test .stem{font-size:clamp(1.05rem,2.3vw,1.28rem); line-height:1.55; margin:0 0 1rem; color:#fff}
.test .stem .gap{color:var(--cyan); letter-spacing:.08em}
.test .base{
  display:inline-block; font-family:Archivo; font-weight:800; font-size:.78rem;
  letter-spacing:.14em; color:var(--navy); background:var(--cyan);
  padding:.28rem .65rem; margin:0 0 1.3rem;
}
.test .opts{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin:0 0 1.2rem; padding:0; list-style:none}
.test .opts button{
  width:100%; font:inherit; font-size:1rem; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.07); color:#E6EEF9;
  border:1.5px solid rgba(255,255,255,.18); padding:.8rem 1rem; border-radius:0;
  transition:background .14s, border-color .14s;
}
.test .opts button:hover:not([disabled]){background:rgba(75,184,232,.18); border-color:var(--cyan)}
.test .opts button[disabled]{cursor:default; opacity:.5}
.test .opts button.ok{background:#1E7A46; border-color:#35B06B; color:#fff; font-weight:600; opacity:1}
.test .opts button.ko{background:#8E1024; border-color:#C8102E; color:#fff; opacity:1}
.test .opts button .mark{float:right; font-family:Archivo; font-weight:800; opacity:0}
.test .opts button.ok .mark,.test .opts button.ko .mark{opacity:1}

.veredicto{margin:0 0 .8rem; font-family:Archivo; font-weight:800; font-size:.84rem; letter-spacing:.1em; text-transform:uppercase}
.veredicto.bien{color:#6EE7A0}
.veredicto.mal{color:#FF9AA8}
.test .why{
  margin:0 0 1.4rem; padding:.95rem 1.1rem; background:rgba(255,255,255,.07);
  border-left:3px solid var(--cyan); font-size:.95rem; color:#C0D2EA; line-height:1.55;
}
.test .why b{color:#fff; font-weight:600}
.test .why em{font-style:italic; color:#E6EEF9}
.siguiente{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font:inherit; font-family:Archivo; font-weight:800; font-size:.95rem;
  background:var(--cyan); color:var(--navy); border:0; padding:.8rem 1.6rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%); padding-right:2.2rem;
}
.siguiente:hover{background:#6FC9F0}
[hidden]{display:none !important}

/* resultado */
.resultado{background:#fff; color:var(--ink); padding:clamp(1.6rem,3vw,2.4rem)}
.resultado .total{font-family:Archivo; font-weight:800; font-size:3.4rem; line-height:1; color:var(--navy)}
.resultado .total small{font-size:1.1rem; color:var(--muted); font-weight:600; margin-left:.4rem}
.resultado .msg{margin:1rem 0 2rem; color:var(--muted); max-width:62ch}
.desglose{margin:0 0 2rem}
.fila{margin-bottom:1.2rem}
.fila .cab{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.45rem}
.fila .nom{font-family:Archivo; font-weight:800; font-size:.95rem}
.fila .nom span{font-family:"Source Sans 3"; font-weight:400; color:var(--muted); font-size:.85rem; margin-left:.4rem}
.fila .val{font-family:Archivo; font-weight:800; font-size:.95rem; color:var(--navy)}
.fila .track{height:8px; background:var(--paper)}
.fila .track i{display:block; height:100%; background:var(--blue)}
.fila.flojo .track i{background:var(--seal)}
.fila.flojo .val{color:var(--seal)}
.fila .nota{font-size:.86rem; color:var(--muted); margin:.4rem 0 0}

@media (max-width:820px){
  .test .opts{grid-template-columns:1fr}
  .resultado .total{font-size:2.8rem}
}