.rec-portada { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 0; padding-bottom: 0; overflow: hidden; }
.rec-titular { margin-left: -0.04em; }
.rec-bajada { margin-top: clamp(18px, 3vh, 32px); max-width: 30ch; font-size: var(--t-entrada); line-height: 1.3; font-style: italic; color: var(--ceniza); }
.rec-animal { position: relative; justify-self: end; width: min(58vw, 300px); aspect-ratio: 1205 / 643; margin-top: clamp(12px, 3vh, 32px); --radio: clamp(96px, 15vw, 220px); }
.rec-animal__g { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s var(--expo); -webkit-mask-position: right bottom; mask-position: right bottom; }
.rec-animal__g:not([style*="--mascara"]) { background-color: transparent; }
.rec-animal__g--oro { color: var(--oro); }
.rec-animal__g--rojo { color: var(--rojo); top: -34%; }
.rec-animal__g--verde { color: var(--verde); top: -12%; }
html[data-tinta="oro"] .rec-animal__g--oro, html[data-tinta="rojo"] .rec-animal__g--rojo, html[data-tinta="verde"] .rec-animal__g--verde { opacity: var(--o, 1); }
.rec-animal.penumbra > .rec-animal__g { --o: 0.2; }
@media (min-width: 900px) {
  .rec-portada { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--canal); align-items: end; }
  .rec-portada > .lamina { grid-column: 1 / -1; grid-row: 1; }
  .rec-titular { grid-column: 1 / span 8; grid-row: 2; }
  .rec-bajada { grid-column: 1 / span 6; grid-row: 3; max-width: 32ch; margin-bottom: clamp(40px, 7vh, 80px); }
  .rec-animal { grid-column: 9 / span 4; grid-row: 2 / span 2; width: min(100%, 500px); margin-top: 0; }
  .rec-animal__g--rojo { top: -58%; }
  .rec-animal__g--verde { top: -22%; }
}
.cuaderno { --rec-barra: 60px; position: relative; padding-inline: var(--margen); }
.margen { margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); }
html.no-js .margen { display: none; }
.margen__t, .indice { display: none; }
.filtro { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: var(--rec-barra); }
.filtro__b { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-width: 44px; min-height: 44px; padding: 0.1em 13px 0; border: 1px solid var(--humo); border-radius: 999px;
  color: var(--ceniza); white-space: nowrap; line-height: 1; transition: color var(--d-respuesta), border-color var(--d-respuesta), background-color var(--d-respuesta); }
