:root {
      --navy: #2c3e6b;
      --gold: #c9a96e;
      --blue-grey: #7a9bc7;
      --bg: #fafbfd;
      --text: #2c3e6b;
      --text-light: #6b7a8d;
      --divider: #c8d4de;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; overflow-x:clip; }
    body { font-family:'Lato',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }

    /* ══ DESKTOP STRIP LAYOUT ══ */
    @media(min-width:900px){
      /* Outer page background — warm blue-grey tone to complement navy/gold/botanical */
      body {
        background: #dde4ed;
      }

      /* The strip wrapper around all screens */
      #page-strip {
        max-width: 720px;
        margin: 0 auto;
        box-shadow: 0 0 60px rgba(44,62,107,0.13), 0 0 120px rgba(44,62,107,0.07);
        position: relative;
        overflow: hidden;
      }

      /* Each screen fills the strip naturally */
      .screen {
        overflow: hidden;
      }

      /* Botanical corners stay clipped to the strip */
      .bot-tl { width:200px; height:250px; }
      .bot-tr { width:185px; height:235px; }
      .bot-bl { width:175px; height:220px; }
      .bot-br { width:175px; height:220px; }

      .wc-tl { width:320px; height:320px; }
      .wc-tr { width:300px; height:300px; }
      .wc-bl { width:290px; height:290px; }
      .wc-br { width:300px; height:300px; }

      /* Content sizing inside strip */
      .screen > .fi { max-width:100%; }
      .hex-wrap { width:280px; height:280px; }
      .body-text { max-width:440px; }
      .rsvp-form { max-width:480px; }
    }

    @media(min-width:1200px){
      #page-strip { max-width: 760px; }
    }

    /* ══ MOBILE SCROLL FIXES ══ */
    @media(max-width:899px){
      /* Prevent iOS rubber-band from breaking layout */
      html, body {
        height: 100%;
        overscroll-behavior-y: none;
      }
      /* Ensure sections don't accidentally block touch events */
      .screen {
        touch-action: pan-y;
      }
      /* Fix for iOS where position:fixed children can block scroll */
      #page-strip {
        -webkit-overflow-scrolling: touch;
      }
      /* Prevent botanical animations from creating invisible overflow areas */
      .bot-tl, .bot-tr, .bot-bl, .bot-br,
      .wc-blob {
        pointer-events: none;
      }
    }

    @keyframes sway {
      0%,100% { transform: rotate(0deg) translateX(0); }
      30%      { transform: rotate(2deg) translateX(3px); }
      70%      { transform: rotate(-1.5deg) translateX(-2px); }
    }
    @keyframes swayR {
      0%,100% { transform: scaleX(-1) rotate(0deg); }
      30%      { transform: scaleX(-1) rotate(1.8deg); }
      70%      { transform: scaleX(-1) rotate(-2deg); }
    }
    @keyframes swayBL {
      0%,100% { transform: scaleY(-1) rotate(0deg); }
      30%      { transform: scaleY(-1) rotate(1.6deg); }
      70%      { transform: scaleY(-1) rotate(-1.8deg); }
    }
    @keyframes swayBR {
      0%,100% { transform: scale(-1,-1) rotate(0deg); }
      30%      { transform: scale(-1,-1) rotate(1.5deg); }
      70%      { transform: scale(-1,-1) rotate(-1.6deg); }
    }

    @keyframes envFall {
      0%   { transform: translateY(-80px) rotate(var(--rot)) translateX(0); opacity:0; }
      10%  { opacity:1; }
      85%  { opacity:1; }
      100% { transform: translateY(110vh) rotate(calc(var(--rot) + 25deg)) translateX(var(--drift)); opacity:0; }
    }
    .envelope-rain { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
    .env { position:absolute; top:0; animation: envFall var(--dur) var(--delay) linear infinite; will-change:transform; }

    .screen {
      position:relative; min-height:100vh;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; padding:70px 30px; overflow:hidden; background:#fff;
    }

    /* ── DESKTOP CONTENT BAND ── */
    @media(min-width:768px){
      .screen { padding:80px 40px; }
    }
    @media(min-width:1024px){
      /* Content band: centers everything within a readable column */
      .screen > .fi,
      .screen > .rsvp-form,
      .screen > .rsvp-ok,
      .screen > .envelope-rain {
        max-width: 680px;
        width: 100%;
      }
      /* The decorative elements (wc-blob, bot-corner) still fill full width */
      .hex-wrap { width:300px; height:300px; }
      .hero-hex-wrap { width:450px; height:450px; }
      .body-text { max-width:480px; font-size:1.1rem; }
      .names-hero { font-size:2.4rem; }
      .title-caps { font-size:2rem; }
      .cd-num { font-size:3rem; }
      .cd-unit { padding:0 28px; }
      .itin-list { gap:36px; }
      .rsvp-form { max-width:520px; }
      .gal-hex { width:150px; height:150px; }
    }
    @media(min-width:1280px){
      .screen > .fi { max-width: 720px; }
      .body-text { max-width:520px; }
    }
    @media(min-width:768px){
      .rsvp-card { padding:36px 34px 32px; }
      .rsvp-title { font-size:clamp(1.8rem, 3vw, 2.35rem); }
      .rsvp-lead { font-size:1.14rem; }
    }
    .screen:nth-child(even) { background:var(--bg); }

    .ol-tl { position:absolute; top:-10px; left:-10px; width:220px; pointer-events:none; z-index:1; transform-origin:30px 30px; animation:sway 7s ease-in-out infinite; }
    .ol-tr { position:absolute; top:-10px; right:-10px; width:220px; pointer-events:none; z-index:1; transform:scaleX(-1); transform-origin:calc(100% - 30px) 30px; animation:swayR 8s ease-in-out infinite; }
    .ol-bl { position:absolute; bottom:-10px; left:-10px; width:180px; pointer-events:none; z-index:1; transform:scaleY(-1); transform-origin:30px calc(100% - 30px); animation:swayBL 7.5s ease-in-out infinite; }
    .ol-br { position:absolute; bottom:-10px; right:-10px; width:180px; pointer-events:none; z-index:1; transform:scale(-1,-1); transform-origin:calc(100% - 30px) calc(100% - 30px); animation:swayBR 8.5s ease-in-out infinite; }

    /* ── HEX ── */
    .hex-wrap { position:relative; width:270px; height:270px; margin:0 auto 24px; z-index:2; }
    .hex-clip { width:100%; height:100%; clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); overflow:hidden; background:#dce8f0; }
    .hex-clip img { width:100%; height:100%; object-fit:cover; display:block; }
    .hex-placeholder {
      width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
      background:linear-gradient(135deg,#dce8f0,#eef3f7); color:var(--blue-grey);
      font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase;
      gap:10px; cursor:pointer; position:relative;
    }
    .hex-placeholder input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
    .hex-border-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }

    /* ── TYPOGRAPHY ── */
    .title-caps { font-family:'Cinzel',serif; font-size:clamp(1.5rem,6vw,2.2rem); font-weight:600; color:var(--navy); letter-spacing:0.1em; position:relative; z-index:2; }
    .names-hero { font-family:'Cinzel',serif; font-size:clamp(1.6rem,7vw,2.6rem); font-weight:600; color:var(--navy); letter-spacing:0.08em; position:relative; z-index:2; }
    .body-text  { font-family:'Cormorant Garamond',serif; font-size:clamp(1rem,3.5vw,1.15rem); line-height:2.1; color:var(--navy); max-width:370px; width:100%; position:relative; z-index:2; word-break:break-word; }

    .gold-rule { display:flex; align-items:center; justify-content:center; gap:12px; margin:0 auto 20px; position:relative; z-index:2; }
    .gold-rule::before,.gold-rule::after { content:''; display:block; height:1px; width:70px; background:var(--gold); }
    .gold-dot { width:5px; height:5px; background:var(--gold); border-radius:50%; }
    .section-divider { width:1px; height:48px; background:var(--divider); margin:14px auto; position:relative; z-index:2; }

    .date-row  { display:flex; align-items:center; justify-content:center; gap:14px; margin:14px 0 6px; position:relative; z-index:2; }
    .date-day  { font-family:'Cormorant Garamond',serif; font-size:clamp(2.4rem,9vw,3.8rem); color:var(--navy); line-height:1; font-weight:300; }
    .date-side { font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.2em; color:var(--navy); text-align:center; }
    .date-rule { width:55px; height:1px; background:var(--gold); margin-top:4px; }
    .date-year { font-family:'Cinzel',serif; font-size:0.9rem; letter-spacing:0.22em; color:var(--navy); position:relative; z-index:2; }

    /* ── COUNTDOWN ── */
    .countdown { display:flex; gap:0; position:relative; z-index:2; }
    .cd-unit { display:flex; flex-direction:column; align-items:center; padding:0 18px; }
    .cd-unit+.cd-unit { border-left:1px solid var(--divider); }
    .cd-num   { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,8vw,2.8rem); color:var(--navy); line-height:1; font-weight:300; }
    .cd-label { font-family:'Lato',sans-serif; font-size:0.7rem; letter-spacing:0.1em; color:var(--text-light); margin-top:4px; }

    /* ── SECTION ICONS ── */
    .sec-icon { width:64px; height:64px; margin-bottom:14px; position:relative; z-index:2; }

    /* ── ICON BTN ── */
    .icon-btn { display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; text-decoration:none; position:relative; z-index:2; margin-top:16px; }
    .icon-ring {
      width:68px; height:68px; border-radius:50%;
      border:1.5px solid var(--navy);
      display:flex; align-items:center; justify-content:center;
      transition:transform 0.25s, border-color 0.25s, background 0.25s;
      background: transparent; position:relative;
    }
    .icon-ring::after {
      content:''; position:absolute; inset:5px; border-radius:50%;
      border:1px solid rgba(201,169,110,0.35); transition:border-color 0.25s;
    }
    .icon-btn:hover .icon-ring { border-color:var(--gold); background:rgba(201,169,110,0.06); transform:scale(1.08); }
    .icon-btn:hover .icon-ring::after { border-color:var(--gold); }
    .icon-btn:hover .icon-ring .ic-navy { stroke:var(--gold); }
    .ic-navy { stroke:var(--navy); fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition:stroke 0.25s; }
    .ic-gold { stroke:var(--gold); fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
    .icon-label { font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:0.18em; color:var(--navy); }

    /* ── ITINERARY ── */
    .itin-list { display:flex; flex-direction:column; gap:32px; z-index:2; position:relative; margin-top:6px; }
    .itin-item { display:flex; flex-direction:column; align-items:center; gap:10px; }
    .itin-icon-wrap { width:52px; height:52px; display:flex; align-items:center; justify-content:center; }
    .itin-time { font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--navy); }

    /* ── RSVP NUEVO ── */
    .rsvp-wrap{ position:relative; }
    .rsvp-intro-badge{
      display:inline-flex; align-items:center; justify-content:center;
      margin-bottom:18px; padding:10px 18px;
      border:1px solid rgba(201,169,110,0.55);
      background:rgba(255,255,255,0.72); backdrop-filter:blur(6px);
      font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:0.18em;
      text-transform:uppercase; color:var(--gold); border-radius:999px;
      box-shadow:0 8px 24px rgba(44,62,107,0.08);
    }
    .rsvp-icon{ margin-bottom:8px; }
    .rsvp-title{ max-width:14ch; line-height:1.2; }
    .rsvp-rule{ margin:16px auto 18px; }
    .rsvp-lead{ max-width:520px; margin-bottom:28px; text-align:center; }
    .rsvp-card{
      width:100%; max-width:560px; padding:30px 26px 26px;
      border:1px solid rgba(122,155,199,0.22);
      background:linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(250,251,253,0.96) 100%);
      box-shadow:0 18px 46px rgba(44,62,107,0.10), 0 4px 18px rgba(44,62,107,0.05);
      position:relative; z-index:2; overflow:hidden;
    }
    .rsvp-card::before{
      content:''; position:absolute; top:0; left:0; right:0; height:4px;
      background:linear-gradient(90deg, rgba(201,169,110,0.15) 0%, rgba(201,169,110,0.95) 50%, rgba(201,169,110,0.15) 100%);
    }
    .rsvp-card::after{
      content:''; position:absolute; inset:10px;
      border:1px solid rgba(201,169,110,0.14); pointer-events:none;
    }
    .rsvp-card-kicker{
      font-family:'Cinzel',serif; font-size:0.66rem; letter-spacing:0.24em;
      text-transform:uppercase; color:var(--gold); text-align:center; margin-bottom:12px;
    }
    .rsvp-card-copy{
      font-family:'Cormorant Garamond',serif; font-size:1.08rem; line-height:1.85;
      color:var(--navy); text-align:center; max-width:440px; margin:0 auto 24px;
    }
    .rsvp-form{ display:flex; flex-direction:column; gap:18px; width:100%; max-width:none; position:relative; z-index:2; }
    .form-field{ display:flex; flex-direction:column; gap:7px; text-align:left; }
    .form-field label{ font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:0.2em; color:var(--text-light); text-transform:uppercase; }
    .form-field input,.form-field select,.form-field textarea {
      border:1px solid rgba(122,155,199,0.24); background:rgba(255,255,255,0.88);
      padding:14px 16px; font-family:'Cormorant Garamond',serif; font-size:1.05rem; line-height:1.3; color:var(--navy);
      outline:none; transition:border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.2s ease;
      appearance:none; width:100%; -webkit-appearance:none; border-radius:14px;
      box-shadow:0 2px 10px rgba(44,62,107,0.03);
    }
    .form-field input::placeholder,.form-field textarea::placeholder{ color:#8ea0b7; }
    .form-field input:focus,.form-field select:focus,.form-field textarea:focus{
      border-color:rgba(201,169,110,0.95); box-shadow:0 0 0 4px rgba(201,169,110,0.12); background:#fff;
    }
    .form-field textarea{ resize:vertical; min-height:110px; }
    .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .submit-btn{
      margin-top:10px; padding:16px 28px; min-height:54px; width:100%; border:none; border-radius:999px;
      background:linear-gradient(135deg, #d7bb84 0%, #c9a96e 100%); color:var(--navy);
      font-family:'Cinzel',serif; font-size:0.72rem; font-weight:600; letter-spacing:0.24em; cursor:pointer;
      transition:transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease; align-self:center;
      box-shadow:0 12px 28px rgba(201,169,110,0.34);
    }
    .submit-btn:hover{ transform:translateY(-2px) scale(1.01); box-shadow:0 16px 34px rgba(201,169,110,0.40); filter:saturate(1.04); }
    .submit-btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
    .rsvp-helper{
      margin-top:2px; text-align:center; font-family:'Cormorant Garamond',serif;
      font-size:1rem; font-style:italic; color:var(--text-light);
    }
    .rsvp-ok{
      display:none; margin-top:22px; padding:22px 24px; max-width:520px;
      background:rgba(255,255,255,0.86); border:1px solid rgba(201,169,110,0.35);
      box-shadow:0 12px 30px rgba(44,62,107,0.08);
      font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.16rem; color:var(--navy);
      line-height:1.9; position:relative; z-index:2;
    }
    #s-rsvp{
      background:radial-gradient(circle at top, rgba(201,169,110,0.08) 0%, rgba(201,169,110,0) 35%),
      linear-gradient(180deg, #fafbfd 0%, #f7f9fc 100%);
    }
    #s-rsvp .fi{ position:relative; z-index:3; }
    #s-rsvp .bot-tr{ opacity:0.62; }
    #s-rsvp .bot-bl{ opacity:0.34; }

    /* ── REGALO ── */
    .iban-box { background:rgba(255,255,255,0.85); border:1px solid var(--divider); padding:18px 28px; position:relative; z-index:2; margin:18px 0 8px; backdrop-filter:blur(4px); }
    .iban-num { font-family:'Cinzel',serif; font-size:clamp(0.75rem,3vw,1rem); letter-spacing:0.18em; color:var(--navy); }
    .copy-btn { display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; background:none; border:none; position:relative; z-index:2; margin-top:4px; }
    .copy-btn:hover .icon-ring { border-color:var(--gold); background:rgba(201,169,110,0.06); transform:scale(1.08); }
    .copy-btn:hover .icon-ring::after { border-color:var(--gold); }
    .copy-btn:hover .ic-navy { stroke:var(--gold); }
    #copyFeedback { font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.18em; color:var(--gold); height:16px; position:relative; z-index:2; transition:opacity 0.4s; opacity:0; }

    /* ── GALLERY ── */
    .gal-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:20px; position:relative; z-index:2; }
    .gal-hex { width:130px; height:130px; position:relative; }
    .gal-hex .hex-clip { width:100%; height:100%; }

    /* ── SCROLL FADE ── */
    .fi { opacity:0; transform:translateY(22px); transition:opacity 0.85s ease,transform 0.85s ease; }
    .fi.vis { opacity:1; transform:translateY(0); }

    .hero-hex-wrap { width:405px; height:405px; }
    .hero-wedding-text { font-family:'Cinzel',serif; font-size:clamp(1.2rem,4.4vw,1.5rem); font-weight:700; letter-spacing:0.18em; color:var(--navy); margin-top:16px; position:relative; z-index:2; }

    /* ══ MOBILE — 480px and below ══ */
    @media(max-width:480px){
      /* Sections */
      .screen { padding:60px 20px; }

      /* Hex photos */
      .hex-wrap { width:200px; height:200px; }
      .hero-hex-wrap { width:300px; height:300px; }

      /* Names */
      .names-hero { font-size:clamp(1.3rem,8vw,2rem); letter-spacing:0.05em; }
      .title-caps { font-size:clamp(1.1rem,5.5vw,1.6rem); }

      /* Date row */
      .date-day { font-size:clamp(2rem,10vw,3rem); }
      .date-side { font-size:0.62rem; }

      /* Countdown */
      .cd-unit  { padding:0 8px; }
      .cd-num   { font-size:clamp(1.6rem,9vw,2.2rem); }
      .cd-label { font-size:0.6rem; }

      /* Body text */
      .body-text { font-size:1rem; line-height:1.9; max-width:100%; padding:0 4px; }

      /* RSVP form */
      .rsvp-intro-badge {
        max-width:92%; text-align:center; line-height:1.6; padding:10px 14px;
      }
      .rsvp-card { padding:24px 18px 22px; }
      .rsvp-card-copy { font-size:1rem; line-height:1.75; }
      .form-row { grid-template-columns:1fr; gap:18px; }
      .form-field input,
      .form-field select,
      .form-field textarea { padding:13px 14px; font-size:1rem; }
      .submit-btn { width:100%; padding:16px 20px; font-size:0.68rem; letter-spacing:0.18em; }

      /*  box */
      .iban-box { padding:14px 16px; }
      .iban-num { font-size:clamp(0.6rem,3.5vw,0.85rem); letter-spacing:0.1em; }

      .nos-gondola{
        width:min(96vw, 520px);
        height:140px;
        margin-top:18px;
      }

      /* Gallery hexagons */
      .gal-hex { width:100px; height:100px; }

      /* Botanical corners — smaller on mobile so they don't overwhelm */
      .bot-tl { width:160px; height:200px; }
      .bot-tr { width:150px; height:190px; }
      .bot-bl { width:140px; height:180px; }
      .bot-br { width:140px; height:180px; }

      /* Watercolor blobs — scale down */
      .wc-tl { width:260px; height:260px; }
      .wc-tr { width:240px; height:240px; }
      .wc-bl { width:230px; height:230px; }
      .wc-br { width:240px; height:240px; }

      /* Itinerary */
      .itin-list { gap:24px; }
      .itin-time { font-size:1rem; }

      /* Icon buttons */
      .icon-ring { width:58px; height:58px; }
      .icon-label { font-size:0.58rem; }

      /* Section icon */
      .sec-icon { width:52px; height:52px; }

      /* Section divider */
      .section-divider { height:36px; }
    }

    /* ══ SMALL PHONES — 360px and below ══ */
    @media(max-width:360px){
      .screen { padding:50px 16px; }
      .hex-wrap { width:170px; height:170px; }
      .hero-hex-wrap { width:255px; height:255px; }
      .cd-unit { padding:0 6px; }
      .iban-num { font-size:0.6rem; letter-spacing:0.06em; }

      .nos-gondola{
        width:min(96vw, 420px);
        height:120px;
      }

      .bot-tl,.bot-tr,.bot-bl,.bot-br { width:120px; height:150px; }
    }

    /* ── BASE64 ASSETS (defined once) ── */
    .wc-blob {
      position: absolute; pointer-events: none; z-index: 0;
      background-image: url('../pictures/wc-blob.png');
      background-size: 100% 100%; background-repeat: no-repeat;
      opacity: 0.5; mix-blend-mode: multiply;
    }
    .bot-corner {
      position: absolute; pointer-events: none; z-index: 1;
      background-image: url('../pictures/bot-corner.png');
      background-size: 100% 100%; background-repeat: no-repeat;
    }
    .wc-tl { top:-80px; left:-80px; width:380px; height:380px; transform:rotate(-10deg); }
    .wc-tr { top:-60px; right:-80px; width:350px; height:350px; transform:rotate(20deg) scaleX(-1); }
    .wc-bl { bottom:0px; left:-70px; width:340px; height:340px; transform:rotate(8deg) scaleY(-1); }
    .wc-br { bottom:0px; right:-80px; width:360px; height:360px; transform:rotate(-18deg) scale(-1,-1); }
    .bot-tl { top:-15px; left:-15px; width:240px; height:300px; transform-origin:40px 40px; animation:sway 7s ease-in-out infinite; }
    .bot-tr { top:-15px; right:-15px; width:220px; height:280px; transform:scaleX(-1); transform-origin:calc(100% - 40px) 40px; animation:swayR 8s ease-in-out infinite; }
    .bot-bl { bottom:0px; left:-15px; width:200px; height:260px; transform:scaleY(-1); transform-origin:40px calc(100% - 40px); animation:swayBL 7.5s ease-in-out infinite; }
    .bot-br { bottom:0px; right:-15px; width:200px; height:260px; transform:scale(-1,-1); transform-origin:calc(100% - 40px) calc(100% - 40px); animation:swayBR 8.5s ease-in-out infinite; }

/* ── NOSOTROS · VENECIA ROMÁNTICA ── */
    #s-nos { position:relative; overflow:hidden; }
    #s-nos .fi { position:relative; z-index:3; }
    .nos-decor { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
    .nos-star, .nos-sparkle, .nos-envelope, .nos-gondola, .nos-moon, .nos-water, .nos-shooting-star { position:absolute; pointer-events:none; }
    .nos-star, .nos-sparkle { color:rgba(201,169,110,.95); text-shadow:0 0 10px rgba(201,169,110,.35); }
    .nos-star { font-size:18px; animation:nosTwinkle 3.8s ease-in-out infinite alternate; }
    .nos-sparkle { font-size:11px; animation:nosTwinkle 2.6s ease-in-out infinite alternate; }
    .nos-star.s1 { top:9%; left:9%; animation-delay:.2s; }
    .nos-star.s2 { top:12%; right:16%; animation-delay:1.4s; }
    .nos-star.s3 { top:24%; left:18%; animation-delay:2s; }
    .nos-star.s4 { top:34%; right:8%; animation-delay:.9s; }
    .nos-star.s5 { bottom:26%; left:10%; animation-delay:1.8s; }
    .nos-sparkle.k1 { top:18%; left:28%; animation-delay:.6s; }
    .nos-sparkle.k2 { top:28%; right:26%; animation-delay:1.7s; }
    .nos-sparkle.k3 { bottom:33%; right:18%; animation-delay:2.1s; }
    .nos-sparkle.k4 { bottom:20%; left:28%; animation-delay:1.1s; }
    .nos-moon{
  position:absolute;
  top:44px;
  right:42px;
  width:82px;
  height:82px;
  border-radius:50%;

  background:radial-gradient(
    circle at 35% 35%,
    rgba(255,248,218,.98) 0%,
    rgba(243,231,191,.92) 42%,
    rgba(201,169,110,.7) 72%,
    rgba(201,169,110,.08) 100%
  );

  box-shadow:0 0 30px rgba(201,169,110,.22);
  opacity:.85;

  animation:nosMoonFloat 7s ease-in-out infinite;

  -webkit-mask: radial-gradient(circle at 70% 50%, transparent 60%, black 61%);
  mask: radial-gradient(circle at 62% 50%, transparent 60%, black 61%);
}
    
    .nos-envelope { font-size:22px; opacity:.55; animation:nosFloatMail 10s ease-in-out infinite; }
    .nos-envelope.e1 { left:5%; top:56%; animation-delay:0s; }
    .nos-envelope.e2 { right:6%; top:62%; font-size:18px; animation-delay:2.7s; }
    .nos-envelope.e3 { left:14%; top:74%; font-size:16px; animation-delay:5.2s; }
    .nos-water { left:0; right:0; bottom:0; height:74px; overflow:hidden; opacity:.55; }
    .nos-water::before, .nos-water::after { content:''; position:absolute; left:-10%; width:120%; height:34px; border-radius:48% 52% 0 0 / 100% 100% 0 0; background:rgba(122,155,199,.18); animation:nosWave 8.5s ease-in-out infinite; }
    .nos-water::before { bottom:8px; }
    .nos-water::after { bottom:-4px; background:rgba(122,155,199,.12); animation-duration:11s; animation-direction:reverse; }

    .nos-gondola{
      position:absolute;
      left:-80px;
      bottom:6px;
      width:180px;
      height:75px;
      overflow:visible;
      z-index:2;
      animation:nosGondolaSail 35s linear infinite;
      will-change:transform;
    }
    .nos-gondola svg{
      width:100%;
      height:100%;
      display:block;
      overflow:visible;
      filter:none;
      animation:nosBoatBob 4.8s ease-in-out infinite;
      transform-origin:50% 70%;
    }
    .nos-shooting-star { top:14%; right:-22%; width:120px; height:2px; opacity:0; transform:rotate(-22deg); transform-origin:right center; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,248,218,.98) 40%, rgba(201,169,110,.65) 100%); box-shadow:0 0 10px rgba(255,248,218,.35); }
    #s-nos.inview .nos-shooting-star { animation:nosShootingStar 16s linear infinite; animation-delay:3s; }
    @keyframes nosTwinkle { from { opacity:.25; transform:translateY(0) scale(.85); } to { opacity:1; transform:translateY(-3px) scale(1.18); } }
    @keyframes nosMoonFloat{
  0%,100%{
    transform:translateY(0) rotate(220deg);
  }
  50%{
    transform:translateY(-6px) rotate(220deg);
  }
} 50% { transform:translateY(-8px); } }
    @keyframes nosFloatMail { 0%,100% { transform:translateY(0) rotate(-8deg); opacity:.18; } 50% { transform:translateY(-18px) rotate(8deg); opacity:.58; } }
    @keyframes nosWave { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-4%); } }
    @keyframes nosGondolaSail{
  0%{
    transform: translate3d(-35%, 0, 0);
  }
  100%{
    transform: translate3d(110vw, 0, 0);
  }
}
    @keyframes nosBoatBob { 0%,100% { transform:translateY(0) rotate(0deg); } 25% { transform:translateY(-2px) rotate(.6deg); } 50% { transform:translateY(-4px) rotate(-1.1deg); } 75% { transform:translateY(-1px) rotate(.4deg); } }
    @keyframes nosShootingStar {
      0%, 12% { opacity:0; transform:translateX(0) translateY(0) rotate(-22deg) scaleX(.7); }
      14% { opacity:.9; }
      22% { opacity:0; transform:translateX(-48vw) translateY(20vh) rotate(-22deg) scaleX(1.1); }
      100% { opacity:0; transform:translateX(-48vw) translateY(20vh) rotate(-22deg) scaleX(1.1); }
    }
    @media (min-width:900px) {
      .nos-gondola { width:225px; height:93px; bottom:10px; }
      .nos-water { height:82px; }
      .nos-moon { right:74px; width:92px; height:92px; }
    }
    @media (max-width:640px) {
      .nos-moon { width:66px; height:66px; top:54px; right:18px; }
      .nos-gondola { width:180px; height:75px; bottom:16px; left:-50px; animation-duration:12s; }
      .nos-star.s4, .nos-sparkle.k3 { display:none; }

    }
    /* ── PONTE RIALTO — imagen sketch, esquina inferior derecha ── */
    .nos-rialto {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 75%;
      max-width: 480px;
      height: 200px;
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      transition: opacity 1.8s ease 0.4s;
      overflow: hidden;
    }
    #s-nos.inview .nos-rialto { opacity: 0.28; }
    .nos-rialto img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 38%;
      display: block;
    }
    @media (max-width: 640px) {
      .nos-rialto { width: 85%; height: 140px; }
    }
    @media (min-width: 900px) {
      .nos-rialto { width: 70%; max-width: 520px; height: 220px; }
    }

