/*
Theme Name: Asipona - GobMx
Theme URI: https://asipona.local
Author: Jddsistemas - HASV 01/12/2025
Description: Tema base limpio con menús GobMX (menú principal + submenú).
Version: 1.0
*/

/* ==== LAYOUT GENERAL + STICKY FOOTER ==== */
html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    user-select: none;

    /* ESTE ES EL FIX CLAVE */
    padding-top: 0 !important;
}
body .container { max-width: 95%; width: 95%; }

/* todos los hijos directos del body (header, main-wrapper, footers…) */
body > * {
    flex-shrink: 0;             /* que nada se “aplane” */
    margin-top: 0;
}

/* Contenedor principal del contenido: este sí es el elástico */
#main-wrapper {
    flex: 1 0 auto;
    margin-top: 0;
    padding-top: 0;   /* lo controlará solo el JS */
}

#main-content,
#primary.site-main,
.site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Footer(s): sin margen abajo para que no quede franja blanca */
footer,
#site-footer {
    margin-top: 0;
    margin-bottom: 15px !important;
}

/* ==== BANNER HOME ==== */

.banner-asipona {
    position: relative;
}

.banner-asipona::before {
    content: "";
    display: block;
    width: 100%;
    height: 6px; /* altura de la franja */
    background-color: #c49a3b; /* dorado gobmx */
    margin-bottom: 0;
}

.banner-asipona .img-banner {
    display: block;
    width: 100%;
    height: auto;
}

.navbar {
    margin-bottom: 0px;
}

.sub-navbar {
    margin-bottom: 0 !important;   /* sin hueco debajo */
    padding-bottom: 0;             /* que no crezca hacia abajo */
    border-bottom: 0;              /* por si el framework pone borde */
    padding-top: 5px;
}
.sub-navbar .container-fluid {
    max-width: 95%;
    margin: 0 auto;
}
/* Quitar el margen que deja un hueco debajo de la barra vino */
.navbar.navbar-inverse.sub-navbar,
.navbar.navbar-inverse.sub-navbar.navbar-fixed-top {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/* Fondo vino al contenedor del menú, para que crezca parejo */
#subenlaces.collapse.navbar-collapse {
    background-color: #3a0b1f; /* usa el mismo hex que tu sub-navbar */
}

/* Y también a la lista del menú, por si el framework pone otro color */
.sub-navbar .navbar-nav {
    background-color: #3a0b1f;
}


/* Opcional: ajusta padding vertical si lo ves muy alto */
.sub-navbar .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
}


/* ===== HOME – SECCIONES ===== */

.home .home-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.home-section-alt {
    background-color: #f7f7f7;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* Títulos de sección: alineados a la izquierda y subrayados */
.section-title {
    font-size: 4rem;
    font-weight: 700;
    text-align: left;
    margin-bottom: 1.5rem;
    display: inline-block;
    border-bottom: 4px solid #c49a3a; /* dorado tipo GobMX */
    padding-bottom: .25rem;
}

/* Subtítulos dentro de secciones (columna) */
.subsection-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Listas de enlaces tipo “Trámites / Información / Negocios” */
.list-links {
    list-style: disc;
    padding-left: 1.2rem;
}

.list-links li {
    margin-bottom: .35rem;
}

.list-links a {
    text-decoration: underline;
}

/* ===== NOTICIAS – cards modernas ===== */

#seccion-noticias {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* grid */
.noticias-grid {
    margin-top: 1.5rem;
}

/* cada tarjeta */
.noticia-item {
    margin-bottom: 1.5rem;
}

.noticia-card {
    display: block;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
    text-decoration: none;
    color: inherit;
}

.noticia-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.14);
    text-decoration: none;
}

/* imagen superior con relación 16:9 */
.noticia-img {
    width: 100%;
    padding-top: 56%; /* 16:9 */
    background-size: cover;
    background-position: center center;
}

