/* =========================================================
   VARIABLES GENERALES
========================================================= */

:root{
  --azul:#243b8f;
  --azul-oscuro:#172554;
  --rojo:#e53935;
  --rosa:#e91e63;
  --verde:#22c55e;
  --celeste-portal:#39a1e4;
  --celeste:#eef8ff;
  --gris:#f5f7fb;
  --borde:#e6eaf2;
  --texto:#1f2937;
  --texto-suave:#64748b;
  --blanco:#fff;
  --sombra:0 24px 60px rgba(15,23,42,.12);
  --sombra-suave:0 12px 30px rgba(15,23,42,.08);
  --radio:24px;
}


/* =========================================================
   BASE
========================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  color:var(--texto);
  background:#fff;
}

body.modal-abierto{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}


/* =========================================================
   HEADER Y LOGOS
========================================================= */

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 18px rgba(15,23,42,.08);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
}

.header-contenido{
  width:100%;
  max-width:740px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:0 24px;
}

.logo{
  object-fit:contain;
  display:block;
}

.logo-principal{
  width:175px;
  height:auto;
  justify-self:center;
  transform:scale(1.1);
  transform-origin:center;
  z-index:2;
}

.logo-secundario{
  width:155px;
  height:auto;
  opacity:.95;
}

.logo-secundario:first-child{
  justify-self:end;
}

.logo-secundario:last-child{
  justify-self:start;
}


/* =========================================================
   HERO / PORTADA
========================================================= */

.hero{
  min-height:760px;
  margin-top:100px;
  position:relative;
  background-image:url("../img/jpg/logo_guardia.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:90px 24px 110px;
  overflow:hidden;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(15,23,42,.56) 0%,
    rgba(15,23,42,.28) 46%,
    rgba(255,255,255,.04) 100%
  );
}

.hero-contenido{
  width:100%;
  max-width:1180px;
  position:relative;
  z-index:2;
  color:#fff;
}

.hero-contenido::before{
  display:none;
}

.hero-contenido > *{
  position:relative;
  z-index:1;
}

.hero-etiqueta,
.subtitulo{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(233,30,99,.12);
  color:var(--rosa);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.hero-etiqueta{
  background:rgba(255,255,255,.22);
  color:#fff;
  backdrop-filter:blur(12px);
}

.hero h1{
  max-width:680px;
  font-size:64px;
  line-height:1.04;
  margin-bottom:22px;
  letter-spacing:-.04em;
  text-shadow:0 4px 18px rgba(0,0,0,.28);
}

.hero p{
  max-width:560px;
  font-size:20px;
  line-height:1.6;
  color:rgba(255,255,255,.95);
  margin-bottom:34px;
  text-shadow:0 3px 12px rgba(0,0,0,.28);
}

.hero-botones{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}


/* =========================================================
   BOTONES
========================================================= */

.btn-portal,
.btn-principal,
.btn-secundario{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:800;
  transition:.2s ease;
}

.svg-icon{
  display:block;
  width:1em;
  height:1em;
  object-fit:contain;
}

.btn-portal{
  background:var(--celeste-portal);
  color:#fff;
  box-shadow:0 14px 30px rgba(57,161,228,.34);
  gap:10px;
}

.btn-portal .svg-icon{
  width:20px;
  height:20px;
  filter:brightness(0) invert(1);
}

.btn-portal:hover{
  transform:translateY(-2px);
  background:#258fd0;
}

.btn-principal{
  background:var(--rosa);
  color:#fff;
  box-shadow:0 14px 30px rgba(233,30,99,.34);
}

.btn-principal:hover{
  transform:translateY(-2px);
  background:#d81b60;
}

.btn-secundario{
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(12px);
}

.btn-secundario:hover{
  background:rgba(255,255,255,.24);
}




/* =========================================================
   ESTRUCTURA GENERAL
========================================================= */

.seccion{
  padding:100px 24px;
}

.contenedor{
  max-width:1180px;
  margin:0 auto;
}

.institucional h2,
.encabezado-seccion h2,
.contacto h2,
.trabajo h2{
  color:var(--azul-oscuro);
  font-size:42px;
  line-height:1.12;
  letter-spacing:-.035em;
  margin-bottom:22px;
}


/* =========================================================
   SECCIÓN INSTITUCIONAL
========================================================= */

.institucional{
  background:#fff;
}

.institucional-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}

.institucional p{
  color:var(--texto-suave);
  font-size:18px;
  line-height:1.75;
}

