/* La página pública de la organización (spec 16 de dash, §13): el diseño del propietario del 27-oct
   (app/soyla-tmp/design/2026-10-27-home-publico), en dos comportamientos, el ancho y el teléfono (hasta 760 px), y en
   claro y oscuro. La misma en la nube, que la sirve en la dirección de la licencia, y en Soyla Home, que la enseña en la
   oficina: pagina_test.go comprueba que las copias son iguales y que sus colores son los de la línea gráfica. */
@font-face { font-family: Inter; src: url(fuentes/Inter.ttf) format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Big Shoulders'; src: url(fuentes/BigShoulders.ttf) format('truetype'); font-weight: 100 900; font-display: block; }

:root {
  --lima: #c0e020; --petroleo: #006060; --noche: #002020; --elegido: #004040; --panel: #e4eceb;
  --boton: #00803a; --boton-osc: #006b30; --verificado: #00c040;
  /* El gris de la animación de entrada (la hoja del 06-oct): la línea no lo tiene. */
  --entrada: #efefef;
  /* Oscuro: el fondo liso y el reloj de --elegido a --noche. */
  --fondo: var(--noche); --tinta: #fff; --marca: var(--lima);
  --reloj: linear-gradient(180deg, var(--elegido), var(--noche));
  --menu-fondo: var(--petroleo); --menu-tinta: var(--lima); --pie: 1;
  --barra: 96px; --botones-pie: 72px; --avatar: 224px;
}
/* El oscuro otra vez, con el tema puesto: la personalización (marca.css de dash, spec 20) escribe sus fichas en :root
   y, sin esto, la página oscura quedaba con la tinta y la S del claro (el propietario, 29-oct: «las letras no se leen»). */
:root[data-tema="oscuro"] {
  --fondo: var(--noche); --tinta: #fff; --marca: var(--lima);
  --menu-fondo: var(--petroleo); --menu-tinta: var(--lima);
}
:root[data-tema="claro"] {
  --fondo: var(--panel); --tinta: var(--noche); --marca: var(--petroleo);
  --reloj: linear-gradient(180deg, #fff, var(--panel));
  --menu-fondo: var(--lima); --menu-tinta: var(--noche); --pie: .5;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* El fondo de la página, en toda la ventana: con el ancho máximo de Ajustes › Personalización › UI, #sitio se centra
   más angosto, y a los lados se veía el gris de la entrada (el propietario, 02-nov: «franjas blancas»). */
body { font-family: Inter, system-ui, sans-serif; font-weight: 400; background: var(--fondo); color: var(--tinta); overflow: hidden; }
#sitio { position: fixed; inset: 0; background: var(--fondo); overflow: hidden; }
button { font-family: inherit; }
h3 { font-weight: 400; }

/* El reloj, detrás: la caja lleva aire para que las curvas no se corten. */
.reloj { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'Big Shoulders', sans-serif; font-weight: 400;
  font-variation-settings: 'opsz' 72; font-size: min(70vh, 58vw); line-height: 1; letter-spacing: -.04em; padding: .06em .14em .1em .1em;
  white-space: nowrap; background: var(--reloj); -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none; pointer-events: none; }

/* La barra: la S, la etiqueta de la dirección y, a la derecha, el tema y «Entrar»; en el teléfono, las tres líneas. */
.barra { position: absolute; top: 0; left: 0; right: 0; height: var(--barra); display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; z-index: 4; }
.iso { width: 48px; height: 32px; display: block; color: var(--marca); }
/* La S en contornos y, al pasar el ratón, la rellena; lleva a soylasolucion.com (el propietario, 29-oct). */
.iso-web { display: block; flex: none; color: inherit; border-radius: 6px; }
.iso-web:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.iso-doble { position: relative; flex: none; }
.iso-doble svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .15s; }
.iso-doble .iso-relleno { opacity: 0; }
.iso-doble:hover .iso-relleno { opacity: 1; }
.iso-doble:hover .iso-contorno { opacity: 0; }
.titulo { position: absolute; left: 50%; transform: translateX(-50%); font-size: 24px; white-space: nowrap; }
.lado { display: flex; align-items: center; gap: 8px; }
.icono { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px;
  background: none; color: var(--marca); cursor: pointer; }
.icono svg { width: 24px; height: 24px; fill: currentColor; }
.icono:focus-visible, .entrar:focus-visible, .menu a:focus-visible, .menu button:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.entrar { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; height: 32px; padding: 0 15px; border-radius: 16px;
  background: var(--boton); color: #fff; font-size: 14px; text-decoration: none; }
.entrar:hover { background: var(--boton-osc); }
/* Los nueve puntos de la caja de apps, con sesión en la oficina (caja.js). */
.caja-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px;
  background: none; color: var(--marca); cursor: pointer; flex: none; }
.caja-btn svg { width: 28px; height: 28px; fill: currentColor; }
.hamb { display: none; }
.hamb svg { width: 16.1px; height: 17.8px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* El menú del teléfono: una pieza que cuelga de las tres líneas, con la esquina de arriba a la derecha recta. */
.menu { position: absolute; top: 75px; right: 24px; width: 192px; border-radius: 20px 0 20px 20px; background: var(--menu-fondo);
  color: var(--menu-tinta); overflow: hidden; display: none; flex-direction: column; z-index: 6; }
.menu.abierto { display: flex; }
.menu a, .menu button { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 24px 0 22px; border: 0;
  background: none; color: inherit; font-size: 18px; text-decoration: none; cursor: pointer; text-align: left; }
.menu .flecha { width: 7.4px; height: 12px; fill: currentColor; }
.menu button svg { width: 24px; height: 24px; margin-right: -6px; fill: currentColor; }

/* La organización: su imagen, su nombre (con la marca de verificado que da Soyla) y su descripción. Va entre la barra y
   los botones, centrada: el mismo aire arriba que abajo (el propietario, 29-oct: con el doble arriba, en unas pantallas
   quedaba muy abajo). */
.vista { position: absolute; top: var(--barra); bottom: calc(var(--botones-pie) + 64px); left: 0; right: 0; display: flex; flex-direction: column;
  align-items: center; overflow: auto; z-index: 1; padding: 0 16px; }
.vista::before { content: ''; flex: 1 1 0; }
.vista::after { content: ''; flex: 1 1 0; }
.avatar { width: var(--avatar); height: var(--avatar); border-radius: 50%; flex: none; object-fit: cover; display: block; }
.avatar.de-fabrica { background: var(--petroleo); display: grid; place-items: center; }
.avatar.de-fabrica svg { width: 50%; height: auto; display: block; }
.org { margin-top: 20px; font-size: 32px; letter-spacing: -.01em; text-align: center; line-height: 1.15; }
.marca-verificada { width: 32px; height: 32px; margin-left: 4px; vertical-align: middle; }
.desc { font-size: 14px; margin-top: 8px; text-align: center; opacity: .9; }

/* Los botones de la organización, derechos. */
.botones { position: absolute; bottom: var(--botones-pie); left: 0; right: 0; display: flex; gap: 12px; justify-content: center; padding: 0 16px; z-index: 1; }
.boton { width: 232px; height: 64px; border-radius: 32px; border: 0; background: var(--petroleo); color: var(--lima); font-size: 22px;
  cursor: pointer; transition: transform .15s, filter .15s; }
.boton:hover { filter: brightness(1.12); transform: translateY(-2px); }
.boton:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }
.pie { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; z-index: 1; opacity: var(--pie); }
.pie .marcapal { display: block; width: 150px; height: 27px; color: var(--marca); }
/* La firma lleva a soylasolucion.com, sin cambiar de aspecto. */
.firma-web { display: block; border-radius: 6px; }
.firma-web:focus-visible { outline: 2px solid var(--marca); outline-offset: 4px; }

/* La hoja de un botón. */
.velo-hoja { position: absolute; inset: 0; background: rgba(0,32,32,.55); z-index: 5; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
.velo-hoja.abierta { opacity: 1; pointer-events: auto; }
.hoja { position: relative; width: min(520px, 92vw); background: var(--petroleo); color: #fff; border-radius: 28px; padding: 28px 30px 30px;
  transform: scale(.94) rotate(.8deg); transition: transform .28s cubic-bezier(.2,.9,.3,1.2); box-shadow: 0 24px 60px rgba(0,32,32,.4); }
.velo-hoja.abierta .hoja { transform: scale(1) rotate(0); }
.hoja h3 { margin: 0 0 10px; color: var(--lima); font-size: 22px; }
.hoja p { margin: 0; line-height: 1.55; font-size: 15px; white-space: pre-line; }
.hoja .cerrar { position: absolute; top: 16px; right: 18px; background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; }

/* La imagen, entre 192 y 256 según el alto. */
@media (min-height: 1000px) { :root { --avatar: 256px; } }
@media (max-height: 760px) { :root { --avatar: 192px; } }

/* El teléfono. */
@media (max-width: 760px) {
  :root { --barra: 88px; --botones-pie: 84px; }
  .barra { padding: 0 24px; }
  .titulo { font-size: 20px; }
  .lado > .tema, .lado > .entrar { display: none; }
  /* Las tres líneas, hacia la derecha de su caja de 40 (a 6 del borde), como en el diseño. */
  .hamb { display: flex; justify-content: flex-end; padding-right: 6px; }
  .org { margin-top: 24px; font-size: 28px; }
  .marca-verificada { width: 28px; height: 28px; }
  /* De borde a borde: el de cada punta, recto contra el borde. */
  .botones { padding: 0; }
  .boton { width: auto; flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 16px; }
  .boton:first-child:not(:only-child) { border-radius: 0 32px 32px 0; }
  .boton:last-child:not(:only-child) { border-radius: 32px 0 0 32px; }
  .boton:only-child { flex: 0 0 calc((100% - 24px) / 3); }
}

/* La intro: el logo como máscara. */
#intro { position: fixed; inset: 0; background: var(--entrada); z-index: 20; display: grid; place-items: center; pointer-events: none; }
#intro svg { width: 120px; height: 80px; opacity: 0; color: var(--petroleo); }
.enmascarado { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }