/* =============================================================================
   Portada de webmail.jfsanchez.es

   Tema claro con azules profundos y acentos claros. Sin JavaScript y sin
   imagenes externas: nada que cargar, nada que pueda fallar.

   Los estilos van en fichero aparte y no en linea porque la CSP lleva
   style-src 'self' sin 'unsafe-inline' (ver app/_headers).
   ============================================================================= */

:root {
  --azul-950: #061a33;
  --azul-900: #0b2545;
  --azul-800: #123a6b;
  --azul-700: #1b4f8f;
  --azul-600: #2563a8;
  --azul-500: #3b82f6;
  --azul-400: #60a5fa;
  --azul-300: #93c5fd;
  --azul-200: #bfdbfe;
  --azul-100: #dbeafe;
  --azul-50:  #eff6ff;

  --fondo:      #e9f2fd;
  --superficie: #ffffff;
  --borde:      #d3e3f7;
  --borde-suave:#e6effa;
  --texto:      #0b2545;
  --tenue:      #5a7799;

  /* El emoji del sobre se pinta en el color del sistema, que no siempre es el
     que queremos. Estos dos filtros lo tiñen: el de arriba para fondos
     oscuros (barra), el de abajo para el cuadrado blanco del emblema, donde
     con el claro se perdia del todo. */
  --sobre-claro:  grayscale(1) brightness(1.9);
  --sobre-azul:   grayscale(1) sepia(1) saturate(6) hue-rotate(178deg) brightness(.72);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body.portada {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   Barra de arriba, al estilo de un webmail
   --------------------------------------------------------------------- */

.barra {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(16px, 4vw, 34px);
  height: 58px;
  color: var(--blanco, #fff);
  background: linear-gradient(180deg, var(--azul-900) 0%, var(--azul-800) 100%);
  box-shadow: 0 10px 30px -18px rgba(11, 37, 69, .85);
  animation: baja .7s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes baja {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: none; }
}

.barra .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -.01em;
}

.barra .glifo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 15px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .12);
  font-family: "Segoe UI Symbol", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: var(--sobre-claro);
}

.barra .nombre {
  background: linear-gradient(180deg, #ffffff, #cfe0f8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.barra .espacio { flex: 1; }

/* Los tres puntitos de la derecha: adorno, no control. */
.sello {
  display: flex;
  gap: 5px;
  opacity: .65;
}

.sello .punto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--azul-200);
}

.sello .punto:nth-child(2) { opacity: .6; }
.sello .punto:nth-child(3) { opacity: .35; }

/* ---------------------------------------------------------------------
   Fondo
   --------------------------------------------------------------------- */

.fondo {
  position: fixed;
  inset: 58px 0 0 0;
  overflow: hidden;
  pointer-events: none;
}

.fondo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 115vmin;
  height: 115vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 246, .20) 0%,
    rgba(59, 130, 246, .10) 38%,
    rgba(59, 130, 246, 0)   68%
  );
}

.burbuja {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .55;
}

.b1 {
  width: 46vmin; height: 46vmin;
  left: -12vmin; top: -10vmin;
  background: radial-gradient(circle at 30% 30%, rgba(96, 165, 250, .34), rgba(96, 165, 250, 0) 70%);
  animation: flota 26s ease-in-out infinite;
}

.b2 {
  width: 40vmin; height: 40vmin;
  right: -10vmin; bottom: -12vmin;
  background: radial-gradient(circle at 60% 40%, rgba(37, 99, 168, .26), rgba(37, 99, 168, 0) 70%);
  animation: flota 32s ease-in-out infinite reverse;
}

.b3 {
  width: 30vmin; height: 30vmin;
  right: 16vmin; top: 12vmin;
  background: radial-gradient(circle at 50% 50%, rgba(147, 197, 253, .30), rgba(147, 197, 253, 0) 70%);
  animation: flota 38s ease-in-out infinite;
}

@keyframes flota {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2vmin, -2vmin, 0) scale(1.06); }
}

/* ---------------------------------------------------------------------
   Tarjeta central
   --------------------------------------------------------------------- */

.centro {
  position: relative;
  z-index: 5;
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vh, 70px) 20px;
}

.tarjeta {
  position: relative;
  text-align: center;
  padding: clamp(34px, 6vw, 58px) clamp(28px, 7vw, 76px);
  border-radius: 26px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(9px);
  box-shadow:
    0 32px 70px -34px rgba(11, 37, 69, .45),
    0 6px 20px -10px rgba(11, 37, 69, .18),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: entra .9s .15s cubic-bezier(.2, .7, .2, 1) both;
  overflow: hidden;
}