.institucional-card{
  background:linear-gradient(145deg,#ffffff,#f8fbff);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:36px;
  box-shadow:var(--sombra-suave);
}

.institucional-card h3{
  color:var(--azul);
  font-size:26px;
  margin-bottom:14px;
}

.institucional-card p{
  font-size:16px;
  line-height:1.6;
  margin-bottom:28px;
}

.institucional-datos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.institucional-datos div{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:18px;
  padding:18px;
}

.institucional-datos strong{
  display:block;
  color:var(--rosa);
  font-size:24px;
  margin-bottom:4px;
}

.institucional-datos span{
  color:var(--texto-suave);
  font-size:14px;
}


/* =========================================================
   SECCIÓN SERVICIOS
========================================================= */

.servicios{
  background:var(--gris);
}

.encabezado-seccion{
  max-width:720px;
  margin-bottom:40px;
}

.servicios-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}

.servicio-card{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:28px;
  min-height:260px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
  transition:.2s ease;
}

.servicio-link{
  display:block;
  color:inherit;
}

.servicio-card-accion{
  padding:0;
}

.servicio-boton{
  width:100%;
  min-height:260px;
  padding:28px;
  border:0;
  background:transparent;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
}

.servicio-boton:focus-visible{
  outline:3px solid rgba(57,161,228,.36);
  outline-offset:4px;
  border-radius:8px;
}

.servicio-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-suave);
}

.icono{
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--celeste);
  color:var(--azul);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:900;
  margin-bottom:22px;
}

.icono .svg-icon{
  width:26px;
  height:26px;
  filter:brightness(0) saturate(100%) invert(23%) sepia(82%) saturate(1438%) hue-rotate(217deg) brightness(88%) contrast(91%);
}

.servicio-card h3{
  color:var(--azul-oscuro);
  font-size:20px;
  line-height:1.25;
  margin-bottom:12px;
}

.servicio-card p{
  color:var(--texto-suave);
  font-size:15px;
  line-height:1.65;
}

.modal{
  width:min(920px,calc(100% - 36px));
  height:min(720px,calc(100dvh - 36px));
  max-height:calc(100dvh - 36px);
  margin:auto;
  padding:0;
  border:0;
  border-radius:8px;
  box-shadow:0 30px 90px rgba(15,23,42,.34);
  overflow:hidden;
}

.modal::backdrop{
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(4px);
}

.modal-contenido{
  background:#fff;
  padding:34px;
  height:100%;
  overflow-y:auto;
}

.modal-encabezado{
  position:sticky;
  top:-34px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:34px;
  padding-bottom:20px;
  margin-bottom:22px;
  background:#fff;
  border-bottom:1px solid var(--borde);
}

.modal-encabezado h2{
  color:var(--azul-oscuro);
  font-size:28px;
  line-height:1.2;
  letter-spacing:0;
  margin:0;
}

.modal-encabezado .subtitulo{
  margin-bottom:10px;
}

.modal-cerrar{
  width:44px;
  height:44px;
  flex:0 0 auto;
  border:1px solid var(--borde);
  border-radius:8px;
  background:#fff;
  color:var(--azul-oscuro);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}

.modal-cerrar:hover{
  background:#f8faff;
  transform:translateY(-2px);
}

.modal-cerrar .svg-icon{
  width:18px;
  height:18px;
  filter:brightness(0) saturate(100%) invert(13%) sepia(34%) saturate(2472%) hue-rotate(213deg) brightness(92%) contrast(95%);
}

.especialidades-panel{
  display:block;
}

.especialidades-panel h3{
  color:var(--azul-oscuro);
  font-size:18px;
  line-height:1.25;
  margin-bottom:14px;
}

.especialidades-lista{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:12px;
}

.especialidad-item{
  border:1px solid var(--borde);
  border-radius:8px;
  background:#f8fbff;
  overflow:hidden;
  transition:.2s ease;
}

.especialidad-item.activa,
.especialidad-item:has(.especialidad-opcion.activa){
  border-color:rgba(57,161,228,.38);
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.especialidad-opcion{
  width:100%;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--texto);
  font-size:15px;
  font-family:inherit;
  line-height:1.35;
  text-align:left;
  padding:12px 14px;
  cursor:pointer;
  transition:.2s ease;
}

.especialidad-opcion:hover,
.especialidad-opcion.activa{
  background:#edf8ff;
  color:var(--azul-oscuro);
}

.especialidad-opcion.activa{
  box-shadow:inset 4px 0 0 var(--celeste-portal);
}

.medicos-lista{
  display:grid;
  gap:8px;
  list-style:none;
  padding:0 14px 14px;
}

.medicos-lista li{
  color:var(--texto);
  font-size:14px;
  line-height:1.35;
  padding-left:18px;
  position:relative;
}

.medicos-lista li::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--celeste-portal);
  position:absolute;
  left:0;
  top:.55em;
}


/* =========================================================
   SECCIÓN CONTACTO
========================================================= */

.contacto{
  background:#f8fbff;
}

