/* =====================================================================
   DOMO — la web del estudio
   ---------------------------------------------------------------------
   Un solo archivo de estilos, sin frameworks, sin librerías.

   POR QUÉ SIN FRAMEWORK, QUE ACÁ ES UNA DECISIÓN Y NO UNA CARENCIA
   Esta página es el argumento de venta del estudio: quien la mira está
   evaluando si sabemos hacer webs. Un sitio que arranca bajando 300 KB de
   JavaScript para mostrar seis párrafos dice lo contrario de lo que
   queremos decir. Acá el navegador baja un HTML y un CSS, y la página está.

   Y hay un motivo comercial: al comerciante lo miramos en el celular, en la
   calle, con mala señal. Si tarda cuatro segundos, se fue.

   ORDEN DEL ARCHIVO
     1. Fichas de color y medidas
     2. Base y tipografía
     3. Piezas que se repiten (botones, secciones)
     4. Cada bloque de la página, en el orden en que se ve
     5. Celular
   ===================================================================== */


/* --- 1. Fichas ---------------------------------------------------------
   Los tres colores de la marca salen de marca/generar-marca.py, que es de
   donde salen también el logo y las publicaciones. Un solo lugar.

   Contrastes MEDIDOS, no estimados (los mismos que se usaron en goodlook,
   donde esto ya se había hecho a mano):
     --tinta   sobre --papel  →  17,4:1   textos y títulos
     --gris    sobre --papel  →   5,3:1   párrafos secundarios: pasa AA
     --naranja sobre --papel  →   3,3:1   SÓLO para trazos grandes y fondos,
                                          NUNCA para texto chico
     --papel   sobre --naranja →   3,3:1   idem: el botón usa 22 px en negrita
   ------------------------------------------------------------------- */
:root {
    --naranja:      #FF5A1F;
    --naranja-hond: #D93F09;   /* para texto sobre claro: 4,8:1, sí pasa AA */
    --tinta:        #0E1116;
    --tinta-suave:  #3A424E;
    --gris:         #6E7480;
    --papel:        #FFFFFF;
    --hueso:        #F5F2ED;
    --linea:        #E6E1D9;

    /* Un solo radio en toda la página. Mezclar radios distintos es lo que
       hace que un sitio se vea "armado con piezas de otros lados". */
    --radio: 14px;
    --radio-chico: 9px;

    /* El ancho de lectura. Más de 70 caracteres por renglón y el ojo se
       pierde al volver al principio de la línea siguiente. */
    --ancho: 1320px;
    --ancho-texto: 66ch;

    --borde-pagina: clamp(24px, 4vw, 80px);
}


/* --- 2. Base ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    /* Los anclas del menú no quedan pegadas al borde de arriba. */
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
}

/* Quien pidió menos movimiento en su sistema no tiene por qué pelearse con
   nuestra página. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    background: var(--papel);
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text",
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, iframe { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3 {
    line-height: 1.08;
    letter-spacing: -.028em;
    text-wrap: balance;
}

h1 { font-size: clamp(3rem, 7.2vw, 6.4rem); font-weight: 800; }
h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); font-weight: 800; }
h3 { font-size: 1.42rem; font-weight: 700; letter-spacing: -.015em; }

p { text-wrap: pretty; }

/* El anillo de foco: se ve sólo cuando se navega con el teclado, y se ve
   BIEN. Sacarlo es la forma más rápida de dejar afuera a alguien. */
:where(a, button, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--naranja);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Se salta el menú y se cae en el contenido. Sólo aparece con Tab. */
.saltar {
    position: absolute;
    left: 12px;
    top: -70px;
    z-index: 200;
    background: var(--tinta);
    color: var(--papel);
    padding: 12px 20px;
    border-radius: var(--radio-chico);
    font-weight: 700;
    text-decoration: none;
    transition: top .18s;
}
.saltar:focus { top: 12px; }


/* --- 3. Piezas que se repiten ------------------------------------------ */

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--borde-pagina);
}

.seccion { padding-block: clamp(64px, 9vw, 118px); }
.seccion-hueso { background: var(--hueso); }

/* La volanta naranja arriba de cada título. Es el hilo que hace que las
   secciones se lean como partes de lo mismo. Va en --naranja-hond y no en
   --naranja porque es texto chico: el naranja puro da 3,3:1 y no alcanza. */
.volanta {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--naranja-hond);
    margin-bottom: 14px;
}

