@charset "UTF-8";
/* Página propia de cada original (src/components/OriginalPage.astro).
   Cabecera sobre la pared de originales (Miel) con el flexo de la galería: a la izquierda la cartela (personaje, título,
   descripción, técnica, tamaño, año, materiales, precio y «¿Te interesa?») y a la derecha el cuadro enmarcado, con lupa
   para ver el trazo. Debajo, «De cerca» (fotos de detalle en polaroids), su historia y otros originales en la pared. */

/* ——— Cabecera ——— */
/* El flexo, a juego con el cuadro: el cuadro depende sobre todo de la altura de la pantalla, y el flexo también. */
[data-variant=panoramica] .gallery-wall.original-hero{--lamp-w:clamp(160px,32vh,290px);margin-top:0;padding-block:clamp(32px,4vw,56px) clamp(56px,6vw,88px);border-top:0}
/* A la izquierda, el título y debajo la cartela, juntos y centrados en vertical con el cuadro, que ocupa la derecha. */
.original-hero-inner{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". art" "head art" "info art" ". art";column-gap:clamp(36px,5vw,80px);align-items:center}
:is(.original-head,.original-info){position:relative;z-index:2;display:grid;justify-items:start;align-content:start}
.original-head{grid-area:head}
.original-info{grid-area:info}
.original-back{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0 0 clamp(18px,2.5vw,30px);font-size:.875rem;font-weight:600}
.original-back .icon{width:16px;height:16px;transition:transform .2s ease}
@media(hover:hover) and (pointer:fine){.original-back:hover .icon{transform:translateX(-3px)}.original-back:hover{text-decoration:underline;text-underline-offset:4px}}
.original-head .eyebrow{text-transform:uppercase;margin-bottom:14px}
.original-head h1{font-size:clamp(2.6rem,4.6vw,4.4rem);margin:0 0 20px;max-width:14ch}
.original-description{max-width:52ch}
.original-description p{margin:0 0 .8em;font-size:1.0625rem}

/* Cartela: filas finas, como en la ficha, con los materiales en pastillas. */
.original-specs{width:100%;max-width:520px;margin:12px 0 0;font-size:.9375rem}
.original-specs>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:16px;padding:11px 0;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.original-specs>div:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.original-specs dt{font-weight:600}
.original-specs dd{margin:0}
.original-specs ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.original-specs li{padding:1px 11px;border:1px solid color-mix(in srgb,var(--ink) 55%,transparent);border-radius:999px;font-size:.8125rem;line-height:1.7}

.original-price{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:24px 0 0}
.original-price strong{font:400 clamp(1.9rem,2.6vw,2.4rem)/1 var(--serif);letter-spacing:-.03em}
.original-note{margin:10px 0 0;font-size:.9375rem;max-width:46ch}

/* «¿Te interesa?», sobre un papel claro para que se lea bien encima de la pared. */
[data-variant=panoramica] .original-request{width:100%;max-width:520px;margin-top:22px;padding:22px 24px 20px;background:color-mix(in srgb,var(--ivory) 72%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)}
[data-variant=panoramica] .original-request .request-lead{color:var(--ink)}
[data-variant=panoramica] .original-request .request-form.is-sent .request-status{background:color-mix(in srgb,var(--wall) 55%,var(--ivory))}
.original-sold{width:100%;max-width:520px;margin-top:22px;padding:22px 24px;background:color-mix(in srgb,var(--ivory) 72%,transparent)}
.original-sold .request-title{font:400 1.35rem/1.3 var(--serif);letter-spacing:-.02em;margin:0 0 14px}
.original-sold-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.original-sold-actions .primary-link{margin:0}
[data-variant=panoramica] .original-info>.also-link{margin-top:18px}
.original-edit-data{margin-top:18px;font-size:.875rem;text-decoration:underline;text-underline-offset:3px}

