/* Landing de turnos. Prefijo .amt4- ; --amt4-c1/--amt4-c2 = colores del sitio. */

.amt4-wrap{--amt4-ink:#1f2b45;--amt4-ink-soft:#6b7793;--amt4-line:#e7eaf3;--amt4-bg:#fff;--amt4-bg-soft:#f7f8fc;
  --amt4-c3:color-mix(in srgb, var(--amt4-c1) 50%, var(--amt4-c2));
  /* base de TODOS los color-mix (velos del acento, degradés del hero). Es una variable y no
     #fff literal para que el modo oscuro los recalcule sobre el fondo oscuro. */
  --amt4-mix:#fff;
  --amt4-shadow:0 10px 30px rgba(31,43,69,.07);
  color:var(--amt4-ink);font-size:15px;line-height:1.45;margin:0 auto 1.25rem;max-width:1120px;width:100%}
.amt4-wrap *,.amt4-wrap *:before,.amt4-wrap *:after{box-sizing:border-box}
.amt4-wrap img{max-width:100%}

/* ---------- hero ---------- */
.amt4-hero{background:var(--amt4-bg);border:1px solid var(--amt4-line);border-radius:26px;display:flex;
  flex-wrap:wrap;box-shadow:var(--amt4-shadow);overflow:hidden}
