:root{
    --rosa:#e8577e; --rosa-claro:#fbd3df; --vino:#7a1f3d; --crema:#fff8f5; --dorado:#c9a24a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Lora',serif; color:#4a2a35; background:var(--crema);
    overflow-x:hidden; line-height:1.8;
  }

  /* Corazones flotando */
  .corazones{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
  .corazones span{
    position:absolute;bottom:-40px;color:var(--rosa);opacity:.0;
    animation:subir linear infinite;
  }
  @keyframes subir{
    0%{transform:translateY(0) rotate(0);opacity:0}
    10%{opacity:.55}
    100%{transform:translateY(-110vh) rotate(360deg);opacity:0}
  }

  /* Portada */
  .portada{
    position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;padding:40px 20px;
    background:radial-gradient(circle at 50% 30%, #fff 0%, var(--rosa-claro) 60%, #f3a5bc 100%);
  }
  .portada h1{
    font-family:'Great Vibes',cursive;font-size:clamp(3.2rem,11vw,7rem);color:var(--vino);
    line-height:1.1;text-shadow:0 4px 18px rgba(232,87,126,.35);
    animation:aparecer 2s ease both;
  }
  .portada p{
    font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(1.1rem,3.5vw,1.6rem);
    color:var(--vino);margin-top:14px;animation:aparecer 2s .6s ease both;
  }
  .latido{font-size:4rem;margin:26px 0;animation:latir 1.3s ease-in-out infinite}
  @keyframes latir{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
  @keyframes aparecer{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
  .bajar{
    margin-top:30px;text-decoration:none;color:#fff;background:var(--rosa);
    padding:14px 34px;border-radius:40px;font-family:'Playfair Display',serif;font-size:1.1rem;
    box-shadow:0 8px 24px rgba(232,87,126,.45);transition:.3s;animation:aparecer 2s 1.2s ease both;
  }
  .bajar:hover{transform:translateY(-3px);background:var(--vino)}

  /* Foto principal */
  /* Fotos estilo polaroid vieja pegada con cinta */
  .foto{
    position:relative;width:100%;aspect-ratio:4/5;
    padding:14px 14px 58px;
    background:
      repeating-linear-gradient(45deg,#e9dccb,#e9dccb 14px,#e2d2bd 14px,#e2d2bd 28px) content-box,
      linear-gradient(135deg,#fbf6ea,#efe4cf);
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    color:#9a7b5c;font-family:'Playfair Display',serif;font-style:italic;text-align:center;
    box-shadow:0 2px 3px rgba(0,0,0,.12),0 16px 30px rgba(80,40,20,.25);
    transition:transform .4s ease;
  }
  .foto::before{ /* cinta */
    content:'';position:absolute;top:-16px;left:50%;width:110px;height:34px;
    transform:translateX(-50%) rotate(-4deg);
    background:linear-gradient(90deg,rgba(255,250,235,.55),rgba(240,225,195,.7),rgba(255,250,235,.55));
    border-left:2px dashed rgba(255,255,255,.4);border-right:2px dashed rgba(255,255,255,.4);
    box-shadow:0 1px 3px rgba(0,0,0,.12);z-index:2;
  }
  .foto::after{ /* textito escrito a mano */
    content:attr(data-nota);position:absolute;left:0;right:0;bottom:12px;
    font-family:'Great Vibes',cursive;font-style:normal;font-size:1.6rem;color:#6b3a2a;
  }
  .foto:nth-child(even)::before{left:auto;right:-18px;top:14px;width:90px;transform:rotate(38deg)}
  .foto img{
    position:absolute;top:14px;left:14px;width:calc(100% - 28px);height:calc(100% - 72px);
    object-fit:cover;display:block;filter:sepia(.35) contrast(1.05) saturate(.85) brightness(1.02);
  }
  .foto:hover{transform:rotate(0) scale(1.03)!important;z-index:3}
  .foto .icono{font-size:2.4rem;margin-bottom:6px;filter:sepia(.6)}
  .foto-principal{max-width:380px;margin:40px auto 0;transform:rotate(-2deg)}

  /* Línea de tiempo */
  .historia{position:relative;z-index:1;padding:90px 20px;max-width:1050px;margin:auto}
  .titulo-sec{
    text-align:center;font-family:'Great Vibes',cursive;font-size:clamp(2.8rem,8vw,4.5rem);
    color:var(--vino);margin-bottom:10px;
  }
  .subtitulo{text-align:center;font-style:italic;color:var(--rosa);margin-bottom:60px}
  .linea{position:relative}
  .linea::before{
    content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);
    background:linear-gradient(var(--rosa-claro),var(--rosa),var(--rosa-claro));
  }
  .anio{
    position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
    margin-bottom:90px;opacity:0;transform:translateY(40px);transition:1s ease;
  }
  .anio.visible{opacity:1;transform:none}
  .anio::after{
    content:'❤';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    background:var(--crema);color:var(--rosa);font-size:1.8rem;padding:6px;
  }
  .anio:nth-child(even) .texto{order:2}
  .anio:nth-child(even) .foto{order:1}
  .anio .foto{max-width:340px;justify-self:center}
  .anio:nth-child(1) .foto{transform:rotate(4deg)}
  .anio:nth-child(2) .foto{transform:rotate(-5deg)}
  .anio:nth-child(3) .foto{transform:rotate(3deg)}
  .anio:nth-child(4) .foto{transform:rotate(-3.5deg)}
  .foto-principal{transform:rotate(-4deg)!important}
  .texto{
    background:#fff;padding:34px 30px;border-radius:20px;position:relative;
    box-shadow:0 12px 30px rgba(122,31,61,.12);border-top:5px solid var(--rosa);
  }
  .texto .num{
    font-family:'Great Vibes',cursive;font-size:2.6rem;color:var(--rosa);line-height:1;
  }
  .texto h3{
    font-family:'Playfair Display',serif;color:var(--vino);font-size:1.4rem;margin:4px 0 14px;
  }
  .texto p{font-size:1.05rem}

  /* Carta final */
  .carta{
    position:relative;z-index:1;padding:100px 20px;text-align:center;
    background:linear-gradient(180deg,var(--crema),var(--rosa-claro) 40%,#f3a5bc);
  }
  .papel{
    max-width:720px;margin:auto;background:#fffdfb;padding:60px 44px;border-radius:6px;
    box-shadow:0 20px 50px rgba(122,31,61,.25);position:relative;
    border:1px solid #f1d4dc;
  }
  .papel::before,.papel::after{
    content:'❦';position:absolute;color:var(--dorado);font-size:2rem;
  }
  .papel::before{top:14px;left:20px}
  .papel::after{bottom:14px;right:20px;transform:rotate(180deg)}
  .papel h2{font-family:'Great Vibes',cursive;font-size:clamp(2.6rem,8vw,4rem);color:var(--vino)}
  .papel p{
    font-family:'Playfair Display',serif;font-size:clamp(1.15rem,3.6vw,1.5rem);
    margin:24px 0;color:#4a2a35;line-height:1.9;
  }
  .papel strong{color:var(--rosa)}
  .firma{font-family:'Great Vibes',cursive;font-size:2.4rem;color:var(--vino);margin-top:10px}

  /* Galería */
  .galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:900px;margin:70px auto 0}
  .galeria .foto{aspect-ratio:1}
  .galeria .foto:nth-child(1){transform:rotate(-7deg) translateY(10px)}
  .galeria .foto:nth-child(2){transform:rotate(4deg) translateY(-14px);z-index:1}
  .galeria .foto:nth-child(3){transform:rotate(-3deg) translate(-6px,18px)}

  footer{
    position:relative;z-index:1;text-align:center;padding:40px 20px;background:var(--vino);color:#fff;
    font-family:'Great Vibes',cursive;font-size:2rem;
  }

  @media (max-width:760px){
    body{line-height:1.7}
    .portada{min-height:100svh;padding:50px 18px 40px}
    .portada h1{font-size:clamp(2.8rem,14vw,4rem)}
    .latido{font-size:3rem;margin:16px 0}
    .foto-principal{max-width:78vw;margin-top:20px}
    .bajar{margin-top:28px;padding:12px 28px;font-size:1rem}

    .historia{padding:60px 16px}
    .subtitulo{margin-bottom:40px;font-size:.95rem}
    .linea::before{left:10px;width:2px}
    .anio{grid-template-columns:1fr;gap:22px;padding-left:30px;margin-bottom:56px;transform:translateY(25px)}
    .anio::after{left:10px;top:22px;font-size:1.2rem;padding:3px}
    .anio:nth-child(even) .texto,.anio:nth-child(even) .foto{order:initial}
    .anio .foto{max-width:92%;width:92%;aspect-ratio:4/3.4;padding:10px 10px 48px}
    .anio:nth-child(1) .foto{transform:rotate(3deg)}
    .anio:nth-child(2) .foto{transform:rotate(-3deg)}
    .anio:nth-child(3) .foto{transform:rotate(2.5deg)}
    .anio:nth-child(4) .foto{transform:rotate(-2.5deg)}
    .foto img{top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 58px)}
    .foto::after{font-size:1.35rem;bottom:10px}
    .foto::before{width:80px;height:26px;top:-12px}
    .foto:nth-child(even)::before{right:-12px;width:70px}
    .texto{padding:24px 20px;border-radius:16px}
    .texto .num{font-size:2.1rem}
    .texto h3{font-size:1.2rem;margin:2px 0 10px}
    .texto p{font-size:1rem}

    .carta{padding:60px 16px}
    .papel{padding:48px 22px}
    .papel::before,.papel::after{font-size:1.5rem}
    .papel p{margin:18px 0}
    .firma{font-size:2rem}
    .galeria{grid-template-columns:1fr 1fr;gap:12px;max-width:100%;margin-top:40px}
    .galeria .foto:nth-child(3){grid-column:1 / -1;aspect-ratio:16/10}
    .galeria .foto{font-size:.85rem;padding:8px 8px 40px}
    .galeria .foto img{top:8px;left:8px;width:calc(100% - 16px);height:calc(100% - 48px)}
    .galeria .foto::after{font-size:1.15rem}
    .galeria .foto:nth-child(1){transform:rotate(-5deg)}
    .galeria .foto:nth-child(2){transform:rotate(4deg) translateY(10px)}
    .galeria .foto:nth-child(3){transform:rotate(-2deg);width:88%;justify-self:center}
    .foto .icono{font-size:2rem}

    footer{font-size:1.6rem;padding:30px 16px}
  }

  /* Collage de dos fotos */
  .collage{display:grid;max-width:380px;width:100%;justify-self:center;padding:10px 0 20px}
  .anio .collage .foto{max-width:100%;width:82%;aspect-ratio:4/3.6}
  .anio .collage .foto:nth-child(1){transform:rotate(-5deg);justify-self:start;aspect-ratio:4/5.5;width:72%}
  .anio .collage .foto img{object-position:center 20%}
  .anio .collage .foto:nth-child(2){transform:rotate(6deg);justify-self:end;margin-top:-22%;z-index:1}
  @media (max-width:760px){
    .anio .collage .foto{width:80%;max-width:80%;aspect-ratio:4/3.6}
    .anio .collage .foto:nth-child(1){transform:rotate(-4deg);aspect-ratio:4/5.5;width:70%;max-width:70%}
    .anio .collage .foto:nth-child(2){transform:rotate(4deg);margin-top:-18%}
  }
  .anio .foto.yaco{aspect-ratio:1/1.12}
  .foto.yaco img{object-position:center 25%}
  @media (max-width:760px){.anio .foto.yaco{aspect-ratio:1/1.12;width:85%;max-width:85%}}
  /* Collage tercer año: fotos completas, sin recorte */
  .collage5{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;max-width:440px;width:100%;justify-self:center;padding:14px 4px 10px}
  .anio .collage5 .foto{aspect-ratio:auto;width:100%;max-width:100%;padding:10px 10px 48px}
  .collage5 .foto img{position:static;width:100%;height:auto}
  .collage5 .foto::after{font-size:1.25rem;bottom:10px}
  .anio .collage5 .foto:nth-child(1){transform:rotate(-5deg)}
  .anio .collage5 .foto:nth-child(2){transform:rotate(4deg);margin-top:28px}
  .anio .collage5 .foto:nth-child(3){transform:rotate(3deg);margin-top:-18px;z-index:1}
  .anio .collage5 .foto:nth-child(4){transform:rotate(-4deg)}
  .anio .collage5 .foto:nth-child(5){grid-column:1 / -1;width:78%;max-width:78%;justify-self:center;transform:rotate(-2deg);margin-top:-10px;z-index:2}
  @media (max-width:760px){
    .collage5{gap:14px 10px;padding-top:10px}
    .anio .collage5 .foto{padding:7px 7px 38px;width:100%;max-width:100%}
    .collage5 .foto img{width:100%;height:auto}
    .collage5 .foto::after{font-size:1.05rem;bottom:8px}
    .collage5 .foto::before{width:56px;height:20px;top:-10px}
    .anio .collage5 .foto:nth-child(5){width:88%;max-width:88%}
  }
  /* Fotos sin recorte */
  .foto-principal,.galeria .foto{aspect-ratio:auto!important}
  .foto-principal img,.galeria .foto img{position:static;width:100%;height:auto}
  .galeria{align-items:start}
  .foto.espera{
    background:radial-gradient(circle,#fffaf0 0%,#f3e7d3 100%) content-box,linear-gradient(135deg,#fbf6ea,#efe4cf);
    font-size:1.15rem;line-height:1.5;color:#8a6a4c;
  }
  .foto.espera .icono{font-size:3rem;animation:latir 2s ease-in-out infinite}
  @media (max-width:760px){
    .galeria .foto:nth-child(3){aspect-ratio:auto!important;width:70%}
    .foto.espera{font-size:1rem}
  }