/* Yujju design system — vocabulario de secciones para páginas reconstruidas
   (Home, Negocio, Sobre nosotros, Contacto…). Marcado: SectionKit / *Layout.php.

   Contrato (clases en containers y widgets clásicos de Elementor):
     .yj-section [--blush|--ink]   container padre en caja (1320); ritmo --yj-section-y
       .yj-section__head [--start]  eyebrow + título + intro, centrado (o a la izquierda)
         .yj-eyebrow · .yj-section__title · .yj-section__intro
     .yj-grid.yj-grid-2|3|4        grilla de columnas iguales (4→2→1, 3→1, 2→1)
     .yj-card                      tarjeta plana: blanco, borde 1px, radio 8, sin sombra
     .yj-actions [--start]         fila de CTA; .yj-btn--primary · --secondary · --link
     .yj-checklist                 icon-list con check en color de marca
     .yj-trust (.yj-trust__item, __value, __label)  franja de datos bajo el hero
     .yj-split [--media]           dos columnas texto + aside (o foto); .yj-split__text/__aside/__media
     .yj-steps > .yj-step          pasos numerados (icon-box) con contador
     .yj-compare > .yj-compare__col[--featured]  comparativa de cuentas; .yj-compare__terms
     .yj-quote                     cita destacada (blockquote)
     .yj-cta-band                  CTA de cierre ÚNICO del sitio (Home, Negocio, Sobre nosotros): panel tinta
                                   redondeado en la caja de 1320; título, texto, .yj-actions, beneficios o nota
   Las heurísticas de elementor-sections.css no aplican dentro de .yj-section. */

/* ── Sección ──────────────────────────────────────────────────────────────── */
.yj-ds .elementor .e-con.yj-section {
    padding: var(--yj-section-y) var(--yj-space-5);
    margin: 0;
    background: var(--yj-white);
}

.yj-ds .elementor .e-con.yj-section--blush { background: var(--yj-blush); }
.yj-ds .elementor .e-con.yj-section--ink { background: var(--yj-ink); }

/* Dos secciones blancas seguidas no duplican el respiro */
.yj-ds .elementor .yj-section:not(.yj-section--blush):not(.yj-section--ink):not(.yj-trust) + .yj-section:not(.yj-section--blush):not(.yj-section--ink) {
    padding-top: 0;
}

.yj-ds .elementor .yj-section > .e-con-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--yj-space-7);
}

/* Los widgets no suman margen propio: el espacio lo dan los gaps */
.yj-ds .elementor .yj-section .elementor-widget {
    margin: 0;
}

.yj-ds .elementor .yj-section .e-con.e-child {
    padding: 0;
    min-height: 0;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.yj-ds .elementor .yj-section .e-con.yj-section__head {
    flex-direction: column;
    align-items: center;
    gap: var(--yj-space-3);
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.yj-ds .elementor .yj-section .e-con.yj-section__head--start {
    align-items: flex-start;
    margin-inline: 0;
    text-align: left;
}

.yj-ds .elementor .yj-section .yj-eyebrow .elementor-heading-title {
    font-family: var(--yj-font-body) !important;
    font-size: var(--yj-text-xs) !important;
    font-weight: 600 !important;
    letter-spacing: var(--yj-tracking-caps) !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    color: var(--yj-primary-strong);
}

.yj-ds .elementor .yj-section .yj-section__title .elementor-heading-title {
    color: var(--yj-ink);
    text-wrap: balance;
}

.yj-ds .elementor .yj-section .yj-section__intro,
.yj-ds .elementor .yj-section .yj-section__intro p {
    font-size: var(--yj-text-lg);
    line-height: var(--yj-leading);
    color: var(--yj-text);
}

.yj-ds .elementor .yj-section .yj-section__intro p {
    margin: 0 0 var(--yj-space-3);
}

.yj-ds .elementor .yj-section .yj-section__intro p:last-child { margin-bottom: 0; }

/* ── Grilla y tarjeta ─────────────────────────────────────────────────────── */
.yj-ds .elementor .yj-section .e-con.yj-grid {
    display: grid;
    grid-template-columns: repeat(var(--yj-cols, 3), minmax(0, 1fr));
    gap: var(--yj-space-5);
    width: 100%;
}

.yj-ds .elementor .yj-section .yj-grid-2 { --yj-cols: 2; }
.yj-ds .elementor .yj-section .yj-grid-3 { --yj-cols: 3; }
.yj-ds .elementor .yj-section .yj-grid-4 { --yj-cols: 4; }

.yj-ds .elementor .yj-section .yj-grid > * {
    width: auto;
    min-width: 0;
    max-width: none;
}

.yj-ds .elementor .yj-section .e-con.yj-card {
    flex-direction: column;
    gap: var(--yj-space-4);
    padding: var(--yj-space-6);
    background: var(--yj-white);
    border: var(--yj-border);
    border-radius: var(--yj-radius);
}

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.yj-ds .elementor .yj-section .e-con.yj-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--yj-space-4);
}