/* por si algún post no tiene imagen */
.noticia-img-placeholder {
    background: #eee linear-gradient(135deg, #f0f0f0 25%, #e2e2e2 25%, #e2e2e2 50%, #f0f0f0 50%, #f0f0f0 75%, #e2e2e2 75%, #e2e2e2 100%);
    background-size: 40px 40px;
}

.noticia-body {
    padding: 1rem 1.25rem 1.2rem;
}

.noticia-meta {
    display: block;
    font-size: 1rem;
    color: #777;
    margin-bottom: .25rem;
}

.noticia-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .4rem 0;
}

.noticia-excerpt {
    font-size: 1rem;
    color: #555;
    margin: 0 0 .6rem 0;
}

.noticia-link {
    font-size: 1rem;
    font-weight: 600;
    color: #8a1538;
}

/* responsive tweak */
@media (max-width: 767px) {
    .noticia-card {
        border-radius: 12px;
    }
}

/* ===== NOTICIAS – carrusel Flickity ===== */

.noticias-carousel {
    margin-top: 1.5rem;
}

/* Cada tarjeta como "slide" de Flickity */
.noticias-carousel .noticia-item {
    width: 32%;
    margin-right: 1.5%;
}

/* Un poco de aire al final para que no se corte pegado */
.noticias-carousel .noticia-item:last-child {
    margin-right: 0;
}

/* Responsive: tablet */
@media (max-width: 992px) {
    .noticias-carousel .noticia-item {
        width: 48%;
        margin-right: 2%;
    }
}

/* Responsive: móvil */
@media (max-width: 600px) {
    .noticias-carousel .noticia-item {
        width: 80%;
        margin-right: 10%;
    }
}

/* ===== Transparencia ===== */

.transparencia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    padding: 30px 0;
}

.transparencia-card {
    padding: 20px;
    text-align: center;
    border-left: 5px solid #8a1538;
    background: #fff;
    transition: background-color 0.25s ease;
}

.transparencia-card:hover {
    background: #f8f4f6;
}

.transparencia-card img {
    display: block;
    margin: 0 auto 20px;
    max-width: 70%;
}

.transparencia-card a {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.transparencia-card a:hover {
    color: #8a1538;
}

/* ===== ENLACES – Carrusel ===== */

/* CONTENEDOR */
.enlaces-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;      /* <- antes estaba hidden */
    margin-top: 1.5rem;
    padding-bottom: 25px;   /* deja espacio para los dots */
}

/* CARRUSEL: Flickity se encarga del layout interno */
.enlaces-carousel {
    margin-top: 0.5rem;
}

/* Cada slide será una “cell” de Flickity */
.enlace-slide {
    box-sizing: border-box;
    padding: 0 10px;   /* separa un poquito las tarjetas */
    width: 33.333%;        /* 2 por vista aprox en escritorio */
}

/* Tarjeta interna */
.enlace-slide a {
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.enlace-slide img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    display: block;
}

.enlace-slide h3 {
    margin: 0;
    padding: 0.8rem 1rem 1rem;
    font-size: 1rem;
}

.enlace-slide a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Responsive: en móvil mostramos casi una por vista */
@media (max-width: 768px) {
    .enlace-slide {
        width: 80%;    /* 1 por vista, con margen a los lados */
    }
}

@media (max-width: 480px) {
    .enlace-slide {
        width: 90%;
    }
}

/* PAGINACIÓN (DOTS) */
.enlaces-dots {
    text-align: center;
    margin: 0.75rem 0 2rem;
}

.enlaces-dots button {
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border-radius: 50%;
    border: none;
    background: #d0d0d0;
    cursor: pointer;
    padding: 0;
    padding-bottom: 2px;
    
}

.enlaces-dots button.active {
    background: #8c1435;  /* color institucional */
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .enlace-slide img {
        height: 200px;
    }
}

/* ===== TRÁMITES, INFORMACIÓN Y NEGOCIOS – estilo moderno ===== */

.tramites-modern-row {
    margin-top: 1.5rem;
}

.tramites-modern-block {
    padding: 1.25rem 0;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 1.5rem;
}