.bajada {
    margin-top: 18px;
    font-size: 1.22rem;
    line-height: 1.6;
    color: var(--tinta-suave);
    max-width: var(--ancho-texto);
}

.boton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--naranja);
    color: #fff;
    /* 1.05rem en negrita: a este tamaño el 3,3:1 del naranja alcanza. Con
       texto más chico habría que oscurecerlo. */
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
    padding: 19px 34px;
    border-radius: 999px;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    box-shadow: 0 8px 22px rgba(255, 90, 31, .26);
}
.boton:hover { background: var(--naranja-hond); transform: translateY(-2px);
               box-shadow: 0 12px 28px rgba(255, 90, 31, .32); }
.boton:active { transform: translateY(0); }

.boton-linea {
    background: transparent;
    color: var(--tinta);
    box-shadow: inset 0 0 0 1.5px var(--tinta);
}
.boton-linea:hover { background: var(--tinta); color: var(--papel);
                     box-shadow: inset 0 0 0 1.5px var(--tinta); }

/* El domo del logo, dibujado con CSS. No es una imagen: no hay que bajar
   nada y se puede pintar de cualquier color desde acá. */
.domo {
    width: 34px;
    height: 17px;
    background: var(--naranja);
    border-radius: 34px 34px 0 0;
    flex: 0 0 auto;
}


/* --- 4. Los bloques, en orden ------------------------------------------ */

/* ····· Encabezado ····································································
   Fijo arriba y semitransparente. Se queda a la vista porque el botón de
   WhatsApp tiene que estar siempre a un toque: quien se decide a la mitad
   de la página no tiene por qué buscar cómo escribirnos. */
.encabezado {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--linea);
}

.encabezado-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 82px;
    /* Sin el tope de --ancho: el header llega a los costados igual que
       el hero. Se quedó afuera cuando se descapó la portada — quedaba
       angosto y centrado mientras todo lo demás llegaba al borde. */
    max-width: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.28rem;
    letter-spacing: .17em;
}

.menu { display: flex; align-items: center; gap: 32px; }

.menu a {
    text-decoration: none;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--tinta-suave);
    transition: color .15s;
}
.menu a:hover { color: var(--naranja-hond); }

.menu .boton { padding: 13px 24px; font-size: 1.02rem; }

/* ····· Portada ······································································· */
.portada {
    padding-top: clamp(46px, 6vw, 84px);
    padding-bottom: clamp(28px, 5vw, 48px);
    position: relative;
    overflow: hidden;
}

/* El domo gigante del fondo. Es la forma de la marca, agrandada y casi
   transparente: repite la identidad sin poner otro logo dando vueltas. */
.portada::after {
    content: "";
    position: absolute;
    right: -260px;
    bottom: -1px;
    width: 1140px;
    height: 570px;
    background: var(--naranja);
    opacity: .07;
    border-radius: 1140px 1140px 0 0;
    pointer-events: none;
}

/* Sin el tope de --ancho: el hero llega a los costados como en las
   otras cuatro personalidades. El título y la bajada igual no se
   estiran de más porque tienen su propio max-width en ch. */
.portada .contenedor { position: relative; z-index: 1; max-width: none; }

.portada h1 { max-width: 17ch; }
.portada h1 em { font-style: normal; color: var(--naranja-hond); }

.portada .bajada { font-size: 1.32rem; max-width: 50ch; }

.portada-acciones {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Las tres señales de confianza abajo de la portada. Son lo que contesta
   "¿y este quién es?" antes de que la pregunta se formule. */
.señales {
    margin-top: 46px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    font-size: .95rem;
    color: var(--tinta-suave);
}
/* El > es obligatorio, no un adorno. Sin él la regla agarraba también los
   <span> de adentro y los volvía contenedores flex: el <b> pasaba a ser un
   ítem con 9 px de separación a cada lado, y quedaba "100% online , en todo
   el país" con un espacio antes de la coma. */
.señales > span { display: flex; align-items: center; gap: 9px; }
.señales b { font-weight: 700; color: var(--tinta); }

.punto {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--naranja);
    flex: 0 0 auto;
}

/* ····· Los demos en vivo ·····························································
   ESTO ES LO QUE DIFERENCIA A LA PÁGINA. Cualquier estudio muestra
   capturas de sus trabajos; acá el visitante scrollea una tienda de verdad
   sin salir del sitio.

   Son las dos tiendas de muestra que ya se habían hecho para los videos de
   Instagram: negocios inventados, sin marcas ni modelos, así que se pueden
   mostrar sin pedirle permiso a ningún cliente. */
