/* Rakaty Labs: tema oscuro con brasa naranja. Cada app conserva su propia paleta dentro de su panel. */

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/unbounded-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/onest-latin.woff2') format('woff2');
}

:root {
  --noche: #0a0912;
  --superficie: #15121f;
  --superficie-alta: #1f1a2c;
  --brasa: #ff6f00;
  --ambar: #ffc21a;
  --texto: #f4eee6;
  --tenue: #a69db0;
  --linea: rgba(244, 238, 230, 0.12);

  --fuente-display: 'Unbounded', system-ui, sans-serif;
  --fuente-texto: 'Onest', system-ui, sans-serif;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.3125rem;
  --t-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --t-xxl: clamp(2.1rem, 1.4rem + 3.4vw, 4rem);

  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --e-6: clamp(4rem, 3rem + 5vw, 7.5rem);

  --ancho: 72rem;
  --radio-s: 0.5rem;
  --radio-m: 1rem;
  --radio-l: 1.75rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* Que la cabecera fija no tape el destino de los enlaces #apps, #neon-slash... */
[id] { scroll-margin-top: 5rem; }

a { color: var(--ambar); text-underline-offset: 0.2em; }
a:hover { color: var(--texto); }

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--fuente-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--e-2);
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
p { margin: 0 0 var(--e-2); }

.envoltorio {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e-2);
}

.salto {
  position: absolute;
  left: -999px;
  top: var(--e-1);
  background: var(--ambar);
  color: var(--noche);
  padding: var(--e-1) var(--e-2);
  z-index: 100;
}
.salto:focus { left: var(--e-1); }

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--fuente-texto);
  font-size: var(--t-m);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.boton--brasa {
  background: var(--brasa);
  color: #160600;
  box-shadow: 0 0 0 0 rgba(255, 111, 0, 0.5), 0 10px 30px -8px rgba(255, 111, 0, 0.65);
}
.boton--brasa:hover { background: var(--ambar); color: #160600; }
.boton--contorno {
  border-color: var(--linea);
  color: var(--texto);
  background: transparent;
}
.boton--contorno:hover { border-color: var(--texto); color: var(--texto); }

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 9, 18, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 4rem;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--texto);
  text-decoration: none;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--t-s);
  letter-spacing: 0.02em;
  margin-right: auto;
}
.marca img { width: 2.25rem; height: auto; }
.marca:hover { color: var(--texto); }

.menu {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu a {
  color: var(--tenue);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-s);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--texto); }

.idiomas {
  display: flex;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.idiomas a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
  filter: grayscale(0.7);
  opacity: 0.7;
}
.idiomas a:hover { filter: none; opacity: 1; }
.idiomas a[aria-current="true"] {
  filter: none;
  opacity: 1;
  border-color: var(--brasa);
}

@media (max-width: 40rem) {
  .menu { gap: var(--e-2); }
  .marca span { display: none; }
}

/* ---------- Portada ---------- */

