/* ==========================================================================
   PERMACULTURAEC - PAGINA DE MANTENIMIENTO
   "Algo grande esta por florecer"

   Fondo recreado 100% con CSS + SVG: montanas, amanecer, bruma y helechos.
   No depende de archivos de imagen, por lo que funciona sin internet y
   tambien dentro del ejecutable de PyInstaller.

   Uso:  /mantenimiento

   --------------------------------------------------------------------------
   COMO SE ESCALA LA PAGINA (leer esto antes de tocar los tamanos)
   --------------------------------------------------------------------------
   La pagina se mide como UN SOLO BLOQUE. Todas las medidas estan en rem y el
   tamano de 1 rem depende de la dimension mas pequena de la ventana:

       html { font-size: clamp(9px, min(3vw, 1.95vh), 24px); }

   Los dos limites significan:
     - 3vw: el bloque mide unos 28 rem de ancho, asi que en el celular el
       tamano lo marca el ancho y el titulo nunca se parte.
     - 1.95vh: en pantallas anchas manda el alto y el aviso queda centrado
       sin desbordarse hacia abajo.

   Por eso:
     - Pantalla ancha y baja (1920 x 500): manda el alto, el aviso no estalla.
     - Pantalla angosta y alta (celular 360 x 800): manda el ancho, el aviso
       entra completo y sin salirse de lado.
     - Cualquier combinacion intermedia: el bloque mantiene su proporcion,
       porque TODAS las partes escalan juntas, no una por una.

   El bloque completo mide 45 rem, es decir, ocupa cerca del 87% del alto
   util de la pantalla en el rango medio y mucho menos en los extremos.

   Solo quedan tres ajustes puntuales al final del archivo (celular,
   telefono en horizontal y pantallas muy anchas) para cambiar QUE se
   muestra, nunca el tamano del resto.
   ========================================================================== */

:root {
  --verde-oscuro: #0a2014;
  --verde: #113d28;
  --verde-claro: #2a8558;
  --blanco: #f5f8f6;
  --dorado: #d4af37;
  --dorado-claro: #f0d478;

  --hoja: #8fae5a;
  --hoja-clara: #dcead4;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* ---- Escala del bloque (45 rem en total) ----
     Los textos secundarios llevan ademas un minimo en pixeles: en el celular
     el bloque se achica, pero "Nueva etapa en camino" y "Pronto estaremos de
     vuelta" deben seguir siendo legibles, no 7 px de alto. */
  --t-marca:    2.05rem;              /* marca */
  --t-uno:      4.30rem;              /* Algo grande */
  --t-pre:      2.00rem;              /* esta por */
  --t-flor:     4.90rem;              /* florecer */
  --t-bajada:   max(1.06rem, 15px);
  --t-detalle:  max(0.72rem, 12.5px);
  --t-vuelta:   max(0.66rem, 11px);
  --t-insignia: max(0.64rem, 11px);

  --e-1: 0.70rem;   /* separaciones menores */
  --e-2: 1.10rem;
  --e-3: 1.60rem;
  --e-4: 2.00rem;

  --lado: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  /* La escala general de toda la pagina */
  font-size: clamp(9px, min(3vw, 1.95vh), 24px);
}

body {
  min-height: 100%;
  background: #04150c;
  color: var(--blanco);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   1. ESCENA (fondo)
   ========================================================================== */

.escena {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #04150c 0%, #0a2014 45%, #061a10 100%);
}

/* Cielo: bruma dorada hacia el amanecer de la derecha.
   Los radios se achican con la pantalla para que no se vean redondos
   gigantes en una television. */
.escena::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(min(52vw, 38rem) min(60vh, 26rem) at 82% 22%, rgba(255, 196, 96, 0.30), transparent 62%),
    radial-gradient(min(46vw, 32rem) min(54vh, 22rem) at 20% 16%, rgba(42, 133, 88, 0.22), transparent 68%),
    radial-gradient(min(64vw, 46rem) min(66vh, 29rem) at 50% 108%, rgba(10, 32, 20, 0.85), transparent 70%);
}

/* Sol naciente con destello y rayos */
/* El sol asoma por la derecha, como en el diseno, pero nunca se recorta.
   El margen lateral cubre el desplazamiento: translate(28%) mueve el sol 28%
   de su propio ancho, y ese ancho es como maximo un 28% de la pantalla. */
