/* ============================================================
   enAlma · /psicologia/ — hoja propia de la página
   Asimetría alta · movimiento solo en transform/opacity
   ============================================================ */
:root{ --ez:cubic-bezier(.16,1,.3,1); }

/* línea de progreso de lectura */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:140;background:transparent;}
.prog i{display:block;height:100%;width:100%;background:var(--teja);
  transform:scaleX(0);transform-origin:left;will-change:transform;}

/* ============================================================
   A · HERO — partido, nada centrado. Índice vivo a la derecha.
   ============================================================ */
.ph{position:relative;background:var(--bg);overflow:hidden;
  padding-block:clamp(112px,13vw,150px) clamp(40px,5vw,70px);}
.ph__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:end;}

.ph__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:clamp(20px,2.4vw,30px);}
.ph__eyebrow span{font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);}
.ph__eyebrow i{flex:1;height:1px;background:var(--border);max-width:120px;
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ez) .2s;}
.ph.is-in .ph__eyebrow i{transform:scaleX(1);}

/* h1 que no grita: peso y color hacen la jerarquía */
.ph h1{font-family:var(--display);font-weight:400;
  font-size:clamp(44px,6.6vw,104px);line-height:.94;letter-spacing:-.028em;
  color:var(--ink);max-width:11ch;}
.ph h1 em{font-style:italic;color:var(--teja);}
.ph h1 .ln{display:block;overflow:hidden;}
.ph h1 .ln>span{display:block;transform:translateY(104%);
  transition:transform 1.05s var(--ez);}
.ph.is-in h1 .ln>span{transform:none;}
.ph h1 .ln:nth-child(2)>span{transition-delay:.1s}
.ph h1 .ln:nth-child(3)>span{transition-delay:.2s}

.ph__meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(24px,3vw,38px);
  opacity:0;transform:translateY(16px);transition:opacity .8s var(--ez) .45s,transform .9s var(--ez) .45s;}
.ph.is-in .ph__meta{opacity:1;transform:none;}
.ph__meta div{display:flex;align-items:baseline;gap:9px;}
.ph__meta b{font-family:var(--display);font-size:clamp(26px,2.6vw,38px);font-weight:400;
  line-height:1;color:var(--ink);}
.ph__meta span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}

/* visor: la imagen cambia según el motivo que tocas en el índice */
.ph__viewer{position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/4.9;background:var(--bg-deep);box-shadow:var(--shadow-float);
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .9s var(--ez) .25s,transform 1s var(--ez) .25s;}
.ph.is-in .ph__viewer{opacity:1;transform:none;}
.ph__viewer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .7s var(--ez),transform 1.4s var(--ez);}
.ph__viewer img.on{opacity:1;transform:scale(1);}
.ph__viewer::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(40,34,26,.55) 0%,rgba(40,34,26,0) 55%);}
.ph__cap em{display:block;transition:opacity .3s var(--ez);}
.ph__cap.fade em{opacity:0;}
.ph__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2vw,26px);
  font-family:var(--display);font-style:italic;font-size:clamp(19px,1.8vw,26px);
  line-height:1.15;color:var(--crema);}
.ph__cap b{display:block;font-family:var(--body);font-style:normal;font-size:10.5px;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(235,233,223,.62);margin-bottom:9px;}

/* ============================================================
   B · MARQUESINA — banda cinética de motivos
   ============================================================ */
.mq{position:relative;overflow:hidden;padding-block:clamp(22px,2.6vw,34px);
  border-block:1px solid var(--border);background:var(--surface);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.mq__track{display:flex;width:max-content;will-change:transform;}
.mq__track>span{display:flex;align-items:center;gap:clamp(26px,3.4vw,54px);
  padding-right:clamp(26px,3.4vw,54px);
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(26px,3.6vw,52px);line-height:1;color:var(--ink);white-space:nowrap;}
.mq__track i{width:7px;height:7px;border-radius:50%;background:var(--teja);flex:none;opacity:.55;}

/* ============================================================
   C · RAÍL DE MOTIVOS — arrastrable, con snap. No es una rejilla.
   ============================================================ */
.rail{padding-block:clamp(66px,8vw,110px) clamp(40px,5vw,64px);}
.rail__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;
  margin-bottom:clamp(26px,3vw,42px);}
.rail__head h2{font-size:clamp(30px,4.2vw,62px);max-width:13ch;}
.rail__nav{display:flex;gap:10px;}
.rail__nav button{width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--ink);
  display:grid;place-items:center;
  transition:background .4s var(--ez),color .4s var(--ez),border-color .4s var(--ez),transform .4s var(--ez);}
