/*CESAC*/
.panel-boton-central{
    text-align:center;
    margin:45px 0;
}

.panel-boton-central a{
    display:inline-block;
    background:#bc955c;
    color:#fff;
    text-decoration:none;
    padding:22px 55px;
    border-radius:50px;
    font-size:28px;
    font-weight:bold;
    transition:.3s;
}

.panel-boton-central a:hover{
    background:#bc955c;
}

.panel-botones{
    display:flex;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
}

.panel-btn:hover{
    background:#8B143C;
}

.panel-botones{
    display:flex;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
    align-items:flex-start;   /* evita que las otras columnas se estiren */
}

.panel-btn{
    flex:1;
    min-width:260px;
    background:#8B143C;
    color:#fff;
    text-decoration:none;
    text-align:center;
    padding:22px;
    border-radius:45px;
    font-size:26px;
    font-weight:bold;
    transition:.3s;
}

/* Ahora el wrap es columna: botón arriba, info abajo */
.panel-btn-wrap{
    position:relative;
    flex:1;
    min-width:260px;
    display:flex;
    flex-direction:column;
}

.panel-btn-wrap .panel-btn{
    flex:0 0 auto;   /* el botón conserva su altura, no se estira */
    width:100%;
    min-width:0;
}

/* Recuadro en el flujo: colapsado por defecto, empuja al expandirse */
.panel-info{
    width:100%;
    margin-top:0;
    background:#bc955c;
    color:rgba(0,0,0,100);
    padding:0 30px;          /* vertical en 0 mientras está colapsado */
    border-radius:45px;
    font-size:18px;
    font-weight:500;
    line-height:1.5;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.2);

    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s ease, padding .35s ease,
               margin-top .35s ease, opacity .3s ease;
}

.panel-btn-wrap:hover .panel-info{
    max-height:400px;        /* tope generoso para tu texto manual */
    opacity:1;
    margin-top:15px;
    padding:22px 30px;
}

.panel-info h3{
    color:#000;         
    font-size:23px;      
    font-weight:bold;
    margin:0 0 10px;   
    text-shadow:0 1px 2px rgba(255,255,255,.3);  
}
/* ===== MAPA TERRITORIAL (image map) ===== */
.mapa-cesac{ display:none; margin-top:35px; }
.mapa-cesac.abierto{ display:block; animation:fadeInMapa .35s ease; }
@keyframes fadeInMapa{
    from{ opacity:0; transform:translateY(-8px); }
    to  { opacity:1; transform:translateY(0); }
}
.mapa-titulo{
    text-align:center;
    color:var(--gam-color);
    font-family:'Montserrat',sans-serif;
    font-size:1.3rem;
    margin-bottom:25px;
}

/* La imagen se reescala; imageMapResizer ajusta las áreas */
.map-container .map{
    width:100%;
    height:auto;
    display:block;
}
.map-container area{ cursor:pointer; }

/* --- Tabla de información --- */
.info-container table{
    width:100%;
    border-collapse:collapse;
    box-shadow:0 4px 15px rgba(0,0,0,.1);
    border-radius:10px;
    overflow:hidden;
}
.info-container th#titulo{
    background:var(--gam-color);
    color:#fff;
    padding:14px;
    text-align:center;
    font-size:1rem;
}
.info-container td{
    padding:12px 14px;
    border-bottom:1px solid #eee;
    font-size:.92rem;
    word-break:break-word;
}
.info-container .columna{
    font-weight:600;
    color:var(--gam-color);
    width:40%;
    background:#faf3f5;
}
.initial-message{
    padding:25px;
    text-align:center;
    border:2px dashed var(--gam-color);
    border-radius:10px;
    background:#faf3f5;
}

/* Móvil: mapa arriba, info abajo (Bootstrap ya apila las col) */
@media (max-width:768px){
    .mapa-titulo{ font-size:1.05rem; }
    .info-container{ margin-top:20px; }
}
/* Contenedor imagen + capa SVG encima */
.map-wrap{ position:relative; max-width:400px; margin:0 auto; }
.map-wrap img.map{ width:100%; height:auto; display:block; }

/* La capa SVG cubre exactamente la imagen */
.map-overlay{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
}

/* Cada zona: invisible en reposo, se ilumina en hover */
.map-overlay polygon{
    fill:transparent;
    stroke:transparent;
    stroke-width:1.5;
    cursor:pointer;
    transition:fill .2s ease, stroke .2s ease;
}
.map-overlay polygon:hover{
    fill:rgba(137,20,53,.45);   /* guinda translúcido */
    stroke:var(--gam-color);
}
/* Zona seleccionada (clic) queda marcada */
.map-overlay polygon.activa{
    fill:rgba(188,149,91,.45);  /* dorado translúcido */
    stroke:var(--secondary-color);
}