/* ============================================================
   INVERSIÓN · 03 PARA TI — «postales sobre el horizonte»
   Prefijo pt-. Modos (los pone parati.js en #para-ti):
     (sin clase)  sin JS / ?reduce → rejilla 2×2 (apiladas en celular), marea quieta
     .pt--desk    ≥900px: 4 postales colgadas del horizonte, una activa
     .pt--mob     <900px: carrusel con la siguiente asomando
   ============================================================ */
#para-ti{--hy:0px;--pt-gap:clamp(14px,2vw,30px);--pt-r:20px;
  padding-block:clamp(84px,11vh,150px) clamp(84px,12vh,160px);overflow:clip;isolation:isolate;
  background:linear-gradient(180deg,var(--ink) 0%,#060C15 40%,var(--ink) 100%)}

/* ---------- Cielo, resplandor del ocaso y mar (todo decorativo) ---------- */
#para-ti .pt-sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
#para-ti .pt-glow{position:absolute;left:-10%;right:-10%;top:calc(var(--hy) - 30vh);height:60vh;
  background:radial-gradient(46% 50% at 50% 50%,rgba(216,166,70,.18) 0%,rgba(167,121,39,.07) 40%,rgba(5,9,15,0) 70%)}
#para-ti .pt-sea{position:absolute;left:0;right:0;top:var(--hy);bottom:0;
  background:
    repeating-linear-gradient(180deg,rgba(244,213,138,.05) 0 1px,transparent 1px 22px),
    linear-gradient(180deg,rgba(16,39,58,.55) 0%,rgba(6,26,43,.35) 30%,rgba(5,9,15,0) 75%);
  -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 40%,transparent 85%);mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 40%,transparent 85%)}

/* ---------- Encabezado ---------- */
#para-ti .pt-head{max-width:min(980px,100%);margin-bottom:clamp(40px,7vh,84px)}
#para-ti.pt--desk .pt-head{max-width:calc(100% - 300px)}
#para-ti .pt-title{text-wrap:balance}

/* ---------- Escenario ---------- */
#para-ti .pt-stage{position:relative}
#para-ti .pt-horizon{display:none}
#para-ti .pt-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pt-gap)}
#para-ti .pt-card{position:relative;min-width:0}
#para-ti .pt-thread{display:none}

/* ---------- Postal ---------- */
#para-ti .pt-frame{position:relative;height:100%;min-height:clamp(440px,64vh,620px);border-radius:var(--pt-r);overflow:hidden;
  background:var(--ink-2);border:1px solid var(--hair);isolation:isolate;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75)}
#para-ti .pt-media,#para-ti .pt-media img,#para-ti .pt-vid{position:absolute;inset:0;width:100%;height:100%}
#para-ti .pt-media img,#para-ti .pt-vid{object-fit:cover;object-position:50% 28%}
#para-ti .pt-vid{opacity:0;transition:opacity 1.2s var(--ease)}
#para-ti .pt-vid.is-playing{opacity:1}
#para-ti .pt-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,15,.34) 0%,rgba(5,9,15,0) 18%,rgba(5,9,15,0) 34%,rgba(5,9,15,.55) 58%,rgba(5,9,15,.9) 100%)}