.rail__nav button:hover:not(:disabled){background:var(--olive);color:var(--lima);border-color:var(--olive);}
.rail__nav button:active{transform:scale(.94);}
.rail__nav button:disabled{opacity:.3;cursor:default;}
.rail__nav svg{width:15px;height:15px;}

.rail__strip{
  --rgap:clamp(12px,1.3vw,20px);
  display:flex;gap:var(--rgap);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none;cursor:grab;
}
.rail__strip::-webkit-scrollbar{display:none;}
/* espaciadores: alinean la 1ª y la última tarjeta con .wrap sin usar 100vw */
.rail__pad{flex:0 0 max(calc(var(--gutter) - var(--rgap)),calc((100% - var(--maxw))/2 + var(--gutter) - var(--rgap)));
  scroll-snap-align:start;}  /* sin esto el snap se come el espaciador */
.rail__strip.drag{cursor:grabbing;scroll-snap-type:none;}
.rail__strip.drag *{pointer-events:none;}

.mot{position:relative;flex:0 0 clamp(232px,25vw,320px);scroll-snap-align:start;
  border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/5;background:var(--bg-deep);
  display:flex;align-items:flex-end;isolation:isolate;
  transition:transform .7s var(--ez);}
.mot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.3s var(--ez),filter .6s var(--ez);}
.mot::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(40,34,26,.92) 0%,rgba(40,34,26,.55) 34%,rgba(40,34,26,.12) 70%,transparent 100%);
  transition:opacity .5s var(--ez);}
.mot:hover{transform:translateY(-7px);}
.mot:hover img{transform:scale(1.07);filter:saturate(1.05);}
.mot__in{position:relative;padding:clamp(18px,1.9vw,24px);width:100%;color:var(--crema);}
.mot__n{font-size:10.5px;font-weight:500;letter-spacing:.2em;color:rgba(235,233,223,.55);}
.mot h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2vw,28px);
  line-height:1.08;margin:10px 0 0;}
.mot p{font-size:13.5px;line-height:1.45;color:rgba(235,233,223,.82);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--ez),opacity .45s var(--ez),margin .6s var(--ez);}
.mot:hover p,.mot:focus-visible p{max-height:88px;opacity:1;margin-top:10px;}

.rail__bar{height:2px;background:var(--border);margin-top:clamp(22px,2.4vw,32px);
  border-radius:2px;overflow:hidden;}
.rail__bar i{display:block;height:100%;background:var(--olive);
  transform-origin:left;will-change:transform;}

/* ============================================================
   D · PILA ADHESIVA — cómo trabajamos, sin párrafos
   ============================================================ */
.stack{padding-block:clamp(56px,7vw,96px) clamp(80px,10vw,140px);}
.stack__head{margin-bottom:clamp(34px,4vw,58px);}
.stack__head h2{font-size:clamp(30px,4.2vw,62px);max-width:16ch;}  /* ch en Cormorant, no en el padre */
.stk{position:sticky;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--border);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,2.6vw,40px);
  align-items:center;padding:clamp(22px,2.8vw,40px);
  box-shadow:0 -18px 40px -30px rgba(48,38,28,.5);}
.stk{max-width:min(100%,940px);min-height:clamp(190px,20vw,248px);}
.stk--1{top:100px;}
.stk--2{top:124px;margin-left:auto;margin-right:0;}
.stk--3{top:148px;margin-left:clamp(0px,8vw,150px);}
/* separación generosa: es el recorrido de scroll que hace visible el apilado */
.stk + .stk{margin-top:clamp(48px,9vw,130px);}
.stk__n{font-family:var(--display);font-size:clamp(44px,5.4vw,84px);line-height:.8;
  color:var(--teja);opacity:.9;}
.stk h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.8vw,40px);
  line-height:1.05;margin-bottom:8px;}
.stk p{font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:46ch;}
.stk__t{font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap;}

/* ============================================================
   E · PERINATAL — partido, imagen a sangre por un lado
   ============================================================ */
.peri{position:relative;background:var(--olive-deep);color:var(--crema);overflow:hidden;}
.peri__grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch;}
.peri__media{position:relative;min-height:clamp(360px,44vw,620px);overflow:hidden;}
.peri__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;}
.peri__body > *{align-self:flex-start;}
.peri__body{padding:clamp(48px,6vw,96px) clamp(24px,4vw,72px);
  display:flex;flex-direction:column;justify-content:center;}
