/* ============================================================
   MARTINGENIERIA MOTORSPORT — sitios secundarios (legal + blog)
   Sistema de diseño compartido por: aviso-legal, politica-privacidad,
   cookies y blog. El index.html lleva su CSS inline (archivo único),
   pero comparte estos mismos tokens y componentes.
   ============================================================ */
:root{
  --noche:#2D3142; --asfalto:#252938; --carbon:#1B1E29;
  --naranja:#EF8354; --naranja-alto:#F9A57F; --naranja-legible:#B85529;
  --plata:#BFC0C0; --hueso:#FFFBFA; --pizarra:#4F5D75;
  --display:'Saira Condensed','Arial Narrow','Helvetica Neue Condensed',sans-serif;
  --label:'Saira','Barlow',system-ui,'Segoe UI',sans-serif;
  --texto:'Barlow',system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --t-h1:clamp(2rem,5.4vw,3.4rem);
  --t-h2:clamp(1.4rem,3vw,2rem);
  --t-body:clamp(1rem,1.02vw,1.08rem);
  --gutter:clamp(1.25rem,5vw,5rem);
  --max:940px; --radio:3px; --navh:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hueso);color:var(--noche);font-family:var(--texto);font-size:var(--t-body);line-height:1.7;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:var(--naranja-legible);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.wrap--ancho{max-width:1200px}

/* ---------- logo (chip claro para el logo oscuro) ---------- */
.logo-chip{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--hueso);border-radius:var(--radio);padding:5px 8px;line-height:0;box-shadow:0 4px 14px -10px rgba(0,0,0,.7)}
.logo-chip__clip{position:relative;overflow:hidden;width:53px;height:30px;flex:0 0 auto}
.logo-chip__clip img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200%;height:auto;max-width:none}
.logo-chip--pie{padding:8px 12px}
.logo-chip--pie .logo-chip__clip{width:80px;height:45px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:1.4rem;padding:.9rem var(--gutter);background:rgba(27,30,41,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(191,192,192,.14)}
.nav__logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.nav__links{display:flex;gap:1.5rem;margin-left:auto;align-items:center}
.nav__links a{font-family:var(--label);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--plata);text-decoration:none;padding-block:.35rem;position:relative;transition:color .2s ease}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--naranja);transition:width .25s ease}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--hueso);text-decoration:none}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--label);font-weight:600;font-size:.9rem;letter-spacing:.04em;padding:.9rem 1.5rem;border:1px solid transparent;border-radius:var(--radio);text-decoration:none;cursor:pointer;background:none;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{text-decoration:none}
.btn--solido{background:var(--naranja);color:#20232F;border-color:var(--naranja)}
.btn--solido:hover{background:var(--naranja-alto);border-color:var(--naranja-alto)}
.nav__cta{margin-left:.4rem;padding:.6rem 1.1rem;font-size:.76rem}
.nav__burger{display:none;margin-left:auto;background:none;border:1px solid rgba(191,192,192,.35);border-radius:var(--radio);padding:.55rem .7rem;cursor:pointer}
.nav__burger span{display:block;width:20px;height:2px;background:var(--hueso);margin:4px 0;transition:transform .25s ease,opacity .2s ease}
.nav.is-abierta .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.is-abierta .nav__burger span:nth-child(2){opacity:0}
.nav.is-abierta .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- cabecera de documento ---------- */
.doc-hero{background:var(--carbon);color:var(--hueso);padding-block:clamp(3rem,8vw,5rem) clamp(2.4rem,6vw,3.6rem);border-bottom:1px solid rgba(191,192,192,.12)}
.eyebrow{font-family:var(--label);font-style:italic;font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--naranja);margin:0 0 1rem;display:flex;align-items:center;gap:.7rem}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3;max-width:120px}
h1{font-family:var(--display);font-weight:800;font-size:var(--t-h1);line-height:.98;letter-spacing:-.005em;margin:0;text-transform:uppercase;text-wrap:balance}
.doc-hero p{color:var(--plata);max-width:62ch;margin:1rem 0 0}
.banner-legal{margin-top:1.6rem;background:rgba(239,131,84,.14);border:1px solid var(--naranja);border-left:3px solid var(--naranja);border-radius:var(--radio);padding:1rem 1.2rem;color:var(--hueso);font-size:.92rem;max-width:70ch}
.banner-legal strong{color:var(--naranja-alto);font-family:var(--label);letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;display:block;margin-bottom:.3rem}

