/* Anexo de la web de Saul sobre Orisa: solo ajustes, se carga despues de main.css. */

.saul-header-logo { height: 40px; width: auto; display: block; }

.saul-hero-retrato { width: 100%; height: auto; }

.saul-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EFEFEF' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.saul-select:invalid { color: var(--at-neutral-500); }
.saul-select option { background: var(--at-neutral-0); color: var(--at-neutral-900); }

.saul-form-msg { margin-top: 16px; font-weight: 500; }
.saul-form-msg--ok { color: var(--at-theme-primary); }
.saul-form-msg--error { color: var(--at-neutral-900); }

.saul-footer-mascota { width: 160px; height: auto; margin: 0 24px 16px; }

/* Un acento en un sitio: en las tarjetas de servicios el naranja no va de adorno. */
#servicios .card-home-12-service__num-line { background: var(--at-neutral-500); }
#servicios .card-home-12-service__num { color: var(--at-neutral-900); }

/* Los medios no se recortan: alto natural, sin object-fit: cover. */
#proceso .sec-6-home-7__card-media { height: auto; aspect-ratio: auto; }
#proceso .sec-6-home-7__card-media img { position: static; width: 100%; height: auto; object-fit: initial; display: block; }
#contacto .sec-2-home-15__media-1 { height: auto; aspect-ratio: auto; }
#contacto .sec-2-home-15__media-1-img { position: static; width: 100%; height: auto; object-fit: initial; }

/* FAQ: el titulo acompana al acordeon en vez de dejar hueco. */
@media (min-width: 992px) {
    /* (FAQ en una columna desde 2026-10-04: ya no hay columna lateral fija) */
}

/* Espacios: 100 px por seccion en escritorio, sin colchones del template. */
#proceso .sec-6-home-7__cards { padding-bottom: 100px; }
#faq { padding-top: 0 !important; }
#faq > .container { padding-top: 100px !important; }
#faq .accordion { padding-top: 0; }
#faq { padding-bottom: 0 !important; }
#faq > .container { padding-bottom: 100px !important; }

/* Botones en espanol: sin mayuscula en cada palabra ("Cotizar mi web", no "Cotizar Mi Web"). */
#inicio .at-btn, #problema .at-btn, #contacto .at-btn, .saul-header-cta { text-transform: none; }

/* Movil: 48 px por seccion, no los 100 de escritorio. */
@media (max-width: 767px) {
    #problema { padding-top: 48px !important; padding-bottom: 48px !important; }
    #servicios { padding-top: 48px; padding-bottom: 48px; }
    #proceso .sec-6-home-7__header { padding-top: 48px !important; padding-bottom: 24px !important; }
    #proceso .sec-6-home-7__cards { padding-bottom: 48px; }
    #faq > .container { padding-top: 48px !important; }
    #contacto { padding-top: 48px !important; padding-bottom: 48px !important; }
    #faq > .container { padding-bottom: 48px !important; }
    #portfolio, #por-que, #paquetes, #testimonios { padding-top: 48px !important; padding-bottom: 48px !important; }
    #cifras section { padding-top: 48px !important; padding-bottom: 48px !important; }
    #problema .mt-40 { margin-top: 24px !important; }
    #problema .mb-50 { margin-bottom: 24px !important; }
}

/* Cero superficies claras: en oscuro el chip del tema se volvia blanco. */
#proceso .sec-6-home-7__chip { background: var(--at-neutral-50); color: var(--at-neutral-900); border: 1px solid var(--at-neutral-100); }

/* Huecos de pruebas reales: solo se ven en local hasta tener datos. */
.saul-placeholder { outline: 2px dashed var(--at-theme-primary); outline-offset: 8px; opacity: .7; }
.saul-placeholder--box { min-height: 280px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; border-radius: 8px; background: var(--at-neutral-50); color: var(--at-neutral-900); }
.saul-form-alt { margin-top: 16px; color: var(--at-neutral-500); }
.saul-form-alt a { color: var(--at-neutral-900); text-decoration: underline; }

/* Un acento en un sitio: la insignia del paquete va en neutro, el naranja queda para los botones. */
#paquetes .saul-badge { background: var(--at-neutral-100); color: var(--at-neutral-900); }

/* Contacto: la foto acompana al formulario en vez de dejar hueco debajo. */
@media (min-width: 992px) {
    #contacto .row.gx-4 > .col-xxl-5 { position: sticky; top: 120px; align-self: flex-start; }
}