.portada {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-5) var(--e-6);
}
.portada::after {
  /* Resplandor de brasa detrás del árbol */
  content: '';
  position: absolute;
  inset: 0 -15% 0 35%;
  background: radial-gradient(closest-side, rgba(255, 111, 0, 0.22), transparent);
  pointer-events: none;
}
.portada__rejilla {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--e-4);
  align-items: center;
}
@media (min-width: 56rem) {
  .portada__rejilla { grid-template-columns: 1.15fr 0.85fr; }
}
.portada h1 span { display: block; }
.portada__entrada {
  font-size: var(--t-l);
  color: var(--tenue);
  max-width: 34rem;
  margin-bottom: var(--e-4);
}
.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* El logo flota despacio y su resplandor respira al mismo compás: cuando sube, brilla más */
.portada__visual {
  position: relative;
  width: min(64vw, 28rem);
  margin-inline: auto;
}
.portada__visual::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 140, 0, 0.45), rgba(255, 111, 0, 0.12) 60%, transparent);
  filter: blur(24px);
  animation: respirar 6s ease-in-out infinite;
}
.portada__logo {
  position: relative;
  width: 100%;
  animation: flotar 6s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes respirar {
  0%, 100% { transform: scale(0.94); opacity: 0.65; }
  50% { transform: scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portada__logo, .portada__visual::before { animation: none; }
}

/* ---------- Secciones genéricas ---------- */

.seccion { padding-block: var(--e-5); }
.seccion__cabeza { max-width: 40rem; margin-bottom: var(--e-4); }
.seccion__cabeza p { color: var(--tenue); font-size: var(--t-l); }

/* ---------- Paneles de app ---------- */

.apps { display: grid; gap: var(--e-4); }

.panel {
  --p-fondo: var(--superficie);
  --p-texto: var(--texto);
  --p-tenue: var(--tenue);
  --p-acento: var(--brasa);
  --p-acento-texto: #160600;
  --p-linea: var(--linea);
  position: relative;
  display: grid;
  gap: var(--e-4);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--radio-l);
  background: var(--p-fondo);
  color: var(--p-texto);
  overflow: hidden;
}
@media (min-width: 56rem) {
  .panel { grid-template-columns: 1fr 1fr; align-items: center; }
  .panel--invertido .panel__visual { order: -1; }
}
.panel h2, .panel h3 { color: var(--p-texto); }
.panel p { color: var(--p-tenue); }
.panel a:not(.boton) { color: var(--p-acento); }

.panel__estado {
  display: inline-block;
  margin-bottom: var(--e-2);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--p-linea);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--p-texto);
}
.panel__estado::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--p-acento);
  vertical-align: 0.05em;
}
.panel__nombre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}
.panel__nombre img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.9rem;
}
.panel__nombre > * { margin: 0; font-size: var(--t-xl); }
.panel__titular {
  font-family: var(--fuente-display);
  font-size: var(--t-l);
  font-weight: 600;
  line-height: 1.3;
  color: var(--p-texto) !important;
}
.panel__lista {
  margin: 0 0 var(--e-3);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.panel__lista li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--p-texto);
}
.panel__lista li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.45em;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 3px solid var(--p-acento);
  border-bottom: 3px solid var(--p-acento);
  transform: rotate(-45deg);
}
.panel__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
}
.panel .boton--app {
  background: var(--p-acento);
  color: var(--p-acento-texto);
}
.panel .boton--app:hover { filter: brightness(1.08); color: var(--p-acento-texto); }
.panel__visual img {
  width: min(100%, 22rem);
  margin-inline: auto;
}
.panel__ficha {
  margin: var(--e-3) 0 0;
  font-weight: 600;
}
/* En móvil la imagen va arriba y pequeña: el formulario y el botón no deben quedar enterrados */
@media (max-width: 55.99rem) {
  .panel__visual { order: -1; }
  .panel__visual img { width: 8rem; margin-inline: 0; }
}

