/* ============================================================
   EMAPAAC-EP · Inicio (rediseño)
   Todo el selector cuelga de #ep-inicio. No toca :root ni el tema.
   ============================================================ */

#ep-inicio{
  /* azules */
  --ep-azul:        #0E58A1;
  --ep-azul-icono:  #206AB1;
  --ep-azul-panel:  #0E498D;
  --ep-azul-tenue:  #E9F1F9;

  /* verdes */
  --ep-verde:       #76A322;
  --ep-verde-alto:  #8CB524;
  --ep-verde-bajo:  #68940D;
  --ep-verde-icono: #739D39;
  --ep-verde-tenue: #F0F5E4;

  /* acentos de accesos rápidos */
  --ep-turquesa:    #40ABBD;
  --ep-ambar:       #EFA834;
  --ep-rojo:        #DA423F;
  --ep-morado:      #725990;

  /* neutros */
  --ep-tinta:       #121A25;
  --ep-tinta-suave: #56636F;
  --ep-linea:       #E3E8ED;
  --ep-papel:       #FFFFFF;

  --ep-radio:   12px;
  --ep-radio-g: 16px;
  --ep-sombra:  0 1px 2px rgba(12,40,74,.05), 0 8px 22px rgba(12,40,74,.07);
  --ep-sombra-alta: 0 12px 32px rgba(12,40,74,.16);
  --ep-transicion: .22s ease;

  display:block;
  font-family:inherit;
  color:var(--ep-tinta);
}

#ep-inicio img{max-width:100%;display:block}
#ep-inicio a{color:var(--ep-azul);text-decoration:none}
#ep-inicio ul{margin:0;padding:0;list-style:none}

#ep-inicio .ep-seccion{padding:52px 0}
#ep-inicio .ep-seccion--seguida{padding-top:0}
#ep-inicio .ep-titulo-seccion{font-size:1.6rem;color:var(--ep-azul);letter-spacing:.2px;margin:0 0 20px;font-weight:700;line-height:1.18}
#ep-inicio .ep-titulo-seccion--centro{text-align:center;margin-bottom:30px}

/* --- Botones --------------------------------------------------- */
#ep-inicio .ep-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border:0;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.2;
  transition:transform var(--ep-transicion),box-shadow var(--ep-transicion),background var(--ep-transicion);
}
#ep-inicio .ep-btn:hover{transform:translateY(-2px);box-shadow:var(--ep-sombra-alta);color:#fff}
#ep-inicio .ep-btn--azul{background:var(--ep-azul);color:#fff}
#ep-inicio .ep-btn--azul:hover{background:#0c4d8f}
#ep-inicio .ep-btn--verde{background:#4F8CCA;color:#fff}
#ep-inicio .ep-btn--verde:hover{filter:brightness(1.06)}
#ep-inicio .ep-btn--blanco{background:#fff;color:var(--ep-azul-panel)}

/* --- Hero: carrusel 75% + panel de accesos directos 25% ------------
   CAUSA REAL DEL COLAPSO (confirmada con Playwright, no a ciegas):
   .ep-hero es display:grid pero nunca tuvo width:100% explicito. Sin eso,
   el navegador lo dejaba en ~211px (su ancho minimo de contenido) en vez
   de expandirse a los 1366px disponibles de #ep-inicio. Probado en vivo:
   agregar SOLO min-width:0 a los hijos, sin el width:100% en el padre,
   NO arregla nada (sigue en 211px). El fix real es el width:100% de abajo;
   min-width:0 se deja ademas como defensa extra, ya recomendada por el
   brief, para que contenido futuro no vuelva a forzar el ancho del track. */
#ep-inicio .ep-hero{
  display:grid;grid-template-columns:3fr 1fr;align-items:stretch;
  width:100%;
}
#ep-inicio .ep-hero #slider,
#ep-inicio .ep-hero__panel{
  min-width:0;
}
#ep-inicio .ep-hero__panel{
  background:linear-gradient(180deg,var(--ep-blanco) 0%,#fdfdfd 100%);
  display:flex;flex-direction:column;justify-content:space-around;
  padding:24px 20px;
}
#ep-inicio .ep-acceso-hero{
  display:flex;align-items:center;gap:16px;
  padding:14px 4px;color:#000000;text-decoration:none;border-radius:8px;
  transition:background var(--ep-transicion),transform var(--ep-transicion);
}
#ep-inicio .ep-acceso-hero:hover{background:rgba(255,255,255,.10);transform:translateX(4px)}
#ep-inicio .ep-acceso-hero:focus-visible{outline:2px solid #fff;outline-offset:2px}
#ep-inicio .ep-acceso-hero img{height:64px;width:auto;flex:0 0 auto}
#ep-inicio .ep-acceso-hero span{
  font-weight:700;font-size:clamp(13px,1.1vw,15px);line-height:1.25;
  overflow-wrap:break-word;min-width:0;
}
#ep-inicio .ep-acceso-hero + .ep-acceso-hero{border-top:1px solid rgba(255,255,255,.18)}
#ep-inicio .ep-acceso-hero--externo span::after{content:" ↗";opacity:.7;font-size:.85em}

