/* Pantallas más estrechas que el diseño de ordenador (1144px): móviles y tabletas.
   Se carga con media="screen and (max-width: 1159px)", así que en ordenador no cambia nada.
   Sustituye a mobile.css, que eran ajustes a ojo para unos pocos anchos concretos de móvil.
   Muchas reglas llevan !important porque las páginas traen anchos y márgenes en atributos style. */

body {
    background: #2A5C72 url("../images/beige_paper.png") repeat fixed center bottom;
    margin: 0;
    overflow-x: hidden;
}
img, iframe, video, object, embed, table {
    max-width: 100%;
}
img {
    height: auto;
}

/* ---- Cabecera ---- */

/* La cabecera de móvil (logo + menú) va en functions.php; la de ordenador (head.png) se oculta. */
div.mobile {
    display: none !important;
}
.cabecera-movil, .cabecera-movil * {
    box-sizing: border-box;
}
.cabecera-movil {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    margin: 0 auto;
    max-width: 1144px;
    padding: 10px 12px;
    background: linear-gradient(#2F6680, #1E4556);
    border-bottom: 2px solid #5EC8F0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.cabecera-movil .logo-movil {
    flex: 1;
    min-width: 0;
}
.cabecera-movil .logo-movil img {
    display: block;
    width: 100%;
    max-width: 420px;
}
.menu-movil summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #A9DDF1;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    list-style: none;
    white-space: nowrap;
}
.menu-movil summary::-webkit-details-marker {
    display: none;
}
.menu-movil summary::before {
    content: "\2630";
    font-size: 20px;
    line-height: 1;
}
.menu-movil[open] summary {
    background: #FDF5E6;
    color: #000000;
}
.menu-movil ul {
    position: absolute;
    z-index: 50;
    top: 100%;
    right: 12px;
    width: 240px;
    max-width: calc(100% - 24px);
    margin: 4px 0 0;
    padding: 6px 0;
    list-style: none;
    background: #FDF5E6;
    border: 1px solid #555555;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.menu-movil li a {
    display: block;
    padding: 11px 16px;
    border-bottom: 1px solid #E2D5B8;
    color: #000000;
    font-size: 17px;
    font-weight: bold;
}
.menu-movil li:last-child a {
    border-bottom: 0;
}

#wrappercentx {
    width: auto !important;
    max-width: 1144px;
    margin: 0 auto !important;
    padding: 8px 12px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #FFFFFF;
    font-size: 12px !important;
    text-align: center;
    text-shadow: 0 1px 2px #000000;
}

/* Etiquetas de arriba y de abajo: una tira que se desliza de lado en vez de ocupar media pantalla. */
.tags, .tags2 {
    position: static !important;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: auto !important;
    max-width: 1144px;
    margin: 0 auto !important;
    padding: 6px 12px 10px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tags::-webkit-scrollbar, .tags2::-webkit-scrollbar {
    display: none;
}
.tags .ticket, .tags2 .ticket {
    flex: 0 0 auto;
    float: none !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* head.png (velas y cinta con el logo) mide 1144px: fuera. Se quedan las banderas del traductor. */
.top {
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    max-width: 1144px;
    padding: 6px 12px 0;
    background: none !important;
    text-align: center;
}
.top > div:first-child {
    display: none;
}
.top > p {
    float: none !important;
    margin: 0 !important;
    line-height: 0;
}

/* ---- Marco del contenido ---- */

#wrapper {
    width: auto !important;
    max-width: 1144px;
    margin: 10px auto 0 !important;
    padding: 12px 10px !important;
    background: #343434 !important;
    border-radius: 14px;
    box-shadow: 0 0 18px rgba(94, 200, 240, 0.55);
}
.bottom {
    display: none;
}
#header {
    padding-bottom: 0 !important;
}

/* Las cuatro secciones (Santos, Difuntos, Otras velas, Felicitaciones) */
div.menu-cds, div.menu-cds .content {
    height: auto !important;
    width: auto !important;
}
ul.ca-menu {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
ul.ca-menu li {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden;
}
ul.ca-menu li a {
    display: flex;
    flex-direction: column;
    height: 100% !important;
}
/* Título arriba, foto y texto debajo (en ordenador la foto va colocada en absoluto bajo el título). */
ul.ca-menu .ca-content {
    display: contents;
}
ul.ca-menu h2.ca-main {
    order: 1;
    height: auto !important;
    margin: 0 !important;
    padding: 3px 2px !important;
}
ul.ca-menu img.ca-icon {
    order: 2;
    position: static !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 230 / 190;
    object-fit: cover;
    margin: 0 !important;
}
ul.ca-menu h3.ca-sub {
    order: 3;
    flex: 1;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 4px 6px !important;
}
/* «Click aqui para encender una vela» solo sale al pasar el ratón por encima en ordenador. */
ul.ca-menu .ca-content > div {
    display: none;
}

/* Columnas: el contenido primero, luego la columna derecha (santoral, visitas, ayuda) y luego la izquierda. */
div#page, div#body {
    width: auto !important;
}
div#body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 14px;
    padding-top: 12px;
}
div#body::after {
    display: none;
}
div#center {
    order: 1;
    grid-row: 1;
    grid-column: 1 / -1;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}
