/*
 Theme Name: Orient Hub Coworking
 Theme URI: https://customcomunicacion.com
 Description: Tema hijo para Orient Hub Coworking.
 Author: Norman Reyes
 Author URI: https://customcomunicacion.com
 Template: hello-elementor
 Version: 1.0.0
 Text Domain: orient-hub-coworking-child
 */

/*
 A pa*rtir de aquí, puedes añadir tus estilos CSS personalizados.
 Todos estos estilos sobrescribirán o complementarán los del tema padre.
 */

 /* --- LANDING COWORKING --- */

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: #333;
}

.coworking-landing h1, .coworking-landing h2, .coworking-landing h3, #site-footer h1,
#site-footer h2, #site-footer h3, #site-footer h4, #site-footer h5, #site-footer h6 {
  color: #111;
  font-family: 'Roboto';
}

.coworking-landing p, .coworking-landing button,
.coworking-landing span, .coworking-landing i,
.coworking-landing strong, .coworking-landing b,
.coworking-landing a, .coworking-landing input,
.coworking-landing select, .coworking-landing textarea,
.coworking-landing ul, .coworking-landing li, .sin-iva, small,
#site-footer p, #site-footer a, #site-footer span, #site-footer strong, #site-footer b,
#site-footer {
	font-family: 'Open Sans', sans-serif;
}

.coworking-landing a {
	color:#62736b;
	text-decoration: underline;
}

.coworking-landing .callto {
	text-decoration:none;
}
#site-header {
	position: absolute;
    top: 2rem;
    left: 1rem;
	width:90vw;
}

section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: auto;
}