/* El slider trae un efecto Ken Burns (zoom continuo de 14s, style.css
   ~L8669) que va recortando mas la imagen con el tiempo. A 100% de ancho
   no se notaba; a 75% el zoom termina comiendose el texto quemado en
   carrusel-1.jpg ("EMAPAAC mas cerca de ti"). Se desactiva el zoom y se
   fija un encuadre estatico probado visualmente: con la "E" completa y el
   tecnico en cuadro (15% deja el texto intacto; desde ~25% ya se pierde
   la "E" de EMAPAAC). */
#ep-inicio .ep-hero .kenburns-bg{
  background-position:15% 20% !important;
  transform:none !important;
  transition:none !important;
}

@media (max-width:1199px) and (min-width:768px){
  #ep-inicio .ep-acceso-hero img{height:52px}
  #ep-inicio .ep-acceso-hero{gap:12px}
}
@media (max-width:767px){
  #ep-inicio .ep-hero{grid-template-columns:1fr}
  #ep-inicio .ep-hero__panel{
    flex-direction:row;
    background:linear-gradient(90deg,var(--ep-azul) 0%,#0a4a8a 100%);
  }
  #ep-inicio .ep-acceso-hero{flex:1;flex-direction:column;text-align:center;gap:8px}
  #ep-inicio .ep-acceso-hero span{font-size:13px}
  #ep-inicio .ep-acceso-hero + .ep-acceso-hero{border-top:0;border-left:1px solid rgba(255,255,255,.18)}
}

/* --- Accesos rápidos --------------------------------------------- */
#ep-inicio .ep-accesos{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
#ep-inicio .ep-acceso{
  background:var(--ep-papel);border:1px solid var(--ep-linea);border-radius:var(--ep-radio);
  padding:28px 16px 26px;text-align:center;color:inherit;box-shadow:var(--ep-sombra);
  display:flex;flex-direction:column;align-items:center;
  transition:transform var(--ep-transicion),box-shadow var(--ep-transicion);
}
#ep-inicio .ep-acceso:hover{transform:translateY(-5px);box-shadow:var(--ep-sombra-alta)}
#ep-inicio .ep-acceso__icono{width:118px;height:118px;margin-bottom:16px;flex:0 0 auto}
#ep-inicio .ep-acceso__icono img{width:100%;height:100%;object-fit:contain}
#ep-inicio .ep-acceso h3{font-size:1.05rem;font-weight:700;margin:0 0 8px}
#ep-inicio .ep-acceso p{font-size:.87rem;font-weight:600;color:var(--ep-tinta-suave);margin:0;line-height:1.4}

/* --- Avisos importantes ------------------------------------------- */
#ep-inicio .ep-avisos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
#ep-inicio .ep-aviso{
  background:var(--ep-papel);border:1px solid var(--ep-linea);border-radius:var(--ep-radio);
  padding:22px;display:flex;gap:16px;align-items:center;box-shadow:var(--ep-sombra);
  color:inherit;transition:transform var(--ep-transicion),box-shadow var(--ep-transicion);
}
#ep-inicio .ep-aviso:hover{transform:translateY(-5px);box-shadow:var(--ep-sombra-alta)}
#ep-inicio .ep-aviso__icono{width:66px;height:66px;flex:0 0 auto}
#ep-inicio .ep-aviso__icono img{width:100%;height:100%;object-fit:contain}
#ep-inicio .ep-aviso h3{font-size:1.02rem;margin:0;font-weight:700}

/* --- Nuestros servicios -------------------------------------------- */
#ep-inicio .ep-servicios{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
#ep-inicio .ep-servicio{
  background:var(--ep-papel);border:1px solid var(--ep-linea);border-radius:var(--ep-radio);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--ep-sombra);color:inherit;
  transition:transform var(--ep-transicion),box-shadow var(--ep-transicion);
}
#ep-inicio .ep-servicio:hover{transform:translateY(-5px);box-shadow:var(--ep-sombra-alta)}
#ep-inicio .ep-servicio__medio{
  background:linear-gradient(180deg,#EDF3FA 0%,#FFFFFF 100%);
  border-bottom:1px solid var(--ep-linea);
  display:grid;place-items:center;padding:24px;
}
#ep-inicio .ep-servicio__medio img{width:150px;height:150px;object-fit:contain}
#ep-inicio .ep-servicio__cuerpo{padding:20px;text-align:center}
#ep-inicio .ep-servicio__cuerpo h3{font-size:1.05rem;font-weight:700;margin:0}