/* Cursor propio: flecha + pastilla "Tu" en naranja de marca. */
.saul-cursor-on, .saul-cursor-on * { cursor: none !important; }
.saul-cursor-on input, .saul-cursor-on textarea, .saul-cursor-on select { cursor: text !important; }
.saul-cursor { position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.saul-cursor.is-visible { opacity: 1; }
.saul-cursor.is-oculto { opacity: 0; }
.saul-cursor__flecha { display: block; transition: transform .2s ease; }
.saul-cursor__pastilla { position: absolute; top: 20px; left: 20px; padding: 6px 14px; border-radius: 50px; background: var(--at-theme-primary); color: #0C0C0C; font-family: var(--at-ff-body); font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; transition: transform .2s ease; }
.saul-cursor.is-link .saul-cursor__flecha { transform: scale(.8); }
.saul-cursor.is-link .saul-cursor__pastilla { transform: scale(1.1); }

/* Bento "por que conmigo": la foto grande a su alto natural, sin recorte. */
#por-que .sec-2-home-5__card--hero { height: auto; min-height: 0; aspect-ratio: auto; }
#por-que .sec-2-home-5__hero-img { position: static; width: 100%; height: auto; object-fit: initial; display: block; }
#por-que .saul-porque-cta { margin-top: 32px; text-transform: none; }

/* Calculadora (tarjeta pricing-5): campos numericos con el estilo de la tarjeta. */
#calculadora .saul-calc-campos { display: flex; flex-direction: column; gap: 16px; }
#calculadora .saul-calc-campo { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#calculadora .saul-calc-campo > span:first-child { color: inherit; opacity: .8; }
#calculadora .saul-calc-input { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid currentColor; padding: 4px 0; }
#calculadora .saul-calc-input i { font-style: normal; opacity: .6; }
#calculadora .saul-calc-input input { width: 110px; background: transparent; border: 0; color: inherit; font-size: 20px; font-weight: 600; text-align: right; outline: none; -moz-appearance: textfield; }
#calculadora .saul-calc-input input::-webkit-outer-spin-button, #calculadora .saul-calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#calculadora .saul-calc-input:focus-within { border-bottom-color: var(--at-theme-primary); }

/* Barra fija en movil. */
.saul-barra-movil { display: none; }
@media (max-width: 767px) {
    .saul-barra-movil { display: flex; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 9990; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 50px; background: var(--at-neutral-50); border: 1px solid var(--at-neutral-100); transform: translateY(140%); transition: transform .3s ease; }
    .saul-barra-movil.is-visible { transform: translateY(0); }
    .saul-barra-movil__texto { font-size: 12px; color: var(--at-neutral-900); }
    .saul-barra-movil__btn { text-transform: none; white-space: nowrap; padding: 12px 20px; }
}
#calculadora .saul-calc-cta { text-transform: none; }
@media (max-width: 767px) {
    #calculadora { padding-top: 48px !important; padding-bottom: 48px !important; }
}
#calculadora .pricing-5-note { flex: 1 1 320px; margin: 0; }

/* Portfolio (tarjetas apiladas): placeholder con el alto de una tarjeta real. */
#portfolio .saul-placeholder--card { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--at-neutral-50); color: var(--at-neutral-900); text-align: center; padding: 24px; }
.saul-btn-es { text-transform: none; }
#portfolio .saul-placeholder--card { opacity: 1; }
#paquetes .card-home-12-price__plan { text-transform: none; }

/* Hero B: la foto ocupa toda la mitad izquierda (Saul, 2026-10-03), sin marco naranja alrededor. */
@media (min-width: 992px) {
    #inicio .sec-1-home-7__img-wrap { max-width: 50%; margin-top: 0; }
    #inicio .sec-1-home-7__img-wrap > .anim-zoomin { height: 100%; }
}

/* Hero B: el texto llena la mitad derecha y el titulo cabe en 2-3 lineas (Saul, 2026-10-03). */
@media (min-width: 992px) {
    #inicio .sec-1-home-7__content { max-width: none; padding: 30px 80px 60px 80px; }
    #inicio .sec-1-home-7__headline { font-size: clamp(56px, 4.6vw, 96px); text-wrap: balance; }
    #inicio .sec-1-home-7__desc { max-width: 620px; }
}

/* Hero B: "Disponible para proyectos" encima de las etiquetas, no cruzando la cara (2026-10-04). */
@media (min-width: 992px) {
    #inicio .sec-1-home-7__coords { top: auto; left: 108px; bottom: 190px; }
}
/* Hero B en movil: la plantilla deja la foto al 45 % de ancho. Foto a todo el ancho, entera (8:9). */
@media (max-width: 991.98px) {
    #inicio .sec-1-home-7__img-wrap { max-width: 100%; margin-top: 0; height: auto; aspect-ratio: 1182 / 1330; }
    #inicio .sec-1-home-7__img-wrap > .anim-zoomin, #inicio .sec-1-home-7__img { width: 100%; height: 100%; }
    #inicio .sec-1-home-7__img { object-fit: cover; }
}
@media (max-width: 991.98px) {
    #inicio .sec-1-home-7__coords { position: static; margin: 24px 0 12px; }
    #inicio .sec-1-home-7__tags { position: static; }
}
@media (max-width: 991.98px) {
    /* el bloque naranja de la plantilla cortaba las etiquetas por la mitad */
    #inicio .sec-1-home-7__bg-left { background-color: rgb(128, 11, 1); }
}
/* Hero en movil: titulo y boton primero (que se vean sin bajar), luego la foto y las etiquetas. */
@media (max-width: 991.98px) {
    #inicio { display: flex; flex-direction: column; padding-bottom: 32px; }
    #inicio > .container-fluid, #inicio > .container-fluid > .row { display: contents; }
    #inicio .sec-1-home-7__right { order: 1; }
    #inicio .sec-1-home-7__img-wrap { order: 2; }
    #inicio .sec-1-home-7__left { order: 3; min-height: 0; padding: 0 24px; }
    #inicio .sec-1-home-7__content { padding-bottom: 32px; }
}

/* Cifras (index-13 S2, solo la fila): sin el padding de arriba de la seccion completa del tema. */
#cifras { padding-top: 0; }
#cifras .sec-2-home-13__stats { border-top: 0; padding: 100px 0; }
@media (max-width: 767.98px) {
    #cifras .sec-2-home-13__stats { padding: 48px 0; }
}
@media (max-width: 767.98px) {
    /* 2 x 2 en movil: en una columna eran 770 px de cifras */
    #cifras .sec-2-home-13__stats { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
    #cifras .sec-2-home-13__stat { padding: 0; gap: 12px; }
    #cifras .sec-2-home-13__stat-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Problema B (index-7 S2): marco con la proporcion de cada foto (en el TSX), no el 270x329 / 16:10 fijo. */
#problema-b .sec-2-home-7__img-wrap { background: none; }
#problema-b .sec-2-home-7__img-wrap .thumb { height: 100%; }
/* en modo oscuro neutral-950 es casi blanco: el texto del boton blanco no se veia */
#problema-b .at-btn, #problema-b .at-btn span, #problema-b .at-btn i { color: #0c0c0c !important; }
#problema-b .sec-2-home-7__img-wrap img { height: 120%; }

/* Problema B en movil (Saul: "es muy larga", 2026-10-04): foto + punto seguidos y las 4 cifras en 2 x 2 al final. */
@media (max-width: 991.98px) {
    #problema-b .sec-2-home-7__intro { padding-bottom: 32px !important; }
    #problema-b .sec-2-home-7__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-bottom: 48px; }
    #problema-b .sec-2-home-7__row { display: contents; }
    #problema-b .sec-2-home-7__cell { padding: 0 !important; border: 0 !important; }
    #problema-b .sec-2-home-7__cell--img, #problema-b .sec-2-home-7__cell--feature { grid-column: 1 / -1; }
    #problema-b .sec-2-home-7__cell--feature { margin-bottom: 16px; }
    #problema-b .sec-2-home-7__cell--feature .ps-4 { padding-left: 0 !important; }
    #problema-b .sec-2-home-7__img-wrap { aspect-ratio: 16 / 10 !important; margin-left: 0 !important; }
    #problema-b .sec-2-home-7__row:nth-child(1) > .sec-2-home-7__cell--img { order: 1; }
    #problema-b .sec-2-home-7__row:nth-child(1) > .sec-2-home-7__cell--feature { order: 2; }
    #problema-b .sec-2-home-7__row:nth-child(2) > .sec-2-home-7__cell--img { order: 3; }
    #problema-b .sec-2-home-7__row:nth-child(2) > .sec-2-home-7__cell--feature { order: 4; }
    #problema-b .sec-2-home-7__row:nth-child(3) > .sec-2-home-7__cell--img { order: 5; }
    #problema-b .sec-2-home-7__row:nth-child(3) > .sec-2-home-7__cell--feature { order: 6; }
    #problema-b .sec-2-home-7__cell--stat { order: 7; }
    #problema-b .sec-2-home-7__stat-value { font-size: 48px; margin-bottom: 4px !important; }
}
/* Nota y boton de la calculadora alineados al ancho de la tarjeta, pegados a ella (Saul, 2026-10-04). */
#calculadora .pricing-5-hero__footer { max-width: 920px; margin: 20px auto 0; padding: 0 4px; }
@media (max-width: 767.98px) {
    /* en movil el pie va en columna: el flex-basis de 320 px se volvia alto */
    #calculadora .pricing-5-note { flex: 0 0 auto; }
}
/* "(01) HAZ LA CUENTA" centrado como el resto de la cabecera (Saul, 2026-10-04) */
#calculadora .pricing-5-kicker { justify-content: center; text-align: center; margin-left: auto; margin-right: auto; }

/* Carruseles de texto: la plantilla deja overflow-y en auto y salia una barra de scroll mini (Saul, 2026-10-04). */
.rfm-marquee-container, .carouselTicker__marquee { overflow: hidden !important; }
/* Sello giratorio del hero (sustituye la estrella del tema) */
#inicio .saul-sello, #inicio .saul-sello svg { width: 100%; height: 100%; display: block; }

/* Simbolo del hero: inclinado al otro lado (-22 en vez de 22) y el giro con el scroll suavizado (Saul, 2026-10-04). */
#inicio .sec-1-home-7__star { transform: translate(-50%, -50%) rotate(-22deg); }
#inicio .saul-sello { transition: transform .9s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
/* Por que yo: sin huecos (Saul, 2026-10-04). La columna de la derecha llega hasta abajo como las otras. */
@media (min-width: 1400px) {
    #por-que .sec-2-home-5__col--three { display: flex; flex-direction: column; height: 100%; }
    #por-que .sec-2-home-5__col--three > .row { flex: 1; }
}
#por-que .sec-2-home-5__card--list { padding-top: 20px !important; padding-bottom: 20px !important; }
#por-que .saul-porque-cta { margin-top: 24px; }
#por-que .row.pt-70 { padding-top: 40px !important; }
/* la tarjeta 3D de "1 persona" va debajo del texto, no encima */
/* (sustituido por el bloque "1 persona" en dos columnas, mas abajo) */

/* Paquetes: precio normal tachado, cupos de la promo y "ver todo" (Saul, 2026-10-04) */
#paquetes .card-home-12-price__price { flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
#paquetes .saul-precio-antes { font-size: 18px; font-weight: 500; opacity: .55; text-decoration-thickness: 2px; }
#paquetes .saul-ver-mas { margin: -12px 0 32px 44px; padding: 0; background: none; border: 0; color: var(--at-theme-primary); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; text-align: left; }
#paquetes .saul-cupos { display: flex; gap: 6px; margin: 12px 0 10px; }
#paquetes .saul-cupos__cupo { width: 34px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
#paquetes .saul-cupos__cupo.is-ocupado { background: var(--at-theme-primary); }
#paquetes .sec-5-home-12__tables { align-items: start; } /* al abrir "ver todo" en una tarjeta, las otras no se estiran con hueco */

/* Paquetes (Saul, 2026-10-04): puntos legibles (no gris), mitad de hueco entre precio y boton,
   y la tarjeta principal (tienda) entera en naranja. */
#paquetes .card-home-12-price__feature-text { color: #efefef; }
#paquetes .card-home-12-price__top { min-height: 0; }
#paquetes .card-home-12-price__cta { margin-top: 52px; }
#paquetes .card-home-12-price.is-popular { background-color: #f0460e; }
#paquetes .card-home-12-price.is-popular .card-home-12-price__top { background-color: rgba(0, 0, 0, .14); } /* misma caja interior que las otras tarjetas, en naranja mas oscuro */
#paquetes .card-home-12-price.is-popular .card-home-12-price__plan,
#paquetes .card-home-12-price.is-popular .card-home-12-price__period,
#paquetes .card-home-12-price.is-popular .card-home-12-price__amount,
#paquetes .card-home-12-price.is-popular .saul-precio-antes,
#paquetes .card-home-12-price.is-popular .card-home-12-price__feature-text,
#paquetes .card-home-12-price.is-popular .saul-ver-mas { color: #fff; }
#paquetes .card-home-12-price.is-popular .saul-precio-antes { opacity: .7; }
#paquetes .card-home-12-price.is-popular .card-home-12-price__cta { background-color: #0c0c0c; color: #fff; }
#paquetes .card-home-12-price.is-popular .card-home-12-price__feature-icon circle { fill: #fff; }
#paquetes .card-home-12-price.is-popular .card-home-12-price__feature-icon path { stroke: #f0460e; }
#paquetes .card-home-12-price.is-popular .saul-badge { background: #0c0c0c; color: #fff; }
#paquetes .sec-5-home-12__custom-desc { color: #efefef; } /* tampoco en gris */
/* El fondo de puntos del tema era negro sobre fondo oscuro: no se veia. Puntos claros. */
#paquetes .sec-5-home-12__dots { opacity: .22; background-image: radial-gradient(circle, rgba(255, 255, 255, .55) 1.2px, transparent 1.4px), radial-gradient(circle, rgba(255, 255, 255, .55) 1.2px, transparent 1.4px); }

/* Testimonios (index-1 S6): iniciales en lugar de foto y el tipo de negocio en lugar del logo */
#testimonios .saul-testimonio-iniciales { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 12px; background: #f0460e; color: #fff; font-weight: 700; font-size: 28px; letter-spacing: .02em; }
#testimonios .saul-testimonio-negocio { color: #fff; font-weight: 600; font-size: 16px; }
/* FAQ: respuestas legibles, no gris apagado (Saul, 2026-10-04) */
#faq .at-faq-body p { color: #e8e8e8 !important; font-size: 16px; line-height: 1.6; }
#faq .row.g-5 { --bs-gutter-y: 2rem; }
/* Fotos de stock provisionales (2026-10-05) en los huecos de objetos recortados: esquinas redondeadas */
#por-que img[src*="porque-bolsa-stock"], #por-que img[src*="porque-tarjeta-stock"] { border-radius: 14px 0 14px 0; display: block; }

/* Por que yo, tarjeta "1 persona" sin espacio muerto (Saul, 2026-10-05): texto a la izquierda
   (cifra arriba, etapas en 2 x 2 debajo) y la foto llenando la columna derecha de arriba abajo. */
#por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child {
    display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 0; padding: 0 !important; overflow: hidden;
}
#por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child > .d-flex {
    flex-direction: column !important; justify-content: center; gap: 18px !important; padding: 28px 24px 28px 32px;
}
#por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child .sec-2-home-5__list--sm {
    display: grid; grid-template-columns: repeat(2, auto); gap: 10px 18px; justify-content: start;
}
#por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child > .p-absolute { position: static !important; height: 100%; }
#por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child > .p-absolute img {
    width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important;
}
@media (max-width: 575.98px) {
    #por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child { grid-template-columns: 1fr; }
    #por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child > .p-absolute { height: 180px; }
}

