*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;background:#f2f0eb;color:#171717;font-family:"DM Sans",Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.site-header{height:76px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;background:#111;color:#f5f3ee;position:sticky;top:0;z-index:10}.wordmark{font-family:"Playfair Display",Georgia,serif;font-size:1.65rem;font-weight:700;letter-spacing:-.08em}.wordmark span{color:#a7a49d}.nav{display:flex;gap:2.2rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.nav a{opacity:.78;transition:opacity .2s}.nav a:hover{opacity:1}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.4rem}.hero{min-height:calc(88vh - 76px);background:#181818;color:#f5f3ee;position:relative;display:flex;align-items:center;padding:9vh 10vw;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 75% 40%,#494949 0%,#252525 28%,#141414 66%);opacity:.9}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.82),rgba(10,10,10,.08))}.hero-content{position:relative;z-index:1;max-width:760px}.eyebrow{font-size:.68rem;letter-spacing:.19em;font-weight:700;text-transform:uppercase;color:#8b8983;margin:0 0 1.2rem}.hero .eyebrow{color:#c1beb6}.hero h1{font:500 clamp(4rem,10vw,8.7rem)/.93 "Playfair Display",Georgia,serif;letter-spacing:-.055em;margin:0 0 1.7rem}.hero h1 em{font-weight:500;color:#c5c1b9}.hero-copy{max-width:420px;color:#d0cec9;font-size:1rem;margin:0 0 2rem}.button{display:inline-flex;align-items:center;gap:2rem;padding:13px 18px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.button-light{background:#f2f0eb;color:#171717}.button span{font-size:1rem}.hero-caption{position:absolute;right:6vw;bottom:2rem;font-size:.62rem;letter-spacing:.17em;color:#c1beb6}.section-wrap{width:min(1100px,84vw);margin:0 auto}.intro{padding-top:115px;padding-bottom:120px}.intro h2,.section-heading h2,.bio-grid h2,.contact-section h2{font:500 clamp(2.5rem,5vw,4.6rem)/1.08 "Playfair Display",Georgia,serif;letter-spacing:-.04em;margin:0}.intro-text{max-width:590px;margin:2rem 0 0 auto;color:#5e5b56;font-size:1.05rem}.video-section{background:#191919;color:#f2f0eb;padding:100px 0 110px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.5rem}.section-heading .eyebrow{color:#929089}.section-heading>p{max-width:260px;color:#a9a69f;font-size:.9rem;margin:0 0 .4rem}.media-placeholder{min-height:360px;border:1px solid #454545;background:linear-gradient(135deg,#252525,#101010);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}.play-icon{width:62px;height:62px;border:1px solid #aaa;border-radius:50%;display:grid;place-items:center;padding-left:4px;color:#eee;margin-bottom:1rem}.media-placeholder h3{font:500 1.7rem "Playfair Display",Georgia,serif;margin:.3rem}.media-placeholder p{max-width:470px;font-size:.82rem;color:#a9a69f}.gallery-section{padding-top:110px;padding-bottom:115px}.gallery{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px}.photo-placeholder{min-height:360px;background:linear-gradient(145deg,#d0cec8,#a8a59e);display:flex;align-items:end;padding:18px;color:#55524c;font-size:.65rem;letter-spacing:.13em}.photo-one{min-height:470px;background:linear-gradient(155deg,#aaa79f,#d9d7d1 45%,#79766f)}.photo-two{background:linear-gradient(35deg,#9a9790,#d4d2cb 65%,#b0ada5)}.photo-three{background:linear-gradient(125deg,#bdbab3,#8d8a83 55%,#d5d3cc)}.small-note{font-size:.75rem;color:#77736d;margin-top:1rem}.bio-section{background:#e4e1da;padding:110px 0}.bio-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw}.bio-copy>p{margin:0 0 1.2rem;color:#55524d}.facts{margin-top:2.5rem;border-top:1px solid #c6c2ba;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}.facts div{padding:1rem 0;border-bottom:1px solid #c6c2ba;display:flex;flex-direction:column;gap:.2rem}.facts span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#77736d}.facts strong{font-size:.9rem;font-weight:600}.contact-section{padding-top:120px;padding-bottom:130px}.contact-section h2{font-size:clamp(4rem,8vw,7rem);margin-bottom:1rem}.contact-section>p:not(.eyebrow){color:#67635d}.email-link{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b9b6ae;padding:1.1rem 0;margin-top:2rem;font:500 clamp(1.1rem,3vw,1.7rem) "Playfair Display",Georgia,serif;max-width:650px}.email-link span{font-family:"DM Sans",sans-serif}.social-link{display:inline-block;margin-top:1.4rem;font-size:.82rem;border-bottom:1px solid #aaa69d;padding-bottom:4px}footer{background:#111;color:#eee;padding:25px 6vw;display:flex;align-items:center;justify-content:space-between;font-size:.72rem;color:#aaa79f}footer p{margin:0}footer>a:last-child{color:#eee}
@media(max-width:700px){.site-header{height:66px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:66px;left:0;right:0;background:#111;padding:1rem 6vw 1.5rem;flex-direction:column;gap:1.2rem}.nav.open{display:flex}.hero{min-height:78vh;padding:6vh 8vw}.hero h1{font-size:clamp(3.6rem,16vw,6rem)}.hero-caption{right:8vw;font-size:.55rem}.section-wrap{width:84vw}.intro{padding-top:80px;padding-bottom:85px}.intro-text{margin-left:0}.video-section,.bio-section{padding:80px 0}.section-heading{align-items:start;flex-direction:column;gap:1rem}.media-placeholder{min-height:270px;padding:1.2rem}.gallery-section{padding-top:80px;padding-bottom:85px}.gallery{grid-template-columns:1fr 1fr}.photo-placeholder{min-height:250px}.photo-one{grid-column:1/-1;min-height:360px}.bio-grid{grid-template-columns:1fr;gap:2rem}.facts{grid-template-columns:1fr 1fr;gap:0 1rem}.contact-section{padding-top:85px;padding-bottom:90px}footer{gap:1rem;flex-wrap:wrap}footer p{order:3;width:100%}}

/* Real actor photographs */
.gallery-item{margin:0;min-width:0;display:flex;flex-direction:column;gap:.7rem}
.gallery-item img{display:block;width:100%;height:470px;object-fit:cover;object-position:center 25%;filter:grayscale(100%);transition:filter .35s,transform .35s}
.gallery-item:hover img{filter:grayscale(65%);transform:translateY(-3px)}
.gallery-main img{height:540px;object-position:center 22%}
.gallery-item figcaption{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#77736d}
@media(max-width:700px){.gallery-item img{height:330px}.gallery-main img{height:390px}}

.video-frame{width:100%;background:#050505;border:1px solid #454545;line-height:0}
.video-frame video{display:block;width:100%;max-height:78vh;aspect-ratio:16/9;object-fit:contain;background:#050505}
/* Retrato en la portada */
.hero-portrait {
  position: absolute;
  top: 0;
  right: 5%;
  width: 42%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 55%;
}

.hero-caption {
  z-index: 2;
}

@media (max-width: 700px) {
  .hero-portrait {
    right: 0;
    width: 55%;
    opacity: 0.4;
  }

  .hero-content {
    width: 100%;
  }
}


/* Base y desplazamiento */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--charcoal);
  color: var(--ivory);
}

/* Cabecera y navegación */
.site-header {
  background: #101010;
  border-bottom: 1px solid rgba(197, 164, 109, 0.22);
}

.wordmark span {
  color: var(--gold);
}

.nav a {
  transition: color 0.25s ease, opacity 0.25s ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--gold-light);
  opacity: 1;
}

/* Portada cinematográfica */
.hero {
  background: #111;
}

.hero:before {
  background:
    radial-gradient(
      ellipse at 76% 40%,
      #35312a 0%,
      #202020 35%,
      #101010 72%
    );
}

.hero-shade {
  background: linear-gradient(
    90deg,
    rgba(10, 10, 10, 0.9) 0%,
    rgba(10, 10, 10, 0.5) 55%,
    rgba(10, 10, 10, 0.08) 100%
  );
}

.hero .eyebrow {
  color: var(--gold-light);
}

.hero h1 em {
  color: var(--gold-light);
}

.hero-copy {
  color: #ded8ce;
}

.hero-caption {
  color: var(--gold-light);
}

/* Botones */
.button {
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.button-light {
  background: var(--gold);
  color: #17130d;
}

.button-light:hover,
.button-light:focus-visible {
  background: var(--gold-light);
  transform: translateY(-2px);
}

/* Presentación */
.intro {
  background: #171717;
}

.intro h2,
.section-heading h2,
.bio-grid h2,
.contact-section h2 {
  color: var(--ivory);
}

.intro .eyebrow,
.section-heading .eyebrow,
.bio-grid .eyebrow,
.contact-section .eyebrow {
  color: var(--gold);
}

.intro-text {
  color: #c3bdb2;
}

/* Videobook */
.video-section {
  background: #101010;
  border-top: 1px solid #29251f;
  border-bottom: 1px solid #29251f;
}

.media-placeholder {
  border-color: rgba(197, 164, 109, 0.35);
}

.play-icon {
  border-color: var(--gold);
  color: var(--gold-light);
}

/* Fotografías */
.gallery-section {
  background: #171717;
}

.gallery-item figcaption {
  color: var(--gold-light);
}

.small-note {
  color: #b4aea3;
}

/* Biografía */
.bio-section {
  background: #201e1a;
}

.bio-copy > p {
  color: #d0c9bd;
}

.facts {
  border-color: #494136;
}

.facts div {
  border-color: #494136;
}

.facts span {
  color: var(--gold-light);
}

.facts strong {
  color: var(--ivory);
}

/* Contacto */
.contact-section {
  background: #151515;
}

.contact-section > p:not(.eyebrow) {
  color: #c3bdb2;
}

.email-link {
  color: var(--ivory);
  border-color: rgba(197, 164, 109, 0.5);
  transition: color 0.25s ease;
}

.email-link:hover,
.email-link:focus-visible,
.social-link:hover,
.social-link:focus-visible {
  color: var(--gold-light);
}

.social-link {
  border-color: var(--gold);
}

/* Pie de página */
footer {
  background: #0c0c0c;
  border-top: 1px solid rgba(197, 164, 109, 0.2);
}

/* Accesibilidad: movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}
/* ========================================
   VINCENT TOLETANUS — ESTÉTICA CINEMATOGRÁFICA
   Mejoras visuales añadidas sin sustituir
   los estilos originales.
   ======================================== */

:root {
  --gold: #c5a46d;
  --gold-light: #dfc79c;
  --ivory: #f2eee6;
  --charcoal: #151515;
  --muted: #b4aea3;
}
/* Refinamiento cinematográfico de la portada */

.hero {
  isolation: isolate;
  background-color: #111;
}

.hero:before {
  background:
    radial-gradient(
      ellipse at 76% 42%,
      rgba(130, 101, 57, 0.24) 0%,
      rgba(45, 38, 29, 0.18) 28%,
      #111 72%
    );
}

.hero-shade {
  background: linear-gradient(
    90deg,
    rgba(12, 12, 12, 0.94) 0%,
    rgba(12, 12, 12, 0.72) 42%,
    rgba(12, 12, 12, 0.12) 100%
  );
}

.hero .eyebrow {
  letter-spacing: 0.2em;
}

.hero h1 {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.22);
}
.hero .hero-real-name {
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin-bottom: 0.35em;
}

.hero .hero-stage-name {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--gold-light);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.15;
  letter-spacing: 0.035em;
  margin-top: 0;
  margin-bottom: 0.6em;
}
.hero .button-light {
  border: 1px solid #c5a46d;
  box-shadow: 0 5px 24px rgba(0, 0, 0, 0.18);
}

.hero .button-light:hover {
  box-shadow: 0 8px 28px rgba(197, 164, 109, 0.16);
}

@media (max-width: 700px) {
  .hero-shade {
    background: linear-gradient(
      90deg,
      rgba(12, 12, 12, 0.82),
      rgba(12, 12, 12, 0.48)
    );
  }
}
/* Tipografía editorial para la portada */

.hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.2rem, 6.5vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 500;
  max-width: 850px;
  margin-top: 0.18em;
  margin-bottom: 0.3em;
  text-wrap: balance;
}

