/* catalogo.css — Catálogo Sims 4 CC child collection */

:root{
    /* Default = barroco (páginas 1–5) */
    --paper:#F0E4D0;
    --paper-light:#F7EDDF;
    --edge-dark:#C4A07A;
    --edge-mid:#E8C9A8;
    --ink:#4A3A2E;
    --vinotinto:#9B2D3F;
    --vinotinto-soft:#C44D5F;
    --summer-sky:#8B6B5A;
    --summer-sand:#E8D5C0;
    --arrow-bg:rgba(255,246,232,0.7);
    --arrow-border:rgba(155,45,63,0.28);
    --arrow-shadow:rgba(74,58,38,0.14);
    --menu-glow:rgba(155,45,63,0.4);
    --menu-glow-strong:rgba(155,45,63,0.55);
    --pi-color:#9B2D3F;
  }
  body.theme-baroque{
    /* Barroco original: crema + vinotinto */
    --paper:#FFF6E8;
    --paper-light:#F7EDDF;
    --edge-dark:#C4A07A;
    --edge-mid:#E8C9A8;
    --ink:#4A3A2E;
    --vinotinto:#9B2D3F;
    --vinotinto-soft:#C44D5F;
    --summer-sky:#8B6B5A;
    --summer-sand:#E8D5C0;
    --arrow-bg:rgba(255,246,232,0.7);
    --arrow-border:rgba(155,45,63,0.28);
    --arrow-shadow:rgba(74,58,38,0.14);
    --menu-glow:rgba(155,45,63,0.4);
    --menu-glow-strong:rgba(155,45,63,0.55);
    --pi-color:#9B2D3F;
  }
  body.theme-summer{
    /* Summer: arena + coral + cielo */
    --paper:#fffaf2;
    --paper-light:#FFFCF7;
    --edge-dark:#D4A574;
    --edge-mid:#F0C99A;
    --ink:#3D5A6C;
    --vinotinto:#FF6B4A;
    --vinotinto-soft:#FF8F6B;
    --summer-sky:#5EC8F2;
    --summer-sand:#FFE2B8;
    --arrow-bg:rgba(255,248,238,0.65);
    --arrow-border:rgba(255,107,74,0.3);
    --arrow-shadow:rgba(74,58,38,0.12);
    --menu-glow:rgba(255,107,74,0.4);
    --menu-glow-strong:rgba(255,140,60,0.55);
    --pi-color:#FF6B4A;
  }
  body.theme-fantasy{
    --paper:#EAF6F3;
    --paper-light:#F4FBFA;
    --edge-dark:#2F6F6A;
    --edge-mid:#7EC8C0;
    --ink:#1E4A4E;
    --vinotinto:#2BBBAD;
    --vinotinto-soft:#5ED4C8;
    --summer-sky:#4EC4D9;
    --summer-sand:#C8EBE6;
    --arrow-bg:rgba(234,246,243,0.65);
    --arrow-border:rgba(47,111,106,0.22);
    --arrow-shadow:rgba(30,74,78,0.12);
    --menu-glow:rgba(43,187,173,0.35);
    --menu-glow-strong:rgba(43,187,173,0.5);
    --pi-color:#2BBBAD;
  }
  body.theme-mafia{
    /* Mafia: grises oscuros + acento carbón */
    --paper:#2A2A2E;
    --paper-light:#36363C;
    --edge-dark:#1A1A1D;
    --edge-mid:#4A4A52;
    --ink:#E8E6E3;
    --vinotinto:#8B8B95;
    --vinotinto-soft:#A8A8B0;
    --summer-sky:#6B6B75;
    --summer-sand:#3D3D44;
    --arrow-bg:rgba(54,54,60,0.75);
    --arrow-border:rgba(139,139,149,0.35);
    --arrow-shadow:rgba(0,0,0,0.35);
    --menu-glow:rgba(139,139,149,0.4);
    --menu-glow-strong:rgba(168,168,176,0.55);
    --pi-color:#A8A8B0;
  }

  body.theme-baroque .book,
  body.theme-baroque .static-spread,
  body.theme-baroque .page,
  body.theme-summer .book,
  body.theme-summer .static-spread,
  body.theme-summer .page,
  body.theme-fantasy .book,
  body.theme-fantasy .static-spread,
  body.theme-fantasy .page,
  body.theme-mafia .book,
  body.theme-mafia .static-spread,
  body.theme-mafia .page{
    background:var(--paper) !important;
  }
  body.theme-baroque,
  body.theme-summer,
  body.theme-fantasy,
  body.theme-mafia{
    color:var(--ink);
    background:var(--paper);
  }


  *{box-sizing:border-box;}
  html,body{height:100%;}
  html, body{
    margin:0;
    height:100%;
    overflow:hidden;
    background:var(--paper);
    transition:background .45s ease, color .45s ease;
  }
  body{
    font-family:'Space Mono', monospace;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }

  /* ---------------- TOP COLLECTION BANNER ---------------- */
  .collection-banner{
    position:absolute;
    top:0; left:0; right:0;
    z-index:15;
    height:36px;
    overflow:hidden;
    background-color:transparent;
    cursor:pointer;
    background-image:url("assets/banner/bannermafia.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
    border-bottom:none;
    pointer-events:auto;
    -webkit-user-select:none;
    user-select:none;
  }

  .collection-banner-track{
    display:flex;
    width:max-content;
    align-items:center;
    will-change:transform;
    animation:bannerMarquee 28s linear infinite;
  }

  .collection-banner-group{
    display:flex;
    flex:none;
    align-items:center;
  }

  .collection-banner-item{
    flex:none;
    flex-shrink:0;
    padding:0 10rem;
    font-family:'Montserrat', sans-serif;
    font-weight:900;
    font-size:clamp(14px, 2.2vw, 22px);
    line-height:1;
    letter-spacing:0.04em;
    color:#fff;
    white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,0.12);
  }

  @keyframes bannerMarquee{
    from{ transform:translate3d(0,0,0); }
    to{ transform:translate3d(-50%,0,0); }
  }

  @media (max-width:760px){
    .collection-banner-item{ padding:0 4.5rem; }
  }
  @media (prefers-reduced-motion: reduce){
    .collection-banner-track{ animation:none; }
  }
  @media (max-width:760px){
    .collection-banner{ height:30px; }
    .collection-banner-item{ padding:0 1.25rem; font-size:clamp(12px, 3.2vw, 16px); }
  }

  /* ---------------- FULL-PAGE BOOK BACKGROUND ---------------- */
  .book{
    position:relative;
    width:100vw;
    height:100vh;
    background:var(--paper);
    overflow:hidden;
    transition:background .45s ease;
  }



  /* soft paper grain */
  .book::before{
    content:"";
    position:absolute; inset:0;
    background-image:url("assets/ui-decoration.svg");
    mix-blend-mode:multiply;
    pointer-events:none;
  }

  /* stacked page edges left/right, like a real book photographed */
  .book::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    /* Bordes de libro muy sutiles, sin halo naranja */
    background:
      repeating-linear-gradient(to right, transparent 0 3px, rgba(122,90,52,0.04) 3px 4px) left/1.6vw 100% no-repeat,
      repeating-linear-gradient(to left, transparent 0 3px, rgba(122,90,52,0.04) 3px 4px) right/1.6vw 100% no-repeat,
      linear-gradient(to right, rgba(74,58,38,0.06), transparent 2.5vw) left/2.5vw 100% no-repeat,
      linear-gradient(to left, rgba(74,58,38,0.06), transparent 2.5vw) right/2.5vw 100% no-repeat;
  }

  /* center spine crease — always on, static (no animation) */
  .spine{
    position:absolute;
    left:50%; top:0; bottom:0;
    width:60px;
    transform:translateX(-50%);
    pointer-events:none;
    z-index:3;
    background:linear-gradient(to right,
      transparent, rgba(74,58,38,0.08) 42%, rgba(74,58,38,0.12) 50%, rgba(74,58,38,0.08) 58%, transparent);
  }
  /* Solo Mafia: lomo gris muy oscuro */
  body.theme-mafia .spine{
    background:linear-gradient(to right,
      transparent, rgba(12,12,14,0.35) 42%, rgba(8,8,10,0.55) 50%, rgba(12,12,14,0.35) 58%, transparent);
  }

  /* ---------------- MASTHEAD / DROPDOWN MENU ---------------- */
  .masthead{
    position:absolute;
    top:72px; left: 600px;; right:600px;
    text-align:center;
    z-index:10;
    pointer-events:auto;
  }
  @media (max-width:760px){
    .masthead{ top:64px; }
  }

  .menu-dropdown{
    position:relative;
    display:inline-block;
  }

  .menu-trigger{
    width:52px;
    height:52px;
    padding:0;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:transparent;
    background-image:url("assets/menu/eye.png");
    background-size:250%;
    background-position:center 38%;
    background-repeat:no-repeat;
    box-shadow:0 3px 12px var(--menu-glow);
    transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
    animation: menuEyeLook 3.2s steps(1, end) infinite;
    opacity:1;
    color:transparent;
    font-size:0;
    line-height:0;
    overflow:hidden;
  }
  .menu-trigger:hover{
    transform:translateY(-2px) scale(1.05);
    box-shadow:0 5px 16px var(--menu-glow-strong);
    filter:brightness(1.05);
    background-size:250%;
    background-position:center 38%;
  }

  @keyframes menuEyeLook{
    0%, 48%{ background-image:url("assets/menu/eye.png"); }
    55%, 95%{ background-image:url("assets/menu/eye2.png"); }
    100%{ background-image:url("assets/menu/eye.png"); }
  }

  .menu-trigger[aria-expanded="true"]{
    transform:translateY(-2px) scale(1.08) rotate(-6deg);
    box-shadow:0 6px 18px var(--menu-glow-strong);
    filter:brightness(1.06);

    animation:none;
    background-image:url("assets/menu/eye3.png");
    background-position:center 40%;
}
  .menu-trigger:focus{
    outline:none;
  }
  .menu-trigger::after{
    display:none;
  }
  @media (max-width:760px){
    .menu-trigger{ width:44px; height:44px; }
  }

  .menu-list{
    position:absolute;
    top:calc(100% + 10px);
    left:50%;
    transform:translateX(-50%) translateY(-6px);
    min-width:132px;
    margin:0;
    padding:6px 0;
    list-style:none;
    background:color-mix(in srgb, var(--vinotinto) 92%, #000);
    border-radius:12px;
    box-shadow:0 8px 24px var(--menu-glow);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .menu-list.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .menu-list li{ margin:0; }
  .menu-list a{
    display:block;
    padding:8px 18px;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    color:#F6EEDA;
    text-decoration:none;
    text-align:center;
    transition:background .2s ease, color .2s ease;
  }
  .menu-list a:hover{
    background:rgba(246,238,218,0.14);
    color:#fff;
  }

  /* ---------------- PAGES ---------------- */
  .pages-window{
    position:absolute; inset:0;
    perspective:2000px;
    perspective-origin:center center;
    opacity:0;
    z-index:1;
    transition:opacity .25s ease;
  }
  body.book-ready .pages-window{
    opacity:1;
  }
  .static-spread{
    position:absolute; inset:0;
    display:flex;
    background:var(--paper);
  }
  .static-spread.final-spread{
    z-index:1;
    /* hidden but still decoded; revealed only when flip ends */
    visibility:hidden;
  }
  .static-spread.transitional-spread{
    z-index:2;
    visibility:visible;
  }

  .page{
    position:relative;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    height:100%;
    padding:70px 60px;
    background:var(--paper);
    overflow:visible;
  }

  .empty-slot{
    width:100%;
    height:100%;
    min-height:50vh;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }
  .empty-slot-inner{
    text-align:center;
    opacity:0.45;
    border:1.5px dashed rgba(43,187,173,0.35);
    border-radius:18px;
    padding:2.2rem 2.4rem;
    background:rgba(255,255,255,0.25);
  }
  .empty-slot-label{
    display:block;
    font-family:'Montserrat', sans-serif;
    font-weight:900;
    font-size:clamp(14px, 2vw, 22px);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--vinotinto);
  }
  .empty-slot-sub{
    display:block;
    margin-top:0.45rem;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink);
    opacity:0.75;
  }

  /* ---- realistic single-page pivot flip ---- */
  .cast-shadow{
    display:none;
  }

  .flip-page{
    position:absolute; top:0; bottom:0;
    width:50%;
    transform-style:preserve-3d;
    z-index:5;
    pointer-events:none;
    will-change: transform;
    background:transparent;
  }
  .flip-page.slot-right{ left:50%; transform-origin:left center; }
  .flip-page.slot-left{ left:0; transform-origin:right center; }
  .flip-page.mobile-next{ left:0; width:100%; transform-origin:left center; }
  .flip-page.mobile-prev{ left:0; width:100%; transform-origin:right center; }

  .flip-page.animate-next{ animation:flipNext 1.1s cubic-bezier(.25,.08,.2,1) forwards; }
  .flip-page.animate-prev{ animation:flipPrev 1.1s cubic-bezier(.25,.08,.2,1) forwards; }

  @keyframes flipNext{
    0%{ transform:rotateY(0deg); }
    100%{ transform:rotateY(-180deg); }
  }
  @keyframes flipPrev{
    0%{ transform:rotateY(0deg); }
    100%{ transform:rotateY(180deg); }
  }

  /* Outgoing image vanishes quickly; incoming appears after */
  @keyframes fadeOutFront{
    0%{ opacity:1; }
    12%{ opacity:0; }
    100%{ opacity:0; }
  }
  @keyframes fadeInBack{
    0%{ opacity:0; }
    18%{ opacity:0; }
    55%{ opacity:1; }
    100%{ opacity:1; }
  }
  .flip-page.animate-next .flip-face.front,
  .flip-page.animate-prev .flip-face.front{
    animation:fadeOutFront 1.1s linear forwards;
  }
  .flip-page.animate-next .flip-face.back,
  .flip-page.animate-prev .flip-face.back{
    animation:fadeInBack 1.1s cubic-bezier(.25,.08,.2,1) forwards;
  }

  .flip-face{
    position:absolute; inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform-style:flat;
    display:flex; align-items:center; justify-content:center;
    padding:70px 60px;
    background:var(--paper);
    overflow:visible;
  }
  .flip-face img{
    /* prevent the previous outfit from showing through transparent PNG areas on the other layer */
    background:transparent;
  }
  .flip-face.back{ transform:rotateY(180deg); }


  .item-link, .item-figure{
    display:block;
    max-height:78vh;
    max-width:100%;
    width:100%;
    transition:transform .22s cubic-bezier(.25,.46,.45,.94);
    cursor:pointer;
  }
  .item-link:hover, .item-figure:hover{ cursor:pointer; }

  /* ---- Hover general (cuerpo y composites) ---- */
  body:not(.is-flipping) .item-link:not(.composite):hover,
  body:not(.is-flipping) .item-figure:not(.composite):hover{
    transform:translateY(-6px) scale(1.09);
  }
  /* Composite: hover INDEPENDIENTE — anima el contenedor, NO el img
     (así no se pisa el transform del editor: scale/translate del cuerpo) */
  body:not(.is-flipping) .item-body:hover,
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="body"]:hover) .item-body,
  body:not(.is-flipping) .item-with-arrows.logos-pinned .item-body{
    transform:translateY(-6px) scale(1.09);
  }
  body:not(.is-flipping) .item-head[data-side="left"]:hover,
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="head"]:hover) .item-head[data-side="left"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .item-head[data-side="left"]{
    transform:translate(-50%, calc(-50% - 6px)) scale(calc(var(--head-s, 1.08) * 1.09));
    filter:drop-shadow(0 10px 18px rgba(30,50,40,0.32));
  }
  body:not(.is-flipping) .item-head[data-side="right"]:hover,
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="head"]:hover) .item-head[data-side="right"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .item-head[data-side="right"]{
    transform:translate(50%, calc(-50% - 6px)) scale(calc(var(--head-s, 1.08) * 1.09));
    filter:drop-shadow(0 10px 18px rgba(30,50,40,0.32));
  }
  body.is-flipping .item-link,
  body.is-flipping .item-figure{
    transition:none !important;
    transform:none !important;
  }
  body.is-flipping .item-body,
  body.is-flipping .item-body img,
  body.is-flipping .item-head{
    transition:none !important;
  }
  body.is-flipping .item-body{
    transform:none !important;
  }

  /* ---- Flechas de prendas (hover + click para fijar) ---- */
  .item-with-arrows{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
    max-height:78vh;
    overflow:visible;
    margin:0 auto;
    /* Hitbox: el contenedor no captura mouse; solo imgs y logos */
    pointer-events:none;
  }
  .item-with-arrows .item-body img,
  .item-with-arrows .item-head img,
  .item-with-arrows .creator-logo,
  .item-with-arrows > img{
    pointer-events:auto;
  }
  .item-with-arrows > img{
    display:block;
    max-height:78vh;
    max-width:min(100%, 420px);
    width:auto; height:auto;
    object-fit:contain;
    filter:none;
    margin:0 auto;
    transition:transform .22s cubic-bezier(.25,.46,.45,.94);
  }
  /* ARROWS REMOVED */
  .fit-arrows, .fit-arrow, .fit-arrow-hat, .fit-arrow-torso, .fit-arrow-bottom, .fit-arrow-shoes, .arrow-stroke, .arrow-head {
    display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
  }

  /* Posiciones por zona — pegadas a la silueta del maniquí */
  .fit-arrow-hat{
    top: 4%;
    left: 20%;
  }
  .fit-arrow-torso{
    top: 27%;
    right: 18%;
  }
  .fit-arrow-bottom{
    top: 51%;
    left: 18%;
  }
  .fit-arrow-shoes{
    top: 78%;
    right: 18%;
    bottom: auto;
  }

  /* un poco más grande y un poquito más arriba: chaqueta-flamas */
  .item-link.prenda-chaqueta-flamas > img, .item-figure.prenda-chaqueta-flamas > img, .item-link.prenda-chaqueta-flamas .item-body img, .item-figure.prenda-chaqueta-flamas .item-body img{
    max-height: 84vh;
    transform: scale(1.02) translateY(-15px);
  }
  /* un poco más grande y un poquito más abajo: sueter-rosado */
  .item-link.prenda-sueter-rosado > img, .item-figure.prenda-sueter-rosado > img, .item-link.prenda-sueter-rosado .item-body img, .item-figure.prenda-sueter-rosado .item-body img{
    max-height: 84vh;
    transform: scale(1.05) translateY(-5px);
  }



  .item-link img, .item-figure img{
    display:block;
    max-height:78vh;
    max-width:100%;
    width:auto; height:auto;
    object-fit:contain;
    filter:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-user-drag:none;
    user-drag:none;
    -webkit-touch-callout:none;
    pointer-events:auto;
  }
  .item-link, .item-figure, .item-with-arrows, .page, .pages-window{
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  /* Evitar halo azul de selección en algunos navegadores */
  .item-link img::selection,
  .item-figure img::selection{
    background:transparent;
  }

  /* ---------------- NAV ---------------- */
  .arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink);
    opacity:0.55;
    cursor:pointer;
    z-index:6;
    transition:opacity .25s ease, transform .25s ease, background .35s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease;
    background:var(--arrow-bg);
    border:1px solid var(--arrow-border);
    border-radius:50%;
    padding:0;
    box-shadow:0 2px 8px var(--arrow-shadow);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .arrow svg{ width:18px; height:18px; stroke-width:2.2; }
  .arrow:hover{
    opacity:1;
    transform:translateY(-50%) scale(1.06);
    background:var(--vinotinto);
    color:var(--paper-light);
    border-color:var(--vinotinto-soft);
    box-shadow:0 4px 14px var(--arrow-shadow);
  }
  .arrow.left{ left:18px; }
  .arrow.right{ right:18px; }
  .arrow:disabled{
    opacity:0.18;
    cursor:default;
    transform:translateY(-50%);
    background:rgba(234,246,243,0.30);
    box-shadow:none;
  }
  .arrow:disabled:hover{
    background:rgba(234,246,243,0.30);
    color:var(--ink);
    border-color:rgba(74,58,38,0.18);
    transform:translateY(-50%);
    box-shadow:none;
  }

  .corner{
    position:absolute;
    bottom:0;
    width:0; height:0;
    cursor:pointer;
    z-index:6;
  }
  .corner.next{
    right:0;
    border-style:solid;
    border-width:0 0 26px 26px;
    border-color:transparent transparent rgba(74,58,38,0.14) transparent;
  }
  .corner.prev{
    left:0;
    border-style:solid;
    border-width:0 26px 26px 0;
    border-color:transparent transparent rgba(74,58,38,0.14) transparent;
  }
  .corner.disabled{ opacity:0; pointer-events:none; }

  .page-indicator{
    position:absolute;
    bottom:20px; left:50%;
    transform:translateX(-50%);
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 16px;
    text-align:center;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.16em;
    color:var(--pi-color, var(--vinotinto));
    background:color-mix(in srgb, var(--paper-light) 88%, transparent);
    border:1px solid var(--arrow-border);
    border-radius:999px;
    box-shadow:0 2px 10px var(--arrow-shadow);
    transition:color .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
    z-index:6;
    pointer-events:none;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    white-space:nowrap;
  }
  .page-indicator .pi-current{
    font-weight:700;
    color:var(--vinotinto);
    letter-spacing:0.14em;
  }
  .page-indicator .pi-sep{
    opacity:0.35;
    letter-spacing:0;
    font-weight:400;
  }
  .page-indicator .pi-total{
    opacity:0.7;
    letter-spacing:0.14em;
  }

  /* ---- Coming soon page ---- */
  .coming-soon-page{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:40px 24px;
  }
  .coming-soon-card{
    position:relative;
    max-width:420px;
    width:100%;
    text-align:center;
    padding:48px 36px 42px;
    background:rgba(246,238,218,0.55);
    border:1.5px solid rgba(74,58,38,0.18);
    border-radius:12px;
    box-shadow:0 8px 28px rgba(74,58,38,0.10);
    overflow:hidden;
  }
  .coming-soon-card::before,
  .coming-soon-card::after{
    content:"";
    position:absolute;
    left:0; right:0;
    height:14px;
    background:repeating-linear-gradient(
      -45deg,
      #2BBBAD 0 10px,
      #F6EEDA 10px 20px
    );
    opacity:0.9;
  }
  .coming-soon-card::before{ top:0; }
  .coming-soon-card::after{ bottom:0; }

  .coming-soon-icon{
    display:block;
    width:72px;
    height:72px;
    margin:0 auto 18px;
    color:var(--vinotinto);
  }
  .coming-soon-title{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:22px;
    letter-spacing:0.04em;
    color:var(--vinotinto);
    margin:0 0 10px;
    line-height:1.25;
  }
  .coming-soon-sub{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.12em;
    color:var(--ink);
    opacity:0.55;
    margin:0;
    text-transform:uppercase;
  }
  .coming-soon-cones{
    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:22px;
    opacity:0.85;
  }
  .coming-soon-cones svg{
    width:28px;
    height:28px;
    color:var(--vinotinto);
  }
  .static-spread.coming-soon-spread .page{
    flex:1 1 100%;
    width:100%;
  }

  /* ---------------- MOBILE ---------------- */
  @media (max-width:760px){
    .page{ padding:56px 26px; }
    .spread{ flex-direction:column; }
    .spine{ display:none; }
    .arrow{ width:40px; height:40px; }
    .arrow.left{ left:8px; }
    .arrow.right{ right:8px; }
    .page-indicator{ font-size:10px; padding:6px 12px; bottom:14px; }
    .coming-soon-title{ font-size:18px; }
    .coming-soon-card{ padding:40px 22px 36px; }
  }

  @media (prefers-reduced-motion: reduce){
    .spread.enter-next,.spread.exit-next,.spread.enter-prev,.spread.exit-prev{ animation:none !important; }
    .item-link, .arrow{ transition:none !important; }
  }


  /* ---- Creator logos (circular) — aparecen al terminar las flechas ---- */
  .creator-logos{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:4;
  }
  .creator-logo{
    position:absolute;
    border-radius:50%;
    overflow:hidden;
    pointer-events:none;
    box-shadow:0 2px 10px rgba(74,58,38,0.28);
    border:2px solid rgba(246,238,218,0.95);
    background:rgba(246,238,218,0.35);
    transform:translate(-50%, -50%) scale(0.45);
    opacity:0;
    visibility:hidden;
    will-change: auto;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-sizing:border-box;
  }
  /* Importante: anular reglas de .item-with-arrows img / .item-figure img */
  .item-with-arrows .creator-logo img,
  .item-figure .creator-logo img,
  .item-link .creator-logo img,
  .creator-logo img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    border-radius:50%;
    margin:0 !important;
    padding:0 !important;
    /* Zoom para recortar el anillo blanco que ya traen los PNG de logos
       y llenar el círculo sin dejar hueco crema alrededor */
    transform:scale(1.28) !important;
    filter:none !important;
  }
  .creator-logo.is-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    color:var(--ink);
    letter-spacing:0.04em;
  }

  /* Tras dibujar las flechas → sale el logo (~0.35s) */
  /* Logos: ocultos al cargar; solo hover / logos-pinned y si no hay volteo */
  /* Logos bloqueados durante el volteo de página */
  body.is-flipping .creator-logo{
    opacity:0 !important;
    visibility:hidden !important;
    animation:none !important;
    pointer-events:none !important;
  }

  /* Animación solo cuando la página ya terminó de voltear */
  /* Logos: aparición escalonada (como index.html) + hitbox ajustado */
  /* Separado por "parte": los logos de CUERPO solo reaccionan al hover del
     cuerpo (o de la prenda entera si no tiene cabeza); los logos de CABEZA
     solo reaccionan al hover de la cabeza. Así cada zona muestra solo lo suyo. */

  /* ---- Logos de CUERPO ---- */
  body:not(.is-flipping) .item-with-arrows:has(.item-body img:hover) .creator-logo[data-part="body"],
  body:not(.is-flipping) .item-with-arrows:has(> img:hover) .creator-logo[data-part="body"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="body"]:hover) .creator-logo[data-part="body"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="body"]{
    visibility:visible;
    pointer-events:auto;
    animation: logoReveal .42s cubic-bezier(.22,1.15,.36,1) forwards;
    animation-delay: .12s;
  }
  /* ---- Logos de CABEZA ---- */
  body:not(.is-flipping) .item-with-arrows:has(.item-head:hover) .creator-logo[data-part="head"],
  body:not(.is-flipping) .item-with-arrows:has(.item-head img:hover) .creator-logo[data-part="head"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="head"]:hover) .creator-logo[data-part="head"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="head"]{
    visibility:visible;
    pointer-events:auto;
    animation: logoReveal .42s cubic-bezier(.22,1.15,.36,1) forwards;
    animation-delay: .12s;
  }

  /* Escalonado por data-part-idx (índice dentro de body o head, empieza en 0) — CUERPO */