div#right {
    order: 2;
    grid-row: 2;
    grid-column: 1;
}
div#left {
    order: 3;
    grid-row: 2;
    grid-column: 2;
}
div#left, div#right {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    display: flow-root;
}
div#left > *, div#right > * {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 360px;
}
/* El menú principal ya está arriba, en la cabecera, y la noticia era la elección del papa de 2013. */
div#left > .col-module-header-rtx:first-child, ul#menu, div#left > br,
div#left > .col-module-header-rtx:nth-of-type(2), div#left > img.noticia {
    display: none !important;
}
div#santoral {
    width: auto !important;
    height: auto !important;
    margin-bottom: 14px !important;
}
div#santoral a.col-module-header-r {
    float: none !important;
    display: block;
    margin: -6px auto 4px !important;
}

/* Títulos de las secciones */
.title {
    float: none !important;
    width: auto !important;
    margin: 0 0 10px !important;
    clear: both;
}

/* ---- Tarjetas de velas ----
   Las tarjetas están dibujadas para 269px de ancho (los textos van colocados en píxeles), así que no se
   estiran: se reparten las que quepan por fila y, en el móvil, se amplían un poco con zoom. */
ul.velas-santos, ul.velas-difuntos, ul.velas-otras {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: auto !important;
    height: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}
ul.velas-santos li, ul.velas-difuntos li, ul.velas-otras li {
    float: none !important;
    margin: 0 !important;
    width: 269px !important;
    flex: 0 0 auto;
}
/* Portada (4 velas por bloque) y listados de altares (16 por página): donde caben 3 por fila quedaba una sola en
   la última. De 2 en 2 (2 x 271px + 12px de separación) hasta que caben 4 en una fila. */
ul.tarjetas-portada, ul.velas-difuntos {
    max-width: 554px;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media screen and (min-width: 1140px) {
    ul.tarjetas-portada, ul.velas-difuntos {
        max-width: none;
    }
}

/* ---- Páginas interiores ---- */

/* Ficha del santo o difunto y buscador */
div.santo, div.difunto, div#buscar-santo {
    display: flow-root;
    float: none !important;
    width: auto !important;
    margin: 0 0 12px !important;
}
div#center > br {
    display: none;
}
/* Velas de un santo, difunto u otro: las que quepan por fila */
ul.lista-velas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    float: none !important;
    width: auto !important;
    margin: 0 0 12px !important;
    padding: 10px 4px !important;
}
ul.lista-velas li {
    float: none !important;
    margin: 0 !important;
}
/* Listado de santos por tema */
ul.lista-saint {
    float: none !important;
    width: auto !important;
    margin: 0 0 12px !important;
}
ul.lista-saint li {
    display: flow-root;
}
ul.lista-saint h5, ul.lista-saint .daski {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 12px 160px !important;
}
.paginas {
    float: none !important;
    width: auto !important;
    margin: 12px 0 !important;
    line-height: 30px;
}
div#buscar-santo labelas {
    display: block;
    float: none;
    margin: 4px 0 !important;
}
div#buscar-santo select, div#buscar-santo input {
    max-width: 92%;
}
/* Felicitaciones: tarjetas de 175px (una tabla con fondo) */
ul.velas-cumpleanos {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: auto !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}
ul.velas-cumpleanos > div {
    float: none !important;
    margin: 0 !important;
}
/* Sin ancho fijo, la tarjeta se estiraba con el texto (en ordenador la limita la columna). */
ul.velas-cumpleanos > div {
    width: 173px;
}
ul.velas-cumpleanos > div > table {
    table-layout: fixed;
    width: 173px;
}
/* 15 por página: de 3 en 3 (3 x 175px + 2 x 12px), que no deja ninguna sola en la última fila. */
ul.velas-cumpleanos {
    max-width: 549px;
    margin-left: auto !important;
    margin-right: auto !important;
}
ul.velas-cumpleanos > div[style*="clear"] {
    display: none;
}

/* Ventanas para encender una vela, crear un altar o felicitar: medían 400-440px fijos. */
#encender-container, #altar-container, #cumpleano-container {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: 440px;
    max-height: calc(100% - 16px);
    height: auto !important;
    margin: 0 auto;
    overflow-y: auto;
}
#encender-container .form-content, #altar-container .form-content, #cumpleano-container .form-content {
    height: auto !important;
    padding-bottom: 12px;
}
#encender-container .f-boton, #altar-container .f-boton {
    float: none !important;
    margin: 0 auto !important;
}
/* Campos: con su relleno se salían por la derecha y el asterisco de obligatorio bajaba de línea. */
#encender-container input[type="text"], #encender-container textarea,
#altar-container input[type="text"], #altar-container input[type="file"], #altar-container textarea,
#cumpleano-container input[type="text"], #cumpleano-container textarea {
    box-sizing: border-box;
    width: calc(100% - 34px) !important;
}
/* El botón de «vela eterna» (PayPal) flotaba fuera de la ventana: debajo del de vela gratis. */
.f-botonpaypal img {
    display: block !important;
    float: none !important;
    max-width: 100%;
    margin: 8px auto 0 !important;
}

