@charset "UTF-8";

/* ============================================================
   FC SAX — Design tokens
   ============================================================ */
:root{
  --carbon:#0B0B0C;
  --carbon-2:#141317;
  --carbon-3:#1D1B1F;
  --bone:#F3EEE6;
  --bone-2:#E9E0CF;
  --ink:#18161A;
  --ink-soft:#6B665C;
  --brass:#B68A4E;
  --brass-light:#E3C68C;
  --brass-deep:#8C6534;
  --line-dark: rgba(243,238,230,0.14);
  --line-light: rgba(24,22,26,0.12);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-0.01em; }
p{ margin:0; }
.container{ max-width:1320px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .container{ padding:0 22px; } }

.eyebrow{
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--brass);
}
.eyebrow.on-light{ color:var(--brass-deep); }

/* grain overlay */
.grain{
  position:fixed; inset:0; z-index:998; pointer-events:none; opacity:0.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  transition:background .5s var(--ease), padding .4s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,11,12,0.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  padding:14px 32px;
  border-bottom:1px solid var(--line-dark);
}
.nav-mark{ display:flex; align-items:center; gap:10px; }
.nav-mark svg{ width:26px; height:20px; }
.nav-wordmark{ font-family:var(--serif); font-size:20px; letter-spacing:0.02em; color:var(--bone); font-weight:500; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size:12.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(243,238,230,0.72);
  position:relative; padding-bottom:4px; transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--brass-light); transition:width .35s var(--ease);
}
.nav-links a:hover{ color:var(--bone); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--carbon); background:var(--brass-light); padding:11px 22px; border-radius:2px;
  border:1px solid var(--brass-light); transition:background .3s, color .3s, border-color .3s;
}
.nav-cta:hover{ background:transparent; color:var(--bone); border-color:var(--bone); }
.nav-burger{ display:none; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; background:none; border:none; color:var(--bone); }
  .nav-cta{ padding:9px 16px; font-size:11px; }
}

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:1000; background:var(--carbon);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:28px; padding:40px;
  transform:translateY(-100%); transition:transform .55s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--serif); font-size:34px; color:var(--bone); }
.mobile-menu .close-btn{ position:absolute; top:22px; right:28px; background:none; border:none; color:var(--bone); font-size:28px; }

/* Resto de tu código CSS exacto (Hero, Servicios, etc.) */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; background:#000; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:55% 30%; will-change:transform; transform:translate3d(0, var(--hero-shift, 0px), 0) scale(1.08); opacity:0.9; transition:transform 1.6s var(--ease), opacity 1.6s var(--ease); }
.hero-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,6,7,0.55) 0%, rgba(6,6,7,0.12) 32%, rgba(6,6,7,0.35) 62%, rgba(6,6,7,0.92) 100%), linear-gradient(90deg, rgba(6,6,7,0.55) 0%, rgba(6,6,7,0.05) 45%); }
.hero-content{ position:relative; z-index:2; width:100%; padding:0 32px 84px; }
.hero-inner{ max-width:1320px; margin:0 auto; }
.hero-eyebrow, .hero-title, .hero-sub, .hero-copy, .hero-actions, .scroll-cue{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
body.is-ready .hero-eyebrow, body.is-ready .hero-title, body.is-ready .hero-sub, body.is-ready .hero-copy, body.is-ready .hero-actions, body.is-ready .scroll-cue{ opacity:1; transform:translateY(0); }
body.is-ready .hero-eyebrow{ transition-delay:.12s; }
body.is-ready .hero-title{ transition-delay:.28s; }
body.is-ready .hero-sub{ transition-delay:.42s; }
body.is-ready .hero-copy{ transition-delay:.58s; }
body.is-ready .hero-actions{ transition-delay:.76s; }
body.is-ready .scroll-cue{ transition-delay:1.1s; }
body.is-ready .hero-media img{ opacity:1; }
.hero-eyebrow{ color:var(--brass-light); margin-bottom:22px; }
.hero-title{ font-size:clamp(3.4rem, 10vw, 8.6rem); line-height:0.92; color:var(--bone); margin:0 0 22px; letter-spacing:-0.015em; }
.hero-title em{ font-style:italic; color:var(--brass-light); font-weight:400; }
.hero-sub{ font-family:var(--sans); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; font-size:clamp(0.85rem, 1.4vw, 1.15rem); color:var(--bone); max-width:640px; margin-bottom:20px; }
.hero-copy{ font-size:16px; line-height:1.6; color:rgba(243,238,230,0.78); max-width:460px; margin-bottom:40px; font-weight:300; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 30px; font-size:12.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; border-radius:2px; transition:all .35s var(--ease); border:1px solid transparent; white-space:nowrap; }
.btn-primary{ background:var(--brass-light); color:var(--carbon); border-color:var(--brass-light); }
.btn-primary:hover{ background:var(--carbon); color:var(--brass-light); border-color:var(--brass-light); }
.btn-ghost{ background:transparent; color:var(--bone); border-color:rgba(243,238,230,0.4); }
.btn-ghost:hover{ border-color:var(--bone); background:rgba(243,238,230,0.08); }
.btn-ghost-dark{ background:transparent; color:var(--ink); border-color:rgba(24,22,26,0.3); }
.btn-ghost-dark:hover{ border-color:var(--ink); background:rgba(24,22,26,0.05); }
.waveline{ width:100%; height:56px; display:block; opacity:0.85; }
.waveline path{ fill:none; stroke:var(--brass); stroke-width:1.4; }
.scroll-cue{ position:absolute; right:36px; bottom:36px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(243,238,230,0.65); }
.scroll-cue .line{ width:1px; height:52px; background:linear-gradient(180deg, var(--brass-light), transparent); animation:scrollpulse 2.2s ease-in-out infinite; }
.scroll-cue span{ font-size:10px; letter-spacing:0.22em; text-transform:uppercase; writing-mode:vertical-rl; }
@keyframes scrollpulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
@media (max-width:640px){ .scroll-cue{ display:none; } }
.page-progress{ position:fixed; top:0; left:0; right:0; height:2px; background:rgba(243,238,230,0.1); z-index:950; }
.page-progress span{ display:block; width:0; height:100%; background:var(--brass); box-shadow:0 0 16px rgba(182,138,78,0.7); transition:width .12s linear; }

.reveal,
.reveal-up{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-left{ opacity:0; transform:translateX(-24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-right{ opacity:0; transform:translateX(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-scale{ opacity:0; transform:scale(.98); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-fade{ opacity:0; transition:opacity .9s var(--ease); }
.reveal.in,
.reveal-up.in{ opacity:1; transform:translateY(0); }
.reveal-left.in{ opacity:1; transform:translateX(0); }
.reveal-right.in{ opacity:1; transform:translateX(0); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.reveal-fade.in{ opacity:1; }
.reveal-delay-1.in{ transition-delay:.12s; }
.reveal-delay-2.in{ transition-delay:.24s; }
.reveal-delay-3.in{ transition-delay:.36s; }
.section{ padding:130px 0; position:relative; }
@media (max-width:900px){ .section{ padding:88px 0; } }
.atmos{ background:var(--bone); }
.atmos-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:80px; align-items:center; }
@media (max-width:900px){ .atmos-grid{ grid-template-columns:1fr; gap:48px; } }
.atmos-title{ font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.06; margin:18px 0 28px; color:var(--ink); }
.atmos-text{ font-size:17px; line-height:1.75; color:var(--ink-soft); max-width:520px; font-weight:300; }
.atmos-images{ position:relative; height:560px; }
.atmos-img-a, .atmos-img-b{ position:absolute; overflow:hidden; box-shadow:0 30px 60px -20px rgba(24,22,26,0.35); }
.atmos-img-a{ width:72%; height:78%; top:0; right:0; }
.atmos-img-b{ width:52%; height:46%; bottom:0; left:0; border:8px solid var(--bone); z-index:2; }
.atmos-img-a img, .atmos-img-b img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.atmos-images:hover img{ transform:scale(1.05); }
@media (max-width:900px){ .atmos-images{ height:420px; } }
@media (max-width:560px){ .atmos-images{ height:360px; } }
.services{ background:var(--carbon); color:var(--bone); }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(2.1rem,4.8vw,3.6rem); line-height:1.05; margin-top:16px; }
.section-head.light h2{ color:var(--bone); }
.section-head.dark h2{ color:var(--ink); }
.services-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px; background:var(--line-dark); border:1px solid var(--line-dark); }
@media (max-width:980px){ .services-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--carbon-2); min-height:420px; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .45s var(--ease); box-shadow:0 0 0 transparent; }
.service-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.2) contrast(1.03) brightness(1.1); transition:transform 1.2s var(--ease), filter .7s var(--ease); }
.service-card:hover img{ transform:scale(1.09); filter:saturate(1.2) contrast(1.06) brightness(1.1); }
.service-card:hover img{ transform:scale(1.09); filter:saturate(1.24) contrast(1.08) brightness(1.1); }

/* Esquinas tipo marco de galería: aparecen y se abren ligeramente en hover — un detalle editorial, no un efecto genérico. */
.service-card::before,
.service-card::after{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  border-color:rgba(227,198,140,0.85);
  border-style:solid;
  opacity:0;
  transition:opacity .5s var(--ease), width .5s var(--ease), height .5s var(--ease);
  z-index:3;
  pointer-events:none;
}
.service-card::before{ top:16px; left:16px; border-width:1px 0 0 1px; }
.service-card::after{ bottom:16px; right:16px; border-width:0 1px 1px 0; }
.service-card:hover::before, .service-card:focus-within::before{ opacity:1; width:30px; height:30px; }
.service-card:hover::after, .service-card:focus-within::after{ opacity:1; width:30px; height:30px; }

/* El scrim "respira" muy sutilmente de forma continua — presencia, sin ser una animación vistosa. */
.service-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,12,0.1) 18%, rgba(11,11,12,0.72) 100%); animation:service-scrim-breathe 9s ease-in-out infinite; }
.service-card:hover .service-scrim{ animation-play-state:paused; background:linear-gradient(180deg, rgba(11,11,12,0.06) 18%, rgba(11,11,12,0.66) 100%); }
@keyframes service-scrim-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.92; } }

