/* ─────────────────────────────────────────────────────────────────────────
   Hoja común de las páginas de contenido: Historia y Familia masónica.
   Las dos son el mismo objeto —una hoja de pergamino sobre una superficie
   oscura— y antes cada una tenía su propio <style>.

   Día y noche automáticos. El pergamino es una fotografía de papel claro:
   no cambia. Lo que cambia es la superficie sobre la que se apoya y el
   color del texto que queda fuera del papel (menú, marca, pie).
   ───────────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: dark;
    /* La mesa sobre la que se apoya el pergamino */
    --pg-fondo:        #0d0d0d;
    --pg-sombra:       rgba(0, 0, 0, 0.55);
    /* Texto fuera del papel */
    --pg-marca:        rgba(255, 255, 255, 0.95);
    --pg-marca-tenue:  rgba(255, 255, 255, 0.6);
    --pg-nav:          rgba(255, 255, 255, 0.78);
    --pg-nav-fuerte:   #ffffff;
    --pg-pie:          rgba(255, 255, 255, 0.68);
    --pg-pie-fuerte:   rgba(255, 255, 255, 0.95);
    --pg-particula:    rgba(255, 230, 180, 0.5);
}

/* De día la mesa se vuelve madera clara. Si el pergamino quedara sobre un
   fondo casi blanco desaparecería: por eso el fondo baja a un tono arena
   más profundo que el propio papel, y el papel flota con sombra. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --pg-fondo:        #d8caa9;
        --pg-sombra:       rgba(90, 70, 35, 0.32);
        --pg-marca:        #241a09;
        --pg-marca-tenue:  rgba(36, 26, 9, 0.62);
        --pg-nav:          rgba(36, 26, 9, 0.72);
        --pg-nav-fuerte:   #241a09;
        --pg-pie:          rgba(36, 26, 9, 0.68);
        --pg-pie-fuerte:   #241a09;
        --pg-particula:    rgba(120, 92, 40, 0.28);
    }
}

:root[data-theme="light"] {
    color-scheme: light;
    --pg-fondo:        #d8caa9;
    --pg-sombra:       rgba(90, 70, 35, 0.32);
    --pg-marca:        #241a09;
    --pg-marca-tenue:  rgba(36, 26, 9, 0.62);
    --pg-nav:          rgba(36, 26, 9, 0.72);
    --pg-nav-fuerte:   #241a09;
    --pg-pie:          rgba(36, 26, 9, 0.68);
    --pg-pie-fuerte:   #241a09;
    --pg-particula:    rgba(120, 92, 40, 0.28);
}

/* ── Página ─────────────────────────────────────────────────────────────── */

