/* header{ background-color:#0c005b; color:white; padding:0px; } */

/* Estilo del Precio y Texto */
.precios{color:blue;font-size:30;font-weight:bold;}
.texto-negro{color:black;font-size:28;}

/* Estilo del Contenido */
.content {background:black; /* linear-gradient(100deg,white,black) */}
.h4 {color:red;}
movil {color:var(--Color);font-size:50px;}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
*{box-sizing:border-box; }


/* Atributos del mensaje */
.mensaje { float:left; padding:5%; width:100%; height:100%; aspect-ratio:auto 640/360;}
.mensaje .menu-content { margin:0; padding:0; list-style-type:none; }
.mensaje .menu-content::before, .mensaje .menu-content::after { content:''; display:table; }
.mensaje .menu-content::after { clear:both; }
.mensaje .menu-content li { display:inline-block; }
.mensaje .menu-content a { color:magenta; } /*/#fff*/
.mensaje .menu-content span { position: absolute; left: 50%; top: 0; font-size: 10px; font-weight: 700; font-family: 'Open Sans'; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
.mensaje .wrapper { background-color:red; min-height:550px; position:relative; overflow:hidden; box-shadow:0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2); }
.mensaje .wrapper:hover .data { -webkit-transform:translateY(0); transform:translateY(0); }
.mensaje .data { position: absolute; bottom: 0; width: 100%; -webkit-transform: translateY(calc(70px + 1em)); transform: translateY(calc(70px + 1em)); transition:-webkit-transform 0.3s; transition:transform 0.3s; transition:transform 0.3s, -webkit-transform 0.3s; }
.mensaje .data .content { padding: 1em; position: relative; z-index: 1; }
.mensaje .author { font-size:12px;}
.mensaje .title { margin-top:10px; }
.mensaje .text { height:70px; margin:0; }
.mensaje input[type='checkbox'] { display: none; }
.mensaje input[type='checkbox']:checked + .menu-content { -webkit-transform: translateY(-60px); transform: translateY(-60px); }


.example-1 .date { position:absolute; top:0; left:0; background-color:#fff; color:magenta; padding:0.8em; } /*#77d7b9*/
.example-1 .date span { display:block; text-align:center; }
.example-1 .date .day { font-weight:700; font-size:24px; text-shadow:2px 3px 2px rgba(0, 0, 0, 0.18); }
.example-1 .date .month { text-transform:uppercase; }
.example-1 .date .month,
.example-1 .date .year { font-size:12px; }
.example-1 .content { background-color:white; box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3); }
.example-1 .title a { color:blue; font-weight:bold; }
.example-1 .menu-button { position:absolute; z-index:999; top:16px; right:16px; width:25px; text-align:center; cursor:pointer; }
.example-1 .menu-button span {width: 5px;height: 5px; background-color:white; color:white; position:relative; display:inline-block; border-radius: 50%; }
.example-1 .menu-button span::after, .example-1 .menu-button span::before { content: ''; display: block; width: 5px; height: 5px; background-color: currentColor; position: absolute; border-radius: 50%; }
.example-1 .menu-button span::before { left: -10px;}
.example-1 .menu-button span::after { right: -10px; }
.example-1 .menu-content { text-align: center; position: absolute; top: 0;left: 0;width: 100%;z-index: -1;transition: -webkit-transform 0.3s;transition: transform 0.3s;transition: transform 0.3s, -webkit-transform 0.3s;-webkit-transform: translateY(0);transform: translateY(0); }
.example-1 .menu-content li {width: 33.333333%;float: left;background-color: #77d7b9;height: 60px;position: relative; }
.example-1 .menu-content a {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-size: 24px; }
.example-1 .menu-content span {top: -10px; }

.example-2 .wrapper:hover .menu-content span {-webkit-transform: translate(-50%, -10px);transform: translate(-50%, -10px);opacity: 1; }
.example-2 .date { position:absolute; top:0; left:0; background-color: #77d7b9; color: #fff; padding: 0.8em; }
.example-2 .header {color:#fff; padding:1em;}
.example-2 .header::before, .example-2 .header::after {content:'';display:table; }
.example-2 .header::after {clear: both; }
.example-2 .header .date {float: left;font-size: 12px; }
.example-2 .menu-content {float: right; }
.example-2 .menu-content li {margin:0 5px; position:relative; }
.example-2 .menu-content span {transition:all 0.3s; opacity:0; }
.example-2 .data {color: #fff; -webkit-transform: translateY(calc(70px + 4em));transform: translateY(calc(70px + 4em)); }
.example-2 .title a {color: #fff; }
.example-2 .button { display: block;width: 100px;margin: 2em auto 1em;text-align: center;font-size: 12px;color:#fff; line-height: 1;position: relative;font-weight: 700; }
.example-2 .button::after {content: '\2192';opacity: 0;position: absolute;right: 0;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);transition: all 0.3s; }
.example-2 .button:hover::after {-webkit-transform: translate(5px, -50%);transform: translate(5px, -50%);opacity: 1; }