/* =====================================================================
   PÁGINAS PÚBLICAS: bienvenida (portada), entrar, crear cuenta,
   recuperar, apoyo, privacidad y sin conexión.
   Los colores vienen de tokens.css. Las animaciones son suaves y se
   apagan con "reducir movimiento" (ver base.css).

   ¿PARA QUÉ SIRVE ESTE ARCHIVO?
   Da el diseño de las páginas que se ven SIN iniciar sesión: la portada
   de bienvenida con Nubbit, las pantallas de acceso (formulario y un
   panel amable con Nubbit) y las páginas informativas (apoyo, privacidad
   y la página que aparece cuando no hay internet).

   ¿QUÉ PÁGINAS LO USAN?
   index.html (bienvenida), entrar.html, crear-cuenta.html,
   recuperar.html, apoyo.html, privacidad.html y offline.html.
   Se carga el ÚLTIMO, después de tokens.css, base.css y componentes.css:
   por eso aquí se pueden completar piezas de componentes.css (por
   ejemplo .recurso) solo para estas páginas.

   ÍNDICE DE SECCIONES
   1. Cabecera pública (enlace "Entrar") y contenedor centrado.
   2. Portada (index.html): héroe con Nubbit, "Qué puedes hacer",
      "Cómo funciona", "Tu privacidad primero", recordatorio y cierre.
   3. Entrar, crear cuenta y recuperar: tarjeta del formulario y panel
      con Nubbit.
   4. Páginas informativas: apoyo, privacidad y sin conexión.
   ===================================================================== */

/* Enlaces extra de la cabecera pública ("Entrar" junto a "Necesito apoyo") */
/* (solo en la cabecera de index.html). FLEX (caja flexible): acomoda a los hijos en una fila o columna. */
.cabecera__acciones {
  display: flex; /* "Entrar" y "Necesito apoyo" en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-3); /* var() lee una variable de tokens.css: 16 px entre ellos */
} /* fin de la regla .cabecera__acciones */

/* El enlace "Entrar" de la cabecera de la bienvenida */
.enlace-cabecera {
  display: inline-flex; /* permite darle alto y centrar el texto */
  align-items: center; /* texto centrado en vertical */
  min-height: 44px; /* área cómoda para tocar con el dedo */
  padding: 0 var(--espacio-2); /* 8 px a los lados */
  font-weight: 700; /* negrita */
  text-decoration: none; /* sin subrayado (aparece al pasar el mouse) */
} /* fin de la regla .enlace-cabecera */

/* "Entrar" con el mouse encima. :hover es una PSEUDO-CLASE: un estado del elemento (el puntero está encima) */
.enlace-cabecera:hover {
  text-decoration: underline; /* se subraya: se nota que es un enlace */
} /* fin de la regla .enlace-cabecera:hover */

/* MEDIA QUERY (@media): lo de adentro solo se aplica si se cumple la condición. max-width: 480px = pantallas
   de 480 px de ancho o menos (celulares). Así cada pantalla recibe su diseño: es el DISEÑO ADAPTABLE. */
@media (max-width: 480px) {
  /* En el celular se oculta el "Entrar" de la cabecera para que quepa "Necesito apoyo" */
  .enlace-cabecera {
    display: none; /* en el celular, "Entrar" ya está en la portada */
  } /* fin de la regla .enlace-cabecera (celular) */
} /* fin del @media (max-width: 480px): celulares */

/* Contenedor centrado para las franjas de ancho completo */
/* (en index.html cada franja de color va de borde a borde; el .contenedor de adentro centra el contenido) */
.contenedor {
  width: 100%; /* todo el ancho disponible... */
  max-width: var(--ancho-amplio); /* ...hasta 70rem */
  margin: 0 auto; /* centrado */
  padding-inline: var(--espacio-3); /* 16 px de relleno a la izquierda y a la derecha (inline = los lados) */
} /* fin de la regla .contenedor */

/* ---------------------------------------------------------------------
   Portada (index.html)
   --------------------------------------------------------------------- */
/* El <main class="portada"> de la bienvenida: sin límite de ancho, porque las franjas van de borde a borde */
main.portada {
  max-width: none; /* quita el ancho máximo que base.css le da a <main> */
  padding: 0; /* sin relleno: cada franja pone el suyo */
} /* fin de la regla main.portada */

/* Mensaje de estado de la bienvenida ("Tu cuenta y todos sus datos fueron eliminados...").
   :not(:empty) = solo cuando NO está vacío (:empty = "sin contenido"; :not() niega la condición). */
.portada__mensaje:not(:empty) {
  max-width: var(--ancho-amplio); /* mismo ancho que el contenido */
  margin: var(--espacio-3) auto 0; /* 16 px arriba, centrado a los lados y nada abajo */
} /* fin de la regla .portada__mensaje:not(:empty) */

/* Franja principal ("héroe") de la bienvenida: título "Siente, nombra y crece.", botones y Nubbit */
.portada__heroe {
  position: relative; /* posición RELATIVA: sirve de referencia a los hijos con position: absolute */
  overflow: hidden; /* lo que se salga (las manchas de color) no se ve */
  padding: var(--espacio-5) 0 var(--espacio-6); /* 40 px arriba y 64 px abajo */
  /* "Aurora" de fondo: manchas suaves de color, sin imágenes */
  /* Tres degradados RADIALES (manchas ovaladas) superpuestos: lila arriba a la derecha, rosa abajo a la
     izquierda y celeste abajo al centro. "40rem 26rem at 85% 20%" = tamaño de la mancha y dónde está su
     centro; cada una se vuelve transparente al llegar al 70 %. */
  background:
    /* mancha 1: lila, 40rem x 26rem, centrada arriba a la derecha (85% 20%) */
    radial-gradient(40rem 26rem at 85% 20%, var(--color-primario-suave), transparent 70%),
    /* mancha 2: rosa, 30rem x 22rem, centrada abajo a la izquierda (10% 90%) */
    radial-gradient(30rem 22rem at 10% 90%, var(--color-rosa-suave), transparent 70%),
    /* mancha 3: celeste, 26rem x 20rem, abajo al centro (55% 105%: asoma desde el borde) */
    radial-gradient(26rem 20rem at 55% 105%, var(--color-cielo-suave), transparent 70%);
} /* fin de la regla .portada__heroe */