/* El cuadro: marco oscuro con paspartú (el de las tarjetas de originales), más grande y con lupa. */
/* El flexo cuelga encima del cuadro, como en una galería: el cuadro baja lo que ocupa su pantalla. */
.original-art{grid-area:art;position:relative;z-index:0;display:grid;justify-items:center;gap:14px;padding-top:calc(var(--lamp-w)*.5)}
[data-variant=panoramica] .original-art.kind-originals{--mat-size:clamp(16px,2.2vw,30px);--frame-size:clamp(6px,.7vw,9px)}
.original-frame{cursor:crosshair}
/* Mantener el dedo encima es para la lupa: sin el menú de la imagen ni selección de texto. */
.original-frame img{width:auto;height:auto;max-width:100%;max-height:min(66vh,680px);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.original-lens{position:absolute;z-index:3;left:0;top:0;width:clamp(150px,15vw,210px);aspect-ratio:1;border-radius:50%;background:var(--mat) no-repeat;box-shadow:0 0 0 4px #fff,0 14px 30px -8px #2a2a1f99;pointer-events:none;opacity:0;scale:.85;transition:opacity .18s ease,scale .18s ease}
.original-frame.is-zooming .original-lens{opacity:1;scale:1}
/* La luz del flexo, algo más suave que la de la pared de originales para no cambiar los colores del cuadro. */
[data-variant=panoramica] .original-hero .lamp-light{background:radial-gradient(circle 1150px at 100% 0,#FFD27Aa8 0,#FFD27A80 22%,#FFD27A40 52%,#FFD27A00 100%)}
[data-variant=panoramica] .original-hero .lamp-beam{background:radial-gradient(circle 950px at 100% 0,#FFD57C58 0,#FFD57C24 40%,#FFD57C00 78%)}
.original-zoom-hint{margin:6px 0 0;font:italic 400 .9375rem/1.4 var(--serif)}
/* Cada dispositivo ve su gesto: el ratón o el dedo. */
.original-zoom-hint .on-touch{display:none}
@media(hover:none),(pointer:coarse){.original-zoom-hint .on-mouse{display:none}.original-zoom-hint .on-touch{display:inline}}

/* ——— De cerca: las fotos de detalle en polaroids ——— */
.original-closeup .story-collage{margin-top:0}

/* ——— Otros originales: la misma pared, con su cartela ——— */
[data-variant=panoramica] .original-others{background:var(--wall);border-top:1px solid var(--line);padding-block:clamp(56px,6vw,88px) clamp(64px,7vw,96px)}
[data-variant=panoramica] .original-others :is(.card-character,.cartela-technique,.cartela-price){color:var(--ink)}
[data-variant=panoramica] .original-others .wall-heading{margin-bottom:clamp(36px,4vw,56px)}
[data-variant=panoramica] .original-others .wall-heading h2{font-size:clamp(2rem,3.3vw,3.15rem)}
[data-variant=panoramica] .original-others .wall:has(>:only-child){grid-template-columns:auto}
/* Sin «De cerca» ni historia, va justo después de la cabecera: sobre el fondo de la web, para no juntar dos paredes iguales. */
[data-variant=panoramica] .original-hero+.original-others{background:var(--paper);border-top:0}

/* ——— Barra fija del móvil: precio y «Me interesa» mientras el formulario no se ve ——— */
.original-bar{display:none}

@media(max-width:900px){
 /* El flexo, más grande que en el escritorio: al lado del cuadro, a todo el ancho, se quedaba pequeño. */
 [data-variant=panoramica] .gallery-wall.original-hero{--lamp-w:clamp(185px,50vw,230px)}
 .original-hero-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "art" "info";gap:clamp(36px,5vw,80px)}
 .original-head h1{max-width:none}
 /* El flexo cuelga de la esquina, en la fila de «Volver», y el texto empieza por debajo de su pantalla (que baja hasta
    casi la mitad de su ancho): la separación sale del tamaño del flexo y del margen de arriba de la banda. */
 .original-back{margin-bottom:max(clamp(18px,2.5vw,30px),calc(var(--lamp-w)*.48 - 30px - clamp(32px,4vw,56px)))}
 .original-art{padding-top:0}
 .original-frame img{max-height:62vh}
}
@media(max-width:700px){
 [data-variant=panoramica] .gallery-wall.original-hero{padding-block:20px 48px}
 .original-hero-inner{gap:24px}
 .original-frame img{max-height:52vh}
 .original-back{margin-bottom:max(6px,calc(var(--lamp-w)*.48 - 50px))}
 .original-head h1{font-size:clamp(2.3rem,10vw,3rem)}
 [data-variant=panoramica] .original-request,.original-sold{padding:18px 16px}
 .original-specs>div{grid-template-columns:6.5em minmax(0,1fr);gap:12px}
 .original-bar{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 14px;padding:9px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ivory);box-shadow:0 -1px 0 var(--line),0 -10px 24px -14px #2a2a1f66;transform:translateY(110%);transition:transform .25s ease;pointer-events:none}
 .original-bar.is-shown{transform:none;pointer-events:auto}
 .original-bar-text{flex:1 1 0;display:grid;min-width:0;line-height:1.3}
 /* Personaje y tipo, como encima del título, a todo el ancho de la barra para que quepa. */
 .original-bar-kind{flex:1 0 100%;font-size:.6875rem;font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .original-bar-text span{font:400 1rem/1.3 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .original-bar-text strong{font-size:.875rem;font-weight:600}
 .original-bar .primary-link{flex:none;margin:0;gap:14px;padding:10px 16px;min-height:44px}
 /* Que la barra no tape el final de la página (el pie). */
 body:has(.original-page:not([hidden]) .original-bar) .site-footer{padding-bottom:96px}
}
@media(prefers-reduced-motion:reduce){.original-bar{transition:none}.original-lens{transition:none}}
/* En el modo edición, la barra no tapa las herramientas del editor. */
body.se-open .original-bar,html.dialog-open .original-bar{display:none}
/* Vista previa: una sección de la historia con título y sin texto no sale en la web. */
.story-unwritten .story-flow::before{content:'Sin escribir: esta sección no sale en la web.';display:block;padding:10px 16px;border:1px dashed var(--line);font-size:.875rem;color:var(--muted);text-align:center}