/* --- Franja: calidad / trámites / video ----------------------------- */
#ep-inicio .ep-franja{display:grid;grid-template-columns:1.15fr 1fr .95fr;gap:18px;align-items:stretch}

#ep-inicio .ep-calidad{
  background:var(--ep-azul-panel);color:#fff;border-radius:var(--ep-radio-g);
  padding:30px;position:relative;overflow:hidden;box-shadow:var(--ep-sombra);
}
#ep-inicio .ep-calidad__vaso{position:absolute;right:2%;bottom:8%;width:40%;max-width:190px;z-index:1;pointer-events:none}
#ep-inicio .ep-calidad__texto{position:relative;z-index:2;max-width:60%}
#ep-inicio .ep-calidad h2{font-size:1.4rem;text-transform:uppercase;letter-spacing:.4px;margin:0 0 14px;font-weight:700;line-height:1.18}
#ep-inicio .ep-calidad__intro{font-size:.9rem;color:#CADFF3;margin:0 0 20px}
#ep-inicio .ep-calidad ul{display:grid;gap:11px;margin-bottom:24px}
#ep-inicio .ep-calidad li{display:flex;gap:10px;align-items:center;font-size:.95rem}
#ep-inicio .ep-calidad li svg{width:20px;height:20px;flex:0 0 auto;color:#fff}

#ep-inicio .ep-tramites{
  background:#F4F7FB;border-radius:var(--ep-radio-g);padding:30px;
  display:flex;flex-direction:column;box-shadow:var(--ep-sombra);

}
#ep-inicio .ep-tramites h2{font-size:1.4rem;color:#297dd1;text-transform:uppercase;letter-spacing:.4px;margin:0 0 16px;font-weight:700;line-height:1.18}
#ep-inicio .ep-tramites li{
  display:flex;align-items:center;gap:12px;font-size:.93rem;
  padding:10px 0;border-bottom:1px solid rgba(104,148,13,.2);
}
#ep-inicio .ep-tramites li:last-child{border-bottom:0}
#ep-inicio .ep-tramites li svg{width:20px;height:20px;color:var(--ep-verde-bajo);flex:0 0 auto}
#ep-inicio .ep-tramites li a{color:var(--ep-tinta);flex:1}
#ep-inicio .ep-tramites li a:hover{color:var(--ep-verde-bajo)}
#ep-inicio .ep-tramites .ep-btn{margin-top:auto;align-self:flex-start}

#ep-inicio .ep-video-caja{
  background:var(--ep-papel);border:1px solid var(--ep-linea);border-radius:var(--ep-radio-g);
  overflow:hidden;min-height:300px;box-shadow:var(--ep-sombra);display:flex;
  align-items:stretch;justify-content:center;
}
/* El SDK de Facebook inyecta un span + iframe con width/height inline:
   hay que forzarlos con !important para que llenen la tarjeta. */
#ep-inicio .ep-video-caja .fb-page,
#ep-inicio .ep-video-caja .fb-page > span,
#ep-inicio .ep-video-caja .fb-page iframe{
  width:100% !important;
  height:100% !important;
  min-height:100%;
}
/* Fallback visible si el SDK no carga (bloqueado, sin red, cookies rechazadas) */
#ep-inicio .ep-video-caja .fb-xfbml-parse-ignore{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;height:100%;margin:0;padding:24px;
  background:var(--ep-azul-tenue);
}
#ep-inicio .ep-video-caja .fb-xfbml-parse-ignore a{
  color:var(--ep-azul);font-weight:600;text-decoration:underline;
}

/* --- Reporta una novedad --------------------------------------------- */
#ep-inicio .ep-reporta{
  background:#F4F7FB;
  border-radius:var(--ep-radio-g);overflow:hidden;
  padding:30px;box-shadow:var(--ep-sombra);
}
#ep-inicio .ep-reporta h2{font-size:1.5rem;color:#4F8CCA;text-transform:uppercase;letter-spacing:.4px;margin:0 0 6px;font-weight:700;line-height:1.18}
#ep-inicio .ep-reporta__intro{margin:0 0 20px;font-size:.93rem;color:var(--ep-tinta-suave)}
#ep-inicio .ep-tipos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:24px}
#ep-inicio .ep-tipo{
  background:var(--ep-papel);border:1px solid var(--ep-linea);border-radius:var(--ep-radio);
  padding:16px 6px;text-align:center;color:var(--ep-tinta);
  transition:border-color var(--ep-transicion),transform var(--ep-transicion);

}





