/* ═══════════════════════════════════════════════════════════
   Amanda Simó Studio — Rediseño (demo Origen 27)
   Neuroarquitectura para la infancia. Firma: arcoíris pastel +
   rattan/madera + crema cálida + luz natural. Editorial y premium.
   ═══════════════════════════════════════════════════════════ */

:root {
  --paper:    #f7f3ec;   /* crema cálida de fondo */
  --paper-2:  #efe9df;
  --ink:      #2c2724;   /* carbón cálido */
  --ink-soft: #6f665e;
  --line:     #e4dccf;
  --white:    #fffdf9;

  /* Espectro SENSE — el arcoíris pastel de sus espacios */
  --lila:   #c7b3e6;
  --amar:   #f2e29a;
  --verde:  #bcdca6;
  --menta:  #b7e0d0;
  --cielo:  #b6d4e8;
  --rosa:   #f0c3d5;
  --melo:   #f4c9a3;

  --accent:      #8a6fb0;  /* lila profundo — acción/énfasis, legible */
  --accent-deep: #6e5593;

  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1220px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); background: var(--paper); color: var(--ink);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Reveal ── */
.reveal, .reveal--stagger, .reveal--zoom {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal--zoom { transform: scale(.97) translateY(18px); }
.reveal--stagger { transform: none; }
.reveal.in-view, .reveal--stagger.in-view, .reveal--zoom.in-view { opacity: 1; transform: none; }
.reveal--stagger.in-view > * { animation: rise .7s var(--ease) both; }
.reveal--stagger.in-view > *:nth-child(1){animation-delay:.05s}
.reveal--stagger.in-view > *:nth-child(2){animation-delay:.13s}
.reveal--stagger.in-view > *:nth-child(3){animation-delay:.21s}
.reveal--stagger.in-view > *:nth-child(4){animation-delay:.29s}
.reveal--stagger.in-view > *:nth-child(5){animation-delay:.37s}
.reveal--stagger.in-view > *:nth-child(6){animation-delay:.45s}
@keyframes rise { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

/* espectro decorativo reutilizable */
.spectrum { height: 5px; border-radius: 100px;
  background: linear-gradient(90deg,var(--lila),var(--rosa),var(--melo),var(--amar),var(--verde),var(--menta),var(--cielo)); }

/* ═══ DEMO BANNER ═══ */
.demo-banner { position: sticky; top: 0; z-index: 200; background: var(--ink); color: var(--paper); }
.demo-banner.is-hidden { transform: translateY(-100%); position: absolute; }
.demo-banner__inner { max-width: var(--wrap); margin: 0 auto; padding: 9px clamp(16px,4vw,40px);
  display: flex; align-items: center; gap: 14px; font-size: 13.5px; }
.demo-banner__label { background: var(--lila); color: var(--ink); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: 11px; padding: 3px 9px; border-radius: 4px; }
.demo-banner__text { color: rgba(255,255,255,.82); }
.demo-banner__text strong { color: var(--paper); font-weight: 600; }
.demo-banner__cta { margin-left: auto; color: var(--amar); font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid transparent; transition: border-color .2s; }
.demo-banner__cta:hover { border-color: var(--amar); }
.demo-banner__close { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 15px; padding: 8px; margin: -8px -4px; }
.demo-banner__close:hover { color: var(--paper); }
@media (max-width: 680px) { .demo-banner__text { display: none; } .demo-banner__cta { margin-left: 0; } }

/* scroll progress */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 199; background: transparent; pointer-events: none; }
.progress__bar { height: 100%; transform: scaleX(0); transform-origin: left; transition: transform .1s linear;
  background: linear-gradient(90deg,var(--lila),var(--rosa),var(--amar),var(--verde),var(--cielo)); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { left: 16px; }

/* ═══ NAV ═══ */
.nav { position: sticky; top: 0; z-index: 150; transition: background .4s var(--ease), box-shadow .4s, border-color .4s; border-bottom: 1px solid transparent; }
.nav.is-solid { background: rgba(247,243,236,.88); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-bottom-color: var(--line); }
.nav__inner { max-width: var(--wrap); margin: 0 auto; padding: 16px clamp(20px,5vw,56px); display: flex; align-items: center; justify-content: space-between; }
.nav__logo { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.nav__logo b { font-weight: 600; }
.nav__logo span { font-style: italic; color: var(--accent); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); transition: color .2s; }
.nav__links a:hover { color: var(--accent); }
.nav__cta { background: var(--ink); color: var(--paper) !important; padding: 10px 20px; border-radius: 100px; font-weight: 600 !important; transition: background .2s, transform .2s; }
.nav__cta:hover { background: var(--accent-deep); transform: translateY(-1px); }
.nav__toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 11px; margin: -11px; }
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__links { position: fixed; inset: 0 0 0 auto; width: min(82vw,330px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; background: var(--white); padding: 40px; transform: translateX(100%); transition: transform .4s var(--ease); box-shadow: -20px 0 60px rgba(0,0,0,.1); }
  .nav.is-open .nav__links { transform: translateX(0); }
  .nav__links a { font-size: 20px; font-family: var(--font-display); }
}

/* ═══ HERO ═══ */
.hero { position: relative; }
.hero__media { position: relative; height: clamp(560px, 88vh, 880px); overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from{transform:scale(1.03)} to{transform:scale(1.12) translate(-1%,-1%)} }
.hero__media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(30,26,24,.28) 0%, rgba(30,26,24,.08) 30%, rgba(30,26,24,.55) 100%); }
.hero__inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
  max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px,5vw,56px) clamp(48px,8vh,80px); }
