/* ================================================================
   PHIORAVITA — Alta Joyería
   Sistema: paleta Cacao · Cormorant Garamond + Jost · símbolo φ
   ================================================================ */

:root{
  --cacao:#3A2C2A;
  --cacao-deep:#2E2321;
  --oro:#A67C52;
  --oro-claro:#C4A06A;
  --oro-prof:#8A6640;
  --marfil:#FAF7F2;
  --fondo:#FBF6EF;
  --gris:#7A6E64;
  --tinta:#4A3F3A;
  --linea:#E4D9CB;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --w: min(1180px, 92vw);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis{height:auto}
body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--tinta);
  background:var(--fondo);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-family:var(--serif);color:var(--cacao);font-weight:600;line-height:1.08}
h2{font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:.01em}
h3{font-size:1.35rem}

.eyebrow{
  font-size:.72rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--oro-prof);margin-bottom:1.1rem;
}
.eyebrow--light{color:var(--oro-claro)}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:500;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;padding:1.05rem 2.3rem;
  border-radius:999px;transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s, color .35s, border-color .35s;
}
.btn--gold{background:var(--oro);color:var(--marfil)}
.btn--gold:hover{background:var(--oro-prof);transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--oro-claro);color:var(--marfil)}
.btn--ghost:hover{border-color:var(--marfil);transform:translateY(-2px)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  transition:background .4s, box-shadow .4s, padding .4s;
}
.nav.is-solid{background:rgba(58,44,42,.96);backdrop-filter:blur(8px);padding:.8rem clamp(1.2rem,4vw,3rem);box-shadow:0 1px 0 rgba(196,160,106,.25)}
.nav__brand{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marfil)}
.nav__brand svg{stroke:var(--oro-claro);stroke-width:2.6;fill:none}
.nav__links{display:flex;gap:2.2rem}
.nav__links a{font-size:.78rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:#D8CFC6;transition:color .3s}
.nav__links a:hover{color:var(--oro-claro)}
.nav__cta{font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--marfil);border:1px solid var(--oro-claro);border-radius:999px;padding:.6rem 1.4rem;transition:background .3s,color .3s}
.nav__cta:hover{background:var(--oro);border-color:var(--oro)}
.nav__toggle{display:none;background:none;border:0;width:34px;height:26px;position:relative;cursor:pointer}
.nav__toggle span{position:absolute;left:0;right:0;height:1.5px;background:var(--marfil);transition:transform .3s,opacity .3s}
.nav__toggle span:first-child{top:7px}
.nav__toggle span:last-child{bottom:7px}

