<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;600&display=swap');

    body {
      margin: 0;
      padding: 30px 10px;
      background-color: #141414;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: 'Cormorant Garamond', Georgia, serif;
    }

    /* Base de papel Kraft */
    .kraft-card {
      width: 380px;
      height: 610px;
      background-color: #d8c3a9;
      background-image: 
        radial-gradient(#b89e82 1px, transparent 1px),
        radial-gradient(#8f765c 0.8px, transparent 0.8px);
      background-size: 24px 24px, 16px 16px;
      border-radius: 8px;
      box-shadow: 0 20px 45px rgba(0,0,0,0.6);
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px 20px 48px 20px;
      box-sizing: border-box;
    }

    /* Tarjeta interior marfil montada */
    .white-sheet {
      width: 100%;
      height: 100%;
      background-color: #fbfaf7;
      border: 1px solid #ddd5c9;
      border-radius: 4px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.08);
      position: relative;
      padding: 32px 22px 24px 22px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
    }

    /* Marco perimetral fino */
    .sheet-border {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      border: 1px solid #c8beaec4;
      pointer-events: none;
    }

    /* Contenedor central con la línea y el fondo de agua alineados */
    .watermark-line-container {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 10px 0;
    }

    /* Marca de agua J&M alineada al centro sobre el eje de la línea */
    .watermark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Cormorant Garamond', serif;
      font-size: 130px;
      font-weight: 600;
      color: #3b352e;
      opacity: 0.085;
      letter-spacing: -4px;
      white-space: nowrap;
      user-select: none;
      pointer-events: none;
      z-index: 1;
    }

    /* Línea divisoria central con rombo en el medio */
    .line-wrapper {
      position: relative;
      z-index: 2;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 12px 0 6px 0;
    }

    .line-segment {
      width: 70px;
      height: 1px;
      background-color: #baa895;
    }

    .line-diamond {
      width: 5px;
      height: 5px;
      background-color: #baa895;
      transform: rotate(45deg);
    }

    .content-block {
      position: relative;
      z-index: 2;
      width: 100%;
      text-align: center;
    }

    /* Tipografías caligráficas y de soporte */
    .verse {
      font-family: 'Alex Brush', cursive;
      font-size: 32px;
      color: #242424;
      line-height: 1.5;
      margin: 0;
    }

    .conectar {
      margin: 10px 0 4px 0;
      position: relative;
      z-index: 2;
    }

    .conectar-y {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 21px;
      color: #57524b;
      display: block;
      margin-bottom: -8px;
    }

    .conectar-main {
      font-family: 'Alex Brush', cursive;
      font-size: 48px;
      color: #1a1a1a;
      display: block;
    }

    .thanks {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 17.5px;
      color: #383531;
      margin: 12px 0 16px 0;
      line-height: 1.35;
    }

    .signature {
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      letter-spacing: 5px;
      color: #1a1a1a;
      text-transform: uppercase;
      font-weight: 600;
      margin: 0 0 4px 0;
    }

    .date {
      font-family: 'Montserrat', sans-serif;
      font-size: 10px;
      letter-spacing: 4px;
      color: #7a7266;
      margin: 0;
    }

    /* Ojal y borla colgante inferior */
    .eyelet {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #523826;
      border: 2px solid #362215;
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
    }

    .tassel-thread {
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 3px;
      height: 25px;
      background: #4a3424;
      z-index: 2;
    }

    .tassel-knot {
      position: absolute;
      bottom: -32px;
      left: 50%;
      transform: translateX(-50%);
      width: 15px;
      height: 16px;
      background: #3e2a1b;
      border-radius: 6px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      z-index: 2;
    }

    .tassel-skirt {
      position: absolute;
      bottom: -95px;
      left: 50%;
      transform: translateX(-50%);
      width: 22px;
      height: 65px;
      background: linear-gradient(90deg, #301f13 0%, #543b27 30%, #3e2a1b 70%, #291a0f 100%);
      border-radius: 2px 2px 6px 6px;
      box-shadow: 0 6px 14px rgba(0,0,0,0.35);
      clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
      z-index: 2;
    }
  </style>
</head>
<body>

  <!-- TARJETA ENCUADRADA -->
  <div class="kraft-card">
    <div class="white-sheet">
      <div class="sheet-border"></div>

      <!-- Bloque Superior: Poema -->
      <div class="content-block">
        <p class="verse">
          Tantos siglos,<br>
          tantos países,<br>
          tanto espacio...
        </p>
      </div>

      <!-- Zona Central: Marca de Agua J&M centrada en el eje de la línea -->
      <div class="watermark-line-container">
        <!-- Marca de agua exactamente centrada -->
        <div class="watermark">J&amp;M</div>

        <!-- Texto 'y coincidir' superpuesto con armonía -->
        <div class="conectar">
          <span class="conectar-y">y</span>
          <span class="conectar-main">coincidir</span>
        </div>

        <!-- Línea divisoria enmarcada con rombo central -->
        <div class="line-wrapper">
          <div class="line-segment"></div>
          <div class="line-diamond"></div>
          <div class="line-segment"></div>
        </div>
      </div>

      <!-- Bloque Inferior: Agradecimiento, Nombres y Fecha -->
      <div class="content-block">
        <p class="thanks">
          ¡Gracias por acompañarnos y ser parte<br>de nuestra historia!
        </p>

        <p class="signature">Jaime &amp; Melissa</p>
        <p class="date">07 · 11 · 2026</p>
      </div>
    </div>

    <!-- Ojal y Borla café tabaco -->
    <div class="eyelet"></div>
    <div class="tassel-thread"></div>
    <div class="tassel-knot"></div>
    <div class="tassel-skirt"></div>
  </div>

</body>
</html>