/* Tasks4Us: claro, azul y verde, como su propia marca */
.panel--tasks4us {
  --p-fondo: #f3f7fc;
  --p-texto: #0f1d33;
  --p-tenue: #45556e;
  --p-acento: #12a150;
  --p-acento-texto: #ffffff;
  --p-linea: #cfdbea;
}
.panel--tasks4us .boton--contorno { color: #0f1d33; border-color: #b6c6db; }
.panel--tasks4us .boton--contorno:hover { border-color: #0f1d33; }
.panel--tasks4us a:not(.boton) { color: #1366d6; }

/* Neon Slash: noche violeta con cian y magenta */
.panel--neon-slash {
  --p-fondo: #0d0520;
  --p-texto: #f6f0ff;
  --p-tenue: #b9a9d6;
  --p-acento: #ff2bd6;
  --p-acento-texto: #12001a;
  --p-linea: rgba(34, 211, 238, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 43, 214, 0.25);
}
.panel--neon-slash::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: 70%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(34, 211, 238, 0.18), transparent);
  pointer-events: none;
}
/* El logo viene sobre un cuadrado negro: la máscara radial lo funde con el panel */
.panel--neon-slash .panel__visual img {
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
  mask-image: radial-gradient(closest-side, #000 62%, transparent);
}
/* El icono viene sobre blanco: multiply deja ver el fondo claro del panel */
.panel--tasks4us .panel__visual img { mix-blend-mode: multiply; }
/* Solo el texto sube de capa: si la imagen creara su propio contexto, multiply no vería el fondo */
.panel__texto { position: relative; z-index: 1; }

/* ---------- Precios ---------- */

.precios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: var(--e-2);
}
@media (max-width: 30rem) {
  .precios { grid-template-columns: 1fr; }
}
.precio {
  padding: 0.85rem;
  border: 1px solid var(--p-linea);
  border-radius: var(--radio-m);
  background: rgba(255, 255, 255, 0.65);
}
.precio--destacado { border: 2px solid var(--p-acento); }
a.precio {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
a.precio:hover { border-color: var(--p-acento); transform: translateY(-2px); }
/* El botón va al pie para que los tres queden alineados aunque el detalle ocupe más líneas */
.precio__boton {
  margin-top: auto;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--p-acento);
  border-radius: 999px;
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--p-acento);
}
a.precio .precio__detalle { margin-bottom: 0.6rem; }
.precio--destacado .precio__boton {
  background: var(--p-acento);
  color: var(--p-acento-texto);
}
@media (prefers-reduced-motion: reduce) {
  a.precio { transition: none; }
  a.precio:hover { transform: none; }
}
.precio__plan { display: block; font-weight: 700; font-size: var(--t-s); color: var(--p-texto); }
.precio__importe {
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--t-m);
  font-weight: 700;
  white-space: nowrap;
  color: var(--p-texto);
}
.precio__detalle { display: block; font-size: var(--t-xs); color: var(--p-tenue); }
.precios__nota { font-size: var(--t-s); }

/* ---------- Formulario de aviso ---------- */

.aviso {
  margin-top: var(--e-2);
  padding: var(--e-3);
  border: 1px solid var(--p-linea);
  border-radius: var(--radio-m);
}
.aviso__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.aviso input[type="email"] {
  flex: 1 1 14rem;
  min-height: 3.25rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 2px solid var(--p-linea);
  background: transparent;
  color: var(--p-texto);
  font: inherit;
}
.aviso input[type="email"]::placeholder { color: var(--p-tenue); }
.aviso__consentimiento {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  color: var(--p-tenue);
}
.aviso__consentimiento input { margin-top: 0.25rem; accent-color: var(--p-acento); }
.aviso__respuesta {
  margin: var(--e-2) 0 0;
  font-weight: 600;
  color: var(--p-texto);
}
.aviso__respuesta--error { color: #ff7a7a; }
.panel--tasks4us .aviso__respuesta--error { color: #c62828; }
.trampa { position: absolute; left: -5000px; }

details.desplegable > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--p-texto);
  list-style: none;
}
details.desplegable > summary::-webkit-details-marker { display: none; }
details.desplegable > summary::after { content: ' +'; color: var(--p-acento); }
details.desplegable[open] > summary::after { content: ' \2212'; }

/* ---------- Promesa ---------- */

.promesa {
  display: grid;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 44rem) {
  .promesa { grid-template-columns: repeat(2, 1fr); }
}
.promesa li {
  padding: var(--e-3) 0 0;
  border-top: 2px solid var(--brasa);
}
.promesa h3 { font-size: var(--t-m); font-family: var(--fuente-display); }
.promesa p { color: var(--tenue); margin: 0; }

/* ---------- Preguntas ---------- */

.preguntas { max-width: 46rem; }
.preguntas details {
  border-bottom: 1px solid var(--linea);
  padding-block: var(--e-2);
}
.preguntas summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--t-m);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; color: var(--brasa); font-size: 1.4rem; line-height: 1; }
.preguntas details[open] summary::after { content: '\2212'; }
.preguntas details p { color: var(--tenue); margin: var(--e-1) 0 0; }

/* ---------- Cierre ---------- */

.cierre {
  text-align: center;
  padding-block: var(--e-6);
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 111, 0, 0.22), transparent);
}
.cierre p { color: var(--tenue); max-width: 34rem; margin-inline: auto; margin-bottom: var(--e-3); }
.cierre .portada__acciones { justify-content: center; }

/* ---------- Blog ---------- */