.yj-ds .elementor .yj-section .e-con.yj-actions--start { justify-content: flex-start; }

.yj-ds .elementor .yj-section .yj-actions > .elementor-widget { width: auto; }

.yj-ds .elementor .yj-section .yj-actions > .yj-btn--link { width: auto !important; }

.yj-ds .elementor .yj-section .yj-btn--secondary .elementor-button {
    color: var(--yj-ink) !important;
    background: transparent !important;
    border: 1px solid var(--yj-ink) !important;
}

.yj-ds .elementor .yj-section .yj-btn--secondary .elementor-button:hover,
.yj-ds .elementor .yj-section .yj-btn--secondary .elementor-button:focus-visible {
    color: var(--yj-white) !important;
    background: var(--yj-ink) !important;
}

.yj-ds .elementor .yj-section .yj-btn--link .elementor-button {
    min-height: 0 !important;
    padding: var(--yj-space-1) 0 !important;
    color: var(--yj-primary-strong) !important;
    background: transparent !important;
    border: 0 !important;
    letter-spacing: 0 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.yj-ds .elementor .yj-section .yj-btn--link .elementor-button:hover {
    color: var(--yj-primary-hover) !important;
}

/* ── Checklist ────────────────────────────────────────────────────────────── */
.yj-ds .elementor .yj-section .yj-checklist .elementor-icon-list-items {
    display: grid;
    gap: var(--yj-space-3);
}

.yj-ds .elementor .yj-section .yj-checklist .elementor-icon-list-item {
    align-items: flex-start;
    margin: 0;
    padding: 0;
}

.yj-ds .elementor .yj-section .yj-checklist .elementor-icon-list-icon {
    flex: 0 0 auto;
    padding-top: .3em;
}

.yj-ds .elementor .yj-section .yj-checklist .elementor-icon-list-icon i,
.yj-ds .elementor .yj-section .yj-checklist .elementor-icon-list-icon svg {
    width: 14px;
    font-size: 14px;
    color: var(--yj-primary);
    fill: var(--yj-primary);
}

.yj-ds .elementor .yj-section .yj-checklist .elementor-icon-list-text {
    padding-left: var(--yj-space-3);
    font-size: var(--yj-text-md);
    line-height: 1.5;
    color: var(--yj-text);
}

/* ── Franja de confianza ──────────────────────────────────────────────────── */
.yj-ds .elementor .e-con.yj-section.yj-trust {
    padding-block: var(--yj-space-6);
    border-bottom: var(--yj-border);
}

.yj-ds .elementor .yj-trust .e-con.yj-grid { gap: 0; }

.yj-ds .elementor .yj-trust .e-con.yj-trust__item {
    flex-direction: column;
    align-items: center;
    gap: var(--yj-space-1);
    padding: var(--yj-space-2) var(--yj-space-4);
    text-align: center;
}

.yj-ds .elementor .yj-trust .yj-trust__item + .yj-trust__item {
    border-left: var(--yj-border);
}

.yj-ds .elementor .yj-trust .yj-trust__value .elementor-heading-title {
    font-size: var(--yj-h4) !important;
    color: var(--yj-ink);
}

.yj-ds .elementor .yj-trust .yj-trust__label,
.yj-ds .elementor .yj-trust .yj-trust__label p {
    margin: 0;
    font-size: var(--yj-text-sm);
    line-height: 1.4;
    color: var(--yj-muted);
}

/* ── Split: texto + aside / foto ──────────────────────────────────────────── */
.yj-ds .elementor .yj-section .e-con.yj-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--yj-space-8);
    align-items: center;
}

.yj-ds .elementor .yj-section .e-con.yj-split--media {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.yj-ds .elementor .yj-section .e-con.yj-split__text {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--yj-space-4);
}

.yj-ds .elementor .yj-section .yj-split__aside { padding: var(--yj-space-7); }

.yj-ds .elementor .yj-section .yj-split__media img,
.yj-ds .elementor .yj-section .yj-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--yj-radius);
}

/* ── Pasos ────────────────────────────────────────────────────────────────── */
.yj-ds .elementor .yj-section .yj-steps { counter-reset: yj-step; }