/* --- Star glow animation --- */
.star{
  position:absolute;
  color:#d4af37;
  font-size:20px;
  opacity:0;
  pointer-events:none;
  animation:starGlow 6s ease-in-out infinite;
}

.star.s1{top:40px;left:15%;animation-delay:0s}
.star.s2{top:120px;right:18%;animation-delay:2s}
.star.s3{bottom:80px;left:25%;animation-delay:4s}
.star.s4{top:200px;right:30%;animation-delay:1s}
.star.s5{bottom:30px;right:12%;animation-delay:3s}

@keyframes starGlow{
  0%{opacity:0;transform:scale(0.6)}
  30%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.2)}
  70%{opacity:.6;transform:scale(1)}
  100%{opacity:0;transform:scale(0.6)}
}

/* FULLSCREEN TRIPTYCH */
#env-overlay{
 position:fixed;
 inset:0;
 z-index:99999;
 background:linear-gradient(180deg,#f6f9fc 0%,#e9eff6 100%);
 overflow:hidden;
}

.triptych-full{
 position:absolute;
 inset:0;
 display:flex;
}

.triptych-panel{
 width:50vw;
 height:100vh;
 background:#ffffff;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:transform 2.4s cubic-bezier(.2,.8,.2,1);
 box-shadow:0 0 40px rgba(44,62,107,.08);
}

