/* ============================================================================
   SOMOS VELVET · Página de venta — copiada del prototipo de Andreina
   Usa las mismas variables de marca de velvet-app.css
   ============================================================================ */

.sales-page { min-height:100vh; overflow:hidden; }

.sales-header { grid-template-columns:1fr auto 1fr; align-items:center;
  max-width:1450px; margin:0 auto; padding:24px 5vw; display:grid; }
.sales-header nav { gap:30px; display:flex; justify-content:center; }
.sales-header nav a { color:var(--muted); font-size:11px; text-decoration:none; }
.sales-header nav a:hover { color:var(--wine); }
.sales-header > .cta-nav { border:1px solid var(--wine); color:var(--wine); letter-spacing:.1em;
  background:0 0; border-radius:999px; justify-self:end; min-height:42px; padding:0 19px;
  font-size:9px; font-weight:900; text-transform:uppercase; }
.sales-header > .cta-nav:hover { background:var(--wine); color:var(--white); }
.sales-header .lang { display:flex; gap:6px; align-items:center; justify-self:end; }
.sales-header .lang button { background:none; border:0; color:var(--muted);
  font-size:10px; font-weight:900; letter-spacing:.08em; }
.sales-header .lang button.active { color:var(--wine); }

.sales-hero { grid-template-columns:.9fr 1.1fr; align-items:center; gap:clamp(30px,5vw,80px);
  max-width:1450px; min-height:690px; margin:0 auto; padding:45px 5vw 75px; display:grid; }
.sales-copy > span { color:var(--wine); letter-spacing:.19em; font-size:9px; font-weight:900; }
.sales-copy h1 { letter-spacing:-.055em; margin:20px 0 25px; font-family:Georgia,serif;
  font-size:clamp(45px,5.5vw,80px); font-weight:400; line-height:.98; }
.sales-copy h1 em { color:var(--wine); font-weight:400; font-style:italic; display:block; }
.sales-copy > p { color:var(--muted); max-width:620px; font-size:15px; line-height:1.7; }
.hero-actions { flex-wrap:wrap; gap:12px; margin:30px 0 14px; display:flex; }
.hero-actions button { background:var(--wine); border:1px solid var(--wine); color:var(--white);
  letter-spacing:.1em; border-radius:999px; min-height:53px; padding:0 24px; font-size:9px;
  font-weight:900; text-transform:uppercase; transition:transform .18s, box-shadow .18s; }
.hero-actions button:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(43,21,28,.24); }
.hero-actions button b { background:rgba(255,255,255,.14); border-radius:999px; margin-left:12px; padding:6px 9px; }
.hero-actions button.ghost { color:var(--wine); background:0 0; }
.hero-actions button.ghost:hover { background:var(--wine); color:var(--white); }
.hero-actions button.ghost b { background:rgba(107,30,42,.1); }
.sales-copy > small { color:var(--muted); font-size:9px; display:block; }