/* Reflejo diagonal muy suave, como un brillo que cruza la tarjeta. */
.tarjeta::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 45%;
  height: 220%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: brillo 7s 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes brillo {
  0%, 55%, 100% { left: -40%; opacity: 0; }
  25%           { opacity: 1; }
  80%           { left: 110%; opacity: 0; }
}

@keyframes entra {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Emblema: el sobre, dentro de una placa redondeada con degradado. */
.emblema {
  width: clamp(92px, 16vmin, 138px);
  height: clamp(92px, 16vmin, 138px);
  margin: 0 auto clamp(20px, 3.2vmin, 32px);
  border-radius: 34%;
  display: grid;
  place-items: center;
  position: relative;
  /* Cuadrado en blanco. Antes era un degradado azul con el sobre encima,
     casi del mismo color: el emblema se perdia contra la tarjeta. */
  background: linear-gradient(160deg, #ffffff 0%, #f4f9ff 60%, #e8f2fe 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow:
    0 22px 42px -20px rgba(11, 37, 69, .40),
    0 4px 12px -6px rgba(11, 37, 69, .22),
    inset 0 -1px 0 rgba(191, 219, 254, .55);
  animation: respira 7s ease-in-out infinite;
}

/* Halo azul que late por detras del cuadrado. */
.emblema::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 44%;
  background: radial-gradient(circle at center, rgba(96, 165, 250, .38), transparent 66%);
  z-index: -1;
  animation: respira 7s ease-in-out infinite;
}

/* El sobre, en azul, dentro del blanco. */
.sobre {
  font-size: clamp(42px, 7.6vmin, 68px);
  line-height: 1;
  color: var(--azul-600);
  font-family: "Segoe UI Symbol", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: var(--sobre-azul);
  margin-bottom: 2px;
}

@keyframes respira {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* "webmail" */
.marca {
  margin: 0;
  font-size: clamp(54px, 14vmin, 138px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.035em;
}

/* inline-block, no flex: en flex cada letra es una caja propia y la palabra
   deja de avanzar como texto normal, que es lo que hace que una letra estrecha
   (la "l") se vaya de ancho. Aqui cada letra se dibuja con las medidas que
   tiene en el tipo de letra, que es justo lo que se quiere. */
.letra {
  display: inline-block;
  background: linear-gradient(175deg, var(--azul-500) 0%, var(--azul-700) 52%, var(--azul-950) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sube 1s cubic-bezier(.2, .7, .2, 1) both;
}

.letra:nth-child(1) { animation-delay: .05s; }
.letra:nth-child(2) { animation-delay: .10s; }
.letra:nth-child(3) { animation-delay: .15s; }
.letra:nth-child(4) { animation-delay: .20s; }
.letra:nth-child(5) { animation-delay: .25s; }
.letra:nth-child(6) { animation-delay: .30s; }
.letra:nth-child(7) { animation-delay: .35s; }

@keyframes sube {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.lema {
  margin: clamp(12px, 2.2vmin, 22px) 0 0;
  font-size: clamp(15px, 2.2vmin, 20px);
  font-weight: 500;
  color: var(--tenue);
  letter-spacing: .012em;
  animation: entra 1s .5s cubic-bezier(.2, .7, .2, 1) both;
}

/* Separador con gota central. */
.ornamento {
  margin: clamp(20px, 3.2vmin, 32px) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: min(250px, 62vw);
  animation: entra 1s .65s cubic-bezier(.2, .7, .2, 1) both;
}

.ornamento .raya {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--azul-200), transparent);
}

.ornamento .gota {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul-400);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, .16);
}

/* Tres pastillas: adorno puro, da la sensacion de "interfaz" sin decir nada. */
.marcas {
  margin-top: clamp(22px, 3.4vmin, 34px);
  display: flex;
  justify-content: center;
  gap: 9px;
  animation: entra 1s .8s cubic-bezier(.2, .7, .2, 1) both;
}

.pastilla {
  width: 74px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-100), var(--azul-200));
}

.pastilla.corta {
  width: 42px;
  background: linear-gradient(90deg, var(--azul-200), var(--azul-100));
}

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

.pie {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  height: 42px;
  display: grid;
  place-items: center;
  animation: entra 1s 1s cubic-bezier(.2, .7, .2, 1) both;
}

.pie .raya {
  width: min(320px, 60vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--borde), transparent);
}

/* ---------------------------------------------------------------------
   Si las animaciones estan apagadas, se ve igual de bien.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .barra, .emblema, .emblema::before, .letra, .lema, .ornamento,
  .marcas, .tarjeta, .tarjeta::after, .pie, .burbuja {
    animation: none !important;
  }
  .tarjeta::after { display: none; }
}

@media (max-width: 420px) {
  .marca { letter-spacing: -.045em; }
  .tarjeta { border-radius: 20px; }
}