/* ============================================================

ORTOPEDIA OVIDIO LAGOS — CATÁLOGO + DESTACADOS + CARRUSEL + REQUISITOS + MARCAS + EMPRESAS AMIGAS

HOJA DE ESTILOS CSS

Pegar en el cuadro "Editar hoja de estilos (CSS)" de Rapiweb

Prefijo de clases: ovl-

============================================================ */



.ovl-wrap * {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



.ovl-wrap {

  font-family: Arial, Helvetica, sans-serif;

  color: #333333;

}





/* HERO / CARRUSEL AUTOMÁTICO */

.ovl-hero {

  position: relative;

  width: 100%;

  min-height: 300px;

  background: #09A992;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.ovl-hero-slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  animation: ovlHeroFade 18s infinite;

}



.ovl-hero-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.ovl-hero-slide-1 {

  animation-delay: 0s;

}



.ovl-hero-slide-2 {

  animation-delay: 6s;

}



.ovl-hero-slide-3 {

  animation-delay: 12s;

}



.ovl-hero-overlay {

  position: absolute;

  inset: 0;

  background: rgba(9, 169, 146, 0.50);

  z-index: 1;

}



.ovl-hero-title {

  position: relative;

  z-index: 2;

  color: #FFFFFF !important;

  opacity: 1 !important;

  font-size: 2rem;

  font-weight: 300;

  letter-spacing: 0.02em;

  text-align: center;

  padding: 48px 24px;

  text-shadow: 0 2px 6px rgba(0,0,0,0.35);

}



@keyframes ovlHeroFade {

  0% { opacity: 0; }

  8% { opacity: 1; }

  30% { opacity: 1; }

  38% { opacity: 0; }

  100% { opacity: 0; }

}





/* REQUISITOS DE ALQUILER */

.ovl-requisitos-wrap {

  max-width: 1080px;

  margin: 28px auto 0;

  padding: 0 16px;

}



.ovl-requisitos-box {

  background: #f0faf8;

  border: 1px solid #b2e0d9;

  border-radius: 14px;

  padding: 16px 20px;

  color: #444;

}



.ovl-requisitos-titulo {

  color: #09A992;

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 8px;

}



.ovl-requisitos-texto {

  font-size: 0.86rem;

  line-height: 1.5;

  margin: 0;

}





/* LAYOUT PRINCIPAL */

.ovl-main {

  display: flex;

  align-items: flex-start;

  gap: 0;

  max-width: 1080px;

  margin: 0 auto;

  padding: 28px 16px 48px;

}





/* SIDEBAR */

.ovl-sidebar {

  width: 240px;

  min-width: 200px;

  flex-shrink: 0;

  margin-right: 28px;

}



.ovl-cat-label {

  display: inline-block;

  background: #09A992;

  color: #FFFFFF;

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  padding: 6px 18px;

  border-radius: 20px;

  margin-bottom: 20px;

}



.ovl-cat-list {

  list-style: none;

}



.ovl-cat-item {

  border-bottom: 1px solid #e8e8e8;

}



.ovl-cat-toggle {

  width: 100%;

  background: none;

  border: none;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 11px 4px;

  color: #09A992;

  font-size: 0.93rem;

  font-weight: 600;

  text-align: left;

  line-height: 1.3;

}



.ovl-cat-toggle:hover {

  color: #077a68;

}



.ovl-cat-icon {

  font-size: 1rem;

  font-style: normal;

  font-weight: 400;

  flex-shrink: 0;

  margin-left: 6px;

  color: #09A992;

}



.ovl-cat-sub {

  display: none;

  list-style: none;

  padding: 4px 0 10px 4px;

}



.ovl-cat-sub.ovl-open {

  display: block;

}



.ovl-cat-sub li {

  font-size: 0.82rem;

  color: #444;

  padding: 3px 0;

  line-height: 1.4;

  cursor: pointer;

}



.ovl-cat-sub li:hover {

  color: #09A992;

  text-decoration: underline;

}



.ovl-cat-sub li::before {

  content: "• ";

  color: #09A992;

}





/* PANEL CONSULTA SIDEBAR */

.ovl-consulta-panel {

  display: none;

  background: #f0faf8;

  border: 1px solid #b2e0d9;

  border-radius: 10px;

  padding: 12px 14px;

  margin: 6px 0 10px 4px;

}



.ovl-consulta-panel.ovl-open {

  display: block;

}



.ovl-consulta-nombre {

  font-size: 0.82rem;

  font-weight: 700;

  color: #09A992;

  margin-bottom: 10px;

  line-height: 1.35;

}



.ovl-consulta-btns {

  display: flex;

  flex-direction: column;

  gap: 7px;

}



.ovl-btn-consulta-wa,

.ovl-btn-consulta-tel {

  display: block;

  width: 100%;

  background: #09A992;

  color: #FFFFFF;

  border: none;

  border-radius: 20px;

  padding: 7px 14px;

  font-size: 0.78rem;

  font-weight: 600;

  cursor: pointer;

  text-align: center;

  text-decoration: none;

}



.ovl-btn-consulta-wa:hover,

.ovl-btn-consulta-tel:hover {

  background: #077a68;

}





/* DESTACADOS */

.ovl-content {

  flex: 1;

  min-width: 0;

}



.ovl-dest-label {

  display: inline-block;

  background: #09A992;

  color: #FFFFFF;

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  padding: 6px 22px;

  border-radius: 20px;

  margin-bottom: 20px;

}



.ovl-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

}