.service-body{ position:absolute; left:0; right:0; bottom:0; padding:28px 26px 30px; z-index:2; }
.service-index{ font-size:11px; letter-spacing:.18em; color:var(--brass-light); text-transform:uppercase; margin-bottom:12px; display:block; transition:letter-spacing .5s var(--ease), opacity .5s var(--ease); }
.service-card:hover .service-index{ letter-spacing:.26em; }
.service-title{ font-family:var(--serif); font-size:clamp(1.7rem, 2vw, 2.3rem); color:var(--bone); margin-bottom:10px; line-height:1.12; transition:transform .45s var(--ease), letter-spacing .45s var(--ease); }
.service-card:hover .service-title{ transform:translateX(4px); }
.service-desc{ font-size:14px; line-height:1.65; color:rgba(243,238,230,0.74); max-height:0; overflow:hidden; opacity:0; transition:max-height .45s ease, opacity .35s ease, margin-top .35s ease; margin-top:0; font-weight:300; }
.service-card:hover .service-desc, .service-card:focus-within .service-desc{ max-height:140px; opacity:1; margin-top:8px; }
.service-line{ width:34px; height:1px; background:var(--brass); margin-top:14px; transition:width .45s var(--ease), box-shadow .45s var(--ease); }
.service-card:hover .service-line, .service-card:focus-within .service-line{ width:64px; box-shadow:0 0 18px rgba(227,198,140,0.3); }
.momento{ background:var(--bone-2); }
.momento-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:start; }
@media (max-width:900px){ .momento-grid{ grid-template-columns:1fr; gap:36px; } }
.momento-list{ display:flex; flex-direction:column; border-top:1px solid var(--line-light); }
.momento-item{ display:flex; align-items:center; justify-content:space-between; padding:20px 4px; border-bottom:1px solid var(--line-light); background:none; border-left:none; border-right:none; border-top:none; text-align:left; width:100%; font-family:var(--serif); font-size:clamp(19px,2.4vw,26px); color:var(--ink-soft); transition:color .3s, padding-left .3s var(--ease); }
.momento-item:hover, .momento-item.active{ color:var(--ink); padding-left:14px; }
.momento-item.active{ color:var(--brass-deep); }
.momento-item .arrow{ font-family:var(--sans); font-size:14px; opacity:0; transform:translateX(-6px); transition:all .3s var(--ease); }
.momento-item.active .arrow, .momento-item:hover .arrow{ opacity:1; transform:translateX(0); }
.momento-panel{ background:var(--carbon); color:var(--bone); padding:52px 44px; min-height:320px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.momento-panel::before{ content:""; position:absolute; top:-40%; right:-20%; width:60%; height:180%; background:radial-gradient(circle, rgba(182,138,78,0.18), transparent 70%); }
.momento-panel-label{ color:var(--brass-light); margin-bottom:14px; position:relative; }
.momento-panel-text{ font-size:19px; line-height:1.65; font-weight:300; color:rgba(243,238,230,0.9); position:relative; max-width:480px; }
.moods{ background:var(--bone); }
.moods-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
@media (max-width:900px){ .moods-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .moods-row{ grid-template-columns:1fr; } }
.mood-card{ background:var(--bone); padding:38px 26px; min-height:210px; display:flex; flex-direction:column; justify-content:space-between; transition:background .4s; }
.mood-card:hover{ background:var(--carbon); }
.mood-card:hover .mood-title, .mood-card:hover .mood-desc{ color:var(--bone); }
.mood-icon{ width:30px; height:18px; margin-bottom:auto; }
.mood-icon path{ stroke:var(--brass); fill:none; stroke-width:1.5; }
.mood-title{ font-family:var(--serif); font-size:20px; margin:22px 0 8px; transition:color .4s; }
.mood-desc{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); font-weight:300; transition:color .4s; }
.gallery{ background:var(--carbon); }
.gallery-grid{ columns:4 260px; column-gap:14px; }
@media (max-width:900px){ .gallery-grid{ columns:2 220px; } }
@media (max-width:560px){ .gallery-grid{ columns:1; } }
.gallery-item{ break-inside:avoid; margin-bottom:14px; overflow:hidden; position:relative; cursor:pointer; background:var(--carbon-2); }
.gallery-item img{ width:100%; display:block; transition:transform 1s var(--ease), filter .5s; filter:saturate(0.94); }
.gallery-item:hover img{ transform:scale(1.045); filter:saturate(1.08); }
.gallery-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(11,11,12,0.55) 100%); opacity:0; transition:opacity .4s; }
.gallery-item:hover::after{ opacity:1; }
.gallery-cap{ position:absolute; left:16px; bottom:14px; color:var(--bone); font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:0; transform:translateY(8px); transition:all .4s var(--ease); z-index:2; }
.gallery-item:hover .gallery-cap{ opacity:1; transform:translateY(0); }
.lightbox{ position:fixed; inset:0; z-index:1100; background:rgba(6,6,7,0.94); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); padding:5vh 5vw; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:100%; max-height:90vh; box-shadow:0 40px 90px rgba(0,0,0,0.5); }
.lightbox-close{ position:absolute; top:24px; right:32px; background:none; border:none; color:var(--bone); font-size:30px; }
.video-sec{ background:var(--carbon); }
.video-frame{ position:relative; width:100%; aspect-ratio:16/8.2; overflow:hidden; margin-top:56px; cursor:pointer; }
.video-frame img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.6); transition:filter .5s, transform 1s var(--ease); }
.video-frame:hover img{ filter:brightness(0.7); transform:scale(1.03); }
.play-btn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%; border:1px solid rgba(243,238,230,0.55); display:flex; align-items:center; justify-content:center; transition:all .4s var(--ease); background:rgba(11,11,12,0.25); backdrop-filter:blur(6px); }
.video-frame:hover .play-btn{ border-color:var(--brass-light); background:rgba(182,138,78,0.22); transform:translate(-50%,-50%) scale(1.08); }
.play-btn svg{ width:22px; height:22px; margin-left:4px; }
@media (max-width:640px){ .video-frame{ aspect-ratio:4/5; } .play-btn{ width:72px; height:72px; } }
.about{ background:var(--bone); }
.about-grid{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:70px;
  align-items:center;
  scroll-margin-top:110px;
}

@media (max-width:700px){
  .about-grid{
    grid-template-columns:1fr;
    gap:44px;
  }
}
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:44px; } }
.about-portrait{
  position:relative;
  width:100%;
}

.about-portrait-frame{
  width:100%;
  max-width:620px;
  aspect-ratio:4/5;
  overflow:hidden;
  position:relative;
  margin:0 auto;
}
.about-portrait-frame img{ width:100%; height:100%; object-fit:cover; filter:grayscale(18%) contrast(1.04); }
.about-portrait-frame::before{ content:""; position:absolute; inset:0; border:1px solid rgba(182,138,78,0.5); margin:16px; pointer-events:none; z-index:2; }
.about-text{ max-width:600px; }
.about-title{ font-size:clamp(2.1rem,4.6vw,3.3rem); line-height:1.08; margin:16px 0 26px; }
.about-para{ font-size:16px; line-height:1.8; color:var(--ink-soft); font-weight:300; margin-bottom:18px; }
.about-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px; border-top:1px solid var(--line-light); padding-top:32px; }
@media (max-width:640px){ .about-stats{ grid-template-columns:repeat(2,1fr); } }
.stat-num{ font-family:var(--serif); font-size:clamp(28px,3.4vw,40px); color:var(--brass-deep); line-height:1; }
.stat-label{ font-size:12px; color:var(--ink-soft); margin-top:8px; line-height:1.4; letter-spacing:0.02em; }


/* ============================================================
   ESPACIADO Y MÁRGENES — BIOGRAFÍA Y ESTADÍSTICAS
   ============================================================ */

/* 1. Columna derecha (Texto de la biografía): márgenes laterales y superior */
.about-content,
.about-text,
.about-right {
  padding-top: 30px;          /* Separa el texto del borde superior */
  padding-bottom: 20px;       /* Espacio inferior */
  padding-left: 45px;         /* Margen lateral izquierdo */
  padding-right: 40px;        /* Margen lateral derecho */
}

/* 2. Párrafos de la biografía: mayor separación e interlineado holgado */
.about-text p,
.about-content p {
  margin-bottom: 24px;        /* Separación entre párrafos */
  line-height: 1.75;          /* Altura de línea para facilitar la lectura */
}

/* 3. Separación de la cabecera (Biografía Artística y Nombre) */
.about-eyebrow,
.eyebrow {
  margin-bottom: 16px;
}

.about-title {
  margin-bottom: 32px;        /* Espacio entre el nombre y el primer párrafo */
}

/* 4. Bloque de estadísticas (Stats): separación superior e inferior */
.about-stats,
.stats-grid {
  margin-top: 45px;           /* Separa las cifras del texto superior */
  padding-top: 35px;          /* Espacio entre la línea divisoria y las cifras */
  padding-bottom: 25px;       /* Aire por debajo de las descripciones */
  border-top: 1px solid rgba(182, 138, 78, 0.25); /* Línea sutil de separación */
}

/* 5. Cifras y textos individuales de cada estadística */
.stat-item {
  padding: 0 12px;            /* Margen horizontal interno en cada número */
}

.stat-number,
.stat-value {
  margin-bottom: 12px;        /* Espacio entre el número (+10, +5...) y el texto */
}

.stat-label,
.stat-text {
  line-height: 1.45;         /* Separación adecuada entre líneas de la descripción */
}


/* ============================================================
   AJUSTE RESPONSIVE PARA PANTALLAS PEQUEÑAS / MÓVILES
   ============================================================ */

@media (max-width: 900px) {
  .about-content,
  .about-text,
  .about-right {
    padding-left: 20px;       /* En móvil reduce los márgenes para aprovechar pantalla */
    padding-right: 20px;
    padding-top: 20px;
  }

  .about-stats,
  .stats-grid {
    margin-top: 30px;
    padding-top: 25px;
  }
}

/* JUSTIFICAR TEXTO Y ALINEAR BORDES */
.about-content p,
.about-text p {
  text-align: justify;
  text-justify: inter-word; /* Ajusta los espacios entre palabras de forma limpia */
  hyphens: auto;            /* Parte las palabras largas con guión al final de línea */
  -webkit-hyphens: auto;
  margin-bottom: 24px;      /* Separación constante entre párrafos */
}