.peri__body h2{font-size:clamp(28px,3.8vw,54px);color:var(--crema);margin:18px 0 26px;max-width:15ch;}
.peri__list{list-style:none;border-top:1px solid rgba(235,233,223,.2);}
.peri__list li{border-bottom:1px solid rgba(235,233,223,.2);
  padding:clamp(13px,1.5vw,18px) 0;display:grid;grid-template-columns:auto 1fr;
  gap:16px;align-items:baseline;
  transition:padding-left .5s var(--ez);}
.peri__list li:hover{padding-left:10px;}
.peri__list b{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.8vw,25px);}
.peri__list span{font-size:13.5px;line-height:1.45;color:rgba(235,233,223,.66);}

/* ============================================================
   F · CIERRE — botón magnético
   ============================================================ */
.close-cta{padding-block:clamp(74px,9vw,124px);text-align:left;}
.close-cta h2{font-size:clamp(34px,5.4vw,84px);max-width:14ch;line-height:.98;}
.magnet{display:inline-block;will-change:transform;}

/* ============================================================
   G · RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .ph__grid{grid-template-columns:1fr;gap:clamp(30px,4vw,44px);}
  .ph__viewer{aspect-ratio:16/11;}
  .peri__grid{grid-template-columns:1fr;}
  .peri__media{min-height:clamp(280px,52vw,380px);}
  .stk{grid-template-columns:auto 1fr;}
  .stk__t{display:none;}
}
@media (max-width:680px){
  .ph{padding-block:clamp(104px,26vw,124px) clamp(30px,5vw,44px);}
  .ph h1{max-width:none;}
  .ph__meta{gap:14px 20px;}
  .peri__list li{grid-template-columns:1fr;gap:5px;}
  .rail__head{grid-template-columns:1fr;}
  .rail__nav{display:none;}
  .mot{flex:0 0 78vw;}
  .mot p{max-height:88px;opacity:1;margin-top:10px;}   /* sin hover: siempre visible */
  .stk{position:static;grid-template-columns:auto 1fr;padding:22px;
    max-width:none;min-height:0;margin-left:0 !important;margin-right:0 !important;}
  .stk + .stk{margin-top:12px;}
  .close-cta h2{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  .mq__track{transform:none !important;}
  .ph h1 .ln>span,.ph__meta,.ph__viewer{opacity:1 !important;transform:none !important;}
  .prog i{display:none;}
}

/* ============================================================
   H · GRÁFICOS AUXILIARES DE MARCA (manual Entropía del Alma)
   Los rellenos (luna, cuarzo) leen pequeños; los botánicos de
   línea fina solo funcionan grandes → marca de agua.
   ============================================================ */

/* separador de la marquesina: luna en vez del punto */
.mq__track i{
  width:clamp(20px,2vw,28px);height:clamp(20px,2vw,28px);border-radius:0;
  background:var(--teja);opacity:.55;
  -webkit-mask:url(ea-luna.png) center/contain no-repeat;
  mask:url(ea-luna.png) center/contain no-repeat;
}

/* botánico grande en la esquina de cada tarjeta de la pila */
.stk{position:sticky;overflow:hidden;}
.stk__bot{
  position:absolute;right:-16px;top:-22px;
  width:clamp(120px,13vw,178px);height:clamp(120px,13vw,178px);
  background:var(--salvia);opacity:.15;pointer-events:none;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:opacity .6s var(--ez),transform .9s var(--ez);
}
.stk:hover .stk__bot{opacity:.26;transform:rotate(-5deg) scale(1.05);}

/* cierre: fases lunares como ancla gráfica */
.close-cta{position:relative;overflow:hidden;}
.close-cta__lunas{
  position:absolute;right:calc(var(--gutter) * -.4);top:50%;translate:0 -50%;
  width:clamp(190px,26vw,360px);height:clamp(190px,26vw,360px);
  background:var(--olive);opacity:.1;pointer-events:none;
  -webkit-mask:url(ea-lunas.png) center/contain no-repeat;
  mask:url(ea-lunas.png) center/contain no-repeat;
  animation:girar 90s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg);}}
.close-cta .wrap{position:relative;z-index:1;}

/* cuarzo junto al eyebrow del hero */
.ph__eyebrow b{
  display:block;width:15px;height:15px;flex:none;background:var(--teja);opacity:.65;
  -webkit-mask:url(ea-cuarzo.png) center/contain no-repeat;
  mask:url(ea-cuarzo.png) center/contain no-repeat;
}