.ovl-card {

  background: #FFFFFF;

  border: 1px solid #e0e0e0;

  border-radius: 12px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 0 0 20px;

  box-shadow: 0 1px 4px rgba(0,0,0,0.06);

  cursor: pointer;

}



.ovl-card:hover {

  box-shadow: 0 4px 14px rgba(9,169,146,0.15);

}



.ovl-card-img-wrap {

  width: 100%;

  aspect-ratio: 1 / 1;

  background: #f3f3f3;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.ovl-card-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  padding: 16px;

}



.ovl-img-ph {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  background: #d8f0ec;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #09A992;

  font-size: 2rem;

}



.ovl-card-name {

  font-size: 0.88rem;

  color: #09A992;

  font-weight: 600;

  text-align: center;

  padding: 14px 12px 12px;

  line-height: 1.35;

}



.ovl-btn-saber {

  background: #09A992;

  color: #FFFFFF;

  border: none;

  border-radius: 20px;

  padding: 7px 22px;

  font-size: 0.82rem;

  font-weight: 600;

  cursor: pointer;

}



.ovl-btn-saber:hover {

  background: #077a68;

}





/* MARCAS AMIGAS DESTACADAS */

.ovl-marcas-amigas {

  max-width: 1080px;

  margin: 6px auto 34px;

  padding: 0 16px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 34px;

  align-items: start;

  text-align: center;

}



.ovl-marca-card {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.ovl-marca-img-wrap {

  width: 190px;

  height: 190px;

  border-radius: 50%;

  background: #FFFFFF;

  border: 1px solid #e0e0e0;

  box-shadow: 0 2px 8px rgba(0,0,0,0.12);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  margin-bottom: 18px;

}



.ovl-marca-img-wrap img {

  width: 82%;

  height: 82%;

  object-fit: contain;

  display: block;

}



.ovl-marca-nombre {

  color: #09A992;

  font-size: 1.28rem;

  font-weight: 500;

  line-height: 1.2;

  margin-bottom: 4px;

}



.ovl-marca-desc {

  color: #09A992;

  font-size: 0.95rem;

  font-weight: 400;

  line-height: 1.35;

  margin: 0;

}





/* MENÚS WHATSAPP / TELÉFONO */

.ovl-wa-wrap {

  position: relative;

  width: 100%;

}



.ovl-wa-menu {

  display: none;

  position: absolute;

  top: calc(100% + 6px);

  left: 0;

  right: 0;

  background: #FFFFFF;

  border: 1px solid #d7e8e5;

  border-radius: 12px;

  box-shadow: 0 4px 16px rgba(0,0,0,0.12);

  z-index: 9999;

  overflow: hidden;

}



.ovl-wa-menu.ovl-open {

  display: block;

}



.ovl-wa-opcion {

  display: block;

  color: #09A992;

  background: #FFFFFF;

  text-decoration: none;

  font-size: 0.84rem;

  font-weight: 600;

  padding: 10px 14px;

  border-bottom: 1px solid #eef5f3;

}



.ovl-wa-opcion:last-child {

  border-bottom: none;

}



.ovl-wa-opcion:hover {

  background: #f0faf8;

  color: #077a68;

}





/* MODAL ÚNICO */

.ovl-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.45);

  z-index: 9990;

  align-items: center;

  justify-content: center;

  padding: 16px;

}



