/* ═══════════════════════════════════════════════════════════
   PSICOLOGÍA CLÍNICA — Salomé Argoti
   style.css — Estilos principales + Responsive
   ═══════════════════════════════════════════════════════════ */

/* ─── TOKENS & RESET ─── */
:root {
  --bg:          #0e0e0c;
  --bg-surface:  #141412;
  --bg-raised:   #1a1a17;
  --cream:       #e8e2d9;
  --cream-dim:   #a89f94;
  --cream-mute:  #6b6560;
  --accent:      #c4a46b;
  --accent-dim:  #8a7548;
  --red-mute:    #8b5a5a;
  --line:        rgba(168,159,148,.12);
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', sans-serif;
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --transition: .9s var(--ease-out);
}

*, *::before, *::after {
  margin:0; padding:0; box-sizing:border-box;
}
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ─── NOISE OVERLAY ─── */
body::after {
  content:'';
  position:fixed; inset:0; z-index:999;
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════ */
nav {
  position:fixed; top:0; width:100%; z-index:100;
  padding:0 56px;
  height:68px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:rgba(14,14,12,.75);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:border-color .4s, background .4s;
}

/* Nav scroll shrink */
nav.scrolled {
  background:rgba(14,14,12,.92);
  border-bottom-color:rgba(168,159,148,.18);
}

.nav-logo {
  font-family:var(--font-serif);
  font-size:1.1rem; font-weight:400;
  color:var(--cream);
  text-decoration:none; letter-spacing:.2px;
  flex-shrink:0;
}
.nav-logo em { font-style:italic; color:var(--accent); }

.nav-links {
  display:flex; gap:40px; list-style:none;
}
.nav-links a {
  color:var(--cream-mute);
  font-size:.78rem; font-weight:400;
  text-decoration:none; letter-spacing:.8px;
  text-transform:uppercase;
  transition:color .35s;
  position:relative;
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-4px; left:0;
  width:0; height:1px;
  background:var(--accent);
  transition:width .35s var(--ease-out);
}
.nav-links a:hover { color:var(--cream); }
.nav-links a:hover::after { width:100%; }

/* Nav link activo (JS lo agrega) */
.nav-links a.active { color:var(--cream); }
.nav-links a.active::after { width:100%; }

.nav-cta {
  border:1px solid var(--cream-mute);
  color:var(--cream-dim);
  background:transparent;
  border-radius:3px;
  padding:8px 22px;
  font-size:.75rem; font-weight:400;
  letter-spacing:.7px; text-transform:uppercase;
  cursor:pointer; text-decoration:none;
  transition:border-color .3s, color .3s, background .3s;
  flex-shrink:0;
}
.nav-cta:hover {
  border-color:var(--accent);
  color:var(--accent);
}

/* ─── HAMBURGER (mobile) ─── */
.nav-hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  width:36px; height:36px;
  cursor:pointer;
  gap:5px;
  background:none; border:none;
  padding:4px;
}
.nav-hamburger span {
  display:block;
  width:24px; height:1px;
  background:var(--cream-dim);
  transition:transform .3s, opacity .3s;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ─── Mobile Menu Overlay ─── */
.nav-mobile-overlay {
  position:fixed; inset:0; z-index:99;
  background:rgba(14,14,12,.96);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:32px;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s;
}
.nav-mobile-overlay.open {
  opacity:1;
  pointer-events:all;
}
.nav-mobile-overlay a {
  color:var(--cream-dim);
  font-size:1.1rem; font-weight:300;
  text-decoration:none;
  letter-spacing:1.2px;
  text-transform:uppercase;
  transition:color .3s;
}
.nav-mobile-overlay a:hover { color:var(--accent); }
.nav-mobile-overlay .mobile-cta {
  margin-top:16px;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:12px 32px;
  border-radius:3px;
  font-size:.78rem;
  letter-spacing:.8px;
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 56px 100px;
  position:relative;
}

.hero-illustration {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(680px, 80vw);
  height:min(680px, 80vw);
  opacity:.18;
  pointer-events:none;
  animation:illustrationPulse 8s ease-in-out infinite alternate;
}
@keyframes illustrationPulse {
  0%   { opacity:.14; transform:translate(-50%,-50%) scale(.97); }
  100% { opacity:.22; transform:translate(-50%,-50%) scale(1.02); }
}

.hero-content {
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:end;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}

.hero-left h1 {
  font-family:var(--font-serif);
  font-size:clamp(2.8rem,5vw,4.2rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.5px;
  color:var(--cream);
}
.hero-left h1 em {
  font-style:italic;
  color:var(--accent);
  display:block;
}

.hero-right { padding-bottom:8px; }
.hero-right p {
  font-size:.92rem;
  color:var(--cream-mute);
  line-height:1.85;
  max-width:380px;
  margin-bottom:40px;
}
.hero-right .hero-divider {
  width:36px; height:1px;
  background:var(--accent-dim);
  margin-bottom:28px;
}
.hero-right .hero-meta {
  font-size:.73rem;
  color:var(--cream-mute);
  letter-spacing:.6px;
  text-transform:uppercase;
  display:flex; gap:28px;
  flex-wrap:wrap;
}
.hero-meta span {
  display:flex; align-items:center; gap:8px;
}
.hero-meta .dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--accent);
  animation:dotPulse 2.5s ease-in-out infinite;
}
.hero-meta span:nth-child(2) .dot { animation-delay:.4s; }
.hero-meta span:nth-child(3) .dot { animation-delay:.8s; }
@keyframes dotPulse {
  0%,100% { opacity:.5; transform:scale(.9); }
  50%     { opacity:1;  transform:scale(1.2); }
}

