/* 1. Fuentes locales extraídas de la referencia. */
@font-face {
  font-family: Lotus;
  src: url('archivos/LotusEden-Medium.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Lotus;
  src: url('archivos/LotusEden-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Lotus;
  src: url('archivos/LotusEden-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: Lotus;
  src: url('archivos/LotusEden-LightItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: LotusLight;
  src: url('archivos/LotusEden-UltraLight.woff2') format('woff2');
  font-display: swap;
}

/* 2. Colores, medidas compartidas y estilos base. */
:root {
  --paper: #fffcf5;
  --ink: #03102f;
  --gutter: 8%;
  --ease: cubic-bezier(.22,1,.36,1);
  --body: clamp(14px,1.32vw,19px);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Lotus,Arial,sans-serif;
  font-size: var(--body);
  line-height: 1.2;
}

body.viewer-open {
  overflow: hidden;
}

main {
  max-width: 1600px;
  margin-inline: auto;
  overflow: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,h2,h3,p,figure {
  margin: 0;
}

h2,h3 {
  font-weight: 700;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 3. Ornamentos: la misma imagen se refleja para cada esquina. */
.framed {
  position: relative;
}

.ornament {
  position: absolute;
  width: 18%;
  pointer-events: none;
  z-index: 0;
}

.top-left {
  top: 0;
  left: 2.7%;
  transform: scaleY(-1);
}

.top-right {
  top: 0;
  right: 2.7%;
  transform: scale(-1);
}

.bottom-left {
  bottom: 0;
  left: 2.7%;
}

.bottom-right {
  bottom: 0;
  right: 2.7%;
  transform: scaleX(-1);
}

/* 4. Portada y presentación personal. */
.cover {
  padding: 14% 0 11%;
  text-align: center;
}

.cover .ornament { top: 4.5%; width: 17%; }
.cover .top-left { left: 3.5%; }
.cover .top-right { right: 3.5%; }

.cover-title {
  width: 45%;
  margin: 0 auto;
  line-height: 0;
}

.cover-title img {
  width: 100%;
  height: auto;
  filter: drop-shadow(5px 7px 6px #03102f30);
}

.cover .cover-subtitle {
  margin-top: 5.5%;
  font-size: clamp(36px,5.6vw,89.6px);
}
.about {
  display: grid;
  grid-template-columns: 47% 53%;
  padding: 2% 9% 0 14%;
  min-height: 57vw;
}

.portrait-composition {
  position: relative;
  align-self: start;
  padding-top: 4%;
  width: 81%;
  padding-bottom: 29%;
}

.portrait {
  width: 79%;
  border-radius: 18px;
  box-shadow: 10px 10px 15px #0005;
}

.name-badge {
  position: absolute;
  width: 67%;
  right: -7%;
  bottom: 0;
  transform: rotate(-4deg);
  filter: drop-shadow(2px 5px 2px #0003);
}

.biography {
  position: relative;
  z-index: 1;
}

.bio-block {
  margin-bottom: 5%;
}

.bio-block h2,.bio-block h3 {
  font-size: 1.34em;
  margin-bottom: .25em;
}

.bio-block p {
  margin-left: 7%;
  max-width: 520px;
}

.bio-block p+p {
  margin-top: 1em;
}

.software-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10%;
  width: 64%;
  margin: 1em 0 0 13%;
}

.contact {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  gap: 5%;
  font-size: clamp(11px,1.07vw,16px);
  font-style: normal;
  padding: 4% 0 3.5%;
  align-self: end;
  position: relative;
  z-index: 1;
}

.contact a {
  display: flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
  padding: .25em .35em;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .24em;
  transition: transform 300ms var(--ease), text-decoration-color 300ms ease;
}

.contact a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.contact img {
  width: 2.1em;
  height: 2.1em;
}

/* Cada SVG conserva sus proporciones dentro de su columna. */
.software-icons img {
  width: 100%;
  height: auto;
}

/* 5. Índice visual. */
.contents {
  text-align: center;
  padding-top: 4%;
  padding-bottom: 5.6%;
  margin-top: 5%;
}

.display {
  font-weight: 900;
  font-size: clamp(36px,5.16vw,80px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.contents-list {
  width: 29%;
  margin: 4.5% auto 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contents-link {
  border: 1px solid #000;
  display: flex;
  align-items: center;
  gap: 6%;
  min-height: 10.5vw;
  padding: 5% 8%;
  font-size: clamp(15px,1.94vw,29px);
  font-weight: 700;
  text-align: left;
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), background-color 350ms var(--ease);
}

.contents-link img {
  width: 25%;
  height: 2.7em;
  object-fit: contain;
  transform: rotate(-90deg);
  transition: transform 350ms var(--ease);
}

.contents-link:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

/* 6. Carrusel de fotografía: miniaturas cuadradas y saltito de invitación. */
.section-pad {
  padding-inline: var(--gutter);
}

.photography {
  padding-top: 2%;
  padding-bottom: 4%;
  color: #000;
}

.photo-subtitle {
  font-size: clamp(17px,2.09vw,32px);
  font-weight: 700;
  margin-top: 2%;
}

.photo-composition {
  position: relative;
  aspect-ratio: 1147.44 / 547;
  margin-top: 2%;
}

.photo {
  position: absolute;
  width: 25%;
  aspect-ratio: 1;
  transform: rotate(var(--rotation,0deg));

}


.photo-frame {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  border: 1px solid #000;
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
  touch-action: manipulation;
}

.photo-frame:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 5px;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo figcaption {
  position: absolute;
  bottom: 7%;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

.passion {
  left: 5.5%;
  top: 22.5%;
  --rotation: 18.34deg;
  z-index: 3;
}

.spider {
  left: 29.84%;
  top: 16.49%;
  z-index: 4;
}

.lilies {
  left: 53.6%;
  top: 42%;
  --rotation: -7.02deg;
  z-index: 2;
}

.blue-flower {
  left: 70%;
  top: 0;
  z-index: 1;
}

/* Carrusel: entrada de las fotos desde arriba; después salta solo el texto, con pausas de 2 s. */
.photo-composition.photo-toss-pending .photo {
  opacity: 0;
  transform: translate3d(var(--toss-x),var(--toss-y,-38vh),0) rotate(var(--toss-start)) scale(.84);
}

.photo-composition.photo-toss-entering .photo {
  animation: photo-toss 950ms var(--ease) var(--toss-delay) both;
}

.photo-composition.photo-hop-ready .photo figcaption {
  animation: photo-caption-hop 3.2s ease-in-out 2s infinite;
}

.passion { --toss-x: -15vw; --toss-start: -24deg; --toss-delay: 40ms; }
.spider { --toss-x: 7vw; --toss-start: 12deg; --toss-delay: 150ms; }
.lilies { --toss-x: 14vw; --toss-start: 19deg; --toss-delay: 270ms; }
.blue-flower { --toss-x: 21vw; --toss-start: 10deg; --toss-delay: 390ms; }

@keyframes photo-toss {
  from {
    opacity: 0;
    transform: translate3d(var(--toss-x),var(--toss-y,-38vh),0) rotate(var(--toss-start)) scale(.84);
  }
  to {
    opacity: 1;
    transform: rotate(var(--rotation,0deg));
  }
}

@keyframes photo-caption-hop {
  0%, 37.5%, 100% { transform: translateY(0); }
  18.75% { transform: translateY(-4px); }
}

@media(max-width:767px) {
  .photo-composition { --toss-y: -30vh; }
  .passion { --toss-x: -6.75vw; }
  .spider { --toss-x: 3.15vw; }
  .lilies { --toss-x: 6.3vw; }
  .blue-flower { --toss-x: 9.45vw; }
}

.photo:focus-within {
  z-index: 5;
}
/* 7. Ilustración editorial y muestra del libro. */
.book-project {
  background: var(--ink);
  color: var(--paper);
  padding-top: 2%;
  padding-bottom: 14%;
}

.project-heading {
  display: flex;
  align-items: flex-start;
  gap: 1.2%;
  font-weight: 400;
  font-size: clamp(18px,2.1vw,32px);
  line-height: 1.13;
  margin-top: 5%;
  margin-bottom: 4%;
}

.project-heading>img {
  width: 4%;
  max-height: 1.9em;
  object-fit: contain;
  flex-shrink: 0;
}

.book-project .project-heading>img {
  filter: brightness(0) invert(1);
}

.book-illustrations {
  display: grid;
  grid-template-columns: .86fr 1.06fr 1fr;
  gap: 2%;
  margin-inline: 4%;
  align-items: stretch;
}

.book-illustrations img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.illustration-swipe-hint {
  display: none;
}

.project-note {
  border: 1px solid currentColor;
  padding: .55em 1em;
  font-size: clamp(13px,1.46vw,22px);
  line-height: 1.15;
  width: fit-content;
}

.technique {
  margin: 3% 0 3% 4%;
}

.book-layout {
  margin: 0 4%;
}


.book-layout figcaption {
  margin-top: 3%;
}

/* 8. Visor de fotografía: modal, carrusel y controles para ratón, teclado y touch. */
.photo-viewer {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: #fff;
}

.photo-viewer::backdrop {
  background: #010617e8;
  backdrop-filter: blur(5px);
}

.photo-viewer[open] {
  display: grid;
  place-items: center;
}

.photo-viewer__panel {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) 64px;
  grid-template-rows: minmax(0,1fr) auto;
  align-items: center;
  width: min(92vw,1120px);
  height: min(90dvh,820px);
  padding: 28px 18px 18px;
  border: 1px solid #ffffff38;
  border-radius: 4px;
  background: #050d22f2;
  box-shadow: 0 28px 80px #000a;
  animation: viewer-open 420ms var(--ease) both;
}

.photo-viewer__viewport {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}

.photo-viewer__viewport.is-dragging {
  cursor: grabbing;
}

.photo-viewer__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 520ms var(--ease);
  will-change: transform;
}

.photo-viewer__track.is-dragging {
  transition: none;
}

.photo-viewer__slide {
  position: relative;
  display: grid;
  flex: 0 0 100%;
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.photo-viewer__slide img {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.photo-viewer__close,
.photo-viewer__arrow {
  border: 0;
  color: #fff;
  background: #ffffff16;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 250ms ease, transform 250ms var(--ease);
}

.photo-viewer__close:hover,
.photo-viewer__arrow:hover {
  background: #ffffff2b;
}

.photo-viewer__close:focus-visible,
.photo-viewer__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.photo-viewer__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font: 34px/1 Arial,sans-serif;
}

.photo-viewer__arrow {
  z-index: 1;
  width: 48px;
  height: 64px;
  border-radius: 3px;
  font: 48px/1 Arial,sans-serif;
}

.photo-viewer__arrow--previous {
  grid-column: 1;
  grid-row: 1;
}

.photo-viewer__arrow--next {
  grid-column: 3;
  grid-row: 1;
}

.photo-viewer__status {
  grid-column: 1/-1;
  grid-row: 2;
  padding-top: 8px;
  text-align: center;
  font-size: 15px;
  letter-spacing: .08em;
}

@keyframes viewer-open {
  from {
    opacity: 0;
    transform: scale(.96);
  }
}

/* 9. Apariciones: JavaScript oculta solo los elementos que aún no se han visto. */
[data-reveal].reveal-pending {
  opacity: 0;
  translate: 0 18px;
}

[data-reveal] {
  transition: opacity 800ms var(--ease),translate 800ms var(--ease);
}

.contents-list li:nth-child(2),.book-illustrations img:nth-child(2) {
  transition-delay: 70ms;
}

.book-illustrations img:nth-child(3) {
  transition-delay: 140ms;
}

.artwork {
  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), opacity 800ms var(--ease), translate 800ms var(--ease);
}

@media(hover:hover) and (pointer:fine) {
  .contact a:hover {
    transform: translateY(-2px);
    text-decoration-color: currentColor;
  }

  .contents-link:hover {
    transform: translateY(-4px);
    background: #fffefb;
    box-shadow: 0 12px 24px #03102f18;
  }

  .contents-link:hover img {
    transform: rotate(-90deg) translateY(5px);
  }

  .artwork:hover {
    transform: scale(1.015);
    box-shadow: 0 8px 18px #0002;
  }


}

@media(hover:none) {
  .contents-link:active {
    transform: scale(.985);
    background: #03102f0c;
  }

  .artwork:active {
    opacity: .88;
    scale: .99;
    transition: opacity 180ms,scale 180ms;
  }

}

/* 10. Adaptación: pantallas amplias, tabletas y teléfonos. */
@media(min-width:1600px) {
  .about {
    min-height: 912px;
  }

  .contents-link {
    min-height: 168px;
  }

}

@media(min-width:768px) and (max-width:1023px) {
  .about {
    padding-left: 12%;
    padding-right: 7%;
    grid-template-columns: 44% 56%;
    min-height: 620px;
  }

  .bio-block {
    margin-bottom: 6%;
  }

  .contact {
    gap: 3%;
    padding-bottom: 5%;
  }

  .contents-list {
    width: 34%;
  }

}

@media(max-width:767px) {
  :root {
    --gutter: 7%;
    --body: 14px;
  }

  .top-left,.bottom-left {
    left: 7%;
  }

  .top-right,.bottom-right {
    right: 7%;
  }

  .cover { padding: 14% 0 11%; }
  .cover .ornament { top: 4%; width: 18%; }
  .cover .top-left { left: 7%; }
  .cover .top-right { right: 7%; }

  .cover .cover-subtitle {
    margin-top: 5%;
    font-size: clamp(25px,7vw,52px);
  }

  .cover-title { width: 55%; }
  .cover-title img { filter: drop-shadow(3px 4px 3px #03102f30); }
  .about {
    display: flex;
    flex-direction: column;
    padding: 0 16% 17%;
    min-height: 0;
  }

  .portrait-composition {
    width: 78%;
    margin: 0 auto 9%;
    padding: 0 0 19%;
  }

  .portrait {
    width: 84%;
    border-radius: 12px;
    box-shadow: 5px 6px 8px #0005;
  }

  .name-badge {
    width: 60%;
    right: -5%;
    bottom: 0;
  }

  .bio-block {
    margin-bottom: 1.25em;
  }

  .bio-block h2,.bio-block h3 {
    font-size: 18px;
    margin-bottom: .45em;
  }

  .bio-block p {
    margin-left: 7%;
    line-height: 1.22;
  }

  .software-icons {
    width: 85%;
    margin: .65em 0 0 10%;
  }

  .contact {
    flex-direction: column;
    gap: .7em;
    align-self: center;
    font-size: 11px;
    padding: 10% 0 1%;
    margin-left: 12%;
  }

  .contact img {
    width: 1.9em;
    height: 1.9em;
  }

  .contents {
    margin-top: 5%;
    padding: 6% 0 7%;
  }

  .display {
    font-size: clamp(30px,7vw,52px);
  }

  .contents .display {
    font-size: clamp(26px,6.65vw,50px);
  }

  .contents-list {
    width: 44%;
    margin-top: 8%;
    gap: 13px;
  }

  .contents-link {
    min-height: 14vw;
    font-size: clamp(11px,2.64vw,19px);
    padding: 6% 7%;
    gap: 7%;
  }

  .contents-link img {
    width: 25%;
    height: 2.5em;
  }

  .photography {
    padding-top: 0;
    padding-bottom: 4%;
  }

  .photo-subtitle {
    font-size: clamp(13px,2.7vw,18px);
    margin-top: 3%;
  }

  .photo-composition {
    height: 82vw;
    aspect-ratio: auto;
    margin-top: 7%;
  }

  .photo {
    width: 35%;
  }

  .passion {
    left: 10%;
    top: 16%;
    --rotation: 18deg;
  }

  .spider {
    left: 39%;
    top: 0;
  }

  .lilies {
    left: 22%;
    top: 48%;
    --rotation: -8deg;
  }

  .blue-flower {
    left: 59%;
    top: 33%;
  }

  /* Carrusel en celular: las cuatro fotos muestran la misma invitación. */


  .book-project {
    padding-top: 8%;
    padding-bottom: 22%;
  }

  .project-heading {
    font-size: clamp(15px,2.7vw,21px);
    gap: 3%;
    margin-top: 5%;
    margin-bottom: 8%;
  }

  .project-heading>img {
    width: 8%;
    max-height: 2.2em;
  }

  .book-illustrations {
    display: flex;
    width: 100%;
    margin: 0;
    padding-inline: 14%;
    gap: 5%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 14%;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .book-illustrations::-webkit-scrollbar {
    display: none;
  }

  .book-illustrations img {
    flex: 0 0 72%;
    width: 72%;
    height: auto;
    object-fit: contain;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .book-secondary {
    display: block;
  }

  .illustration-swipe-hint {
    display: block;
    width: 72%;
    margin: .8em auto 0;
    text-align: center;
  }

  .technique {
    width: 54%;
    margin: 6% auto;
    text-align: center;
    font-size: 11px;
    padding: .7em .5em;
  }

  .book-layout {
    margin: 0;
  }

  .book-layout figcaption {
    max-width: 66%;
    margin: 5% auto 0;
    text-align: center;
    font-size: 12px;
  }

  .photo-viewer__panel {
    grid-template-columns: 46px minmax(0,1fr) 46px;
    width: 100vw;
    height: 100dvh;
    padding: max(52px,env(safe-area-inset-top)) 0 max(14px,env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }

  .photo-viewer__viewport {
    grid-column: 1/-1;
  }

  .photo-viewer__arrow {
    width: 46px;
    height: 58px;
    background: #0309169c;
  }

  .photo-viewer__arrow--previous,
  .photo-viewer__arrow--next {
    grid-row: 1;
    align-self: center;
  }

  .photo-viewer__arrow--previous {
    grid-column: 1;
  }

  .photo-viewer__arrow--next {
    grid-column: 3;
  }

  .photo-viewer__close {
    top: max(8px,env(safe-area-inset-top));
    right: 8px;
  }

}

/* 11. Accesibilidad: desactiva los efectos si el sistema solicita movimiento reducido. */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }

  [data-reveal].reveal-pending {
    opacity: 1;
    translate: none;
  }

  .artwork:hover,.artwork:active {
    scale: 1;
  }

  .artwork:hover {
    transform: none;
  }


}

/* Libro con tapa, canto de papel y hojas de dos caras. */
.book-reader { margin: 6% auto 0; }
.book-stage { perspective: 1800px; padding: 17% 1% 19%; }
.mock-book {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 3;
  transform-style: preserve-3d;
  transform: scale(1.6) translateX(-25%) rotateX(9deg) rotateY(-12deg);
  transition: transform 850ms ease;
  cursor: pointer;
}
.mock-book.is-open { transform: rotateX(5deg); }
.mock-book.is-back { transform: scale(1.6) translateX(25%) rotateX(9deg) rotateY(12deg); }
.book-leaf {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 850ms ease;
  transform: rotateY(0deg);
}
.book-leaf.is-turned { transform: rotateY(-180deg); }
.book-face {
  position: absolute;
  inset: 0;
  background: #fff;
  backface-visibility: hidden;
  border-radius: 2px 5px 5px 2px;
  box-shadow: 1px 1px 0 #c5c0b4, 3px 3px 0 #f4f0e5, 4px 4px 0 #b5b0a6, 6px 6px 0 #eee8db, 8px 8px 0 #b5b0a6, 12px 18px 24px #0006;
  overflow: hidden;
}
.book-face-back { transform: rotateY(180deg); border-radius: 5px 2px 2px 5px; }
.book-face img { width: 100%; height: 100%; object-fit: contain; }
.book-face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,#0003,transparent 8%,#fff1 85%,#0001);
}
.book-face-back::after { background: linear-gradient(270deg,#0003,transparent 8%,#fff1 85%,#0001); }
/* Tipografía compartida por las indicaciones de fotos, ilustraciones y libro. */
.photo figcaption,.illustration-swipe-hint,.book-controls,.book-status {
  font-family: LotusLight,Arial,sans-serif;
  font-size: clamp(10px,1.46vw,20px);
  font-style: normal;
  color: #d3cfc3;
}
.book-controls { display: flex; justify-content: center; align-items: center; gap: 8px; }
.book-controls button {
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.book-controls button:hover:enabled { color: #fff; }
.book-controls button:disabled { opacity: .25; cursor: default; }
.book-controls button:focus-visible,.book-reader:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.book-status { text-align: center; margin: 0; }
@media(max-width:767px) {
  .photo figcaption,.illustration-swipe-hint,.book-controls,.book-status {
    font-size: clamp(10px,2.6vw,16px);
  }
}