/* Cuadrícula del héroe: en el celular, una sola columna (Nubbit arriba y el texto abajo).
   GRID (cuadrícula): ordena a los hijos en filas y columnas. */
.portada__heroe-grilla {
  display: grid; /* cuadrícula */
  gap: var(--espacio-4); /* 24 px entre el texto y la ilustración */
  align-items: center; /* centrados en vertical */
} /* fin de la regla .portada__heroe-grilla */

/* Desde 880 px de ancho (computadores y tabletas grandes) */
@media (min-width: 880px) {
  /* Más aire arriba y abajo del héroe */
  .portada__heroe {
    padding: var(--espacio-6) 0; /* 64 px arriba y abajo */
  } /* fin de la regla .portada__heroe (pantallas grandes) */

  /* Dos columnas: el texto a la izquierda (un poco más ancho) y Nubbit a la derecha */
  .portada__heroe-grilla {
    grid-template-columns: 1.1fr 0.9fr; /* fr = fracción del espacio libre: 1,1 partes y 0,9 partes */
    gap: var(--espacio-5); /* 40 px entre columnas */
  } /* fin de la regla .portada__heroe-grilla (dos columnas) */
} /* fin del @media (min-width: 880px): héroe en dos columnas */

/* Título grande de la portada: "Siente, nombra y crece." */
.portada__texto h1 {
  margin-bottom: var(--espacio-3); /* 16 px debajo */
  font-size: var(--texto-portada); /* de 37 a 49 px según la pantalla */
  line-height: 1.05; /* líneas muy juntas: un título grande se ve compacto */
  letter-spacing: -0.03em; /* letras más juntas */
} /* fin de la regla .portada__texto h1 */

/* Las tres palabras del eslogan: cada una con un color de la marca */
/* :nth-child(n) elige un hijo por su posición: el 1.er <span> es "Siente," y el 3.º "y crece."
   El 2.º ("nombra") conserva el color del texto. */
.portada__texto h1 span:nth-child(1) { color: var(--color-primario); } /* "Siente," en violeta */
.portada__texto h1 span:nth-child(3) { color: var(--color-acento); } /* "y crece." en coral */

/* Texto de presentación bajo el título ("Noosfera es tu espacio para reconocer...") */
.portada__bajada {
  max-width: 34rem; /* líneas no muy largas */
  margin-bottom: var(--espacio-4); /* 24 px debajo */
  color: var(--color-texto-suave); /* gris violeta */
  font-size: 1.1875rem; /* 19 px: un poco más grande que el texto normal */
  line-height: 1.55; /* interlineado cómodo */
} /* fin de la regla .portada__bajada */

/* Botones "Crear mi cuenta" y "Ya tengo cuenta" del héroe */
.portada__texto .acciones {
  margin-top: 0; /* sin el margen de arriba que trae .acciones */
} /* fin de la regla .portada__texto .acciones */

/* Nota "Versión de prueba: úsala con un apodo inventado..." con un ícono de información */
.portada__nota {
  display: flex; /* ícono y texto en fila */
  align-items: flex-start; /* alineados arriba (el texto puede ocupar dos líneas) */
  gap: var(--espacio-2); /* 8 px entre ellos */
  max-width: 34rem; /* mismo ancho que la bajada */
  margin: var(--espacio-4) 0 0; /* 24 px arriba */
  color: var(--color-texto-suave); /* gris violeta */
  font-size: var(--texto-pequeno); /* 14 px */
} /* fin de la regla .portada__nota */

/* El ícono de información de esa nota */
.portada__nota .icono {
  width: 1.3rem; /* ancho */
  height: 1.3rem; /* alto */
  margin-top: 1px; /* baja 1 px para alinearse con la primera línea */
  color: var(--color-primario); /* violeta */
} /* fin de la regla .portada__nota .icono */

/* Ilustración: Nubbit sobre un halo, con su saludo y una vista previa del registro */
/* (bloque decorativo de index.html; bienvenida.js dibuja a Nubbit y las caritas) */
.portada__ilustracion {
  position: relative; /* referencia para ubicar el halo, el saludo y las caritas (position: absolute) */
  display: grid; /* cuadrícula para centrar a Nubbit */
  place-items: center; /* Nubbit al centro, a lo alto y a lo ancho */
  min-height: 20rem; /* alto mínimo (320 px) */
  order: -1; /* en el celular va arriba del texto (order: -1 la pone antes que sus hermanos) */
} /* fin de la regla .portada__ilustracion */

/* Desde 880 px: ilustración más alta y en su orden normal (a la derecha del texto) */
@media (min-width: 880px) {
  /* La ilustración */
  .portada__ilustracion {
    min-height: 28rem; /* más alta (448 px) */
    order: 0; /* orden normal: después del texto */
  } /* fin de la regla .portada__ilustracion (pantallas grandes) */
} /* fin del @media (min-width: 880px): ilustración más alta */