.triptych-panel.left{
 transform-origin:left center;
 border-right:1px solid rgba(122,155,199,.2);
}

.triptych-panel.right{
 transform-origin:right center;
 border-left:1px solid rgba(122,155,199,.2);
}

.triptych-cover{
 width:100%;
 height:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 background:
 radial-gradient(circle at 40% 30%, rgba(255,255,255,.8), rgba(255,255,255,0)),
 linear-gradient(180deg,#ffffff,#f7fafc);
}

.cover-inner{
 text-align:center;
 font-family:'Cormorant Garamond',serif;
}

.cover-monogram{
 font-family:'Cinzel',serif;
 letter-spacing:.3em;
 color:#c9a96e;
 margin-bottom:12px;
}

.cover-title{
 font-size:2.6rem;
 color:#2c3e6b;
}

.cover-date{
 font-size:1.3rem;
 color:#2c3e6b;
 margin-bottom:10px;
}

.cover-open{
 font-size:.9rem;
 letter-spacing:.25em;
 color:rgba(44,62,107,.6);
}

.triptych-center{
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 background:transparent;
 opacity:0;
 transition:opacity 2.8s ease;
 pointer-events:none;
}

.center-inner{
 text-align:center;
}

.center-monogram{
 font-family:'Cinzel',serif;
 color:#c9a96e;
 letter-spacing:.3em;
 margin-bottom:10px;
}

.center-title{
 font-family:'Cormorant Garamond',serif;
 font-size:3rem;
 color:#2c3e6b;
}

.center-date{
 font-family:'Cinzel',serif;
 letter-spacing:.3em;
 font-size:.9rem;
 color:#2c3e6b;
 margin-top:8px;
}

.triptych-open .triptych-panel.left{
 transform:translateX(-100%);
}

.triptych-open .triptych-panel.right{
 transform:translateX(100%);
}

.triptych-open .triptych-center{
 opacity:1;
}

/* auto-open + refined reveal */
#page-strip{
  opacity:0;
  transform:translateY(24px) scale(.992);
  transition:
    opacity 1.5s ease,
    transform 1.6s cubic-bezier(.2,.8,.2,1),
    filter 1.6s ease;
  filter:blur(10px);
}
body.page-revealed #page-strip{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.triptych-full::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  width:120px;
  height:100%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.72) 40%,
    rgba(255,255,255,.92) 50%,
    rgba(255,255,255,.72) 60%,
    rgba(255,255,255,0) 100%);
  opacity:.0;
  pointer-events:none;
  z-index:5;
}
.triptych-opening::before{
  animation:foldGlow 2.4s ease forwards;
}
@keyframes foldGlow{
  0%{opacity:0; transform:translateX(-50%) scaleX(.6);}
  20%{opacity:.18;}
  50%{opacity:.48;}
  80%{opacity:.18;}
  100%{opacity:0; transform:translateX(-50%) scaleX(1.25);}
}
.triptych-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  opacity:0;
  transition:opacity 1.8s ease, transform 1.8s cubic-bezier(.2,.8,.2,1);
  transform:translateY(16px) scale(.99);
  pointer-events:none;
}
.triptych-open .triptych-center{
  opacity:1;
  transform:translateY(0) scale(1);
}
.triptych-panel{
  transition:transform 2.8s cubic-bezier(.2,.8,.2,1), box-shadow 2.8s ease, opacity 1.2s ease;
}



