<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout – Volver a Habitarme</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--rose: #C8847A;
--rose-dark: #9B5C54;
--rose-light: #F5EAE8;
--sage: #8FAF9A;
--cream: #FAF7F2;
--text: #2C2420;
--muted: #7A6E68;
--border: rgba(200,132,122,0.18);
--white: #ffffff;
}
body {
font-family: 'Jost', sans-serif;
background: var(--cream);
color: var(--text);
min-height: 100vh;
}
/* HEADER */
.checkout-header {
background: white;
border-bottom: 0.5px solid var(--border);
padding: 1.2rem 2rem;
text-align: center;
}
.brand-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 400;
color: var(--text);
letter-spacing: 1px;
}
.brand-tagline {
font-size: 11px;
color: var(--muted);
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 2px;
}
/* FRASE INSPIRADORA */
.frase-banner {
background: linear-gradient(135deg, #F5EAE8, #EAF0EC);
padding: 1.2rem 2rem;
text-align: center;
border-bottom: 0.5px solid var(--border);
}
.frase-banner p {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-style: italic;
color: var(--text);
font-weight: 300;
}
.frase-banner p em { color: var(--rose); font-style: normal; }
/* LAYOUT */
.checkout-layout {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 900px;
margin: 0 auto;
gap: 0;
min-height: calc(100vh - 140px);
}
/* RESUMEN PRODUCTO */
.order-summary {
background: white;
padding: 2.5rem 2.5rem 2.5rem 2rem;
border-right: 0.5px solid var(--border);
}
.summary-label {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rose);
margin-bottom: 1.5rem;
font-weight: 500;
}
.product-row {
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 0.5px solid var(--border);
}
.product-thumb {
width: 72px;
height: 90px;
background: linear-gradient(145deg, #E8CEC8, #C4978F);
border-radius: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
position: relative;
}
.product-qty {
position: absolute;
top: -6px; right: -6px;
width: 20px; height: 20px;
background: var(--rose);
border-radius: 50%;
font-size: 11px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Jost', sans-serif;
}
.product-info { flex: 1; }
.product-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 400;
line-height: 1.3;
margin-bottom: 4px;
}
.product-type {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
.product-tag {
display: inline-block;
background: var(--rose-light);
color: var(--rose-dark);
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 20px;
}
.product-price-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.product-price {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 600;
color: var(--text);
}
/* TOTALES */
.totals { margin-top: 1rem; }
.total-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
color: var(--muted);
border-bottom: 0.5px solid rgba(200,132,122,0.08);
}
.total-row.final {
padding-top: 14px;
font-size: 16px;
font-weight: 500;
color: var(--text);
border-bottom: none;
}
.total-row.final .total-amount {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 600;
}
/* INCLUDE MINI */
.mini-includes {
margin-top: 1.8rem;
padding-top: 1.5rem;
border-top: 0.5px solid var(--border);
}
.mini-include {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
font-size: 13px;
color: var(--muted);
}
.mini-check {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--rose-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--rose-dark);
flex-shrink: 0;
}
/* FORMULARIO */
.checkout-form {
padding: 2.5rem 2rem 2.5rem 2.5rem;
background: var(--cream);
}
.form-section { margin-bottom: 2rem; }
.form-section-title {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rose);
margin-bottom: 1.2rem;
font-weight: 500;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.form-row.full { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
font-size: 12px;
color: var(--muted);
font-weight: 400;
letter-spacing: 0.3px;
}
.form-input {
background: white;
border: 0.5px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
font-family: 'Jost', sans-serif;
font-size: 14px;
color: var(--text);
outline: none;
transition: border-color 0.2s;
-webkit-appearance: none;
}
.form-input:focus { border-color: var(--rose); }
.form-input::placeholder { color: rgba(122,110,104,0.4); }
/* MÉTODOS PAGO */
.payment-methods { display: flex; flex-direction: column; gap: 10px; }
.payment-option {
display: flex;
align-items: center;
gap: 12px;
background: white;
border: 0.5px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
cursor: pointer;
transition: border-color 0.2s;
}
.payment-option.selected { border-color: var(--rose); background: #FDF8F7; }
.payment-radio {
width: 18px; height: 18px;
border-radius: 50%;
border: 1.5px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.payment-radio.active { border-color: var(--rose); }
.payment-radio.active::after {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rose);
}
.payment-name { font-size: 14px; font-weight: 500; color: var(--text); }
.payment-icons { margin-left: auto; display: flex; gap: 6px; }
.payment-icon {
background: #F0F0F0;
border-radius: 4px;
padding: 3px 8px;
font-size: 10px;
color: #555;
font-weight: 500;
font-family: monospace;
}
/* BOTÓN COMPRAR */
.btn-comprar {
width: 100%;
background: var(--rose);
color: white;
font-family: 'Jost', sans-serif;
font-size: 15px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
padding: 18px;
border-radius: 60px;
border: none;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
margin-top: 1.5rem;
box-shadow: 0 8px 30px rgba(200,132,122,0.35);
}
.btn-comprar:hover { background: #B5726A; transform: translateY(-2px); }
.btn-comprar:active { transform: translateY(0); }
.security-row {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 14px;
font-size: 11px;
color: var(--muted);
letter-spacing: 0.3px;
}
.security-dot { opacity: 0.3; }
/* FRASE FINAL */
.checkout-frase {
text-align: center;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 0.5px solid var(--border);
}
.checkout-frase p {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
font-style: italic;
color: var(--muted);
line-height: 1.6;
font-weight: 300;
}
.checkout-frase em { color: var(--rose); font-style: normal; }
/* RESPONSIVE */
@media (max-width: 620px) {
.checkout-layout { grid-template-columns: 1fr; }
.order-summary { border-right: none; border-bottom: 0.5px solid var(--border); padding: 2rem 1.5rem; }
.checkout-form { padding: 2rem 1.5rem; }
.form-row { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- HEADER -->
<header class="checkout-header">
<div class="brand-name">Volver a Habitarme</div>
<div class="brand-tagline">tu espacio seguro para sanar</div>
</header>
<!-- FRASE INSPIRADORA -->
<div class="frase-banner">
<p>Cada paso hacia vos misma <em>es un acto de amor</em> 🌸</p>
</div>
<!-- CHECKOUT -->
<div class="checkout-layout">
<!-- RESUMEN -->
<div class="order-summary">
<div class="summary-label">tu pedido</div>
<div class="product-row">
<div class="product-thumb">
📖
<div class="product-qty">1</div>
</div>
<div class="product-info">
<div class="product-name">El Cuerpo Donde<br>Me Escondí</div>
<div class="product-type">Programa digital · PDF</div>
<div class="product-tag">descarga inmediata</div>
<div class="product-price-row">
<div class="product-price">USD 19.00</div>
</div>
</div>
</div>
<div class="totals">
<div class="total-row">
<span>Subtotal</span>
<span>USD 19.00</span>
</div>
<div class="total-row">
<span>Envío</span>
<span style="color:#8FAF9A">Gratis</span>
</div>
<div class="total-row final">
<span>Total</span>
<span class="total-amount">USD 19.00</span>
</div>
</div>
<div class="mini-includes">
<div class="mini-include">
<div class="mini-check">✓</div>
Guía de 12 semanas en PDF
</div>
<div class="mini-include">
<div class="mini-check">✓</div>
30+ recetas antiinflamatorias
</div>
<div class="mini-include">
<div class="mini-check">✓</div>
Tracker de hábitos imprimible
</div>
<div class="mini-include">
<div class="mini-check">✓</div>
Acceso de por vida
</div>
</div>
</div>
<!-- FORMULARIO -->
<div class="checkout-form">
<div class="form-section">
<div class="form-section-title">información de contacto</div>
<div class="form-row full">
<div class="form-group">
<label class="form-label">Email (recibirás tu descarga aquí)</label>
<input type="email" class="form-input" placeholder="tu@email.com">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Nombre</label>
<input type="text" class="form-input" placeholder="Tu nombre">
</div>
<div class="form-group">
<label class="form-label">Apellido</label>
<input type="text" class="form-input" placeholder="Tu apellido">
</div>
</div>
</div>
<div class="form-section">
<div class="form-section-title">método de pago</div>
<div class="payment-methods">
<div class="payment-option selected">
<div class="payment-radio active"></div>
<div class="payment-name">Tarjeta de crédito / débito</div>
<div class="payment-icons">
<span class="payment-icon">VISA</span>
<span class="payment-icon">MC</span>
</div>
</div>
<div class="payment-option">
<div class="payment-radio"></div>
<div class="payment-name">PayPal</div>
<div class="payment-icons">
<span class="payment-icon">PP</span>
</div>
</div>
</div>
</div>
<div class="form-section">
<div class="form-section-title">datos de tarjeta</div>
<div class="form-row full">
<div class="form-group">
<label class="form-label">Número de tarjeta</label>
<input type="text" class="form-input" placeholder="0000 0000 0000 0000">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Vencimiento</label>
<input type="text" class="form-input" placeholder="MM / AA">
</div>
<div class="form-group">
<label class="form-label">Código de seguridad</label>
<input type="text" class="form-input" placeholder="CVV">
</div>
</div>
</div>
<a href="https://volverahabitarme.myshopify.com/cart/52193761132856:1" class="btn-comprar" style="display:block;text-align:center;text-decoration:none">Comprar ahora</a>
<div class="security-row">
🔒 Pago seguro
<span class="security-dot">·</span>
Encriptado SSL
<span class="security-dot">·</span>
Descarga inmediata
</div>
<div class="checkout-frase">
<p>Gracias por elegirte.<br>Tu descarga llega <em>directo a tu corazón</em> 💜</p>
</div>
</div>
</div>
</body>
</html>