/* ===================================================================== brand-pyg.css — PIEL de poesiaygrafica.com (poesía & gráfica · LA tienda) Marca 5 del ecosistema (E0). Separación física E1: capa PERCEPTIBLE propia sobre core.css (esqueleto invisible). Traslado de la antigua hoja preview/pyg-system.css —ratificado por Pablo (–)— a tarro de marca independiente: ya NO carga colors_and_type.css (la pintura de la madre); depende SOLO de core.css (aquella hoja se eliminó del proyecto en: este tarro es su único sucesor) (regla E7 · builds independientes). Corrige la violación de capas detectada en el registro de instrucciones. Aquí van PALETA, PESOS, EJES didona, RAMPA DE FILETES y leyes de uso. El TAMAÑO (cuerpo) vive en la rampa del núcleo (--fs-*); la GEOMETRÍA de la rejilla (celda/subcelda/medianiles) también (core.css). Todo bajo .pyg. ===================================================================== */ /* ── BARLOW SEMI CONDENSED · la voz de PALO de la tienda ──────────────────── FALTABA POR COMPLETO. La piel declaraba --pyg-din:'Barlow Semi Condensed' pero no cargaba ni un archivo: el navegador caía en el palo del sistema, así que la voz «gráfica» de la tienda se estaba viendo con una tipografía que no es la suya. Se declara aquí, dentro del tarro, porque la tienda debe poder construirse sola (E7) — no puede depender de que la piel de FacelessD, que sí los declaraba, esté cargada. COMPLETA desde el 12 oct 2026. Faltaban Light 300, Regular 400 y Medium 500 en redonda, justo los pesos principales de la tienda (300 lectura, 400 dato). Vienen del repositorio oficial de Google Fonts, con licencia libre OFL (fonts/licencias/). Mientras faltaban, esta piel los pedía a los servidores de Google: la tienda dependía de un tercero, no se veía bien sin conexión y enviaba datos de cada visitante fuera. Retirado. */ @font-face{font-family:'Barlow Semi Condensed';font-weight:100;font-style:normal;font-display:swap;src:url('fonts/BarlowSemiCondensed-Thin.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:200;font-style:normal;font-display:swap;src:url('fonts/BarlowSemiCondensed-ExtraLight.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:300;font-style:normal;font-display:swap;src:url('fonts/BarlowSemiCondensed-Light.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/BarlowSemiCondensed-Regular.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/BarlowSemiCondensed-Medium.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/BarlowSemiCondensed-SemiBold.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/BarlowSemiCondensed-Bold.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:800;font-style:normal;font-display:swap;src:url('fonts/BarlowSemiCondensed-ExtraBold.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:900;font-style:normal;font-display:swap;src:url('fonts/BarlowSemiCondensed-Black.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:300;font-style:italic;font-display:swap;src:url('fonts/BarlowSemiCondensed-LightItalic.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:400;font-style:italic;font-display:swap;src:url('fonts/BarlowSemiCondensed-Italic.ttf') format('truetype')} @font-face{font-family:'Barlow Semi Condensed';font-weight:500;font-style:italic;font-display:swap;src:url('fonts/BarlowSemiCondensed-MediumItalic.ttf') format('truetype')} @font-face{font-family:'Bodoni Moda Static';src:url('fonts/BodoniModa-Italic-VariableFont_opsz%2Cwght.ttf') format('truetype-variations');font-style:italic;font-weight:900;font-display:swap} /* ── Voces P&G: Bodoni Moda «poesía» (variable local) · Barlow SEMI CONDENSED «gráfica». (La Barlow SC es la voz de palo PROPIA de la tienda. FacelessD la declara por su cuenta en brand-facelessd.css: builds independientes, · D4.) ── */ @font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/BodoniModa-VariableFont_opsz,wght.ttf') format('truetype-variations')} @font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url('fonts/BodoniModa-Italic-VariableFont_opsz%2Cwght.ttf') format('truetype-variations')} :root{ /* ── PALETA (Alto Contraste 3 adelgazado: 2 tintas sobre neutros) ── Base = dorado (transacción) · complementario = Prusia verdoso (marca/estructura). */ --pyg-bg:#FDFCFA; /* @kind color */ /* papel · predomina */ --pyg-ink:#141311; /* @kind color */ /* tinta · texto y estructura, acción primaria */ --pyg-prusia:#0E3A3C; /* @kind color */ /* Prusia profundo verdoso · MARCA / estructura */ --pyg-prusia-hi:#1C5E5E; /* @kind color */ /* Prusia claro · hover sobre oscuro */ --pyg-oro:#F5C24E; /* @kind color */ /* dorado · TRANSACCIÓN (compra, selección, estado) */ /* MISMO gris que la directiva del núcleo, y por la MISMA razón: aquí se usa exactamente como hueco de imagen (.ph, .plate, .thumbs). Deja de estar escrito dos veces: apunta al token del sistema. */ --pyg-superficie:var(--gris-placeholder); /* @kind color */ /* placeholder gris plano canónico · SIN texto dentro */ --pyg-linea:#E2DFD8; /* @kind color */ /* filete cálido claro (hairline sobre papel) */ --pyg-gris:#6E6A63; /* @kind color */ /* texto atenuado */ --pyg-neg-sec:#D8D4CA; /* @kind color */ /* texto secundario sobre tinta */ /** * @group pyg.canon * @name "P&G · nombres canónicos del ecosistema" * @description ( · D5) Los nombres que TODA piel declara, para que un * componente del sistema funcione en cualquiera de las seis webs. * Apuntan a los colores propios de la tienda: no se renombra nada * de lo construido, esto es ADITIVO. */ --bg: var(--pyg-bg); /* @kind color */ --bg-alt: var(--pyg-prusia); /* @kind color */ --fg: var(--pyg-ink); /* @kind color */ --fg-muted: var(--pyg-gris); /* @kind color */ --line: var(--pyg-linea); /* @kind color */ --accent: var(--pyg-oro); /* @kind color */ --accent-hover:var(--pyg-prusia-hi); /* @kind color */ /** * @group pyg.button * @name "P&G · forma de botón" * @description ( · D5) La tienda usa la PASTILLA. */ --btn-shape: var(--r-pill); /* @kind radius */ /** * @group pyg.marquee * @name "P&G · velocidad de banda — ANCLA DEL ECOSISTEMA" * @description (, ratificado) La banda de la tienda es la velocidad * CALIBRADA de la que derivan todas las demás del ecosistema: * «deseable para marquees de su tamaño». * * MEDIDO, no supuesto. Las tres bandas reales * del escaparate dan 113 · 131 · 145 px/s: no coinciden entre sí * porque las tres escriben 34 s a mano con textos de distinto * largo — que es exactamente la patología que esta ley cura. * Mediana ≈ 130 px/s → ANCLA. (El primer valor publicado, 40 px/s, * era erróneo: suponía que el recorrido era el ancho del lienzo, * 1197 px, cuando el recorrido es la mitad del riel: 3.856–4.939 px.) * Las piezas que escriben segundos a mano deben consumir esto. */ --mq-v: 85px; /* @kind other */ /* px/s · banda media (ANCLA) */ --mq-v-lg: 65px; /* @kind other */ /* ÷ 1.306 · banda grande → MÁS LENTA */ --mq-v-sm: 111px; /* @kind other */ /* × 1.306 · banda pequeña → MÁS RÁPIDA */ --pyg-verde:var(--pyg-prusia); /* alias heredado · la firma ahora es Prusia */ --pyg-amarillo:var(--pyg-oro); /* alias heredado */ /* ── FUENTES y EJES didona (bívoz: Bodoni «poesía» · Barlow «gráfica») ── EXCEPCIÓN DE MARCA P&G: TODOS los títulos en Bodoni Moda van en CURSIVA (el lettermark es una Didone cursiva black). Única redonda: la línea de serie. */ --pyg-didona:'Bodoni Moda Static','Bodoni Moda',serif; /* @kind font */ --pyg-din:'Barlow Semi Condensed',sans-serif; /* @kind font */ --pyg-dd-display:"opsz" 26,"wght" 900; /* @kind font */ /* nombre de obra · logotipo */ --pyg-dd-sub:"opsz" 18,"wght" 800; /* @kind font */ /* títulos medios, precios */ --pyg-dd-editorial:"opsz" 60,"wght" 500; /* @kind font */ /* línea de serie · redonda */ --dd-track:.014em; /* @kind font */ /* ── RAMPA DE PESO (DIN Barlow, 300–700). LEY DIN en botón/marquee: a más TAMAÑO, más LIGERO el cuerpo. La Bodoni NO la sigue (didona: +tamaño +peso). */ --pyg-din-lectura:300; /* @kind font */ --pyg-din-dato:400; /* @kind font */ --pyg-din-rotulo:600; /* @kind font */ --pyg-din-enfasis:700; /* @kind font */ /* ── RAMPA DE FILETES (tope 3.5) — 4 pesos, 4 trabajos por ESCALA estructural. ── */ --pyg-f1:1px; /* @kind other */ /* canto de VENTANA · bordes de imagen y tarjeta */ --pyg-f2:1.5px; /* @kind other */ /* MEDIANIL de columna · footer, router */ --pyg-f3:2.5px; /* @kind other */ /* TÍTULO ↔ CONTENIDO · canto inferior de cabecera */ --pyg-f4:3.5px; /* @kind other */ /* APERTURA de sección · canto superior (tope) */ --pyg-mq-fs:var(--fs-h1); /* acento Bodoni: minúscula con ascendentes y descendentes */ /* Versalitas de palo: el cuerpo se DERIVA de la banda para que la caja alta la toque de borde a borde (altura de caja alta de la Barlow SC ≈ .72 em). */ --pyg-mq-caps:calc(var(--pyg-pill-h) / .73); /* @kind other */ /* Anchura del lienzo editorial. Toda sangría de banda se calcula CONTRA ESTO, nunca contra el viewport: la tienda es un lienzo fijo. */ --pyg-canvas:1197px; /* @kind spacing */ --pyg-fi-col:1200px; /* @kind spacing */ /* columna de lectura de la ficha */ /* marquee · la mancha LLENA la banda de 2 subceldas */ /* FUENTE DE VERDAD del cromo: la pastilla mide dos subceldas y la barra se DERIVA de ella sumando un medianil de aire. Nunca se escriben por separado. */ --pyg-pill-h:calc(2 * var(--subcell-h)); /* @kind spacing */ /* ⚠ REGLA FIJA DE PABLO, repetida y ratificada: la BARRA mide dos subceldas MÁS UN MEDIANIL; la PASTILLA mide dos subceldas. Se deriva una de otra, así que la pastilla siempre deja medio medianil de aire arriba y abajo. NO se toca ninguna de las dos por separado ni se "afina" ópticamente. */ --pyg-header:calc(var(--pyg-pill-h) + var(--gutter-horizontal)); /* @kind spacing */ /* ── tintas de la rejilla-guía de P&G (tecla G) — piel propia, no de la madre ── */ --pyg-rej-cell:rgba(14,58,60,.42); /* @kind color */ /* línea de celda · Prusia */ --pyg-rej-med:rgba(14,58,60,.34); /* @kind color */ /* mediana (½) */ --pyg-rej-qrt:rgba(14,58,60,.18); /* @kind color */ /* cuartas (¼, ¾) */ /* periodos de la rejilla = celda + medianil (para pintar la guía) */ --pyg-pv:calc(var(--cell-w) + var(--gutter-vertical)); /* @kind spacing */ --pyg-ph:calc(var(--cell-h) + var(--gutter-horizontal)); /* @kind spacing */ /* ancho del bloque de contenido (8 celdas + 7 medianiles) y ORIGEN de columna: la guía debe arrancar donde arranca la rejilla real, centrada en la página. El término +pv/2 compensa que el 50% de background-position se resuelve contra (ancho del área − ancho del mosaico), no contra el área entera. */ --pyg-gridw:calc(8 * var(--cell-w) + 7 * var(--gutter-vertical)); /* @kind spacing */ --pyg-ox:calc(50% + var(--pyg-pv) / 2 - var(--pyg-gridw) / 2); /* @kind spacing */ } /* ── raíz del sitio ── */ .pyg{background:var(--pyg-bg);color:var(--pyg-ink);font-family:var(--pyg-din);font-weight:var(--pyg-din-lectura);-webkit-font-smoothing:antialiased;position:relative} .pyg *{box-sizing:border-box} .pyg h1,.pyg h2,.pyg h3,.pyg p,.pyg span,.pyg div,.pyg a,.pyg li,.pyg button{font-family:var(--pyg-din);text-transform:none;letter-spacing:normal;font-variation-settings:normal} .pyg a{color:var(--pyg-ink);text-decoration:none;border-bottom:0;cursor:pointer} @media (hover:hover) and (min-width:900px){.pyg a:hover{color:var(--pyg-prusia)}} .pyg ::selection{background:var(--pyg-oro);color:var(--pyg-ink)} /* Placeholder canónico: gris plano, sin rótulo dentro. */ .pyg .ph::after,.pyg .plate .fr::after,.pyg .cl::after{content:none !important} /* ── PASTILLA ÚNICA del sistema P&G ── UNA geometría y DOS cuerpos declarados: el de la pastilla (por defecto) y `.btn--sm`, que baja UN peldaño de la rampa para pastillas dentro de columnas estrechas (cajón del carrito, checkout, franja de álbum). Ninguna otra excepción: si una pastilla necesita otro cuerpo, se le pone `.btn--sm`, nunca una regla por descendencia. ALTURA anclada a la rejilla (dos subceldas exactas). Aire lateral proporcional al cuerpo (~1 caps), no un bloque fijo. El tracking se compensa en el padding DERECHO — no con text-indent — para que el rótulo quede ópticamente centrado, y un padding inferior de .16em corrige el asiento bajo de la Barlow (: el rótulo se leía caído dentro de la pastilla). */ .pyg .btn{--btn-fs:var(--fs-h2);--btn-px:.45em;font-family:var(--pyg-din);font-size:var(--btn-fs);font-weight:var(--pyg-din-dato);letter-spacing:.02em;text-transform:none;height:var(--pyg-pill-h);padding:0 calc(var(--btn-px) - .02em) .16em var(--btn-px);line-height:1;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.3em;background:var(--pyg-ink);color:var(--pyg-oro);border:1px solid var(--pyg-ink);border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .16s,color .16s,border-color .16s} .pyg .btn--lg{--btn-px:.6em} .pyg .btn--sm{--btn-fs:var(--fs-h3)} @media (hover:hover) and (min-width:900px){.pyg .btn:hover{background:var(--pyg-oro);color:var(--pyg-ink)}} .pyg .btn--prusia{background:var(--pyg-prusia);border-color:var(--pyg-prusia);color:var(--pyg-bg)} @media (hover:hover) and (min-width:900px){.pyg .btn--prusia:hover{background:var(--pyg-oro);border-color:var(--pyg-ink);color:var(--pyg-ink)}} .pyg .btn--out{background:var(--pyg-linea);color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));border-color:var(--pyg-linea);pointer-events:none} /* ── CHROME · barra fija ── */ /* La barra NO fija su altura: la DERIVA de la pastilla que contiene, añadiendo medio medianil de aire arriba y abajo. Así la regla «barra = pastilla + un medianil» se cumple por construcción y no puede desincronizarse de la pastilla. */ .pyg .p-bar{position:sticky;top:0;left:0;right:0;z-index:30;background:var(--pyg-ink);padding:calc(var(--gutter-horizontal) / 2) 0} .pyg .p-bar .in{max-width:none;margin:0;display:flex;align-items:center;gap:var(--sp-6);padding:0 var(--sp-3);min-width:0} /* El isotipo se DERIVA del alto de barra (la llena dejando un hilo de aire), en vez de fijar un alto que obligue a agrandar la barra. Mismo criterio para el botón. */ .pyg .p-bar .mark img{height:var(--pyg-pill-h);display:block;filter:brightness(0) invert(1)} .pyg .p-bar .mark{background:none;border:0;padding:0;cursor:pointer} .pyg .p-bar nav{flex:0 0 auto;margin-left:var(--sp-6);display:flex;align-items:center;gap:var(--sp-6);min-width:0} .pyg .p-bar nav a{font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.02em;text-transform:none;color:var(--pyg-neg-sec)} @media (hover:hover) and (min-width:900px){.pyg .p-bar nav a:hover{color:var(--pyg-oro)}} .pyg .p-bar .tools{margin-left:auto;display:flex;align-items:center;gap:var(--sp-5)} /* Los útiles del cromo son de la MISMA familia que las pastillas: contorno gris, altura de dos subceldas y radio de pastilla. Los de solo icono son círculos del mismo alto, no iconos sueltos flotando en la barra. */ .pyg .util{display:inline-flex;align-items:center;justify-content:center;gap:.35em;height:var(--pyg-pill-h);padding:0 .7em;border:1px solid color-mix(in srgb, var(--pyg-bg) 34%, transparent);border-radius:999px;font-family:var(--pyg-din);font-size:var(--fs-h3);font-weight:var(--pyg-din-dato);letter-spacing:.02em;text-transform:none;line-height:1;color:var(--pyg-bg);background:none;cursor:pointer} .pyg .util--icon{width:var(--pyg-pill-h);padding:0} @media (hover:hover) and (min-width:900px){.pyg .util:hover{color:var(--pyg-ink);background:var(--pyg-oro);border-color:var(--pyg-oro)}} .pyg .util svg{width:1.05em;height:1.05em} .pyg .util .ct{min-width:1.05em;height:1.05em;display:grid;place-items:center;background:var(--pyg-oro);color:var(--pyg-ink);font-size:var(--fs-small);font-weight:var(--pyg-din-enfasis);border-radius:50%} .pyg .langs{display:flex;align-items:center;gap:.15em;height:var(--pyg-pill-h);padding:0 .55em;border:1px solid color-mix(in srgb, var(--pyg-bg) 34%, transparent);border-radius:999px} .pyg .langs button{font-family:var(--pyg-din);font-size:var(--fs-h3);font-weight:var(--pyg-din-dato);letter-spacing:.02em;text-transform:none;line-height:1;color:color-mix(in srgb, var(--pyg-ink) 35%, var(--pyg-bg));background:none;border:0;cursor:pointer;padding:0 .18em} .pyg .langs button.on{color:var(--pyg-bg);font-weight:var(--pyg-din-enfasis)} /* El botón de vuelta al portafolio es la MISMA pastilla, tono oro (usa .btn). Rotula el DOMINIO en minúsculas y con el mismo grosor de lectura que el resto de pastillas — sin semi-negrita propia ni cuerpo reducido. */ /* CONTEXTO BARRA: sobre tinta, la pastilla por defecto sería invisible (mismo tono que el fondo). En la barra la PRIMARIA es oro llena — el catálogo — y la vuelta al portafolio queda como pastilla de contorno: misma geometría, jerarquía clara. */ .pyg .p-bar .btn{background:var(--pyg-oro);border-color:var(--pyg-oro);color:var(--pyg-ink)} @media (hover:hover) and (min-width:900px){.pyg .p-bar .btn:hover{background:var(--pyg-bg);border-color:var(--pyg-bg);color:var(--pyg-ink)}} .pyg .p-bar .btn.home{background:transparent;border-color:var(--pyg-oro);color:var(--pyg-oro)} @media (hover:hover) and (min-width:900px){.pyg .p-bar .btn.home:hover{background:var(--pyg-oro);border-color:var(--pyg-oro);color:var(--pyg-ink)}} .pyg .home::before{content:'\2190';text-indent:0;margin-right:-.1em} @media (hover:hover) and (min-width:900px){.pyg .home:hover::before{color:var(--pyg-ink)}} /* (el hover de .home queda definido en el bloque de contexto de barra) */ /* ── SUSTRATO · la página ES el grid (resolución de SUBCELDA, no de celda) ── */ .pyg .page{position:relative;display:grid;grid-template-columns:var(--tc);grid-template-rows:var(--tr)} .pyg .isla{min-width:0;min-height:0} /* ── HERO ── el lettermark LLENA su caja SIN deformarse: la caja se ancla a la rejilla y la máscara usa `contain`, de modo que la proporción real del asset (1490.94 × 265.3) manda siempre sobre la caja. Se pinta en PRUSIA por máscara (el SVG es negro plano). */ .pyg .hero-lm{display:flex;align-items:center;justify-content:center} .pyg .hero-lm .lm{display:block;width:100%;height:auto} .pyg .hero-line{display:flex;align-items:center;justify-content:center;font-size:var(--fs-h2);font-weight:var(--pyg-din-lectura);line-height:1;color:color-mix(in srgb, var(--pyg-ink) 83%, var(--pyg-bg));text-align:center;text-wrap:balance} .pyg .hero-cta{display:flex;align-items:center;justify-content:center;gap:var(--sp-7)} /* ── MARQUEES · banda a sangre (4 subfilas de una celda) ── */ /* La banda mide SIEMPRE dos subceldas, la fije la rejilla o no. */ .pyg .mq{height:var(--pyg-pill-h);overflow:hidden;background:var(--pyg-ink);color:var(--pyg-bg);white-space:nowrap;display:flex;align-items:center} .pyg .mq .tk{display:flex;align-items:center;width:max-content;animation:pmqx 68s linear infinite} /* CENTRADO ÓPTICO por tipo de pieza (medido): la minúscula Bodoni tiene ascendentes y descendentes (baja .05em) y la versalita de palo no (sube .03em). Cada caja de tinta pide su compensación; la banda mide siempre 52 px. */ .pyg .mq .b{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:"opsz" 22,"wght" 700;font-size:var(--pyg-mq-fs);line-height:1;position:relative;top:-.11em} /* Versalitas sin descendentes: se bajan medio descendente para centrar de verdad. */ .pyg .mq .d{font-size:var(--pyg-mq-caps);font-weight:var(--pyg-din-lectura);letter-spacing:.04em;text-transform:uppercase;color:var(--pyg-neg-sec);line-height:var(--pyg-pill-h);position:relative;top:-.045em} .pyg .mq .sep{font-size:var(--fs-lg);color:var(--pyg-neg-sec);margin:0 14px} .pyg .mq--prusia{background:var(--pyg-prusia)} .pyg .mq--prusia .b,.pyg .mq--prusia .d{color:var(--pyg-bg)} .pyg .mq--prusia .sep{color:color-mix(in srgb, var(--pyg-bg) 55%, transparent)} .pyg .mq--verde{background:var(--pyg-verde)} .pyg .mq--verde .b,.pyg .mq--verde .d{color:var(--pyg-bg)} .pyg .mq--verde .sep{color:color-mix(in srgb, var(--pyg-bg) 55%, transparent)} @keyframes pmqx{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.pyg .mq .tk{animation:none}} /* ── CABECERA DE SECCIÓN · rótulo limpio + filete a sangre aparte ── El rótulo de sección comparte cuerpo con la pastilla: un botón no puede rotularse más grande que el título de la sección a la que lleva. */ /* El PESO se declara explícito (900) además del eje variable: heredar 300 con "wght" 900 hace que Firefox no case la variable y sustituya la familia. */ .pyg .lbl{grid-column:1/42;display:flex;align-items:center;gap:var(--sp-6);padding:0 var(--sp-6);background:var(--pyg-oro);color:var(--pyg-ink);font-family:var(--pyg-didona);font-style:italic;font-weight:900;font-variation-settings:var(--pyg-dd-display);font-size:var(--fs-h1);line-height:1;letter-spacing:var(--dd-track);text-transform:none;overflow:visible} /* FILETE ESTRUCTURADOR: grosor de MEDIANIL. Divide la página en duro y acentúa el título de sección; no es una línea decorativa. */ .pyg .rulel{display:none} /* el filete lo ES la banda de cabecera */ .pyg .lbl a{margin-left:auto;font-family:var(--pyg-din);font-style:normal;font-variation-settings:normal;font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:none;color:var(--pyg-ink)} @media (hover:hover) and (min-width:900px){.pyg .lbl a:hover{color:var(--pyg-prusia)}} /* SUPERFICIES BODONI · el editor envuelve el texto suelto en un , y el reset de familia de la tienda alcanza a ese envoltorio: hay que reafirmar la didona en los hijos, o el rótulo cae a la de palo. */ .pyg .lbl>span,.pyg .cine h2>span,.pyg .fi-cartela h1>span,.pyg .fi-sec h2>span,.pyg .fi-sib .lt>span,.pyg .fi-unit .u-name>span,.pyg .fi-unit .u-price>span,.pyg .drawer .dh h3>span,.pyg .li .nm>span,.pyg .li .pr>span,.pyg .mq .b>span{font-family:inherit;font-style:inherit;font-weight:inherit;font-variation-settings:inherit;letter-spacing:inherit} .pyg .mfoot .lbl,.pyg .fi-sec .lbl{background:none} /* ── tarjeta de producto · canto de ventana f1 ── */ .pyg .pc{border:0;padding:var(--sp-4);display:flex;flex-direction:column;color:var(--pyg-ink);min-width:0} .pyg .pc .ph{flex:1;background:var(--pyg-superficie);margin-bottom:var(--sp-3)} .pyg .pc .co{font-size:var(--fs-small);font-weight:var(--pyg-din-rotulo);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg))} .pyg .pc h3{font-family:var(--pyg-din);font-weight:var(--pyg-din-dato);font-size:var(--fs-h3);line-height:1.05;letter-spacing:.01em;margin:2px 0 4px} .pyg .pc .rg{font-size:var(--fs-small);font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--pyg-prusia);margin-bottom:5px} .pyg .pc .pr{display:flex;gap:10px;align-items:baseline;font-size:var(--fs-base);font-weight:var(--pyg-din-dato);color:var(--pyg-gris)} .pyg .pc .st{font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--pyg-prusia)} /* ── router de líneas ── */ .pyg .router{} .pyg .cat{border-left:var(--gutter-vertical) solid var(--pyg-ink);padding:var(--sp-5) var(--sp-6);display:flex;flex-direction:column;justify-content:center;min-width:0;color:var(--pyg-ink)} .pyg .cat:first-child{border-left:0} .pyg .cat .k{font-family:var(--pyg-din);font-weight:var(--pyg-din-dato);font-size:var(--fs-h3);line-height:1.05;letter-spacing:.01em;margin:0 0 6px} .pyg .cat .n{font-size:var(--fs-base);font-weight:var(--pyg-din-lectura);color:var(--pyg-gris);line-height:1.45} /* Es la única acción del enrutador: cuerpo de lectura, nunca el escalón legal. */ .pyg .cat .go{margin-top:auto;padding-top:var(--sp-4);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.12em;text-transform:uppercase;color:var(--pyg-prusia)} @media (hover:hover) and (min-width:900px){.pyg .cat:hover .k{color:var(--pyg-prusia)}} /* ── colecciones · cartela ── */ .pyg .cl{position:relative;border:0;background:var(--pyg-superficie);display:flex;align-items:flex-end;min-width:0} .pyg .cl .cartela{background:var(--pyg-ink);color:var(--pyg-bg);padding:var(--sp-5) var(--sp-6);width:100%} .pyg .cl .cartela .sello{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--pyg-neg-sec);margin:0 0 var(--sp-2)} .pyg .cl .cartela h3{font-family:var(--pyg-din);font-style:normal;font-variation-settings:normal;font-weight:var(--pyg-din-dato);font-size:var(--fs-h2);line-height:1;letter-spacing:.01em;margin:0} /* Cartela de colección: DOS renglones (título + régimen). El sello sobraba. */ .pyg .cl .cartela .var{font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--pyg-oro);margin:var(--sp-2) 0 0} /* ── Páginas de Álbum · feature ── */ .pyg .cine{background:var(--pyg-ink);color:var(--pyg-bg);display:flex;align-items:center} .pyg .cine .in{width:min(1197px,100%);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp-7);align-items:center;padding:var(--sp-6)} .pyg .cine .plate{position:relative;aspect-ratio:12/5;background:color-mix(in srgb, var(--pyg-ink) 94%, var(--pyg-bg));display:grid;place-items:center} .pyg .cine .plate span{font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg))} .pyg .cine .vnav{position:absolute;left:12px;bottom:10px;display:flex;gap:6px} .pyg .cine .vb{height:var(--pyg-pill-h);min-width:var(--pyg-pill-h);display:inline-flex;align-items:center;justify-content:center;font-family:var(--pyg-din);font-size:var(--fs-h3);line-height:1;background:var(--pyg-oro);color:var(--pyg-ink);border:0;border-radius:999px;cursor:pointer} @media (hover:hover) and (min-width:900px){.pyg .cine .vb:hover{background:var(--pyg-oro);color:var(--pyg-ink);border-color:var(--pyg-oro)}} .pyg .cine .sello{font-size:var(--fs-small);font-weight:var(--pyg-din-rotulo);letter-spacing:.16em;text-transform:uppercase;color:var(--pyg-oro);margin:0 0 var(--sp-3)} .pyg .cine h2{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-sub);font-size:var(--fs-h2);line-height:1.02;letter-spacing:var(--dd-track);color:var(--pyg-bg);margin:0 0 var(--sp-4)} .pyg .cine p{font-size:var(--fs-lg);line-height:1.55;color:var(--pyg-neg-sec);margin:0 0 var(--sp-5)} .pyg .cine .btn{background:var(--pyg-oro);color:var(--pyg-ink);border-color:var(--pyg-oro)} @media (hover:hover) and (min-width:900px){.pyg .cine .btn:hover{background:var(--pyg-bg);border-color:var(--pyg-bg)}} /* ── mega-footer ── */ .pyg .mfoot{background:var(--pyg-ink);color:var(--pyg-neg-sec);display:flex;flex-direction:column} .pyg .mfoot .in{width:min(1197px,100%);margin:0 auto;padding:var(--sp-6);flex:1;display:flex;flex-direction:column} .pyg .mfoot .ret{display:flex;align-items:center;padding-bottom:var(--sp-5);border-bottom:var(--gutter-horizontal) solid var(--pyg-ink)} .pyg .mfoot .ret img{height:34px;filter:brightness(0) invert(1)} .pyg .mfoot .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter-vertical);padding:var(--sp-5) 0;flex:1} .pyg .mfoot .cols b{display:block;color:var(--pyg-bg);font-size:var(--fs-micro);font-weight:var(--pyg-din-rotulo);letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--sp-3)} .pyg .mfoot .cols a,.pyg .mfoot .cols span{display:block;color:var(--pyg-neg-sec);font-size:var(--fs-small);line-height:1.9} @media (hover:hover) and (min-width:900px){.pyg .mfoot .cols a:hover{color:var(--pyg-oro)}} /* La fila inferior va en el escalón pequeño; SOLO la línea de razón social baja al micro — es la única morralla legal de la tienda. */ .pyg .mfoot .bottom{display:flex;align-items:center;gap:var(--sp-5);padding-top:var(--sp-4);border-top:var(--gutter-horizontal) solid var(--pyg-ink);font-size:var(--fs-small);color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));flex-wrap:wrap} .pyg .mfoot .bottom .legal{font-size:var(--fs-micro)} .pyg .mfoot .bottom .sp{margin-left:auto} .pyg .mfoot .bottom a{color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg))} @media (hover:hover) and (min-width:900px){.pyg .mfoot .bottom a:hover{color:var(--pyg-oro)}} .pyg .mfoot .pay{display:flex;gap:8px;flex-wrap:wrap} /* HIJO DIRECTO, no descendencia: el editor envuelve el texto en un y un selector de descendencia le pinta un segundo marco dentro. */ .pyg .mfoot .pay>span{border:1px solid color-mix(in srgb, var(--pyg-bg) 30%, transparent);border-radius:var(--r-pill);padding:2px 8px;font-size:var(--fs-small);letter-spacing:.06em} .pyg .mfoot .colofon{border-top:var(--gutter-horizontal) solid color-mix(in srgb, var(--pyg-bg) 16%, transparent)} /* El colófón usa el MISMO tratamiento por máscara que el héroe (blanco en vez de prusia) para que las dos instancias del lettermark no puedan divergir. */ .pyg .mfoot .colofon .lm{display:block;width:min(1197px,96%);height:auto;margin:var(--sp-5) auto;opacity:.42} /* ===================================================================== FICHA DE PRODUCTO · página editorial larga (inyeccion-tienda-campos §5) Orden canónico ÚNICO: 1 Transacción · 2 La pieza · 3 Autenticidad y procedencia · 4 La colección · 5 Universo y enlaces hermanos. Botones de compra INTERCALADOS (no uno solo arriba). Unidades comprables múltiples (§3): original · enmarcado · lámina — cada una con precio/stock/estado; AGOTADO permanece visible marcado. Hereda el tratamiento de las fichas preview. Ancho de lectura contenido (no la rejilla de subceldas del escaparate). ===================================================================== */ .pyg .fi{max-width:1200px;margin:0 auto;padding:var(--sp-8) var(--sp-6) 0} .pyg .fi-crumb{font-size:var(--fs-small);letter-spacing:.04em;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));margin:0 0 var(--sp-6)} .pyg .fi-crumb a{color:var(--pyg-gris)} /* TRAMO 1 · transacción — layout POR RÉGIMEN (A1): postal vertical (10×15) vs cinemascope horizontal (Páginas de Álbum). Una plantilla que sirva a ambos por igual está mal construida. */ .pyg .fi-top{display:grid;gap:var(--sp-8);align-items:start;margin-bottom:var(--sp-9)} .pyg .fi-top.postal{grid-template-columns:0.85fr 1.15fr} .pyg .fi-top.postal .fi-plate{aspect-ratio:2/3;max-width:360px} .pyg .fi-top.scope{display:block} .pyg .fi-top.scope .fi-plate{aspect-ratio:12/5;margin-bottom:var(--sp-6)} .pyg .fi-top.scope .fi-panel{max-width:760px} .pyg .fi-plate{position:relative;background:var(--pyg-superficie);border:1px solid var(--pyg-linea);display:grid;place-items:center} .pyg .fi-plate .fr{font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb, var(--pyg-ink) 36%, var(--pyg-bg));text-align:center;padding:0 20px} @media (max-width:900px){.pyg .fi-top.postal{grid-template-columns:1fr}} .pyg .fi-plate .vnav{position:absolute;left:12px;bottom:10px;display:flex;gap:6px} .pyg .fi-plate .vb{width:32px;height:32px;border:1px solid var(--pyg-ink);border-radius:999px;background:var(--pyg-bg);color:var(--pyg-ink);cursor:pointer;font-size:16px;display:grid;place-items:center;transition:.15s;padding:0} @media (hover:hover) and (min-width:900px){.pyg .fi-plate .vb:hover{background:var(--pyg-oro)}} .pyg .fi-plate .tc{position:absolute;right:12px;bottom:10px;font-size:var(--fs-small);color:color-mix(in srgb, var(--pyg-ink) 73%, var(--pyg-bg));font-variant-numeric:tabular-nums} .pyg .fi-thumbs{display:flex;gap:10px;margin-top:10px} .pyg .fi-thumbs button{width:80px;aspect-ratio:4/5;background:var(--pyg-superficie);border:1px solid var(--pyg-linea);cursor:pointer;padding:0} .pyg .fi-thumbs button.on{outline:2px solid var(--pyg-ink);outline-offset:-2px} .pyg .fi-cartela{background:var(--pyg-ink);color:var(--pyg-bg);padding:var(--sp-6) var(--sp-7)} /* Sin versalita forzada: la grafía canónica de cada marca (FacelessD) es un rasgo gráfico y no puede destruirla una transformación de CSS. */ .pyg .fi-cartela .sello{font-size:var(--fs-small);letter-spacing:.16em;text-transform:none;color:var(--pyg-neg-sec);margin:0 0 var(--sp-3)} .pyg .fi-cartela h1{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-display);font-variant-ligatures:common-ligatures discretionary-ligatures;font-size:var(--fs-h1);line-height:.98;letter-spacing:var(--dd-track);color:var(--pyg-bg);margin:0} .pyg .fi-cartela .var{font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.16em;text-transform:uppercase;color:var(--pyg-oro);margin:var(--sp-2) 0 0} .pyg .fi-serie{font-family:var(--pyg-didona);font-variation-settings:var(--pyg-dd-editorial);font-size:var(--fs-h3);color:color-mix(in srgb, var(--pyg-ink) 73%, var(--pyg-bg));margin:var(--sp-5) 0} .pyg .fi-rgm{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--sp-5)} .pyg .fi-rgm>span{font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--pyg-ink);padding:0 .8em;white-space:nowrap;height:var(--pyg-pill-h);display:inline-flex;align-items:center;border-radius:999px} .pyg .fi-rgm span.gr{background:var(--pyg-oro)} /* unidades comprables (§3) — cada unidad su régimen/precio/stock/estado */ .pyg .fi-units{border-top:1px solid var(--pyg-linea);margin-bottom:var(--sp-5)} .pyg .fi-unit{width:100%;display:grid;grid-template-columns:1fr auto;gap:var(--sp-4) var(--sp-5);align-items:baseline;padding:var(--sp-4) 0;border-bottom:1px solid color-mix(in srgb, var(--pyg-ink) 8%, var(--pyg-bg));background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;text-align:left;color:var(--pyg-ink);transition:.15s} @media (hover:hover) and (min-width:900px){.pyg .fi-unit:hover:not(.out){background:color-mix(in srgb, var(--pyg-ink) 3%, var(--pyg-bg))}} .pyg .fi-unit.on{background:color-mix(in srgb, var(--pyg-ink) 3%, var(--pyg-bg))} .pyg .fi-unit .u-name{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-sub);font-size:var(--fs-h3);line-height:1} .pyg .fi-unit .u-meta{font-size:var(--fs-base);font-weight:var(--pyg-din-dato);color:var(--pyg-gris);line-height:1.5;margin-top:3px} .pyg .fi-unit .u-price{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-sub);font-size:var(--fs-h3);font-variant-numeric:tabular-nums;grid-row:span 2;align-self:center} .pyg .fi-unit .u-state{font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--pyg-prusia)} .pyg .fi-unit.out{cursor:default} .pyg .fi-unit.out .u-name,.pyg .fi-unit.out .u-price{color:color-mix(in srgb, var(--pyg-ink) 42%, var(--pyg-bg))} .pyg .fi-unit.out .u-price{text-decoration:line-through} .pyg .fi-unit.out .u-state{color:color-mix(in srgb, var(--pyg-ink) 42%, var(--pyg-bg))} .pyg .fi-radio{width:16px;height:16px;border:1px solid var(--pyg-ink);border-radius:999px;display:inline-grid;place-items:center;margin-right:9px;vertical-align:-2px} .pyg .fi-unit.on .fi-radio::after{content:'';width:8px;height:8px;border-radius:999px;background:var(--pyg-oro)} /* selector de acabado (§4 · opciones por gama) */ .pyg .fi-fin{border-top:1px solid var(--pyg-linea);padding-top:var(--sp-4);margin-bottom:var(--sp-5)} .pyg .fi-fin .flbl{font-size:var(--fs-small);font-weight:var(--pyg-din-rotulo);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));margin-bottom:var(--sp-3)} .pyg .fi-fin .frow{display:flex;gap:8px;flex-wrap:wrap} .pyg .fi-fin .frow button{font-family:var(--pyg-din);font-size:var(--fs-small);font-weight:var(--pyg-din-dato);letter-spacing:.02em;border:1px solid var(--pyg-ink);background:var(--pyg-bg);color:var(--pyg-ink);padding:7px 14px;cursor:pointer;transition:.15s;white-space:nowrap} .pyg .fi-fin .frow button.on{background:var(--pyg-oro)} .pyg .fi-fin .fnote{font-size:var(--fs-small);color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));line-height:1.5;margin-top:var(--sp-3)} .pyg .fi-buy{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-4)} .pyg .fi-buy .note{font-size:var(--fs-base);color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));max-width:32ch;line-height:1.5} /* El envío es dato que el comprador NECESITA: cuerpo de lectura. Solo la razón social baja al escalón pequeño — es la única morralla legal de la línea. */ .pyg .fi-ship{font-size:var(--fs-base);color:var(--pyg-gris);line-height:1.6;border-top:1px solid var(--pyg-linea);padding-top:var(--sp-4)} .pyg .fi-ship .legal{display:block;font-size:var(--fs-small);color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));margin-top:var(--sp-2)} .pyg .fi-legal{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-3)} .pyg .fi-legal a{font-size:var(--fs-base);letter-spacing:.02em;color:var(--pyg-prusia);text-decoration:underline;text-underline-offset:2px;cursor:pointer} .pyg .fi-ship b{font-weight:var(--pyg-din-rotulo);color:var(--pyg-ink)} /* TRAMOS 2–5 · editorial a sangre de lectura, botón de compra intercalado */ .pyg .fi-band{overflow:hidden;background:var(--pyg-ink);color:var(--pyg-bg);white-space:nowrap;display:flex;align-items:center;height:var(--pyg-pill-h);margin:var(--sp-8) 0} .pyg .fi-sec{max-width:1200px;margin:0 auto;padding:var(--sp-8) var(--sp-6);display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp-9);align-items:start} .pyg .fi-sec .deeplbl{grid-column:1/3;font-size:var(--fs-lg);font-weight:var(--pyg-din-rotulo);letter-spacing:.2em;text-transform:uppercase;color:var(--pyg-ink);margin:0 0 var(--sp-2);display:flex;align-items:center;gap:14px} .pyg .fi-sec .deeplbl::after{content:'';flex:1;height:var(--gutter-horizontal);background:var(--pyg-ink)} .pyg .fi-sec h2{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-sub);font-size:var(--fs-h2);line-height:1.02;letter-spacing:var(--dd-track);margin:0 0 var(--sp-5)} .pyg .fi-sec p{font-size:var(--fs-lg);line-height:1.75;color:color-mix(in srgb, var(--pyg-ink) 83%, var(--pyg-bg));max-width:60ch;margin:0 0 var(--sp-4)} .pyg .fi-sec p b{font-weight:var(--pyg-din-rotulo);color:var(--pyg-ink)} .pyg .fi-sec .more{font-size:var(--fs-small);font-weight:var(--pyg-din-rotulo);letter-spacing:.06em;color:var(--pyg-prusia);background:none;border:0;cursor:pointer;padding:0;text-transform:none} .pyg .fi-sec .asd .ph{aspect-ratio:3/4;background:var(--pyg-superficie);border:1px solid var(--pyg-linea)} .pyg .fi-inline-buy{grid-column:1/3;display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--pyg-linea);padding-top:var(--sp-5);margin-top:var(--sp-3)} .pyg .fi-inline-buy .note{font-size:var(--fs-small);color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg))} /* universo · enlaces hermanos */ .pyg .fi-sib{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter-vertical)} .pyg .fi-sib a{border:1px solid var(--pyg-linea);padding:var(--sp-5);color:var(--pyg-ink);display:block} @media (hover:hover) and (min-width:900px){.pyg .fi-sib a:hover{border-color:var(--pyg-ink)}} .pyg .fi-sib .lk{font-size:var(--fs-small);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));margin-bottom:6px} .pyg .fi-sib .lt{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-sub);font-size:var(--fs-h3)} @media (max-width:900px){.pyg .fi-top,.pyg .fi-sec{grid-template-columns:1fr}.pyg .fi-sec .deeplbl,.pyg .fi-inline-buy{grid-column:1}} /* ===================================================================== CARRITO (drawer) + CHECKOUT + ESTADOS DE COMPRA Plantillas AGNÓSTICAS de proveedor (inyeccion-5 §9): sin pasarela asumida; IVA, gastos y condiciones son huecos ⬜ que el asesor técnico rellena. El carrito puede mezclar líneas de VENDEDORES LEGALES distintos → checkout agrupado por vendedor (cada uno con su envío/condiciones). ===================================================================== */ /* El velo y el cajón SOLO existen cuando el carrito está abierto: si se quedaran montados e invisibles, cubrirían la página entera (posición fija, z-index alto) y el editor no podría seleccionar ningún elemento debajo. Entran con animación, no con transición, porque nacen ya visibles. */ .pyg .cart-scrim{position:fixed;inset:0;z-index:190;background:color-mix(in srgb, var(--pyg-ink) 50%, transparent);animation:pyg-scrim-in .2s ease both} @keyframes pyg-scrim-in{from{opacity:0}to{opacity:1}} .pyg .drawer{position:fixed;top:0;right:0;bottom:0;z-index:200;width:min(420px,100%);background:var(--pyg-bg);display:flex;flex-direction:column;animation:pyg-drawer-in .28s cubic-bezier(.2,.7,.2,1) both} @keyframes pyg-drawer-in{from{transform:translateX(100%)}to{transform:none}} @media (prefers-reduced-motion:reduce){.pyg .cart-scrim,.pyg .drawer{animation:none}} .pyg .drawer .dh{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);border-bottom:var(--pyg-f3) solid var(--pyg-ink)} .pyg .drawer .dh h3{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-sub);font-size:var(--fs-h3);margin:0;letter-spacing:var(--dd-track)} .pyg .drawer .dh .x{margin-left:auto;background:none;border:0;line-height:1;color:var(--pyg-ink);cursor:pointer;padding:0} .pyg .drawer .body{flex:1;overflow-y:auto;padding:var(--sp-5) var(--sp-6)} .pyg .drawer .empty{text-align:center;color:var(--pyg-gris);padding:var(--sp-11) var(--sp-5)} .pyg .drawer .empty .bg{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-sub);font-size:var(--fs-h3);color:var(--pyg-ink);margin:0 0 var(--sp-3)} .pyg .li{display:grid;grid-template-columns:56px 1fr auto;gap:var(--sp-4);padding:var(--sp-5) 0;border-bottom:1px solid var(--pyg-linea)} .pyg .li .th{width:56px;aspect-ratio:4/5;background:var(--pyg-superficie);border:1px solid var(--pyg-linea)} .pyg .li .nm{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-sub);font-size:var(--fs-h3);line-height:1.05} .pyg .li .mt{font-size:var(--fs-small);color:var(--pyg-gris);line-height:1.5;margin-top:3px} .pyg .li .sl{font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--pyg-prusia);margin-top:4px} .pyg .li .rm{font-size:var(--fs-small);color:var(--pyg-gris);background:none;border:0;cursor:pointer;padding:2px 0;text-align:left} @media (hover:hover) and (min-width:900px){.pyg .li .rm:hover{color:var(--pyg-prusia)}} .pyg .li .pr{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-sub);font-size:var(--fs-h3);font-variant-numeric:tabular-nums;text-align:right} .pyg .drawer .foot{border-top:var(--pyg-f3) solid var(--pyg-ink);padding:var(--sp-5) var(--sp-6)} .pyg .drawer .foot .row{display:flex;justify-content:space-between;font-size:var(--fs-small);color:var(--pyg-gris);padding:3px 0} .pyg .drawer .foot .row.tot{font-size:var(--fs-lg);color:var(--pyg-ink);font-weight:var(--pyg-din-rotulo);border-top:1px solid var(--pyg-linea);margin-top:var(--sp-3);padding-top:var(--sp-4)} .pyg .drawer .foot .vat{font-size:var(--fs-micro);color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));line-height:1.5;margin:var(--sp-3) 0} .pyg .drawer .foot .btn{width:100%;margin-top:var(--sp-3)} /* checkout como página */ .pyg .co{max-width:960px;margin:0 auto;padding:var(--sp-9) var(--sp-6)} .pyg .co h1{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-display);font-size:var(--fs-h1);letter-spacing:var(--dd-track);margin:0 0 var(--sp-3)} .pyg .co .lead{font-size:var(--fs-base);color:var(--pyg-gris);margin:0 0 var(--sp-8);max-width:56ch;line-height:1.6} .pyg .co .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--sp-9);align-items:start} .pyg .co .card{border:1px solid var(--pyg-ink);padding:var(--sp-6)} .pyg .co .seller-grp{border:1px solid var(--pyg-linea);padding:var(--sp-5);margin-bottom:var(--sp-5)} .pyg .co .seller-grp .sh{font-size:var(--fs-small);font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--pyg-prusia);border-bottom:1px solid var(--pyg-linea);padding-bottom:var(--sp-3);margin-bottom:var(--sp-3)} .pyg .co .fieldset{display:grid;gap:var(--sp-4)} .pyg .co label{display:block;font-size:var(--fs-small);font-weight:var(--pyg-din-rotulo);letter-spacing:.04em;color:color-mix(in srgb, var(--pyg-ink) 73%, var(--pyg-bg));margin-bottom:5px} .pyg .co input{width:100%;font-family:var(--pyg-din);font-size:var(--fs-base);padding:10px 12px;border:1px solid var(--pyg-linea);background:var(--pyg-bg);color:var(--pyg-ink)} .pyg .co input:focus{outline:none;border-color:var(--pyg-ink)} .pyg .co .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)} .pyg .co .pay-ph{border:1px dashed var(--pyg-linea);background:color-mix(in srgb, var(--pyg-ink) 1%, var(--pyg-bg));padding:var(--sp-6);text-align:center;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));font-size:var(--fs-small);line-height:1.6} .pyg .co .sum .row{display:flex;justify-content:space-between;font-size:var(--fs-small);color:var(--pyg-gris);padding:4px 0} .pyg .co .sum .row.tot{font-size:var(--fs-lg);color:var(--pyg-ink);font-weight:var(--pyg-din-rotulo);border-top:1px solid var(--pyg-linea);margin-top:var(--sp-3);padding-top:var(--sp-4)} .pyg .co .sum .vat{font-size:var(--fs-micro);color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));line-height:1.5;margin-top:var(--sp-4)} .pyg .co .terms{font-size:var(--fs-micro);color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));line-height:1.6;margin-top:var(--sp-5)} .pyg .co .terms a{color:var(--pyg-prusia)} .pyg .co .btn{width:100%;margin-top:var(--sp-5)} .pyg .co .back{font-size:var(--fs-small);color:var(--pyg-gris);background:none;border:0;cursor:pointer;padding:0;margin-bottom:var(--sp-5)} /* confirmación */ .pyg .conf{max-width:640px;margin:0 auto;padding:var(--sp-14) var(--sp-6);text-align:center} .pyg .conf .sello{font-size:var(--fs-small);font-weight:var(--pyg-din-rotulo);letter-spacing:.18em;text-transform:uppercase;color:var(--pyg-prusia);margin-bottom:var(--sp-5)} .pyg .conf h1{font-family:var(--pyg-didona);font-style:italic;font-variation-settings:var(--pyg-dd-display);font-size:var(--fs-h1);letter-spacing:var(--dd-track);margin:0 0 var(--sp-5)} .pyg .conf p{font-size:var(--fs-base);color:color-mix(in srgb, var(--pyg-ink) 83%, var(--pyg-bg));line-height:1.7;max-width:46ch;margin:0 auto var(--sp-5)} @media (max-width:900px){.pyg .co .grid{grid-template-columns:1fr}} /* ── OVERLAY DE REJILLA CORDOBESA (tecla G) ── Se PINTA como fondo de un pseudo-elemento, no como celdas del documento: así es físicamente inseleccionable e imborrable por el editor (antes eran cientos de celdas reales que interceptaban el clic y podían borrarse por error). Geometría del esqueleto (core.css): líneas de celda + mediana (½) + cuartas (¼,¾). Tintas propias de P&G. La guía se dibuja continua, no discontinua. */ .pyg::before{content:'';display:none;position:absolute;inset:0;z-index:90;pointer-events:none; background-image: linear-gradient(to right,var(--pyg-rej-cell) 0 1px,transparent 1px), linear-gradient(to right,var(--pyg-rej-cell) 0 1px,transparent 1px), linear-gradient(to right,var(--pyg-rej-med) 0 1px,transparent 1px), linear-gradient(to right,var(--pyg-rej-qrt) 0 1px,transparent 1px), linear-gradient(to right,var(--pyg-rej-qrt) 0 1px,transparent 1px), linear-gradient(to bottom,var(--pyg-rej-cell) 0 1px,transparent 1px), linear-gradient(to bottom,var(--pyg-rej-cell) 0 1px,transparent 1px), linear-gradient(to bottom,var(--pyg-rej-med) 0 1px,transparent 1px), linear-gradient(to bottom,var(--pyg-rej-qrt) 0 1px,transparent 1px), linear-gradient(to bottom,var(--pyg-rej-qrt) 0 1px,transparent 1px); background-size:var(--pyg-pv) 100%,var(--pyg-pv) 100%,var(--pyg-pv) 100%,var(--pyg-pv) 100%,var(--pyg-pv) 100%,100% var(--pyg-ph),100% var(--pyg-ph),100% var(--pyg-ph),100% var(--pyg-ph),100% var(--pyg-ph); background-position: var(--pyg-ox) 0,calc(var(--pyg-ox) + var(--cell-w) - 1px) 0,calc(var(--pyg-ox) + var(--cell-w) / 2) 0,calc(var(--pyg-ox) + var(--cell-w) / 4) 0,calc(var(--pyg-ox) + 3 * var(--cell-w) / 4) 0, 0 var(--pyg-header),0 calc(var(--pyg-header) + var(--cell-h) - 1px),0 calc(var(--pyg-header) + var(--cell-h) / 2),0 calc(var(--pyg-header) + var(--cell-h) / 4),0 calc(var(--pyg-header) + 3 * var(--cell-h) / 4); background-repeat:repeat} @media print{ .pyg::before{display:block !important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .pyg::after{display:none} } /* ── toast ── */ .pyg .p-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;background:var(--pyg-ink);color:var(--pyg-oro);font-weight:var(--pyg-din-rotulo);letter-spacing:.08em;text-transform:uppercase;font-size:var(--fs-small);padding:11px 22px;border-radius:999px} /* Por debajo de 1240 px se pliegan los enlaces de texto SECUNDARIOS, nunca la pastilla de catálogo: es navegación primaria y sobrevive a cualquier ancho. */ @media (max-width:1240px){.pyg .p-bar nav a{display:none}} /* ── SISTEMA ÚNICO DE SECCIÓN ────────────────────────────────────────── Las tres secciones de contenido —novedades, catálogo, colecciones— comparten UNA anatomía: una TIRA a sangre (columna 1/42) con filete de medianil arriba y abajo que llega a los extremos de la página, piezas separadas por medianiles VERTICALES del mismo cuerpo, y cada pieza = imagen + PANCARTA NEGRA a todo su ancho. Los cuerpos son los mismos en las tres: título Bodoni h2, régimen Barlow base en oro, dato Barlow base. Solo cambia cuántas piezas caben. */ .pyg .tira{display:grid;gap:0;background:var(--pyg-ink);border-top:var(--gutter-horizontal) solid var(--pyg-ink);border-bottom:var(--gutter-horizontal) solid var(--pyg-ink)} .pyg .tira--2{grid-template-columns:repeat(2,1fr)} .pyg .tira--3{grid-template-columns:repeat(3,1fr)} .pyg .tira--4{grid-template-columns:repeat(4,1fr)} /* La pieza es una rejilla de DOS filas compartidas por toda la tira: imagen arriba, pancarta abajo con altura anclada a la rejilla. Así la banda negra arranca a la MISMA línea en todas las piezas, largo del texto aparte. */ .pyg .tira{grid-auto-rows:1fr} /* Altura de pancarta POR TIRA: cada variante tiene su contenido y su propio número de subceldas. La alineación dentro de la tira se mantiene; la imagen recupera su dominancia y la banda deja de ser un rectángulo negro vacío. */ .pyg .tira--2{--cartela-h:calc(4 * var(--subcell-h))} .pyg .tira--3{--cartela-h:calc(6 * var(--subcell-h))} .pyg .tira--4{--cartela-h:calc(7 * var(--subcell-h))} .pyg .tira .pieza{display:grid;grid-template-rows:1fr var(--cartela-h);min-width:0;background:var(--pyg-superficie);color:var(--pyg-bg);cursor:pointer;border-left:var(--gutter-vertical) solid var(--pyg-ink)} .pyg .router .pieza{grid-template-rows:1fr} .pyg .tira .pieza:first-child{border-left:0} .pyg .tira .pieza>.ph{min-height:0} .pyg .tira .cartela{background:var(--pyg-ink);color:var(--pyg-bg);padding:var(--sp-5) var(--sp-6);width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:center} .pyg .tira .cartela .sello{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.14em;text-transform:uppercase;color:var(--pyg-neg-sec);margin:0 0 var(--sp-2)} /* Los nombres de pieza van en la de PALO: la Bodoni queda reservada a los acentos de marquesina y a los títulos de sección. */ .pyg .tira .cartela h3{font-family:var(--pyg-din);font-style:normal;font-weight:var(--pyg-din-dato);font-variation-settings:normal;font-size:var(--fs-h2);line-height:1.02;letter-spacing:.01em;text-transform:none;text-wrap:balance;color:var(--pyg-bg);margin:0} .pyg .tira .cartela h3>span{font-family:inherit;font-style:inherit;font-weight:inherit;font-variation-settings:inherit;letter-spacing:inherit} .pyg .tira .cartela .var{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--pyg-oro);margin:var(--sp-2) 0 0} .pyg .tira .cartela .dato{display:flex;gap:var(--sp-4);align-items:baseline;font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-dato);color:var(--pyg-neg-sec);margin:var(--sp-3) 0 0} .pyg .tira .cartela .dato span{color:var(--pyg-oro);letter-spacing:.08em;text-transform:uppercase} @media (hover:hover) and (min-width:900px){.pyg .tira .pieza:hover .cartela h3{color:var(--pyg-oro)}} .pyg .hueco{font-family:var(--pyg-din);font-style:normal;font-weight:var(--pyg-din-dato);font-variation-settings:normal;letter-spacing:.02em} .pyg .router .pieza{justify-content:center;background:var(--pyg-ink)} /* El pie reparte sus columnas por contenido: al desdoblarse Legal en dos juegos (uno por vendedor) pasan a ser CINCO, y una rejilla de cuatro las envolvía. */ .pyg .mfoot .cols{grid-template-columns:repeat(5,1fr)} /* ── SUELO TIPOGRÁFICO DE LA FICHA ───────────────────────────────────── La ficha comparte el suelo del escaparate: 16 px mínimo para todo lo que el comprador lee, y el escalón pequeño SOLO para la línea de razón social. Los controles (selector de acabado) suben un escalón más por ser accionables. */ .pyg .fi-crumb a,.pyg .fi-crumb span,.pyg .fi-cartela .sello,.pyg .fi-units .flbl,.pyg .fi-fin .flbl,.pyg .fi-fin .fnote,.pyg .fi-inline-buy .note,.pyg .fi-sib .lk,.pyg dl.tech dt,.pyg dl.tech dd{font-size:var(--fs-base)} /* El selector de acabado SÍ es un control: geometría de pastilla y un peldaño más. */ .pyg .fi-fin .frow button{font-family:var(--pyg-din);font-size:var(--fs-lg);font-weight:var(--pyg-din-dato);line-height:1;padding:.5em .9em;border-radius:999px;cursor:pointer} /* Los separadores de la miga no son enlaces: ni mano ni tinta de enlace. */ .pyg .fi-crumb span{cursor:default;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg))} .pyg .fi-ship .legal,.pyg .mfoot .bottom .legal{font-size:var(--fs-small)} /* ── FICHA · REDISEÑO SOBRE EL VOCABULARIO DEL ESCAPARATE ─────────────── Tres decisiones: (1) el título vive en una BANDA DE ORO FIJA bajo la barra, con la compra permanente; (2) los rótulos de tramo son las MISMAS bandas de oro con Bodoni que las secciones del escaparate; (3) la jerarquía es una escalera limpia de la rampa cordobesa: 46.5 título · 35.6 rótulo de tramo · 27.3 titular · 20.9 lectura · 16 dato · 12.3 solo razón social. Nada fuera de esos peldaños. */ .pyg .fi-lock{position:sticky;top:var(--pyg-header);z-index:20;display:flex;align-items:center;gap:var(--sp-6);margin:0 0 var(--sp-6);width:var(--pyg-canvas);margin-left:calc((min(var(--pyg-fi-col),100%) - var(--pyg-canvas)) / 2);padding:0 var(--sp-6);background:var(--pyg-oro);color:var(--pyg-ink)} .pyg .fi-lock h1{font-family:var(--pyg-didona);font-style:italic;font-weight:900;font-variation-settings:var(--pyg-dd-display);font-size:var(--fs-h1);line-height:1;letter-spacing:var(--dd-track);text-transform:none;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pyg .fi-lock h1>span{font-family:inherit;font-style:inherit;font-weight:inherit;font-variation-settings:inherit;letter-spacing:inherit} .pyg .fi-lock-buy{margin-left:auto;display:flex;align-items:center;gap:var(--sp-5);flex:0 0 auto} .pyg .fi-lock-buy .pr{font-family:var(--pyg-din);font-size:var(--fs-h3);font-weight:var(--pyg-din-dato);line-height:1;white-space:nowrap} .pyg .fi-lock-buy .btn{background:var(--pyg-ink);border-color:var(--pyg-ink);color:var(--pyg-oro)} @media (hover:hover) and (min-width:900px){.pyg .fi-lock-buy .btn:hover{background:var(--pyg-bg);border-color:var(--pyg-bg);color:var(--pyg-ink)}} /* Rótulo de tramo = banda de oro a sangre con Bodoni, igual que en el escaparate. */ .pyg .fi-sec .deeplbl{grid-column:1/3;display:flex;align-items:center;height:var(--pyg-pill-h);margin:0 0 var(--sp-5);width:var(--pyg-canvas);margin-left:calc((min(var(--pyg-fi-col),100%) - var(--pyg-canvas)) / 2);padding:0 var(--sp-6);background:var(--pyg-oro);color:var(--pyg-ink);font-family:var(--pyg-didona);font-style:italic;font-weight:900;font-variation-settings:var(--pyg-dd-display);font-size:var(--fs-h2);line-height:1;letter-spacing:var(--dd-track);text-transform:none;overflow:visible} .pyg .fi-sec .deeplbl>span{font-family:inherit;font-style:inherit;font-weight:inherit;font-variation-settings:inherit;letter-spacing:inherit} .pyg .fi-sec .deeplbl::after{display:none} /* Titular de tramo un peldaño por debajo del rótulo, y en la de palo. */ .pyg .fi-sec h2{font-family:var(--pyg-din);font-style:normal;font-weight:var(--pyg-din-dato);font-variation-settings:normal;font-size:var(--fs-h3);line-height:1.05;letter-spacing:.01em;margin:0 0 var(--sp-4)} .pyg .fi-sec h2>span{font-family:inherit;font-style:inherit;font-weight:inherit;font-variation-settings:inherit} /* La ficha técnica es un DATO tabulado sobre pancarta negra, como las cartelas. */ .pyg dl.tech dt{color:var(--pyg-oro);letter-spacing:.1em;text-transform:uppercase} .pyg dl.tech dd{color:var(--pyg-neg-sec)} /* Rótulos de bloque del panel: dato, no morralla. */ .pyg .fi-units .flbl,.pyg .fi-fin .flbl{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));margin:0 0 var(--sp-3)} .pyg .fi-plate .tc,.pyg .fi-plate .fr,.pyg .fi-sec .more{font-size:var(--fs-base)} /* ── DÓNDE VIVE LA BODONI · regla cerrada ─────────────────────────────── La didona es VOZ DE TÍTULO, nunca de dato. Solo tres superficies la usan: los acentos de marquesina (.mq .b), las bandas de sección (.lbl y .fi-sec .deeplbl) y el título de obra de la banda fija (.fi-lock h1). Todo lo demás —precios, tallas, tamaños de papel, nombres de unidad, líneas de serie, líneas de carrito, enlaces hermanos— va en la de palo, que es la voz del dato. */ .pyg .fi-unit .u-name,.pyg .fi-unit .u-price,.pyg .fi-serie,.pyg .fi-sib .lt, .pyg .li .nm,.pyg .li .pr,.pyg .drawer .dh h3,.pyg .drawer .empty .bg, .pyg .cine h2,.pyg .co .sum .row.tot,.pyg .drawer .foot .row.tot, .pyg .fi-unit .u-name>span,.pyg .fi-unit .u-price>span,.pyg .fi-sib .lt>span, .pyg .li .nm>span,.pyg .li .pr>span,.pyg .cine h2>span{ font-family:var(--pyg-din);font-style:normal;font-weight:var(--pyg-din-dato); font-variation-settings:normal;letter-spacing:.01em} .pyg .fi-unit .u-price,.pyg .li .pr{font-variant-numeric:tabular-nums} .pyg .fi-serie{font-size:var(--fs-lg);color:color-mix(in srgb, var(--pyg-ink) 73%, var(--pyg-bg))} .pyg .cine h2{font-size:var(--fs-h2);line-height:1.05} /* ── HEADER · UN SOLO CUERPO Y UNA SOLA GEOMETRÍA ────────────────────── Todo el cromo de la barra —pastilla de catálogo, enlace de novedades, buscar, favoritos, cuenta, carrito, idiomas y la vuelta al portafolio— comparte el MISMO peldaño de la rampa (20.9 px) y el mismo alto de dos subceldas. Los idiomas dejan de ser una pastilla-grupo: son CUATRO botones redondos, uno por lengua. */ .pyg .p-bar{--chrome-fs:var(--fs-lg)} .pyg .p-bar .btn,.pyg .p-bar nav a,.pyg .p-bar .util,.pyg .p-bar .langs button{font-size:var(--chrome-fs);line-height:1} .pyg .p-bar nav a{display:inline-flex;align-items:center;height:var(--pyg-pill-h);font-family:var(--pyg-din);font-weight:var(--pyg-din-dato);letter-spacing:.02em;text-transform:none;color:var(--pyg-bg);cursor:pointer} @media (hover:hover) and (min-width:900px){.pyg .p-bar nav a:hover{color:var(--pyg-oro)}} .pyg .p-bar .util{display:inline-flex;align-items:center;justify-content:center;gap:.4em;height:var(--pyg-pill-h);padding:0 .8em;border:1px solid color-mix(in srgb, var(--pyg-bg) 34%, transparent);border-radius:999px;background:transparent;color:var(--pyg-bg);font-family:var(--pyg-din);font-weight:var(--pyg-din-dato);letter-spacing:.02em;cursor:pointer} .pyg .p-bar .util--icon{width:var(--pyg-pill-h);padding:0} @media (hover:hover) and (min-width:900px){.pyg .p-bar .util:hover{border-color:var(--pyg-oro);color:var(--pyg-oro)}} .pyg .p-bar .util svg{width:1.05em;height:1.05em;stroke-width:1.6;flex:0 0 auto} /* Cuatro botones redondos de idioma, no una pastilla-grupo. */ .pyg .p-bar .langs{display:flex;align-items:center;gap:var(--sp-3);background:none;border:0;padding:0;border-radius:0} .pyg .p-bar .langs button{width:var(--pyg-pill-h);height:var(--pyg-pill-h);display:grid;place-items:center;border:1px solid color-mix(in srgb, var(--pyg-bg) 34%, transparent);border-radius:999px;background:transparent;color:var(--pyg-bg);font-family:var(--pyg-din);font-weight:var(--pyg-din-dato);letter-spacing:.02em;cursor:pointer;padding:0} .pyg .p-bar .langs button.on{background:var(--pyg-oro);border-color:var(--pyg-oro);color:var(--pyg-ink)} .pyg .p-bar .langs{position:relative} .pyg .p-bar .langs__list{position:absolute;top:100%;right:0;display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-3);padding:var(--sp-4);background:var(--pyg-ink);border-radius:calc(var(--pyg-pill-h) / 2 + var(--sp-4));z-index:2} @media (hover:hover) and (min-width:900px){.pyg .p-bar .langs button:hover:not(.on){border-color:var(--pyg-oro);color:var(--pyg-oro)}} /* ── FICHA · BANDAS A SANGRE DE PÁGINA ───────────────────────────────── Las dos superficies de oro —la banda fija del título y los rótulos de tramo— sangran contra la PÁGINA. Ambos contenedores están centrados, así que el mismo cálculo sirve para los dos y todas aterrizan en la misma línea. */ .pyg .fi-view{overflow-x:clip} /* Ambos contenedores están centrados sobre el lienzo, así que el 50% resuelve al centro del lienzo y el mismo cálculo sirve para las dos superficies. NUNCA vw: el viewport no es la página. */ .pyg .fi-lock{width:var(--pyg-canvas);margin-left:auto;margin-right:auto;padding:0 var(--sp-6);box-sizing:border-box} .pyg .fi-sec .deeplbl{width:var(--pyg-canvas);margin-left:calc(50% - var(--pyg-canvas) / 2);margin-right:0;padding-left:var(--sp-6);padding-right:var(--sp-6);box-sizing:border-box} /* Los dos títulos de oro comparten CUERPO: es la misma voz, no dos jerarquías. */ .pyg .fi-lock h1,.pyg .fi-sec .deeplbl{font-size:var(--fs-h2)} .pyg .fi-lock,.pyg .fi-sec .deeplbl{height:calc(var(--pyg-pill-h) + var(--gutter-horizontal))} .pyg .fi-lock{margin-bottom:var(--sp-6)} .pyg .fi-sec .deeplbl{margin-bottom:var(--sp-6);z-index:1} /* ── VISOR DE FOTOGRAMA sobre NEGRO ──────────────────────────────────── Se selecciona una imagen de una película: el visor es una sala, no una hoja. */ .pyg .fi-top.scope .fi-plate{background:var(--pyg-ink);border-color:var(--pyg-ink)} .pyg .fi-top.scope .fi-plate .fr{color:color-mix(in srgb, var(--pyg-bg) 50%, transparent)} .pyg .fi-top.scope .fi-plate .tc{color:var(--pyg-oro)} .pyg .fi-top.scope .fi-plate .vb{background:transparent;border-color:color-mix(in srgb, var(--pyg-bg) 40%, transparent);color:var(--pyg-bg)} @media (hover:hover) and (min-width:900px){.pyg .fi-top.scope .fi-plate .vb:hover{background:var(--pyg-oro);border-color:var(--pyg-oro);color:var(--pyg-ink)}} /* ── SELECTOR DE UNIDAD · el círculo va A LA IZQUIERDA y centrado con el rótulo ── */ .pyg .fi-unit{grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-4) var(--sp-5);text-align:left} .pyg .fi-unit .fi-radio{flex:0 0 auto;margin:0} .pyg .fi-unit>div{display:contents} .pyg .fi-unit .u-body{display:block;min-width:0} /* El nombre de la unidad y su medida son DOS RENGLONES: mezclarlos en línea pone dos peldaños de la rampa en la misma base. */ .pyg .fi-unit .u-name,.pyg .fi-unit .u-meta{display:block} /* ── CARTELA NEGRA · el dato tiene que LEERSE ─────────────────────────────────── La pancarta (fondo de tinta + relleno) es LO QUE HACE legible el texto en oro y blanco: sin ella, blanco sobre papel blanco. Va aquí, con los colores, para que fondo y tinta no puedan volver a separarse. */ .pyg dl.tech{background:var(--pyg-ink);color:var(--pyg-bg);padding:var(--sp-5) var(--sp-6);margin:0} .pyg dl.tech>div{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-3) var(--sp-6);align-items:baseline;padding:var(--sp-3) 0;border-bottom:1px solid color-mix(in srgb, var(--pyg-bg) 16%, transparent)} .pyg dl.tech>div:last-child{border-bottom:0} .pyg dl.tech dt{margin:0;color:var(--pyg-oro);font-family:var(--pyg-din);font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:uppercase} .pyg dl.tech dd{margin:0;color:var(--pyg-bg);font-family:var(--pyg-din);font-weight:var(--pyg-din-lectura);line-height:1.4} /* ── DROP DEL MES · pieza viva + archivo del ciclo ───────────────────── Hereda la anatomía de la tira: filete de medianil arriba y abajo, medianil entre piezas, pancarta negra. Dos tercios para la pieza viva, uno para el ciclo. */ .pyg .drop{display:grid;grid-template-columns:2fr 1fr;gap:0;background:var(--pyg-ink);border-top:var(--gutter-horizontal) solid var(--pyg-ink);border-bottom:var(--gutter-horizontal) solid var(--pyg-ink)} .pyg .drop .viva{display:grid;grid-template-rows:1fr calc(7 * var(--subcell-h));min-width:0;background:var(--pyg-superficie);cursor:pointer} .pyg .drop .viva>.ph{min-height:0} .pyg .drop .viva .cartela{background:var(--pyg-ink);color:var(--pyg-bg);padding:var(--sp-5) var(--sp-6);display:flex;flex-direction:column;justify-content:center;overflow:hidden} .pyg .drop .viva .cartela .sello{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.14em;text-transform:uppercase;color:var(--pyg-neg-sec);margin:0 0 var(--sp-2)} .pyg .drop .viva .cartela h3{font-family:var(--pyg-didona);font-style:italic;font-weight:900;font-variation-settings:var(--pyg-dd-display);font-size:var(--fs-h2);line-height:1;letter-spacing:var(--dd-track);color:var(--pyg-bg);margin:0} .pyg .drop .viva .cartela .var{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--pyg-oro);margin:var(--sp-2) 0 0} .pyg .drop .viva .cartela .dato{display:flex;gap:var(--sp-4);font-family:var(--pyg-din);font-size:var(--fs-base);color:var(--pyg-neg-sec);margin:var(--sp-3) 0 0} .pyg .drop .ciclo{border-left:var(--gutter-vertical) solid var(--pyg-ink);background:var(--pyg-ink);color:var(--pyg-bg);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)} .pyg .drop .ciclo .sello{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.12em;text-transform:uppercase;color:var(--pyg-oro);margin:0} .pyg .drop .ciclo .txt{font-family:var(--pyg-din);font-size:var(--fs-lg);font-weight:var(--pyg-din-lectura);line-height:1.45;color:var(--pyg-neg-sec);margin:0} .pyg .drop .arch{margin-top:auto;display:flex;flex-direction:column} .pyg .drop .arch .fila{display:grid;grid-template-columns:max-content 1fr max-content;gap:var(--sp-4);align-items:baseline;padding:var(--sp-3) 0;border-top:1px solid color-mix(in srgb, var(--pyg-bg) 16%, transparent);font-family:var(--pyg-din);font-size:var(--fs-base)} .pyg .drop .arch .mes{color:var(--pyg-oro);letter-spacing:.1em;text-transform:uppercase} .pyg .drop .arch .st{color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));letter-spacing:.08em;text-transform:uppercase} /* ── NAVEGADOR POR PLANO · MODO OSCURO ───────────────────────────────── El catálogo de páginas de álbum es una sala: fondo de tinta, visor a sangre de columna y la tira de planos como butacas. Misma banda de oro fija que la ficha. */ .pyg .pl-view{background:var(--pyg-ink);color:var(--pyg-bg);min-height:100vh} .pyg .pl{width:var(--pyg-canvas);margin:0 auto;padding:var(--sp-6) var(--sp-6) var(--sp-8);display:grid;grid-template-columns:2fr 1fr;gap:var(--gutter-vertical) var(--sp-6);align-items:start} .pyg .pl .fi-crumb{grid-column:1/3;margin:0 0 var(--sp-5);font-family:var(--pyg-din);font-size:var(--fs-base);color:var(--pyg-neg-sec)} .pyg .pl .fi-crumb a{color:var(--pyg-oro);cursor:pointer} .pyg .pl .fi-crumb span{color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg))} .pyg .pl-plate{position:relative;aspect-ratio:16 / 9;background:color-mix(in srgb, var(--pyg-ink) 100%, var(--pyg-bg));border:1px solid color-mix(in srgb, var(--pyg-bg) 18%, transparent);display:grid;place-items:center} .pyg .pl-plate .fr{font-family:var(--pyg-din);font-size:var(--fs-base);color:color-mix(in srgb, var(--pyg-bg) 45%, transparent)} .pyg .pl-plate .tc{position:absolute;left:var(--sp-4);bottom:var(--sp-4);font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-dato);letter-spacing:.06em;color:var(--pyg-oro);font-variant-numeric:tabular-nums} .pyg .pl-ctrl{display:flex;align-items:center;gap:var(--sp-5);margin-top:var(--sp-5)} .pyg .pl-ctrl .vb{width:var(--pyg-pill-h);height:var(--pyg-pill-h);display:grid;place-items:center;border:1px solid color-mix(in srgb, var(--pyg-bg) 40%, transparent);border-radius:999px;background:transparent;color:var(--pyg-bg);font-size:var(--fs-lg);cursor:pointer} @media (hover:hover) and (min-width:900px){.pyg .pl-ctrl .vb:hover{background:var(--pyg-oro);border-color:var(--pyg-oro);color:var(--pyg-ink)}} .pyg .pl-ctrl input[type=range]{flex:1;accent-color:var(--pyg-oro)} .pyg .pl-note{font-family:var(--pyg-din);font-size:var(--fs-lg);line-height:1.45;color:var(--pyg-neg-sec);margin:var(--sp-5) 0 0;max-width:56ch} .pyg .pl-list{display:flex;flex-direction:column;gap:var(--sp-4)} .pyg .pl-list .flbl{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.14em;text-transform:uppercase;color:var(--pyg-oro);margin:0} .pyg .pl-item{display:grid;grid-template-columns:calc(4 * var(--subcell-h)) 1fr;gap:var(--sp-4);align-items:center;padding:var(--sp-3);border:1px solid color-mix(in srgb, var(--pyg-bg) 18%, transparent);background:transparent;color:var(--pyg-bg);text-align:left;cursor:pointer} .pyg .pl-item.on{border-color:var(--pyg-oro)} @media (hover:hover) and (min-width:900px){.pyg .pl-item:hover{border-color:var(--pyg-oro)}} .pyg .pl-item .ph{aspect-ratio:16 / 9;background:var(--gris-placeholder);display:block} .pyg .pl-item .tx{display:flex;flex-direction:column;gap:2px;min-width:0} .pyg .pl-item .tx b{font-family:var(--pyg-din);font-size:var(--fs-lg);font-weight:var(--pyg-din-dato);letter-spacing:.01em} .pyg .pl-item.on .tx b{color:var(--pyg-oro)} .pyg .pl-item .tx span{font-family:var(--pyg-din);font-size:var(--fs-base);color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));font-variant-numeric:tabular-nums} .pyg .pl-foot{font-family:var(--pyg-din);font-size:var(--fs-base);line-height:1.5;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));margin:var(--sp-4) 0 0} .pyg .pl-view .mfoot{grid-column:1/42} /* ── PÁGINA DE PERSONAJE · el retrato secuencial completo ─────────────── Hereda el vocabulario del escaparate: banda de oro fija, tira a sangre con filetes de medianil y pancarta negra. Ocho motivos en dos filas de cuatro. */ .pyg .pe{width:var(--pyg-canvas);margin:0 auto;padding:0 var(--sp-6) var(--sp-6)} .pyg .pe .fi-crumb{margin:0 0 var(--sp-5);font-family:var(--pyg-din);font-size:var(--fs-base);color:var(--pyg-gris)} .pyg .pe .fi-crumb a{color:var(--pyg-prusia);cursor:pointer} .pyg .pe-lead{font-family:var(--pyg-din);font-size:var(--fs-h3);font-weight:var(--pyg-din-lectura);line-height:1.3;color:var(--pyg-ink);margin:0 0 var(--sp-4);max-width:62ch;text-wrap:pretty} .pyg .pe-nota{font-family:var(--pyg-din);font-size:var(--fs-lg);line-height:1.5;color:var(--pyg-gris);margin:0;max-width:62ch} .pyg .pe-tira{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter-vertical);background:var(--pyg-ink);border-top:var(--gutter-horizontal) solid var(--pyg-ink);border-bottom:var(--gutter-horizontal) solid var(--pyg-ink);margin-top:var(--sp-6)} .pyg .pe-tira .pieza{display:grid;grid-template-rows:auto calc(6 * var(--subcell-h));min-width:0;background:var(--pyg-superficie);cursor:pointer} .pyg .pe-tira .pieza>.ph{display:block;width:100%;aspect-ratio:3 / 4;background:var(--gris-placeholder)} .pyg .pe-tira .cartela{background:var(--pyg-ink);color:var(--pyg-bg);padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;justify-content:center;overflow:hidden} .pyg .pe-tira .cartela .sello{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.12em;text-transform:uppercase;color:var(--pyg-neg-sec);margin:0 0 var(--sp-2)} .pyg .pe-tira .cartela h3{font-family:var(--pyg-didona);font-style:italic;font-weight:900;font-variation-settings:var(--pyg-dd-display);font-size:var(--fs-h3);line-height:1;letter-spacing:var(--dd-track);color:var(--pyg-bg);margin:0} .pyg .pe-tira .cartela .var{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--pyg-oro);margin:var(--sp-2) 0 0} @media (hover:hover) and (min-width:900px){.pyg .pe-tira .pieza:hover .cartela h3{color:var(--pyg-oro)}} /* ── COLECCIÓN · nivel 1 de FacelessD ────────────────────────────────── Mismo vocabulario que el resto de la tienda: banda de oro fija, lienzo de 1197, pancarta negra para el enunciado de estructura y la tira de personajes. */ .pyg .co-page{width:var(--pyg-canvas);margin:0 auto;padding:0 var(--sp-6) var(--sp-6);display:grid;grid-template-columns:2fr 1fr;gap:var(--sp-8);align-items:start} .pyg .co-page .fi-crumb{grid-column:1/3;margin:0 0 var(--sp-5)} .pyg .co-lead .sello{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));margin:0 0 var(--sp-4)} .pyg .co-lead .flbl{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));margin:0 0 var(--sp-3)} .pyg .co-lead .tx{font-family:var(--pyg-din);font-size:var(--fs-h3);font-weight:var(--pyg-din-lectura);line-height:1.35;color:var(--pyg-ink);margin:0 0 var(--sp-5);max-width:56ch;text-wrap:pretty} .pyg .co-lead .tx b{font-weight:var(--pyg-din-enfasis)} .pyg .co-side .flbl{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-rotulo);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--pyg-ink) 52%, var(--pyg-bg));margin:0 0 var(--sp-4)} .pyg .co-side .fila{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-4);align-items:baseline;padding:var(--sp-3) 0;border-top:1px solid var(--pyg-linea)} .pyg .co-side .yr{font-family:var(--pyg-din);font-size:var(--fs-base);font-weight:var(--pyg-din-dato);color:var(--pyg-prusia);font-variant-numeric:tabular-nums} .pyg .co-side .ti{display:flex;flex-direction:column;gap:2px;min-width:0} .pyg .co-side .ti b{font-family:var(--pyg-din);font-size:var(--fs-lg);font-weight:var(--pyg-din-dato)} .pyg .co-side .ti span{font-family:var(--pyg-din);font-size:var(--fs-base);color:var(--pyg-gris);line-height:1.4} .pyg .co-band{background:var(--pyg-ink);color:var(--pyg-bg);padding:var(--sp-7) 0;margin:0 0 0} .pyg .co-band p{width:var(--pyg-canvas);margin:0 auto;padding:0 var(--sp-6);font-family:var(--pyg-din);font-size:var(--fs-h3);font-weight:var(--pyg-din-lectura);line-height:1.4;color:var(--pyg-neg-sec);text-wrap:pretty} .pyg .co-band p b{color:var(--pyg-oro);font-weight:var(--pyg-din-enfasis)} .pyg .co-pers{grid-template-columns:repeat(2,1fr)} .pyg .co-pers .pieza>.ph{aspect-ratio:16 / 9} /* ── IMPRESIÓN · el PDF debe salir con TEXTO y VECTORES, no rasterizado ── Tres causas de rasterización, resueltas: (1) el lettermark se pintaba por MÁSCARA CSS —ahora es un de un SVG ya coloreado—; (2) la rejilla-guía es un tapiz de degradados: se oculta al imprimir; (3) las bandas fijas se repetirían o cortarían: dejan de ser pegajosas en papel. */ @media print{ .pyg{background:var(--pyg-bg)} .pyg .p-bar,.pyg .fi-lock,.pyg .fi-sec .deeplbl{position:static !important} .pyg .mq,.pyg .p-toast,.pyg .drawer{display:none !important} .pyg .tira .pieza,.pyg .pe-tira .pieza,.pyg .drop .viva{break-inside:avoid} .pyg .fi-sec,.pyg .co-page,.pyg .pl{break-inside:auto} .pyg .hero-lm .lm,.pyg .mfoot .colofon .lm{opacity:1} } /* ── MÓVIL (Pablo, 3 nov 2026) ───────────────────────────────────────────── Por debajo de 900 px las islas dejan sus líneas de subcelda y se apilan en el orden del documento; las tiras pasan a dos piezas por fila (una, si son dos); la navegación y los útiles se pliegan bajo la barra. */ @media (max-width:899px){ .pyg .p-bar .in{flex-wrap:wrap;padding:0 var(--sp-6);row-gap:var(--sp-4)} .pyg .p-bar .m-menu{font-family:var(--pyg-din);font-size:var(--fs-h3);font-weight:var(--pyg-din-dato);color:var(--pyg-bg)} .pyg .p-bar nav,.pyg .p-bar .tools{display:none} .pyg .p-bar.is-open nav,.pyg .p-bar.is-open .tools{display:flex;flex-wrap:wrap;order:3;width:100%;margin-left:0;gap:var(--sp-4)} .pyg .page{display:flex !important;flex-direction:column;gap:var(--sp-6)} .pyg .page > .isla{min-height:0} .pyg .lbl{min-height:var(--pyg-pill-h)} .pyg .hero-lm{padding:var(--sp-8) var(--sp-6) 0} .pyg .hero-line{padding:0 var(--sp-6);font-size:var(--fs-h3)} .pyg .drop{grid-template-columns:1fr} .pyg .drop .viva{grid-template-rows:auto auto} .pyg .drop .viva>.ph{aspect-ratio:4 / 3} .pyg .drop .ciclo{border-left:0;border-top:var(--gutter-horizontal) solid var(--pyg-ink)} .pyg .tira--3,.pyg .tira--4,.pyg .pe-tira{grid-template-columns:repeat(2,minmax(0,1fr))} .pyg .tira--2{grid-template-columns:minmax(0,1fr)} .pyg .tira{grid-auto-rows:auto} .pyg .tira .pieza{grid-template-rows:auto auto} .pyg .tira .pieza>.ph{aspect-ratio:3 / 4} .pyg .tira .pieza:nth-child(odd){border-left:0} .pyg .tira--2 .pieza{border-left:0} .pyg .router .cat{border-left:0;border-top:var(--gutter-horizontal) solid var(--pyg-ink)} .pyg .router{grid-template-columns:minmax(0,1fr)} .pyg .cine .in{grid-template-columns:1fr} .pyg .mfoot .cols{grid-template-columns:repeat(2,minmax(0,1fr))} .pyg .mfoot .bottom{flex-wrap:wrap} .pyg .fi-sec{grid-template-columns:1fr} .pyg .fi-sec .deeplbl{grid-column:auto} .pyg .fi-top.postal .fi-plate{max-width:none} .pyg .page > .isla,.pyg .tira .pieza,.pyg .pe-tira .pieza,.pyg .drop .viva,.pyg .cartela{min-width:0;max-width:100%;box-sizing:border-box} .pyg .tira .cartela h3,.pyg .drop .viva .cartela h3{font-size:var(--fs-h3);overflow-wrap:anywhere} .pyg .tira .pieza,.pyg .pe-tira .pieza,.pyg .drop .viva{grid-template-columns:minmax(0,1fr)} }