.nos-moon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;

  background:radial-gradient(
    circle at 38% 50%,
    rgba(255,248,210,.65) 0%,
    rgba(255,248,210,.35) 18%,
    rgba(255,248,210,.08) 32%,
    transparent 45%
  );

  filter:blur(2px);
  mix-blend-mode:screen;
}

/* Estrellas añadidas (+15% aprox.) */
.nos-star.s6{
  top:12%;
  left:68%;
  animation-delay:1.4s;
}

.nos-star.s7{
  top:22%;
  left:14%;
  animation-delay:3.1s;
}
@media (max-width: 480px) {
  /* Más espacio para que el título no pegue con la decoración */
  #s-ceremonia .fi {
    position: relative;
    z-index: 3;
    padding-top: 28px;
  }

  /* El título un poco más compacto y legible */
  #s-ceremonia .title-caps {
    font-size: clamp(1rem, 5.2vw, 1.35rem);
    line-height: 1.15;
    padding: 0 14px;
  }

  /* Alejar y suavizar la botánica en esta sección */
  #s-ceremonia .bot-tl {
    width: 165px;
    height: 217px;
    top: -8px;
    left: -26px;
    opacity: 1;
  }

  #s-ceremonia .bot-br {
    width: 105px;
    height: 140px;
    right: -18px;
    bottom: -10px;
    opacity: 0.28;
  }

 /* Más espacio para que el título no pegue con la decoración */
  #s-regalo .fi {
    position: relative;
    z-index: 3;
    padding-top: 28px;
  }

  /* El título un poco más compacto y legible */
  #s-regalo .title-caps {
    font-size: clamp(1rem, 5.2vw, 1.35rem);
    line-height: 1.15;
    padding: 0 14px;
  }

  /* Alejar y suavizar la botánica en esta sección */
  #s-regalo .bot-tl {
    width: 165px;
    height: 217px;
    top: -8px;
    left: -26px;
    opacity: 1;
  }

  #s-regalo .bot-br {
    width: 105px;
    height: 140px;
    right: -18px;
    bottom: -10px;
    opacity: 0.28;
  }


 /* Más espacio para que el título no pegue con la decoración */
  #s-cd .fi {
    position: relative;
    z-index: 3;
    padding-top: 28px;
  }

  /* El título un poco más compacto y legible */
  #s-cd .title-caps {
    font-size: clamp(1rem, 5.2vw, 1.35rem);
    line-height: 1.15;
    padding: 0 14px;
  }

  /* Alejar y suavizar la botánica en esta sección */
  #s-cd .bot-tl {
    width: 165px;
    height: 217px;
    top: -8px;
    left: -26px;
    opacity: 1;
  }

  #s-cd .bot-br {
    width: 105px;
    height: 140px;
    right: -18px;
    bottom: -10px;
    opacity: 0.28;
  }

 /* Más espacio para que el título no pegue con la decoración */
  #s-hero .fi {
    position: relative;
    z-index: 3;
    padding-top: 28px;
  }

  #heroClip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 75%;
  display: block;
}
/* El título un poco más compacto y legible */
  #s-preboda .title-caps {
    font-size: clamp(1rem, 5.2vw, 1.35rem);
    line-height: 1.15;
    padding: 0 14px;
  }

  /* Alejar y suavizar la botánica en esta sección */
  #s-preboda .bot-tl {
    width: 165px;
    height: 217px;
    top: -8px;
    left: -26px;
    opacity: 1;
  }

  #s-preboda .bot-br {
    width: 105px;
    height: 140px;
    right: -18px;
    bottom: -10px;
    opacity: 0.28;
  }

  /* El título un poco más compacto y legible */
  #s-hero .title-caps {
    font-size: clamp(1rem, 5.2vw, 1.35rem);
    line-height: 1.15;
    padding: 0 14px;
  }

  /* Alejar y suavizar la botánica en esta sección */
  #s-hero .bot-tl {
    width: 165px;
    height: 217px;
    top: -8px;
    left: -26px;
    opacity: 1;
  }

  #s-hero .bot-br {
    width: 105px;
    height: 140px;
    right: -18px;
    bottom: -10px;
    opacity: 0.28;
  }


}


