/* =========================================================================
   CELESTERAPHY — Design tokens
   ========================================================================= */
:root{
  /* Color palette */
  --c-bg:            #FDF8F4;   /* blanco cálido */
  --c-surface:       #FFFFFF;
  --c-rose:          #F3CFD6;   /* rosa cuarzo */
  --c-rose-deep:      #E3A6B3;
  --c-lavender:       #E7DCF2;   /* lavanda */
  --c-lilac:          #C6A6DE;   /* lila — acento profundo */
  --c-lilac-deep:      #A97FC7;
  --c-gray-warm:       #7A716B;
  --c-ink:             #3A322E;   /* texto principal */
  --c-gold:            #C6A15B;   /* dorado sutil */
  --c-gold-soft:       rgba(198,161,91,0.28);
  --c-border:          rgba(58,50,46,0.08);

  /* Type */
  --f-display: 'Cormorant Garamond', serif;
  --f-body: 'Poppins', sans-serif;

  /* Layout */
  --container-w: 1180px;
  --section-pad: 130px;
  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --shadow-soft: 0 30px 60px -25px rgba(120, 90, 110, 0.25);
  --shadow-card: 0 20px 45px -22px rgba(120, 90, 110, 0.22);
  --ease: cubic-bezier(.22,1,.36,1);
}

/* =========================================================================
   Reset & base
   ========================================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--f-body);
  font-weight: 300;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--f-display); font-weight:500; margin:0 0 .5em; color: var(--c-ink); }
p{ margin:0 0 1em; line-height:1.75; color: var(--c-gray-warm); }
button{ font-family: inherit; cursor:pointer; }

.container{
  width:100%;
  max-width: var(--container-w);
  margin-inline:auto;
  padding-inline: 32px;
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--c-ink); color:#fff; padding:12px 20px; border-radius: 8px; z-index:999;
}
.skip-link:focus{ left:20px; top:20px; }

:focus-visible{
  outline: 2px solid var(--c-lilac-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================================
   Reveal on scroll
   ========================================================================= */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--delay, 0s);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================================
   Typography helpers
   ========================================================================= */
.eyebrow{
  font-family: var(--f-body);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-lilac-deep);
  font-weight:500;
  margin-bottom: 1em;
}
.eyebrow--center{ text-align:center; }

.section-title{
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  max-width: 640px;
  margin-bottom: .4em;
}
.section-title--center{ margin-inline:auto; text-align:center; }

.section-intro{
  max-width: 560px;
  margin: 0 auto 3.5rem;
  text-align:center;
  font-size:1.05rem;
}

.lead{ font-size:1.1rem; color: var(--c-gray-warm); }

.highlight{
  color: var(--c-lilac-deep);
  font-style: italic;
  position:relative;
  white-space:nowrap;
}

.section{ padding-block: var(--section-pad); }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding: 16px 34px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight:500;
  letter-spacing:.01em;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s ease, color .3s ease;
  border: 1px solid transparent;
  white-space:nowrap;
}
.btn--primary{
  background: linear-gradient(135deg, var(--c-lilac), var(--c-rose-deep));
  color:#fff;
  box-shadow: 0 16px 34px -14px rgba(169,127,199,.55);
}
.btn--primary:hover{ transform: translateY(-3px); box-shadow: 0 22px 40px -14px rgba(169,127,199,.65); }
.btn--ghost{
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-ink);
}
.btn--ghost:hover{ border-color: var(--c-lilac-deep); color: var(--c-lilac-deep); transform: translateY(-3px); }
.btn--small{ padding: 11px 24px; font-size:.85rem; }
.btn--large{ padding: 20px 46px; font-size:1.05rem; }
.btn--full{ width:100%; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding-block: 18px;
  transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(253,248,244,0.65);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(58,50,46,0.06);
  z-index:-1;
  opacity:0;
  transition: opacity .4s ease;
}
.site-header.is-scrolled{ padding-block:10px; }
.site-header.is-scrolled::before{ opacity:1; }
.site-header.is-scrolled{ box-shadow: 0 8px 30px -20px rgba(58,50,46,.25); }