@media (max-width:860px){
  .close-cta__lunas{width:clamp(150px,44vw,220px);right:-14%;opacity:.08;}
  .stk__bot{width:110px;height:110px;right:-14px;top:-18px;}
}
@media (prefers-reduced-motion:reduce){ .close-cta__lunas{animation:none;} }

/* ============================================================
   I · CASO CON NOMBRE — recurso propio de la clienta
   ("Esta es la historia de Susana")
   ============================================================ */
.caso{padding-block:clamp(60px,7.5vw,104px);}
.caso__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,76px);align-items:start;}
.caso__media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
  background:var(--bg-deep);box-shadow:var(--shadow-soft);}
.caso__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ez);}
.caso:hover .caso__media img{transform:scale(1.04);}
.caso__body h2{font-size:clamp(28px,3.6vw,52px);margin:16px 0 clamp(24px,3vw,34px);max-width:15ch;}
.caso__quote{
  position:relative;border-left:2px solid var(--teja);
  padding:4px 0 4px clamp(18px,2.2vw,30px);margin-bottom:clamp(24px,3vw,34px);
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(20px,2.1vw,30px);line-height:1.28;color:var(--ink);max-width:34ch;
}
.caso__body p{color:var(--ink-soft);max-width:52ch;margin-bottom:14px;font-size:15px;line-height:1.62;}
.caso__body p b{color:var(--ink);font-weight:400;}

/* ============================================================
   J · MITOS — "no es… ni es… es"
   El tachado se dibuja al entrar en pantalla.
   ============================================================ */
.mitos{position:relative;overflow:hidden;background:var(--olive-deep);color:var(--crema);
  padding-block:clamp(70px,9vw,124px);}
.mitos__bot{position:absolute;left:-70px;bottom:-60px;width:clamp(200px,26vw,360px);
  height:clamp(200px,26vw,360px);background:var(--lima);opacity:.08;pointer-events:none;
  -webkit-mask:url(ea-rama.png) center/contain no-repeat;
  mask:url(ea-rama.png) center/contain no-repeat;}
.mitos .wrap{position:relative;z-index:1;}
.mitos__head{margin-bottom:clamp(30px,3.6vw,48px);}
.mitos__head h2{font-size:clamp(28px,3.8vw,56px);color:var(--crema);max-width:15ch;}  /* ch en Cormorant */
.mitos__list{list-style:none;display:grid;gap:2px;}
.mitos__list li{
  position:relative;display:inline-block;width:fit-content;
  font-family:var(--display);font-weight:300;
  font-size:clamp(21px,2.6vw,38px);line-height:1.3;
  color:rgba(235,233,223,.62);padding:2px 2px;
}
.mitos__list li::after{
  content:'';position:absolute;left:0;right:0;top:52%;height:1.5px;background:var(--teja);
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ez);
}
.mitos__list.in li::after{transform:scaleX(1);}
.mitos__list.in li:nth-child(2)::after{transition-delay:.1s}
.mitos__list.in li:nth-child(3)::after{transition-delay:.2s}
.mitos__list.in li:nth-child(4)::after{transition-delay:.3s}
.mitos__list.in li:nth-child(5)::after{transition-delay:.4s}
.mitos__list.in li:nth-child(6)::after{transition-delay:.5s}
.mitos__verdad{
  margin-top:clamp(28px,3.4vw,44px);font-family:var(--display);font-style:italic;
  font-size:clamp(24px,3vw,44px);line-height:1.18;color:var(--lima);max-width:22ch;
}

@media (max-width:1024px){ .caso__grid{grid-template-columns:1fr;} .caso__media{aspect-ratio:16/10;} }
@media (max-width:680px){ .caso__body h2,.mitos__head{max-width:none;} }
@media (prefers-reduced-motion:reduce){ .mitos__list li::after{transform:scaleX(1);} }

/* entradilla del hero: lleva la keyword y su "no es… es" */
.ph__lead{
  max-width:44ch;margin-top:clamp(20px,2.2vw,28px);
  font-size:var(--t-lead);font-weight:300;line-height:1.48;color:var(--ink-soft);
  opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ez) .38s,transform .9s var(--ez) .38s;
}
.ph.is-in .ph__lead{opacity:1;transform:none;}
.ph__lead b{color:var(--ink);font-weight:400;}
@media (max-width:680px){ .ph__lead{max-width:none;font-size:16px;} }

/* 12-oct-2026 · letra más grande en escritorio (feedback clienta) */
@media (min-width:1024px){
  .mot p{font-size:15.5px;}
  .stk p{font-size:17px;}
  .peri__list span{font-size:15px;}
  .caso__body p{font-size:17px;}
}