/* =========================================================

   papyriSJGSM — v01  (DERIVADA DE MASTER 00 FINAL)

   ---------------------------------------------------------

   Este archivo es la versión v01 del CSS.

   BASE: papyriSJGSM (MASTER 00) Final (congelado).



   Regla de trabajo:

   - MASTER 00 no se modifica.

   - v01 es la primera evolución controlada.

   - Cambios nuevos → v02, v03, ...



   Objetivo de v01:

   - Limpieza / orden / legibilidad (sin cambios visuales)

   - Correcciones menores de codificación (UTF-8 sin BOM)

   ========================================================= */



/* =========================================================

   ÍNDICE STYLE.CSS – papyriSJGSM v01

   ---------------------------------------------------------

   00) Fuentes + imports

   01) Base Papyrus – html/body + fondo global

   02) Layout global / page wrapper

   03) Header

   04) Navegación principal

   05) TIPOGRAFÍA — posts y contenido (tamaños títulos, texto, h2–h4, listas)

   06) Área de contenido / posts (layout)

   07) Comentarios

   08) Sidebar

   09) Footer

   10) Formularios (buscador + forms)

   11) Utilidades / alineaciones

   12) Fondos por página (S.J.G.S.M., @, $, &)

   13) Home – Vídeo de fondo S.J.G.S.M.

   14) Títulos de post – tablilla title_post.webp

   15) Sombra de widgets y contenido posts

   16) VIDEO BACKGROUNDS — @ / $ / & (MASTER)

   17) Social Icons — inline (centro posts)

   18) META — nube lapis + oro metálico

   

   50) CSS editorial S.J.G.S.M. (antes en el plugin)

   50.03 META
   50.04 NAV BOTONES
   50.05 TIPOGRAFÍA
   50.06 MENU
   50.07 FIX NAV
   50.08 NAV eje post móvil
   50.09 RRSS mobile spacing  ← nuevo

   96) Formularios – overrides puntuales (si hace falta)

   97) Parallax / Experimentos temporales

   98) Layout 1080 Escritorio – Producción

   99) Laboratorio / Overrides puntuales

   ========================================================= */





/* =========================================================

   00) FUENTES + IMPORTS

   ========================================================= */



@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&display=swap');



/*



   Nota:



   – Papyrus-10 sigue siendo el tema padre.



   – Este MASTER 00 controla ya las imágenes (carpeta /papyriSJGSM/images/)



     y el CSS editorial S.J.G.S.M.



*/





/* =========================================================

   01) BASE PAPYRUS – HTML/BODY + FONDO GLOBAL

   ========================================================= */



body {



    font: 80%/150% Arial, "Trebuchet MS", Tahoma;



    color: #000000;



    background-color: #f4e9c8; /* tono papiro */



    /* Fondo principal desde el tema MASTER (tile principal) */



    background-image: url("images/body_bg.webp");



    background-position: center top;



    background-repeat: repeat;



    background-attachment: fixed;



    margin: 0;



    padding: 0;



}





/* =========================================================

   02) LAYOUT GLOBAL / PAGE WRAPPER

   ========================================================= */



#page {



    margin: 0 auto 0;



    width: 760px;



}



#page_back {



    background: url("images/content.webp");



}





/* =========================================================

   03) HEADER

   ========================================================= */



#header {



    width: 760px;



    height: 150px;



    background: url("images/header_bg.webp") no-repeat;



    margin: 0;



}



#header_box {



    width: 600px;



    padding: 70px 0 0 140px;



}



#header h1 {



    font: bold 36px/100% "Trebuchet MS", Tahoma, Arial;



    color: #4c3c2d;



    border-bottom: none;



}



#header h1 a {



    color: #4c3c2d;



    text-decoration: none;



}



#header h1 a:hover {



    color: #7e532a;



    text-decoration: none;



}



#header p {



    color: #4c3c2d;



    font-size: 15px;



}





/* =========================================================

   04) NAVEGACIÓN PRINCIPAL

   ========================================================= */



#nav {



    width: 760px;



    height: 80px;



}



#nav ul {



    list-style: none;



    margin: 0;



    padding: 0 0 0 40px;



}



#nav li {



    list-style: none;



    display: inline;



    float: left;



    margin: 0 0 0 10px;



}



#nav a {



    font: bold 15px/100% Arial, Helvetica, sans-serif;



    display: block;



    color: #4c3c2d;



    text-decoration: none;



    padding: 10px 13px 13px 13px;



    margin: 0;



    background: url("images/nav.webp") bottom;



}



#nav a:hover,



#nav .current_page_item a {



    padding: 25px 13px 13px 13px;



}



#nav .left {



    float: left;



}



#nav .right {



    float: right;



}





/* =========================================================

   NAV — HOME ICON (OJO DE HORUS) — v01

   ---------------------------------------------------------

   • Home sustituido por icono Horus

   • Reposo: café oscuro (papiro)

   • Hover: lapislázuli mineral (menos eléctrico)

   • Home activo: halo dorado + respiración ultra-lenta

   • Efecto relieve: “sale” al hover sin romper nav.webp

   ========================================================= */



