/* Mujer de Fe · «Hola, soy Mayca», en la portada (6.) y en «Sobre mí» (historia-pagina). En la portada, con 3D, el
   amanecer pasa en el lienzo (de la noche a la crema) durante el hueco de arriba; sin él, lo hace este degradado.
   El retrato se abre en una ventana con forma de arco de capilla, la foto se mueve dentro más despacio que el marco y
   alrededor flotan ramitas y chispas. */

.historia {
  position: relative; z-index: 2;
  padding: clamp(280px, 60vh, 640px) var(--margen) clamp(80px, 10vw, 140px);
  background: linear-gradient(180deg, var(--noche) 0, #5A2A44 18vh, #E39A88 36vh, #FBE3CC 50vh, var(--crema) 64vh);
}
.con-3d .historia { background: none; }

.historia-dentro {
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 620px); justify-content: center; align-items: center;
  gap: clamp(40px, 7vw, 110px);
}

.historia-retrato { position: relative; margin: 0; }
.arco {
  position: relative; aspect-ratio: 400 / 560; overflow: hidden;
  border-radius: 50% 50% 14px 14px / 36% 36% 14px 14px;
  box-shadow: 0 40px 80px -30px rgba(74, 44, 29, .5);
}
.arco img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.arco-borde { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); overflow: visible; pointer-events: none; }
.arco-borde path { fill: none; stroke: var(--oro); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.efectos .arco-borde path { stroke-dashoffset: 1; }
.efectos .arco { clip-path: inset(100% 0 0 0); }

.ramita { position: absolute; z-index: 2; fill: none; stroke: var(--salvia); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ramita-1 { width: 120px; left: -70px; top: 18%; rotate: -24deg; }
.ramita-2 { width: 90px; right: -50px; top: 4%; rotate: 150deg; }
.ramita-3 { width: 110px; right: -60px; bottom: 6%; rotate: 30deg; }

.chispa {
  position: absolute; z-index: 2; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  background: var(--oro-claro); box-shadow: 0 0 14px 4px rgba(243, 212, 138, .8);
  animation: titilar 3s ease-in-out infinite;
}
.chispa-1 { left: 8%; top: 8%; }
.chispa-2 { right: 4%; top: 46%; animation-delay: -1s; width: 7px; height: 7px; }
.chispa-3 { left: 20%; bottom: -12px; animation-delay: -2s; }
@keyframes titilar { 50% { opacity: .2; scale: .5; } }

.historia-texto { color: var(--texto); }
.historia-titulo { margin: 0; padding-bottom: .12em; font-size: clamp(76px, 8vw, 128px); line-height: .95; color: var(--chocolate); }
.historia-lema { margin: 0 0 26px; font: 600 13px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--oro-hondo); }
.historia-texto > p:not([class*="historia-"]) { font-size: 18.5px; }
.historia-texto strong { color: var(--chocolate); }
.cita-escrita { margin: 30px 0 34px; padding-left: 26px; border-left: 2px solid var(--rosa); }
.cita-escrita p { margin: 0 0 8px; font: 400 clamp(36px, 3.6vw, 50px)/1.15 var(--caligrafia); color: var(--rosa-fuerte); }
/* se escribe de izquierda a derecha: --escrito avanza (principal.js) y la máscara deja ver lo ya escrito */
.efectos .cita-escrita p {
  --escrito: -20%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--escrito) - 12%), transparent var(--escrito));
  mask-image: linear-gradient(90deg, #000 calc(var(--escrito) - 12%), transparent var(--escrito));
}
.cita-escrita cite { font: 600 12px/1 var(--sans); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.historia-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin: 0; }

@media (max-width: 860px) {
  .historia { padding-top: clamp(240px, 50vh, 480px); }
  .historia-dentro { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .historia-retrato { width: min(78vw, 380px); }
  .historia-texto { text-align: center; }
  .cita-escrita { border-left: 0; padding-left: 0; }
  .historia-acciones { justify-content: center; }
  .ramita-1 { left: -40px; width: 90px; }
  .ramita-2, .ramita-3 { right: -30px; width: 76px; }
}

/* ---------- En «Sobre mí»: sin el hueco del amanecer, y lo animan las clases de paginas.js (sin GSAP) ---------- */
@property --escrito { syntax: '<percentage>'; inherits: true; initial-value: -20%; }
.historia-pagina { padding: clamp(40px, 6vw, 80px) var(--margen) clamp(60px, 8vw, 100px); background: none; }
.historia-retrato.visto .arco { clip-path: inset(0); transition: clip-path 1.8s cubic-bezier(.87, 0, .13, 1); }
.historia-retrato.visto .arco-borde path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s .5s var(--curva); }
.cita-escrita.visto p { --escrito: 120%; transition: --escrito 3.2s .2s ease-in-out; }
.efectos .historia-titulo.revelar { clip-path: inset(-30% 100% -40% -5%); }
.historia-titulo.revelar.visto { clip-path: inset(-30% -5% -40% -5%); transition: clip-path 2s cubic-bezier(.65, 0, .35, 1); }