/* Andrea Santacruz — portfolio. Paleta y tipos del branding de su canal (hueso, rojo, Instrument Serif + Archivo). */
:root {
  --paper: #F2EDE4;
  --paper-2: #E7E0D3;
  --sheet: #FBF8F2;
  --ink: #0B0A0A;
  --carbon: #161414;
  --muted: #5B5550;
  --red: #C8102E;
  --wine: #7A0E1C;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Archivo", system-ui, sans-serif;
  --script: "Mrs Saint Delafield", "Instrument Serif", cursive;

  --fs-mega: clamp(68px, 13.5vw, 232px);
  --fs-h2: clamp(46px, 7.4vw, 124px);
  --fs-h3: clamp(26px, 2.3vw, 36px);
  --fs-body: clamp(16px, 1.15vw, 18px);
  --fs-small: 14px;

  --m: clamp(16px, 4vw, 56px);
  --gap-section: clamp(110px, 14vw, 200px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--sans);
  font-stretch: 100%;
}
html, body { overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.skip { position: fixed; left: var(--m); top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { top: 12px; }

.script { font-family: var(--script); font-weight: 400; }

/* ---------- Botones ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--red); color: var(--paper);
  font: 600 16px/1 var(--sans); font-stretch: 85%; text-decoration: none;
  transition: background-color .3s;
}
.btn:hover { background: var(--wine); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--ink { background: var(--ink); }
.btn--ink:hover { background: var(--red); }
.btn--block { width: 100%; }
/* brillo que cruza los botones destacados */
.btn--shine::after, .btn--red::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); /* taste-skill-ignore: brillo pedido por la clienta */
  transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { left: -60%; } 85%, 100% { left: 130%; } }

