html, body { margin: 0; padding: 0; }
  body { font-family: Inter, system-ui, sans-serif; background: #ffffff; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: #6D28D9; text-decoration: none; }
  a:hover { color: #5B21B6; }
  ::selection { background: #DDD0FB; color: #1B1530; }
  @keyframes lfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  @keyframes lfBeam { 0%,100% { opacity: .32; } 50% { opacity: .7; } }
  @keyframes lfPulse { 0% { box-shadow: 0 0 0 0 rgba(124,58,237,.30); } 70% { box-shadow: 0 0 0 12px rgba(124,58,237,0); } 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); } }
  @keyframes lfSlideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
  @media (max-width: 1080px) { [data-nav-sec] { display: none !important; } }


/* Cambio de solapa en "Las cinco acciones": lo que se ve sale hacia un costado
   y lo nuevo entra desde el otro (producto.js, goTo). La salida es corta y
   acelera; la entrada, mas larga y frena al llegar. La maqueta entra apenas
   despues que el texto. El panel recorta para que nada asome por los bordes. */
@keyframes lfTabOutNext { to { opacity: 0; transform: translateX(-36px); } }
@keyframes lfTabOutPrev { to { opacity: 0; transform: translateX(36px); } }
@keyframes lfTabInNext { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes lfTabInPrev { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
#acciones [data-tour-panel] { overflow: hidden; }

/* Variante B de "Las cinco acciones": la tarjeta descansa inclinada en vez de
   plana. La inclinacion va en el contenedor que tambien lleva las flechas, asi
   que ellas giran con la tarjeta. Las solapas giran un poco al salir y entrar
   (keyframes -B), para que el cambio se lea como un pase en diagonal. La
   variante A (sin data-tour-stage) queda plana, como estaba. */
@keyframes lfTabOutNextB { to { opacity: 0; transform: translateX(-36px) rotate(-3deg); } }
@keyframes lfTabOutPrevB { to { opacity: 0; transform: translateX(36px) rotate(3deg); } }
@keyframes lfTabInNextB { from { opacity: 0; transform: translateX(44px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes lfTabInPrevB { from { opacity: 0; transform: translateX(-44px) rotate(-3deg); } to { opacity: 1; transform: none; } }
#acciones { overflow-x: clip; }
/* --s: tamano de la tarjeta. Se achica con scale (mantiene las proporciones) y
   producto.js (equalizePanel) recorta el hueco que deja con margenes negativos. */
#acciones [data-tour-stage] { --s: .92; transform: translateX(-110px) perspective(2000px) rotateY(-20deg) rotate(0deg) scale(var(--s)); transform-origin: 70% 40%; }
#acciones [data-tour-stage] [data-tour-panel][data-slide="out-next"] > div { animation-name: lfTabOutNextB; }
#acciones [data-tour-stage] [data-tour-panel][data-slide="out-prev"] > div { animation-name: lfTabOutPrevB; }
#acciones [data-tour-stage] [data-tour-panel][data-slide="in-next"] > div { animation-name: lfTabInNextB; }
#acciones [data-tour-stage] [data-tour-panel][data-slide="in-prev"] > div { animation-name: lfTabInPrevB; }
@media (max-width: 900px) {
  #acciones [data-tour-stage] { --s: 1; transform: rotate(-1deg); }
}
#acciones [data-tour-panel][data-slide="out-next"] > div { animation: lfTabOutNext .17s cubic-bezier(.4,0,1,1) forwards; }
#acciones [data-tour-panel][data-slide="out-prev"] > div { animation: lfTabOutPrev .17s cubic-bezier(.4,0,1,1) forwards; }
#acciones [data-tour-panel][data-slide="in-next"] > div { animation: lfTabInNext .42s cubic-bezier(.23,1,.32,1) both; }
#acciones [data-tour-panel][data-slide="in-prev"] > div { animation: lfTabInPrev .42s cubic-bezier(.23,1,.32,1) both; }
#acciones [data-tour-panel][data-slide^="in-"] > div + div { animation-delay: .05s; }

/* Variante C de "Las cinco acciones": carrusel con foco. Las cinco tarjetas
   comparten una celda de grilla (el alto es el de la mas alta); producto.js
   (cardStyle) les pone transform/opacity segun su distancia a la activa. */
#acciones [data-c-stage] { overflow: hidden; padding: 6px 0; }
/* El tamano se baja con zoom en la pista y no con el ancho de la tarjeta: asi
   las proporciones (y los saltos de linea) son las de una tarjeta de 900px y
   solo se ve mas chica. Ajustar zoom para cambiar el tamano. */
#acciones [data-c-track] { display: grid; zoom: .95; perspective: 1800px; perspective-origin: 50% 50%; }
#acciones [data-c-card] {
  grid-area: 1 / 1; justify-self: center; align-self: stretch; width: min(900px, 80%); box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px; align-items: center;
  border-radius: 22px; background: #272040; border: 1px solid #3A3160; padding: 28px;
  transition: transform .7s cubic-bezier(.23,1,.32,1), transform-origin .7s cubic-bezier(.23,1,.32,1), opacity .7s ease;
}
#acciones [data-c-stage] [data-tour-arrow] { left: 8px !important; z-index: 5; }
#acciones [data-c-stage] [data-tour-arrow][aria-label="Acción siguiente"] { left: auto !important; right: 8px !important; }
@media (max-width: 900px) {
  #acciones [data-c-track] { zoom: 1; }
  #acciones [data-c-card] { grid-template-columns: minmax(0, 1fr); width: 86%; padding: 22px; gap: 22px; }
}

/* Pantallas verticales (celular, tablet en vertical): la seccion de acciones va
   sin animaciones. Sin inclinacion, sin deslizamiento al cambiar de solapa y sin
   la entrada con fade de los textos. (producto.js, goTo, tambien lo respeta.) */
@media (orientation: portrait) {
  #acciones [data-tour-stage] { --s: 1; transform: none !important; margin: 0 !important; }
  #acciones [data-tour-panel] > div { animation: none !important; }
  #acciones [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  #acciones button { transition: none !important; }
  #acciones [data-c-card] { transition: none !important; }
}

/* Las solapas de acciones ponen la explicacion y la maqueta lado a lado. Por debajo de
   este ancho la maqueta se vuelve ilegible en dos columnas: se apilan, y las
   flechas absolutas pasan a quedar dentro del panel en vez de colgadas. */
@media (max-width: 900px) {
  #acciones [data-tour-panel] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; padding: 22px !important; }
  #acciones [data-tour-arrow] { display: none !important; }
}


/* La maqueta del dashboard dejo de ser la columna derecha de #problema y pasa a
   ser la seccion #pantalla, apoyada contra el hero. Adentro sigue siendo un
   lienzo fijo de 1180x604 escalado con transform, asi que el ancho y el alto de
   la caja tienen que acompanar al factor de escala en cada corte: si no, queda
   fondo gris a la derecha (la caja mas ancha que el contenido escalado) o se
   recorta la columna de numeros. Ancho de caja = 1180 * escala, alto = 604 *
   escala, y la tarjeta suma los 7px de padding de cada lado.

   La banda oscura del fondo de la seccion tambien acompana: corta a la mitad
   del alto de la tarjeta (604 * escala + 16, dividido dos), para que la maqueta
   quede montada sobre el hero en vez de apoyada apenas en el borde. */
@media (max-width: 960px) {
  #pantalla { background: linear-gradient(180deg, #1B1530 0%, #1B1530 202px, #fff 202px, #fff 100%) !important; }
  #pantalla [data-shot-card] { width: 769px; }
  #pantalla [data-shot] { width: 755px; height: 387px; }
  #pantalla [data-shot-inner] { transform: scale(.64); }
}
@media (max-width: 820px) {
  #pantalla { background: linear-gradient(180deg, #1B1530 0%, #1B1530 162px, #fff 162px, #fff 100%) !important; }
  #pantalla [data-shot-card] { width: 616px; }
  #pantalla [data-shot] { width: 602px; height: 308px; }
  #pantalla [data-shot-inner] { transform: scale(.51); }
}
@media (max-width: 620px) {
  #pantalla { background: linear-gradient(180deg, #1B1530 0%, #1B1530 129px, #fff 129px, #fff 100%) !important; }
  #pantalla [data-shot-card] { width: 486px; }
  #pantalla [data-shot] { width: 472px; height: 242px; }
  #pantalla [data-shot-inner] { transform: scale(.40); }
}
@media (max-width: 440px) {
  #pantalla { background: linear-gradient(180deg, #1B1530 0%, #1B1530 105px, #fff 105px, #fff 100%) !important; }
  #pantalla [data-shot-card] { width: 392px; }
  #pantalla [data-shot] { width: 378px; height: 194px; }
  #pantalla [data-shot-inner] { transform: scale(.32); }
}
@media (max-width: 400px) {
  #pantalla { background: linear-gradient(180deg, #1B1530 0%, #1B1530 85px, #fff 85px, #fff 100%) !important; }
  #pantalla [data-shot-card] { width: 315px; }
  #pantalla [data-shot] { width: 301px; height: 154px; }
  #pantalla [data-shot-inner] { transform: scale(.255); }
}

/* La ventana de /agreements/new de Copiloto B tiene el panel de analisis a la
   derecha; en angosto se apila debajo del formulario. */
@media (max-width: 820px) {
  #copiloto [data-faro-shot-grid] { grid-template-columns: minmax(0, 1fr) !important; }
  #copiloto [data-faro-shot-grid] > div:last-child { border-left: 0 !important; border-top: 1px solid #EEECF4; }
}

/* Sin la maqueta al lado, los cuatro puntos de #problema van en 2x2 y ocupan el
   ancho completo. Abajo de este corte vuelven a una sola columna, y el tercero
   pierde la linea inferior que ahi se superpondria con la del cuarto. */
@media (max-width: 760px) {
  #problema [data-prob-grid] { grid-template-columns: minmax(0, 1fr) !important; }
  #problema [data-prob-mid] { border-bottom: 0 !important; }
}