/* Jardines Journal · revista. Sólo Inria Sans / Inria Serif. Mismo lenguaje que la Home: marfil, madera, terracota, cristal. */
body.blog { background: var(--marfil); color: var(--tinta); font-size: 17px; overflow-x: clip; }
.caja { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(30px, 4vw, 56px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pend, .aviso-pend { color: var(--verde); font-size: .84rem; }
.kicker { font: 400 .7rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--verde); margin: 0 0 14px; }
.arr { display: inline-block; width: 1.1em; height: 1px; background: currentColor; position: relative; transition: width .25s var(--ease); }
.arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* Botones */
.pildora { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 26px; border-radius: 999px; font: 400 .72rem var(--sans); letter-spacing: .15em; text-transform: uppercase; text-decoration: none; color: var(--madera); border: 1px solid rgba(58,44,37,.28); background: transparent; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.pildora:hover { background: var(--madera); color: var(--marfil); }
.pildora:hover .arr { width: 1.5em; }
.pildora.oscura { background: var(--madera); color: var(--marfil); border-color: var(--madera); }
.pildora.oscura:hover { background: #2A1F1A; }
.pildora[disabled] { opacity: .5; cursor: not-allowed; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 12px; font: 400 .72rem var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--madera); text-decoration: none; border-bottom: 1px solid rgba(58,44,37,.3); padding-bottom: 4px; white-space: nowrap; }
.enlace-flecha:hover { color: var(--terra-txt); border-color: var(--terra-txt); }

.progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; background: transparent; opacity: 0; transition: opacity .3s; }
.progreso.on { opacity: 1; } .progreso i { display: block; height: 100%; width: 0; background: var(--terra); }

/* Portadas y fotos */
.cov { position: relative; overflow: hidden; display: block; background: #2B2724; }
.cov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.g-a { background: radial-gradient(80% 70% at 70% 25%, #d39a7c, transparent 62%), linear-gradient(150deg, #8a6a52, #3A2C25); }
.g-b { background: radial-gradient(70% 70% at 30% 70%, #b4be9f, transparent 62%), linear-gradient(150deg, #6d7a62, #3d4a38); }
.g-c { background: radial-gradient(75% 70% at 60% 30%, #f0dcc2, transparent 62%), linear-gradient(150deg, #bfa88c, #6e5846); }
.g-d { background: radial-gradient(70% 70% at 70% 70%, #e0a27a, transparent 62%), linear-gradient(150deg, #9a4a2c, #3a1a0e); }
.g-e { background: radial-gradient(70% 80% at 30% 30%, #c8cdb8, transparent 62%), linear-gradient(150deg, #8d9684, #4D5847); }
.etq { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.24); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 400 10px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ejemplo, .sello { z-index: 2; padding: 5px 12px; border-radius: 999px; background: var(--madera); color: var(--marfil); font: 400 .62rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cov .ejemplo { position: absolute; bottom: 14px; right: 14px; }

/* Cabecera de la revista */
.cabecera-rev { padding-top: clamp(96px, 11vw, 140px); position: relative; }
.filete { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-block: 1px solid var(--madera); padding: 8px 0; font: 400 .7rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--madera); }
.cabecera-titulo { font: 300 clamp(3.6rem, 15.5vw, 15rem)/.86 var(--serif); letter-spacing: -.035em; text-align: center; margin: clamp(20px, 3vw, 40px) 0 0; color: var(--madera); }
.cabecera-titulo em { font-style: italic; color: var(--terra-txt); font-weight: 300; }
.solo-movil { display: none; }
.cabecera-lema { text-align: center; font: italic 300 clamp(1.1rem, 2vw, 1.6rem)/1.3 var(--serif); color: var(--verde); margin: 18px 0 clamp(26px, 4vw, 44px); }
.cinta { overflow: hidden; border-block: 1px solid rgba(58,44,37,.25); padding: 14px 0; background: var(--beige); }
.cinta-pista { display: flex; gap: 28px; width: max-content; animation: cinta 46s linear infinite; font: 300 clamp(1.1rem, 2vw, 1.7rem) var(--serif); text-transform: uppercase; letter-spacing: .08em; color: var(--madera); white-space: nowrap; }
.cinta-pista i { font-style: normal; color: var(--terra); }
@keyframes cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta-pista { animation: none; } }
@media (max-width: 640px) { .solo-movil { display: inline; } .cabecera-titulo { line-height: .95; } }

/* Portada (historia principal) */
.portada { padding-block: clamp(40px, 6vw, 88px) clamp(30px, 5vw, 70px); }
.portada-in { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.portada-foto { aspect-ratio: 4 / 5; border-radius: 4px; }
.portada-foto:hover img { transform: scale(1.03); }
.etq-linea { display: inline-block; font: 400 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terra-txt); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; margin-bottom: 20px; }
.portada-txt h2 { font: 300 clamp(2.3rem, 5vw, 5rem)/1 var(--serif); letter-spacing: -.02em; margin: 0 0 22px; }
.portada-txt h2 a { color: inherit; text-decoration: none; }
.portada-txt h2 a:hover { color: var(--terra-txt); }
.deck { font: italic 300 clamp(1rem, 1.25vw, 1.12rem)/1.5 var(--serif); color: var(--verde); }
.meta { font-size: .84rem; color: var(--verde); letter-spacing: .02em; }
.portada-txt .meta { margin: 20px 0 28px; }
@media (max-width: 899px) { .portada-in { grid-template-columns: 1fr; } }

/* Secciones y mosaicos irregulares */
.ultimo, .seccion-rev { padding-block: clamp(34px, 5vw, 76px); border-top: 1px solid rgba(58,44,37,.18); }
.cab-sec { display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 44px); }
.cab-sec .num { font: 300 clamp(2.4rem, 5vw, 4.2rem)/.8 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(58,44,37,.35); letter-spacing: -.03em; }
.cab-sec h2 { font: 300 clamp(1.6rem, 2.8vw, 2.4rem)/1.05 var(--serif); letter-spacing: -.015em; }
.cab-sec p { color: var(--verde); margin-top: 8px; max-width: 46ch; }
.cab-sec .enlace-flecha { margin-left: auto; }
.mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 3vw, 44px) clamp(14px, 1.8vw, 28px); align-items: start; }
@media (min-width: 700px) { .mosaico { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .mosaico { grid-template-columns: 1.1fr .9fr 1.2fr .95fr 1.05fr; } .mosaico.mosaico-3 { grid-template-columns: 1.1fr .9fr 1.2fr; } }
.rail { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 44px) clamp(14px, 1.8vw, 28px); align-items: start; }
@media (min-width: 800px) { .rail { grid-template-columns: 1.5fr 1fr 1fr; }
  .rail-n2 { grid-template-columns: 1.4fr 1fr; }
  .rail-n1 { grid-template-columns: 1fr; }
  .rail-n1 .tarj a { grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 80px); }
  .rail-n1 .tarj .foto { --ar: 4 / 3.4; } }

.tarj { --ar: 4 / 5; }
.tarj a { display: grid; gap: 14px; color: inherit; text-decoration: none; }
.tarj .foto { aspect-ratio: var(--ar); border-radius: 4px; }
.tarj:hover .foto img { transform: scale(1.04); }
.tarj h3 { font: 400 clamp(1rem, 1.2vw, 1.15rem)/1.22 var(--serif); letter-spacing: -.01em; }
.tarj a:hover h3 { color: var(--terra-txt); }
.tarj .deck { display: block; font-size: var(--t-body); margin: 8px 0 10px; }
.tarj .txt { display: block; }
.tarj-grande { --ar: 4 / 4.6; } .tarj-grande h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.15; }
.mosaico .tarj:nth-child(5n+1) { --ar: 4 / 5.2; } .mosaico .tarj:nth-child(5n+2) { --ar: 1 / 1; } .mosaico .tarj:nth-child(5n+3) { --ar: 3 / 4.4; }
.mosaico .tarj:nth-child(5n+4) { --ar: 4 / 4.4; } .mosaico .tarj:nth-child(5n+5) { --ar: 4 / 5.6; }
.rail .tarj:nth-child(2) { --ar: 1 / 1.1; } .rail .tarj:nth-child(3) { --ar: 3 / 4; }

/* Pregúntale al especialista */
.preguntas { list-style: none; margin: 0; padding: 0; counter-reset: q; display: grid; gap: 0; background: var(--madera); border-radius: 6px; padding: clamp(10px, 2vw, 24px) clamp(20px, 3vw, 44px); }
.preguntas li { counter-increment: q; border-bottom: 1px solid rgba(255,255,255,.14); }
.preguntas li:last-child { border-bottom: 0; }
.preguntas a { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; padding: clamp(18px, 2.4vw, 30px) 0; color: #F4EDE4; text-decoration: none; }
.preguntas a::before { content: counter(q, decimal-leading-zero); grid-row: span 2; font: 300 1.2rem var(--serif); color: var(--oro); padding-top: .5em; }
.preguntas .q { font: 300 clamp(1.15rem, 1.9vw, 1.6rem)/1.2 var(--serif); letter-spacing: -.01em; }
.preguntas .r { font-size: .84rem; color: #C9B8A2; margin-top: 8px; }
.preguntas a:hover .q { color: var(--oro); }

/* Vacíos */
.vacio { padding-block: clamp(40px, 8vw, 120px); text-align: center; }
.vacio h2 { font: 300 clamp(1.6rem, 2.6vw, 2.2rem) var(--serif); margin-bottom: 10px; }

/* Cabecera de sección */
.cabecera-sec { padding-top: clamp(110px, 12vw, 160px); padding-bottom: clamp(20px, 3vw, 40px); }
.cabecera-sec h1 { font: 300 clamp(2.1rem, 5vw, 4.2rem)/1 var(--serif); letter-spacing: -.02em; }
.cabecera-sec .cabecera-lema { text-align: left; margin-bottom: 0; }
.migas { font-size: .78rem; letter-spacing: .04em; color: var(--verde); margin-bottom: 22px; }
.migas a { color: inherit; }
.volver { margin-top: clamp(36px, 5vw, 70px); }

/* Artículo */
.art-hero { min-height: min(86vh, 860px); display: grid; align-items: end; color: #fff; }
.art-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,20,12,.38) 0%, rgba(36,20,12,.06) 28%, rgba(36,20,12,.78) 100%); }
.art-hero-in { position: relative; z-index: 2; padding-block: 140px clamp(34px, 5vw, 70px); }
.art-hero .migas { color: rgba(255,255,255,.85); }
.art-hero h1 { color: #fff; font: 300 clamp(1.9rem, 4vw, 3.4rem)/1.08 var(--serif); letter-spacing: -.02em; max-width: 22ch; text-wrap: balance; }
.art-hero .deck { color: rgba(255,255,255,.9); max-width: 54ch; margin-top: 22px; }
.firma { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; font-size: .84rem; letter-spacing: .03em; color: rgba(255,255,255,.88); align-items: center; }
.firma b { font-weight: 400; color: #fff; }
.cuerpo-art { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 700px); gap: clamp(30px, 6vw, 96px); justify-content: center; padding-block: clamp(40px, 6vw, 90px); }
.art-indice { position: sticky; top: 110px; align-self: start; }
.art-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: i; }
.art-indice li { counter-increment: i; font: 300 .95rem/1.35 var(--serif); }
.art-indice li::before { content: counter(i, decimal-leading-zero); font: 400 .66rem var(--mono); color: var(--terra-txt); margin-right: 10px; letter-spacing: .06em; }
.art-indice a { color: var(--madera); text-decoration: none; } .art-indice a:hover { color: var(--terra-txt); }
@media (max-width: 999px) { .cuerpo-art { grid-template-columns: minmax(0, 700px); } .art-indice { position: static; } }

.prosa { font: 300 clamp(1rem, 1.2vw, 1.1rem)/1.75 var(--serif); color: #2E2622; }
.prosa > * { margin: 0 0 1.25em; }
.prosa > p:first-of-type::first-letter { float: left; font: 300 4em/.8 var(--serif); padding: .06em .1em 0 0; color: var(--terra-txt); }
.prosa h2 { font: 300 clamp(1.4rem, 2vw, 1.8rem)/1.15 var(--serif); letter-spacing: -.015em; margin: 1.8em 0 .6em; scroll-margin-top: 100px; color: var(--madera); }
.prosa h3 { font: 400 1.15rem/1.25 var(--serif); margin: 1.6em 0 .5em; color: var(--madera); }
.prosa a { color: var(--terra-txt); text-underline-offset: 3px; }
.prosa ul, .prosa ol { padding-left: 1.2em; } .prosa li { margin-bottom: .4em; }
.prosa blockquote { margin: 1.8em 0; padding: 0 0 0 clamp(18px, 3vw, 36px); border-left: 2px solid var(--terra); font: italic 300 clamp(1.2rem, 1.8vw, 1.5rem)/1.3 var(--serif); color: var(--madera); }
.prosa blockquote p { margin: 0; }
.prosa hr { border: 0; border-top: 1px solid rgba(58,44,37,.2); margin: 2.4em 0; }
.prosa img { max-width: 100%; height: auto; border-radius: 4px; }
.cta-inline { margin: 2.4em 0; padding: clamp(22px, 3vw, 36px); background: var(--beige); border-radius: 6px; font-family: var(--sans); }
.cta-inline .cta-t { font: 300 clamp(1.1rem, 1.5vw, 1.3rem)/1.3 var(--serif); margin-bottom: 18px; }
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.art-pie { margin-top: 3em; padding-top: 1.6em; border-top: 1px solid rgba(58,44,37,.2); font: 300 var(--t-body)/1.6 var(--sans); color: var(--verde); display: grid; gap: 14px; }
.art-pie > * { margin: 0; }
.art-pie .revision b { font-weight: 400; color: var(--madera); }
.rel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rel a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--beige); color: var(--madera); text-decoration: none; font-size: .88rem; } .rel a:hover { background: var(--madera); color: var(--marfil); }
.compartir { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.compartir .kicker { margin: 0; }
.compartir a, .compartir button { background: none; border: 0; padding: 0; color: var(--madera); font: 400 .86rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Bandas finales */
.banda-cta { margin-top: clamp(30px, 5vw, 70px); color: #fff; padding-block: clamp(60px, 9vw, 130px); background: radial-gradient(45% 60% at 78% 20%, #F0A25A, transparent 62%), radial-gradient(70% 80% at 90% 50%, #D9703A, transparent 66%), radial-gradient(90% 90% at 8% 100%, #4A1A0C, transparent 70%), linear-gradient(170deg, #8C3A1E, #4A1A0C); }
.banda-cta .kicker { color: rgba(255,255,255,.8); }
.banda-cta h2 { color: #fff; font: 300 clamp(1.7rem, 3.4vw, 2.8rem)/1.08 var(--serif); letter-spacing: -.015em; max-width: 22ch; margin-bottom: 20px; }
.banda-cta p { max-width: 52ch; color: rgba(255,255,255,.9); }
.banda-cta .botones { margin-top: 28px; }
.banda-cta .pildora { color: #fff; border-color: rgba(255,255,255,.5); } .banda-cta .pildora:hover { background: #fff; color: var(--madera); }
.banda-cta .pildora.oscura { background: #fff; color: var(--madera); border-color: #fff; } .banda-cta .pildora.oscura:hover { background: var(--arena); }

/* Entrada suave */
.js .tarj, .js .portada-in { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .tarj.in, .js .portada-in.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .tarj, .js .portada-in { opacity: 1; transform: none; transition: none; } }

/* ---------- Portada de revista (maqueta de periódico): rótulo gigante, tres columnas, tira y lateral ---------- */
body.blog.indice { --fondo: #F1ECE4; background: var(--fondo); }
.mast { padding-top: clamp(92px, 10vw, 128px); }
.mast-t { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: clamp(10px, 2vw, 24px) 0 clamp(8px, 1.5vw, 18px); font: 300 clamp(2rem, 7.2vw, 6.6rem)/.92 var(--serif); letter-spacing: -.03em; text-transform: uppercase; color: var(--madera); white-space: nowrap; }
.mast-t em { font-style: italic; color: var(--terra-txt); text-transform: none; letter-spacing: -.04em; }
.indice-sec { display: flex; flex-wrap: wrap; gap: 6px 26px; border-block: 1px solid rgba(58,44,37,.22); padding: 12px 0; font: 400 .74rem var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.indice-sec a { color: var(--madera); text-decoration: none; } .indice-sec a:hover { color: var(--terra-txt); }
.indice-sec a.principal { font-weight: 600; } .indice-sec .proximo { color: rgba(58,44,37,.45); } .indice-sec .proximo sup { text-transform: none; letter-spacing: 0; }
.indice-sec sup { color: var(--verde); font-size: .8em; margin-left: 2px; }

.tag { display: inline-block; padding: 4px 9px; background: var(--madera); color: var(--marfil); font: 400 .6rem/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; }
a.tag:hover { background: var(--terra-txt); }
.linea { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0; font: 400 .64rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.linea .tag { font-family: var(--sans); }

.frontal { display: grid; grid-template-columns: 1fr 1.9fr 1fr; gap: clamp(20px, 2.6vw, 40px); padding-block: clamp(28px, 3.5vw, 48px) clamp(34px, 4vw, 56px); align-items: start; }
.col { display: grid; gap: clamp(26px, 3vw, 44px); }
.mini { display: grid; gap: 12px; }
.mini a:not(.tag) { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.mini .foto { aspect-ratio: 4 / 3; border-radius: 3px; }
.mini h2 { font: 400 clamp(.95rem, 1.1vw, 1.1rem)/1.25 var(--serif); letter-spacing: -.01em; }
.mini a:hover h2, .feed-i h3 a:hover, .centro h2 a:hover { color: var(--terra-txt); }
.centro { text-align: center; display: grid; gap: 14px; justify-items: center; }
.centro .foto { width: 100%; aspect-ratio: 4 / 3.35; border-radius: 3px; }
.centro h2 { font: 300 clamp(1.4rem, 2.3vw, 2.3rem)/1.12 var(--serif); letter-spacing: -.02em; max-width: 22ch; margin-top: 6px; }
.centro h2 a { color: inherit; text-decoration: none; }
.centro .deck { max-width: 52ch; } .centro .meta { margin: 0; }
.cov:hover img { transform: scale(1.03); }
@media (max-width: 1099px) { .frontal { grid-template-columns: 1fr 1fr; } .centro { grid-column: 1 / -1; order: -1; } }
@media (max-width: 599px) { .frontal { grid-template-columns: 1fr 1fr; gap: 24px 14px; } .col { display: contents; } .mast-t { font-size: 8.4vw; } }

.tira-w { border-block: 1px solid rgba(58,44,37,.18); }
.tira { display: grid; grid-template-columns: repeat(4, 1fr); }
.tira-i { padding: 20px clamp(12px, 1.6vw, 24px); border-left: 1px solid rgba(58,44,37,.14); }
.tira-i:first-child { border-left: 0; padding-left: 0; }
.tira-i a { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: start; color: inherit; text-decoration: none; }
.tira-i .foto { aspect-ratio: 1 / 1.05; border-radius: 3px; }
.tira-i h3 { font: 400 .98rem/1.22 var(--serif); margin-bottom: 8px; } .tira-i a:hover h3 { color: var(--terra-txt); }
.tira-i .txt { display: block; }
@media (max-width: 999px) { .tira { grid-template-columns: 1fr 1fr; } .tira-i:nth-child(odd) { border-left: 0; padding-left: 0; } .tira-i { border-bottom: 1px solid rgba(58,44,37,.14); } }
@media (max-width: 599px) { .tira { grid-template-columns: 1fr; } .tira-i { border-left: 0; padding-left: 0; } }

.cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(30px, 5vw, 80px); padding-block: clamp(36px, 5vw, 70px); align-items: start; }
.feed { display: grid; gap: clamp(36px, 4vw, 56px); }
.feed-i { display: grid; gap: 16px; justify-items: center; text-align: center; padding-bottom: clamp(30px, 4vw, 52px); border-bottom: 1px solid rgba(58,44,37,.16); }
.feed-i:last-child { border-bottom: 0; }
.feed-i .foto { width: 100%; aspect-ratio: 16 / 10; border-radius: 3px; }
.feed-i h3 { font: 400 clamp(1.25rem, 1.7vw, 1.6rem)/1.2 var(--serif); letter-spacing: -.015em; max-width: 26ch; }
.feed-i h3 a { color: inherit; text-decoration: none; }
.feed-i .deck { font-size: var(--t-body); max-width: 56ch; }
.lateral { display: grid; gap: 18px; position: sticky; top: 100px; }
.cuadro { padding: 22px; border: 1px solid rgba(58,44,37,.18); border-radius: 3px; display: grid; gap: 12px; }
.cuadro h2 { font: 400 1.15rem/1.2 var(--serif); }
.quien { text-align: center; justify-items: center; }
.quien .foto { width: 100%; aspect-ratio: 16 / 10; border-radius: 3px; }
.quien .rol { font: 400 .62rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--verde); margin: -4px 0 0; }
.quien .txt { font-size: var(--t-body); color: var(--verde); }
.boton { display: block; width: 100%; padding: 13px 16px; border: 1px solid rgba(58,44,37,.35); border-radius: 3px; text-align: center; text-decoration: none; color: var(--madera); font: 400 .78rem var(--sans); letter-spacing: .04em; background: transparent; cursor: pointer; }
.boton:hover { background: var(--madera); color: var(--marfil); }
.boton.claro { background: #fff; color: var(--madera); border-color: #fff; } .boton.claro:hover { background: var(--arena); color: var(--madera); }
.boton[disabled] { opacity: .55; cursor: not-allowed; }
.cuadro.suscribe { background: var(--madera); border-color: var(--madera); color: #F4EDE4; }
.cuadro.suscribe .kicker { color: #C9B8A2; margin: 0; } .cuadro.suscribe h2 { color: #fff; }
.cuadro.suscribe input { font: 300 1rem var(--sans); min-height: 46px; padding: 0 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; border-radius: 0; }
.cuadro.suscribe input::placeholder { color: rgba(255,255,255,.6); }
.cuadro.suscribe .aviso-pend { color: #C9B8A2; font-size: .76rem; }
.selec { gap: 16px; }
.selec .kicker { margin: 0; }
.sel { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.sel .foto { aspect-ratio: 1; border-radius: 3px; }
.sel b { display: block; font: 400 .95rem/1.25 var(--serif); } .sel small { color: var(--verde); font-size: .74rem; } .sel:hover b { color: var(--terra-txt); }
.cuadro.invita { background: radial-gradient(70% 80% at 80% 20%, #E3A98A, transparent 64%), linear-gradient(160deg, #9A4A2C, #3A1A0E); border: 0; color: #fff; }
.cuadro.invita .kicker { color: rgba(255,255,255,.8); margin: 0; } .cuadro.invita h2 { color: #fff; font-size: 1.35rem; }
@media (max-width: 999px) { .cuerpo { grid-template-columns: 1fr; } .lateral { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }

/* Cabecera con el mismo margen ancho que el resto de la web (escritorio) */
@media (min-width: 900px) { .caja { padding-inline: clamp(64px, 7vw, 128px); } }

/* Cabecera global de la web sobre la revista: fondo claro, por tanto texto oscuro desde el primer píxel */
body.blog:not(:has(.art-hero)) .hdr:not(.solid) { color: var(--madera); }
body.blog:not(:has(.art-hero)) .hdr:not(.solid) .burger { background: rgba(58,44,37,.08); border-color: rgba(58,44,37,.14); }
.cov .etq { margin: 0; }


/* ---------- Línea de diseño de la web (Medicina / Home) ---------- */
body.blog { --banda: #EFE7DA; --pagina: #FAF7F2; background: var(--pagina); }
body.blog.indice { --fondo: var(--pagina); background: var(--pagina); }
/* Texto corrido en Sans, mismo tamaño y color que el body de la Home */
.tarj .deck, .centro .deck, .feed-i .deck, .portada-txt .deck, .cab-sec p, .quien .txt, .banda-cta p { font: 300 var(--t-body)/1.6 var(--sans); color: var(--verde); }
.deck { font-style: normal; }
:where(body.blog) p { font-size: var(--t-body); }
.cabecera-lema, .art-hero .deck { font-family: var(--sans); font-style: normal; }
.prosa { font: 300 var(--t-body)/1.75 var(--sans); color: var(--tinta); }
.prosa blockquote { font-family: var(--serif); }
/* Fotos y tarjetas con las esquinas de la web */
.portada-foto, .tarj .foto, .mini .foto, .centro .foto, .feed-i .foto, .quien .foto, .sel .foto, .tira-i .foto, .prosa img { border-radius: 22px; }
.cuadro { border: 0; border-radius: 26px; background: #fff; padding: clamp(20px, 2vw, 28px); }
.cuadro.suscribe { background: var(--madera); }
.cuadro.invita { border-radius: 26px; }
.cta-inline { border-radius: 26px; background: #fff; }
.preguntas { border-radius: 26px; }
.etq-linea { color: var(--terra-txt); }
.tag { border-radius: 999px; padding: 5px 12px; }
/* Botones en píldora, como el resto */
.boton { border-radius: 999px; padding: 14px 20px; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; }
/* Ritmo: las secciones se separan con bandas de color, no con filetes */
.ultimo, .seccion-rev { border-top: 0; }
.seccion-rev:nth-of-type(even), .ultimo:nth-of-type(even) { background: var(--banda); }
.tira-w { background: var(--banda); border: 0; }
.tira-i { border-color: rgba(58,44,37,.12); }
/* Banda final: marco redondeado como el pie */
.banda-cta { background: none; padding-block: 0; margin-block: clamp(60px, 8vw, 110px) clamp(24px, 3vw, 40px); }
.banda-cta .caja { max-width: none; padding-inline: clamp(17px, 1.2vw, 24px); }
.banda-cta .caja > * { position: relative; }
.banda-cta .caja { background: none; }
.banda-cta::before { content: none; }
.banda-cta .caja { border-radius: 36px; overflow: hidden; margin-inline: clamp(17px, 1.2vw, 24px); padding: clamp(48px, 7vw, 110px) clamp(28px, 7vw, 128px); width: auto;
  background: radial-gradient(45% 60% at 78% 20%, #F0A25A, transparent 62%), radial-gradient(70% 80% at 90% 50%, #D9703A, transparent 66%), radial-gradient(90% 90% at 8% 100%, #4A1A0C, transparent 70%), linear-gradient(170deg, #8C3A1E, #4A1A0C); }
.banda-cta p { color: rgba(255,255,255,.92); } .banda-cta .kicker { color: rgba(255,255,255,.8); }
.cuadro.suscribe, .cuadro.suscribe .kicker { color: #F4EDE4; } .cuadro.suscribe .kicker { color: #C9B8A2; }

/* Móvil: portada y tira en carril horizontal con imán, como los carruseles de la web */
@media (max-width: 899px) {
  .frontal, .tira { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(30px, 4vw, 56px); -webkit-overflow-scrolling: touch; scrollbar-width: none; align-items: flex-start; }
  .frontal::-webkit-scrollbar, .tira::-webkit-scrollbar { display: none; }
  .frontal > *, .tira > *, .col > * { flex: 0 0 66%; max-width: 300px; scroll-snap-align: start; }
  .frontal > .centro { flex-basis: 86%; max-width: 380px; order: -1; grid-column: auto; }
  .frontal .col { display: contents; }
  .frontal::after, .tira::after { content: ""; flex: 0 0 1px; }
  .tira-i, .tira-i:nth-child(odd), .tira-i:first-child { border: 0; padding: 0; }
  .tira-i { flex-basis: 78% !important; max-width: 330px; }
}
@media (prefers-reduced-motion: reduce) { .frontal, .tira { scroll-behavior: auto; } }
@media (max-width: 899px) { .tira { padding-block: 22px; } .frontal { padding-bottom: 30px; } }

/* Móvil: los textos de las tarjetas de portada van dentro de la foto, sobre un degradado */
.centro-txt { display: contents; }
@media (max-width: 899px) {
  .frontal .cov::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(20,12,8,0) 38%, rgba(20,12,8,.78) 100%); }
  .frontal .cov .ejemplo { top: 14px; bottom: auto; right: 14px; }
  .frontal .centro, .frontal .mini { position: relative; display: block; text-align: left; color: #fff; }
  .frontal .centro .foto, .frontal .mini .foto { aspect-ratio: 4 / 5; width: 100%; }
  .frontal .centro-txt { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: 10px; padding: 0 18px 20px; justify-items: start; }
  .frontal .centro-txt .linea { order: 1; color: rgba(255,255,255,.85); }
  .frontal .centro h2 { order: 2; margin: 0; font-size: 1.5rem; max-width: none; }
  .frontal .centro h2 a, .frontal .mini h2 { color: #fff; }
  .frontal .centro .deck, .frontal .centro .meta { display: none; }
  .frontal .tag { background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
  .frontal .mini h2 { position: absolute; left: 16px; right: 16px; bottom: 52px; z-index: 2; font-size: 1.1rem; }
  .frontal .mini .linea { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; color: #fff; }
  .frontal .mini .linea time { display: none; }
}
@media (max-width: 899px) { .frontal { padding-bottom: 6px; } }

/* Móvil: etiqueta arriba a la izquierda y fecha bajo el título */
@media (max-width: 899px) {
  .frontal .linea { display: contents; }
  .frontal .tag { position: absolute; top: 14px; left: 14px; z-index: 3; }
  .frontal .centro-txt { inset: 0; align-content: end; pointer-events: none; }
  .frontal .centro-txt a { pointer-events: auto; }
  .frontal .centro h2 { order: 1; }
  .frontal .centro time { order: 2; font: 400 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); }
  .frontal .mini h2 { bottom: 40px; }
  .frontal .mini time { display: block; position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; font: 400 .64rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); }
}
@media (max-width: 899px) {
  .frontal { align-items: stretch; }
  .frontal .mini .foto { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  .frontal .mini .cov .ejemplo { top: auto; bottom: 14px; right: 14px; }
  .frontal .mini .linea time { display: block; }
}
@media (max-width: 899px) { .frontal .tag { background: rgba(20,12,8,.42); } }

/* Móvil: tira «También en la revista» como carril de tarjetas blancas, con el mismo margen arriba y abajo */
@media (max-width: 899px) {
  .frontal { padding-bottom: 28px; }
  .tira-w { background: var(--banda); }
  .tira { padding-block: 28px; gap: 14px; align-items: stretch; }
  .tira-i { background: #fff; border-radius: 22px; padding: 12px !important; flex-basis: 80% !important; max-width: 340px; }
  .tira-i a { grid-template-columns: 92px 1fr; gap: 14px; align-items: center; height: 100%; }
  .tira-i .foto { aspect-ratio: 1; border-radius: 16px; }
  .tira-i h3 { font-size: 1rem; margin-bottom: 10px; }
  .tira-i .linea { display: grid; gap: 6px; justify-items: start; }
}

/* Móvil: tarjetas de la tira más alargadas y sin banda de fondo */
@media (max-width: 899px) {
  .tira-w { background: none; }
  .tira { padding-block: 0 28px; }
  .tira-i { flex-basis: 90% !important; max-width: 400px; padding: 14px !important; box-shadow: 0 0 0 1px rgba(58,44,37,.08); }
  .tira-i a { grid-template-columns: 112px 1fr; gap: 18px; }
  .tira-i .foto { aspect-ratio: 4 / 5; border-radius: 16px; }
}

/* Móvil: ritmo vertical de la portada, con el mismo aire entre bloques */
@media (max-width: 899px) {
  body.blog.indice { --aire-b: 52px; }
  .frontal { padding-block: 32px var(--aire-b); }
  .tira { padding-bottom: 0; }
  .tira-w { margin-bottom: var(--aire-b); }
  .cuerpo { padding-top: 0; padding-bottom: var(--aire-b); }
  .banda-cta { margin-top: 0; }
  .feed { gap: 52px; }
  .feed-i { padding-bottom: 40px; }
}

/* Móvil: el índice de unidades va en una sola línea con scroll horizontal */
@media (max-width: 899px) {
  .indice-sec { flex-wrap: nowrap; overflow-x: auto; gap: 0 28px; margin-inline: calc(-1 * clamp(30px, 4vw, 56px)); padding-inline: clamp(30px, 4vw, 56px); scroll-snap-type: x proximity; scroll-padding-inline: clamp(30px, 4vw, 56px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .indice-sec::-webkit-scrollbar { display: none; }
  .indice-sec a, .indice-sec .proximo { flex: none; white-space: nowrap; scroll-snap-align: start; }
}

/* Móvil: unidades en burbujas; el sello «Ejemplo» sube bajo la etiqueta de sección */
@media (max-width: 899px) {
  .indice-sec { gap: 0 8px; padding-block: 14px; align-items: center; }
  .indice-sec a, .indice-sec .proximo { padding: 9px 16px; border: 1px solid rgba(58,44,37,.2); border-radius: 999px; background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .68rem; letter-spacing: .1em; }
  .indice-sec a.principal { border-color: rgba(58,44,37,.45); background: #fff; }
  .indice-sec .proximo { color: rgba(58,44,37,.5); }
  .indice-sec sup { margin-left: 4px; }
  .frontal .cov .ejemplo, .frontal .mini .cov .ejemplo { top: 52px; left: 14px; right: auto; bottom: auto; }
}
@media (max-width: 899px) { .frontal .centro .cov .ejemplo { top: 14px; right: 14px; left: auto; bottom: auto; } }

/* Móvil: en las cajas blancas la etiqueta va arriba, sobre el título */
@media (max-width: 899px) {
  .tira-i .txt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .tira-i .linea { display: contents; }
  .tira-i .tag { order: -1; }
  .tira-i h3 { margin: 0; }
}

/* Móvil: cajas blancas más largas (más altas), con la foto en vertical */
@media (max-width: 899px) {
  .tira-i a { grid-template-columns: 124px 1fr; align-items: stretch; }
  .tira-i .foto { aspect-ratio: 3 / 4.5; height: 100%; }
  .tira-i .txt { justify-content: center; }
}
@media (max-width: 899px) { .tira-i { flex-basis: 100% !important; max-width: 460px; } }

/* Zona de toque de «Ver sección» y enlaces similares: al menos 32 px de alto. */
.enlace-flecha { min-height: 32px; }

/* ===== Bloques editoriales dentro del artículo: tablas, destacado, pasos, preguntas, pestañas, selector, servicios y cita ===== */
.bl-ti { font: 400 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--verde); margin: 0 0 12px; }
.prosa .bl-tabla { overflow-x: auto; margin: 1.8em 0; border: 1px solid rgba(58,44,37,.12); border-radius: 18px; background: rgba(255,255,255,.5); -webkit-overflow-scrolling: touch; }
.prosa .bl-tabla:focus-visible { outline: 2px solid var(--terra-txt); outline-offset: 2px; }
.prosa .bl-tabla table { border-collapse: collapse; width: 100%; min-width: 520px; font: 400 .92rem/1.45 var(--sans); }
.prosa .bl-tabla th { text-align: left; font: 500 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--verde); background: var(--beige); padding: 14px 18px; white-space: nowrap; }
.prosa .bl-tabla td { padding: 14px 18px; border-top: 1px solid rgba(58,44,37,.1); vertical-align: top; }
.prosa .bl-tabla tbody tr:hover td { background: rgba(243,238,231,.55); }
.prosa .bl-tabla td:first-child { font-weight: 500; color: var(--madera); }

.prosa .bl-destacado { margin: 2em 0; padding: clamp(20px, 3vw, 30px); border-radius: 22px; background: var(--beige); border-left: 3px solid var(--terra); }
.prosa .bl-destacado > :last-child { margin-bottom: 0; } .prosa .bl-destacado p { margin: 0 0 .8em; }

.prosa .bl-pasos ol { list-style: none; padding: 0; margin: 1.8em 0; counter-reset: paso; position: relative; }
.prosa .bl-pasos li { counter-increment: paso; position: relative; padding: 0 0 1.4em 56px; margin: 0; min-height: 44px; }
.prosa .bl-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -2px; width: 40px; height: 40px; border-radius: 50%; background: var(--madera); color: var(--marfil); display: grid; place-items: center; font: 400 .95rem var(--sans); }
.prosa .bl-pasos li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: 2px; width: 1px; background: rgba(58,44,37,.25); }

.prosa .bl-faq { margin: 2em 0; border-top: 1px solid rgba(58,44,37,.18); }
.prosa .bl-faq-i { border-bottom: 1px solid rgba(58,44,37,.18); }
.prosa .bl-faq-i summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font: 300 1.15rem/1.3 var(--serif); color: var(--madera); position: relative; }
.prosa .bl-faq-i summary::-webkit-details-marker { display: none; }
.prosa .bl-faq-i summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 300 1.6rem/1 var(--sans); color: var(--terra-txt); transition: transform .2s; }
.prosa .bl-faq-i[open] summary::after { content: "–"; }
.prosa .bl-faq-r { padding: 0 0 18px; } .prosa .bl-faq-r > :last-child { margin-bottom: 0; }

.prosa .bl-tabs { margin: 2em 0; }
.prosa .bl-tablist { display: none; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.prosa .bl-tabs[data-ok] .bl-tablist { display: flex; }
.prosa .bl-tablist button, .prosa .bl-opt { font: 400 .78rem var(--sans); letter-spacing: .1em; text-transform: uppercase; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(58,44,37,.28); background: transparent; color: var(--madera); cursor: pointer; transition: background .2s, color .2s; }
.prosa .bl-tablist button[aria-selected="true"], .prosa .bl-opt[aria-pressed="true"] { background: var(--madera); color: var(--marfil); border-color: var(--madera); }
.prosa .bl-tablist button:hover, .prosa .bl-opt:hover { background: rgba(58,44,37,.08); }
.prosa .bl-tablist button[aria-selected="true"]:hover, .prosa .bl-opt[aria-pressed="true"]:hover { background: var(--madera); }
.prosa .bl-panel { padding: clamp(18px, 2.4vw, 26px); border-radius: 22px; background: rgba(255,255,255,.55); border: 1px solid rgba(58,44,37,.1); margin-bottom: 14px; }
.prosa .bl-tabs[data-ok] .bl-panel { margin: 0; } .prosa .bl-tabs[data-ok] .bl-panel[data-oculto] { display: none; } .prosa .bl-tabs[data-ok] .bl-panel-t { display: none; }
.prosa .bl-panel-t { font: 400 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terra-txt); margin: 0 0 8px; }
.prosa .bl-panel > :last-child { margin-bottom: 0; }

.prosa .bl-selector { margin: 2em 0; padding: clamp(20px, 3vw, 30px); border-radius: 22px; background: var(--beige); }
.prosa .bl-opts { display: none; gap: 8px; flex-wrap: wrap; }
.prosa .bl-selector[data-ok] .bl-opts { display: flex; } .prosa .bl-selector[data-ok] .bl-sinjs { display: none; }
.prosa .bl-sinjs { margin: 0; padding-left: 1.1em; } .prosa .bl-sinjs li { font: 400 .95rem/1.5 var(--sans); margin-bottom: .5em; }
.prosa .bl-resultado { margin-top: 16px; } .prosa .bl-res { padding: 16px 18px; border-radius: 16px; background: var(--marfil); border: 1px solid rgba(58,44,37,.12); } .prosa .bl-res > :last-child { margin-bottom: 0; } .prosa .bl-res p { margin: 0 0 .6em; }

.prosa .bl-servicios { margin: 2.2em calc(-1 * clamp(0px, 2vw, 24px)); }
.prosa .bl-servicios-c { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 clamp(0px, 2vw, 24px); }
.prosa .bl-servicios .bl-ti { margin: 0 0 12px; }
.prosa .bl-flechas { display: inline-flex; gap: 8px; margin-bottom: 12px; }
.prosa .bl-flechas[hidden] { display: none; }
.prosa .bl-flechas button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(58,44,37,.28); background: transparent; color: var(--madera); cursor: pointer; font: 300 1rem var(--sans); }
.prosa .bl-flechas button:hover { background: var(--madera); color: var(--marfil); }
.prosa .bl-scroll { overflow-x: auto; scroll-snap-type: x proximity; padding: 4px clamp(0px, 2vw, 24px) 16px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.prosa .bl-scroll ul { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.prosa .bl-serv { flex: 0 0 min(280px, 78%); scroll-snap-align: start; margin: 0; }
.prosa .bl-serv a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; border-radius: 22px; background: rgba(255,255,255,.6); border: 1px solid rgba(58,44,37,.12); text-decoration: none; color: var(--tinta); font-family: var(--sans); transition: border-color .2s, transform .2s; }
.prosa .bl-serv a:hover { border-color: var(--terra); transform: translateY(-2px); }
.prosa .bl-serv-a { font: 400 .66rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--verde); }
.prosa .bl-serv b { font: 400 1.25rem/1.2 var(--serif); color: var(--madera); }
.prosa .bl-serv-d { font-size: .88rem; line-height: 1.5; color: #4a403a; flex: 1; }
.prosa .bl-serv-p { font: 500 .9rem var(--sans); color: var(--terra-txt); }
.prosa .bl-serv-v { font: 400 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--madera); display: inline-flex; gap: 10px; align-items: center; }

.prosa .bl-cita { margin: 2.4em 0; padding: clamp(24px, 4vw, 40px); border-radius: 26px; background: var(--madera); color: var(--marfil); }
.prosa .bl-cita p { margin: 0 0 1em; color: var(--marfil); } .prosa .bl-cita .botones { display: flex; gap: 12px; flex-wrap: wrap; margin: 1.2em 0 0; }
.prosa .bl-cita .pildora { color: var(--marfil); border-color: rgba(250,247,242,.5); } .prosa .bl-cita .pildora.oscura { background: var(--marfil); color: var(--madera); border-color: var(--marfil); }
.prosa .bl-cita .pildora:hover { background: var(--terra); border-color: var(--terra); color: #fff; }
@media (prefers-reduced-motion: reduce) { .prosa .bl-serv a, .prosa .bl-tablist button, .prosa .bl-opt { transition: none; } }

.prosa .bl-hint { font: 400 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--verde); margin: -1.2em 0 1.6em; text-align: right; }
.prosa .bl-hint[hidden] { display: none; }