@charset "utf-8";
/* ==========================================================
   CYBERFRACTAL / LIBRO DE FIRMAS Y COMUNICACIÓN
   Hoja de estilos optimizada
   Optimización:
   - espacios normalizados
   - comentarios preservados
   - preparada para futuras unificaciones
   ========================================================== */

:root{
  --cf-bg:#333333;
  --cf-bg-deep:#0f0f0f;
  --cf-bg-panel:#383838;
  --cf-line:rgba(214,184,92,.28);
  --cf-gold:#d6b85c;
  --cf-gold-soft:#f2e0aa;
  --cf-text:#e7e7e7;
  --cf-muted:#a7a7a7;
  --cf-border:rgba(255,255,255,.08);
}

html,body{
  margin:0;
  padding:0;
  background:#222;
  color:var(--cf-text);
  font-family:Verdana, Arial, sans-serif;
}

a{
  color:#f2e0aa;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

.contenedor-600{
  width:600px;
  margin:0 auto;
  padding:0;
  position:relative;
}

.tabla-principal{
  width:600px;
  border-collapse:collapse;
  margin:0 auto;
}

.header-cell{
  padding:0;
}

.header-link{
  display:block;
}

#headerbox{
  text-align:center;
  padding:10px 0 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.03)),
    #2b2b2b;
  border:1px solid rgba(255,255,255,.05);
}

.cyberfractal{
  margin:0;
  color:var(--cf-gold);
  font-family:Georgia, "Times New Roman", serif;
  font-size:30px;
  letter-spacing:1px;
  font-weight:normal;
}

.cyberfractal .texto{
  display:inline-block;
  text-shadow:0 0 6px rgba(214,184,92,.15);
}

.menu-wrap{
  padding:0;
}

.menu-bar a{
  color:#fff;
  font-size:11px;
  font-family:Verdana, Arial, sans-serif;
  text-decoration:none;
  white-space:nowrap;
}

.menu-bar td{
  vertical-align:middle;
}

.col-main{
    padding-top:8px;
}

.col-side{
    padding-top:8px;
}

.titulo-marmol-beige-medio{
  margin:0;
  padding:3px 0 0;
  color:var(--cf-gold-soft);
  font-family:Georgia, "Times New Roman", serif;
  font-size:24px;
  font-weight:normal;
  text-align:left;
}

.separador-fractal{
  border:0;
  height:1px;
  margin:10px 0 18px;
  background:linear-gradient(to right, transparent, rgba(214,184,92,.75), transparent);
}

.mensaje-ok{
  max-width:390px;
  margin:0 auto;
  padding:4px 0 10px;
  text-align:center;
}

.mensaje-ok-icono{
  width:74px;
  height:74px;
  margin:0 auto 18px;
  border:2px solid var(--cf-gold);
  border-radius:50%;
  color:var(--cf-gold);
  font-size:44px;
  line-height:70px;
  font-weight:bold;
}

.mensaje-ok-titulo{
  margin:0 0 20px;
  color:var(--cf-gold-soft);
  font-family:Georgia, "Times New Roman", serif;
  font-size:28px;
  font-weight:normal;
}

.mensaje-ok-texto{
  margin:0 0 14px;
  color:#e3e3e3;
  line-height:1.55;
}

.mensaje-ok-botones{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin:28px auto 18px;
  flex-wrap:wrap;
}

.boton-cf{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  min-height:48px;
  padding:0 16px;
  box-sizing:border-box;
  background:#2f2f2f;
  color:var(--cf-gold-soft);
  border:1px solid #8d7440;
  font-size:15px;
  font-weight:bold;
  text-align:center;
  line-height:1.2;
  transition:all .25s ease;
}

.boton-cf:hover{
  background:#454545;
  color:#fff5c8;
  border-color:#d6b85c;
  box-shadow:0 0 8px rgba(214,184,92,.25);
  text-decoration:none;
}

.formulario-pie{
  margin-top:10px;
  text-align:center;
  color:#8d8d8d;
  font-size:11px;
  font-style:italic;
  opacity:.7;
}

.sidebar-box{
  padding:8px 6px 10px;
  box-sizing:border-box;
}

/* ==========================================================
   ICONOS SUPERIORES
   ========================================================== */

.sidebar-icons{

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin:8px 0 16px;

}

.sidebar-icons a{

    display:flex;

    justify-content:center;

    align-items:center;

}

