/* ═══════════════════════════════════════════════════════════════
   CAMENA 2.0 · responsive.css
   No es un escritorio comprimido: en cada ancho cambia la estructura,
   la jerarquía y el orden de los elementos.
   Puntos de quiebre: 1140 · 900 · 720 · 560 · 400
   ═══════════════════════════════════════════════════════════════ */

/* ═══ ≤ 1140 px · se activa la navegación móvil ═══
   Por debajo de este ancho, los siete enlaces más el CTA no caben
   sin apretarse: es preferible el menú desplegable. */
/* ═══ ≤ 1290 px · el menú de escritorio todavía cabe, pero justo ═══
   Entre 1141 y 1290 px el menú completo más el botón no entran: se aprieta el
   espaciado, baja un punto el tamaño y el WhatsApp se queda con su icono. */
@media (max-width: 1290px) {
  /* Los enlaces de las columnas del pie miden 19 px de alto: en tableta y
     teléfono eso se toca con el dedo, así que llevan relleno propio. */
  .pie__lista a,
  .pie__legal a,
  .pie__cierre a { display: inline-block; padding-block: 6px; }

  .nav { gap: var(--e-4); }
  .nav__lista { gap: var(--e-3); }
  .nav__enlace { font-size: var(--t-menudo); }
  .nav__whatsapp span { display: none; }
}