/* ─── Scroll Hint ─── */
.scroll-hint {
  position:absolute;
  bottom:36px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-hint span {
  font-size:.65rem; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--cream-mute);
}
.scroll-hint .arrow {
  width:1px; height:32px;
  background:linear-gradient(180deg, var(--accent), transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:.3; transform:scaleY(.6); }
  50%     { opacity:1;  transform:scaleY(1); }
}

/* ═══════════════════════════════════════════════════════════
   SECTION: PENSAMIENTO (the pause)
   ═══════════════════════════════════════════════════════════ */
.section-pause {
  padding:140px 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border-top:1px solid var(--line);
}

.pause-inner {
  max-width:720px;
  text-align:center;
  position:relative; z-index:2;
}

/* ─── Section numeral ─── */
.section-numeral {
  font-family:var(--font-serif);
  font-size:.75rem;
  color:var(--accent-dim);
  letter-spacing:2px;
  margin-bottom:56px;
  display:flex; align-items:center; justify-content:center; gap:20px;
}
.section-numeral::before,
.section-numeral::after {
  content:'';
  width:48px; height:1px;
  background:var(--accent-dim);
  opacity:.5;
}

.pause-quote {
  font-family:var(--font-serif);
  font-size:clamp(1.65rem,3vw,2.3rem);
  font-weight:400;
  font-style:italic;
  line-height:1.5;
  color:var(--cream);
  margin-bottom:36px;
}
.pause-quote em { color:var(--accent); font-style:italic; }

.pause-note {
  font-size:.84rem;
  color:var(--cream-mute);
  line-height:1.9;
  max-width:540px;
  margin:0 auto;
}

/* Línea decorativa neuron */
.pause-neuron {
  position:absolute;
  top:50%; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--line) 20%, var(--line) 80%, transparent);
  z-index:1;
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════
   SECTION: INTEGRACIÓN (3 pilares)
   ═══════════════════════════════════════════════════════════ */
.section-integration {
  padding:100px 56px;
  border-top:1px solid var(--line);
  background:var(--bg-surface);
}
.integration-header {
  max-width:1100px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:80px;
  flex-wrap:wrap; gap:24px;
}
.integration-header h2 {
  font-family:var(--font-serif);
  font-size:clamp(1.9rem,3.2vw,2.6rem);
  font-weight:400; line-height:1.2;
}
.integration-header h2 em { font-style:italic; color:var(--accent); }
.integration-header p {
  font-size:.84rem;
  color:var(--cream-mute);
  max-width:380px;
  line-height:1.8;
}