/* foto: sangra hasta el borde y se recorta a lo alto (como el preset) */
.amt4-hero-media{background:linear-gradient(160deg,#eef2fb,#fdf1f4);flex:0 0 40%;max-width:40%;min-height:420px;
  align-items:center;display:flex;justify-content:center;overflow:hidden;padding:0}
.amt4-hero-media img{height:100%;object-fit:cover;width:100%}
/* logo de marca: NO se recorta, y el panel no crece de más */
.amt4-hero-media.is-logo{min-height:300px;padding:2rem}
.amt4-hero-media.is-logo img{height:auto;max-height:170px;object-fit:contain;width:auto}
/* modo 6: sin degrade detras del logo. El degrade existe para que una FOTO no quede
   pegada al borde de la tarjeta; detras de un logo con fondo propio es una mancha de
   color que no es de la marca. Toma --amt4-bg, o sea blanco en claro y la superficie
   oscura en oscuro (abajo se le vuelve a poner, porque la regla de oscuro del media
   gana por especificidad). */
.amt4-hero-media.is-plain{background:var(--amt4-bg)}
/* el cuerpo monta sobre la foto con una esquina redonda grande = la "hoja" del preset */
.amt4-hero-body{background:linear-gradient(140deg,var(--amt4-mix) 0%,
    color-mix(in srgb, var(--amt4-c1) 5%, var(--amt4-mix)) 55%,
    color-mix(in srgb, var(--amt4-c2) 9%, var(--amt4-mix)) 100%);
  border-radius:38px 0 0 38px;flex:1 1 400px;margin-left:-38px;padding:2.4rem 2.2rem;position:relative;z-index:1}
/* con logo no hay foto que montar: el solape le comía un pedazo a la marca */
.amt4-hero-media.is-logo+.amt4-hero-body{border-radius:0;margin-left:0}
.amt4-hero h1{color:var(--amt4-c1);font-size:2.4rem;font-weight:800;letter-spacing:-.5px;line-height:1.1;margin:0 0 .45rem}
.amt4-hero-tag{color:var(--amt4-ink-soft);font-size:1.05rem;margin:0 0 1.5rem}

/* Badges: TIRA de ancho completo, un tercio cada uno y el contenido centrado.
   Antes iban pegados a la izquierda y ocupaban media caja, así que quedaban
   descolgados del CTA (full width) y de la línea de "información protegida"
   (centrada). Los separadores verticales siguen siendo del preset. */
.amt4-badges{border-top:1px solid var(--amt4-line);border-bottom:1px solid var(--amt4-line);display:flex;
  flex-wrap:wrap;list-style:none;margin:0 0 1.4rem;padding:.9rem 0;width:100%}
.amt4-badges li{align-items:center;color:var(--amt4-ink-soft);display:flex;flex:1 1 0;font-size:.85rem;gap:.6rem;
  justify-content:center;line-height:1.25;min-width:0;padding:.2rem .9rem;position:relative;text-align:left}
.amt4-badges li+li:before{background:var(--amt4-line);content:'';height:28px;left:0;position:absolute;top:50%;
  transform:translateY(-50%);width:1px}
.amt4-badges i{color:var(--amt4-c1);flex:0 0 auto;font-size:1.3rem}
/* con lugar de sobra los tres van en una línea: mezclar uno de una línea con dos de
   dos deja la tira despareja. En angosto vuelven a envolver (ver el media query). */
@media (min-width:900px){ .amt4-badges span{white-space:nowrap} }
.amt4-badges li:nth-child(2) i{color:var(--amt4-c3)}
.amt4-badges li:nth-child(3) i{color:var(--amt4-c2)}

/* Datos del consultorio en el encabezado (sólo modo 4: en el 5 están abajo, en su
   propio panel). Es una línea de ítems que envuelve, no una grilla: puede haber uno
   o tres según lo que el tenant tenga cargado en mysettings. */
.amt4-hero-info{color:var(--amt4-ink-soft);display:flex;flex-wrap:wrap;font-size:.87rem;gap:.5rem 1.4rem;
  margin:0 0 1.4rem}
.amt4-hero-item{align-items:center;color:inherit;display:inline-flex;gap:.45rem;max-width:100%;text-decoration:none}
.amt4-hero-item i{color:var(--amt4-c1)}
a.amt4-hero-item:hover{color:var(--amt4-c1)}

.amt4-covs{background:var(--amt4-bg);border:1px solid var(--amt4-line);border-radius:18px;box-shadow:var(--amt4-shadow);
  margin-bottom:1.4rem;padding:1.1rem 1.25rem}
.amt4-covs h6{font-size:1.02rem;font-weight:700;margin:0 0 .8rem}
.amt4-cov-list{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}
.amt4-chip{align-items:center;background:var(--amt4-bg);border:1px solid var(--amt4-line);border-radius:999px;
  cursor:pointer;display:inline-flex;font-size:.88rem;font-weight:600;gap:.5rem;padding:.5rem 1rem;transition:.15s}
.amt4-chip:hover{border-color:var(--amt4-c1);box-shadow:0 4px 12px rgba(31,43,69,.08);transform:translateY(-1px)}
.amt4-chip.on{background:var(--amt4-c1);border-color:var(--amt4-c1);color:#fff}
.amt4-chip img{border-radius:4px;height:22px;object-fit:contain;width:auto}
/* "+ Ver más": empujado al extremo derecho, igual que el preset */
.amt4-chip-ghost{background:transparent;color:var(--amt4-ink-soft);font-weight:500;margin-left:auto}

.amt4-cta{align-items:center;background:linear-gradient(90deg,var(--amt4-c1),var(--amt4-c2));border:0;border-radius:999px;
  box-shadow:0 10px 24px color-mix(in srgb, var(--amt4-c2) 28%, transparent);color:#fff;cursor:pointer;display:flex;
  font-size:1.15rem;font-weight:700;gap:.6rem;justify-content:center;padding:1.05rem 1.5rem;position:relative;transition:.15s;width:100%}
.amt4-cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.amt4-cta .amt4-cta-arrow{align-items:center;background:rgba(255,255,255,.22);border-radius:50%;display:flex;height:30px;
  justify-content:center;position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);width:30px}
.amt4-secure{align-items:center;color:var(--amt4-ink-soft);display:flex;font-size:.85rem;gap:.45rem;justify-content:center;margin-top:.9rem}

/* ---------- barra de reserva fija al pie ---------- */
/* Aparece cuando el encabezado -y con el, su CTA- ya salio de pantalla. Quien lo decide es
   un IntersectionObserver sobre .amt4-hero (js.js), no un umbral de scroll.
   position:fixed y no sticky a proposito: es un overlay de ancho completo POR ENCIMA del
   contenido, y un sticky se queda dentro de la caja de su padre (ver slots4_boot.php).
   La entrada la anima un keyframe y no una transition: el elemento lo monta un v-if, o sea
   que nace ya en su posicion final y no hay estado previo del que transicionar. */
.amt4-stickycta{animation:amt4CtaUp .25s ease;background:var(--amt4-bg);border-top:1px solid var(--amt4-line);
  bottom:0;box-shadow:0 -6px 20px rgba(31,43,69,.12);left:0;padding:.7rem 1rem;
  position:fixed;right:0;z-index:900}
@keyframes amt4CtaUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .amt4-stickycta{animation:none} }
.amt4-stickycta-in{align-items:center;display:flex;gap:1rem;justify-content:center;margin:0 auto;max-width:1120px}
/* el CTA del hero es full width; en la barra es un boton normal y sin la flecha del circulo */
.amt4-stickycta .amt4-cta{flex:0 0 auto;font-size:1rem;padding:.8rem 1.6rem;width:auto}
.amt4-stickycta-txt{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* el alto que tapa la barra, reservado de entrada (ver la nota de has-cta en slots4.php) */
.amt4-wrap.has-cta{padding-bottom:5.5rem}

/* ---------- buscador ---------- */
.amt4-panel{background:var(--amt4-bg);border:1px solid var(--amt4-line);border-radius:20px;box-shadow:var(--amt4-shadow);
  margin-top:1.25rem;overflow:hidden}
.amt4-tabs{background:var(--amt4-bg-soft);border-bottom:1px solid var(--amt4-line);display:flex;flex-wrap:wrap}
.amt4-tab{align-items:center;background:transparent;border:0;border-bottom:3px solid transparent;color:var(--amt4-ink-soft);
  cursor:pointer;display:flex;flex:1 1 33%;font-size:.97rem;font-weight:600;gap:.55rem;justify-content:center;
  padding:1.15rem .75rem;transition:.15s}
.amt4-tab:hover{background:color-mix(in srgb, var(--amt4-c1) 5%, transparent);color:var(--amt4-ink)}
.amt4-tab.on{background:var(--amt4-bg);border-bottom-color:var(--amt4-c1);border-radius:16px 16px 0 0;color:var(--amt4-c1)}
/* el icono acompaña al texto: sin esto el de la pestaña activa quedaba gris */
.amt4-tab i{font-size:1.05rem}
.amt4-tab.on i{color:var(--amt4-c1)}
.amt4-panel-body{padding:1.35rem}
/* buscador tipo píldora */
.amt4-searchbox{align-items:center;background:var(--amt4-bg-soft);border:1px solid var(--amt4-line);border-radius:999px;
  display:flex;gap:.7rem;padding:.85rem 1.25rem;transition:.15s}
.amt4-searchbox:focus-within{background:var(--amt4-bg);border-color:var(--amt4-c1);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--amt4-c1) 12%, transparent)}
.amt4-searchbox i{color:var(--amt4-ink-soft)}
.amt4-searchbox input{background:transparent;border:0;color:var(--amt4-ink);flex:1;font-size:1rem;outline:0;padding:0}
.amt4-searchbox .amt4-clear{color:var(--amt4-ink-soft);cursor:pointer;font-size:1.2rem;line-height:1}
.amt4-hint{color:var(--amt4-ink-soft);font-size:.88rem;font-weight:600;margin:1.2rem 0 .7rem}
.amt4-empty{color:var(--amt4-ink-soft);padding:1.25rem 0;text-align:center}