.demos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: clamp(28px, 4vw, 52px);
    margin-top: 52px;
}

.demo { display: flex; flex-direction: column; align-items: center; }

.demo-texto { text-align: center; margin-bottom: 24px; max-width: 34ch; }
.demo-texto p { margin-top: 8px; color: var(--tinta-suave); font-size: 1rem; }

/* El teléfono. El marco oscuro es lo que hace que el iframe de adentro se
   lea como "una web en un celular" y no como un recuadro con scroll. */
.telefono {
    width: 100%;
    max-width: 392px;
    background: #12151b;
    border-radius: 46px;
    padding: 11px;
    box-shadow: 0 30px 60px rgba(14, 17, 22, .18),
                0 6px 18px rgba(14, 17, 22, .10);
}

.telefono iframe {
    width: 100%;
    height: 640px;
    border: 0;
    border-radius: 36px;
    background: #fff;
}

.demo-pie {
    margin-top: 18px;
    font-size: .93rem;
    color: var(--gris);
    text-align: center;
}
.demo-pie a { color: var(--naranja-hond); font-weight: 600; }

/* ····· Lista de lo que incluye ······················································· */
.lista-incluye {
    list-style: none;
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 30px 46px;
}

.lista-incluye li {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 16px;
    align-items: start;
}

/* El tilde dibujado con CSS y no con un emoji ✓: el emoji lo resuelve cada
   sistema con su propia fuente y cambia de forma y tamaño sin avisar. */
.tilde {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--naranja);
    position: relative;
    margin-top: 2px;
}
.tilde::after {
    content: "";
    position: absolute;
    left: 11px; top: 9px;
    width: 9px; height: 15px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(43deg);
}

.lista-incluye h3 { margin-bottom: 5px; }
.lista-incluye p { color: var(--tinta-suave); font-size: 1rem; }

/* ····· Pasos ········································································· */
.pasos {
    counter-reset: paso;
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 34px;
}

.paso { position: relative; padding-top: 62px; }

.paso::before {
    counter-increment: paso;
    content: counter(paso);
    position: absolute;
    top: 0; left: 0;
    font-size: 3.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--naranja);
    opacity: .32;
}

.paso h3 { margin-bottom: 7px; }
.paso p { color: var(--tinta-suave); font-size: 1rem; }

/* ····· Precios ······································································· */
/* El mínimo de 235px no es caprichoso: es lo justo para que las CUATRO
   tarjetas (dos de pago único + dos mensuales) entren alineadas en una
   sola fila dentro de los 1120px del contenedor. Con 290px la cuarta se
   caía abajo sola y quedaba enorme. En pantallas más angostas la grilla
   pasa a 2×2 y en el celular a una columna, sin media queries. */
.planes {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 22px;
}

.plan {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
}

/* El que queremos que elija. El abono es lo que sostiene el estudio: diez
   clientes con abono son ingreso que entra sin vender nada nuevo. */
.plan-destacado {
    border-color: var(--naranja);
    box-shadow: 0 0 0 1px var(--naranja), 0 14px 34px rgba(255, 90, 31, .12);
}

.plan-etiqueta {
    align-self: flex-start;
    background: var(--naranja);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.plan h3 { font-size: 1.42rem; }

.plan-precio {
    margin-top: 12px;
    font-size: 2.05rem;
    font-weight: 800;
    letter-spacing: -.035em;
}
/* El "desde" va en renglón propio, chiquito y gris, arriba del número. No
   es adorno: con cuatro columnas "desde $650.000" ya no entra en un
   renglón a 2.05rem, y partirlo al azar quedaba peor que partirlo a
   propósito. Así el número queda grande y solo, que es lo que se mira. */
.plan-precio .desde {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--gris);
}
.plan-precio small {
    display: block;
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--gris);
    margin-top: 3px;
}

.plan ul {
    list-style: none;
    margin: 20px 0 26px;
    display: grid;
    gap: 10px;
    font-size: .99rem;
    color: var(--tinta-suave);
}
.plan li { display: flex; gap: 10px; align-items: start; }
.plan li::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--naranja);
    margin-top: 9px;
    flex: 0 0 auto;
}

.plan .boton { margin-top: auto; justify-content: center; }

.nota-precios {
    margin-top: 26px;
    font-size: .95rem;
    color: var(--gris);
    max-width: var(--ancho-texto);
}