.sales-visual { height:590px; position:relative; }
.hero-photo-placeholder { background:linear-gradient(rgba(0,0,0,0) 50%, rgba(43,21,28,.65)),
  radial-gradient(circle at 60% 25%, rgba(236,186,194,.6), rgba(0,0,0,0) 16rem),
  linear-gradient(145deg,#ad6875,#3a2027); border-radius:46% 46% 18px 18px;
  justify-content:center; align-items:flex-end; width:min(430px,70%); height:540px;
  margin:0 auto; padding:28px; display:flex; position:relative; overflow:hidden;
  box-shadow:rgba(58,30,38,.25) 0 30px 80px; }
.hero-photo-placeholder::before { content:""; border:1px solid rgba(255,255,255,.24);
  border-radius:50% 50% 12% 12%; width:250px; height:490px; position:absolute; bottom:-100px; }
.hero-photo-placeholder span { color:rgba(255,255,255,.7); letter-spacing:.14em; z-index:1;
  font-size:8px; font-weight:900; position:relative; }
.result-card { backdrop-filter:blur(14px); background:rgba(255,253,249,.89);
  border:1px solid rgba(255,255,255,.7); border-radius:18px; flex-direction:column;
  min-width:170px; padding:16px; display:flex; position:absolute;
  box-shadow:rgba(55,31,37,.16) 0 15px 50px; }
.result-card span { color:var(--rose); letter-spacing:.12em; font-size:8px; font-weight:900; }
.result-card strong { margin-top:4px; font-family:Georgia,serif; font-size:17px; font-weight:400; }
.result-card.before { top:70px; left:0; transform:rotate(-5deg); }
.result-card.after { bottom:65px; right:0; transform:rotate(4deg); }

.proof-strip { background:var(--plum); color:var(--white); letter-spacing:.18em;
  justify-content:center; align-items:center; gap:34px; min-height:72px; font-size:9px;
  font-weight:900; display:flex; }
.proof-strip i { background:var(--gold); border-radius:50%; width:4px; height:4px; flex:0 0 auto; }

.eyebrow { color:var(--wine); letter-spacing:.19em; text-transform:uppercase; font-size:9px;
  font-weight:900; display:block; }

.results-section { background:var(--blush); padding:115px 5vw; }
.results-heading { justify-content:space-between; align-items:end; gap:50px; max-width:1320px;
  margin:0 auto 45px; display:flex; }
.results-heading h2 { letter-spacing:-.045em; max-width:850px; margin:15px 0 0; font-family:Georgia,serif;
  font-size:clamp(38px,5vw,66px); font-weight:400; line-height:1.02; }
.results-heading > p { color:var(--muted); flex:0 0 300px; font-size:12px; line-height:1.7; }
.transformation-grid { grid-template-columns:repeat(3,1fr); gap:17px; max-width:1320px; margin:0 auto; display:grid; }
.transformation-card { background:var(--white); border:1px solid rgba(107,30,42,.1); border-radius:24px; overflow:hidden; }
.transformation-photos { grid-template-columns:repeat(2,1fr); display:grid; }
.transformation-photos > span { color:var(--white); background:linear-gradient(rgba(0,0,0,0) 45%, rgba(43,21,28,.66)),
  linear-gradient(145deg,#c5969b,#62404a); flex-direction:column; justify-content:flex-end;
  align-items:flex-end; height:285px; padding:17px; display:flex; }
.transformation-photos > span + span { background:linear-gradient(rgba(0,0,0,0) 45%, rgba(43,21,28,.55)),
  linear-gradient(145deg,#b87280,#3a252c); }
.transformation-photos b { letter-spacing:.12em; font-size:8px; }
.transformation-photos small { opacity:.55; margin-top:4px; font-size:6px; }
.transformation-card > div:last-child { padding:22px; }
.transformation-card > div:last-child > span { color:var(--rose); letter-spacing:.12em; font-size:7px; font-weight:900; }
.transformation-card h3 { margin:7px 0; font-family:Georgia,serif; font-size:25px; font-weight:400; }
.transformation-card p { color:var(--muted); margin:0; font-family:Georgia,serif; font-size:12px;
  font-style:italic; line-height:1.55; }
.results-disclaimer { color:var(--muted); text-align:center; max-width:800px; margin:20px auto 0;
  font-size:8px; display:block; }

.inside-preview { text-align:center; flex-direction:column; align-items:center; padding:110px 24px; display:flex; }
.inside-preview h2 { letter-spacing:-.04em; max-width:880px; margin:18px 0; font-family:Georgia,serif;
  font-size:clamp(37px,5vw,66px); font-weight:400; }
.inside-preview > p { color:var(--muted); max-width:600px; line-height:1.7; }
.phone-preview { background:var(--white); border:8px solid var(--plum); cursor:pointer; text-align:left;
  border-radius:38px; width:min(330px,92vw); min-height:570px; margin-top:55px; padding:10px;
  overflow:hidden; box-shadow:rgba(43,21,28,.22) 0 35px 100px; }
.phone-top { justify-content:space-between; align-items:center; padding:8px 10px 15px; font-size:7px; display:flex; }
.phone-top b { color:var(--wine); letter-spacing:.09em; }
.phone-hero { background:linear-gradient(135deg,var(--plum),var(--wine-2)); color:var(--white);
  border-radius:22px; min-height:200px; padding:28px 20px; }
.phone-hero small { color:#d8b691; letter-spacing:.12em; font-size:7px; font-weight:900; }
.phone-hero h3 { margin:30px 0 8px; font-family:Georgia,serif; font-size:31px; font-weight:400; }
.phone-hero p { color:rgba(255,255,255,.66); font-size:10px; }
.phone-cards { grid-template-columns:repeat(3,1fr); gap:8px; padding:15px 0; display:grid; }
.phone-cards i { background:linear-gradient(135deg,var(--blush),#d4a0a8); border-radius:12px; height:140px; }
.phone-cards i:nth-child(2) { background:linear-gradient(135deg,#e2c2b4,#9e6670); }
.phone-cards i:nth-child(3) { background:linear-gradient(135deg,#c8aaa0,#5b343d); }
.phone-preview > button { background:var(--wine); color:var(--white); letter-spacing:.08em; border:0;
  border-radius:999px; width:100%; min-height:44px; font-size:8px; font-weight:900; }

.memberships-section { max-width:1450px; margin:0 auto; padding:115px 5vw; }
.memberships-heading { text-align:center; margin:0 auto 45px; max-width:1320px; }
.memberships-heading h2 { letter-spacing:-.045em; max-width:850px; margin:15px auto 0; font-family:Georgia,serif;
  font-size:clamp(38px,5vw,66px); font-weight:400; line-height:1.02; }
.memberships-heading p { color:var(--muted); max-width:590px; margin:15px auto 0; font-size:12px; line-height:1.7; }
.velvet-program-ladder { background:var(--white); border:1px solid var(--line); border-radius:22px;
  grid-template-columns:repeat(5,1fr); margin:34px 0 28px; display:grid; overflow:hidden; }
.velvet-program-ladder > div { align-items:center; gap:3px; min-height:92px; padding:18px 21px;
  display:grid; position:relative; }
.velvet-program-ladder > div + div { border-left:1px solid var(--line); }
.velvet-program-ladder span { color:var(--rose); letter-spacing:.12em; font-size:7px; font-weight:900; }
.velvet-program-ladder strong { color:var(--wine); font-family:Georgia,serif; font-size:17px; font-weight:400; }
.velvet-program-ladder small { color:var(--muted); font-size:7px; }
.velvet-program-ladder em { color:#c9a36f; z-index:2; font-size:18px; font-style:normal;
  position:absolute; right:-7px; }

.membership-path-grid { grid-template-columns:minmax(285px,.9fr) minmax(0,2.1fr); align-items:stretch;
  gap:15px; display:grid; }
.membership-grid { grid-template-columns:repeat(3,1fr); align-items:stretch; gap:15px; margin-top:28px; display:grid; }
.membership-card { background:var(--white); border:1px solid var(--line); border-radius:23px;
  flex-direction:column; min-height:650px; padding:27px; display:flex; position:relative; }
.membership-card.signature { background:linear-gradient(150deg,var(--plum),#572532); color:var(--white); transform:translateY(-12px); }
.membership-card.premium { background:var(--blush); border-color:rgba(107,30,42,.21); }
.popular-tag { color:var(--plum); letter-spacing:.1em; background:#d5b17e; border-radius:999px;
  padding:7px 10px; font-size:6px; font-weight:900; position:absolute; top:-12px; left:25px; }
.membership-card > span { color:var(--rose); letter-spacing:.14em; font-size:8px; font-weight:900; }
.membership-card.signature > span { color:#d9b995; }
.membership-card h3 { letter-spacing:-.03em; margin:12px 0; font-family:Georgia,serif; font-size:31px;
  font-weight:400; line-height:1.05; }
.membership-card > p { color:var(--muted); min-height:64px; font-size:10px; line-height:1.6; }
.membership-card.signature > p, .membership-card.signature > small { color:rgba(255,255,255,.58); }
.price { border-bottom:1px solid var(--line); align-items:baseline; gap:8px; padding:12px 0 17px; display:flex; }
.signature .price { border-color:rgba(255,255,255,.12); }
.price strong { color:var(--wine); font-family:Georgia,serif; font-size:46px; font-weight:400; }
.signature .price strong { color:var(--white); }
.price small, .application-price small { color:var(--muted); font-size:7px; }
.route-savings { background:#f6ebe5; border:1px solid rgba(107,30,42,.12); border-radius:13px;
  grid-template-columns:1fr auto; gap:2px 12px; margin-top:12px; padding:11px 13px; display:grid; }
.route-savings span { color:var(--wine); letter-spacing:.1em; font-size:6px; font-weight:900; }
.route-savings strong { color:var(--wine); grid-area:1/2/3; font-family:Georgia,serif; font-size:19px; font-weight:400; }
.route-savings small { color:var(--muted); font-size:7px; }
.route-savings.light { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.14); max-width:330px; }
.club-strip .route-savings.light span, .club-strip .route-savings.light strong { color:var(--white); }
.club-strip .route-savings.light small { color:rgba(255,255,255,.62); }
.application-price { border-bottom:1px solid rgba(107,30,42,.15); flex-direction:column; min-height:77px;
  padding:19px 0; display:flex; }
.application-price strong { color:var(--wine); letter-spacing:.1em; font-size:12px; }
.membership-card ul { color:var(--muted); margin:17px 0; padding:0; font-size:9px; line-height:2.3; list-style:none; }
.signature ul { color:rgba(255,255,255,.67); }
.membership-card > button { background:var(--wine); color:var(--white); letter-spacing:.09em; border:0;
  border-radius:999px; min-height:47px; margin-top:auto; font-size:7px; font-weight:900;
  transition:transform .18s; }
.membership-card > button:hover { transform:translateY(-2px); }
.signature > button { background:var(--white); color:var(--wine); }
.membership-card > small { color:var(--muted); text-align:center; margin-top:10px; font-size:7px; line-height:1.5; }

.club-strip { background:radial-gradient(circle at 85% 5%, #ffffff1f, transparent 12rem),
  linear-gradient(135deg,var(--wine),#9b4e5c); color:var(--white); border-radius:24px;
  justify-content:space-between; align-items:center; padding:29px 34px; display:flex; }
.membership-path-grid .club-strip { flex-direction:column; justify-content:center; align-items:flex-start;
  gap:30px; padding:52px; }
.membership-path-grid .club-strip h3 { max-width:720px; font-size:clamp(32px,3vw,48px); }
.membership-path-grid .club-strip p { max-width:760px; font-size:11px; }
.club-strip span { color:#e6c59c; letter-spacing:.14em; font-size:7px; font-weight:900; }
.club-strip h3 { margin:7px 0; font-family:Georgia,serif; font-size:25px; font-weight:400; }
.club-strip p { color:rgba(255,255,255,.62); max-width:720px; margin:0; font-size:9px; line-height:1.5; }
.club-strip button { background:var(--white); color:var(--wine); letter-spacing:.1em; border:0;
  border-radius:999px; flex:0 0 auto; min-height:45px; padding:0 18px; font-size:7px; font-weight:900; }

.level-transition-preview { background:linear-gradient(140deg,#f4e4df,#fffaf5);
  border:1px solid rgba(107,30,42,.13); border-radius:25px;
  grid-template-columns:minmax(250px,.8fr) minmax(480px,1.5fr) auto; align-items:center;
  gap:30px; margin-top:28px; padding:30px 33px; display:grid; }
.level-transition-preview > div > span { color:var(--rose); letter-spacing:.13em; font-size:7px; font-weight:900; }
.level-transition-preview h3 { margin:8px 0; font-family:Georgia,serif; font-size:26px; font-weight:400; }
.level-transition-preview > div > p { color:var(--muted); margin:0; font-size:8px; line-height:1.55; }
.level-transition-preview ol { grid-template-columns:repeat(2,1fr); gap:8px; margin:0; padding:0;
  list-style:none; display:grid; }
.level-transition-preview li { background:var(--white); border:1px solid var(--line); border-radius:14px;
  grid-template-columns:auto 1fr auto; align-items:center; gap:9px; min-height:66px; padding:10px 12px; display:grid; }
.level-transition-preview li > span { color:#c0945f; font-size:7px; font-weight:900; }
.level-transition-preview li small { color:var(--muted); font-size:6px; display:block; }
.level-transition-preview li strong { color:var(--wine); margin-top:2px; font-family:Georgia,serif;
  font-size:13px; font-weight:400; display:block; }
.level-transition-preview li em { color:var(--rose); font-style:normal; }
.level-transition-preview > button { background:var(--wine); color:var(--white); letter-spacing:.08em; border:0;
  border-radius:999px; min-height:45px; padding:0 18px; font-size:7px; font-weight:900; }

.sales-final-cta { background:radial-gradient(circle at 10% 80%, #c887913b, transparent 23rem), var(--plum);
  color:var(--white); text-align:center; flex-direction:column; align-items:center; padding:110px 24px; display:flex; }
.sales-final-cta > span { color:#d9b995; letter-spacing:.17em; font-size:8px; font-weight:900; }
.sales-final-cta h2 { letter-spacing:-.045em; max-width:960px; margin:15px 0 35px; font-family:Georgia,serif;
  font-size:clamp(38px,5vw,66px); font-weight:400; line-height:1.02; }
.sales-final-cta button { background:var(--white); color:var(--wine); letter-spacing:.1em; border:0;
  border-radius:999px; min-height:45px; padding:0 24px; font-size:8px; font-weight:900; }

@media (width <= 1050px) {
  .sales-header nav { display:none; }
  .sales-header { grid-template-columns:1fr 1fr; }
  .sales-hero { grid-template-columns:1fr; }
  .sales-copy { text-align:center; max-width:780px; margin:0 auto; }
  .sales-copy > p { margin-inline:auto; }
  .hero-actions { justify-content:center; }
  .membership-grid { grid-template-columns:repeat(2,1fr); }
  .level-transition-preview { grid-template-columns:1fr; }
  .membership-card.signature { transform:none; }
  .transformation-photos > span { height:230px; }
  .membership-path-grid { grid-template-columns:1fr; }
}
@media (width <= 720px) {
  .sales-header { padding:18px 16px; }
  .sales-header > .cta-nav { padding:0 13px; font-size:8px; }
  .sales-hero { padding:50px 20px; }
  .sales-copy h1 { font-size:47px; }
  .sales-visual { height:500px; }
  .hero-photo-placeholder { width:78%; height:470px; }
  .result-card { min-width:135px; padding:13px; }
  .result-card strong { font-size:14px; }
  .proof-strip { white-space:nowrap; justify-content:flex-start; gap:12px; padding:0 20px; overflow-x:auto; }
  .inside-preview { padding:80px 20px; }
  .membership-grid, .transformation-grid { grid-template-columns:1fr; }
  .results-section, .memberships-section { padding:80px 20px; }
  .results-heading { align-items:flex-start; display:block; }
  .results-heading > p { margin-top:20px; }
  .transformation-card { width:100%; max-width:430px; margin:0 auto; }
  .transformation-photos > span { height:250px; }
  .membership-card { min-height:0; }
  .membership-card.signature { margin-top:12px; }
  .velvet-program-ladder { grid-template-columns:1fr; }
  .velvet-program-ladder > div + div { border-left:0; border-top:1px solid var(--line); }
  .velvet-program-ladder em { bottom:-11px; right:50%; transform:rotate(90deg); }
  .level-transition-preview { padding:25px 20px; grid-template-columns:1fr; }
  .level-transition-preview ol { grid-template-columns:1fr; }
  .club-strip { flex-direction:column; align-items:flex-start; gap:22px; padding:26px 22px; }
  .membership-path-grid .club-strip { padding:28px 22px; }
  .sales-final-cta { padding:85px 20px; }
}