@font-face{font-family:'Space Grotesk';font-weight:400 700;font-display:swap;src:url('fuentes/space-grotesk-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:400 500;font-display:swap;src:url('fuentes/inter-normal-latin.woff2') format('woff2')}

/* Azul vivo y blanco: la marca personal de Flor, no la de Golden Mood. */
:root {
  /* Más claro que un azul rey, pero sin bajar del contraste 4.5:1 con el texto blanco. */
  --azul: #3a66f2;
  --azul-claro: #3f6df3;
  --azul-profundo: #2f58e6;
  --tinta: #0a1f7a;
  --blanco: #fff;
  --suave: #eef2ff;
  /* Con las fotos de fondo, el vidrio va más oscuro y desenfocado para que el texto se siga leyendo. */
  --vidrio: rgb(10 30 120 / .34);
  --vidrio-hover: rgb(10 30 120 / .46);
  --borde: rgb(255 255 255 / .38);
  --titulo: 'Space Grotesk', Arial, sans-serif;
  --cuerpo: 'Inter', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: radial-gradient(120% 30% at 50% 0%, rgb(255 255 255 / .16), transparent 70%) no-repeat, linear-gradient(180deg, var(--azul-claro), var(--azul) 45%, var(--azul-profundo)) fixed; color: var(--blanco); font: 400 16px/1.6 var(--cuerpo); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Collage de fondo: dos columnas en el celular, tres en pantallas anchas, con un velo azul para que se lea el texto. */
.collage { position: fixed; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); background: var(--azul-profundo); }
.collage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.collage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(35 75 210 / .6), rgb(22 52 175 / .66) 45%, rgb(12 32 130 / .78)); }
.collage .f1 { object-position: 65% 75%; }
.collage .f2 { object-position: 50% 45%; }
.collage .f3 { object-position: 40% 45%; }
.collage .f4 { object-position: 50% 70%; }
.collage .f5 { object-position: 35% 70%; }
.collage .f6 { object-position: 50% 65%; }
@media (min-width: 760px) {
  .collage { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
}

.pagina { position: relative; max-width: 480px; margin: 0 auto; padding: max(64px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

/* Idioma */
.idiomas { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: flex; gap: 2px; padding: 3px; border: 1px solid var(--borde); border-radius: 40px; background: var(--vidrio); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.idiomas button { min-width: 44px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 40px; background: transparent; color: var(--blanco); font: 600 12px/1 var(--titulo); letter-spacing: .08em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.idiomas button[aria-pressed="true"] { background: var(--blanco); color: var(--azul); }

/* Perfil */
.perfil { text-align: center; text-shadow: 0 1px 14px rgb(3 15 80 / .45); }
.foto { display: block; width: 124px; height: 124px; margin: 0 auto; border: 4px solid var(--blanco); border-radius: 50%; object-fit: cover; box-shadow: 0 12px 32px rgb(3 15 80 / .25); }
.perfil h1 { margin: 18px 0 0; font: 700 34px/1.1 var(--titulo); letter-spacing: -.02em; }
.lema { margin: 8px auto 0; max-width: 30ch; font: 500 16px/1.4 var(--titulo); text-wrap: balance; }
.cargo { margin: 10px 0 0; font: 500 11px/1.5 var(--titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.bio { margin: 14px auto 0; max-width: 32ch; font-size: 15px; line-height: 1.55; color: var(--suave); }

.redes { display: flex; justify-content: center; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.redes a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--borde); border-radius: 50%; background: var(--vidrio); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--blanco); -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s; }
.redes a:hover { background: var(--blanco); color: var(--azul); }
.redes svg { width: 19px; height: 19px; fill: currentColor; }

/* Enlaces: tarjetas blancas y sólidas, para que no se pierdan sobre las fotos del fondo. */
.enlaces { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.enlace { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px; border: 1px solid var(--blanco); border-radius: 16px; background: var(--blanco); color: var(--tinta); text-decoration: none; box-shadow: 0 10px 28px rgb(3 15 80 / .3); -webkit-tap-highlight-color: transparent; transition: background .2s, transform .15s; }
a.enlace:hover { background: #f3f6ff; }
a.enlace:active { transform: scale(.985); }
.miniatura { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--azul-profundo); box-shadow: 0 4px 12px rgb(3 15 80 / .2); }
.texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.texto b { font: 600 16px/1.3 var(--titulo); }
.texto small { font-size: 13px; line-height: 1.45; color: #4a5687; overflow-wrap: anywhere; }
.texto .direccion { margin-top: 2px; font: 500 12px/1.4 var(--titulo); color: var(--azul); }
.flecha { flex: none; width: 18px; height: 18px; color: var(--azul); transition: transform .2s; }
a.enlace:hover .flecha { transform: translateX(3px); }
/* El primero va en azul lleno, para que se distinga de los demás. */
.destacado { border-color: rgb(255 255 255 / .7); background: linear-gradient(135deg, #2f5bea, #1e3fc8); color: var(--blanco); }
a.destacado:hover { background: linear-gradient(135deg, #3a66f2, #2448d8); }
.destacado .miniatura { outline: 2px solid var(--blanco); }
.destacado small { color: #e6ecff; }
.destacado .flecha { color: var(--blanco); }
/* Go-to-Market: la tarjeta no es un enlace. Abajo de la foto y el título, un renglón por deck (cada uno abre
   su pantalla) y otro para la web. */
.con-opciones { flex-wrap: wrap; row-gap: 10px; }
.opcion-deck, .opcion-web { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--azul); border-radius: 12px; font: 600 14px/1.2 var(--titulo); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background .2s; }
.opcion-deck { background: var(--azul); color: var(--blanco); }
.opcion-deck:hover { background: #2448d8; }
.opcion-web { background: var(--blanco); color: var(--azul); }
.opcion-web:hover { background: #eef2ff; }
.opcion-deck svg, .opcion-web svg { width: 18px; height: 18px; flex: none; }
.opcion-web .ir, .opcion-deck .ir { margin-left: auto; }
/* «Decks y web» se despliega dentro de la tarjeta, sin cambiar de pantalla. */
.opciones-gtm { flex: 1 0 100%; }
.opciones-gtm summary { list-style: none; cursor: pointer; }
.opciones-gtm summary::-webkit-details-marker { display: none; }
.opciones-gtm[open] .chevron { transform: rotate(180deg); }
.opciones-lista { display: grid; gap: 8px; margin-top: 8px; }
.paginas { margin-left: auto; font: 500 12px/1 var(--cuerpo); opacity: .85; }
/* Lo que todavía no está: figura, pero no se toca. */
.inactivo { border: 1px dashed var(--azul); background: rgb(255 255 255 / .85); box-shadow: none; }
.inactivo b { color: #4a5687; }
.pastilla { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 20px; background: var(--azul); color: var(--blanco); font: 700 9px/1.6 var(--titulo); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; vertical-align: 2px; }

.pie { margin-top: 36px; text-align: center; font: 500 11px/1.5 var(--titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--suave); text-shadow: 0 1px 10px rgb(3 15 80 / .5); }

/* Visor de decks (public/decks/<nombre>/): otra pantalla, con el mismo collage de fondo, las páginas a todo el ancho
   y una barra fija para volver. */
.visor-barra { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); background: rgb(20 48 170 / .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(255 255 255 / .25); }
.visor-volver { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px 0 10px; border-radius: 30px; background: var(--blanco); color: var(--azul); font: 600 14px/1 var(--titulo); text-decoration: none; }
.visor-volver svg { width: 18px; height: 18px; }
.visor-titulo { margin: 0; min-width: 0; font: 500 13px/1.3 var(--titulo); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-titulo b { color: var(--blanco); font-weight: 600; }
.visor-paginas { max-width: 1000px; margin: 0 auto; padding: 14px max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); display: grid; gap: 12px; }
.visor-paginas img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .4); }
.visor-ayuda { margin: 0; text-align: center; font-size: 12px; color: var(--suave); text-shadow: 0 1px 10px rgb(3 15 80 / .5); }
.visor-paginas .visor-volver { justify-self: center; margin-top: 10px; box-shadow: 0 8px 24px rgb(3 15 80 / .35); }
.visor-vertical { max-width: 760px; }

@media (prefers-reduced-motion: no-preference) {
  .perfil, .enlaces li { animation: entrar .6s cubic-bezier(.2, .7, .2, 1) both; }
  .enlaces li:nth-child(2) { animation-delay: .04s; }
  .enlaces li:nth-child(3) { animation-delay: .08s; }
  .enlaces li:nth-child(4) { animation-delay: .12s; }
  .enlaces li:nth-child(5) { animation-delay: .16s; }
}
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }