/* ═══ ELLA ═══ */

/* ── Hero ── */
.el-hero {
  position:relative; min-height:80vh; overflow:hidden;
  display:flex; align-items:center; padding-top:var(--nav-h);
  background:linear-gradient(160deg,#a8d8f0 0%,#c8eaf8 30%,#d8efd0 65%,#98cc88 100%);
}
.el-hero-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.4) 0%, transparent 60%);
}
.el-hero-inner { position:relative; z-index:10; padding:4rem 2rem 14rem 5%; max-width:560px; }
.el-kicker {
  font-size:.72rem; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(44,62,45,.6); margin-bottom:1rem; display:block;
}
.el-title {
  font-family:var(--serif); font-size:clamp(4rem,10vw,7rem);
  font-weight:300; line-height:1; color:var(--ink);
  margin-bottom:1.2rem;
}
.el-subtitle {
  font-family:var(--serif); font-size:clamp(1.1rem,2.5vw,1.5rem);
  font-weight:300; line-height:1.6; color:var(--ink-soft); font-style:italic;
}
.el-subtitle em { color:var(--teal); font-weight:400; }

/* Flores flotantes hero */
.el-flowers { position:absolute; inset:0; pointer-events:none; z-index:5; }
.el-flower { position:absolute; }
.el-f1 { top:12%; right:18%; animation:elFloat 4s ease-in-out infinite; }
.el-f2 { top:8%; right:32%; animation:elFloat 3.5s ease-in-out infinite .5s; }
.el-f3 { top:20%; right:8%; animation:elFloat 5s ease-in-out infinite 1s; }
.el-f4 { top:30%; right:42%; animation:elFloat 3.8s ease-in-out infinite .3s; }
.el-f5 { top:5%; right:55%; animation:elFloat 4.5s ease-in-out infinite .8s; }
.el-f6 { bottom:30%; right:22%; animation:elFloat 4.2s ease-in-out infinite 1.2s; }
.el-f7 { top:40%; right:10%; animation:elFloat 3.2s ease-in-out infinite .6s; }
.el-f8 { bottom:35%; right:48%; animation:elFloat 3.6s ease-in-out infinite .9s; }

@keyframes elFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50% { transform:translateY(-14px) rotate(8deg); }
}

/* Haku */
.el-haku-wrap {
  position:absolute; bottom:100px; left:0; right:0; z-index:6;
  pointer-events:none; overflow:hidden;
}
.el-haku {
  width:100%; height:auto; display:block;
  animation:hakuFloat 8s ease-in-out infinite;
  filter:drop-shadow(0 8px 24px rgba(180,220,255,.5));
}
@keyframes hakuFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-16px); }
}

.el-hero-grass {
  position:absolute; bottom:0; left:0; right:0; height:160px;
  background:linear-gradient(180deg,transparent 0%,#4a8c40 55%,#2d5a27 100%);
  clip-path:ellipse(60% 70% at 50% 100%); z-index:2;
}

/* ── Tags y tipografía compartida ── */
.el-tag {
  display:block; font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--teal); margin-bottom:.8rem;
}
.el-h2 {
  font-family:var(--serif); font-size:clamp(2rem,4.5vw,3.2rem);
  font-weight:300; line-height:1.1; color:var(--ink); margin-bottom:1.2rem;
}
.el-h2 em { color:var(--teal); font-weight:400; }
.el-h2.centered { text-align:center; }
.el-p {
  font-family:var(--serif); font-size:1.05rem;
  line-height:1.78; color:var(--ink-soft); margin-bottom:1rem;
  font-style:italic; max-width:52ch;
}
.el-p em { color:var(--ink); font-style:normal; }
.el-sub-p {
  font-family:var(--serif); font-size:1rem; font-style:italic;
  color:var(--ink-soft); line-height:1.7; max-width:54ch; margin:0 auto;
}