@media (max-width: 1140px) {

  /* El menú solo se oculta si hay JS; sin JS queda visible y utilizable */
  .js .nav {
    position: fixed;
    inset: var(--alto-cabecera) 0 auto 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--alto-cabecera));
    padding: var(--e-4) var(--margen) var(--e-6);
    background: var(--ink);
    border-bottom: 1px solid var(--ink-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity var(--dur) var(--curva),
      transform var(--dur) var(--curva),
      visibility var(--dur) var(--curva);
  }
  .js .nav.is-abierto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .js .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .js .nav__lista li { border-bottom: 1px solid var(--ink-3); }
  .js .nav__enlace {
    display: block;
    padding: var(--e-4) 0;
    font-family: var(--display);
    font-size: var(--t-n5);
    font-weight: var(--peso-fuerte);
    color: var(--texto-claro);
  }
  .js .nav__enlace::after { display: none; }
  .js .nav__enlace.is-actual { color: var(--oro-lt); }

  .js .nav__contacto {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-3);
    margin-top: var(--e-5);
    padding-top: var(--e-5);
    border-top: 1px solid var(--ink-3);
  }
  .js .nav__whatsapp { justify-content: center; padding: var(--e-3); font-size: var(--t-cuerpo); }
  .js .nav__contacto .boton { width: 100%; padding: 1rem; font-size: var(--t-cuerpo); }

  .menu-boton { display: inline-flex; }

  /* Se apaga el bloqueo de scroll del fondo cuando el menú está abierto */
  body.menu-abierto { overflow: hidden; }

  /* Menú móvil: cada opción es una fila con su barra de acento a la izquierda
     y un filete punteado entre una y otra. Se toca con el dedo, así que la
     altura mínima es de 48 px. */
  .js .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .js .nav__enlace {
    justify-content: flex-start;
    min-height: 48px;
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px dotted var(--ink-3);
    border-radius: 0;
    border-left: 2px solid transparent;
    font-size: var(--t-cuerpo);
  }
  .js .nav__enlace::before,
  .js .nav__enlace::after { display: none; }
  .js .nav__enlace:hover,
  .js .nav__enlace.is-actual {
    background: rgba(168, 130, 31, 0.10);
    border-left-color: var(--oro);
  }
  .js .nav__contacto {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-3);
    margin-top: var(--e-5);
    padding-top: var(--e-5);
    border-top: 1px solid var(--ink-3);
  }
  .js .nav__contacto .boton,
  .js .nav__contacto .nav__whatsapp { justify-content: center; min-height: 48px; }
  /* En el panel el rótulo de WhatsApp vuelve: ahí hay ancho de sobra y un
     icono suelto no dice nada. */
  .js .nav__whatsapp span { display: inline; }

  /* Cuando el panel de precios deja de estar al lado, aparece la línea. */
  .hero__precios-breve { display: block; }

  /* Los globos de precio también dejan de flotar: en una columna taparían el
     renglón siguiente. Entran en el flujo y empujan el contenido.
     Aquí había dos fallas que descuadraban las casillas de la lista de precios:
     · El globo es un <span>. Al quitarle position: absolute hay que devolverle
       display: block, porque vuelve a ser un elemento en línea y en línea el
       relleno vertical no cuenta para la altura: la caja se pintaba 12 px
       encima del renglón siguiente, con su borde y su fondo.
     · Oculto no puede ocupar lugar. Con visibility: hidden la caja seguía
       midiendo 79 px, así que cada renglón arrastraba un hueco invisible y la
       lista medía el doble de lo que debía (919 px en vez de 462).
     Ahora se muestra solo cuando el botón lo abre: el clic lo maneja
     interacciones.js, que es la única fuente de verdad. El :hover queda
     únicamente para aparatos con ratón, donde sí existe. */
  .servicios__globo {
    position: static;
    display: none;
    margin: 0 0 var(--e-3);
    box-shadow: none;
  }
  .servicios__globo[data-abierto="si"] { display: block; }

  /* Las tarjetas de la franja de precios dejan de flotar: en una columna
     taparían el dato de abajo. Entran en el flujo y empujan el contenido.
     Mismo caso que arriba: ocultas no deben ocupar lugar, o cada tarjeta
     arrastra un hueco invisible del alto de su globo. */
  .hecho__globo {
    position: static;
    display: none;
    width: auto;
    margin-top: var(--e-3);
    box-shadow: none;
  }
  .hecho__globo[data-abierto="si"] { display: block; }

  /* Las cuatro etapas y el armador pasan a una columna */
  .etapas,
  .armar { grid-template-columns: minmax(0, 1fr); }

  /* El mapa de la oferta pasa a columna */
  .grupos { grid-template-columns: minmax(0, 1fr); }

  .enunciado { grid-template-columns: minmax(0, 1fr); }

  /* Composiciones que pasan a una sola columna */
  .hero__interior,
  .declaracion,
  .detras,
  .contacto,
  .proceso,
  .precio,
  .lab__cierre,
  .resolutor { grid-template-columns: minmax(0, 1fr); }

  /* En tablet el panel deja de ser columna: se separa del texto con una
     regla y ocupa el ancho útil, para no dejar un hueco muerto al lado. */
  .hero__panel {
    max-width: none;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    padding-left: 0;
    border-top: 1px dotted var(--borde);
  }
  /* El filete vertical solo tiene sentido cuando el índice va al lado del
     titular. Al pasar debajo, la separación la hace el filete superior. */
  .hero__panel::before { display: none; }
  .hero__panel .panel { max-width: 46rem; }
  .ficha, .proceso__detalle { position: static; }
  .proceso__detalle { min-height: 0; }

  .declaracion__cuerpo { padding-top: 0; }
  .declaracion__titulo { max-width: 18ch; }

  .resolutor__lista { border-right: 0; border-bottom: 1px solid var(--borde); }

  .paquetes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paquete__para { min-height: 0; }

  .lab-pieza--ancha {
    grid-template-columns: minmax(0, 1fr);
  }
  .lab-pieza--ancha .lab-pieza__visual {
    border-right: 0;
    border-bottom: 1px solid var(--borde);
    min-height: 16rem;
  }

  /* La cadena pasa de fila horizontal a columna con línea vertical */
  .cadena__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-5) var(--e-4);
  }
  .cadena__lista::before { display: none; }
  .eslabon__punto { margin-bottom: var(--e-2); }

  .pie__principal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-7) var(--e-5);
  }
  .pie__marca { grid-column: 1 / -1; }

  .franja-local { grid-template-columns: minmax(0, 1fr); }
  .franja-local__resto { grid-column: 1; }
}

