/* piel.css — Festival de Otoño 2026 · la piel compartida de tagers.com (https://tagers.com/otono/piel.css) Guía de uso: skill tagers-web-design → references/campana-otono-2026-piel.md · lenguaje: campana-otono-2026.md Referencia viva: https://tagers.com/otono/ (src/styles/otono*.css). Aquí vive SOLO lo que se comparte entre páginas. LA PALANCA no vive aquí: la pone el chrome (header.html · ⚑ TEMPORADA) → del 19-sep al 2-nov-2026. De ella cuelgan los tokens --piel-*, [data-solo="otono"] y [data-fuera="otono"]. Este archivo es el KIT: clases .piel-* que se usan dentro de un bloque .piel. Un bloque de temporada lleva data-solo="otono" y el 3-nov se esconde solo. Retiro del kit: borrar este archivo cuando ninguna página lo enlace. */ @font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url('/fonts/quicksand-vf-latin.woff2') format('woff2')} @font-face{font-family:'Axis';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/axis-800-latin.woff2') format('woff2')} /* ── el bloque: tokens (los del chrome, con respaldo) + base de especificidad cero ── */ .piel{ --vino:var(--piel-vino,#603541); --vino-prof:var(--piel-vino-prof,#482331); --noche:var(--piel-noche,#3B1C28); --calabaza:var(--piel-calabaza,#F49534); --terracota:var(--piel-terracota,#DC613A); --terracota-tx:var(--piel-terracota-tx,#A8431F); --mantequilla:var(--piel-mantequilla,#EAD89D); --hueso:var(--piel-hueso,#EFD9B5); --crema:var(--piel-crema,#FCF0E6); --papel:var(--piel-papel,#FFFBF6); --durazno:var(--piel-durazno,#F8BA70); --malva:var(--piel-malva,#894B52); --sombra:var(--piel-sombra,27,11,5); --marco:var(--piel-marco,rgba(244,149,52,.5)); --linea:var(--piel-linea,rgba(96,53,65,.16)); --radio:var(--piel-radio,3px); --f-rotulo:Axis,"Quicksand DA",Quicksand,system-ui,sans-serif; --f-texto:Quicksand,"Quicksand DA",system-ui,-apple-system,"Segoe UI",sans-serif; /* la barra del sitio es fija: --nav-h = lo que tapa al inicio de la página · --nav-top = dónde se pega lo sticky */ --nav-h:62px; --nav-top:62px; color:var(--vino-prof); font-family:var(--f-texto); font-weight:500; font-size:16px; line-height:1.6; -webkit-text-size-adjust:100%; } @media (min-width:768px){ .piel{ --nav-h:107px; --nav-top:107px } } @media (min-width:1025px){ .piel{ --nav-h:0px; --nav-top:110px } } :where(.piel) *, :where(.piel) *::before, :where(.piel) *::after{ box-sizing:border-box } :where(.piel) img{ display:block; max-width:100%; height:auto } :where(.piel) :where(h1,h2,h3,h4,p,ul,ol,figure){ margin:0; padding:0 } :where(.piel) :where(ul,ol){ list-style:none } :where(.piel) a{ color:inherit; -webkit-tap-highlight-color:transparent } .piel :focus-visible{ outline:3px solid var(--foco,var(--vino)); outline-offset:3px; border-radius:3px } .piel.oscuro, .piel .oscuro{ --foco:var(--crema) } /* de orilla a orilla dentro de un contenido de WordPress encajonado · la columna */ .piel-full{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw) } .piel-wrap{ width:min(100% - 40px, 1180px); margin-inline:auto } @media (min-width:900px){ .piel-wrap{ width:min(100% - 112px, 1320px) } } /* ── letra trazada (Konfus / Palmore): scripts/piel-trazar.py. El tamaño lo da font-size; el color, color ── */ .piel-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap } .piel-tz{ display:block; line-height:1 } .piel-ol{ display:block; width:auto; max-width:100%; overflow:visible } .piel-ol + .piel-ol{ margin-top:-.16em } .piel-tz-caps .piel-ol + .piel-ol{ margin-top:.16em } .piel-tz-w{ display:none } @media (min-width:900px){ .piel-tz-n{ display:none } .piel-tz-w{ display:block } } .piel-centro{ text-align:center } .piel-centro .piel-ol{ margin-inline:auto } /* ── rótulo (AXIS en versalitas: en vez de pastillas) · «MUST TRY» = caja calabaza ── */ .piel-rotulo{ font-family:var(--f-rotulo); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; line-height:1.2; color:var(--terracota-tx) } .oscuro .piel-rotulo, .piel-rotulo.claro{ color:var(--durazno) } .piel-rotulo.caja{ display:inline-block; padding:5px 8px 4px; border-radius:2px; background:var(--calabaza); color:var(--vino-prof); font-size:10px; letter-spacing:.14em } /* ── botón: rectangular. UNO calabaza por vista; los demás, de línea ── */ .piel-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 28px; border:0; border-radius:var(--radio); background:var(--calabaza); color:var(--vino-prof); font-family:var(--f-rotulo); font-weight:800; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; text-align:center; line-height:1.2; cursor:pointer } .piel-btn.oscuro{ background:var(--vino-prof); color:var(--crema) } .piel-btn.linea{ background:none; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor } .piel-btn.ancho{ width:100% } a.piel-btn:hover{ background:var(--durazno) } a.piel-btn.oscuro:hover{ background:var(--vino) } a.piel-btn.linea:hover{ background:rgba(244,149,52,.12) } /* ── líneas finas calabaza, como el marco de la carta impresa ── */ .piel-filete{ border:0; border-top:1px solid var(--marco); margin:0 } .piel-marco{ border-top:1px solid var(--marco); border-bottom:1px solid var(--marco) } /* ── cabecera de sección, como en la carta impresa: titular trazado (Palmore Bold, caps) + antetítulo + UNA pieza parada sobre la línea calabaza que dice qué ES el bloque (https://tagers.com/otono/ilus/.svg) ── */ .piel-cab{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:10px; margin-bottom:26px; padding-bottom:16px; border-bottom:2px solid var(--calabaza); color:var(--vino) } .piel-cab .antes{ display:block; margin-bottom:1em } .piel-cab :where(h1,h2,h3){ font-size:min(13vw,60px); line-height:1; font-weight:700 } .piel-cab .pieza{ width:auto; height:clamp(44px,12vw,72px); margin-bottom:-16px; align-self:end } .oscuro .piel-cab, .piel-cab.claro{ color:var(--crema) } /* ── banda de foto: oscura, de orilla a orilla. La foto manda; la interfaz se calla.
[
…una frase…
]
alta = portada (llena la primera pantalla y deja asomar lo que sigue) · respiro = foto limpia entre bloques ── */ .piel-banda{ position:relative; overflow:hidden; isolation:isolate; background:var(--bg,#1B0B05); color:var(--crema); aspect-ratio:4/5; max-height:86vh } .piel-banda > picture, .piel-banda > img{ display:block; position:absolute; inset:0; width:100%; height:100% } .piel-banda img{ width:100%; height:100%; max-width:none; object-fit:cover; object-position:var(--pos,50% 50%) } .piel-banda.alta{ aspect-ratio:auto; max-height:none; padding-top:var(--nav-h); height:clamp(430px,118vw,70vh) } @supports (height:100svh){ .piel-banda.alta{ height:clamp(480px, calc(100svh - 68px), 860px) } } /* texto sobre foto: SOLO sobre un piso en el tono de las sombras de la foto, del tamaño del texto */ .piel-banda__piso{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 22px 30px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center } .piel-banda:has(.piel-banda__piso)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:62%; z-index:1; pointer-events:none; background:linear-gradient(to top, rgb(var(--sombra)) 0, rgba(var(--sombra),.9) 24%, rgba(var(--sombra),.56) 48%, rgba(var(--sombra),.14) 74%, rgba(var(--sombra),0)) } .piel-banda__techo{ position:absolute; left:0; right:0; top:var(--nav-h); z-index:2; display:flex; justify-content:center; padding-top:16px } .piel-banda:has(.piel-banda__techo)::before{ content:""; position:absolute; left:0; right:0; top:0; height:40%; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(var(--sombra),.72), rgba(var(--sombra),.44) 48%, rgba(var(--sombra),0)) } @media (min-width:900px){ .piel-banda{ aspect-ratio:21/9; max-height:80vh } .piel-banda img{ object-position:var(--pos-a,var(--pos,50% 50%)) } .piel-banda.alta{ aspect-ratio:auto; height:clamp(520px,46vw,70vh) } @supports (height:100svh){ .piel-banda.alta{ height:clamp(520px, calc(100svh - var(--nav-top) - 76px), 880px) } } .piel-banda__piso{ padding:0 56px 44px } } /* ── la frase de la casa (Konfus trazada): una por página, debajo de su foto o sobre el piso de la foto ── */ .piel-frase{ max-width:440px; margin-inline:auto; padding:34px 22px 12px; font-size:clamp(24px,6.9vw,30px); text-align:center; color:var(--vino) } .piel-frase .piel-ol{ margin-inline:auto } .piel-banda .piel-frase{ padding:0; color:var(--crema) } @media (min-width:900px){ .piel-frase{ max-width:none; font-size:clamp(30px,2.9vw,44px); padding:48px 56px 16px } } /* ── dos puertas bajo la portada: rótulo con su flecha (↓ esta página · → otra) + qué hay ahí ── */ .piel-puertas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--papel); border-bottom:1px solid var(--linea) } .piel-puertas.tres{ grid-template-columns:repeat(3,minmax(0,1fr)) } .piel-puertas a{ display:grid; align-content:center; gap:5px; min-height:68px; padding:10px 8px 10px 18px; text-decoration:none; color:var(--vino-prof) } .piel-puertas a + a{ border-left:1px solid var(--linea) } .piel-puertas .piel-rotulo{ font-size:9.5px; letter-spacing:.14em } .piel-puertas b{ font-weight:700; font-size:14.5px; line-height:1.15 } .piel-puertas a:hover{ background:var(--crema) } .piel-puertas a:focus-visible{ outline-offset:-4px } @media (max-width:374px){ .piel-puertas b{ font-size:13px } .piel-puertas a{ padding-left:14px } } @media (min-width:900px){ .piel-puertas a{ justify-items:center; text-align:center; min-height:78px; gap:7px } .piel-puertas .piel-rotulo{ font-size:10.5px } .piel-puertas b{ font-size:17.5px } } /* ── banda de lectura (crema) y banda «portada» (vino): antetítulo, titular trazado, dos líneas, UN botón ── */ .piel-lectura{ background:var(--papel); color:var(--vino-prof); padding:56px 0 } .piel-lectura.crema{ background:var(--crema) } .piel-vino{ background:var(--vino); color:var(--crema); padding:44px 0 52px; text-align:center } .piel-vino.prof{ background:var(--vino-prof) } .piel-vino.noche{ background:var(--noche) } .piel-vino .antes{ display:block; margin-bottom:16px; letter-spacing:.14em; color:var(--durazno) } .piel-vino :where(h1,h2,h3){ font-size:clamp(38px,11vw,76px); line-height:1; font-weight:700 } .piel-vino .piel-ol{ margin-inline:auto } .piel-vino .lead{ margin:18px auto 0; max-width:36ch; font-size:16.5px; line-height:1.55; text-wrap:balance; opacity:.92 } .piel-vino .cuando{ margin:14px auto 0; max-width:34ch; font-size:15px; line-height:1.4; font-weight:700; color:var(--durazno); text-wrap:balance } .piel-vino .piel-btn{ margin-top:26px } @media (min-width:900px){ .piel-lectura{ padding:88px 0 } .piel-vino{ padding:72px 0 80px } } /* ── renglón de lista (nombre · descripción · dato), zona sin movimiento · estado = punto + versalitas ── */ .piel-renglon{ display:block; padding:16px 0; border-top:1px solid var(--linea); text-decoration:none } .piel-renglon:last-child{ border-bottom:1px solid var(--linea) } .piel-estado{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-rotulo); font-weight:800; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase } .piel-estado::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--calabaza); flex:none } /* ── llegada: las cosas se posan, una sola vez (opacidad + escala); quieto si el visitante lo pide ── */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .piel-llega{ animation:piel-llega linear both; animation-timeline:view(); animation-range:entry 0% entry 60% } @keyframes piel-llega{ from{ opacity:0; scale:.985 } to{ opacity:1; scale:1 } } } }