/* Boton de llamada a la accion "Agendar reunion" (barra superior y pie).
 * Color: el lima #bff747 que el sitio ya usa como acento sobre fondos oscuros,
 * con texto oscuro (contraste 13:1). Destaca sobre el pie morado sin sumar un color nuevo a la paleta.
 */
.aut-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem 1.35rem; border-radius: 999px; border: 2px solid #bff747;
  background: #bff747; color: #252322 !important;
  font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 700; line-height: 1.2; letter-spacing: .2px;
  text-decoration: none !important; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.aut-cta:hover, .aut-cta:focus-visible { background: #ffffff; border-color: #ffffff; color: #14606f !important; transform: translateY(-1px); }
.aut-cta:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .aut-cta { transition: none; } .aut-cta:hover, .aut-cta:focus-visible { transform: none; } }

/* Pie: el boton va SIEMPRE centrado (pedido del titular). En pantalla ancha queda al medio del pie,
 * entre "Automatiza" a la izquierda y las politicas a la derecha. */
.aut-cta-foot { margin: 1.25rem 0 0; text-align: center; }

/* Banners compactos y menu en dos filas.
 * Entre 992 y 1099 px los enlaces del menu no caben en una fila: el menu pasa de ~101 px a ~185 px de alto
 * (medido) y, como es translucido y va superpuesto, tapaba lo que hay bajo los banners bajos: la primera imagen
 * de servicios-oracle, el mensaje de las paginas de error y el titulo de agendar-reunion.
 * En ese rango los banners compactos crecen para que el contenido empiece siempre debajo del menu. Los banners
 * altos (260 px, politicas) no se tocan. El alto va en linea en cada pagina; por eso se eligen por su valor. */
@media (min-width: 992px) and (max-width: 1099px) {
  .header-banner-oscuro > div[style*="min-height:100px"] { min-height: 200px !important; }   /* sin titulo */
  .header-banner-oscuro > div[style*="min-height:132px"] { min-height: 244px !important; }   /* con titulo abajo */
}

/* ------------------------------------------------------------------ Barra superior de aviso (sobre el menu) */
/* Verde claro (lima palido, de la familia del acento #bff747 del sitio): llama la atencion y combina con el
 * verde azulado del menu. Fila centrada "frase + boton";
 * si no caben en una linea, el boton baja y queda centrado bajo la frase. */