/* ── Flores dispersas (background) ── */
.el-scattered-flowers { position:absolute; inset:0; pointer-events:none; z-index:1; }
.el-sf { position:absolute; }
.el-sf1 { top:8%; left:5%; animation:elFloat 4s ease-in-out infinite; }
.el-sf2 { top:20%; right:6%; animation:elFloat 5s ease-in-out infinite .5s; }
.el-sf3 { bottom:15%; left:8%; animation:elFloat 3.8s ease-in-out infinite 1s; }
.el-sf4 { bottom:25%; right:4%; animation:elFloat 4.5s ease-in-out infinite .3s; }
.el-sd1 { top:10%; left:3%; animation:elFloat 4.2s ease-in-out infinite; }
.el-sd2 { top:60%; right:5%; animation:elFloat 3.6s ease-in-out infinite .7s; }
.el-sd3 { bottom:12%; left:6%; animation:elFloat 5s ease-in-out infinite 1.2s; }
.el-sk1 { top:5%; right:8%; animation:elFloat 4.5s ease-in-out infinite .4s; }
.el-sk2 { top:30%; left:4%; animation:elFloat 3.5s ease-in-out infinite .9s; }
.el-sk3 { bottom:20%; right:6%; animation:elFloat 4.8s ease-in-out infinite .2s; }

/* ── Logro ── */
.el-logro {
  padding:7rem 0;
  background:var(--cream);
  position:relative; overflow:hidden;
}
.el-logro-petals { position:absolute; inset:0; pointer-events:none; }
.el-petal { position:absolute; animation:petalFall linear infinite; }
.el-p1 { left:5%; animation-duration:8s; animation-delay:0s; top:-40px; }
.el-p2 { left:20%; animation-duration:11s; animation-delay:2s; top:-30px; }
.el-p3 { left:40%; animation-duration:9s; animation-delay:1s; top:-35px; }
.el-p4 { left:60%; animation-duration:12s; animation-delay:3s; top:-25px; }
.el-p5 { left:75%; animation-duration:8.5s; animation-delay:1.5s; top:-40px; }
.el-p6 { left:90%; animation-duration:10s; animation-delay:.5s; top:-30px; }

@keyframes petalFall {
  0% { transform:translateY(0) rotate(0deg); opacity:.8; }
  100% { transform:translateY(100vh) rotate(360deg); opacity:0; }
}

.el-logro-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}
.el-logro-text { position:relative; z-index:2; }
.el-badge {
  display:flex; align-items:center; gap:1rem; margin-top:1.5rem;
  padding:1rem 1.5rem; background:rgba(201,168,76,.08);
  border:1px solid rgba(201,168,76,.25); border-radius:16px;
}
.el-badge span {
  font-family:var(--serif); font-size:.9rem; color:var(--gold); font-style:italic;
}
.el-logro-photo { display:flex; justify-content:center; position:relative; z-index:2; }
.el-photo-frame {
  position:relative; width:100%; max-width:380px;
  border-radius:50% 40% 50% 40%/40% 50% 40% 50%;
  overflow:hidden; border:4px solid rgba(255,255,255,.9);
  box-shadow:0 24px 60px rgba(44,62,45,.18);
  aspect-ratio:3/4;
}
.el-photo-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.el-photo-rose {
  position:absolute; top:-12px; right:-12px;
  animation:elFloat 3s ease-in-out infinite;
}

