/* ============================================================
   INVITACIONES DIGITALES V2
   Una sola base visual para preview y publicación.
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.inv2-body{margin:0;background:#dedad4;color:var(--text);font-family:var(--body-font),sans-serif}
.inv2{width:min(900px,100%);margin:0 auto;background:var(--bg);color:var(--text);font-size:var(--body-size);line-height:1.45;container-type:inline-size;overflow:visible}
.inv2 *{box-sizing:border-box}
.inv-section-shell{width:var(--section-width,100%);margin:0 auto;position:relative;overflow:visible}
.inv2-section{position:relative;width:100%;padding:var(--section-padding,76px) 7%;background:var(--section-bg,var(--bg));color:var(--section-text,var(--text));overflow:visible}
.inv2-wrap{width:100%;max-width:100%;margin:0 auto;position:relative;overflow:visible;min-width:0}
.inv2-section h1,.inv2-section h2,.inv2-section h3{font-family:var(--title-font),serif;color:var(--section-title-color,var(--text));overflow-wrap:anywhere}
.inv2-section p,.inv2-section small,.inv2-section span,.inv2-section b,.inv2-section strong,.inv2-section time{overflow-wrap:anywhere}
.inv2-eyebrow{display:inline-block;color:var(--section-accent,var(--primary));font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase}
.inv2-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:999px;padding:12px 20px;background:var(--section-accent,var(--primary));color:#fff;text-decoration:none;font:800 12px var(--body-font),sans-serif;cursor:pointer;max-width:100%}
.inv2-btn.alt{background:transparent;color:var(--section-accent,var(--primary));border:1px solid currentColor}

/* Foto */
.inv2-hero-frame{position:relative;margin:0 auto;background:var(--surface);overflow:visible}
.inv2-photo{position:relative;height:clamp(420px,calc(var(--hero-scale,74) * 1cqw),820px);overflow:hidden;background:var(--surface)}
.inv2-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-position,center center);display:block;z-index:0}
.inv2-photo-overlay{position:absolute;inset:0;background:rgba(0,0,0,var(--hero-overlay,0));z-index:1;pointer-events:none}
.inv-theme-art{position:absolute;right:3%;bottom:2%;max-width:34%;max-height:58%;object-fit:contain;z-index:3;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.inv-photo-text,.inv-below-text{position:absolute!important;left:var(--web-left,50%);top:var(--web-top,50%);width:var(--web-mw,80%);height:var(--web-mh,auto);transform:translate(-50%,-50%);max-width:96%;font-size:var(--web-mfs,inherit)!important;color:var(--web-mcolor,inherit)!important;background:var(--web-mbg,transparent);font-family:var(--web-mfont,var(--body-font))!important;text-align:var(--web-malign,center)!important;overflow-wrap:anywhere;white-space:pre-line;box-sizing:border-box}
.inv-photo-text{z-index:6;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);padding:4px}
.inv-photo-text.el-message{line-height:1.6}
.inv2-intro{background:var(--section-bg,var(--surface));text-align:center}
.inv2-intro .inv2-wrap{min-height:390px}
.inv-below-text{margin:0!important;line-height:1.12}
.inv-below-text.el-message{line-height:1.75}