/* Marea de oro: sube por la base hasta 18 %, borde ondulado, se queda quieta detrás del texto */
#para-ti .pt-tide{position:absolute;left:0;right:0;bottom:0;height:18%;overflow:visible;pointer-events:none}
#para-ti .pt-tide__in{position:absolute;inset:0;transform:translateY(0)}
#para-ti .pt-tide__w{position:absolute;left:0;bottom:calc(100% - 1px);width:200%;max-width:none;height:clamp(12px,1.6vw,20px);transform:translateX(-25%);overflow:visible;filter:drop-shadow(0 0 3px rgba(244,213,138,.45))}
#para-ti .pt-tide__f{fill:rgba(230,188,99,.5)}
#para-ti .pt-tide__e{fill:none;stroke:#FFF0C4;stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.6}
/* en vivo la cresta queda detrás del párrafo: sin trazo ni brillo (no debe leerse como tachado); solo el relleno */
#para-ti.pt--desk .pt-tide__e,#para-ti.pt--mob .pt-tide__e{display:none}
#para-ti.pt--desk .pt-tide__w,#para-ti.pt--mob .pt-tide__w{filter:none}
#para-ti.pt--desk .pt-tide__f,#para-ti.pt--mob .pt-tide__f{fill:rgba(230,188,99,.06)}
#para-ti.pt--desk .pt-tide__b,#para-ti.pt--mob .pt-tide__b{background:linear-gradient(180deg,rgba(230,188,99,.06) 0%,rgba(216,166,70,.34) 50%,rgba(167,121,39,.5) 100%)}
#para-ti .pt-tide__b{position:absolute;inset:0;background:linear-gradient(180deg,rgba(230,188,99,.5) 0%,rgba(216,166,70,.48) 35%,rgba(167,121,39,.42) 100%)}
#para-ti .pt-tide__b:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,246,216,.35) 48%,transparent 66%);background-size:250% 100%;background-position:120% 0}
/* velo tinta encima del oro: el texto crema conserva AA sobre la marea */
#para-ti .pt-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,15,0) 46%,rgba(5,9,15,.5) 68%,rgba(5,9,15,.72) 82%,rgba(5,9,15,.8) 100%)}

#para-ti .pt-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;gap:10px}
#para-ti .pt-n{font-size:.82rem;letter-spacing:.16em;color:var(--gold-2);text-shadow:0 1px 10px rgba(5,9,15,.8)}
#para-ti .pt-h{margin:0;font:600 clamp(1.4rem,1.9vw,1.85rem)/1.08 var(--serif);letter-spacing:-.015em;color:var(--cream);text-wrap:balance;text-shadow:0 2px 18px rgba(5,9,15,.85)}
#para-ti .pt-tab{all:unset;cursor:pointer;display:inline;border-radius:6px}
#para-ti .pt-tab:after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--pt-r)}   /* toda la postal es el objetivo */
#para-ti .pt-tab:focus-visible{outline:none}
#para-ti .pt-frame:has(.pt-tab:focus-visible){outline:2px solid var(--gold-2);outline-offset:4px}
#para-ti .pt-more{display:grid;grid-template-rows:1fr}
#para-ti .pt-more>p{min-height:0;overflow:hidden}
#para-ti .pt-text{margin:0;font-size:max(15px,.98rem);line-height:1.55;color:var(--cream);text-shadow:0 1px 12px rgba(5,9,15,.9)}

/* ---------- Controles (los muestra el JS) ---------- */
#para-ti .pt-ctl{display:flex;align-items:center;gap:10px;margin-top:clamp(26px,4vh,44px)}
#para-ti .pt-ctl[hidden]{display:none}
#para-ti .pt-arrow,#para-ti .pt-pause{position:relative;flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:rgba(5,9,15,.6);
  color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:border-color .3s,color .3s,background-color .3s}
#para-ti .pt-arrow svg{width:20px;height:20px}
#para-ti .pt-arrow:hover,#para-ti .pt-pause:hover{border-color:var(--gold-2);color:var(--gold-2)}
#para-ti .pt-pause svg{width:16px;height:16px;grid-area:1/1}
#para-ti .pt-pause .pt-pause__r{display:none}
#para-ti .pt-pause[aria-pressed=true] .pt-pause__p{display:none}
#para-ti .pt-pause[aria-pressed=true] .pt-pause__r{display:block}
#para-ti .pt-pause__ring{position:absolute;inset:-1px;width:48px!important;height:48px!important;transform:rotate(-90deg);pointer-events:none}
#para-ti .pt-pause__ring circle{fill:none;stroke:var(--gold-2);stroke-width:1.5;stroke-dasharray:126;stroke-dashoffset:126}
#para-ti .pt-count{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;color:var(--cream-2);min-width:84px}
#para-ti .pt-count b{color:var(--gold-2);font-weight:800}
#para-ti .pt-count i{width:22px;height:1px;background:var(--line-2)}
#para-ti .pt-dots{display:flex}
#para-ti .pt-dot{width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
#para-ti .pt-dot i{width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:width .5s var(--ease),background-color .4s}
#para-ti .pt-dot[aria-current=true] i{width:26px;border-radius:5px;background:var(--gold-grad)}
#para-ti .pt-hint{display:none;align-items:center;gap:8px;font:600 .8rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);transition:opacity .6s}
#para-ti .pt-hint svg{width:20px;height:20px}
#para-ti .pt-hint.is-gone{opacity:0}

