:root {
    --crema-fondo: #faf5ea;
    --crema-sobre: #ece1c8;
    --crema-sobre-solapa: #e3d5b3;
    --crema-sobre-sombra: #d8c69c;
    --texto-oscuro: #4a3f45;
    --dorado: #a9863f;

    /*
       FIX PRINCIPAL DE RESPONSIVE:
       Todo el sobre se construye con "border-triangles" en CSS,
       por lo que las medidas están relacionadas matemáticamente entre sí
       (alto = 65% del ancho, solapa = 53.8% del alto, etc.).
       En vez de fijar cada valor en px, se define un único ancho fluido
       (--sobre-w) con clamp() y el resto de medidas se calculan a partir
       de él con calc(). Así todo el sobre escala de forma proporcional
       en cualquier tamaño de pantalla sin romper la geometría ni
       provocar recortes o desbordamientos horizontales.
    */
    --sobre-w: clamp(240px, 82vw, 400px);
    --sobre-h: calc(var(--sobre-w) * 0.65); /* 260 / 400 */
}

* {
    box-sizing: border-box;
}

html {
    /* Evita el scroll horizontal si algo se desborda por accidente */
    overflow-x: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh; /* alto real en móviles (evita saltos por la barra del navegador) */
    background-color: var(--crema-fondo);
    margin: 0;
    padding: 20px;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
              max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    font-family: 'Cormorant Garamond', serif;
    overflow-x: hidden;
    overflow-y: auto; /* red de seguridad: permite scroll si el contenido no cabe en pantallas muy bajas */
    position: relative;
    -webkit-text-size-adjust: 100%;
}

/* Decoración floral de esquinas (glicinas) */
.flor {
    position: fixed;
    width: clamp(120px, 34vw, 340px);
    height: clamp(120px, 34vw, 340px);
    pointer-events: none;
    z-index: 0;
    /*opacity: 0.95;*/
}

.flor-tl {
    top: -10px;
    left: -10px;
}

.flor-tr {
    top: -10px;
    right: -10px;
    transform: scaleX(-1);
}

.flor-bl {
    bottom: -10px;
    left: -10px;
    transform: scaleY(-1);
}

.flor-br {
    bottom: -10px;
    right: -10px;
    transform: scale(-1, -1);
}

/* En pantallas muy pequeñas, las flores se reducen aún más y bajan
   su opacidad para no competir visualmente con la tarjeta */
@media (max-width: 420px) {
    .flor {
        width: 30vw;
        height: 30vw;
       /* opacity: 0.6;*/
    }
}

.contenedor-sobre {
    position: relative;
    width: var(--sobre-w);
    height: var(--sobre-h);
    cursor: pointer;
    z-index: 1;
    /* Área táctil cómoda y foco visible para accesibilidad de teclado */
    -webkit-tap-highlight-color: transparent;
}

.contenedor-sobre:focus-visible {
    outline: 3px solid var(--dorado);
    outline-offset: 6px;
    border-radius: 6px;
}

/* Base del sobre */
.sobre-base {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--crema-sobre);
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(74, 63, 69, 0.18);
    z-index: 4;
    overflow: hidden;
}

/* Pliegues inferiores decorativos (izquierdo y derecho) para el look de sobre clásico.
   Los border-width ahora usan calc() sobre --sobre-w / --sobre-h en vez de px fijos,
   así el triángulo conserva su proporción exacta a cualquier tamaño. */
.sobre-base::before,
.sobre-base::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
}

.sobre-base::before {
    left: 0;
    /*border-width: var(--sobre-h) calc(var(--sobre-w) / 2) 0 0;*/
    border-color: transparent var(--crema-sobre-sombra) transparent transparent;
    opacity: 0.55;
}

.sobre-base::after {
    right: 0;
   /* border-width: 0 0 var(--sobre-h) calc(var(--sobre-w) / 2);*/
    border-color: transparent transparent transparent var(--crema-sobre-sombra);
    opacity: 0.55;
}