.sol {
  position: absolute;
  top: 21%;
  right: max(4%, 2.6rem);
  width: min(9.2rem, 34vh);
  aspect-ratio: 1;
  transform: translate(28%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 251, 232, 0.98) 0%,
    rgba(255, 228, 160, 0.72) 24%,
    rgba(255, 183, 84, 0.28) 48%,
    rgba(255, 160, 60, 0) 72%
  );
  filter: blur(1px);
  animation: respirar 7s ease-in-out infinite;
}

.sol::after {
  content: "";
  position: absolute;
  inset: -260%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 231, 168, 0.22) 0deg 2deg,
    transparent 2deg 22deg,
    rgba(255, 231, 168, 0.18) 22deg 24deg,
    transparent 24deg 44deg,
    rgba(255, 231, 168, 0.22) 44deg 46deg,
    transparent 46deg 66deg,
    rgba(255, 231, 168, 0.18) 66deg 68deg,
    transparent 68deg 88deg,
    rgba(255, 231, 168, 0.22) 88deg 90deg,
    transparent 90deg 110deg,
    rgba(255, 231, 168, 0.18) 110deg 112deg,
    transparent 112deg 132deg,
    rgba(255, 231, 168, 0.22) 132deg 134deg,
    transparent 134deg 154deg,
    rgba(255, 231, 168, 0.18) 154deg 156deg,
    transparent 156deg 176deg,
    rgba(255, 231, 168, 0.22) 176deg 178deg,
    transparent 178deg 360deg
  );
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: girar 150s linear infinite;
}

/* Paisaje: montanas, volcan y bosque */
.paisaje {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Bruma que separa los planos del paisaje */
.niebla {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 46%;
  height: 34%;
  background:
    radial-gradient(60% 100% at 24% 60%, rgba(207, 230, 200, 0.16), transparent 70%),
    radial-gradient(70% 100% at 78% 45%, rgba(255, 233, 184, 0.14), transparent 72%);
  filter: blur(26px);
  animation: derivar 22s ease-in-out infinite alternate;
}

/* Helechos del primer plano.
   El limite en rem evita que en una television los helechos tapen el
   texto, y el limite en vw evita que se vuelvan巨大 en el celular. */
.helechos {
  position: absolute;
  bottom: -4%;
  color: #0b2a17;
  filter: blur(0.7px);
}

.helecho-izq {
  left: -6%;
  width: min(24rem, 52vw);
  opacity: 0.95;
}

.helecho-der {
  right: -8%;
  width: min(21rem, 46vw);
  opacity: 0.8;
  transform: scaleX(-1);
}

/* Puntos de luz desenfocados (bokeh) */
.bokeh {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 240, 205, 0.5), rgba(226, 240, 205, 0) 70%);
  filter: blur(6px);
  animation: latido-suave 6s ease-in-out infinite;
}

.bokeh.b1 { width: min(6.2rem, 14vw); height: min(6.2rem, 14vw); top: 12%; left: 4%;  opacity: 0.22; }
.bokeh.b2 { width: min(3.8rem, 9vw);  height: min(3.8rem, 9vw);  top: 26%; left: 15%; opacity: 0.16; animation-delay: 1.1s; }
.bokeh.b3 { width: min(8rem, 17vw);   height: min(8rem, 17vw);   top: 62%; left: 10%; opacity: 0.14; animation-delay: 2.2s; }
.bokeh.b4 { width: min(4.6rem, 11vw); height: min(4.6rem, 11vw); top: 34%; right: 22%; opacity: 0.14; animation-delay: 0.6s; }
.bokeh.b5 { width: min(9.6rem, 21vw); height: min(9.6rem, 21vw); bottom: 8%; right: 6%; opacity: 0.12; animation-delay: 1.7s; }

/* Vineta: asegura el contraste del texto */
.vineta {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(2, 10, 6, 0.62) 100%),
    linear-gradient(180deg, rgba(2, 10, 6, 0.45) 0%, transparent 26%, transparent 58%, rgba(2, 10, 6, 0.72) 100%);
}

/* Filetes decorativos: arcos y puntos finos */
.filetes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

/* ==========================================================================
   2. CONTENIDO
   ========================================================================== */

.pagina {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;          /* la barra del celular no lo tapa */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  padding: 2.5rem var(--lado);
  padding-top: max(2.5rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom, 0px));
}

/* ---- Emblema ---- */

.emblema {
  width: 6.1rem;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}

.animar .emblema { animation: aparecer 1s ease-out both; }