/* ---------- documento ---------- */
.doc{padding-block:clamp(2.6rem,6vw,4rem) clamp(3rem,7vw,5rem)}
.doc h2{font-family:var(--display);font-weight:800;font-size:var(--t-h2);text-transform:uppercase;line-height:1;margin:2.6rem 0 .9rem;color:var(--noche)}
.doc h2:first-child{margin-top:0}
.doc h3{font-family:var(--label);font-weight:600;font-size:1.02rem;letter-spacing:.02em;margin:1.6rem 0 .5rem;color:var(--noche)}
.doc p,.doc li{color:#3B4256;max-width:72ch}
.doc ul,.doc ol{padding-left:1.3rem;margin:0 0 1.1rem}
.doc li{margin-bottom:.35rem}
.doc .actualizado{font-family:var(--label);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pizarra);margin-bottom:2rem}
.doc table{width:100%;border-collapse:collapse;margin:1rem 0 1.4rem;font-size:.9rem}
.doc th,.doc td{text-align:left;padding:.6rem .7rem;border:1px solid rgba(45,49,66,.16);vertical-align:top}
.doc th{background:#f1eeed;font-family:var(--label);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--noche)}

/* placeholders bien visibles — sustituir por datos reales */
.ph{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:.86em;background:#ffe9de;color:#8f2f12;border:1px dashed #C0491F;border-radius:2px;padding:.05em .35em;white-space:nowrap}
.note{background:#f1eeed;border-left:3px solid var(--naranja-legible);border-radius:var(--radio);padding:.9rem 1.1rem;font-size:.9rem;color:var(--pizarra);max-width:72ch;margin:1.2rem 0}

/* ---------- blog ---------- */
.blog-intro{color:var(--pizarra);max-width:64ch;margin-top:1rem}
.posts{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2.6rem}
.post{border:1px solid rgba(45,49,66,.16);border-radius:var(--radio);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 14px 40px -34px rgba(27,30,41,.6)}
.post:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(27,30,41,.75)}
.post__cover{aspect-ratio:16/9;background:linear-gradient(135deg, rgba(239,131,84,.16), transparent 60%),repeating-linear-gradient(45deg, rgba(45,49,66,.045) 0 12px, transparent 12px 24px),#efeceb;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(45,49,66,.12)}
.post__cover span{font-family:var(--label);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pizarra)}
.post__cuerpo{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;flex:1}
.post__tag{font-family:var(--label);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--naranja-legible);margin-bottom:.5rem}
.post h2,.post h3{font-family:var(--display);font-weight:800;font-size:1.2rem;text-transform:uppercase;line-height:1;margin:0 0 .6rem;color:var(--noche)}
.post p{font-size:.92rem;color:var(--pizarra);margin:0}
.post__estado{margin-top:auto;padding-top:1rem;font-family:var(--label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--plata)}

/* ---------- footer ---------- */
.footer{background:var(--carbon);color:var(--plata);padding-block:clamp(2.6rem,6vw,4rem) 1.6rem;border-top:1px solid rgba(191,192,192,.12)}
.foot__top{display:grid;gap:2rem;grid-template-columns:1.4fr 1fr;margin-bottom:2.4rem}
.foot__lema{color:var(--plata);max-width:42ch;font-size:.92rem;margin-top:1rem}
.foot__h{font-family:var(--label);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hueso);margin:0 0 .9rem}
.foot__lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.foot__lista a{color:var(--plata);text-decoration:none;font-size:.88rem}
.foot__lista a:hover{color:var(--naranja);text-decoration:none}
.foot__bajo{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;align-items:center;border-top:1px solid rgba(191,192,192,.12);padding-top:1.4rem;font-size:.8rem}
.foot__legal{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;padding:0;margin:0}
.foot__legal a{color:var(--plata);text-decoration:none}
.foot__legal a:hover{color:var(--naranja);text-decoration:none}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .nav__burger{display:block}
  .nav__links{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;margin:0;background:rgba(27,30,41,.98);backdrop-filter:blur(14px);padding:.6rem var(--gutter) 1.4rem;border-bottom:1px solid rgba(191,192,192,.16);transform:translateY(-130%);transition:transform .3s ease;max-height:calc(100vh - 64px);overflow:auto}
  .nav.is-abierta .nav__links{transform:translateY(0)}
  .nav__links a{padding:.9rem 0;border-bottom:1px solid rgba(191,192,192,.1);font-size:.9rem}
  .nav__links a::after{display:none}
  .nav__cta{margin:1rem 0 0;justify-content:center}
  .foot__top{grid-template-columns:1fr}
}
@media (max-width:520px){ .logo-chip__clip{width:46px;height:26px} }