/* ── PREBODA · EDITORIAL ROMÁNTICO ───────────────────── */
#s-preboda{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #fdfcff 0%, #f8f6fb 52%, #f6f8fc 100%);
}
#s-preboda .fi{
  position:relative;
  z-index:3;
  width:100%;
  max-width:100%;
}
.preboda-heading{
  width:100%;
  max-width:560px;
  margin:0 auto 20px;
}
.preboda-intro{
  max-width:430px;
  margin:0 auto;
}


.editorial-shell{
  position:relative;
  width:calc(100% + 60px);
  margin:36px 0 0;
  left:50%;
  transform:translateX(-50%);
}
.editorial-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  touch-action: pan-x pan-y pinch-zoom;
  padding:12px clamp(22px, 8vw, 90px) 24px;
  scroll-padding:0 clamp(22px, 8vw, 90px);
}
.editorial-track::-webkit-scrollbar{ display:none; }
.editorial-slide{
  flex:0 0 min(74vw, 560px);
  scroll-snap-align:center;
  opacity:.35;
  transform:scale(.955);
  filter:saturate(.88) brightness(.99);
  transition:transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s ease, filter .7s ease;
}
.editorial-slide.is-active{
  opacity:1;
  transform:scale(1);
  filter:none;
}
.editorial-frame{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:#edf2f7;
  box-shadow:0 16px 34px rgba(44,62,107,.09);
  aspect-ratio:4 / 5.35;
}
.editorial-frame::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 24%, rgba(50,64,97,.06) 100%);
  pointer-events:none;
  z-index:1;
}
.editorial-frame::after{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.66);
  border-radius:30px;
  pointer-events:none;
  z-index:2;
}
.editorial-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.editorial-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(201,169,110,.34);
  background:rgba(250,248,244,.78);
  color:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(44,62,107,.06);
  transition:transform .25s ease, border-color .25s ease, color .25s ease, background .25s ease, opacity .25s ease;
}
.editorial-nav-prev{ left:clamp(8px, 2.8vw, 22px); }
.editorial-nav-next{ right:clamp(8px, 2.8vw, 22px); }
.editorial-nav span{
  font-size:1.4rem;
  line-height:1;
  transform:translateY(-1px);
}
.editorial-nav:hover:not(:disabled){
  transform:translateY(-50%) scale(1.04);
  border-color:rgba(201,169,110,.58);
  color:var(--gold);
  background:rgba(255,252,247,.92);
}
.editorial-nav:disabled{
  opacity:.58;
  cursor:default;
}
.editorial-progress{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:6px;
}
.editorial-progress span{
  width:24px;
  height:1.5px;
  border-radius:999px;
  cursor:pointer;
  background:rgba(44,62,107,.14);
  transition:background .28s ease, width .28s ease, opacity .28s ease;
}
.editorial-progress span.is-active{
  width:38px;
  background:rgba(201,169,110,.92);
}