.hero__eyebrow { color: var(--white); text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 600; margin-bottom: 20px; opacity: .92;
  display: inline-flex; align-items: center; gap: 12px; }
.hero__eyebrow::before { content:""; width: 34px; height: 2px; background: var(--amar); }
.hero__title { font-family: var(--font-display); font-weight: 340; color: var(--white);
  font-size: clamp(40px, 6.4vw, 88px); line-height: .98; letter-spacing: -.02em; max-width: 15ch; text-shadow: 0 2px 30px rgba(0,0,0,.28); }
.hero__title em { font-style: italic; }
.hero__title .word { display: inline-block; opacity: 0; transform: translateY(24px); }
.hero.is-loaded .hero__title .word { animation: rise .8s var(--ease) both; }
.hero__sub { color: rgba(255,255,255,.92); font-size: clamp(16px,1.6vw,20px); max-width: 46ch; margin-top: 24px; text-shadow: 0 2px 16px rgba(0,0,0,.3); }
.hero__ctas { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__spectrum { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 6px;
  background: linear-gradient(90deg,var(--lila),var(--rosa),var(--melo),var(--amar),var(--verde),var(--menta),var(--cielo)); }

.btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 28px; border-radius: 100px; font-weight: 600; font-size: 15px; border: none; cursor: pointer;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.btn--primary { background: var(--white); color: var(--ink); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0,0,0,.4); }
.btn--ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.7); }
.btn--ghost:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--accent-deep); transform: translateY(-2px); }

/* ═══ SECTION scaffold ═══ */
.section { padding: clamp(70px, 11vh, 130px) 0; }
.section--tint { background: var(--paper-2); }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content:""; width: 26px; height: 2px; background: currentColor; opacity: .5; }
.s-title { font-family: var(--font-display); font-weight: 360; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); max-width: 20ch; }
.s-title em { font-style: italic; color: var(--accent); }
.s-intro { font-size: 17px; color: var(--ink-soft); max-width: 54ch; margin-top: 20px; }

/* ── franja "a quién acompañamos" (marquee suave) ── */
.strip { background: var(--ink); color: var(--paper); padding: 16px 0; overflow: hidden; white-space: nowrap; }
.strip__track { display: inline-flex; gap: 0; animation: marquee 38s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__track span { font-family: var(--font-display); font-style: italic; font-size: clamp(18px,2vw,26px); padding: 0 26px; opacity: .92; }
.strip__track span::after { content:"✦"; margin-left: 26px; color: var(--amar); font-style: normal; font-size: .7em; vertical-align: middle; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .strip__track{animation:none} }

/* ═══ TRES MUNDOS ═══ */
.mundos__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(36px,5vh,56px); flex-wrap: wrap; }
.mundos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mundo { position: relative; border-radius: 18px; overflow: hidden; min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: var(--white); }
.mundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1.1s var(--ease); }
.mundo::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(to top, rgba(28,22,20,.82) 6%, rgba(28,22,20,.12) 55%, rgba(28,22,20,.32)); }
.mundo:hover img { transform: scale(1.06); }
.mundo > * { position: relative; z-index: 2; }
.mundo__num { position: absolute; top: 24px; left: 28px; z-index: 2; font-family: var(--font-display); font-size: 22px; opacity: .9; }
.mundo__tag { text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; font-weight: 700; margin-bottom: 8px; }
.mundo__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px,2.4vw,30px); line-height: 1.05; }
.mundo__desc { font-size: 14.5px; color: rgba(255,255,255,.85); margin-top: 8px; max-width: 32ch; }
.mundo__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
@media (hover:hover){ .mundo:hover img{transform:scale(1.06)} }
@media (max-width: 860px){ .mundos__grid{grid-template-columns:1fr; max-width:480px; margin:0 auto} .mundo{min-height:340px} }