/* ---------- grillas / cards ---------- */
.amt4-section{background:var(--amt4-bg);border:1px solid var(--amt4-line);border-radius:20px;box-shadow:var(--amt4-shadow);
  margin-top:1.25rem;padding:1.6rem}
.amt4-section h3{font-size:1.2rem;font-weight:700;margin:0 0 1.25rem}
/* titulo + contador en una linea. El contador solo sale con un filtro puesto
   (ver amt4Filtered en js.js), asi que la fila no siempre tiene dos elementos. */
.amt4-sec-head{align-items:baseline;display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between}
.amt4-sec-head h3{margin-bottom:1.25rem}
.amt4-count{color:var(--amt4-ink-soft);font-size:.88rem;font-weight:600}
/* Barra del filtro activo: la cobertura se elige arriba y recorta la grilla de aca
   abajo. Sin esta barra el recorte no tenia explicacion ni forma de deshacerse. */
.amt4-filterbar{align-items:center;background:color-mix(in srgb, var(--amt4-c1) 8%, var(--amt4-mix));
  border:1px solid color-mix(in srgb, var(--amt4-c1) 30%, var(--amt4-mix));border-radius:14px;display:flex;
  flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;margin:0 0 1.15rem;padding:.7rem 1rem}
.amt4-filterbar>span{align-items:center;display:inline-flex;font-size:.9rem;gap:.5rem}
.amt4-filterbar i{color:var(--amt4-c1)}
.amt4-filter-x{align-items:center;background:transparent;border:0;border-radius:999px;color:var(--amt4-c1);
  cursor:pointer;display:inline-flex;font-size:.87rem;font-weight:600;gap:.4rem;padding:.25rem .6rem}
