:root {
  --cream: #fff7e8;
  --paper: #fffdf8;
  --ink: #34261f;
  --muted: #76665d;
  --coral: #e85d5d;
  --coral-dark: #b83845;
  --pink: #f7a8b8;
  --yellow: #f2bd3d;
  --turquoise: #35a9a2;
  --blue: #3f72b5;
  --green: #6da451;
  --purple: #8b5daf;
  --line: rgba(85, 53, 34, .12);
  --shadow: 0 24px 70px rgba(104, 60, 31, .13);
  --radius-lg: 38px;
  --radius-md: 26px;
  --radius-sm: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 15%, rgba(247,168,184,.16), transparent 24rem),
    radial-gradient(circle at 90% 35%, rgba(53,169,162,.13), transparent 28rem),
    var(--cream);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  line-height: 1.65;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image: radial-gradient(rgba(73,48,32,.15) .7px, transparent .7px);
  background-size: 18px 18px;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3,.brand-text,.footer-brand { font-family: "Fraunces", serif; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

.papel-picado { height: 26px; display:grid; grid-template-columns:repeat(7,1fr); position:relative; z-index:30; }
.papel-picado span { position:relative; filter:drop-shadow(0 3px 2px rgba(0,0,0,.08)); }
.papel-picado span::after { content:""; position:absolute; inset:0 3px -13px; clip-path:polygon(0 0,100% 0,100% 68%,85% 78%,70% 68%,55% 82%,40% 68%,25% 78%,0 67%); }
.papel-picado span:nth-child(1)::after,.papel-picado span:nth-child(6)::after { background:var(--coral); }
.papel-picado span:nth-child(2)::after,.papel-picado span:nth-child(7)::after { background:var(--yellow); }
.papel-picado span:nth-child(3)::after { background:var(--turquoise); }
.papel-picado span:nth-child(4)::after { background:var(--purple); }
.papel-picado span:nth-child(5)::after { background:var(--green); }

.site-header {
  position:sticky; top:0; z-index:20; width:min(1220px,calc(100% - 28px)); margin:16px auto 0; padding:13px 16px 13px 20px;
  display:flex; align-items:center; gap:22px; border:1px solid rgba(255,255,255,.7); border-radius:22px;
  background:rgba(255,253,248,.88); box-shadow:0 12px 30px rgba(84,49,27,.10); backdrop-filter:blur(16px);
}
.brand { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:9px; text-decoration:none; line-height:1; }
.brand-flower { grid-row:1/3; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--coral); color:#fff; font-size:1.2rem; }
.brand-text { font-size:1.45rem; font-weight:800; }
.brand small { margin-top:4px; color:var(--muted); font-size:.62rem; letter-spacing:.05em; }
.main-nav { margin-left:auto; display:flex; align-items:center; gap:26px; }
.main-nav a { position:relative; text-decoration:none; font-weight:700; font-size:.92rem; }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:3px; border-radius:4px; background:var(--coral); transition:.2s; }
.main-nav a:hover::after { right:0; }
.language-switcher { display:flex; padding:4px; border-radius:999px; background:#f4e5d8; }
.language-switcher button { border:0; min-width:40px; padding:7px 10px; border-radius:999px; background:transparent; color:var(--muted); font-weight:800; cursor:pointer; }
.language-switcher button.active { background:var(--ink); color:white; }
.menu-button { display:none; border:0; background:transparent; padding:8px; }
.menu-button > span:not(.sr-only) { display:block; width:24px; height:2px; margin:5px; background:var(--ink); }

.hero { width:min(1220px,calc(100% - 40px)); min-height:720px; margin:20px auto 0; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:55px; padding:72px 26px 70px; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--coral-dark); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.18em; }
.eyebrow i { color:var(--coral); font-style:normal; font-size:1rem; }
.eyebrow.plain::before { content:""; width:38px; height:3px; border-radius:5px; background:linear-gradient(90deg,var(--coral),var(--yellow)); }
.hero h1 { max-width:740px; margin-bottom:24px; font-size:clamp(3.5rem,6.2vw,6.8rem); line-height:.96; letter-spacing:-.045em; }
.hero h1 em { color:var(--coral-dark); font-weight:700; }
.hero-intro { max-width:650px; margin-bottom:30px; color:var(--muted); font-size:1.15rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:15px; text-decoration:none; font-weight:800; transition:.2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--coral); color:white; box-shadow:0 12px 24px rgba(184,56,69,.22); }
.button-ghost { border:2px solid var(--ink); background:rgba(255,255,255,.42); }
.family-stamp { width:122px; height:122px; margin-top:40px; display:grid; place-content:center; text-align:center; border:2px dashed var(--coral); border-radius:50%; transform:rotate(-7deg); color:var(--coral-dark); background:rgba(255,255,255,.35); }
.family-stamp span { font-family:"Fraunces",serif; font-size:1.25rem; font-weight:800; }
.family-stamp small { font-size:.63rem; text-transform:uppercase; letter-spacing:.08em; }

