Completar mi compra

<!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>