/* ============================================================
   ESCRITORIO — postales colgadas del horizonte
   ============================================================ */
#para-ti.pt--desk{--hang:5.5vh;--ts:.314}            /* --ts = (1.06·hang − 4vh) / (1.06·hang) */
#para-ti.pt--desk .pt-stage{padding-top:var(--hang)}
#para-ti.pt--desk .pt-horizon{display:block;position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:1px;pointer-events:none}
#para-ti.pt--desk .pt-horizon:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(216,166,70,0) 0%,rgba(216,166,70,.55) 18%,#F4D58A 50%,rgba(216,166,70,.55) 82%,rgba(216,166,70,0) 100%);
  transform-origin:left;transform:scaleX(var(--hz,1))}
#para-ti.pt--desk .pt-horizon i{position:absolute;left:50%;top:-14px;width:46vw;height:28px;margin-left:-23vw;
  background:radial-gradient(50% 50% at 50% 50%,rgba(244,213,138,.22),rgba(244,213,138,0) 70%);opacity:var(--hz,1)}
#para-ti.pt--desk .pt-row{display:flex;justify-content:space-between;gap:var(--pt-gap);align-items:flex-start}
#para-ti.pt--desk .pt-card{--w:calc((100% - 3 * var(--pt-gap)) / 4);flex:0 0 var(--w);
  height:min(60vh,calc((min(100vw,var(--max)) - 2 * var(--gut) - 3 * var(--pt-gap)) / 4 * 1.9));
  transform-origin:50% calc(-1 * var(--hang));transform:rotate(var(--rot,0deg));
  transition:transform 1.1s var(--ease)}
/* abanico: la base de 01 y 02 se abre a la izquierda, la de 03 y 04 a la derecha; vecinas nunca se cruzan */
#para-ti.pt--desk .pt-card:nth-child(1){--rot:3.4deg}
#para-ti.pt--desk .pt-card:nth-child(2){--rot:2deg}
#para-ti.pt--desk .pt-card:nth-child(3){--rot:-2deg}
#para-ti.pt--desk .pt-card:nth-child(4){--rot:-3.4deg}
#para-ti.pt--desk .pt-thread{display:block;position:absolute;left:50%;bottom:100%;width:1px;height:var(--hang);margin-left:-.5px;
  background:linear-gradient(180deg,rgba(244,213,138,.9),rgba(216,166,70,.25));transform-origin:bottom;transition:transform 1.1s var(--ease),opacity .6s}
#para-ti.pt--desk .pt-thread:before{content:"";position:absolute;left:-2.5px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 12px rgba(244,213,138,.8)}
#para-ti.pt--desk .pt-frame{min-height:0;height:100%;transition:box-shadow 1.1s var(--ease),border-color .6s}
/* las inactivas al 55 %: solo la imagen se apaga (velo tinta); número y título quedan al 100 % */
#para-ti.pt--desk .pt-shade:after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.55;transition:opacity .8s var(--ease)}
#para-ti.pt--desk .pt-card:hover .pt-shade:after{opacity:.3}
#para-ti.pt--desk .pt-card.is-on .pt-shade:after{opacity:0}
#para-ti.pt--desk .pt-card:not(.is-on) .pt-n{color:var(--gold-2);text-shadow:0 1px 8px rgba(5,9,15,.95),0 0 2px rgba(5,9,15,.9)}
#para-ti.pt--desk .pt-card.is-on{transform:translateY(-4vh) scale(1.06);opacity:1;z-index:3}
#para-ti.pt--desk .pt-card.is-on .pt-thread{transform:scaleY(var(--ts))}
#para-ti.pt--desk .pt-card.is-on .pt-frame{border-color:rgba(244,213,138,.7);
  box-shadow:0 0 0 1px rgba(244,213,138,.25),0 60px 90px -30px rgba(0,0,0,.9),0 40px 120px -40px rgba(216,166,70,.35)}