.pillars {
  max-width:1100px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
}
.pillar {
  background:var(--bg-surface);
  padding:52px 40px;
  position:relative;
  transition:background .4s;
}
.pillar:hover { background:var(--bg-raised); }

.pillar-svg {
  width:56px; height:56px;
  margin-bottom:28px;
  transition:transform .5s var(--ease-out);
}
.pillar:hover .pillar-svg { transform:scale(1.08); }

.pillar h3 {
  font-family:var(--font-serif);
  font-size:1.25rem; font-weight:400;
  margin-bottom:16px; color:var(--cream);
}
.pillar p {
  font-size:.82rem;
  color:var(--cream-mute);
  line-height:1.85;
}
.pillar .pillar-num {
  position:absolute; top:28px; right:32px;
  font-family:var(--font-serif);
  font-size:2.2rem;
  color:var(--line);
  font-weight:400;
}

/* ═══════════════════════════════════════════════════════════
   SECTION: METODOLOGÍA
   ═══════════════════════════════════════════════════════════ */
.section-method {
  padding:120px 56px;
  border-top:1px solid var(--line);
}
.method-inner {
  max-width:900px; margin:0 auto;
  display:grid;
  grid-template-columns:320px 1fr;
  gap:100px;
  align-items:start;
}
.method-left h2 {
  font-family:var(--font-serif);
  font-size:clamp(1.9rem,3vw,2.5rem);
  font-weight:400; line-height:1.2;
  margin-bottom:20px;
}
.method-left h2 em { font-style:italic; color:var(--accent); }
.method-left p {
  font-size:.83rem;
  color:var(--cream-mute);
  line-height:1.9;
}

.method-steps { display:flex; flex-direction:column; gap:0; }

.method-step {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:28px;
  position:relative;
  padding-bottom:44px;
}
.method-step:last-child { padding-bottom:0; }
.method-step:not(:last-child)::after {
  content:'';
  position:absolute;
  left:23px; top:48px;
  width:1px;
  height:calc(100% - 48px);
  background:linear-gradient(180deg, var(--accent-dim), transparent);
}

.step-marker {
  width:48px; height:48px;
  border:1px solid var(--accent-dim);
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif);
  font-size:.88rem;
  color:var(--accent);
  background:var(--bg);
  position:relative; z-index:1;
  transition:background .3s, border-color .3s, color .3s;
}
.method-step:hover .step-marker {
  background:var(--accent-dim);
  border-color:var(--accent);
  color:var(--bg);
}

.step-body h4 {
  font-size:.88rem; font-weight:500;
  color:var(--cream);
  margin-bottom:6px; margin-top:10px;
  letter-spacing:.2px;
}
.step-body p {
  font-size:.8rem;
  color:var(--cream-mute);
  line-height:1.8;
}

/* ═══════════════════════════════════════════════════════════
   SECTION: REALIDAD
   ═══════════════════════════════════════════════════════════ */