#nav ul.left > li:first-child > a{

  position: relative;

}



/* BASE (reposo) */

#nav ul.left > li:first-child > a::before{

  content:"𓂀";

  display:block;

  text-align:center;



  font-size:30px;

  line-height:0.5;



  /* café oscuro papiro */

  color:#4c3c2d;



  /* bold limpio (engrosado sutil) */

  text-shadow:

    0 0 0 currentColor,

    0.6px 0 currentColor,

   -0.6px 0 currentColor;



  transform: scale(1.06);

  transition:

    color .35s ease,

    text-shadow .35s ease,

    transform .35s ease;

}



/* HOVER — lapislázuli mineral + “sale hacia fuera” */

#nav ul.left > li:first-child > a:hover::before{

  color:#2f5aa6; /* lapis mineral */

  text-shadow:

    0 0 2px rgba(18,38,88,.75),

    0 0 7px rgba(47,90,166,.45),

    0 6px 10px rgba(0,0,0,.25); /* sombra proyectada */

  transform: translateY(-2px) scale(1.16);

}



/* HOME ACTIVO — halo dorado + respiración ultra-lenta */

body.home #nav ul.left > li:first-child > a::before{

  color:#4c3c2d; /* mantiene café */

  text-shadow:

    0 0 0 currentColor,

    0.6px 0 currentColor,

   -0.6px 0 currentColor,

    0 0 8px rgba(210,170,90,.35); /* halo dorado suave */

  animation: sjgsm-horus-breathe 7.5s ease-in-out infinite;

}



/* HOME + HOVER — lapis gana, conserva toque dorado */

body.home #nav ul.left > li:first-child > a:hover::before{

  color:#2f5aa6;

  text-shadow:

    0 0 2px rgba(18,38,88,.75),

    0 0 7px rgba(47,90,166,.45),

    0 0 10px rgba(210,170,90,.25);

  transform: translateY(-2px) scale(1.18);

}



/* Respiración (micro-zoom + micro-brillo, muy sutil) */

@keyframes sjgsm-horus-breathe{

  0%,100%{

    transform: scale(1.06);

    filter: none;

  }

  50%{

    transform: scale(1.10);

    filter: brightness(1.06);

  }

}





/* =========================================================

   05) TIPOGRAFÍA — POSTS Y CONTENIDO

      (tamaños títulos, texto, h2–h4, listas)

   ========================================================= */



a {



    color: #4c3c2d;



    text-decoration: underline;



}



a:hover {



    color: #7e532a;



}



img {



    border: none;



    float: left;



    margin-right: 10px;



}



p {



    padding: 0 0 15px 0;



    margin: 0;



    color: #000000;



    text-align: justify;



}



h1,



h2 {



    color: #4c3c2d;



    margin: 0 0 2px;



    border-bottom: 1px dotted #242424;



    letter-spacing: -1px;



    font: normal 190%/100% "Trebuchet MS", Tahoma, Arial;



    padding-bottom: 3px;



}



h2 a {



    color: #4c3c2d;



    text-decoration: none;



}



h2 a:hover {



    color: #7e532a;



}



h3 {



    font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;



    color: #4c3c2d;



    margin: 10px 0 5px;



}



h4 {



    font: normal 130%/100% "Trebuchet MS", Tahoma, Arial;



    color: #4c3c2d;



    margin: 10px 0 5px;



}



ul {



    list-style-type: circle;



}



blockquote {



    border-left: 5px #4c3c2d solid;



    margin: 0 0 0 10px;



    padding: 5px;



}



/* --- TÍTULO DE POST (CONTROL EXPLÍCITO) --- */

.post-title h2,

.post-title h2 a {

    font-size: 150%;

    line-height: 1;

    font-family: "Trebuchet MS", Tahoma, Arial;

    font-weight: normal;

}





/* =========================================================

   06) ÁREA DE CONTENIDO / POSTS (LAYOUT)

   ========================================================= */



#content {



    padding: 10px 0 30px 0;



    float: left;



    width: 505px;



    overflow: hidden;



}



.post {



    clear: both;



    padding-top: 15px;



}



#title_back {



    background: url("images/title_post.webp") no-repeat;



    width: 505px;



    float: left;



    padding: 5px 0 15px 0;



}



.post-date {



    width: 45px;



    height: 45px;



    float: left;



    margin-left: 5px;



}



.post-month {



    font: bold 16px Impact, Arial, Tahoma;



    text-transform: uppercase;



    color: #4c3c2d;



    text-align: center;



    display: block;



    line-height: 11px;



    padding-top: 8px;



    margin-left: -2px;



}



.post-day {



    font: bold 16px Impact, Arial, Tahoma;



    text-transform: uppercase;



    color: #4c3c2d;



    text-align: center;



    display: block;



    line-height: 18px;



    padding-top: 5px;



    margin-left: -2px;



}