/* OPCIONAL: Sangría en la primera línea de cada párrafo */
.about-content p + p,
.about-text p + p {
  text-indent: 25px;        /* Añade sangría a partir del segundo párrafo */
}
/* Biografía: revelado al entrar en pantalla */
.about-image-line{
  position:absolute;
  left:-20px;
  bottom:-18px;
  width:42%;
  height:1px;
  background:var(--brass-light);
  transform-origin:left center;
}
.about-grid.is-animated .about-portrait-frame{
  clip-path:inset(0 0 100% 0);
  transform:translateY(26px) scale(1.035);
  transition:clip-path 1.15s cubic-bezier(.16,.8,.24,1), transform 1.15s cubic-bezier(.16,.8,.24,1);
}
.about-grid.is-animated .about-portrait-frame img{
  transform:scale(1.1);
  transition:transform 1.5s cubic-bezier(.16,.8,.24,1) .12s, filter .8s ease;
}
.about-grid.is-animated .about-image-line{
  transform:scaleX(0);
  transition:transform .8s cubic-bezier(.16,.8,.24,1) .7s;
}
.about-grid.is-animated .about-text > .about-reveal,
.about-grid.is-animated .about-stat{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.16,.8,.24,1);
}
.about-grid.is-animated .about-title{ transform:translateY(30px) skewY(2deg); }
.about-grid.is-animated .about-para:nth-of-type(1){ transition-delay:.32s; }
.about-grid.is-animated .about-para:nth-of-type(2){ transition-delay:.44s; }
.about-grid.is-animated .about-stat:nth-child(1){ transition-delay:.55s; }
.about-grid.is-animated .about-stat:nth-child(2){ transition-delay:.66s; }
.about-grid.is-animated .about-stat:nth-child(3){ transition-delay:.77s; }
.about-grid.is-visible .about-portrait-frame{
  clip-path:inset(0 0 0 0);
  transform:translateY(0) scale(1);
}
.about-grid.is-visible .about-portrait-frame img{ transform:scale(1); }
.about-grid.is-visible .about-image-line{ transform:scaleX(1); }
.about-grid.is-visible .about-text > .about-reveal,
.about-grid.is-visible .about-stat{
  opacity:1;
  transform:translateY(0);
}
.about-grid.is-visible .about-title{ transform:translateY(0) skewY(0); }
.about-grid.is-visible .about-stat-content{ transition:transform .35s ease; }
.about-grid.is-visible .about-stat:hover .about-stat-content{ transform:translateY(-5px); }
@media (prefers-reduced-motion:reduce){
  .about-grid.is-animated .about-portrait-frame,
  .about-grid.is-animated .about-portrait-frame img,
  .about-grid.is-animated .about-image-line,
  .about-grid.is-animated .about-text > .about-reveal,
  .about-grid.is-animated .about-stat{
    transition:none;
  }
}
.timeline-sec{ background:var(--carbon); color:var(--bone); }
.timeline-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:64px; }
.timeline{ position:relative; padding-left:2px; }
.timeline::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line-dark); }
.timeline::after{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:linear-gradient(to bottom, var(--brass-light), var(--brass-deep)); transform:scaleY(var(--timeline-progress, 0)); transform-origin:top center; will-change:transform; }
.tl-item{ position:relative; padding:0 0 52px 44px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:-4.5px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--brass-light); box-shadow:0 0 0 5px var(--carbon), 0 0 0 6px var(--line-dark); }
.tl-year{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-light); font-weight:700; margin-bottom:8px; }
.tl-title{ font-family:var(--serif); font-size:22px; color:var(--bone); margin-bottom:6px; line-height:1.25; }
.tl-org{ font-size:13.5px; color:rgba(243,238,230,0.55); margin-bottom:10px; }
.tl-desc{ font-size:14.5px; line-height:1.65; color:rgba(243,238,230,0.7); max-width:560px; font-weight:300; }

/* Trayectoria: una revelación editorial guiada por el scroll */
.timeline-sec.is-animated .timeline-head{
  opacity:0;
  transform:translateY(14px);
  filter:blur(5px);
  transition:opacity 1s cubic-bezier(.16,.8,.24,1), transform 1.1s cubic-bezier(.16,.8,.24,1), filter 1s cubic-bezier(.16,.8,.24,1);
}
.timeline-sec.is-visible .timeline-head{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.timeline-sec.is-animated .tl-dot{
  opacity:0;
  transform:scale(.35);
  transition:opacity .42s ease, transform .55s cubic-bezier(.16,.8,.24,1), box-shadow .55s ease, background-color .45s ease;
}
.timeline-sec.is-animated .tl-year,
.timeline-sec.is-animated .tl-title,
.timeline-sec.is-animated .tl-org,
.timeline-sec.is-animated .tl-desc{
  opacity:0;
  transform:translateY(14px) scale(.985);
  filter:blur(4px);
  transition:opacity .62s cubic-bezier(.16,.8,.24,1), transform .72s cubic-bezier(.16,.8,.24,1), filter .62s cubic-bezier(.16,.8,.24,1);
}
.timeline-sec.is-animated .tl-item.is-active .tl-dot{
  opacity:1;
  transform:scale(1);
  box-shadow:0 0 0 5px var(--carbon), 0 0 0 6px rgba(227,198,140,.42), 0 0 18px rgba(227,198,140,.18);
}
.timeline-sec.is-animated .tl-item.is-active .tl-year,
.timeline-sec.is-animated .tl-item.is-active .tl-title,
.timeline-sec.is-animated .tl-item.is-active .tl-org,
.timeline-sec.is-animated .tl-item.is-active .tl-desc{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.timeline-sec.is-animated .tl-item.is-active .tl-year{ transition-delay:.08s; }
.timeline-sec.is-animated .tl-item.is-active .tl-title{ transition-delay:.16s; }
.timeline-sec.is-animated .tl-item.is-active .tl-org{ transition-delay:.24s; }
.timeline-sec.is-animated .tl-item.is-active .tl-desc{ transition-delay:.32s; }
.timeline-sec.is-visible .tl-item.is-active:hover .tl-title{ transform:translateX(5px); }
.timeline-sec.is-visible .tl-item.is-active:hover .tl-dot{
  background:var(--brass-light);
  box-shadow:0 0 0 5px var(--carbon), 0 0 0 6px rgba(227,198,140,.65), 0 0 24px rgba(227,198,140,.3);
}
.timeline-sec.is-visible .tl-item.is-active:hover .tl-year{ color:var(--bone); }
@media (prefers-reduced-motion:reduce){
  .timeline-sec.is-animated .timeline-head,
  .timeline-sec.is-animated .tl-dot,
  .timeline-sec.is-animated .tl-year,
  .timeline-sec.is-animated .tl-title,
  .timeline-sec.is-animated .tl-org,
  .timeline-sec.is-animated .tl-desc{
    transition:none;
  }
}
.proof{ background:var(--bone); }
.proof-note{ font-size:13px; color:var(--ink-soft); margin-top:-30px; margin-bottom:50px; font-style:italic; }
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
@media (max-width:900px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-card{ background:var(--bone); padding:40px 34px; display:flex; flex-direction:column; gap:22px; }
.proof-quote{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.55; color:var(--ink); }
.proof-author{ display:flex; align-items:center; gap:12px; }
.proof-avatar{ width:38px; height:38px; border-radius:50%; background:var(--bone-2); border:1px solid var(--line-light); display:flex; align-items:center; justify-content:center; font-family:var(--serif); color:var(--brass-deep); font-size:14px; }
.proof-name{ font-size:13px; font-weight:700; }
.proof-role{ font-size:12px; color:var(--ink-soft); }

/* Testimonios: revelado editorial y microinteracciones discretas */
section.testimonials-sec.is-animated .testimonials-head .eyebrow,
section.testimonials-sec.is-animated .testimonials-head h2{
  opacity:0;
  transform:translateY(14px) scale(.992);
  filter:blur(4px);
  transition:opacity .8s cubic-bezier(.16,.8,.24,1), transform .95s cubic-bezier(.16,.8,.24,1), filter .8s cubic-bezier(.16,.8,.24,1);
}
section.testimonials-sec.is-animated .testimonials-head h2{ transition-delay:.13s; }
section.testimonials-sec.is-visible .testimonials-head .eyebrow,
section.testimonials-sec.is-visible .testimonials-head h2{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
section.testimonials-sec.is-animated .testimonial-item-premium{
  opacity:0;
  transform:translateY(22px) scale(.992);
  filter:blur(5px);
  will-change:transform, opacity, filter;
  transition:opacity .76s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1), filter .76s cubic-bezier(.16,.8,.24,1), background-color .45s ease, box-shadow .5s cubic-bezier(.16,.8,.24,1);
}
section.testimonials-sec.is-visible .testimonial-item-premium.is-revealed{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
section.testimonials-sec.is-animated .testimonial-item-premium:nth-child(1).is-revealed{ transition-delay:.18s; }
section.testimonials-sec.is-animated .testimonial-item-premium:nth-child(2).is-revealed{ transition-delay:.3s; }
section.testimonials-sec.is-animated .testimonial-item-premium:nth-child(3).is-revealed{ transition-delay:.42s; }
section.testimonials-sec.is-animated .testimonial-quote-premium,
section.testimonials-sec.is-animated .testimonial-author-wrapper{
  opacity:0;
  transform:translateY(9px);
  filter:blur(2px);
  transition:opacity .62s cubic-bezier(.16,.8,.24,1), transform .72s cubic-bezier(.16,.8,.24,1), filter .62s cubic-bezier(.16,.8,.24,1);
}
section.testimonials-sec.is-visible .testimonial-item-premium.is-revealed .testimonial-quote-premium,
section.testimonials-sec.is-visible .testimonial-item-premium.is-revealed .testimonial-author-wrapper{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
section.testimonials-sec.is-visible .testimonial-item-premium.is-revealed .testimonial-quote-premium{ transition-delay:.3s; }
section.testimonials-sec.is-visible .testimonial-item-premium.is-revealed .testimonial-author-wrapper{ transition-delay:.42s; }
section.testimonials-sec.is-visible .testimonial-item-premium:hover{
  background-color:rgba(139,115,85,.045);
  transform:translateY(-4px) scale(1.002);
  box-shadow:0 18px 34px -30px rgba(24,22,26,.45);
}
section.testimonials-sec.is-visible .testimonial-item-premium:hover .testimonial-quote-premium{ transform:translateY(-2px); }
section.testimonials-sec.is-visible .testimonial-item-premium:hover .author-avatar-premium{
  transform:translateY(-2px) scale(1.035);
  border-color:rgba(139,115,85,.5);
  box-shadow:0 8px 18px rgba(139,115,85,.12);
}
section.testimonials-sec.is-visible .author-avatar-premium{
  transition:transform .45s cubic-bezier(.16,.8,.24,1), border-color .45s ease, box-shadow .45s ease;
}
section.testimonials-sec.is-visible .testimonial-item-premium:hover .author-name-premium{ color:var(--brass-deep); }
section.testimonials-sec.is-visible .author-name-premium{ transition:color .4s ease; }
@media (max-width:640px){
  section.testimonials-sec.is-animated .testimonial-item-premium{ transform:translateY(16px) scale(.996); }
  section.testimonials-sec.is-visible .testimonial-item-premium:hover{ transform:translateY(-2px) scale(1); }
}
@media (prefers-reduced-motion:reduce){
  section.testimonials-sec.is-animated .testimonials-head .eyebrow,
  section.testimonials-sec.is-animated .testimonials-head h2,
  section.testimonials-sec.is-animated .testimonial-item-premium,
  section.testimonials-sec.is-animated .testimonial-quote-premium,
  section.testimonials-sec.is-animated .testimonial-author-wrapper,
  section.testimonials-sec.is-visible .author-avatar-premium,
  section.testimonials-sec.is-visible .author-name-premium{
    transition:none;
  }
}
.cta-final{ position:relative; background:#000; color:var(--bone); overflow:hidden; }
.cta-media{ position:absolute; inset:0; }
.cta-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; will-change:transform; }
.cta-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,6,7,0.75), rgba(6,6,7,0.88) 60%, rgba(6,6,7,0.96)); }
.cta-inner{ position:relative; z-index:2; text-align:left; padding:150px 0; max-width:900px; }
@media (max-width:900px){ .cta-inner{ padding:100px 0; } }
.cta-title{ font-size:clamp(2.3rem,6vw,4.6rem); line-height:1.08; margin:20px 0 22px; }
.cta-sub{ font-size:17px; line-height:1.6; color:rgba(243,238,230,0.78); max-width:520px; margin-bottom:44px; font-weight:300; }
.cta-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.contact{ background:var(--bone-2); }
.contact-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:80px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
.contact-info-item{ margin-bottom:30px; }
.contact-info-label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-deep); margin-bottom:8px; font-weight:700; }
.contact-info-value{ font-family:var(--serif); font-size:22px; }
.contact-info-value a:hover{ color:var(--brass-deep); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.field input, .field select, .field textarea{ border:none; border-bottom:1px solid rgba(24,22,26,0.28); background:transparent; padding:10px 2px; font-family:var(--sans); font-size:15px; color:var(--ink); outline:none; transition:border-color .3s; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--brass-deep); }
.field textarea{ resize:vertical; min-height:90px; }
.form-submit{ margin-top:36px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.form-msg{ font-size:13.5px; color:var(--brass-deep); display:none; }
.form-msg.show{ display:block; }
footer{ background:var(--carbon); color:rgba(243,238,230,0.6); padding:56px 0 30px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--line-dark); margin-bottom:26px; }
.footer-word{ font-family:var(--serif); font-size:26px; color:var(--bone); }
.footer-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-nav a{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.footer-nav a:hover{ color:var(--brass-light); }
.footer-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; }
.num-tag{ display:none; }
::selection{ background:var(--brass); color:var(--carbon); }

