/* ═══════════════════════════════════════════════════════
   MORE DISSENY STUDIO — style.css
   Paleta: --magenta/#d40e40 · --negro/#000 · --blanco/#fff
           --rosa/#fff4fa · --amarillo/#ffe600 (uso mínimo)
═══════════════════════════════════════════════════════ */

:root {
  --magenta:  #d40e40;
  --negro:    #000;
  --blanco:   #fff;
  --rosa:     #fff4fa;
  --amarillo: #ffe600;
  --max: 1240px;
  --r: 8px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body {
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  color: var(--negro);
  background: var(--rosa);
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Helpers ── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; }
.reveal.on { opacity: 1; transform: none; }

/* ══════════════════════════════════
   NAV
══════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: var(--negro);
  transition: box-shadow .3s;
}
#nav.sombra { box-shadow: 0 2px 16px rgba(0,0,0,.5); }
.nav-in {
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  height: 90px;
}
.nav-logo img { height: 62px; }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a {
  font-family: 'Antonio', sans-serif;
  font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blanco); opacity: .7;
  transition: opacity .2s;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.btn-nav-aula {
  background: var(--magenta); color: var(--blanco) !important; opacity: 1 !important;
  padding: .45rem 1.2rem; border-radius: var(--r);
  transition: background .2s !important;
}
.btn-nav-aula:hover { background: #b00 !important; }

/* Burger */
.burger { display: none; flex-direction: column; gap: 5px; padding: 4px; margin-left: auto; }
.burger span { display: block; width: 26px; height: 2px; background: var(--blanco); transition: transform .3s, opacity .3s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
#hero {
  background: var(--negro);
  padding: 160px 0 100px;   /* sin padding lateral — se lo damos al hero-in */
  overflow: hidden;
  position: relative;
}
.hero-in {
  max-width: var(--max); margin: 0 auto; padding: 0 32px;  /* alineado con nav y wrap */
  position: relative; z-index: 1;
}
/* deco: flotante, no limita el ancho del texto */
.hero-deco {
  position: absolute;
  right: 0; bottom: -60px;
  width: 380px;
  opacity: .15; pointer-events: none; z-index: 0;
}
.eyebrow {
  font-family: 'Antonio', sans-serif;
  font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 1.2rem;
}
.hero-title {
  font-family: 'Climate Crisis', cursive;
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: .02em;
  background: linear-gradient(90deg,
    var(--blanco)   0%,
    var(--magenta) 25%,
    var(--amarillo) 50%,
    var(--magenta) 75%,
    var(--blanco)  100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: colorWave 5s linear infinite;
  word-break: break-word;
  overflow-wrap: break-word;
  margin-bottom: 1.6rem;
}
.hero-sub {
  font-size: 1.05rem; line-height: 1.75;
  color: rgba(255,255,255,.62);
  max-width: 560px; margin-bottom: 2.4rem;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Botones */
.btn {
  display: inline-block;
  font-family: 'Antonio', sans-serif;
  font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .75rem 2rem;
  border-radius: var(--r);
  transition: background .2s, color .2s, border-color .2s;
}
.btn-r { background: var(--magenta); color: var(--blanco); }
.btn-r:hover { background: #b00; }
.btn-outline-w { border: 1.5px solid rgba(255,255,255,.45); color: var(--blanco); }
.btn-outline-w:hover { border-color: var(--blanco); background: rgba(255,255,255,.07); }

/* ══════════════════════════════════
   MARQUESINA 1 (estilo Aula Creativa)
══════════════════════════════════ */
.mq { overflow: hidden; padding: .7rem 0; white-space: nowrap; }
.mq-negro { background: var(--negro); }
.mq-track {
  display: flex;
  width: max-content;
  animation: mq-scroll 22s linear infinite;
  align-items: center;
  gap: 1.2rem;
}
.m-item {
  font-family: 'Antonio', sans-serif;
  font-size: .9rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blanco);
  white-space: nowrap;
  display: flex; align-items: center; gap: 1.2rem;
}
.m-sep { color: var(--amarillo); }
@keyframes mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════
   SERVICIOS
══════════════════════════════════ */
#servicios { padding: 100px 0; background: var(--magenta); }
#servicios .sec-title { color: var(--blanco); }
#servicios .eyebrow-dark { color: rgba(255,255,255,.7); }
.sec-header { margin-bottom: 3rem; }
.eyebrow-dark {
  font-family: 'Antonio', sans-serif;
  font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: .5rem;
}
.eyebrow-light {
  font-family: 'Antonio', sans-serif;
  font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(212,14,64,.8); margin-bottom: .5rem;
}
.sec-title {
  font-family: 'Climate Crisis', cursive;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.1; letter-spacing: .04em;
  color: var(--negro);
}
.sec-title-light { color: var(--blanco); }

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.card-link { display: block; }
.card {
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: var(--r);
  overflow: hidden;
  height: 100%;
  transition: transform .3s, box-shadow .3s, background .3s, border-color .3s;
}
.card:hover {
  transform: scale(1.03);
  background: var(--negro);
  border-color: var(--negro);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
/* IMAGEN COMPLETA — proporcional, sin recorte */
.imagenserv img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.card h3 {
  font-family: 'Antonio', sans-serif;
  font-size: .95rem; letter-spacing: .07em; text-transform: uppercase;
  padding: 1.1rem 1.2rem .5rem;
  transition: color .3s;
}
.card:hover h3 { color: var(--blanco); }
.card p {
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  font-size: 1rem; line-height: 1.65;
  color: #555;
  padding: 0 1.2rem 1.4rem;
  transition: color .3s;
}
.card:hover p { color: rgba(255,255,255,.65); }

/* ══════════════════════════════════
   MARQUEE WALL (statement)
══════════════════════════════════ */
.marquee-wall {
  background: var(--negro);
  padding: 2.2rem 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mw-row { overflow: hidden; }
.mw-track {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 2rem;
}
.mw-word {
  font-family: 'Climate Crisis', cursive;
  font-size: clamp(1.8rem, 3vw, 3rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blanco);
}
.mw-accent { color: var(--magenta); }
.mw-sep {
  color: rgba(255,255,255,.35);
  font-size: .65em;
  flex-shrink: 0;
}

/* Fila 2 — gradiente colorWave en las palabras */
.mw-row-gradient .mw-word {
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  background: linear-gradient(90deg,
    var(--blanco)   0%,
    var(--magenta) 30%,
    var(--amarillo) 55%,
    var(--magenta) 80%,
    var(--blanco)  100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: colorWave 5s linear infinite;
}
.mw-row-gradient .mw-sep { color: var(--blanco); opacity: .5; }

/* Velocidades */
.mw-fwd      { animation: mq-scroll     24s linear infinite; }
.mw-bwd      { animation: mq-scroll-rev 18s linear infinite; }
.mw-slow     { animation-duration: 32s !important; }
@keyframes mq-scroll-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ══════════════════════════════════
   PORTFOLIO — grid exacto original
══════════════════════════════════ */
#portfolio {
  background: var(--negro);
  padding: 100px 0;
}
.portfolio-grid-wrap { padding: 0 32px; max-width: var(--max); margin: 2rem auto 0; }

.portfolio-grid {
  display: grid;
  grid-template-columns: 364fr 534fr 364fr;
  grid-template-rows: 309fr 365fr 309fr 337fr;
  gap: 26px;
  width: 100%;
}
.portfolio-item {
  display: block; overflow: hidden;
  border-radius: 6px; position: relative;
  background: #111;
}
.portfolio-item img,
.portfolio-item video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease, opacity .4s ease;
}
.portfolio-item .overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(212,14,64,0);
  transition: background .3s;
}
.portfolio-item:hover .overlay { background: rgba(212,14,64,.22); }
.portfolio-item:hover img,
.portfolio-item:hover video { transform: scale(1.04); opacity: .88; }

/* Posiciones exactas del original */
#port-you   { grid-column: 1;          grid-row: 1; }
#port-sun   { grid-column: 1;          grid-row: 2; }
#port-barna { grid-column: 2;          grid-row: 1 / span 2; }
#port-gaieb { grid-column: 3;          grid-row: 1; }
#port-alba  { grid-column: 3;          grid-row: 2; }
#port-ana   { grid-column: 1;          grid-row: 3 / span 2; }
#port-buffs { grid-column: 2;          grid-row: 3; }
#port-pau   { grid-column: 3;          grid-row: 3; }
#port-kiva  { grid-column: 2 / span 2; grid-row: 4; }

/* ══════════════════════════════════
   MARQUESINA 2 (Let's go)
══════════════════════════════════ */
.marquesina-contenedor {
  overflow: hidden; padding: 18px 0;
  white-space: nowrap;
}
.marquesina-dark {
  background: var(--negro);
  border-top: 2px solid var(--magenta);
  border-bottom: 2px solid var(--magenta);
}
.marquesina-track {
  display: inline-flex;
  animation: mq-scroll 22s linear infinite;
}
.lets-go-text {
  font-family: 'Climate Crisis', cursive;
  font-size: 2.2rem; letter-spacing: .08em;
  background: linear-gradient(90deg, #fff 0%, var(--magenta) 45%, #fff 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: mq-scroll 22s linear infinite, shine 3.5s linear infinite;
}
@keyframes shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ══════════════════════════════════
   AULA CREATIVA BANNER (estático con ola de color)
══════════════════════════════════ */
#aula-banner {
  background: var(--negro);
  border-top: 2px solid var(--magenta);
  border-bottom: 2px solid var(--magenta);
  padding: 56px 0;
}
.aula-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.aula-eyebrow {
  font-family: 'Antonio', sans-serif;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: .6rem;
}
/* Título con ola de colores que fluye (sin moverse el texto) */
.aula-titulo {
  font-family: 'Climate Crisis', cursive;
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: .03em;
  background: linear-gradient(90deg,
    var(--blanco)   0%,
    var(--magenta) 25%,
    var(--amarillo) 50%,
    var(--magenta) 75%,
    var(--blanco)  100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: colorWave 5s linear infinite;
}
@keyframes colorWave {
  from { background-position: 0% center; }
  to   { background-position: -300% center; }
}

/* ══════════════════════════════════
   CONTACTO / IDEAS
══════════════════════════════════ */
.ideas {
  position: relative;
  padding: 100px 32px;
  background: var(--negro);
  overflow: hidden;
}
.ideas::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0)      0%,
    rgba(212,14,64,.38) 25%,
    rgba(180,10,30,.18) 50%,
    rgba(212,14,64,.38) 75%,
    rgba(0,0,0,0)      100%
  );
  background-size: 300% auto;
  animation: colorWave 8s linear infinite;
}
.ideas-content {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: start;
}
.ideas-texto h2 {
  font-family: 'Climate Crisis', cursive;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  letter-spacing: .04em; line-height: 1.12;
  color: var(--blanco); margin-bottom: 1.2rem;
}
.ideas-mark {
  color: var(--blanco);
  background: var(--magenta);
  padding: 0 10px;
}
.ideas-texto p { color: rgba(255,255,255,.6); line-height: 1.75; font-size: .95rem; }

.formulario-ideas { display: flex; flex-direction: column; gap: 1.2rem; }
.grupo-campo { display: flex; flex-direction: column; gap: .35rem; }
.grupo-campo label {
  font-family: 'Antonio', sans-serif;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.grupo-campo input,
.grupo-campo textarea {
  width: 100%;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 6px;
  padding: .65rem .9rem;
  font-family: 'Barlow', sans-serif; font-weight: 300; font-size: .95rem;
  background: rgba(255,255,255,.05);
  color: var(--blanco);
  transition: border-color .2s;
}
.grupo-campo input:focus,
.grupo-campo textarea:focus { outline: none; border-color: var(--magenta); }
.grupo-campo textarea { resize: vertical; }
.btn-submit {
  background: var(--magenta); color: var(--blanco);
  font-family: 'Antonio', sans-serif;
  font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .85rem 2rem; border-radius: var(--r);
  transition: background .2s; align-self: flex-start;
  cursor: pointer;
}
.btn-submit:hover { background: #b00; }

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
footer {
  background-color: var(--negro);
}
.footer-top {
  max-width: var(--max); margin: 0 auto;
  padding: 50px 32px 40px;
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 60px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-logo { height: 40px; margin-bottom: 1rem; }
.footer-info, .footer-address {
  color: rgba(255,255,255,.5);
  font-family: 'Barlow', sans-serif;
  font-size: .9rem; line-height: 1.7;
}
.footer-tel {
  display: inline-block; margin-top: .5rem;
  color: var(--magenta);
  font-family: 'Barlow', sans-serif;
  font-size: .9rem;
}
.footer-links {
  display: flex; flex-direction: column; gap: .65rem;
  align-items: flex-end;
  margin-bottom: 1.2rem;
}
.footer-links a {
  font-family: 'Antonio', sans-serif;
  font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  transition: color .2s;
}
.footer-links a:hover { color: var(--magenta); }
.footer-copy {
  text-align: right;
  color: rgba(255,255,255,.28);
  font-family: 'Barlow', sans-serif;
  font-size: .78rem;
}

/* ══════════════════════════════════
   ABOUT
══════════════════════════════════ */
.about-page {
  background: var(--negro);
  padding: 160px 0 100px;
}
.about-titulo {
  font-family: 'Climate Crisis', cursive;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: .02em;
  background: linear-gradient(90deg,
    var(--blanco)   0%,
    var(--magenta) 25%,
    var(--amarillo) 50%,
    var(--magenta) 75%,
    var(--blanco)  100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: colorWave 5s linear infinite;
  margin-bottom: .8rem;
  max-width: 820px;
}
.about-subtitulo {
  font-family: 'Antonio', sans-serif;
  font-size: .9rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 3rem;
}
.about-body { overflow: hidden; }
.about-body p {
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  font-size: 1.05rem; line-height: 1.9;
  color: rgba(255,255,255,.72);
  margin-bottom: 1.4rem;
}
.about-body p:first-of-type {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--blanco);
}
.about-foto {
  float: right;
  width: 320px;
  margin: .5rem 0 2rem 3rem;
  border-radius: var(--r);
  animation: aboutFloat 4s ease-in-out infinite;
}
@keyframes aboutFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}
.about-despedida {
  display: block;
  font-family: 'Antonio', sans-serif;
  font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--magenta);
  margin-top: 1rem;
  clear: both;
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { gap: 14px; }
}

@media (max-width: 768px) {
  .burger { display: flex; }
  .nav-links {
    display: none; flex-direction: column; gap: 0;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--negro);
    padding: 1rem 0 1.5rem;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: block; padding: .75rem 32px; text-align: center; }
  .nav-cta { padding: .5rem 32px 0; }
  .btn-nav-aula { display: block; text-align: center; }

  #hero { padding: 120px 0 80px; }
  .hero-deco { width: 220px; opacity: .1; right: 0; }

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

  .statement-track-h { font-size: 2rem; }

  .portfolio-grid-wrap { padding: 0 16px; }
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }
  #port-you, #port-sun, #port-gaieb, #port-alba, #port-buffs, #port-pau
    { grid-column: auto; grid-row: auto; }
  #port-barna, #port-ana { grid-column: 1 / span 2; grid-row: auto; min-height: 260px; }
  #port-kiva  { grid-column: 1 / span 2; grid-row: auto; }
  .portfolio-item { min-height: 160px; }

  .aula-cta-row { padding: 28px 24px; flex-direction: column; align-items: flex-start; }

  .ideas { padding: 80px 24px; }
  .ideas-content { grid-template-columns: 1fr; gap: 40px; }

  .footer-top { flex-direction: column; gap: 40px; padding: 40px 24px 30px; }
  .footer-links { align-items: flex-start; }

  /* About mobile */
  .about-foto { float: none; width: 100%; max-width: 320px; margin: 0 auto 1.6rem; display: block; }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(1.8rem, 7vw, 2.2rem);
    word-break: normal;
    overflow-wrap: normal;
  }
  .statement-track-h { font-size: 1.6rem; }
  .aula-mq-track { font-size: 1.8rem; }
  .marquesina-track .lets-go-text { font-size: 1.6rem; }
  #hero { padding: 100px 0 60px; }
  .hero-in { padding: 0 20px; }
  .ideas-texto h2 { font-size: clamp(1.4rem, 6.5vw, 2rem); }
  .aula-titulo { font-size: clamp(1.2rem, 5.5vw, 1.8rem); }
}