@media (max-width: 899px){
  .editorial-shell{
    width:calc(100% + 34px);
  }
  .editorial-track{
    gap:18px;
    padding:8px 20px 18px;
    scroll-padding:0 20px;
  }
  .editorial-slide{
    flex-basis:min(82vw, 430px);
  }
  .editorial-nav{
    width:38px;
    height:38px;
    top:auto;
    bottom:22px;
    transform:none;
  }
  .editorial-nav:hover:not(:disabled){
    transform:scale(1.04);
  }
  .editorial-nav-prev{ left:16px; }
  .editorial-nav-next{ right:16px; }
}

@media (min-width: 900px){
  .editorial-slide{
    flex-basis:min(52vw, 560px);
  }
}

/* Góndola: aparición suave al entrar en sección */
.nos-gondola{
  opacity:0;
  transition:opacity 1.1s ease .2s;
}
#s-nos.inview .nos-gondola{
  opacity:1;
}



/* ── CEREMONIA: COLLAGE DEL LUGAR ── */
.venue-collage{
  width:min(100%, 620px);
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  grid-template-areas:
    "main garden"
    "main facade";
  gap:14px;
  margin-top:32px;
  position:relative;
  z-index:2;
}
.venue-shot{
  margin:0;
  overflow:hidden;
  border-radius:22px;
  background:#edf2f6;
  box-shadow:0 16px 36px rgba(44,62,107,0.10);
}
.venue-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .7s ease;
}
.venue-shot:hover img{
  transform:scale(1.03);
}
.venue-shot-main{
  grid-area:main;
  min-height:420px;
}
.venue-shot-garden{
  grid-area:garden;
  min-height:202px;
}
.venue-shot-facade{
  grid-area:facade;
  min-height:202px;
}
.venue-shot::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
@media (max-width: 899px){
  .venue-collage{
    width:100%;
    grid-template-columns:1fr;
    grid-template-areas:
      "main"
      "garden"
      "facade";
    gap:12px;
    margin-top:26px;
  }
  .venue-shot,
  .venue-shot-main,
  .venue-shot-garden,
  .venue-shot-facade{
    min-height:auto;
  }
  .venue-shot-main img{ aspect-ratio: 4 / 3.1; }
  .venue-shot-garden img,
  .venue-shot-facade img{ aspect-ratio: 4 / 2.7; }
}
@media (min-width: 900px){
  .venue-shot-main{ transform:translateY(8px); }
  .venue-shot-facade{ transform:translateY(-8px); }
}