.sidebar-icons img{

    display:block;

    max-width:100%;

    height:auto;

}

.sidebar-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:0 0 16px;
}

.sidebar-links img{
  display:block;
  max-width:100%;
  height:auto;
}

.sidebar-manifiestos{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin:8px 0 14px;
}

.manifiesto-politico,
.manif_pol-verd,
.manif_fractal{
  display:block;
  width:130px;
  padding:8px 6px;
  border:1px solid rgba(214,184,92,.18);
  background:#171717;
  color:#f2e0aa;
  text-align:center;
  font-size:12px;
  line-height:1.15;
  letter-spacing:.3px;
}

.manifiesto-politico:hover,
.manif_pol-verd:hover,
.manif_fractal:hover{
  background:#202020;
  color:#fff5c8;
  text-decoration:none;
}

.sidebar-illex{
  width:100%;
  max-width:150px;
  margin:0 auto;
  padding:8px;
  box-sizing:border-box;
  background:var(--cf-bg-deep);
  border:1px solid rgba(214,184,92,.16);
  font-family:Georgia, "Times New Roman", serif;
  color:#d8d8d8;
  font-size:11px;
  line-height:1.38;
  text-align:justify;
}

.sidebar-illex-title{
  text-align:center;
  color:var(--cf-gold);
  font-size:12px;
  letter-spacing:1.2px;
  margin-bottom:5px;
}

.sidebar-illex-line{
  width:26px;
  height:1px;
  margin:6px auto 10px;
  background:linear-gradient(to right, transparent, var(--cf-gold), transparent);
  opacity:.45;
}

.sidebar-illex p{
  margin:0;
}

.sidebar-illex-sign{
  margin-top:9px;
  text-align:right;
  font-size:9px;
  color:#666;
  letter-spacing:1px;
}

.footer-cell{
  padding:0;
}

.footer-wrap{
  text-align:center;
  padding:8px 0 0;
}

.pie-cyberfractal{
  color:#d9d9d9;
  font-size:11px;
  line-height:1.5;
}

.pie-cyberfractal img{
  display:block;
  margin:0 auto 6px;
  width:auto;
  max-width:100%;
  height:auto;
}

.pie-cyberfractal p{
  margin:4px 0;
}

.pie-cyberfractal a{
  color:#f2e0aa;
}

#onda-fractal{
  width:100%;
  height:12px;
  margin:8px 0 0;
  opacity:0;
  background:linear-gradient(to right, transparent, rgba(214,184,92,.16), transparent);
  transition:opacity .4s ease;
}

#onda-fractal.activa{
  opacity:1;
}