/* línea de acento arriba del título */
.tramites-accent {
    width: 75px;
    height: 4px;
    background: #8a1538; /* vino GobMX */
    border-radius: 999px;
    margin-bottom: .75rem;
}

.tramites-modern-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 .25rem 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tramites-modern-desc {
    font-size: 1.3rem;
    color: #666;
    margin: 0 0 .75rem 0;
}

/* chips / píldoras de enlaces */
.tramites-chips {
    list-style: none;
    padding: 0;
    margin: 0 0 .75rem 0;
}

.tramites-chips li {
    display: inline-block;
    margin: 0 .4rem .4rem 0;
}

.tramites-chips a {
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: #f1f1f1;
    font-size: 1.3rem;
    text-decoration: none;
    color: #004b7f; /* azul institucional */
    white-space: nowrap;
}

.tramites-chips a:hover {
    background: #e0d8e0;
    color: #8a1538;
}

/* enlace "ver más" alineado al inicio, estilo texto */
.tramites-modern-more {
    display: inline-block;
    font-size: .9rem;
    font-weight: 600;
    color: #8a1538;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.tramites-modern-more:hover {
    border-bottom-color: #8a1538;
}

/* responsive: separaciones en móvil */
@media (max-width: 767px) {
    .tramites-modern-block {
        border-bottom: 1px solid #e7e7e7;
        padding-bottom: 1.5rem;
    }
}

/* base del ícono */
.tramites-icon {
    width: 42px;
    height: 42px;
    background: #8a1538;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tramites-icon i {
    font-size: 1.3rem;
    color: white;
}

.tramites-modern-block:hover .tramites-icon {
    transform: scale(1.08);
    transition: transform .2s ease;
}

/* ========= SINGLE POST (NOTICIAS) ========= */

.single-main {
    background: #f5f5f5;
    padding-bottom: 3rem;
}

/* Wrapper general de la entrada */
.post-single {
    margin: 0;
    background: transparent;
}

/* HERO */
.post-hero-wrapper {
    position: relative;
    min-height: 260px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.post-hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(6px);
    transform: scale(1.06);
}

.post-hero-img--placeholder {
    background: #5b1132;
    filter: none;
}

.post-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.45) 0%,
        rgba(0,0,0,0.55) 40%,
        rgba(0,0,0,0.75) 100%
    );
}

.post-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    padding: 3.5rem 1.5rem 2.5rem;
    color: #fff;
}

/* Migas de pan */
.post-breadcrumb {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.9;
}

.post-breadcrumb a {
    color: #ffef8e;
    text-decoration: none;
}

.post-breadcrumb a:hover {
    text-decoration: underline;
}

/* Título principal */
.post-title {
    font-size: 4rem;
    line-height: 1.2;
    margin: 0 0 0.8rem;
}

/* Meta (fecha, categorías) */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: 1.5rem;
    opacity: 0.95;
}

.post-meta i {
    margin-right: .25rem;
}

.post-meta-cats a {
    color: #ffef8e;
    text-decoration: none;
}

.post-meta-cats a:hover {
    text-decoration: underline;
}

/* CUERPO */
.post-body {
    max-width: 1100px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    padding: 2.5rem 2.25rem 2rem;
    margin: -1.5rem auto 0; /* se “mete” un poco en el hero */
    position: relative;
    z-index: 3;
}

.post-content {
    font-size: 2rem;
    line-height: 1.7;
    color: #333;
}

/* Ajustes al contenido que viene del editor */
.post-content p {
    margin-bottom: 2rem;
}

.post-content img {
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
    display: block;
    border-radius: 6px;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    margin-top: 1.8rem;
    margin-bottom: .75rem;
    font-weight: 700;
    color: #402b30;
}

.post-content ul,
.post-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

/* FOOTER: tags + navegación */
.post-footer {
    border-top: 1px solid #eee;
    margin-top: 2rem;
    padding-top: 1rem;
}

.post-tags {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.post-tags span {
    font-weight: 600;
    margin-right: .25rem;
}

.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.5rem;
}

