/*
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 BÁSICO === */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow: auto; background-color:#080000; }

body {
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  margin: 5px;
  padding: 0;
  overflow-x: hidden;
  height: auto;
  color: #333;
  background-color: #2e2525;
  scroll-behavior: smooth;
}

img { max-width: 100%; display: block; height: auto; }

/* === CONTENEDOR GENERAL === */
.wrapper { max-width: 1140px; margin: auto; padding: 0 20px; height: auto; }

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

/* === SLIDER PRINCIPAL (fade, sin parpadeo) === */
.slider-wrapper{
  width:100%;
  max-width:1140px;
  margin:auto;
  /* diseño base 1140x300 ≈ 3.8:1 */
  aspect-ratio: 1140 / 300;
  height:auto;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  z-index:1;
  background-color:transparent;
}
.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; }

/* Botones de navegación */
.slider-wrapper .prev,
.slider-wrapper .next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background-color:rgba(0,0,0,0.4);
  color:#fff; border:none;
  padding:10px 15px; font-size:24px; cursor:pointer; z-index:2;
}
.slider-wrapper .prev{ left:10px; }
.slider-wrapper .next{ right:10px; }

/* Puntos indicadores */
.slider-dots{ text-align:center; margin-top:10px; }
.slider-dots span{
  width:12px; height:12px; background:rgba(255,255,255,0.6);
  border-radius:50%; cursor:pointer; transition:background 0.3s;
  display:inline-block; margin:0 3px;
}
.slider-dots span.active{ background:#fff; }

/* Texto del slider */
.slider-texto{
  position:absolute; opacity:0; transform:translateY(20px);
  transition:opacity 0.6s ease, transform 0.6s ease;
  bottom:10px; right:10px;
  background:rgba(79,68,68,0.6);
  color:#fff; padding:5px 5px; border-radius:8px;
  text-align:left; max-width:300px;
  font-family:'Segoe UI', sans-serif; z-index:5;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.slider-texto.visible{ opacity:1; transform:translateY(0); }
.slider-texto h2{ margin:0 0 4px; font-size:18px; font-weight:bold; }
.slider-texto p{ font-size:14px; line-height:1.4; }

/* Fondo detrás del slider */
.slider-fondo{ width:100%; background: linear-gradient(to top, #2a7fe8 5%, #f1a042 100%); padding:0; }

/* Más “alto” en móviles (no chato) */
@media (max-width: 768px){
  .slider-wrapper{ aspect-ratio: 16 / 9; }
}
@media (min-width:769px) and (max-width:1024px){
  .slider-wrapper{ aspect-ratio: 21 / 9; }
}

/* === MENÚ HORIZONTAL === */
#menuHorizontal{
  width:auto; margin:auto; display:flex; flex-wrap:wrap; justify-content:space-between;
  background-color:#2a7fe8; padding:0; border-top:0.05em solid #3147d2;
}
.menu-toggle{ display:none; }
.menu-list{ list-style:none; padding:0; display:flex; flex-wrap:wrap; margin:0; }
.menu-list li{ position:relative; }
.menu-list > li{ margin-right:15px; }
.menu-list a{ color:#fff; text-decoration:none; padding: 4px 10px;  /* arriba/abajo = 6px, izquierda/derecha = 10px */ display:block; }
.menu-list li > ul{display:none; position:absolute; background:#1f5fb8; list-style:none; padding:0;margin-right: 8px;}  /* menos espacio horizontal */
.menu-list li:hover ul{ display:block; }

.social-icons{ display:flex; gap:10px; align-items:center; }

@media (max-width: 768px){
  .menu-toggle{
    display:block; font-size:28px; background:none; border:none; color:white; padding:10px;
  }
  .menu-list{ display:none; flex-direction:column; width:100%; }
  .menu-list.visible{ display:flex; }
}

/* === CONTENIDO PRINCIPAL === */
main#contenedor{ display:flex; flex-wrap:wrap; gap:1px; margin-top:0.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,0.2);
  border-radius:4px; border:1px solid #ddd;
  font-family:'Segoe UI', sans-serif; line-height:1.8; color:#2b2b2b;
}
@media (max-width: 768px){ .cuerpo{ padding:15px; } }

/* Títulos y párrafos */
.cuerpo h2{
  font-size:2em; color:#081944; margin-bottom:5px;
  text-shadow:1px 1px 3px rgba(0,0,0,0.1);
  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-top:0.4em; margin-bottom:0.2em; text-align:justify;
  background-color:rgba(255,255,255,0.6);
  padding:5px 10px; border-left:4px solid #2a7fe8; border-radius:4px;
}

/* === CARRUSEL LATERAL (CUERPO) — IMAGEN A TAMAÑO REAL === */
/* Carrusel lateral único — centrado vertical y responsive */
.carrusel-lateral {
  float: right;
  width: 250px;
  margin: 0 0 12px 16px;
  background: transparent;   /* fondo igual al del cuerpo */
  border-radius: 0;
  overflow: hidden;}

.carrusel-lateral-contenedor {
  position: relative;
  width: 100%;
  height: 100%;               /* el alto lo define JS en desktop */
  display: flex;              /* ✅ permite centrar vertical y horizontal */
  justify-content: center;    /* centra horizontal */
  align-items: center;        /* ✅ centra vertical */
  background: transparent;
}

.carrusel-lateral-contenedor img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: none;
  object-fit: contain;        /* no recorta, mantiene proporción */
}

.carrusel-lateral-contenedor img.activo {
  display: block;
}

/* 📱 Mobile / tablet */
@media (max-width: 992px) {
  .carrusel-lateral {
    float: none;
    width: 100%;
    margin: 8px 0 12px 0;
  }

  .carrusel-lateral-contenedor {
    aspect-ratio: 4 / 3;     /* proporción en móvil */
  }
}

/* === BARRA DERECHA === */#Barraderecha {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #e9bb9b;

  /*sombra más suave y clara */
  box-shadow: -20px 0 20px rgba(55, 52, 52, 1);

  /*margen a la izquierda para separarse del carrusel lateral */
  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-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size:1.5rem; font-weight:bold; color:#c5410c; text-align:center;
  margin:0 0 5px 0; letter-spacing:0.5px; text-shadow:1px 1px 1px #fff2ee;
}
@media (max-width: 600px){
  #Barraderecha .carrusel h4{
    margin-bottom:4px; font-size:1.1rem; line-height:1.2; text-align:center;
  }
}

@media (max-width: 600px){
  #Barraderecha .fila-carruseles{ display:flex; flex-direction:column; align-items:stretch; }
  #Barraderecha .carrusel{
    display:flex; flex-direction:column; justify-content:flex-start;
    flex:1 1 auto; min-height:280px;
  }
  #Barraderecha .carrusel-contenedor{ flex:1; }
}

