/* ---------------------------------------------------------------------------
   Estilos propios del sitio del SAME 107 Jujuy.
   Se cargan DESPUES de style.css para no modificar la hoja de la plantilla,
   que viene minificada. Respeta la paleta original: #5AAC4E, #234821, #0D210B.
   --------------------------------------------------------------------------- */

/* Oswald: solo para el nombre del organismo en el header. El resto del sitio usa
   Poppins, que style.css ya trae del mismo servicio de fuentes. */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");

:root {
  --same-verde: #5AAC4E;
  --same-verde-oscuro: #234821;
  --same-tinta: #0D210B;
  --same-claro: #f3f9f1;
}

/* --- Nombre del organismo junto al logo del header --------------------------
   Va en Oswald para diferenciarse de Poppins, que es la del resto del sitio.
   El <img> del logo quedo con alt="" porque este texto ya nombra el enlace. */
.logo .marca-same {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.marca-texto {
  font-family: "Oswald", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: .6px;
  color: var(--same-verde-oscuro);
  white-space: nowrap;
  transition: .3s;
}
.logo .marca-same:hover .marca-texto {
  color: var(--same-verde);
}

/* En escritorio la columna del logo toma solo el ancho que necesita (logo + nombre)
   y el menu se queda con el resto; con las 2/12 de la plantilla el nombre no entraba. */
@media (min-width: 992px) {
  .main-header .logo-col { flex: 0 0 auto; width: auto; max-width: none; }
  .main-header .menu-col { flex: 1 1 0; max-width: none; }
}

/* Entre 992 y 1399 el menu completo mas el nombre no entran en una linea: se achica
   el nombre y se juntan un poco los items. */
@media (min-width: 992px) and (max-width: 1399px) {
  .marca-texto { font-size: 17px; letter-spacing: .3px; }
  .main-menu ul li a { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 991px) {
  .marca-texto { font-size: 19px; letter-spacing: .4px; }
}
@media (max-width: 575px) {
  .logo .marca-same { gap: 10px; }
  .marca-texto { font-size: 16px; letter-spacing: .2px; }
}

/* --- Iconos de las tarjetas de servicio -------------------------------------
   style.css ya define el hover (.single-cat:hover .cat-icon span), pero no
   tenia regla base. Aca va el estado normal: circulo translucido, icono blanco. */
.service-area .single-cat .cat-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 30px;
  transition: .4s;
}

/* --- Tarjetas de servicio de igual altura -----------------------------------
   Bootstrap 4 ya hace flex el .row; falta que la columna tambien lo sea para
   que la tarjeta se estire hasta la altura de la mas alta de su fila. */
.service-area .row.cards-iguales > [class*="col-"] {
  display: flex;
}
.service-area .row.cards-iguales .single-cat {
  width: 100%;
}

/* --- Bloque verde inferior (about-cap-wrapper) ------------------------------
   style.css pinta ese fondo con un pseudo-elemento de alto FIJO (536px, 437px
   en movil), asi que abajo de 1200px de ancho el contenido lo desbordaba: la
   foto se salia hasta 664px por abajo en tablet y el boton, 49px en 1024.
   Con height:auto + bottom, el fondo se estira al alto real del wrapper. */
.about-low-area .about-cap-wrapper::before {
  height: auto;
  bottom: -30px;
}

/* --- Página "Cuándo llamar al 107" ---------------------------------------- */

.aviso-107 {
  background: var(--same-verde);
  color: #fff;
  border-radius: 0 0 0 50px;
  padding: 38px 40px;
}
.aviso-107 h3 { color: #fff; font-size: 26px; margin-bottom: 12px; }
.aviso-107 p  { color: #fff; margin-bottom: 0; font-weight: 300; }
.aviso-107 .numero {
  font-size: 46px; font-weight: 700; line-height: 1;
  color: #fff; text-decoration: none; display: inline-block;
}
.aviso-107 .numero:hover { color: #fff; opacity: .85; }

/* Listas de "sí llamar" / "no llamar" */
.lista-107 { list-style: none; padding: 0; margin: 0; }
.lista-107 li {
  position: relative;
  padding: 12px 0 12px 42px;
  border-bottom: 1px solid #eaeaea;
  font-size: 16px;
  line-height: 1.6;
}
.lista-107 li:last-child { border-bottom: 0; }
.lista-107 li::before {
  position: absolute;
  left: 0; top: 11px;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.lista-si li::before { content: "\f00c"; background: var(--same-verde); color: #fff; }
.lista-no li::before { content: "\f00d"; background: #c94b40; color: #fff; }

/* Pasos numerados */
.pasos-107 { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.pasos-107 li {
  position: relative;
  counter-increment: paso;
  padding: 0 0 26px 58px;
  font-size: 16px;
  line-height: 1.7;
}
.pasos-107 li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--same-verde); color: #fff;
  font-weight: 600; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.pasos-107 li strong { display: block; color: var(--same-tinta); font-weight: 600; }

/* Fichas de recomendaciones */
.ficha {
  background: #fff;
  border: 1px solid #e8efe6;
  border-radius: 0 0 0 30px;
  padding: 30px 28px;
  height: 100%;
  transition: .3s;
}
.ficha:hover { border-color: var(--same-verde); box-shadow: 0 10px 30px rgba(35, 72, 33, .08); }
.ficha .ficha-icono {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--same-claro); color: var(--same-verde);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px;
}
.ficha h4 { font-size: 19px; color: var(--same-tinta); margin-bottom: 12px; }
.ficha p, .ficha li { font-size: 15px; line-height: 1.7; }
.ficha ul { padding-left: 18px; margin-bottom: 0; }
.ficha ul li { margin-bottom: 6px; }

/* Bloque de advertencia (qué NO hacer) */
.no-hacer {
  background: #fdf3f2;
  border-left: 4px solid #c94b40;
  padding: 22px 26px;
  border-radius: 4px;
}
.no-hacer h4 { font-size: 17px; color: #a83a30; margin-bottom: 10px; }
.no-hacer p  { margin-bottom: 0; font-size: 15px; }

/* Nota al pie de sección con la fuente */
.fuente-oficial { font-size: 14px; color: #6b7a68; }
.fuente-oficial a { color: var(--same-verde); font-weight: 600; }

/* --- Titulos principales en mayuscula --------------------------------------
   style.css aplica "capitalize" a .section-tittle h2 (pensado para ingles).
   El sitio usa mayusculas en los titulos principales: hero (h1) y encabezados
   de seccion (h2). Se hace por CSS para no alterar el texto del HTML. */
.hero__caption h1,
.section-tittle h2,
.section-tittle h2.es,
.section-tittle2 h2,
.wantToWork-caption h2,
.contact-title { text-transform: uppercase; }

/* --- Item "Capacitaciones" del menu -----------------------------------------
   En escritorio el acceso ya lo da el boton verde del header, asi que el item del
   menu principal se muestra solo en el menu movil, que slicknav clona desde
   ul#navigation hacia .mobile_menu (fuera de .main-menu, por eso no lo alcanza). */
@media (min-width: 992px) {
  .main-menu ul#navigation li.solo-movil { display: none; }
}

/* --- Hero de la home en pantallas angostas ---------------------------------
   El fondo del hero trae la foto dentro de un circulo alineado a la derecha, que
   en el celular queda fuera de cuadro (solo se ve un arco verde). Ahi el fondo pasa
   a color plano y la foto se repone completa arriba del texto, en un circulo armado
   por CSS. Hasta 991px, porque en tablet vertical el titulo se superpone con la foto. */
@media (max-width: 991px) {
  .slider-area:not(.slider-area2) {
    background-image: none;
    background-color: #dcf6da;
    padding-top: 45px;          /* evita que el margen del circulo colapse hacia afuera */
  }
  .slider-area:not(.slider-area2) .slider-height {
    height: auto;
    padding: 10px 0 55px;
  }
  .slider-area:not(.slider-area2)::before {
    content: "";
    display: block;
    width: 250px;                       /* fallback si no hay clamp() */
    height: 250px;
    width: clamp(230px, 62vw, 340px);
    height: clamp(230px, 62vw, 340px);
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 8px solid var(--same-verde);
    background: url(../img/same/ambulancia-same107.jpg) 5% 50% / cover no-repeat;
  }
}

/* --- Hero de las paginas internas y mapa, en pantallas angostas ------------- */
@media (max-width: 767px) {
  /* 260px fijos dejaban los titulos largos ("Cuando llamar al 107", "Capacitaciones")
     pegados a los bordes de la franja. */
  .slider-area2 .slider-height2 {
    height: auto;
    padding: 45px 0;
  }
  /* El mapa de la Base Central se mostraba solo desde 576px; en el celular es donde
     mas se usa, asi que se muestra con menos alto. */
  .mapa-base #map {
    height: 300px !important;
  }
}

@media (max-width: 767px) {
  .aviso-107 { padding: 30px 24px; }
  .aviso-107 .numero { font-size: 38px; }
  .ficha { padding: 24px 20px; }
}