/* ═══ ≤ 900 px · las dimensiones y el proceso se reorganizan ═══ */
@media (max-width: 900px) {

  .dimensiones { grid-template-columns: minmax(0, 1fr); }
  .dimension {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: var(--e-4);
    padding: clamp(1.25rem, 1rem + 1.4vw, 1.75rem) 0;
  }
  .dimension + .dimension {
    padding-left: 0;
    border-left: 0;
  }
  .dimension__titulo { margin-top: 0; }
  .dimension__texto { max-width: 56ch; }

  /* Disciplinas: de cuatro columnas a dos, con el lema debajo */
  .disciplina__boton {
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    grid-template-areas:
      "num titulo mas"
      "num lema   mas";
    gap: var(--e-2) var(--e-4);
    align-items: start;
  }
  .disciplina__num { grid-area: num; padding-top: 0.4em; }
  .disciplina__titulo { grid-area: titulo; }
  .disciplina__lema { grid-area: lema; }
  .disciplina__mas { grid-area: mas; width: 2.25rem; height: 2.25rem; }

  .disciplina__interior {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-4);
  }
  .disciplina__texto,
  .campos,
  .disciplina__aviso { grid-column: 1; }

  .cadena__lista { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .eslabon { border-bottom: 1px solid var(--borde); }
  .eslabon:last-child { border-bottom: 0; }
  .eslabon__boton {
    flex-direction: row;
    align-items: center;
    gap: var(--e-4);
    padding: var(--e-4) 0;
  }
  .eslabon__punto { margin-bottom: 0; flex-shrink: 0; }
  .eslabon__nombre { flex: 1; }
  .eslabon__dato { flex: 1; text-align: right; font-size: var(--t-micro); }

  .lab { grid-template-columns: minmax(0, 1fr); }

  /* Proceso: el flujo se lee en línea */
  .flujo { gap: var(--e-2) var(--e-2); }
  .flujo li { font-size: var(--t-cuerpo); }
  .flujo li:not(:last-child)::after { width: 0.75rem; }

}

/* ═══ ≤ 720 px · móvil de trabajo ═══ */
@media (max-width: 720px) {

  /* Enlaces de acción dentro de un párrafo: se tocan con el dedo, así que
     llevan altura de objetivo táctil sin romper el flujo del texto.
     Vive aquí y no en 560px porque en tablet el dedo también toca. */
  .cierre-seccion a,
  .cadena__cierre a,
  .nota-sistema a,
  .pie__legal a,
  .pie__cierre a,
  .panel__pie a,
  .detras__enlace a,
  .flujo__enlace a {
    display: inline-block;
    padding-block: 9px;
  }
  .pie__legales { gap: var(--e-1) var(--e-5); }
  .pie__legales a { display: inline-block; padding-block: 7px; }


  :root {
    --alto-cabecera: 4rem;
  }

  /* En móvil el botón flotante es compacto: solo icono, siempre a mano */
  .flotante { padding: 0.9375rem; gap: 0; }
  .flotante__texto { display: none; }

  .hero { padding-top: clamp(2rem, 1.5rem + 3vw, 3rem); }

  .hero__hechos {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-4);
  }
  .hecho {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: var(--e-3);
    align-items: baseline;
  }
  .hecho dd { margin-top: 0; }

  .hero__acciones .boton { flex: 1 1 100%; }

  .paquetes { grid-template-columns: minmax(0, 1fr); }

  /* Precio: primero el texto, después la acción, para no romper la lectura */
  .precio { text-align: left; }
  .precio__acciones { justify-items: stretch; }
  .precio__acciones .boton { width: 100%; }

  .lab-pieza--ancha .lab-pieza__visual { min-height: 14rem; }

  /* La cifra gigante del CUSTOM pasa a marca de agua superior */
  .custom::before {
    top: -6%;
    right: -6%;
    transform: none;
    font-size: min(24rem, 70vw);
    opacity: 0.32;
  }

  .llamada__acciones .boton { flex: 1 1 100%; }

  .datos { margin-top: var(--e-6); }
  .dato {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "clave  copiar"
      "valor  copiar";
    gap: 2px var(--e-3);
    align-items: center;
  }
  .dato__clave { grid-area: clave; min-width: 0; }
  .dato__valor { grid-area: valor; }
  .copiar { grid-area: copiar; align-self: center; }

  .pie__principal { grid-template-columns: minmax(0, 1fr); gap: var(--e-7); }

  /* Los enlaces del pie se tocan con el dedo: se les da altura cómoda
     sin que la columna parezca una lista de botones. */
  .pie__lista > li + li { margin-top: var(--e-3); }
  .pie__lista a,
  .pie__lista span {
    display: inline-block;
    font-size: var(--t-cuerpo);
    line-height: 1.65;
  }
  .pie__lista--contacto .pie__destacado { margin-bottom: var(--e-3); }
  .pie__legal { flex-direction: column; align-items: flex-start; gap: var(--e-4); }

  .enviado .boton { width: 100%; }

  /* Los mockups se reducen para no forzar scroll horizontal */
  .mock-panel__kpis { grid-template-columns: minmax(0, 1fr); }
  .pieza-formato--horizontal { width: 4.5rem; height: 2.5rem; }

  .legal__interior { padding-inline: 0; }
}

