/* ============================================================
   RENASCY — Estilos base y componentes
   Paleta:  botánico #2D5A27 / #1E3F1C · terracota #8B2625
            kraft #F4F0EA / #EFE8DC · texto #2C2C2C
   Nota: se usa CSS plano (no @apply) porque Tailwind se carga
   vía Play CDN. Al migrar a build de Tailwind, estas reglas
   pueden convertirse en @layer components con @apply.
   ============================================================ */

:root{
  --botanic:#2D5A27; --botanic-deep:#1E3F1C; --botanic-light:#4A7C43;
  --terracota:#8B2625; --kraft:#F4F0EA; --kraft-dark:#EFE8DC;
  --ink:#2C2C2C; --ink-soft:#5A5A5A; --ink-mute:#8A8A85;
}

html{ -webkit-text-size-adjust:100%; }
body{ background-color:var(--kraft); }

/* Textura sutil de papel kraft ------------------------------ */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(45,90,39,.05), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(139,38,37,.045), transparent 45%);
}
main, header, footer{ position:relative; z-index:1; }

/* Follaje decorativo de fondo -------------------------------- */
.leaf-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:
    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(45,90,39,.10), transparent 70%),
    radial-gradient(ellipse 50% 45% at 5% 90%, rgba(139,38,37,.08), transparent 70%);
}

/* Header al hacer scroll ------------------------------------- */
#site-header.is-scrolled{
  background-color:rgba(244,240,234,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(45,90,39,.10), 0 10px 30px -20px rgba(30,63,28,.5);
}

/* Navegación -------------------------------------------------- */
.nav-link{
  position:relative; font-size:.9rem; color:var(--ink-soft);
  transition:color .3s ease; padding-bottom:2px;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--botanic); transition:width .35s ease;
}
.nav-link:hover, .nav-link.is-active{ color:var(--botanic-deep); }
.nav-link:hover::after, .nav-link.is-active::after{ width:100%; }

.mobile-link{
  display:block; padding:.85rem .25rem; font-size:1rem; color:var(--ink-soft);
  border-bottom:1px solid rgba(45,90,39,.08);
}
.mobile-link:hover{ color:var(--botanic-deep); }

/* Selector de idioma ------------------------------------------ */
.lang-btn{
  min-width:2.6rem; padding:.4rem .6rem; border-radius:9999px;
  font-size:.72rem; letter-spacing:.14em; font-weight:500;
  color:var(--ink-mute); transition:all .3s ease;
}
.lang-btn:hover{ color:var(--botanic-deep); }
.lang-btn.is-active{ background:var(--botanic); color:var(--kraft); }

/* Botones ----------------------------------------------------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:.6rem;
  border-radius:9999px; background:var(--botanic); color:var(--kraft);
  padding:1rem 2rem; font-size:.9rem; font-weight:500;
  box-shadow:0 12px 30px -14px rgba(30,63,28,.75);
  transition:transform .3s ease, background .3s ease;
}
.btn-primary:hover{ background:var(--botanic-deep); transform:translateY(-2px); }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border-radius:9999px; border:1px solid rgba(45,90,39,.35);
  padding:1rem 2rem; font-size:.9rem; font-weight:500; color:var(--botanic-deep);
  transition:all .3s ease; background:rgba(255,255,255,.4);
}
.btn-outline:hover{ background:#fff; border-color:var(--botanic); transform:translateY(-2px); }

/* Etiquetas de sección ---------------------------------------- */
.eyebrow{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.22em; color:var(--terracota);
}

/* Proceso botánico -------------------------------------------- */
.step-card{
  position:relative; border-radius:1.75rem; border:1px solid rgba(45,90,39,.12);
  background:var(--kraft); padding:1.75rem 1.5rem; transition:all .4s ease;
}
.step-card:hover{
  background:#fff; border-color:rgba(45,90,39,.3);
  transform:translateY(-6px); box-shadow:0 24px 50px -30px rgba(30,63,28,.55);
}
.step-num{
  display:grid; place-items:center; width:3rem; height:3rem; border-radius:9999px;
  background:#fff; border:1px solid rgba(45,90,39,.2);
  font-family:"Cormorant Garamond",Georgia,serif; font-size:1.15rem; color:var(--botanic);
  transition:all .4s ease;
}
.step-card:hover .step-num{ background:var(--botanic); color:var(--kraft); border-color:var(--botanic); }
.step-title{ margin-top:1.1rem; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.5rem; color:var(--botanic-deep); line-height:1.2; }
.step-text{ margin-top:.6rem; font-size:.85rem; line-height:1.6; color:var(--ink-soft); }