.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.header__brand{ display:inline-flex; align-items:center; }
.header__logo{ height: 52px; width:auto; transition: height .4s var(--ease); }
.site-header.is-scrolled .header__logo{ height: 42px; }

.header__nav-list{ display:flex; align-items:center; gap: 34px; }
.header__nav-list a{
  font-size:.92rem; font-weight:400; color: var(--c-ink); position:relative; padding-block:4px;
}
.header__nav-list a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--c-lilac-deep);
  transition: right .35s var(--ease);
}
.header__nav-list a:hover::after{ right:0; }

.header__actions{ display:flex; align-items:center; gap:18px; }
.header__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  transition: all .35s var(--ease);
}
.header__icon:hover{ color:#fff; background: var(--c-lilac-deep); border-color: var(--c-lilac-deep); transform: translateY(-2px); }

.header__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; padding:0;
}
.header__toggle span{
  display:block; height:1.5px; width:100%; background: var(--c-ink); border-radius:2px;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.header__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.header__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.header__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero{
  position:relative;
  padding-top: clamp(140px, 20vw, 190px);
  padding-bottom: 100px;
  overflow:hidden;
}
.hero__aura{
  position:absolute; border-radius:50%; filter: blur(70px);
  z-index:-1;
  animation: breathe 9s ease-in-out infinite;
}
.hero__aura--one{
  width: 480px; height:480px; top:-160px; right:-120px;
  background: radial-gradient(circle, var(--c-rose) 0%, transparent 70%);
}
.hero__aura--two{
  width: 420px; height:420px; bottom:-200px; left:-140px;
  background: radial-gradient(circle, var(--c-lavender) 0%, transparent 70%);
  animation-delay: -4s;
}
@keyframes breathe{
  0%, 100%{ transform: scale(1); opacity:.9; }
  50%{ transform: scale(1.12); opacity:1; }
}

.hero__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
}
.hero__title{
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  line-height:1.12;
  margin-bottom:.4em;
}
.hero__subtitle{
  font-size:1.12rem; max-width: 460px; margin-bottom: 2.2em; color: var(--c-gray-warm);
}
.hero__actions{ display:flex; gap:18px; flex-wrap:wrap; }

.hero__image{
  position:relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  background: linear-gradient(155deg, var(--c-rose) 0%, var(--c-lavender) 52%, var(--c-lilac) 100%);
}
.hero__image img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__image::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 2px, transparent 2px 34px);
  mix-blend-mode: overlay;
}
.placeholder-tag{
  position:relative; z-index:2;
  font-family: var(--f-body); font-size:.72rem; letter-spacing:.03em; text-align:center;
  color: var(--c-ink); background: rgba(255,255,255,.72); backdrop-filter: blur(6px);
  padding: 10px 16px; border-radius: 999px; line-height:1.5;
}
.placeholder-tag code{ font-family: monospace; font-size:.7rem; }

.hero__scroll{
  position:absolute; bottom: 30px; left:50%; transform: translateX(-50%);
  width:26px; height:42px; border:1.4px solid var(--c-border); border-radius:20px;
  display:flex; justify-content:center; padding-top:8px;
}
.hero__scroll span{
  width:4px; height:8px; border-radius:2px; background: var(--c-lilac-deep);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ transform: translateY(0); opacity:1; }
  70%{ transform: translateY(14px); opacity:0; }
  100%{ opacity:0; }
}

/* =========================================================================
   Qué es Celesteraphy
   ========================================================================= */
.que-es__grid{
  display:grid; grid-template-columns: 1.3fr .7fr; gap: 70px; align-items:center;
}
.que-es__text h2{ font-size: clamp(1.9rem, 3vw, 2.5rem); }
.que-es__ornament{ display:flex; justify-content:center; }
.aura-badge{
  width: 240px; height:240px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--c-rose) 45%, var(--c-lavender) 100%);
  box-shadow: var(--shadow-soft);
  position:relative;
}
.aura-badge::before, .aura-badge::after{
  content:""; position:absolute; border-radius:50%; border:1px solid var(--c-gold-soft);
}
.aura-badge::before{ inset:-22px; }
.aura-badge::after{ inset:-44px; opacity:.6; }

/* =========================================================================
   Servicios
   ========================================================================= */