.post-nav a {
    text-decoration: none;
    color: #8c1435;
}

.post-nav a:hover {
    text-decoration: underline;
}

.post-nav i {
    font-size: 0.95rem;
}

/* --- HERO USANDO IMAGEN FIJA --- */
.post-hero-fixed {
    position: absolute;
    inset: 0;
    background-image: url('/asipona/imagenes/Asiponaver2025.png');
    background-size: cover;
    background-position: center;
    filter: blur(6px);
    transform: scale(1.06);
}

/* RESPONSIVE single */
@media (max-width: 768px) {
    .post-hero-content {
        padding: 2.5rem 1.25rem 2rem;
    }

    .post-title {
        font-size: 1.7rem;
    }

    .post-body {
        padding: 1.75rem 1.25rem 1.5rem;
        margin-top: -1rem;
    }

    .post-nav {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== PÁGINAS: LAYOUT GENERAL ===== */

.page-wrapper {
    max-width: 95%;    /* ~80–90% en pantallas grandes */
    margin: 0 auto;
    padding: 40px 20px 60px;
}

/* Título sencillo para páginas internas */
.page-hero-simple {
    margin-bottom: 30px;
}

/* Si usas este h1 fuera del contenido, sigue funcionando */
.page-title-simple {
    font-size: 3rem;
    margin: 0 0 10px;
}

/* Layout de dos columnas – CONTENIDO IZQ, MENÚ DER */
.page-layout {
    display: flex;
    flex-direction: row-reverse;  /* sidebar a la derecha */
    gap: 40px;
    align-items: flex-start;
}

/* ===== MENÚ LATERAL (DERECHA) ===== */

.page-sidebar {
    width: 260px;
    border-right: 3px solid #c49a3b; /* dorado gobmx */
    padding-right: 15px;
    font-size: 1.5rem;
    position: sticky;
    top: 120px;
}

.page-sidebar-title {
    font-size: 1.6rem;
    margin: 0 0 10px;
    font-weight: 700;
}

.page-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-sidebar-list li {
    margin-bottom: 6px;
}

.page-sidebar-list a {
    text-decoration: none;
    color: #444;
    display: block;
    padding: 4px 0;
    border-radius: 4px;
    transition: background-color .2s, color .2s;
}

.page-sidebar-list a:hover {
    background: #f3f3f3;
    color: #8c1435; /* vino gobmx */
}

.page-sidebar-empty {
    font-size: 0.85rem;
    color: #888;
}

/* ===== CONTENIDO PÁGINA ===== */

.page-content {
    flex: 1;  /* que ocupe todo el espacio disponible */
    background: #ffffff;
    border-radius: 8px;
    padding: 30px 30px 35px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
}

/* Si metes el <h1> dentro de .page-content, se verá arriba de la tarjeta */
.page-content .page-title-simple {
    margin-bottom: 20px;
}

/* Párrafos dentro del contenido */
.page-content-inner p {
    font-size: 2rem;
    line-height: 1.7;
    text-align: justify;
    text-align-last: left;
}

/* ===== RESPONSIVE PÁGINAS ===== */

@media (max-width: 900px) {
    .page-layout {
        flex-direction: column;   /* En móvil, uno debajo del otro */
        gap: 20px;
    }

    .page-sidebar {
        width: 100%;
        border-right: none;
        border-top: 3px solid #c49a3b;
        padding-right: 0;
        padding-top: 10px;
    }
}


/* ===== VIDEOS – Carrusel tipo Netflix ===== */

.videos-section {
    margin-top: 3rem;
}

/* contenedor interior, centrado como el resto del sitio 
.videos-inner {
    max-width: 95%;
    margin: 0 auto;
}

.video-carousel {
    margin-top: 1.5rem;
}*/

/* 3 tarjetas visibles en escritorio */
.video-slide {
    width: 50%;
    padding: 0 12px;
    box-sizing: border-box;
    cursor: pointer;
}

.video-thumb {
    position: relative;
    width: 100%;
    height: 360px;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* overlay oscuro suave */
.video-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.45) 100%
    );
    opacity: 0;
    transition: opacity .25s ease;
}

