/* ============ VARIABLES DE COLOR (cambiá los colores acá) ============ */
:root {
  --ink: #101110;
  --paper: #e8e9e3;
  --line: rgba(232,233,227,.2);
  --muted: #92958d;
  --accent: #b9ff38;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(16,17,16,.78), rgba(16,17,16,.92)), url('assets/video-editing-bg.png') center / cover;
  opacity: .9;
}

.hero, .intro, .work, .services, .about, .contact, .footer {
  background: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea, select {
  font: inherit;
}

.site-shell {
  overflow: hidden;
  background: transparent;
  position:relative;
}

.site-shell::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(rgba(16,17,16,.74), rgba(16,17,16,.88)), url('assets/video-editing-bg.png') center top / cover fixed;
  opacity:.96;
}

.site-shell::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.34;
  background-image:radial-gradient(circle at 15% 18%, rgba(255,255,255,.85) 0 1px, transparent 2px), radial-gradient(circle at 82% 34%, rgba(185,255,56,.75) 0 1px, transparent 2px), radial-gradient(circle at 65% 78%, rgba(155,140,255,.8) 0 1px, transparent 2px);
  background-size:300px 260px, 390px 320px, 460px 380px;
  animation:background-stars 18s linear infinite;
}

@keyframes background-stars {
  from {
    background-position:0 0, 0 0, 0 0;
  }
  to {
    background-position:40px -50px, -55px 35px, 35px 45px;
  }
}

.section-pad, .nav-wrap {
  width: min(1320px, calc(100% - 80px));
  margin-inline: auto;
}

/* ============ NAVEGACIÓN ============ */
.nav-wrap {
  height: 86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:10;
}

.brand, .footer-brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:10px;
  letter-spacing:.16em;
  line-height:1.35;
}

.brand-logo {
  width:43px;
  height:43px;
  object-fit:contain;
  background:#070807;
}

.brand b {
  color:var(--accent);
  font-weight:400;
}

.nav-links {
  display:flex;
  align-items:center;
  gap:27px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#b9bbb3;
}

.nav-links a:not(.nav-cta):hover, .text-link:hover {
  color:var(--accent);
}

.nav-cta, .button {
  display:inline-flex;
  align-items:center;
  gap:11px;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:10px;
  transition:.25s ease;
}

.nav-cta {
  border:1px solid rgba(232,233,227,.35);
  padding:12px 15px;
  color:var(--paper);
}

.nav-cta:hover {
  background:var(--accent);
  color:var(--ink);
  border-color:var(--accent);
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  color:var(--paper);
}

/* ============ INICIO (HERO) ============ */
.hero {
  min-height:760px;
  position:relative;
  padding-top:27px;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  background:radial-gradient(circle at 70% 35%, rgba(120,255,65,.08), transparent 24%), radial-gradient(circle at 23% 72%, rgba(100,75,255,.13), transparent 28%), rgba(16,17,16,.48);
}

.hero-atmosphere {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(circle at 12% 22%, rgba(255,255,255,.8) 0 1px, transparent 2px), radial-gradient(circle at 75% 16%, rgba(185,255,56,.8) 0 1px, transparent 2px), radial-gradient(circle at 88% 72%, rgba(255,255,255,.65) 0 1px, transparent 2px), radial-gradient(circle at 42% 82%, rgba(143,119,255,.7) 0 1px, transparent 2px);
  background-size:260px 220px, 340px 280px, 420px 330px, 310px 260px;
  opacity:.72;
}

.hero-atmosphere::before, .hero-atmosphere::after {
  content:'';
  position:absolute;
  width:46vw;
  height:46vw;
  border:1px solid rgba(185,255,56,.12);
  border-radius:50%;
  right:-14vw;
  top:14%;
  box-shadow:0 0 70px rgba(185,255,56,.08), inset 0 0 70px rgba(185,255,56,.04);
  animation:orbit 18s linear infinite;
}

.hero-atmosphere::after {
  width:27vw;
  height:27vw;
  right:8vw;
  top:31%;
  border-color:rgba(160,140,255,.15);
  animation:orbit-reverse 13s linear infinite;
}

.particle {
  position:absolute;
  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 16px 4px rgba(185,255,56,.42);
  animation:float-particle 7s ease-in-out infinite;
}