.yj-ds .elementor .yj-section .yj-step {
    counter-increment: yj-step;
    text-align: center;
}

.yj-ds .elementor .yj-section .yj-step .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--yj-space-4);
}

.yj-ds .elementor .yj-section .yj-step .elementor-icon-box-icon { margin: 0; }

.yj-ds .elementor .yj-section .yj-step .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    font-size: 32px;
    border-radius: var(--yj-radius-pill);
    background: var(--yj-blush);
}

.yj-ds .elementor .yj-section .yj-step .elementor-icon svg { width: 32px; height: 32px; }

/* Número de paso sobre el título: «01», «02»… */
.yj-ds .elementor .yj-section .yj-step .elementor-icon-box-title::before {
    content: counter(yj-step, decimal-leading-zero);
    display: block;
    margin-bottom: var(--yj-space-2);
    font-family: var(--yj-font-body);
    font-size: var(--yj-text-xs);
    font-weight: 600;
    letter-spacing: var(--yj-tracking-caps);
    color: var(--yj-primary-strong);
}

.yj-ds .elementor .yj-section .yj-step .elementor-icon-box-description {
    max-width: 260px;
    margin-inline: auto;
}

/* ── Comparativa de cuentas ───────────────────────────────────────────────── */
.yj-ds .elementor .yj-section .e-con.yj-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--yj-space-5);
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
}

.yj-ds .elementor .yj-section .e-con.yj-compare__col {
    padding: var(--yj-space-7) var(--yj-space-6);
    gap: var(--yj-space-4);
}

.yj-ds .elementor .yj-section .e-con.yj-compare__col--featured {
    border-color: var(--yj-ink);
    box-shadow: inset 0 4px 0 var(--yj-primary) !important;
}

.yj-ds .elementor .yj-section .yj-compare__name .elementor-heading-title {
    font-size: var(--yj-h3) !important;
    color: var(--yj-ink);
}

.yj-ds .elementor .yj-section .yj-compare__ideal p {
    margin: 0;
    color: var(--yj-muted);
}

.yj-ds .elementor .yj-section .yj-compare__col .yj-checklist {
    padding-block: var(--yj-space-4);
    border-block: var(--yj-border);
}

/* El CTA cierra la tarjeta aunque las listas tengan distinto alto */
.yj-ds .elementor .yj-section .yj-compare__col > .yj-actions {
    margin-top: auto;
}

.yj-ds .elementor .yj-section .yj-compare__col .yj-actions > .elementor-widget,
.yj-ds .elementor .yj-section .yj-compare__col .elementor-button {
    width: 100% !important; /* elementor-sections.css fija width:auto en grupos de botones */
}

.yj-ds .elementor .yj-section .e-con.yj-compare__terms {
    flex-direction: column;
    gap: var(--yj-space-5);
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
}

.yj-ds .elementor .yj-section .yj-compare__terms-title .elementor-heading-title {
    font-size: var(--yj-h4) !important;
    text-align: center;
    color: var(--yj-ink);
}

/* Condición: ícono + valor + leyenda en fila, sin aspecto de tarjeta pesada */
.yj-ds .elementor .yj-section .yj-term .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--yj-space-4);
    padding: var(--yj-space-4) var(--yj-space-5);
    text-align: left;
    background: var(--yj-white);
    border: var(--yj-border);
    border-radius: var(--yj-radius);
}

.yj-ds .elementor .yj-section .yj-term .elementor-icon-box-icon { margin: 0; flex: 0 0 auto; }

.yj-ds .elementor .yj-section .yj-term .elementor-icon {
    font-size: 28px;
}

.yj-ds .elementor .yj-section .yj-term .elementor-icon svg { width: 28px; height: 28px; }

/* Íconos SVG subidos: un solo color de marca (algunos traían relleno propio) */
.yj-ds .elementor .yj-section :is(.yj-step, .yj-term) .elementor-icon svg :is(path, circle, rect, polygon, ellipse, line, polyline):not([fill="none"]) {
    fill: var(--yj-primary) !important;
}

.yj-ds .elementor .yj-section .yj-term .elementor-icon-box-title { margin: 0 0 2px; }

.yj-ds .elementor .yj-section .yj-term .elementor-icon-box-description { margin: 0; }

/* ── Cita ─────────────────────────────────────────────────────────────────── */
.yj-ds .elementor .yj-section .yj-quote blockquote {
    margin: 0;
    padding: 0 0 0 var(--yj-space-5);
    border-left: 2px solid var(--yj-primary);
}