/* Halo: un disco blanco con un anillo lila, detrás de Nubbit */
.portada__halo {
  position: absolute; /* ABSOLUTA: se ubica dentro de .portada__ilustracion sin ocupar lugar */
  width: min(26rem, 80vw); /* min() elige el menor: 26rem o el 80 % del ancho de la ventana */
  aspect-ratio: 1; /* alto igual al ancho (con el radio de abajo, un círculo) */
  border-radius: 50%; /* forma de círculo */
  /* degradado radial en anillos: blanco hasta el 45 %, lila del 46 % al 62 % y transparente desde el 63 % */
  background: radial-gradient(circle, var(--color-superficie) 0 45%, var(--color-primario-suave) 46% 62%, transparent 63%);
} /* fin de la regla .portada__halo */

/* Lugar donde bienvenida.js dibuja a Nubbit en la portada; flota suavemente */
.portada__nubbit {
  position: relative; /* posicionado: así se dibuja encima del halo */
  width: min(15rem, 56vw); /* 15rem o el 56 % del ancho de la ventana, lo que sea menor */
  animation: flotar 4.5s ease-in-out infinite; /* ANIMACIÓN "flotar" (abajo): 4,5 s, suave y sin fin */
} /* fin de la regla .portada__nubbit */

/* Desde 880 px: Nubbit más grande */
@media (min-width: 880px) {
  /* Nubbit de la portada */
  .portada__nubbit {
    width: 17rem; /* 272 px de ancho */
  } /* fin de la regla .portada__nubbit (pantallas grandes) */
} /* fin del @media (min-width: 880px): Nubbit más grande */

/* @keyframes define una ANIMACIÓN con nombre ("flotar"): cómo se ve el elemento en ciertos momentos
   (0 % = inicio, 100 % = final) y el navegador rellena los pasos intermedios. Aquí sube 10 px y baja.
   La usan .portada__nubbit y .acceso__nubbit; con "reducir movimiento", base.css la apaga. */
@keyframes flotar {
  /* al inicio y al final: en su lugar */
  0%,
  100% { /* y el final (100 %): el mismo paso que el 0 % */
    transform: translateY(0); /* sin desplazamiento */
  } /* fin del paso 0% y 100% de la animación flotar */
  /* a la mitad del tiempo: arriba */
  50% {
    transform: translateY(-10px); /* sube 10 px */
  } /* fin del paso 50% de la animación flotar */
} /* fin de la animación @keyframes flotar */

/* Globo de saludo "¡Hola! Soy Nubbit." arriba a la derecha de la ilustración */
.portada__saludo {
  position: absolute; /* se ubica respecto a .portada__ilustracion */
  top: 6%; /* 6 % desde arriba */
  right: 4%; /* 4 % desde la derecha */
  max-width: 11rem; /* ancho máximo */
  margin: 0; /* sin márgenes */
  padding: var(--espacio-2) var(--espacio-3); /* 8 px arriba y abajo, 16 px a los lados */
  /* cuatro valores = esquinas arriba-izq., arriba-der., abajo-der. y abajo-izq.; la última casi recta:
     parece un globo de diálogo que sale de Nubbit */
  border-radius: var(--radio) var(--radio) var(--radio) 4px;
  background: var(--color-superficie); /* fondo blanco */
  box-shadow: var(--sombra-elevada); /* sombra marcada: flota */
  font-weight: 800; /* extra negrita */
  line-height: 1.3; /* interlineado */
} /* fin de la regla .portada__saludo */

/* Tarjetita "¿Cómo te sientes hoy?" con las cinco caritas (decorativa) */
/* (abajo a la izquierda de la ilustración: una vista previa del registro, no se puede tocar) */
.portada__caritas {
  position: absolute; /* se ubica respecto a la ilustración */
  bottom: 4%; /* 4 % desde abajo */
  left: 2%; /* 2 % desde la izquierda */
  display: grid; /* cuadrícula de una columna: pregunta arriba y caritas abajo */
  gap: var(--espacio-1); /* 4 px entre ellas */
  padding: var(--espacio-2) var(--espacio-3); /* 8 px arriba y abajo, 16 px a los lados */
  border-radius: var(--radio); /* esquinas redondeadas */
  background: var(--color-superficie); /* fondo blanco */
  box-shadow: var(--sombra-elevada); /* sombra: flota */
  font-size: var(--texto-pequeno); /* letra pequeña */
  font-weight: 700; /* negrita */
} /* fin de la regla .portada__caritas */

/* Fila de las cinco caritas */
.portada__caritas div {
  display: flex; /* en fila */
  gap: 4px; /* 4 px entre caritas */
} /* fin de la regla .portada__caritas div */

/* Cada carita (dibujo SVG) */
.portada__caritas svg {
  width: 28px; /* ancho */
  height: 28px; /* alto */
} /* fin de la regla .portada__caritas svg */

/* Celulares muy angostos (420 px o menos): saludo y caritas pegados al borde y más pequeños */
@media (max-width: 420px) {
  /* Globo de saludo */
  .portada__saludo {
    right: 0; /* pegado al borde derecho */
    font-size: var(--texto-pequeno); /* letra pequeña */
  } /* fin de la regla .portada__saludo (celular angosto) */

  /* Tarjetita de caritas */
  .portada__caritas {
    left: 0; /* pegada al borde izquierdo */
  } /* fin de la regla .portada__caritas (celular angosto) */

  /* Caritas más pequeñas */
  .portada__caritas svg {
    width: 22px; /* ancho */
    height: 22px; /* alto */
  } /* fin de la regla .portada__caritas svg (celular angosto) */
} /* fin del @media (max-width: 420px): celulares muy angostos */

/* Franjas de contenido de la portada */
/* ("Qué puedes hacer", "Cómo funciona", "Tu privacidad primero" y "Noosfera acompaña, no reemplaza") */
.portada__seccion {
  padding: var(--espacio-6) 0; /* 64 px arriba y abajo */
} /* fin de la regla .portada__seccion */

