/* ============================================================
TERRITORIK — hoja de estilo del bloque
Cubre solo lo que el panel de Elementor no expone o no genera
de forma fiable. Clases verificadas contra elementor 3.28 y
proelements (widget-form.min.css).
============================================================ */
/* ---------- 1. HERO: velo crema en degradado horizontal ----------
Elementor no genera CSS fiable para degradados de fondo en
contenedores, asi que el nativo queda como color plano de
respaldo y el degradado real se pinta aqui sobre ::before. */
.tk-hero { --overlay-opacity: 1; position: relative; }
.tk-hero::before {
content: '' !important;
display: block;
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 1 !important;
background-color: transparent !important;
background-image: linear-gradient(90deg,
#FDFAF1 0%,
rgba(253,250,241,.95) 32%,
rgba(253,250,241,.55) 62%,
rgba(253,250,241,.12) 100%) !important;
}
.tk-hero > .e-con-inner,
.tk-hero > .elementor-element { position: relative; z-index: 1; }
@media (max-width: 1024px) {
.tk-hero::before {
background-image: linear-gradient(90deg,
#FDFAF1 0%,
rgba(253,250,241,.94) 45%,
rgba(253,250,241,.35) 100%) !important;
}
}
@media (max-width: 767px) {
.tk-hero::before {
background-image: linear-gradient(180deg,
rgba(253,250,241,.93) 0%,
rgba(253,250,241,.88) 50%,
rgba(253,250,241,.97) 100%) !important;
}
}
/* ---------- 2. OFERTA: degradado dosel ---------- */
.tk-canopy {
background-image: linear-gradient(160deg, #00643A 0%, #003821 100%) !important;
}
/* ---------- 3. Botones ---------- */
.tk-warm > .elementor-widget-container > .elementor-button-wrapper > .elementor-button,
.tk-warm .elementor-button {
background-image: linear-gradient(135deg, #DB6B25 0%, #D79628 100%);
border: 0;
transition: transform .25s cubic-bezier(.22,.68,0,1), box-shadow .25s ease;
}
.tk-warm .elementor-button:hover {
background-image: linear-gradient(135deg, #D79628 0%, #DB6B25 100%);
transform: translateY(-3px);
}
.tk-ghost .elementor-button { transition: transform .25s ease, background-color .25s ease; }
.tk-ghost .elementor-button:hover { transform: translateY(-2px); }
.tk-blur { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* ---------- 4. Tarjetas ---------- */
.tk-card, .tk-scard, .tk-mini {
transition: transform .38s cubic-bezier(.22,.68,0,1),
box-shadow .38s cubic-bezier(.22,.68,0,1),
border-color .38s ease, background-color .38s ease;
}
.tk-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(27,69,38,.55); }
.tk-scard:hover { transform: translateY(-6px); background-color: rgba(252,250,241,.15); }
.tk-mini:hover { transform: translateY(-4px); border-color: #429C5A; }
/* ---------- 5. Barra de progreso del test ----------
Los controles nativos llevan default global (verde/gris) y no
siempre ganan; fijamos las variables directamente. */
.tk-form-test {
--e-form-steps-indicator-progress-color: #DB6B25;
--e-form-steps-indicator-progress-background-color: #F4EAD5;
--e-form-steps-indicator-progress-height: 8px;
--e-form-steps-indicator-progress-border-radius: 999px;
--e-form-steps-indicators-spacing: 30px;
}
.tk-form-test .e-form__indicators__indicator__progress__meter {
padding-right: 0;
background-image: linear-gradient(135deg, #DB6B25 0%, #D79628 100%);
transition: width .5s cubic-bezier(.22,.68,0,1);
}
/* ---------- 6. Preguntas del test como titulares ---------- */
.tk-form-test .elementor-field-type-radio > label {
display: block;
font-family: Fraunces, Georgia, serif;
font-size: 26px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -.4px;
color: #17291B;
margin: 0 0 18px;
padding: 0;
}
@media (max-width: 767px) {
.tk-form-test .elementor-field-type-radio > label { font-size: 21px; }
}
/* ---------- 7. Opciones como tarjetas seleccionables ---------- */
.tk-form-test .elementor-field-type-radio .elementor-field-subgroup { display: grid; gap: 12px; width: 100%; }
.tk-form-test .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option {
display: flex;
align-items: center;
gap: 14px;
min-height: 56px;
margin: 0;
padding: 14px 20px;
border: 1px solid #E3DECF;
border-radius: 18px;
background: #FDFAF1;
cursor: pointer;
transition: transform .24s cubic-bezier(.22,.68,0,1), border-color .24s ease,
background-color .24s ease, box-shadow .24s ease;
}
.tk-form-test .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option:hover {
transform: translateY(-2px);
border-color: #00643A;
background: #FEE2C9;
box-shadow: 0 18px 45px -22px rgba(27,69,38,.45);
}
.tk-form-test .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option label {
flex: 1;
margin: 0;
cursor: pointer;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.35;
color: #17291B;
}
.tk-form-test .elementor-field-type-radio .elementor-field-subgroup input[type=radio] {
width: 19px; height: 19px; flex: 0 0 auto;
accent-color: #00643A; cursor: pointer; margin: 0;
}
.tk-form-test .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option:has(input:checked) {
border-color: #00643A;
background: #FEE2C9;
box-shadow: inset 0 0 0 1px #00643A;
}
/* ---------- 8. Bloque HTML de resultado ----------
Ojo: el css_classes de un campo html se escribe en el atributo del
, que para ese tipo de campo no se imprime. El unico gancho
valido es .elementor-field-type-html; se estiliza en el bloque 17. */
.tk-form .elementor-field-type-html { display: block; width: 100%; }
/* ---------- 9. Campos ---------- */
.tk-form .elementor-field-group > label { font-weight: 500; }
.tk-form .elementor-field:focus {
border-color: #00643A;
box-shadow: 0 0 0 3px rgba(0,100,58,.16);
outline: none;
}
.tk-form .elementor-field::placeholder { color: rgba(94,103,85,.55); }
.tk-form .elementor-field-textual { min-height: 50px; }
/* ---------- 10. Botones del multistep ---------- */
.tk-form .e-form__buttons { gap: 12px; }
.tk-form .e-form__buttons__wrapper__button-previous {
background: transparent;
color: #5E6755;
border: 1px solid #E3DECF;
border-radius: 999px;
}
.tk-form .e-form__buttons__wrapper__button-previous:hover { background: #F4EAD5; color: #17291B; }
/* ---------- 11. Correcciones verificadas contra el render real ---------- */
/* El porcentaje va dentro de una barra de 8 px y no cabe: se oculta. */
.tk-form-test .e-form__indicators__indicator__progress__meter {
font-size: 0;
min-width: 8px;
}
/* Degradado calido tambien en los botones del formulario */
.tk-form .elementor-button,
.tk-form .e-form__buttons__wrapper__button-next {
background-image: linear-gradient(135deg, #DB6B25 0%, #D79628 100%);
border: 0;
transition: transform .25s cubic-bezier(.22,.68,0,1), box-shadow .25s ease;
}
.tk-form .elementor-button:hover,
.tk-form .e-form__buttons__wrapper__button-next:hover {
background-image: linear-gradient(135deg, #D79628 0%, #DB6B25 100%);
transform: translateY(-2px);
box-shadow: 0 24px 55px -26px rgba(109,56,0,.5);
}
.tk-form .e-form__buttons__wrapper__button-previous { background-image: none; }
/* Espaciado interno del panel */
.tk-form-test .elementor-field-group { margin-bottom: 0; }
.tk-form-test .e-form__buttons { margin-top: 26px; }
/* Tarjetas siempre a la misma altura dentro de la rejilla */
.tk-card, .tk-scard, .tk-mini { height: 100%; }
/* Red de seguridad de las animaciones */
@media (prefers-reduced-motion: reduce) {
.elementor-invisible { visibility: visible !important; animation: none !important; }
}
/* ---------- 12. Fidelidad con ViabilityTest.tsx ----------
Pregunta: text-2xl / sm:text-3xl -> 24 / 30 px
Opcion: rounded-2xl px-5 py-4 text-base font-medium
Lista: min-h-[19rem] content-start gap-3
Barra: h-2 bg-muted */
.tk-form-test .elementor-field-type-radio > label { font-size: 30px; }
@media (max-width: 767px) {
.tk-form-test .elementor-field-type-radio > label { font-size: 24px; }
}
.tk-form-test .elementor-field-type-radio .elementor-field-subgroup { align-content: start; }
@media (min-width: 768px) {
.tk-form-test .elementor-field-type-radio .elementor-field-subgroup { min-height: 304px; }
}
.tk-form-test .elementor-field-type-radio .elementor-field-option {
padding: 16px 20px;
min-height: 60px;
}
.tk-form-test .elementor-field-type-radio .elementor-field-option:hover {
background: rgba(254,226,201,.6);
}
.tk-form-test {
--e-form-steps-indicator-progress-background-color: #F3EEE1;
--e-form-steps-indicator-progress-height: 8px;
}
/* Flecha a la derecha de cada opcion, igual que en el referente */
.tk-form-test .elementor-field-type-radio .elementor-field-option::after {
content: '';
flex: 0 0 auto;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%235E6755%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3Cpath%20d%3D%27m12%205%207%207-7%207%27%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: center;
transition: transform .24s cubic-bezier(.22,.68,0,1), background-image .24s ease;
}
.tk-form-test .elementor-field-type-radio .elementor-field-option:hover::after {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300643A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3Cpath%20d%3D%27m12%205%207%207-7%207%27%2F%3E%3C%2Fsvg%3E");
transform: translateX(5px);
}
/* ---------- 0. Fuentes y base, identicas al referente ----------
Fraunces 500/700 para titulares, DM Sans 400/500/700 para el resto,
con el eje optico de Fraunces activo como en el original. */
.elementor-widget-heading .elementor-heading-title,
.tk-form-test .elementor-field-type-html h3 { font-optical-sizing: auto; }
/* ---------- 14. Barra de progreso y navegacion del test ----------
Calcado de ViabilityTest.tsx:
fila superior -> "PREGUNTA 1 DE 5" uppercase tracking-widest + "0%"
pista -> h-2 rounded-full bg-muted
relleno -> gradiente calido, transition 500 ms
navegacion -> "Volver" como enlace de texto; sin boton Siguiente
(el avance es automatico al elegir) */
.tk-form-test .e-form__indicators { display: block; margin-bottom: 32px; }
.tk-form-test .e-form__indicators__indicator { padding: 0; flex-basis: auto; width: 100%; }
.tk-form-test .e-form__indicators__indicator__progress { width: 100%; }
.tk-progress-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
font-family: 'DM Sans', system-ui, sans-serif;
}
.tk-progress-head .tk-step {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .1em;
color: #5E6755;
}
.tk-progress-head .tk-pct {
font-size: 14px;
font-weight: 500;
color: #5E6755;
font-variant-numeric: tabular-nums;
}
/* Navegacion: "Volver" es un enlace de texto, no un boton */
.tk-form-test .e-form__buttons { margin-top: 24px; justify-content: flex-start; gap: 20px; }
.tk-form-test .e-form__buttons__wrapper__button-previous {
background: none !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
min-height: 0;
color: #5E6755 !important;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 14px;
font-weight: 400;
text-underline-offset: 4px;
transform: none !important;
}
.tk-form-test .e-form__buttons__wrapper__button-previous:hover {
color: #00643A !important;
text-decoration: underline;
}
/* El boton Siguiente solo se oculta si el avance automatico esta activo:
asi, si el JS no corriera, el formulario sigue siendo utilizable. */
.tk-form-test.js-autonext .e-form__buttons__wrapper__button-next:not(.elementor-hidden) {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px; border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
opacity: 0;
pointer-events: none;
}
.tk-form-test.js-autonext .e-form__buttons { margin-top: 20px; }
/* ---------- 15. Iconos Lucide exactos del referente ----------
IMPORTANTE: con el experimento e_font_icon_svg activo (por defecto en
Elementor 4), los iconos se renderizan como