.servicios{ background: var(--c-surface); position:relative; }
.servicios__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 34px;
}
.card-service{
  background: var(--c-bg);
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--c-border);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display:flex; flex-direction:column;
}
.card-service:hover{ transform: translateY(-8px); box-shadow: 0 30px 55px -22px rgba(120,90,110,.3); }
.card-service__band{
  background: linear-gradient(120deg, var(--c-lilac), var(--c-rose-deep));
  color:#fff; text-align:center; font-size:.85rem; font-weight:500; padding: 12px 20px;
}
.card-service__body{ padding: 44px 40px 40px; display:flex; flex-direction:column; flex:1; }
.card-service__body h3{ font-size:1.9rem; margin-bottom:.3em; }
.card-service__desc{ margin-bottom:1.4em; }
.card-service__list{ margin-bottom: 2em; }
.card-service__list li{
  position:relative; padding-left: 26px; margin-bottom:.7em; color: var(--c-ink); font-size:.95rem;
}
.card-service__list li::before{
  content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%;
  background: var(--c-rose-deep);
}
.card-service__price{
  font-family: var(--f-display); font-size:2.1rem; color: var(--c-ink); margin-bottom:1.4em; margin-top:auto;
}
.card-service__price span{ font-size:1rem; font-family: var(--f-body); color: var(--c-gray-warm); }

/* =========================================================================
   Cómo funciona — timeline
   ========================================================================= */
.timeline{
  max-width: 640px; margin-inline:auto; position:relative;
}
.timeline::before{
  content:""; position:absolute; left:23px; top:14px; bottom:14px; width:1px;
  background: linear-gradient(var(--c-gold-soft), var(--c-gold-soft)) ;
  background-image: repeating-linear-gradient(to bottom, var(--c-gold) 0 6px, transparent 6px 12px);
  opacity:.55;
}
.timeline__item{
  display:flex; gap: 28px; padding-bottom: 46px; position:relative;
}
.timeline__item:last-child{ padding-bottom:0; }
.timeline__marker{
  flex:none;
  width:48px; height:48px; border-radius:50%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-size:1.3rem; color: var(--c-lilac-deep);
  box-shadow: 0 12px 24px -14px rgba(120,90,110,.3);
}
.timeline__content h3{ font-size:1.35rem; margin-bottom:.25em; }
.timeline__content p{ margin:0; }

/* =========================================================================
   Diferenciales
   ========================================================================= */
.diferenciales{ background: var(--c-surface); }
.diferenciales__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 46px 40px;
}
.diferencial{ text-align:left; }
.diferencial__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(140deg, var(--c-rose), var(--c-lavender));
  color: var(--c-ink); margin-bottom: 1.1em;
}
.diferencial__icon svg{ width:22px; height:22px; }
.diferencial h3{ font-size:1.25rem; margin-bottom:.3em; }
.diferencial p{ margin:0; font-size:.95rem; }

/* =========================================================================
   Sobre mí
   ========================================================================= */
.sobre-mi__grid{
  display:grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items:center;
}
.sobre-mi__photo{
  position:relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  background: linear-gradient(160deg, var(--c-lavender), var(--c-rose));
}
.sobre-mi__photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.sobre-mi__text h2{ font-size: clamp(1.9rem, 3vw, 2.4rem); }

/* =========================================================================
   Testimonios
   ========================================================================= */
.testimonios__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
  justify-content: center;
  gap: 34px;
}
.testimonio{
  background: var(--c-surface);
  border-radius: var(--radius-md);
  padding: 40px 34px 32px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--c-border);
  margin:0;
}
.testimonio__quote-mark{
  font-family: var(--f-display); font-size:3.4rem; color: var(--c-rose-deep); line-height:0; display:block; margin-bottom: .3em;
}
.testimonio blockquote{
  margin: 0 0 1.6em; font-style: italic; color: var(--c-ink); font-size:.98rem; line-height:1.7;
}
.testimonio figcaption{ display:flex; align-items:center; gap:12px; }
.testimonio__avatar{
  width:38px; height:38px; border-radius:50%; background: var(--c-lavender);
  display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:500; color: var(--c-ink);
}
.testimonio__name{ font-size:.9rem; font-weight:500; }