body:not(.is-flipping) .item-with-arrows:has(.item-body img:hover) .creator-logo[data-part="body"][data-part-idx="0"],
  body:not(.is-flipping) .item-with-arrows:has(> img:hover) .creator-logo[data-part="body"][data-part-idx="0"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="body"]:hover) .creator-logo[data-part="body"][data-part-idx="0"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="body"][data-part-idx="0"],
  body:not(.is-flipping) .creator-logos[data-part="body"] > .creator-logo:nth-child(1){
    animation-delay: .12s !important;
  }
body:not(.is-flipping) .item-with-arrows:has(.item-body img:hover) .creator-logo[data-part="body"][data-part-idx="1"],
  body:not(.is-flipping) .item-with-arrows:has(> img:hover) .creator-logo[data-part="body"][data-part-idx="1"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="body"]:hover) .creator-logo[data-part="body"][data-part-idx="1"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="body"][data-part-idx="1"],
  body:not(.is-flipping) .creator-logos[data-part="body"] > .creator-logo:nth-child(2){
    animation-delay: .42s !important;
  }
body:not(.is-flipping) .item-with-arrows:has(.item-body img:hover) .creator-logo[data-part="body"][data-part-idx="2"],
  body:not(.is-flipping) .item-with-arrows:has(> img:hover) .creator-logo[data-part="body"][data-part-idx="2"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="body"]:hover) .creator-logo[data-part="body"][data-part-idx="2"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="body"][data-part-idx="2"],
  body:not(.is-flipping) .creator-logos[data-part="body"] > .creator-logo:nth-child(3){
    animation-delay: .55s !important;
  }