/* ····· Preguntas ····································································· */
.preguntas { margin-top: 44px; max-width: 780px; }

.pregunta {
    border-bottom: 1px solid var(--linea);
}

.pregunta summary {
    cursor: pointer;
    list-style: none;
    padding: 22px 44px 22px 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.015em;
    position: relative;
}
.pregunta summary::-webkit-details-marker { display: none; }

/* La cruz que se convierte en menos al abrir. Dos rayas y una rotación:
   sin imágenes y sin JavaScript. */
.pregunta summary::before,
.pregunta summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 17px; height: 2.5px;
    background: var(--naranja);
    border-radius: 2px;
    transition: transform .22s ease;
}
.pregunta summary::after { transform: rotate(90deg); }
.pregunta[open] summary::after { transform: rotate(0); }

.pregunta p {
    padding: 0 20px 24px 0;
    color: var(--tinta-suave);
    max-width: var(--ancho-texto);
}

/* ····· Cierre ········································································ */
.cierre {
    background: var(--tinta);
    color: var(--papel);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cierre::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 1000px; height: 500px;
    background: var(--naranja);
    opacity: .13;
    border-radius: 1000px 1000px 0 0;
    pointer-events: none;
}

.cierre .contenedor { position: relative; z-index: 1; }
.cierre h2 { max-width: 18ch; margin-inline: auto; }
.cierre .bajada { color: rgba(255,255,255,.76); margin-inline: auto; text-align: center; }
.cierre .boton { margin-top: 32px; }

/* ····· Pie ··········································································· */
.pie {
    padding-block: 48px;
    border-top: 1px solid var(--linea);
    font-size: .95rem;
    color: var(--gris);
}

.pie-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.pie a { color: var(--tinta-suave); text-decoration: none; font-weight: 600; }
.pie a:hover { color: var(--naranja-hond); }

.pie-redes { display: flex; gap: 22px; }


/* --- 5. Celular --------------------------------------------------------
   Se toca lo mínimo: casi todo el sitio ya se acomoda solo con las grillas
   de arriba. Acá va únicamente lo que no puede resolverse con auto-fit. */

@media (max-width: 760px) {
    /* En el celular el menú se queda solo con el botón de WhatsApp:
       los enlaces de sección se pierden y no pasa nada, la página es
       corta y se recorre bajando. */
    .menu > a:not(.boton) { display: none; }

    .encabezado-fila { height: 64px; }

    .portada::after { width: 620px; height: 310px; right: -180px; }

    .telefono iframe { height: 560px; }

    .señales { gap: 10px 20px; font-size: .9rem; }
}

@media (max-width: 420px) {
    body { font-size: 16px; }
    .portada-acciones .boton { width: 100%; justify-content: center; }
}


/* --- Impresión ---------------------------------------------------------
   Alguien va a imprimir el presupuesto o la página. Que no salgan cuatro
   hojas negras. */
@media print {
    .encabezado, .telefono, .cierre::after, .portada::after { display: none; }
    body { font-size: 12pt; }
    .seccion { padding-block: 18pt; }
}

/* =====================================================================
   EL CHAT DE CONSULTAS
   ---------------------------------------------------------------------
   Contesta las dudas de siempre sin IA: sólo dice lo que está escrito en
   bot/conocimientos/domo.js. No puede inventar un precio, no tiene costo
   por conversación y cuando no sabe, deriva al WhatsApp.

   Los colores salen de las variables de arriba a propósito: el chat tiene
   que leerse como parte de la página, no como un widget pegado encima.
   ===================================================================== */

.chat-abrir {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--naranja);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255, 90, 31, .32);
    transition: transform .2s ease, box-shadow .2s ease;
}

.chat-abrir:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 90, 31, .40);
}

/* El domo chiquito adentro del botón, igual que el del pie. */
.chat-abrir::before {
    content: "";
    width: 20px;
    height: 10px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    flex: 0 0 auto;
}

.chat[hidden] { display: none; }

.chat {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 21;
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 32px));
    /* Alto: cuanto mas entre, mejor se lee la conversacion. Antes eran 620px
       y con dos respuestas ya no se veia lo anterior. */
    height: min(720px, calc(100vh - 48px));
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: 0 24px 60px rgba(14, 17, 22, .18);
    overflow: hidden;
}

.chat-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--tinta);
    color: #fff;
}

