/*
Theme Name: Enamódate
Theme URI: https://enamodate.com.co
Author: Enamódate
Description: Tema oficial de enamodate.com.co — Expresiones de amor que transforman. Construido sobre el Enamódate Design System.
Version: 1.0.0
Requires PHP: 7.4
License: Propietaria
Text Domain: enamodate
*/

/* ============ Tokens (Enamódate Design System) ============ */
:root{
  --enamo-crimson:#DC013B;
  --enamo-crimson-deep:#BF0037;
  --enamo-crimson-bright:#E40242;
  --enamo-slate:#454D5A;
  --enamo-slate-soft:#9BA3B0;

  --neutral-0:#FFFFFF;
  --neutral-50:#F6F6F6;
  --neutral-100:#ECECEC;
  --neutral-200:#E7E7E7;
  --neutral-300:#D9D9D9;
  --neutral-400:#B5B5B5;
  --neutral-600:#6B6E72;
  --neutral-700:#333534;
  --neutral-800:#1F1F1F;
  --neutral-900:#121212;

  --garment-black:#121212;
  --garment-navy:#272F3C;
  --garment-sage:#62635D;
  --garment-sand:#E0D9CE;
  --garment-grey:#E9E9E9;

  --overlay-scrim:rgba(255,255,255,.62);

  --font-display:"RomanSerif","Tinos","Times New Roman",Times,serif;
  --font-condensed:"Bebas Neue",Impact,sans-serif;
  --font-geometric:"Caviar Dreams","Questrial","Century Gothic",sans-serif;
  --font-ui:"Open Sans",Arial,Helvetica,sans-serif;
  --font-poster:Arial,Helvetica,"Open Sans",sans-serif;

  --ls-label:.14em;
  --ls-geometric:.18em;
  --ls-button:.1em;

  --page-max:1280px;
  --page-gutter:24px;
  --section-y:96px;
  --grid-gap:36px;
  --rail-w:34px;
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.7;
  color:var(--neutral-900);
  background:var(--neutral-0);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}

.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter)}
.section{padding:var(--section-y) 0}
.upper{text-transform:uppercase}