.post-title {



    float: left;



    margin-left: 15px;



    width: 420px;



}



.entry {



    clear: both;



    padding: 10px 0 0 65px;



}



.navigation {



    clear: both;



    padding: 10px 0 0 65px;



}





/* =========================================================

   07) COMENTARIOS

   ========================================================= */



.commentlist {



    margin: 10px 0;



    padding-left: 20px;



    line-height: 130%;



}



.commentlist li {



    padding: 5px 10px;



}



.commentlist cite {



    font-weight: bold;



    font-style: normal;



    font-size: 120%;



    color: #4c3c2d;



}



.commentlist cite a {



    color: #4c3c2d;



}



.commentlist cite a:hover {



    color: #7e532a;



}



.commentlist small {



    margin-bottom: 5px;



    display: block;



    font-size: 87%;



}



#commentform {



    margin-top: 10px;



    font: 110% Arial, Helvetica, sans-serif;



}



#commentform p {



    padding: 6px 0;



    margin: 0;



}



#commentform label {



    color: #4c3c2d;



    font-size: 87%;



}



#commentform input {



    width: 200px;



    border: 1px solid #a29161;



    padding: 3px;



    margin-top: 3px;



    color: #775e24;



}



#commentform textarea {



    width: 476px;



    height: 115px;



    border: 1px solid #a29161;



    padding: 2px;



    margin-top: 3px;



    color: #775e24;



}



#commentform #submit {



    font: bold 12px Arial, Helvetica, sans-serif;



    color: #4c3c2d;



    border: none;



    float: right;



    width: 155px;



    height: 50px;



    cursor: pointer;



}





/* =========================================================

   08) SIDEBAR

   ========================================================= */



#sidebar {



    float: right;



    padding: 20px 30px 20px 0;



    width: 200px;



    color: #4c3c2d;



    overflow: hidden;



}



#sidebar_back {



    margin: 10px 0 0 0;



    padding: 0;



}



/* Título sidebar (h2 o .sidebartitle) */



#sidebar h2,



#sidebar .sidebartitle {



    font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;



    color: #4c3c2d;



    margin: 20px 0 2px;



    border-bottom: 1px solid #4c3c2d;



}



/* Texto / enlaces sidebar */



#sidebar a {



    color: #4c3c2d;



    text-decoration: none;



}



#sidebar a:hover {



    color: #7e532a;



    text-decoration: none;



}



/* Listas nivel 1 */



#sidebar ul {



    margin: 0;



    padding: 0;



}



#sidebar ul li {



    list-style: none;



    margin: 0;



    padding: 1px 10px 10px 15px;



    border: none;



}



/* Listas nivel 2 */



#sidebar ul li ul {



    padding: 0;



    margin: 0;



}



#sidebar ul li ul li {



    padding: 2px 0 2px 10px;



    border-bottom: 1px solid #4c3c2d;



}



/* Listas nivel 3 */



#sidebar ul li ul li ul li {



    padding: 1px 0 1px 10px;



    border: none;



}



/* Sub-pages */



ul.list-page li ul li,



li.widget_pages li ul li {



    padding-left: 10px;



}



/* Calendar widget */



li.widget_calendar td {



    padding: 1px 7px;



}



/* Text widget */



.textwidget {



    padding-top: 5px;



}





/* =========================================================

   09) FOOTER

   ========================================================= */



#footer {



    clear: both;



    width: 760px;



    height: 84px;



    background: url("images/footer_bg.webp") bottom no-repeat;



    position: relative;



    bottom: -50px;



    color: #4c3c2d;



    font-size: 95%;



    margin: 0 0 40px 0;



    padding: 10px 0 10px 0;



}



#footer a {



    color: #4c3c2d;



}



#footer a:hover {



    color: #7e532a;



}



#footer p {



    color: #4c3c2d;



    text-align: center;



    margin: 0;



    padding: 0;



}





/* =========================================================

   10) FORMULARIOS (BUSCADOR + FORMS)

   ========================================================= */



form {



    margin: 0;



    padding: 0;



}



#searchform {



    margin: 0 10px 0 0;



    padding: 7px 11px 15px 11px;



}



#searchform br {



    display: none;



}



#searchform .s {



    border: 1px solid #a29161;



    width: 135px;



    height: 19px;



    padding: 4px 3px 0 5px;



    margin-right: 2px;



    color: #000000;



    font-weight: normal;



}



#searchform .ss {



    border: none;



    width: 23px;



    height: 23px;



}



/* --- BUSCADOR: BOTÓN OJO DE HORUS (con <button>) --- */

#searchform { position: relative; }



#searchform .ss{

    width: 42px;

    height: 42px;

    border: none;

    background: none;

    padding: 0;

    margin: 0;

    cursor: pointer;

    vertical-align: middle;

}