.hero {
  /*display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;*/
  background: #f8f9fa;
  padding: 0;
  max-width: unset;
  background-image: url('https://reserva.orienthubcoworking.com/wp-content/uploads/2025/10/hero-img.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:100vh;
}

.bg-mask {
	background-color: rgba(0, 0, 0, 0.6);
	height:100%;
	display: flex;
    flex-flow: column;
    justify-content: center;
}

.custom-logo {
	max-width:150px;
}
.hero__content {
	display: flex;
    flex-flow: column;
    align-items: center;
	padding: 0 2vw;
	text-align: center;
	margin-bottom: 15vh;
}

.coworking-landing .hero__title {
  font-size: 2rem;
  margin-bottom: 20px;
  color:#ffffff;
}

.hero__subtitle {
  margin-bottom: 30px;
  color:#ffffff;
  font-size:1rem;
  padding:0 20%;
}

.hero__image img {
  width: 100%;
  border-radius: 12px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  transition: background .3s;
}

.coworking-landing .btn--primary {
  background: #aeaeae;
  color: #ffffff;
  text-decoration: none;
}

.coworking-landing .btn--primary:hover {
  background: #151313;
  color: #fff;
}

.coworking-landing .btn--secondary {
    background: #6e7772;
    color: #fff;
}

.coworking-landing .btn--secondary:hover {
  background: #ddd;
}

/* Problem / Solution */
.problem__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.problem__item {
  background: #f1f1f1;
  padding: 20px;
  border-radius: 8px;
}

/* Features */
.features {
	background-color: #ecf2f2;
    max-width: unset;
    padding: 60px 20px;
}
.carousel-container-elementos {
	max-width: 1200px;
	margin: 0 auto;
	position:relative;
}
.elementos-arrow {
	position:absolute;
	top:50%;
	z-index:9;
	border-radius: 50%;
	width:45px;
	height:45px;
	color:#333;
	border-color: #ccc;
	background-color: #fff;
}
.elementos-arrow.next {
	right:0;
	transform: translate(25px, -50%);
}
.elementos-arrow.prev {
	left:0;
	transform: translate(-25px, -50%);
}
.features h2, .pricing h2, .testimonials h2, .faq h2, .contact h2, .carrusel h2 {
	text-align: center;
	color:#6e7772;
	margin-bottom: 3rem;
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}

.features__item {
  background: #fff;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  text-align: center;
}

.features__item h3 {
	color: #6e7772;
	text-align: center;
	font-size: 1rem;
}

.features__item p {
	font-size: 0.85rem;
    color: #6e7772;
    text-align: center;
}

.features-icon {
	background-color: #6e7772;
    padding: 1rem;
    border-radius: 50%;
    width: 3.2rem !important;
    height: 3.2rem;
    color: #ffffff;
    margin: 0 auto;
}
/* Testimonials */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.testimonial {
  background: #f9f9f9;
  padding: 20px;
  border-left: 4px solid #0077cc;
  border-radius: 8px;
}

/* Pricing */
.pricing, .contact {
	padding-top:0;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4rem;
}

.pricing__plan {
  background: #fff;
  padding: 2rem 4rem;
  border: 1px solid #6e7772;
  border-radius: 10px;
  color:#6e7772;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.pricing__plan h3 {
	color:#6e7772;
	font-size:1.5rem;
	text-align: center;
}

.pricing__plan p {
	font-size:0.85rem;
}

.pricing__plan ul {
	padding:0;
}

.pricing__plan ul li, .font-small {
	font-size:0.85rem;
}

.pricing__plan--highlight {
  border: 1px solid #ecf2f2;
  background: #ecf2f2;
}

.pricing__price {
  font-size: 1.5rem;
  margin: 15px 0;
}

.hotdesk__offer {
    width: 100%;
    text-align: center;
	text-decoration: line-through;
	color: #8d9792;
	font-family: 'Roboto';
}

.pricing__plan  .callto {
	display: block;
    margin: 2rem auto 0 auto;
    width: 260px;
    text-align: center;
}

.hotdesk__plan .pricing__price {
	margin-top: 0;
}
.closed {
	display:none;
}

.ver-mas {
	font-size: 0.85rem;
	color:#6e7772;
	text-decoration: underline;
}
.sin-iva {
	font-size: 0.75rem;
	color:#6e7772;
	margin-top:1rem;
}
/* CTA Secondary */
.cta-secondary {
	text-align: center;
    background: #6e7772;
    color: #fff;
    max-width: unset;
}

.cta-secondary h2 {
	color:#ffffff;
}
.cta-secondary .callto {
	margin-top:2rem;
}
/* FAQ */
.faq__item {
  margin-bottom: 20px;
}
.faq__item h3 {
	display: flex;
    justify-content: space-between;
	border-bottom: solid 1px #6e7772;
	color:#6e7772;
	padding-bottom: 1rem;
    font-size: 1.5rem;
}
.faq__item h3 .plus-sign {
	cursor: pointer;
}
/* Contact Form */
.contact__form {
  display: grid;
  gap: 15px;
}

#contacto .wpcf7-form input,
#contacto .wpcf7-form textarea {
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  border-top:0;
  border-left:0;
  border-right:0;
}
#contacto .callto, #contacto .wpcf7-submit {
	background: #6e7772;
    color: #fff;
	border-color:#6e7772;
	max-width: 50%;
    display: block;
    margin: 1rem auto;
}
.imagen-contacto {
	background-image: url('https://reserva.orienthubcoworking.com/wp-content/uploads/2025/10/formulario-img.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.formulario-wrapper {
	padding:0;
}
.formulario-footer {
	font-size: 0.75rem;
	color:#6e7772;
}
.privacidad-checkbox > p > span > span > span > label {
	display:grid;
	grid-template-columns: 50px 1fr;
	margin-top:0.5rem;
}
.privacidad-checkbox span {
	font-size:0.85rem;
	color:#6e7772;
}
/* rows*/
.row {
	display:flex;
	justify-content: center;
	flex-flow: column;
}
.column-50 {
	width:100%;
}
/* FOOTER */
#site-footer {
	max-width: unset;
	background-color:#62736b;
	color:#ffffff;
}
#site-footer a, #site-footer h4 {
	color:#ffffff;
}
#site-footer .datos-contacto {
	font-weight: bold;
}
.datos-contacto {
	padding-left:1.5em;
	margin-bottom:1em;
}
.contacto-wrapper {
	padding-top:3em;
}
.legal-menu {
	margin-top:3em;
}
.container {
	width:100%;
	margin:0 auto;
}
/* Carrusel*/
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover, .carousel-arrow:focus, .elementos-arrow:focus {
	background-color:#62736b;
}
.carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
}

