@font-face { font-family: Manrope; src: url(/showroom/fuentes/manrope-vf-latin-wght-normal.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/showroom/fuentes/cormorant-garamond-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/showroom/fuentes/cormorant-garamond-latin-500-italic.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
:root { --fondo: #0b0820; --texto: #f3eee3; --apagado: #a9a3c2; --oro: #c9a55c; --oro-alto: #f1d79c; --indigo: #271fce; --linea: rgb(243 238 227 / .12); --cristal: rgb(255 255 255 / .05);
  --serif: 'Cormorant Garamond', Georgia, serif; --sans: Manrope, -apple-system, 'Segoe UI', sans-serif; --salida: cubic-bezier(.16, 1, .3, 1); color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--fondo); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; font: 400 16px/1.6 var(--sans); color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.luz { position: fixed; inset: -20% -40% auto; height: 70vh; pointer-events: none; background: radial-gradient(closest-side at 50% 40%, rgb(39 31 206 / .35), transparent 70%), radial-gradient(closest-side at 62% 30%, rgb(201 165 92 / .14), transparent 60%); filter: blur(10px); animation: respira 9s ease-in-out infinite alternate; }
@keyframes respira { to { transform: translate3d(-4%, 3%, 0) scale(1.06); opacity: .8; } }
.arriba { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: min(100%, 560px); margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 20px 0; font-size: 14px; }
.volver { color: var(--apagado); text-decoration: none; padding: 10px 0; }
.volver:hover { color: var(--texto); }
.marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .3em; font-size: 13px; }
.marca img { border-radius: 6px; }
main { position: relative; flex: 1; width: min(100%, 560px); margin: 0 auto; padding: 8vh 20px 40px; outline: none; }
/* backwards y no both: una opacidad retenida en la sección anularía el desenfoque del cristal. */
section { animation: entrar .7s var(--salida) backwards; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }
.antetitulo { margin: 0 0 14px; color: var(--oro); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
h1 { margin: 0; font: 500 clamp(42px, 12vw, 60px)/1.02 var(--serif); letter-spacing: -.01em; }
h1 em { display: block; color: var(--oro-alto); }
.entrada { margin: 18px 0 32px; color: var(--apagado); font-size: 17px; max-width: 34em; }
.sectores { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sector { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border: 1px solid var(--linea); border-radius: 22px; background: var(--cristal); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .3s, transform .3s var(--salida), background .3s; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sector:not(:disabled):hover, .sector:not(:disabled):focus-visible { border-color: rgb(201 165 92 / .55); background: rgb(201 165 92 / .07); transform: translateY(-2px); }
.sector:disabled { cursor: default; opacity: .5; }
.sector b { display: block; font: 500 28px/1.1 var(--serif); }
.sector small { color: var(--apagado); font-size: 14px; }
.sector .ir, .vista .ir { color: var(--oro); font-size: 22px; }
.etiqueta { padding: 4px 10px; border: 1px solid var(--linea); border-radius: 99px; font-size: 12px; color: var(--apagado); white-space: nowrap; }
.atras, .enlace { margin: 0 0 26px; padding: 10px 0; border: 0; background: none; color: var(--apagado); font: inherit; font-size: 14px; cursor: pointer; }
.enlace { margin: 18px 0 0; text-decoration: underline; text-underline-offset: 4px; }
.campo { display: grid; gap: 8px; color: var(--apagado); font-size: 14px; }
.campo input { width: 100%; min-height: 56px; padding: 0 18px; border: 1px solid var(--linea); border-radius: 16px; background: rgb(255 255 255 / .06); color: var(--texto); font: 500 20px var(--sans); outline: none; transition: border-color .2s; }
.campo input:focus { border-color: var(--oro); }
.principal { width: 100%; min-height: 56px; margin-top: 18px; border: 0; border-radius: 99px; background: linear-gradient(180deg, var(--oro-alto), var(--oro)); color: #1a1408; font: 700 16px var(--sans); cursor: pointer; box-shadow: 0 12px 30px -14px rgb(201 165 92 / .7); }
.principal:disabled { opacity: .6; }
.vistas { display: grid; gap: 12px; }
.vista { position: relative; display: grid; gap: 6px; width: 100%; padding: 22px 52px 22px 22px; border: 1px solid var(--linea); border-radius: 22px; background: var(--cristal); color: var(--apagado); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: border-color .3s, transform .3s var(--salida), background .3s; }
.vista:hover, .vista:focus-visible { border-color: rgb(201 165 92 / .55); background: rgb(201 165 92 / .07); transform: translateY(-2px); }
.vista-titulo { color: var(--texto); font: 500 28px/1.1 var(--serif); }
.vista .ir { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); }
.vista:disabled { opacity: .6; cursor: progress; }
.nota { margin: 22px 0 0; padding-left: 14px; border-left: 2px solid rgb(39 31 206 / .8); color: var(--apagado); font-size: 13px; }
.error { min-height: 1.4em; margin: 10px 0 0; color: #f0a39b; font-size: 14px; }
.error:empty { margin: 0; min-height: 0; }
.abajo { position: relative; padding: 20px 20px max(20px, env(safe-area-inset-bottom)); text-align: center; color: var(--apagado); font-size: 12px; }
.abajo a { color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .luz, section { animation: none; } }
/* Foto de cada sector, la misma que en «Pruébalo» de la web de RAIA. */
.sector { position: relative; isolation: isolate; overflow: hidden; min-height: 124px; }
.sector::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0d0a24 34%, rgb(13 10 36 / .55) 62%, rgb(13 10 36 / .1)), var(--foto) right center / 62% auto no-repeat; transition: transform .6s var(--salida); }
.sector:not(:disabled):hover::before { transform: scale(1.04); }
/* Mismo fondo que la web de RAIA: atmósfera, circuito vivo (fondo.js) y viñeta. */
:root { --ink-0: #07051a; --ink-1: #0b0820; --ink-2: #120d2e; }
html, body { background: transparent; }
html { background: var(--ink-1); }
.atmos { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(60% 50% at 85% 8%, rgb(91 69 201 / .32), transparent 70%), radial-gradient(55% 45% at 8% 92%, rgb(141 108 44 / .16), transparent 70%), radial-gradient(80% 70% at 50% 50%, var(--ink-2), var(--ink-1) 70%, var(--ink-0)); }
#bg-base { position: fixed; left: 0; top: 0; z-index: -2; pointer-events: none; will-change: transform; }
#bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; }
.veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(4 3 14 / .65)); }
/* Sin recuadro dorado al enfocar la página entera (solo los controles muestran el foco). */
#contenido:focus, #contenido:focus-visible { outline: none; }
/* Tarjetas de cristal líquido, como en la web: difuminan el fondo, reflejo que sigue al dedo e inclinación. */
@property --sx { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
@property --sy { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
.sectores, .vistas { perspective: 1000px; }
.sector, .vista { --rx: 0deg; --ry: 0deg; border: 0; background-color: transparent; background-image: linear-gradient(160deg, rgb(255 255 255 / .11), rgb(255 255 255 / .025) 45%, rgb(255 255 255 / .05)); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), inset 0 -1px 0 rgb(255 255 255 / .05), inset 0 0 0 1px rgb(255 255 255 / .09), 0 24px 60px -24px rgb(0 0 0 / .7);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--salida), box-shadow .6s var(--salida), --sx .5s var(--salida), --sy .5s var(--salida); overflow: hidden; isolation: isolate; }
.sector.siguiendo, .vista.siguiendo { transition: box-shadow .6s var(--salida); }
.sector::after, .vista::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(260px 200px at var(--sx) var(--sy), rgb(241 215 156 / .16), transparent 70%); opacity: 0; transition: opacity .4s; }
.sector:not(:disabled):hover, .sector:not(:disabled):focus-visible, .vista:hover, .vista:focus-visible { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px); background-color: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px rgb(241 215 156 / .5), 0 0 50px -14px rgb(201 165 92 / .5), 0 30px 60px -25px rgb(0 0 0 / .8); }
.sector:not(:disabled):hover::after, .vista:hover::after, .sector:not(:disabled):focus-visible::after, .vista:focus-visible::after { opacity: 1; }
.sector > span, .vista > span { position: relative; z-index: 1; }
.vista .ir { position: absolute; z-index: 1; }
/* Al elegir: el mismo destello que cuando la tarjeta de la web completa sus sellos. */
.sector.destello, .vista.destello { box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px rgb(241 215 156 / .7), 0 0 60px -10px rgb(201 165 92 / .6), 0 30px 60px -25px rgb(0 0 0 / .8); }
.destello > .chispa { position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: conic-gradient(from 0deg, transparent, rgb(241 215 156 / .38), transparent 30%); animation: destello 1.1s var(--salida) forwards; }
@keyframes destello { from { transform: rotate(0); opacity: 1; } to { transform: rotate(200deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sector, .vista { transform: none !important; } .destello > .chispa { display: none; } }