.elementor-422 .elementor-element.elementor-element-7739d5a{--display:flex;}/* Start custom CSS for html, class: .elementor-element-4804845 *//* ====== (opcional) fuentes elegantes ======
   Si no quieres cargar fuentes externas, dime y lo dejo solo con fuentes del sistema. */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:wght@400;500;600&display=swap');

/* ====== Layout general (fondo editorial) ====== */
.sobre-dj{
  display:flex;
  justify-content:center;
  padding: clamp(34px, 5vw, 72px) 0;
  background: linear-gradient(180deg, #FBF7F2 0%, #F2EBE4 100%);
}

.sobre-card{
  position:relative;
  width:min(640px, 92vw);
  aspect-ratio: 406 / 518;
  display:block;
  cursor:pointer;
  border-radius: 22px;
  overflow:hidden;
  user-select:none;

  /* Esto evita el "negro" en transparencias del PNG */
  background: #F7F2EC;

  /* Tarjeta elegante */
  border: 1px solid rgba(35,35,35,.12);
  box-shadow: 0 16px 40px rgba(20,20,20,.12);
}

/* Imágenes */
.sobre-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1);
}
.sobre-img.cerrado{opacity:1;}
.sobre-img.abierto{opacity:0;}
.sobre-toggle:checked + .sobre-card .sobre-img.cerrado{opacity:0;}
.sobre-toggle:checked + .sobre-card .sobre-img.abierto{opacity:1;}

/* ====== TEXTO (más abajo + más grande + cursiva elegante) ====== */
.tarjeta-texto{
  position:absolute;

  /* Baja/sube aquí si necesitas milímetro perfecto */
  top: 34%;
  left: 50%;
  width: 78%;
  transform: translateX(-50%);
  text-align:center;

  opacity:0;
  transition: opacity 500ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
  transform: translate(-50%, 10px);

  color: rgba(25,25,25,.88);
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}
.sobre-toggle:checked + .sobre-card .tarjeta-texto{
  opacity:1;
  transform: translate(-50%, 0);
}

.tt-titulo{
  font-family: "Cormorant Garamond", "Georgia", serif;
  font-size: clamp(18px, 2.8vw, 28px);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.tt-sub{
  margin-top: 10px;
  font-family: "Cormorant Garamond", "Georgia", serif;
  font-size: clamp(15px, 2.1vw, 18px);
  opacity: .92;
}

.tt-firma{
  margin-top: 12px;
  font-family: "Great Vibes", cursive;
  font-size: clamp(28px, 4.2vw, 42px);
  letter-spacing: .02em;
  opacity: .95;
}

/* ====== Hint (solo cuando está cerrado) ====== */
.sobre-hint{
  position:absolute;
  left: 50%;
  top: 66%;             /* justo arriba del sello */
  transform: translate(-50%, -100%);
  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(247,242,236,.92);
  border: 1px solid rgba(35,35,35,.14);
  box-shadow: 0 10px 22px rgba(20,20,20,.12);

  font-family: "Cormorant Garamond", "Georgia", serif;
  font-size: 16px;
  letter-spacing: .04em;

  opacity:1;
  transition: opacity 350ms ease, transform 350ms ease;
  animation: hintPulse 1.8s ease-in-out infinite;
}

/* Flecha */
.sobre-hint::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(247,242,236,.92);
  filter: drop-shadow(0 3px 2px rgba(20,20,20,.10));
}

/* Al abrir: desaparece */
.sobre-toggle:checked + .sobre-card .sobre-hint{
  opacity:0;
  transform: translate(-50%, -120%);
  animation: none;
  pointer-events:none;
}

@keyframes hintPulse{
  0%,100% { transform: translate(-50%, -100%) scale(1); }
  50%     { transform: translate(-50%, -102%) scale(1.03); }
}

/* Móvil: afinado */
@media (max-width: 767px){
  .tarjeta-texto{ top: 26%; width: 84%; }
  .sobre-hint{ font-size: 15px; top: 67%; }
}

/* --- Ajuste: texto más abajo + cursiva real --- */
.elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto{
  top: 31% !important;     /* 🔻 antes estaba muy arriba */
  width: 80% !important;
}

/* Tipografía cursiva/elegante (no mayúsculas) */
.elementor-422 .elementor-element.elementor-element-4804845 .tt-titulo{
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: clamp(22px, 3.2vw, 32px) !important;
  text-transform: none !important;   /* quita uppercase */
  letter-spacing: .02em !important;
}

.elementor-422 .elementor-element.elementor-element-4804845 .tt-sub{
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: clamp(16px, 2.3vw, 20px) !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
}