.bandera {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 1.3rem;
  aspect-ratio: 26 / 16;
  margin: var(--e-1) auto 0;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.animar .bandera { animation: aparecer 1s ease-out 0.1s both; }

.bandera i { flex: 1; display: block; }
.bandera .amarillo { flex: 2; background: #ffd100; }
.bandera .azul { background: #0072ce; }
.bandera .rojo { background: #ef3340; }

/* ---- Marca ---- */

.marca {
  margin: var(--e-1) 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-marca);
  line-height: 1.2;
  letter-spacing: 0.005em;
}

.animar .marca { animation: aparecer 1s ease-out 0.15s both; }

.marca .nombre { color: #eef4ea; }
.marca .inicial { color: #86a95c; }

.linea-marca {
  width: 3.4rem;
  height: 1px;
  margin: var(--e-1) auto 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--dorado), transparent);
}

.animar .linea-marca { animation: abrir 1.1s ease-out 0.3s both; }

/* ---- Insignia ---- */

.insignia {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: var(--e-3);
  max-width: 100%;
}

/* El guion de "PRONTO ESTAREMOS DE VOLTA" no debe pegarse al borde */
.vuelta {
  padding: 0 var(--lado);
  margin-left: calc(var(--lado) * -1);
  margin-right: calc(var(--lado) * -1);
}

.animar .insignia { animation: aparecer 1s ease-out 0.35s both; }

/* Las lineas ceden espacio antes de invadir el texto de la pastilla */
.insignia-linea {
  height: 1px;
  flex: 1 1 0;
  min-width: 0.5rem;
  max-width: 5.6rem;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8));
}

.insignia-linea.derecha {
  background: linear-gradient(270deg, transparent, rgba(212, 175, 55, 0.8));
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(23, 66, 44, 0.9), rgba(8, 28, 18, 0.82));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(7px);
}

.punto {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #a6d874;
  box-shadow: 0 0 14px rgba(166, 216, 116, 0.9);
  animation: latido 2.4s ease-in-out infinite;
}

.insignia-texto {
  font-size: var(--t-insignia);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #e2ecdb;
  white-space: nowrap;
}

/* ---- Titulo ---- */

.titulo {
  position: relative;
  margin-top: var(--e-2);
  max-width: 100%;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
}

.titulo-uno {
  display: block;
  font-size: var(--t-uno);
  letter-spacing: -0.01em;
  color: var(--hoja-clara);
}

.animar .titulo-uno { animation: aparecer 1.1s ease-out 0.5s both; }

/* "esta por florecer" comparte la misma linea base. Si de verdad no cabe,
   el bloque se parte (wrap) en vez de salirse de la pantalla. */
.titulo-dos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.16em;
  margin-top: 0.06em;
}

.animar .titulo-dos { animation: aparecer 1.1s ease-out 0.62s both; }

.titulo-pre {
  font-size: var(--t-pre);
  color: #d3e2cc;
}

