/* ════════════════════════════════════════════════════════════════
   Componentes de conversion COMPARTIDOS (2026-08-06)

   Los usan por igual el home de Odoo y la pagina de SAP: franja de
   prueba social, demo interactivo, plegables, fila de reversion de
   riesgo y cierre. La pagina de SAP tiene su propio CSS base, asi que
   cada var() lleva fallback y ninguna regla depende de style.css.
   ════════════════════════════════════════════════════════════════ */

/* Donde se usa Aski: lo primero que pregunta quien no tiene Android. */
.hero .hero-devices,
.hero-devices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.hero-devices span {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #eaf0fb;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.hero-devices span b { color: var(--gold); font-weight: 800; }

/* Nota bajo los CTA del hero: como se contrata y donde se usa. */
.hero .hero-note,
.hero-note {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    max-width: 560px;
}
.hero-note a { color: var(--gold); font-weight: 700; text-decoration: none; }
.hero-note a:hover { text-decoration: underline; }

/* ── Aviso de idioma tras un redirect automatico ────────────────── */
.lang-notice {
    background: var(--gold);
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 16px;
    text-align: center;
}
.lang-notice .container { position: relative; padding-right: 34px; }
.lang-notice a {
    color: var(--navy);
    font-weight: 800;
    text-decoration: underline;
    margin-left: 8px;
}
.lang-notice button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    opacity: 0.6;
}
.lang-notice button:hover { opacity: 1; }
@media (max-width: 520px) { .lang-notice { font-size: 12.5px; padding: 8px 12px; } }

/* "Entrar" en el nav: los que YA son clientes no deberian tener que buscar
   la puerta. Va discreto al lado del CTA, no compitiendo con el. */
.nav-login {
    font-weight: 700;
}