.hero h1 em {
  font-weight: 400;
  letter-spacing: -0.035em;
}

.hero .eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  line-height: 1.8;
  margin-bottom: 1.4rem;
}

.hero-copy {
  max-width: 540px;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .hero h1 {
    font-size: clamp(2.8rem, 12vw, 4.2rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
  }

  .hero .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
  }
}

/* Ajuste de portada para móviles */
@media (max-width: 700px) {
  .hero-portrait {
    right: -8%;
    opacity: 0.82;
  }

  .hero-content {
    position: relative;
    z-index: 2;
  }

  .hero-portrait {
    z-index: 1;
  }

  .hero .button-light {
    position: relative;
    z-index: 3;
    margin-top: 0.4rem;
  }

  .hero-shade {
    background: linear-gradient(
      90deg,
      rgba(12, 12, 12, 0.96) 0%,
      rgba(12, 12, 12, 0.78) 55%,
      rgba(12, 12, 12, 0.28) 100%
    );
  }
}

/* Botón del videobook más compacto en móviles */
@media (max-width: 700px) {
  .hero .button-light {
    font-size: 0.82rem;
    padding: 0.65rem 0.9rem;
    margin-top: 0.25rem;
    white-space: nowrap;
  }
}

/* Ajuste visible del botón en móviles */
@media screen and (max-width: 700px) {
  .hero .button-light {
    font-size: 12px !important;
    padding: 7px 10px !important;
    margin-top: 4px !important;
    transform: none !important;
  }
}

/* Separar el retrato del botón en móviles */
@media screen and (max-width: 700px) {
  .hero-portrait {
    right: -18% !important;
    transform: translateX(12px) !important;
  }

  .hero-content {
    max-width: 88% !important;
  }
}


/* Nombre real y nombre artístico de Vincent */
.hero .hero-real-name {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0 0 0.35em;
  overflow-wrap: break-word;
}

.hero .hero-stage-name {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--gold-light, #c5a66b);
  font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: 0.035em;
  margin: 0 0 0.8em;
}
/* Botón de contacto de la portada */
.hero .button-contact {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  box-sizing: border-box;
}