/* Carruseles laterales en barra derecha (con fade y overlay fijo) */
#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; margin:0 3px;
}
#Barraderecha .carrusel-contenedor img.activo{ opacity:1; z-index:1; }

#Barraderecha .fila-2 .carrusel-contenedor{
  position:relative; width:100%; height:400px; overflow:hidden; border-radius:1px; background:#e9bb9b;
}

/* Responsive barra derecha */
@media (max-width: 600px){
  .fila-carruseles{ flex-direction:column; }
  #Barraderecha .carrusel{ flex:1 1 100%; }
}

/* === Buscador (barra derecha) === */
.buscador-responsive{ display:flex; justify-content:flex-end; padding:10px 20px; }
.buscador-responsive form{ display:flex; align-items:center; gap:8px; }
.buscador-responsive input[type="text"]{
  padding:8px 12px; font-size:14px; border:1px solid #ccc; border-radius:20px;
  width:200px; background-color:#fff; color:#333; outline:none;
}
.buscador-responsive button{
  background-color:#2a7fe8; color:#fff; border:none; border-radius:50%;
  width:36px; height:36px; font-size:16px; cursor:pointer; transition: background 0.3s ease;
}
.buscador-responsive button:hover{ background-color:#195bbb; }

@media (max-width: 600px){
  .buscador-responsive{ justify-content:center; padding:10px; }
  .buscador-responsive form{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .buscador-responsive input[type="text"]{ width:100%; margin-bottom:8px; }
}

/* === PIE DE PÁGINA === */
footer.pie{
  background-color:#ecad54; padding:5px; font-family:Arial, sans-serif;
  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; transition:color 0.3s ease;
  display:flex; align-items:center; gap:8px; font-size:1rem;
}
.link i{ font-size:1.1em; color:#c5410c; }
.link:hover{ text-decoration:underline; color:#195bbb; }

.footer-visitas{ display:flex; flex-direction:column; color:#070606; align-items:center; font-size:0.9em; }
.footer-copy{ background-color:#000; color:#fff; width:100%; text-align:center; padding:5px 0; font-size:0.85em; }

@media (max-width: 600px){
  .footer-links{ flex-direction:column; gap:12px; }
  .footer-visitas img{ max-width:120px; }
  .link{ justify-content:center; }
}