*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #1a1210;
  --text: #f8f0e8;
  --muted: #d4b8a8;
  --accent: #c45c4a;
  --accent-2: #e8a0a0;
  --gold: #c9a27a;
  --glass: rgba(12, 14, 20, 0.78);
  --border: rgba(245, 235, 224, 0.12);
  --glow: 232 160 160;
  --hot: 196 92 74;
  --btn-1: #d45666;
  --btn-2: #9e2f3d;
  --tinte: transparent;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 16px 24px;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

.bg {
  position: fixed;
  inset: -15vh 0;
  z-index: -3;
  background: url("../img/fondo.jpg?v=2") center / cover no-repeat;
  transform: scale(1.05);
  will-change: transform;
  animation: bgDrift 22s ease-in-out infinite alternate;
}

@keyframes bgDrift {
  from { transform: scale(1.05) translate(0, 0); }
  to { transform: scale(1.12) translate(-1.5%, -1%); }
}

.bg-overlay {
  position: fixed;
  inset: -15vh 0;
  z-index: -2;
  background:
    linear-gradient(var(--tinte), var(--tinte)),
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(8, 10, 16, 0.35), rgba(4, 5, 8, 0.84)),
    linear-gradient(180deg, rgba(8, 10, 16, 0.4) 0%, rgba(4, 5, 8, 0.82) 100%);
}

.grain {
  position: fixed;
  inset: -15vh 0;
  z-index: -1;
  opacity: 0.07;
  pointer-events: none;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

.reveal {
  --entrada: opacity 1.6s var(--ease) var(--delay, 0s),
    translate 1.6s var(--ease) var(--delay, 0s),
    scale 1.6s var(--ease) var(--delay, 0s),
    filter 1.6s var(--ease) var(--delay, 0s);
  opacity: 0;
  translate: 0 32px;
  filter: blur(10px);
  transition: var(--entrada);
}

.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  filter: blur(0);
}

.photo-wrap.reveal { scale: 0.82; }

.project.reveal,
.cover.paso { filter: none; }

.paso {
  opacity: 0;
  translate: 0 18px;
  filter: blur(6px);
  transition:
    opacity 1.3s var(--ease) calc(var(--delay, 0s) + var(--extra, 0s)),
    translate 1.3s var(--ease) calc(var(--delay, 0s) + var(--extra, 0s)),
    filter 1.3s var(--ease) calc(var(--delay, 0s) + var(--extra, 0s));
}

.is-visible .paso {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

.no-js .reveal,
.no-js .paso { opacity: 1; translate: none; scale: none; filter: none; }

.hero {
  width: 100%;
  max-width: 560px;
  text-align: center;
  margin-bottom: 64px;
}

.photo-wrap {
  width: 140px;
  height: 140px;
  margin: 0 auto 22px;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 8px 28px rgb(var(--hot) / 0.35), 0 0 0 6px rgba(255, 255, 255, 0.04);
  position: relative;
  isolation: isolate;
}

.photo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--gold), #fff4e6, var(--accent-2), var(--accent));
  animation: anillo 4s linear infinite;
  will-change: transform;
}

@keyframes anillo {
  to { transform: rotate(360deg); }
}

.photo-wrap::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgb(var(--glow) / 0.25);
  animation: ringPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.06); opacity: 0.15; }
}

.photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #2a1c18;
  border: 3px solid rgba(26, 14, 12, 0.6);
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
}

h1 {
  font-size: clamp(2.2rem, 7vw, 3rem);
  letter-spacing: 0.03em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  margin-bottom: 14px;
}

.role {
  margin: -6px 0 16px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-2);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.projects {
  width: 100%;
  max-width: 960px;
}

.section-head {
  margin-bottom: 22px;
}

.section-title {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: 16px;
}

.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--glow) / 0.5), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2.2s var(--ease) calc(var(--delay, 0s) + 0.6s);
}

.is-visible .section-title::after { transform: scaleX(1); }