/* ═══ MÉTODO SENSE ═══ */
.sense { background: var(--ink); color: var(--paper); }
.sense .eyebrow { color: var(--amar); }
.sense .s-title { color: var(--white); }
.sense .s-intro { color: rgba(255,255,255,.7); }
.sense__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: clamp(40px,6vh,64px); }
.sense__step { border-top: 3px solid; padding-top: 18px; cursor: default; transition: transform .3s var(--ease); }
.sense__step:hover { transform: translateY(-6px); }
.sense__letter { font-family: var(--font-display); font-size: clamp(40px,5vw,68px); line-height: 1; font-weight: 340; }
.sense__n { font-size: 12px; letter-spacing: .16em; color: rgba(255,255,255,.5); margin: 10px 0 6px; }
.sense__phase { font-family: var(--font-display); font-style: italic; font-size: 19px; margin-bottom: 8px; }
.sense__pname { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.sense__ptext { font-size: 13.5px; color: rgba(255,255,255,.66); line-height: 1.5; }
.sense__foot { display: flex; justify-content: space-between; margin-top: 30px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.sense__tm { margin-top: 28px; font-size: 12.5px; color: rgba(255,255,255,.45); font-style: italic; }
@media (max-width: 900px){ .sense__steps{grid-template-columns:1fr 1fr; gap:26px} }
@media (max-width: 520px){ .sense__steps{grid-template-columns:1fr} }

/* ═══ PULL QUOTE ═══ */
.quote { position: relative; padding: clamp(90px,16vh,180px) 0; text-align: center; overflow: hidden; }
.quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.quote::after { content:""; position:absolute; inset:0; z-index:1; background: rgba(26,22,20,.5); }
.quote__inner { position: relative; z-index: 2; }
.quote__text { font-family: var(--font-display); font-weight: 340; font-style: italic; color: var(--white);
  font-size: clamp(34px, 6vw, 76px); line-height: 1.06; letter-spacing: -.01em; max-width: 16ch; margin: 0 auto; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.quote__by { margin-top: 26px; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; }

/* ═══ PROYECTOS (bento) ═══ */
.proj__head { margin-bottom: clamp(36px,5vh,56px); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 16px; }
.bento__cell { border-radius: 16px; overflow: hidden; position: relative; }
.bento__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.bento__cell:hover img { transform: scale(1.05); }
.bento__cell--tall { grid-row: span 2; }
.bento__cell--wide { grid-column: span 2; }
@media (hover:hover){ .bento__cell:hover img{transform:scale(1.05)} }
@media (max-width: 860px){ .bento{grid-template-columns:1fr; grid-auto-rows:230px; max-width:480px; margin:0 auto} .bento__cell--wide{grid-column:span 1} .bento__cell--tall{grid-row:span 1} }

/* ═══ VALORES ═══ */
.valores__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(34px,5vh,52px); }
.valor { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; transition: transform .25s var(--ease), box-shadow .25s; }
.valor:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(44,39,36,.2); }
.valor__dot { width: 34px; height: 34px; border-radius: 12px; margin-bottom: 16px; }
.valor__name { font-family: var(--font-display); font-size: 21px; margin-bottom: 4px; }
.valor__desc { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 780px){ .valores__grid{grid-template-columns:1fr 1fr} }
@media (max-width: 480px){ .valores__grid{grid-template-columns:1fr} }

/* ═══ SOBRE / AMANDA ═══ */
.about__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,5vw,72px); align-items: center; }
.about__media { position: relative; }
.about__media img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 18px; box-shadow: 0 40px 80px -44px rgba(44,39,36,.4); }
.about__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.about__tag { font-size: 13px; font-weight: 500; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; }
.about__tag .em { font-size: 15px; }
@media (max-width: 820px){ .about__grid{grid-template-columns:1fr; gap:36px} .about__media{max-width:420px} }

/* ═══ TESTIMONIO ═══ */
.testi { text-align: center; }
.testi__mark { font-family: var(--font-display); font-size: 80px; line-height: .4; color: var(--lila); }
.testi__text { font-family: var(--font-display); font-weight: 340; font-size: clamp(20px,2.6vw,30px); line-height: 1.4; color: var(--ink); max-width: 40ch; margin: 12px auto 0; }
.testi__by { margin-top: 24px; font-size: 14px; color: var(--ink-soft); }
.testi__by b { color: var(--ink); font-weight: 600; }

/* ═══ CTA FINAL ═══ */
.final { text-align: center; background: var(--paper-2); }
.final__title { font-family: var(--font-display); font-weight: 340; font-size: clamp(34px,5.4vw,68px); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); max-width: 18ch; margin: 0 auto; }
.final__title em { font-style: italic; color: var(--accent); }
.final__sub { font-size: 18px; color: var(--ink-soft); margin: 22px auto 34px; max-width: 40ch; }

/* ═══ FOOTER ═══ */
.footer { background: var(--ink); color: rgba(247,243,236,.72); padding: 64px 0 30px; }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.footer__brand { font-family: var(--font-display); font-size: 26px; color: var(--paper); }
.footer__brand span { font-style: italic; color: var(--lila); }
.footer__tag { font-size: 14px; margin-top: 10px; max-width: 34ch; }
.footer__col h4 { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--amar); margin-bottom: 14px; }
.footer__col a, .footer__col p { display: block; font-size: 14px; line-height: 1.95; }
.footer__col a:hover { color: var(--paper); }
.footer__bottom { margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(247,243,236,.5); }
.footer__note { max-width: 62ch; font-size: 12px; color: rgba(247,243,236,.42); line-height: 1.6; margin-top: 18px; font-style: italic; }