/* Pie (Footer4 de Orisa): la mascota en el sitio del (R) del tema */
#pie .saul-pie-nombre { display: inline-flex; align-items: flex-start; gap: .12em; }
#pie .saul-pie-mascota { width: .32em; height: auto; margin-top: .08em; }
#pie .saul-pie-label { color: #cfcfcf !important; opacity: 1; }
#pie .at-footer-copyright, #pie .at-footer-copyright-area .at-btn { color: #e8e8e8 !important; opacity: 1 !important; }
#pie .alt-footer-link-item a { color: #e8e8e8 !important; }
#pie .alt-footer-link-item-wrap { margin-left: 0; margin-right: 0; }
#pie .alt-footer-link-item-wrap > * { padding-left: 0; }
@media (max-width: 767px) {
  #pie .saul-pie-nombre { font-size: 18vw; }
  #pie .container > .row { padding-bottom: 8px !important; margin-bottom: 8px !important; }
  #pie .alt-footer-link-item li:last-child { margin-bottom: 0 !important; }
  #pie .at-footer-copyright-area { padding-top: 28px !important; padding-bottom: 28px !important; }
}
/* pie: gris distinto al fondo de la pagina + reticula de puntos que se desvanece hacia los bordes */
#pie .at-footer-area { background-color: #1c1c1c !important; position: relative; overflow: hidden; isolation: isolate; }
#pie .at-footer-area::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.3) 1.2px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 30%, transparent 100%); }
#pie .at-about-border { border-color: rgba(255,255,255,.14) !important; }
#pie .saul-pie-correo { font-size: clamp(20px, 2.2vw, 32px); word-break: break-all; }
#pie .saul-pie-label { margin-bottom: 12px !important; }
/* hero: saludo, titular largo y frase rotativa (2026-10-05) */
#inicio .saul-hola { font-size: 20px; letter-spacing: .01em; }
#inicio .saul-hero-titular { font-size: clamp(36px, 3.6vw, 64px); line-height: 1; }
@media (min-width: 992px) { #inicio .saul-hero-titular { width: min(42vw, 700px); } }
#inicio .saul-rota { display: grid; }
#inicio .saul-rota > span { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
#inicio .saul-rota > span.is-activa { opacity: 1; transform: none; }
#inicio .saul-rota strong { color: #fff; font-weight: 800; }
#inicio .saul-cta-nota { font-size: 14px; color: #f3f3f3 !important; }
#inicio .saul-hero-titular { margin-bottom: 28px !important; }
#inicio .sec-1-home-7__desc { font-size: 20px; line-height: 1.4; }
/* flecha del titular: el titular nuevo es mas largo; la flecha va al final, fuera del texto, y se oculta donde no cabe */
#inicio .sec-1-home-7__headline-arrow-cover { top: auto !important; right: auto !important; left: calc(100% + 12px) !important; bottom: 36px !important; }
@media (min-width: 1200px) { #inicio .saul-hero-titular { width: min(38vw, 640px); } }
@media (max-width: 1199.98px) { #inicio .sec-1-home-7__headline-arrow-cover { display: none !important; } }
/* calculadora: aviso pegado a la cifra para que nadie la lea como precio (2026-10-05) */
.saul-calc-aviso { display: inline-block; margin: 0 0 18px; padding: 8px 14px; border: 1px solid #f0460e; border-radius: 999px; background: rgba(240,70,14,.12); color: #fff !important; font-size: 14px; line-height: 1.4; }
.saul-calc-aviso strong { color: #ff7a45; font-weight: 700; }
@media (max-width: 767px) { .saul-calc-aviso { border-radius: 14px; } }
#calculadora .pricing-5-card__top, .pricing-5-card__top:has(+ .pricing-5-card__price .saul-calc-aviso) { margin-bottom: 18px !important; }
#servicios .card-home-12-service__tag { color: #e8e8e8 !important; border-color: rgba(255,255,255,.28) !important; }
/* por que yo: la foto pequena llena la tarjeta; sobra 40 px arriba para que el fade (sube 40 px) nunca deje hueco */
#porque .sec-2-home-5__card--img, .sec-2-home-5__card--img { position: relative; overflow: hidden; min-height: 260px; }
.sec-2-home-5__card--img > .img { position: absolute; inset: 0; overflow: hidden; height: auto !important; }
.sec-2-home-5__card--img .sec-2-home-5__thumb-img { width: 100%; height: calc(100% + 40px); margin-top: -40px; object-fit: cover; max-width: none; }
.process-card__desc { color: #e8e8e8 !important; font-size: 18px; line-height: 1.6; }
.process-card__desc { -webkit-line-clamp: unset !important; display: block !important; max-height: none !important; height: auto !important; overflow: visible !important; }
/* Sistema de Ventas 24/7 (2026-10-06) */
#servicios .saul-sistema-sub { max-width: 640px; margin: 18px 0 0; color: #e8e8e8; font-size: 18px; line-height: 1.5; }
#servicios .saul-servicio-desc { margin: -6px 0 18px; color: #e8e8e8; font-size: 16px; line-height: 1.45; }
/* modulos extra bajo los planes */
.saul-extras { margin-top: 32px; padding: 22px 26px; border: 1px dashed rgba(0,0,0,.25); border-radius: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.saul-extras__titulo { font-weight: 700; font-size: 18px; color: #111; }
.saul-extras__titulo span { font-weight: 500; color: #333; }
.saul-extras__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.saul-extras__lista li { padding: 6px 14px; border-radius: 999px; background: #111; color: #fff; font-size: 14px; }
/* franja de logos de clientes */
.saul-logos { padding: 40px 0; }
.saul-logos__titulo { text-align: center; color: #e8e8e8; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px; }
.saul-logos__lista { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 40px; }
.saul-logos__lista img { height: 32px; width: auto; opacity: .9; }
.saul-logos__hueco { padding: 10px 18px; border: 1px dashed #f0460e; border-radius: 10px; color: #e8e8e8; font-size: 12px; }
/* paquetes va sobre fondo oscuro */
.saul-extras { border-color: rgba(255,255,255,.28); }
.saul-extras__titulo { color: #fff; }
.saul-extras__titulo span { color: #e8e8e8; }
.saul-extras__lista li { background: #efefef; color: #111; }
/* modulos extra: mismo ancho que los planes y aire antes de la promo */
.saul-extras { max-width: 1287px; margin: 32px auto 56px; }
#promo .sec-5-home-12__custom-link { color: #ff7a45 !important; }
/* garantia y plan mensual en paquetes (2026-10-06) */
.saul-garantia { max-width: 1287px; margin: 32px auto 0; padding: 16px 22px; border-radius: 14px; background: rgba(240,70,14,.12); border: 1px solid #f0460e; color: #fff; font-size: 16px; line-height: 1.5; }
.saul-garantia strong { color: #ff7a45; }
.saul-mensual { margin-bottom: 0 !important; margin-top: 16px !important; }
#extras { margin-top: 16px !important; }
.saul-garantia p + p { margin-top: 6px; }
/* movil: las etiquetas de plan mensual y modulos extra en rejilla de 2, sin huecos de envoltura */
@media (max-width: 767px) {
  .saul-extras { padding: 18px 16px; }
  .saul-extras__titulo { width: 100%; }
  .saul-extras__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .saul-extras__lista li { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 8px 10px; border-radius: 12px; font-size: 14px; line-height: 1.25; }
}
/* software a medida: franja corta bajo el plan mensual */
.saul-medida { max-width: 1287px; margin: 16px auto 56px; padding: 18px 24px; border-radius: 18px; border: 1px solid rgba(255,255,255,.28); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: #e8e8e8; font-size: 16px; }
.saul-medida strong { color: #fff; }
.saul-medida__link { padding: 10px 20px; border-radius: 999px; background: #fff; color: #111 !important; font-weight: 600; white-space: nowrap; }
.saul-mensual { margin-bottom: 0 !important; }
/* promo: una sola franja horizontal, mismo ancho que los demas bloques (2026-10-07) */
#promo { max-width: 1287px !important; width: 100%; margin: 16px auto 0 !important; padding: 18px 24px !important; display: flex !important; align-items: center !important; gap: 16px !important; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; text-align: left !important; }
#promo .sec-5-home-12__custom-text { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; flex: 1; }
#promo .sec-5-home-12__custom-title { font-size: 20px !important; line-height: 1.3; white-space: nowrap; }
#promo .saul-cupos { margin: 0 !important; }
#promo .sec-5-home-12__custom-desc { font-size: 16px !important; margin: 0 !important; }
@media (max-width: 767px) {
  #promo { align-items: flex-start !important; padding: 16px !important; }
  #promo .sec-5-home-12__custom-title { white-space: normal; font-size: 18px !important; }
  #promo .sec-5-home-12__custom-text { gap: 10px; }
}
#promo .sec-5-home-12__custom-text { flex-direction: row !important; justify-content: space-between !important; text-align: left !important; }
@media (min-width: 1200px) { #promo .sec-5-home-12__custom-text { flex-wrap: nowrap; } }
@media (max-width: 1199.98px) { #promo .sec-5-home-12__custom-text { justify-content: flex-start !important; } }
/* promo: vuelve al estilo de la plantilla (sin recuadro); solo se queda en una fila para ahorrar alto */
#promo { border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: none !important; width: auto; justify-content: center; }
#promo .sec-5-home-12__custom-text { flex: 0 1 auto; }
@media (min-width: 1200px) { #promo .sec-5-home-12__custom-text { justify-content: center !important; } }
.testimonial-content-author-position { color: #cfcfcf !important; }
#contacto .sec-2-home-15__feature, #contacto .sec-2-home-15__feature span { color: #e8e8e8 !important; opacity: 1 !important; }
/* Hero en movil (2026-10-07): "Disponible" y las etiquetas van ENCIMA de la parte baja de la foto
   (elementos de la web, no texto pegado en la imagen), con un degradado para que se lean. La foto no
   se recorta; solo se ahorra el alto que ocupaban debajo. */
@media (max-width: 991.98px) {
    #inicio .saul-cta-nota { margin-bottom: 24px !important; }
    #inicio .sec-1-home-7__content { padding-bottom: 24px; }
    #inicio .sec-1-home-7__img-wrap { position: relative; z-index: 1; }
    #inicio .sec-1-home-7__left { position: relative; z-index: 2; margin-top: var(--saul-sobre, -190px); padding: 56px 16px 16px !important; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,0) 100%); }
    #inicio .sec-1-home-7__coords { margin: 0 0 12px; }
    #inicio .sec-1-home-7__tag { background: rgba(0,0,0,.35); backdrop-filter: blur(4px); }
    #inicio { padding-bottom: 0; }
}
@media (max-width: 991.98px) {
    /* se apoya en el borde de abajo del hero (la foto es lo ultimo en el flujo), sin medidas fijas */
    #inicio { position: relative; }
    #inicio .sec-1-home-7__left { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0; padding: 40px 16px 16px !important; }
    #inicio .sec-1-home-7__tags { gap: 6px !important; }
    #inicio .sec-1-home-7__tag { font-size: 14px; padding: 6px 12px; }
}
/* Hero en movil centrado (2026-10-07) */
@media (max-width: 991.98px) {
    #inicio .sec-1-home-7__content { text-align: center; }
    #inicio .sec-1-home-7__headline-wrap { display: block; }
    #inicio .saul-hero-titular { margin-left: auto; margin-right: auto; }
    #inicio .saul-rota > span { justify-self: center; }
    #inicio .sec-1-home-7__cta { justify-content: center; }
    #inicio .sec-1-home-7__tags { justify-content: center; }
}
/* Hero en movil: el fondo del bloque de texto termina en el color del borde de arriba de la foto
   (rgb 222,47,0, medido en hero-b.webp), asi no se ve el corte. La foto no se toca. */
@media (max-width: 991.98px) {
    #inicio .sec-1-home-7__right { background: linear-gradient(to bottom, rgba(128, 11, 1, 0) 0%, rgba(128, 11, 1, 0) 82%, rgb(222, 47, 0) 100%); }
}
/* Hero en movil: "Disponible para proyectos" (con su animacion) vuelve, encima de las etiquetas */
@media (max-width: 991.98px) {
    #inicio .sec-1-home-7__coords { display: flex !important; justify-content: center; margin: 0 0 10px; }
}
/* ===== Ajustes solo para movil (2026-10-07). La version de escritorio no se toca. ===== */
@media (max-width: 767.98px) {
    /* Por que yo: la foto y la cita, lado a lado en vez de apiladas */
    #por-que .sec-2-home-5__col--three > .row.g-2 > .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    #por-que .sec-2-home-5__card--img { min-height: 220px; }
    #por-que .sec-2-home-5__card--quote { padding: 20px 16px !important; height: 100%; display: flex; flex-direction: column; justify-content: center; }
    #por-que .sec-2-home-5__card--quote p { font-size: 16px !important; line-height: 1.4; }
    /* Servicios: tarjetas mas compactas */
    #servicios .card-home-12-service { min-height: 0 !important; padding: 16px !important; gap: 10px !important; }
    #servicios .saul-servicio-desc { margin: -4px 0 8px; font-size: 16px; }
    #servicios .card-home-12-service__tag { font-size: 12px; padding: 4px 10px; }
    /* Paquetes: el plan principal (tienda) primero; fondo distinto al de Proceso y FAQ */
    #paquetes .sec-5-home-12__tables > .is-popular { order: -1; }
    #paquetes { background-color: #0c0c0c !important; }
    /* Calculadora: los botones de % como el resto de botones */
    #calculadora .pricing-5-toggle__btn { text-transform: none !important; font-weight: 600 !important; }
    /* Contacto: menos aire entre el titulo y la foto */
    #contacto .row.mb-60 { margin-bottom: 24px !important; }
}
/* Portfolio en movil: tarjeta alta como la de la plantilla (index-15), no apaisada */
@media (max-width: 767.98px) {
    #portfolio .saul-placeholder--card { aspect-ratio: 4 / 5; align-items: center; }
}
/* Servicios en movil: dos carruseles; las tarjetas iguales de alto dentro de cada fila */
.saul-servicios-filas { display: grid; gap: 12px; }
.saul-servicios-slider { overflow: hidden; }
.saul-servicios-slider .swiper-slide { height: auto; }
.saul-servicios-slider .card-home-12-service { height: 100%; }
.saul-servicios-filas { grid-template-columns: minmax(0, 1fr); width: 100%; }
.saul-servicios-filas > * { min-width: 0; width: 100%; }
/* Servicios en movil: cintas infinitas (sustituyen al carrusel) */
.saul-servicios-cinta { overflow: hidden; }
.saul-servicios-cinta .rfm-child { display: flex; align-items: stretch; height: 100%; }
.saul-servicios-cinta__item { width: 300px; margin-right: 10px; display: flex; }
.saul-servicios-cinta__item .card-home-12-service { width: 100%; }
.saul-servicios-cinta .rfm-initial-child-container, .saul-servicios-cinta .rfm-marquee { align-items: stretch; }
/* cintas de servicios: tarjetas mas chicas (Saul: "es mas grande que el original") */
.saul-servicios-cinta__item { width: 250px; margin-right: 8px; }
#servicios .saul-servicios-cinta .card-home-12-service { padding: 14px !important; gap: 8px !important; border-radius: 14px; }
.saul-servicios-cinta .card-home-12-service__top { min-height: 0; }
.saul-servicios-cinta .card-home-12-service__icon { width: 30px; height: 30px; }
/* cinta propia arrastrable */
.saul-servicios-cinta { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.saul-servicios-cinta:active { cursor: grabbing; }
.saul-servicios-cinta__pista { display: flex; width: max-content; will-change: transform; }
.saul-servicios-cinta__item { flex: 0 0 auto; }
.saul-servicios-cinta img, .saul-servicios-cinta a { -webkit-user-drag: none; }
/* cintas: cada tarjeta ocupa el 98 % del ancho visible (Saul, 2026-10-07) */
.saul-servicios-cinta__item { width: calc((100vw - 32px) * .98); }
/* Etiqueta unica sobre los titulos (2026-10-07) */
.saul-etiqueta { display: inline-flex; margin-bottom: 12px !important; }
.saul-etiqueta-centro { text-align: center; margin-bottom: 8px; }
.sec-3-home-12__header-left .saul-etiqueta, .sec-5-home-12__header .saul-etiqueta { margin-bottom: 12px !important; }
.saul-etiqueta, .saul-etiqueta .text-1, .saul-etiqueta .text-2, .saul-etiqueta i { color: #fff !important; }
#problema-b .saul-etiqueta, #problema-b .saul-etiqueta span, #problema-b .saul-etiqueta i { color: #fff !important; }
/* Por que yo en movil (2026-10-07): menos aire bajo el titulo y la tarjeta "1 persona" con la foto al
   lado (como en escritorio) en vez de debajo; las etapas en una columna para que quepan. */
@media (max-width: 575.98px) {
    #por-que .row.pb-60 { padding-bottom: 24px !important; }
    #por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child { grid-template-columns: minmax(0, 1fr) 38%; }
    #por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child > .d-flex { padding: 20px 14px 20px 18px; gap: 12px !important; }
    #por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child > .p-absolute { height: 100%; }
    #por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child .sec-2-home-5__list--sm { grid-template-columns: 1fr; gap: 6px; }
}
/* "1 persona, todas las etapas" en movil: la cifra y el texto en 2 columnas, el texto en 2 lineas como en PC */
@media (max-width: 575.98px) {
    #por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child > .d-flex > div:first-child { display: flex; align-items: center; gap: 12px; }
    #por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child .sec-2-home-5__stat { margin-bottom: 0 !important; line-height: 1; }
    #por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child > .d-flex > div:first-child br { display: inline !important; }
}
/* "1 persona, todas las etapas": cifra y texto en 2 columnas tambien en escritorio (Saul, 2026-10-07) */
#por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child > .d-flex > div:first-child { display: flex; align-items: center; gap: 16px; }
#por-que .sec-2-home-5__col--three > .sec-2-home-5__card--small:first-child .sec-2-home-5__stat { margin-bottom: 0 !important; line-height: 1; }
/* Paquetes en movil: el fondo de la seccion paso a #0c0c0c (igual que la tarjeta); la tarjeta va un
   tono mas clara para que se vea, como en escritorio pero al reves */
@media (max-width: 767.98px) {
    #paquetes .card-home-12-price:not(.is-popular) { background-color: #161616 !important; }
    #paquetes .card-home-12-price:not(.is-popular) .card-home-12-price__top { background-color: #202020 !important; }
}
/* Testimonios en movil (2026-10-07): menos relleno y las flechas arriba a la derecha, junto al icono,
   en vez de en una fila propia debajo del texto */
@media (max-width: 767.98px) {
    #testimonios .sec-6-home-1 { padding-top: 32px !important; padding-bottom: 32px !important; }
    #testimonios .sec-6-home-1 > .container > .row.mb-50 { position: relative; margin-bottom: 20px !important; }
    #testimonios .sec-6-home-1 > .container > .row.mb-50 > .col-lg-2 { position: absolute; top: 0; right: 0; width: auto; padding: 0; margin: 0 !important; }
    #testimonios .sec-6-home-1 .swiper-button-wrapper button { width: 40px; height: 40px; }
    #testimonios .sec-6-home-1 > .container > .row.mb-50 img.mb-20 { margin-bottom: 14px !important; }
}
@media (max-width: 767.98px) { #testimonios .sec-6-home-1 > .container > .row.mb-50 > .col-lg-2 { top: 16px; right: 8px; } }
/* Testimonios en movil: "Quiero la mia" como insignia en la esquina inferior derecha de las resenas,
   sin fila propia (Saul, 2026-10-07) */
@media (max-width: 767.98px) {
    #testimonios .sec-6-home-1 > .container > .row:last-child { position: relative; }
    #testimonios .sec-6-home-1 .col-12.text-center.pt-50 { position: absolute; right: 4px; bottom: -18px; width: auto; padding: 0 !important; z-index: 5; }
    #testimonios .sec-6-home-1 .col-12.text-center.pt-50 .badge-zoon-in { width: 96px; height: 96px; }
    #testimonios .sec-6-home-1 .col-12.text-center.pt-50 .saul-btn-es { font-size: 12px; line-height: 1.1; }
}
/* "Quiero la mia": insignia abajo a la derecha tambien en escritorio, y 50 % mas abajo (Saul, 2026-10-07) */
#testimonios .sec-6-home-1 > .container > .row:last-child { position: relative; }
#testimonios .sec-6-home-1 .col-12.text-center.pt-50 { position: absolute; right: 4px; bottom: -66px; width: auto; padding: 0 !important; z-index: 5; }
@media (min-width: 768px) {
    #testimonios .sec-6-home-1 .col-12.text-center.pt-50 { right: 16px; bottom: -78px; }
}
@media (max-width: 767.98px) { #testimonios .sec-6-home-1 { padding-bottom: 52px !important; } }