.btn-flotante{
  position:fixed;
  right:18px;
  bottom:18px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#181818;
  border:1px solid rgba(214,184,92,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:all .25s ease;
  z-index:999;
}

.btn-flotante.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.btn-flotante img{
  display:block;
  width:20px;
  height:20px;
}

@media (max-width: 680px){
  .contenedor-600,
  .tabla-principal{
    width:100%;
  }

  .mensaje-ok-botones{
    flex-direction:column;
  }

  .boton-cf{
    width:100%;
    max-width:260px;
  }
}

/* ==========================================================
   CIERRE EDITORIAL
   ========================================================== */
/* ==========================================================
   TÍTULO EDITORIAL
   ========================================================== */

.titulo-libro{
    width:390px;
    margin:16px auto 22px;
    text-align:center;
}

.titulo-libro-superior{
    display:block;
    margin:0;
    padding:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:4px;
    line-height:1.1;
    text-transform:uppercase;
    color:#cdaa55;
}

.titulo-libro-inferior{
    display:block;
    margin:2px 0 0;
    padding:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:33px;
    font-style:italic;
    font-weight:normal;
    line-height:1;
    color:#efe0b4;
}

.titulo-libro::after{

    content:"";

    display:block;

    width:185px;

    height:1px;

    margin:12px auto 0;

    background:linear-gradient(
        to right,
        transparent,
        rgba(214,184,92,.65),
        transparent
    );
}

/* ==========================================================
   INTRODUCCIÓN
   ========================================================== */

.intro-contacto{

    width:390px;

    margin:0 auto 26px;

    color:#d8d8d8;

    text-align:justify;

    line-height:1.75;

    font-size:15px;

}

/* ==========================================================
   PANEL DE CONFIRMACIÓN
   ========================================================== */

.formulario-contacto{

    width:370px;

    margin:0 auto 24px;

    padding:28px;

    box-sizing:border-box;

    background:#383838;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 6px 18px rgba(0,0,0,.18);

}

.mensaje-ok{

    max-width:100%;

    margin:0 auto;

    padding:0;

}

.mensaje-ok-icono{

    width:82px;

    height:82px;

    margin:0 auto 22px;

    border:2px solid #d6b85c;

    border-radius:50%;

    color:#d6b85c;

    font-size:50px;

    line-height:78px;

}

.mensaje-ok-titulo{

    margin-bottom:22px;

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

    font-size:29px;

    color:#f2e0aa;

}

.mensaje-ok-texto{

    margin-bottom:18px;

    font-size:15px;

    line-height:1.80;

    color:#e3e3e3;

}

.mensaje-ok-botones{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

    margin:34px 0 24px;

}

.boton-cf{

    width:195px;

    min-height:50px;

}
/* ==========================================================
   CIERRE EDITORIAL
   ========================================================== */

.panel-dialogo{

    width:290px;

    margin:46px auto 0;

    text-align:center;

}

.panel-dialogo-linea{

    width:120px;

    height:1px;

    margin:0 auto 20px;

    background:rgba(214,184,92,.45);

}

.panel-dialogo-titulo{

    margin-bottom:18px;

    font-size:14px;

    letter-spacing:3px;

    color:#cdaa55;

}

.panel-dialogo-texto{

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

    font-size:18px;

    font-style:italic;

    line-height:2;

    color:#bdb7a8;

}

.barra-acciones-wrap{
    text-align:center;
    margin:18px 0;
}


/* ==========================================================
   BOTÓN FLOTANTE "VOLVER" — CYBERFRACTAL
   Única definición. Aislada para no modificar otros botones
   ni afectar las demás páginas que utilizan esta hoja.
   ========================================================== */

body.pagina-contacto a.btn-volver-atras{
    position:fixed !important;

    /* 600 px es el ancho del universo central de Cyberfractal.
       El botón queda próximo al centro, sin invadirlo. */
    left:calc(50% - 230px) !important;
    bottom:55px !important;

    z-index:99999 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;

    min-width:88px !important;
    height:38px !important;
    padding:7px 13px !important;
    box-sizing:border-box !important;

    border:1px solid rgba(214,184,92,.55) !important;
    border-radius:20px !important;

    background:rgba(34,34,34,.86) !important;
    color:#f2e0aa !important;

    font-family:Georgia,"Times New Roman",serif !important;
    font-size:13px !important;
    font-weight:normal !important;
    line-height:1 !important;
    letter-spacing:.2px !important;
    white-space:nowrap !important;

    text-decoration:none !important;

    box-shadow:
        0 3px 12px rgba(0,0,0,.28),
        inset 0 0 10px rgba(214,184,92,.035) !important;

    opacity:.90 !important;
    visibility:visible !important;
    pointer-events:auto !important;

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

body.pagina-contacto a.btn-volver-atras:hover,
body.pagina-contacto a.btn-volver-atras:focus-visible{
    background:rgba(51,51,51,.96) !important;
    color:#fff5c8 !important;
    border-color:#d6b85c !important;

    transform:translateY(-2px) !important;

    box-shadow:
        0 0 14px rgba(214,184,92,.16),
        0 5px 14px rgba(0,0,0,.32) !important;

    outline:none !important;
}

body.pagina-contacto a.btn-volver-atras:active{
    transform:translateY(0) !important;
}

body.pagina-contacto a.btn-volver-atras .flecha-volver{
    display:inline-block !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:17px !important;
    font-weight:normal !important;
    line-height:1 !important;
    color:#d6b85c !important;
}

@media (max-width:640px){
    body.pagina-contacto a.btn-volver-atras{
        left:38px !important;
        bottom:45px !important;
        min-width:82px !important;
        height:36px !important;
        padding:7px 11px !important;
        font-size:12px !important;
    }

    body.pagina-contacto a.btn-volver-atras .flecha-volver{
        font-size:16px !important;
    }
}

/* Botón Inicio añadido en la barra de acciones */
.boton-pagina-principal {
    display: inline-block;
    padding: 5px 12px;
    background: transparent;
    color: #999999;
    text-decoration: none;
    border: 1px solid #666666;
    border-radius: 3px;
    font-size: 12px;
}

.boton-pagina-principal:hover {
    color: #d6b85c;
    border-color: #888888;
}