/* Solapa superior (misma lógica: medidas relativas a --sobre-w / --sobre-h) */
.sobre-solapa {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-left: calc(var(--sobre-w) / 2) solid transparent;
    border-right: calc(var(--sobre-w) / 2) solid transparent;
    border-top: calc(var(--sobre-h) * 0.5385) solid var(--crema-sobre-solapa); /* 140 / 260 */
    transform-origin: top;
    transition: transform 0.5s ease;
    z-index: 4;
    filter: drop-shadow(0 6px 8px rgba(74, 63, 69, 0.12));
}

/* Tarjeta de invitación: ancho, alto y posición relativos al sobre */
.tarjeta-invitacion {
    position: absolute;
    bottom: calc(var(--sobre-h) * 0.0385);   /* 10 / 260 */
    left: calc(var(--sobre-w) * 0.075);      /* 30 / 400 */
    width: calc(var(--sobre-w) * 0.85);      /* 340 / 400 */
    height: calc(var(--sobre-h) * 0.923);    /* 240 / 260 */
    background-color: #fffdf8;
    padding: clamp(14px, calc(var(--sobre-h) * 0.115), 30px) clamp(12px, calc(var(--sobre-w) * 0.065), 26px);
    box-sizing: border-box;
    box-shadow: 0 10px 26px rgba(74, 63, 69, 0.18);
    transition: transform 0.8s ease 0.5s;
    z-index: 1;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #eadfc4;
    /* Si el texto llegara a ser más largo que el alto disponible,
       se puede desplazar dentro de la tarjeta en vez de desbordarse */
    overflow-y: auto;
}

.tarjeta-invitacion h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(17px, calc(var(--sobre-w) * 0.07), 28px);
    color: rgb(121, 166, 97);
    margin: 6px 0 14px;
    letter-spacing: 0.5px;
    line-height: 1.25;
}

.tarjeta-invitacion p {
    font-size: clamp(13px, calc(var(--sobre-w) * 0.045), 18px);
    color: rgb(121, 166, 97);
    margin: 6px 0;
    line-height: 1.5;
}

.tarjeta-invitacion strong {
    color: rgb(121, 166, 97);
}

/* Sello de lacre: tamaño y posición relativos al sobre.
   Se mantiene por encima del tamaño mínimo recomendado (44x44px)
   para que sea fácil de tocar en pantallas táctiles. */
.sello-lacre {
    position: absolute;
    top: calc(var(--sobre-h) * 0.3654);   /* 95 / 260 */
    left: calc(var(--sobre-w) * 0.3875);  /* 155 / 400 */
    width: max(48px, calc(var(--sobre-w) * 0.225)); /* 90 / 400, con piso táctil de 48px */
    height: max(48px, calc(var(--sobre-w) * 0.225));
    z-index: 5;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(74, 63, 69, 0.35));
}

.sello-lacre img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Clases de animación cuando se hace clic.
   El desplazamiento de la tarjeta ahora es proporcional a --sobre-h
   en lugar de un valor fijo en px, para que la animación se vea
   correcta en cualquier tamaño de pantalla. */
.abierto .sobre-solapa {
    transform: rotateX(180deg);
    z-index: 0;
}

.abierto .sello-lacre {
    opacity: 0;
    pointer-events: none;
}

.abierto .tarjeta-invitacion {
    transform: translateY(calc(var(--sobre-h) * -1.1538)); /* -300 / 260 */
    z-index: 3;
}

/* Respeta la preferencia del usuario de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
    .sobre-solapa,
    .sello-lacre,
    .tarjeta-invitacion {
        transition-duration: 0.01ms !important;
    }
}

/* Pantallas muy bajas en altura (móviles en horizontal): la tarjeta se
   desplaza hacia arriba al abrirse, así que se reserva espacio real
   (padding-top, no transform) equivalente a esa distancia para que
   nunca quede recortada por el overflow:hidden del body. */
@media (max-height: 420px) {
    :root {
        --sobre-w: clamp(240px, 52vh, 380px);
    }
    body {
        align-items: flex-start;
        padding-top: max(calc(var(--sobre-h) * 1.2), env(safe-area-inset-top));
        padding-bottom: 16px;
    }
}