.yj-ds .elementor .yj-section .yj-quote blockquote p {
    margin: 0;
    font-family: var(--yj-font-display);
    font-size: var(--yj-h4);
    font-style: italic;
    line-height: 1.5;
    color: var(--yj-ink);
}

/* ── Banda CTA final ──────────────────────────────────────────────────────── */
.yj-ds .elementor .yj-section .e-con.yj-cta-band {
    flex-direction: column;
    align-items: center;
    gap: var(--yj-space-5);
    padding: var(--yj-space-9) var(--yj-space-7);
    text-align: center;
    background: var(--yj-ink);
    border-radius: var(--yj-radius);
}

.yj-ds .elementor .yj-section .yj-cta-band__title .elementor-heading-title {
    color: var(--yj-white) !important;
    text-wrap: balance;
}

.yj-ds .elementor .yj-section .yj-cta-band__text { max-width: 620px; }

.yj-ds .elementor .yj-section .yj-cta-band__text p {
    margin: 0 0 var(--yj-space-3);
    font-size: var(--yj-text-lg);
    line-height: var(--yj-leading);
    color: color-mix(in srgb, var(--yj-white) 82%, transparent);
}

.yj-ds .elementor .yj-section .yj-cta-band__text p:last-child { margin-bottom: 0; }

.yj-ds .elementor .yj-section .yj-cta-band .yj-btn--primary .elementor-button {
    background: var(--yj-white) !important;
    border-color: var(--yj-white) !important;
    color: var(--yj-ink) !important;
}

.yj-ds .elementor .yj-section .yj-cta-band .yj-btn--primary .elementor-button:hover,
.yj-ds .elementor .yj-section .yj-cta-band .yj-btn--primary .elementor-button:focus-visible {
    background: var(--yj-blush) !important;
    border-color: var(--yj-blush) !important;
}

.yj-ds .elementor .yj-section .yj-cta-band__perks .elementor-icon-list-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--yj-space-3) var(--yj-space-6);
    padding-top: var(--yj-space-5);
    border-top: 1px solid color-mix(in srgb, var(--yj-white) 16%, transparent);
}

.yj-ds .elementor .yj-section .yj-cta-band__perks .elementor-icon-list-text {
    font-size: var(--yj-text-sm);
    color: var(--yj-white);
}

.yj-ds .elementor .yj-section .yj-cta-band__perks .elementor-icon-list-icon i,
.yj-ds .elementor .yj-section .yj-cta-band__perks .elementor-icon-list-icon svg {
    color: var(--yj-accent);
    fill: var(--yj-accent);
}

/* Texto de condiciones bajo su título, centrado como él */
.yj-ds .elementor .yj-section .yj-compare__terms > .yj-section__intro {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

/* ── Nota informativa (línea sutil bajo una cabecera) ─────────────────────── */
.yj-ds .elementor .yj-section .yj-notice {
    width: auto;
    max-width: 680px;
    margin-inline: auto;
}

.yj-ds .elementor .yj-section .yj-notice p {
    margin: 0;
    padding: var(--yj-space-3) var(--yj-space-5);
    font-size: var(--yj-text-sm);
    line-height: var(--yj-leading);
    text-align: center;
    color: var(--yj-text);
    background: var(--yj-primary-soft);
    border-radius: var(--yj-radius);
}

/* ── Beneficio: icon-box en tarjeta plana (ícono arriba a la izquierda) ───── */
.yj-ds .elementor .yj-section .yj-benefit .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--yj-space-4);
    height: 100%;
    padding: var(--yj-space-6);
    text-align: left;
    background: var(--yj-white);
    border: var(--yj-border);
    border-radius: var(--yj-radius);
}

.yj-ds .elementor .yj-section .yj-benefit .elementor-widget-container { height: 100%; }

.yj-ds .elementor .yj-section .yj-benefit .elementor-icon-box-icon { margin: 0; }

.yj-ds .elementor .yj-section .yj-benefit .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 26px;
    border-radius: var(--yj-radius-pill);
    background: var(--yj-blush);
}

.yj-ds .elementor .yj-section .yj-benefit .elementor-icon svg { width: 26px; height: 26px; }

.yj-ds .elementor .yj-section .yj-benefit .elementor-icon svg :is(path, circle, rect, polygon, ellipse, line, polyline):not([fill="none"]) {
    fill: var(--yj-primary) !important;
}

.yj-ds .elementor .yj-section .yj-benefit .elementor-icon-box-title { margin: 0 0 var(--yj-space-2); }