.amt4-filter-x:hover{background:color-mix(in srgb, var(--amt4-c1) 15%, var(--amt4-mix))}
/* el estado vacio ofrece la salida, no solo la mala noticia */
.amt4-empty-btn{background:transparent;border:1px solid var(--amt4-line);border-radius:999px;color:var(--amt4-c1);
  cursor:pointer;display:inline-block;font-weight:600;margin-left:.6rem;padding:.4rem 1rem;transition:.15s}
.amt4-empty-btn:hover{border-color:var(--amt4-c1)}
/* auto-FIT y no auto-fill: con auto-fill la grilla deja CREADA la columna que sobra, asi que
   tres sedes en un ancho de cuatro columnas quedan pegadas a la izquierda con un hueco a la
   derecha (medido en 1600: 4 tracks de 254px para 3 cards). auto-fit colapsa la vacia y las
   que quedan se reparten la fila entera, alineadas con el buscador de arriba.
   El `1fr` se queda: con un max fijo (probamos 260/280/300) la cuenta de columnas BAJA -4 a 3
   en 1349, medido- y eso mueve el corte del "ver todos" de 8 a 6 en todos los tenants con
   muchos servicios. Lo que se acota es la CARD, no el track (abajo): asi una sola card no sale
   de 1067px de ancho y dos no salen de media pantalla cada una.
   OJO: amt4Measure() cuenta estas columnas para el corte del "ver todos" (amt4Cap). Con
   auto-fit colapsan SOLO cuando hay menos cards que columnas, y ahi el corte no importa porque
   ya entra todo. Medido en 1349 (26 servicios: 4 columnas, igual que antes) y en 1600 (3). */
.amt4-grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* cada card toma un acento del sitio y cicla c1 -> mezcla -> c2, como los 3 tonos del preset */
/* el tope de la card (no del track): con auto-fit una sola sede tomaria la fila entera */
.amt4-card{--amt4-ac:var(--amt4-c1);max-width:360px;margin-inline:auto;width:100%;
  background:var(--amt4-bg);border:1px solid var(--amt4-line);border-radius:18px;
  display:flex;flex-direction:column;padding:1.5rem 1.25rem;text-align:center;transition:.18s}
.amt4-card:nth-child(3n+2){--amt4-ac:var(--amt4-c3)}
.amt4-card:nth-child(3n+3){--amt4-ac:var(--amt4-c2)}
.amt4-card:hover{border-color:var(--amt4-ac);box-shadow:0 12px 26px rgba(31,43,69,.1);transform:translateY(-3px)}
/* la card entera es el boton (ver el role=button del template): sin el cursor no se
   lee como tal, y el hover del boton de adentro tiene que acompañar al de la card */