.filtro__n { position: relative; }
.filtro__c { letter-spacing: 0; font-variant-numeric: tabular-nums; }
.filtro__b[aria-pressed="true"] { color: var(--hueso); background: var(--carbon); border-color: var(--tinta); }
.filtro__b[aria-pressed="true"] .filtro__c { color: var(--tinta-texto); }
@media (hover: hover) { .filtro__b:hover { color: var(--hueso); border-color: rgba(234, 223, 196, 0.42); } }
.filtro__b:focus-visible { outline-offset: 2px; }
@media (max-width: 379.98px) { .filtro { gap: 4px; } .filtro__b { padding-inline: 10px; } }
@media (max-width: 699.98px) { .filtro__largo { display: none; } }
@media (min-width: 700px) { .filtro { justify-content: flex-start; gap: clamp(10px, 1.6vw, 18px); } }
@media (min-width: 1200px) {
  .cuaderno { --rec-barra: 0px; display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: clamp(40px, 4.4vw, 88px); }
  .margen { align-self: start; margin: 0; padding: clamp(40px, 6vh, 72px) 0 24px; border: 0; }
  .margen__t { display: flex; align-items: center; gap: 0.8em; margin-bottom: 10px; color: var(--ceniza); }
  .margen__t::before { content: ''; width: 1.25em; height: 1.25em; flex: none; background: var(--tinta); -webkit-mask: url(/img/flor.webp?v=cdd0c378) center / contain no-repeat; mask: url(/img/flor.webp?v=cdd0c378) center / contain no-repeat; }
  .filtro { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 6px; min-height: 0; }
  .filtro__b { justify-content: space-between; width: 100%; min-height: 40px; padding-inline: 16px; }
  .indice { display: block; margin-top: clamp(22px, 4vh, 44px); }
  .indice .margen__t { margin-bottom: 14px; }
  .indice ol { display: grid; }
  .indice a { position: relative; display: flex; align-items: baseline; gap: 14px; min-height: 40px; padding: 8px 0; color: var(--ceniza); transition: color 0.4s var(--expo); }
  .indice a .micro { width: 1.7em; flex: none; font-variant-numeric: tabular-nums; }
  .indice__n { font-size: 1.0625rem; line-height: 1.2; transition: transform 0.6s var(--expo); }
  .indice a[aria-current="true"] { color: var(--hueso); }
  .indice a[aria-current="true"] .micro { color: var(--tinta-texto); }
  .indice a[aria-current="true"] .indice__n { font-style: italic; transform: translateX(6px); }
  .indice a:focus-visible { outline-offset: 2px; }
  @media (hover: hover) { .indice a:hover { color: var(--hueso); } }
}
@media (min-width: 1200px) and (max-height: 719.98px) {
  .margen { padding-top: 28px; }
  .filtro__b { min-height: 32px; }
  .indice a { min-height: 34px; padding: 6px 0; }
}
.laminas { position: relative; min-width: 0; }
.lam { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(22px, 3.6vh, 32px);
  padding-block: clamp(48px, 7vh, 80px) clamp(40px, 6vh, 72px);
  scroll-margin-top: calc(var(--cabecera-alto) + var(--rec-barra) + 8px); }
.lam::before { content: ''; position: absolute; left: 50%; top: 0; width: 60px; aspect-ratio: 360 / 140; transform: translateX(-50%); background: var(--tinta); opacity: 0.6; pointer-events: none;
  -webkit-mask: url(/img/rama.webp?v=291d6d94) center / contain no-repeat; mask: url(/img/rama.webp?v=291d6d94) center / contain no-repeat; }