.particle-one {
  left:18%;
  top:31%;
}

.particle-two {
  right:25%;
  top:22%;
  animation-delay:-2s;
  background:#fff;
}

.particle-three {
  left:64%;
  bottom:18%;
  animation-delay:-4s;
}

.particle-four {
  right:12%;
  bottom:35%;
  animation-delay:-5.5s;
  background:#9b8cff;
  box-shadow:0 0 16px 4px rgba(155,140,255,.4);
}

.timeline-line {
  position:absolute;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(185,255,56,.48), transparent);
  transform:rotate(-20deg);
  animation:timeline-drift 10s ease-in-out infinite;
}

.line-one {
  width:58%;
  left:-7%;
  top:63%;
}

.line-two {
  width:42%;
  right:-4%;
  top:42%;
  animation-delay:-3s;
  background:linear-gradient(90deg, transparent, rgba(155,140,255,.42), transparent);
}

.scan-beam {
  position:absolute;
  width:1px;
  height:120%;
  left:74%;
  top:-10%;
  background:linear-gradient(transparent, rgba(185,255,56,.2), transparent);
  transform:rotate(28deg);
  filter:blur(1px);
  animation:beam-sweep 9s ease-in-out infinite;
}

@keyframes float-particle {
  0%,100% {
    transform:translate3d(0,0,0);
    opacity:.35;
  }
  50% {
    transform:translate3d(24px,-32px,0);
    opacity:1;
  }
}

@keyframes orbit {
  to {
    transform:rotate(360deg) translateX(10px) rotate(-360deg);
  }
}

@keyframes orbit-reverse {
  to {
    transform:rotate(-360deg) translateX(7px) rotate(360deg);
  }
}

@keyframes timeline-drift {
  0%,100% {
    transform:translateX(-4%) rotate(-20deg);
    opacity:.35;
  }
  50% {
    transform:translateX(7%) rotate(-20deg);
    opacity:.8;
  }
}

@keyframes beam-sweep {
  0%,100% {
    left:72%;
    opacity:.15;
  }
  50% {
    left:39%;
    opacity:.65;
  }
}

.hero-rule {
  height:1px;
  width:75%;
  background:var(--line);
  margin-left:auto;
}

.hero-rule:before {
  content:'';
  display:block;
  height:7px;
  width:7px;
  background:var(--accent);
  border-radius:50%;
  transform:translate(-16px,-3px);
}

.hero-meta {
  display:flex;
  justify-content:space-between;
  margin-top:20px;
  font-size:9px;
  letter-spacing:.18em;
  color:var(--muted);
}

.hero-main {
  margin-top:112px;
  position:relative;
  z-index:1;
}

.hero-kicker, .section-label {
  color:var(--accent);
  font-size:10px;
  letter-spacing:.19em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
}

.hero-kicker span {
  color:var(--muted);
}

h1, h2, h3, p {
  margin:0;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight:400;
  font-size:clamp(5rem, 14vw, 12.4rem);
  letter-spacing:-.095em;
  line-height:.71;
  margin:31px 0 57px;
}

h1 span {
  display:block;
  margin-left:2%;
}

h1 em {
  display:block;
  color:#aeb2ac;
  font-style:italic;
  margin-left:26%;
}

.hero-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  max-width:780px;
  margin-left:8%;
}

.hero-bottom p {
  max-width:340px;
  font-size:16px;
  line-height:1.45;
  color:#c5c7c0;
}

.hero-bottom strong {
  color:var(--paper);
  font-weight:400;
}

.hero-actions {
  display:flex;
  gap:24px;
  align-items:center;
}

.button {
  padding:15px 19px;
  border:1px solid transparent;
  cursor:pointer;
}

.button-light {
  color:var(--ink);
  background:var(--paper);
}

.button-light:hover {
  background:var(--accent);
}

.button-accent {
  background:var(--accent);
  color:var(--ink);
  border:0;
  justify-content:center;
}

.button-accent:hover {
  background:#d6ff8d;
}

.text-link {
  color:var(--paper);
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.13em;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
}

.text-link span {
  color:var(--accent);
  font-size:15px;
  margin-left:6px;
}

