/* Charria Ceramics · Web en obras (portada de la web + aviso) */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2-variations"), url("../fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("../fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2-variations"), url("../fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/montserrat-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }

:root {
  --ivory: #f5f1ea; --paper: #ece6dc; --ink: #1a1816; --clay: #a67c5b; --muted: #4d4740;
  --serif: "Bodoni Moda", "Didot", serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --side: clamp(1.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.7,0,.2,1);
  --fs-body: clamp(1.03rem, 0.98rem + 0.25vw, 1.1rem);
  --fs-label: clamp(0.76rem, 0.74rem + 0.1vw, 0.8rem);
  --fs-h1: clamp(4.5rem, 17vw, 19rem);
  --fs-big: clamp(2.1rem, 1rem + 6vw, 8rem);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--ivory); color: var(--ink); font-family: var(--sans); font-weight: 300;
  font-size: var(--fs-body); letter-spacing: .04em; line-height: 1.7; overflow-x: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
.eyebrow { display: block; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .25em; color: var(--muted); margin-bottom: 1rem; }

/* Cabecera: solo el logo, transparente sobre la portada */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; justify-content: center;
  padding: 1.6rem var(--side); color: #fff; mix-blend-mode: difference;
  text-transform: uppercase; letter-spacing: .2em; }
.header__logo { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .3em; white-space: nowrap; padding: 0 .5rem; }
.header__logo span { font-size: .62em; letter-spacing: .35em; }

/* Portada (igual que la web) */
.hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; color: var(--ivory); }
.hero__media { position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(96,114,126,0) 79%, rgba(96,114,126,.85) 82%, rgba(150,166,180,.9) 100%),
              linear-gradient(90deg, #12212a, #081012); }
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,14,17,.4) 0%, rgba(8,14,17,0) 22%); }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { object-position: 56% 50%; }
@media (min-aspect-ratio: 4/3) {
  .hero__media picture { width: auto; aspect-ratio: 1195 / 896; margin: 0 auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
}
.hero__title { position: absolute; left: var(--side); top: clamp(5.5rem, 11vh, 8rem); z-index: 2;
  display: flex; flex-direction: column; width: max-content; font-family: var(--serif); font-weight: 400;
  font-size: min(var(--fs-h1), 21vh); white-space: nowrap; line-height: .82; letter-spacing: -.02em;
  text-transform: uppercase; text-shadow: 0 2px 40px rgba(22,18,14,.35), 0 1px 3px rgba(22,18,14,.2); perspective: 600px; }
.hero__name { display: block; }
.hero__title .char { display: inline-block; transform-origin: 50% 100%; }
.hero__a { -webkit-text-stroke: max(.014em, 1.5px) currentColor; paint-order: stroke fill; }
.hero__sub { position: absolute; z-index: 2; right: var(--side); top: 42vh; max-width: 15rem; text-align: right;
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .25em;
  text-shadow: 0 1px 18px rgba(22,18,14,.55), 0 1px 2px rgba(22,18,14,.35); }
.hero__scroll { position: absolute; z-index: 2; left: 50%; bottom: 2rem; transform: translateX(-50%);
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .25em; color: var(--ivory);
  display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.hero__scroll i { display: block; width: 1px; height: 2.6rem; background: currentColor; transform-origin: top;
  animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Aviso «Web en obras» */
.works { position: relative; padding: clamp(5rem, 2rem + 12vw, 12rem) var(--side) clamp(4rem, 2rem + 8vw, 9rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 3rem 6vw; align-items: end; }
.works__title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-big); line-height: 1; letter-spacing: -.01em; }
.works__title em { font-style: italic; color: var(--clay); }
.works__text { color: var(--muted); }
.works__text p + p { margin-top: 1.2rem; }
.works__status { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 2rem;
  padding: .55rem 1.1rem; border: 1px solid rgba(26,24,22,.18); border-radius: 999px;
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .22em; color: var(--ink); }
.works__status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--clay);
  animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.works__link { display: inline-block; margin-top: 2rem; position: relative; color: var(--ink);
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .2em; }
.works__link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: currentColor;
  transform-origin: left; transition: transform .5s var(--ease); }
.works__link:hover::after { transform: scaleX(.3); }
.foot { border-top: 1px solid rgba(26,24,22,.12); margin: 0 var(--side); padding: 1.6rem 0 2.2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }

@media (max-width: 1024px) {
  .hero { height: 100svh; min-height: 520px; }
  .hero__sub { top: calc(clamp(5.5rem, 11vh, 8rem) + min(17vw, 21vh) * .82 + 1.6rem); text-align: left; left: var(--side); right: auto; }
}
@media (max-width: 767px) {
  .header { padding: 1rem var(--side); }
  .header__logo { display: flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: 1.05rem; letter-spacing: .24em; }
  .header__logo span { font-size: .5em; letter-spacing: .52em; margin-top: .25rem; }
  .works { grid-template-columns: 1fr; }
}
/* Móvil: portada apilada, foto completa arriba y nombre debajo */
@media (max-width: 600px) {
  .hero { height: auto; min-height: 0; padding-top: 4.6rem; background: var(--ivory); color: var(--ink); }
  .header { mix-blend-mode: normal; color: var(--ink); background: var(--ivory); }
  .hero__media { position: relative; inset: auto; }
  .hero__media::after { background: linear-gradient(180deg, rgba(22,18,14,0) 70%, rgba(22,18,14,.12)); }
  .hero__media img { height: auto; transform: none !important; }
  .hero__title { position: relative; left: auto; top: auto; width: max-content; margin: 2rem var(--side) 0;
    font-size: calc((100vw - 2.5rem) / 4.7); text-shadow: none; transform: none !important; }
  .hero__sub { position: static; max-width: none; margin: 1.4rem var(--side) 0; text-align: left; color: var(--muted); text-shadow: none; }
  .hero__scroll { display: none; }
  .works { padding-top: 4.5rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100vh; }
  .hero__title { top: 4.4rem; font-size: min(14vw, 15vh); }
  .hero__sub, .hero__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }