/* ======================================================================== Sección SERVICIOS — hoja de estilos independiente (Solicitud, Modificación y Término de Suministro de Servicio de Gas) ======================================================================== */ :root { /* Paleta alineada a la identidad ya usada en el sitio (títulos de formulario en #2a97d1, bordes de input en #39791a, bloques de condiciones en #1fa7f6/#DB0F82) */ --servicios-primario: #2a97d1; --servicios-primario-oscuro: #1c74a6; --servicios-verde: #39791a; --servicios-texto: #4a4a4a; --servicios-texto-suave: #8f8f8f; --servicios-borde: #e2e6e9; --servicios-fondo-suave: #f4f8f9; } /* ------------------------------------------------------------------------ Banner — sin modificaciones, mismo patrón que el resto del sitio (#banner-estatico + .wrap .titulo), sólo se define la imagen de fondo. ------------------------------------------------------------------------ */ #banner-estatico.banner-servicios { background-image: url(/img/home-v3/banner2.jpg); } /* ------------------------------------------------------------------------ Tipografía — el sitio no define una fuente global en , cada componente la declara ("Open Sans" para texto, "opensansbold" para títulos). Se fija aquí la misma base para toda la sección Servicios; los títulos (h3, etc.) más abajo sobrescriben con "opensansbold" igual que en el resto del sitio. ------------------------------------------------------------------------ */ .servicios-intro, .servicios-pasos, .servicios-listado, .formulario-servicios { font-family: "Open Sans", Arial, Helvetica, sans-serif; } /* ------------------------------------------------------------------------ Listado de servicios (página índice) ------------------------------------------------------------------------ */ .servicios-intro { background: #fff; padding: 55px 0 10px; } .servicios-intro .wrap { max-width: 1100px; margin: 0 auto; width: 90%; } .servicios-intro p { max-width: 760px; color: var(--servicios-texto); font-size: 1rem; line-height: 1.7; } .servicios-pasos { display: flex; flex-wrap: wrap; gap: 20px; margin: 35px 0 10px; } .servicios-pasos .paso { flex: 1; min-width: 200px; background: var(--servicios-fondo-suave); border-radius: 10px; padding: 22px 20px; display: flex; align-items: flex-start; gap: 14px; } .servicios-pasos .paso .numero { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: var(--servicios-primario); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; } .servicios-pasos .paso h4 { margin: 4px 0 4px; font-size: 14px; color: var(--servicios-primario-oscuro); text-transform: uppercase; letter-spacing: .02em; } .servicios-pasos .paso p { margin: 0; font-size: 13px; color: var(--servicios-texto-suave); line-height: 1.5; } .servicios-listado { padding: 30px 0 70px; } .servicios-listado .wrap { max-width: 1100px; margin: 0 auto; width: 90%; } .servicios-listado .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .servicios-listado .col { width: 31%; min-width: 270px; flex: 1; } .servicios-listado .contenedor { background: #fff; border: 1px solid var(--servicios-borde); border-radius: 12px; box-shadow: 0 4px 16px rgba(0,32,42,.06); padding: 34px 26px; text-align: center; height: 100%; display: flex; flex-direction: column; align-items: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .servicios-listado .contenedor:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,60,77,.14); border-color: var(--servicios-primario); } .servicios-listado .icon { width: 78px; height: 78px; border-radius: 50%; background: var(--servicios-fondo-suave); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .servicios-listado .icon img { max-height: 38px; max-width: 38px; } .servicios-listado .contenido h3 { font-size: 17px; margin: 0 0 10px; color: var(--servicios-primario-oscuro); font-family: "opensansbold"; } .servicios-listado .contenido .texto { font-size: 13.5px; color: var(--servicios-texto-suave); margin-bottom: 22px; line-height: 1.6; flex: 1; } .servicios-listado .contenido a { display: inline-flex; align-items: center; gap: 8px; background: var(--servicios-primario); color: #fff; padding: 10px 26px; border-radius: 24px; text-decoration: none; font-size: 13px; font-weight: 600; transition: background .2s ease; } .servicios-listado .contenido a:hover { background: var(--servicios-primario-oscuro); } /* ------------------------------------------------------------------------ Formulario individual de cada servicio ------------------------------------------------------------------------ */ .formulario-servicios { background: var(--servicios-fondo-suave); padding: 50px 0 100px; } .formulario-servicios .wrap { max-width: 980px; margin: 0 auto; padding: 20px; width: 92%; } /* Tarjeta de sección numerada */ .card-seccion { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,32,42,.06); margin-bottom: 26px; overflow: hidden; scroll-margin-top: 25px; } .card-seccion-header { display: flex; align-items: flex-start; gap: 16px; padding: 22px 26px; border-bottom: 1px solid var(--servicios-borde); } .card-seccion-numero { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; background: var(--servicios-primario); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .card-seccion-header h3 { margin: 3px 0 4px !important; font-size: 15px !important; color: var(--servicios-primario-oscuro) !important; font-family: "opensansbold"; text-transform: uppercase; letter-spacing: .02em; } .card-seccion-header p { margin: 0; font-size: 12.5px; color: var(--servicios-texto-suave); line-height: 1.5; } .card-seccion-body { padding: 26px; } /* Bloque informativo/legal antes del formulario (ej: Cambio de Proveedor) */ .titulo-pill { display: inline-block; background: var(--servicios-verde); color: #fff; font-family: "opensansbold"; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; padding: 10px 20px; border-radius: 24px; margin: 0 0 20px 0; } .card-info-legal .card-seccion-body > p { margin: 0 0 14px 0; font-size: 13px; color: var(--servicios-texto); line-height: 1.6; } .card-info-legal .card-seccion-body > h4 { margin: 22px 0 10px 0; font-size: 14px; color: var(--servicios-primario-oscuro); font-family: "opensansbold"; text-transform: uppercase; letter-spacing: .02em; } /* Aviso destacado (ej: llamado a completar el formulario) */ .aviso-destacado { display: flex; align-items: flex-start; gap: 14px; background: var(--servicios-fondo-suave); border-left: 4px solid var(--servicios-primario); border-radius: 8px; padding: 18px 22px; margin: 0 0 20px 0; } .aviso-destacado i { color: var(--servicios-primario); font-size: 20px; margin-top: 2px; } .aviso-destacado p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--servicios-primario-oscuro); font-family: "opensansbold"; } .tabla-scroll { overflow-x: auto; margin-bottom: 14px; } .tabla-acopio { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 12.5px; } .tabla-acopio th, .tabla-acopio td { border: 1px solid var(--servicios-borde); padding: 10px 14px; text-align: left; } .tabla-acopio thead th { background: var(--servicios-fondo-suave); color: var(--servicios-primario-oscuro); font-weight: 700; } /* Grillas internas */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 18px 22px; } .grid-2 .full { grid-column: 1 / -1; } .formulario-servicios .form-group { margin: 0 0 4px 0; } /* Separación extra respecto al bloque anterior dentro de la misma tarjeta */ .formulario-servicios .form-group.campo-siguiente { margin-top: 26px; } .formulario-servicios .form-group label.label-opcion { display: block; color: var(--servicios-primario-oscuro); font-size: 12.5px; font-weight: 700; margin: 0 0 8px 0; text-transform: none; } /* Tarjetas de opción (radio/checkbox estilo "chip" grande) */ .opciones-tarjetas { display: flex; flex-wrap: wrap; gap: 12px; } .opciones-tarjetas .tarjeta-opcion { position: relative; flex: 1; min-width: 150px; } .opciones-tarjetas .tarjeta-opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .opciones-tarjetas .tarjeta-opcion .contenido-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 2px solid var(--servicios-borde); border-radius: 10px; padding: 18px 12px; color: var(--servicios-texto); font-size: 13px; font-weight: 600; transition: all .2s ease; background: #fff; } .opciones-tarjetas .tarjeta-opcion .contenido-tarjeta i { font-size: 22px; color: var(--servicios-primario); } .opciones-tarjetas .tarjeta-opcion input:checked ~ .contenido-tarjeta, .opciones-tarjetas .tarjeta-opcion:has(input:checked) .contenido-tarjeta { border-color: var(--servicios-primario); background: #eaf4f7; color: var(--servicios-primario-oscuro); box-shadow: 0 4px 12px rgba(0,108,134,.12); } /* Grupos de opciones agrupados en columnas con subtítulo (ej: Propietario / No Propietario) */ .relacion-propiedad-grupos { display: flex; flex-wrap: wrap; gap: 26px; } .relacion-columna { flex: 1; min-width: 240px; } .relacion-columna h4 { margin: 0 0 12px 0; font-size: 13px; color: var(--servicios-primario-oscuro); text-transform: uppercase; letter-spacing: .02em; } /* Grupos de opciones tipo pastilla (radio/checkbox simples, con precio opcional) */ .opciones-radio { display: flex; flex-wrap: wrap; gap: 10px; } .opciones-radio label { display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--servicios-borde); border-radius: 24px; padding: 10px 18px; font-size: 13px; color: var(--servicios-texto); cursor: pointer; background: #fff; transition: all .2s ease; } .opciones-radio label:has(input:checked) { border-color: var(--servicios-primario); background: #eaf4f7; color: var(--servicios-primario-oscuro); font-weight: 700; } .opciones-radio input[type="radio"], .opciones-radio input[type="checkbox"] { margin: 0; accent-color: var(--servicios-primario); } .opciones-radio .precio { display: block; font-size: .78em; color: var(--servicios-texto-suave); font-weight: 400; } .opciones-precio label { flex-direction: column; align-items: flex-start; gap: 4px; border-radius: 12px; padding: 14px 18px; flex: 1; min-width: 200px; } .opciones-precio label:has(input:checked) .precio { color: var(--servicios-primario); } /* Cambio de Proveedor: las opciones de cada categoría van apiladas hacia abajo (una por fila) en vez de en línea, ya que este formulario tiene varios grupos con muchas alternativas. Sólo aplica a este formulario. */ #cambio-proveedor .opciones-radio { flex-direction: column; align-items: stretch; } #cambio-proveedor .opciones-radio label { width: 100%; } /* Tipo de vivienda y Tipo de suministro: 2 columnas en vez de 1 sola */ #seccion-vivienda .opciones-radio, #seccion-suministro .opciones-radio { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 10px; } /* Opción "Otro" del Tipo de suministro: ocupa la misma celda de la grilla que las demás opciones; el campo de texto queda apilado justo debajo, dentro de esa misma celda, por lo que comparte exactamente su ancho. */ #seccion-suministro .opcion-otro { display: flex; flex-direction: column; gap: 8px; } #seccion-suministro .opcion-otro label { width: 100%; } #seccion-suministro .opcion-otro .campo-otro { margin-top: 0; } /* Input corto que acompaña a la opción "Otro (especifique)" */ .campo-otro { margin-top: 10px; width: 100%; border: 1px solid #39791a; padding: 10px 12px; border-radius: 10px; font-size: .85rem; } /* Tarjetas de documentos adjuntos */ .doc-lista { display: flex; flex-direction: column; gap: 12px; } .doc-item { display: flex; align-items: center; gap: 16px; border: 1.5px dashed var(--servicios-borde); border-radius: 10px; padding: 14px 18px; transition: border-color .2s ease, background .2s ease; } .doc-item.tiene-archivo { border-style: solid; border-color: var(--servicios-verde); background: #f3f9ef; } .doc-icono { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background: var(--servicios-fondo-suave); color: var(--servicios-primario); display: flex; align-items: center; justify-content: center; font-size: 17px; } .doc-item.tiene-archivo .doc-icono { background: var(--servicios-verde); color: #fff; } .doc-info { flex: 1; min-width: 0; } .doc-info .doc-titulo { display: block; font-size: 13px; font-weight: 700; color: var(--servicios-texto); margin-bottom: 3px; } .doc-info .doc-nombre-archivo { display: block; font-size: 12px; color: var(--servicios-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-item.tiene-archivo .doc-info .doc-nombre-archivo { color: var(--servicios-verde); font-weight: 600; } .doc-info .doc-formato { display: block; font-size: 11px; color: var(--servicios-texto-suave); opacity: .8; margin-top: 2px; } .doc-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--servicios-primario); color: var(--servicios-primario); font-size: 12.5px; font-weight: 700; padding: 9px 18px; border-radius: 20px; cursor: pointer; white-space: nowrap; transition: all .2s ease; } .doc-btn:hover { background: var(--servicios-primario); color: #fff; } .doc-input { display: none; } /* Bloques de consentimiento (ofertas y promociones, políticas de privacidad) */ .consentimiento { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; background: var(--servicios-primario); color: #fff; padding: 16px 24px; border-radius: 10px; margin-bottom: 16px; } .consentimiento p, .consentimiento a { margin: 0; font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none; } .consentimiento a:hover { text-decoration: underline; } .consentimiento label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .consentimiento input[type="checkbox"] { width: 19px; height: 19px; accent-color: #fff; cursor: pointer; } .consentimiento.has-error { outline: 2px solid #d9534f; outline-offset: 3px; } .formulario-servicios .consentimiento .mensaje-error { color: #fff; font-weight: 700; background: rgba(0, 0, 0, .18); border-radius: 6px; padding: 6px 10px; margin-top: 8px; } .card-condiciones .card-seccion-body > .consentimiento:last-of-type { margin-bottom: 26px; } /* Texto de declaración/condiciones en párrafos simples antes del consentimiento */ .card-condiciones .card-seccion-body > p { margin: 0 0 14px 0; font-size: 13px; color: var(--servicios-texto); line-height: 1.6; } .formulario-servicios .recaptcha-group { display: flex; justify-content: center; margin-bottom: 20px; } .formulario-servicios .recaptcha-group.has-error .mensaje-error { text-align: center; width: 100%; } .formulario-servicios .form-submit { text-align: center; } .formulario-servicios .form-submit input[type="submit"] { background: linear-gradient(135deg, var(--servicios-primario) 0%, var(--servicios-primario-oscuro) 100%); color: #fff; border: none; padding: 15px 48px; font-size: 15px; font-weight: 700; border-radius: 26px; cursor: pointer; letter-spacing: .02em; box-shadow: 0 6px 18px rgba(0,108,134,.28); transition: transform .2s ease, box-shadow .2s ease; } .formulario-servicios .form-submit input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,108,134,.35); } /* Icono de ayuda contextual junto a una etiqueta (tooltip nativo vía title) */ .label-opcion .info-icon { color: var(--servicios-primario); cursor: help; margin-left: 4px; font-weight: 400; } /* Campos condicionales — se muestran/ocultan según lo que el usuario va seleccionando en el formulario (ver servicios.js) */ [data-mostrar-si] { transition: opacity .15s ease; } [data-mostrar-si].campo-oculto { display: none !important; } /* ------------------------------------------------------------------------ Validación de campos ------------------------------------------------------------------------ */ .formulario-servicios .form-group.has-error input, .formulario-servicios .form-group.has-error textarea, .formulario-servicios .form-group.has-error select { border-color: #d9534f !important; } .formulario-servicios .grupo-error { outline: 2px solid #d9534f; outline-offset: 6px; border-radius: 12px; } .formulario-servicios .doc-item.has-error { border-style: solid; border-color: #d9534f; background: #fdf1f0; } .formulario-servicios .doc-item.has-error .doc-icono { background: #d9534f; color: #fff; } .formulario-servicios .mensaje-error { display: block; flex-basis: 100%; color: #d9534f; font-size: 12px; font-weight: 600; margin-top: 8px; } .formulario-servicios .resumen-mensaje { display: none; align-items: flex-start; gap: 14px; padding: 16px 20px; border-radius: 8px; font-size: 13.5px; line-height: 1.6; margin-bottom: 30px; } .formulario-servicios .resumen-mensaje.mostrar { display: flex; } .formulario-servicios .resumen-mensaje i { font-size: 20px; margin-top: 2px; } .formulario-servicios .resumen-mensaje.resumen-error { background: #fdf1f0; border-left: 4px solid #d9534f; color: #a94442; } .formulario-servicios .resumen-mensaje.resumen-exito { background: #eaf4f7; border-left: 4px solid var(--servicios-verde); color: #2c5a13; } /* ------------------------------------------------------------------------ Modal de envío exitoso ------------------------------------------------------------------------ */ .modal-exito { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 20px; } .modal-exito.mostrar { display: flex; } .modal-exito-fondo { position: absolute; inset: 0; background: rgba(0, 20, 25, .6); } .modal-exito-caja { position: relative; background: linear-gradient(160deg, #5a8f4a 0%, var(--servicios-verde) 100%); border-radius: 14px; padding: 40px 32px 32px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); animation: modalExitoAparece .25s ease; } @keyframes modalExitoAparece { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-exito-cerrar { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 24px; line-height: 1; color: rgba(255, 255, 255, .85); cursor: pointer; } .modal-exito-cerrar:hover { color: #fff; } .modal-exito-logo { max-width: 150px; margin: 0 auto 20px; display: block; } .modal-exito-icono { display: block; font-size: 46px; color: #fff; margin-bottom: 14px; } .modal-exito-texto { font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 14.5px; color: #fff; line-height: 1.6; margin: 0 0 26px 0; } .modal-exito-boton { background: #fff; color: var(--servicios-verde); border: none; padding: 12px 34px; border-radius: 24px; font-weight: 700; font-size: 13.5px; cursor: pointer; } .modal-exito-boton:hover { background: #f2f2f2; } /* ------------------------------------------------------------------------ Responsive ------------------------------------------------------------------------ */ @media (max-width: 900px) { .servicios-listado .col { width: 100%; } .grid-2 { grid-template-columns: 1fr; } #seccion-vivienda .opciones-radio, #seccion-suministro .opciones-radio { grid-template-columns: 1fr; } .card-seccion-header { padding: 18px 20px; } .card-seccion-body { padding: 20px; } } @media (max-width: 600px) { .doc-item { flex-wrap: wrap; } .doc-btn { width: 100%; justify-content: center; } .opciones-precio label { min-width: 100%; } }