/*
Theme Name: ElegiSF
Theme URI: http://www.elegisantafe.com.ar
Description: Tema de "Elegisantafe" > Andres
Version: 3
Author: Andres Robul
Author URI: http://www.elegisantafe.com.ar
ancho 1140
*/

/* === RESET === */
*{margin:0;padding:0;box-sizing:border-box}
html{overflow:auto;background:#080000}
html,body{overflow-x:hidden}
body{
  font-family:'Segoe UI',sans-serif;font-size:16px;margin:5px;padding:0;height:auto;
  color:#333;background:#2e2525;scroll-behavior:smooth;
}
img{max-width:100%;display:block;height:auto}

/* === CABECERA === */
#cabecera{background:#2a4e82;padding-bottom:.2px;z-index:5}
.logo-superior img{margin-top:5px;width:100%;height:50px;display:block}

/* === SLIDER === */
.slider-wrapper{
  width:100%;max-width:1140px;margin:auto;aspect-ratio:1140/300;
  position:relative;overflow:hidden;border-radius:12px;z-index:1;
  opacity:0;transition:opacity .25s ease;
}
.slider-wrapper.is-ready{opacity:1}
.slider{position:relative;width:100%;height:100%}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out;z-index:0}
.slide.activo{opacity:1;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slider-wrapper .prev,.slider-wrapper .next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.4);color:#fff;border:0;padding:10px 15px;font-size:24px;cursor:pointer;z-index:2;
}
.slider-wrapper .prev{left:10px}.slider-wrapper .next{right:10px}
.slider-dots{text-align:center;margin-top:10px}
.slider-dots span{width:12px;height:12px;background:rgba(255,255,255,.6);border-radius:50%;display:inline-block;cursor:pointer;margin:0 3px}
.slider-dots span.active{background:#fff}
.slider-texto{
  position:absolute;bottom:10px;right:10px;background:rgba(79,68,68,.6);color:#fff;
  padding:5px;border-radius:8px;max-width:300px;box-shadow:0 2px 8px rgba(0,0,0,.3);
  opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s;
}
.slider-texto.visible{opacity:1;transform:translateY(0)}
.slider-fondo{width:100%;background:linear-gradient(to top,#2a7fe8 5%,#f1a042 100%)}
@media (max-width:768px){.slider-wrapper{aspect-ratio:16/9}}
@media (min-width:769px) and (max-width:1024px){.slider-wrapper{aspect-ratio:21/9}}

/* === NAV (estructura base) === */
#menuHorizontal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;
  background:#2a7fe8;border-top:.05em solid #3147d2;position:relative;z-index:1000;
}
.menu-toggle{display:none;font-size:28px;background:none;border:0;color:#fff;padding:10px}

/* 1er nivel */
.menu-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
}
.menu-list>li{position:relative;margin-right:15px}
.menu-list a{color:#fff;text-decoration:none;padding:6px 10px;display:block}

/* Submenús (desktop por hover) */
.menu-list li>ul{
  display:none;position:absolute;left:0;top:100%;
  background:#1f5fb8;list-style:none;padding:4px 0;margin:0;min-width:200px;border-radius:4px;
  z-index:2000;
}
.menu-list li>ul li a{padding:8px 10px}
.menu-list li:hover>ul{display:block}

/* Indicador (si algún día añadís un caret) */
.menu-list li.has-submenu>.submenu-toggle{
  display:none;background:transparent;border:0;color:#fff;font-size:14px;padding:6px 6px;margin-left:4px;cursor:pointer;
}

/* Iconos sociales (fila) */
.social-icons{
  margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:nowrap
}
.social-icons a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.social-icons img{width:22px;height:22px;display:block}

/* === MÓVIL (≤768px) === */
@media (max-width:768px){
  .menu-toggle{display:block}

  /* Panel 1er nivel: ocupa todo el ancho, pegado a la izquierda */
  .menu-list{
    display:none;flex-direction:column;align-items:stretch;
    width:100%;
    border-top:1px solid rgba(255,255,255,.25);
    position:relative; /* contexto para el subpanel absoluto */
    overflow:hidden;background:#2a7fe8;
    contain:layout paint;overscroll-behavior:contain;touch-action:manipulation;
  }
  .menu-list.visible{display:flex}
  .menu-list a{text-align:left}

  /* Desactivamos hover en móvil (no forzamos display:none; simplemente no usamos hover) */
  .menu-list li:hover>ul{ /* intencionalmente vacío */ }

  .menu-list li.has-submenu{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    position:static; /* el UL se posiciona contra el UL padre */
  }

  /* Submenú deslizante tipo panel, ancho 100% del menú */
  .menu-list li>ul{
    display:block;             /* ← en móvil debe existir para poder deslizar */
    position:absolute;left:0;right:0;top:0;width:100%;
    background:#1f5fb8;list-style:none;margin:0;padding:0;
    z-index:3000;box-sizing:border-box;max-height:calc(100vh - 56px);overflow:auto;

    transform:translate3d(100%,0,0); /* fuera de vista a la derecha */
    transition:transform .25s ease;will-change:transform;backface-visibility:hidden;
  }
  .menu-list li.open>ul{
    display:block;             /* asegura visibilidad por si algo la pisa */
    transform:translate3d(0,0,0);
  }
  .menu-list li:not(.open)>ul{pointer-events:none}

  /* “◂ Volver” que inyecta JS */
  .menu-list li>ul li.submenu-back a{
    display:block;padding:12px;font-weight:700;background:rgba(0,0,0,.15);color:#fff;
  }
  .menu-list li>ul li a{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
  .menu-list li>ul li:last-child a{border-bottom:0}
}

/* === DESKTOP (≥769px) — Forzamos estado limpio === */
@media (min-width:769px){
  #menuHorizontal .menu-toggle{display:none}
  #menuHorizontal .menu-list{
    display:flex!important;flex-direction:row;width:auto;padding:0;margin:0;position:static;overflow:visible;
  }
  .menu-list li>ul li.submenu-back{display:none!important}
}

/* === LAYOUT === */
main#contenedor{display:flex;flex-wrap:wrap;gap:1px;margin-top:.1em}
.cuerpo{
  flex:1 1 640px;background:linear-gradient(to left,#bc92f2 60%,#9a4be9 100%);
  padding:10px 15px 0 40px;box-shadow:0 6px 18px rgba(0,0,0,.2);
  border-radius:4px;border:1px solid #ddd;line-height:1.8;color:#2b2b2b;
}
.cuerpo h2{font-size:2em;color:#081944;margin-bottom:5px;border-bottom:3px solid #2a7fe8;padding-bottom:5px}
.cuerpo h3{font-size:1.5em;color:#070707;margin:5px 0;position:relative}
.cuerpo h3::before{content:"★";position:absolute;left:-30px;color:#e2791d;font-size:1.1em}
.cuerpo p,.cuerpo .p1{font-size:1.1em;margin:.4em 0 .2em;text-align:justify;background:rgba(255,255,255,.6);padding:5px 10px;border-left:4px solid #2a7fe8;border-radius:4px}

.carrusel-lateral{float:right;width:250px;margin:0 0 12px 16px}
.carrusel-lateral-contenedor{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}
.carrusel-lateral-contenedor img{max-width:100%;max-height:100%;display:none;object-fit:contain}
.carrusel-lateral-contenedor img.activo{display:block}
@media (max-width:992px){
  .carrusel-lateral{float:none;width:100%;margin:8px 0 12px 0}
  .carrusel-lateral-contenedor{aspect-ratio:4/3}
}

#Barraderecha{flex:1 1 280px;display:flex;flex-direction:column;gap:10px;background:#e9bb9b;box-shadow:-20px 0 20px rgba(55,52,52,1);margin-left:10px}
.fila-carruseles{display:flex;justify-content:center;gap:1px;margin-bottom:3px}
#Barraderecha .carrusel{flex:1 1 50%;display:flex;flex-direction:column;align-items:center}
#Barraderecha .carrusel h4{font-size:1.5rem;font-weight:bold;color:#c5410c;text-align:center;margin:0 0 5px;min-height:2.4em;display:flex;align-items:center;justify-content:center}
#Barraderecha .carrusel-contenedor{
  position:relative;width:100%;height:220px;padding-bottom:20px;border-bottom:1px solid #d8a68a;
  display:flex;justify-content:center;align-items:center;background:#e9bb9b
}
#Barraderecha .carrusel-contenedor img{
  opacity:0;position:absolute;transition:opacity 1s ease;width:auto;max-width:calc(100% - 20px);max-height:100%;
  left:50%;top:50%;transform:translate(-50%,-50%);z-index:0
}
#Barraderecha .carrusel-contenedor img.activo{opacity:1;z-index:1}
#Barraderecha .fila-2 .carrusel-contenedor{height:400px;overflow:hidden}
@media (max-width:600px){
  .fila-carruseles{flex-direction:column}
  #Barraderecha .carrusel{flex:1 1 100%}
  #Barraderecha .carrusel-contenedor{height:200px}
  #Barraderecha .fila-2 .carrusel-contenedor{height:320px}
}

/* === PIE === */
footer.pie{background:#ecad54;padding:5px;border-top:2px solid #ccc;display:flex;flex-direction:column;align-items:center;gap:10px}
.footer-links{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;text-align:center}
.link{color:#000204;text-decoration:none;font-weight:bold;display:flex;align-items:center;gap:8px}
.footer-copy{background:#000;color:#fff;width:100%;text-align:center;padding:5px 0;font-size:.85em}