#searchform .ss .sjgsm-horus{

    display: block;

    font-size: 26px;

    line-height: 42px;

    text-align: center;

    color: #b89a5a;

    transition: color .2s ease, transform .2s ease;

}



#searchform .ss:hover .sjgsm-horus{

    color: #e1c27d;

    transform: scale(1.1);

}





/* =========================================================

   11) UTILIDADES / ALINEACIONES

   ========================================================= */



.center {



    text-align: center;



}



img.center,



img[align="center"] {



    display: block;



    margin-left: auto;



    margin-right: auto;



}



.alignleft {



    float: left;



}



img.alignleft,



img[align="left"] {



    float: left;



    margin: 2px 10px 5px 0;



}



.alignright {



    float: right;



}



img.alignright,



img[align="right"] {



    float: right;



    margin: 2px 0 5px 10px;



}



.clear {



    clear: both;



}



hr.clear {



    clear: both;



    visibility: hidden;



    margin: 0;



    padding: 0;



}




/* =========================================================
   12) FONDOS POR PÁGINA (S.J.G.S.M., @, $, &)
   =========================================================

   IMPORTANTE (LIMPIEZA v01):
   - Los fondos específicos de @ / $ / & (WebP + parallax / sin vídeo)
     se gestionan EXCLUSIVAMENTE en la SECCIÓN 16 (MASTER).
   - Esta sección 12 queda solo como referencia/documentación
     para evitar duplicidad y comportamientos inconsistentes.

   Home – S.J.G.S.M.
   - El fondo visual lo aporta el vídeo (ver sección 13).
   - El fondo global por defecto se gestiona en secciones 01/02.
========================================================= */


/* =========================================================

   13) HOME – VÍDEO DE FONDO S.J.G.S.M.

   ========================================================= */



/* Color base mientras carga el vídeo */



body.home {



    background-color: #000000;



}



/* Vídeo de fondo pegado al viewport, detrás del papiro */



body.home #sjgsm-bg-video {



    position: fixed;



    top: 0;



    left: 0;



    width: 100vw;



    height: 100vh;



    object-fit: cover;     /* auto-ajuste pantalla */



    z-index: -10;          /* por detrás de todo el contenido */



    pointer-events: none;  /* no interfiere con los clics */



}



/* Por si quedaran restos de capas antiguas, las ocultamos por seguridad */



body.home #sjgsm-layer1,



body.home #sjgsm-layer2,



body.home #sjgsm-layer3,



body.home #sjgsm-layer4 {



    display: none !important;



}





/* =========================================================

   14) TÍTULOS DE POST – TABLILLA title_post.webp

   ========================================================= */



.post-title {



    transform-style: preserve-3d;



    transition: transform 0.35s ease, box-shadow 0.35s ease;



}



@media (hover: hover) and (pointer: fine) {



    .post-title:hover {



        transform: rotateX(-4deg) rotateY(8deg) translateZ(10px);



        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);



    }



}





/* =========================================================

   15) SOMBRA DE FORMA — WIDGETS + CONTENIDO DE POSTS

   ========================================================= */



/* Widgets */



#sidebar .widget img {



    transition: filter 0.25s ease, transform 0.25s ease;



}



@media (hover: hover) and (pointer: fine) {



    #sidebar .widget img:hover {



        filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));



        transform: translateY(-2px);



    }



}



/* Contenido de posts (mismo efecto) */



#content img,



#content video,



#content iframe,



.post img,



.post video,



.post iframe,



.entry-content img,



.entry-content video,



.entry-content iframe {



    transition: filter 0.25s ease, transform 0.25s ease;



    max-width: 100%;



    height: auto;



}



@media (hover: hover) and (pointer: fine) {



    #content img:hover,



    #content video:hover,



    #content iframe:hover,



    .post img:hover,



    .post video:hover,



    .post iframe:hover,



    .entry-content img:hover,



    .entry-content video:hover,



    .entry-content iframe:hover {



        filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));



        transform: translateY(-2px);



    }



}


/* =========================================================
   16) FONDOS — HOME + @ / $ / & (WebP fijo + “breathing” desktop)
   MASTER UNIFICADO — ARQUITECTURA ÚNICA
   ---------------------------------------------------------
   Objetivo:
   - Móvil: fixed background effect (fondo fijo + scroll del papiro encima)
     SIN vídeo en HOME por defecto (rápido y consistente).
   - Desktop/Tablet:
       * @/$/& → WebP fijo con “respiración” usando --sjgsm-parallax-y
       * HOME → puede usar vídeo (Sección 13) + WebP fijo como fallback detrás

   Switch global (functions.php):
   - body.sjgsm-home-video-mobile-on  → en móvil se permite vídeo HOME y se apaga WebP
   - body.sjgsm-home-video-mobile-off → en móvil NO vídeo HOME y se usa WebP fijo

   Fondos:
   - HOME: images/Layer1-Home.webp
   - @ LAB (page-id-1000): images/bg-lab-tile.webp
   - $ XYZ (page-id-1016): images/bg-xyz-tile.webp
   - & ABC (page-id-1088): images/bg-abc-tile.webp
========================================================= */