.entradas {
  display: grid;
  gap: var(--e-4) var(--e-3);
}
@media (min-width: 44rem) {
  .entradas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .entradas { grid-template-columns: repeat(3, 1fr); }
}
.entrada-tarjeta a { color: var(--texto); text-decoration: none; }
.entrada-tarjeta a:hover h3 { color: var(--ambar); }
.entrada-tarjeta img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio-m);
  margin-bottom: var(--e-2);
  background: var(--superficie);
}
.entrada-tarjeta time { font-size: var(--t-xs); color: var(--tenue); }
.entrada-tarjeta h3 { margin: 0.3rem 0 0.5rem; font-size: var(--t-m); line-height: 1.35; }
.entrada-tarjeta p { color: var(--tenue); font-size: var(--t-s); }

/* Recientes | 1 ... 4 5 6 ... 9 | Anteriores. En móvil, los números arriba y los saltos debajo */
.paginacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}
.paginacion__numeros {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.paginacion__numero {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
a.paginacion__numero:hover { border-color: var(--brasa); color: var(--texto); }
.paginacion__numero[aria-current] {
  background: var(--brasa);
  border-color: var(--brasa);
  color: #160600;
  font-weight: 700;
}
.paginacion__hueco {
  display: grid;
  place-items: end center;
  min-width: 1.5rem;
  height: 2.75rem;
  color: var(--tenue);
}
.paginacion__numeros { grid-row: 1; }
/* En móvil caben 1 ... 3 4 5 ... 99 en una línea a 360 px */
@media (max-width: 43.99rem) {
  .paginacion__numeros { gap: 0.375rem; }
  .paginacion__numero { min-width: 2.5rem; height: 2.5rem; }
  .paginacion__hueco { min-width: 1rem; height: 2.5rem; }
}
.paginacion__salto {
  grid-row: 2;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  font-size: var(--t-s);
  white-space: nowrap;
}
.paginacion__salto--recientes { grid-column: 1; justify-self: start; }
.paginacion__salto--anteriores { grid-column: 2; justify-self: end; }
@media (min-width: 44rem) {
  .paginacion { grid-template-columns: 1fr auto 1fr; }
  .paginacion__numeros { grid-column: 2; }
  .paginacion__salto { grid-row: 1; padding-inline: 1.2rem; }
  .paginacion__salto--anteriores { grid-column: 3; }
}

/* ---------- Texto largo (posts, legales) ---------- */

.lectura {
  max-width: 42rem;
  margin-inline: auto;
  padding-block: var(--e-5) var(--e-6);
}
.lectura__meta { color: var(--tenue); font-size: var(--t-s); margin-bottom: var(--e-3); }
.lectura__portada {
  width: 100%;
  border-radius: var(--radio-m);
  margin-bottom: var(--e-4);
}
.prosa h2 { font-size: var(--t-l); margin-top: var(--e-4); }
.prosa h3 { font-size: var(--t-m); margin-top: var(--e-3); }
.prosa p, .prosa li { color: #ddd5cc; }
.prosa ul, .prosa ol { padding-left: 1.3rem; margin: 0 0 var(--e-2); }
.prosa li { margin-bottom: 0.4rem; }
.prosa img { border-radius: var(--radio-m); margin-block: var(--e-3); }
.prosa blockquote {
  margin: var(--e-3) 0;
  padding-left: var(--e-2);
  border-left: 3px solid var(--brasa);
  color: var(--texto);
}
.prosa code {
  background: var(--superficie-alta);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.92em;
}
.prosa table { width: 100%; border-collapse: collapse; margin-bottom: var(--e-3); font-size: var(--t-s); }
.prosa th, .prosa td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--linea); }

/* ---------- Pie ---------- */

.pie {
  border-top: 1px solid var(--linea);
  padding-block: var(--e-4);
  font-size: var(--t-s);
  color: var(--tenue);
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  justify-content: space-between;
  align-items: flex-start;
}
.pie__respaldo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pie__respaldo img { width: 1.85rem; height: auto; }
.pie ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie a { color: var(--tenue); }
.pie a:hover { color: var(--texto); }