#para-ti.pt--desk .pt-more{grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease)}
#para-ti.pt--desk .pt-text{visibility:hidden;opacity:0;transition:opacity .5s,visibility 0s .5s}
#para-ti.pt--desk .pt-card.is-on .pt-more{grid-template-rows:1fr}
#para-ti.pt--desk .pt-card.is-on .pt-text{visibility:visible;opacity:1;transition:opacity .6s .15s,visibility 0s}
#para-ti.pt--desk .pt-text{font-size:clamp(.9rem,1vw,1rem)}
#para-ti.pt--desk .pt-h{font-size:clamp(1.25rem,1.65vw,1.7rem)}
/* marea: abajo en reposo, sube en la activa */
#para-ti.pt--desk .pt-tide__in,#para-ti.pt--mob .pt-tide__in{transform:translateY(calc(100% + 24px));transition:transform 1.1s var(--ease-io)}
#para-ti.pt--desk .pt-tide__w,#para-ti.pt--mob .pt-tide__w{transform:translateX(0);transition:transform 2.4s var(--ease)}
#para-ti.pt--desk .pt-card.is-on .pt-tide__in,#para-ti.pt--mob .pt-card.is-on .pt-tide__in{transform:translateY(0);transition-delay:.25s}
#para-ti.pt--desk .pt-card.is-on .pt-tide__w,#para-ti.pt--mob .pt-card.is-on .pt-tide__w{transform:translateX(-50%)}
#para-ti.pt--desk .pt-card.is-on .pt-tide__b:after,#para-ti.pt--mob .pt-card.is-on .pt-tide__b:after{transition:background-position 2.6s var(--ease) .9s;background-position:-60% 0}
#para-ti.pt--desk .pt-ctl{position:absolute;right:clamp(0px,4.5vw,70px);bottom:calc(100% + clamp(28px,5vh,56px));margin:0;justify-content:flex-end}
#para-ti.pt--desk .pt-dots{display:none}
/* laptops bajas (≤ 800 px de alto): encabezado + horizonte + postal caben en una pantalla con el h2 bajo la barra */
@media (max-height:800px){
  #para-ti.pt--desk{--hang:4.5vh;--ts:.161;padding-top:clamp(56px,8vh,72px)}
  #para-ti.pt--desk .pt-head{margin-bottom:clamp(18px,3vh,26px)}
  #para-ti.pt--desk .pt-card{height:min(60vh,max(52vh,calc(100svh - var(--pt-hh,80px) - 160px - var(--hang))),calc((min(100vw,var(--max)) - 2 * var(--gut) - 3 * var(--pt-gap)) / 4 * 1.9))}
  #para-ti.pt--desk .pt-text{font-size:.9rem;line-height:1.48}
  #para-ti.pt--desk .pt-body{padding:18px;gap:8px}
}

/* ============================================================
   CELULAR — carrusel (la siguiente asoma ≥ 12 %)
   ============================================================ */
#para-ti.pt--mob .pt-row{display:flex;gap:10px;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:6px var(--gut) 10px;margin-inline:calc(-1 * var(--gut));
  overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#para-ti.pt--mob .pt-row::-webkit-scrollbar{display:none}
#para-ti.pt--mob .pt-card{flex:0 0 min(80vw,440px);scroll-snap-align:start;scroll-snap-stop:always;display:flex}
#para-ti.pt--mob .pt-frame{flex:1;min-height:62svh;transition:border-color .5s}
#para-ti.pt--mob .pt-card.is-on .pt-frame{border-color:rgba(244,213,138,.6)}
/* celular: la foto/video arriba, COMPLETA y sin nada encima; número, título y texto debajo (regla del dueño) */
#para-ti.pt--mob .pt-frame{display:flex;flex-direction:column;min-height:0}
#para-ti.pt--mob .pt-frame:before{content:"";display:block;flex:none;width:100%;aspect-ratio:3/4}
#para-ti.pt--mob .pt-media,#para-ti.pt--mob .pt-vid{inset:0 0 auto 0;height:auto;aspect-ratio:3/4}
#para-ti.pt--mob .pt-media img{position:absolute;inset:0;width:100%;height:100%}
#para-ti.pt--mob .pt-shade{inset:0 0 auto 0;height:auto;aspect-ratio:3/4;
  background:linear-gradient(180deg,rgba(5,9,15,0) 82%,rgba(8,18,28,.85) 100%)}