/* =========================================================================
   FAQ / Accordion
   ========================================================================= */
.faq__container{ max-width: 780px; }
.accordion__item{
  border-bottom: 1px solid var(--c-border);
}
.accordion__item h3{ margin:0; }
.accordion__trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:none; padding: 26px 4px; text-align:left;
  font-family: var(--f-display); font-size:1.25rem; font-weight:500; color: var(--c-ink);
}
.accordion__icon{
  position:relative; flex:none; width:20px; height:20px;
}
.accordion__icon::before, .accordion__icon::after{
  content:""; position:absolute; background: var(--c-lilac-deep); border-radius:2px;
  transition: transform .4s var(--ease);
}
.accordion__icon::before{ left:0; top:9px; width:20px; height:1.6px; }
.accordion__icon::after{ left:9px; top:0; width:1.6px; height:20px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after{ transform: rotate(90deg); opacity:0; }

.accordion__panel{
  max-height:0; overflow:hidden; transition: max-height .5s var(--ease);
}
.accordion__panel p{ padding: 0 4px 26px; margin:0; }

/* =========================================================================
   CTA final
   ========================================================================= */
.cta-final{
  position:relative; overflow:hidden;
  padding-block: 150px;
  background: linear-gradient(155deg, var(--c-lavender), var(--c-rose) 60%, var(--c-lilac));
  text-align:center;
}
.cta-final__aura{
  position:absolute; width: 620px; height:620px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  top:50%; left:50%; transform: translate(-50%,-50%);
  animation: breathe 10s ease-in-out infinite;
}
.cta-final__content{ position:relative; z-index:1; }
.cta-final h2{ font-size: clamp(2rem, 4vw, 3rem); max-width: 640px; margin-inline:auto; margin-bottom: 1em; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{ background: var(--c-ink); color: rgba(255,255,255,.75); padding-block: 50px; }
.footer__inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
}
.footer__logo{ height:44px; width:auto; filter: brightness(0) invert(1); opacity:.9; }
.footer__links{ display:flex; gap: 28px; flex-wrap:wrap; }
.footer__links a{ font-size:.9rem; transition: color .3s ease; }
.footer__links a:hover{ color: var(--c-rose); }
.footer__rights{ font-size:.8rem; margin:0; color: rgba(255,255,255,.5); width:100%; text-align:center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 10px; }

/* =========================================================================
   WhatsApp floating button
   ========================================================================= */
.whatsapp-float{
  position:fixed; bottom: 26px; right: 26px; z-index: 400;
  width:60px; height:60px; border-radius:50%;
  background: linear-gradient(135deg, var(--c-lilac), var(--c-rose-deep));
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 16px 34px -12px rgba(169,127,199,.6);
  transition: transform .4s var(--ease);
}
.whatsapp-float:hover{ transform: scale(1.08); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px){
  :root{ --section-pad: 96px; }
  .header__nav{
    position:fixed; inset: 0 0 0 auto; width: min(320px, 82vw); height:100vh;
    background: var(--c-surface);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    box-shadow: -20px 0 50px -20px rgba(58,50,46,.25);
    padding: 110px 36px 40px;
  }
  .header__nav.is-open{ transform: translateX(0); }
  .header__nav-list{ flex-direction:column; align-items:flex-start; gap: 26px; }
  .header__nav-list a{ font-size:1.1rem; }
  .header__toggle{ display:flex; }
  .header__actions .header__icon{ display:none; }

  .hero__grid, .que-es__grid, .sobre-mi__grid{ grid-template-columns: 1fr; }
  .que-es__ornament{ order:-1; }
  .aura-badge{ width:160px; height:160px; }
  .sobre-mi__photo{ max-width: 340px; margin-inline:auto; }

  .servicios__grid, .diferenciales__grid, .testimonios__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px){
  .container{ padding-inline: 22px; }
  .servicios__grid, .diferenciales__grid, .testimonios__grid{ grid-template-columns: 1fr; }
  .hero{ padding-top: 130px; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .card-service__body{ padding: 36px 26px 30px; }
  .cta-final{ padding-block: 100px; }
  .footer__inner{ flex-direction:column; text-align:center; justify-content:center; }
  .footer__links{ justify-content:center; }
}