/* ═══ ≤ 560 px · móvil compacto ═══ */
@media (max-width: 560px) {

  .marca__nombre { font-size: var(--t-cuerpo); letter-spacing: 0.18em; }

  /* Aire comprimido en el hero: la primera pantalla tiene que terminar en el
     botón, no en el párrafo. */
  .hero__entrada { margin-top: var(--e-4); }
  .hero__acciones { margin-top: var(--e-6); }

  .sello {
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    padding: 6px 12px 6px 9px;
  }

  /* Maquetas de los ejemplos: en un teléfono chico, la fila de total más
     botones y los renglones de adeudos no caben en el ancho del bloque. */
  .mock-cobro { flex-direction: column; align-items: stretch; gap: 10px; }
  .mock-cobro__acciones { flex-wrap: wrap; }
  .mock-adeudo { flex-wrap: wrap; row-gap: 2px; }
  .mock-adeudo__quien { flex: 1 1 100%; }
  .mock-orden { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mock-orden .estado { justify-self: start; }

  .panel { padding: var(--e-4); }
  .panel__cabecera { flex-direction: column; gap: 2px; align-items: flex-start; }

  .dimension {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: var(--e-4);
  }

  .principio {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-2);
  }

  .ficha { padding: var(--e-5); }
  .ficha__lista > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .resolutor__panel,
  .formulario,
  .proceso__detalle { padding: var(--e-5); }

  .situacion__texto { font-size: var(--t-cuerpo); }
  .situacion__indicio { opacity: 1; transform: none; }

  .disciplina__boton {
    grid-template-columns: 2rem minmax(0, 1fr) 2.25rem;
    gap: var(--e-2) var(--e-3);
  }
  .disciplina__titulo { font-size: var(--t-n5); }
  .disciplina__lema { font-size: var(--t-menudo); }
  .disciplina__mas { width: 2rem; height: 2rem; }

  .campos li { font-size: var(--t-micro); padding: 4px 10px; }

  .lab-pieza__visual { padding: var(--e-5) var(--e-4); }
  .lab-pieza--ancha .lab-pieza__visual { min-height: 12rem; }
  .mock-chat { max-width: 100%; }
  .mock-agenda__bloques .bloque { margin-left: calc(var(--i) * 5px); }
  .mock-identidad__nombre { font-size: 1.375rem; letter-spacing: 0.24em; }
  .mock-identidad__paleta i { width: 1.875rem; height: 1.875rem; }

  .paquete { padding: var(--e-5); }
  .paquete__pie { font-size: var(--t-menudo); }

  .faq__pregunta { font-size: var(--t-cuerpo); }

  .cadena__nota { padding-left: var(--e-4); }

  .eslabon__boton { flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
  .eslabon__dato { flex: 1 1 100%; text-align: left; }

  .llamada__pie { font-size: var(--t-menudo); }
}

/* ═══ ≤ 400 px · pantallas mínimas (320 px) sin desbordes ═══ */
@media (max-width: 400px) {

  :root {
    --margen: 1rem;
  }

  .marca__nombre { letter-spacing: 0.12em; }
  .menu-boton { width: 40px; height: 40px; }

  .campos li { font-size: var(--t-micro); }

  .mock-panel__cuerpo { padding: 10px; }
  .mock-tabla p { font-size: 0.625rem; }
  .mock-kpi strong { font-size: 0.9375rem; }

  .principio__clave { font-size: var(--t-cuerpo); }

  .drawer-margen { margin-inline: 0; }
}

/* ═══ Pantallas altas y anchas: más aire, misma estructura ═══ */
@media (min-width: 1400px) {
  :root { --ancho-max: 1320px; }
}

/* ═══ Modo claro/oscuro del sistema: el sitio define su propia paleta,
       pero respetamos la preferencia para el fondo de la barra del navegador ═══ */
@media (prefers-color-scheme: light) {
  :root { color-scheme: light; }
}

/* ═══ Sin JS: nada puede quedar oculto ni inutilizable ═══ */
/* Sin JavaScript, todo el contenido que el script revela debe verse igual.
   Estas reglas no cubren un ancho en particular: van fuera de los bloques
   de punto de quiebre, porque el problema no es de tamaño de pantalla. */
html:not(.js) .caso[hidden],
html:not(.js) .disciplina__cuerpo[hidden],
html:not(.js) .faq__respuesta--mas > details > .faq__respuesta {
  display: block;
}
html:not(.js) .caso[hidden] { padding-top: var(--e-5); }
html:not(.js) .caso { animation: none; }

@media (max-width: 1140px) {
  html:not(.js) .nav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    background: transparent;
    border: 0;
    padding: 0;
    gap: var(--e-4);
  }
  /* Sin JavaScript la cabecera se reordena: la marca arriba y el menú
     debajo, en dos filas. Si se deja el menú al lado, se sale de la
     pantalla en un teléfono. */
  html:not(.js) .cabecera__interior {
    flex-wrap: wrap;
    height: auto;
    padding-block: var(--e-3);
    row-gap: var(--e-3);
  }
  html:not(.js) .nav {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  html:not(.js) .nav__lista { flex-direction: row; flex-wrap: wrap; gap: var(--e-3); }
  html:not(.js) .nav__contacto { flex-direction: row; margin-left: auto; }
  html:not(.js) .menu-boton { display: none; }
  html:not(.js) .disciplina__cuerpo[hidden] { display: block; }
}

/* ═══════════════ GLOBOS DE PRECIO CON RATÓN ═══════════════
   Hasta 1140 px los globos entran en el flujo y se abren con el clic (lo
   maneja interacciones.js). El :hover solo se activa donde de verdad existe un
   puntero fino: en una pantalla táctil el :hover se queda «pegado» después del
   toque, y entonces el globo no se cierra aunque el botón diga que está
   cerrado. Es el mismo motivo por el que el toque y el ratón se separan. */
@media (max-width: 1140px) and (hover: hover) and (pointer: fine) {
  /* Los globos del hero sí siguen abriéndose con el ratón: miden una línea y no
     empujan nada. Los de la tabla de precios ya no: son fichas de 200 a 270 px
     que ahora entran en el flujo, y abrirlas con solo pasar el cursor
     reacomodaría la tabla entera. Se abren al tocar el renglón. */
  .hecho:hover .hecho__globo,
  .hecho:focus-within .hecho__globo {
    display: block;
  }
}

/* ═══ ≤ 560 px · el titular fluye ═══
   «Cada negocio opera distinto. / Su software también debería.» son dos frases
   completas. Con cada una en su propio renglón, en un teléfono se parten en
   cuatro líneas. Dejándolas fluir como un solo texto, el navegador reparte el
   conjunto en tres, que es lo que mide la pantalla. El color sigue marcando la
   segunda frase: solo cambia dónde puede cortar el navegador. */
@media (max-width: 560px) {
  /* El selector lleva .js a propósito: animaciones.css declara
     `.js .hero__linea { display: block }` para la entrada por líneas, y con dos
     clases le gana a un `.hero__linea` a secas. Aquí se empata la
     especificidad y, como esta hoja carga después, manda esta. */
  .js .hero__linea,
  .hero__linea { display: inline; }
  /* En un elemento en línea el transform no se aplica, así que la entrada por
     líneas se queda en un fundido. Es el precio de que el titular quepa. */
  .js .hero__linea { transform: none; }
}

/* ═══ ≤ 360 px · el bloque de negocios baja un escalón ═══
   A 24 px en una pantalla de 320, la frase más larga se va a siete renglones y
   el bloque se come media pantalla. Baja al escalón de pieza (20 px) y vuelve a
   cinco. Medido: 7 renglones y 222 px antes, 5 renglones y ~140 px después. */
@media (max-width: 360px) {
  .giros__rotador { font-size: var(--t-n5); }
}

/* ═══ ≤ 560 px · las tablas de precio se aprietan ═══
   En un teléfono las cinco tablas sumaban 2,312 px de alto y la página se hacía
   interminable. El relleno de cada renglón baja de 12 a 8 px y el precio se pega
   al borde: se ganan unos 250 px sin que nada se vea apretado, porque el aire
   que importa —el de entre renglones— sigue ahí. */
@media (max-width: 560px) {
  .tarifa { margin-top: var(--e-4); }
  .tarifa__boton { padding: 0.5rem 0.5rem 0.5rem 0; }
  .tarifa__precio { padding: 0.5rem 0; }
  .tarifa thead th { padding-bottom: 0.5rem; }
}