@charset "utf-8";

/* ===============================
   CONTENEDOR PRINCIPAL ESCRITORIO
   =============================== */
.contenedor {
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    grid-gap: 10px;
    margin: auto;
    justify-content: center;
}

.teldos {
	grid-column-start: 1;
	grid-column-end: -1;
}

.texcentro {
	text-align: center;
}

/* ============================
   MARCO DE IMÁGENES
   ============================ */
.marco img {
    width: 100%;
    height: auto;       /* mantiene proporción real */
    display: block;
    border-radius: 10px;
    border: 6px ridge #666;
    box-shadow: 2px 2px 5px #006;
    object-fit: cover;
}

/* ============================
   LAZY LOADING
   ============================ */
.lazy {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.lazy.loaded {
    opacity: 1;
}

/* ============================
   BOTONES
   ============================ */
.button {
    background:#7f8c8d;
    color:#fff;          /* #fff */
    display:inline-block;
    font-family: Roboto, sans-serif;
    font-size:1.25em;
    margin:5px;
    padding:5px 0;
    text-align:center;
    width:200px;
    text-decoration:none;
    box-shadow:3px 5px 5px #000;
}

.button span {
    margin-right:10px;
}

.button.blue {
    background:#39C;
    box-shadow:3px 5px 5px #000;
}

.button.yellow {
    background:#39C; /* #f1c40f */
    box-shadow:3px 5px 5px #000;
}

.button.medium {
    width: 100%;
}

.button.radius {
    border-radius:5px;
}

.button:hover {
    background:#06F;
    padding-top:5px;
}

.button:active {
    background:#006;
}

/* ============================
   ANUNCIOS / GRID ESPECÍFICO
   ============================ */
.vinculoc, .anuncioc {
    grid-column-start: 1;
    grid-column-end: -1;
    width: 100%;
}

.vinculocc {
    grid-column-start: 1;
    grid-column-end: -1;
    width: 50%;
}

/* ============================
   TEXTO HUECO / OCULTO
   ============================ */
.contenedor .texto.novisible p {
    color: #FFF;
}

/* ============================
   RESPONSIVE
   ============================ */

/* =====> Pantallas grandes <1600px */
@media screen and (max-width:1600px) {
    .contenedor {
        width: 70%;
    }
}


/* =====> Pantallas medias <1366px */
@media screen and (max-width:1366px) {
    .contenedor {
        width: 80%;
    }
}

/* =====> Pantallas medias <1280px */
@media screen and (max-width:1280px) {
    .contenedor {
        width: 90%;
    }
}

/* =====> Móvil <700px */
@media screen and (max-width:700px) {
    .contenedor {
        width: 95%;
        grid-template-columns: 1fr;
        grid-gap:5px;
    }

    .marco img {
        width: 98%;
        border-radius: 10px;
        border: 5px ridge #666;
        box-shadow: 2px 2px 5px #006;
    }

    .novisible {
        display:none;
    }

    /* Botones móviles */
    .button {
        margin:5px 0 10px;
        padding:6px 10px;
        width:100%;
    }

    .button.medium {
        width:100%;
    }

    .vinculocc {
        width:100%;
    }
    
/* ============================
   CONTENEDOR PRINCIPAL MOVIL
   ============================ */

.contenedor {
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    grid-gap: 10px;
    margin: auto;
    justify-content: center;
}