/* ==========================================================================
   Revista Carisma — capa responsive
   Se aplica encima del maquetado original de tablas sin modificarlo.
   Los anchos fijos (width="1024", width="800") y los width/height de cada
   <img> se neutralizan aqui para que todo escale con el ancho de pantalla.
   ========================================================================== */

/* ==========================================================================
   Tipografia de la revista
   Es la misma fuente con la que se disenaron los botones-imagen originales,
   asi que el texto real queda identico al que sustituye.
   ========================================================================== */
@font-face {
    font-family: "Carisma";
    src: url("../FUENTES/carisma/flashl.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }


/* ==========================================================================
   Menu de navegacion — texto real en lugar de imagenes
   Antes cada boton era un PNG de ancho fijo: no escalaba, no se podia
   buscar ni leer por un lector de pantalla, y en movil habia que
   encogerlo hasta volverlo ilegible. Ahora es texto.

   Colores tomados de los PNG originales:
     relleno normal  #303030    relleno hover  #f03030
     contorno blanco 2px        sombra suave para despegarlo de la foto
   ========================================================================== */
.nav-txt {
    font-family: "Carisma", "Brush Script MT", Georgia, serif;
    font-size: 29px;
    line-height: 1.15;
    color: #303030;
    white-space: nowrap;
    -webkit-text-stroke: 3px #ffffff;
    paint-order: stroke fill;   /* contorno DEBAJO del relleno, no encima */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .45);
    transition: color .15s ease;
    display: inline-block;
}

a .nav-txt { text-decoration: none; }
a:hover .nav-txt,
a:focus .nav-txt { color: #f03030; }

/* Navegadores sin paint-order (contorno encima del relleno) comerian el
   texto. Ahi se prescinde del contorno y se refuerza la sombra. */
@supports not (paint-order: stroke) {
    .nav-txt { -webkit-text-stroke: 0; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 1px 1px 2px rgba(0,0,0,.5); }
}

/* El pie de derechos reservados usa otra fuente en el original: una sans
   redondeada, no la script. Se usa Open Sans, que ya venia en el sitio.
   Aqui no se pone contorno: a 15px un trazo de 1.5px se come la letra y
   la deja lavada. Un halo blanco la despega del fondo sin adelgazarla. */
@font-face {
    font-family: "Open Sans Carisma";
    src: url("../FUENTES/open-sans/OpenSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.pie-txt {
    font-family: "Open Sans Carisma", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #404090;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff;
    display: inline-block;
    letter-spacing: .2px;
}

html { -webkit-text-size-adjust: 100%; }

html { min-height: 100%; }

body {
    margin: 0;
    /* El maquetado original usa background-size:100% 100%, que deforma la
       foto en pantallas angostas. cover mantiene la proporcion. */
    background-size: cover !important;
    background-position: center center !important;
    /* Paginas cortas (portada, contacto) no llegaban al alto de la ventana
       en pantallas grandes y dejaban una franja sin fondo debajo. */
    min-height: 100vh;
}

/* Las imagenes llevan width/height fijos en el HTML: los volvemos fluidos. */
img {
    max-width: 100%;
    height: auto;
    border: 0;
}

/* Video de portada (sustituye al GIF de 52 MB). */
video.intro {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Visor de la revista en este-mes.html (sustituye al reproductor Flash).

   La proporcion ya no es la del escenario de Animate (800x1150): la pagina
   solo ocupa 502x672 de ese escenario y el resto era blanco vacio, asi que
   el visor recorta a 502x685. Los ~55px extra del alto son para la barra de
   botones, que ahora es HTML y no parte del dibujo. */
iframe.visor-revista {
    display: block;
    width: 700px;
    max-width: 100%;
    aspect-ratio: 502 / 740;
    height: auto;
    margin: 0 auto;
    border: 0;
    background: #fff;
    border-radius: 6px;
}

/* Las tablas de maquetado traen width="1024" / width="800" como atributo. */
table {
    width: 100% !important;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

td, th { max-width: 100%; }


/* ==========================================================================
   Tablet — hasta 1024px
   ========================================================================== */
@media (max-width: 1024px) {
    body { padding: 0 10px; }
}


/* ==========================================================================
   Movil — hasta 768px
   La tabla deja de ser tabla: cada fila es un contenedor flexible cuyas
   celdas se reacomodan solas. Asi el menu de 12 botones cae en rejilla
   y las cuadriculas de la guia turistica pasan de 4 columnas a 2.
   ========================================================================== */
@media (max-width: 768px) {

    table, tbody {
        display: block;
        width: auto !important;
        height: auto !important;
    }

    /* Filas y celdas se vuelven rejillas que envuelven. Se usa flex en vez
       de inline-block porque este ultimo cuenta los saltos de linea del
       HTML como espacio y desbaratan el calculo de dos columnas. */
    tr, td, th {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: auto !important;
        height: auto !important;
    }

    tr { margin-bottom: 10px; }

    td, th {
        flex: 0 1 auto;
        max-width: 100%;
        padding: 0 !important;
        text-align: center;
    }

    td > p, th > p { margin: 0; }

    /* Filas de una sola celda (logo, titulo, contenido principal, pie):
       ocupan todo el ancho. */
    tr > td:only-child { flex: 1 1 100%; }

    /* El menu ya es texto real: se reduce un poco para que quepan mas
       opciones por fila, y aun asi se lee mucho mejor que los PNG que
       sustituyo, que habia que encoger hasta volverlos ilegibles. */
    .nav-txt { font-size: 24px; }

    /* Area de pulsacion comoda con el dedo. */
    td a { display: inline-block; padding: 3px 2px; }

    /* El pie es largo: en pantalla estrecha se le permite partir de linea. */
    .pie-txt { font-size: 13px; white-space: normal; }

    /* Miniaturas de contenido (guia turistica, lugares turisticos):
       dos por fila, ocupando el ancho disponible. */
    td a > img {
        width: 44vw;
        max-width: 220px;
        height: auto;
    }

    /* Celdas vacias de relleno: estorban en movil. */
    td:empty { display: none; }

    /* El mapa interactivo debe ocupar el ancho completo de su celda, que
       aqui es un contenedor flex. Sin esto se encoge a su contenido. */
    .mapa-caja { flex: 1 1 100%; width: 100%; }

    /* El logo y los titulos de seccion mandan a todo el ancho. */
    td[colspan] { flex: 1 1 100%; }
}


/* ==========================================================================
   Movil angosto — hasta 480px
   ========================================================================== */
@media (max-width: 480px) {
    body { padding: 0 6px; }

    tr { gap: 8px; }

    .nav-txt { font-size: 21px; }
    .pie-txt { font-size: 12px; }

    td a > img { width: 46vw; }
}


/* ==========================================================================
   Guia turistica trilingue
   Sustituye a los JPG de 1100x1424 que traian el texto horneado dentro.
   En escritorio se conservan las tres columnas del diseno impreso;
   en movil tres columnas serian ilegibles, asi que se elige idioma
   con pestanas y se muestra uno a la vez a todo el ancho.
   ========================================================================== */
.guia {
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.guia-titulo {
    font-family: "Carisma", Georgia, serif;
    font-size: 40px;
    color: #303030;
    -webkit-text-stroke: 3px #fff;
    paint-order: stroke fill;
    text-shadow: 1px 1px 2px rgba(0,0,0,.45);
    text-align: center;
    margin: 6px 0 18px;
    line-height: 1.2;
}

/* Pestanas de idioma: solo hacen falta cuando se muestra un idioma. */
.guia-idiomas { display: none; text-align: center; margin: 0 0 14px; }
.guia-idiomas button {
    font: 600 14px/1 "Open Sans Carisma", Helvetica, Arial, sans-serif;
    padding: 9px 18px;
    margin: 0 3px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 20px;
    background: rgba(255,255,255,.85);
    color: #404090;
    cursor: pointer;
}
.guia-idiomas button[aria-selected="true"] { background: #404090; color: #fff; border-color: #404090; }

.guia-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.guia-col {
    /* Casi opaca y con sombra: el texto largo no se puede leer sobre una
       foto. En los titulos, que van sueltos sobre el fondo, se usa el
       contorno blanco; aqui la tarjeta cumple esa misma funcion mejor,
       porque un contorno en texto de 15px lo emborrona. */
    background: rgba(255,255,255,.95);
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.guia-col > h2 {
    font: 700 13px/1.3 "Open Sans Carisma", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #fff;
    background: #404090;
    margin: -16px -18px 14px;
    padding: 9px 18px;
    border-radius: 8px 8px 0 0;
}
.guia-col h3 {
    font: 700 15px/1.3 "Open Sans Carisma", Helvetica, Arial, sans-serif;
    color: #b32020;
    margin: 16px 0 6px;
}
.guia-col h3:first-of-type { margin-top: 0; }
.guia-col p {
    font: 400 13.5px/1.55 "Open Sans Carisma", Helvetica, Arial, sans-serif;
    color: #222;
    margin: 0 0 9px;
    text-align: justify;
    hyphens: auto;
}
.guia-col ul { margin: 0 0 10px; padding-left: 18px; }
.guia-col li {
    font: 400 13.5px/1.5 "Open Sans Carisma", Helvetica, Arial, sans-serif;
    color: #222; margin-bottom: 4px;
}

/* Pagina de la revista impresa, al final: conserva fotos y maquetacion. */
.guia-impresa { margin: 26px auto 0; text-align: center; max-width: 1100px; }
.guia-impresa summary {
    font: 600 14px/1 "Open Sans Carisma", Helvetica, Arial, sans-serif;
    color: #404090; cursor: pointer; padding: 10px;
    background: rgba(255,255,255,.85); border-radius: 6px; display: inline-block;
}
.guia-impresa img { margin-top: 12px; border-radius: 6px; }

@media (max-width: 900px) {
    .guia-idiomas { display: block; }
    .guia-cols { grid-template-columns: 1fr; }
    .guia-col { display: none; }
    .guia-col.activo { display: block; }
    .guia-titulo { font-size: 30px; }

    /* A una sola columna el texto justificado abre huecos enormes entre
       palabras. Alineado a la izquierda se lee mucho mejor. */
    .guia-col p { text-align: left; font-size: 15px; }
    .guia-col li { font-size: 15px; }
}

/* Las paginas de la guia llevan tres columnas: necesitan mas ancho que
   los 1024px del resto del sitio. */
body.pagina-guia table { max-width: 1160px; }