/* ── Franja de prueba social: la nota REAL de Play + una voz ────── */
.social-band {
    background: var(--off-white, #F8F9FB);
    border-bottom: 1px solid rgba(21, 38, 66, 0.07);
    padding: 24px 0;
}
.social-band-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}
.social-rating {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--navy);
    white-space: nowrap;
    flex-shrink: 0;
}
.social-rating .sr-stars { color: #F0B429; font-size: 18px; letter-spacing: 1px; }
.social-rating .sr-text { font-size: 14.5px; }
.social-rating .sr-text b { font-size: 16px; }
.social-rating:hover .sr-text { text-decoration: underline; }
.social-quote {
    margin: 0;
    max-width: 640px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #3d4f6b;
    border-left: 3px solid var(--gold);
    padding-left: 16px;
}
.social-quote cite {
    display: block;
    margin-top: 5px;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 700;
    color: #6b7a92;
}
@media (max-width: 860px) {
    .social-band-inner { gap: 14px; }
    .social-quote { border-left: 0; border-top: 1px solid rgba(21, 38, 66, 0.09); padding: 12px 0 0; font-size: 13.5px; }
}

/* ── Demo interactivo: el enganche. Las respuestas son las mismas
      que ya publicamos como capturas, no cifras inventadas. ────── */
.demo-live { background: linear-gradient(180deg, #fff 0%, var(--off-white, #F8F9FB) 100%); }
.dl-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 40px;
    align-items: start;
    margin-top: 40px;
}
.dl-questions-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7a92;
    margin: 0 0 14px;
}
.dl-q {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1.5px solid rgba(21, 38, 66, 0.12);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 10px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.dl-q::before { content: "💬 "; opacity: 0.75; }
.dl-q:hover {
    border-color: var(--gold);
    transform: translateX(3px);
    box-shadow: 0 6px 18px rgba(21, 38, 66, 0.09);
}
.dl-q.active {
    border-color: var(--gold);
    background: rgba(229, 197, 106, 0.10);
}
.dl-q[disabled] { opacity: 0.55; cursor: wait; }
.dl-questions-foot {
    margin: 16px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6b7a92;
}

/* El telefono: alto FIJO para que la pagina no salte al llegar la respuesta. */
.dl-phone {
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(21, 38, 66, 0.10);
    box-shadow: 0 26px 60px rgba(21, 38, 66, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 560px;
    position: sticky;
    top: 100px;
}
.dl-topbar {
    background: #fff;
    border-bottom: 1px solid rgba(21, 38, 66, 0.08);
    padding: 12px 16px;
    flex-shrink: 0;
}
.dl-conn {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 9px;
}
.dl-chat {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #F4F6FA;
    scroll-behavior: smooth;
    /* Ancla de posicionamiento: sin esto offsetTop de las burbujas se mide
       contra un padre de mas arriba y el scroll deja la pregunta cortada. */
    position: relative;
}
.dl-placeholder {
    color: #8a97ab;
    font-size: 14.5px;
    text-align: center;
    margin: 40px 12px 0;
    line-height: 1.6;
}
.dl-bubble-user {
    background: var(--navy);
    color: #fff;
    padding: 11px 15px;
    border-radius: 16px 16px 4px 16px;
    margin: 0 0 12px auto;
    max-width: 85%;
    width: fit-content;
    font-size: 14.5px;
    line-height: 1.45;
    animation: dlIn 0.25s ease both;
}
.dl-bubble-aski {
    background: #fff;
    color: var(--navy);
    padding: 14px 16px;
    border-radius: 16px 16px 16px 4px;
    margin: 0 auto 16px 0;
    max-width: 94%;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 10px rgba(21, 38, 66, 0.07);
    animation: dlIn 0.3s ease both;
}
@keyframes dlIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dl-bubble-aski p { margin: 0 0 9px; }
.dl-bubble-aski p:last-child { margin-bottom: 0; }
.dl-bubble-aski ul { margin: 0 0 9px; padding-left: 18px; }
.dl-bubble-aski li { margin-bottom: 7px; }
.dl-bubble-aski .dl-cur {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin: 12px 0 5px;
}
.dl-bubble-aski .dl-note {
    font-size: 12.5px;
    color: #6b7a92;
    font-style: italic;
    line-height: 1.45;
}
.dl-bubble-aski table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px;
    font-size: 12.5px;
}
.dl-bubble-aski th {
    background: #E6EAF1;
    text-align: left;
    padding: 7px 9px;
    font-weight: 700;
    white-space: nowrap;
}
.dl-bubble-aski td { padding: 7px 9px; border-bottom: 1px solid #EDF0F5; white-space: nowrap; }
.dl-bubble-aski tr:nth-child(even) td { background: #F7F9FC; }
/* Tabla ancha dentro de la burbuja: se desplaza sola, no rompe el ancho. */
.dl-table-scroll { overflow-x: auto; }

.dl-typing { display: flex; gap: 5px; padding: 14px 16px; }
.dl-typing span {
    width: 8px; height: 8px; border-radius: 50%;
    background: #a9b4c6;
    animation: dlDot 1.2s infinite ease-in-out;
}
.dl-typing span:nth-child(2) { animation-delay: 0.18s; }
.dl-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dlDot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.dl-inputbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(21, 38, 66, 0.08);
    background: #fff;
    color: #97a2b4;
    font-size: 14.5px;
    flex-shrink: 0;
}
.dl-mic {
    background: var(--navy);
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.dl-answers { display: none; }

/* ── Bloques plegables: "ver todo lo que hace" y la tabla vs ChatGPT ──
   La pagina tenia 36 tarjetas a la vista. Lo secundario sigue estando,
   pero detras de un clic, para que lo importante se lea. */
.feature-more,
.vs-more {
    margin-top: 34px;
    border-top: 1px solid rgba(21, 38, 66, 0.10);
    padding-top: 8px;
}
.feature-more > summary,
.vs-more > summary {
    cursor: pointer;
    list-style: none;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--navy);
    padding: 14px 0;
}
.feature-more > summary::-webkit-details-marker,
.vs-more > summary::-webkit-details-marker { display: none; }
.feature-more > summary::after,
.vs-more > summary::after {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 10px;
    margin-bottom: 2px;
    border-right: 2.5px solid var(--gold);
    border-bottom: 2.5px solid var(--gold);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.2s;
    vertical-align: middle;
}
.feature-more[open] > summary::after,
.vs-more[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.feature-more > summary:hover,
.vs-more > summary:hover { color: var(--gold-dark, #b98f2b); }
.feature-more[open] .features { margin-top: 22px; }
.vs-more[open] .vs-table { margin-top: 8px; }
.vs-more-lead {
    max-width: 720px;
    margin: 0 auto 20px;
    text-align: center;
    color: var(--gray-500, #6B7280);
    font-size: 16px;
    line-height: 1.6;
}

/* ── Plan: la segunda via de compra, sin robarle peso a la primera ── */
.plan-alt {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--gray-500, #667);
}
.plan-alt a { color: inherit; font-weight: 700; text-decoration: underline; }
.plan-alt a:hover { color: var(--navy); }

/* ── Reversion de riesgo, junto al precio (no escondida en el footer) ── */
.risk-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    list-style: none;
    margin: 34px auto 0;
    padding: 0;
    max-width: 900px;
    font-size: 14px;
    color: #4a5b74;
}
.risk-row li { white-space: nowrap; }
.risk-row a { color: inherit; font-weight: 700; text-decoration: underline; }
@media (max-width: 700px) {
    .risk-row { flex-direction: column; align-items: flex-start; gap: 8px; max-width: 340px; }
    .risk-row li { white-space: normal; }
}

/* ── Cierre: misma pareja de botones que el hero ── */
.cta-final-row {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-final-row > a { display: inline-flex; align-items: center; }
.cta-final-row .btn { height: 52px; box-sizing: border-box; }
.cta-final-row .play-store-badge { display: block; }
.cta-final-note {
    margin: 22px 0 0;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.75);
}
.cta-final-note a { color: var(--gold); font-weight: 700; }

.dl-cta-line {
    text-align: center;
    margin: 40px 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}
.dl-cta-btns { text-align: center; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-secondary-dark {
    background: transparent;
    background-image: none;
    color: var(--navy);
    border: 1.5px solid rgba(21, 38, 66, 0.55);
}
.btn-secondary-dark:hover { background: var(--navy); color: #fff; }

@media (max-width: 900px) {
    .dl-wrap { grid-template-columns: 1fr; gap: 22px; }
    /* En movil el telefono va PRIMERO: se ve la respuesta sin scrollear. */
    .dl-phone { order: 1; position: static; height: 460px; max-width: 420px; margin: 0 auto; width: 100%; }
    .dl-questions { order: 2; }
    .dl-questions-title { text-align: center; }
    .dl-q { font-size: 15px; padding: 12px 15px; }
    .dl-questions-foot { text-align: center; }
    .dl-cta-line { font-size: 18px; margin-top: 30px; }
}

/* YouTube facade — thumbnail clickable con play overlay. Evita
 * cargar ~150KB de iframe en LCP. JS lo reemplaza por iframe al
 * primer click. */
.yt-facade {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--navy-deep);
}
.yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.yt-facade:hover img { opacity: 1; }
.yt-facade::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: rgba(229, 39, 39, 0.92);
    border-radius: 12px;
    pointer-events: none;
}
.yt-facade::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-left: 18px solid white;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    z-index: 1;
    pointer-events: none;
}

/* ── Longitud de linea ─────────────────────────────────────────────
   En un monitor ancho el contenedor de 1100px deja renglones de ~110
   caracteres en el FAQ y de ~160 en las notas: se leen mal y la gente
   los salta. 68-72 caracteres es el rango comodo. */
.faq-item p,
.faq-item ul,
.vs-note,
.ded-note,
.dl-questions-foot {
    max-width: 68ch;
}
.faq-item p,
.faq-item ul { margin-left: 0; }
.vs-note,
.ded-note { margin-left: auto; margin-right: auto; }

/* Las dos franjas de confianza necesitan separarse una de otra. */
.social-band + .trust-strip { border-top: 0; }
.trust-strip { padding: 28px 0; }

/* ── Titular del hero: una sola receta para Odoo y para SAP ─────────
   El acento manuscrito (Caveat) es la firma de marca. Con una frase
   entera —no dos palabras— hace falta bloque propio para que no se
   parta, interlineado corto (Caveat trae mucho aire arriba) y un pelo
   menos de escala para que entre en una linea. */
.hero h1 { font-size: clamp(34px, 3.9vw, 50px); line-height: 1.1; }
.hero h1 .gold,
.hero h1 .g {
    display: inline-block;
    font-family: 'Caveat', var(--font, Inter, sans-serif);
    font-weight: 700;
    font-size: 1.12em;
    letter-spacing: 0;
    line-height: 0.95;
    padding-bottom: 0.06em;
    color: var(--gold);
}

/* ── Botones cuyo borde ES el boton ────────────────────────────────
   Cuando no hay relleno, el borde es lo unico que dice "esto se toca".
   #E5E7EB sobre blanco da 1,24 de contraste: se perdia. Navy al 55%
   llega a 3,5 y cumple el minimo de 3:1 para bordes de controles.
   Vale para el home y para SAP, que arrastraban el mismo gris. */
.plan .btn-contact,
.ded-cta .btn-contact,
.pcard .btn.sec {
    border-color: rgba(21, 38, 66, 0.55);
}
.plan .btn-contact:hover,
.ded-cta .btn-contact:hover,
.pcard .btn.sec:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
/* En la tarjeta oscura (Dedicated) el borde va en blanco, no en navy. */
.pcard.ded .btn.sec { border-color: rgba(255, 255, 255, 0.75); }

/* Las preguntas del demo: el borde de tarjeta de la casa (0,12) las dejaba
   casi sin filo. 0,30 las define sin ensuciar, y al pasar por encima o al
   enfocarlas con el teclado el filo pasa a dorado. */
.dl-q { border-color: rgba(21, 38, 66, 0.30); }
.dl-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* La pregunta activa del demo: el dorado claro sobre blanco no se ve (1,6).
   El dorado oscuro marca cual esta elegida y cumple el 3:1. */
.dl-q.active {
    border-color: #A8801F;
    background: rgba(229, 197, 106, 0.14);
}

/* ── Barra: el boton mide igual en las dos paginas ─────────────────
   El CTA de SAP ("Hablar con ventas") era 37px mas ancho que el del
   home ("Probar gratis") y arrastraba el bloque de enlaces 87px a la
   izquierda. Con un ancho minimo comun las dos barras se leen igual. */
.nav-cta,
.topbar .links a.cta {
    min-width: 167px;
    text-align: center;
    /* El CTA de SAP heredaba 20px de margen a cada lado y ensanchaba el
       bloque 40px de mas, empujando los enlaces hacia la izquierda. */
    margin: 0;
}
@media (max-width: 1000px) {
    .nav-cta,
    .topbar .links a.cta { min-width: 0; }
}

/* Entre 921 y 1120px el home comprime la barra (gap 12, texto 14, boton mas
   estrecho) para que quepa sin romperse. SAP no lo hacia y a 1024px su barra
   quedaba 89px mas a la izquierda. Misma receta para las dos. */
@media (min-width: 921px) and (max-width: 1120px) {
    .topbar .links { gap: 12px; }
    .topbar .links a:not(.cta) { font-size: 14px; }
    .nav-cta,
    .topbar .links a.cta { padding: 9px 15px; min-width: 160px; }
}