

:root {
  --rojo: #a33314;
  --rojo-osc: #77301d;
  --hueso: #fbfbf9;
  --gris: #f1f1f0;
  --borde: rgba(115, 103, 102, .25);
  --borde-osc: rgba(255, 255, 255, .2);
  --tinta-5: rgba(120, 49, 29, .5);
  --tinta-8: rgba(120, 49, 29, .8);
  --pardo: #261413;
  --gutter: 16px;
  --cab: 56px;
  --ease: cubic-bezier(.25, .46, .45, .94);
  --entra: cubic-bezier(.636, .103, .237, 1);
  --cajon-in: transform .6s cubic-bezier(.34, .38, 0, 1);
  --cajon-out: transform .45s cubic-bezier(.51, .22, .12, 1);
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: var(--cab); }
body { margin: 0; background: var(--hueso); color: var(--rojo-osc); font-family: var(--sans); font-size: 12px; line-height: 1.25; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body.bloqueado { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.saltar { position: fixed; left: 8px; top: -60px; z-index: 200; background: var(--hueso); color: var(--rojo); padding: 10px 14px; transition: top .2s; }
.saltar:focus { top: 8px; }


.t-titulo { font-size: 20px; line-height: 1.2; letter-spacing: .01em; font-weight: 400; }
.t-corto { font-size: 12px; line-height: 1.1; letter-spacing: .01em; font-weight: 500; }
.t-intro { font-size: 11px; line-height: 1.15; letter-spacing: .03em; font-weight: 400; }
.t-cuerpo { font-size: 11px; line-height: 1.25; font-weight: 400; }
.t-sml-med { font-size: 11px; line-height: 1.1; letter-spacing: .01em; font-weight: 500; }
.t-xs { font-size: 10px; line-height: 1.1; letter-spacing: .01em; font-weight: 300; }
.t-micro { font-size: 10px; line-height: 1.1; letter-spacing: .01em; font-weight: 300; }
@media (min-width: 1024px) {
  .t-titulo { font-size: 24px; }
  .t-corto { font-size: 13px; }
  .t-intro { line-height: 1.1; }
  .t-cuerpo { font-size: 12px; }
}
.mayus { text-transform: uppercase; }
.tenue { opacity: .5; }
.tenue-5 { opacity: .5; }
.tenue-8 { opacity: .8; }
.claro { color: var(--hueso); }
.claro-8 { color: rgba(251, 251, 249, .8); }
.claro-5 { color: rgba(251, 251, 249, .5); }

.enlace { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: currentColor; transition: text-decoration-color .15s cubic-bezier(.4, 0, .2, 1); word-break: break-word; }
.enlace:hover, .enlace:focus-visible { text-decoration-color: transparent; }
.enlace-alt { text-decoration-color: transparent; }
.enlace-alt:hover, .enlace-alt:focus-visible { text-decoration-color: currentColor; }
.enlace-sub { text-decoration: none; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.enlace-sub:hover, .enlace-sub:focus-visible { text-decoration: underline; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem; background: var(--rojo); color: var(--hueso); font-size: 11px; line-height: 1.25; transition: background-color .25s ease, color .25s ease; }
@media (min-width: 1024px) { .btn { font-size: 12px; } }
.btn-gris { background: var(--gris); color: var(--rojo); }
.btn-gris:hover:not(:disabled) { background: #e8e8e6; }
.btn:disabled { opacity: .5; pointer-events: none; }
.flechas { display: flex; gap: 4px; }
.flecha { width: 38px; height: 38px; padding: 0; }

.contenedor { width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.solo-pc { display: none; }
.solo-mov { display: flex; }
@media (min-width: 1024px) { .solo-pc { display: block; } .solo-mov { display: none; } }


.js .js-vista { opacity: 0; transform: translateY(10px); }
.js .js-vista.en-vista { opacity: 1; transform: none; transition: opacity .8s var(--entra) var(--r, 0s), transform .8s var(--entra) var(--r, 0s); }


.cab { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--cab); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; color: var(--hueso); background: transparent; transition: background-color .3s var(--ease), color .3s var(--ease); }
.cab::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: rgba(255, 255, 255, .25); transition: background-color .3s ease; }
.cab.solida, .cab.abierta { background: var(--hueso); color: var(--rojo); }
.cab.solida::after, .cab.abierta::after { background: var(--borde); }
.cab-izq { flex: 1; display: flex; align-items: center; min-width: 0; }
.cab-der { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
.logo { display: flex; align-items: center; color: inherit; }
.logo-txt { font-family: var(--serif); font-weight: 600; font-size: 31px; line-height: 1; letter-spacing: .05em; padding-top: 2px; }
.cab-lema { display: none; flex-direction: column; margin-left: 12px; white-space: pre; }
.cab-nav { display: none; }
.cab-nav ul { display: flex; align-items: center; gap: 32px; }
.cab-nav a { display: block; white-space: nowrap; padding: 16px; margin: -16px; }
.cab-iconos { display: flex; align-items: center; gap: 20px; }
.icono { display: flex; align-items: center; justify-content: center; padding: 8px; margin: -8px; color: inherit; position: relative; }
.icono-sel { }
.sel-n { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font-size: 9px; line-height: 1; font-weight: 500; }
.menu-boton .hb { position: relative; display: block; width: 16px; height: 16px; }
.hb i { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: all .3s cubic-bezier(.4, 0, .2, 1); transform-origin: center; }
.hb i:nth-child(1) { top: 3px; }
.hb i:nth-child(2) { top: 8px; }
.hb i:nth-child(3) { top: 13px; }
.menu-boton[aria-expanded="true"] .hb i:nth-child(1) { top: 8px; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .hb i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-boton[aria-expanded="true"] .hb i:nth-child(3) { top: 8px; transform: rotate(-45deg); }
@media (min-width: 1024px) {
  .cab-lema { display: flex; }
  .cab-nav { display: block; }
  .cab-der { justify-content: space-between; gap: 32px; }
  .cab-iconos { gap: 24px; }
  .menu-boton { display: none; }
}


.mega { position: absolute; top: 100%; left: 0; width: 100%; background: var(--hueso); color: var(--rojo); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; border-top: 1px solid var(--borde); }
.mega.abierto { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.mega .contenedor { padding-top: 32px; padding-bottom: 36px; }
.mega-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 20px; }
.mega-col { grid-column: span 1; }
.mega-col h3 { margin-bottom: 16px; }
.mega-col ul { display: flex; flex-direction: column; gap: 4px; }
.mega-col li { line-height: 1; }
.mega-col a { display: block; white-space: nowrap; }
@media (max-width: 1023px) { .mega { display: none; } }


.menu-mov { position: fixed; inset: 0; z-index: 55; background: var(--hueso); color: var(--rojo); padding: calc(var(--cab) + 24px) var(--gutter) 32px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.menu-mov.abierto { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.menu-mov ul { display: block; }
.mov-grupo { border-bottom: 1px solid var(--borde); }
.mov-abre { display: flex; width: 100%; align-items: center; justify-content: space-between; text-align: left; padding: 18px 0; font-size: 20px; }
.mov-mas { position: relative; width: 12px; height: 12px; }
.mov-mas::before, .mov-mas::after { content: ""; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1px; background: currentColor; transition: transform .3s var(--ease); }
.mov-mas::after { transform: rotate(90deg); }
.mov-abre[aria-expanded="true"] .mov-mas::after { transform: rotate(0); }
.menu-mov .mov-sub { display: none; padding: 0 0 18px; }
.menu-mov .mov-abre[aria-expanded="true"] + .mov-sub { display: block; }
.mov-sub li { padding: 5px 0; }
.mov-sub a { display: block; font-size: 13px; }
@media (min-width: 1024px) { .menu-mov { display: none; } }


.portada { position: relative; height: calc(100vh - 2 * var(--gutter)); height: calc(100svh - 2 * var(--gutter)); min-height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: var(--hueso); background: #14180f; overflow: hidden; }
.portada-foto, .portada-foto picture, .portada-foto img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.portada-foto img { object-fit: cover; object-position: 50% 30%; filter: saturate(.92) contrast(1.03); }
.portada-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 14, 8, .55) 0%, rgba(10, 14, 8, .18) 48%, rgba(10, 14, 8, 0) 70%), linear-gradient(0deg, rgba(10, 14, 8, .38), rgba(10, 14, 8, 0) 34%); pointer-events: none; }
@media (max-width: 1023px) {
  .portada-foto::after { background: linear-gradient(0deg, rgba(10, 14, 8, .62) 0%, rgba(10, 14, 8, .4) 45%, rgba(10, 14, 8, .5) 100%); }
}
.portada-texto { position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 2; width: 100%; }
.portada-texto .contenedor { max-width: 612px; margin: 0; }
.portada-texto h1 { max-width: 580px; }
.portada-bajada { margin-top: 16px; max-width: 560px; font-weight: 500; }
.portada-texto p:last-child { margin-top: 16px; }
.portada-texto .enlace { font-size: 12px; }
.js .portada-foto img { animation: portada-in 1.6s var(--ease) both; }
@keyframes portada-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

.boletin-portada { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); max-width: 24rem; }
@media (min-width: 1024px) { .boletin-portada { left: auto; } }
.boletin-cab { background: #fff; color: var(--rojo-osc); padding: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.boletin-titulo { margin-bottom: 8px; font-weight: 500; }
.boletin-caja { position: relative; }
.boletin-campos { display: flex; align-items: center; height: 48px; padding: 0 16px; background: var(--rojo); color: var(--hueso); transition: opacity .5s ease-out .4s; }
.boletin-campos input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--hueso); outline: none; }
.boletin-campos input::placeholder { color: var(--hueso); opacity: .7; }
.boletin-enviar { margin-left: 8px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .01em; color: var(--hueso); transition: opacity .2s; }
.boletin-enviar:hover { opacity: .8; }
.boletin-mensaje { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: var(--pardo); color: var(--hueso); padding: 0 16px; font-size: 11px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .4s ease-out 0s; }
.boletin-caja.con-mensaje .boletin-campos { opacity: 0; pointer-events: none; transition: opacity .4s ease-in 0s; }
.boletin-caja.con-mensaje .boletin-mensaje { opacity: 1; pointer-events: auto; transition: opacity .5s ease-out .4s; }
.boletin:focus-within .boletin-campos { outline: 1px solid rgba(251, 251, 249, .5); outline-offset: -4px; }


.fondo-hueso { background: var(--hueso); color: var(--rojo-osc); }
.borde-ab, .borde-ab-osc { position: relative; }
.borde-ab::after, .borde-ab-osc::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--borde); }
.borde-ab-osc::after { background: rgba(255, 255, 255, .2); }
.seccion { position: relative; padding: 56px 0 54px; background: var(--hueso); }
.apila-8 > * + * { margin-top: 32px; }
.g10 { display: grid; grid-template-columns: 1fr; gap: 32px 20px; }
.g12 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1024px) {
  .g10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; }
}