/* =========================================================
   16.01) Seguros: nunca mostrar vídeos “alternativos” @/$/&
========================================================= */

body.page-id-1000 #sjgsm-bg-video-lab,
body.page-id-1016 #sjgsm-bg-video-xyz,
body.page-id-1088 #sjgsm-bg-video-abc{
  display:none !important;
}


/* =========================================================
   16.02) Motor único de fondo fijo (capa ::before) — 4 páginas
========================================================= */

body.home::before,
body.page-id-1000::before,
body.page-id-1016::before,
body.page-id-1088::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-10;
  pointer-events:none;

  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;

  /* por defecto: sin parallax (se activará SOLO en desktop @/$/& más abajo) */
  transform:translate3d(0, 0, 0);
  will-change:auto;
}

/* Asignación de imágenes */
body.home::before{ background-image:url("images/Layer1-Home.webp"); }
body.page-id-1000::before{ background-image:url("images/bg-lab-tile.webp"); }
body.page-id-1016::before{ background-image:url("images/bg-xyz-tile.webp"); }
body.page-id-1088::before{ background-image:url("images/bg-abc-tile.webp"); }


/* =========================================================
   16.03) Desktop/Tablet: “breathing” SOLO @/$/&
   - Se usa el mismo --sjgsm-parallax-y generado por tu script
   - HOME se queda sin “breathing” aquí (porque HOME puede usar vídeo)
========================================================= */

@media (min-width:1025px){
  body.page-id-1000::before,
  body.page-id-1016::before,
  body.page-id-1088::before{
    transform:translate3d(0, var(--sjgsm-parallax-y, 0px), 0);
    will-change:transform;
  }
}


/* =========================================================
   16.04) MÓVIL: fixed background effect estable
   - No parallax en ningún caso
   - HOME: por defecto ocultar vídeo en móvil (consistente)
========================================================= */

@media (max-width:1024px){
  body.home::before,
  body.page-id-1000::before,
  body.page-id-1016::before,
  body.page-id-1088::before{
    transform:translate3d(0, 0, 0) !important;
    will-change:auto !important;
  }
}

/* HOME: ocultar vídeo SIEMPRE en móvil (por defecto) */
@media (max-width:768px){
  body.home #sjgsm-bg-video{
    display:none !important;
  }
}


/* =========================================================
   16.05) SWITCH: si el vídeo móvil HOME está ON
   - Se muestra el vídeo en móvil
   - Se apaga el WebP ::before para no duplicar capas
========================================================= */

@media (max-width:768px){
  body.sjgsm-home-video-mobile-on.home #sjgsm-bg-video{
    display:block !important;
  }

  body.sjgsm-home-video-mobile-on.home::before{
    content:none !important;
    background-image:none !important;
  }
}
/* =========================================================
   17) SOCIAL ICONS INLINE — CENTRADO + LAPIS REPOSO SJGSM
========================================================= */

.navigation.sjgsm-nav-block{ clear:both; }

.navigation.sjgsm-nav-block .sjgsm-nav-links{ text-align:center; }

.navigation.sjgsm-nav-block .sjgsm-social-inline{
  margin:25px 0 0;
  text-align:center;
}

/* reposo lapis */
.navigation.sjgsm-nav-block .sjgsm-social-inline a{
  display:inline-block;
  margin:0 5px;

  border:1px solid #2f5aa6;
  border-radius:999px;
  padding:6px;

  box-shadow:0 3px 10px rgba(0,0,0,.25);
  transition:all .25s ease;
}

.navigation.sjgsm-nav-block .sjgsm-social-inline img{
  width:30px;
  height:30px;
  opacity:.9;
  transition:all .25s ease;
}

/* hover oro */
.navigation.sjgsm-nav-block .sjgsm-social-inline a:hover{
  border-color:#FFD700;
  transform:translateY(-3px) scale(1.08);

  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    0 0 12px rgba(255,215,0,.35);
}

.navigation.sjgsm-nav-block .sjgsm-social-inline a:hover img{ opacity:1; }



/* =========================================================
   18) HOVERS SJGSM — UTILIDADES (MASTER)
   ---------------------------------------------------------
   Limpieza:
   - No pisa PREVIOUS/NEXT (50.04) ni META (50.03) ni RRSS (17).
   - Solo deja variables + clase utilitaria opcional.
   ========================================================= */

:root{
  --sjgsm-gold: rgba(212,175,55,1);
  --sjgsm-gold-glow: rgba(212,175,55,.35);
  --sjgsm-shadow: rgba(0,0,0,.45);
}

/* Clase utilitaria (solo si la usas en HTML) */
.sjgsm-hover-3d{
  display:inline-block;
  transition: all .25s ease;
}

