/* ============================================================
   La Última Alianza — la carta (servidor 1.9.24; 1.9.41, la de azul)

   El papel de la carta para entrar en la hermandad: el pliego, sus dos hojas
   (la de la hermandad y la tuya, con su formulario) y la carta ya recibida,
   como la leen los oficiales. La usan la portada (dentro de lo que sale al
   romper el lacre: cómo se abre está en site.css) y las páginas de dentro
   (/solicitudes/carta y /solicitudes/{número}).

   (1.9.41) Como la maqueta y la guía de estilo de Eduard (20-oct): un libro
   abierto de dos hojas de papel azul real, con los bordes rasgados, sobre un
   pergamino viejo; adornos dorados con una flor de lis; Cinzel en los
   rótulos y el botón, EB Garamond en lo demás; los campos, de pergamino, con
   un brillo dorado al escribir; el botón, azul con su marco de oro.

   Los bordes rasgados son máscaras (las tiras de /assets/carta/rasgado-*.svg,
   que se repiten a lo largo de cada lado sin estirarse): la hoja recorta sus
   lados y su papel (::before) recorta arriba y abajo; lo que queda es el
   cruce de las dos, con las esquinas rotas por los dos lados. Si el navegador
   no sabe de máscaras, la hoja sale entera, con sus bordes rectos.

   Sin nada de fuera y sin estilos en línea: las páginas de dentro no los
   admiten (CabecerasSeguras). Las letras, de aquí (/fuentes).
   ============================================================ */

@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fuentes/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fuentes/cinzel-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fuentes/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fuentes/eb-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fuentes/eb-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fuentes/eb-garamond-latin-500-italic.woff2") format("woff2"); }