.lam.es-primera::before, html.no-js .lam:first-child::before { display: none; }
.lam.se-va { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; }
.lam.viaja { z-index: 1; background: var(--noche); }
.lam__cabeza, .lam__cuerpo { min-width: 0; }
.lam__sup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; color: var(--ceniza); }
.lam__sup b { font-weight: 400; color: var(--hueso); }
.lam__nombre { margin-top: clamp(10px, 1.8vh, 18px); margin-left: -0.03em; overflow-wrap: break-word; }
.lam__nombre:focus { outline: none; }
.lam__fig { width: 100%; aspect-ratio: var(--forma, 1); }
.lam__cuerpo { max-width: 31rem; }
.lam__ing li { padding: 6px 0; font-size: var(--t-cuerpo); line-height: 1.3; }
.lam__ing li.con-medida { display: grid; grid-template-columns: 4.9rem minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
.med { display: flex; justify-content: flex-end; align-items: baseline; gap: 0.45em; color: var(--tinta-texto); }
.med .cifra { font-size: 1.25rem; }
.med i { width: 1.9em; font-family: var(--antigua); font-style: normal; font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ceniza); }
.lam__prep { margin-top: 18px; max-width: 36ch; font-size: var(--t-cuerpo); line-height: 1.5; font-style: italic; color: var(--ceniza); }
.lam__acciones { display: grid; gap: 10px; margin-top: clamp(22px, 3.6vh, 32px); }
.lam__acciones .boton { padding: 12px 26px; white-space: normal; text-align: center; line-height: 1.3; }
.lam--01, .lam--02, .lam--06 { --forma: 5 / 4; }
.lam--01 .lam__fig img { object-position: 50% 92%; }
.lam--03, .lam--04, .lam--07, .lam--08 { --forma: 4 / 5; }
.lam--02 .lam__fig img { object-position: 50% 60%; }
.lam--03 .lam__fig img { object-position: 62% 50%; }
.lam--04 .lam__fig img { object-position: 60% 50%; }
.lam--06 .lam__fig img { object-position: 50% 100%; }
.lam--07 .lam__fig img { object-position: 40% 50%; }
.lam--08 .lam__fig img { object-position: 46% 50%; }
@media (max-width: 699.98px) {
  .lam--01 .lam__fig, .lam--03 .lam__fig, .lam--05 .lam__fig, .lam--07 .lam__fig { order: -1; }
  .lam--01 .lam__fig, .lam--05 .lam__fig { width: auto; margin-inline: calc(var(--margen) * -1); }
  .lam--05 { --forma: 5 / 4; }
  .lam--05 .lam__fig img { object-position: 50% 78%; }
  .lam--03 .lam__fig, .lam--07 .lam__fig { width: auto; margin-left: 14%; margin-right: calc(var(--margen) * -1); }
  .lam--04 .lam__fig, .lam--08 .lam__fig { width: auto; margin-right: 14%; margin-left: calc(var(--margen) * -1); }
  .lam.es-primera.lam--01, .lam.es-primera.lam--05 { padding-top: 0; }
}
@media (min-width: 700px) {
  .lam { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: var(--filas, auto auto); column-gap: var(--canal); row-gap: clamp(20px, 3.2vh, 32px); }
  .lam__fig { grid-column: var(--f); grid-row: 1 / span 2; align-self: var(--af, center); max-height: min(82svh, 860px); }
  .lam__cabeza { grid-column: var(--t); grid-row: 1; align-self: end; }
  .lam__cuerpo { grid-column: var(--t); grid-row: 2; align-self: start; }
  .lam__acciones { display: inline-grid; }
  .lam--01 { --f: 1 / span 7;  --t: 8 / span 5;  --filas: auto 1fr; --af: start; }
  .lam--01 .lam__cabeza, .lam--01 .lam__cuerpo { padding-left: var(--canal); }
  .lam--02 { --f: 7 / span 6;  --t: 1 / span 5;  --filas: auto 1fr; --af: start; }
  .lam--03 { --f: 1 / span 5;  --t: 7 / span 5; }
  .lam--04 { --f: 8 / span 5;  --t: 2 / span 6;  --filas: 1fr auto; --af: end; }
  .lam--06 { --f: 1 / span 6;  --t: 8 / span 5;  --filas: auto 1fr; --af: start; }
  .lam--07 { --f: 7 / span 6;  --t: 1 / span 5;  --filas: 1fr auto; --forma: 1; --af: end; }
  .lam--08 { --f: 1 / span 5;  --t: 7 / span 6; }
  .lam--05 { --f: 5 / span 4; --forma: 4 / 5; }
  .lam--05 .lam__fig img { object-position: 36% 50%; }
  .lam--05 .lam__cabeza { grid-column: 1 / span 4; grid-row: 1 / span 2; align-self: start; }
  .lam--05 .lam__cuerpo { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: end; padding-left: var(--canal); }
}
@media (min-width: 700px) and (max-width: 899.98px) {
  .lam--05 { --f: 1 / -1; --forma: 2 / 1; grid-template-rows: auto auto; }
  .lam--05 .lam__fig { grid-row: 1; }
  .lam--05 .lam__fig img { object-position: 50% 80%; }
  .lam--05 .lam__cabeza { grid-column: 1 / span 6; grid-row: 2; }
  .lam--05 .lam__cuerpo { grid-column: 7 / span 6; grid-row: 2; align-self: start; padding-left: 0; }
}
.rec-cierre { padding: clamp(72px, 12vh, 150px) var(--margen) clamp(72px, 12vh, 140px); }
.rec-cierre .lamina { margin-bottom: clamp(20px, 3vh, 36px); }
.rec-cierre__titular { margin-left: -0.03em; }
.rec-cierre__pie { display: grid; gap: clamp(24px, 4vh, 36px); margin-top: clamp(28px, 5vh, 56px); }
.rec-cierre__texto { max-width: 30ch; color: var(--ceniza); }
.rec-cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.rec-cierre__enlace { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 4px; }