.mas-int { border-bottom: 1px solid var(--borde); padding: 48px 0; display: grid; gap: 48px; }
@media (min-width: 1024px) { .mas-int { padding-top: 150px; } }
.g10-prod { gap: 32px 12px; }
@media (min-width: 1024px) { .g10-prod { column-gap: 20px; } }
.prod-rej { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 48px; }
@media (min-width: 1024px) {
  .prod-rej { column-gap: 20px; }
  .prod-rej-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


.tarjeta { height: 100%; display: flex; flex-direction: column; }
.tarjeta-foto { position: relative; width: 100%; margin-bottom: 12px; }
.tarjeta-enlace { display: block; }
.foto { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(180deg, #c7a47b, #d9c1a2); isolation: isolate; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.3) saturate(.9) contrast(1.03) brightness(.97); transition: transform .6s var(--ease); }
.foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #d2a878 0%, #e6cba8 100%); mix-blend-mode: multiply; opacity: .9; pointer-events: none; }
.tarjeta:hover .foto img { transform: scale(1.05); }
.tarjeta-datos { display: block; }
.tarjeta-datos .t-micro { margin-bottom: 16px; }
.tarjeta-datos .titulo { margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-datos .desc { margin-bottom: 24px; min-height: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-datos .fmt { }
.tarjeta-guardar { position: absolute; z-index: 2; top: 8px; right: 8px; }
.guardar { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--hueso); color: var(--rojo-osc); }
.guardar .g-txt, .guardar .g-fmt { display: none; }
.guardar::before, .guardar::after { content: ""; position: absolute; left: 8px; top: 13.5px; width: 12px; height: 1px; background: currentColor; transition: transform .25s var(--ease); }
.guardar::after { transform: rotate(90deg); }
.guardar[aria-pressed="true"]::after { transform: rotate(0); }
@media (min-width: 1024px) {
  .tarjeta-guardar { top: auto; right: 16px; left: 16px; bottom: 16px; background: var(--hueso); opacity: 0; transition: opacity .3s; text-align: center; }
  .tarjeta:hover .tarjeta-guardar, .tarjeta-guardar:focus-within { opacity: 1; }
  .guardar { width: 100%; height: auto; padding: 12px 16px; justify-content: space-between; font-size: 14px; line-height: 1; letter-spacing: .03em; }
  .guardar::before, .guardar::after { display: none; }
  .guardar .g-txt, .guardar .g-fmt { display: inline; }
  .guardar .g-fmt { color: var(--tinta-5); }
}


.ruta-pegajosa { position: relative; }
@media (min-width: 1024px) { .ruta-pegajosa { position: sticky; top: calc(var(--cab) + var(--gutter)); } }
.ruta { position: relative; }
.ruta-foto { position: relative; width: 100%; aspect-ratio: 3 / 4; background: #1b2412; overflow: hidden; }
@media (min-width: 1024px) { .ruta-foto { max-height: calc(100vh - var(--cab) - 2 * var(--gutter)); max-height: calc(100svh - var(--cab) - 2 * var(--gutter)); } }
.ruta-foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.04) brightness(.88); }
.ruta-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 18, 8, .72) 0%, rgba(14, 18, 8, .35) 34%, rgba(14, 18, 8, 0) 58%); }
.ruta-texto { position: absolute; left: 0; bottom: 0; width: 100%; padding: 20px; display: grid; gap: 24px; max-width: 310px; z-index: 2; }
@media (min-width: 1024px) { .ruta-texto { max-width: 400px; } }
.ruta-enlaces { display: flex; gap: 32px; }


