/* ==========================================================================
   PAGINAS S — Base compartida de los proyectos conceptuales (demos)
   Cada demo añade su propia hoja con su identidad visual.
   ========================================================================== */

@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Aviso fijo de proyecto conceptual (identidad PAGINAS S) ---------- */
.demo-bar {
  position: fixed; inset: auto 0 0 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px clamp(14px, 3vw, 28px);
  background: #2E1B13; color: #F7E5D8;
  font: 500 12.5px/1.35 "Geist", system-ui, sans-serif; letter-spacing: .02em;
  border-top: 1px solid rgba(247, 229, 216, .14);
}
.demo-bar strong { font-weight: 600; color: #CDA17B; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; margin-right: 8px; }
.demo-bar a { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 7px 14px; border: 1px solid rgba(247, 229, 216, .3); border-radius: 100px; color: #F7E5D8; text-decoration: none; transition: background-color .3s, color .3s; }
.demo-bar a:hover, .demo-bar a:focus-visible { background: #F7E5D8; color: #2E1B13; }
.demo-bar a:focus-visible { outline: 2px solid #CDA17B; outline-offset: 2px; }
.demo-bar-text { min-width: 0; }
@media (max-width: 560px) { .demo-bar-long { display: none; } }
body { padding-bottom: 44px; }

/* Modo vista previa (cuando la web se muestra en miniatura dentro de PAGINAS S) */
.is-preview body { padding-bottom: 0; }
.is-preview .demo-bar, .is-preview .skip { display: none; }
html.is-preview { scrollbar-width: none; scroll-behavior: auto; }
html.is-preview::-webkit-scrollbar { display: none; }

/* ---------- Aparición al desplazarse (el contenido es visible sin JS) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rd, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- Inclinación con profundidad ---------- */
[data-tilt] { transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* Indicaciones según el tipo de dispositivo */
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-mouse { display: none; } .hint-touch { display: inline; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hint-mouse, .hint-touch { display: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-tilt], [data-depth] { transform: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}