/* Franjas alternas ("Cómo funciona" y "Noosfera acompaña") con fondo lila pálido */
.portada__seccion--alterna {
  background: var(--color-fondo-alterno); /* lila muy pálido */
} /* fin de la regla .portada__seccion--alterna */

/* Título de cada franja ("Qué puedes hacer en Noosfera", "Cómo funciona", "¿Empezamos?"...) */
.titulo-seccion {
  max-width: 36rem; /* ancho máximo */
  margin: 0 0 var(--espacio-2); /* 8 px debajo */
  font-size: var(--texto-seccion); /* 25 px */
  font-weight: 800; /* extra negrita */
  letter-spacing: -0.02em; /* letras más juntas */
} /* fin de la regla .titulo-seccion */

/* Texto bajo el título de cada franja ("Tres pasos sencillos, a tu ritmo."...) */
.bajada-seccion {
  max-width: 36rem; /* ancho máximo */
  margin-bottom: var(--espacio-5); /* 40 px debajo, antes del contenido */
  color: var(--color-texto-suave); /* gris violeta */
  font-size: 1.0625rem; /* 17 px */
} /* fin de la regla .bajada-seccion */

/* Tarjetas de "Qué puedes hacer": cuatro en fila en pantallas grandes, dos en tabletas */
/* (<ul class="grilla funciones">: la cuadrícula la pone .grilla, de componentes.css) */
.funciones {
  /* tantas columnas como quepan, de mínimo 14rem (o el 100 % si la pantalla es más angosta).
     auto-fit estira las columnas para llenar la fila; min() elige el menor de sus dos valores */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 0; /* sin márgenes de lista */
  padding: 0; /* sin sangría */
  list-style: none; /* sin viñetas */
} /* fin de la regla .funciones */

/* Cada tarjeta de función ("Cuenta cómo te sientes", "Nubbit te acompaña"...) */
.funcion {
  display: grid; /* una columna: insignia, título y texto */
  align-content: start; /* todo arriba (las tarjetas de una fila miden lo mismo) */
  gap: var(--espacio-2); /* 8 px entre ellos */
  /* TRANSICIÓN: el levantarse y la sombra del :hover ocurren en 0,25 s y no de golpe */
  transition: transform var(--transicion), box-shadow var(--transicion);
} /* fin de la regla .funcion */

/* Tarjeta de función con el mouse encima */
.funcion:hover {
  transform: translateY(-3px); /* sube 3 px */
  box-shadow: var(--sombra-elevada); /* sombra más grande */
} /* fin de la regla .funcion:hover */

/* Título de cada función */
.funcion h3 {
  margin: var(--espacio-2) 0 0; /* 8 px arriba */
  font-size: var(--texto-grande); /* 20 px */
} /* fin de la regla .funcion h3 */