.link-arrow { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.link-arrow span { display: inline-block; transition: transform .3s var(--ease); }
.link-arrow:hover span { transform: translateX(6px); }

/* ---------- Títulos ---------- */
.h2 {
  margin: 0 0 .35em;
  font: 800 var(--fs-h2)/.86 var(--sans); font-stretch: 62%;
  text-transform: uppercase; letter-spacing: -.01em;
  color: var(--red);
}
.h2--light { color: var(--paper); }

/* ---------- Claqueta de entrada (sobre el vídeo del hero) ---------- */
.slate { display: none; position: absolute; z-index: 6; left: 50%; top: 46%; width: min(380px, 62%); translate: -50% -50%; rotate: -4deg; }
.js .slate { display: block; }
.slate__stick { display: block; width: 100%; height: 44px; transform-origin: 2% 100%; border: 4px solid var(--paper); }
.slate__body { margin-top: 5px; background: var(--carbon); color: var(--paper); border: 4px solid var(--paper); padding: 14px 18px; }
.slate__prod { margin: 0 0 8px; font: 400 clamp(34px, 3.4vw, 46px)/1 var(--script); }
.slate__row { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 2px solid rgba(242,237,228,.35); font-stretch: 75%; }
.slate__row span { color: #bdb6ad; font-size: 14px; }
.slate__row b { font-size: 18px; font-weight: 700; margin-right: auto; }
.slate__action { position: absolute; right: -14px; top: -46px; margin: 0; font: italic 400 34px/1 var(--serif); color: var(--red); opacity: 0; rotate: 8deg; }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--m);
  background: var(--paper); color: var(--ink);
  transition: background-color .45s, color .45s, transform .45s var(--ease);
}
.nav.is-dark { background: var(--carbon); color: var(--paper); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__brand { font: 800 22px/1 var(--sans); font-stretch: 62%; text-transform: uppercase; text-decoration: none; letter-spacing: .01em; }
.nav__links { display: flex; gap: clamp(14px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; align-items: center; }
.nav__links a { text-decoration: none; font-weight: 500; font-size: 16px; position: relative; }
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { background: var(--red); color: var(--paper); padding: 10px 16px; transition: background-color .3s; }
.nav__cta:hover { background: var(--wine); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: center;
  padding: 110px var(--m) 70px;
}
.hero__text { grid-column: 1 / 7; position: relative; z-index: 2; }
.hero__title { margin: 0; line-height: 1; }
.hero__script {
  display: block; position: relative; z-index: 2;
  font: 400 clamp(64px, 9.5vw, 168px)/.7 var(--script); color: var(--red);
  margin: 0 0 -.18em .08em; transform: rotate(-5deg); transform-origin: left bottom;
}
.hero__display {
  display: block; font: 800 clamp(64px, 10.4vw, 184px)/.84 var(--sans); font-stretch: 62%;
  text-transform: uppercase; letter-spacing: -.015em; white-space: nowrap;
}
.hero__display .ch { display: inline-block; }
.hero__slogan { margin: 26px 0 10px; max-width: 26ch; font: italic 400 clamp(26px, 2.4vw, 36px)/1.12 var(--serif); }
.hero__support { margin: 0 0 30px; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }

.hero__media { grid-column: 7 / 13; position: relative; padding: 30px 0 60px 30px; }
.print { margin: 0; position: relative; background: #fff; padding: 12px 12px 46px; transform: rotate(1.6deg); }
.print video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--carbon); }
.print__caption { position: absolute; left: 50%; translate: -50% 0; bottom: 6px; font: 400 34px/1 var(--script); color: var(--ink); }
.clip { position: absolute; z-index: 3; top: -26px; left: 34px; width: 26px; height: 70px; fill: none; stroke: #9a948c; stroke-width: 2.6; stroke-linecap: round; }
.clip--red { stroke: var(--red); }
.tape { position: absolute; z-index: 3; width: 120px; height: 34px; background: rgba(231,224,211,.82); clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%); }
.tape--tr { top: -12px; right: -26px; transform: rotate(32deg); }
.video-toggle {
  position: absolute; right: 22px; bottom: 56px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(11,10,10,.72); color: var(--paper); cursor: pointer; display: grid; place-items: center;
  transition: background-color .3s, transform .3s var(--ease);
}
.video-toggle:hover { background: var(--red); transform: scale(1.08); }
.video-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.video-toggle .i-play, .video-toggle[aria-pressed="true"] .i-pause { display: none; }
.video-toggle[aria-pressed="true"] .i-play { display: block; }

.polaroid { margin: 0; background: #fff; padding: 10px 10px 40px; position: relative; }
.polaroid img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 14px; bottom: 4px; font: 400 34px/1 var(--script); }
.polaroid--hero { position: absolute; z-index: 4; width: 30%; left: -6%; bottom: -10px; transform: rotate(-7deg); }
.sticker-flower { position: absolute; z-index: 5; width: 13%; right: 2%; bottom: -30px; transform: rotate(18deg); filter: drop-shadow(0 8px 10px rgba(11,10,10,.25)); pointer-events: none; } /* taste-skill-ignore: pegatina recortada */
.stamp {
  --h: 5px; padding: 8px; background: var(--sheet);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--h), #0000 96%, #000) calc(-1 * 7px) calc(-1 * 7px) / 14px 14px round; /* taste-skill-ignore: máscara de sello troquelado */
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--h), #0000 96%, #000) calc(-1 * 7px) calc(-1 * 7px) / 14px 14px round; /* taste-skill-ignore: máscara de sello troquelado */
}
.stamp img { width: 100%; height: 100%; object-fit: cover; }
.stamp--hero { position: absolute; z-index: 4; width: 116px; height: 92px; right: 6%; top: -6px; transform: rotate(-8deg); }