.hero-collage { position:relative; min-height:590px; }
.sunburst { position:absolute; width:500px; height:500px; right:-70px; top:20px; border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(242,189,61,.32) 0 8deg,transparent 8deg 17deg); }
.photo-frame { position:absolute; z-index:2; padding:16px 16px 54px; border-radius:8px; background:white; box-shadow:var(--shadow); transform:rotate(3deg); }
.frame-main { width:min(430px,82%); right:45px; top:65px; }
.photo-placeholder { min-height:430px; display:grid; place-content:center; text-align:center; border-radius:4px; color:white; background:linear-gradient(145deg,#e57872,#8d3c63 55%,#3d7998); overflow:hidden; }
.photo-placeholder::before { content:"✿"; position:absolute; font-size:17rem; opacity:.09; transform:translate(-30px,-10px); }
.photo-placeholder span { font-family:"Fraunces",serif; font-size:8rem; line-height:1; }
.photo-placeholder small { max-width:230px; margin:16px auto 0; font-size:.8rem; }
.tape { position:absolute; width:110px; height:30px; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg); background:rgba(242,189,61,.62); }
.mini-card { position:absolute; z-index:4; display:flex; align-items:center; gap:9px; padding:13px 17px; border-radius:18px; background:white; box-shadow:0 16px 35px rgba(73,42,24,.16); font-size:.82rem; transform:rotate(-6deg); }
.mini-card span { font-size:1.55rem; }
.card-mexico { left:0; top:145px; }
.card-netherlands { right:0; bottom:80px; transform:rotate(5deg); }
.heart-note { position:absolute; z-index:4; left:15px; bottom:45px; padding:20px 24px; border-radius:50% 48% 52% 46%; background:var(--pink); color:#6f293a; font-family:"Fraunces",serif; font-weight:800; text-align:center; transform:rotate(-4deg); }
.heart-note small { font-family:"DM Sans",sans-serif; font-size:.65rem; }
.embroidered-flower { position:absolute; z-index:3; color:var(--purple); font-size:4rem; text-shadow:2px 2px 0 white; }
.flower-one { right:15px; top:10px; transform:rotate(12deg); }
.flower-two { left:30px; top:330px; color:var(--turquoise); }

.welcome-band { width:100%; padding:19px 24px; display:flex; align-items:center; justify-content:center; gap:25px; background:var(--turquoise); color:white; text-align:center; font-weight:800; letter-spacing:.04em; }
.welcome-band p { margin:0; }
.welcome-band span { color:var(--yellow); }
.section { width:min(1160px,calc(100% - 40px)); margin:0 auto; padding:105px 0; }
.section-heading { max-width:780px; margin-bottom:45px; }
.section-heading h2,.traditions-card h2,.future-card h2,.contact-card h2 { margin-bottom:18px; font-size:clamp(2.6rem,5vw,5rem); line-height:1.03; letter-spacing:-.035em; }
.section-intro { max-width:710px; color:var(--muted); font-size:1.08rem; }

.name-story { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:18px; align-items:stretch; }
.name-piece { padding:28px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.72); box-shadow:0 16px 40px rgba(75,45,28,.07); }
.name-symbol { display:grid; place-items:center; width:76px; height:76px; margin-bottom:22px; border-radius:24px; color:white; font-family:"Fraunces",serif; font-size:2rem; font-weight:800; transform:rotate(-5deg); }
.name-piece.wo .name-symbol { background:var(--blue); }
.name-piece.xi .name-symbol { background:var(--coral); }
.name-piece.bo .name-symbol { background:var(--green); }
.name-piece h3 { margin-bottom:8px; font-size:1.55rem; }
.name-piece p { margin:0; color:var(--muted); }
.connector { align-self:center; color:var(--yellow); font-family:"Fraunces",serif; font-size:2.2rem; font-weight:800; }

.traditions-card { position:relative; overflow:hidden; display:grid; grid-template-columns:.7fr 1.3fr; gap:55px; align-items:center; padding:65px; border-radius:var(--radius-lg); background:#2d756f; color:white; box-shadow:var(--shadow); }
.traditions-card::after { content:""; position:absolute; width:360px; height:360px; right:-140px; bottom:-170px; border:40px solid rgba(255,255,255,.08); border-radius:50%; }
.traditions-card p:not(.eyebrow) { color:rgba(255,255,255,.82); font-size:1.08rem; }
.traditions-card .eyebrow { color:#ffe18b; }
.traditions-art { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.traditions-art span { display:grid; place-items:center; min-height:130px; border-radius:26px; background:rgba(255,255,255,.14); font-size:3.4rem; transform:rotate(-3deg); }
.traditions-art span:nth-child(even) { transform:translateY(20px) rotate(3deg); }

.profile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.profile-card { overflow:hidden; border-radius:var(--radius-md); background:white; box-shadow:0 18px 45px rgba(87,50,28,.10); }
.portrait-wrap { position:relative; padding:16px 16px 0; }
.portrait-placeholder { aspect-ratio:1/1.06; display:grid; place-items:center; border-radius:20px; color:white; font-family:"Fraunces",serif; font-size:7rem; overflow:hidden; }
.profile-sander .portrait-placeholder { background:linear-gradient(145deg,#4f8099,#28445f); }
.profile-lourdes .portrait-placeholder { background:linear-gradient(145deg,#f18a7a,#a6426b); }
.profile-palomita .portrait-placeholder { background:linear-gradient(145deg,#d8a65f,#8d653a); font-size:5rem; }
.portrait-label { position:absolute; left:30px; bottom:-15px; padding:8px 16px; border-radius:999px; background:var(--yellow); font-family:"Fraunces",serif; font-weight:800; transform:rotate(-3deg); }
.profile-copy { padding:34px 25px 26px; }
.profile-copy p { color:var(--muted); }
.profile-tag { display:inline-block; padding:7px 11px; border-radius:999px; background:#f7eee5; color:#7a5643; font-size:.72rem; font-weight:800; }
.growing-family { margin-top:28px; padding:34px 40px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:28px; border:2px dashed rgba(184,56,69,.27); border-radius:var(--radius-md); background:#fff0f2; }
.baby-icon { display:grid; place-items:center; width:96px; height:96px; border-radius:50%; background:var(--pink); color:white; font-size:3.4rem; }
.growing-family h3 { margin-bottom:8px; font-size:2rem; }
.growing-family p:last-child { margin:0; color:var(--muted); }

.memories-section { position:relative; }
.memory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.memory-card { position:relative; min-height:310px; padding:32px; border-radius:var(--radius-md); background:white; box-shadow:0 15px 40px rgba(83,48,27,.09); }
.memory-card.featured { transform:translateY(-18px); background:#fff0db; }
.memory-year { display:inline-block; padding:6px 10px; border-radius:999px; background:var(--ink); color:white; font-size:.73rem; font-weight:800; }
.memory-icon { margin:25px 0 16px; font-size:3rem; }
.memory-card h3 { margin-bottom:10px; font-size:1.55rem; }
.memory-card p { color:var(--muted); }
.quote-card { position:relative; margin-top:45px; padding:62px 90px; border-radius:var(--radius-lg); background:var(--coral-dark); color:white; text-align:center; overflow:hidden; }
.quote-card blockquote { margin:0; font-family:"Fraunces",serif; font-size:clamp(2rem,4vw,4.1rem); line-height:1.15; }
.quote-mark { position:absolute; left:30px; top:-30px; font-family:"Fraunces",serif; font-size:12rem; opacity:.13; }
.quote-flowers { margin-top:25px; color:var(--yellow); letter-spacing:.5em; font-size:1.4rem; }

.future-card { display:grid; grid-template-columns:1.15fr .85fr; gap:50px; padding:65px; border-radius:var(--radius-lg); background:#f0e4f7; }
.future-card p:not(.eyebrow) { color:var(--muted); }
.future-card ul { margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:13px; list-style:none; }
.future-card li { display:flex; align-items:center; gap:10px; min-height:92px; padding:16px; border-radius:19px; background:rgba(255,255,255,.72); }
.future-card li span { font-size:1.8rem; }
.future-card li b { font-size:.86rem; }

.contact-section { padding-top:40px; }
.contact-card { position:relative; overflow:hidden; padding:75px 35px; border-radius:var(--radius-lg); background:var(--yellow); text-align:center; box-shadow:var(--shadow); }
.contact-card h2 { max-width:780px; margin-left:auto; margin-right:auto; }
.contact-card .eyebrow { justify-content:center; color:#7c4f00; }
.contact-card p:not(.eyebrow) { color:#684f27; }
.email-link { display:inline-flex; margin-top:12px; padding:15px 24px; border-radius:16px; background:var(--ink); color:white; text-decoration:none; font-weight:800; }
.contact-decoration { position:absolute; right:30px; top:0; color:rgba(255,255,255,.45); font-size:11rem; transform:rotate(12deg); }

.site-footer { margin-top:70px; padding:50px 25px 42px; background:var(--ink); color:white; text-align:center; }
.footer-pattern { margin-bottom:18px; color:var(--yellow); letter-spacing:.6em; }
.footer-brand { display:inline-block; margin-bottom:8px; color:white; text-decoration:none; font-size:2.2rem; font-weight:800; }
.site-footer p { margin:0 0 8px; color:rgba(255,255,255,.72); }
.site-footer small { color:rgba(255,255,255,.55); }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 960px) {
  .site-header { flex-wrap:wrap; }
  .menu-button { display:block; margin-left:auto; }
  .language-switcher { order:3; }
  .main-nav { display:none; order:4; width:100%; margin:0; padding:12px 0 4px; flex-direction:column; align-items:flex-start; gap:12px; }
  .main-nav.open { display:flex; }
  .hero { grid-template-columns:1fr; padding-top:65px; }
  .hero-collage { min-height:540px; }
  .name-story { grid-template-columns:1fr; }
  .connector { justify-self:center; }
  .traditions-card,.future-card { grid-template-columns:1fr; }
  .profile-grid,.memory-grid { grid-template-columns:1fr; }
  .profile-card { display:grid; grid-template-columns:.8fr 1.2fr; }
  .memory-card.featured { transform:none; }
}

@media (max-width: 640px) {
  .papel-picado { height:20px; }
  .site-header { width:calc(100% - 20px); margin-top:10px; }
  .brand small { display:none; }
  .hero,.section { width:calc(100% - 28px); }
  .hero { min-height:auto; padding:60px 0 50px; gap:15px; }
  .hero h1 { font-size:clamp(3rem,15vw,4.7rem); }
  .hero-actions { flex-direction:column; }
  .button { width:100%; }
  .family-stamp { width:100px; height:100px; }
  .hero-collage { min-height:440px; }
  .frame-main { width:84%; right:6%; top:55px; }
  .photo-placeholder { min-height:330px; }
  .mini-card { padding:10px 12px; }
  .card-mexico { left:-6px; top:125px; }
  .card-netherlands { right:-4px; bottom:25px; }
  .heart-note { left:0; bottom:8px; padding:15px 17px; }
  .flower-two { display:none; }
  .welcome-band { font-size:.82rem; gap:10px; }
  .section { padding:75px 0; }
  .section-heading h2,.traditions-card h2,.future-card h2,.contact-card h2 { font-size:clamp(2.45rem,12vw,3.5rem); }
  .traditions-card,.future-card { padding:35px 24px; }
  .traditions-art span { min-height:90px; font-size:2.5rem; }
  .profile-card { display:block; }
  .growing-family { grid-template-columns:1fr; padding:28px; }
  .quote-card { padding:50px 25px; }
  .future-card ul { grid-template-columns:1fr; }
  .contact-card { padding:58px 22px; }
  .email-link { font-size:.92rem; }
}

/* Mobile collage alignment fix */
@media (max-width: 640px) {
  .hero-copy {
    min-width: 0;
  }

  .hero-actions {
    width: 100%;
    padding-inline: 2px;
  }

  .button {
    width: 100%;
    max-width: 100%;
  }

  .hero-collage {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    margin-inline: auto;
  }

  .sunburst {
    width: 390px;
    height: 390px;
    left: 50%;
    right: auto;
    top: 34px;
    transform: translateX(-50%);
  }

  .frame-main {
    width: calc(100% - 52px);
    max-width: 390px;
    left: 50%;
    right: auto;
    top: 62px;
    transform: translateX(-50%) rotate(2deg);
  }

  .photo-placeholder {
    min-height: 320px;
  }

  .photo-placeholder span {
    font-size: 6.5rem;
  }

  .card-mexico {
    left: 4px;
    top: 132px;
  }

  .card-netherlands {
    right: 4px;
    bottom: 28px;
  }

  .heart-note {
    left: 8px;
    bottom: 12px;
  }

  .flower-one {
    right: 12px;
    top: 22px;
  }
}

@media (max-width: 390px) {
  .hero-collage {
    min-height: 410px;
  }

  .frame-main {
    width: calc(100% - 42px);
    padding: 12px 12px 44px;
  }

  .photo-placeholder {
    min-height: 290px;
  }

  .mini-card {
    gap: 6px;
    padding: 9px 10px;
    font-size: .74rem;
  }

  .mini-card span {
    font-size: 1.25rem;
  }

  .heart-note {
    padding: 12px 14px;
    font-size: .9rem;
  }
}

/* Real family photos */
.family-photo {
  display:block;
  width:100%;
  height:430px;
  border-radius:4px;
  object-fit:cover;
  object-position:center center;
}

.portrait-photo {
  display:block;
  width:100%;
  height:360px;
  border-radius:20px;
  object-fit:cover;
  background:#eee4da;
}

.profile-sander .portrait-photo { object-position:50% 32%; }
.profile-lourdes .portrait-photo { object-position:50% 38%; }
.profile-palomita .portrait-photo { object-position:50% 44%; }

@media (max-width:960px) {
  .portrait-photo { height:270px; }
}

@media (max-width:640px) {
  .family-photo { height:320px; }
  .portrait-wrap {
    width:100%;
    max-width:430px;
    margin-inline:auto;
    padding:14px 14px 0;
  }
  .portrait-photo {
    height:300px;
    aspect-ratio: 4 / 3;
  }
  .profile-sander .portrait-photo { object-position:50% 34%; }
  .profile-lourdes .portrait-photo { object-position:50% 40%; }
  .profile-palomita .portrait-photo { object-position:50% 46%; }
}

@media (max-width:390px) {
  .family-photo { height:290px; }
  .portrait-photo { height:300px; }
}