.hero-stamp {
  position:absolute;
  right:1%;
  top:37%;
  writing-mode:vertical-rl;
  font-size:10px;
  letter-spacing:.25em;
  color:var(--muted);
  line-height:2;
}

.hero-stamp span {
  color:var(--paper);
}

.hero-scroll {
  position:absolute;
  bottom:31px;
  left:0;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.2em;
}

.hero-scroll span {
  color:var(--accent);
  font-size:17px;
  margin-left:14px;
}

/* ============ PRESENTACIÓN ============ */
.intro {
  padding-top:150px;
  padding-bottom:175px;
}

.intro-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:12%;
  margin-top:63px;
  padding-left:9%;
}

.intro h2, .section-heading h2, .process h2, .about h2, .contact h2 {
  font-family:Arial, Helvetica, sans-serif;
  font-size:clamp(3.2rem, 6.5vw, 7rem);
  line-height:.91;
  font-weight:400;
  letter-spacing:-.07em;
}

.intro h2 i, h2 i {
  color:#aeb2ac;
  font-style:italic;
}

.intro-copy {
  max-width:360px;
  padding-top:8px;
}

.intro-copy p {
  color:#b9bbb3;
  line-height:1.6;
  font-size:15px;
  margin-bottom:19px;
}

.intro-copy strong {
  color:var(--paper);
  font-weight:400;
}

.tool-line {
  border-top:1px solid var(--line);
  margin-top:35px;
  padding-top:13px;
  display:flex;
  gap:13px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.14em;
}

/* ============ TRABAJOS ============ */
.work {
  padding-bottom:180px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:65px;
}

.section-heading h2 {
  margin-top:28px;
}

.heading-note {
  color:var(--muted);
  font-size:9px;
  letter-spacing:.17em;
  line-height:1.8;
  text-align:right;
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:46px 24px;
  align-items:start;
}

.project {
  grid-column:span 1;
  cursor:pointer;
  min-width:0;
}

.project-large, .project-wide {
  grid-column:span 1;
}

.project-visual {
  min-height:0;
  aspect-ratio:9 / 14;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(232,233,227,.28);
  border-radius:3px;
  background:#272928;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(0,0,0,.24);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.project:hover .project-visual, .project:focus .project-visual {
  transform:translateY(-7px);
  border-color:rgba(185,255,56,.65);
  box-shadow:0 24px 55px rgba(0,0,0,.42), 0 0 25px rgba(185,255,56,.08);
}

.project-large .project-visual, .project-wide .project-visual {
  min-height:0;
}