/* ============================================================
   MOMENTS — ¿QUÉ ESTÁS ORGANIZANDO?
   ============================================================ */

.moments-section{
  background:var(--bone);
  padding:150px 0;
}

.moments-header{
  margin-bottom:80px;
}

.moments-header h2{
  font-size:clamp(3.2rem,7vw,6.8rem);
  line-height:.92;
  color:var(--ink);
  margin-top:18px;
  letter-spacing:-.035em;
}

.moments-header h2 em{
  color:var(--brass-deep);
  font-weight:400;
}

.moments-layout{
  display:grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap:70px;
  align-items:stretch;
}

/* LISTA */

.moment-options{
  border-top:1px solid var(--line-light);
}

.moment-option{
  width:100%;
  min-height:82px;
  display:grid;
  grid-template-columns:60px 1fr 30px;
  align-items:center;
  gap:20px;

  background:transparent;
  border:none;
  border-bottom:1px solid var(--line-light);

  color:var(--ink);
  text-align:left;
  padding:0 8px;

  transition:
    background .4s var(--ease),
    color .4s var(--ease),
    padding .4s var(--ease),
    transform .4s var(--ease);
}

.moment-number{
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  color:var(--ink-soft);
}

.moment-name{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.3vw,2rem);
  line-height:1;
}

.moment-arrow{
  font-size:18px;
  opacity:.3;
  transform:translate(-5px,5px);
  transition:
    opacity .35s,
    transform .35s var(--ease);
}

.moment-option:hover,
.moment-option.active{
  background:var(--carbon);
  color:var(--bone);
  padding-left:20px;
  padding-right:20px;
  transform:translateX(4px);
}

.moment-option:hover .moment-number,
.moment-option.active .moment-number{
  color:var(--brass-light);
}

.moment-option:hover .moment-arrow,
.moment-option.active .moment-arrow{
  opacity:1;
  transform:translate(0,0);
  color:var(--brass-light);
}


/* BLOQUE DE INFORMACIÓN */

.moment-detail{
  background:var(--carbon);
  min-height:500px;
  color:var(--bone);
  overflow:hidden;
  position:relative;
}

.moment-detail-inner{
  min-height:500px;
  padding:38px 42px 30px;
  display:flex;
  flex-direction:column;
  position:relative;
}

.moment-detail-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:rgba(243,238,230,.45);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
}

.moment-detail-number{
  color:var(--brass-light);
}

.moment-detail-content{
  margin:auto 0;
  max-width:620px;
  padding:60px 0;
}

.moment-detail-content h3{
  font-size:clamp(2.8rem,5vw,5.2rem);
  line-height:.95;
  margin-bottom:28px;
  color:var(--bone);
}

.moment-detail-content p{
  max-width:520px;
  font-size:16px;
  line-height:1.75;
  font-weight:300;
  color:rgba(243,238,230,.7);
}

.moment-detail-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:38px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(227,198,140,.5);

  color:var(--brass-light);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;

  transition:gap .35s var(--ease);
}

.moment-detail-link:hover{
  gap:20px;
}

.moment-wave{
  width:100%;
  height:60px;
  opacity:.7;
}

.moment-wave svg{
  width:100%;
  height:100%;
}

.moment-wave path{
  fill:none;
  stroke:var(--brass);
  stroke-width:1;
}


/* ============================================================
   STYLES / REPERTORIO
   ============================================================ */

.styles-section{
  background:var(--bone);
  padding:150px 0 170px;
  border-top:1px solid var(--line-light);
}

.styles-header{
  margin-bottom:80px;
}

.styles-heading{
  margin-top:20px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:60px;
}

.styles-heading h2{
  font-size:clamp(3rem,6vw,6.2rem);
  line-height:.94;
  color:var(--ink);
  letter-spacing:-.035em;
}

.styles-heading h2 em{
  color:var(--brass-deep);
  font-weight:400;
}

.styles-heading p{
  max-width:380px;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.7;
  font-weight:300;
  padding-bottom:5px;
}


/* GRID */

.styles-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-light);
  border-left:1px solid var(--line-light);
}

.style-card{
  position:relative;
  min-height:330px;
  padding:34px 34px 40px;
  border-right:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  transition:
    background .45s var(--ease),
    transform .45s var(--ease);
}

.style-card:hover{
  background:rgba(182,138,78,.055);
}

.style-card:hover h3{
  transform:translateX(2px);
}

.style-icon{
  width:100px;
  height:40px;
  margin-bottom:30px;
}

.style-icon svg{
  width:100%;
  height:100%;
}

.style-icon path{
  fill:none;
  stroke:var(--brass);
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:160;
  stroke-dashoffset:160;
  transition:stroke-dashoffset .8s var(--ease), stroke .4s ease;
}

.style-card:hover .style-icon path{
  stroke-dashoffset:0;
}

.style-number{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--ink-soft);
  margin-bottom:12px;
}

.style-card h3{
  font-size:clamp(1.8rem,2.5vw,2.5rem);
  line-height:1;
  margin-bottom:20px;
  color:var(--ink);
  transition:transform .45s var(--ease), color .35s ease;
}

.style-card p{
  max-width:360px;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-soft);
  font-weight:300;
}

.style-card-feature{
  background:linear-gradient(180deg, rgba(182,138,78,0.04), rgba(182,138,78,0.01));
  border-right:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
}

.style-card-feature h3{
  font-size:clamp(1.7rem,2.3vw,2.3rem);
}

.style-icon-feature path{
  stroke:var(--brass-deep);
}

.music-moment-section{
  background:var(--carbon);
  padding:110px 0 120px;
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(227,198,140,0.15);
}

.music-moment-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top left, rgba(182,138,78,0.18), transparent 35%);
  pointer-events:none;
}

.music-moment-inner{
  position:relative;
  z-index:1;
  max-width:1160px;
  margin:0 auto;
  padding:32px 0 10px;
}

.music-moment-inner .eyebrow{
  color:var(--brass-light);
}

.music-moment-inner h2{
  margin-top:26px;
  max-width:980px;
  font-size:clamp(3.1rem, 7vw, 8rem);
  line-height:0.9;
  letter-spacing:-0.05em;
  color:var(--bone);
  display:flex;
  flex-wrap:wrap;
  gap:0.18em 0.26em;
}

.music-moment-inner h2 .headline-word{
  display:inline-block;
  opacity:0;
  transform:translateY(42px) scale(0.985);
  transition:opacity 1.1s cubic-bezier(.16,.8,.24,1), transform 1.1s cubic-bezier(.16,.8,.24,1), color .45s ease;
}

.music-moment-inner h2 .headline-word-1{ transition-delay:0.12s; }
.music-moment-inner h2 .headline-word-2{ transition-delay:0.22s; }
.music-moment-inner h2 .headline-word-3{ transition-delay:0.34s; }
.music-moment-inner h2 .headline-word-4{ transition-delay:0.52s; }

.music-moment-section.is-visible .music-moment-inner h2 .headline-word{
  opacity:1;
  transform:translateY(0) scale(1);
}

.music-moment-inner h2 .headline-word-em em{
  color:var(--bone);
  font-style:italic;
  font-weight:400;
  transition:color .55s ease;
}

.music-moment-section.is-visible .music-moment-inner h2 .headline-word-em em{
  color:var(--brass-light);
}

.music-moment-intro,
.music-moment-copy,
.music-moment-quote,
.music-personal-link,
.music-moment-inner .eyebrow,
.music-wave{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease, transform .8s ease;
}

.music-moment-inner .eyebrow{ transition-delay:0.1s; }
.music-moment-intro{ transition-delay:0.42s; }
.music-moment-copy{ transition-delay:0.55s; }
.music-moment-quote{ transition-delay:0.68s; }
.music-personal-link{ transition-delay:0.9s; }
.music-wave{ transition-delay:0.8s; }

.music-moment-section.is-visible .music-moment-inner .eyebrow,
.music-moment-section.is-visible .music-moment-intro,
.music-moment-section.is-visible .music-moment-copy,
.music-moment-section.is-visible .music-moment-quote,
.music-moment-section.is-visible .music-personal-link,
.music-moment-section.is-visible .music-wave{
  opacity:1;
  transform:translateY(0);
}

.music-moment-section::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(90vw, 1000px);
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(227,198,140,0.35) 18%, rgba(227,198,140,0.7) 50%, rgba(227,198,140,0.35) 82%, transparent 100%);
  transform:translateX(-50%) scaleX(0.72);
  opacity:0;
  transition:opacity .9s ease, transform .9s ease;
}

.music-moment-section.is-visible::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

.music-moment-intro{
  margin-top:22px;
  max-width:620px;
  font-size:20px;
  line-height:1.6;
  color:rgba(243,238,230,0.8);
  font-weight:400;
}

.music-moment-copy{
  margin-top:28px;
  max-width:760px;
  font-size:15px;
  line-height:1.9;
  color:rgba(243,238,230,0.72);
  font-weight:300;
}

.music-moment-quote{
  margin-top:42px;
  font-family:var(--serif);
  font-size:clamp(1.7rem, 2.4vw, 2.8rem);
  line-height:1.2;
  color:var(--bone);
}