body:not(.is-flipping) .item-with-arrows:has(.item-body img:hover) .creator-logo[data-part="body"][data-part-idx="3"],
  body:not(.is-flipping) .item-with-arrows:has(> img:hover) .creator-logo[data-part="body"][data-part-idx="3"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="body"]:hover) .creator-logo[data-part="body"][data-part-idx="3"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="body"][data-part-idx="3"],
  body:not(.is-flipping) .creator-logos[data-part="body"] > .creator-logo:nth-child(4){
    animation-delay: .68s !important;
  }
body:not(.is-flipping) .item-with-arrows:has(.item-body img:hover) .creator-logo[data-part="body"][data-part-idx="4"],
  body:not(.is-flipping) .item-with-arrows:has(> img:hover) .creator-logo[data-part="body"][data-part-idx="4"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="body"]:hover) .creator-logo[data-part="body"][data-part-idx="4"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="body"][data-part-idx="4"],
  body:not(.is-flipping) .creator-logos[data-part="body"] > .creator-logo:nth-child(5){
    animation-delay: .81s !important;
  }
body:not(.is-flipping) .item-with-arrows:has(.item-body img:hover) .creator-logo[data-part="body"][data-part-idx="5"],
  body:not(.is-flipping) .item-with-arrows:has(> img:hover) .creator-logo[data-part="body"][data-part-idx="5"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="body"]:hover) .creator-logo[data-part="body"][data-part-idx="5"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="body"][data-part-idx="5"],
  body:not(.is-flipping) .creator-logos[data-part="body"] > .creator-logo:nth-child(6){
    animation-delay: .94s !important;
  }

  /* Escalonado por data-part-idx — CABEZA */