.menu{position:fixed;inset:0;z-index:55;background:var(--cacao);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.menu[hidden]{display:none}
.menu a{font-family:var(--serif);font-size:1.7rem;color:var(--marfil)}
.menu__cta{font-family:var(--sans)!important;font-size:.8rem!important;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--oro-claro);border-radius:999px;padding:.9rem 2rem}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(138,102,64,.28), transparent 62%),
    var(--cacao);
  text-align:center;padding:7rem 1.5rem 4rem;position:relative;
}
.hero__phi{stroke:var(--oro-claro);stroke-width:1.7;fill:none;margin-bottom:2.4rem}
.hero__phi .draw{stroke-dasharray:120;stroke-dashoffset:120;animation:draw 1.6s cubic-bezier(.6,0,.2,1) .35s forwards}
.hero__phi ellipse.draw{animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__eyebrow{font-size:.74rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--oro-claro);margin-bottom:1.6rem;opacity:0;animation:rise .9s ease .5s forwards}
.hero__title{
  font-family:var(--serif);font-weight:500;color:var(--marfil);
  font-size:clamp(2.5rem,6.2vw,4.7rem);line-height:1.12;letter-spacing:.005em;
  opacity:0;animation:rise 1s ease .7s forwards;
}
.hero__sub{max-width:34rem;color:#C9BDB2;margin-top:1.7rem;font-size:1.02rem;opacity:0;animation:rise 1s ease .95s forwards}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:2.6rem;opacity:0;animation:rise 1s ease 1.15s forwards}
.hero__scroll{position:absolute;bottom:2rem;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:#8E8177;animation:pulse 2.4s ease infinite}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- El hilo (firma) ---------- */
.thread{position:absolute;left:calc((100vw - var(--w))/2 - 2.6rem);top:100svh;bottom:0;width:1px;pointer-events:none}
.thread__line{position:sticky;top:0;display:block;width:1px;height:100vh;background:linear-gradient(var(--oro) , var(--oro));background-repeat:no-repeat;background-size:100% 0%;}
main{position:relative}
@media(max-width:1320px){.thread{display:none}}

/* ---------- Manifiesto ---------- */
.manifesto{padding:clamp(5rem,10vw,8.5rem) 1.5rem;display:flex;justify-content:center}
.manifesto__text{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.1vw,2.3rem);
  color:var(--cacao);max-width:46rem;text-align:center;line-height:1.4;
}
.manifesto__text em{color:var(--oro-prof)}

/* ---------- El nombre ---------- */
.nombre{width:var(--w);margin:0 auto;padding:clamp(3rem,6vw,5rem) 0 clamp(5rem,9vw,7rem)}
.nombre__head{max-width:34rem;margin-bottom:3.6rem}
.nombre__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3.4rem)}
.nombre__item{border-top:1px solid var(--linea);padding-top:1.6rem}
.nombre__root{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--oro-prof);margin-bottom:.7rem}
.nombre__root span{font-weight:400;margin-left:.3rem;color:var(--oro)}
.nombre__item p:last-child{font-size:.95rem}

/* ---------- Colección ---------- */
.coleccion{padding:clamp(4rem,8vw,6.5rem) 0;background:#F5EEE4}
.coleccion__head{width:var(--w);margin:0 auto 3rem}
.coleccion__note{max-width:30rem;margin-top:1rem;color:var(--gris);font-size:.95rem}
.coleccion__strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,26vw,330px);
  gap:1.4rem;overflow-x:auto;padding:0 calc((100vw - var(--w))/2) 1.4rem;
  scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--oro) transparent;
}
.card{scroll-snap-align:start;background:var(--marfil);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -20px rgba(58,44,42,.35)}
.card img{aspect-ratio:9/11;object-fit:cover;width:100%}
.card__meta{padding:1.3rem 1.4rem 1.6rem}
.card__meta h3{font-size:1.22rem;margin-bottom:.4rem}
.card__meta p{font-size:.88rem;color:var(--gris)}

/* ---------- Experiencia ---------- */
.experiencia{background:var(--cacao);color:#C9BDB2;padding:clamp(5rem,9vw,7.5rem) 0}
.experiencia__head{width:var(--w);margin:0 auto 3.6rem;max-width:none}
.experiencia h2{color:var(--marfil)}
.experiencia__sub{max-width:32rem;margin-top:1.1rem;font-size:.98rem}
.pasos{width:var(--w);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3.4rem);list-style:none}
.paso{border-top:1px solid rgba(196,160,106,.35);padding-top:1.7rem}
.paso__num{font-family:var(--serif);font-weight:500;font-size:2.6rem;color:var(--oro-claro);line-height:1;margin-bottom:.9rem}
.paso h3{color:var(--marfil);margin-bottom:.5rem}
.paso p{font-size:.92rem}

/* ---------- Confianza ---------- */
.confianza{padding:clamp(4.5rem,8vw,6.5rem) 0}
.confianza__grid{width:var(--w);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3.4rem)}
.confianza__item h3{font-size:1.3rem;margin-bottom:.5rem}
.confianza__item p{font-size:.92rem;color:var(--gris)}