@media (hover: hover) and (pointer: fine){
  .sjgsm-hover-3d:hover{
    transform: translateY(-3px) scale(1.04);
    filter: drop-shadow(0 6px 10px var(--sjgsm-shadow))
            drop-shadow(0 0 6px var(--sjgsm-gold-glow));
  }
}


/* =========================================================

   50) CSS EDITORIAL S.J.G.S.M. (ANTES EN EL PLUGIN)

   ========================================================= */




/* 50.01) GLOBAL / LAYOUT RESPONSIVE */



@media (max-width: 768px) {



    body,



    html,



    #page,



    #wrapper,



    .background,



    .bg,



    .parallax,



    .fixed,



    .site-background {



        background-attachment: scroll !important;



        background-position: center top !important;



    }



}



/* Ocultar comentarios globalmente */



.comments-area,



#comments,



.comment-respond {



    display: none !important;



}



/* 50.02) WIDGET FECHA + LOCATION WEATHER */



.sjgsm-date-widget {



    background: radial-gradient(circle at top, #3b2a16 0%, #050508 65%, #010101 100%);



    color: #f3e7cf;



    border: 1px solid #8b6b2f;



    border-radius: 10px;



    padding: 14px 22px;



    max-width: 230px;



    margin: 0 auto;



    text-align: center;



    box-shadow: 0 10px 20px rgba(0,0,0,0.6);



    font-family: "Georgia", "Times New Roman", serif;



}



.sjgsm-date-weekday {



    font-size: 1.1rem;



    font-weight: 600;



    text-transform: uppercase;



    color: #f0e6cf;



    margin-bottom: 1px;



}



.sjgsm-date-day {



    font-size: 3.2rem;



    font-weight: 700;



    line-height: 1;



    color: #d4b86e;



    margin-bottom: 12px;



}



.sjgsm-date-month {



    font-size: 1.1rem;



    letter-spacing: 0.2em;



    text-transform: uppercase;



    color: #8fb1cc;



    margin-bottom: 2px;



}



.sjgsm-date-year {



    font-size: 0.85rem;



    color: #cbbfa3;



}



.sjgsm-date-label {



    display: none !important;



}



.widget_location_weather {



    margin-top: -18px !important;

}


/* =========================================================
   50.03) WIDGET META – ESTILO S.J.G.S.M.
   ESTILO FINAL — TEXTO CAFÉ + LAPIS REPOSO + ORO HOVER
========================================================= */

.widget_meta{
    background:#ffffff !important;

    /* LAPIS MINERAL REPOSO */
    border:1px solid #2f5aa6 !important;
    border-radius:15px;

    padding:12px 16px;
    width:90%;
    margin:12px auto;

    /* profundidad panel */
    box-shadow:0 6px 22px rgba(0,0,0,.25);

    font-family:"Georgia","Times New Roman",serif;
    display:block;
    text-align:left;
    position:relative;
}

/* panel hover oro */
.widget_meta:hover{
    border-color:#FFD700 !important;
}

/* brillo dorado ultra sutil */
.widget_meta::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:15px;
    pointer-events:none;

    background:linear-gradient(
        120deg,
        rgba(255,215,0,.15) 0%,
        rgba(255,215,0,.04) 25%,
        transparent 45%
    );
    opacity:.45;
}

.widget_meta .sidebartitle{
    display:none !important;
}

.widget_meta ul{
    list-style:none;
    padding:0;
    margin:0;
}

/* TEXTO BASE — BOLD CAFÉ */
.widget_meta ul li a{
    position:relative;
    display:block;
    padding:10px 12px;

    font-size:0.8rem;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;

    color:#4c2f16 !important;
    text-decoration:none;

    border-bottom:1px solid rgba(0,0,0,.18);
    border-radius:999px;
    overflow:visible;
    z-index:0;

    transition:all .25s ease;
}

.widget_meta ul li:last-child a{
    border-bottom:none !important;
}

/* icono Horus */
.widget_meta ul li a::before{
    content:"𓂀 ";
    margin-right:10px;
    font-size:1.5em;
    color:#4c2f16 !important;
}