body:not(.is-flipping) .item-with-arrows:has(.item-head:hover) .creator-logo[data-part="head"][data-part-idx="0"],
  body:not(.is-flipping) .item-with-arrows:has(.item-head img:hover) .creator-logo[data-part="head"][data-part-idx="0"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="head"]:hover) .creator-logo[data-part="head"][data-part-idx="0"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="head"][data-part-idx="0"],
  body:not(.is-flipping) .creator-logos[data-part="head"] > .creator-logo:nth-child(1){
    animation-delay: .12s !important;
  }
body:not(.is-flipping) .item-with-arrows:has(.item-head:hover) .creator-logo[data-part="head"][data-part-idx="1"],
  body:not(.is-flipping) .item-with-arrows:has(.item-head img:hover) .creator-logo[data-part="head"][data-part-idx="1"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="head"]:hover) .creator-logo[data-part="head"][data-part-idx="1"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="head"][data-part-idx="1"],
  body:not(.is-flipping) .creator-logos[data-part="head"] > .creator-logo:nth-child(2){
    animation-delay: .42s !important;
  }
body:not(.is-flipping) .item-with-arrows:has(.item-head:hover) .creator-logo[data-part="head"][data-part-idx="2"],
  body:not(.is-flipping) .item-with-arrows:has(.item-head img:hover) .creator-logo[data-part="head"][data-part-idx="2"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="head"]:hover) .creator-logo[data-part="head"][data-part-idx="2"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="head"][data-part-idx="2"],
  body:not(.is-flipping) .creator-logos[data-part="head"] > .creator-logo:nth-child(3){
    animation-delay: .55s !important;
  }