#ep-inicio .ep-tipo:hover{border-color:var(--ep-verde);transform:translateY(-3px)}
#ep-inicio .ep-tipo img{width:58px;height:58px;object-fit:contain;margin:0 auto 9px;display:block}
#ep-inicio .ep-tipo span{font-size:.76rem;font-weight:600;line-height:1.25;display:block}
#ep-inicio .ep-reporta__pie{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#ep-inicio .ep-reporta__pie p{margin:0;font-size:.85rem;color:var(--ep-tinta-suave)}
#ep-inicio .ep-reporta__pie strong{display:block;font-size:1rem;color:var(--ep-azul-panel)}

/* Contenedor: controla dónde se ubica el botón */
#ep-inicio .ep-denuncias{
  margin-left:auto;
  display:flex;                 /* por defecto, el botón se pega a la izquierda */
}

/* Variante ancha y horizontal de la tarjeta */
#ep-inicio .ep-tipo--ancho{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  text-align:left;
  width:100%;
  max-width:500px;              /* aquí regulas el ancho */
  min-height:109px;             /* iguala la altura de las tarjetas de arriba */
  padding:13px 20px;
 
  }

/* El icono deja de estar centrado arriba y pasa a la izquierda */
#ep-inicio .ep-tipo--ancho img{
  margin:0;
  flex: shrink 0;
}

#ep-inicio .ep-tipo--ancho span{
  font-size:.95rem;
}

/* --- Adaptable -------------------------------------------------------- */
@media (max-width:1120px){
  #ep-inicio .ep-accesos{grid-template-columns:repeat(3,1fr)}
  #ep-inicio .ep-servicios{grid-template-columns:repeat(2,1fr)}
  #ep-inicio .ep-franja{grid-template-columns:1fr 1fr}
  #ep-inicio .ep-video-caja{grid-column:1/-1;min-height:240px}
}
@media (max-width:900px){
  #ep-inicio .ep-avisos{grid-template-columns:1fr}
  #ep-inicio .ep-servicios{grid-template-columns:repeat(2,1fr)}
  #ep-inicio .ep-franja{grid-template-columns:1fr}
  #ep-inicio .ep-calidad__texto{max-width:100%}
  #ep-inicio .ep-calidad__vaso{display:none}
  #ep-inicio .ep-banda-botones__fila{flex-direction:column;align-items:stretch}
}
@media (max-width:600px){
  #ep-inicio .ep-accesos{grid-template-columns:repeat(2,1fr)}
  #ep-inicio .ep-acceso__icono{width:92px;height:92px}
  #ep-inicio .ep-servicios{grid-template-columns:1fr}
  #ep-inicio .ep-servicio__medio img{width:120px;height:120px}
  #ep-inicio .ep-tipos{grid-template-columns:repeat(3,1fr)}
  #ep-inicio .ep-seccion{padding:36px 0}
  #ep-inicio .ep-btn-cta{font-size:.86rem;padding:13px 20px}
   #ep-inicio .ep-btn-cta{background-color:#206AB1;}
}
@media (prefers-reduced-motion:reduce){
  #ep-inicio .ep-btn:hover,#ep-inicio .ep-btn-cta:hover,#ep-inicio .ep-acceso:hover,#ep-inicio .ep-servicio:hover,#ep-inicio .ep-aviso:hover{transform:none}
}

/* --- Cálculo de la tasa de Recolección de Residuos (reemplazo de "Eventos") --- */
.ep-tasa-recoleccion__img{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#EDF3FA 0%,#FFFFFF 100%);
  border:1px solid #E3E8ED;border-radius:12px;
  padding:4px;
}
.ep-tasa-recoleccion__img img{width:370px;height:291px;object-fit:contain}


/* Tarea 2: reduce la altura del carrusel sin tocar css/style.css.
   El tema define ".inspiro-slider.slider-halfscreen{height:72vh}"
   (style.css ~L4124), especificidad 2 clases. El selector de abajo usa el
   id #slider (ver index.php) + la misma clase, lo que le gana en
   especificidad sin necesitar !important. calc() resta un valor fijo
   sobre el alto relativo al viewport tal como esta hoy (72vh).

   Objetivo: que carrusel + banda de botones (justo debajo, #ep-inicio
   .ep-banda-botones) quepan sin scroll en la primera carga.
   Con -20px, a 1366x768 (calculo desde CSS: topbar ~41px + header 80px +
   hero + banda ~127px) faltaban ~13px. Se sube a -40px para cubrir eso
   con margen: a 1366x768 queda ~7px de sobra, a 1440x900 ~44px de sobra.
   Estimacion desde CSS, no medida en navegador real. */
#slider.slider-halfscreen{
    height: calc(72vh - 40px);
}