/* ===== Paleta tomada del logo. Cuando haya manual de identidad, solo cambia estas variables ===== */
:root{
  --crema:#FFF3E9;
  --coral:#E8825A;  --coral-deep:#C4532D;
  --verde:#6B9B7A;  --verde-deep:#3F6B4F;
  --amarillo:#F5C95C;
  --peri:#8E9AD6;   --peri-soft:#E9EBF8;  --peri-deep:#5560A8;
  --tinta:#3A2D2A;
}
html{scroll-behavior:smooth}
body{background:var(--crema);color:var(--tinta);font-family:"DM Sans",system-ui,sans-serif;font-size:1.05rem;line-height:1.6}
h1,h2,h3,.wordmark{font-family:"Fredoka",system-ui,sans-serif;line-height:1.1;letter-spacing:-.01em}
h2{font-weight:600;font-size:clamp(1.9rem,4.5vw,2.8rem);margin-bottom:.6rem}
section{padding:clamp(3.5rem,8vw,6rem) 0}
a{color:var(--coral-deep)}
:focus-visible{outline:3px solid var(--peri-deep);outline-offset:3px;border-radius:6px}
.lead-sm{max-width:36ch;font-size:1.15rem}

/* Botones */
.btn-pw,.btn-pw-ghost{border-radius:999px;padding:.8rem 1.6rem;font-weight:700;border:2px solid var(--coral-deep)}
.btn-pw{background:var(--coral-deep);color:#fff}
.btn-pw:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}
.btn-pw-ghost{background:transparent;color:var(--coral-deep)}
.btn-pw-ghost:hover{background:var(--coral-deep);color:#fff}

/* Logo provisional (se reemplaza solo cuando exista img/logo.png) */
.navbar{background:var(--crema);padding:.8rem 0}
.navbar-brand{display:flex;align-items:center;gap:.6rem}
.navbar-brand img{height:52px;width:52px;border-radius:50%}
.wordmark{font-weight:700;font-size:1.5rem;display:inline-flex;align-items:baseline;gap:.35rem;line-height:1}
.wordmark .e{color:var(--coral)} .wordmark .l{color:var(--verde)} .wordmark .p{color:#D9A21F;font-size:1.05rem}
.nav-link{color:var(--tinta);font-weight:500}
.nav-link:hover{color:var(--coral-deep)}

/* Espacios de foto: si existe la imagen se ve; si no, se ve el recuadro con su nombre de archivo */
.slot{position:relative;display:grid;place-content:center;justify-items:center;gap:.4rem;overflow:hidden;background:var(--peri-soft);color:var(--peri-deep);text-align:center;font-size:.85rem;padding:1rem}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .paw{width:34px;height:34px;fill:var(--peri)}

/* Hero */
.hero{padding-top:clamp(2rem,5vw,4rem)}
.hero h1{font-weight:700;font-size:clamp(2.7rem,7.5vw,4.8rem);text-wrap:balance;margin-bottom:1.1rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-visual{position:relative;max-width:420px;margin:3.5rem auto 0;padding-bottom:.5rem}
.hero-visual::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:var(--amarillo);right:-9%;bottom:-6%}
.hero-visual .slot{position:relative;aspect-ratio:4/5;border-radius:999px 999px 28px 28px}
.crown{position:absolute;z-index:2;width:34%;top:-13%;left:50%;transform:translateX(-50%) rotate(-6deg);animation:settle .9s cubic-bezier(.3,1.5,.5,1) .3s both}
@keyframes settle{from{opacity:0;transform:translateX(-50%) translateY(-34px) rotate(-16deg)}to{opacity:1;transform:translateX(-50%) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.crown{animation:none}html{scroll-behavior:auto}}

/* Servicios */
.band-peri{background:var(--peri-soft)}
.svc-list{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;gap:0 3.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.svc{display:flex;gap:1rem;padding:1.4rem 0;border-top:2px solid rgba(85,96,168,.25)}
.svc h3{font-size:1.3rem;font-weight:600;margin-bottom:.25rem}
.svc p{margin:0}
.dot{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.dot svg{width:26px;height:26px;fill:#fff}
.dot.c1{background:var(--coral-deep)} .dot.c2{background:var(--verde-deep)} .dot.c3{background:var(--peri-deep)} .dot.c4{background:var(--amarillo)}
.dot.c4 svg{fill:var(--tinta)}
.note{margin-top:1.6rem;font-weight:500}

/* Galería */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.2rem}
@media (min-width:768px){.gallery{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.gallery .slot{aspect-ratio:1}
.gallery .slot:nth-child(3n+1){border-radius:999px 999px 24px 24px}
.gallery .slot:nth-child(3n+2){border-radius:28px}
.gallery .slot:nth-child(3n){border-radius:50%}
.gallery .slot:nth-child(2n){background:#FBE3D6;color:var(--coral-deep)}
.gallery .slot:nth-child(2n) .paw{fill:var(--coral)}

/* Sobre Andrea */
.band-verde{background:var(--verde-deep);color:var(--crema)}
.band-verde h2{color:var(--amarillo)}
.about-photo{max-width:280px;aspect-ratio:1;border-radius:50%;margin:0 auto}
.band-verde .slot{background:rgba(255,243,233,.14);color:var(--crema)}
.band-verde .slot .paw{fill:var(--crema)}

/* Contacto */
.contact-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:2.2rem 0}
.contact-grid h3{font-size:1.15rem;font-weight:600;color:var(--verde-deep);margin-bottom:.2rem}
.contact-grid p{margin:0}
footer{padding:2rem 0;background:var(--tinta);color:var(--crema);font-size:.95rem}
footer a{color:var(--amarillo)}
.about-text{max-width:52ch}