.contacto-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:start;
}

.info-card{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:18px;
  padding:22px;
  margin-top:16px;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}

.info-card span{
  display:block;
  color:var(--azul);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.info-card h3{
  color:var(--azul-oscuro);
  font-size:20px;
  line-height:1.25;
  margin-bottom:6px;
}

.info-card p{
  color:var(--texto-suave);
  font-size:16px;
  line-height:1.5;
}

.info-emergencia{
  border-color:var(--borde);
  background:#fff;
}

.info-emergencia span{
  color:var(--rojo);
}

.telefonos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.telefonos a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 15px;
  border-radius:999px;
  border:1px solid rgba(36,59,143,.14);
  background:#eef2ff;
  color:var(--azul);
  font-weight:800;
  transition:.2s ease;
}

.telefonos a:hover{
  background:var(--azul);
  border-color:var(--azul);
  color:#fff;
}

.info-emergencia .telefonos a{
  background:#fff1f1;
  border-color:rgba(229,57,53,.18);
  color:var(--rojo);
}

.info-emergencia .telefonos a:hover{
  background:var(--rojo);
  border-color:var(--rojo);
  color:#fff;
}

.info-dissar{
  border-color:var(--borde);
  background:#fff;
}

.info-dissar span{
  color:var(--celeste-portal);
}

.info-san-patricio{
  border-color:var(--borde);
  background:#fff;
}

.info-san-patricio span{
  color:#d36d35;
}

.info-san-patricio h3{
  color:var(--azul-oscuro);
}

.info-san-patricio .telefonos a{
  background:#fff4ef;
  color:#d36d35;
  border-color:rgba(211,109,53,.22);
}

.info-san-patricio .telefonos a:hover{
  background:#d36d35;
  border-color:#d36d35;
  color:#fff;
}

.acciones-contacto{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:16px;
}

.accion-contacto{
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  transition:.2s ease;
}

.accion-contacto .svg-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.info-dissar .whatsapp-label{
  color:#16a34a;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}

.accion-contacto strong{
  line-height:1.1;
}

.accion-telefono{
  background:#eef2ff;
  border-color:rgba(36,59,143,.14);
  color:var(--azul);
}

.accion-telefono:hover{
  background:var(--azul);
  border-color:var(--azul);
  color:#fff;
}

.accion-telefono:hover .svg-icon,
.accion-whatsapp:hover .svg-icon{
  filter:brightness(0) invert(1);
}

.accion-telefono .svg-icon{
  filter:brightness(0) saturate(100%) invert(24%) sepia(42%) saturate(2086%) hue-rotate(219deg) brightness(89%) contrast(94%);
}

.accion-whatsapp{
  background:#dcfce7;
  border-color:rgba(22,163,74,.18);
  color:#16a34a;
}

.accion-whatsapp:hover{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
}

.accion-whatsapp:hover .whatsapp-label{
  color:#fff;
}

.accion-whatsapp .svg-icon{
  filter:brightness(0) saturate(100%) invert(48%) sepia(94%) saturate(399%) hue-rotate(90deg) brightness(93%) contrast(91%);
}

.colectivos-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.colectivos-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(36,59,143,.14);
  background:#eef8ff;
  color:var(--azul);
  font-weight:800;
  font-size:14px;
  transition:.2s ease;
}

.colectivos-links a:hover{
  background:var(--azul);
  border-color:var(--azul);
  color:#fff;
}


/* =========================================================
   CANALES RÁPIDOS
========================================================= */

.contacto-lateral{
  display:grid;
  gap:20px;
}

.canales-card{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:18px;
  padding:30px;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}