.music-personalize{
  margin-top:30px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  border-top:1px solid rgba(227,198,140,0.4);
  padding-top:16px;
}

.music-personal-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:var(--brass-light);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:11px;
  font-weight:700;
  transition:gap .35s var(--ease), opacity .35s var(--ease), color .35s ease;
}

.music-personal-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:100%;
  height:1px;
  background:var(--brass);
  transform:scaleX(0.38);
  transform-origin:left center;
  opacity:0;
  transition:transform .35s var(--ease), opacity .35s ease;
}

.music-personal-link:hover,.music-personal-link:focus-visible{
  gap:22px;
  color:var(--brass-light);
}

.music-personal-link:hover::after,.music-personal-link:focus-visible::after{
  opacity:1;
  transform:scaleX(1);
}

.music-personal-link strong{
  color:var(--bone);
  letter-spacing:0.18em;
  transition:color .35s ease;
}

.music-personal-link:hover strong,
.music-personal-link:focus-visible strong{
  color:var(--brass-light);
}

.music-arrow{
  display:inline-block;
  font-size:18px;
  color:var(--brass-light);
  transition:transform .35s var(--ease), color .35s ease;
}

.music-personal-link:hover .music-arrow,
.music-personal-link:focus-visible .music-arrow{
  transform:translate(3px, -3px);
}

.music-wave{
  margin-top:44px;
  width:100%;
  max-width:920px;
  height:80px;
  opacity:0.9;
  transform:translate3d(0, var(--music-shift, 0px), 0);
}

.music-wave svg{
  width:100%;
  height:100%;
}

.music-wave path{
  fill:none;
  stroke:rgba(227,198,140,0.8);
  stroke-width:1.2;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.8s cubic-bezier(.16,.8,.24,1), opacity .8s ease;
}

.music-moment-section.is-visible .music-wave path{
  stroke-dashoffset:0;
  opacity:1;
}

.video-gallery-section {
  position: relative;
  background: var(--carbon);
  padding: 120px 0 110px;
  overflow: hidden;
  border-top: 1px solid rgba(227, 198, 140, 0.14);
}

.video-gallery-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 15%, rgba(182, 138, 78, 0.12), transparent 38%),
              radial-gradient(circle at 80% 30%, rgba(182, 138, 78, 0.09), transparent 30%);
  pointer-events: none;
}

.video-gallery-header { position: relative; z-index: 1; margin-bottom: 42px; }
.video-gallery-title {
  margin-top: 18px; max-width: 760px; color: var(--bone);
  font-size: clamp(3rem, 5vw, 5.8rem); line-height: 0.92; letter-spacing: -0.04em;
  font-family: var(--serif); font-weight: 500;
}

.video-gallery-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 14px;
  align-items: stretch;
}

.video-card {
  position: relative;
  display: block;
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.985);
  transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.9s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.4s ease,
              filter 0.4s ease;
  will-change: transform, opacity;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(17, 17, 18, 0.8);
  border: 1px solid rgba(227, 198, 140, 0.08);
}

.video-card.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.video-card:hover, .video-card:focus-visible {
  transform: perspective(1200px) rotateX(4deg) rotateY(-4deg) translateY(-8px) scale(1.02);
  box-shadow: 0 28px 70px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(227, 198, 140, 0.38), 0 0 32px rgba(182, 138, 78, 0.14);
  border-color: rgba(227, 198, 140, 0.3);
  filter: saturate(1.15) contrast(1.08);
}

.video-card.video-instagram-card {
  min-height: 180px;
}

.video-thumb {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  border-radius: 18px 18px 0 0; background-size: cover; background-position: center;
  border: 1px solid rgba(227, 198, 140, 0.12);
  box-shadow: 0 28px 50px -30px rgba(0, 0, 0, 0.85);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease, filter 0.5s ease;
  transform-style: preserve-3d;
  background-color: rgba(10, 10, 10, 1);
}

.video-card:hover .video-thumb, .video-card:focus-visible .video-thumb {
  transform: scale(1.07) translateZ(12px);
  box-shadow: 0 36px 70px -26px rgba(0, 0, 0, 0.95);
  filter: brightness(1.06) saturate(1.18) contrast(1.12);
}

.video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.18), rgba(11, 11, 12, 0.68));
  opacity: 1; transition: opacity 0.5s ease, transform 0.5s ease;
}

.video-card:hover .video-overlay, .video-card:focus-visible .video-overlay { opacity: 0.38; }

.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid rgba(243, 238, 230, 0.4); background: rgba(17, 17, 18, 0.32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--bone);
  display: grid; place-items: center; z-index: 2;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), background 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  box-shadow: 0 0 0 rgba(227, 198, 140, 0); cursor: pointer;
}

.video-card:hover .video-play, .video-play:hover, .video-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(182, 138, 78, 0.16); border-color: rgba(227, 198, 140, 0.7);
  box-shadow: 0 0 24px rgba(182, 138, 78, 0.18), 0 0 42px rgba(227, 198, 140, 0.12);
  filter: drop-shadow(0 0 18px rgba(227, 198, 140, 0.38));
}

.play-icon { position: relative; z-index: 1; font-size: 1.15rem; margin-left: 4px; line-height: 1; }

.video-card-meta {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px;
  background: rgba(17, 17, 18, 0.9);
}

.video-card-type { color: var(--brass-light); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.video-gallery-section .eyebrow { color: var(--brass-light); }
.video-card-meta h3 {
  color: var(--bone); font-size: clamp(1.4rem, 1.6vw, 2.1rem); line-height: 1.08; font-family: var(--serif);
}

.video-instagram-card {
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: linear-gradient(130deg, rgba(227, 198, 140, 0.2), rgba(17, 17, 18, 0.08) 48%, rgba(182, 138, 78, 0.14));
  border: 1px solid rgba(227, 198, 140, 0.3);
  box-shadow: inset 0 0 0 1px rgba(227, 198, 140, 0.08);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease, border-color 0.35s ease, filter 0.35s ease;
}

.video-instagram-card::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle at center, rgba(227, 198, 140, 0.2), transparent 52%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.video-instagram-card:hover, .video-instagram-card:focus-visible {
  transform: perspective(1200px) rotateX(4deg) rotateY(-6deg) translateY(-10px) scale(1.02);
  border-color: rgba(227, 198, 140, 0.64);
  box-shadow: 0 28px 80px -30px rgba(0, 0, 0, 0.9), 0 0 40px rgba(227, 198, 140, 0.18), inset 0 0 28px rgba(227, 198, 140, 0.12);
  filter: saturate(1.18) contrast(1.08);
}

.video-instagram-card:hover::before, .video-instagram-card:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.instagram-card-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; width: 100%; min-height: 180px; border: 1px solid rgba(227, 198, 140, 0.18);
  border-radius: 18px; background: rgba(10, 10, 10, 0.72); text-align: center; color: var(--bone); gap: 12px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.instagram-card-inner::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(227, 198, 140, 0.28), transparent 38%);
  transform: translateY(35%) scale(1.2);
  opacity: 0.7;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  z-index: -1;
}

.video-instagram-card:hover .instagram-card-inner::before, .video-instagram-card:focus-visible .instagram-card-inner::before {
  transform: translateY(-10%) scale(1.35);
  opacity: 1;
}

.instagram-icon { width: 52px; height: 52px; display: grid; place-items: center; color: var(--brass-light); transition: transform 0.5s ease, filter 0.5s ease; }
.instagram-icon svg { width: 100%; height: 100%; }
.video-instagram-card:hover .instagram-icon, .video-instagram-card:focus-visible .instagram-icon {
  transform: scale(1.12) rotate(-8deg);
  filter: drop-shadow(0 0 10px rgba(227, 198, 140, 0.8));
}
.video-instagram-card h3 { font-size: clamp(1.8rem, 2.5vw, 2.8rem); line-height: 1; color: var(--bone); }
.video-instagram-card p { color: rgba(243, 238, 230, 0.7); letter-spacing: 0.12em; text-transform: lowercase; font-size: 12px; }

.video-gallery-copy {
  position: relative; z-index: 1; max-width: 780px; margin-top: 30px;
  color: rgba(243, 238, 230, 0.75); font-size: 15px; line-height: 1.8; font-weight: 300;
}