/* ---- Pie ---- */

#wrapperbottom, #footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    width: auto !important;
    max-width: 1144px;
    height: auto !important;
    margin: 14px auto 0 !important;
    padding: 0 10px !important;
}
#wrapperbottom > h3, #footer > h3 {
    position: static !important;
    float: none !important;
    width: auto !important;
    margin: 12px 0 0 !important;
}
#wrapperbottom > div, #footer > div {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding-bottom: 10px !important;
}
#wrapperbottom > div > br, #footer > div > br {
    display: none;
}
#wrapperbottom > h3:nth-of-type(1), #footer > h3:nth-of-type(1) { grid-area: 1 / 1; }
#wrapperbottom > div:nth-of-type(1), #footer > div:nth-of-type(1) { grid-area: 2 / 1; }
#wrapperbottom > h3:nth-of-type(2), #footer > h3:nth-of-type(2) { grid-area: 1 / 2; }
#wrapperbottom > div:nth-of-type(2), #footer > div:nth-of-type(2) { grid-area: 2 / 2; }
#wrapperbottom > h3:nth-of-type(3), #footer > h3:nth-of-type(3) { grid-area: 3 / 1; }
#wrapperbottom > div:nth-of-type(3), #footer > div:nth-of-type(3) { grid-area: 4 / 1; }
#wrapperbottom > h3:nth-of-type(4), #footer > h3:nth-of-type(4) { grid-area: 3 / 2; }
#wrapperbottom > div:nth-of-type(4), #footer > div:nth-of-type(4) { grid-area: 4 / 2; }
#publicidad2 {
    display: none;
}
/* Formularios dentro del contenido (Webs Amigas, contacto) */
div#center input[type="text"], div#center textarea, div#center select {
    box-sizing: border-box;
    max-width: 100%;
}
select {
    max-width: 100%;
}
div#buscar-santo *, div#center td input, div#center td textarea {
    box-sizing: border-box;
    max-width: 100%;
}
div#center table {
    width: 100% !important;
}
div#center td {
    overflow-wrap: anywhere;
}

.nasty {
    height: auto !important;
}
#wrapperbottomxxx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    max-width: 1144px;
    height: auto !important;
    margin: 14px auto 0 !important;
    padding: 10px !important;
}
#wrapperbottomxxx > * {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}
#wrapperbottomxxx h1 {
    flex: 1 1 300px;
    height: auto !important;
    font-size: 16px !important;
}

/* ---- Móviles ---- */

@media screen and (max-width: 700px) {
    ul.ca-menu {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    ul.ca-menu h2.ca-main {
        font-size: 20px !important;
    }
    ul.ca-menu h3.ca-sub {
        display: none;
    }
    div#center td input[type="text"], div#center td textarea {
        width: 100% !important;
    }
    div.santo img, div.difunto img {
        float: none !important;
        display: block;
        margin: -11px auto 0 !important;
        border-radius: 12px 12px 0 0 !important;
        border-right: 0 !important;
    }
    div.santo p, div.difunto p {
        width: auto !important;
        margin: 0 !important;
    }
    ul.lista-saint .sximg > img {
        float: none !important;
        display: block;
        margin: 0 auto 10px;
    }
    ul.lista-saint h5, ul.lista-saint .daski {
        margin-left: 0 !important;
    }
    #wrapper {
        margin-top: 8px !important;
        padding: 8px 6px !important;
        border-radius: 0;
    }
div#body, #wrapperbottom, #footer {
        grid-template-columns: 1fr;
    }
    div#center, div#right, div#left {
        grid-row: auto;
        grid-column: auto;
    }
#wrapperbottom > *, #footer > * {
        grid-area: auto !important;
    }
}
/* Una tarjeta por fila: se amplía para aprovechar el ancho y que la letra se lea mejor. */
@media screen and (min-width: 340px) and (max-width: 579px) {
    ul.velas-santos li, ul.velas-difuntos li, ul.velas-otras li {
        zoom: 1.15;
    }
}
@media screen and (min-width: 380px) and (max-width: 579px) {
    ul.velas-santos li, ul.velas-difuntos li, ul.velas-otras li {
        zoom: 1.3;
    }
}
/* Felicitaciones: dos por fila también en los móviles más estrechos. */
@media screen and (max-width: 389px) {
    ul.velas-cumpleanos {
        gap: 6px;
    }
    ul.velas-cumpleanos > div {
        zoom: 0.9;
    }
}