/* OCEANSING | FlipCard 3D; adaptación independiente a HTML/CSS nativos. */
.flip-card { --fc-radius: 19px; --fc-turn: 0deg; --fc-tilt-x: 0deg; --fc-tilt-y: 0deg; --fc-lift: 1; --fc-gx: 50%; --fc-gy: 50%; --fc-sheen: 0; --fc-progress: 1; --fc-accent: #a3c6e9; position: relative; display: block; width: 100%; height: clamp(330px,31vw,402px); border-radius: var(--fc-radius); outline: none; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; perspective: 1100px; isolation: isolate; }
.flip-card[aria-pressed=true] { cursor: grab; }
.flip-card.is-dragging { cursor: grabbing; }
.flip-card--azul { --fc-accent: #3ba9ee; }
.flip-card--naranja { --fc-accent: #ff9b23; }
.flip-card--rosa { --fc-accent: #f3356c; }
.flip-card--hielo { --fc-accent: #b1ddf0; }
.flip-card--violeta { --fc-accent: #a999f9; }
.flip-card--rojo { --fc-accent: #ff6653; }
.flip-card--verde { --fc-accent: #95d28e; }
.flip-card--amarillo { --fc-accent: #eaca76; }
.flip-card__shadow { position: absolute; inset: 10% 8% -7%; background: rgba(0,0,0,.8); filter: blur(25px); border-radius: var(--fc-radius); opacity: calc(.25 + .25 * var(--fc-progress)); pointer-events: none; }
.flip-card__rotor { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; transform: scale(var(--fc-lift)) rotateX(var(--fc-tilt-x)) rotateY(calc(var(--fc-turn) + var(--fc-tilt-y))); }
.flip-card__face { position: absolute; inset: 0; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.19); overflow: hidden; border-radius: var(--fc-radius); background: #121214; color: #f5f5f5; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-card__face--front { background: radial-gradient(ellipse at 70% 45%, color-mix(in srgb, var(--fc-accent) 12%, transparent), transparent 63%), linear-gradient(146deg,#1a1a1c,#101012 85%); }
.flip-card__face--back { transform: rotateY(180deg); background: radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--fc-accent) 13%,transparent),transparent 60%),#18181a; }
.flip-card__meta { display: flex; align-items: start; justify-content: space-between; gap: 9px; min-width: 0; padding: 19px 19px 0; z-index: 1; font: 700 9px/1.5 'Courier New',monospace; color: rgba(255,255,255,.6); letter-spacing: .07em; }
.flip-card__status { color: rgba(255,255,255,.66); font-size: 8px; text-align: right; }
.flip-card__visual { flex: 1; min-height: 0; display: grid; place-items: center; padding: 11px 26px 0; }
.flip-card__art-image { display: block; width: min(100%,205px); height: min(100%,205px); max-height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 12px 20px rgba(0,0,0,.28)); }
.flip-card__art-glyph { display: grid; place-items: center; position: relative; width: min(100%,205px); aspect-ratio: 1; max-height: 100%; color: var(--fc-accent); }
.flip-card__art-glyph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flip-card__art-glyph span { font: 500 clamp(52px,5vw,82px)/1 Arial,Helvetica,sans-serif; letter-spacing: -.07em; text-shadow: 0 0 35px color-mix(in srgb,var(--fc-accent) 30%,transparent); }
.flip-card__front-bottom { z-index: 1; padding: 0 19px 21px; }
.flip-card__category { color: var(--fc-accent); font: 700 9px/1.5 'Courier New',monospace; letter-spacing: .1em; }
.flip-card__front-bottom h3 { font: 500 clamp(21px,2vw,26px)/1.08 Arial,Helvetica,sans-serif; letter-spacing: -.055em; margin: 8px 0 18px; text-wrap: balance; }
.flip-card__instruction { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.15); padding-top: 11px; font: 700 9px/1.3 'Courier New',monospace; letter-spacing: .13em; }
.flip-card__instruction span { font-size: 15px; line-height: 1; }
.flip-card__back-content { flex: 1; min-height: 0; padding: 23px 20px 10px; overflow: auto; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.flip-card__back-content h3 { font: 500 clamp(24px,2.25vw,33px)/1.05 Arial,Helvetica,sans-serif; margin: 9px 0 18px; letter-spacing: -.055em; text-wrap: balance; }
.flip-card__back-content h4 { font: 400 clamp(15px,1.3vw,18px)/1.25 'Della Respira',Georgia,serif; margin: 0 0 13px; color: #fff; }
.flip-card__back-content p { font: 400 12px/1.55 Arial,Helvetica,sans-serif; color: rgba(255,255,255,.63); margin: 0 0 17px; }
.flip-card__back-content ul { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.flip-card__back-content li { color: rgba(255,255,255,.76); font: 500 11px/1.4 Arial,Helvetica,sans-serif; }
.flip-card__back-content li::before { content: '+'; margin-right: 9px; color: var(--fc-accent); }
.flip-card__back-foot { display: flex; justify-content: space-between; gap: 6px; padding: 13px 19px 19px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.55); font: 700 9px/1.3 'Courier New',monospace; }
.flip-card__back-foot span:last-child { color: #fff; white-space: nowrap; }
.flip-card__glare { position: absolute; inset: 0; background: radial-gradient(circle farthest-side at var(--fc-gx) var(--fc-gy),rgba(255,255,255,.22),rgba(255,255,255,.1) 22%,transparent 70%); opacity: var(--fc-sheen); pointer-events: none; }
.flip-card:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 3px; }
.flip-card.is-hovered .flip-card__face { border-color: rgba(255,255,255,.35); }
@media (min-width:701px) and (max-width:1100px) { .flip-card { height: 380px; } }
@media (max-width:700px) { .flip-card { height: 365px; } }
@media (max-width:460px) { .flip-card { height: 425px; } .flip-card__front-bottom h3 { font-size: 27px; } .flip-card__back-content h3 { font-size: 31px; } }
@media (prefers-reduced-motion:reduce) { .flip-card__rotor { transition: transform 0.01s linear; } .flip-card__glare { display: none; } }

/* iOS / Android: una sola cara DOM visible al pulsar, evita texto invertido/duplicado.
   En escritorio se conserva exactamente la animación 3D anterior. */
.flip-card.is-mobile-flip {perspective:none;touch-action:pan-y;cursor:pointer;}
.flip-card.is-mobile-flip .flip-card__rotor {transform:none!important;will-change:auto;transform-style:flat;}
.flip-card.is-mobile-flip .flip-card__face {transform:none!important;backface-visibility:visible;-webkit-backface-visibility:visible;}
.flip-card.is-mobile-flip .flip-card__face--back {display:none;}
.flip-card.is-mobile-flip.is-flipped .flip-card__face--front {display:none;}
.flip-card.is-mobile-flip.is-flipped .flip-card__face--back {display:flex;}
.flip-card.is-mobile-flip .flip-card__glare {display:none;}
@media(max-width:700px) {
 .flip-card.is-mobile-flip {height:clamp(375px,105vw,450px)!important;}
 .flip-card.is-mobile-flip .flip-card__back-content {overflow:auto;min-height:0;padding:19px 16px 8px!important;}
 .flip-card.is-mobile-flip .flip-card__back-content h3 {font-size:clamp(23px,7vw,30px);margin-bottom:12px;}
 .flip-card.is-mobile-flip .flip-card__back-content h4 {font-size:16px;margin-bottom:11px;}
 .flip-card.is-mobile-flip .flip-card__back-content p {font-size:13px;line-height:1.5;margin-bottom:13px;}
 .flip-card.is-mobile-flip .flip-card__back-content li {font-size:12px;line-height:1.5;}
 .flip-card.is-mobile-flip .flip-card__back-foot {font-size:8px;white-space:normal;}
}