body:not(.is-flipping) .item-with-arrows:has(.item-head:hover) .creator-logo[data-part="head"][data-part-idx="3"],
  body:not(.is-flipping) .item-with-arrows:has(.item-head img:hover) .creator-logo[data-part="head"][data-part-idx="3"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="head"]:hover) .creator-logo[data-part="head"][data-part-idx="3"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="head"][data-part-idx="3"],
  body:not(.is-flipping) .creator-logos[data-part="head"] > .creator-logo:nth-child(4){
    animation-delay: .68s !important;
  }
body:not(.is-flipping) .item-with-arrows:has(.item-head:hover) .creator-logo[data-part="head"][data-part-idx="4"],
  body:not(.is-flipping) .item-with-arrows:has(.item-head img:hover) .creator-logo[data-part="head"][data-part-idx="4"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="head"]:hover) .creator-logo[data-part="head"][data-part-idx="4"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="head"][data-part-idx="4"],
  body:not(.is-flipping) .creator-logos[data-part="head"] > .creator-logo:nth-child(5){
    animation-delay: .81s !important;
  }
body:not(.is-flipping) .item-with-arrows:has(.item-head:hover) .creator-logo[data-part="head"][data-part-idx="5"],
  body:not(.is-flipping) .item-with-arrows:has(.item-head img:hover) .creator-logo[data-part="head"][data-part-idx="5"],
  body:not(.is-flipping) .item-with-arrows:has(.creator-logo[data-part="head"]:hover) .creator-logo[data-part="head"][data-part-idx="5"],
  body:not(.is-flipping) .item-with-arrows.logos-pinned .creator-logo[data-part="head"][data-part-idx="5"],
  body:not(.is-flipping) .creator-logos[data-part="head"] > .creator-logo:nth-child(6){
    animation-delay: .94s !important;
  }

  /* En modo edición: logos visibles al instante (sin animación) */
  body.is-editing .creator-logo,
  body.is-editing .item-with-arrows .creator-logo,
  body.is-editing .item-with-logos .creator-logo,
  body.is-editing .item-with-arrows:hover .creator-logo,
  body.is-editing .item-with-arrows.logos-pinned .creator-logo,
  body.is-editing .item-with-logos.logos-pinned .creator-logo{
    animation: none !important;
    animation-delay: 0s !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
    pointer-events: auto !important;
  }

  .item-with-arrows:hover .creator-logo:hover,
  .item-with-arrows.logos-pinned .creator-logo:hover{
    box-shadow:0 4px 16px rgba(74,58,38,0.4);
    filter:brightness(1.06);
  }

  @keyframes logoReveal{
    0%{
      opacity:0;
      transform:translate(-50%, -50%) scale(0.4);
    }
    65%{
      opacity:1;
      transform:translate(-50%, -50%) scale(1.12);
    }
    100%{
      opacity:1;
      transform:translate(-50%, -50%) scale(1);
    }
  }
  }

  @media (prefers-reduced-motion: reduce){
    .item-with-arrows:has(.item-body img:hover) .creator-logo[data-part="body"],
    .item-with-arrows:has(> img:hover) .creator-logo[data-part="body"],
    .item-with-arrows:has(.creator-logo[data-part="body"]:hover) .creator-logo[data-part="body"],
    .item-with-arrows.logos-pinned .creator-logo[data-part="body"],
    .item-with-arrows:has(.item-head:hover) .creator-logo[data-part="head"],
    .item-with-arrows:has(.item-head img:hover) .creator-logo[data-part="head"],
    .item-with-arrows:has(.creator-logo[data-part="head"]:hover) .creator-logo[data-part="head"],
    .item-with-arrows.logos-pinned .creator-logo[data-part="head"]{
      animation:none !important;
      opacity:1 !important;
      transform:translate(-50%, -50%) scale(1) !important;
      pointer-events:auto;
    }
  }


  /* ---- Composite: cuerpo + cabeza ---- */
  .item-figure.composite,
  .item-link.composite,
  .item-with-arrows.composite{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    min-height:50vh;
  }
  .item-body{
    position:relative;
    z-index:1;
    display:inline-block;
    width:auto;
    max-width:min(100%, 420px);
    margin:0 auto;
    text-align:center;
    pointer-events:none;
    cursor:pointer;
    transform-origin:center center;
    transition:transform .22s cubic-bezier(.25,.46,.45,.94);
  }
  .item-with-arrows.composite{ text-align:center; }
  .item-body img{
    max-height:78vh;
    max-width:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    margin:0;
    pointer-events:auto;
    cursor:pointer;
  }
  .item-head{
    position:absolute;
    z-index:3;
    top:var(--head-y, 58%);
    transform-origin:center center;
    pointer-events:auto;
    cursor:pointer;
    width:30%;
    height:30%;
    max-width:42vw;
    filter:drop-shadow(0 6px 14px rgba(30,50,40,0.22));
    transition:transform .22s cubic-bezier(.25,.46,.45,.94), filter .22s ease;
  }
  .item-head img{
    pointer-events:auto;
    cursor:pointer;
  }
  
 
  body.is-flipping .item-head{
    transition:none !important;
  }
  /* Posición por data-side (no depender del orden del DOM en el flip) */
  .item-head[data-side="left"]{
    left:var(--head-x, 16%);
    right:auto;
    transform:translate(-50%, -50%) scale(var(--head-s, 1.08));
  }
  .item-head[data-side="right"]{
    left:auto;
    right:var(--head-x, 16%);
    transform:translate(50%, -50%) scale(var(--head-s, 1.08));
  }
  /* Fallback si faltara data-side */
  .page:first-child .item-head:not([data-side]),
  .page:nth-child(1) .item-head:not([data-side]){
    left:var(--head-x, 16%);
    right:auto;
    transform:translate(-50%, -50%) scale(var(--head-s, 1.08));
  }
  .page:nth-child(2) .item-head:not([data-side]){
    left:auto;
    right:var(--head-x, 16%);
    transform:translate(50%, -50%) scale(var(--head-s, 1.08));
  }
  .item-head img{
    max-height:36vh;
    max-width:42vw;
    width:max-content;
    height:max-content;
    object-fit:contain;
    display:block;
  }
  /* La cabeza NUNCA hereda el transform del cuerpo */
  .item-head img,
  .item-with-arrows .item-head img,
  .item-figure .item-head img,
  .item-link .item-head img{
    transform:none !important;
    max-height:36vh !important;
    max-width:42vw !important;
  }

  /* hover composite manejado arriba (body/head) */

  body.is-editing .item-head{
    pointer-events:auto;
    outline:1px dashed rgba(43,187,173,0.45);
    outline-offset:4px;
    cursor:move;
  }
  /* Logos: arrastre en modo edición */
  body.is-editing .creator-logo{
    pointer-events:auto !important;
    cursor:grab;
  }
  body.is-editing .creator-logo:active{
    cursor:grabbing;
  }
  body.is-editing .creator-logo.is-dragging{
    opacity:1 !important;
    visibility:visible !important;
    transform:translate(-50%, -50%) scale(1) !important;
    z-index:20;
    box-shadow:0 4px 18px rgba(43,187,173,0.55);
  }


    /* ---- Navegación de colecciones ---- */
  .collection-nav{
    position:absolute;
    top:36px; left:0; right:0;
    z-index:14;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    padding:5px 10px 4px;
    pointer-events:none;
  }
  .collection-nav button{
    pointer-events:auto;
    border:1px solid var(--arrow-border);
    background:color-mix(in srgb, var(--paper-light) 88%, transparent);
    color:var(--ink);
    font-family:'Montserrat', sans-serif;
    font-weight:700;
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    padding:5px 12px;
    border-radius:999px;
    cursor:pointer;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
    box-shadow:0 1px 4px var(--arrow-shadow);
  }
  /* Colores propios fijos (no heredan el tema activo) */
  .collection-nav button[data-collection="baroque"]:hover,
  .collection-nav button[data-collection="baroque"].is-active{
    background:#9B2D3F;
    color:#F6EEDA;
    border-color:#9B2D3F;
    box-shadow:0 2px 10px rgba(155,45,63,0.4);
    transform:translateY(-1px);
  }
  .collection-nav button[data-collection="summer"]:hover,
  .collection-nav button[data-collection="summer"].is-active{
    background:#FF6B4A;
    color:#FFF8EE;
    border-color:#FF6B4A;
    box-shadow:0 2px 10px rgba(255,107,74,0.4);
    transform:translateY(-1px);
  }
  .collection-nav button[data-collection="fantasy"]:hover,
  .collection-nav button[data-collection="fantasy"].is-active{
    background:#2BBBAD;
    color:#F4FBFA;
    border-color:#2BBBAD;
    box-shadow:0 2px 10px rgba(43,187,173,0.4);
    transform:translateY(-1px);
  }
  .collection-nav button[data-collection="mafia"]:hover,
  .collection-nav button[data-collection="mafia"].is-active{
    background:#3A3A42;
    color:#E8E6E3;
    border-color:#5A5A64;
    box-shadow:0 2px 10px rgba(0,0,0,0.45);
    transform:translateY(-1px);
  }
  .collection-nav button:hover{ transform:translateY(-1px); }
  @media (max-width:760px){
    .collection-nav{ top:30px; gap:4px; padding:4px 8px; }
    .collection-nav button{ font-size:9px; padding:4px 9px; letter-spacing:0.08em; }
  }

  /* ---- Bienvenida Summer ---- */
  .summer-welcome,
  #summerWelcome{
    position:absolute;
    inset:0;
    z-index:40;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    background:linear-gradient(to top, rgba(255,246,232,0.55) 0%, rgba(255,246,232,0.05) 45%, transparent 70%);
    transition:opacity .5s ease, visibility .5s ease;
  }
  body.summer-welcome-on .summer-welcome:not(.sw-exit),
  body.summer-welcome-on #summerWelcome:not(.sw-exit){
    opacity:1 !important;
    visibility:visible !important;
  }
  body.summer-welcome-on .summer-welcome.sw-exit,
  body.summer-welcome-on #summerWelcome.sw-exit,
  .summer-welcome.sw-exit,
  #summerWelcome.sw-exit{
    opacity:0 !important;
    visibility:hidden !important;
    transition:opacity .5s ease, visibility .5s ease !important;
  }
  .summer-welcome-inner{
    position:absolute;
    left:0; right:0; bottom:0;
    width:100%;
    height:48vh;
    min-height:230px;
  }
  .summer-sun-svg{
    position:absolute;
    left:50%;
    top:clamp(8px, 1.5vh, 20px);
    transform:translate(min(42vw, 220px), 0);
    width:clamp(56px, 9vw, 88px);
    height:clamp(56px, 9vw, 88px);
    overflow:visible;
    z-index:4;
  }
  .summer-sun{
    transform-origin:60px 60px;
    animation:swSunPulse 2.8s ease-in-out infinite;
  }
  .sun-rays{
    transform-origin:0 0;
    animation:swRaysSpin 10s linear infinite;
  }
  .summer-waves-svg{
    position:absolute;
    left:0; right:0; bottom:0;
    width:100%;
    height:72%;
    display:block;
    overflow:hidden;
    z-index:1;
  }
  .wave-layer{ animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
  .wave-back{ animation:swWaveA 4s ease-in-out infinite; }
  .wave-mid{ animation:swWaveB 3.2s ease-in-out infinite; }
  .wave-front{ animation:swWaveA 2.6s ease-in-out infinite reverse; }
  .wave-foam{ animation:swWaveB 2.2s ease-in-out infinite; }
  @keyframes swWaveA{
    0%,100%{ transform:translateX(0); }
    50%{ transform:translateX(-56px); }
  }
  @keyframes swWaveB{
    0%,100%{ transform:translateX(0); }
    50%{ transform:translateX(48px); }
  }
  @keyframes swSunPulse{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
  }
  @keyframes swRaysSpin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }
  .summer-welcome-text{
    position:absolute;
    left:0; right:0;
    top:clamp(12px, 2.5vh, 28px);
    text-align:center;
    pointer-events:none;
    z-index:3;
  }
  body.summer-welcome-on .summer-welcome:not(.sw-exit) .summer-welcome-text{
    animation:swTextIn .7s cubic-bezier(.22,1.15,.36,1) both;
  }
  body.summer-welcome-on .summer-welcome.sw-exit .summer-welcome-text,
  .summer-welcome.sw-exit .summer-welcome-text{
    animation:swTextOut .5s ease forwards;
  }
  .sw-kicker{
    margin:0;
    font-family:'Montserrat',sans-serif;
    font-weight:900;
    font-size:clamp(12px,2vw,16px);
    letter-spacing:0.35em;
    color:#FF6B4A;
  }
  .sw-title{
    margin:6px 0 0;
    font-family:'Montserrat',sans-serif;
    font-weight:900;
    font-size:clamp(22px,5vw,42px);
    letter-spacing:0.08em;
    color:#3D5A6C;
    text-shadow:0 2px 0 rgba(255,246,232,0.9);
  }
  .sw-year{
    margin:4px 0 0;
    font-family:'Space Mono',monospace;
    font-size:clamp(14px,2.2vw,20px);
    letter-spacing:0.2em;
    color:#5EC8F2;
  }
  @keyframes swTextIn{
    from{ opacity:0; transform:translateY(12px) scale(0.96); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes swTextOut{
    from{ opacity:1; transform:translateY(0) scale(1); }
    to{ opacity:0; transform:translateY(-14px) scale(0.98); }
  }

  /* ---- Bienvenida Fantasy ---- */
  .fantasy-welcome,
  #fantasyWelcome{
    position:absolute;
    inset:0;
    z-index:40;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    background:linear-gradient(to top, rgba(234,246,243,0.5) 0%, rgba(234,246,243,0.08) 40%, transparent 65%);
    transition:opacity .5s ease, visibility .5s ease;
  }
  body.fantasy-welcome-on .fantasy-welcome:not(.fw-exit),
  body.fantasy-welcome-on #fantasyWelcome:not(.fw-exit){
    opacity:1 !important;
    visibility:visible !important;
  }
  body.fantasy-welcome-on .fantasy-welcome.fw-exit,
  body.fantasy-welcome-on #fantasyWelcome.fw-exit,
  .fantasy-welcome.fw-exit,
  #fantasyWelcome.fw-exit{
    opacity:0 !important;
    visibility:hidden !important;
    transition:opacity .5s ease, visibility .5s ease !important;
  }
  .fantasy-welcome-inner{
    position:absolute;
    left:0; right:0; bottom:0;
    width:100%;
    height:46vh;
    min-height:210px;
  }
  .fantasy-ground-svg{
    position:absolute;
    left:0; right:0; bottom:0;
    width:100%;
    height:42%;
    min-height:120px;
    display:block;
    overflow:hidden;
  }
  .fw-blade{
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation-name: fwBladeSway;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  @keyframes fwBladeSway{
    0%{ transform: rotate(0deg); }
    25%{ transform: rotate(8deg); }
    50%{ transform: rotate(-6deg); }
    75%{ transform: rotate(5deg); }
    100%{ transform: rotate(0deg); }
  }
  .fantasy-welcome-text{
    position:absolute;
    left:0; right:0;
    top:clamp(10px, 2vh, 24px);
    text-align:center;
    z-index:3;
  }
  body.fantasy-welcome-on .fantasy-welcome:not(.fw-exit) .fantasy-welcome-text{
    animation:fwTextIn .7s cubic-bezier(.22,1.15,.36,1) both;
  }
  body.fantasy-welcome-on .fantasy-welcome.fw-exit .fantasy-welcome-text,
  .fantasy-welcome.fw-exit .fantasy-welcome-text{
    animation:fwTextOut .5s ease forwards;
  }
  .fw-kicker{
    margin:0;
    font-family:'Montserrat',sans-serif;
    font-weight:900;
    font-size:clamp(12px,2vw,16px);
    letter-spacing:0.35em;
    color:#2BBBAD;
  }
  .fw-title{
    margin:6px 0 0;
    font-family:'Montserrat',sans-serif;
    font-weight:900;
    font-size:clamp(22px,5vw,42px);
    letter-spacing:0.08em;
    color:#1E4A4E;
    text-shadow:0 2px 0 rgba(244,251,250,0.9);
  }
  .fw-year{
    margin:4px 0 0;
    font-family:'Space Mono',monospace;
    font-size:clamp(14px,2.2vw,20px);
    letter-spacing:0.2em;
    color:#4EC4D9;
  }
  @keyframes fwTextIn{
    from{ opacity:0; transform:translateY(12px) scale(0.96); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes fwTextOut{
    from{ opacity:1; transform:translateY(0) scale(1); }
    to{ opacity:0; transform:translateY(-14px) scale(0.98); }
  }
  @media (prefers-reduced-motion: reduce){
    .wave-layer,.summer-sun,.sun-rays,.fw-blade{ animation:none !important; }
  }

/* ---------------- EDITOR PANEL ---------------- */
.edit-toggle{
    display:none !important;
    position:absolute;
    top:48px; right:22px;
    z-index:12;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.08em;
    color:#F6EEDA;
    background:rgba(43,187,173,0.88);
    border:1px solid rgba(90,35,50,0.5);
    border-radius:6px;
    padding:7px 12px;
    cursor:pointer;
    box-shadow:0 2px 10px rgba(74,58,38,0.14);
    transition:background .2s ease, transform .2s ease;
  }
  .edit-toggle:hover{ background:rgba(43,187,173,1); transform:translateY(-1px); }
  .edit-toggle.active{ background:rgba(74,58,38,0.92); }

  .editor-panel{
    position:absolute;
    top:60px; right:22px;
    width:280px;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    z-index:12;
    background:rgba(74,58,38,0.95);
    color:#F6EEDA;
    border-radius:10px;
    padding:14px 14px 12px;
    box-shadow:0 10px 28px rgba(0,0,0,0.22);
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.04em;
    display:none !important;
  }
  .editor-panel.open{ display:none !important; }
  .editor-panel .section-title{
    margin:14px 0 10px;
    padding-top:10px;
    border-top:1px solid rgba(246,238,218,0.18);
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:13px;
    letter-spacing:0.05em;
    text-align:center;
    color:#F6EEDA;
  }
  .editor-panel .section-title:first-of-type{
    margin-top:4px;
    padding-top:0;
    border-top:none;
  }
  .editor-panel .hint{
    font-size:9px;
    opacity:0.65;
    margin:-4px 0 10px;
    text-align:center;
    letter-spacing:0.02em;
  }
  .editor-panel h3{
    margin:0 0 12px;
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:14px;
    letter-spacing:0.06em;
    color:#F6EEDA;
    text-align:center;
  }
  .editor-panel .row{ margin:0 0 12px; }
  .editor-panel label{
    display:flex;
    justify-content:space-between;
    margin-bottom:5px;
    opacity:0.9;
  }
  .editor-panel label span.val{ opacity:1; color:#fff; }
  .editor-panel select{
    width:100%;
    background:rgba(246,238,218,0.12);
    color:#F6EEDA;
    border:1px solid rgba(246,238,218,0.25);
    border-radius:4px;
    padding:6px 8px;
    font-family:'Space Mono', monospace;
    font-size:11px;
  }
  .editor-panel select option{ background:#4A3B26; color:#F6EEDA; }
  .editor-panel input[type="range"]{
    width:100%;
    -webkit-appearance:none;
    appearance:none;
    height:4px;
    background:rgba(234,246,243,0.30);
    border-radius:2px;
    outline:none;
  }
  .editor-panel input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:14px; height:14px;
    border-radius:50%;
    background:#F6EEDA;
    cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,0.3);
  }
  .editor-actions{ display:flex; gap:6px; margin-top:4px; }
  .editor-actions button{
    flex:1;
    font-family:'Space Mono', monospace;
    font-size:10px;
    letter-spacing:0.06em;
    padding:7px 6px;
    border-radius:4px;
    border:1px solid rgba(246,238,218,0.25);
    background:rgba(246,238,218,0.1);
    color:#F6EEDA;
    cursor:pointer;
    transition:background .2s ease;
  }
  .editor-actions button:hover{ background:rgba(246,238,218,0.2); }
  @media (max-width:760px){
    .edit-toggle{ top:12px; right:8px; padding:6px 10px; font-size:10px; }
    .editor-panel{ right:8px; width:210px; top:50px; }
  }

/* Ajustes de prendas: viven en #baked-item-transforms del HTML (editor) */

/* Buy Me a Coffee widget: posición propia (Right) */