.carousel-container {
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.carousel-track div {
  width: 100%;
  height: auto;
  flex: 0 0 calc(100% / 6); /* 6 imágenes por fila en desktop */
  object-fit: cover;
  padding:0 0.5em;
}

.carousel-track div img {
	cursor: pointer;
}
/* Responsivo */
@media (max-width: 1024px) {
  .carousel-track div {
    flex: 0 0 calc(100% / 4); /* 4 imágenes en tablets */
  }
}

@media (max-width: 600px) {
  .carousel-track div {
    flex: 0 0 calc(100% / 2); /* 2 imagen por vez en móviles */
  }
  section.carrusel {
	padding-bottom: 0;
  }
  .site-navigation {
	justify-content: center;
  }
}

/* Flechas */
.carousel-arrow {
  position: absolute;
  top: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
  width:45px;
  height:45px;
  color:#333;
  border-color: #ccc;
  background-color: #fff;
  border-radius: 50%;
  line-height: 15px;
}

.carousel-arrow:hover, .elementos-arrow:hover {
  background: #62736b;
}

.carousel-arrow.prev { left:0; transform: translate(10px, -50%); }
.carousel-arrow.next { right:0; transform: translate(-10px, -50%); }

/* === LIGHTBOX === */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top:7%;
}

.lightbox-img {
  max-width: 90%;
  max-height: 85%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  user-select: none;
  padding: 10px;
  transition: opacity 0.2s;
}

.lightbox-close { top: 15px; right: 25px; }
.lightbox-prev { left: 30px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 30px; top: 50%; transform: translateY(-50%); }

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 0.7;
}
.desktop-map, .whatsapp-flotante {
	display:none;
}
.elementos-track-viewport {
	overflow: hidden;
}
.elementos-track {
	display:flex;
	transition: transform 0.3s ease;
}
.features__item {
	width: 100%;
    flex: 0 0 calc((100% - 30px) / 4);
	margin:0 5px;
}
/* MEDIA QUERY: MOSTRAR el botón solo en pantallas pequeñas (Móviles) */
@media (max-width: 768px) {
	.features__item {
		flex: 0 0 100%;
	}
	.elementos-arrow {
		top:100%;
	}
	.elementos-arrow.next {
		right:30%;
		transform: translate(0, 0);
	}
	.elementos-arrow.prev {
		left:30%;
		transform: translate(0, 0);
	}
    .whatsapp-flotante {
        /* Posicionamiento flotante */
        position: fixed; /* Fija la posición relativa a la ventana del navegador */
        bottom: 20px;    /* 20px desde la parte inferior */
        right: 20px;     /* 20px desde la derecha */
        z-index: 1000;   /* Asegura que esté por encima de otros elementos */

        /* Estilos del botón (círculo) */
        display: block;  /* Mostrar el botón */
        width: 60px;     /* Ancho fijo */
        height: 60px;    /* Alto fijo */
        border-radius: 50%; /* Forma circular */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
        background-color: #25D366; /* Color verde de WhatsApp */
        padding: 5px; /* Espacio alrededor del logo */
    }

    /* Estilos de la imagen (Logo de WhatsApp) */
    .whatsapp-flotante img {
        width: 100%; /* La imagen ocupa todo el ancho del contenedor */
        height: 100%; /* La imagen ocupa todo el alto del contenedor */
        object-fit: contain; /* Asegura que la imagen se vea bien */
    }
    
    /* Efecto al pasar el ratón (opcional, pero mejora la experiencia en móvil al no hacer nada) */
    .whatsapp-flotante:hover {
        transform: scale(1.05); /* Ligeramente más grande al interactuar */
        transition: transform 0.3s ease; /* Transición suave */
    }
	.mobile-map {
		padding:0 1em;
	}
	.contacto-wrapper {
		padding-top: 1em;
	}
}
/*Media queries*/
@media (min-width: 576px) {
	.container {
		max-width: 500px;
	}
}
@media (min-width: 768px) {
	.container {
		max-width: 600px;
	}
}
@media (min-width: 992px) {
	.container {
		max-width: 800px;
	}
	.desktop-map {
		display:block;
	}
	.mobile-map {
		display:none;
	}
	.column-50 {
		width:50%;
	}
	.row {
		flex-flow: row;
	}
	.hero {
  		height:70vh;
	}
	.bg-mask {
    	justify-content: flex-end;
	}
	.hero__content {
		padding: 0 20vw;
	}
	.formulario-wrapper {
		padding:0 0 0 2rem;
	}
}
@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}