.ovl-overlay.ovl-active {

  display: flex;

}



.ovl-modal {

  background: #FFFFFF;

  border-radius: 14px;

  max-width: 680px;

  width: 100%;

  max-height: 90vh;

  overflow: visible;

  padding: 36px 36px 32px;

  position: relative;

  box-shadow: 0 8px 40px rgba(0,0,0,0.18);

}



.ovl-modal-close {

  position: absolute;

  top: 14px;

  right: 18px;

  background: none;

  border: none;

  font-size: 1.4rem;

  cursor: pointer;

  color: #555;

}



.ovl-modal-close:hover {

  color: #09A992;

}



.ovl-modal-inner {

  display: flex;

  gap: 28px;

  align-items: flex-start;

}



.ovl-modal-img-wrap {

  width: 190px;

  min-width: 160px;

  flex-shrink: 0;

}



.ovl-modal-img-wrap .ovl-card-img-wrap {

  border-radius: 10px;

  border: 1px solid #e0e0e0;

  aspect-ratio: 1 / 1;

}



.ovl-modal-avail {

  color: #09A992;

  font-size: 0.82rem;

  margin-top: 10px;

  text-align: center;

}



.ovl-modal-body {

  flex: 1;

}



.ovl-modal-title {

  font-size: 0.95rem;

  font-weight: 700;

  color: #222;

  letter-spacing: 0.03em;

  margin-bottom: 14px;

  text-transform: uppercase;

}



.ovl-modal-specs {

  list-style: none;

  margin-bottom: 20px;

}



.ovl-modal-specs li {

  font-size: 0.85rem;

  color: #444;

  padding: 3px 0;

  line-height: 1.45;

}



.ovl-modal-specs li::before {

  content: "• ";

  color: #09A992;

}



.ovl-modal-btns {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.ovl-btn-wa,

.ovl-btn-tel {

  width: 100%;

  background: #09A992;

  color: #FFFFFF;

  border: none;

  border-radius: 20px;

  padding: 10px 20px;

  font-size: 0.85rem;

  font-weight: 600;

  cursor: pointer;

  text-align: center;

  text-decoration: none;

  display: inline-block;

}



.ovl-btn-wa:hover,

.ovl-btn-tel:hover {

  background: #077a68;

}



.ovl-modal .ovl-wa-menu {

  top: auto;

  bottom: calc(100% + 6px);

  left: 0;

  right: 0;

}





/* SLIDER EMPRESAS AMIGAS */

.ovl-empresas-slider {

  width: 100%;

  background: #09A992;

  color: #FFFFFF;

  overflow: hidden;

  white-space: nowrap;

  padding: 10px 0;

  margin-top: 32px;

}



.ovl-empresas-track {

  display: inline-flex;

  align-items: center;

  gap: 34px;

  animation: ovlEmpresasScroll 70s linear infinite;

}



.ovl-empresas-track span {

  font-size: 0.92rem;

  font-weight: 600;

  letter-spacing: 0.03em;

  text-transform: uppercase;

}



@keyframes ovlEmpresasScroll {

  from { transform: translateX(0); }

  to { transform: translateX(-50%); }

}



.ovl-empresas-slider:hover .ovl-empresas-track {

  animation-play-state: paused;

}





/* RESPONSIVE */

@media (max-width: 768px) {

  .ovl-main {

    flex-direction: column;

    padding: 20px 12px 40px;

  }



  .ovl-sidebar {

    width: 100%;

    min-width: 0;

    margin-right: 0;

    margin-bottom: 24px;

  }



  .ovl-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

  }



  .ovl-hero {

    min-height: 240px;

  }



  .ovl-hero-title {

    font-size: 1.35rem;

    padding: 36px 16px;

  }



  .ovl-requisitos-wrap {

    margin-top: 20px;

    padding: 0 12px;

  }



  .ovl-marcas-amigas {

    grid-template-columns: 1fr;

    gap: 30px;

    margin-top: 4px;

  }



  .ovl-marca-img-wrap {

    width: 170px;

    height: 170px;

  }



  .ovl-marca-nombre {

    font-size: 1.15rem;

  }



  .ovl-marca-desc {

    font-size: 0.9rem;

  }



  .ovl-modal {

    overflow-y: auto;

  }



  .ovl-modal .ovl-wa-menu {

    top: calc(100% + 6px);

    bottom: auto;

  }

}