.chat-quien strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.chat-quien span   { display: block; font-size: 12.5px; color: #A8AEB8; margin-top: 2px; }

.chat-cerrar {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff; font-size: 19px; line-height: 1;
    cursor: pointer;
}
.chat-cerrar:hover { background: rgba(255,255,255,.22); }

.chat-hilo {
    /* EL min-height: 0 NO SE TOCA. Sin el, este elemento no se achica por
       debajo de su contenido —es el comportamiento por defecto de un item
       flex— asi que el hilo crece, el panel lo recorta y NUNCA scrollea.
       Resultado: llega la respuesta, queda fuera de vista, y parece que el
       bot no contesto nada. Paso el 16/8 y costo un rato encontrarlo. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* que el scroll no se contagie a la pagina */
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.burbuja {
    max-width: 84%;
    padding: 11px 14px;
    border-radius: var(--radio);
    font-size: 14.5px;
    line-height: 1.5;
}

/* Lo que dice el bot: fondo hueso, alineado a la izquierda. */
.burbuja.ella {
    align-self: flex-start;
    background: var(--hueso);
    color: var(--tinta);
    border-bottom-left-radius: 5px;
}

/* Lo que escribe quien consulta: naranja, a la derecha. */
.burbuja.vos {
    align-self: flex-end;
    background: var(--naranja);
    color: #fff;
    border-bottom-right-radius: 5px;
}

/* Los tres puntitos mientras "piensa". No es decoración: sin esa pausa las
   respuestas aparecen de golpe y se lee como un cartel, no como una charla. */
.burbuja.escribiendo { color: var(--gris); letter-spacing: .18em; }

.chat-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 18px 14px;
}

.chat-opciones button {
    border: 1px solid var(--linea);
    background: var(--papel);
    color: var(--tinta-suave);
    border-radius: 999px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.chat-opciones button:hover { border-color: var(--naranja); color: var(--naranja-hond); }

.chat-forma {
    display: flex;
    gap: 8px;
    padding: 0 18px 14px;
}

.chat-forma input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 14.5px;
    padding: 11px 15px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--papel);
    color: var(--tinta);
}
.chat-forma input:focus { outline: none; border-color: var(--naranja); }

.chat-forma button {
    flex: 0 0 auto;
    width: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--naranja);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}
.chat-forma button:hover { background: var(--naranja-hond); }

.chat-wa {
    display: block;
    padding: 13px;
    text-align: center;
    background: var(--hueso);
    border-top: 1px solid var(--linea);
    color: var(--tinta);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.chat-wa:hover { background: var(--linea); }

/* Cuando el bot se da por vencido y deriva, el botón pide atención. */
.chat-wa.destacado { animation: latir 1.4s ease-in-out 3; }

@keyframes latir {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-wa.destacado { animation: none; }
}

@media (max-width: 460px) {
    .chat-abrir { padding: 12px 18px; font-size: 14px; }
    .chat { max-height: calc(100vh - 80px); }
}




/* ===================================================================
   POR QUÉ UNA WEB Y NO SÓLO INSTAGRAM
   -------------------------------------------------------------------
   El video vertical al lado del argumento. En el teléfono se apilan y
   el video va primero: es lo que frena el pulgar.

   EL ANCHO DEL VIDEO ESTÁ ATADO AL ALTO, no al revés. Un reel es
   9:16, y si se lo deja crecer a lo ancho como cualquier bloque, en
   una pantalla grande ocupa dos metros de alto y empuja todo lo demás
   fuera de la vista.
   =================================================================== */

.reel-nota {
    margin-top: 38px;
    display: grid;
    gap: clamp(28px, 4vw, 52px);
    align-items: center;
}

.reel-caja {
    /* La sombra y el redondeo son los mismos que usan los demos: es la
       misma idea —algo que se mira adentro de una pantalla— y tiene que
       parecerse. */
    max-width: 300px;
    border-radius: 22px;
    overflow: hidden;
    background: var(--tinta);
    box-shadow: 0 18px 44px rgba(14, 17, 22, .16);
}
.reel-caja video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
}

.reel-texto p {
    font-size: 1.06rem;
    line-height: 1.62;
    color: var(--tinta-suave);
}

.reel-tuyo {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
}
.reel-tuyo li {
    display: flex; align-items: baseline; gap: 14px;
    padding: 13px 0;
    border-top: 1px solid var(--linea);
    font-weight: 600;
}
.reel-tuyo li:last-child { border-bottom: 1px solid var(--linea); }
/* El tilde se dibuja, no se escribe: un carácter ✓ cambia de forma en
   cada sistema y en Android sale de otro tamaño. */