/* ---------- Testimonio ---------- */
.testimonio{padding:0 1.5rem clamp(5rem,9vw,7.5rem);display:flex;justify-content:center}
.testimonio figure{max-width:44rem;text-align:center}
.testimonio blockquote{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,2.7vw,2rem);color:var(--cacao);line-height:1.45;
}
.testimonio figcaption{margin-top:1.4rem;font-size:.74rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--oro-prof)}

/* ---------- FAQ ---------- */
.faq{background:#F5EEE4;padding:clamp(4.5rem,8vw,7rem) 0}
.faq__head{width:var(--w);margin:0 auto 3rem}
.faq__list{width:min(760px,92vw);margin:0 auto}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  font-family:var(--serif);font-weight:600;font-size:1.18rem;color:var(--cacao);padding:1.45rem 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:1.5rem;color:var(--oro);transition:transform .3s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2.2rem 1.5rem 0;font-size:.95rem;max-width:60ch}

/* ---------- Contacto ---------- */
.contacto{
  background:
    radial-gradient(900px 560px at 15% 0%, rgba(138,102,64,.25), transparent 60%),
    var(--cacao);
  padding:clamp(5rem,9vw,7.5rem) 0;
}
.contacto__intro,.form{width:var(--w);margin:0 auto}
.contacto__intro{max-width:34rem;color:#C9BDB2;margin-bottom:3rem}
.contacto h2{color:var(--marfil)}
.contacto__intro p{margin-top:1.1rem;font-size:.98rem}
.contacto__wa{display:inline-block;margin-top:1.2rem;color:var(--oro-claro);font-size:.9rem;border-bottom:1px solid rgba(196,160,106,.4);padding-bottom:2px;transition:color .3s,border-color .3s}
.contacto__wa:hover{color:var(--marfil);border-color:var(--marfil)}

.form{max-width:760px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form label{display:block;font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--oro-claro);margin-bottom:1.2rem}
.form .opt{opacity:.55;letter-spacing:.1em;text-transform:none}
.form input,.form select,.form textarea{
  display:block;width:100%;margin-top:.55rem;
  background:rgba(250,247,242,.04);border:1px solid rgba(196,160,106,.35);border-radius:2px;
  color:var(--marfil);font-family:var(--sans);font-weight:300;font-size:1rem;
  padding:.85rem 1rem;transition:border-color .3s, background .3s;
}
.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23C4A06A'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.form select option{color:var(--cacao)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--oro-claro);background:rgba(250,247,242,.07)}
.form textarea{resize:vertical}
.hp{position:absolute;left:-6000px;height:0;width:0;opacity:0}
.form__submit{border:0;cursor:pointer;margin-top:.4rem}
.form__status{margin-top:1.1rem;font-size:.92rem;color:var(--oro-claro);min-height:1.4em}
.form__status.is-ok{color:#9FCDAF}
.form__status.is-err{color:#E2A08F}
.form__legal{margin-top:1rem;font-size:.74rem;color:#8E8177}

/* ---------- Footer ---------- */
.footer{background:var(--cacao-deep);color:#8E8177;text-align:center;padding:4.5rem 1.5rem 2.6rem}
.footer svg{stroke:var(--oro-claro);stroke-width:2.2;fill:none;margin:0 auto 1rem}
.footer__name{font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:.18em;text-transform:uppercase;color:var(--marfil)}
.footer__tag{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--oro-claro);margin-top:.4rem}
.footer__links{display:flex;justify-content:center;gap:2.2rem;margin:2.2rem 0}
.footer__links a{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#B4A99E;transition:color .3s}
.footer__links a:hover{color:var(--oro-claro)}
.footer__promise{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:#B4A99E;line-height:1.6}
.footer__copy{margin-top:2.4rem;font-size:.72rem}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:block}
  .nombre__grid,.pasos,.confianza__grid{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .coleccion__strip{grid-auto-columns:74vw;padding:0 4vw 1.4rem}
}