/* NVOOH · blog · v32 · ajustes de diseño (revisión Lucía, 25/10/2026)
   Se carga DESPUÉS de /assets/nvooh-marca.css en /blog/*.
   Paleta v3: #4D4D4F (base) · #3D3D3F / #595A5C (apoyo) · #ED1C24 · #FFFFFF. */

/* --- Foco visible: blanco 3 px (el rojo sobre #4D4D4F daba 1,9:1) --- */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* --- Botón rojo del nav: 19 px / 900 (regla del sitio) --- */
.site-nav a.nav-cta.cta-button { font-size: 19px !important; font-weight: 900 !important; padding: 12px 22px; letter-spacing: .5px; }

/* --- Chips de categoría: activo blanco + texto gris + barra roja (blanco sobre rojo a 12,8 px daba 4,38:1) --- */
.blog-cats { gap: 10px; margin: 8px 0 44px; }
.blog-cats a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 13px; letter-spacing: .12em;
  background: #3D3D3F; border: 1px solid #595A5C; color: #FFFFFF; }
.blog-cats a:hover { background: #3D3D3F; border-color: #FFFFFF; }
.blog-cats a.on, .blog-cats a[aria-current] { background: #FFFFFF; border-color: #FFFFFF; color: #4D4D4F; box-shadow: inset 4px 0 0 #ED1C24; }

/* --- Cards: mismo sistema que las del home (#3D3D3F, borde #595A5C, radio 4, hover rojo −4 px) --- */
.blog-grid { gap: 30px; }
.post-card { position: relative; background: #3D3D3F; border: 1px solid #595A5C; border-radius: 4px; overflow: hidden;
  transition: border-color .3s ease, transform .3s ease; }
.post-card:hover { border-color: #ED1C24; transform: translateY(-4px); }
.post-card:focus-within { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.post-card a:focus-visible { outline: none; }
.post-card h2 a::after, .post-card h3 a::after { content: ""; position: absolute; inset: 0; }   /* toda la card es clic, un solo link */
.post-card > a { display: block; }
.post-card img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 45%; }   /* sin height:auto mandaba el atributo height */
.post-card .pc-body { padding: 22px 24px 26px; gap: 12px; }
.pc-cat { font-size: 13px; letter-spacing: .14em; line-height: 1.2; padding-left: 10px; }
.post-card h3 { font-size: 1.25rem; line-height: 1.12; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card p { font-size: 1rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-meta { font-size: 14px; color: rgba(255,255,255,.8); padding-top: 4px; }
.post-card.featured { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
.post-card.featured > a { height: 100%; }
.post-card.featured img { height: 100%; min-height: 100%; }
.post-card.featured .pc-body { padding: 32px 34px; justify-content: center; }
.post-card.featured h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.04; letter-spacing: -.01em; }
.soon { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .post-card { transition: none; } .post-card:hover { transform: none; } }

/* --- Títulos y bajadas (manual v3: bajadas en Barlow, nunca en Montserrat) --- */
h1.city-title { font-size: clamp(2.1rem, 4.6vw, 3.75rem); line-height: .98; max-width: 15em; filter: none; }
h1.city-title .h1-sub { font-family: 'Barlow', sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.35; margin-top: 18px; max-width: 30em; }
p.subtitle { font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.45; max-width: 34em; }
.art-meta { font-size: 15px; color: rgba(255,255,255,.85); letter-spacing: .02em; margin: 0 0 28px; }

/* --- Imagen destacada: 16:9, sin borde, chip de lugar sobre placa gris sólida --- */
.corridor-photo { position: relative; margin: 30px 0 44px; }
.corridor-photo img { border: 0; aspect-ratio: 16 / 9; height: auto; object-position: center 45%; }
.foto-chip { position: absolute; left: 16px; bottom: 16px; background: #4D4D4F; color: #FFFFFF; font: 500 13px/1 'Barlow', sans-serif;
  letter-spacing: .14em; text-transform: uppercase; padding: 9px 12px; }

/* --- Lectura larga: 18 px, 1,65, máx. 67 caracteres por línea (medido a 1280: 28em = 504 px → máx. 67, prom. 62) --- */
.art-body p, .art-body li { font-size: 1.125rem; line-height: 1.65; color: rgba(255,255,255,.9); }
.art-body p { max-width: 28em; margin-bottom: 1.1em; }
.art-body h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.1; letter-spacing: -.01em; margin: 2.2em 0 .7em; max-width: 22em; }
.art-body h3 { font-size: 1.2rem; line-height: 1.15; margin: 1.8em 0 .5em; max-width: 26em; }
.art-body ul, .art-body ol { margin: 0 0 1.3em; padding-left: 1.3em; max-width: calc(28em * 1.125); }
.art-body li { max-width: none; margin-bottom: .55em; padding-left: .25em; }
.art-body ul li::marker { color: #ED1C24; }
.art-body ol li::marker { color: #FFFFFF; font-weight: 500; }
.art-body a { border: 0; text-decoration: underline; text-decoration-color: #ED1C24; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.art-body a:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
.tldr { background: #3D3D3F; border-left: 4px solid #ED1C24; max-width: 37.5em; padding: 22px 26px; }
.tldr p { max-width: none; }
.compare { max-width: 42em; font-size: 1rem; }
.compare th { font-size: 13px; letter-spacing: .12em; }
.compare td { line-height: 1.45; }

/* --- Cierre: placa gris de apoyo con barra roja --- */
.cta-final { background: #3D3D3F; border: 1px solid #595A5C; border-top: 6px solid #ED1C24; border-radius: 4px; padding: 40px 36px; }
.cta-button svg { flex: none; }

/* --- WhatsApp: ícono SVG inline (sin Font Awesome) --- */
.whatsapp-float svg { display: block; width: 30px; height: 30px; }

/* --- Menú del header: hamburguesa cuando no entran los links (≤900 px), mismo patrón que el home --- */
.menu-toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; position: relative; z-index: 1100; padding: 0; flex: none; }
.menu-toggle span { display: block; width: 28px; height: 2px; background: #FFFFFF; margin: 6px auto; transition: transform .3s, opacity .3s; }
header.menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
header.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
header.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 900px) {
  .menu-toggle { display: block; }
  header .brand-home { position: relative; z-index: 1100; }
  .site-nav { position: fixed; inset: 0; z-index: 1050; background: #4D4D4F; flex-direction: column; justify-content: center; gap: 28px;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; padding: 90px 24px 40px; }
  header.menu-open .site-nav { opacity: 1; visibility: visible; }
  .site-nav a:not(.nav-cta) { display: inline-block; font-size: 1.5rem; letter-spacing: 1px; padding-bottom: 4px; }
  .site-nav a.nav-cta.cta-button { margin-top: 8px; padding: 16px 28px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .site-nav, .menu-toggle span { transition: none; } }

@media (max-width: 700px) {
  .post-card.featured { display: flex; }
  .post-card.featured img { height: auto; }
  .post-card.featured .pc-body { padding: 22px 24px 26px; }
}
@media (max-width: 600px) {
  .art-body p, .art-body li { font-size: 1.0625rem; line-height: 1.6; }
  .art-body h2 { font-size: 1.3rem; margin-top: 2em; }
  .cta-final { padding: 30px 22px; }
  .blog-cats { flex-wrap: nowrap; overflow-x: auto; }
  /* tabla apilada: cada fila es un bloque, la etiqueta sale del data-label */
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
  .compare tr { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .compare td { border: 0; padding: 4px 0; }
  .compare td:first-child { font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1rem; padding-bottom: 6px; }
  .compare td[data-label]::before { content: attr(data-label); display: block; font: 500 12px/1.3 'Barlow', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }
}

/* --- v33 · epígrafe de foto y glosario --- */
.foto-epigrafe { font: 400 14px/1.4 'Barlow', sans-serif; color: rgba(255,255,255,.8); margin-top: 10px; }
.glosario { max-width: 37.5em; margin: 0 0 1.3em; }
.glosario .term { padding: 14px 0; border-bottom: 1px solid #595A5C; }
.glosario dt { font-weight: 500; font-size: 1.15rem; color: #FFFFFF; margin-bottom: 4px; }
.glosario dt::before { content: ""; display: inline-block; width: 4px; height: .9em; background: #ED1C24; margin-right: 10px; vertical-align: -1px; }
.glosario dd { font-size: 1.125rem; line-height: 1.65; color: rgba(255,255,255,.9); }
.glosario dd a { color: #fff; text-decoration: underline; text-decoration-color: #ED1C24; text-decoration-thickness: 2px; text-underline-offset: .22em; }