arreglos básicos y sobres pdf

css/style.css

@@ -211,8 +211,8 @@ body {
 }
 
 .btn-light:hover {
-    color: var(--bs-white);
-    background: var(--bs-primary);
+    color: var(--bs-primary);
+    background: var(--bs-white);
 }
 
 .btn-square {
@@ -432,6 +432,76 @@ body {
     border-color: var(--bs-primary);
 }
 
+/*** Stratum page ***/
+/* Grid layout for features and factions */
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin: 0 auto;
+    max-width: 1200px;
+}
+
+/* Card styles */
+.card {
+    border: none;
+    background: transparent;
+}
+
+.card-body {
+    background: url('../img/papel_blanco.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    filter: drop-shadow(0.1vw 0.1vw 0.1vw var(--bs-dark));
+}
+
+/* Feature and faction cards */
+.feature-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.feature-card .card-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.faction-card {
+    transition: transform 0.3s ease;
+}
+
+.faction-card:hover {
+    transform: translateY(-5px);
+}
+
+/* Video container for rules section */
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+    max-width: 100%;
+    margin: 2rem auto;
+}
+
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* Game features section */
+.game-feature {
+    height: 100%;
+    margin-bottom: 2rem;
+}
+
 /*** Footer ***/
 .footer {
     background-color: var(--bs-dark) !important;
@@ -452,6 +522,145 @@ body {
 .ps-6 { padding-left: 4rem; }
 .pe-6 { padding-right: 4rem; }
 
+/*** Spiny envelope! ***/
+.scene {
+    width: 300px;
+    height: 200px;
+    perspective: 1000px;
+    margin: 100px auto;
+}
+
+.envelope {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform: rotateY(0deg);
+    transform-style: preserve-3d;
+    animation: spin 6s infinite linear;
+    transition: transform 0.3 ease;
+}
+
+.envelope:hover {
+    animation: grow 0.3s forwards;
+}
+
+@keyframes spin {
+    from {transform: rotateY(0deg) scale(1);}
+    to {transform: rotateY(360deg) scale(1);}
+}
+
+@keyframes grow {
+    to {transform: scale(1.15)}
+}
+
+.envelope__face {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    background-color: #f7f3eb;
+    border: 2px solid #333;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    /*fotito de textura*/
+    background-image: url('../img/papel_blanco.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.envelope__side {
+    position: absolute;
+    /*fotito de textura*/
+    background-image: url('../img/papel_blanco.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    border: 1px solid #333;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.envelope__side--left {
+    width: 15px;
+    height: 100%;
+    left: -7.5px;
+    transform: rotateY(90deg);
+}
+
+.envelope__side--right {
+    width: 15px;
+    height: 100%;
+    right: -7.5px;
+    transform: rotateY(90deg);
+}
+
+.envelope__side--top {
+    width: 100%;
+    height: 15px;
+    top: -7.5px;
+    transform: rotateX(90deg);
+}
+
+.envelope__side--bottom {
+    width: 100%;
+    height: 15px;
+    bottom: -7.5px;
+    transform: rotateX(-90deg);
+}
+
+.envelope__front {
+    transform: translateZ(7.5px);
+}
+
+.envelope__back {
+    transform: translateZ(-7.5px) rotateY(180deg);
+}
+
+.flap {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 100px 150px;
+    border-color: #f7f3eb transparent transparent transparent;
+    top: -1px;
+    left: -1px;
+    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
+}
+
+.flap::after {
+    content: '';
+    position: absolute;
+    top: -98px;
+    left: -148px;
+    width: 296px;
+    height: 98px;
+    /*fotito de textura*/
+    background-image: url('../img/papel_blanco.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    clip-path: polygon(0 0, 50% 100%, 100% 0);
+}
+
+.envelope__text {
+    font-family: "Special Elite", system-ui;
+    font-size: 200%;
+    color: var(--bs-dark);
+    text-align: center;
+    padding: 20px;
+    position: relative;
+    top: 90px;
+}
+
+.envelope-link {
+    text-decoration: none;
+    display: block;         /* Make the whole envelope clickable */
+}
+
+.envelope-container {
+    display: flex;
+    justify-content: center;
+    gap: 10rem;
+    flex-wrap: wrap;
+}
+
 /*** Media Queries ***/
 @media (max-width: 991px) {
     .navbar-collapse {
@@ -501,4 +710,16 @@ body {
     .pt-6, .pb-6, .ps-6, .pe-6 {
         padding: 2rem;
     }
+}
+
+/* Responsive adjustments */
+@media (max-width: 767px) {
+    .feature-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .game-feature {
+        margin-bottom: 1rem;
+    }
 }

index.html

@@ -810,7 +810,7 @@ <h5 class="mb-2">Óscar Alarcón</h5>
                   <span class="text-footer">
                     <a href="#" class="border-bottom text-white"
                       ><i class="fas fa-copyright me-2"></i>Against Software</a
-                    >, Todos los derechos reservados.
+                    >, & Ezequiel García. Todos los derechos reservados.
                   </span>
                 </div>
               </div>