/* ---------- tabla del doc: tarjetas apiladas en móvil ---------- */
@media (max-width:560px){
  .doc thead{display:none}
  .doc table,.doc tbody,.doc tr{display:block;width:100%}
  .doc table{border:1px solid rgba(45,49,66,.16);border-radius:var(--radio);overflow:hidden}
  .doc tr{border-bottom:1px solid rgba(45,49,66,.16)}
  .doc tr:last-child{border-bottom:0}
  .doc td{display:block;width:auto;border:0;border-bottom:1px solid rgba(45,49,66,.16)}
  .doc td:last-child{border-bottom:0}
  .doc td::before{content:attr(data-label);display:block;font-family:var(--label);font-weight:600;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--naranja-legible);margin-bottom:.25rem}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ---------- header nuevo estándar (SVG sprite + orden Método·Palmarés·Servicios·Blog·CTA) ----------
   Añadido para blog.html y sus páginas de artículo, que ya no usan el logo-chip/PNG
   sino el sprite <symbol id="logo-glyph"> inline (igual que index.html). Aditivo:
   no se toca nada de lo anterior (logo-chip, .nav__links a secas) para no romper
   aviso-legal / política de privacidad / cookies, que siguen con el header antiguo. */
[hidden]{display:none!important}
.logo{display:block;width:auto;color:var(--hueso);overflow:visible}
.logo--header{height:64px;margin-block:-10px}
.logo--footer{height:72px}
.logo-mark{fill:var(--hueso)}
.nav__logo{transition:opacity .25s ease}
.nav__logo:hover{opacity:.82}
.nav__links--completo{display:none}

@media (max-width:860px){
  .logo--header{height:64px;margin-block:-10px}
  .nav__links--desktop{display:none}
  .nav__links--completo{
    display:flex;position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:rgba(27,30,41,.98);backdrop-filter:blur(14px);padding:.6rem var(--gutter) 1.4rem;
    border-bottom:1px solid rgba(191,192,192,.16);transform:translateY(-130%);transition:transform .3s ease;
    max-height:calc(100vh - 64px);overflow:auto;
  }
  .nav.is-abierta .nav__links--completo{transform:translateY(0)}
  .nav__links--completo a{padding:.9rem 0;border-bottom:1px solid rgba(191,192,192,.1);font-size:.9rem}
  .nav__links--completo a::after{display:none}
  .nav__links--completo .nav__cta{margin:1rem 0 0;justify-content:center}
}
@media (max-width:520px){ .logo--header{height:46px;margin-block:-6px} }

/* ---------- tarjetas de artículo (post real, no placeholder) ---------- */
.post__cover{padding:0}
.post__cover img{width:100%;height:100%;object-fit:cover;display:block}
.post__fecha{font-family:var(--label);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pizarra);margin:0 0 .5rem}
.post__leer{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--label);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--naranja-legible)}
.post__leer .arw{transition:transform .2s ease}
.post:hover .post__leer .arw{transform:translateX(4px)}
a.post__enlace{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
a.post__enlace:hover{text-decoration:none}

/* ---------- artículo individual ---------- */
.articulo__meta{font-family:var(--label);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--plata);margin:.9rem 0 0}
.articulo__portada{margin:2rem 0;border-radius:var(--radio);overflow:hidden;box-shadow:0 20px 50px -30px rgba(27,30,41,.6)}
.articulo__portada img{width:100%;height:auto;display:block}
.articulo__cuerpo figure{margin:1.8rem 0}
.articulo__cuerpo figure img{width:100%;height:auto;border-radius:var(--radio);display:block}
.articulo__cuerpo figcaption{font-family:var(--label);font-size:.74rem;letter-spacing:.04em;color:var(--pizarra);margin-top:.5rem}
.articulo__volver{display:inline-flex;align-items:center;gap:.5rem;margin-top:2.6rem;font-family:var(--label);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--naranja-legible)}