.sec-cab { display: flex; gap: 32px 16px; padding-bottom: 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; }
.ing-carrusel, .colec-carrusel { margin: 0 calc(-1 * var(--gutter)); }
.ing-swiper, .colec-swiper { padding: 0 var(--gutter); overflow: hidden; }
.ing-slide { width: 280px; }
.ing { display: flex; flex-direction: column; height: 100%; }
.ing-foto { order: 0; margin-bottom: 16px; }
.ing-foto .duo { width: 100%; aspect-ratio: 1; overflow: hidden; }
.ing-titulo { order: 1; margin-bottom: 4px; color: var(--rojo-osc); }
.ing-texto { order: 2; }
.ing-foto img, .colec img { transition: transform .4s var(--ease); }
.ing:hover .ing-foto img { transform: scale(1.05); }
@media (min-width: 1024px) {
  .ing-swiper { overflow: visible; }
  .ing-swiper .swiper-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; transform: none !important; }
  .ing-slide { width: auto !important; margin-right: 0 !important; }
  .ing { border-right: 1px solid var(--borde); padding-right: var(--gutter); }
  .ing-slide:last-child .ing { border-right: 0; }
  .ing-foto { order: 3; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; margin: 96px 0 0; }
  .ing-foto .duo { width: 160px; }
  .ing-titulo { order: 1; }
  .ing-texto { order: 2; max-width: 300px; }
}