#para-ti.pt--mob .pt-veil{top:auto;height:20%;background:rgba(5,9,15,.55)}
#para-ti.pt--mob .pt-body{position:relative;left:auto;right:auto;bottom:auto;flex:1;padding:14px 18px 22px;gap:8px}
#para-ti.pt--mob .pt-h,#para-ti.pt--mob .pt-text,#para-ti.pt--mob .pt-n{text-shadow:none}
/* una sola fila:  ‹  [contador sobre los puntos]  ›  ⏸ */
#para-ti.pt--mob .pt-ctl{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 40px;grid-template-areas:"prev count next pause" "prev dots next pause";align-items:center;row-gap:0;column-gap:4px;margin-top:10px}
#para-ti.pt--mob .pt-arrow{width:44px;height:44px}
#para-ti.pt--mob .pt-count{grid-area:count;justify-self:center;min-width:0;font-size:.85rem;line-height:1}
#para-ti.pt--mob .pt-dots{grid-area:dots;justify-content:center}
#para-ti.pt--mob .pt-prev{grid-area:prev}
#para-ti.pt--mob .pt-next{grid-area:next}
#para-ti.pt--mob .pt-pause{grid-area:pause;width:40px;height:40px;justify-self:end;border-color:var(--line)}
#para-ti.pt--mob .pt-pause__ring{width:40px!important;height:40px!important}
#para-ti.pt--mob .pt-pause:before{content:"";position:absolute;inset:-4px}   /* objetivo táctil 48 px */
/* pista «Desliza»: pastilla sobre la parte alta de la postal activa, junto a la que asoma */
#para-ti.pt--mob .pt-hint{display:inline-flex;position:absolute;z-index:4;top:18px;right:calc(20vw - 2 * var(--gut) + 14px);
  padding:8px 12px;border-radius:999px;background:rgba(5,9,15,.72);border:1px solid rgba(244,213,138,.45);pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#para-ti.pt--mob .pt-hint:not(.is-on){opacity:0}
#para-ti.pt--mob .pt-hint.is-gone{opacity:0}
@media (max-height:700px){
  #para-ti.pt--mob{padding-top:56px}
  #para-ti.pt--mob .pt-head{margin-bottom:22px}
  #para-ti.pt--mob .pt-frame{min-height:60svh}
  #para-ti.pt--mob .pt-body{padding:16px 16px 18px;gap:6px}
  #para-ti.pt--mob .pt-text{line-height:1.45}
  #para-ti.pt--mob .pt-h{font-size:1.35rem}
}

/* ============================================================
   Estático (sin JS / ?reduce): rejilla 2×2, apiladas en celular
   ============================================================ */
@media (max-width:899px){
  #para-ti:not(.pt--mob) .pt-row{grid-template-columns:minmax(0,1fr)}
  #para-ti:not(.pt--mob) .pt-frame{min-height:min(118vw,560px)}
}
@media (min-width:600px) and (max-width:899px){
  #para-ti:not(.pt--mob) .pt-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  #para-ti .pt-text{font-size:15px}
  #para-ti .pt-h{font-size:clamp(1.45rem,6.4vw,1.75rem)}
  #para-ti .pt-body{padding:20px 18px 22px}
  #para-ti .pt-tide{height:20%}
}

/* Gama baja: sin video, sin sombras costosas */
#para-ti.pt--low .pt-vid{display:none}
#para-ti.pt--low .pt-frame{box-shadow:none}
#para-ti.pt--low .pt-tide__w{filter:none}

/* Estático: la marea queda como una orilla de oro quieta bajo el texto (no cruza el titular) */
#para-ti:not(.pt--desk):not(.pt--mob) .pt-tide{height:10px}
#para-ti:not(.pt--desk):not(.pt--mob) .pt-body{padding-bottom:calc(clamp(20px,2vw,30px) + 12px)}
#para-ti:not(.pt--desk):not(.pt--mob) .pt-frame{min-height:clamp(400px,56vh,540px)}
@media (max-width:899px){#para-ti:not(.pt--desk):not(.pt--mob) .pt-frame{min-height:min(118vw,520px)}}
@media (max-width:767px){#para-ti:not(.pt--desk):not(.pt--mob) .pt-body{padding-bottom:34px}}

/* integración · celular: ritmo entre secciones (≈110 px en total, no 190) */
@media (max-width:899px){ #para-ti.sec{padding-top:64px;padding-bottom:48px} }