/* Marcos */
.frame-thin .inv2-photo{border:var(--frame-width) solid var(--frame-color);border-radius:var(--frame-radius)}
.frame-champagne .inv2-photo{border:calc(var(--frame-width) + 2px) double var(--frame-color);border-radius:var(--frame-radius)}
.frame-floral .inv2-photo{border:var(--frame-width) solid var(--frame-color);border-radius:var(--frame-radius);box-shadow:inset 0 0 0 8px var(--bg)}
.frame-floral:before,.frame-floral:after{content:'❦';position:absolute;z-index:8;color:var(--frame-color);font-size:34px}
.frame-floral:before{left:18px;top:12px}.frame-floral:after{right:18px;bottom:12px;transform:rotate(180deg)}
.frame-arch .inv2-photo{border:var(--frame-width) solid var(--frame-color);border-radius:max(80px,var(--frame-radius)) max(80px,var(--frame-radius)) var(--frame-radius) var(--frame-radius)}
.frame-polaroid{width:94%;padding:16px 16px 48px;background:#fff;margin:28px auto;box-shadow:0 var(--frame-shadow) calc(var(--frame-shadow)*2) rgba(0,0,0,.18)}
.frame-rounded .inv2-photo{border:var(--frame-width) solid var(--frame-color);border-radius:max(28px,var(--frame-radius))}
.inv2-hero-frame:not(.frame-polaroid) .inv2-photo{box-shadow:0 var(--frame-shadow) calc(var(--frame-shadow)*2) rgba(0,0,0,.11)}

/* Sistema de edición persistido: no altera un estilo si no existe la variable. */
.inv2 [style*="--web-x"]{position:relative;transform:translate(var(--web-x,0px),var(--web-y,0px));width:var(--web-w);height:var(--web-h);font-size:var(--web-fs)!important;color:var(--web-color)!important;background-color:var(--web-bg)!important;font-family:var(--web-font)!important;text-align:var(--web-align)!important;max-width:100%}
.inv2 .inv-item{display:inline-block;position:relative;max-width:100%;white-space:pre-line;vertical-align:baseline}

/* Cuenta regresiva */
.inv2-countdown{text-align:center;background:var(--section-bg,var(--primary));color:var(--section-text,#fff)}
.inv2-countdown .inv2-eyebrow{color:var(--section-title-color,#fff)}
.inv2-countdown-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:720px;margin:28px auto 0}
.inv2-countdown-grid>div{position:relative;padding:24px 12px;border:1px solid color-mix(in srgb,var(--section-accent,#fff) 38%,transparent);border-radius:22px;background:color-mix(in srgb,var(--section-title-color,#fff) 12%,transparent);min-width:0}
.inv2-countdown-grid strong{display:block;font:600 var(--count-size) var(--title-font),serif;line-height:1;color:var(--section-title-color,#fff)}
.inv2-countdown-grid small{display:block;margin-top:8px;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:var(--section-text,#fff)}

/* Familia */
.inv2-family{text-align:center}
.inv2-family h2,.inv2-ceremonies h2,.inv2-itinerary h2,.inv2-location h2,.inv2-dress h2,.inv2-music h2,.inv2-rsvp h2{font-size:var(--section-title);margin:8px 0 14px}
.family-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:920px;margin:28px auto 0}
.family-card{position:relative;background:var(--surface);border:1px solid color-mix(in srgb,var(--section-accent,var(--primary)) 28%,transparent);border-radius:20px;padding:24px;min-width:0}
.family-card h3{font-size:26px;margin:0 0 5px}.family-card small{display:block;color:var(--section-accent,var(--secondary));font-weight:700}.family-card p{color:var(--section-text,var(--muted));white-space:pre-line}

/* Ceremonias */
.ceremony-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:940px;margin:30px auto 0}
.ceremony-card-public{position:relative;text-align:center;background:var(--surface);border:1px solid color-mix(in srgb,var(--section-accent,var(--primary)) 28%,transparent);border-radius:24px;padding:30px;min-width:0}
.ceremony-card-public .icon{display:inline-block;font-size:34px}.ceremony-card-public h3{font-size:30px;margin:8px 0}.ceremony-card-public .time{display:block;color:var(--section-accent,var(--primary));font-weight:800;margin-bottom:8px}.ceremony-card-public p{color:var(--section-text,var(--muted));white-space:pre-line}

/* Itinerario */
.timeline{max-width:800px;margin:30px auto 0}.timeline-item{position:relative;display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--section-accent,var(--primary)) 22%,transparent);min-width:0}.timeline-item time{font-weight:800;color:var(--section-accent,var(--primary));font-size:17px}.timeline-item h3{margin:0 0 4px;font-size:24px}.timeline-item p{margin:4px 0;color:var(--section-text,var(--muted))}.timeline-item small{display:block;color:var(--section-text,var(--muted))}

/* Fecha, hora y lugar */
.inv2-details-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.inv2-detail{position:relative;background:var(--surface);border:1px solid color-mix(in srgb,var(--section-accent,var(--primary)) 28%,transparent);border-radius:24px;padding:30px 20px;text-align:center;min-width:0}.inv2-detail>span{display:block;color:var(--section-accent,var(--primary));text-transform:uppercase;letter-spacing:2px;font-weight:800;font-size:10px;margin-bottom:10px}.inv2-detail>b{display:block;font:600 var(--detail-size)/1.2 var(--title-font),serif;max-width:100%}

/* Ubicación */
.inv2-location-card{position:relative;max-width:820px;margin:auto;text-align:center;padding:48px;border:1px solid color-mix(in srgb,var(--section-accent,var(--primary)) 28%,transparent);border-radius:30px;background:var(--surface)}.inv2-location-card p{white-space:pre-line;color:var(--section-text,var(--muted));line-height:1.7}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* Vestimenta y música */
.inv2-dress{text-align:center}.inv2-dress p,.inv2-music p{color:var(--section-text,var(--muted))}.inv2-music{text-align:center}.inv-audio{width:min(520px,100%);margin:10px auto 0;display:block}.inv-music-player{position:relative;max-width:100%}

/* RSVP */
.inv2-rsvp-card{position:relative;max-width:760px;margin:auto;background:var(--surface);border:1px solid color-mix(in srgb,var(--section-accent,var(--primary)) 28%,transparent);border-radius:30px;padding:38px;box-shadow:0 25px 70px rgba(60,40,20,.08)}.inv2-rsvp-card h2{text-align:center}.guest-welcome,.ticket-note{text-align:center}.ticket-note{color:var(--section-text,var(--muted));font-size:12px}.inv2-rsvp-card .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.inv2-rsvp-card .field{display:flex;flex-direction:column;gap:7px;min-width:0}.inv2-rsvp-card .field.full{grid-column:1/-1}.inv2-rsvp-card label{font-size:12px;font-weight:800}.inv2-rsvp-card input,.inv2-rsvp-card select,.inv2-rsvp-card textarea{width:100%;min-width:0;padding:13px 14px;border:1px solid rgba(70,60,50,.17);border-radius:12px;background:var(--bg);color:var(--text);font:inherit}
.personal-link-required,.success-msg{padding:14px;border-radius:14px;text-align:center}.personal-link-required{background:color-mix(in srgb,var(--section-accent,var(--primary)) 8%,transparent)}.success-msg{background:#eef8ee;color:#35683b}

/* Layouts y temas */
.layout-party .inv-section-shell:not(:first-child),.layout-kids .inv-section-shell:not(:first-child){margin-top:16px;margin-bottom:16px}.layout-party .inv2-section,.layout-kids .inv2-section{border-radius:34px}.layout-editorial .inv2-intro{text-align:left}.layout-corporate .inv2-section h2,.layout-corporate .inv2-section h3{font-family:var(--body-font);font-weight:800}
.theme-kid_espacio .inv2-photo:before{content:'✦  ✧  ★';position:absolute;left:4%;top:5%;font-size:34px;color:#fff;z-index:2;letter-spacing:18px}.theme-kid_dinosaurios .inv2-photo:before{content:'🦕';position:absolute;left:4%;bottom:5%;font-size:76px;z-index:2}.theme-kid_heroe .inv2-photo:before{content:'⚡';position:absolute;left:4%;top:6%;font-size:80px;z-index:2}.theme-kid_princesa .inv2-photo:before{content:'👑';position:absolute;left:5%;top:5%;font-size:72px;z-index:2}.theme-kid_unicornio .inv2-photo:before{content:'🦄';position:absolute;left:4%;bottom:4%;font-size:80px;z-index:2}.theme-kid_animales .inv2-photo:before{content:'🐻';position:absolute;left:4%;bottom:4%;font-size:80px;z-index:2}.theme-kid_circo .inv2-photo:before{content:'🎪';position:absolute;left:4%;top:4%;font-size:72px;z-index:2}

.inv2-floating{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;gap:8px}.inv2-floating button,.inv2-floating a{width:46px;height:46px;border-radius:50%;border:1px solid rgba(70,60,50,.15);background:var(--surface);color:var(--text);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.12);cursor:pointer;text-decoration:none}

/* MÓVIL REAL V2.7: mismo diseño, adaptación responsive automática. */
@media(max-width:780px){
  .inv2{width:100%}.inv-section-shell{width:var(--section-mobile-width,100%)}
  .inv2-section{padding:calc(var(--section-padding,76px)*.72) 16px}
  .inv2-photo{height:clamp(380px,calc(var(--hero-scale,74) * 1cqw),620px)}
  .inv2 [style*="--web-x"]{transform:translate(var(--mobile-x,0px),var(--mobile-y,0px));width:var(--mobile-w);height:var(--mobile-h);font-size:var(--mobile-fs)!important;color:var(--mobile-color)!important;background-color:var(--mobile-bg)!important;font-family:var(--mobile-font)!important;text-align:var(--mobile-align)!important}
  .inv-photo-text,.inv-below-text{left:var(--mobile-left,var(--web-left,50%));top:var(--mobile-top,var(--web-top,50%));width:min(var(--mobile-mw,var(--web-mw,80%)),96%);height:var(--mobile-mh,var(--web-mh,auto));font-size:var(--mobile-mfs,var(--web-mfs,inherit))!important;color:var(--mobile-mcolor,var(--web-mcolor,inherit))!important;background:var(--mobile-mbg,var(--web-mbg,transparent));font-family:var(--mobile-mfont,var(--web-mfont,var(--body-font)))!important;text-align:var(--mobile-malign,var(--web-malign,center))!important}
  .inv2-intro .inv2-wrap{min-height:360px}
  .inv2-countdown-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .family-grid,.ceremony-grid,.inv2-details-grid{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:70px minmax(0,1fr);gap:12px}
  .inv2-location-card{padding:34px 22px}.inv2-rsvp-card{padding:28px 18px}.inv2-rsvp-card .form-grid{grid-template-columns:1fr}.inv2-rsvp-card .field.full{grid-column:auto}.frame-polaroid{width:94%;padding:10px 10px 32px}.inv-theme-art{max-width:42%}
}
/* Cuando el usuario redimensiona explícitamente un elemento, su ancho deja de estar
   limitado por la celda original. Así cada apartado se comporta como mini-lienzo. */
.inv2 [style*="--web-w"]{max-width:none}
@media(max-width:780px){.inv2 [style*="--mobile-w"]{max-width:100%!important}}

/* V2.4 · Itinerario con icono e intervalo horario */
.timeline-item{
  grid-template-columns:48px 125px minmax(0,1fr);
  align-items:start;
}
.timeline-emoji{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--section-accent,var(--primary)) 12%,transparent);
  font-size:24px;
}
.timeline-time-range{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  font-weight:800;color:var(--section-accent,var(--primary));font-size:16px;
}
.timeline-time-sep{opacity:.55}
.timeline-content{min-width:0}
@media(max-width:780px){
  .timeline-item{grid-template-columns:42px minmax(0,1fr);gap:10px 12px}
  .timeline-emoji{width:38px;height:38px;font-size:21px;grid-row:1/span 2}
  .timeline-time-range{grid-column:2;font-size:14px}
  .timeline-content{grid-column:2}
}

/* =========================================================
   V2.8 · PRIORIDAD DE COLORES Y FONDOS EDITADOS
   ========================================================= */
/* Los colores individuales elegidos en el editor siempre ganan al color
   general del apartado. Esto evita que reglas de tarjetas/timeline los pisen. */
.inv2 .inv-item[style*="--web-color"]{
  color:var(--web-color)!important;
}

/* El fondo asignado a una tarjeta/contenedor desde Vista previa siempre
   prevalece sobre --surface y sobre los fondos predeterminados del tema. */
.inv2 .family-card[style*="--web-bg"],
.inv2 .ceremony-card-public[style*="--web-bg"],
.inv2 .timeline-item[style*="--web-bg"],
.inv2 .inv2-detail[style*="--web-bg"],
.inv2 .inv2-location-card[style*="--web-bg"],
.inv2 .inv2-rsvp-card[style*="--web-bg"],
.inv2 .inv-music-player[style*="--web-bg"],
.inv2 [class*="inv2-"][style*="--web-bg"]{
  background-color:var(--web-bg)!important;
}

@media(max-width:780px){
  .inv2 .inv-item[style*="--web-color"]{
    color:var(--mobile-color,var(--web-color))!important;
  }
  .inv2 .family-card[style*="--web-bg"],
  .inv2 .ceremony-card-public[style*="--web-bg"],
  .inv2 .timeline-item[style*="--web-bg"],
  .inv2 .inv2-detail[style*="--web-bg"],
  .inv2 .inv2-location-card[style*="--web-bg"],
  .inv2 .inv2-rsvp-card[style*="--web-bg"],
  .inv2 .inv-music-player[style*="--web-bg"],
  .inv2 [class*="inv2-"][style*="--web-bg"]{
    background-color:var(--mobile-bg,var(--web-bg))!important;
  }
}