/* ============ Botones ============ */
.btn{
  display:inline-block;
  padding:15px 34px;
  font:700 12px/1 var(--font-ui);
  letter-spacing:var(--ls-button);
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:0;
  transition:background .22s,color .22s,border-color .22s;
  text-align:center;
}
.btn-primary{background:var(--enamo-crimson);color:#fff}
.btn-primary:hover{background:var(--enamo-crimson-bright)}
.btn-primary:active{background:var(--enamo-crimson-deep)}
.btn-dark{background:var(--neutral-900);color:#fff}
.btn-dark:hover{background:var(--neutral-700)}
.btn-outline{background:#fff;color:var(--neutral-900);border-color:var(--neutral-900)}
.btn-outline:hover{background:var(--neutral-900);color:#fff}
.btn-chipcta{
  display:inline-block;background:var(--enamo-crimson);color:#fff;
  font:600 11px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  padding:10px 18px;
}
.btn-chipcta:hover{background:var(--enamo-crimson-bright)}

/* ============ Header ============ */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:40;
  padding:22px 0;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.header-mark img{width:34px;height:auto}
.header-word{position:absolute;left:50%;transform:translateX(-50%)}
.header-word img{height:26px;width:auto}
.header-nav{display:flex;align-items:center;gap:28px}
.header-nav a{
  font:600 12px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--neutral-700);transition:color .22s;
}
.header-nav a:hover{color:var(--enamo-crimson)}
.nav-burger{
  display:none;background:none;border:0;padding:6px;
}
.nav-burger span{display:block;width:22px;height:2px;background:var(--neutral-900);margin:5px 0}

/* ============ Rieles laterales fijos ============ */
.rail{
  position:fixed;top:50%;transform:translateY(-50%);z-index:50;
  width:var(--rail-w);
  background:var(--enamo-slate);color:#fff;
  display:flex;flex-direction:column;align-items:center;
  padding:18px 0;gap:14px;
}
.rail-left{left:0}
.rail-right{right:0}
.rail span{
  writing-mode:vertical-rl;
  font:700 11px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
}
.rail-left span{transform:rotate(180deg)}
.rail svg{width:15px;height:15px;fill:#fff}

/* ============ Hero ============ */
.hero{
  position:relative;
  background:var(--neutral-200);
  padding-top:110px;
  overflow:hidden;
}
.hero-inner{
  position:relative;
  min-height:660px;
  display:flex;align-items:center;justify-content:center;
}
.hero-model{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(620px,72%);z-index:1;
}
.hero-price{position:absolute;left:0;top:30px;z-index:2}
.hero-price .label{font:600 15px/1.3 var(--font-ui);color:var(--neutral-800)}
.hero-price .actual{font:700 30px/1.1 var(--font-poster);letter-spacing:-.01em}
.hero-price .miembros{font:700 54px/1.05 var(--font-poster);letter-spacing:-.01em}
.hero-headline{
  position:relative;z-index:3;
  margin-top:130px;
  text-align:center;
}
.hero-headline h1{
  display:inline-block;
  background:var(--overlay-scrim);
  padding:8px 26px;
  font:700 clamp(30px,5vw,64px)/1.02 var(--font-poster);
  letter-spacing:-.01em;text-transform:uppercase;
}
.hero-pills{margin-top:16px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-pill{
  background:#fff;color:var(--neutral-900);
  font:600 12px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  padding:11px 18px;
}
.hero-pill:hover{color:var(--enamo-crimson)}
.hero-offer{position:absolute;right:0;bottom:44px;z-index:2;text-align:center}
.heart-badge{
  position:relative;width:150px;height:135px;margin:0 auto 14px;
  color:#fff;
}
.heart-badge::before,.heart-badge::after{
  content:"";position:absolute;top:0;width:78px;height:78px;border-radius:50%;
  background:var(--enamo-crimson);
}
.heart-badge::before{left:6px}
.heart-badge::after{right:6px}
.heart-badge .lobe{
  position:absolute;left:50%;top:26px;transform:translateX(-50%) rotate(45deg);
  width:106px;height:106px;background:var(--enamo-crimson);
}
.heart-badge .txt{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding-top:8px;
}
.heart-badge .txt small{font:700 7.5px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
.heart-badge .txt strong{font:700 30px/1 var(--font-condensed);letter-spacing:.02em}
.hero-offer .allyear{font:600 13px/1.4 var(--font-ui)}
.hero-offer .pct{font:700 56px/1 var(--font-poster);letter-spacing:-.01em}
.hero-offer .desc{font:700 22px/1.1 var(--font-poster);letter-spacing:.02em;text-transform:uppercase}
.hero-offer .sub{margin-top:6px}
.hero-offer .sub a{font:700 12px/1 var(--font-ui);letter-spacing:var(--ls-label);color:var(--enamo-crimson);text-transform:uppercase}
.hero-social{position:absolute;right:26px;top:96px;z-index:4;display:flex;gap:10px}
.hero-social a{color:var(--enamo-slate);line-height:0}
.hero-social a:hover{color:var(--enamo-crimson)}
.hero-band{
  position:relative;z-index:5;
  background:var(--enamo-crimson);color:#fff;
  text-align:center;
  font:600 14px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;
  padding:14px 10px;
}
.hero-band strong{font-weight:800}

/* ============ Somos ============ */
.somos{text-align:center}
.somos .kicker{font:600 15px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:18px}
.somos .wordmark img{height:54px;width:auto;margin:0 auto 30px}
.somos p{max-width:760px;margin:0 auto 22px;font:400 15px/1.8 var(--font-ui);color:var(--neutral-700)}
.somos .btn{margin-top:10px}

/* ============ Manual ============ */
.manual{background:var(--neutral-0);position:relative;text-align:center}
.manual-model{width:min(520px,80%);margin:0 auto}
.manual .tag{font:600 15px/1.4 var(--font-ui);text-transform:uppercase;letter-spacing:.04em}
.manual .tag strong{font-weight:800}
.manual h2{
  display:inline-block;background:var(--neutral-100);
  padding:6px 22px;margin-top:6px;
  font:400 clamp(28px,4.5vw,52px)/1.05 var(--font-poster);letter-spacing:-.01em;text-transform:uppercase;
}
.manual h2 strong{font-weight:800}
.manual-steps{
  margin-top:56px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;text-align:left;
}
.step{background:var(--neutral-200);padding:22px 18px}
.step .n{font:700 30px/1 var(--font-condensed);color:var(--enamo-crimson)}
.step h3{font:700 13px/1.3 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;margin:8px 0 8px}
.step p{font:400 12.5px/1.6 var(--font-ui);color:var(--neutral-600)}

/* ============ Promo 2x1 ============ */
.promo{
  position:relative;color:#fff;overflow:hidden;
  min-height:520px;display:flex;align-items:center;
}
.promo-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.promo::after{content:"";position:absolute;inset:0;background:rgba(18,18,18,.25)}
.promo .wrap{position:relative;z-index:2;width:100%}
.promo-box{max-width:560px;margin-left:auto;text-align:right}
.promo .kicker{font:800 20px/1 var(--font-poster);letter-spacing:.06em;color:var(--enamo-crimson-bright);text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,.4)}
.promo .big{font:800 clamp(60px,9vw,110px)/1 var(--font-poster);letter-spacing:-.01em}
.promo h2{font:400 clamp(26px,4vw,46px)/1.1 var(--font-poster);letter-spacing:-.01em;text-transform:uppercase;margin:6px 0 18px}
.promo h2 strong{font-weight:800}

/* ============ Colección ============ */
.coleccion{text-align:center}
.ribbon{
  display:inline-block;position:relative;
  background:var(--enamo-crimson-bright);color:#fff;
  font:400 22px/1 var(--font-condensed);letter-spacing:.06em;
  padding:12px 34px;
  text-transform:uppercase;
}
.ribbon::after{
  content:"";position:absolute;left:0;top:100%;
  border:8px solid transparent;border-top-color:var(--enamo-crimson-deep);border-left-color:var(--enamo-crimson-deep);
}
.coleccion .nombre{
  font:400 clamp(24px,3.5vw,34px)/1.2 var(--font-display);
  letter-spacing:.14em;text-transform:uppercase;
  margin:18px 0 44px;
}
.grid-productos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);
}
.card{
  background:var(--neutral-200);
  cursor:pointer;position:relative;
  transition:box-shadow .22s;
}
.card:hover{box-shadow:0 10px 30px rgba(18,18,18,.12)}
.card .ph{
  aspect-ratio:1/1.05;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:26px;
}
.card .ph img{
  max-height:100%;width:auto;object-fit:contain;
  transition:transform .42s;
}
.card:hover .ph img{transform:scale(1.03)}
.card .meta{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:var(--neutral-100);
}
.card .nombre-prod{
  font:400 13px/1 var(--font-geometric);letter-spacing:var(--ls-geometric);text-transform:uppercase;
}
.card .mas{
  font:400 20px/1 var(--font-ui);color:var(--neutral-700);
}
.coleccion .nota-precios{
  margin-top:34px;font:400 13px/1.6 var(--font-ui);color:var(--neutral-600);
}
.coleccion .nota-precios strong{color:var(--neutral-900)}

/* ============ Categorías ============ */
.cats{border-top:1px solid var(--neutral-300);border-bottom:1px solid var(--neutral-300);padding:26px 0}
.cats ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 38px;
}
.cats a{
  font:400 12px/1 var(--font-geometric);letter-spacing:var(--ls-geometric);text-transform:uppercase;
  color:var(--neutral-700);
}
.cats a:hover{color:var(--enamo-crimson)}

/* ============ Love Card / Membresía ============ */
.lovecard{background:var(--neutral-200)}
.lovecard .wrap{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;
}
.lovecard-model{width:min(440px,100%);margin:0 auto}
.lovecard-copy{text-align:center}
.lovecard-copy .pre,.lovecard-copy .post{
  font:700 17px/1.3 var(--font-condensed);letter-spacing:.1em;text-transform:uppercase;
}
.lovecard-copy h2{
  font:700 clamp(56px,7vw,96px)/0.95 var(--font-condensed);
  color:var(--enamo-crimson);letter-spacing:.02em;text-transform:uppercase;
  margin:6px 0;
}
.member-perks{margin:26px auto 0;max-width:420px;text-align:left;background:#fff;padding:26px 28px}
.member-perks li{
  list-style:none;font:400 13.5px/1.6 var(--font-ui);color:var(--neutral-700);
  padding-left:20px;position:relative;margin-bottom:10px;
}
.member-perks ul{margin:0;padding:0}
.member-perks li::before{
  content:"";position:absolute;left:0;top:7px;width:8px;height:8px;background:var(--enamo-crimson);
}
.member-perks .price-line{font:700 15px/1.4 var(--font-ui);margin-bottom:14px}
.member-perks .price-line span{color:var(--enamo-crimson)}
.lovecard .btn{margin-top:22px}

/* ============ Así se enamoda ============ */
.asise{position:relative;overflow:hidden;text-align:center;padding-bottom:0}
.big-heart{
  position:relative;width:min(760px,94%);margin:0 auto;
}
.big-heart::before,.big-heart::after{
  content:"";position:absolute;top:0;width:52%;aspect-ratio:1;border-radius:50%;background:var(--enamo-crimson);
}
.big-heart::before{left:0}
.big-heart::after{right:0}
.big-heart .lobe{
  position:absolute;left:50%;top:18%;transform:translateX(-50%) rotate(45deg);
  width:70%;aspect-ratio:1;background:var(--enamo-crimson);
}
.big-heart .modelwrap{position:relative;z-index:2;padding-top:60px}
.big-heart .modelwrap img{width:min(430px,70%);margin:0 auto}
.asise h2{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:3;
  font:800 clamp(40px,7vw,84px)/1 var(--font-poster);color:#fff;text-transform:uppercase;letter-spacing:-.01em;
  text-shadow:0 2px 14px rgba(18,18,18,.35);
  width:100%;
}
.asise .tip{position:relative;z-index:4;background:#fff;padding:40px 20px 60px}
.asise .tip .l1,.asise .tip .l3{font:700 16px/1.4 var(--font-poster);text-transform:uppercase;letter-spacing:.02em}
.asise .tip .l2{
  display:inline-block;background:var(--enamo-crimson);color:#fff;
  font:400 clamp(20px,3vw,30px)/1.2 var(--font-display);letter-spacing:.1em;text-transform:uppercase;
  padding:8px 26px;margin:8px 0;
}

/* ============ Footer ============ */
.trustlinks{padding:34px 0;text-align:center}
.trustlinks ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:60px;flex-wrap:wrap}
.trustlinks a{
  font:400 14px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-700);
  border-bottom:1px solid var(--neutral-300);padding-bottom:6px;
}
.trustlinks a:hover{color:var(--enamo-crimson)}
.site-footer{background:var(--enamo-crimson);color:#fff;text-align:center;padding:60px 20px 40px}
.site-footer .mark img{width:64px;margin:0 auto 18px}
.site-footer .tagline{font:400 15px/1.4 var(--font-ui)}
.site-footer .tagline strong{font-weight:700}
.site-footer .contact{margin-top:18px;font:600 13px/1.8 var(--font-ui);letter-spacing:.04em}
.site-footer .contact a{border-bottom:1px solid rgba(255,255,255,.5)}
.site-footer .social{display:flex;justify-content:center;gap:14px;margin-top:20px}
.site-footer .social a{color:#fff;line-height:0;opacity:.9}
.site-footer .social a:hover{opacity:1}
.site-footer .legal{margin-top:30px;font:400 11px/1.6 var(--font-ui);opacity:.8}

/* ============ Modal producto ============ */
.modal-backdrop{
  position:fixed;inset:0;z-index:90;background:rgba(18,18,18,.5);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-backdrop.open{display:flex}
.modal{
  background:var(--neutral-100);
  width:min(1060px,100%);max-height:92vh;overflow:auto;
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:30px;
  padding:46px;
}
.modal-close{
  position:absolute;top:14px;right:18px;background:none;border:0;
  font:400 26px/1 var(--font-ui);color:var(--neutral-900);
}
.modal-photo{background:#fff;display:flex;align-items:center;justify-content:center;padding:30px}
.modal-photo img{max-height:520px;width:auto;object-fit:contain}
.modal-info .brand{font:400 20px/1.1 var(--font-condensed);letter-spacing:.08em;text-transform:uppercase}
.modal-info .colec{font:400 13px/1.4 var(--font-condensed);letter-spacing:.1em;color:var(--neutral-600);text-transform:uppercase}
.modal-info .ref{font:400 17px/1.4 var(--font-condensed);letter-spacing:.1em;text-transform:uppercase}
.modal-info .precio{font:700 44px/1.1 var(--font-poster);letter-spacing:-.01em;margin:14px 0 22px}
.opt-label{
  font:600 12px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  margin:18px 0 10px;
}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  background:#fff;border:1px solid var(--neutral-300);
  font:600 12px/1 var(--font-ui);letter-spacing:.04em;
  padding:12px 16px;border-radius:0;
  transition:all .22s;
}
.chip:hover{border-color:var(--neutral-900)}
.chip.sel{background:var(--enamo-slate);color:#fff;border-color:var(--enamo-slate);box-shadow:0 0 0 1px var(--enamo-crimson)}
.chip:disabled{color:var(--neutral-400);border-color:var(--neutral-100);cursor:not-allowed}
.swatches{display:flex;gap:10px}
.swatch{
  width:38px;height:38px;border:1px solid var(--neutral-300);border-radius:0;padding:0;
  transition:box-shadow .22s;
}
.swatch.sel{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--enamo-crimson)}
.modal-ctas{display:grid;gap:12px;margin-top:26px}
.modal-note{
  margin-top:16px;font:400 12px/1.6 var(--font-ui);color:var(--neutral-600);
}
.modal-links{margin-top:18px;border-top:1px solid var(--neutral-300)}
.modal-links details{border-bottom:1px solid var(--neutral-300)}
.modal-links summary{
  cursor:pointer;list-style:none;
  font:400 13px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  padding:14px 4px;text-align:center;color:var(--neutral-700);
}
.modal-links summary::-webkit-details-marker{display:none}
.modal-links p{font:400 12.5px/1.7 var(--font-ui);color:var(--neutral-600);padding:0 4px 14px}

/* ============ Responsive ============ */
@media (max-width:1100px){
  .rail{display:none}
  .hero-social{display:none}
}
@media (max-width:900px){
  :root{--section-y:64px}
  .header-nav{display:none}
  .header-nav.open{
    display:flex;flex-direction:column;position:absolute;top:100%;right:0;left:0;
    background:#fff;padding:22px;gap:18px;box-shadow:0 12px 30px rgba(18,18,18,.12);
  }
  .nav-burger{display:block}
  .hero-inner{min-height:560px}
  .hero-price{top:10px}
  .hero-offer{bottom:20px}
  .hero-headline{margin-top:210px}
  .hero-model{width:min(430px,88%)}
  .manual-steps{grid-template-columns:repeat(2,1fr)}
  .grid-productos{grid-template-columns:repeat(2,1fr);gap:20px}
  .lovecard .wrap{grid-template-columns:1fr}
  .modal{grid-template-columns:1fr;padding:26px;gap:20px}
  .promo-box{text-align:center;margin:0 auto}
}
@media (max-width:560px){
  .grid-productos{grid-template-columns:1fr 1fr;gap:12px}
  .card .meta{padding:10px 12px}
  .card .nombre-prod{font-size:10.5px;letter-spacing:.12em}
  .manual-steps{grid-template-columns:1fr}
  .hero-inner{min-height:auto;display:block;padding-bottom:0}
  .hero-price{position:static}
  .hero-offer{position:static;margin-top:26px}
  .hero-headline{margin-top:20px}
  .hero-model{position:static;transform:none;margin:20px auto 0;width:88%}
  .hero{padding-top:96px}
}