@media (max-width: 600px) {

  .ovl-empresas-slider {

    padding: 8px 0;

  }



  .ovl-empresas-track {

    gap: 24px;

    animation-duration: 55s;

  }



  .ovl-empresas-track span {

    font-size: 0.78rem;

  }

}



@media (max-width: 480px) {

  .ovl-grid {

    grid-template-columns: 1fr;

  }



  .ovl-modal-inner {

    flex-direction: column;

  }



  .ovl-modal-img-wrap {

    width: 100%;

  }



  .ovl-modal {

    padding: 24px 16px 20px;

  }

}

/* ============================================================

ORTOPEDIA OVIDIO LAGOS — SERVICIOS / REPARACIONES

Agregar este bloque AL FINAL de la Hoja de Estilos existente

============================================================ */



.ovl-serv-main {

  max-width: 1080px;

  margin: 0 auto;

  padding: 40px 16px 56px;

}



.ovl-serv-label {

  display: inline-block;

  background: #09A992;

  color: #FFFFFF;

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  padding: 6px 22px;

  border-radius: 20px;

  margin-bottom: 28px;

}



.ovl-serv-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



.ovl-serv-card {

  background: #FFFFFF;

  border: 1px solid #e0e0e0;

  border-radius: 14px;

  padding: 24px 22px 26px;

  box-shadow: 0 1px 6px rgba(0,0,0,0.06);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



.ovl-serv-titulo {

  color: #09A992;

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 12px;

  line-height: 1.3;

}



.ovl-serv-desc {

  color: #444;

  font-size: 0.85rem;

  line-height: 1.5;

  margin-bottom: 20px;

  flex: 1;

}



.ovl-serv-btns {

  display: flex;

  flex-direction: column;

  gap: 8px;

  width: 100%;

  align-items: center;

}



.ovl-btn-serv-wa {

  display: inline-block;

  background: #09A992;

  color: #FFFFFF;

  text-decoration: none;

  border: none;

  border-radius: 20px;

  padding: 8px 18px;

  font-size: 0.8rem;

  font-weight: 600;

  cursor: pointer;

  width: 100%;

  max-width: 230px;

  text-align: center;

}



.ovl-btn-serv-wa:hover {

  background: #077a68;

}



@media (max-width: 768px) {

  .ovl-serv-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 540px) {

  .ovl-serv-grid {

    grid-template-columns: 1fr;

  }
/* EMPRESAS / MARCAS AMIGAS DESTACADAS */

.ovl-marcas-amigas {

  max-width: 1080px;

  margin: 10px auto 34px;

  padding: 0 16px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 34px;

  align-items: start;

  text-align: center;

}



.ovl-marca-card {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.ovl-marca-img-wrap {

  width: 190px;

  height: 190px;

  border-radius: 50%;

  background: #FFFFFF;

  border: 1px solid #e0e0e0;

  box-shadow: 0 2px 8px rgba(0,0,0,0.12);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  margin-bottom: 18px;

}



.ovl-marca-img-wrap img {

  width: 82%;

  height: 82%;

  object-fit: contain;

  display: block;

}



.ovl-marca-nombre {

  color: #09A992;

  font-size: 1.28rem;

  font-weight: 500;

  line-height: 1.2;

  margin-bottom: 4px;

}



.ovl-marca-desc {

  color: #09A992;

  font-size: 0.95rem;

  font-weight: 400;

  line-height: 1.35;

  margin: 0;

}



/* RESPONSIVE */

@media (max-width: 768px) {

  .ovl-marcas-amigas {

    grid-template-columns: 1fr;

    gap: 30px;

    margin-top: 4px;

  }



  .ovl-marca-img-wrap {

    width: 170px;

    height: 170px;

  }



  .ovl-marca-nombre {

    font-size: 1.15rem;

  }



  .ovl-marca-desc {

    font-size: 0.9rem;

  }

}
}
/* ============================================================

ORTOPEDIA OVIDIO LAGOS — CONTACTO + EMPRESAS AMIGAS

Agregar este bloque AL FINAL de la Hoja de Estilos existente

============================================================ */



.ovl-contacto-main {

  max-width: 1080px;

  margin: 0 auto;

  padding: 40px 16px 56px;

  display: flex;

  gap: 24px;

  align-items: flex-start;

}



.ovl-contacto-col-izq {

  width: 300px;

  min-width: 260px;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.ovl-contacto-card {

  background: #FFFFFF;

  border: 1px solid #e0e0e0;

  border-radius: 14px;

  padding: 24px 22px;

  box-shadow: 0 1px 6px rgba(0,0,0,0.06);

}



.ovl-contacto-titulo {

  color: #09A992;

  font-size: 1.1rem;

  font-weight: 700;

  text-align: center;

  margin-bottom: 18px;

}



.ovl-contacto-fila {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 8px 0;

}



.ovl-contacto-fila a {

  color: #09A992;

  font-size: 1rem;

  font-weight: 600;

  text-decoration: none;

}



.ovl-contacto-fila a:hover {

  text-decoration: underline;

}



.ovl-horarios-lista {

  list-style: none;

  margin: 0;

  padding: 0;

}



.ovl-horarios-lista li {

  display: flex;

  justify-content: space-between;

  font-size: 0.88rem;

  color: #09A992;

  font-weight: 600;

  padding: 5px 4px;

  border-bottom: 1px solid #f0f0f0;

}



.ovl-horarios-lista li:last-child {

  border-bottom: none;

}



.ovl-horarios-dia {

  color: #444;

  font-weight: 500;

}



.ovl-contacto-col-der {

  flex: 1;

  min-width: 0;

  background: #FFFFFF;

  border: 1px solid #e0e0e0;

  border-radius: 14px;

  padding: 24px;

  box-shadow: 0 1px 6px rgba(0,0,0,0.06);

}



.ovl-contacto-direccion {

  color: #09A992;

  font-size: 1.3rem;

  font-weight: 700;

  line-height: 1.3;

}



.ovl-contacto-ciudad {

  color: #09A992;

  font-size: 1.1rem;

  font-weight: 400;

  margin-bottom: 16px;

}



.ovl-mapa-wrap {

  width: 100%;

  aspect-ratio: 16 / 10;

  border-radius: 10px;

  overflow: hidden;

  border: 1px solid #e0e0e0;

}



.ovl-mapa-wrap iframe {

  width: 100%;

  height: 100%;

  border: 0;

  display: block;

}



.ovl-mapa-link {

  display: inline-block;

  margin-top: 14px;

  background: #09A992;

  color: #FFFFFF;

  text-decoration: none;

  font-size: 0.85rem;

  font-weight: 600;

  padding: 9px 20px;

  border-radius: 20px;

}



.ovl-mapa-link:hover {

  background: #077a68;

}





/* SLIDER EMPRESAS AMIGAS */

.ovl-empresas-slider {

  width: 100%;

  background: #09A992;

  color: #FFFFFF;

  overflow: hidden;

  white-space: nowrap;

  padding: 10px 0;

  margin-top: 32px;

}



.ovl-empresas-track {

  display: inline-flex;

  align-items: center;

  gap: 34px;

  animation: ovlEmpresasScroll 70s linear infinite;

}



.ovl-empresas-track span {

  font-size: 0.92rem;

  font-weight: 600;

  letter-spacing: 0.03em;

  text-transform: uppercase;

}



@keyframes ovlEmpresasScroll {

  from {

    transform: translateX(0);

  }



  to {

    transform: translateX(-50%);

  }

}



.ovl-empresas-slider:hover .ovl-empresas-track {

  animation-play-state: paused;

}





/* RESPONSIVE */

@media (max-width: 768px) {

  .ovl-contacto-main {

    flex-direction: column;

    padding: 28px 12px 40px;

  }



  .ovl-contacto-col-izq {

    width: 100%;

    flex-direction: row;

    flex-wrap: wrap;

  }



  .ovl-contacto-card {

    flex: 1;

    min-width: 240px;

  }

}



@media (max-width: 600px) {

  .ovl-empresas-slider {

    padding: 8px 0;

  }



  .ovl-empresas-track {

    gap: 24px;

    animation-duration: 55s;

  }



  .ovl-empresas-track span {

    font-size: 0.78rem;

  }

}



@media (max-width: 480px) {

  .ovl-contacto-col-izq {

    flex-direction: column;

  }



  .ovl-mapa-wrap {

    aspect-ratio: 4 / 3;

  }

}