/* HOVER METÁLICO LIMPIO */
.widget_meta ul li a:hover{
    color:#FFF2A8 !important;

    transform:translateY(-2px) scale(1.02);

    background:linear-gradient(90deg,#0f2f5c,#caa24b) !important;

    border:1px solid rgba(255,215,0,.6);

    box-shadow:
        0 4px 14px rgba(0,0,0,.35),
        0 0 10px rgba(255,215,0,.35);

    text-shadow:0 0 8px rgba(255,242,168,.9);
}

/* icono hover */
.widget_meta ul li a:hover::before{
    color:#FFF2A8 !important;
}


/* responsive */
@media (max-width:768px){
    .widget_meta{
        width:92%;
        padding:10px 14px;
    }
    .widget_meta ul li a{
        padding:10px 12px;
        font-size:0.9rem;
    }
    .widget_meta ul li a::before{
        font-size:1.2em;
    }
}

/* =========================================================
   50.04) NAVEGACIÓN PREVIOUS / NEXT – BOTONES EGIPCIOS
   ESTILO FINAL — LAPIS REPOSO + ORO HOVER + ELEVACIÓN RRSS
========================================================= */

.navigation{
  text-align:center;
  margin:40px 0 40px;
  font-family:"Georgia","Times New Roman",serif;

  /* IMPORTANTE: evita el desplazamiento por .navigation en Sección 06 */
  padding:0 !important;
}

.navigation a,
.nav-previous a,
.nav-next a{
  display:inline-block;
  padding:12px 12px;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  text-decoration:none;

  color:#593616;

  /* hilo lapis mineral reposo */
  border:1px solid #2f5aa6;
  border-radius:999px;

  background:rgba(255,255,255,0.85);

  /* profundidad premium */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.12),
    0 4px 14px rgba(0,0,0,.25);

  transition: transform .25s ease, box-shadow .25s ease, background .18s ease, border-color .18s ease;
}

/* OJO DE HORUS */
.navigation a::before,
.nav-previous a::before,
.nav-next a::before{
  content:"𓂀";
  display:inline-block;
  margin-right:1px;
  font-size:1.5rem;
  line-height:1;
  vertical-align:-1px;
}

/* HOVER — oro + elevación tipo RRSS */
.navigation a:hover,
.nav-previous a:hover,
.nav-next a:hover,
.navigation .previous-entries a:hover::after,
.navigation .next-entries a:hover::after{
  color:#FFF2A8 !important;
  text-shadow:
    0 0 8px rgba(255,242,168,.95),
    0 0 18px rgba(255,242,168,.55),
    0 2px 0 rgba(0,0,0,.40) !important;
}

.navigation a:hover,
.nav-previous a:hover,
.nav-next a:hover{
  border-color:#FFD700 !important;

  background:linear-gradient(90deg,#123a74,#caa24b) !important;

  box-shadow:
    0 0 0 1px rgba(255,215,0,.55),
    0 6px 18px rgba(0,0,0,.35);

  /* elevación igual RRSS */
  transform:translateY(-3px) scale(1.08);
}

/* Texto renderizado */
.navigation .previous-entries a,
.navigation .next-entries a{
  font-size:0 !important;
  white-space:nowrap;
  position:relative;
}

/* asegurar Horus visible */
.navigation .previous-entries a::before,
.navigation .next-entries a::before{
  font-size:1.15rem !important;
}

.navigation .previous-entries a::after,
.navigation .next-entries a::after{
  color:inherit;
  text-shadow:inherit;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.navigation .previous-entries a::after{ content:" ⟪⟪⟪ 𓅂𓆄"; }
.navigation .next-entries a::after{ content:" ⟫⟫⟫ 𓆄𓅂"; }

/* Responsive */
@media (max-width:768px){
  .navigation{
    margin:40px 0 30px;
  }
  .navigation a,
  .nav-previous a,
  .nav-next a{
    font-size:1.05rem;
    padding:10px 20px;
  }
  .navigation .previous-entries a::after,
  .navigation .next-entries a::after{
    font-size:1.05rem;
  }
}


/* Alinear navegación con el bloque del post */
.navigation{
  width:90%;
  margin-left:auto !important;
  margin-right:auto !important;
}



/* 50.05) TIPOGRAFÍA GLOBAL S.J.G.S.M. (CINZEL) */



h1,



h2,



h3,



h1 a,



h2 a,



h3 a,



.entry-title,



.entry-title a,



.posttitle,



.posttitle a,



.page-title,



h1.page-title,



.site-title,



.site-title a,



#site-title,



#site-title a {



    font-family: "Cinzel", serif !important;



    font-weight: 900 !important;



    letter-spacing: 1 !important;



    text-transform: uppercase !important;



}



/* Compactación para títulos de posts */



.post h1,



.post h1 a,



.post h2,



.post h2 a,



.posttitle,



.posttitle a,



.entry-title,



.entry-title a {



    letter-spacing: -0.03em !important;



}



/* 50.06) MENÚ SUPERIOR — S.J.G.S.M.  @  $  & */



#nav ul.left > li > a {



    font-family: "Cinzel", serif !important;



    font-weight: 900 !important;



    letter-spacing: 0.05em !important;



    text-transform: uppercase !important;



    font-size: 1.1rem !important;



    color: #4E3524 !important;



    padding-bottom: 20px;



    border-bottom: 0;



    transition: color 0.15s ease-out, background-color 0.15s ease-out;



}



#nav ul.left > li > a:hover {



    color: #fff !important;



    background-color: #0b4fa7 !important;



}



#nav ul.left li.current_page_item > a,



#nav ul.left li.current-menu-item > a,



body.home #nav ul.left > li:first-child > a {



    color: #4E3524 !important;



    background-color: transparent !important;



    border-bottom: 0 !important;



}