.carta-pliego {
  /* la paleta de la guía de estilo */
  --azul-hondo:     #12305E;      /* azul real profundo: el papel */
  --azul-heraldico: #1B3F73;
  --azul-claro:     #2E5E95;
  --azul-noche:     #0A1528;
  --oro:            #D9A93A;
  --oro-claro:      #F0C85A;
  --oro-viejo:      #A57A1E;
  --pergamino:      #E9D7AE;
  --pergamino-luz:  #F5EAD0;
  --texto-claro:    #F1E7D2;
  --texto-suave:    #CFC3A6;
  --texto-oscuro:   #2A2016;
  --sepia:          #7A6A50;
  --exito:          #5E9F4E;
  --error:          #C2473A;
  --error-claro:    #FF9C8C;
  --letra-rotulo:   "Cinzel", "Trajan Pro", Georgia, serif;
  --letra:          "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* lo hondo de los bordes rasgados (lo que ocupa cada tira) */
  --rasgado: 24px;

  /* dentro del papel, los desplegables y las casillas del navegador, en claro (los campos son de pergamino) */
  color-scheme: light;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 10px;
  border-radius: 4px;
  color: var(--texto-claro);
  font-family: var(--letra);
  font-size: 19px;
  line-height: 1.6;
  text-align: left;
  /* el pergamino viejo de debajo: sus hebras, sus manchas y los bordes tostados */
  background:
    url("/assets/papel.webp?v=1") 0 0 / 512px 512px repeat,
    url("/assets/carta/moteado.webp?v=1") 0 0 / 640px 640px repeat,
    radial-gradient(130% 120% at 50% 50%, transparent 58%, rgba(92, 58, 14, .55) 100%),
    linear-gradient(176deg, #E8D5A9, #D9C190 55%, #CDB27C);
  background-blend-mode: multiply, multiply, normal, normal;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 36px rgba(96, 62, 16, .45);
}
@media (min-width: 900px) {
  .carta-pliego { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 16px; }
  .carta-pliego.carta-recibida { grid-template-columns: minmax(0, 1fr); }
}

/* ── cada hoja: papel azul, con sus bordes rasgados ───────────────── */
.carta-hoja {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: clamp(30px, 4.6vw, 56px) clamp(26px, 4.2vw, 54px);
  /* los lados rasgados (los dos; en el libro abierto, solo el de fuera: ver abajo) */
  --tira-izquierda: url("/assets/carta/rasgado-izquierda.svg") 0 0 / var(--rasgado) 360px repeat-y;
  --tira-derecha: url("/assets/carta/rasgado-derecha.svg") 100% 0 / var(--rasgado) 360px repeat-y;
  --entre-lados: linear-gradient(#000 0 0) 50% 0 / calc(100% - 2 * var(--rasgado) + 2px) 100% no-repeat;
  -webkit-mask: var(--tira-izquierda), var(--tira-derecha), var(--entre-lados);
  mask: var(--tira-izquierda), var(--tira-derecha), var(--entre-lados);
}
.carta-hoja::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* arriba y abajo, rasgados */
  -webkit-mask:
    url("/assets/carta/rasgado-arriba.svg") 0 0 / 360px var(--rasgado) repeat-x,
    url("/assets/carta/rasgado-abajo.svg") 0 100% / 360px var(--rasgado) repeat-x,
    linear-gradient(#000 0 0) 0 50% / 100% calc(100% - 2 * var(--rasgado) + 2px) no-repeat;
  mask:
    url("/assets/carta/rasgado-arriba.svg") 0 0 / 360px var(--rasgado) repeat-x,
    url("/assets/carta/rasgado-abajo.svg") 0 100% / 360px var(--rasgado) repeat-x,
    linear-gradient(#000 0 0) 0 50% / 100% calc(100% - 2 * var(--rasgado) + 2px) no-repeat;
  /* el papel azul: sus hebras y sus manchas (multiplican), la luz de arriba, lo tostado de los bordes y el doblez */
  background:
    url("/assets/papel.webp?v=1") var(--papel-x, 0) var(--papel-y, 0) / 512px 512px repeat,
    url("/assets/carta/moteado.webp?v=1") 0 0 / 512px 512px repeat,
    var(--doblez, linear-gradient(transparent, transparent)),
    radial-gradient(140% 110% at 50% 46%, transparent 52%, rgba(3, 9, 24, .62) 100%),
    radial-gradient(110% 70% at 18% 0%, rgba(120, 165, 235, .16), transparent 62%),
    linear-gradient(177deg, #19407A, var(--azul-hondo) 48%, #0E2752);
  background-blend-mode: multiply, multiply, normal, normal, normal, normal;
  box-shadow: inset 0 0 26px rgba(2, 8, 22, .7);
}
/* la segunda hoja, con la baldosa corrida: que no se vea el mismo dibujo en las dos, a la misma altura */
.carta-hoja + .carta-hoja::before { --papel-x: -173px; --papel-y: -291px; }

/* el libro abierto: cada hoja, rasgada solo por fuera; en medio, el doblez */
@media (min-width: 900px) {
  .carta-pliego:not(.carta-recibida) > .carta-hoja:first-child {
    --tira-derecha: linear-gradient(transparent, transparent);
    --entre-lados: linear-gradient(#000 0 0) 100% 0 / calc(100% - var(--rasgado) + 2px) 100% no-repeat;
  }
  .carta-pliego:not(.carta-recibida) > .carta-hoja:first-child::before {
    --doblez: linear-gradient(90deg, transparent 84%, rgba(2, 7, 20, .55) 100%);
  }
  .carta-pliego:not(.carta-recibida) > .carta-hoja + .carta-hoja {
    --tira-izquierda: linear-gradient(transparent, transparent);
    --entre-lados: linear-gradient(#000 0 0) 0 0 / calc(100% - var(--rasgado) + 2px) 100% no-repeat;
  }
  .carta-pliego:not(.carta-recibida) > .carta-hoja + .carta-hoja::before {
    --doblez: linear-gradient(90deg, rgba(2, 7, 20, .6), transparent 13%);
  }
}

/* ── lo escrito ───────────────────────────────────────────────────── */
.carta-hoja p { margin: 0 0 16px; }
.carta-hoja p:last-child { margin-bottom: 0; }
.carta-titulo, .carta-encabezado {
  margin: 0 0 18px !important;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(25px, 2.3vw, 31px);
  line-height: 1.2;
  color: #F7EFDD;
  text-wrap: balance;
}
.carta-encabezado { margin-bottom: 4px !important; }
.carta-de-la-hermandad { color: var(--texto-claro); }
.carta-de-la-hermandad > p:not([class]) { text-wrap: pretty; }
.carta-rubrica { margin: 4px 0 0 !important; font-style: italic; font-size: 1.1em; text-align: center; color: #EADFC6; overflow-wrap: anywhere; text-wrap: balance; }

/* los adornos: dos filetes dorados con su flor de lis */
.carta-adorno { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; overflow: visible; }
.carta-adorno-arriba { margin-bottom: 22px; }
.carta-adorno-firma { margin-top: 26px; margin-bottom: 12px; }
.carta-adorno-titulo { width: min(100%, 360px); margin: 6px auto 20px; }

/* en el sitio del formulario, cuando a quien mira no le toca escribirla (ya tiene una, ya es de la casa…) */
.carta-antes { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(240, 200, 90, .3); font-size: 1.06em; }
.carta-antes a { color: var(--oro-claro); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.carta-antes a:hover, .carta-antes a:focus-visible { color: #FFE08A; }

/* ── el formulario, en pergamino ──────────────────────────────────── */
.carta-form { display: grid; gap: 18px; margin: 0; }
.carta-fila { display: grid; gap: 16px 16px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.carta-campo { min-width: 0; }
.carta-campo label, .carta-datos dt, .carta-pregunta {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-family: var(--letra-rotulo);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ECC870;
}
.carta-opcional {
  margin-left: 6px;
  font-family: var(--letra);
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--texto-suave);
}

.carta-campo input[type="text"], .carta-campo textarea, .carta-campo select {
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 12px 6px;
  border: 1px solid rgba(40, 26, 6, .6);
  border-radius: 3px;
  background:
    url("/assets/papel.webp?v=1") 0 0 / 384px 384px repeat,
    linear-gradient(180deg, #F4E8CB, var(--pergamino) 62%, #E3CFA2);
  background-blend-mode: multiply, normal;
  box-shadow: inset 0 1px 3px rgba(60, 40, 10, .35), 0 1px 0 rgba(255, 236, 190, .12);
  color: var(--texto-oscuro);
  font-family: var(--letra);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.carta-campo select {
  min-height: 46px;
  padding-right: 38px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background:
    url("/assets/carta/flecha.svg") right 13px center / 14px 9px no-repeat,
    url("/assets/papel.webp?v=1") 0 0 / 384px 384px repeat,
    linear-gradient(180deg, #F4E8CB, var(--pergamino) 62%, #E3CFA2);
  background-blend-mode: normal, multiply, normal;
}
.carta-campo select:hover { border-color: rgba(217, 169, 58, .9); }
.carta-campo textarea { min-height: 76px; resize: vertical; }
.carta-campo ::placeholder { color: var(--sepia); opacity: 1; font-style: italic; font-weight: 400; }
/* escribiendo: el brillo dorado */
.carta-campo input:focus, .carta-campo textarea:focus, .carta-campo select:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 2px rgba(240, 200, 90, .95), 0 0 16px 3px rgba(240, 200, 90, .42), inset 0 1px 3px rgba(60, 40, 10, .25);
}
/* lo que pide el servidor (o el navegador, al salir de un campo obligatorio vacío): en rojo; lo ya bien, en verde */
.carta-campo [aria-invalid="true"], .carta-campo :is(input, textarea, select)[required]:user-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(194, 71, 58, .6), inset 0 1px 3px rgba(60, 40, 10, .25);
  background-color: #F2D6CB;
}
.carta-campo :is(input, textarea, select)[required]:user-valid:not(:focus) { border-color: var(--exito); }
.carta-error {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 7px 0 0 !important;
  font: 500 16px/1.4 var(--letra);
  color: var(--error-claro);
}
.carta-error::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--error);
  color: #FFF4EE;
  font: 700 12px/1 var(--letra-rotulo);
  transform: translateY(2px);
}

.carta-acepto { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 1.45; color: var(--texto-claro); cursor: pointer; }
.carta-acepto input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  border: 1px solid rgba(40, 26, 6, .65);
  border-radius: 3px;
  background: linear-gradient(180deg, #F3E6C7, #E0CB9C);
  box-shadow: inset 0 1px 3px rgba(60, 40, 10, .35);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.carta-acepto input:checked { background: url("/assets/carta/marca.svg") 50% 50% / 16px 16px no-repeat, linear-gradient(180deg, #FBEFD3, #E8D3A4); border-color: var(--oro-viejo); }
.carta-acepto input:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(240, 200, 90, .95), 0 0 12px 2px rgba(240, 200, 90, .4); }
.carta-acepto input:user-invalid { border-color: var(--error); box-shadow: 0 0 0 2px rgba(194, 71, 58, .6); }

.carta-firma { display: grid; gap: 14px; justify-items: start; margin-top: 4px; }
/* el botón: la cara azul en su marco de oro (con su canto, como una placa) */
.carta-enviar {
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  background: linear-gradient(180deg, #FBE29A, #C99632 38%, #8C6214 52%, #D9AE4E 78%, #F3D27A);
  box-shadow: 0 0 0 1px #3B2806, 0 10px 22px rgba(0, 0, 0, .5);
  font: inherit;
  color: inherit;
  /* «Firmar como <su nombre de Discord> y enviar»: con un nombre largo y sin espacios, se parte y no se sale del papel */
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.carta-enviar-cara {
  display: block;
  padding: 14px 34px 13px;
  border-radius: 5px;
  background: linear-gradient(180deg, #2E5EAC, #1B4283 52%, #133370);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(8, 18, 44, .85);
  color: #F6ECD4;
  font: 700 15px/1.25 var(--letra-rotulo);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}
.carta-enviar:hover .carta-enviar-cara {
  background: linear-gradient(180deg, #3A72C9, #2352A0 52%, #193F86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -2px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(8, 18, 44, .85), 0 0 18px rgba(110, 160, 255, .35);
  transform: translateY(-1px);
}
.carta-enviar:active .carta-enviar-cara {
  background: linear-gradient(180deg, #163A78, #0F2B5E);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(8, 18, 44, .85);
  transform: translateY(1px);
}
.carta-enviar:disabled { cursor: not-allowed; filter: grayscale(1) brightness(.8); }
.carta-enviar:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 4px; }
.carta-letra-pequena { margin: 0 !important; font: 400 15.5px/1.55 var(--letra); color: var(--texto-suave); max-width: 64ch; }

/* lo que una persona no ve ni rellena */
.carta-miel { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── en una página de dentro (no en la portada) ────────────────────── */
.carta-en-pagina { margin-top: 22px; max-width: 1120px; }
.carta-en-pagina.carta-recibida { max-width: 800px; }

/* ── la carta recibida, como la leen los oficiales ─────────────────── */
.carta-datos { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 0 0 8px; padding: 0 0 16px; border-bottom: 1px solid rgba(240, 200, 90, .28); }
.carta-datos div { min-width: 0; }
.carta-datos dd { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.25; color: #F7EFDD; overflow-wrap: anywhere; }
.carta-pregunta { margin: 20px 0 4px; }
.carta-respuesta { margin: 0 !important; overflow-wrap: anywhere; }

/* ── el dorso: lo que se ve de la carta doblada, al salir del sobre (solo en la portada, en ancho) ── */
.carta-dorso { display: none; }
@media (min-width: 900px) {
  .carta-dorso {
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 16px;
    left: calc(16px + (100% - 32px) * 5 / 11);
    z-index: 2;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: clamp(60px, 9vw, 110px) 40px 40px;
    text-align: center;
    pointer-events: none;
    -webkit-mask:
      url("/assets/carta/rasgado-derecha.svg") 100% 0 / var(--rasgado) 360px repeat-y,
      linear-gradient(#000 0 0) 0 0 / calc(100% - var(--rasgado) + 2px) 100% no-repeat;
    mask:
      url("/assets/carta/rasgado-derecha.svg") 100% 0 / var(--rasgado) 360px repeat-y,
      linear-gradient(#000 0 0) 0 0 / calc(100% - var(--rasgado) + 2px) 100% no-repeat;
  }
  .carta-dorso::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-mask:
      url("/assets/carta/rasgado-arriba.svg") 0 0 / 360px var(--rasgado) repeat-x,
      url("/assets/carta/rasgado-abajo.svg") 0 100% / 360px var(--rasgado) repeat-x,
      linear-gradient(#000 0 0) 0 50% / 100% calc(100% - 2 * var(--rasgado) + 2px) no-repeat;
    mask:
      url("/assets/carta/rasgado-arriba.svg") 0 0 / 360px var(--rasgado) repeat-x,
      url("/assets/carta/rasgado-abajo.svg") 0 100% / 360px var(--rasgado) repeat-x,
      linear-gradient(#000 0 0) 0 50% / 100% calc(100% - 2 * var(--rasgado) + 2px) no-repeat;
    background:
      url("/assets/papel.webp?v=1") -61px -133px / 512px 512px repeat,
      url("/assets/carta/moteado.webp?v=1") 0 0 / 512px 512px repeat,
      linear-gradient(90deg, rgba(2, 7, 20, .55), transparent 10%),
      radial-gradient(90% 60% at 50% 22%, rgba(120, 165, 235, .2), transparent 70%),
      radial-gradient(140% 110% at 50% 46%, transparent 52%, rgba(3, 9, 24, .62) 100%),
      linear-gradient(177deg, #1B437F, var(--azul-hondo) 48%, #0E2752);
    background-blend-mode: multiply, multiply, normal, normal, normal, normal;
    box-shadow: inset 0 0 26px rgba(2, 8, 22, .7);
  }
  .carta-dorso img { width: min(220px, 60%); height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(240, 200, 90, .22)); }
  .carta-dorso .carta-adorno { width: min(100%, 300px); }
  .carta-dorso p {
    margin: 0;
    font-family: var(--letra-rotulo);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ECC870;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  }
}

@media (max-width: 560px) {
  .carta-pliego { --rasgado: 18px; padding: 8px; font-size: 18px; }
  .carta-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carta-fila > .carta-campo:first-child { grid-column: 1 / -1; }
  .carta-hoja { padding: 30px 24px; }
  .carta-enviar-cara { padding: 13px 20px 12px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .carta-enviar-cara, .carta-campo input, .carta-campo textarea, .carta-campo select { transition: none; }
}