.section-hint {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.8;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.project {
  border-radius: 22px;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 6;
  transition: var(--entrada), transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

.project-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.cover {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.project-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.project-body h3 { font-size: 1.3rem; }

.project-body p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tags li {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(var(--glow) / 0.12);
  color: var(--accent-2);
}

.cta {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  color: var(--text);
}

.cta span {
  display: inline-block;
  transition: transform 0.25s ease;
}

.footer {
  margin-top: auto;
  padding-top: 40px;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.8;
}

@media (min-width: 640px) {
  .cover { aspect-ratio: 4 / 3; }
}

.pv-cherry {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 107, 122, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(10, 4, 4, 0.15), rgba(20, 6, 8, 0.65)),
    url("../../proyectos/cherrylanita/images/image1.jpg") center / cover;
}

.pv-petalos {
  position: absolute;
  inset: 0;
}

.pv-petalo {
  position: absolute;
  top: -8%;
  left: var(--x);
  width: calc(12px * var(--s));
  height: calc(9px * var(--s));
  border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, #ffd1dc, #f48fb1);
  opacity: 0.9;
  animation: caer var(--t) linear var(--d) infinite;
  animation-fill-mode: backwards;
}

@keyframes caer {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translate(24px, 55cqh) rotate(200deg); }
  100% { transform: translate(-10px, 115cqh) rotate(420deg); opacity: 0.7; }
}

.cover { container-type: size; }

.pv-cereza-wrap {
  position: relative;
  width: 34%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.pv-cereza {
  width: 100%;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
  animation: latido 1.6s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.1); }
  30% { transform: scale(0.97); }
  45% { transform: scale(1.06); }
}

.pv-onda {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px solid rgba(255, 140, 155, 0.6);
  animation: onda 1.6s ease-out infinite;
}

