/* ============================================================ custom.css — Overrides Innovabyte sobre Zeinet Web: Pure Móvil (Web1500) Regla: NUNCA tocar zeinet.css. Todo override va aquí. Los colores llegan como CSS variables inyectadas desde config.php en el (components/header.php). ============================================================ */ /* ---------- 0. Marca ---------- */ /* Logotipo provisional construido en CSS (isotipo + wordmark "puremovil"), mientras no tengamos el logo de Pure en alta resolución. Al recibirlo, basta con volver a poner el en header.php y footer.php. Al ser CSS puro se ve nítido en cualquier densidad de pantalla. */ .brand-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; white-space: nowrap; } .brand-logo:hover { text-decoration: none; } /* --- Isotipo: cuadrado redondeado con la "p" y el indicador de señal --- */ .brand-logo__mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%); flex: 0 0 auto; transition: transform .3s ease; } .brand-logo:hover .brand-logo__mark { transform: rotate(-6deg); } .brand-logo__mark-letter { font-family: var(--zeinet-font), "Manrope", sans-serif; font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.06em; margin-top: -3px; } /* Puntito de "señal" en la esquina, guiño a la cobertura */ .brand-logo__signal { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .85; } /* --- Wordmark --- */ .brand-logo__text { font-family: var(--zeinet-font), "Manrope", sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -0.05em; } .brand-logo__pure { color: var(--color-titulares); transition: color .3s ease; } .brand-logo__movil { color: var(--color-primario); font-weight: 400; } .brand-logo:hover .brand-logo__pure { color: var(--color-primario); } /* Variante para fondos oscuros (menú móvil) */ .brand-logo--claro .brand-logo__pure { color: #fff; } .brand-logo--claro .brand-logo__movil { color: #fff; opacity: .65; } .brand-logo--claro:hover .brand-logo__pure { color: var(--color-primario); } /* Preloader: el template carga el logotipo de Zeinet como imagen de fondo. Lo anulamos y dejamos solo el fondo limpio. */ .preloader__image { background-image: none !important; } @media (max-width: 480px) { .brand-logo { gap: 8px; } .brand-logo__mark { width: 34px; height: 34px; border-radius: 10px; } .brand-logo__mark-letter { font-size: 23px; } .brand-logo__signal { top: 6px; right: 6px; width: 5px; height: 5px; } .brand-logo__text { font-size: 22px; } } /* ---------- 0b. Franja de cifras (prueba social) ---------- */ .cifras { padding: 46px 0; background: var(--color-titulares); position: relative; overflow: hidden; } .cifras::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, var(--color-titulares) 0%, #123a33 55%, var(--color-secundario) 145%); } .cifras__lista { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; } .cifras__item { display: flex; align-items: center; gap: 16px; padding: 0 10px; border-right: 1px solid rgba(255, 255, 255, .14); } .cifras__item:last-child { border-right: 0; } .cifras__icono { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .1); color: var(--color-primario); font-size: 21px; } .cifras__dato { margin: 0; font-size: 27px; font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: var(--zeinet-letter-spacing, -0.04em); } .cifras__texto { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .72); } @media (max-width: 991px) { .cifras__lista { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; } .cifras__item:nth-child(2n) { border-right: 0; } } @media (max-width: 575px) { .cifras { padding: 36px 0; } .cifras__lista { grid-template-columns: 1fr; gap: 20px; } .cifras__item { border-right: 0; padding: 0; } .cifras__icono { width: 44px; height: 44px; font-size: 18px; } .cifras__dato { font-size: 23px; } } /* En el template, .about-one venía inmediatamente después de .feature-one y se apoyaba en el padding inferior de esta, por eso trae padding-top: 0. Al intercalar la franja de cifras, la sección arrancaba pegada a ella y el tagline "Quiénes somos" (que sube 11 px por su margen negativo) se solapaba con la banda oscura. */ .about-one { padding-top: 120px; } @media (max-width: 991px) { .about-one { padding-top: 80px; } } @media (max-width: 767px) { .about-one { padding-top: 60px; } } /* ---------- 1. Tarifas: pestañas de grupo ---------- */ .plans-one__tabs { border: 0; margin-bottom: 30px; gap: 10px; flex-wrap: wrap; } .plans-one__tabs .nav-link { border: 1px solid var(--color-borde); border-radius: 40px; padding: 10px 26px; font-weight: 600; font-size: 15px; color: var(--color-texto); background: transparent; transition: all .3s ease; } .plans-one__tabs .nav-link:hover { border-color: var(--color-primario); color: var(--color-primario); } .plans-one__tabs .nav-link.active { background: var(--color-primario); border-color: var(--color-primario); color: #fff; } .plans-one__group-subtitle { max-width: 620px; margin: 0 auto 40px; color: var(--color-texto); } .plans-one__desc { font-size: 15px; line-height: 1.6; color: var(--color-texto); margin: 0 0 20px; min-height: 72px; } .plans-one__legal { margin-top: 30px; font-size: 13px; color: var(--color-texto); opacity: .75; } /* Card destacada */ .plans-one__single--destacada { box-shadow: 0 20px 60px rgba(var(--zeinet-base-rgb), .18); position: relative; } .plans-one__single--destacada::before { content: "Recomendada"; position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--color-primario); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; } /* Todas las cards del mismo alto dentro de una fila */ .plans-one .row > [class*="col-"] { display: flex; } .plans-one .row > [class*="col-"] > .plans-one__single { width: 100%; display: flex; flex-direction: column; } .plans-one .row > [class*="col-"] > .plans-one__single .plans-one__bottom { flex: 1 1 auto; display: flex; flex-direction: column; } .plans-one__price-box { margin-top: auto; } /* ---------- 2. Formulario de contacto ---------- */ /* zeinet.css solo estiliza input[type=text] y [type=email] dentro del formulario. El campo de teléfono es type="tel" —para que en móvil salga el teclado numérico— y se quedaba con el estilo por defecto del navegador: más estrecho, más bajo y con borde inset. Se replican aquí los mismos valores del template. */ .contact-page__form-input-box input[type="tel"] { height: 50px; width: 100%; border: none; background-color: var(--zeinet-extra); padding-left: 30px; padding-right: 30px; outline: none; font-size: 14px; color: var(--zeinet-gray); display: block; font-weight: 500; font-family: var(--zeinet-font), "Manrope", sans-serif; border-radius: 0; -webkit-appearance: none; appearance: none; } .contact-page__rgpd { margin: 4px 0 20px; font-size: 14px; line-height: 1.5; color: var(--color-texto); } .contact-page__rgpd input[type="checkbox"] { margin-right: 8px; accent-color: var(--color-primario); } .contact-page__rgpd a { color: var(--color-primario); text-decoration: underline; } .contact-page__success, .contact-page__error { border-radius: 8px; padding: 14px 18px; font-weight: 600; margin-bottom: 20px; } .contact-page__success { background: rgba(var(--zeinet-base-rgb), .12); color: var(--color-secundario); } .contact-page__error { background: rgba(207, 46, 46, .10); color: #cf2e2e; } /* ---------- 3. FAQ (sustituye a los testimonios del template) ---------- */ .faq-pure { padding: 120px 0; background: var(--color-gris-suave); } .faq-pure__text { margin: 20px 0 30px; color: var(--color-texto); } .faq-pure__accordion { display: grid; gap: 16px; } .faq-pure__item { border: 1px solid var(--color-borde); border-radius: 12px; background: #fff; overflow: hidden; } .faq-pure__item .accordion-button { font-family: var(--zeinet-font); font-weight: 700; font-size: 18px; color: var(--color-titulares); background: #fff; padding: 22px 26px; box-shadow: none; } .faq-pure__item .accordion-button:not(.collapsed) { color: var(--color-primario); background: #fff; } .faq-pure__item .accordion-button:focus { box-shadow: none; border-color: transparent; } .faq-pure__item .accordion-button::after { width: 18px; height: 18px; background-size: 18px; } .faq-pure__item .accordion-body { padding: 0 26px 24px; } .faq-pure__item .accordion-body p { margin: 0; color: var(--color-texto); line-height: 1.75; } /* Normaliza el ancho de los iconos de la rejilla de valores: mezclamos iconos propios de Zeinet con uno de FontAwesome y el glifo de FA es más ancho, lo que desalineaba la fila. */ .why-choose-one__icon span { display: inline-block; width: 1em; text-align: center; } /* ---------- 4. CTA de portabilidad ---------- */ .service-available__subtitle { margin-top: 14px; color: #fff; opacity: .9; max-width: 460px; } .service-available__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .service-available__cta .thm-btn i { margin-right: 8px; } .service-available__link { color: #fff; font-size: 15px; text-decoration: underline; opacity: .9; } .service-available__link:hover { color: #fff; opacity: 1; } /* ---------- 5. Páginas legales ---------- */ .page-header { position: relative; padding: 190px 0 90px; background: var(--color-titulares); overflow: hidden; } .page-header__bg { position: absolute; inset: 0; background: linear-gradient(120deg, var(--color-titulares) 0%, #123a33 60%, var(--color-secundario) 160%); opacity: .97; } .page-header__inner { position: relative; z-index: 2; } .page-header h1 { color: #fff; font-size: 46px; font-weight: 700; letter-spacing: var(--zeinet-letter-spacing, -0.04em); margin: 0 0 12px; } .thm-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 15px; color: rgba(255, 255, 255, .75); } .thm-breadcrumb a { color: #fff; } .thm-breadcrumb a:hover { color: var(--color-primario); } .legal { padding: 90px 0 100px; } .legal__inner { max-width: 820px; margin: 0 auto; color: var(--color-texto); font-size: 16px; line-height: 1.85; } .legal__lead { font-size: 19px; line-height: 1.7; color: var(--color-titulares); font-weight: 500; } .legal__inner h2 { font-size: 26px; font-weight: 700; color: var(--color-titulares); margin: 48px 0 16px; letter-spacing: var(--zeinet-letter-spacing, -0.04em); } .legal__inner h3 { font-size: 19px; font-weight: 700; color: var(--color-titulares); margin: 34px 0 12px; } .legal__inner h2:first-child, .legal__inner h3:first-child { margin-top: 0; } .legal__inner p { margin: 0 0 18px; } .legal__inner ul, .legal__inner ol { margin: 0 0 22px; padding-left: 22px; } .legal__inner ul li, .legal__inner ol li { margin-bottom: 10px; } .legal__inner ul { list-style: none; padding-left: 0; } .legal__inner ul li { position: relative; padding-left: 22px; } .legal__inner ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primario); } .legal__inner ol { counter-reset: legal; list-style: none; padding-left: 0; } .legal__inner ol li { position: relative; padding-left: 32px; counter-increment: legal; } .legal__inner ol li::before { content: counter(legal) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--color-primario); } .legal__inner a { color: var(--color-primario); text-decoration: underline; text-underline-offset: 2px; } .legal__inner a:hover { color: var(--color-secundario); } .legal__table-wrap { overflow-x: auto; margin: 0 0 28px; } .legal__table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-borde); font-size: 15px; } .legal__table th, .legal__table td { padding: 14px 18px; border: 1px solid var(--color-borde); text-align: left; vertical-align: top; line-height: 1.7; } .legal__table th { width: 190px; background: var(--color-gris-suave); color: var(--color-titulares); font-weight: 700; } .legal__nota { margin-top: 32px; padding: 18px 22px; background: var(--color-gris-suave); border-left: 3px solid var(--color-primario); border-radius: 0; font-size: 15px; } /* ---------- 6. Ajustes responsive ---------- */ /* zeinet.css ya trae las media queries; aquí solo lo propio de Pure. */ @media (max-width: 767px) { .plans-one__tabs .nav-link { padding: 8px 18px; font-size: 14px; } .plans-one__desc { min-height: 0; } .faq-pure { padding: 70px 0; } .faq-pure__item .accordion-button { font-size: 16px; padding: 18px 20px; } .faq-pure__item .accordion-body { padding: 0 20px 20px; } .page-header { padding: 150px 0 60px; } .page-header h1 { font-size: 30px; } .legal { padding: 55px 0 65px; } .legal__inner { font-size: 15px; } .legal__inner h2 { font-size: 22px; margin: 36px 0 14px; } .legal__inner h3 { font-size: 17px; } .legal__table th { width: 130px; } .legal__table th, .legal__table td { padding: 10px 12px; font-size: 14px; } }