/* Firma más elegante y grande */
.elementor-422 .elementor-element.elementor-element-4804845 .tt-firma{
  font-family: "Great Vibes", "Brush Script MT", cursive !important;
  font-style: normal !important;
  font-size: clamp(34px, 4.8vw, 52px) !important;
}

/* Base (PC/Tablet): centrado y posición cómoda */
.elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto{
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  width: 82% !important;
  top: 31% !important;  /* PC */
}

/* 📱 MÓVIL: subir el texto para que no choque con el sello */
@media (max-width: 767px){
  .elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto{
    top: 26% !important;    /* 🔺 súbelo aquí */
    width: 88% !important;
  }

  /* Ajustes finos para que se vea elegante sin invadir el sello */
  .elementor-422 .elementor-element.elementor-element-4804845 .tt-titulo{
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.15 !important;
  }
  .elementor-422 .elementor-element.elementor-element-4804845 .tt-sub{
    font-size: clamp(13px, 3.8vw, 16px) !important;
    line-height: 1.2 !important;
  }
  .elementor-422 .elementor-element.elementor-element-4804845 .tt-firma{
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1 !important;
  }
}

/* ✅ Hint "Toca aquí para abrir" arriba del sello */
.elementor-422 .elementor-element.elementor-element-4804845 .sobre-card{
  position: relative; /* asegura posicionamiento del hint */
}

.elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30% !important;   /* 🔺 SUBE/BAJA AQUÍ (más % = más arriba) */
  z-index: 10;

  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(6px);

  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
}

/* Solo visible cuando está CERRADO */
.elementor-422 .elementor-element.elementor-element-4804845 .sobre-toggle:checked + .sobre-card .sobre-hint{
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: .25s ease;
}
.elementor-422 .elementor-element.elementor-element-4804845 .sobre-toggle:not(:checked) + .sobre-card .sobre-hint{
  opacity: 1;
  visibility: visible;
  transition: .25s ease;
}

/* 📱 Ajuste en móvil */
@media (max-width: 767px){
  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{
    bottom: 34% !important; /* 🔺 móvil: normalmente necesita ir más arriba */
    font-size: 13px;
    padding: 7px 12px;
  }
}

/* ✅ Hint apenas arriba del sello (PC + móvil) */
.elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{
  left: 50% !important;
  top: 58% !important;                 /* referencia del área del sello */
  bottom: auto !important;
  transform: translate(-50%, -100%) translateY(-6px) !important;  /* 👈 apenas arriba */
  z-index: 999 !important;
}

/* 📱 Móvil: normalmente el sello se ve un poco más “alto”, subimos 1-2px */
@media (max-width: 767px){
  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{
    top: 60% !important;
    transform: translate(-50%, -100%) translateY(-8px) !important; /* 👈 apenas arriba */
  }
}

/* Parpadeo suave SOLO cuando está cerrado */
@keyframes djHintBlink{
  0%, 100% { opacity: 1; }
  50%      { opacity: .15; }
}

.elementor-422 .elementor-element.elementor-element-4804845 .sobre-toggle:not(:checked) + .sobre-card .sobre-hint{
  animation: djHintBlink 1.3s ease-in-out infinite;
}

/* Al abrir, se apaga (por si acaso) */
.elementor-422 .elementor-element.elementor-element-4804845 .sobre-toggle:checked + .sobre-card .sobre-hint{
  animation: none !important;
}

/* 👈 Ajuste fino: mover el hint un poco a la IZQUIERDA */
.elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{
  left: calc(50% - 8px) !important; /* cambia -8px si lo necesitas */
}

/* 👉 Ajuste fino: mover el hint un poco a la DERECHA */
.elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{
  left: calc(50% + 8px) !important;  /* sube a +10px o +12px si hace falta */
}

.elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{ left: calc(50% + 6px) !important; } /* PC */

@media (max-width: 767px){
  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{ left: calc(50% + 10px) !important; } /* móvil */
}

/* 📱 Ajuste SOLO móvil: mover hint un poco más a la derecha */
@media (max-width: 767px){
  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{
    left: calc(50% + 16px) !important; /* antes +10px */
  }
}

/* ✅ SOLO MÓVIL: ajusta el globo "Toca aquí para abrir" sin afectar PC */
@media (max-width: 767px){
  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{
    left: 50% !important;
    transform: translateX(-50%) translateX(0px) !important; /* <- AJUSTE FINO AQUÍ */
  }
}

@media (max-width: 767px){
  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{
    left: 50% !important;
    transform: translate(-50%, -100%) translateX(0px) translateY(-10px) !important;
  }
}

@media (max-width: 767px){
  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-hint{
    left: 50% !important;
    transform: translate(-50%, -100%) translateX(2px) translateY(-10px) !important;
  }
}