.duo { position: relative; background: var(--rojo); overflow: hidden; isolation: isolate; }
.duo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.95); mix-blend-mode: screen; opacity: .8; }
.cuaderno .duo img, .cta .duo img { opacity: .72; }
.duo.inv img { filter: grayscale(1) invert(1) contrast(1.1) brightness(1.05); }


.colec-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 48px; }
.colec-lema { max-width: 392px; }
.colec-swiper .swiper-slide { width: 280px; }
@media (min-width: 1024px) { .colec-swiper .swiper-slide { width: 450px; } }
.colec { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--rojo-osc); color: var(--hueso); }
.colec img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); }
.colec:hover img { transform: scale(1.05); }
.colec::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(25, 12, 6, .66) 0%, rgba(25, 12, 6, .32) 42%, rgba(25, 12, 6, 0) 66%); pointer-events: none; }
.colec-texto { position: relative; z-index: 2; padding: 20px; margin-top: auto; }
@media (min-width: 1024px) { .colec-texto { padding-right: 64px; } }
.colec-desc { margin-top: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.colec-ver { margin-top: 32px; display: inline-block; }


.tienda-int { padding: 48px 0; display: grid; gap: 48px; }
.tienda-btn { display: flex; justify-content: flex-start; }
@media (min-width: 1024px) { .tienda-btn { justify-content: flex-end; align-items: flex-start; } .tienda-cab { align-items: start; } }


.cuaderno { background: var(--rojo); color: var(--hueso); padding-top: 0; padding-bottom: 54px; }
.cuad-cab { display: flex; gap: 32px 16px; justify-content: space-between; padding-top: 16px; margin-bottom: 96px; }
.cuad-cab .t-intro { }
.cuad-rej { align-items: stretch; }
.art-col { display: flex; }
@media (min-width: 1024px) { .art-col { grid-column: span 4; } }
.art-int { flex: 1; padding: 20px 0; border-bottom: 1px solid var(--borde-osc); }
@media (min-width: 768px) { .art-int { border-bottom: 0; border-right: 1px solid var(--borde-osc); } .art-col:last-child .art-int { border-right: 0; } }
.art { display: block; height: 100%; }
@media (min-width: 1024px) { .art { padding-right: var(--gutter); } }
.art-grid { display: grid; grid-template-rows: 1fr auto; row-gap: 110px; height: 100%; }
.art-texto { max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.art-titulo { display: flex; flex-wrap: wrap; column-gap: 8px; }
.art-titulo h3 { font-size: inherit; line-height: inherit; font-weight: inherit; }
.art-raya { display: none; }
@media (max-width: 1023px) { .art-raya { display: inline-block; } }
.art-extracto { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.art-leer { margin-top: 0; align-self: flex-start; }
.art-foto { display: flex; }
.art-foto .duo { position: relative; width: 130px; aspect-ratio: 3 / 4; background: var(--rojo); }
.art-foto .duo img { transition: transform .6s var(--ease); }
.art:hover .art-foto img { transform: scale(1.05); }
.art:hover .art-leer { text-decoration-color: transparent; }


.cta { padding: 56px 0; background: var(--rojo); color: var(--hueso); }
.cta-caja { position: relative; width: 100%; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; background: var(--rojo); }
@media (min-width: 1024px) { .cta-caja { aspect-ratio: 16 / 9; min-height: 500px; max-height: calc(100vh - var(--cab) - 2 * var(--gutter)); max-height: calc(100svh - var(--cab) - 2 * var(--gutter)); } }
.cta-foto, .cta-foto .duo, .cta-foto picture, .cta-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-int { position: absolute; inset: 0; padding: 20px; gap: 20px; align-content: stretch; }
.cta-izq { grid-column: 1 / -1; }
.cta-izq h2 { width: 50%; }
.cta-der { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: flex-end; }
.cta-enlaces { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cta-enlaces a { white-space: pre; }
.cta-int { grid-template-rows: auto 1fr; }
@media (min-width: 1024px) {
  .cta-int { grid-template-rows: none; align-content: center; align-items: center; }
  .cta-izq { grid-column: span 5; display: flex; flex-direction: column; justify-content: center; }
  .cta-izq h2 { width: 100%; }
  .cta-der { grid-column: span 5; justify-content: center; }
  .cta-enlaces { flex-direction: row; flex-wrap: wrap; gap: 32px; justify-content: flex-end; align-items: center; }
}


.pie { background: var(--rojo); color: var(--hueso); padding-top: 48px; }
.pie-int { padding-bottom: 32px; display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 1024px) { .pie-int { gap: 144px; } }
.pie-rej { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 10px; margin-bottom: 32px; }
.pie-col { grid-column: span 2; }
.pie-col h3 { margin-bottom: 16px; }
.pie-col ul { display: flex; flex-direction: column; gap: 4px; }
.pie-col li { line-height: 1; }
.pie-col a { display: block; }
.pie-marca { display: none; }
@media (min-width: 1024px) {
  .pie-rej { grid-template-columns: repeat(10, 1fr); gap: 20px; margin-bottom: 80px; }
  .pie-col { grid-column: span 1; }
  .pie-col h3 { margin-bottom: 16px; }
  .pie-conectar { grid-column: 8 / span 1; }
  .pie-marca { display: flex; grid-column: 10 / span 1; flex-direction: column; justify-content: flex-start; align-items: flex-end; }
}
.pie-bajo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 10px; }
.pie-boletin { grid-column: 1 / -1; margin-bottom: 24px; order: 1; max-width: 24rem; width: 100%; }
.pie-boletin-titulo { margin-bottom: 8px; color: rgba(249, 249, 249, .8); }
.boletin-pie .boletin-campos { background: rgba(255, 255, 255, .1); height: 48px; }
.pie-copy { grid-column: 1 / -1; order: 3; align-self: end; }
.pie-lema { grid-column: 1 / -1; order: 4; max-width: 11rem; margin-bottom: 32px; }
.pie-muestra { grid-column: 1 / -1; order: 5; align-self: end; }
.pie-muestra a { text-decoration: underline; text-underline-offset: 3px; }
.pie-muestra a:hover { text-decoration-color: transparent; }
@media (min-width: 1024px) {
  .pie-bajo { grid-template-columns: repeat(10, 1fr); gap: 20px; }
  .pie-boletin { grid-column: 1 / span 2; margin: 0; order: 0; max-width: none; }
  .pie-copy { grid-column: 4 / span 2; order: 0; }
  .pie-muestra { grid-column: 8 / span 2; order: 0; }
  .pie-lema { grid-column: 10 / span 1; order: 0; margin: 0; align-self: end; justify-self: end; text-align: left; }
}


.velo { position: fixed; inset: 0; z-index: 90; background: rgba(38, 20, 19, .35); opacity: 0; transition: opacity .4s cubic-bezier(.42, 0, .51, .79); }
.velo.visible { opacity: 1; transition: opacity .45s cubic-bezier(.48, .19, .15, .8); }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: 460px; max-width: 100%; background: var(--hueso); color: var(--rojo-osc); display: flex; flex-direction: column; transform: translateX(100%); transition: var(--cajon-out); visibility: hidden; }
.cajon.abierto { transform: none; transition: var(--cajon-in); visibility: visible; }
.cajon-cab { display: flex; align-items: center; justify-content: space-between; height: var(--cab); padding: 0 var(--gutter); border-bottom: 1px solid var(--borde); flex: none; }
.cajon-cerrar { position: relative; width: 32px; height: 32px; margin-right: -8px; }
.cajon-cerrar span { position: absolute; left: 8px; top: 15.5px; width: 16px; height: 1px; background: currentColor; transform: rotate(45deg); }
.cajon-cerrar span + span { transform: rotate(-45deg); }
.cajon-cuerpo { flex: 1; overflow-y: auto; padding: 24px var(--gutter) 40px; overscroll-behavior: contain; }
.cajon-cuerpo > * + * { margin-top: 24px; }
.cajon-sub { color: var(--tinta-5); }
.lista-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
.mini { display: block; width: 100%; text-align: left; }
.mini .foto { margin-bottom: 12px; }
.mini .t-micro { margin-bottom: 8px; }
.mini .t-corto { margin-bottom: 4px; }
.mini .t-xs { opacity: .5; }
.ficha-foto .foto { margin-bottom: 0; }
.ficha-datos { display: grid; gap: 24px; }
.ficha-datos h3 { font-size: 20px; line-height: 1.2; font-weight: 400; letter-spacing: .01em; }
.ficha-datos .t-micro { margin-bottom: 12px; }
.ficha-datos dl { margin: 0; display: grid; gap: 16px; }
.ficha-datos dt { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; opacity: .5; margin-bottom: 6px; }
.ficha-datos dd { margin: 0; font-size: 12px; line-height: 1.35; }
.ficha-datos ul { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-datos ul li { background: var(--gris); color: var(--rojo); padding: 6px 8px; font-size: 11px; }
.ficha-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ficha-acc .btn { width: 100%; padding: 14px; }
.btn-claro { background: var(--gris); color: var(--rojo); }
.sel-vacio { color: var(--tinta-5); }
.sel-fila { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.sel-fila:first-child { border-top: 1px solid var(--borde); }
.sel-fila .foto { aspect-ratio: 3 / 4; }
.sel-fila .t-micro { margin-bottom: 6px; }
.sel-quitar { font-size: 11px; text-decoration: underline; text-underline-offset: .25em; }
.buscar-campo { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; background: var(--gris); color: var(--rojo); }
.buscar-campo input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: 14px; }
.buscar-campo input::placeholder { color: var(--rojo); opacity: .6; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--gris); color: var(--rojo); padding: 8px 12px; font-size: 12px; transition: background-color .25s; }
.chip:hover { background: #e8e8e6; }
.quiz-pasos { display: flex; gap: 4px; }
.quiz-pasos i { flex: 1; height: 2px; background: var(--borde); transition: background-color .3s; }
.quiz-pasos i.hecho { background: var(--rojo); }
.quiz-preg { font-size: 20px; line-height: 1.2; }
.quiz-ops { display: grid; gap: 8px; }
.quiz-op { display: block; width: 100%; text-align: left; padding: 14px 16px; background: var(--gris); color: var(--rojo); font-size: 13px; transition: background-color .25s, color .25s; }
.quiz-op:hover, .quiz-op:focus-visible { background: var(--rojo); color: var(--hueso); }
.quiz-fila { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.quiz-fila .foto { aspect-ratio: 3 / 4; }
.paso-tag { display: inline-block; margin-bottom: 4px; opacity: .5; }
.texto-info p + p { margin-top: 12px; }
.texto-info p { font-size: 13px; line-height: 1.4; }
.aviso { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translate(-50%, 12px); max-width: calc(100% - 32px); background: var(--pardo); color: var(--hueso); padding: 14px 18px; font-size: 12px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .35s ease-out, transform .35s ease-out; text-align: center; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .js-vista { opacity: 1; transform: none; }
  .tarjeta:hover .foto img, .ing:hover .ing-foto img, .colec:hover img, .art:hover .art-foto img { transform: none; }
}


@media (max-width: 1023px) {
  .mas-int { padding: 48px 0; }
  .cab-iconos { gap: 20px; }
  .boletin-portada { max-width: none; }
  .portada-texto { top: 50%; }
  .ing-slide { width: 280px; }
  .tienda-int { padding: 48px 0; }
  .cuad-cab { margin-bottom: 40px; }
  .art-grid { row-gap: 32px; }
  .cta { padding: 56px 0; }
  .ficha-acc { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cajon { width: 100%; }
}