.canales-card > span{
  display:block;
  color:var(--azul);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.canales-card h3{
  color:var(--azul-oscuro);
  font-size:30px;
  line-height:1.2;
  margin-bottom:14px;
}

.canales-card p{
  color:var(--texto-suave);
  font-size:16px;
  line-height:1.65;
  margin-bottom:24px;
}

.canales-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.canal{
  min-height:136px;
  background:#fff;
  border:1px solid var(--borde);
  border-radius:16px;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  transition:.2s ease;
}

.canal:hover{
  transform:translateY(-2px);
  box-shadow:var(--sombra-suave);
}

.canal-icono{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:4px;
}

.canal-icono .svg-icon{
  width:22px;
  height:22px;
}

.canal strong{
  color:var(--azul-oscuro);
  font-size:16px;
  line-height:1.25;
}

.canal small{
  color:var(--texto-suave);
  font-size:13px;
  line-height:1.35;
}

.canal-whatsapp{
  border-color:rgba(34,197,94,.24);
  background:#fff;
}

.canal-whatsapp .canal-icono{
  background:#dcfce7;
  color:#16a34a;
}

.canal-whatsapp .canal-icono .svg-icon{
  filter:brightness(0) saturate(100%) invert(48%) sepia(94%) saturate(399%) hue-rotate(90deg) brightness(93%) contrast(91%);
}

.canal-mail{
  border-color:rgba(233,30,99,.22);
  background:#fff;
}

.canal-mail .canal-icono{
  background:#ffe4ef;
  color:var(--rosa);
}

.canal-mail .canal-icono .svg-icon{
  filter:brightness(0) saturate(100%) invert(25%) sepia(81%) saturate(3109%) hue-rotate(318deg) brightness(95%) contrast(91%);
}

.canal-telefono{
  border-color:rgba(36,59,143,.22);
  background:#fff;
}

.canal-telefono .canal-icono{
  background:#eef2ff;
  color:var(--azul);
}

.canal-telefono .canal-icono .svg-icon{
  filter:brightness(0) saturate(100%) invert(24%) sepia(42%) saturate(2086%) hue-rotate(219deg) brightness(89%) contrast(94%);
}

.canal-imagenes{
  border-color:rgba(57,161,228,.24);
  background:#fff;
}

.canal-imagenes .canal-icono{
  background:#e0f2fe;
  color:var(--celeste-portal);
}

.canal-imagenes .canal-icono .svg-icon{
  filter:brightness(0) saturate(100%) invert(58%) sepia(52%) saturate(1609%) hue-rotate(175deg) brightness(93%) contrast(91%);
}


/* =========================================================
   MAPA
========================================================= */

.mapa{
  width:100%;
  height:300px;
  border:0;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}


/* =========================================================
   TRABAJO
========================================================= */

.trabajo{
  background:linear-gradient(135deg,var(--azul),var(--azul-oscuro));
  padding:70px 24px;
}

.trabajo-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:#fff;
}

.trabajo .subtitulo{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.trabajo h2{
  color:#fff;
  margin-bottom:12px;
}

.trabajo p{
  color:rgba(255,255,255,.86);
  font-size:16px;
  line-height:1.5;
  max-width:560px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
  background:#0f172a;
  color:#fff;
  padding:70px 24px 24px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.2fr;
  gap:34px;
}

.footer h3{
  font-size:20px;
  margin-bottom:16px;
}

.footer p,
.footer a{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:15px;
  line-height:1.7;
  margin-bottom:8px;
}

.footer a:hover{
  color:#fff;
}

.footer-sociales{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.footer .footer-social-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  margin:0;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1;
  transition:.2s ease;
}

.footer-social-link .svg-icon{
  width:17px;
  height:17px;
  filter:brightness(0) invert(1);
}

.footer .footer-social-link:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-2px);
}

.footer-bottom{
  max-width:1180px;
  margin:44px auto 0;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:rgba(255,255,255,.58);
  font-size:14px;
}


/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media(max-width:1100px){
  .servicios-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .hero{
    align-items:flex-start;
  }
}

@media(max-width:900px){
  .hero h1{
    font-size:46px;
  }

  .institucional-grid,
  .contacto-grid,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .trabajo-card{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =========================================================
   RESPONSIVE CELULAR
========================================================= */

@media(max-width:640px){
  .header{
    height:84px;
  }

  .header-contenido{
    gap:10px;
    padding:0 12px;
  }

  .logo-principal{
    width:112px;
    transform:scale(1.12);
  }

  .logo-secundario{
    width:92px;
  }

  .hero{
    margin-top:84px;
    min-height:auto;
    padding:70px 18px;
    background-position:center;
  }

  .hero-overlay{
    background:linear-gradient(
      90deg,
      rgba(15,23,42,.70) 0%,
      rgba(15,23,42,.44) 60%,
      rgba(15,23,42,.18) 100%
    );
  }

  .hero h1{
    font-size:38px;
  }

  .hero p{
    font-size:17px;
  }

  .hero-botones{
    align-items:stretch;
    flex-direction:column;
  }

  .btn-portal,
  .btn-principal,
  .btn-secundario{
    width:100%;
  }

  .servicios-grid,
  .institucional-datos,
  .canales-grid{
    grid-template-columns:1fr;
  }

  .seccion{
    padding:70px 18px;
  }

  .institucional h2,
  .encabezado-seccion h2,
  .contacto h2,
  .trabajo h2{
    font-size:32px;
  }

  .canales-card{
    padding:26px;
  }

  .canales-card h3{
    font-size:26px;
  }

  .modal-contenido{
    padding:26px;
  }

  .modal-encabezado{
    top:-26px;
    padding-top:26px;
  }

  .modal-encabezado h2{
    font-size:28px;
  }

  .especialidades-lista{
    grid-template-columns:1fr;
  }

  .canal{
    min-height:120px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}