.video-modal { position: fixed; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s ease; z-index: 1200; }
.video-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(7, 7, 8, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.video-modal-dialog { position: relative; width: min(90vw, 1000px); background: #111112; border: 1px solid rgba(227, 198, 140, 0.2); border-radius: 22px; padding: 26px 26px 18px; box-shadow: 0 28px 80px -26px rgba(0, 0, 0, 0.9); z-index: 1; }
.video-modal-header { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 18px; }
.video-modal-header h3 { color: var(--bone); font-size: clamp(1.8rem, 2.5vw, 2.8rem); }
.video-modal-close { position: absolute; top: 16px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(243, 238, 230, 0.15); background: rgba(243, 238, 230, 0.04); color: var(--bone); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: transform 0.3s ease, border-color 0.3s ease; }
.video-modal-close:hover { transform: rotate(90deg); border-color: rgba(227, 198, 140, 0.6); }
.video-modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000; }
.video-modal-frame video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
.video-modal-frame video::-webkit-media-controls-panel { background: rgba(12, 12, 12, 0.7); }

@media (max-width: 1100px) {
  .video-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-card.video-instagram-card { grid-column: span 2; }
}

@media (max-width: 640px) {
  .video-gallery-section { padding: 90px 0 80px; }
  .video-gallery-grid { grid-template-columns: 1fr; gap: 18px; }
  .video-card.video-instagram-card { grid-column: span 1; }
  .video-gallery-title { font-size: clamp(2.4rem, 13vw, 4rem); }
  .video-card-meta h3 { font-size: 1.6rem; }
  .video-play { width: 62px; height: 62px; }
  .video-modal-dialog { padding: 24px 18px 14px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1000px){

  .moments-layout{
    grid-template-columns:1fr;
    gap:40px;
  }

  .moment-detail,
  .moment-detail-inner{
    min-height:440px;
  }

  .styles-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .styles-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:25px;
  }

  .music-moment-section{
    padding:90px 0 100px;
  }

}

@media (max-width:640px){

  .moments-section,
  .styles-section{
    padding:100px 0;
  }

  .moments-header{
    margin-bottom:50px;
  }

  .moment-option{
    min-height:72px;
    grid-template-columns:42px 1fr 25px;
    gap:10px;
  }

  .moment-name{
    font-size:1.3rem;
  }

  .moment-detail-inner{
    padding:28px 25px 22px;
  }

  .moment-detail-content{
    padding:40px 0;
  }

  .moment-detail-content h3{
    font-size:3rem;
  }

  .moment-detail-content p{
    font-size:14px;
    line-height:1.65;
  }

  .styles-grid{
    grid-template-columns:1fr;
  }

  .style-card{
    min-height:280px;
    padding:30px 25px;
  }

  .music-moment-section{
    min-height:70vh;
    padding:70px 0 80px;
  }

  .music-moment-inner h2{
    font-size:clamp(2.7rem, 17vw, 5rem);
  }

  .music-moment-copy,
  .music-moment-intro{
    max-width:100%;
  }

  .music-personal-link{
    flex-wrap:wrap;
    row-gap:8px;
    letter-spacing:0.12em;
  }

  .music-wave{
    height:60px;
  }

}

/* Logo integrado en la sección CTA */
.cta-logo-wrap {
  margin-top: 40px; /* Si al ser más grande queda muy separado, puedes reducir este margen */
  display: flex;
  justify-content: center;
  align-items: center;
}

.cta-logo {
  max-width: 300px; /* <--- AUMÉNTALO AQUÍ (ej. 200px, 250px, 300px según prefieras) */
  width: 100%;       /* Asegura que aproveche el ancho si el contenedor lo permite */
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.cta-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .cta-logo {
    max-width: 180px; /* <--- AUMÉNTALO AQUÍ PARA MÓVIL */
  }
}

/* CTA: secuencia de conversión cinematográfica */
section.cta-sec{ isolation:isolate; }
section.cta-sec::before, section.cta-sec::after{ content:""; position:absolute; pointer-events:none; z-index:0; }
section.cta-sec::before{ inset:-18%; background:radial-gradient(ellipse at 50% 46%, rgba(182,138,78,.16) 0%, rgba(182,138,78,.055) 32%, transparent 68%); opacity:.45; transform:scale(1.03); }
section.cta-sec::after{ left:50%; bottom:0; width:min(78vw,860px); height:1px; background:linear-gradient(90deg,transparent,rgba(227,198,140,.58),transparent); transform:translateX(-50%) scaleX(.45); opacity:.25; }
section.cta-sec .container{ position:relative; z-index:1; }
section.cta-sec.is-animated::before{ opacity:0; transform:scale(.94); transition:opacity 1.35s cubic-bezier(.16,.8,.24,1), transform 1.7s cubic-bezier(.16,.8,.24,1); }
section.cta-sec.is-animated::after{ opacity:0; transform:translateX(-50%) scaleX(.45); transition:opacity .75s cubic-bezier(.16,.8,.24,1) 1.12s, transform 1.1s cubic-bezier(.16,.8,.24,1) 1.12s; }
section.cta-sec.is-visible::before{ opacity:1; transform:scale(1); }
section.cta-sec.is-visible::after{ opacity:.72; transform:translateX(-50%) scaleX(1); }
section.cta-sec.is-animated .cta-inner .eyebrow, section.cta-sec.is-animated .cta-title, section.cta-sec.is-animated .cta-copy, section.cta-sec.is-animated .cta-actions .btn, section.cta-sec.is-animated .cta-logo-wrap{ opacity:0; filter:blur(5px); transition:opacity .72s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1), filter .72s cubic-bezier(.16,.8,.24,1), letter-spacing .9s cubic-bezier(.16,.8,.24,1); }
section.cta-sec.is-animated .cta-inner .eyebrow{ transform:translateY(12px); letter-spacing:.3em; }
section.cta-sec.is-animated .cta-title{ transform:translateY(24px); clip-path:inset(0 0 100% 0); transition:opacity .95s cubic-bezier(.16,.8,.24,1) .14s, transform 1.05s cubic-bezier(.16,.8,.24,1) .14s, filter .9s cubic-bezier(.16,.8,.24,1) .14s, clip-path 1.1s cubic-bezier(.16,.8,.24,1) .14s; }
section.cta-sec.is-animated .cta-copy{ transform:translateY(16px); transition-delay:.43s; }
section.cta-sec.is-animated .cta-actions .btn{ transform:translateY(14px) scale(.97); }
section.cta-sec.is-animated .cta-actions .btn-primary{ transition-delay:.62s; }
section.cta-sec.is-animated .cta-actions .btn-ghost{ transition-delay:.76s; }
section.cta-sec.is-animated .cta-logo-wrap{ transform:translateY(12px) scale(.975); transition-delay:1.02s; }
section.cta-sec.is-animated .cta-logo{ filter:blur(3px) drop-shadow(0 4px 12px rgba(0,0,0,.4)); transition:filter .8s cubic-bezier(.16,.8,.24,1) 1.02s, opacity .8s cubic-bezier(.16,.8,.24,1) 1.02s, transform .45s var(--ease); }
section.cta-sec.is-visible .cta-inner .eyebrow, section.cta-sec.is-visible .cta-title, section.cta-sec.is-visible .cta-copy, section.cta-sec.is-visible .cta-actions .btn, section.cta-sec.is-visible .cta-logo-wrap{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
section.cta-sec.is-visible .cta-inner .eyebrow{ letter-spacing:inherit; }
section.cta-sec.is-visible .cta-title{ clip-path:inset(0 0 0 0); }
section.cta-sec.is-visible .cta-logo{ filter:blur(0) drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
section.cta-sec .cta-actions .btn-primary{ position:relative; overflow:hidden; isolation:isolate; box-shadow:0 8px 20px -16px rgba(227,198,140,.7); }
section.cta-sec .cta-actions .btn-primary::after{ content:""; position:absolute; inset:-2px auto -2px -45%; width:32%; background:rgba(243,238,230,.26); transform:skewX(-20deg) translateX(-190%); transition:transform .65s cubic-bezier(.16,.8,.24,1); pointer-events:none; }
section.cta-sec.is-visible .cta-actions .btn-primary::after{ animation:cta-button-highlight 1.6s cubic-bezier(.16,.8,.24,1) 1.5s 1 both; }
section.cta-sec .cta-actions .btn-primary:hover{ transform:translateY(-3px) scale(1.01); box-shadow:0 16px 28px -18px rgba(227,198,140,.75); letter-spacing:.18em; }
section.cta-sec .cta-actions .btn-primary:hover::after{ transform:skewX(-20deg) translateX(520%); }
section.cta-sec .cta-actions .btn-primary:active{ transform:translateY(0) scale(.985); }
section.cta-sec .cta-actions .btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(243,238,230,.72); }
@keyframes cta-button-highlight{ to{ transform:skewX(-20deg) translateX(520%); } }
@media (max-width:640px){ section.cta-sec.is-animated .cta-title{ transform:translateY(18px); } section.cta-sec.is-animated .cta-copy{ transform:translateY(12px); } section.cta-sec .cta-actions .btn-primary:hover{ transform:translateY(-2px) scale(1); } section.cta-sec::before{ inset:-30%; } }
@media (prefers-reduced-motion:reduce){ section.cta-sec.is-animated::before, section.cta-sec.is-animated::after, section.cta-sec.is-animated .cta-inner .eyebrow, section.cta-sec.is-animated .cta-title, section.cta-sec.is-animated .cta-copy, section.cta-sec.is-animated .cta-actions .btn, section.cta-sec.is-animated .cta-logo-wrap, section.cta-sec.is-animated .cta-logo, section.cta-sec .cta-actions .btn-primary::after{ animation:none; transition:none; } }

/* ============================================================
   FC SAX — CONTACT SECTION
   Premium / Editorial / Interactive
   ============================================================ */


/* ============================================================
   SECTION
   ============================================================ */

.contact{
  position:relative;
  overflow:hidden;
}


/* Luz ambiental muy sutil */

.contact::before{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  top:-350px;
  right:-300px;

  border-radius:50%;

  background:radial-gradient(
    circle,
    rgba(182,138,78,.075),
    transparent 68%
  );

  pointer-events:none;

  animation:
    contactAmbient 12s ease-in-out infinite alternate;
}


@keyframes contactAmbient{

  from{
    transform:translate(0,0) scale(1);
  }

  to{
    transform:translate(-40px,35px) scale(1.08);
  }

}


/* ============================================================
   HEADER
   ============================================================ */

.contact-header{
  max-width:850px;

  margin-bottom:70px;

  position:relative;
}


.contact-title{
  font-family:var(--serif);

  font-size:clamp(
    2.8rem,
    6vw,
    5.8rem
  );

  line-height:.95;

  letter-spacing:-.035em;

  font-weight:500;

  margin:16px 0 25px;

  color:var(--ink);
}


.contact-title em{
  color:var(--brass);

  font-weight:400;
}


.contact-lead{
  max-width:560px;

  font-size:15px;

  line-height:1.75;

  color:var(--ink-soft);
}


/* ============================================================
   GRID
   ============================================================ */

.contact-grid{

  display:grid;

  grid-template-columns:
    .92fr
    1.08fr;

  gap:90px;

  align-items:start;

  position:relative;
}


/* ============================================================
   LEFT COLUMN
   ============================================================ */

.contact-details{
  min-width:0;
}


/* ============================================================
   INFO
   ============================================================ */

.contact-info-item{

  padding-bottom:27px;

  margin-bottom:25px;

  border-bottom:
    1px solid
    var(--line-light);
}


.contact-info-label{

  margin-bottom:12px;

  font-size:10px;

  font-weight:800;

  letter-spacing:.2em;

  text-transform:uppercase;

  color:var(--brass-deep);
}


.contact-info-value{

  font-size:15px;

  line-height:1.7;

  color:var(--ink-soft);
}


/* ============================================================
   DIRECT CONTACT
   ============================================================ */

.contact-direct{
  margin-top:35px;
}


.contact-direct-link{

  display:grid;

  grid-template-columns:
    48px
    1fr
    25px;

  align-items:center;

  gap:15px;

  padding:17px 0;

  border-bottom:
    1px solid
    var(--line-light);

  position:relative;

  transition:
    transform .65s var(--ease),
    padding .65s var(--ease);
}


.contact-direct-link:hover{

  transform:translateX(8px);

  padding-left:6px;
}


/* Icono */

.contact-direct-icon{

  width:42px;
  height:42px;

  display:grid;

  place-items:center;

  color:var(--ink);

  transition:
    color .5s var(--ease),
    transform .6s var(--ease);
}


.contact-direct-icon svg{

  width:25px;
  height:25px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.4;

  stroke-linecap:round;

  stroke-linejoin:round;

}


.contact-direct-link:hover
.contact-direct-icon{

  color:var(--brass-deep);

  transform:
    translateY(-3px)
    scale(1.12)
    rotate(-4deg);
}


/* Texto */

.contact-direct-text{

  display:flex;

  flex-direction:column;

  gap:4px;
}


.contact-direct-text strong{

  font-family:var(--serif);

  font-size:21px;

  font-weight:500;

  color:var(--ink);

  transition:
    color .4s var(--ease);
}


.contact-direct-link:hover
.contact-direct-text strong{

  color:var(--brass-deep);
}


.contact-direct-text small{

  font-family:var(--sans);

  font-size:10px;

  color:var(--ink-soft);
}


/* Flecha */

.contact-direct-arrow{

  font-size:19px;

  opacity:.25;

  transform:
    translate(-5px,5px);

  transition:
    opacity .45s var(--ease),
    transform .65s var(--ease),
    color .45s var(--ease);
}


.contact-direct-link:hover
.contact-direct-arrow{

  opacity:1;

  color:var(--brass-deep);

  transform:
    translate(0,-2px)
    scale(1.08);
}


/* ============================================================
   SOCIAL AREA
   ============================================================ */

.contact-social-area{

  margin-top:42px;

  position:relative;
}


.contact-social-links{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:10px;

  margin-top:15px;
}


/* ============================================================
   SOCIAL CARD
   ============================================================ */

.contact-social-link{

  position:relative;

  min-height:82px;

  display:grid;

  grid-template-columns:
    42px
    1fr
    18px;

  align-items:center;

  gap:9px;

  padding:15px;

  overflow:hidden;

  border:
    1px solid
    var(--line-light);

  background:
    rgba(24,22,26,.018);

  transition:
    transform .65s var(--ease),
    border-color .65s var(--ease),
    background .65s var(--ease),
    box-shadow .65s var(--ease);
}


/* Línea dorada */

.contact-social-link::after{

  content:"";

  position:absolute;

  left:0;

  bottom:0;

  width:0;

  height:1px;

  background:
    var(--brass);

  transition:
    width .8s var(--ease);
}


.contact-social-link:hover::after{

  width:100%;

}


/* Halo */

.contact-social-link::before{

  content:"";

  position:absolute;

  width:100px;

  height:100px;

  left:-75px;

  top:-75px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(182,138,78,.14),
      transparent 70%
    );

  opacity:0;

  transform:scale(.4);

  transition:
    opacity .6s var(--ease),
    transform .9s var(--ease);
}