/* ===============================
   Texto "Abriendo invitación…" (solo al abrir)
   Enfocado a que NO se desfase en móvil
================================ */

/* Base: oculto por defecto */
.elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto::after{
  content: "";
  display: none;
}

/* Aparece SOLO cuando el sobre está abierto */
.elementor-422 .elementor-element.elementor-element-4804845 .sobre-toggle:checked + .sobre-card .tarjeta-texto::after{
  content: "Abriendo invitación…";
  display: block;

  width: 100%;
  text-align: center;

  margin-top: 10px;              /* separación en PC */
  line-height: 1.15;
  letter-spacing: .03em;
  opacity: .85;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 2vw, 18px);

  animation: djPulse 1s ease-in-out infinite;
}

/* Ajuste SOLO móvil: evita que baje demasiado o se monte */
@media (max-width: 767px){
  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-toggle:checked + .sobre-card .tarjeta-texto::after{
    margin-top: 6px;             /* 👈 más pegado (móvil) */
    font-size: 14px;             /* 👈 tamaño fijo para que no “salte” */
    letter-spacing: .02em;
    transform: translateY(-2px); /* 👈 súbelo un toque sin desfasar */
  }
}

/* ===============================
   Texto "Abriendo invitación…" (solo al abrir)
   Enfocado a que NO se desfase en móvil
================================ */

/* Base: oculto por defecto */
.elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto::after{
  content: "";
  display: none;
}

/* Aparece SOLO cuando el sobre está abierto */
.elementor-422 .elementor-element.elementor-element-4804845 .sobre-toggle:checked + .sobre-card .tarjeta-texto::after{
  content: "Abriendo invitación…";
  display: block;

  width: 100%;
  text-align: center;

  margin-top: 10px;              /* separación en PC */
  line-height: 1.15;
  letter-spacing: .03em;
  opacity: .85;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 2vw, 18px);

  animation: djPulse 1s ease-in-out infinite;
}

/* Ajuste SOLO móvil: evita que baje demasiado o se monte */
@media (max-width: 767px){
  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-toggle:checked + .sobre-card .tarjeta-texto::after{
    margin-top: 6px;             /* 👈 más pegado (móvil) */
    font-size: 14px;             /* 👈 tamaño fijo para que no “salte” */
    letter-spacing: .02em;
    transform: translateY(-2px); /* 👈 súbelo un toque sin desfasar */
  }
}

/* animación suave (pro) */
@keyframes djPulse{
  0%   { opacity: .55; transform: translateY(0); }
  50%  { opacity: .90; transform: translateY(-1px); }
  100% { opacity: .55; transform: translateY(0); }
}

/* Ajuste SOLO en la web (no en el editor de Elementor) */
body:not(.elementor-editor-active) .elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto{
  top: 30% !important; /* súbelo: baja este número si sigue muy abajo */
}

/* Ajuste SOLO móvil */
@media (max-width: 767px){
  body:not(.elementor-editor-active) .elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto{
    top: 26% !important; /* súbelo en móvil: baja este número */
  }
}

/* Asegura que el contenedor sea referencia */
.sobre-dj .sobre-card{
  position: relative !important;
}

/* Texto sobre la tarjeta: centrado estable */
.sobre-dj .tarjeta-texto{
  position: absolute !important;
  left: 50% !important;
  top: 38% !important;               /* ← AJUSTA SOLO ESTE NÚMERO */
  transform: translate(-50%, -50%) !important;
  width: min(86%, 520px) !important;
  text-align: center !important;
}

/* Móvil: normalmente necesita otro "top" */
@media (max-width: 767px){
  .sobre-dj .tarjeta-texto{
    top: 34% !important;             /* ← AJUSTA SOLO ESTE NÚMERO */
    width: 88% !important;
  }
}