/* ícono play centrado */
.video-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #ffffff;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity .25s ease, transform .25s ease;
}

.video-slide:hover .video-thumb {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.video-slide:hover .video-thumb::before {
    opacity: 1;
}

.video-slide:hover .video-play-icon {
    opacity: 1;
    transform: scale(1);
}

/* info debajo de la miniatura */
.video-meta {
    margin-top: .6rem;
}

.video-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 .15rem 0;
}

.video-short {
    font-size: 1rem;
    color: #666;
    margin: 0;
}

/* MUY IMPORTANTE: que nada se salga del carrusel */
.video-carousel .flickity-viewport {
    overflow: hidden;
}

/* ----- Modal de video ----- */

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.video-modal.is-open {
    display: block;
}

.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

.video-modal-dialog {
    position: relative;
    max-width: 960px;
    margin: 40px auto;
    padding: 0 16px;
    z-index: 1;
}

.video-modal-close {
    position: absolute;
    top: -10px;
    right: 6px;
    font-size: 2.2rem;
    color: #ffffff;
    background: transparent;
    border: none;
    cursor: pointer;
}

.video-modal-body {
    background: #ffffff;
    border-radius: 12px;
    padding: 1rem 1.25rem 1.5rem;
    box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}

.video-player {
    width: 100%;
    max-height: 70vh;
    border-radius: 8px;
    background: #000;
    margin-bottom: 1rem;
}

.video-modal-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .4rem 0;
}

.video-modal-desc {
    font-size: .95rem;
    color: #555;
    margin: 0;
}

/* Responsive: tablet 2, móvil 1 */
@media (max-width: 768px) {
    .video-slide {
        width: 80%;        /* en móvil, 1 por vista */
        padding: 0 10px;
    }

    .video-modal-dialog {
        margin: 20px auto;
    }
}

/* =========================
   WIDGET METEO (FAB) + MODAL
========================= */
.wx-fab{
  position: fixed;
  top: 150px;
  right: 0px;
  width: 150px;
  height: 120px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 9999;
  display: grid;
  place-items: center;
  transition: transform .15s ease, box-shadow .15s ease;
}

.wx-fab:hover{
  transform: translateY(-2px);
}

.wx-fab-icon{
  width: 150px;
  display: block;
}

/* Modal base */
.wx-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}

.wx-modal.is-open{
  display: block;
}