/* =========================================================
   50.07) FIX NAV — CENTRADO REAL (SJGSM + CATEGORY SCROLL + MÓVIL)
   ---------------------------------------------------------
   A) navigation.sjgsm-nav-block (BACK + RRSS) centrado con eje de posts
   B) page-category-scroll.php (OLDER/NEWER) sin floats + centrado con posts
   C) MÓVIL: forzar centrado “de verdad” respecto al bloque del post
   NOTA: No cambia tamaños de fuente ni paddings de tus botones (50.04/17).
========================================================= */


/* =========================================================
   A) SJGSM NAV BLOCK (BACK + RRSS) — CENTRADO CON POSTS (DESKTOP)
   (Eje del contenido: .entry padding-left:65px)
========================================================= */
@media (min-width: 769px){
  .navigation.sjgsm-nav-block{
    padding-left: 65px !important;   /* mismo eje que .entry */
    box-sizing: border-box;
  }
}

.navigation.sjgsm-nav-block .sjgsm-nav-links{
  text-align: center;
}

.navigation.sjgsm-nav-block .sjgsm-social-inline{
  text-align: center;
}


/* =========================================================
   B) PAGE CATEGORY SCROLL (OLDER/NEWER) — CENTRADO CON POSTS (DESKTOP)
========================================================= */
@media (min-width: 769px){
  body.page-template-page-category-scroll-php .navigation{
    text-align: center !important;
    padding-left: 65px !important;   /* mismo eje que .entry */
    box-sizing: border-box;
  }
}

body.page-template-page-category-scroll-php .navigation .alignleft,
body.page-template-page-category-scroll-php .navigation .alignright{
  float: none !important;
  display: inline-block !important;
  margin: 10px 12px !important;
}


/* =========================================================
   C) MÓVIL — TODO CENTRADO CON EL BLOQUE DEL POST
========================================================= */
@media (max-width: 768px){

  /* 1) En móvil, el eje del post YA NO lleva el offset 65 */
  .navigation.sjgsm-nav-block{
    padding-left: 0 !important;
  }

  body.page-template-page-category-scroll-php .navigation{
    padding-left: 0 !important;
  }

  /* 2) Forzar centrado robusto aunque el wrapper tenga márgenes raros */
  .navigation.sjgsm-nav-block,
  body.page-template-page-category-scroll-php .navigation{
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* 3) Nav-links: centrado normal (más estable que flex aquí) */
  .navigation.sjgsm-nav-block .sjgsm-nav-links{
    text-align: center !important;
  }

  /* 4) RRSS: flex para centrar el grupo perfecto */
  .navigation.sjgsm-nav-block .sjgsm-social-inline{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    text-align: center !important;
  }

  /* 5) Category scroll: (alignleft/alignright) centrados sin floats */
  body.page-template-page-category-scroll-php .navigation .alignleft,
  body.page-template-page-category-scroll-php .navigation .alignright{
    float: none !important;
    display: inline-block !important;
    margin: 10px 12px !important;
    text-align: center !important;
  }
}


/* =========================================================
   50.08) NAV — CENTRADO EJE REAL DEL POST (MÓVIL)
   ---------------------------------------------------------
   • Centra PREVIOUS / NEXT respecto al eje real del post
   • Igual offset que .entry (65px)
   • Arquitectura Papyrus compatible
========================================================= */

@media (max-width:768px){

  .entry .navigation,
  #content .navigation,
  .navigation.sjgsm-nav-block{
    margin-left:65px !important;
    width:calc(100% - 65px) !important;

    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;

    text-align:center !important;
    box-sizing:border-box !important;
  }

  .entry .navigation .sjgsm-nav-links,
  #content .navigation .sjgsm-nav-links{
    text-align:center !important;
  }

}


/* =========================================================
   50.09) RRSS — SEPARACIÓN BOTONES SOLO MÓVIL
   ---------------------------------------------------------
   • Controla distancia entre iconos RRSS en móvil
   • No afecta desktop
   • Override de sección 17
========================================================= */

@media (max-width:768px){

  /* separación entre botones RRSS */
  .navigation.sjgsm-nav-block .sjgsm-social-inline a{
    margin:0 5px; /* ← AJUSTAR AQUÍ */
  }

}



/* =========================================================

   96) FORMULARIOS — OVERRIDES PUNTUALES (SI HACE FALTA)

   ========================================================= */



/* (vacío por ahora) */





/* =========================================================

   97) PARALLAX / EXPERIMENTOS TEMPORALES

   ========================================================= */



/* (vacío por ahora) */





/* =========================================================

   98) LAYOUT 1080 ESCRITORIO — PRODUCCIÓN

   ========================================================= */



/* (vacío por ahora) */





/* =========================================================

   99) LABORATORIO / OVERRIDES PUNTUALES

   ========================================================= */





/* FIN STYLE.CSS – papyriSJGSM-v01 */