/* ── Divisores ── */
.el-wave { line-height:0; }
.el-wave svg { width:100%; display:block; }
.el-wave-dark { background:#1a2a1a; }
.el-wave-light { background:#1a2a1a; }

/* ── Familia ── */
.el-familia {
  padding:7rem 0;
  background:linear-gradient(160deg,#fff8f0 0%,#fdf0f0 100%);
  position:relative; overflow:hidden;
}
.el-section-header { text-align:center; margin-bottom:4rem; }
.el-familia-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-bottom:4rem;
}
.el-fam-card {
  background:white; border-radius:24px; padding:2rem 1.5rem;
  text-align:center; border:1.5px solid rgba(201,168,76,.12);
  box-shadow:0 8px 32px rgba(44,62,45,.06);
  transition:transform .3s var(--ease), box-shadow .3s ease;
  position:relative; z-index:2;
}
.el-fam-card:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(44,62,45,.1); }
.el-fam-mama { border-color:rgba(240,160,176,.4); background:linear-gradient(160deg,white 0%,#fff0f4 100%); }
.el-fam-icon { display:flex; justify-content:center; margin-bottom:1.2rem; }
.el-fam-name {
  font-family:var(--serif); font-size:1.4rem; font-weight:400;
  color:var(--ink); margin-bottom:.6rem;
}
.el-fam-p {
  font-family:var(--serif); font-size:.9rem; line-height:1.65;
  color:var(--ink-soft); font-style:italic; margin-bottom:1rem;
}
.el-fam-tag {
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--teal);
}
.el-familia-photo { display:flex; justify-content:center; position:relative; z-index:2; }
.el-photo-familia {
  position:relative; max-width:860px; width:100%;
  border-radius:24px; overflow:hidden;
  box-shadow:0 20px 60px rgba(44,62,45,.15);
  border:3px solid rgba(255,255,255,.9);
}
.el-photo-familia img { width:100%; display:block; object-fit:contain; background:#f5ede0; }
.el-photo-caption {
  position:absolute; bottom:0; left:0; right:0; padding:1.5rem;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
  color:white; font-family:var(--serif); font-size:1rem; font-style:italic;
  text-align:center;
}

/* 3-col familia */
.el-familia-3 { grid-template-columns:repeat(3,1fr); }

/* ── Mushu ── */
.el-mushu-section {
  padding:7rem 0;
  background:linear-gradient(160deg,#1a1a10 0%,#2a1008 50%,#180808 100%);
  position:relative; overflow:hidden;
}
.el-sf-dark { filter:none; }
.el-mushu-inner {
  display:grid; grid-template-columns:auto 1fr auto; gap:3.5rem; align-items:center;
}
.el-mushu-char { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.el-mushu-svg {
  width:180px; height:auto; display:block;
  filter:drop-shadow(0 12px 40px rgba(200,40,20,.4));
  animation:mushuFloat 4s ease-in-out infinite;
}
@keyframes mushuFloat {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50% { transform:translateY(-14px) rotate(2deg); }
}
.el-mushu-label {
  font-family:var(--serif); font-size:.85rem; font-style:italic;
  color:rgba(255,200,100,.7); text-align:center; max-width:180px; line-height:1.5;
}
.el-cats { display:flex; gap:2rem; margin-top:2rem; flex-wrap:wrap; }
.el-cat-item { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.el-cat-item p {
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* Calcifer */
.el-calcifer-wrap { display:flex; flex-direction:column; align-items:center; gap:1rem; flex-shrink:0; }
.el-calcifer-svg {
  width:160px; height:auto; display:block;
  filter:drop-shadow(0 8px 30px rgba(248,96,16,.5));
  animation:calciferFlicker 2s ease-in-out infinite;
}
@keyframes calciferFlicker {
  0%,100% { transform:scaleY(1) translateY(0); }
  25% { transform:scaleY(1.05) translateY(-4px); }
  50% { transform:scaleY(.97) translateY(2px); }
  75% { transform:scaleY(1.03) translateY(-2px); }
}
@keyframes sparkFloat {
  0%,100% { transform:translateY(0); opacity:.8; }
  50% { transform:translateY(-12px); opacity:.2; }
}
.el-calcifer-label {
  font-family:var(--serif); font-size:.78rem; font-style:italic;
  color:rgba(248,200,100,.6); text-align:center; max-width:160px; line-height:1.4;
}

/* ── Series ── */
.el-series {
  padding:7rem 0;
  background:linear-gradient(160deg,#fdf6f0 0%,#f8f0f8 100%);
  position:relative; overflow:hidden;
}
.el-series-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:4rem;
}
.el-serie-card {
  background:white; border-radius:24px; padding:2.5rem 2rem;
  border:1.5px solid rgba(106,184,160,.15);
  box-shadow:0 8px 32px rgba(44,62,45,.06);
  transition:transform .3s var(--ease), box-shadow .3s ease;
  display:flex; flex-direction:column; gap:.5rem;
}
.el-serie-card:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(44,62,45,.1); }
.el-serie-icon { margin-bottom:.5rem; }
.el-serie-title {
  font-family:var(--serif); font-size:1.3rem; font-weight:400; color:var(--ink);
}
.el-serie-sub {
  font-family:var(--jp); font-size:.78rem; color:var(--teal); letter-spacing:.08em;
}
.el-serie-p {
  font-family:var(--serif); font-size:.95rem; line-height:1.7;
  color:var(--ink-soft); font-style:italic; margin:.4rem 0;
}
.el-serie-tag {
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:auto;
}

.el-series-foto {
  display:grid; grid-template-columns:280px 1fr; gap:4rem; align-items:center;
}
.el-foto-wrap {
  border-radius:50% 40% 50% 40%/40% 50% 40% 50%;
  overflow:hidden; border:4px solid rgba(255,255,255,.9);
  box-shadow:0 20px 60px rgba(44,62,45,.15);
  aspect-ratio:3/4;
}
.el-foto-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.el-quote-big {
  font-family:var(--serif); font-size:clamp(1.1rem,2.5vw,1.5rem);
  font-style:italic; line-height:1.65; color:var(--ink-soft);
  border-left:3px solid var(--teal); padding-left:1.5rem;
}

/* ── Gustos ── */
.el-gustos { padding:7rem 0; background:white; }
.el-gustos-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
}
.el-gusto-card {
  text-align:center; padding:2.5rem 1.5rem;
  background:var(--cream); border-radius:24px;
  border:1.5px solid rgba(44,62,45,.06);
  box-shadow:0 4px 20px rgba(44,62,45,.04);
  transition:transform .3s var(--ease), box-shadow .3s ease;
}
.el-gusto-card:hover { transform:translateY(-5px); box-shadow:0 12px 40px rgba(44,62,45,.08); }
.el-gusto-icon { display:flex; justify-content:center; margin-bottom:1.2rem; }
.el-gusto-title {
  font-family:var(--serif); font-size:1.2rem; font-weight:400;
  color:var(--ink); margin-bottom:.6rem;
}
.el-gusto-p {
  font-family:var(--serif); font-size:.9rem; line-height:1.6;
  color:var(--ink-soft); font-style:italic;
}

/* ── Mensaje final ── */
.el-final {
  padding:7rem 0;
  background:linear-gradient(160deg,#0e1a20 0%,#1a2a30 50%,#0e1820 100%);
  position:relative; overflow:hidden;
}
.el-final-flowers { position:absolute; inset:0; pointer-events:none; }
.el-ff { position:absolute; }
.el-ff1 { top:10%; left:6%; animation:elFloat 5s ease-in-out infinite; }
.el-ff2 { top:20%; right:8%; animation:elFloat 4s ease-in-out infinite .5s; }
.el-ff3 { bottom:20%; left:4%; animation:elFloat 4.5s ease-in-out infinite 1s; }
.el-ff4 { bottom:30%; right:5%; animation:elFloat 3.8s ease-in-out infinite .3s; }

.el-final-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
  position:relative; z-index:2;
}
.el-final-photo {
  border-radius:50% 40% 50% 40%/40% 50% 40% 50%;
  overflow:hidden; border:3px solid rgba(255,255,255,.2);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  aspect-ratio:3/4;
}
.el-final-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.el-final-quote {
  margin:2rem 0; padding:1.5rem 1.75rem;
  background:rgba(255,255,255,.06); border-left:3px solid rgba(248,216,152,.5);
  border-radius:0 16px 16px 0;
}
.el-final-quote p {
  font-family:var(--serif); font-size:1rem; font-style:italic;
  color:rgba(255,255,255,.7); line-height:1.75;
}
.el-final-quote cite {
  display:block; margin-top:.8rem; font-size:.8rem;
  letter-spacing:.1em; color:rgba(248,216,152,.7); font-style:normal;
}
.el-btn-carta {
  display:inline-block; margin-top:1.5rem;
  padding:1rem 2.5rem; border-radius:50px;
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.25);
  color:white; font-family:var(--serif); font-size:1rem; font-style:italic;
  backdrop-filter:blur(8px); text-decoration:none;
  transition:background .3s ease, transform .3s var(--ease);
}
.el-btn-carta:hover { background:rgba(255,255,255,.2); transform:translateY(-3px); }

/* ── Responsive ── */
@media(max-width:1100px){
  .el-familia-grid { grid-template-columns:repeat(2,1fr); }
  .el-series-grid { grid-template-columns:repeat(2,1fr); }
  .el-gustos-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
  .el-logro-grid,
  .el-mushu-inner,
  .el-series-foto,
  .el-final-inner { grid-template-columns:1fr; gap:2.5rem; }
  .el-mushu-inner { grid-template-columns:1fr; }
  .el-mushu-char, .el-calcifer-wrap { flex-direction:row; justify-content:center; }
  .el-mushu-svg { width:120px; }
  .el-calcifer-svg { width:110px; }
  .el-familia-3 { grid-template-columns:1fr; }
  .el-haku-wrap { bottom:60px; }
  .el-hero-inner { padding-bottom:18rem; }
}
@media(max-width:600px){
  .el-familia-grid { grid-template-columns:1fr; }
  .el-series-grid { grid-template-columns:1fr; }
  .el-gustos-grid { grid-template-columns:1fr 1fr; }
  .el-cats { justify-content:center; }
}