.titulo-flor {
  font-size: var(--t-flor);
  letter-spacing: -0.015em;
  background: linear-gradient(
    100deg,
    #f6e6a4 0%,
    #e2dd8a 24%,
    #bcd073 50%,
    #8fae5a 74%,
    #6d9a45 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: brillar 9s ease-in-out infinite;
}

/* Hojas sueltas alrededor del titulo */
.hoja-flotante {
  position: absolute;
  color: #9cbf62;
  opacity: 0.85;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  animation: flotar 8s ease-in-out infinite alternate;
}

.hoja-flotante svg {
  width: 100%;
  height: auto;
  display: block;
  fill: currentColor;
}

.hoja-flotante.h1 { width: 1.45rem; top: 12%;  left: -7%;  animation-delay: 0.2s; }
.hoja-flotante.h2 { width: 0.95rem; top: 44%;  left: -12%; animation-delay: 1.4s; color: #c8d97e; }
.hoja-flotante.h3 { width: 1.95rem; top: 68%;  left: -3%;  animation-delay: 2.6s; }
.hoja-flotante.h4 { width: 1.30rem; top: 24%;  right: -6%;  animation-delay: 0.9s; color: #b6cf6c; }
.hoja-flotante.h5 { width: 0.85rem; top: 74%;  right: -10%; animation-delay: 1.9s; }

/* ---- Textos ---- */

.bajada {
  margin-top: var(--e-3);
  max-width: 26ch;
  font-family: var(--serif);
  font-size: var(--t-bajada);
  line-height: 1.5;
  color: #e6eede;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
}

.animar .bajada { animation: aparecer 1.1s ease-out 0.78s both; }

.bajada .nombre {
  background: linear-gradient(100deg, #e8dc9c, #9cbd63);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.detalle {
  margin-top: var(--e-2);
  font-size: var(--t-detalle);
  letter-spacing: 0.2em;
  line-height: 2;
  color: #a6bda0;
}

.animar .detalle { animation: aparecer 1.1s ease-out 0.9s both; }

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

.cierre {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: var(--e-4);
  width: min(100%, 26rem);
}

.animar .cierre { animation: aparecer 1.1s ease-out 1.05s both; }

.cierre-linea {
  height: 1px;
  flex: 1 1 0;
  min-width: 0.5rem;
  max-width: 4.8rem;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.75));
}

.cierre-linea.derecha {
  background: linear-gradient(270deg, transparent, rgba(212, 175, 55, 0.75));
}

.cierre-hoja {
  width: 1.3rem;
  height: auto;
  flex: 0 0 auto;
  display: block;
  fill: var(--dorado-claro);
  opacity: 0.9;
}

.vuelta {
  margin-top: var(--e-2);
  font-size: var(--t-vuelta);
  letter-spacing: 0.34em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #cfe3b6;
}

.animar .vuelta { animation: aparecer 1.1s ease-out 1.2s both; }

/* ==========================================================================
   3. ANIMACIONES
   ========================================================================== */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* NOTA DE ROBUSTEZ
   Las animaciones de entrada se aplican SOLO cuando el documento lleva la
   clase .animar (la agrega el script del final de la pagina). El estado base
   de cada elemento es visible, de modo que, sin JavaScript, con la pagina en
   segundo plano, con el ahorro de energia activo o en un navegador antiguo,
   el aviso se lee completo igual. El script retira la clase al terminar la
   entrada, dejando el texto en su estado final sin depender de la animacion. */

@keyframes abrir {
  from { opacity: 0; transform: scaleX(0.2); }
  to { opacity: 1; transform: none; }
}

@keyframes brillar {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

@keyframes latido-suave {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.5; }
}

@keyframes respirar {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.75; }
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

@keyframes derivar {
  from { transform: translateX(-2%); }
  to { transform: translateX(2%); }
}

@keyframes flotar {
  from { transform: translate(0, 0) rotate(-12deg); }
  to { transform: translate(10px, -26px) rotate(16deg); }
}

/* ==========================================================================
   4. AJUSTES PUNTUALES
   El tamano ya no se ajusta aqui: solo cambia QUE se muestra.
   ========================================================================== */

/* --- Celular: menos adorno para que el texto respire --- */
@media (max-width: 560px) {
  .insignia { gap: 0.6rem; }
  .insignia-linea { max-width: 1.8rem; }
  .insignia-texto { letter-spacing: 0.22em; }
  .bajada { max-width: 22ch; }
  .detalle { letter-spacing: 0.12em; }

  /* El sol entra mas hacia la pantalla para no quedar cortado */
  .sol { right: 8%; transform: translate(16%, -50%); }

  /* Un solo grupo de helechos y bien afuera: en vertical el texto es lo
     primero y las hojas solo dan marco. */
  .helecho-izq { width: min(20rem, 80vw); left: -52%; opacity: 0.7; }
  .helecho-der { display: none; }

  .hoja-flotante.h1,
  .hoja-flotante.h3,
  .hoja-flotante.h5 { display: none; }
}

/* --- Tablet en vertical: el texto es mas ancho que los helechos, asi que
       las hojas se quedan en los bordes, sin invadirlo --- */
@media (min-width: 561px) and (max-width: 1100px) and (orientation: portrait) {
  .helecho-izq { width: min(19rem, 44vw); left: -30%; opacity: 0.8; }
  .helecho-der { width: min(17rem, 40vw); right: -32%; opacity: 0.65; }
}

/* --- Telefono en horizontal: muy poco alto, se simplifica el bloque --- */
@media (max-height: 560px) and (orientation: landscape) {
  :root {
    /* Aqui no se baja del minimo de 11 px: la insignia debe seguir leible */
    --t-insignia: max(0.72rem, 11px);
  }
  .pagina { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .emblema { width: 4rem; }
  .bandera,
  .linea-marca,
  .detalle { display: none; }
  .marca { margin-top: 0; }
  .insignia { margin-top: var(--e-2); }
  .helecho-izq { width: min(18rem, 40vw); }
  .helecho-der { width: min(15rem, 34vw); display: block; }
}

/* --- Ventana baja en vertical: se oculta la linea de detalle --- */
@media (max-height: 620px) and (orientation: portrait) {
  .detalle { display: none; }
}

/* --- Pantallas muy anchas: el aviso no se estira --- */
@media (min-width: 1600px) {
  .pagina {
    padding-left: max(2.5rem, calc((100% - 90rem) / 2));
    padding-right: max(2.5rem, calc((100% - 90rem) / 2));
  }
}

/* --- Preferencia del sistema --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}