.yj-ds .elementor .yj-section .yj-benefit .elementor-icon-box-description { margin: 0; color: var(--yj-muted); }

/* ── Tarjeta con título y nota al pie (p. ej. documentos requeridos) ──────── */
.yj-ds .elementor .yj-section .yj-card__title .elementor-heading-title {
    font-size: var(--yj-h4) !important;
    color: var(--yj-ink);
}

.yj-ds .elementor .yj-section .yj-card__note p {
    margin: 0;
    padding-top: var(--yj-space-4);
    font-size: var(--yj-text-sm);
    line-height: var(--yj-leading);
    color: var(--yj-muted);
    border-top: var(--yj-border);
}

/* ── Banda CTA: secundario y enlace sobre fondo tinta ─────────────────────── */
.yj-ds .elementor .yj-section .yj-cta-band .yj-btn--secondary .elementor-button {
    color: var(--yj-white) !important;
    border-color: color-mix(in srgb, var(--yj-white) 60%, transparent) !important;
}

.yj-ds .elementor .yj-section .yj-cta-band .yj-btn--secondary .elementor-button:hover,
.yj-ds .elementor .yj-section .yj-cta-band .yj-btn--secondary .elementor-button:focus-visible {
    color: var(--yj-ink) !important;
    background: var(--yj-white) !important;
    border-color: var(--yj-white) !important;
}

.yj-ds .elementor .yj-section .yj-cta-band .yj-btn--link .elementor-button,
.yj-ds .elementor .yj-section .yj-cta-band .yj-btn--link .elementor-button:hover {
    color: var(--yj-white) !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .yj-ds .elementor .yj-section .e-con.yj-split { gap: var(--yj-space-7); }
}

@media (max-width: 992px) {
    .yj-ds .elementor .yj-section .yj-grid-4:not(.yj-trust__list) { --yj-cols: 2; }
    .yj-ds .elementor .yj-section .e-con.yj-split,
    .yj-ds .elementor .yj-section .e-con.yj-split--media { grid-template-columns: minmax(0, 1fr); }
    .yj-ds .elementor .yj-section .yj-split__media img { aspect-ratio: 16 / 10; }
    .yj-ds .elementor .yj-section .yj-steps { row-gap: var(--yj-space-7); }
}

@media (max-width: 768px) {
    .yj-ds .elementor .e-con.yj-section { padding-inline: var(--yj-space-4); }
    .yj-ds .elementor .yj-section > .e-con-inner { gap: var(--yj-space-6); }
    .yj-ds .elementor .yj-section .yj-grid-2,
    .yj-ds .elementor .yj-section .yj-grid-3 { --yj-cols: 1; }
    .yj-ds .elementor .yj-section .e-con.yj-compare { grid-template-columns: minmax(0, 1fr); }
    .yj-ds .elementor .yj-trust .yj-grid-4 { --yj-cols: 2; row-gap: var(--yj-space-4); }
    .yj-ds .elementor .yj-trust .yj-trust__item:nth-child(odd) { border-left: 0; }
    .yj-ds .elementor .yj-section .yj-split__aside { padding: var(--yj-space-5); }
    .yj-ds .elementor .yj-section .e-con.yj-cta-band { padding: var(--yj-space-8) var(--yj-space-5); }
    .yj-ds .elementor .yj-section .yj-section__intro,
    .yj-ds .elementor .yj-section .yj-section__intro p,
    .yj-ds .elementor .yj-section .yj-cta-band__text p { font-size: var(--yj-text-md); }
}

@media (max-width: 480px) {
    .yj-ds .elementor .yj-section .yj-steps { --yj-cols: 1; }
    .yj-ds .elementor .yj-section .yj-actions:not(.yj-actions--start) > .elementor-widget:not(.yj-btn--link),
    .yj-ds .elementor .yj-section .yj-actions:not(.yj-actions--start) .elementor-button { width: 100% !important; }
    .yj-ds .elementor .yj-section .yj-cta-band__perks .elementor-icon-list-items {
        flex-direction: column;
        align-items: center;
    }
}

/* Móvil: pasos y beneficios a una columna (la regla de grid-4 a 2 columnas es más específica) */
@media (max-width: 480px) {
    .yj-ds .elementor .yj-section .yj-grid-4.yj-steps,
    .yj-ds .elementor .yj-section .yj-grid-4:has(> .yj-benefit) { --yj-cols: 1; }
    .yj-ds .elementor .yj-section .yj-benefit .elementor-icon-box-wrapper {
        flex-direction: row;
        padding: var(--yj-space-5);
    }
}