.section-reality {
  border-top:1px solid var(--line);
  background:var(--bg-raised);
  padding:100px 56px;
}
.reality-inner {
  max-width:1000px; margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.reality-left { position:relative; }
.reality-svg-wrap {
  width:100%; max-width:380px;
  margin:0 auto;
}

.reality-right h2 {
  font-family:var(--font-serif);
  font-size:clamp(1.7rem,2.8vw,2.2rem);
  font-weight:400; line-height:1.3;
  margin-bottom:28px;
}
.reality-right h2 em { font-style:italic; color:var(--accent); }
.reality-right p {
  font-size:.83rem;
  color:var(--cream-mute);
  line-height:1.9;
  margin-bottom:16px;
}
.reality-tag {
  display:inline-flex; align-items:center; gap:10px;
  margin-top:20px;
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:3px;
  transition:border-color .3s;
}
.reality-tag:hover { border-color:var(--accent-dim); }
.reality-tag .tag-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--red-mute);
}
.reality-tag span {
  font-size:.75rem;
  color:var(--cream-mute);
  letter-spacing:.4px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION: CONTACTO
   ═══════════════════════════════════════════════════════════ */
.section-contact {
  border-top:1px solid var(--line);
  padding:120px 56px;
  text-align:center;
  position:relative;
}
.section-contact::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse 600px 400px at 50% 50%, rgba(196,164,107,.04) 0%, transparent 70%);
  pointer-events:none;
}
.contact-inner {
  position:relative; z-index:2;
  max-width:560px; margin:0 auto;
}
.contact-inner .section-numeral { margin-bottom:48px; }
.contact-inner h2 {
  font-family:var(--font-serif);
  font-size:clamp(2rem,3.5vw,2.8rem);
  font-weight:400; line-height:1.2;
  margin-bottom:24px;
}
.contact-inner h2 em { font-style:italic; color:var(--accent); }
.contact-inner > p {
  font-size:.86rem;
  color:var(--cream-mute);
  line-height:1.9;
  margin-bottom:44px;
}

.contact-cta {
  display:inline-block;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:14px 40px;
  font-size:.78rem;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:3px;
  transition:background .35s, color .35s, box-shadow .35s;
  position:relative;
  overflow:hidden;
}
.contact-cta::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:translateY(100%);
  transition:transform .35s var(--ease-out);
  z-index:0;
}
.contact-cta:hover::before { transform:translateY(0); }
.contact-cta:hover { color:var(--bg); box-shadow:0 4px 24px rgba(196,164,107,.18); }
.contact-cta span { position:relative; z-index:1; }

.contact-note {
  margin-top:28px;
  font-size:.72rem;
  color:var(--cream-mute);
  opacity:.7;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  border-top:1px solid var(--line);
  padding:44px 56px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap; gap:20px;
}
.footer-left {
  font-size:.72rem;
  color:var(--cream-mute);
}
.footer-left .footer-name {
  font-family:var(--font-serif);
  font-size:.95rem;
  color:var(--cream);
  margin-bottom:4px;
}
.footer-right {
  display:flex; gap:32px;
}
.footer-right a {
  color:var(--cream-mute);
  font-size:.73rem;
  text-decoration:none;
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:color .3s;
  position:relative;
}
.footer-right a::after {
  content:'';
  position:absolute;
  bottom:-3px; left:0;
  width:0; height:1px;
  background:var(--accent);
  transition:width .3s;
}
.footer-right a:hover { color:var(--cream); }
.footer-right a:hover::after { width:100%; }

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════ */
.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--transition), transform var(--transition);
}
.reveal.visible {
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1 { transition-delay:.12s; }
.reveal-delay-2 { transition-delay:.24s; }
.reveal-delay-3 { transition-delay:.36s; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 860px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width:860px) {
  .hero-content { grid-template-columns:1fr; gap:48px; }
  .integration-header { flex-direction:column; align-items:flex-start; }
  .pillars { grid-template-columns:1fr; }
  .method-inner { grid-template-columns:1fr; gap:56px; }
  .reality-inner { grid-template-columns:1fr; }
  .reality-svg-wrap { max-width:260px; }
  nav { padding:0 28px; }
  .nav-links { gap:24px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MÓVIL (≤ 560px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width:560px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .nav-cta  { display:none; }
  .nav-hamburger { display:flex; }

  .hero { padding:0 24px 80px; }
  .hero-left h1 { font-size:clamp(2.2rem,7vw,2.8rem); }

  .section-pause,
  .section-integration,
  .section-method,
  .section-reality,
  .section-contact { padding:80px 24px; }

  .pillar { padding:40px 24px; }

  footer { padding:36px 24px; flex-direction:column; align-items:flex-start; }
  .footer-right { gap:20px; }

  .scroll-hint { bottom:24px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — EXTRA SMALL (≤ 360px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width:360px) {
  .hero-left h1 { font-size:2rem; }
  .pause-quote { font-size:1.4rem; }
  .hero-meta { gap:16px; font-size:.68rem; }
}