/* ── INFO + DRESS CODE ───────────────────── */
#s-info .fi,
#s-dresscode .fi{
  position:relative;
  z-index:3;
  width:100%;
  max-width:680px;
}

.info-intro,
.dress-text{
  max-width:520px;
  margin:0 auto;
}

.info-grid{
  width:100%;
  max-width:620px;
  margin-top:34px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.info-card{
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(200,212,222,0.9);
  border-radius:22px;
  padding:24px 22px;
  box-shadow:0 12px 28px rgba(44,62,107,0.07);
  backdrop-filter:blur(4px);
  text-align:center;
}

.info-card-wide{
  grid-column:1 / -1;
}

.info-card-icon{
  width:52px;
  height:52px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.info-card-icon svg{
  width:46px;
  height:46px;
}

.info-card-title{
  font-family:'Cinzel',serif;
  font-size:0.8rem;
  letter-spacing:0.16em;
  color:var(--navy);
  margin-bottom:12px;
  text-transform:uppercase;
}

.info-card-text{
  font-family:'Cormorant Garamond',serif;
  font-size:1.04rem;
  line-height:1.9;
  color:var(--navy);
  max-width:100%;
}

#s-dresscode .body-text{
  max-width:500px;
}

@media (max-width: 480px){
  #s-info .fi,
  #s-dresscode .fi{
    padding-top:28px;
  }

  #s-info .title-caps,
  #s-dresscode .title-caps{
    font-size:clamp(1rem, 5.2vw, 1.35rem);
    line-height:1.15;
    padding:0 14px;
  }

  #s-info .bot-tr,
  #s-dresscode .bot-tl{
    width:165px;
    height:217px;
    top:-8px;
    opacity:1;
  }

  #s-info .bot-bl,
  #s-dresscode .bot-br{
    width:105px;
    height:140px;
    bottom:-10px;
    opacity:0.28;
  }

  #s-info .bot-tr{
    right:-26px;
  }

  #s-info .bot-bl{
    left:-18px;
  }

  #s-dresscode .bot-tl{
    left:-26px;
  }

  #s-dresscode .bot-br{
    right:-18px;
  }

  .info-grid{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:26px;
  }

  .info-card,
  .info-card-wide{
    grid-column:auto;
    border-radius:18px;
    padding:20px 18px;
  }

  .info-card-text{
    font-size:1rem;
    line-height:1.8;
  }
}
/* ── BADGE "ETIQUETA FORMAL" ── */
.dc-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 28px;
  z-index: 2;
  position: relative;
}
.dc-badge-line {
  display: block;
  width: 50px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}