.wx-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.wx-modal-dialog{
  position: relative;
  width: min(980px, calc(100% - 28px));
  margin: 90px auto 24px auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

.wx-modal-close{
  position: absolute;
  top: 10px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 0;
  background: rgba(0,0,0,.06);
  font-size: 28px;
  line-height: 42px;
  cursor: pointer;
}

.wx-modal-body{
  padding: 18px 18px 16px 18px;
}

.wx-modal-head{
  padding: 8px 6px 14px 6px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 14px;
}

.wx-title{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.wx-subtitle{
  margin: 4px 0 0 0;
  opacity: .75;
}

/* Bahías */
.wx-bahias{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.wx-bahia-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 14px;
  background: #fbf6df; /* tono crema como tu captura */
}

.wx-bahia-title{
  margin: 0 0 10px 0;
  text-align: center;
  font-weight: 900;
  letter-spacing: .5px;
}

.wx-bahia-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  margin-bottom: 8px;
}

.wx-bahia-label{ font-weight: 700; opacity: .85; }
.wx-bahia-value{ font-weight: 900; }

.wx-bahia-value.is-open{ color: #0a7a2a; font-weight: 700; }
.wx-bahia-value.is-closed{ color: #b00020; font-weight: 700; opacity: .9; }

.wx-lock{ margin-left: 6px; }

/* Métricas */
.wx-metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.wx-metric{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 12px 12px;
  background: #fff;
}

.wx-metric-title{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 6px;
}

.wx-metric-sub{
  opacity: .75;
  font-weight: 600;
  margin-bottom: 4px;
}

.wx-metric-value{
  font-weight: 900;
  font-size: 20px;
}

/* Colores tipo tablero */
.wx-metric-value.is-blue{ color: #1476ff; }
.wx-metric-value.is-amber{ color: #d99200; }
.wx-metric-value.is-red{ color: #d10000; }
.wx-metric-value.is-green{ color: #0a7a2a; }
.wx-metric-value.is-purple{ color: #6a1bb1; }

/* Footer */
.wx-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 6px 0 6px;
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.wx-link{
  text-decoration: none;
  font-weight: 800;
}

@media (max-width: 900px){
  .wx-bahias{ grid-template-columns: 1fr; }
  .wx-metrics{ grid-template-columns: 1fr; }
  .wx-modal-dialog{ margin-top: 70px; }
}

/* =========================
   ENLACES
========================= */

.enlacesGrid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:14px;
}

.enlacesGrid a{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:14px;
  min-height:96px;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.enlacesGrid a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  border-color:rgba(138,21,56,.25);
}

.enlacesGrid img{
  max-height:250px;
  max-width:100%;
  object-fit:contain;
}

@media (max-width:991px){
  .enlacesGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:575px){
  .enlacesGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}


/* =========================================================
   HOME – TRÁMITES / INFORMACIÓN / NEGOCIOS
   Cards + Modal reutilizable en GRID (3 columnas)
========================================================= */

/* =========================
   CARDS
========================= */

.tramites-cards-row{
  margin-top:1.5rem;
}

.tramites-card{
  display:block;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
  transition:all .18s ease;
  margin-bottom:18px;
}

.tramites-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  border-color:rgba(0,0,0,.14);
  text-decoration:none;
}

.tramites-card-media{
  position:relative;
  height:180px;
  background:#f6f6f6;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid rgba(0,0,0,.05);
}

.tramites-card-media img{
  max-width:140px;
  max-height:140px;
  object-fit:contain;
}

.tramites-card:hover .tramites-card-media img{
  transform:scale(1.05);
}

.tramites-card-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.tramites-card-badge i{
  font-size:20px;
  color:#8a1538;
}

.tramites-card-body{
  padding:14px 16px 16px;
}

.tramites-card-title{
  margin:0 0 6px;
  font-size:2rem;
  font-weight:800;
  color:#222;
}

.tramites-card-desc{
  margin:0;
  font-size:1.3rem;
  color:#666;
  line-height:1.4;
}

/* =========================
   MODAL
========================= */

.tramites-modal .modal-header{
  border-bottom:1px solid rgba(0,0,0,.08);
}

.tramites-modal .modal-title{
  font-weight:900;
}

#modalTramites .modal-body{
  max-height:70vh;
  overflow-y:auto;
  padding:18px;
}

/* =========================
   LISTA MODAL EN GRID
========================= */

.tramites-modal-list{
  list-style:none;
  padding:0;
  margin:0;

  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.tramites-modal-list li{
  border:0;
  margin:0;
  overflow:visible;
}

/* Tarjeta */
.tramites-modal-list a{
  position:relative;
  display:flex;
  align-items:center;

  padding:14px 16px 14px 32px;;
  min-height:54px;

  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;

  text-decoration:none;
  color:#1a1a1a;
  font-weight:700;

  transition:all .18s ease;
}

/* Icono automático */
.tramites-modal-list a::before{
  content:"";
  position:absolute;
  left:16px;

  width:8px;
  height:8px;
  border-radius:50%;

  background:#8a1538;
}

/* Hover */
.tramites-modal-list a:hover{
  background:#fafafa;
  border-color:#8a1538;
  color:#8a1538;
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}

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

@media (max-width:991px){
  .tramites-modal-list{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:767px){
  .tramites-card-media{ height:150px; }
  .tramites-card-title{ font-size:1.7rem; }
  .tramites-card-desc{ font-size:1.2rem; }
}

@media (max-width:575px){
  .tramites-modal-list{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   HOME – Conoce tu Puerto
   Sección videos tipo Netflix + iPhone con tiburón
   Fecha: 2026-02-17
========================================================= */

#seccion-conocetupuerto{
  position:relative;
}

.ctp-container{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:80px;
  margin-top:20px;
  position:relative;
  flex-wrap:wrap;
}

/* Escena (tiburón + phone) */
.ctp-scene{
  position:relative;
  width:600px;
  min-height:520px;
}

/* iPhone */
.ctp-phone{
  position:absolute;
  left:280px;
  bottom:0;
  width:290px;
  aspect-ratio:9/16;
  background:#111;
  border-radius:44px;
  padding:14px;
  box-shadow:0 25px 60px rgba(0,0,0,.25);
  z-index:2;
}

/* notch */
.ctp-phone::before{
  content:"";
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:42%;
  height:22px;
  background:#0a0b0d;
  border-radius:0 0 16px 16px;
  z-index:5;
  opacity:.95;
}

/* screen */
.ctp-screen{
  width:100%;
  height:100%;
  border-radius:32px;
  position:relative;
  overflow:hidden;
  background:#000;
}

/* VIDEO: aquí estaba el bug (cover inline). Ahora NO recorta */
.ctp-screen video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#000;
}

/* Botón play flotante (opcional) */
.ctp-playbtn{
  position:absolute;
  left:12px;
  bottom:12px;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  transition:.2s ease;
}

.ctp-playbtn:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.68);
}

/* Tiburón */
.ctp-shark{
  position:absolute;
  top: 85px;
  left:45px;
  width:250px;
  z-index:0;
  pointer-events:none;
}

/* =========================
   LISTA tipo Netflix (GRID 2 columnas, 6 videos)
========================= */
.ctp-list{
  flex:1;
  max-width:900px;                 /* ocupa mejor el espacio lateral */
  display:grid;
  grid-template-columns:repeat(3, 1fr);    /* 👈 2 columnas */
  gap:18px;

  /* 👇 limpieza: sin scroll */
  max-height:none;
  overflow:visible;
  padding-right:0;
  position:relative;
}

/* Limpieza: ya no usamos fades */
.ctp-list::before,
.ctp-list::after{
  display:none !important;
  content:none !important;
}

/* Item Netflix */
.ctp-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  cursor:pointer;
  transition:.22s ease;
  text-align:left;
}

.ctp-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.ctp-item.is-active{
  border-color:rgba(0,51,102,.55);
  box-shadow:0 12px 25px rgba(0,51,102,.14);
}

/* Miniatura */
.ctp-thumb{
  position:relative;
  width:75px;
  height:100px;
  border-radius:14px;
  overflow:hidden;
  flex-shrink:0;
  background:#000;
}

.ctp-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ctp-thumb__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:18px;
  opacity:0;
  transition:.22s ease;
}
.ctp-item:hover .ctp-thumb__overlay{ opacity:1; }

.ctp-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.ctp-title{
  font-weight:700;
  color:#0f172a;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ctp-subtitle{
  font-size:13px;
  opacity:.75;
}

/* Responsive */
@media (max-width: 720px){
  .ctp-container{ gap:24px; }

  .ctp-scene{
    width:100%;
    min-height:640px;
  }

  .ctp-phone{
    left:50%;
    transform:translateX(-50%);
    bottom:0;
  }

  .ctp-shark{
    left:50%;
    transform:translateX(-50%);
    width:220px;
    bottom:0;
  }

  .ctp-list{
    max-width:100%;
    grid-template-columns:1fr;  /* 👈 1 columna en móvil */
  }
}

/* Tablet */
@media (max-width: 1100px){
  .ctp-list{
    grid-template-columns:repeat(2, 1fr);  /* 2 columnas */
  }
}

/* Móvil */
@media (max-width: 720px){
  .ctp-list{
    grid-template-columns:1fr;  /* 1 columna */
    max-width:100%;
  }
}

.main-footer{
    padding-top: 10px;
    padding-bottom: 50px;
}