body.pergamino-page {
    background: var(--pg-fondo);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* El encabezado entra en el flujo: estas páginas hacen scroll, y uno fijo
   terminaba tapando el pergamino con el último ítem del menú. */
body.pergamino-page .main-header { position: static; }
body.pergamino-page .main-header::before { display: none; }

body.pergamino-page .marca-nombre   { color: var(--pg-marca); }
body.pergamino-page .marca-prefijo  { color: var(--pg-marca-tenue); }
body.pergamino-page .marca:hover .marca-nombre { color: var(--pg-nav-fuerte); }
body.pergamino-page .btn-nav        { color: var(--pg-nav); }
body.pergamino-page .btn-nav:hover,
body.pergamino-page .btn-nav.active { color: var(--pg-nav-fuerte); }
body.pergamino-page .btn-nav:after  { background-color: var(--pg-nav-fuerte); }
body.pergamino-page .dust-particle  { background: var(--pg-particula); }

.pergamino-viewport {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 26px 20px 32px;
    position: relative;
    z-index: 2;
}

/* ── El pergamino ───────────────────────────────────────────────────────── */

/* El marco se estira con el contenido en vez de recortarlo. Los bordes
   rasgados del PNG viven en los 90px exteriores: se recortan como borde y el
   centro de papel se repite, así el pergamino crece sin deformarse. */
.pergamino-master {
    width: 100%;
    max-width: 580px;
    margin: auto;
    box-sizing: border-box;
    border-style: solid;
    border-width: clamp(30px, 10vw, 58px);
    border-image-source: url('../assets/pergamino_vacio.png');
    border-image-slice: 90 fill;
    /* Repite en horizontal, estira en vertical. Con "round" en los dos ejes el
       papel se tileaba y quedaban costuras horizontales a la vista. */
    border-image-repeat: round stretch;
    filter: drop-shadow(0 6px 18px var(--pg-sombra));

    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}

.pergamino-master.revealed { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .pergamino-master { transition: none; opacity: 1; }
}

.area-segura-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Tipografía sobre el papel ──────────────────────────────────────────────
   No cambia entre día y noche: el papel es el mismo en los dos modos.      */

.corona-isotipo {
    width: 100%;
    max-width: 240px;
    height: auto;
    margin-bottom: 18px;
}

.ancient-title {
    font-family: 'Marcellus', Georgia, serif;
    color: #3f2e19;
    font-size: clamp(1.35rem, 5vw, 2.1rem);
    line-height: 1.2;
    margin: 0 0 16px;
    text-align: center;
    text-wrap: balance;
}

/* Presentación protocolar. Va en el cuerpo de la página y no en la portada
   porque acá hay sitio para leerla entera. */
.identidad {
    width: 100%;
    text-align: center;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(63, 46, 25, 0.22);
}
.identidad-titulo {
    font-family: 'Tenor Sans', sans-serif;
    /* Quedaba en 13,12px: por debajo de lo comodo para un lector mayor, y en
       una serif decorativa que no ayuda. El maximo sube a 15,4px. */
    font-size: clamp(0.82rem, 2.6vw, 0.96rem);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(51, 38, 26, 0.68);
    margin: 0 0 4px;
}
.identidad-nombre {
    font-family: 'Marcellus', Georgia, serif;
    font-size: clamp(1.02rem, 3.8vw, 1.24rem);
    line-height: 1.25;
    color: #3f2e19;
    text-wrap: balance;
    margin: 0 0 12px;
}
.identidad-datos,
.identidad-obediencia {
    font-family: 'Tenor Sans', sans-serif;
    font-size: clamp(0.88rem, 3vw, 0.96rem);
    line-height: 1.45;
    color: rgba(51, 38, 26, 0.84);
    margin: 0;
}
.identidad-obediencia { margin-top: 9px; }

/* Tenor Sans es 20% mas ancha que Almendra: el mismo texto ocupa mas
   renglones. Es el precio de una fuente mas legible; el pergamino queda
   mas alto. */
.ancient-text {
    font-family: 'Tenor Sans', sans-serif;
    color: #33261a;
    font-size: clamp(1rem, 3.4vw, 1.12rem);
    line-height: 1.62;
    /* Sin justificado: en una columna de 250px abre ríos de espacio entre
       palabras y se lee peor de lo que se ve. */
    text-align: left;
    text-wrap: pretty;
    width: 100%;
}

.ancient-text p { margin: 0 0 14px; }
.ancient-text p:last-child { margin-bottom: 0; }

.ancient-sub {
    font-family: 'Marcellus', Georgia, serif;
    color: #3f2e19;
    font-size: clamp(1.02rem, 3.9vw, 1.25rem);
    line-height: 1.25;
    margin: 26px 0 8px;
    width: 100%;
    text-wrap: balance;
}

/* ── Fila de logos ──────────────────────────────────────────────────────────
   Va donde Historia lleva la corona. Son marcas de otras instituciones: se
   muestran tal como las publican ellas, sin recortar ni retocar.

   Sin celdas de ancho igual. Ese era el problema: una cuadrícula le da a
   cada logo el mismo ancho, y como las proporciones van de 1:1 a 6,2:1, el
   más ancho se ahogaba en su celda mientras el más angosto desperdiciaba la
   mitad de la suya. Acá cada uno lleva su propia medida, elegida para que
   pesen parecido a la vista, y comparten el renglón según lo que ocupan.  */
.fila-logos {
    list-style: none; margin: 0 0 24px; padding: 0 0 24px;
    width: 100%;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 16px 18px;
    border-bottom: 1px solid rgba(63, 46, 25, 0.22);
}
.fila-logos li { margin: 0; display: flex; align-items: center; }
.fila-logos img { display: block; width: auto; height: auto; max-width: 100%; }

/* El escudo llena el 100% de su caja; el emblema circular de la GLSP, al lado,
   ocupa solo el 82,5% de la suya --filas 0 a 103 de 126, medido sobre el propio
   archivo--, porque debajo lleva la línea de base del logotipo. A igual altura
   de caja el escudo se veía 22% más grande.

   Por eso su caja va al 82,5% de la del logotipo: 78 x 0,825 = 64. Así los dos
   dibujos miden lo mismo, que es lo que se ve. */
/* ── Los cuatro logotipos ─────────────────────────────────────────────────────
   TODO se deriva de una sola medida, `--emblema`, que es el alto de la caja de
   la imagen de la GLSP. Los factores no son gusto: salen de medir los archivos
   con un canvas, leyendo el canal alfa.

     escudo BTS  0,825   su dibujo llena el 100% de su caja; el disco de la GLSP
                         solo el 82,5% de la suya (104 filas de 126), porque
                         debajo lleva la linea de base del logotipo. Con este
                         factor los dos DIBUJOS miden lo mismo, que es lo que se
                         compara a ojo.
     subida      0,087   el hueco de abajo le corre el centro del disco un 8,7%
                         de su caja hacia arriba. Centrar las cajas alineaba las
                         cajas, no los dibujos.
     nombre      0,2308  18px cuando el emblema mide 78. Tres renglones a 1,15
                         dan 62px de alto, contra los 61,9 del bloque de texto
                         de la GLSP.

   El maximo de `--emblema` lo fija que los dos bloques entren en un renglon.
   El papel util mide 464px como techo --el pergamino esta topado en 580 y las
   orillas rotas se comen el resto-- y los dos bloques juntos piden 6,75 veces
   el emblema, asi que el techo es 464/6,75 = 68. Se deja en 62 para que entre
   con aire y para no achicar de mas el texto de la GLSP, que es mapa de bits.

   ABAJO DE 360px NO ENTRAN en un renglon sin dejar el texto de la GLSP por
   debajo de 5px, ilegible. Ahi se apilan, que es lo correcto. */
.fila-logos {
    /* El papel util mide 0,8 x el ancho de pantalla menos 40 --medido, no
       supuesto-- y se topa en 464px. Los dos bloques juntos piden 6,74 veces el
       emblema, asi que el emblema no puede pasar de (0,8vw - 40) / 6,74, que es
       11,87vw - 5,93. Se usa 11,2vw - 5,6, un 6% por debajo, para que entre con
       aire y no dependa de que la suma de exacta. */
    --emblema: clamp(26px, calc(11.2vw - 5.6px), 62px);
    gap: calc(var(--emblema) * 0.26) calc(var(--emblema) * 0.23);
}

.logo-bts {
    gap: calc(var(--emblema) * 0.154);
    /* Sube escudo y nombre juntos para que el escudo quede a la altura del
       disco de la GLSP, que esta corrido hacia arriba dentro de su imagen. */
    transform: translateY(calc(var(--emblema) * -0.087));
}
.logo-bts img { height: calc(var(--emblema) * 0.825); }

.logo-bts-nombre {
    display: flex;
    flex-direction: column;
    font-family: 'Marcellus', Georgia, serif;
    font-size: calc(var(--emblema) * 0.2308);
    line-height: 1.15;
    color: #3f2e19;
    /* Los tres renglones estan escritos a mano en el marcado: no se reparten
       solos ni cambian con el ancho. */
    white-space: nowrap;
}
/* Igual que en la GLSP, donde la ultima linea es mas chica que las de arriba:
   el numero acompana al nombre, no compite con el. */
.logo-bts-numero {
    font-size: 0.82em;
    letter-spacing: 0.06em;
    color: rgba(63, 46, 25, 0.78);
    margin-top: 0.1em;
}

.logo-glsp img     { height: var(--emblema); }

/* Los tres logotipos ajenos llevan a su sitio oficial; el escudo de la logia no,
   porque es el sitio en el que ya estas.

   El enlace tiene que ser un contenedor flexible: sin esto se comporta como
   texto en linea, el `picture` de adentro arrastra el espacio del renglon y los
   logotipos dejan de quedar a la altura calculada. */
.fila-logos a {
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity .18s ease;
}
.fila-logos a:hover { opacity: .72; }
/* El foco se dibuja alrededor del logotipo: sin esto, al llegar tabulando no se
   ve donde esta parado el teclado. */
.fila-logos a:focus-visible {
    outline: 2px solid #7a5c1e;
    outline-offset: 4px;
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .fila-logos a { transition: none; }
}

/* Los dos jovenes van al renglon de abajo, en la misma proporcion que tenian. */
.logo-arcoiris img { height: calc(var(--emblema) * 0.513); }
.logo-demolay img  { height: calc(var(--emblema) * 0.462); }

/* ── Enlaces sobre el papel ─────────────────────────────────────────────────
   Sin tarjetas: filas separadas por una línea, como una lista escrita a mano
   en el margen. Tres tarjetas iguales en fila es el patrón más gastado que
   existe y en el celular se apilan igual.                                  */
.enlace-lista {
    list-style: none; padding: 0; margin: 18px 0 0;
    width: 100%;
    font-family: 'Tenor Sans', sans-serif;
}
.enlace-lista li { margin: 0; border-top: 1px solid rgba(63, 46, 25, 0.2); }
.enlace-lista li:first-child { border-top: none; }

.enlace-lista a {
    display: block; padding: .85rem .1rem;
    text-decoration: none; color: #33261a;
    transition: padding-left .18s ease;
}
.enlace-lista a:hover,
.enlace-lista a:focus-visible { padding-left: .5rem; }

/* Raleway y no Tenor Sans: Tenor Sans tiene un solo peso y el navegador
   falsificaria la negrita. Ademas esto es un enlace, o sea interfaz. */
.enlace-nombre {
    font-family: 'Raleway', sans-serif;
    display: block; font-weight: 600; color: #5a3b12;
    font-size: clamp(.98rem, 3.3vw, 1.06rem);
}
.enlace-nombre::after {
    content: '↗'; font-size: .78em; margin-left: .4em; opacity: .6;
}
.enlace-desc {
    display: block; color: rgba(51, 38, 26, 0.72);
    font-size: clamp(.86rem, 3vw, .94rem); line-height: 1.5; margin-top: .1rem;
}

@media (prefers-reduced-motion: reduce) {
    .enlace-lista a { transition: none; }
}

/* ── Pie ────────────────────────────────────────────────────────────────────
   El mismo de todo el sitio: nada más que lo legal, fino y a la derecha.   */
.pie-legal {
    position: relative; z-index: 2;
    display: flex; justify-content: flex-end;
    padding: 4px 20px 22px;
}
.pie-legal a {
    color: var(--pg-pie); text-decoration: none; font-size: 13px;
    /* Área táctil cómoda: el texto es chico, el blanco de toque no. */
    display: inline-flex; align-items: center;
    padding: 0 10px; min-height: 44px;
}
.pie-legal a:hover,
.pie-legal a:focus-visible { color: var(--pg-pie-fuerte); }


/* ── Selector de tema ───────────────────────────────────────────────────────
   Tres estados: automático (sigue al sistema), claro y oscuro. Va en el
   encabezado, al lado del menú.                                           */
/* El ARMADO del encabezado (marca, menu y boton) vive en index.css y en un solo
   lugar. Acá estaba escrito de nuevo, palabra por palabra, con el prefijo
   `body.pergamino-page` delante: dos copias del mismo diseño, y la de acá le
   ganaba por especificidad. Cualquier arreglo en index.css no llegaba a estas
   páginas, que es exactamente como se rompió el encabezado en el celular.
   Acá solo van las diferencias reales del pergamino, que son de color. */

.selector-tema {
    background: none; border: 1px solid currentColor; border-radius: 50%;
    color: var(--pg-nav);
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: .72;
    transition: opacity .25s ease, color .25s ease;
    /* El blanco de toque llega a 44px sin agrandar el círculo dibujado. */
    outline-offset: 3px;
}
/* El blanco de toque llega a 44px sin agrandar el circulo dibujado. */
.selector-tema::before {
    content: ''; position: absolute;
    width: 44px; height: 44px;
}
.selector-tema:hover, .selector-tema:focus-visible { opacity: 1; color: var(--pg-nav-fuerte); }
.selector-tema svg { width: 19px; height: 19px; display: block; }

@media (prefers-reduced-motion: reduce) { .selector-tema { transition: none; } }

/* El menú compacto para pantallas angostas también estaba duplicado acá; vive
   en index.css. Ver la nota de arriba. */

/* ─── FORMULARIO DE CONTACTO ──────────────────────────────────────────────── */
/* Vive al final de Preguntas, que es donde nace la intención de escribir. No se
   agregó al menú: habría sido un quinto elemento, y quien quiere contactar llega
   igual desde la primera respuesta, que enlaza acá. */
.contacto { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }

.contacto-campo { display: flex; flex-direction: column; gap: 6px; }

.contacto-etiqueta {
    font-family: 'Raleway', sans-serif;
    font-size: 0.9375rem;     /* 15px, y ARRIBA del campo: el texto gris adentro
                                 desaparece al escribir y desorienta */
    font-weight: 600;
    color: var(--pg-tinta, #2e2411);
}

.contacto input,
.contacto textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 11px 13px;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;          /* 16px: por debajo, iOS hace zoom al enfocar */
    color: #241a09;
    background: rgba(255, 253, 246, 0.82);
    border: 1px solid rgba(120, 90, 40, 0.4);
    border-radius: 8px;
    outline: none;
}
.contacto input:focus,
.contacto textarea:focus { border-color: #8a6d12; background: #fffdf6; }
.contacto textarea { min-height: 130px; resize: vertical; line-height: 1.55; }

.contacto-ayuda {
    font-family: 'Raleway', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #5a4520;
}

/* El campo trampa se esconde fuera de la pantalla y no con display:none, que
   algunos robots detectan y saltean. */
.contacto-trampa {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.contacto-aviso {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.contacto-aviso:empty { display: none; }
.contacto-aviso.error {
    padding: 10px 12px;
    color: #8a1a1a;
    background: rgba(138, 26, 26, 0.09);
    border-radius: 8px;
}

.contacto-boton {
    width: 100%;
    min-height: 52px;
    font-family: 'Raleway', sans-serif;
    font-size: 1.0625rem;     /* 17px */
    font-weight: 600;
    color: #fdf8ec;
    background: #7B1A1A;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s;
}
.contacto-boton:hover:not(:disabled) { background: #9B2424; }
.contacto-boton:disabled { opacity: 0.6; cursor: default; }

.contacto-listo {
    margin: 0 0 10px;
    font-family: 'Marcellus', Georgia, serif;
    font-size: 1.25rem;       /* 20px */
    color: #241a09;
}

/* Los enlaces dentro del texto del pergamino. Salian con el azul subrayado que
   pone el navegador cuando nadie decidio nada: en una pagina que busca parecer
   un documento antiguo, eso desentona mas que cualquier otra cosa.

   Van en el carmesi de la logia --el mismo del boton de contacto de esta misma
   pagina-- y conservan el subrayado, que es lo que hace que un enlace se
   reconozca como enlace sin depender del color. Pero fino, separado del texto y
   apagado, para que acompañe la lectura en vez de interrumpirla. Al pasar por
   encima se afirma. Contraste sobre el papel: 13,8:1. */
.ancient-text a,
.ancient-sub a {
    color: #7B1A1A;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(123, 26, 26, 0.38);
    text-underline-offset: 3px;
    transition: text-decoration-color .15s ease, color .15s ease;
}
.ancient-text a:hover,
.ancient-text a:focus-visible {
    color: #5e1414;
    text-decoration-color: #7B1A1A;
}
.ancient-text a:focus-visible {
    outline: 2px solid #7B1A1A;
    outline-offset: 3px;
    border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .ancient-text a { transition: none; }
}