/* ---------- Marquee ---------- */
.marquee { background: var(--red); color: var(--paper); overflow: hidden; padding: 16px 0 14px; transform: rotate(-1.2deg); margin: 10px -2vw 0; }
.marquee__track { display: flex; width: max-content; }
.marquee__track span { font: italic 400 clamp(26px, 2.4vw, 34px)/1.25 var(--serif); padding: 0 .55em; white-space: nowrap; }
.marquee__track span::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: 1.1em; vertical-align: middle; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* ---------- Sobre mí ---------- */
.about {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px;
  padding: var(--gap-section) var(--m);
}
.about__photo { grid-column: 1 / 6; position: relative; }
.about__photo .polaroid--about { position: sticky; top: 110px; width: 78%; transform: rotate(-3deg); }
.snap--about { margin: 0; position: absolute; width: 46%; right: 0; top: 58%; padding: 8px; background: #fff; transform: rotate(5deg); }
.snap--about img { aspect-ratio: 3/4; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.about__body { grid-column: 6 / 13; }
.letter {
  background: var(--sheet); padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 64px) clamp(48px, 6vw, 80px);
  -webkit-mask: radial-gradient(10px at 50% 100%, #0000 96%, #000) 50% / 20px 100%; /* taste-skill-ignore: máscara de festón */
          mask: radial-gradient(10px at 50% 100%, #0000 96%, #000) 50% / 20px 100%; /* taste-skill-ignore: máscara de festón */
}
.letter p { margin: 0 0 1.1em; max-width: 60ch; }
.letter mark { background: var(--red); color: var(--paper); padding: 0 .2em; }
.letter__sign { display: flex; flex-direction: column; margin-top: 1.4em !important; }
.letter__sign .script { font-size: 76px; line-height: .8; color: var(--red); }
.letter__sign small { font-size: var(--fs-small); color: var(--muted); margin-top: 8px; }
.tearoff {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 10px; background: var(--sheet); padding: 22px clamp(24px, 5vw, 64px);
}
.tearoff::before { /* línea de troquel de puntos */
  content: ""; position: absolute; left: 12px; right: 12px; top: -8px; height: 6px;
  background: radial-gradient(circle 2.6px, var(--muted) 96%, #0000) 0 0 / 14px 6px repeat-x; /* taste-skill-ignore: línea de troquel de puntos */
}
.tearoff__mail { font: italic 400 clamp(20px, 2vw, 28px)/1.2 var(--serif); text-decoration: none; word-break: break-all; }
.tearoff__mail:hover { color: var(--red); }
.copy-status { flex-basis: 100%; font-size: var(--fs-small); color: var(--wine); min-height: 1em; }

.ficha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 64px; }
.ficha h3 { margin: 0 0 12px; font: 800 26px/1 var(--sans); font-stretch: 62%; text-transform: uppercase; color: var(--red); }
.ficha h3 + ul { margin-bottom: 26px; }
.ficha ul { list-style: none; margin: 0; padding: 0; }
.ficha li { margin-bottom: 12px; font-size: 16px; line-height: 1.4; }
.ficha li b { display: block; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { margin: 0; background: var(--ink); color: var(--paper); padding: 6px 12px; font-size: 15px; transition: background-color .3s, transform .3s var(--ease); }
.chips li:hover { background: var(--red); transform: translateY(-2px) rotate(-2deg); }
.langs li span { color: var(--muted); }

/* ---------- Trabajos ---------- */
.works {
  background: var(--carbon); color: var(--paper);
  padding: var(--gap-section) var(--m);
}
.works__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin-bottom: 56px; }
.works__head .h2 { margin: 0; }
.works__note { margin: 0; max-width: 34ch; color: #cfc8be; }
.works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.work { position: relative; outline: none; }
.work:hover, .work:focus-within, .work:focus-visible { z-index: 5; }
.work:focus-visible .work__media { outline: 3px solid var(--red); outline-offset: 4px; }
.work__media { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--ink); cursor: pointer; }
.work__media img, .work__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s, opacity .6s; filter: grayscale(.35) brightness(.88); }
.work:hover .work__media img, .work:focus .work__media img, .work:hover .work__media video { transform: scale(1.06); filter: none; }
.work__alt { opacity: 0; }
.work:hover .work__alt, .work:focus .work__alt { opacity: 1; }
.work__media video { opacity: 0; }
.work.is-playing .work__media video { opacity: 1; }
.work__kind { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: var(--paper); color: var(--ink); padding: 4px 10px; font-size: var(--fs-small); font-weight: 600; }
.work__media::after { /* marco rojo que aparece al pasar */
  content: ""; position: absolute; inset: 0; border: 0 solid var(--red); transition: border-width .35s var(--ease); pointer-events: none;
}
.work:hover .work__media::after, .work:focus .work__media::after { border-width: 6px; }

.work__media--card { background: var(--wine); display: grid; place-items: center; }
.titlecard { margin: 0; text-align: center; font: italic 400 clamp(24px, 2.4vw, 34px)/1 var(--serif); color: var(--paper); position: relative; z-index: 1; }
.titlecard span { display: block; }
.titlecard span:nth-child(2) { font: 800 1.2em/.9 var(--sans); font-style: normal; font-stretch: 62%; text-transform: uppercase; }
.work__media .work__flower { position: absolute; inset: auto 6% -12% auto; width: 22%; height: auto; object-fit: contain; filter: none; opacity: .9; transform: rotate(14deg); }
.work:hover .work__media .work__flower { transform: rotate(4deg) scale(1.08); }

/* ficha del trabajo: aparece a la derecha del vídeo */
.work__info {
  background: var(--paper); color: var(--ink); padding: 0 20px 18px;
}
.work__info::before { /* franja de claqueta */
  content: ""; display: block; height: 14px; margin: 0 -20px 16px;
  background: repeating-linear-gradient(-55deg, var(--ink) 0 12px, var(--paper) 12px 24px); /* taste-skill-ignore: franjas de claqueta (patrón, no degradado) */
}
.work__info h3 { margin: 0 0 6px; font: 400 var(--fs-h3)/1 var(--serif); }
.work__role { margin: 0; font-weight: 600; }
.work__year { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.work__awards { list-style: none; margin: 16px 0 0; padding: 0; }
.work__awards li { position: relative; padding-left: 22px; margin-bottom: 6px; font-size: 15px; line-height: 1.35; color: var(--wine); }
.work__awards li::before { content: ""; position: absolute; left: 0; top: .25em; width: 13px; height: 13px; background: var(--red); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

@media (hover: hover) and (min-width: 1000px) {
  .work__info {
    position: absolute; top: 0; left: calc(100% + 14px); width: min(300px, 92%);
    opacity: 0; visibility: hidden; transform: translateX(-16px) rotate(-1deg);
    transition: opacity .35s, transform .45s var(--ease), visibility 0s .45s;
    box-shadow: 0 22px 40px -18px rgba(0,0,0,.6); /* taste-skill-ignore: ficha flotante al pasar el ratón */
  }
  .work:nth-child(3n) .work__info { left: auto; right: calc(100% + 14px); transform: translateX(16px) rotate(1deg); }
  .work:hover .work__info, .work:focus .work__info, .work:focus-within .work__info {
    opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .45s var(--ease), visibility 0s;
  }
  .work__info h3 { opacity: 0; transform: translateY(10px); transition: .4s var(--ease) .08s; }
  .work__role, .work__year { opacity: 0; transform: translateY(10px); transition: .4s var(--ease) .14s; }
  .work__awards { opacity: 0; transform: translateY(10px); transition: .4s var(--ease) .2s; }
  .work:hover :is(h3, .work__role, .work__year, .work__awards),
  .work:focus :is(h3, .work__role, .work__year, .work__awards),
  .work:focus-within :is(h3, .work__role, .work__year, .work__awards) { opacity: 1; transform: none; }
}

/* ---------- Premios ---------- */
.awards { background: var(--wine); color: var(--paper); padding: clamp(90px, 10vw, 150px) var(--m); position: relative; overflow: hidden; }
.awards__list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.laurel-item { position: relative; text-align: center; padding: 10px 6px 0; }
.laurel { position: relative; display: block; width: min(170px, 70%); margin: 0 auto; color: #F5D9A8; }
.laurel svg { width: 100%; height: auto; overflow: visible; }
.laurel em { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 24px/1 var(--serif); color: var(--paper); }
.laurel-item p { margin: 16px auto 0; max-width: 24ch; display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.35; }
.laurel-item b { font: italic 400 23px/1.1 var(--serif); }
.laurel-item i { font-style: normal; color: #f2c6c9; }
/* brillo en los premios */
.laurel-item::after {
  content: ""; position: absolute; inset: -10% auto -10% -70%; width: 50%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,236,200,.28), transparent); /* taste-skill-ignore: brillo pedido por la clienta */
  transform: skewX(-18deg); animation: shine 6s ease-in-out infinite;
}
.laurel-item:nth-child(2)::after { animation-delay: .5s; }
.laurel-item:nth-child(3)::after { animation-delay: 1s; }
.laurel-item:nth-child(4)::after { animation-delay: 1.5s; }
.laurel-item:hover .laurel { filter: drop-shadow(0 0 12px rgba(245,217,168,.7)); } /* taste-skill-ignore: brillo pedido por la clienta en premios */
.laurel { transition: filter .4s; }

/* ---------- Redes ---------- */
.social { padding: var(--gap-section) var(--m) clamp(80px, 9vw, 130px); }
.social__ig { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: center; }
.phone {
  grid-column: 1 / 6; justify-self: center;
  width: min(340px, 100%); padding: 12px; border-radius: 44px;
  background: var(--ink); transform: rotate(-4deg);
}
.phone__screen { border-radius: 34px; padding-bottom: 18px; overflow: hidden; background: #fff; color: #111; font-size: 13px; line-height: 1.3; }
.ig__top { padding: 18px 16px 10px; font-size: 16px; }
.ig__profile { display: flex; gap: 14px; align-items: center; padding: 6px 16px 12px; }
.ig__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; outline: 3px solid var(--red); outline-offset: 2px; }
.ig__name { margin: 0; font-weight: 700; font-size: 14px; }
.ig__bio { margin: 2px 0 0; }
.ig__follow { display: block; margin: 0 16px 12px; text-align: center; background: var(--red); color: #fff; padding: 7px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.posts { grid-column: 7 / 13; }
.posts__title { margin: 0 0 22px; font: 400 var(--fs-h3)/1.1 var(--serif); }
.posts__title a { color: var(--red); text-decoration: none; font: 600 .8em var(--sans); }
.post {
  display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center;
  padding: 14px; margin-bottom: 14px; background: var(--sheet); text-decoration: none;
  transition: transform .4s var(--ease), background-color .3s;
}
.post:nth-child(odd) { transform: rotate(.6deg); }
.post:nth-child(even) { transform: rotate(-.6deg); }
.post:hover { transform: translateX(10px) rotate(0); background: #fff; }
.post img { width: 140px; aspect-ratio: 1; object-fit: cover; }
.post b { display: block; font: 400 24px/1.1 var(--serif); margin-bottom: 4px; }

.yt { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: center; margin-top: clamp(80px, 9vw, 130px); background: var(--carbon); color: var(--paper); padding: clamp(24px, 4vw, 48px); }
.yt__player { grid-column: 1 / 8; position: relative; aspect-ratio: 16/9; background: var(--ink); overflow: hidden; }
.yt__player video { width: 100%; height: 100%; object-fit: cover; }
.yt__play {
  position: absolute; inset: 0; margin: auto; width: 92px; height: 64px; border-radius: 18px;
  display: grid; place-items: center; background: var(--red); color: #fff;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.yt__play:hover { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(200,16,46,.3); } /* taste-skill-ignore: halo del play al pasar (estado, no en reposo) */
.yt__play svg { width: 30px; fill: currentColor; }
.yt__text { grid-column: 8 / 13; padding-left: clamp(0px, 2vw, 24px); }
.yt__text h3 { margin: 0 0 10px; font: 800 clamp(34px, 3.6vw, 56px)/.9 var(--sans); font-stretch: 62%; text-transform: uppercase; }
.yt__video { font: italic 400 26px/1.15 var(--serif); color: #f2c6c9; margin: 0 0 12px; }
.yt__text p:not(.yt__video) { margin: 0 0 24px; color: #e3ddd3; }

/* ---------- Contacto ---------- */
.contact { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: center; background: var(--carbon); padding: var(--gap-section) var(--m) 0; overflow: hidden; }
.contact__photo { grid-column: 1 / 9; grid-row: 1; margin: 0; aspect-ratio: 4/3; overflow: hidden; }
.contact__bg { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.contact__card { grid-column: 8 / 13; grid-row: 1; position: relative; z-index: 2; background: var(--paper); padding: 36px 32px 32px; }
.contact__card .h2 { font-size: clamp(56px, 6vw, 92px); }
.contact__card > p { margin: 0 0 22px; }
.contact__card label { display: block; font-weight: 600; font-size: 15px; margin: 14px 0 6px; }
.contact__card input, .contact__card select, .contact__card textarea {
  width: 100%; padding: 12px 14px; background: var(--sheet); border: 2px solid var(--paper-2); border-radius: 0;
  transition: border-color .25s, background-color .25s;
}
.contact__card textarea { resize: vertical; min-height: 120px; }
.contact__card :is(input, select, textarea):focus { outline: none; border-color: var(--red); background: #fff; }
.contact__card [aria-invalid="true"] { border-color: var(--red); background: #fdeeee; }
.contact__card .btn { margin-top: 22px; }
.form-status { margin: 12px 0 0; min-height: 1.3em; font-size: 15px; color: var(--wine); }

/* ---------- Botones RRSS ---------- */
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 auto 80px; }
.links__btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 26px;
  background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px;
  transition: background-color .3s, color .3s;
}
.links__btn:hover, .links__btn:focus-visible { background: var(--red); color: var(--paper); }
.links__btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: transform .4s var(--ease); }
.links__btn svg .fill { fill: currentColor; stroke: none; }
.links__btn:hover svg { transform: rotate(-12deg) scale(1.12); }

/* ---------- Pie / derechos ---------- */
.footer { background: var(--carbon); color: var(--paper); padding: 120px var(--m) 28px; overflow: hidden; }
.postcard {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  background: var(--paper); color: var(--ink); padding: 70px clamp(24px, 5vw, 64px) 54px;
  max-width: 1180px; margin: 0 auto;
  -webkit-mask: radial-gradient(22px at 50% 0, #0000 96%, #000) 50% / 44px 100%; /* taste-skill-ignore: máscara de festón de postal */
          mask: radial-gradient(22px at 50% 0, #0000 96%, #000) 50% / 44px 100%; /* taste-skill-ignore: máscara de festón de postal */
}
.postcard__title { margin: 0 0 14px; font: italic 400 clamp(34px, 3.4vw, 48px)/1 var(--serif); color: var(--red); }
.postcard__msg p { margin: 0; max-width: 40ch; }
.postcard__addr { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 40px; border-left: 2px solid var(--paper-2); font-size: 18px; }
.postcard__addr a { text-decoration: none; word-break: break-all; }
.postcard__addr a:hover { color: var(--red); }
.stamp--foot { width: 88px; height: 112px; align-self: flex-end; margin-bottom: 8px; transform: rotate(4deg); }
.footer__name {
  margin: 60px 0 0; text-align: center; white-space: nowrap;
  font: 800 clamp(44px, 12.2vw, 212px)/.84 var(--sans); font-stretch: 62%; text-transform: uppercase; color: var(--red);
}
.footer__name .ch { display: inline-block; }
.footer__legal { margin: 28px 0 0; text-align: center; font-size: var(--fs-small); color: #bdb6ad; }

/* ---------- Cursor y grano ---------- */
.cursor { position: fixed; z-index: 80; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--red); pointer-events: none; display: grid; place-items: center; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease); opacity: 0; }
.cursor span { font: 700 14px/1 var(--sans); color: var(--paper); opacity: 0; transition: opacity .2s; }
.cursor.is-big { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
.cursor.is-big span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; background: url(../img/grano.png); opacity: .07; mix-blend-mode: multiply; } /* grano de papel */

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; padding-top: 100px; row-gap: 56px; }
  .hero__text, .hero__media { grid-column: 1 / -1; }
  .hero__media { padding: 20px 6% 40px 10%; }
  .about { grid-template-columns: 1fr; row-gap: 60px; }
  .about__photo, .about__body { grid-column: 1 / -1; }
  .about__photo { max-width: 540px; }
  .about__photo .polaroid--about { position: relative; top: 0; }
  .works__grid { grid-template-columns: repeat(2, 1fr); }
  .awards__list { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .social__ig { grid-template-columns: 1fr; row-gap: 50px; }
  .phone, .posts { grid-column: 1 / -1; }
  .yt { grid-template-columns: 1fr; row-gap: 26px; }
  .yt__player, .yt__text { grid-column: 1 / -1; }
  .yt__text { padding-left: 0; }
  .contact { grid-template-columns: 1fr; padding-top: 90px; }
  .contact__photo { grid-column: 1; grid-row: 1; }
  .contact__card { grid-column: 1; grid-row: 2; margin: -80px 16px 0; }
}

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .nav__links li:not(:last-child) { display: none; }
  .nav__brand { font-size: 20px; }
  .hero__display { font-size: 21vw; }
  .hero__script { font-size: 22vw; }
  .polaroid--hero { width: 36%; left: -8%; }
  .stamp--hero { width: 84px; height: 68px; }
  .ficha { grid-template-columns: 1fr; gap: 10px; margin-top: 48px; }
  .works__grid { grid-template-columns: 1fr; }
  .awards__list { grid-template-columns: 1fr; }
  .post { grid-template-columns: 96px 1fr; }
  .post img { width: 96px; }
  .contact__card { padding: 28px 22px; }
  .postcard { grid-template-columns: 1fr; padding-top: 56px; }
  .postcard__addr { padding-left: 0; border-left: 0; font-size: 17px; }
  .stamp--foot { position: absolute; right: 0; top: -150px; width: 64px; height: 82px; }
  .links__btn { flex: 1 1 40%; justify-content: center; padding: 0 14px; }
  .phone { width: 86%; transform: rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}