.aut-topbar {
  position: relative; z-index: 1031;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem 1.1rem;
  background: #e2f6c4; color: #12343b;
  border-bottom: 1px solid #c3e397;
  text-align: center; padding: .5rem 1rem;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: .95rem; line-height: 1.4;
}
.aut-topbar p { margin: 0; }
/* El lima del pie se pierde sobre el verde claro: en la barra el boton va en el verde azulado oscuro del sitio. */
.aut-topbar .aut-cta-top {
  padding: .38rem 1.15rem; font-size: .9rem;
  background: #0b4f5c; border-color: #0b4f5c; color: #ffffff !important;
}
.aut-topbar .aut-cta-top:hover, .aut-topbar .aut-cta-top:focus-visible { background: #ffffff; border-color: #0b4f5c; color: #0b4f5c !important; }
.aut-topbar .aut-cta-top:focus-visible { outline: 3px solid #0b57d0 !important; outline-offset: 2px; }
/* El menu es position:absolute; top:0: anclado a su seccion, baja con la barra en lugar de cubrirla. */
section.menu2 { position: relative; }
/* Frase (~420 px) + boton (~295 px) caben en UNA linea, el boton a la derecha, desde ~780 px de ancho.
 * Por debajo, el boton baja y queda centrado bajo la frase. */
@media (max-width: 575px) {
  .aut-topbar { font-size: .84rem; padding: .5rem .75rem .6rem; }
}

/* ------------------------------------------------------------------ Carrusel de la portada: el texto empieza un poco bajo la mitad */
/* El tema ancla el texto al borde inferior (align-items: flex-end): empezaba al 77 % del alto de la imagen en escritorio y
 * al 64-70 % en tablet y telefono. Ahora empieza un poco bajo la mitad. El contraste del texto blanco sobre las tres imagenes
 * se verifica con contraste_carrusel.py (minimo AA 4,5:1). El bloque tiene un alto minimo fijo, asi que la posicion se fija con
 * el relleno superior. Escritorio: 393 px = 57 % de 690. En tablet y telefono el titulo de la primera diapositiva ocupa hasta
 * 3 lineas (la altura crece con el texto), por eso alli el bloque es mas alto y el texto queda en torno al 55 %. */
section.cid-vhEoEjaWwO .embla__slide .slide-content .item-wrapper { align-items: flex-start; padding-top: 393px; }
@media (max-width: 992px) {
  /* Tablet: el bloque deja de ser de alto libre; 410 px = 55 % de 745. */
  section.cid-vhEoEjaWwO .embla__slide .slide-content .item-wrapper { min-height: 745px; padding-top: 410px; }
  section.cid-vhEoEjaWwO .embla__slide .slide-content .item-wrapper .item-content { padding-top: 0; }
}
@media (max-width: 575px) {
  /* Telefono: los textos ocupan mas lineas; el bloque es mas alto para que sigan bajo la mitad. 420 px = 55 % de 760. */
  section.cid-vhEoEjaWwO .embla__slide .slide-content .item-wrapper { min-height: 760px; padding-top: 420px; }
}
/* Degradado del carrusel: el del tema (mbr-additional.css) iba de negro opaco abajo a transparente arriba en TODO el alto,
 * asi que a media imagen ya tapaba el 50 % y oscurecia la mitad inferior. Ahora la mitad superior queda limpia y el negro
 * solo sube bajo el texto (que empieza al 55-57 %), con 70 % como maximo abajo. Verificado con el contraste de
 * contraste_carrusel.py a 390, 900, 1414 y 1920 px: las tres imagenes cumplen AA (titulo >= 3:1, descripcion >= 4,5:1). */
section.cid-vhEoEjaWwO .embla__slide .slide-content .item-wrapper::before {
  background-image: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .45) 40%, rgba(0, 0, 0, 0) 55%);
}
/* Pie de TODAS las paginas: las reglas van por la clase .footer1, no por el cid de la portada, porque cada
 * pagina trae su propio cid (vhc3dGejaI, vheZiDoIiV, vi1pFQT6lj...) con estilos identicos; apuntando al cid,
 * el pie nuevo solo se veia en la portada.
 * Las tres politicas iban una por columna, repartidas a lo ancho. Ahora van juntas en una sola columna,
 * en vertical y alineadas a la derecha desde 992 px; en movil quedan a la izquierda, que se lee mejor. */
@media (min-width: 992px) {
  .aut-foot-links .list { text-align: right; }
  /* La fila arranca por la izquierda con el nombre; el boton ocupa la mitad siguiente y se centra en ella,
   * de modo que cae en el medio del pie (la columna del nombre mide 8 de 12 y las politicas 4). */
  section.footer1 .card .content-wrapper { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
  section.footer1 .card .content-wrapper .title-wrapper { flex: 1 1 0; }
  section.footer1 .card .content-wrapper .aut-cta-foot { flex: 1 1 0; }
  section.footer1 .card .content-wrapper .title-wrapper .title-wrap { margin-bottom: 0; }
  section.footer1 .card .content-wrapper .aut-cta-foot { margin: 0; }
  section.footer1 .card { margin-bottom: 0; }
  section.footer1 .list-wrapper .list { margin-bottom: 0; }
}

/* Fondo de la barra del menu: el tema lo deja al 40 % de opacidad y el contenido de atras se transparenta demasiado.
 * Sube a 85 % (mismo color #1a7a90). La barra ya abierta y los desplegables siguen opacos, como estaban. */
section.cid-sHKWYLKmZ1 .navbar { background: rgba(26, 122, 144, .85); }

/* Las imagenes se aclararon y enfocaron (22-09-2026); la sombra suave da margen al texto blanco sobre zonas claras
 * (la descripcion de Consultoria en telefono quedaba justo en 4,5:1). */
section.cid-vhEoEjaWwO .embla__slide .slide-content .item-wrapper .item-content { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }

/* Nosotros > Industrias y Sectores (#clientes): la caja del titulo es verde oscuro y va pegada al borde izquierdo de la
 * ventana. El tema la separa del borde con el relleno del contenedor (32 px) y con el margen y relleno de la fila y la
 * columna; se ponen a 0 solo por el lado izquierdo. Solo existe en nosotros.html. */
#header01-ec .container-fluid { padding-left: 0; }
#header01-ec .row { margin-left: 0; }
#header01-ec .card { padding-left: 0; }
#header01-ec .content-wrapper { background-color: #0f3d2e; }