.reel-tuyo li::before {
    content: "";
    flex: none;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--naranja);
    transform: translateY(-2px);
}

.reel-pie {
    margin-top: 18px;
    font-size: .88rem !important;
    color: var(--gris) !important;
}

@media (min-width: 820px) {
    .reel-nota { grid-template-columns: 300px 1fr; }
}

/* --- El llamado a Tienda Nube en la portada ---------------------------
   Tercer llamado sin tercer botón: un renglón discreto con flecha,
   abajo de las acciones. Para el que ya tiene tienda y se reconoce. */
.portada-tn {
    margin-top: 14px;
    font-size: 15px;
}
.portada-tn a {
    color: var(--naranja-hond);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.portada-tn a:hover { border-bottom-color: var(--naranja-hond); }

/* --- La fila legal del pie --------------------------------------------
   Separada de la fila de marca por una línea fina; enlaces con aire
   entre sí (objetivos de toque dignos) y subrayado solo al pasar. */
.pie-legal {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--linea);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 26px;
    font-size: 14.5px;
    color: var(--gris);
}
.pie-legal nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pie-legal a { color: var(--gris); text-decoration: none; }
.pie-legal a:hover { color: var(--naranja-hond); text-decoration: underline; }
/* El QR de Data Fiscal (ARCA): chico, al final de la fila legal, sin subrayado */
.pie-datafiscal { flex: 0 0 auto; line-height: 0; opacity: .9; }
.pie-datafiscal:hover { opacity: 1; text-decoration: none; }
.pie-datafiscal img { width: 44px; height: 60px; display: block; }

/* ── Bloque "Y además": los tres servicios que se contratan sueltos ──
   Va debajo de los cuatro planes de siempre, separado por un hilo, para
   que no compita con ellos: el que viene por una web tiene que ver
   primero la web. */
.volanta-sub {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--linea, #E4E7EC);
}
.sub-titulo {
  font-size: 1.9rem;
  letter-spacing: -.03em;
  margin: 6px 0 0;
}
.bajada-sub { margin-top: 10px; }
.planes-extra { margin-top: 30px; }

@media (max-width: 720px) {
  .volanta-sub { margin-top: 44px; padding-top: 30px; }
  .sub-titulo { font-size: 1.55rem; }
}



/* ── El cursor es el domo ────────────────────────────────────────────────
   Cada personalidad tiene el suyo (cohete en la galáctica, colores que
   ciclan en el día…) y la clásica no tenía ninguno. Acá el puntero ES el
   logo: el mismo arco #FF5A1F del encabezado, con un filo blanco para que
   no se pierda sobre las bandas naranjas ni sobre el papel.

   Va en SVG en línea, sin archivo que bajar, y en 32x32 — arriba de esa
   medida Chrome en algunas máquinas ignora el cursor y vuelve a la flecha.
   El punto sensible es la cúspide del arco (16 6): es la punta con la que
   se apunta, aunque el domo caiga debajo. */
:root {
  --cursor-domo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M 3 20 A 13 13 0 0 1 29 20 Z' fill='%23FF5A1F' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 16 6;
  --cursor-domo-mano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M 2 25 A 14 14 0 0 1 30 25 Z' fill='%23E14400' stroke='%23fff' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 16 9;
}

html, body { cursor: var(--cursor-domo), auto; }

/* Lo que se toca levanta el domo: más grande y naranja hondo. Se siente
   el cambio sin leer nada. */
a, button, summary, label,
.boton, .plan, .demo, [role="button"], [onclick] {
  cursor: var(--cursor-domo-mano), pointer;
}

/* En lo que se escribe manda la barrita de siempre: un domo tapando la
   línea de texto es exactamente lo que no se quiere al tipear. */
input, textarea, select, [contenteditable] { cursor: auto; }
input[type="submit"], input[type="button"], input[type="checkbox"],
input[type="radio"], select { cursor: var(--cursor-domo-mano), pointer; }

/* Los dedos no tienen puntero: en el celular el cursor no existe y el
   navegador ignora esto igual, pero lo dejamos explícito. */
@media (hover: none) {
  html, body, a, button, summary, .boton { cursor: auto; }
}

/* La marca en el pie: el mismo arco del encabezado, chiquito, al lado del
   nombre. Cierra la página con el logo, no con texto suelto. */
.pie-marca { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.pie-marca .domo { width: 22px; height: 11px; }
.pie-marca strong { font-size: 1.12rem; letter-spacing: .14em; }