/* Texto de cada función */
.funcion p {
  margin: 0; /* sin márgenes */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .funcion p */

/* "Cómo funciona": tres pasos numerados */
/* (<ol class="pasos">: Siente, Nombra y Crece). Los números los pone el CSS con un CONTADOR: counter-reset
   lo crea en 0 y cada <li> le suma 1 (counter-increment). */
.pasos {
  display: grid; /* una columna en el celular */
  gap: var(--espacio-4); /* 24 px entre pasos */
  margin: 0; /* sin márgenes */
  padding: 0; /* sin sangría */
  list-style: none; /* sin los números normales de la lista (se dibujan con CSS) */
  counter-reset: paso; /* crea el contador "paso" y lo pone en 0 */
} /* fin de la regla .pasos */

/* Desde 760 px: los tres pasos lado a lado */
@media (min-width: 760px) {
  /* La lista de pasos */
  .pasos {
    grid-template-columns: repeat(3, 1fr); /* tres columnas iguales */
  } /* fin de la regla .pasos (tres columnas) */
} /* fin del @media (min-width: 760px): pasos lado a lado */

/* Cada paso: una tarjeta blanca */
.pasos li {
  position: relative; /* referencia para lo que se posicione adentro */
  padding: var(--espacio-4); /* 24 px de relleno */
  border-radius: var(--radio-grande); /* esquinas redondeadas */
  background: var(--color-superficie); /* fondo blanco */
  box-shadow: var(--sombra); /* sombra suave */
  counter-increment: paso; /* suma 1 al contador: 1, 2 y 3 */
} /* fin de la regla .pasos li */

/* El número de cada paso, en un círculo violeta.
   ::before es un PSEUDO-ELEMENTO: una cajita que el CSS crea ANTES del contenido del <li>, sin estar en el HTML. */
.pasos li::before {
  content: counter(paso); /* su texto es el valor del contador: 1, 2 o 3 */
  display: grid; /* cuadrícula para centrar el número */
  place-items: center; /* número al centro */
  width: 2.75rem; /* 44 px */
  height: 2.75rem; /* alto igual: círculo */
  margin-bottom: var(--espacio-3); /* 16 px debajo, antes del título */
  border-radius: 50%; /* forma de círculo */
  background: var(--color-primario); /* violeta */
  color: var(--color-sobre-primario); /* número blanco */
  font-family: var(--fuente-titulos); /* letra redondeada */
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 800; /* extra negrita */
} /* fin de la regla .pasos li::before */

/* Título de cada paso */
.pasos h3 {
  margin-bottom: var(--espacio-1); /* 4 px debajo */
  font-size: var(--texto-grande); /* 20 px */
} /* fin de la regla .pasos h3 */

/* Texto de cada paso */
.pasos p {
  margin: 0; /* sin márgenes */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .pasos p */

/* "Tu privacidad primero": texto a un lado y lista con íconos al otro */
.portada__privacidad {
  display: grid; /* una columna en el celular */
  gap: var(--espacio-4); /* 24 px entre las dos partes */
  align-items: start; /* alineadas arriba */
} /* fin de la regla .portada__privacidad */

/* Desde 880 px: dos columnas */
@media (min-width: 880px) {
  /* Texto a la izquierda (0,9 partes) y lista a la derecha (1,1 partes) */
  .portada__privacidad {
    grid-template-columns: 0.9fr 1.1fr; /* dos columnas */
    gap: var(--espacio-6); /* 64 px entre ellas */
  } /* fin de la regla .portada__privacidad (dos columnas) */
} /* fin del @media (min-width: 880px): privacidad en dos columnas */

/* Lista de puntos con insignia ("Solo un apodo inventado", "Sin publicidad"...), en index.html y offline.html */
.lista-iconos {
  display: grid; /* una columna */
  gap: var(--espacio-3); /* 16 px entre puntos */
  margin: 0; /* sin márgenes */
  padding: 0; /* sin sangría */
  list-style: none; /* sin viñetas */
} /* fin de la regla .lista-iconos */

/* Cada punto: una tarjetita con la insignia a la izquierda y el texto a la derecha */
.lista-iconos li {
  display: flex; /* en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-3); /* 16 px entre insignia y texto */
  padding: var(--espacio-3); /* 16 px de relleno */
  border-radius: var(--radio-grande); /* esquinas redondeadas */
  background: var(--color-superficie); /* fondo blanco */
  box-shadow: var(--sombra); /* sombra suave */
} /* fin de la regla .lista-iconos li */

/* Texto de cada punto */
.lista-iconos p {
  margin: 0; /* sin márgenes */
} /* fin de la regla .lista-iconos p */

/* Recordatorio: Noosfera acompaña, no reemplaza */
/* (tarjeta con un corazón, el texto y el botón "Ver opciones de apoyo") */
.portada__apoyo {
  display: grid; /* una columna en el celular */
  gap: var(--espacio-3); /* 16 px entre partes */
  align-items: center; /* centradas en vertical */
  margin: 0; /* sin el margen de abajo de .tarjeta */
  padding: var(--espacio-4) var(--espacio-4); /* 24 px de relleno */
  border: 2px solid var(--color-borde); /* borde más grueso que el de una tarjeta normal */
} /* fin de la regla .portada__apoyo */

/* Desde 760 px: insignia, texto y botón en una fila */
@media (min-width: 760px) {
  /* Tres columnas: la del medio (el texto) toma el espacio que sobra */
  .portada__apoyo {
    grid-template-columns: auto 1fr auto; /* auto = lo que mide su contenido; 1fr = el resto */
    gap: var(--espacio-4); /* 24 px entre columnas */
  } /* fin de la regla .portada__apoyo (en una fila) */
} /* fin del @media (min-width: 760px): recordatorio en una fila */

/* Título "Noosfera acompaña, no reemplaza" */
.portada__apoyo h2 {
  margin: 0 0 var(--espacio-1); /* 4 px debajo */
} /* fin de la regla .portada__apoyo h2 */

/* Texto del recordatorio */
.portada__apoyo p {
  margin: 0; /* sin márgenes */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .portada__apoyo p */

/* Cierre con la invitación a empezar */
/* ("¿Empezamos?" con los botones "Crear mi cuenta" y "Ya tengo cuenta") */
.portada__cierre {
  padding: var(--espacio-6) 0; /* 64 px arriba y abajo */
  text-align: center; /* todo centrado */
} /* fin de la regla .portada__cierre */

/* Título y bajada del cierre */
.portada__cierre .titulo-seccion,
.portada__cierre .bajada-seccion { /* y la bajada del cierre (misma regla) */
  margin-inline: auto; /* márgenes automáticos a los lados: centra el bloque (tiene ancho máximo) */
} /* fin de la regla .portada__cierre .titulo-seccion, .portada__cierre .bajada-seccion */

/* Botones del cierre */
.portada__cierre .acciones {
  justify-content: center; /* la fila de botones al centro */
} /* fin de la regla .portada__cierre .acciones */

/* ---------------------------------------------------------------------
   Entrar, crear cuenta y recuperar: formulario y un lado amable con Nubbit
   --------------------------------------------------------------------- */
/* <main class="acceso"> de entrar.html, crear-cuenta.html y recuperar.html: la tarjeta del formulario y
   el panel con Nubbit. En el celular van en una sola columna. */
main.acceso {
  display: grid; /* cuadrícula */
  gap: var(--espacio-4); /* 24 px entre la tarjeta y el panel */
  align-items: center; /* centrados en vertical */
  max-width: 64rem; /* más ancho que el <main> normal, para que quepan dos columnas */
} /* fin de la regla main.acceso */

/* Desde 880 px: dos columnas (el panel con Nubbit a la izquierda y el formulario a la derecha) */
@media (min-width: 880px) {
  /* El <main> de las páginas de acceso */
  main.acceso {
    grid-template-columns: 1fr 1.1fr; /* dos columnas: 1 parte y 1,1 partes */
    gap: var(--espacio-6); /* 64 px entre ellas */
    padding-top: var(--espacio-6); /* 64 px arriba */
  } /* fin de la regla main.acceso (dos columnas) */
} /* fin del @media (min-width: 880px): acceso en dos columnas */

/* Tarjeta del formulario (entrar, crear cuenta y recuperar) */
.acceso__tarjeta {
  margin: 0; /* sin el margen de abajo de .tarjeta */
  padding: var(--espacio-4); /* 24 px de relleno */
} /* fin de la regla .acceso__tarjeta */

/* Desde 600 px: más relleno */
@media (min-width: 600px) {
  /* La tarjeta del formulario */
  .acceso__tarjeta {
    padding: var(--espacio-5); /* 40 px de relleno */
  } /* fin de la regla .acceso__tarjeta (más relleno) */
} /* fin del @media (min-width: 600px): tarjeta con más relleno */

/* Título de la tarjeta ("Entrar", "Crear mi cuenta", "Recuperar mi cuenta") */
.acceso__tarjeta h1 {
  margin-bottom: var(--espacio-2); /* 8 px debajo, cerca de la introducción */
} /* fin de la regla .acceso__tarjeta h1 */

/* Introducción bajo el título ("Escribe tu apodo y tu contraseña.") */
.acceso__tarjeta .introduccion {
  margin-bottom: var(--espacio-4); /* 24 px antes del formulario */
} /* fin de la regla .acceso__tarjeta .introduccion */

/* Enlaces al pie de la tarjeta ("¿Olvidaste tu contraseña?", "Crear cuenta", "Entrar") */
.acceso__enlaces {
  display: grid; /* uno debajo del otro */
  gap: var(--espacio-2); /* 8 px entre ellos */
  margin-top: var(--espacio-4); /* 24 px arriba */
  padding-top: var(--espacio-4); /* 24 px de relleno arriba... */
  border-top: 1px solid var(--color-borde); /* ...con una línea que los separa del formulario */
} /* fin de la regla .acceso__enlaces */

/* Párrafos de esos enlaces */
.acceso__enlaces p {
  margin: 0; /* sin márgenes: el gap da el espacio */
} /* fin de la regla .acceso__enlaces p */

/* Los enlaces en sí */
.acceso__enlaces a {
  font-weight: 700; /* negrita */
} /* fin de la regla .acceso__enlaces a */

/* Nota "Si usas un celular o computador compartido..." al final de entrar.html */
.acceso__nota {
  margin: var(--espacio-3) 0 0; /* 16 px arriba */
} /* fin de la regla .acceso__nota */

/* Insignia arriba del título en el paso del código de recuperación */
/* (la llave de "Guarda tu código de recuperación" en crear-cuenta.html y recuperar.html.
   El signo > significa HIJO DIRECTO: una .insignia que está justo dentro de una <section>) */
.acceso__tarjeta section > .insignia {
  margin-bottom: var(--espacio-3); /* 16 px debajo, antes del título */
} /* fin de la regla .acceso__tarjeta section > .insignia */

/* El lado con Nubbit: en el celular es un saludo corto arriba del formulario */
/* (<aside class="acceso__lado"> con Nubbit, un título como "Qué bueno verte" y una frase) */
.acceso__lado {
  display: flex; /* Nubbit y el texto en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-3); /* 16 px entre ellos */
  order: -1; /* order cambia el orden visual: -1 lo pone ANTES de la tarjeta (arriba o a la izquierda) */
} /* fin de la regla .acceso__lado */

/* Lugar donde el script de la página dibuja a Nubbit */
.acceso__nubbit {
  width: 6rem; /* 96 px en el celular */
  flex-shrink: 0; /* no se encoge aunque el texto sea largo */
} /* fin de la regla .acceso__nubbit */

/* Título del panel ("Qué bueno verte", "Vuelve a tu cuenta"...) */
.acceso__lado h2 {
  margin: 0 0 var(--espacio-1); /* 4 px debajo */
  font-size: var(--texto-grande); /* 20 px */
} /* fin de la regla .acceso__lado h2 */

/* Frase del panel ("Nubbit te estaba esperando.") */
.acceso__lado p {
  margin: 0; /* sin márgenes */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .acceso__lado p */

/* Lista de puntos del panel ("Cuenta cómo te sientes hoy"...): en el celular se oculta para ahorrar espacio */
.acceso__puntos {
  display: none; /* no se muestra */
} /* fin de la regla .acceso__puntos */

/* Desde 880 px: el panel se vuelve una tarjeta grande con Nubbit flotando */
@media (min-width: 880px) {
  /* El panel con Nubbit */
  .acceso__lado {
    display: grid; /* ahora en columna (cuadrícula de una columna) */
    justify-items: center; /* todo centrado a lo ancho */
    gap: var(--espacio-3); /* 16 px entre partes */
    padding: var(--espacio-5) var(--espacio-4); /* 40 px arriba y abajo, 24 px a los lados */
    border-radius: var(--radio-xl); /* esquinas muy redondeadas (32 px) */
    /* dos fondos: un brillo blanco detrás de Nubbit (degradado radial) encima de un degradado lineal en
       diagonal (160deg = 160 grados) que va de lila a rosa */
    background:
      /* capa de encima: brillo blanco de 18rem x 14rem detrás de Nubbit (50% 30%) */
      radial-gradient(18rem 14rem at 50% 30%, var(--color-superficie), transparent 75%),
      /* capa de abajo: degradado en diagonal (160deg) de lila a rosa */
      linear-gradient(160deg, var(--color-primario-suave), var(--color-rosa-suave));
    text-align: center; /* texto centrado */
  } /* fin de la regla .acceso__lado (tarjeta grande) */

  /* Nubbit más grande y flotando (la animación "flotar" está definida en la sección de la portada) */
  .acceso__nubbit {
    width: 13rem; /* 208 px */
    animation: flotar 4.5s ease-in-out infinite; /* sube y baja sin parar, con suavidad */
  } /* fin de la regla .acceso__nubbit (más grande y flotando) */

  /* Título del panel, más grande */
  .acceso__lado h2 {
    font-size: var(--texto-seccion); /* 25 px */
  } /* fin de la regla .acceso__lado h2 (más grande) */

  /* La lista de puntos ahora sí se muestra */
  .acceso__puntos {
    display: grid; /* visible, en columna */
    gap: var(--espacio-2); /* 8 px entre puntos */
    margin: var(--espacio-2) 0 0; /* 8 px arriba */
    padding: 0; /* sin sangría */
    list-style: none; /* sin viñetas */
    text-align: left; /* texto alineado a la izquierda */
  } /* fin de la regla .acceso__puntos (ahora visible) */

  /* Cada punto: ícono y texto en fila */
  .acceso__puntos li {
    display: flex; /* en fila */
    align-items: center; /* centrados en vertical */
    gap: var(--espacio-2); /* 8 px entre ícono y texto */
    font-weight: 600; /* seminegrita */
  } /* fin de la regla .acceso__puntos li */

  /* Íconos de la lista */
  .acceso__puntos .icono {
    color: var(--color-primario); /* violeta */
  } /* fin de la regla .acceso__puntos .icono */
} /* fin del @media (min-width: 880px): panel grande con Nubbit */

/* ---------------------------------------------------------------------
   Páginas informativas: apoyo, privacidad y sin conexión
   --------------------------------------------------------------------- */
/* Encabezado con una insignia grande a la izquierda del título (apoyo.html y privacidad.html) */
.encabezado-con-icono {
  display: flex; /* insignia y textos en fila */
  align-items: flex-start; /* alineados arriba */
  gap: var(--espacio-3); /* 16 px entre ellos */
  margin-bottom: var(--espacio-4); /* 24 px debajo */
} /* fin de la regla .encabezado-con-icono */

/* Título de esas páginas ("Buscar apoyo", "Cómo cuidamos tus datos") */
.encabezado-con-icono h1 {
  margin-bottom: var(--espacio-2); /* 8 px debajo */
} /* fin de la regla .encabezado-con-icono h1 */

/* Introducción de esas páginas */
.encabezado-con-icono .introduccion {
  margin: 0; /* sin márgenes */
} /* fin de la regla .encabezado-con-icono .introduccion */

/* (La insignia grande, .insignia--grande, está en componentes.css: también la usa actividades.html.) */

/* "Si estás en peligro": se distingue de todo lo demás */
/* (primera tarjeta de apoyo.html, con el botón "Llamar al 123") */
.tarjeta--urgente {
  border: 2px solid var(--color-error); /* borde rojo */
  background: var(--color-error-fondo); /* fondo rosado claro */
} /* fin de la regla .tarjeta--urgente */

/* Insignia de alerta de esa tarjeta */
.insignia--urgente {
  background: var(--color-error); /* fondo rojo */
  color: var(--color-sobre-error); /* ícono blanco */
} /* fin de la regla .insignia--urgente */

/* Botón "Llamar al 123": rojo relleno, para la emergencia (el otro botón rojo, .boton--peligro de
   componentes.css, es para acciones que no se pueden deshacer, como eliminar la cuenta) */
.boton--urgente {
  background: var(--color-error); /* rojo */
  color: var(--color-sobre-error); /* texto blanco */
  box-shadow: 0 6px 16px rgb(180 35 24 / 0.25); /* sombra rojiza debajo */
} /* fin de la regla .boton--urgente */

/* "Llamar al 123" con el mouse encima */
.boton--urgente:hover {
  color: var(--color-sobre-error); /* el texto sigue blanco */
  filter: brightness(0.95); /* filtro de brillo: oscurece el botón un 5 % */
} /* fin de la regla .boton--urgente:hover */

/* Personas de confianza */
/* (lista de apoyo.html: familia, profes y orientación escolar, cada una en una tarjetita con insignia) */
.contenido-texto .confianza {
  display: grid; /* una columna en el celular */
  gap: var(--espacio-2); /* 8 px entre tarjetas */
  margin: 0 0 var(--espacio-3); /* 16 px debajo */
  padding: 0; /* sin sangría */
  list-style: none; /* sin viñetas */
} /* fin de la regla .contenido-texto .confianza */

/* Desde 700 px: tres columnas */
@media (min-width: 700px) {
  /* La lista de personas de confianza */
  .contenido-texto .confianza {
    grid-template-columns: repeat(3, 1fr); /* tres columnas iguales */
  } /* fin de la regla .contenido-texto .confianza (tres columnas) */
} /* fin del @media (min-width: 700px): personas en tres columnas */

/* Cada persona de confianza: tarjetita blanca con insignia y texto */
.confianza li {
  display: grid; /* en columna */
  align-content: start; /* todo arriba */
  gap: var(--espacio-2); /* 8 px entre insignia y texto */
  margin: 0; /* sin el margen de los <li> de .contenido-texto */
  padding: var(--espacio-3); /* 16 px de relleno */
  border-radius: var(--radio-grande); /* esquinas redondeadas */
  background: var(--color-superficie); /* fondo blanco */
  box-shadow: var(--sombra); /* sombra suave */
  font-weight: 600; /* seminegrita */
} /* fin de la regla .confianza li */

/* Frase para empezar a hablar */
/* (recuadro de apoyo.html: «Últimamente me he sentido ___ y me gustaría hablarlo contigo») */
.frase-inicio {
  display: flex; /* ícono y texto en fila */
  gap: var(--espacio-3); /* 16 px entre ellos */
  margin: var(--espacio-3) 0 0; /* 16 px arriba */
  padding: var(--espacio-3) var(--espacio-4); /* 16 px arriba y abajo, 24 px a los lados */
  border-left: 5px solid var(--color-primario); /* franja violeta a la izquierda, como una cita */
  border-radius: var(--radio); /* esquinas redondeadas */
  background: var(--color-primario-suave); /* fondo lila */
} /* fin de la regla .frase-inicio */

/* Texto de la frase */
.frase-inicio p {
  margin: 0; /* sin márgenes */
} /* fin de la regla .frase-inicio p */

/* Ícono de conversación de la frase */
.frase-inicio .icono {
  color: var(--color-primario); /* violeta */
} /* fin de la regla .frase-inicio .icono */

/* Líneas de ayuda: nombre, descripción y botón para llamar */
/* (cada línea de ayuda de apoyo.html: Línea Naranja, Línea 141...; completa la regla .recurso de componentes.css) */
.recurso {
  display: grid; /* en columna en el celular */
  gap: var(--espacio-2); /* 8 px entre partes */
} /* fin de la regla .recurso */

/* Desde 640 px: insignia a la izquierda y el resto a la derecha */
@media (min-width: 640px) {
  /* Cada línea de ayuda */
  .recurso {
    grid-template-columns: auto 1fr; /* columna de la insignia (lo que mide) y columna del texto (el resto) */
    column-gap: var(--espacio-3); /* 16 px entre las columnas */
  } /* fin de la regla .recurso (dos columnas) */

  /* La insignia ocupa el alto de tres filas (título, texto y botón) */
  .recurso > .insignia {
    grid-row: span 3; /* se extiende a lo largo de 3 filas */
  } /* fin de la regla .recurso > .insignia */
} /* fin del @media (min-width: 640px): insignia a la izquierda */

/* Título y texto de cada línea de ayuda */
.recurso h3,
.recurso p { /* y el texto de cada línea de ayuda (misma regla) */
  margin: 0; /* sin márgenes: el gap da el espacio */
} /* fin de la regla .recurso h3, .recurso p */

/* Botón "Llamar..." de cada línea de ayuda */
.recurso .boton {
  justify-self: start; /* no se estira: mide lo que su texto */
} /* fin de la regla .recurso .boton */

/* Listas con íconos pequeños a la izquierda (lo que Noosfera no hace, etc.) */
/* (apoyo.html: "Lo que Noosfera no hace"; crear-cuenta y recuperar: consejos para guardar el código) */
.lista-con-iconos,
.contenido-texto .lista-con-iconos { /* y dentro de .contenido-texto: así le gana a la regla «.contenido-texto ul» */
  display: grid; /* uno debajo del otro */
  gap: var(--espacio-2); /* 8 px entre puntos */
  margin: 0 0 var(--espacio-3); /* 16 px debajo */
  padding: 0; /* sin sangría */
  list-style: none; /* sin viñetas: el ícono hace de viñeta */
} /* fin de la regla .lista-con-iconos, .contenido-texto .lista-con-iconos */

/* Cada punto de esas listas dentro de apoyo.html: ícono y texto en fila */
.contenido-texto .lista-con-iconos li {
  display: flex; /* en fila */
  align-items: flex-start; /* alineados arriba */
  gap: var(--espacio-2); /* 8 px entre ícono y texto */
  margin: 0; /* sin el margen de los <li> de .contenido-texto */
} /* fin de la regla .contenido-texto .lista-con-iconos li */

/* Íconos de esas listas */
.lista-con-iconos .icono {
  margin-top: 2px; /* baja 2 px para alinearse con la primera línea de texto */
  color: var(--color-primario); /* violeta */
} /* fin de la regla .lista-con-iconos .icono */

/* Resumen en tarjetas (privacidad) */
/* (<ul class="grilla resumen"> al comienzo de privacidad.html: "Solo un apodo", "Sin publicidad"...) */
.resumen {
  margin: 0 0 var(--espacio-4); /* 24 px debajo */
  padding: 0; /* sin sangría */
  list-style: none; /* sin viñetas */
} /* fin de la regla .resumen */

/* Cada tarjeta del resumen */
.resumen .tarjeta {
  display: grid; /* en columna */
  align-content: start; /* todo arriba */
  gap: var(--espacio-2); /* 8 px entre partes */
  padding: var(--espacio-3); /* 16 px de relleno (menos que una tarjeta normal) */
} /* fin de la regla .resumen .tarjeta */

/* Título de cada tarjeta del resumen */
.resumen h3 {
  margin: var(--espacio-1) 0 0; /* 4 px arriba */
  font-size: var(--texto-normal); /* 16 px */
} /* fin de la regla .resumen h3 */

/* Texto de cada tarjeta del resumen */
.resumen p {
  margin: 0; /* sin márgenes */
  color: var(--color-texto-suave); /* gris violeta */
  font-size: var(--texto-pequeno); /* 14 px */
} /* fin de la regla .resumen p */

/* Sin conexión */
/* (offline.html: la muestra el service worker cuando no hay internet y la página pedida no está guardada) */
.sin-conexion {
  text-align: center; /* todo centrado */
} /* fin de la regla .sin-conexion */

/* Ícono de Nubbit, grande y un poco apagado */
.sin-conexion img {
  width: 96px; /* ancho */
  height: 96px; /* alto */
  margin-bottom: var(--espacio-3); /* 16 px debajo */
  opacity: 0.85; /* 85 % visible: un poco transparente */
} /* fin de la regla .sin-conexion img */

/* Introducción centrada */
.sin-conexion .introduccion {
  margin-inline: auto; /* márgenes automáticos a los lados: centra el bloque */
} /* fin de la regla .sin-conexion .introduccion */

/* Subtítulo "Mientras vuelve la conexión, puedes:" */
.sin-conexion h2 {
  margin-top: var(--espacio-4); /* 24 px arriba */
} /* fin de la regla .sin-conexion h2 */

/* Lista de lo que se puede hacer sin internet (apoyo, actividades y privacidad) */
.sin-conexion .lista-iconos {
  margin: var(--espacio-3) 0 var(--espacio-4); /* 16 px arriba y 24 px abajo */
  text-align: left; /* el texto de la lista vuelve a la izquierda */
} /* fin de la regla .sin-conexion .lista-iconos */

/* Botón "Intentar de nuevo" */
.sin-conexion .acciones {
  justify-content: center; /* la fila de botones al centro */
} /* fin de la regla .sin-conexion .acciones */