.contact-social-link:hover::before{

  opacity:1;

  transform:scale(2.1);

}


/* Hover */

.contact-social-link:hover{

  transform:
    translateY(-7px);

  border-color:
    rgba(182,138,78,.38);

  background:
    rgba(182,138,78,.035);

  box-shadow:
    0 18px 45px
    rgba(24,22,26,.09);
}


/* ============================================================
   SOCIAL ICONS
   ============================================================ */

.social-icon{

  position:relative;

  z-index:2;

  width:40px;
  height:40px;

  display:grid;

  place-items:center;

  color:var(--ink);

  transition:
    transform .7s var(--ease),
    color .5s var(--ease);
}


.social-icon svg{

  width:25px;
  height:25px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.5;

  stroke-linecap:round;

  stroke-linejoin:round;

  transition:
    transform .7s var(--ease),
    stroke-width .5s var(--ease);
}


/* TikTok */

.tiktok-icon svg{

  fill:currentColor;

  stroke:none;

}


/* Animación */

.contact-social-link:hover
.social-icon{

  color:var(--brass-deep);

  transform:
    translateY(-4px)
    scale(1.15)
    rotate(-5deg);
}


.contact-social-link:hover
.social-icon svg{

  stroke-width:2;

}


/* ============================================================
   SOCIAL TEXT
   ============================================================ */

.social-name{

  position:relative;

  z-index:2;

  display:flex;

  flex-direction:column;

  line-height:1.2;
}


.social-name strong{

  font-size:12px;

  font-weight:700;

  transition:
    transform .55s var(--ease),
    color .5s var(--ease);
}


.social-name small{

  margin-top:4px;

  font-size:9px;

  color:var(--ink-soft);

  transition:
    transform .55s var(--ease);
}


.contact-social-link:hover
.social-name strong{

  color:var(--brass-deep);

  transform:
    translateX(3px);
}


.contact-social-link:hover
.social-name small{

  transform:
    translateX(3px);
}


/* ============================================================
   SOCIAL ARROW
   ============================================================ */

.social-arrow{

  position:relative;

  z-index:2;

  font-size:16px;

  opacity:.25;

  transform:
    translate(-4px,5px);

  transition:
    opacity .5s var(--ease),
    transform .65s var(--ease),
    color .5s var(--ease);
}


.contact-social-link:hover
.social-arrow{

  opacity:1;

  color:var(--brass-deep);

  transform:
    translate(0,-3px)
    scale(1.12);
}


/* ============================================================
   FORM
   ============================================================ */

.contact-form{

  position:relative;

  transition:
    transform .7s var(--ease),
    box-shadow .7s var(--ease);
}


.contact-form:hover{

  transform:
    translateY(-4px);

  box-shadow:
    0 25px 65px
    rgba(11,11,12,.09);
}


/* ============================================================
   FORM INTRO
   ============================================================ */

.form-intro{

  margin-bottom:8px;
}


.form-intro span{

  display:block;

  margin-bottom:10px;

  font-size:10px;

  font-weight:800;

  letter-spacing:.2em;

  color:var(--brass-deep);
}


.form-intro p{

  max-width:480px;

  font-size:13px;

  line-height:1.65;

  color:var(--ink-soft);
}


/* ============================================================
   FORM INPUTS
   ============================================================ */

.contact-form input,
.contact-form select,
.contact-form textarea{

  transition:
    border-color .45s var(--ease),
    background .45s var(--ease),
    box-shadow .45s var(--ease),
    transform .45s var(--ease);
}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

  outline:none;

  border-color:
    var(--brass);

  box-shadow:
    0 5px 22px
    rgba(182,138,78,.08);

  transform:
    translateY(-1px);
}


/* ============================================================
   SUBMIT BUTTON
   ============================================================ */

.contact-submit{

  position:relative;

  overflow:hidden;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  min-width:220px;
}


/* Barrido */

.contact-submit::before{

  content:"";

  position:absolute;

  top:0;
  bottom:0;

  left:-120%;

  width:80%;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,255,255,.32),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .9s var(--ease);
}


.contact-submit:hover::before{

  left:140%;

}


.submit-arrow{

  display:inline-block;

  transition:
    transform .55s var(--ease);
}


.contact-submit:hover
.submit-arrow{

  transform:
    translate(5px,-5px);
}


/* ============================================================
   ENTRADA SOCIAL
   ============================================================ */

.contact-social-link{

  opacity:0;

  animation:
    socialReveal .9s var(--ease) forwards;
}


.contact-social-link:nth-child(1){

  animation-delay:.10s;

}


.contact-social-link:nth-child(2){

  animation-delay:.20s;

}


.contact-social-link:nth-child(3){

  animation-delay:.30s;

}


@keyframes socialReveal{

  from{

    opacity:0;

    transform:
      translateY(20px);

  }

  to{

    opacity:1;

    transform:
      translateY(0);

  }

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1000px){

  .contact-grid{

    grid-template-columns:
      1fr;

    gap:60px;

  }

}


@media(max-width:700px){

  .contact-header{

    margin-bottom:50px;

  }


  .contact-title{

    font-size:
      clamp(
        2.7rem,
        12vw,
        4.5rem
      );

  }


  .contact-social-links{

    grid-template-columns:
      1fr;

  }


  .contact-social-link{

    min-height:72px;

  }


  .contact-direct-link:hover{

    transform:
      translateX(4px);

  }

}


@media(max-width:480px){

  .contact-grid{

    gap:45px;

  }


  .contact-title{

    line-height:
      .98;

  }


  .contact-social-link{

    padding:14px;

  }

}

/* ============================================================
   CONTACTO — ANIMACIONES PREMIUM
   ============================================================ */

/* Estado inicial de los elementos */

.contact-header,
.contact-details,
.contact-form {
  opacity: 0;
  will-change: transform, opacity;
}


/* Cabecera */

.contact-header {
  transform: translateY(25px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}


/* Columna izquierda */

.contact-details {
  transform: translateX(-28px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}


/* Formulario */

.contact-form {
  transform: translateX(28px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}


/* Cuando la sección entra en pantalla */

.contact.is-visible .contact-header {
  opacity: 1;
  transform: translateY(0);
}


.contact.is-visible .contact-details {
  opacity: 1;
  transform: translateX(0);

  transition-delay: .12s;
}


.contact.is-visible .contact-form {
  opacity: 1;
  transform: translateX(0);

  transition-delay: .22s;
}


/* ============================================================
   ELEMENTOS INTERNOS DE CONTACTO
   ============================================================ */

.contact-info-item,
.contact-direct,
.contact-social-area {
  opacity: 0;
  transform: translateY(18px);

  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}


.contact.is-visible .contact-info-item {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .32s;
}


.contact.is-visible .contact-direct {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .42s;
}


.contact.is-visible .contact-social-area {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .52s;
}


/* ============================================================
   CONTACTO DIRECTO
   ============================================================ */

.contact-direct-link {
  transition:
    transform .6s var(--ease),
    padding-left .6s var(--ease),
    border-color .5s var(--ease);
}


.contact-direct-link:hover {
  transform: translateX(7px);
}


/* Icono */

.contact-direct-icon {
  transition:
    transform .65s var(--ease),
    color .45s var(--ease);
}


.contact-direct-link:hover .contact-direct-icon {
  transform:
    translateY(-3px)
    scale(1.08);

  color: var(--brass);
}


/* Texto */

.contact-direct-text strong {
  transition:
    transform .5s var(--ease),
    color .5s var(--ease);
}


.contact-direct-link:hover .contact-direct-text strong {
  transform: translateX(3px);
  color: var(--brass-deep);
}


/* Flecha */

.contact-direct-arrow {
  transition:
    transform .6s var(--ease),
    opacity .5s var(--ease),
    color .5s var(--ease);
}


.contact-direct-link:hover .contact-direct-arrow {
  opacity: 1;

  transform:
    translate(3px, -4px)
    scale(1.08);

  color: var(--brass);
}


/* ============================================================
   REDES — ENTRADA ESCALONADA
   ============================================================ */

.contact-social-link {
  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease),
    border-color .6s var(--ease),
    box-shadow .6s var(--ease),
    background .6s var(--ease);
}


.contact.is-visible .contact-social-link:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .60s;
}


.contact.is-visible .contact-social-link:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .70s;
}


.contact.is-visible .contact-social-link:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .80s;
}


/* Hover redes */

.contact-social-link:hover {
  transform: translateY(-6px);

  border-color:
    rgba(182, 138, 78, .4);

  box-shadow:
    0 18px 45px
    rgba(24, 22, 26, .08);
}


/* ============================================================
   ICONOS REDES
   ============================================================ */

.social-icon {
  transition:
    transform .7s var(--ease),
    color .5s var(--ease);
}


.contact-social-link:hover .social-icon {
  transform:
    translateY(-3px)
    scale(1.1);

  color: var(--brass-deep);
}


/* Flecha */

.social-arrow {
  transition:
    opacity .5s var(--ease),
    transform .6s var(--ease),
    color .5s var(--ease);
}


.contact-social-link:hover .social-arrow {
  opacity: 1;

  transform:
    translate(2px, -3px)
    scale(1.1);

  color: var(--brass);
}