.visual-lime {
  background:radial-gradient(circle at 70% 35%, #4e7d38 0, #1b2920 31%, #171918 67%);
}

.visual-violet {
  background:radial-gradient(circle at 50% 30%, #5a3b77, #202124 44%, #171817 80%);
}

.visual-orange {
  background:radial-gradient(circle at 20% 75%, #98522e, #29251f 44%, #191a18 80%);
}

.visual-blue {
  background:radial-gradient(circle at 75% 20%, #344c72, #1d2527 42%, #191a18 80%);
}

.visual-pink {
  background:radial-gradient(circle at 68% 70%, #8a3565, #292029 44%, #191a18 80%);
}

.visual-neutral {
  background:#202220;
}

.vertical-video {
  aspect-ratio:9 / 14;
  min-height:0;
}

.vertical-video::after {
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}

.visual-noise {
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:repeating-linear-gradient(0deg, transparent 0, transparent 3px, #fff 4px);
  mix-blend-mode:overlay;
}

.placeholder-copy {
  color:rgba(232,233,227,.55);
  font-size:10px;
  line-height:1.5;
  letter-spacing:.2em;
  text-align:center;
}

.play-button {
  position:absolute;
  top:18px;
  right:18px;
  width:39px;
  height:39px;
  border:1px solid rgba(232,233,227,.6);
  border-radius:50%;
  display:grid;
  place-items:center;
  opacity:0;
  transform:translateY(8px);
  transition:.3s ease;
}

.project:hover .play-button, .project:focus .play-button {
  opacity:1;
  transform:none;
}

.project-info {
  display:flex;
  justify-content:space-between;
  padding-top:16px;
}

.project-number {
  color:var(--accent);
  font-size:10px;
  letter-spacing:.1em;
}

.project h3 {
  text-transform:uppercase;
  font-size:13px;
  font-weight:400;
  letter-spacing:.06em;
  margin:6px 0;
}

.project-info p {
  color:var(--muted);
  font-size:11px;
}

.project-arrow, .service-arrow {
  color:var(--muted);
  transition:.25s;
}

.project:hover .project-arrow, .service-row:hover .service-arrow {
  color:var(--accent);
  transform:translate(3px,-3px);
}

.edit-note {
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
  margin-top:38px;
}

/* ============ SERVICIOS ============ */
.services {
  padding-top:100px;
  padding-bottom:170px;
  border-top:1px solid var(--line);
}

.side-mark {
  color:var(--muted);
  font-family:Arial, Helvetica, sans-serif;
  font-style:italic;
  font-size:38px;
}

.service-list {
  margin-top:65px;
  border-top:1px solid var(--line);
}

.service-row {
  display:grid;
  grid-template-columns:9% 35% 1fr 30px;
  align-items:center;
  gap:15px;
  padding:28px 0;
  border-bottom:1px solid var(--line);
  transition:.25s;
}

.service-row:hover {
  padding-left:12px;
}

.service-number {
  color:var(--accent);
  font-size:11px;
}

.service-row h3 {
  font-size:16px;
  font-weight:400;
  letter-spacing:.08em;
}

.service-row p {
  color:var(--muted);
  font-size:13px;
}

.tools {
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  margin-top:83px;
  align-items:center;
  color:var(--paper);
}

.tools span {
  color:var(--accent);
  font-size:9px;
  letter-spacing:.17em;
  margin-right:auto;
}

.tool-brand {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:145px;
}

.tool-brand img {
  width:26px;
  height:26px;
  object-fit:contain;
  filter:grayscale(1) brightness(1.65);
}

.tool-brand b {
  font-size:12px;
  font-weight:400;
  color:#aaada6;
}

/* ============ PROCESO ============ */
.process {
  background:#e2e4dc;
  color:var(--ink);
  width:100%;
  max-width:none;
  padding-left:max(40px, calc((100% - 1320px)/2));
  padding-right:max(40px, calc((100% - 1320px)/2));
  padding-top:120px;
  padding-bottom:130px;
}

.process .section-label {
  color:#3e7422;
}

.process-intro {
  display:flex;
  justify-content:space-between;
  margin-top:42px;
  align-items:end;
}

.process h2 {
  font-size:clamp(3.2rem, 6vw, 6.5rem);
}

.process-intro p {
  max-width:275px;
  color:#62665e;
  font-size:14px;
  line-height:1.55;
}

.process-list {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:105px;
  border-top:1px solid #b9bdb4;
}

.process-step {
  padding:28px 15px 0 0;
  border-right:1px solid #b9bdb4;
  min-height:140px;
}

.process-step:last-child {
  border:0;
}

.process-step>span {
  font-family:Arial, Helvetica, sans-serif;
  font-size:35px;
  color:#7d8279;
}

.process-step h3 {
  font-size:12px;
  letter-spacing:.14em;
  margin:21px 0 10px;
}

.process-step p {
  color:#70746b;
  font-size:12px;
  line-height:1.55;
  max-width:210px;
}

/* ============ SOBRE MÍ ============ */
.about {
  padding-top:170px;
  padding-bottom:180px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13%;
}

.about-mark {
  font-family:Arial, Helvetica, sans-serif;
  font-style:italic;
  font-size:clamp(13rem, 30vw, 31rem);
  letter-spacing:-.18em;
  line-height:.65;
  color:#f1f3ed;
  text-shadow:0 0 34px rgba(185,255,56,.12);
}

.about-copy {
  max-width:530px;
}

.about h2 {
  margin:28px 0 34px;
}

.about-copy>p {
  max-width:420px;
  color:#b7bab2;
  line-height:1.65;
  font-size:15px;
  margin-bottom:30px;
}

/* ============ CONTACTO ============ */
.contact {
  border-top:1px solid var(--line);
  padding-top:115px;
  padding-bottom:140px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
}

.contact h2 {
  margin:30px 0 25px;
}

.contact-title>p {
  color:var(--muted);
  font-size:15px;
}

.social-links {
  display: flex;
  justify-content: center; /* Centra sus elementos internos */
  gap: 19px;
  margin-top: 70px;
  margin-left: auto;       /* Centra el bloque entero horizontalmente */
  margin-right: auto;
  width: fit-content;      /* Ajusta el ancho al contenido para que funcione auto-margin */
}

.social-links a {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#bfc1ba;
  display:flex;
  align-items:center;
  gap:6px;
}

.social-links a:hover {
  color:var(--accent);
}

.contact-form {
  display:flex;
  flex-direction:column;
  gap:23px;
  padding-top:20px;
}

.contact-form label {
  display:flex;
  flex-direction:column;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  font-size:12px;
}

.contact-form input, .contact-form textarea, .contact-form select {
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--paper);
  padding:7px 0 12px;
  outline:none;
  resize:vertical;
}

.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  border-color:var(--accent);
}

.contact-form select option {
  color:var(--ink);
}

.contact-form small {
  color:var(--muted);
  font-size:10px;
  margin-top:-8px;
}

/* ============ FOOTER ============ */
.footer {
  border-top:1px solid var(--line);
  padding-top:28px;
  padding-bottom:28px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}

.footer-brand img {
  filter:grayscale(1);
}

.footer-brand {
  font-size:9px;
}

.footer-brand small {
  color:var(--muted);
  letter-spacing:.1em;
}

.footer-social {
  display:flex;
  gap:20px;
  font-size:10px;
  color:var(--muted);
}

.footer-social a {
  display:flex;
  align-items:center;
  gap:5px;
}

.footer-social a:hover {
  color:var(--accent);
}

.footer>p {
  text-align:right;
  color:var(--muted);
  font-size:9px;
}

.site-credit {
  justify-self:end;
  margin-top:18px;
  color:var(--accent);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.site-credit:hover {
  color:var(--paper);
}

/* ============ VENTANA DE VISTA PREVIA ============ */
.project-modal {
  position:fixed;
  inset:0;
  background:rgba(5,6,5,.88);
  z-index:20;
  display:grid;
  place-items:center;
  padding:20px;
}

.modal-inner {
  width:min(700px,100%);
  background:#1b1e1b;
  border:1px solid var(--line);
  padding:20px;
  position:relative;
}

.modal-inner>button {
  position:absolute;
  right:13px;
  top:13px;
  background:none;
  border:0;
  color:var(--paper);
  cursor:pointer;
}

.modal-preview {
  height:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  background:radial-gradient(circle, #354d35, #111311 70%);
  color:var(--accent);
}

.modal-preview span {
  font-size:10px;
  letter-spacing:.2em;
}

.modal-inner>p {
  color:var(--muted);
  font-size:11px;
  padding-top:14px;
}

/* ============ CELULAR / TABLET ============ */
@media (max-width: 800px) {
  body::before {
    background-attachment:scroll;
    background-position:center top;
  }
  .site-shell::before {
    background-attachment:scroll;
    background-size:auto 100%;
  }
  .site-shell::after {
    opacity:.48;
    background-size:210px 190px, 270px 240px, 320px 280px;
    animation-duration:24s;
  }
  .hero-atmosphere {
    opacity:.82;
  }
  .hero-atmosphere::before {
    width:86vw;
    height:86vw;
    right:-28vw;
    top:19%;
  }
  .hero-atmosphere::after {
    width:52vw;
    height:52vw;
    right:2vw;
    top:39%;
  }
  .scan-beam {
    left:72%;
    animation-duration:11s;
  }
  .section-pad, .nav-wrap {
    width:calc(100% - 40px);
  }
  .nav-wrap {
    height:72px;
  }
  .menu-toggle {
    display:block;
  }
  .nav-links {
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:#141614;
    flex-direction:column;
    align-items:flex-start;
    padding:22px;
    border:1px solid var(--line);
    gap:20px;
  }
  .nav-links.is-open {
    display:flex;
  }
  .nav-cta {
    width:100%;
    justify-content:space-between;
  }
  .hero {
    min-height:650px;
    padding-top:22px;
  }
  .hero-main {
    margin-top:95px;
  }
  .hero-meta {
    font-size:8px;
  }
  .hero-meta span:last-child {
    display:none;
  }
  h1 {
    font-size:clamp(4.5rem, 20vw, 8rem);
    margin:28px 0 45px;
    line-height:.76;
  }
  h1 em {
    margin-left:17%;
  }
  .hero-bottom {
    display:block;
    margin-left:0;
  }
  .hero-bottom p {
    font-size:14px;
    max-width:280px;
  }
  .hero-actions {
    margin-top:28px;
  }
  .hero-stamp {
    display:none;
  }
  .hero-scroll {
    bottom:20px;
  }
  .intro {
    padding-top:100px;
    padding-bottom:110px;
  }
  .intro-grid, .about, .contact {
    grid-template-columns:1fr;
    gap:55px;
    padding-left:0;
  }
  .intro h2, .section-heading h2, .process h2, .about h2, .contact h2 {
    font-size:clamp(3.1rem, 14vw, 5rem);
  }
  .section-heading {
    align-items:start;
    gap:25px;
    flex-direction:column;
    margin-bottom:43px;
  }
  .heading-note {
    text-align:left;
  }
  .project-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px 12px;
  }
  .project, .project-large, .project-wide {
    grid-column:span 1;
  }
  .project-large .project-visual, .project-visual, .project-wide .project-visual {
    min-height:0;
    aspect-ratio:9 / 14;
  }
  .project-large {
    grid-column:span 2;
  }
  .project-large .project-visual {
    min-height:0;
  }
  .project h3 {
    font-size:11px;
  }
  .services {
    padding-top:75px;
    padding-bottom:100px;
  }
  .service-row {
    grid-template-columns:12% 1fr 25px;
    gap:8px;
  }
  .service-row p {
    grid-column:2 / 3;
    grid-row:2;
    font-size:12px;
  }
  .service-arrow {
    grid-column:3;
    grid-row:1 / 3;
  }
  .tools {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:19px;
  }
  .tools span {
    grid-column:span 2;
  }
  .process {
    padding:85px 20px;
  }
  .process-intro {
    display:block;
  }
  .process-intro p {
    margin-top:28px;
  }
  .process-list {
    grid-template-columns:1fr 1fr;
    margin-top:65px;
    gap:0;
  }
  .process-step {
    min-height:175px;
    border-bottom:1px solid #b9bdb4;
    padding:20px 14px 20px 0;
  }
  .process-step:nth-child(2) {
    border-right:0;
    padding-left:12px;
  }
  .process-step:nth-child(3) {
    padding-top:28px;
  }
  .process-step:nth-child(4) {
    border-right:0;
    padding-left:12px;
    padding-top:28px;
  }
  .about {
    padding-top:100px;
    padding-bottom:100px;
  }
  .about-mark {
    font-size:44vw;
  }
  .contact {
    padding-top:85px;
    padding-bottom:100px;
    gap:55px;
  }
  .social-links {
    margin-top:45px;
    flex-wrap:wrap;
  }
  .footer {
    grid-template-columns:1fr auto;
    gap:26px;
  }
  .footer>p {
    grid-column:span 2;
    text-align:left;
  }
  .footer-social {
    flex-direction:column;
    gap:8px;
  }
  .modal-preview {
    height:270px;
  }
 .logo {
    display: none;
  }
  
}

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

/* ============ AGREGADOS DE LA VERSIÓN HTML ============ */
.icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-fill { fill: currentColor; }
.menu-toggle { cursor: pointer; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.project-modal[hidden] { display: none; }
.brand-logo, .footer-brand img { display: block; }

/* ============ BOTÓN FLOTANTE DE WHATSAPP ============ */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 15;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.5);
  animation: whatsapp-pulse 2.6s ease-out infinite;
  transition: transform .25s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
@keyframes whatsapp-pulse {
  0% { box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.5); }
  70% { box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 800px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}

/* Deja espacio abajo del footer para que el botón no tape el texto */
.footer { padding-bottom: 90px; }

/* ============ VIDEO DE YOUTUBE EN LA VENTANA ============ */
.modal-preview[hidden],
.modal-video[hidden] { display: none; }

.modal-video {
  aspect-ratio: 16 / 9;
  background: #000;
}
.modal-video.is-vertical {
  width: min(100%, calc(75vh * 9 / 16));
  aspect-ratio: 9 / 16;
  margin: 0 auto;
}
.modal-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.project-visual {
  max-width: 260px;
}