/* Caja del texto dentro del sobre */
.sobre-dj .tarjeta-texto{
  position: absolute !important;
  left: 50% !important;
  top: 34% !important;               /* PC: ajusta solo este valor si lo necesitas */
  transform: translate(-50%, -50%) !important;
  width: min(86%, 560px) !important;
  text-align: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* SOLO móvil */
@media (max-width: 767px){
  .sobre-dj .tarjeta-texto{
    top: 30% !important;             /* Móvil: ajusta solo este valor */
    width: 88% !important;
  }
}

/* Ajuste SOLO móvil: compactar el bloque para que suba “sin subir” */
@media (max-width: 767px){

  .elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto{
    top: 31% !important;                 /* deja este valor como lo tienes si ya te funciona */
  }

  .elementor-422 .elementor-element.elementor-element-4804845 .tt-titulo{
    font-size: clamp(20px, 5.6vw, 26px) !important;
    line-height: 1.05 !important;
    margin: 0 0 4px 0 !important;
  }

  .elementor-422 .elementor-element.elementor-element-4804845 .tt-sub{
    font-size: clamp(14px, 4.0vw, 18px) !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
  }

  /* Aquí está la clave: menos alto y menos “respiro” */
  .elementor-422 .elementor-element.elementor-element-4804845 .tt-firma{
    font-size: clamp(34px, 9.2vw, 46px) !important;  /* antes más grande */
    line-height: 1.00 !important;
    letter-spacing: 0.01em !important;
    margin: 0 !important;
  }

  /* Si “Abriendo invitación…” lo tienes como texto o pseudo-elemento, esto lo compacta */
  .elementor-422 .elementor-element.elementor-element-4804845 .tt-firma + .tt-loading,
  .elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto .tt-loading,
  .elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto::after{
    font-size: clamp(13px, 3.6vw, 16px) !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
  }
}

/* SOLO móvil: compactar el nombre para que no se salga de la tarjeta */
@media (max-width: 767px){

  .elementor-422 .elementor-element.elementor-element-4804845 .tt-firma{
    font-size: clamp(30px, 8.3vw, 42px) !important; /* un notch menos */
    line-height: 1.0 !important;

    max-width: 86% !important;   /* evita que se pegue a los bordes */
    margin: 0 auto !important;
    padding: 0 6px !important;

    white-space: nowrap !important;
    display: inline-block !important;

    transform: scaleX(0.95) !important; /* compacta sin “encoger” demasiado */
    transform-origin: center !important;
  }

}
/* SOLO PC/Escritorio: ajuste suave del nombre para que no se desborde */
@media (min-width: 1025px){

  .elementor-422 .elementor-element.elementor-element-4804845 .tt-firma{
    max-width: 92% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;

    white-space: nowrap !important;
    display: inline-block !important;

    transform: scaleX(0.98) !important; /* más sutil que móvil */
    transform-origin: center !important;
  }

}

/* ================================
   AJUSTE SOLO PC (Desktop)
   ================================ */
@media (min-width: 1025px){

  /* Caja general del texto sobre la tarjeta */
  .elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto{
    top: 30% !important;            /* ajusta altura sin mover el móvil */
    width: 78% !important;          /* evita que se salga */
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  /* Firma "Diana & Javier" (la que suele desbordar) */
  .elementor-422 .elementor-element.elementor-element-4804845 .tt-firma{
    max-width: 92% !important;
    margin: 10px auto 0 !important;
    padding: 0 10px !important;
    white-space: nowrap !important;

    /* micro-ajuste para que NO se salga (D y r) */
    transform: translateX(-50%) scaleX(.98) !important;
    left: 50% !important;
    position: relative !important;
  }

  /* Texto "Abriendo invitación..." un poco más estable */
  .elementor-422 .elementor-element.elementor-element-4804845 .tt-loading{
    margin-top: 8px !important;
  }
}

/* ✅ Ajuste PC (pantallas grandes) */
@media (min-width: 768px){
  .elementor-422 .elementor-element.elementor-element-4804845 .tarjeta-texto{
    top: 34% !important; /* prueba 33%–37% */
  }

/* ✅ SOLO PC: ajustar SOLO el nombre (Diana & Javier) */
@media (min-width: 1024px){
  .elementor-422 .elementor-element.elementor-element-4804845 .tt-firma{
    display: inline-block !important;
    max-width: 92% !important;      /* evita que se salga */
    white-space: nowrap !important; /* mantiene en una sola línea */
    padding: 0 .18em !important;    /* “aire” para que la D y la r no asomen */
    line-height: 1.05 !important;

    /* Encoge un poco horizontalmente sin mover el resto */
    transform: scaleX(0.92) !important;
    transform-origin: center !important;
  }
}

/* ✅ SOLO PC: arreglar “Diana & Javier” (centrar + reducir) */
@media (min-width: 1024px){
  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-dj .tarjeta-texto{
    text-align: center !important;
  }

  .elementor-422 .elementor-element.elementor-element-4804845 .sobre-dj .tarjeta-texto .tt-firma{
    /* Quitar cualquier desplazamiento viejo */
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    /* Centrado real */
    display: inline-block !important;
    margin: 6px auto 0 !important;

    /* Que entre dentro del área blanca */
    max-width: 92% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    /* Más pequeño (solo PC) */
    font-size: clamp(28px, 2.8vw, 42px) !important;

    /* Ayuda a que no “asomen” letras por los lados */
    letter-spacing: -0.01em !important;
    padding: 0 .12em !important;
  }
}/* End custom CSS */