/* Tarjetas de producto ---------------------------------------- */
.product-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:1.75rem;
  border:1px solid rgba(45,90,39,.10); background:#fff;
  box-shadow:0 2px 8px rgba(44,44,44,.04); transition:all .45s ease;
}
.product-card:hover{ transform:translateY(-8px); box-shadow:0 28px 60px -30px rgba(30,63,28,.5); }
.product-media{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--kraft-dark); }
.product-media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}
.product-card:hover .product-media img{ transform:scale(1.05); }
.product-tag{
  position:absolute; top:1rem; left:1rem; border-radius:9999px;
  background:rgba(255,255,255,.9); padding:.3rem .8rem;
  font-size:.62rem; text-transform:uppercase; letter-spacing:.18em; color:var(--botanic-deep);
}
.product-body{ display:flex; flex:1; flex-direction:column; padding:1.6rem; }
.product-name{ font-family:"Cormorant Garamond",Georgia,serif; font-size:1.6rem; color:var(--botanic-deep); line-height:1.15; }
.product-desc{ margin-top:.7rem; font-size:.87rem; line-height:1.65; color:var(--ink-soft); }
.product-inci{
  margin-top:1.1rem; border-top:1px dashed rgba(45,90,39,.2); padding-top:.9rem;
  font-size:.7rem; line-height:1.5; color:var(--ink-mute);
}
.product-inci strong{ color:var(--botanic); letter-spacing:.12em; font-weight:500; }
.product-cta{
  margin-top:1.2rem; display:inline-flex; align-items:center; gap:.45rem;
  align-self:flex-start; font-size:.8rem; font-weight:500; color:var(--terracota);
  border-bottom:1px solid rgba(139,38,37,.35); padding-bottom:2px; transition:gap .3s ease;
}
.product-cta:hover{ gap:.8rem; }

/* Logotipo ------------------------------------------------------ */
/* El logotipo procede de una fotografía del catálogo: multiply funde
   el fondo beige del archivo con el papel kraft de la página. */
.logo-img{ mix-blend-mode:multiply; }

/* Servicios ---------------------------------------------------- */
.service-card{
  display:flex; flex-direction:column; border-radius:2rem; overflow:hidden;
  border:1px solid rgba(45,90,39,.12); background:var(--kraft);
  padding:2.25rem 2rem; transition:all .45s ease;
}
.service-card figure img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.service-card:hover figure img{ transform:scale(1.04); }
.service-card:hover{ transform:translateY(-6px); box-shadow:0 28px 60px -32px rgba(30,63,28,.5); }
.service-card.ritual{ background:#F7EFEC; border-color:rgba(139,38,37,.18); }
.service-icon{
  display:grid; place-items:center; width:3.25rem; height:3.25rem; border-radius:9999px;
  background:#fff; color:var(--botanic); border:1px solid rgba(45,90,39,.15);
}
.service-card.ritual .service-icon{ color:var(--terracota); border-color:rgba(139,38,37,.2); }
.service-title{ margin-top:1.25rem; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.9rem; color:var(--botanic-deep); }
.service-card.ritual .service-title{ color:var(--terracota); }
.service-text{ margin-top:.75rem; font-size:.9rem; line-height:1.7; color:var(--ink-soft); }
.service-list{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.service-list li{ position:relative; padding-left:1.4rem; font-size:.87rem; color:var(--ink-soft); }
.service-list li::before{
  content:""; position:absolute; left:0; top:.55em; width:.45rem; height:.45rem;
  border-radius:9999px; background:var(--botanic);
}
.service-card.ritual .service-list li::before{ background:var(--terracota); }
.service-cta{
  margin-top:1.8rem; align-self:flex-start; border-radius:9999px;
  border:1px solid rgba(45,90,39,.3); padding:.7rem 1.5rem;
  font-size:.8rem; color:var(--botanic-deep); transition:all .3s ease;
}
.service-cta:hover{ background:var(--botanic); color:var(--kraft); border-color:var(--botanic); }

/* Contacto ------------------------------------------------------ */
.info-icon{
  display:grid; place-items:center; flex:none; width:2.75rem; height:2.75rem;
  border-radius:9999px; background:#fff; color:var(--botanic); border:1px solid rgba(45,90,39,.15);
}
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field > span{ font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-mute); }
.field input, .field select, .field textarea{
  width:100%; border-radius:1rem; border:1px solid rgba(45,90,39,.18);
  background:var(--kraft); padding:.85rem 1rem; font-size:.92rem; color:var(--ink);
  transition:all .25s ease; font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--botanic); background:#fff;
  box-shadow:0 0 0 3px rgba(45,90,39,.12);
}
.field input:user-invalid{ border-color:var(--terracota); }

/* Footer -------------------------------------------------------- */
.footer-title{ font-size:.7rem; text-transform:uppercase; letter-spacing:.22em; color:rgba(244,240,234,.55); }
.social{
  display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:9999px;
  border:1px solid rgba(244,240,234,.25); color:var(--kraft); transition:all .3s ease;
}
.social:hover{ background:var(--kraft); color:var(--botanic-deep); }

/* Animación de aparición ---------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}