@keyframes onda {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

.pv-letra {
  position: absolute;
  bottom: 9%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #ffe4ea;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.pv-letra span {
  display: inline-block;
  animation: parpadeo 2.4s ease-in-out infinite;
}

@keyframes parpadeo {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.pv-libro {
  background:
    radial-gradient(ellipse 70% 80% at 40% 45%, rgba(14, 20, 16, 0.62), rgba(14, 20, 16, 0.3) 70%, rgba(14, 20, 16, 0.15)),
    linear-gradient(180deg, rgba(14, 20, 16, 0.35), rgba(14, 20, 16, 0.1) 40%, rgba(14, 20, 16, 0.5)),
    #1a221c url("../../proyectos/librodeamor/content/fondo.jpeg") 30% center / cover no-repeat;
  box-shadow: inset 0 0 60px 20px rgba(11, 16, 12, 0.85);
  place-items: start stretch;
}

.pv-papel {
  padding: 9% 34% 0 9%;
  color: #f1e8d2;
  text-shadow: 0 1px 2px rgba(6, 10, 7, 0.6), 0 0 10px rgba(6, 10, 7, 0.5);
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.8rem, 4.6cqw, 1rem);
  line-height: 1.7;
}

.pv-titulo {
  font-family: "Playwrite US Trad", cursive;
  font-style: normal;
  font-size: 1.15em;
  margin-bottom: 0.7em;
}

.pv-verso {
  opacity: 0;
  animation: verso 9s ease-out infinite;
  animation-delay: calc(var(--i) * 0.9s + 0.4s);
  animation-fill-mode: backwards;
}

@keyframes verso {
  0% { opacity: 0; transform: translateY(6px); }
  9% { opacity: 1; transform: none; }
  80% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}

.pv-verso em {
  font-style: inherit;
  color: #f2b260;
  text-shadow: 0 1px 2px rgba(6, 10, 7, 0.6), 0 0 14px rgba(240, 160, 60, 0.55);
  background: linear-gradient(90deg, #e39a45, #f6c77a) no-repeat 0 92% / 0% 2px;
  animation: subrayar 9s ease-in-out infinite;
  animation-delay: 3.9s;
}

@keyframes subrayar {
  0% { background-size: 0% 2px; }
  10%, 75% { background-size: 100% 2px; }
  85%, 100% { background-size: 0% 2px; }
}

.pv-vuelo {
  position: absolute;
  width: 15%;
  aspect-ratio: 1;
}

.pv-vuelo-1 {
  top: 12%;
  right: 12%;
  animation: vuelo1 9s ease-in-out infinite;
}

.pv-vuelo-2 {
  top: 66%;
  right: 6%;
  animation: vuelo2 9s ease-in-out infinite;
}

@keyframes vuelo1 {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  25% { transform: translate(-20cqw, 18cqh) rotate(-24deg); }
  50% { transform: translate(-4cqw, 34cqh) rotate(10deg); }
  75% { transform: translate(-14cqw, 12cqh) rotate(18deg); }
}

@keyframes vuelo2 {
  0%, 100% { transform: translate(0, 0) rotate(10deg); }
  30% { transform: translate(-10cqw, -26cqh) rotate(-14deg); }
  55% { transform: translate(-2cqw, -36cqh) rotate(8deg); }
  80% { transform: translate(-16cqw, -10cqh) rotate(-20deg); }
}

.pv-mariposa {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pv-mariposa .ala-d {
  transform-origin: 0 0;
  animation: aleteo 0.32s ease-in-out infinite alternate;
}

.pv-m2 .ala-d { animation-duration: 0.38s; }

@keyframes aleteo {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.2); }
}

.pv-m1 .ala { fill: url(#pv-grad1); }
.pv-m2 .ala { fill: url(#pv-grad2); }
.pv-mariposa .nervios,
.pv-mariposa .cuerpo { fill: #1b1611; }

.project:not(.en-vista) .cover *,
.project:not(.en-vista) .cover *::before {
  animation-play-state: paused;
}

.follow {
  width: 100%;
  max-width: 960px;
  margin-top: 48px;
  padding: 28px 22px;
  text-align: center;
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--border);
}

.follow h2 {
  font-size: 1.4rem;
  margin-bottom: 18px;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  color: #0d0d0d;
  background: #fff;
  border: 1px solid #fff;
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-whatsapp svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.btn-whatsapp:active { transform: scale(0.97); }

.enjambre {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.mini {
  position: absolute;
  left: var(--x);
  bottom: var(--b);
  width: calc(34px * var(--s));
  aspect-ratio: 1;
  opacity: 0;
  animation: brotar var(--t) linear var(--adelanto, 0s) forwards;
}

@keyframes brotar {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: var(--o); }
  30% { transform: translate(calc(var(--dx) * 0.75), -12vh); }
  60% { transform: translate(calc(var(--dx) * 0.95), -48vh); }
  85% { opacity: var(--o); }
  100% { transform: translate(calc(var(--dx) * 0.8), -105vh); opacity: 0; }
}

.mini svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: ronda var(--r) ease-in-out infinite alternate;
}

@keyframes ronda {
  from { transform: translateX(-14px) rotate(-18deg); }
  to { transform: translateX(14px) rotate(18deg); }
}

.mini .ala-d {
  transform-origin: 0 0;
  fill: var(--c);
  animation: aleteo var(--f) ease-in-out infinite alternate;
}

.mini .cuerpo { fill: #5a4a3c; }

body.cargando { overflow: hidden; }

.carga {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #07090e;
  transition: opacity 1s ease, visibility 0s linear 1s;
}

.carga.oculta {
  opacity: 0;
  visibility: hidden;
}

.carga-mariposa {
  width: 64px;
  height: 64px;
  overflow: visible;
  animation: flotar-carga 2.4s ease-in-out infinite;
}

.carga-mariposa .ala-d {
  transform-origin: 0 0;
  fill: #f4efe6;
  animation: aleteo 0.34s ease-in-out infinite alternate;
}

.carga-mariposa .cuerpo { fill: #8a7a6a; }

@keyframes flotar-carga {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.carga-nombre {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: #f4efe6;
  opacity: 0.9;
}

.carga-linea {
  width: 120px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(244, 239, 230, 0.15);
}

.carga-linea span {
  display: block;
  width: 100%;
  height: 100%;
  background: #f4efe6;
  transform-origin: left;
  transform: scaleX(0);
  animation: llenar-carga 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.listo .carga-linea span {
  animation: none;
  transform: scaleX(1);
  transition: transform 0.4s ease;
}

@keyframes llenar-carga {
  to { transform: scaleX(0.85); }
}

@media (hover: hover) {
  .social:hover {
    color: var(--accent-2);
    border-color: rgb(var(--glow) / 0.4);
    transform: translateY(-2px);
  }

  .project.is-visible:hover {
    transform: translateY(-6px);
    border-color: rgb(var(--glow) / 0.35);
    box-shadow: 0 30px 64px rgba(0, 0, 0, 0.5);
  }

  .project:hover .cta span { transform: translateX(4px); }

  .btn-whatsapp:hover { background: #0d0d0d; color: #fff; }
}

.social:active { transform: scale(0.96); }
.project.is-visible:active { transform: scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .enjambre { display: none; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal,
  .paso {
    translate: none;
    scale: none;
    filter: none;
    transition: opacity 1.4s ease var(--delay, 0s) !important;
  }
  .section-title::after { transform: none; }
  .pv-verso { opacity: 1; }
  .pv-verso em { background-size: 100% 2px; }
  .pv-petalo { display: none; }
}