.amt4-card.is-click{cursor:pointer}
.amt4-card.is-click:hover .amt4-select{background:var(--amt4-ac);border-color:var(--amt4-ac);color:#fff}
.amt4-card-ico{align-items:center;background:color-mix(in srgb, var(--amt4-ac) 13%, var(--amt4-mix));border-radius:50%;color:var(--amt4-ac);
  display:flex;font-size:1.9rem;height:76px;justify-content:center;margin:0 auto 1rem;overflow:hidden;width:76px}
.amt4-card-ico img{height:100%;object-fit:cover;width:100%}
/* título y descripción con tope de líneas: la card la escribe el tenant y hay
   nombres y descripciones largas. El texto ya viene recortado (amt4Text), esto es
   el piso visual para que la fila no quede despareja. */
.amt4-card h4{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;font-size:1.02rem;font-weight:700;
  margin:0 0 .45rem;overflow:hidden}
.amt4-card-desc{-webkit-box-orient:vertical;-webkit-line-clamp:3;color:var(--amt4-ink-soft);display:-webkit-box;
  font-size:.87rem;margin:0 0 .95rem;overflow:hidden}
.amt4-meta{color:var(--amt4-ink-soft);display:flex;flex-wrap:wrap;font-size:.83rem;gap:.4rem 1.1rem;justify-content:center;margin-bottom:1rem}
.amt4-meta span{align-items:center;display:inline-flex;gap:.4rem}
.amt4-meta i{color:var(--amt4-ac)}
.amt4-price{font-weight:700;margin-bottom:.9rem}
.amt4-select{background:transparent;border:1px solid color-mix(in srgb, var(--amt4-ac) 45%, var(--amt4-mix));border-radius:999px;
  color:var(--amt4-ac);cursor:pointer;font-weight:600;margin-top:auto;padding:.65rem 1rem;transition:.15s;width:100%}
.amt4-select:hover{background:var(--amt4-ac);border-color:var(--amt4-ac);color:#fff}
.amt4-more{align-items:center;background:var(--amt4-bg);border:1px solid var(--amt4-line);border-radius:999px;
  color:var(--amt4-ink-soft);cursor:pointer;display:flex;font-weight:600;gap:.5rem;justify-content:center;
  margin:1.4rem auto 0;max-width:20rem;padding:.75rem 1.5rem;transition:.15s}
.amt4-more:hover{border-color:var(--amt4-c1);color:var(--amt4-c1)}

/* Foco de teclado. Las cards y los chips son botones (role=button + tabindex) y sin
   un anillo propio el tabulador se pierde: el reset del sitio saca el outline nativo.
   :focus-visible y no :focus para que el anillo no salte con el click del mouse. */
.amt4-wrap :focus-visible{outline:2px solid var(--amt4-c1);outline-offset:2px}
.amt4-card:focus-visible,.amt5-serv:focus-visible{border-color:var(--amt4-c1);outline-offset:3px}

/* ---------- wizard code99 embebido ---------- */
/* Mismo componente rxs99 del flujo clásico, montado acá en vez del panel #mbhelper
   (ver amt4OpenWizard en custom/amt/js.js). El CSS de .rxs99-* ya es claro, así que
   sólo hace falta el marco: encabezado del servicio/profesional + botón Volver. */
.amt4-wiz{margin-top:1.25rem}
.amt4-wiz-head{align-items:flex-start;background:linear-gradient(120deg,
    color-mix(in srgb, var(--amt4-c1) 8%, var(--amt4-mix)),
    color-mix(in srgb, var(--amt4-c2) 10%, var(--amt4-mix)));
  border-bottom:1px solid var(--amt4-line);display:flex;gap:1rem;padding:1.15rem 1.35rem}
.amt4-wiz-back{align-items:center;background:var(--amt4-bg);border:1px solid var(--amt4-line);border-radius:999px;
  color:var(--amt4-ink-soft);cursor:pointer;display:inline-flex;flex:0 0 auto;font-weight:600;gap:.4rem;
  padding:.5rem 1rem;transition:.15s}
.amt4-wiz-back:hover{border-color:var(--amt4-c1);color:var(--amt4-c1)}
.amt4-wiz-ico{align-items:center;background:color-mix(in srgb, var(--amt4-c1) 13%, var(--amt4-mix));border-radius:50%;
  color:var(--amt4-c1);display:flex;flex:0 0 auto;font-size:1.4rem;height:56px;justify-content:center;overflow:hidden;width:56px}
.amt4-wiz-ico img{height:100%;object-fit:cover;width:100%}
.amt4-wiz-title{color:var(--amt4-ink);font-size:1.3rem;font-weight:700;margin:0}
.amt4-wiz-sub{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--amt4-ink-soft);display:-webkit-box;
  font-size:.88rem;margin:.15rem 0 0;overflow:hidden}
/* descripción del servicio en el encabezado del wizard: entera y con su formato,
   plegada si es larga (ver amt4WizLong en js.js). El plegado es el mismo .is-clip
   que la ficha del modo 5; acá corta más bajo porque arriba del wizard el texto
   compite con los pasos. */
.amt4-wiz-desc{color:var(--amt4-ink-soft);font-size:.88rem;margin:.15rem 0 0}
.amt4-wiz-desc p{margin:0 0 .5rem}
.amt4-wiz-desc :last-child{margin-bottom:0}
.amt4-wiz-desc.is-clip{max-height:5.4em}
/* la del turno elegido adentro del wizard va debajo de la bio del profesional: se separa
   para que no se lean como un solo texto (ver rxs99RenderDesc en js.js) */
.amt4-wiz-tdesc{border-top:1px solid var(--amt4-line);margin-top:.6rem;padding-top:.6rem}
/* min-height: cada paso de code99 tiene distinta cantidad de opciones; sin un piso
   el panel se achica al cambiar de paso y la página pega un salto de scroll */
.amt4-wiz-body{min-height:430px;padding:1.35rem}
/* el componente trae su propio .container/.card de bootstrap: acá sobra */
.amt4-wiz-body .rxs99-container>.container{max-width:100%;padding:0!important}
.amt4-wiz-body .card{background:transparent!important;box-shadow:none!important}
/* el componente viene con su paleta propia (violeta/verde de fábrica): embebido
   tiene que seguir los colores del sitio, como el resto del landing */
.amt4-wiz-body .rxs99-container{--rxs99-primary-gradient:linear-gradient(135deg,var(--amt4-c1) 0%,var(--amt4-c2) 100%)}
.amt4-wiz-body .rxs99-progress-fill{background:linear-gradient(90deg,var(--amt4-c1),var(--amt4-c2))}
.amt4-wiz-body .rxs99-option-card:hover{border-color:var(--amt4-c1);box-shadow:0 10px 24px rgba(31,43,69,.12)}
.amt4-wiz-body .rxs99-option-price,.amt4-wiz-body .rxs99-breadcrumb-item:last-child{color:var(--amt4-c1)}
.amt4-wiz-body #code99-question{color:var(--amt4-ink);font-weight:700}

/* ---------- vista simple (slots_show = 5) ---------- */
/* Reusa los tokens y los componentes de arriba (.amt4-section, .amt4-chip,
   .amt4-card-ico, .amt4-select): acá sólo va la maqueta de dos columnas y la
   ficha de la consulta, que no existen en el modo 4. */
.amt5-cols{align-items:start;display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:1.25rem}
.amt5-cols>.amt4-section{margin-top:0}
@media (min-width:900px){
  .amt5-cols{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
  /* La lista de consultas es mas alta que la ficha del consultorio: sin esto la direccion
     y el telefono quedan arriba de todo y hay que volver a scrollear para verlos.
     top:5rem, no 0: el theme tiene el header fijo (.thr-fix header.topbar) y con top:0 la
     ficha se mete abajo de la barra.
     OJO si esto deja de pegar: durante mucho tiempo position:sticky NO funciono en NINGUNA
     pantalla del sistema porque css/style2.css ponia body{overflow-x:hidden}, y eso hace
     del body un scroll container que no scrollea. Se arreglo en njs/custom.css
     (html,body{overflow-x:clip}); si alguien revierte esa linea, esto vuelve a no pegar.
     Ver docs/sticky-overflow-body.md. */
  .amt5-info{position:sticky;top:5rem}
}

/* --amt4-ac lo define .amt4-card, que aca no existe: sin esta linea el circulo del
   icono se quedaba SIN fondo y SIN color (color-mix con una variable vacia es un valor
   invalido, asi que la regla entera se descarta) y el icono salia gris sobre nada. */
.amt5-serv{--amt4-ac:var(--amt4-c1);border:1px solid var(--amt4-line);border-radius:18px;padding:1.35rem;transition:.18s}
.amt5-serv+.amt5-serv{margin-top:1rem}
/* la ficha entera abre el wizard (role=button en el template) */
.amt5-serv.is-click{cursor:pointer}
.amt5-serv.is-click:hover{border-color:var(--amt4-ac);box-shadow:0 10px 22px rgba(31,43,69,.09)}
.amt5-serv.is-click:hover .amt4-select{background:var(--amt4-ac);border-color:var(--amt4-ac);color:#fff}
.amt5-serv-head{align-items:center;display:flex;gap:1rem;text-align:left}
/* el círculo del acento no se centra acá: la ficha es horizontal, no una card */
.amt5-serv .amt4-card-ico{flex:0 0 auto;margin:0}
.amt5-serv-id h4{font-size:1.25rem;font-weight:700;margin:0 0 .35rem}
.amt5-serv .amt4-meta{justify-content:flex-start;margin:0}
.amt5-serv-desc{color:var(--amt4-ink-soft);font-size:.92rem;margin:1rem 0 0}
.amt5-serv-desc p{margin:0 0 .5rem}
.amt5-serv-desc :last-child{margin-bottom:0}
/* descripción larga plegada (ver amt5DescLong / amt4WizLong en js.js): se desvanece
   contra el fondo, así se ve que sigue, y el toggle la abre. El máscara la comparten
   la ficha del modo 5 y el encabezado del wizard; cada uno pone su altura. */
.amt4-wrap .is-clip{-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);
  mask-image:linear-gradient(to bottom,#000 60%,transparent);overflow:hidden}
.amt5-serv-desc.is-clip{max-height:7.6em}
.amt5-desc-more{align-items:center;color:var(--amt4-c1);cursor:pointer;display:inline-flex;font-size:.87rem;
  font-weight:600;gap:.35rem;margin-top:.5rem}
.amt5-desc-more:hover{text-decoration:underline}
.amt5-serv .amt4-select{align-items:center;display:flex;gap:.5rem;justify-content:center;margin-top:1.2rem}

/* los buscadores aparecen sólo con más de 3 ítems (ver amt5ShowSearch): el hint que
   va abajo ya trae su propio margen, así que la caja sólo separa del título */
.amt5-consulta .amt4-searchbox,.amt5-covs .amt4-searchbox{margin-top:-.35rem}
.amt5-consulta .amt4-hint,.amt5-covs .amt4-hint{margin-bottom:.9rem}

.amt5-info-list{list-style:none;margin:0;padding:0}
.amt5-info-list li{align-items:flex-start;border-top:1px solid var(--amt4-line);display:flex;gap:.75rem;
  padding:.85rem 0}
.amt5-info-list li:first-child{border-top:0;padding-top:0}
.amt5-info-list i{color:var(--amt4-c1);font-size:1.05rem;line-height:1.5;width:1.2rem}
.amt5-info-list a{color:inherit;text-decoration:none}
.amt5-info-list a:hover{color:var(--amt4-c1);text-decoration:underline}

/* en este modo las coberturas no filtran nada: los chips no son botones */
.amt5-covs .amt4-chip{cursor:default}
.amt5-covs .amt4-chip:hover{border-color:var(--amt4-line);box-shadow:none;transform:none}

/* ---------- modo oscuro del sitio ---------- */
/* El switch del sitio (rxsToggleTheme, njs/g.js) no cambia hojas de estilo: pone
   .blacked/.thr-dark en el <body>. El landing es CSS propio, así que sin esto se queda
   blanco adentro de una página oscura. Todo se resuelve pisando los TOKENS del wrap
   (incluido --amt4-mix, la base de los color-mix): ninguna regla de abajo se duplica.
   Los tokens del tema (--bg-primary / --text-primary) los define .blacked en el bundle;
   los fallbacks son sus mismos valores, por si el landing corre sin ese CSS. */
body.blacked .amt4-wrap,body.thr-dark .amt4-wrap{
  --amt4-ink:var(--text-primary,#eaeaea);
  --amt4-ink-soft:var(--text-secondary,#99abb4);
  --amt4-line:rgba(120,130,140,.28);
  --amt4-bg:var(--bg-primary,#263238);
  --amt4-bg-soft:var(--bg-secondary,#383f48);
  --amt4-mix:var(--bg-primary,#263238);
  --amt4-shadow:0 10px 30px rgba(0,0,0,.35)}
/* el panel de la foto tiene su propio degradé claro (no sale de ningún token) */
body.blacked .amt4-hero-media,body.thr-dark .amt4-hero-media{background:linear-gradient(160deg,#2f3946,#3b3340)}
body.blacked .amt4-hero-media.is-plain,body.thr-dark .amt4-hero-media.is-plain{background:var(--amt4-bg)}
body.blacked .amt4-stickycta,body.thr-dark .amt4-stickycta{box-shadow:0 -6px 20px rgba(0,0,0,.5)}
body.blacked .amt4-card:hover,body.thr-dark .amt4-card:hover{box-shadow:0 12px 26px rgba(0,0,0,.45)}
body.blacked .amt5-serv.is-click:hover,body.thr-dark .amt5-serv.is-click:hover{box-shadow:0 10px 22px rgba(0,0,0,.45)}
body.blacked .amt4-chip:hover,body.thr-dark .amt4-chip:hover{box-shadow:0 4px 12px rgba(0,0,0,.4)}
/* el componente rxs99 embebido es claro de fábrica (background:white en adm.css) y no
   tiene modo oscuro propio: se le pisa acá, SOLO dentro del landing */
body.blacked .amt4-wiz-body .rxs99-option-card,body.thr-dark .amt4-wiz-body .rxs99-option-card{
  background:var(--amt4-bg-soft);border-color:var(--amt4-line)}
body.blacked .amt4-wiz-body .rxs99-option-card:hover,body.thr-dark .amt4-wiz-body .rxs99-option-card:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.45)}
body.blacked .amt4-wiz-body .rxs99-option-text,body.thr-dark .amt4-wiz-body .rxs99-option-text{color:var(--amt4-ink)}
body.blacked .amt4-wiz-body .rxs99-breadcrumb-item,body.thr-dark .amt4-wiz-body .rxs99-breadcrumb-item,
body.blacked .amt4-wiz-body .rxs99-breadcrumb-sep,body.thr-dark .amt4-wiz-body .rxs99-breadcrumb-sep,
body.blacked .amt4-wiz-body .rxs99-breadcrumb-label,body.thr-dark .amt4-wiz-body .rxs99-breadcrumb-label{color:var(--amt4-ink-soft)}
body.blacked .amt4-wiz-body .rxs99-progress-custom,body.thr-dark .amt4-wiz-body .rxs99-progress-custom{background:var(--amt4-line)}
body.blacked .amt4-wiz-body .rxs99-search-wrap input.form-control,
body.thr-dark .amt4-wiz-body .rxs99-search-wrap input.form-control{
  background:var(--amt4-bg-soft);border-color:var(--amt4-line);color:var(--amt4-ink)}

@media (max-width:767px){
  .amt4-hero-media{flex:0 0 100%;max-width:100%;min-height:260px}
  .amt4-hero-media.is-logo{min-height:180px;padding:1.5rem}
  .amt4-hero-body{border-radius:32px 32px 0 0;margin-left:0;margin-top:-32px;padding:1.6rem 1.35rem}
  .amt4-hero h1{font-size:1.75rem}
  .amt4-badges li{padding:.4rem 0;flex:1 1 100%}
  .amt4-badges li+li:before{content:none}
  .amt4-tab{flex:1 1 100%;justify-content:flex-start}
  .amt4-tab.on{border-radius:0}
  .amt4-wiz-head{flex-wrap:wrap}
  .amt4-wiz-body{min-height:340px}
  /* la burbuja del chat vive abajo a la derecha: sin este hueco la barra le pasa por debajo */
  .amt4-stickycta{padding-right:4.75rem}
  .amt4-stickycta .amt4-cta{padding:.75rem 1.1rem}
  .amt4-wiz-desc.is-clip{max-height:9.4em}
}