/* ============================================================
   FORMULARIO — ENTRADA ESCALONADA (CORREGIDO)
   ============================================================ */

.contact-form .field {
  opacity: 0;
  transform: translateY(14px);

  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}

/* Hace visibles TODOS los campos cuando la sección entra en pantalla */
.contact.is-visible .contact-form .field {
  opacity: 1;
  transform: translateY(0);
}

/* Tiempos de retardo escalonados para la animación */
.contact.is-visible .contact-form .field:nth-child(1) { transition-delay: .30s; }
.contact.is-visible .contact-form .field:nth-child(2) { transition-delay: .35s; }
.contact.is-visible .contact-form .field:nth-child(3) { transition-delay: .40s; }
.contact.is-visible .contact-form .field:nth-child(4) { transition-delay: .45s; }
.contact.is-visible .contact-form .field:nth-child(5) { transition-delay: .50s; }
.contact.is-visible .contact-form .field:nth-child(6) { transition-delay: .55s; }
.contact.is-visible .contact-form .field:nth-child(7) { transition-delay: .60s; }
.contact.is-visible .contact-form .field:nth-child(8) { transition-delay: .65s; }

/* ============================================================
   INPUTS — MICROINTERACCIÓN
   ============================================================ */

.contact-form input,
.contact-form select,
.contact-form textarea {
  transition:
    border-color .4s var(--ease),
    box-shadow .4s var(--ease),
    transform .4s var(--ease),
    background .4s var(--ease);
}


.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
  border-color:
    rgba(182, 138, 78, .35);
}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;

  border-color:
    var(--brass);

  box-shadow:
    0 8px 25px
    rgba(182, 138, 78, .08);

  transform: translateY(-1px);
}


/* ============================================================
   BOTÓN
   ============================================================ */

.contact-submit {
  position: relative;
  overflow: hidden;

  transition:
    transform .55s var(--ease),
    box-shadow .55s var(--ease),
    background .45s var(--ease);
}


/* Brillo que atraviesa el botón */

.contact-submit::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  left: -120%;

  width: 70%;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  transform: skewX(-18deg);

  transition:
    left .9s var(--ease);
}


.contact-submit:hover::before {
  left: 140%;
}


.contact-submit:hover {
  transform: translateY(-4px);

  box-shadow:
    0 14px 30px
    rgba(24,22,26,.16);
}


/* Flecha del botón */

.submit-arrow {
  transition:
    transform .55s var(--ease);
}


.contact-submit:hover .submit-arrow {
  transform:
    translate(4px, -4px);
}


/* ============================================================
   MOVIMIENTO AMBIENTAL
   ============================================================ */

.contact::after {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  left: -300px;
  bottom: -300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(182,138,78,.055),
      transparent 70%
    );

  pointer-events: none;

  animation:
    contactAmbient 14s ease-in-out infinite alternate;
}


@keyframes contactAmbient {

  0% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  100% {
    transform:
      translate3d(60px, -30px, 0)
      scale(1.08);
  }

}


/* ============================================================
   REDUCIR MOVIMIENTO SI EL USUARIO LO PREFIERE
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .contact *,
  .contact::before,
  .contact::after {
    animation: none !important;

    transition-duration:
      .01ms !important;
  }

  .contact-header,
  .contact-details,
  .contact-form,
  .contact-info-item,
  .contact-direct,
  .contact-social-area,
  .contact-social-link,
  .contact-form .field {
    opacity: 1 !important;

    transform: none !important;
  }

}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 700px) {

  .contact-details,
  .contact-form {
    transform:
      translateY(25px);
  }

  .contact.is-visible .contact-details,
  .contact.is-visible .contact-form {
    transform:
      translateY(0);
  }

  .contact-social-link:hover {
    transform:
      translateY(-3px);
  }

  .contact-direct-link:hover {
    transform:
      translateX(3px);
  }

}
/* ============================================================
   FOOTER — FC SAX
   Minimal / Editorial / Premium
   ============================================================ */

.footer{
  position:relative;

  background:var(--carbon);

  color:var(--bone);

  padding:
    90px 0 28px;

  overflow:hidden;
}


/* Luz ambiental */

.footer::before{
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  right:-280px;
  top:-300px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(182,138,78,.08),
      transparent 68%
    );

  pointer-events:none;
}


/* ============================================================
   MAIN
   ============================================================ */

.footer-main{

  display:grid;

  grid-template-columns:
    1.7fr
    .8fr
    1fr;

  gap:90px;

  padding-bottom:75px;

  position:relative;
}


/* ============================================================
   BRAND
   ============================================================ */

.footer-brand{

  max-width:440px;
}


.footer-word{

  display:inline-block;

  font-family:var(--serif);

  font-size:
    clamp(2.5rem,5vw,4.5rem);

  line-height:1;

  letter-spacing:-.035em;

  color:var(--bone);

  transition:
    color .45s var(--ease),
    transform .55s var(--ease);
}


.footer-word:hover{

  color:var(--brass-light);

  transform:
    translateX(4px);
}


.footer-tagline{

  max-width:380px;

  margin-top:25px;

  font-family:var(--serif);

  font-size:20px;

  line-height:1.35;

  color:
    rgba(243,238,230,.75);
}


.footer-location{

  display:block;

  margin-top:24px;

  font-size:10px;

  line-height:1.6;

  letter-spacing:.12em;

  text-transform:uppercase;

  color:
    rgba(243,238,230,.42);
}


/* ============================================================
   LABELS
   ============================================================ */

.footer-label{

  display:block;

  margin-bottom:24px;

  font-size:10px;

  font-weight:800;

  letter-spacing:.2em;

  text-transform:uppercase;

  color:var(--brass-light);
}


/* ============================================================
   NAV
   ============================================================ */

.footer-navigation{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

}


.footer-navigation a{

  position:relative;

  margin-bottom:11px;

  font-size:13px;

  color:
    rgba(243,238,230,.62);

  transition:
    color .4s var(--ease),
    transform .5s var(--ease);
}


.footer-navigation a::before{

  content:"";

  position:absolute;

  left:-16px;

  top:50%;

  width:0;

  height:1px;

  background:var(--brass-light);

  transition:
    width .45s var(--ease);
}


.footer-navigation a:hover{

  color:var(--bone);

  transform:
    translateX(5px);
}


.footer-navigation a:hover::before{

  width:10px;

}


/* ============================================================
   CONTACT
   ============================================================ */

.footer-contact{

  display:flex;

  flex-direction:column;

  align-items:flex-start;
}


.footer-contact-link{

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:13px;

  font-family:var(--serif);

  font-size:18px;

  color:
    rgba(243,238,230,.82);

  transition:
    color .4s var(--ease),
    transform .5s var(--ease);
}


.footer-contact-link span{

  font-family:var(--sans);

  font-size:13px;

  opacity:.35;

  transition:
    opacity .4s var(--ease),
    transform .5s var(--ease);
}


.footer-contact-link:hover{

  color:var(--brass-light);

  transform:
    translateX(4px);
}


.footer-contact-link:hover span{

  opacity:1;

  transform:
    translate(3px,-3px);
}


/* ============================================================
   SOCIALS
   ============================================================ */

.footer-socials{

  display:flex;

  align-items:center;

  gap:18px;

  margin-top:22px;
}


.footer-socials a{

  width:34px;
  height:34px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(243,238,230,.15);

  border-radius:50%;

  color:
    rgba(243,238,230,.65);

  transition:
    color .45s var(--ease),
    border-color .45s var(--ease),
    transform .6s var(--ease),
    background .45s var(--ease);
}


.footer-socials svg{

  width:15px;
  height:15px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.5;

  stroke-linecap:round;

  stroke-linejoin:round;
}


/* TikTok */

.footer-socials a:last-child svg{

  fill:currentColor;

  stroke:none;
}


.footer-socials a:hover{

  color:var(--brass-light);

  border-color:
    var(--brass);

  background:
    rgba(182,138,78,.08);

  transform:
    translateY(-4px)
    scale(1.05);
}


/* ============================================================
   DIVISOR
   ============================================================ */

.footer-divider{

  height:1px;

  border:0;

  margin:0;

  background:
    rgba(243,238,230,.12);
}


/* ============================================================
   BOTTOM
   ============================================================ */

.footer-bottom{

  display:grid;

  grid-template-columns:
    1fr
    1fr
    auto;

  align-items:center;

  gap:30px;

  padding-top:25px;
}


.footer-copyright,
.footer-credit{

  font-size:9px;

  letter-spacing:.12em;

  text-transform:uppercase;

  color:
    rgba(243,238,230,.35);
}


.footer-credit{

  text-align:center;
}


/* ============================================================
   LEGAL
   ============================================================ */

.footer-legal{

  display:flex;

  gap:22px;

  justify-content:flex-end;
}


.footer-legal a{

  font-size:9px;

  letter-spacing:.1em;

  text-transform:uppercase;

  color:
    rgba(243,238,230,.4);

  transition:
    color .35s var(--ease);
}


.footer-legal a:hover{

  color:var(--bone);

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){

  .footer-main{

    grid-template-columns:
      1fr 1fr;

    gap:55px;

  }

  .footer-brand{

    grid-column:
      1 / -1;

  }

  .footer-bottom{

    grid-template-columns:
      1fr 1fr;

  }

  .footer-credit{

    display:none;

  }

  .footer-legal{

    justify-content:flex-end;

  }

}


@media(max-width:600px){

  .footer{

    padding:
      65px 0 25px;

  }


  .footer-main{

    grid-template-columns:
      1fr;

    gap:45px;

    padding-bottom:50px;

  }


  .footer-brand{

    grid-column:auto;

  }


  .footer-tagline{

    font-size:18px;

  }


  .footer-bottom{

    grid-template-columns:
      1fr;

    gap:18px;

  }


  .footer-legal{

    justify-content:flex-start;

    flex-wrap:wrap;

    gap:14px;

  }

}
/* ============================================================
   JUSTIFICACIÓN GLOBAL DE PÁRRAFOS
   ============================================================ */

/* 1. Aplica texto justificado a todos los párrafos de la web */
p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.moment-arrow,
.submit-arrow,
.social-arrow,
.contact-direct-arrow {
  font-variant-emoji: text;
}

/* Centrar el icono de play de los vídeos */
.play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Centrar visualmente un triángulo requiere un ligero empuje a la derecha */
  padding-left: 2px; 
}

.play-icon svg {
  display: block;
  fill: currentColor;
}

.social-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.social-arrow svg {
  display: block;
  stroke: currentColor;
}
.submit-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.submit-arrow svg {
  display: block;
  stroke: currentColor;
}
/* Contenedor que agrupa la columna izquierda y la derecha */
.contact-container { 
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas de igual ancho */
  gap: 2.5rem; /* Espacio entre columnas */
  align-items: start;
}

/* En pantallas móviles vuelve a una sola columna */
@media (max-width: 768px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}