.dc-badge-text {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  white-space: nowrap;
}
 
/* ── GRID ÉL / ELLA ── */
.dc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}
 
/* ── CARD ── */
.dc-card {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(200,212,222,0.9);
  border-radius: 22px;
  padding: 22px 18px 20px;
  box-shadow: 0 12px 28px rgba(44,62,107,0.07);
  backdrop-filter: blur(4px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dc-card-header {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.dc-card-title {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dc-card-divider {
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
  margin: 0 auto 12px;
}
.dc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dc-list li {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--navy);
}
.dc-list li::before {
  content: '✦ ';
  color: var(--gold);
  font-size: 0.55rem;
  vertical-align: middle;
  opacity: 0.7;
}
 
/* ── PALETA DE COLORES ── */
.dc-palette-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}
.dc-palette-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--text-light);
}
.dc-palette {
  display: flex;
  gap: 10px;
  align-items: center;
}
.dc-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(44,62,107,0.15);
  border: 1.5px solid rgba(44,62,107,0.1);
  flex-shrink: 0;
}
.dc-swatch-avoid {
  border: 1.5px solid #e0c8c8;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dc-palette-note {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.88rem;
  color: var(--text-light);
  font-style: italic;
  letter-spacing: 0.04em;
}
 
/* ── NOTA CALZADO ── */
.dc-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 420px;
  background: rgba(201,169,110,0.07);
  border: 1px solid rgba(201,169,110,0.3);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  text-align: left;
}
.dc-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.dc-note-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--navy);
}
 
/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .dc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 100%;
  }
  .dc-card {
    padding: 18px 12px 16px;
    border-radius: 18px;
  }
  .dc-list li {
    font-size: 0.88rem;
  }
  .dc-swatch {
    width: 24px;
    height: 24px;
  }
  .dc-badge-text {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
  }
}