/* * Inpetransfer Home · FAQ * Fase 8 · Tipografía y colores comunes; compatibilidad con __items. */ /******************************************************* * BLOQUE *******************************************************/ .inp-home-faq { position: relative; padding: 86px 0 90px; background: #ffffff; font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif); } /******************************************************* * GRID *******************************************************/ .inp-home-faq__grid { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr); gap: 78px; align-items: start; } /******************************************************* * COLUMNA INTRO *******************************************************/ .inp-home-faq__intro { position: sticky; top: 120px; } /******************************************************* * EYEBROW *******************************************************/ .inp-home-faq__eyebrow { display: inline-block; margin-bottom: 14px; color: var(--inp-home-accent-color, #acbd51); font-size: var(--inp-home-eyebrow-size, 13px); font-weight: var(--inp-home-heading-weight, 800); letter-spacing: .10em; text-transform: uppercase; } /******************************************************* * TITULO PRINCIPAL * MISMO ESTILO QUE EL RESTO DE LA HOME *******************************************************/ .inp-home-faq .inp-home-faq__intro h2 { max-width: 620px; margin: 0; font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif) !important; color: var(--inp-home-heading-color, #171917) !important; font-size: var(--inp-home-heading-size, clamp(32px, 3.6vw, 48px)) !important; line-height: var(--inp-home-heading-line-height, 1.12) !important; letter-spacing: var(--inp-home-heading-letter-spacing, -.035em) !important; font-weight: var(--inp-home-heading-weight, 800) !important; font-style: normal !important; } /******************************************************* * TEXTO DEBAJO DEL TITULO *******************************************************/ .inp-home-faq .inp-home-faq__intro > p { max-width: 570px; margin: 24px 0 0; font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif); color: var(--inp-home-body-color, #454a45); font-size: var(--inp-home-body-size, 16px); line-height: var(--inp-home-body-line-height, 1.7); font-weight: var(--inp-home-body-weight, 400); } /******************************************************* * CONTACTO *******************************************************/ .inp-home-faq__contact { display: inline-flex; align-items: center; margin-top: 30px; color: var(--inp-home-heading-color, #171917) !important; font-size: var(--inp-home-label-size, 15px); line-height: 1.4; font-weight: var(--inp-home-heading-weight, 800); text-decoration: none !important; transition: color .2s ease, transform .2s ease; } .inp-home-faq__contact span { margin-left: 9px; color: var(--inp-home-accent-color, #acbd51); font-size: 18px; transition: transform .2s ease; } .inp-home-faq__contact:hover { color: var(--inp-home-accent-color, #acbd51) !important; } .inp-home-faq__contact:hover span { transform: translateX(4px); } /******************************************************* * LISTA FAQ *******************************************************/ .inp-home-faq__list, .inp-home-faq__items { display: flex; flex-direction: column; gap: 13px; } /******************************************************* * ITEM FAQ *******************************************************/ .inp-home-faq__item { border: 1px solid rgba(158, 175, 61, .55); border-radius: 18px; background: #ffffff; box-shadow: 0 8px 24px rgba(38, 51, 79, .04); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; } .inp-home-faq__item[open] { border-color: var(--inp-home-accent-color, #acbd51); box-shadow: 0 12px 30px rgba(38, 51, 79, .07); } /******************************************************* * PREGUNTA *******************************************************/ .inp-home-faq__item summary { position: relative; min-height: 78px; padding: 24px 72px 24px 26px; display: flex; align-items: center; font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif); color: var(--inp-home-heading-color, #171917); font-size: 17px; line-height: 1.45; font-weight: var(--inp-home-heading-weight, 800); cursor: pointer; list-style: none; user-select: none; } .inp-home-faq__item summary::-webkit-details-marker { display: none; } /******************************************************* * ICONO + / - *******************************************************/ .inp-home-faq__item summary::after { content: '+'; position: absolute; right: 24px; top: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f1f5e7; color: var(--inp-home-accent-color, #acbd51); font-size: 24px; line-height: 1; font-weight: 400; transform: translateY(-50%); transition: background .2s ease, color .2s ease; } .inp-home-faq__item[open] summary::after { content: '−'; background: var(--inp-home-accent-color, #acbd51); color: var(--inp-home-heading-color, #171917); } /******************************************************* * RESPUESTA *******************************************************/ .inp-home-faq__answer { padding: 0 26px 26px; font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif); color: var(--inp-home-body-color, #454a45); font-size: var(--inp-home-body-size, 16px); line-height: var(--inp-home-body-line-height, 1.7); font-weight: var(--inp-home-body-weight, 400); text-align: justify; } .inp-home-faq__answer p { margin: 0; font-family: inherit; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /******************************************************* * HOVER *******************************************************/ @media (hover: hover) { .inp-home-faq__item:hover { border-color: var(--inp-home-accent-color, #acbd51); box-shadow: 0 10px 28px rgba(38, 51, 79, .06); } .inp-home-faq__item:hover summary::after { background: #eaf0d9; } .inp-home-faq__item[open]:hover summary::after { background: var(--inp-home-accent-color, #acbd51); } } /******************************************************* * TABLET *******************************************************/ @media (max-width: 1000px) { .inp-home-faq { padding: 72px 0 76px; } .inp-home-faq__grid { grid-template-columns: 1fr; gap: 42px; } .inp-home-faq__intro { position: static; max-width: 820px; } .inp-home-faq .inp-home-faq__intro h2 { max-width: 720px; } .inp-home-faq .inp-home-faq__intro > p { max-width: 720px; } } /******************************************************* * MOVIL *******************************************************/ @media (max-width: 620px) { .inp-home-faq { padding: 60px 0 64px; } .inp-home-faq__grid { gap: 34px; } /* TITULO */ .inp-home-faq .inp-home-faq__intro h2 { font-size: var(--inp-home-heading-size, clamp(32px, 3.6vw, 48px)) !important; line-height: var(--inp-home-heading-line-height, 1.12) !important; letter-spacing: var(--inp-home-heading-letter-spacing, -.035em) !important; font-weight: var(--inp-home-heading-weight, 800) !important; } /* TEXTO INTRO */ .inp-home-faq .inp-home-faq__intro > p { margin-top: 18px; font-size: var(--inp-home-body-size, 16px); line-height: var(--inp-home-body-line-height, 1.7); } /* CONTACTO */ .inp-home-faq__contact { margin-top: 22px; font-size: var(--inp-home-label-size, 15px); } /* FAQ */ .inp-home-faq__list, .inp-home-faq__items { gap: 11px; } .inp-home-faq__item summary { min-height: 72px; padding: 21px 62px 21px 20px; font-size: 16px; line-height: 1.4; } .inp-home-faq__item summary::after { right: 18px; width: 34px; height: 34px; font-size: 22px; } /* RESPUESTAS */ .inp-home-faq__answer { padding: 0 20px 22px; font-size: var(--inp-home-body-size, 16px); line-height: var(--inp-home-body-line-height, 1.7); /* * En móvil no justificamos porque crea * espacios excesivos entre palabras. */ text-align: left; } }