/* ---------- landscape bajo (móvil apaisado, poca altura) ----------
   El cliente reporta que en horizontal (viewport ~915×412 o 740×360) hay
   que hacer mucho scroll para leer una frase: la cabecera pegajosa y la
   escala tipográfica están pensadas para vertical, y los clamp(...,Nvw,...)
   se disparan porque el ANCHO es grande aunque la pantalla sea bajísima.
   Media query por ALTURA (no por anchura), igual estrategia que index.html,
   para no tocar nada de lo que hoy funciona en vertical/desktop. Bloque
   100% aditivo: no se reescribe ninguna regla anterior. */
@media (orientation:landscape) and (max-height:560px){
  /* cabecera compacta: de ~74px a ~42px */
  .nav{padding-block:.35rem;gap:1rem}
  .logo--header{height:34px;margin-block:-2px}
  .nav__links a{font-size:.68rem;padding-block:.2rem}
  .nav__cta{padding:.45rem .85rem;font-size:.68rem}
  .nav__burger{padding:.4rem .55rem}
  .nav__burger span{margin:3px 0}

  /* escala reducida para que quepan varias líneas de texto en pantalla */
  body{font-size:.9rem;line-height:1.5}
  h1{font-size:clamp(1.4rem,4.2vw,1.9rem)}
  .eyebrow{font-size:.64rem;margin-bottom:.5rem}
  .doc-hero{padding-block:1.1rem .9rem}
  .doc-hero p{margin-top:.6rem;font-size:.88rem}
  .banner-legal{margin-top:.9rem;padding:.7rem .85rem;font-size:.82rem}

  .doc{padding-block:1rem 1.3rem}
  .doc .actualizado{margin-bottom:.9rem}
  .doc h2{font-size:clamp(1.05rem,3vw,1.25rem);margin:1.2rem 0 .5rem}
  .doc h3{font-size:.92rem;margin:1.1rem 0 .4rem}
  .doc table{font-size:.82rem;margin:.7rem 0 1rem}
  .doc th,.doc td{padding:.45rem .55rem}

  .blog-intro{margin-top:.6rem;font-size:.88rem}
  .posts{margin-top:1.3rem;gap:1rem}
  .post__cuerpo{padding:.9rem .9rem 1rem}

  /* pie: menos aire vertical */
  .footer{padding-block:1.2rem .8rem}
  .foot__top{gap:1.2rem;margin-bottom:1.2rem}
  .foot__h{margin:0 0 .5rem}
  .foot__lista{gap:.35rem}
  .foot__bajo{padding-top:.9rem}
}

/* menú desplegable del burger (pantallas <=860px de ancho) reajustado a la
   nueva altura de cabecera cuando además es landscape bajo, para que no
   quede un hueco/solape si se abre en 740×360 */
@media (orientation:landscape) and (max-height:560px) and (max-width:860px){
  .nav__links--completo{inset:48px 0 auto 0;max-height:calc(100vh - 48px)}
}

/* --- Artículos de blog: cita, diálogo y frase destacada (añadido 21-sep) --- */
.doc blockquote{margin:1.7rem 0;padding:.9rem 1.3rem;border-left:3px solid var(--naranja-legible);background:#f4f1f0;border-radius:0 var(--radio) var(--radio) 0;font-family:var(--display);font-weight:600;font-style:italic;font-size:1.12rem;line-height:1.35;color:var(--noche);max-width:72ch}
.doc .articulo__dialogo{color:var(--pizarra);font-style:italic;margin:.2rem 0 .9rem}
.doc .articulo__destacado{margin:1.9rem 0;padding:1.1rem 1.3rem;background:var(--carbon);color:var(--hueso);border-radius:var(--radio);max-width:72ch}
.doc .articulo__destacado strong{color:var(--hueso);font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.2}
@media (max-width:520px){
  .doc blockquote{font-size:1rem;padding:.8rem 1rem;margin:1.2rem 0}
  .doc .articulo__destacado{padding:.9rem 1rem;margin:1.3rem 0}
  .doc .articulo__destacado strong{font-size:1.05rem}
}